[Latest] Rasa core integration with chatwidget https://github.com/mrbot-ai/rasa-webchat

Rasa Open Source
1

Rasa integration with chatwidget i.e GitHub - botfront/rasa-webchat: A feature-rich chat widget for Rasa and Botfront using socketio channel.

Below are two commands that I used for:

  1. To start rasa core server .

    rasa run -m models --enable-api --cors "*"

  2. To start custom action server.

    python -m rasa_sdk --actions actions

  3. You need to just change port and machine’s ip in a script i.e provided on github i.e GitHub - botfront/rasa-webchat: A feature-rich chat widget for Rasa and Botfront

Note: Make sure that your rasa core server and custom action server is up and running before just clicking or opening html file of your website.

Credentials.yml file content:

socketio:
  user_message_evt: user_uttered
  bot_message_evt: bot_uttered
  session_persistence: true

index.html file should contain following code snippet:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>

    <div id="webchat"/>
  <script src="webchat_js/webchat-0.5.6.js"></script>
  <script>
    WebChat.default.init({
      selector: "#webchat",
      interval: 1000, // 1000 ms between each message
      customData: {"userId": "123"}, // arbitrary custom data. Stay minimal as this will be added to the socket
      socketUrl: "http://localhost:5005",
      socketPath: "/socket.io/",
      title: "MINDS BUDDY",
      subtitle: " ",
      inputTextFieldHint: "Type a message...",
      connectingText: "Waiting for server...",
      hideWhenNotConnected: true,
      fullScreenMode: false,
      profileAvatar: "bot logo's/samll_01.png",
      openLauncherImage: 'myCustomOpenImage.png',
      closeLauncherImage: 'myCustomCloseImage.png',
      params: {
        images: {
          dims: {
            width: 600,
            height: 600,
          }
        },
        storage: "local"
      }
    })
  </script>


  </body>
</html>

Above file is for GitHub - botfront/rasa-webchat: A feature-rich chat widget for Rasa and Botfront you can get same code reference from above link.

Required js file. webchat-0.5.6.js (806.4 KB)

If you have any issues related to chatwidget integration please let me know.

1 Like
2

hi @prashant_kamble i have test rasa server on postman with rest api and i want to connect my bot with chatwidget haw can i do it ? i read that you mention ajax but i m not familare with ajax can you help how to do it please thank you

3

Thank you for your instructions. If possible, can you show me how to receive and send messages from the bot to the UI and vice-versa ? I read about def handle_message(message): and emit('bot_uttered', {"text": "hello"}, room=session_id) on the github page but still don’t know how i’m supposed to implement and use those.

4

Hi Huy Bui,

instead of socketio channel you can use built in rest channel and integrate any chatui with this by having ajax request and response.

1 Like
5

Hi @SallemiDorsaf,

You can make ajax rest call by specifying rest: in your credentials.yml file.

and your ajax call would be like this:

function send(message) {
	console.log("User Message:", message)
	$.ajax({
		url: 'http://localhost:5005/webhooks/rest/webhook',
		type: 'POST',
		contentType: 'application/json',
		data: JSON.stringify({
			"message": message,
			"sender": "username"
		}),
		success: function (data, textStatus) {
			setBotResponse(data);
			console.log("Rasa Response: ", data, "\n Status:", textStatus)
		},
		error: function (errorMessage) {
			setBotResponse("");
			console.log('Error' + errorMessage);

		}
	});
}
6

thank you @prashant_kamble how can i connect this code with webchat UI mrbot-ai/ rasa-webchat

7

Hi @SallemiDorsaf,

I don’t think that it would work with socketio channel because it’s basically for custom ui. And socketio channel has it’s own functional structure.

You can connect your rasa with following custom ui :

https://github.com/JiteshGaikwad/Rasa_CustomUI-v_2.0

1 Like
8

have you an exemple of chatwidget ? i just want to try it

9

Just clone this project and try it out pal :slightly_smiling_face: but before that just make sure that your rasa custom action server and rasa core server is up and running.

1 Like
10

thank you for every thing i test this code but the bot didn’t respond can yu please check with me

‘’’
function setBotResponse(val) { setTimeout(function () { if (val.length < 1) { //if there is no response from Rasa msg = ‘I couldn’t get that. Let’ try something else!’;

		var BotResponse = '<img class="botAvatar" src="./static/img/botAvatar.png"><p class="botMsg">' + msg + '</p><div class="clearfix"></div>';
		$(BotResponse).appendTo('.chats').hide().fadeIn(1000);

	} else {
		//if we get response from Rasa
		for (i = 0; i < val.length; i++) {
			//check if there is text message
			if (val[i].hasOwnProperty("text")) {
				var BotResponse = '<img class="botAvatar" src="./static/img/botAvatar.png"><p class="botMsg">' + val[i].text + '</p><div class="clearfix"></div>';
				$(BotResponse).appendTo('.chats').hide().fadeIn(1000);
			}

			//check if there is image
			if (val[i].hasOwnProperty("image")) {
				var BotResponse = '<div class="singleCard">' +
					'<img class="imgcard" src="' + val[i].image + '">' +
					'</div><div class="clearfix">'
				$(BotResponse).appendTo('.chats').hide().fadeIn(1000);
			}

			//check if there is  button message
			if (val[i].hasOwnProperty("buttons")) {
				addSuggestion(val[i].buttons);
			}

		}
		scrollToBottomOfResults();
	}

}, 500);

}

11

Can you show me your credentials.yml, endpoints.yml and how are you starting your server that commands?

Below are the commands I used for:

To start custom action server:

python -m rasa_sdk --actions actions

To start rasa server

rasa run -m models --enable-api --cors "*"

12

@prashant_kamble thank you i fix it i just didn’t wait the server

13

You are welcome :blush:

14

Hello @prashant_kamble,

I encountered the exception: sanic.exceptions.NotFound: Requested URL /socket.io/ not found when openned the html file.

Can you help me solve this issue ? Thank you very much !

15

Hi @fuih,

Can you just check your servers are up and runnning and also check credentials.yml file.

16

Omg i’m so embarrassed, i put the text socketio texts in endpoints.yml instead of credentials :laughing:. Anyway, after putting the texts in credentials.yml, the exception is gone, but nothing appeared on my browser when i openned the html file.

This is the log from the rasa server looks like:

Capture
Capture981×483 59.6 KB

For clarification, i only copy the <script> block to my html file as instruction from the github page. I haven’t download any file, do i have to download something ?

17

no no you don’t need to download anything :smile:

18

Well then i don’t understand why it didn’t work for me :frowning:. The instruction simply said copy the <script> block to my html file and i did just that.

19

okay wait. Can you show me your like endpoints.yml , credentials.yml and your html file. :blush:

20

Here are my files:

credentials.yml (625 Bytes) endpoints.yml (1.3 KB) index.html (1.1 KB)