React js Chatbot Widget UI library
npm install chatbot-widget-ui![GitHub license]()  ![PRs Welcome]()
Authors: Hassen Amri, Raed Lazreg, Taha Berguiga
NPM Package Link:
chatbot-widget-ui
Package Github Repository Link:
chatbot-widget-ui
chatbot-widget-ui is a library for creating a React.js chatbot widget UI, built with TypeScript. It offers extensive customization features for building interactive chatbot experiences and supports integration with any LLM API to generate dynamic responses.
Features:
- Implemented using React.js and TypeScript for robustness and type safety.
- Provides a customizable user interface for integrating chatbot functionality into web applications.
- Offers various configuration options to tailor the chatbot widget's appearance and behavior.
- Supports integration with any LLM API for generating dynamic responses.
- Displays a bot icon with error messages.
- Allows customization of the "is typing" message font style.
The library enables easy integration of chatbot features into React.js applications, enhancing user interaction and experience.
1. Install the latest version:
``bash`
npm install chatbot-widget-ui@latest
2. Import the library:
`javascript`
import { ChatBotWidget } from "chatbot-widget-ui";
3. Use the ChatBotWidget component:
`javascript`
onBotResponse={handleBotResponse}
handleNewMessage={handleNewMessage}
messages={messages}
primaryColor="#3498db"
inputMsgPlaceholder="Type your message..."
chatbotName="Customer Support"
isTypingMessage="Typing..."
IncommingErrMsg="Oops! Something went wrong. Try again."
chatIcon={O}
botIcon={B}
botFontStyle={{
fontFamily: "Arial",
fontSize: "14px",
color: "red",
}}
typingFontStyle={{
fontFamily: "Arial",
fontSize: "12px",
color: "#888",
fontStyle: "italic",
}}
useInnerHTML={true}
/>
`javascript
import React, { useState } from "react";
import { ChatBotWidget } from "chatbot-widget-ui";
const App = () => {
// Save all messages conversation
// Example: [{'role': 'user', 'content': 'hello'}, {'role': 'assistant', 'content': 'Hello, how can I assist you today!'}, ...]
const [messages, setMessages] = useState
{
role: "user",
content: "hello",
},
{
role: "assistant",
content: "hi!",
},
{
role: "user",
content: "who are you",
},
]);
const customApiCall = async (message: string): Promise
const response = await fetch("https://example.com/api", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ userMessage: message }),
});
const data = await response.json();
return data.content;
};
const handleBotResponse = (response: string) => {
// Handle the bot's response here
console.log("Bot Response:", response);
setMessages((prevMessages) => [
...prevMessages,
{ role: "assistant", content: response },
]);
};
const handleNewMessage = (message: any) => {
setMessages((prevMessages) => [...prevMessages, message]);
};
return (
export default App;
`
| Prop Name | Type | Default Value | Description |
| --------------------- | -------- | ------------------------------------------------- | ----------------------------------------------------------------------------------- |
| callApi | function | N/A | Sends an API request to retrieve text completion. |chatbotName
| | string | "Chatbot" | The name/title of the chatbot displayed in the header. |isTypingMessage
| | string | "Typing..." | The message displayed when the chatbot is typing a response. |IncommingErrMsg
| | string | "Oops! Something went wrong. Please try again." | The error message displayed when an API request fails. |primaryColor
| | string | "#eb4034" | The primary color used for styling elements like headers, buttons, and backgrounds. |inputMsgPlaceholder
| | string | "Send a Message" | The placeholder text shown in the chat input textarea. |chatIcon
| | any | ChatIcon() (ReactElement) | The icon displayed in the chatbot toggler button. |botIcon
| | any | BotIcon() (ReactElement) | The icon displayed with bot messages and error messages. |botFontStyle
| | object | {} | The font style for bot messages. |typingFontStyle
| | object | {} | The font style for the "is typing" message. |handleNewMessage
| | function | N/A | Processes new messages and updates the conversation state. |onBotResponse
| | function | N/A | Processes new messages and updates the conversation state. |messages
| | array | [] | The array of messages to display in the chat. |useInnerHTML
| | Booloean | false | Determines whether HTML content in messages should be rendered as inner HTML. |
| |
`bash
nvm install 16
nvm use 16
npm run rollup-build-lib
npm login
npm publish --access public
``