Rasa core integration with chatwidget

Rasa Open Source
22

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

23

Hey @Spike, I was recently getting the same problem. There is some issue with new rasa version and sockets Reverting to previous versions solved this issue. pip3 uninstall python-socketio pip3 install python-socketio==4.2.0 pip3 uninstall python-engineio pip3 install python-engineio==3.8.2 Hope its helps!

24

OK @cyanamous Thanks a lot! I will go and try :).

25

That works perfectly! Thank you!

26

You’re Welcome

27

hi @Spike can you please tell how did you connet rasa with chatwidget steps thank you

28

Hi @SallemiDorsaf, I just simply followed the steps given by cyanamous in this topic Rasa core integration with chatwidget

  1. Just make sure u have a chatbot project created and a trained model.
  2. Flow the steps and install any missing packages.
1 Like
29

Ran everything like you said but always running into this error. node version - v8.10.0 npm version - 3.5.8 please help

/react-ui/node_modules/rasa-webchat/index.js: Unexpected token (8:6)

   6 |   init: (args) => {
   7 |     ReactDOM.render(
>  8 |       <Widget
     |       ^
   9 |         socketUrl={args.socketUrl}
  10 |         socketPath={args.socketPath}
  11 |         interval={args.interval}
30

can you provide the complete index.js

31

@cyanamous I am new to rasa and trying to add chatwidget as suggested in this thread.

  1. Updated python-socketio==4.2.0 & python-engineio (3.8.2)
  2. started rasa core with following rasa run --credentials credentials.yml --endpoints endpoints.yml
  3. Started actions server with rasa run actions
  4. running ```npm start`` provides following error

Getting following error

Failed to compile.

Error in ../~/rasa-webchat/index.js
Module parse failed: /var/www/html/node_modules/rasa-webchat/index.js Unexpected token (8:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (8:6)
 @ ./src/App.js 14:19-42

App.js is as below

import React from 'react';
import './App.css';
import { Widget } from 'rasa-webchat';

function App() {
  return (
    <div className="App" >
      <p>React UI</p>
      <Widget
      interval={2000}
      initPayload={"/get_started"}
      socketUrl={"http://localhost:5005"}
      socketPath={"/socket.io/"}
      customData= {{"userId": "123"}}
      title={"Rasa UI"}
      inputTextFieldHint={"Type a message..."}
      connectingText={"Waiting for server..."}
      hideWhenNotConnected
      embedded={false}
      openLauncherImage="myCustomOpenImage.png"
      closeLauncherImage="myCustomCloseImage.png"
      params={{
        images: {
          dims: {
            width: 300,
            height: 200
          }
        },
        storage: "local"
      }}
    />
    </div>
  );
}

export default App;

index.js looks as below

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
32

Maybe its because you have put double curly braces at two places. SyntaxError: Unexpected token (8:6) @ ./src/App.js 14:19-42 It tells its in the 14th line you have two curly braces

import React from 'react';
import './App.css';
import { Widget } from 'rasa-webchat';

function App() {
  return (
    <div className="App" >
      <p>React UI</p>
      <Widget
      interval={2000}
      initPayload={"/get_started"}
      socketUrl={"http://localhost:5005"}
      socketPath={"/socket.io/"}
      customData= {{"userId": "123"}}
      title={"Rasa UI"}
      inputTextFieldHint={"Type a message..."}
      connectingText={"Waiting for server..."}
      hideWhenNotConnected
      embedded={false}
      openLauncherImage="myCustomOpenImage.png"
      closeLauncherImage="myCustomCloseImage.png"
      params={{
        images: {
          dims: {
            width: 300,
            height: 200
          }
        },
        storage: "local"
      }}
    />
    </div>
  );
}

export default App;