@cmnd-ai/chatbot-react

@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