BotFront webchat how to parse link as html instead of plain text

Rasa Open Source
1

I am using rasa 3+ deployed with kubernetes. Also I am using the rasa-webchat widget and works fine. In action server I have a response that sends an html anchor in order the user to click it and see content. But rasa-webchat widget renders the anchor tag as plain text. How can I render it as html element? And one more question. When I try to use rasa-webchat as react component does not work. Shows nothing but a blank page. This is my code import Widget from “rasa-webchat”;

function CustomWidget() {

return (

<Widget

  initPayload={"/get_started"}

  socketUrl={"my socket.io url"}

  socketPath={"/socket.io/"}

  customData={{ language: "en" }} // arbitrary custom data. Stay minimal as this will be added to the socket

  title={"Title"}

/>

);

}

export default CustomWidget; and I imported on App.js. In addition, this is what my console prints: react.development.js:209 Warning: Failed prop type: invariant is not defined at a (http://localhost:3001/static/js/bundle.js:26386:10) at p (http://localhost:3001/static/js/bundle.js:22518:36) at Connect(a) at d (http://localhost:3001/static/js/bundle.js:22408:17) at http://localhost:3001/static/js/bundle.js:27326:29 at http://localhost:3001/static/js/bundle.js:27925:31 at div at a (http://localhost:3001/static/js/bundle.js:28077:12) at CustomWidget at div at App @nik202

2

@christos I do not get your can you share some examples? and what you are trying to render.

3

I am trying to implement a basic chat functionality with react. I send messages successfylly but I cant receive any response back. This is my code:

function Chat({ socket }) { socket.on(“connect”, function () { console.log("connected: " + socket.id); });

useEffect( function () { socket.on(“bot_uttered”, function (botResponse) { console.log("Bot uttered-> ", botResponse); }); }, [socket] );

const [message, setMessage] = useState(“”);

function handleSubmitMessage(event) { event.preventDefault(); socket.emit(“user_uttered”, { message: message, session_id: “building_react_app”, }); setMessage(“”); }

function handleChange(event) { setMessage(event.target.value); }

console.log(message);

return (

Sensi
body
{/* form implementation */}
); }