Chatbot UI: connect frontend to bot

(Laura Perge) #1

Hey guys,

So I went through most topics regarding running your bot with a webchat frontend. I could also implement one of the recommended premade interfaces (scalableminds).

Now, I needed an Angular version instead of the above mentioned React based one but I am not too familiar with web development. So, I tried forking the chatbot UI by @JiteshGaikwad. I tried the RestInput channel I also tried using the custom input channel from scalableminds and change this line accordingly but I have the following issues:

  • The RestInput version doesn’t seem to respond. I run the action server and I run python -m rasa_core.run --core models/dialogue --nlu models/nlu/default/newbot --endpoints endpoints.yml --credentials credentials.yml --debug. Now, the server is up, I can send the bot messages through Postman and it responds correctly. But the frontend keeps showing the default error message (Sorry I wasn’t able to understand your Query. Let’s try something else!). In the meantime, I see this in the terminal: OPTIONS /webhooks/rest/webhook HTTP/1.1" 200 137 0.000993 and the action server also seems to be running actions.

  • Therefore I tried with changing back my credentials.yml as it is for the scalableminds version and changing the url in the line mentioned above in the intro (again I was running the bot and the action server with the same commands on the terminal). I can talk to the bot using Postman the same way. However, when I write the bot in the chat window, it responds with ‘undefined’ many times. In the terminal, I can see that the bot receives the input from the window, classifying it and fining a response to send, but somehow the response never ends up in the frontend.

@JiteshGaikwad, could you maybe point out where I go wrong with my implementation?

(JG) #2

hey @lauraperge, while running the rasa core server you din’t add the --cors “*” arguments, thats the reason you are getting the above error.

2 Likes
(Laura Perge) #3

Great, it is solved, thank you for the quick answer!

(Laura Perge) #4

Okay, so for the sake of clarity:

  1. The RestInput version worked well with the modification advised by Jitesh. I also found the video where he mentions this with some lag on my side :slight_smile:.

  2. I can also easily use the custom channel implementation of scalableminds with Jitesh’s nice UI, by making a small change in his script.js:

//------------------------------------------- Call the RASA API--------------------------------------
	function send(text) {

        var dataToSend = JSON.stringify({
            "recipient_id": "user",
            "message": text
        })

		$.ajax({
            url: 'http://localhost:5005/webhooks/chatroom/webhook', //  RASA API
			type: 'POST',
			headers: {
                'Content-Type': 'application/json; charset=utf-8'
            },
            dataType: "json",
            data: dataToSend,
            success: function (data, textStatus, xhr) {
                console.log(data);

				if (Object.keys(data).length !== 0) {
					for (i = 0; i < Object.keys(data[0]).length; i++) {
						if (Object.keys(data[0])[i] == "buttons") { //check if buttons(suggestions) are present.
							addSuggestion(data[0]["buttons"])
						}

					}
				}

				setBotResponse(data);

			},
			error: function (xhr, textStatus, errorThrown) {
				console.log('Error in Operation');
				setBotResponse('error');
			}
		});

Hope this helps anyone interested!

(Datisto) #6

Hey guys,

If I want to use salabalemind or react-web chat UI or any other with a rest channel with my dockered NLU+Core in a cloud, do I need to docker the UI too? If you have dockered both (Building Rasa with Docker), it is avaiable at http://localhost:5005 so I assume that you can just use the UI within your browser without dsocker anything, right?

So, can I docker my rasa model, and just using the UI without changing anyting with the UI? Since the UI sends to the local port which is directed to the host port automatically.

I am not experienced with that.

(Hemamalini) #7

HI , in credentials.yml file , what should i pass as value

(JG) #8

hey @hemamalini, you can pass the below line in your credentials.yml file

rest:

(Hemamalini) #9

Hi.Still it is not working. I the path as well. my endpoint.yml action_endpoint: url: http://localhost:5055/webhook/

core_endpoint:
  url: http://localhost:5005

credentials.yml `rasa_utils.bot_server_channel.BotServerInputChannel:

Also i tried by giving rest. Still i am getting 404