@idevconn/ai-chat-client 0.1.2 โ 0.1.3
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 +117 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
# ๐ฌ iDEVconn AI Chat - Universal Frontend Widget
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@idevconn/ai-chat-client)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
|
|
6
|
+
**`@idevconn/ai-chat-client`** is a beautifully designed, universal frontend widget for the iDEVconn AI Chat platform.
|
|
7
|
+
|
|
8
|
+
It provides a highly responsive, visual chat interface that connects seamlessly to your backend. The widget is completely framework-agnosticโdrop it in as a React component, a universal custom Web Component, or a plain HTML script tag!
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## ๐ Integration Options
|
|
13
|
+
|
|
14
|
+
### Option A: React / Next.js (Recommended)
|
|
15
|
+
|
|
16
|
+
Import the React component and the default stylesheet into your application:
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @idevconn/ai-chat-client
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import { AiChat } from '@idevconn/ai-chat-client/react';
|
|
24
|
+
import '@idevconn/ai-chat-client/styles.css';
|
|
25
|
+
|
|
26
|
+
function App() {
|
|
27
|
+
return (
|
|
28
|
+
<AiChat
|
|
29
|
+
endpoint="http://localhost:3000/api/v1/chat"
|
|
30
|
+
apiKey="your_secure_shared_widget_secret"
|
|
31
|
+
/>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export default App;
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Option B: HTML / WordPress / Webflow
|
|
39
|
+
|
|
40
|
+
Don't have a build step? No problem. Simply reference the standalone module script. No compilation or bundling required!
|
|
41
|
+
|
|
42
|
+
```html
|
|
43
|
+
<!-- 1. Include the stylesheet -->
|
|
44
|
+
<link rel="stylesheet" href="https://unpkg.com/@idevconn/ai-chat-client/dist/styles.css" />
|
|
45
|
+
|
|
46
|
+
<!-- 2. Mount the widget script as a module -->
|
|
47
|
+
<script
|
|
48
|
+
src="https://unpkg.com/@idevconn/ai-chat-client/dist/standalone/index.mjs"
|
|
49
|
+
type="module"
|
|
50
|
+
></script>
|
|
51
|
+
|
|
52
|
+
<!-- 3. Place the custom element anywhere in your body -->
|
|
53
|
+
<ai-chat endpoint="http://localhost:3000/api/v1/chat" api-key="your_secure_shared_widget_secret">
|
|
54
|
+
</ai-chat>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
## ๐จ Theme Customization
|
|
60
|
+
|
|
61
|
+
The widget is highly customizable, allowing you to seamlessly align it with your brand's existing design system:
|
|
62
|
+
|
|
63
|
+
### Theme Configuration Object
|
|
64
|
+
|
|
65
|
+
```typescript
|
|
66
|
+
export interface ThemeConfig {
|
|
67
|
+
primaryColor?: string; // Primary brand color (default: '#6366f1')
|
|
68
|
+
borderRadius?: string; // Rounded corners of chat panel (default: '12px')
|
|
69
|
+
fontFamily?: string; // Font stack of chat widget
|
|
70
|
+
darkMode?: boolean; // Enables dark mode toggle
|
|
71
|
+
position?: 'bottom-right' | 'bottom-left'; // Floating corner location
|
|
72
|
+
width?: string; // Width of chat panel (default: '380px')
|
|
73
|
+
height?: string; // Height of chat panel (default: '560px')
|
|
74
|
+
zIndex?: number; // Layer overlay depth (default: 9999)
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Advanced Styling Example (React)
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
<AiChat
|
|
82
|
+
endpoint="http://localhost:3000/api/v1/chat"
|
|
83
|
+
apiKey="your_secure_shared_widget_secret"
|
|
84
|
+
theme={{
|
|
85
|
+
primaryColor: '#5c67f2', // Premium custom indigo/blue
|
|
86
|
+
borderRadius: '16px', // Smooth rounded panels
|
|
87
|
+
position: 'bottom-right',
|
|
88
|
+
width: '400px',
|
|
89
|
+
height: '600px',
|
|
90
|
+
}}
|
|
91
|
+
welcomeMessage="Hello! How can I help you today?"
|
|
92
|
+
botName="iDEVconn Assistant"
|
|
93
|
+
botAvatar="๐ค"
|
|
94
|
+
/>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
## ๐ ๏ธ API Reference
|
|
100
|
+
|
|
101
|
+
### Component Props / HTML Attributes
|
|
102
|
+
|
|
103
|
+
| Prop (React) | Attribute (HTML) | Description | Required |
|
|
104
|
+
| :--------------- | :---------------- | :------------------------------------------------- | :------- |
|
|
105
|
+
| `endpoint` | `endpoint` | The URL of your `@idevconn/ai-chat-be` backend | Yes |
|
|
106
|
+
| `apiKey` | `api-key` | The shared secret to authenticate with the backend | Yes |
|
|
107
|
+
| `welcomeMessage` | `welcome-message` | Initial greeting displayed to the user | No |
|
|
108
|
+
| `botName` | `bot-name` | Display name for the AI | No |
|
|
109
|
+
| `botAvatar` | `bot-avatar` | Emoji or image URL for the AI avatar | No |
|
|
110
|
+
| `theme` | _(N/A for HTML)_ | Theme configuration object | No |
|
|
111
|
+
|
|
112
|
+
---
|
|
113
|
+
|
|
114
|
+
## ๐ Pair with the Backend Module
|
|
115
|
+
|
|
116
|
+
This widget is designed to be powered by our Zero-DB RAG NestJS backend module.
|
|
117
|
+
Check out **[`@idevconn/ai-chat-be`](https://www.npmjs.com/package/@idevconn/ai-chat-be)** to complete the integration!
|