The Rasa WebChat integration in this React-Typescript project enhances the user interface, providing a seamless chatbot experience. This guide outlines the implementation details and customization options for integrating Rasa WebChat into the project.
- Version 1.0.1 of the Rasa WebChat is designed to work with Rasa versions 2.3.x and 2.4.x.
- Version 1.0.0 is intended for other Rasa versions.
- Text Messages
- Quick Replies
- Images
- Carousels
- Markdown support
- Persistent sessions
- Typing indications
- Smart delay between messages
- Easy import as a script tag or React Component
- Connects to a RASA server for natural language processing and dialogue management
- Custom Action Handling
- Customizable Styling
- Recommended Intents as Buttons: Displays clickable buttons for recommended intents, enhancing user experience.
To run this project, ensure Node.js and RASA are installed on your machine.
- Start the RASA server:
rasa train # to train the RASA model rasa run -m models --enable-api --cors "*" # to run the RASA Web Server python server.py # to run the Backend Server rasa run actions # to run the Custom Actions Server
- Start the React app:
The app will be available at http://localhost:3000.
npm install # to install dependencies npm start # to start the development server
Add the Rasa WebChat package to your project by including the following script in the file:
<!-- Add this script tag to the file -->
<script src="https://cdn.jsdelivr.net/npm/rasa-webchat/lib/index.min.js" async></script>Install the npm package:
npm install rasa-webchatThen, in your React component:
import Widget from 'rasa-webchat';
const CustomWidget: React.FC = () => {
return (
<Widget
initPayload={"/get_started"}
socketUrl={"http://localhost:5500"}
socketPath={"/socket.io/"}
customData={{"language": "en"}}
title={"Title"}
/>
);
};
export default CustomWidget;- Ensure to set the prop
embeddedtotrueif you don't want to see the launcher.
| Prop / Param | Default Value | Description |
|---|---|---|
initPayload |
null |
Payload sent to Rasa when the conversation starts |
socketUrl |
null |
Socket URL |
socketPath |
null |
Close the chat window |
customData |
null |
Arbitrary object sent with the socket. If using with Botfront, it must include the language (e.g. {"language": "en"}) |
docViewer |
false |
Treats links in received messages as links to a document (.pdf .doc .xlsx, etc.) and opens them in a popup using https://docs.google.com/viewer service |
title |
'Welcome" |
Title shown in the header of the widget |
subtitle |
null |
Subtitle shown under the title in the header of the widget |
inputTextFieldHint |
"Type a message" |
User message input field placeholder |
hideWhenNotConnected |
true |
If true, the widget will hide when the connection to the socket is lost |
connectOn |
"mount" |
Chooses when the widget will try connecting to the server. Default: mount. Options: mount (connects as soon as it mounts), open (attempts connection when the widget is opened) |
onSocketEvent |
null |
Calls custom code on a specific socket event |
embedded |
false |
Set to true to embed the chatbot in a web page. The widget will always be open, and the initPayload will be triggered immediately |
showFullScreenButton |
false |
Show a full-screen toggle |
displayUnreadCount |
false |
Path to an image displayed on the launcher when the widget is closed |
showMessageDate |
false |
Show message date. Can be overridden with a function: (timestamp, message) => return 'my custom date' |
customMessageDelay |
See below | A function that takes a message string as an argument. Called every time a message is received, and the returned value is used as a milliseconds delay before displaying a new message. |
params |
See below | Used to customize the image size and change storage options |
storage |
"local" |
Specifies the storage location of the conversation state in the browser. "session" stores in the session storage, persisting on reload but clearing on tab closure. "local" stores in the local storage, persisting after the browser is closed but clearing with browser cookies or localStorage.clear() |
customComponent |
null |
Custom component to be used with custom responses. E.g., customComponent={(messageData) => (<div>Custom React component</div>)}. Note: Can only be used with a React application. |
onWidgetEvent |
{} |
Calls custom code on a specific widget event (onChatOpen, onChatClose, onChatHidden are available). Add a function to the desired object property in the props to have it react to the event. |
const calculateDelay = (message: string): number => {
let delay: number = message.length * 30;
if (delay > 2 * 1000) {
delay = 3 * 1000;
}
if (delay < 400) {
delay = 1000;
}
return delay;
};interface SocketEventHandlers {
'bot_uttered': () => void;
'connect': () => void;
'disconnect': () => void;
}
const socketEventHandlers: SocketEventHandlers = {
'bot_uttered': () => console.log('the bot said something'),
'connect': () => console.log('connection established'),
'disconnect': () => doSomeCleanup(),
};The params props only allows to specify custom image dimensions:
interface Params {
images: {
dims: {
width: number;
height: number;
};
};
}
const params: Params = {
images: {
dims: {
width: 300,
height: 200,
},
},
};The chatbot's appearance can be customized by modifying the styles in the project's stylesheet. The hierarchy is as follows:
.rw-conversation-container
|-- .rw-header
|-- .rw-title
|-- .rw-close-function
|-- .rw-loading
|-- .rw-messages-container
|-- .rw-message
|-- .rw-client
|-- .rw-response
|-- .rw-replies
|-- .rw-reply
|-- .rw-response
|-- .rw-snippet
|-- .rw-snippet-title
|-- .rw-snippet-details
|-- .rw-link
|-- .rw-imageFrame
|-- .rw-videoFrame
|-- .rw-sender
|-- .rw-new-message
|-- .rw-send
Modify the handleCustomAction method in the React component to customize the behavior of Rasa's custom actions, such as displaying recommendations or redirecting the user.
When deploying the chatbot in a production environment, consider scalability considerations such as model retraining frequency, code optimization, resource management, and model persistence.
A: Yes, modify the styles in the project's stylesheet to customize the chatbot's appearance.
A: Modify the handleCustomAction method in the React component to customize the behavior of Rasa's custom actions.
A: Consider factors such as model retraining frequency, code optimization, resource management, and model persistence for scalability in a production environment.
A: Yes, you can leverage the onWidgetEvent and onSocketEvent props to call custom code when specific events occur, allowing you to tailor the chatbot's behavior based on user interactions or socket events.
A: Absolutely! The customData prop allows you to include language information, making it versatile for multilingual support. Ensure your Rasa models are trained accordingly for different languages.
A: Set the showFullScreenButton prop to true to display a full-screen toggle button. Users can then expand the chatbot to full-screen mode for a more immersive experience.
A: Rasa WebChat is designed to work seamlessly with web applications. For integration with other platforms or channels, you may need to explore additional tools or adapt the provided React component accordingly.
A: Check the socketUrl and socketPath props to ensure they are correctly configured. Verify that the Rasa server is running and accessible. If issues persist, inspect the browser console for potential errors.
A: Utilize the customMessageDelay prop, providing a function that determines the delay based on the content of each message. Adjusting this function allows you to control the timing between messages dynamically.
A: Ensure secure communication by using HTTPS for both your Rasa server and your web application. Additionally, validate user inputs on the server side to prevent potential security vulnerabilities.
A: Yes, the React component architecture allows for easy extension. You can add custom components, modify the styling, or integrate external libraries to enhance functionality.
A: Implement tracking mechanisms within your Rasa server or on the client side to capture relevant user interactions. Ensure compliance with privacy regulations and inform users about data collection practices.