Chat Panel Denshobato

Create messaging system between Reseller and Customer.

Denshobato Chat Panel Github Repository

Part 3

In PART 1 we built a basic app with reseller and customer models, devise authentication and index templates to list our models.

In PART 2 we did the most of our app, made users able to send messages to each other, create conversations, add conversations to trash and add other users to blacklist.

In Part 3 we’ll install an additional plugin to our conversation, which adds a chat panel.

Chat Panel Denshobato

We start with adding this gem to our Gemfile

gem 'denshobato'
gem 'denshobato_chat_panel'

run bundle install

Next, run generator

rails g denshobato_chat_panel:install
  • Add denshobato_chat_panel method to your messagable models
class Customer < ActiveRecord::Base
  denshobato_for :customer
  denshobato_chat_panel
end
  • Copy this line to your config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( denshobato.js )
  • In your application.scss import css
@import 'denshobato';
  • In layouts/application.erb include javascript file in the bottom
<body>
  <div class='container'>
    <%= render 'layouts/header' %>
    <%= yield %>
  </div>

<%= javascript_include_tag 'denshobato' %>
</body>
  • Mount API route in your routes.rb
mount Denshobato::DenshobatoApi => '/'
  • On the page with your conversation (show action), e.g localhost:3000/conversation/32, add this helper with arguments
= render_denshobato_messages(@conversation, current_user)
// =>  When @conversation = Denshobato::Conversation.find(params[:id])
// => and current_user is your signed in user, e.g Devise current_user etc.

Now, your conversation page should look like this: Chat Panel Denshobato

By default, your display name is the name of your model, your avatar is default gravatar image.

Let’s rewrite these methods.

We need to show full name of our Seller and Customer. We expect that your models have a first_name and last_name fields, same with image.

class Customer < ActiveRecord::Base
  denshobato_for :customer
  denshobato_chat_panel

  def full_name
    "#{first_name} #{last_name}"
  end

  def image
    # avatar.url is a CarrierWave method to show url for uploaded image

    avatar.url
  end
end

Now it looks better. Chat Panel Denshobato

That’s all, thanks for reading.

Denshobato Chat Panel Github Repository