Rasa-webchat in React - Enter key doesn't send message and where do you edit the css for the widget?

Rasa Open Source
1

Hi, I have added this widget in my React project using npm install. From here: GitHub - botfront/rasa-webchat: A feature-rich chat widget for Rasa and Botfront . Clicking the arrow button sends a message but it doesn’t work when I press the Enter key. Is there a way to add that feature as some sort of parameter within <Widget /> ? Also how should I approach editing the css for the Widget? I see examples of people changing the css for it but I don’t know what file they’re editing or where it even is.

image
image382×615 14.9 KB

2

@shawnyama did you find any solution to that? I am facing the same issue now.

3

@Loki Hi, Loki! What is your current issue can you elaborate for us. Thanks.

4

Screenshot 2021-09-07 at 2.45.30 PM
Screenshot 2021-09-07 at 2.45.30 PM2838×472 15.7 KB
@nik202 Enter key is not sending message, I. have to manually press enter button every time I send a message.I have added this widget in my React project using npm install. Is there a way to add that feature(sending message on pressing enter key in my keyboard) as some sort of parameter within <Widget /> ?

my params :

         <Widget
                initPayload={"/welcome_message"}
                socketUrl={"http://localhost:5500"}
                socketPath={"/socket.io/"}
                customData={{"language": "en"}} 
                embedded={true}
                showMessageDate={true}
                params={{"storage": "session"}}
              />
5

@Loki please share the webchat snippet code which you are using, please do your format tool i.e </> as shown in editor.

6

@nik202 done

7

@Loki What is done Loki :wink: by the way I like the name Loki and he is my Favourite Marvel Character.

8

@nik202 formatting the code as you asked is done. If you can , please help me out here .

9

@Loki can you share the complete snippet code for me please.

10

@nik202

import {Component} from "react";
import Widget from "rasa-webchat";

export class RasaWebChat extends Component{
    render() {
        return(
            <Widget
                initPayload={"/welcome_message"}
                socketUrl={"http://localhost:5500"}
                socketPath={"/socket.io/"}
                customData={{"language": "en"}} // arbitrary custom data. Stay minimal as this will be added to the socket
                embedded={true}
                showMessageDate={true}
                params={{"storage": "session"}}
            />
        );
    }
}
11

@Loki you are not using this code?

<script>!(function () {
  let e = document.createElement("script"),
    t = document.head || document.getElementsByTagName("head")[0];
  (e.src =
    "https://cdn.jsdelivr.net/npm/rasa-webchat@1.x.x/lib/index.js"),
    // Replace 1.x.x with the version that you want
    (e.async = !0),
    (e.onload = () => {
      window.WebChat.default(
        {
          customData: { language: "en" },
          socketUrl: "https://bf-botfront.development.agents.botfront.cloud",
          // add other props here
        },
        null
      );
    }),
    t.insertBefore(e, t.firstChild);
})();
</script>
12

@Loki please change this

socketUrl={"http://localhost:5500"}

To

socketUrl={"http://localhost:5005"}

let me know please.

13

@Loki Please do see this video, hope this will help you Rasa chatbot website integration | Quick tutorial - YouTube

14

This one is solved. I was installing rasa webchat npm package this way " npm install rasa-webchat --force " in my React project because of some dependency errors. later I solved all those errors and installed this way “npm install rasa-webchat” and it worked fine

15

@Loki Great! Thanks for the share.

1 Like