@dmanikanta17/chat-ui 0.1.9 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +115 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
# @dmanikanta17/chat-ui
|
|
2
|
+
|
|
3
|
+
A modern, highly customizable, and responsive Chat UI component for React applications. This plugin is designed to help you get started with an AI Agent Chatbot in minutes.
|
|
4
|
+
|
|
5
|
+
## 🚀 Features
|
|
6
|
+
|
|
7
|
+
- **Easy Integration**: Drop-in component for any React project.
|
|
8
|
+
- **Real-time Streaming**: Built-in support for streaming AI responses.
|
|
9
|
+
- **Markdown Support**: Renders Markdown content with syntax highlighting.
|
|
10
|
+
- **Responsive Design**: Works seamlessly on desktop and mobile configurations.
|
|
11
|
+
- **Customizable**: extensive props to match your brand's look and feel.
|
|
12
|
+
- **Interactive**: Notifications, sound effects, and smooth animations.
|
|
13
|
+
|
|
14
|
+
## 📦 Installation
|
|
15
|
+
|
|
16
|
+
Install the package via npm:
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @dmanikanta17/chat-ui
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## 🛠️ Usage
|
|
23
|
+
|
|
24
|
+
### 1. Import necessary files
|
|
25
|
+
|
|
26
|
+
In your React component (e.g., `App.tsx` or `layout.tsx`), import the `ChatUI` component and the necessary CSS styles.
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import { ChatUI } from "@dmanikanta17/chat-ui";
|
|
30
|
+
import "@dmanikanta17/chat-ui/styles.css";
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### 2. Add the Component
|
|
34
|
+
|
|
35
|
+
Add the `<ChatUI />` component to your application tree. The only required prop is `endpoint`, which points to your backend API.
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
"use client";
|
|
39
|
+
import {ChatUI} from "@dmanikanta17/chat-ui"
|
|
40
|
+
import "@dmanikanta17/chat-ui/styles.css"
|
|
41
|
+
|
|
42
|
+
export function Rag(){
|
|
43
|
+
return (
|
|
44
|
+
<ChatUI endpoint="https://your-api-domain.com/api/chat" />
|
|
45
|
+
)
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## ⚙️ Customization
|
|
50
|
+
|
|
51
|
+
The `ChatUI` component provides various props to customize the appearance and behavior of the chatbot.
|
|
52
|
+
|
|
53
|
+
### Available Props
|
|
54
|
+
|
|
55
|
+
| Prop | Type | Required | Default | Description |
|
|
56
|
+
|------|------|:--------:|---------|-------------|
|
|
57
|
+
| `endpoint` | `string` | ✅ | - | The backend API URL for sending chat requests. |
|
|
58
|
+
| `logoSrc` | `string` | ❌ | `DEFAULT_LOGO` | URL for the chatbot avatar/logo image. |
|
|
59
|
+
| `soundSrc` | `string` | ❌ | `DEFAULT_SOUND` | URL for the notification sound played when a message arrives. |
|
|
60
|
+
| `title` | `string` | ❌ | `"AI Assistant"` | The title displayed in the chat header. |
|
|
61
|
+
| `welcomeMessage` | `string` | ❌ | `"Welcome..."` | The initial greeting message shown in the notification bubble. |
|
|
62
|
+
| `description` | `string` | ❌ | `"I'm here..."` | A short description text under the welcome message. |
|
|
63
|
+
| `footerText` | `ReactNode` | ❌ | `Default Footer` | Custom text or JSX to display in the footer of the chat window. |
|
|
64
|
+
| `inputPlaceholder` | `string` | ❌ | `"Message"` | Placeholder text for the input text area. |
|
|
65
|
+
|
|
66
|
+
### Example with customizations
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
<ChatUI
|
|
70
|
+
endpoint="https://api.myapp.com/api/chat"
|
|
71
|
+
title="Support Bot"
|
|
72
|
+
welcomeMessage="Hi there! Need help?"
|
|
73
|
+
description="Ask me anything about our products."
|
|
74
|
+
inputPlaceholder="Type your question..."
|
|
75
|
+
logoSrc="/assets/bot-avatar.png"
|
|
76
|
+
/>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## 🔌 API Endpoint Requirements
|
|
80
|
+
|
|
81
|
+
Your backend endpoint should accept a POST request with the following JSON body:
|
|
82
|
+
|
|
83
|
+
```json
|
|
84
|
+
{
|
|
85
|
+
"query": "User's message",
|
|
86
|
+
"history": [
|
|
87
|
+
{ "role": "user", "content": "previous message" },
|
|
88
|
+
{ "role": "assistant", "content": "response" }
|
|
89
|
+
],
|
|
90
|
+
"stream": true
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
And it should return a server-sent events (SSE) stream or a readable stream of text.
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
## 🧠 Configure RAG Pipeline
|
|
98
|
+
|
|
99
|
+
To make your chatbot intelligent and capable of answering questions based on your specific data (like your website content, personal pages, or documentation), you need to set up a RAG (Retrieval-Augmented Generation) pipeline.
|
|
100
|
+
|
|
101
|
+
This **Chat UI** handles the frontend experience. For the backend and to integrate your own data sources:
|
|
102
|
+
|
|
103
|
+
1. **Visit**: [services.dmanikanta.me](https://services.dmanikanta.me)
|
|
104
|
+
2. **Select Integration**: Choose the type of integration you need (Website, Personal Portfolio, Documentation, etc.).
|
|
105
|
+
3. **Get Endpoint**: Once configured, you will receive a unique API endpoint.
|
|
106
|
+
4. **Connect**: Pass that endpoint to the `<ChatUI />` component as shown in the usage section.
|
|
107
|
+
|
|
108
|
+
This service allows you to easily transform your static content into an interactive AI agent.
|
|
109
|
+
|
|
110
|
+
## 🤝 Support
|
|
111
|
+
|
|
112
|
+
For support or questions, please contact me at: **darapureddymanikanta8@gmail.com**
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
Made with 💛 by [Manikanta Darapureddy](https://www.dmanikanta.me)
|