A simple webchat widget to connect with a chatbot. Forked from react-chat-widget

• Text Messages
• Quick Replies
• Images and Videos
• Snippet style for links (only as responses for now)
• Markdown support
• Easy to import in a script tag or as a React Component
• Persistent sessions

In your <body/>:

<div id="webchat"/>
<script src="https://storage.googleapis.com/mrbot-cdn/webchat-0.5.3.js"></script>
<script>
  WebChat.default.init({
    selector: "#webchat",
    initPayload: "/get_started",
    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:5500",
    socketPath: "/socket.io/",
    title: "Title",
    subtitle: "Subtitle",
    inputTextFieldHint: "Type a message...",
    connectingText: "Waiting for server...",
    hideWhenNotConnected: true,
    fullScreenMode: false,
    profileAvatar: "http://to.avat.ar",
    openLauncherImage: 'myCustomOpenImage.png',
    closeLauncherImage: 'myCustomCloseImage.png',
    params: {
      images: {
        dims: {
          width: 300,
          height: 200,
        }
      },
      storage: "local"
    }
  })
</script>

About images: width and height define the size in pixels that images in messages are crop-scaled to. If not present, the image will scale to the maximum width of the container and the image.

It is recommended to use a particular version (i.e. "webchat-.js") however the file "webchat-latest.js" is also available and is updated continuously with the latest version.

Install the package from GitHub by running:

npm install mrbot-ai/rasa-webchat

Then once it is installed it can be implemented as follows.

import { Widget } from 'rasa-webchat';

function CustomWidget = () => {
  return (
    <Widget
      interval={2000}
      initPayload={"/get_started"}
      socketUrl={"http://localhost:5500"}
      socketPath={"/socket.io/"}
      customData: {{"userId": "123"}}, // arbitrary custom data. Stay minimal as this will be added to the socket
      title={"Title"}
      inputTextFieldHint={"Type a message..."}
      connectingText={"Waiting for server..."}
      hideWhenNotConnected
      embedded={true}
      openLauncherImage="myCustomOpenImage.png"
      closeLauncherImage="myCustomCloseImage.png"
      params={{
        images: {
          dims: {
            width: 300,
            height: 200
          }
        },
        storage: "local"
      }}
    />
  )
}

• Make sure to have the prop embedded set to true if you don't want to see the launcher.

Use the SocketIOInput channel: See instructions in the Rasa Core documentation

If you want to process customData in Rasa Core you have to create a new channel. Use channel rasa_core.channels.socketio as a template for your new channel. In such channel customData can be retrieved via data['customData']. Then you can modify sender_id, save customData to the database, fill slots or whatever you need to with your additional data.

Your backend must expose a socket with socket.io

@socketio.on('user_uttered')
    def handle_message(message):
        # do something

emit('bot_uttered', {"text": "hello"}, room=session_id)

message = {
  "text": "Happy?",
  "quick_replies":[
    {"title":"Yes", "payload":"/affirm"},
    {"title":"No", "payload":"/deny"}
  ]}
emit('bot_uttered', message, room=socket_id)

Admittedly a bit far fetched, thinking that Snippets would evolve to carousels of generic templates :)

message = {
  "attachment":{
    "type":"template",
    "payload":{
      "template_type":"generic",
      "elements":[
        {
          "title":"Title",
          "buttons":[ {
            "title":"Link name",
            "url": "http://link.url"
          }
        ]
      }
    ]
  }
}
}
emit('bot_uttered', message, room=socket_id)

message = {
  "attachment":{
    "type":"video",
    "payload":{
      "title":"Link name",
      "src": "https://www.youtube.com/watch?v=f3EbDbm8XqY"
    }
  }
}
emit('bot_uttered', message, room=socket_id)

message = {
      "attachment":{
        "type":"image",
        "payload":{
          "title":"Link name",
          "src": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_IX5FSDQLrwm9qvuXu_g7R9t_-3yBSycZ8OxpRXvMDaTAeBEW"
        }
      }
    }
emit('bot_uttered', message, room=socket_id)

storage specifies the location where the the conversation and state of the WebChat is stored in the browser's storage.

storage: "session" defines the state to be stored in the session storage. The session storage persists on reload of the page, and is cleared after the browser or tab is closed, or when sessionStorage.clear()is called.

storage: "local" defines the state to be stored in the local stoage. The local storage persists after the the browser is closed, and is cleared when the cookies of the browser are cleared, or when localStorage.clear()is called.

hierarchy:

.conversation-container
  |-- .header
        |-- .title
        |-- .close-function
        |-- .loading
  |-- .messages-container
        |-- .message
              |-- .client
              |-- .response
        |-- .replies
              |-- .reply
              |-- .response
        |-- .snippet
              |-- .snippet-title
              |-- .snippet-details
              |-- .link
        |-- .imageFrame
        |-- .videoFrame
  |-- .sender
        |-- .new-message
        |-- .send

Since you have to install the package from GitHub, npm will clone the repo to the global .npm directory before building the module in your node_modules directory. For this reason docker will have trouble installing the package, of course the global .npm directory doesn't exist in the container. To solve this simply add the following line in your Dockerfile before the RUN npm install command

RUN mkdir -p /root/.npm

@PHLF @znat @TheoTomalty @Hub4IT @dliuproduction