@cmnd-ai/chatbot-react
v1.2.1
Published
This npm package provides a customizable chatbot component for use in web applications, designed specifically for Node.js environments.
Downloads
186
Readme
@cmnd-ai/chatbot-react
This npm package provides a customizable chatbot component for use in web applications, designed specifically for Node.js environments.
Installation
You can install the @cmnd-ai/chatbot-react
from npm using npm or yarn:
npm install @cmnd-ai/chatbot-react
With yarn
yarn add @cmnd-ai/chatbot-react
Example implementation
import { ChatProvider, CmndChatBot } from "@cmnd-ai/chatbot-react";
import { useEffect } from "react";
const components = {
messages({ props }) {
const messages = props.chats.data?.messages || [];
useEffect(() => {
const comp = document.querySelector(`#lastItemId`);
if (!comp) return;
setTimeout(() => {
comp.scrollIntoView({
behavior: "smooth",
block: "end", // Scroll to the bottom of the container
});
}, 500);
}, [messages.length]);
const getchild = () => {
if (props.chats.error) {
return <h1>Error</h1>;
}
if (!props.chats.data?.messages?.length)
return <h1>Ask me a question</h1>;
return (
<div>
{messages.map((eachMessage, msgIndex) => (
<div
key={eachMessage.id}
id={msgIndex === messages.length - 1 ? "lastItemId" : undefined}
>
{eachMessage.message + ""}
</div>
))}
</div>
);
};
return <div style={{ flexGrow: 1 }}>{getchild()}</div>;
},
userInputBox({ props }) {
return (
<div
style={{
display: "flex",
gap: "1rem",
}}
>
<input
style={{
flexGrow: 1,
}}
type="text"
value={props.userInputData.textValue}
onChange={(e) => props.userInputData.setTextValue(e.target.value)}
placeholder="Type here"
disabled={props.userInputData.isSending}
/>
<button
onClick={props.userInputData.submitMessage}
disabled={props.userInputData.isSending}
>
{props.userInputData.isSending ? "Sending..." : "Send"}
</button>
</div>
);
},
error({ props }) {
return <div>Error: {props.chats.error + ""}</div>;
},
};
function App() {
return (
<div>
<ChatProvider apiKey="xxxxx" chatbotId={1} organizationId={1}>
{(params) => <CmndChatBot {...params} components={components} />}
</ChatProvider>
</div>
);
}
export default App;
You can find an example implementation from Github here