Chat-Box

A React chat bot component with streaming support.

Installation

npm install chat-box

Setup

1. Install the required peer dependencies:

npm install antd @ant-design/icons react-markdown

2. No additional CSS imports are needed. The component's styles are automatically included.

Usage

import React from 'react';
import { ChatBot } from 'chat-box';

function App() {
  return (
    <div>
      <ChatBot />
    </div>
  );
}

Props

The ChatBot component accepts the following props:

• apiUrl (string): Custom API endpoint for chat completions
• apiKey (string): API key for authentication
• model (string): Model name to use for chat completions
• placeholder (string): Input placeholder text
• onMessage (function): Callback when a message is sent/received

Example with custom configuration

import React from 'react';
import { ChatBot } from 'chat-box';

function App() {
  const handleMessage = (message) => {
    console.log('New message:', message);
  };

  return (
    <ChatBot
      apiUrl="https://your-api-endpoint.com/chat"
      apiKey="your-api-key"
      model="your-model-name"
      placeholder="Ask me anything..."
      onMessage={handleMessage}
    />
  );
}

Dependencies

This component requires the following peer dependencies:

• React >= 16.8.0
• React DOM >= 16.8.0
• Ant Design >= 4.0.0
• @ant-design/icons >= 4.0.0
• react-markdown >= 8.0.0

Styling

This component includes all necessary styles (both custom styles and Ant Design styles) automatically. No additional CSS imports are required.

## License

MIT