@selleo/chatbot-client

Ready chat component for integration with openai

Creating a New Project

• Create a new project, e.g.: npm create vite@latest chatbot -- --template react-ts.

Using the Chat Component

• To use the Chat component from the @selleo/chatbot-client library, import it in your main component file:

import { Chat } from "@selleo/chatbot-client";
import "../axiosConfig";

const YourComponent = () => {
  return <Chat apiUrl="http://localhost:3001" />; // change http://localhost:3001 to the link with your openai server
};

export default YourComponent;

available component configuration

type ChatProps = {
  logo?: ComponentType<SVGProps<SVGSVGElement>>;
  toggleButtonIcon?: ComponentType<SVGProps<SVGSVGElement>>;
  UserBubbleClassName?: string;
  AssistantBubbleClassName?: string;
  messageResponseDotsClassName?: string;
  chatToggleButtonClassName?: string;
  chatMainClassName?: string;
  topBarClassName?: string;
  conversationClassName?: string;
  inputSectionClassName?: string;
  chatName?: string;
  token?: string;
  apiUrl: string;
  placeholder?: string;
  welcomeMessageText?: string;
};

• chatName: Name of the chat
• token: Token used for authenticating API requests, returned in headers with the query
• apiUrl: URL of the API endpoint used for chat interactions
• placeholder: Placeholder text displayed in the input field
• welcomeMessageText: Text of the welcome message shown when the chat starts
• logo: Component for the chat logo in SVG format
• toggleButtonIcon: Component for the icon used in the toggle button in SVG format
• UserBubbleClassName: CSS class name for styling the user's message bubble
• AssistantBubbleClassName: CSS class name for styling the assistant's message bubble
• messageResponseDotsClassName: CSS class name for styling the dots or animation shown while waiting for the server response
• chatToggleButtonClassName: CSS class name for styling the floating toggle button's appearance and position
• chatMainClassName: CSS class name for styling and positioning the main chat window
• topBarClassName: CSS class name for styling the top bar of the chat, which contains the logo, chat name, and toggle button
• conversationClassName: CSS class name for styling the conversation window where chat bubbles are displayed
• inputSectionClassName: CSS class name for styling the input section at the bottom of the chat, which includes the input field and send button

The application is simply divided, so remember, for example, when styling bubbles, you can easily style a paragraph in the bubbles by adding the UserBubbleClassName class and then styling the paragraph in it.

OpenAI API Integration

This project integrates with an OpenAI-like API for managing threads and messages.

The key operations include fetching messages, creating new threads, deleting threads, and adding messages to threads.

API Structure

The API interacts with the following endpoints:

• GET /api/threads/:threadId/messages: Fetch messages for a given thread.
• POST /api/threads: Create a new thread.
• DELETE /api/threads/:threadId: Delete an existing thread.
• POST /api/threads/:threadId/messages: Add a message to a specific thread.

Endpoints

1. Fetch Messages
   Fetches all messages for a given thread ID.

   Endpoint:
   GET /api/threads/:threadId/messages

   Response:
   Returns a list of messages in the following format:

   [
     {
       "id": "message1",
       "content": "Message content here",
       "timestamp": "2023-10-01T12:34:56Z"
     }
   ]
   
   

2. Create a Thread Creates a new conversation thread.

   Endpoint: POST /api/threads

   Response:

   {
     "threadId": "newThreadId"
   }
   

3. Delete a Thread Deletes a specific thread by ID.

   Endpoint: DELETE /api/threads/:threadId

   Response: 204 No Content on successful deletion.

4. Create a Message Adds a new message to an existing thread.

   Endpoint: POST /api/threads/:threadId/messages

   Request Body:

   {
     "content": "Your message here"
   }
   

API Contract Notes

1. All requests must include the Authorization header containing a valid token (if required by the API).
2. Ensure the Content-Type is set to application/json for any request with a body.
3. Handle possible errors by checking the response status. If a request fails, the application throws an error.