simple-chatbot
v0.1.2
Published
Simple chatbot
Downloads
13
Readme
# Simple Chatbot
A simple and customizable React chatbot component that allows you to easily integrate a chatbot UI into your application. This package is designed to be flexible, allowing developers to manage message handling and API requests externally.
## Installation
You can install `simple-chatbot` via npm or yarn:
```bash
npm install simple-chatbot
```
or
yarn add simple-chatbot
Usage
Below is a basic example of how to use the simple-chatbot component in your React application.
import React, { useState } from "react";
import Chatbot from "simple-chatbot";
interface Message {
sender: "user" | "bot";
text: string;
}
const App: React.FC = () => {
const [messages, setMessages] = useState<Message[]>([]);
const handleSendMessage = async (userMessage: string) => {
// Add the user's message to the message history
setMessages((prevMessages) => [
...prevMessages,
{ sender: "user", text: userMessage },
]);
// Simulate an API call to fetch the bot's response
const botResponse = await fetchBotResponse(userMessage);
// Add the bot's response to the message history
setMessages((prevMessages) => [
...prevMessages,
{ sender: "bot", text: botResponse },
]);
};
const fetchBotResponse = async (userMessage: string): Promise<string> => {
// Simulate an API call with a delay
return new Promise((resolve) => {
setTimeout(() => {
resolve("This is a simulated bot response.");
}, 1000);
});
};
return (
<div>
<Chatbot
botName="My Bot"
messages={messages}
onSendMessage={handleSendMessage}
/>
</div>
);
};
export default App;
Props
The Chatbot component accepts the following props:
| Prop Name | Type | Description | | ------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | botName | string | The name of the chatbot. This will be displayed as the title of the chatbot window. Default is "Chatbot". | | messages | Message[] | An array of message objects that represent the conversation history. Each message object should have a sender ("user" or "bot") and text (the message content). | | onSendMessage | (message: string) => void | A callback function that is called when the user sends a message. The function receives the user's message as a parameter, and it's up to the parent component to handle the message, e.g., by making an API call to get a bot response. |
Message Object
The messages
prop is an array of objects with the following structure:
interface Message {
sender: "user" | "bot";
text: string;
}
sender
: Indicates who sent the message, either "user" or "bot".text
: The content of the message.
Example
import React, { useState } from "react";
import Chatbot, { Message } from "simple-chatbot";
const App: React.FC = () => {
const [messages, setMessages] = useState<Message[]>([]);
const handleSendMessage = async (userMessage: string) => {
setMessages([...messages, { sender: "user", text: userMessage }]);
const botResponse = await fetchBotResponse(userMessage);
setMessages([
...messages,
{ sender: "user", text: userMessage },
{ sender: "bot", text: botResponse },
]);
};
const fetchBotResponse = async (userMessage: string): Promise<string> => {
return "This is a simulated bot response.";
};
return (
<div>
<Chatbot
botName="My Bot"
messages={messages}
onSendMessage={handleSendMessage}
/>
</div>
);
};
export default App;
License
This project is licensed under the MIT License. See the LICENSE file for more details.