In this tutorial, we will build a chatbot interaction to Stream Chat using Ruby on Rails. At the end of the tutorial, you will have an application where users can log in and communicate 1:1 with a representative, supported by a chatbot. At the end of this tutorial, you will be more familiar with Stream Chat and the webhook system provided natively by Stream.
If you’d like to jump ahead and have a look at the repo, you can find it over on GitHub.
Here's a sneak peek at the functionality we'll implement.
To get the most out of this tutorial, we recommend you have the following:
- A basic understanding of Ruby as well as Ruby on Rails
- You should have Node installed on your system (v11.x or above)
- You should have RVM installed on your system https://rvm.io/rvm/install
- You should have ngrok installed on your system https://ngrok.com/download
- You should have PostgreSQL installed on your system
Pick a ruby version (we’ll use the latest stable version) and install it.
Create a Gemset for the application to isolate the dependencies. This will both create and activate the gemset so you will always be working with Ruby dependencies isolated for your project.
rvm use --create 2.6.3@rails-chat
Rails provides a CLI for scaffolding a new project. Install the Rails gem to make this available.
rails new rails-chat-example --webpack=react --database=postgresql cd rails-chat-example
Add react-rails, webpacker (rails tools for working with react components), bcrypt (needed for securing user passwords),
stream-chat-ruby (for Stream Chat integration) and
google-cloud-dialogflow (Dialogflow integration) to the application Gemfile. Check this Gemfile for reference.
gem 'webpacker' gem 'react-rails' gem 'stream-chat-ruby' gem 'google-cloud-dialogflow' gem 'bcrypt', '~> 3.1.7'
Install the Ruby dependencies.
Setup the database.
rails webpacker:install rails webpacker:install:react rails generate react:install yarn add webpack-cli stream-chat-react
Scaffold the User model. This will add functionality for managing application users.
rails g scaffold User handle:string name:string password:digest
Add User model validation for handle and name (see app/models/user.rb).
Run the database migration.
Check that all is well. Visit http://localhost:3000/users after running:
Scaffold the controller.
rails g controller sessions new create destroy
Add create and destroy code in SessionsController and put user id and chat token in session (see app/controllers/session_controller.rb)
Add login form in [app/views/sessions/new.html.erb].(https://github.com/GetStream/rails-chat-dialogflow-example/blob/master/app/views/sessions/new.html.erb)
logout routes (see config/routes.rb).
- make the /signup route point to the user creation method in the users controller (users#new).
- make the /login route point to the session creation method in the sessions controller (sessions#new).
- make the /logout route point to the session destruction method in the session controller (sessions#destroy)
Initialize the Stream Chat client and the Dialogflow client in the application controller initializer (see app/controllers/application_controller.rb).
Please note, if you’re using the stream-chat addon for Heroku, your Stream credentials will be encoded in the
STREAM_URL environment variable.
current_user helper method to
ApplicationController. This will make the current user available to all the views (see /app/controllers/application_controller.rb).
Add a new controller for the chat. This will be the main entry point for your chat application and we will use this as the default route for the application.
Scaffold the controller.
rails g controller Chat index
Make the index method of the controller the
root route (see app/config/routes.rb).
Add the sign-up and log-in links to the default page (see app/views/chat/index.html.erb).
This is the part where we add the UI components which power the chat
application. This is fairly easy using the React components provided for Stream Chat.
For the bot/representative Chat Component we will create an interface which presents a sidebar of channels of type messaging with custom metadata.
This creates a chat view for the representative which include all the support channels, one per every user requesting support. The representative has an overview of all the support requests.
For a more in depth quick start into Stream Chat with React, check out the tutorial.
Finally we add the chat components to the homepage (see app/views/chat/index.html.erb).
For chatbot interaction, we will use Dialogflow for the bot implementation and the webhook support for Stream chat for interacting with the support channel. Whenever a user sends a message to a support channel, a
message.new event is sent to the webhook with all the message information which we will parse in order to respond automatically.
On the Rails application end, we implement the webhook with a new controller.
Scaffold the webhook controller.
rails g controller webhook message
Add a method for querying the Dialogflow bot for an intelligent response. To support follow-up responses for the bot we need the context of a bot session for all the conversations started on a channel (see app/controllers/webhook_controller.rb).
Fill in the handler which inserts the bot response into the channel as a response to the webhook request.
The request is validated to ensure that it is a valid webhook, coming from Stream. We make sure that when a real representative is added to the chat, the bot doesn’t respond anymore (see /app/controllers/webhook_controller.rb ).
To test the application, use ngrok and edit the application config to point the webhook to
Start rails again along with ngrok (forwarding on port 3000). Use the generated URL to configure your webhook in your stream dashboard like so:
Follow https://dialogflow.com/docs/getting-started/first-agent to set-up your first agent. This will get you up and running with a bot which can handle basic greetings.
Now, let's add an intent with a follow-up, designing an interaction where the bot responds in context with the previous question. For example, let’s model the flow of requesting a credit card. To do this, create a new intent with training phrases.
In the intents listing page, add two follow-up intents, the built-in “yes” and “no” intents.
For more details, see https://dialogflow.com/docs/contexts/follow-up-intents.
As a conversation closing intent, we will add the request for a representative.
When mentioning the text responses, make sure that this intent is marked as the end of the conversation.
For connecting the Dialogflow bot to your rails application you need to retrieve your
GOOGLE_PROJECT_ID and your
GOOGLE_APPLICATION_CREDENTIALS, click your service account name. In the service accounts section, click on the right-hand side of your service user panel and select Create key from the dropdown and pick JSON as the key format.
Save it to disk and use the path to the downloaded file as your
GOOGLE_APPLICATION_CREDENTIALS environment variable.
If you’re deploying on Heroku you can paste the contents of the key as the environment variable.
For more details about Dialogflow configuration the authentication, check out the full documentation at https://dialogflow.com/docs/reference/v2-auth-setup. If you’d like to see more details about Stream Chat, you can find everything you need on the Stream Chat website.