A high-quality React chatbox library featuring product cards, quick replies, and AI integration.
npm install react-sigma-chatboxA high-performance, modern React Chatbox UI library inspired by the Bitu AI assistant (FPT Shop). It features a sleek design, support for product carousels, quick replies, and built-in compatibility with the Gemini AI streaming API.
---
If you have cloned this repository and want to run the demo or continue development:
1. Install dependencies:
``bash`
npm install
2. Run the development server:
`bash`
npm run dev
http://localhost:5173
The demo application will be available at .
3. Build the library:
`bash`
npm run build
dist
This generates the folder containing the compiled library (index.mjs, index.js) and the bundled CSS (react-sigma-chatbox.css).
---
Option A: NPM Link
1. In the react-sigma-chatbox directory: npm linknpm link react-sigma-chatbox
2. In your target project directory:
Option B: Manual Copy
Copy the dist folder directly into your project and import from it.
:`javascript
/* @type {import('tailwindcss').Config} /
export default {
content: [
"./src/*/.{js,ts,jsx,tsx}",
"./node_modules/react-sigma-chatbox/*/.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
`$3
Import the library's stylesheet in your entry file (e.g., main.tsx or App.tsx):
`typescript
import 'react-sigma-chatbox/dist/react-sigma-chatbox.css';
`---
🛠 Basic & Streaming Usage
The
Chatbox component is highly flexible and handles logic through a threadId (unique session ID) and a language parameter (en, vi, ja). Both change or get passed whenever the user interacts with the UI.$3
You can choose to render responses as plain text (default) or basic Markdown (Bold, Lists, etc.).`tsx
import { Language } from 'react-sigma-chatbox';const config = {
// ... other config
renderMarkdown: true // Set to true to enable Markdown rendering
};
// Handler now receives (userInput, threadId, language)
const handleSimpleAi = async (userInput: string, threadId: string, language: Language) => {
console.log(
Session ID: ${threadId}, Selected Language: ${language});
if (language === 'vi') {
return "Xin chào! Tôi là trợ lý AI. Tôi có thể giúp gì cho bạn?";
}
return "Hello! I am your AI assistant. How can I help you today?";
};
`---
⚙️ Component Configuration
$3
| Prop | Type | Description |
| :--- | :--- | :--- |
| config | ChatboxConfig | Object containing UI branding and initial messages. |
| onGetAiResponse | AiResponseHandler | Logic handler receiving (userInput, threadId, language). |$3
| Field | Type | Description |
| :--- | :--- | :--- |
| primaryColor | string | Hex color used for accents and user bubbles. |
| botName | string | The display name shown in the header. |
| welcomeMessage | Translatable | Initial message sent by the bot. Automatically updates when language is changed before the conversation starts. |
| description | Translatable | Text displayed in the introduction section (avatar area). Supports bold markdown. |
| placeholder | Translatable | Input field placeholder text. |
| avatarUrl | string | URL for the bot icon. |
| quickReplies | Translatable | List of one-tap answer buttons. |
| renderMarkdown | boolean | Enable Markdown support for AI messages, including Tables. |$3
The fields welcomeMessage, description, placeholder, and quickReplies support multilingual configuration. You can pass a simple value or an object mapped to vi, en, or ja.`tsx
const config: ChatboxConfig = {
// Simple value
botName: 'Sigma Assistant',
// Multilingual Object
welcomeMessage: {
vi: 'Chào bạn! Tôi có thể giúp gì cho bạn?',
en: 'Hello! How can I help you today?',
ja: 'こんにちは!今日はどのようなお手伝いができますか?'
}, description: {
vi: 'Sigma Assistant hỗ trợ bạn mọi lúc mọi nơi',
en: 'Sigma Assistant supports you anytime, anywhere'
},
placeholder: {
vi: 'Nhập tin nhắn...',
en: 'Type a message...'
},
quickReplies: {
vi: ['Giá iPhone 15', 'Bảo hành'],
en: ['iPhone 15 Price', 'Warranty']
}
};
``---