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)
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 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.
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"}
/>
)
}
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)
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”}
/>
);
}
}