@dmanikanta17/chat-ui 0.1.16 → 0.1.17

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.
Files changed (2) hide show
  1. package/README.md +88 -41
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -2,70 +2,114 @@
2
2
 
3
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
4
 
5
+ **Now with support for vanilla HTML websites!**
6
+
5
7
  ## 🚀 Features
6
8
 
7
- - **Easy Integration**: Drop-in component for any React project.
9
+ - **Easy Integration**: Drop-in component for React or plain HTML.
8
10
  - **Real-time Streaming**: Built-in support for streaming AI responses.
9
11
  - **Markdown Support**: Renders Markdown content with syntax highlighting.
10
12
  - **Responsive Design**: Works seamlessly on desktop and mobile configurations.
11
- - **Customizable**: extensive props to match your brand's look and feel.
13
+ - **Customizable**: Extensive options to match your brand's look and feel.
12
14
  - **Interactive**: Notifications, sound effects, and smooth animations.
13
15
 
14
- ## 📦 Installation
16
+ ---
17
+
18
+ ## 📦 Installation & Usage
15
19
 
16
- Install the package via npm:
20
+ You can use this package in a **React** application or directly in an **HTML** website.
17
21
 
22
+ ### Option 1: React Application
23
+
24
+ #### 1. Install via npm
18
25
  ```bash
19
26
  npm install @dmanikanta17/chat-ui
20
27
  ```
21
28
 
22
- ## 🛠️ Usage
23
-
24
- ### 1. Import necessary files
29
+ #### 2. Import styles
30
+ In your root layout or component (e.g., `App.tsx`, `layout.tsx`):
31
+ ```tsx
32
+ import "@dmanikanta17/chat-ui/styles.css";
33
+ ```
25
34
 
26
- In your React component (e.g., `App.tsx` or `layout.tsx`), import the `ChatUI` component and the necessary CSS styles.
35
+ #### 3. Add the Component
36
+ Import and use the `ChatUI` component. The only required prop is `endpoint`.
27
37
 
28
38
  ```tsx
39
+ "use client";
29
40
  import { ChatUI } from "@dmanikanta17/chat-ui";
30
- import "@dmanikanta17/chat-ui/styles.css";
41
+
42
+ export function AIWidget() {
43
+ return (
44
+ <ChatUI
45
+ endpoint="https://your-api-domain.com/api/chat"
46
+ title="Support Assistant"
47
+ />
48
+ );
49
+ }
31
50
  ```
32
51
 
33
- ### 2. Add the Component
52
+ ---
34
53
 
35
- Add the `<ChatUI />` component to your application tree. The only required prop is `endpoint`, which points to your backend API.
54
+ ### Option 2: HTML Website
36
55
 
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
- }
56
+ You can adds this chat widget to any static HTML website using our CDN.
57
+
58
+ **[Live Preview Here](https://dmanikanta-ai-plugin.vercel.app/)**
59
+
60
+ #### 1. Add CSS
61
+ Add this line inside the `<head>` tag:
62
+ ```html
63
+ <link rel="stylesheet" href="https://dmanikanta-ai-plugin.vercel.app/chat-ui-widget.css">
47
64
  ```
48
65
 
49
- ## ⚙️ Customization
66
+ #### 2. Add Container
67
+ Add an empty container where the widget should be mounted (usually at the end of `<body>`):
68
+ ```html
69
+ <div id="chat-widget"></div>
70
+ ```
50
71
 
51
- The `ChatUI` component provides various props to customize the appearance and behavior of the chatbot.
72
+ #### 3. Add Script
73
+ Add the script tag at the end of your `<body>`:
74
+ ```html
75
+ <script src="https://dmanikanta-ai-plugin.vercel.app/chat-ui-widget.js"></script>
76
+ ```
52
77
 
53
- ### Available Props
78
+ #### 4. Initialize
79
+ Initialize the widget with your configuration:
80
+ ```html
81
+ <script>
82
+ window.mountChatUI('chat-widget', {
83
+ endpoint: 'https://your-api-endpoint.com/chat',
84
+ title: 'Support Chat',
85
+ welcomeMessage: 'Hello! How can we help you today?',
86
+ description: 'We typically reply in a few minutes.',
87
+ logoSrc: 'https://cdn-icons-png.flaticon.com/512/6134/6134346.png',
88
+ theme: 'light', // or 'dark'
89
+ footerText: 'Powered by Custom RAG'
90
+ });
91
+ </script>
92
+ ```
54
93
 
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
- | `theme` | `"light" \| "dark"` | ❌ | `"light"` | The color theme of the chat UI. |
94
+ ---
66
95
 
67
- ### Example with customizations
96
+ ## ⚙️ Configuration
68
97
 
98
+ These options work for both the **React Component props** and the **HTML Widget config object**.
99
+
100
+ | Property | Type | Default | Description |
101
+ |----------|------|---------|-------------|
102
+ | `endpoint` | `string` | **Required** | The backend API URL for chat requests. |
103
+ | `title` | `string` | `"AI Assistant"` | Title displayed in the chat header. |
104
+ | `welcomeMessage` | `string` | `"Welcome..."` | Initial greeting in the notification bubble. |
105
+ | `description` | `string` | `"I'm here..."` | Subtitle text under the welcome message. |
106
+ | `inputPlaceholder` | `string` | `"Message"` | Placeholder text for the input area. |
107
+ | `logoSrc` | `string` | `Default Logo` | URL for the chatbot avatar. |
108
+ | `soundSrc` | `string` | `Default Sound` | URL for the notification sound. |
109
+ | `theme` | `"light" \| "dark"` | `"light"` | Color theme of the interface. |
110
+ | `footerText` | `ReactNode` | `Default Footer` | Text to display in the footer. |
111
+
112
+ ### React Example with Full Customization
69
113
  ```tsx
70
114
  <ChatUI
71
115
  endpoint="https://api.myapp.com/api/chat"
@@ -78,19 +122,22 @@ The `ChatUI` component provides various props to customize the appearance and be
78
122
  />
79
123
  ```
80
124
 
125
+ ---
81
126
 
82
127
  ## 🧠 Configure RAG Pipeline
83
128
 
84
129
  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.
85
130
 
86
- This **Chat UI** handles the frontend experience. For the backend and to integrate your own data sources:
131
+ This **Chat UI** handles the frontend. For the backend:
87
132
 
88
133
  1. **Visit**: [services.dmanikanta.me](https://services.dmanikanta.me)
89
- 2. **Select Integration**: Choose the type of integration you need (Website, Personal Portfolio, Documentation, etc.).
90
- 3. **Get Endpoint**: Once configured, you will receive a unique API endpoint.
91
- 4. **Connect**: Pass that endpoint to the `<ChatUI />` component as shown in the usage section.
134
+ 2. **Select Integration**: Choose your data source (Website, Portfolio, Documentation, etc.).
135
+ 3. **Get Endpoint**: Receive your unique API endpoint.
136
+ 4. **Connect**: Pass that endpoint to the `ChatUI` component (or HTML widget).
92
137
 
93
- This service allows you to easily transform your static content into an interactive AI agent.
138
+ This service transforms your static content into an interactive AI agent.
139
+
140
+ ---
94
141
 
95
142
  ## 🤝 Support
96
143
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dmanikanta17/chat-ui",
3
- "version": "0.1.16",
3
+ "version": "0.1.17",
4
4
  "description": "Reusable Chat UI React Component",
5
5
  "license": "MIT",
6
6
  "author": "dmanikanta17",