Hello ,
I am trying to develop the bot using react Js as frontend over Rasa stack . Could you help me how could I can proceed with this because I did not get any help …
Hey @surjan. Can you tell more specifically what you need help with? It will be a lot easier for us to help you out 
Here is a sample for a React with rasa
GitHub - scalableminds/chatroom: React-based Chatroom Component for Rasa Stack
There are some examples for react based chat UIs (non rasa)
Hello Juste, Thanks for your response … I would like to achieve the following :
-
Create a chat interface using Angular or React
-
Using chat interface I want to communicate with Rasa core and Rasa NLU
-
When anybody try to interact with chatbot it may respond based on the training data .
Hope this will give you the idea what I am looking for . Let me know if you need more calrification.
Hello Deepak Thanks for your response. I will check that.
Hello, I tried to set up the chatroom whose link you mentioned above … but there are few confusions which I request you to clarify :
I am able to see the chat window and able to start the bot at 5002 port . But as they are using the localhost for the complete setup … I am using my cloud server where I have setup everything … Now in the chat window which is in react js has to coommunicate with the bot …but bot is running in the same server how would I access the bot url .
Please let me know i you can help me with this …
The users browser needs to be able to connect to the bot - Hence whatever URL you use should be resolvable from the users browser. If you are in production say , then you would have bought a domain and mapped it or atleast used a static ip address . That is the value you would specify. The same applies for your React application. The demo just uses localhost. It can be anything.
I have same issues like @surjan
If I deploy the bot on a cloud, do I have to start a web server too? Or how would I do that in real life. Is it a localhost on this cloud? How do I connect the bot to a web url and connecting then to this chatroom?
There are multiple ways to do this so there isnt a single answer. A bot that is responding to input and providing output is no different from any other HTTP API service and you can choose to expose it directly for your UI to consume or you can choose to only make this available on the server.
For this particular example (which was the original request) - There is a React based front end running on a nodejs server. All this is responsible for is the UI which renders on the users browser. It makes a separate HTTP call to the Bot (running behind a twisted/klein web server). If you had to follow this in production , you’d probably have something like an apache or nginx and your DNS (e.g. www.yoursite.com) mapped using your cloud provider tools to this webserver. This webserver would then likely reverse proxy URLs so that www.yoursite.com/app goes to the react app and www.yoursite.com/bot goes to your bot. In this case instead of localhost you’d use www.yoursite.com. Most of the python based web servers like twisted/flask are not intended for use directly and need a web server to front them.
But that isn’t the only way to do this and other considerations like "Is it ok to expose the Bot directly on the internet ? Or do I need to wrap it my own API ? Do I need a cluster etc. So you could have Browser --> HTTP Call --> Bot (Bot IP:port should be accessible from users browser) Browser–>HTTP Call --> Your web app (non python) --> http call --> Bot Server - In this case your web app should be accessible from users browser but your Bot needs to be accessible internally only (from your web app server) Browser–>Http call–> Your web app(python) --> Us rasa agent - In this case your web app can directly call rasa classes.
None of these are rasa specific questions - you can think of it as a REST service if you wish and consume it as you would any other service.
Thank you @deepshet for this nice explanation!
If you had to follow this in production , you’d probably have something like an apache or nginx and your DNS (e.g. www.yoursite.com) mapped using your cloud provider tools to this webserver.
So, this nginx eg replaces klein as a web server? If I have no website, do I just have then an IP address? And the steps are then identical as for localhost?
There is a React based front end running on a nodejs server. All this is responsible for is the UI which renders on the users browser. It makes a separate HTTP call to the Bot (running behind a twisted/klein web server)
Earlier I tried to find exact this point in the source code (I use this chatroom too). But I don’t see where there are any http calls? Wher is Rasa NLU started as webserver in the code? It looks for me that the NLU is just used “locally” since it imports module Message from rasa Core…
The point is why I have looked into it is because I wanted to store addtionally from the rasa NLU endpoints Intents and entities inside MessageStore (created in this file). But I wonder how I would get the intents from a user message with this . As a newbie thats why I am confused about those HTTP calls.
https://github.com/scalableminds/chatroom/blob/master/rasa_utils/bot_server_channel.py
No nginx or apache dont (to my knowledge) run Python directly. So nginx would reverse-proxy URLs to your python app (even this is a simplification!).
The chatroom code uses a custom channel to connect to Rasa core and then fronts it with Klein (See annotations like
@app.route("/conversations/<cid>/say", methods=["GET"])
def say(self, request, cid):
Effectively when klein gets a url like /conversations/cid/say?params then execute that code- this starts the bot listening on port 5002
The actual calls are made from the React app See ConnectedChatroom.js
await fetch(
`${this.props.host}/conversations/${
this.props.userId
}/say?${getParametersString}`,
this.props.fetchOptions
);
You can see this in the network tab of your browser too. Please note I am neither a react nor much of a python developer
Thanks Deepak for elaborate explanation . My chat bot is working but the issue I am facing with the chat bot is when I select the buttons payload … the chat bot does not come with the next question, it simply print the payload data
I know the i have make the changes in the below code … but not sure what change need to be done so my chatbot move to next question . It trained the bot and it worked fine there but not sure whats the issue here
def send_text_message(self, recipient_id, message):
self.message_store.log(recipient_id, "bot", {"type": "text", "text": message})
def send_text_with_buttons(self, recipient_id, message, buttons, **kwargs):
# type: (Text, Text, List[Dict[Text, Any]], **Any) -> None
"""Sends buttons to the output.
Default implementation will just post the buttons as a string."""
self.send_text_message(recipient_id, message)
self.message_store.log(
recipient_id, "bot", {"type": "button", "buttons": buttons}
)
Let me know if you can help me here …
Thanks, I never looked into ConnectedChatroom.js. Ok that makes sense.The ConnectedChatroom.jswaits for user input and makes a call. I thought it makes a HTTP call to NLU somehow. But where then is the NLU called? This is not via a HTTP call? I don’t see where in def say the bot is listening to a port?
@surjan For me buttons works fine by default.
Whats your payload data for the button? usually for buttons i just use /inform{“entity”:"value} i.e. it explicitly specifies intent and entities that I expect. if you are familiar with using browser tools - then you can just F12 and see network tab (to see whats being passed on Chrome)
Custom channel thats implemented - See rasa core channels http://rasa.com/docs/core/connectors/#custom-channels
Hey,
what do you mean? I think they don’t use custom channel. And my questions was rather where they call a NLU or Core server? I see they just make calls between the GUI and the channel, but where is the NLU called. Sorry for this naive question.
The ConnectedChatroom.js waits for user input and makes a call. I thought it makes a HTTP call to NLU somehow. But where then is the NLU called?
It makes a call to @app.route("/conversations/<cid>/log", methods=["GET"]) but not to the NLU?
It looks like that the NLU is used in this step;
UserMessage(
_payload[0].decode("utf-8"),
output_channel=BotServerOutputChannel(self.message_store),
sender_id=ci
But this is not via HTTP?
I think they don’t use custom channel.
They do its in their explanation and you also saw it in their code See Custom Rasa Channelon their site They use Rasa-core - NLU cant be used for dialog flow.
but where is the NLU called
Im not sure i understand what you are trying to ask - the custom channels integrate with rasa-core. Whenever a input message is received , thats passed on the core which uses NLU to determine intent and entities. Youll have to read /try out channels if you are finding it difficult to understand whats going on.
but not to the NLU? Yes the on_message is what is used to pass the message to rasa-core
@deepshet I really wonder where the NLU is called. Core need first the intent and entity. I looked in the UserMessage object in https://github.com/RasaHQ/rasa_core/blob/master/rasa_core/channels/channel.py
But cannot find where NLU is then called after it gets a url like /conversations/cid/say?params?
Isn’t there a way to do save messages without writing a custom input/output channel? There has to be some out of the box support for this by Rasa.
Can you please share the github code. Also did you make any additional change to this code to make it working?