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?

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

Welcome to the forum!! @mortisplant can you share two things with me Rasa version rasa --version 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: [image]

@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 thanks for sharing the solution with us and good luck with your project.

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: You might have mismatching versions of React and the renderer (such as React DOM) You might be breaking the Rules of Hooks 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: You might have mismatching versions of React and the renderer (such as React DOM) You might be breaking the Rules of Hooks 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;

Rasa chatbot integration with react

Rasa Open Source

nik202 (NiK202) February 14, 2022, 6:07pm 9

@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.

Topic		Replies	Views
Rasa-webchat in React - Enter key doesn't send message and where do you edit the css for the widget? Rasa Open Source	14	1651	September 28, 2021
React Chat Widgets For Rasa Rasa Open Source	0	536	November 3, 2022
Integration of rasa chat bot with custom interface Rasa Open Source	2	1952	October 14, 2020
Rasa core integration with chatwidget Rasa Open Source	30	4145	October 24, 2019
Is it possible to integrate rasa with react.js . If possible how to configure? Tutorials, Resources & Videos rasa	3	3444	September 26, 2020

Rasa chatbot integration with react

Related topics