@cliniq360/eigi-chat 0.1.0

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 (3) hide show
  1. package/README.md +205 -0
  2. package/dist/eigi-chat.js +48 -0
  3. package/package.json +76 -0
package/README.md ADDED
@@ -0,0 +1,205 @@
1
+ # @eigi/chat
2
+
3
+ Embeddable AI chat dialog with voice and text capabilities. A standalone, lightweight package for adding AI-powered conversations to any website.
4
+
5
+ ## Features
6
+
7
+ - 🎯 **Full-screen Dialog** - Clean modal interface with Welcome, Chat, and Talk screens
8
+ - 💬 **Text Chat** - Real-time chat with streaming responses
9
+ - 🎤 **Voice Calls** - Live voice conversations powered by Pipecat + Daily
10
+ - 🎨 **Themeable** - Automatically applies your agent's theme configuration
11
+ - 🔒 **CSS Isolated** - Uses Shadow DOM to prevent style conflicts with host page
12
+ - 📦 **Self-contained** - Single script bundle, no external dependencies at runtime
13
+
14
+ ## Installation
15
+
16
+ ### Via CDN (Recommended)
17
+
18
+ ```html
19
+ <!-- Add the widget element -->
20
+ <eigi-chat agent-id="YOUR_AGENT_ID"></eigi-chat>
21
+
22
+ <!-- Load the script -->
23
+ <script src="https://unpkg.com/@eigi/chat@latest/dist/eigi-chat.js"></script>
24
+ ```
25
+
26
+ ### Via NPM
27
+
28
+ ```bash
29
+ npm install @eigi/chat
30
+ ```
31
+
32
+ ## Usage
33
+
34
+ ### Basic Usage
35
+
36
+ Add the custom element to your HTML and include the script:
37
+
38
+ ```html
39
+ <!DOCTYPE html>
40
+ <html>
41
+ <body>
42
+ <!-- Button to open the chat -->
43
+ <button onclick="window.EigiChat.open()">Chat with AI</button>
44
+
45
+ <!-- Widget element (renders nothing until opened) -->
46
+ <eigi-chat agent-id="YOUR_AGENT_ID"></eigi-chat>
47
+
48
+ <!-- Script (load after the element or at end of body) -->
49
+ <script src="https://unpkg.com/@eigi/chat@latest/dist/eigi-chat.js"></script>
50
+ </body>
51
+ </html>
52
+ ```
53
+
54
+ ### JavaScript API
55
+
56
+ ```javascript
57
+ // Open the dialog (shows Welcome screen)
58
+ window.EigiChat.open();
59
+
60
+ // Close the dialog
61
+ window.EigiChat.close();
62
+
63
+ // Toggle open/close
64
+ window.EigiChat.toggle();
65
+
66
+ // Check if dialog is open
67
+ const isOpen = window.EigiChat.isOpen();
68
+
69
+ // Open directly to Chat mode
70
+ window.EigiChat.openChat();
71
+
72
+ // Open directly to Talk (voice) mode
73
+ window.EigiChat.openTalk();
74
+
75
+ // Initialize with custom settings
76
+ window.EigiChat.init({
77
+ agentId: "YOUR_AGENT_ID",
78
+ metadata: {
79
+ userId: "123",
80
+ sessionId: "abc",
81
+ },
82
+ });
83
+ ```
84
+
85
+ ### Using Data Attributes
86
+
87
+ You can auto-initialize from the script tag:
88
+
89
+ ```html
90
+ <script
91
+ src="https://unpkg.com/@eigi/chat@latest/dist/eigi-chat.js"
92
+ data-agent-id="YOUR_AGENT_ID"
93
+ data-metadata='{"userId": "123"}'
94
+ ></script>
95
+ ```
96
+
97
+ ### Wix Integration
98
+
99
+ 1. Add an HTML Embed element to your Wix page
100
+ 2. Paste the following code:
101
+
102
+ ```html
103
+ <eigi-chat agent-id="YOUR_AGENT_ID"></eigi-chat>
104
+ <script src="https://unpkg.com/@eigi/chat@latest/dist/eigi-chat.js"></script>
105
+ ```
106
+
107
+ 3. Add a button with Velo code:
108
+
109
+ ```javascript
110
+ $w.onReady(function () {
111
+ $w("#chatButton").onClick(() => {
112
+ window.EigiChat.open();
113
+ });
114
+ });
115
+ ```
116
+
117
+ ## Dialog Screens
118
+
119
+ ### Welcome Screen
120
+
121
+ Shows the agent's avatar, name, and two CTAs:
122
+
123
+ - **Talk** - Start a voice conversation
124
+ - **Chat** - Start a text conversation
125
+
126
+ ### Chat Screen
127
+
128
+ Text-based chat interface with:
129
+
130
+ - Message bubbles (user on right, agent on left)
131
+ - Text input with send button
132
+ - Switch to voice button in header
133
+
134
+ ### Talk Screen
135
+
136
+ Voice call interface with:
137
+
138
+ - Agent avatar with status indicator
139
+ - Real-time transcripts
140
+ - Mute/unmute button
141
+ - End call button
142
+ - Switch to chat option
143
+
144
+ ## Shadow DOM & CSS Isolation
145
+
146
+ This widget uses Shadow DOM to completely isolate its styles from your page:
147
+
148
+ - Your page's CSS will **not** affect the widget
149
+ - The widget's CSS will **not** leak to your page
150
+ - Multiple widgets can coexist without conflicts
151
+ - Theme is applied via CSS custom properties
152
+
153
+ ## Browser Support
154
+
155
+ - Chrome 73+
156
+ - Safari 16.4+
157
+ - Firefox 101+
158
+ - Edge 79+
159
+
160
+ Older browsers use a fallback method for CSS injection.
161
+
162
+ ## API Reference
163
+
164
+ ### Attributes
165
+
166
+ | Attribute | Type | Required | Description |
167
+ | ---------- | ----------- | -------- | ----------------------------------------- |
168
+ | `agent-id` | string | Yes | Your Eigi agent ID |
169
+ | `metadata` | JSON string | No | Additional metadata to send with messages |
170
+
171
+ ### Events
172
+
173
+ The widget uses the global `window.EigiChat` API. Future versions will add custom events.
174
+
175
+ ### Methods
176
+
177
+ | Method | Description |
178
+ | -------------- | -------------------------------------------- |
179
+ | `open()` | Opens the dialog to Welcome screen |
180
+ | `close()` | Closes the dialog |
181
+ | `toggle()` | Toggles the dialog open/close |
182
+ | `isOpen()` | Returns boolean indicating if dialog is open |
183
+ | `openChat()` | Opens directly to Chat screen |
184
+ | `openTalk()` | Opens directly to Talk screen |
185
+ | `init(config)` | Initialize with agentId and metadata |
186
+
187
+ ## Development
188
+
189
+ ```bash
190
+ # Install dependencies
191
+ npm install
192
+
193
+ # Start development server
194
+ npm run dev
195
+
196
+ # Build for production
197
+ npm run build
198
+
199
+ # Preview production build
200
+ npm run preview
201
+ ```
202
+
203
+ ## License
204
+
205
+ MIT © [eigi.ai](https://eigi.ai)