npm package: @selleo/chatbot-client
Description: Client that can be integrated with a backend created with openai
Author: Mateusz Gacek
Latest version: 1.0.7

# 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:

```tsx
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 <Chat />

```ts
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:
   ```json
   [
     {
       "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:**
    ```json
    {
      "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:
    
    ```json
    {
      "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.