@alamedadev/chatwidget

ChatWidget

This project exports a single component, ChatWidget. It is a chat widget that can be used to chat with an AI, and can be implemented in any website.

Installation

To install the package, run the following command:

npm install @alamedadev/chatwidget

Usage

To use the component, import it and use it in your code:

import ChatWidget from "@alamedadev/chatwidget";
import { defaultDarkTheme } from "@alamedadev/citriqui";

const mockUsers = [
  {
    id: "1",
    imageSrc: "https://i.pravatar.cc/150?img=1",
    fullName: "Jane Doe",
    theme: defaultDarkTheme,
  },
  // ... add more users as needed
];

const COLLECTION_ID = "your_collection_id_here";

const App = () => {
  return (
    <div>
      <ChatWidget
        config={{
          assistants: mockUsers,
          collectionId: COLLECTION_ID,
        }}
      />
    </div>
  );
};

export default App;

Props

The ChatWidget component accepts a config prop with the following properties:

• assistants: An array of user objects representing the AI assistants. Each object should have:
  • id: A unique identifier for the assistant
  • imageSrc: URL to the assistant's avatar image
  • fullName: The name of the assistant
  • theme: The theme object for the assistant (e.g., defaultDarkTheme from @alamedadev/citriqui)
• collectionId: A string representing the collection ID used to fetch the correct document information and hit the appropriate endpoint

Development

To run the project in development mode, run the following command:

npm install
npm run dev

To build the project, run the following command:

npm run build