Rasa chatbot integration with react

Would someone be able to help me in integrating RASA with React? I’ve been trying to create a very basic chatbot just for practice and needed a UI for my react app, so I was using Botfront rasa-webchat as a react component but it’s not working. (https://github.com/botfront/rasa-webchat)

Has anyone been successful in implementing this?

Welcome to the forum!!

@mortisplant can you share two things with me

  1. Rasa version rasa --version
  2. Snippet code you are using for a widget

Thanks.

Thanks for the reply! I am using RASA version 3.0.6

This is what I have currently in App.js:

import Widget from 'rasa-webchat';

function App() {
  return (
    <div className="App" >
      <Widget
      initPayload={"/happy path"}
      socketUrl={"http://localhost:5005"}
      socketPath={"/socket.io/"}
      customData= {{"language": "en"}} // arbitrary custom data. Stay minimal as this will be added to the socket
      title={"Rasa Chatbot"}
      inputTextFieldHint={"Type a message..."}
      hideWhenNotConnected={false}
      embedded={false}
    />
    </div>
  );
}

export default App;

When I run npm start, my page is blank. This is what my console looks like:

@mortisplant No worries!

Your major issue is the webchat snippet code, I don’t know from which older post you have seen this, but bot front updated this snippet code a new snippet code as shown in this link : https://github.com/botfront/rasa-webchat

Hi! So I was able to integrate it with my react app. Everything works fine except for using the enter key to send messages. I saw on another post that someone was able to resolve this by resolving their dependency issue, but i’m unsure how to go about doing that. I had to do npm install with legacy peer deps because I am using React v17.0.2 instead of 16.8.3.

@mortisplant is this still an active issue?

It’s not, I can close it now. I found a work around without having to deal with the dependency issue.

@mortisplant please can you share the workaround you found? or if any of the above solutions/suggestions help you to find your solution, mark the solution and close this thread. Thanks.

The work around for not being able to send messages using the enter key was found here: https://github.com/botfront/rasa-webchat/issues/380

I had to use this because I wasn’t sure how to resolve the upstream dependency issues when doing npm install rasa-webchat

@mortisplant thanks for sharing the solution with us and good luck with your project.

1 Like

Hi @nik202 Could you explain how this code snippet would need to me integrated in App.js?

import Widget from 'rasa-webchat';

function CustomWidget = () => {
  return (
    <Widget
      initPayload={"/get_started"}
      socketUrl={"http://localhost:5500"}
      socketPath={"/socket.io/"}
      customData={{"language": "en"}} // arbitrary custom data. Stay minimal as this will be added to the socket
      title={"Title"}
    />
  )
}

Unfortunately, I’m not able to get run

I tried to integrate the following code, which is the latest one from the docs, into a react custom component, but I got the following error:

Error: ERROR Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem. Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
  4. You might have mismatching versions of React and the renderer (such as React DOM)
  5. You might be breaking the Rules of Hooks
  6. You might have more than one copy of React in the same app See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem. at resolveDispatcher (http://localhost:3000/static/js/bundle.js:84586:17) at useRef (http://localhost:3000/static/js/bundle.js:84620:24) at http://localhost:3000/static/js/bundle.js:61345:31 at renderWithHooks (http://localhost:3000/static/js/bundle.js:21236:22) at updateForwardRef (http://localhost:3000/static/js/bundle.js:23807:24) at beginWork (http://localhost:3000/static/js/bundle.js:25854:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:10828:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:10872:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:10929:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:30803:11)

Code: import React, { Component } from ‘react’; import Widget from ‘rasa-webchat’;

class CustomWidget extends Component { render() { return ( <Widget initPayload={“/get_started”} socketUrl={“http://localhost:5005”} socketPath={“/socket.io/”} customData={{“language”: “en”}} // arbitrary custom data. Stay minimal as this will be added to the socket title={“Title”} /> ); } }

export default CustomWidget;