test-chat-component-per 1.0.1
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/LICENSE +29 -0
- package/README.md +298 -0
- package/dist/delachat-webcomponent.js +683 -0
- package/dist/delachat-webcomponent.min.js +1 -0
- package/dist/delachat-webcomponent.min.js.map +1 -0
- package/package.json +66 -0
- package/src/delachat-webcomponent.js +683 -0
- package/src/delachat.css +430 -0
- package/src/delachat.js +580 -0
- package/src/index.html +343 -0
- package/src/webcomponent-demo.html +452 -0
- package/types/index.d.ts +130 -0
|
@@ -0,0 +1,452 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>DelaChat Web Component Demo</title>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 20px;
|
|
12
|
+
background: #f5f5f5;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.demo-container {
|
|
16
|
+
max-width: 1200px;
|
|
17
|
+
margin: 0 auto;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.demo-header {
|
|
21
|
+
text-align: center;
|
|
22
|
+
margin-bottom: 40px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
h1 {
|
|
26
|
+
color: #7C3AED;
|
|
27
|
+
margin: 0 0 10px 0;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.demo-grid {
|
|
31
|
+
display: grid;
|
|
32
|
+
grid-template-columns: 1fr 1fr;
|
|
33
|
+
gap: 20px;
|
|
34
|
+
margin: 20px 0;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.demo-card {
|
|
38
|
+
background: white;
|
|
39
|
+
border-radius: 12px;
|
|
40
|
+
padding: 20px;
|
|
41
|
+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.demo-card h2 {
|
|
45
|
+
margin-top: 0;
|
|
46
|
+
color: #333;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.code-block {
|
|
50
|
+
background: #f8f9fa;
|
|
51
|
+
border: 1px solid #e9ecef;
|
|
52
|
+
border-radius: 6px;
|
|
53
|
+
padding: 12px;
|
|
54
|
+
font-family: 'Courier New', monospace;
|
|
55
|
+
font-size: 13px;
|
|
56
|
+
overflow-x: auto;
|
|
57
|
+
margin: 10px 0;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.controls {
|
|
61
|
+
display: grid;
|
|
62
|
+
gap: 10px;
|
|
63
|
+
margin: 20px 0;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.controls button {
|
|
67
|
+
padding: 10px 20px;
|
|
68
|
+
background: #7C3AED;
|
|
69
|
+
color: white;
|
|
70
|
+
border: none;
|
|
71
|
+
border-radius: 6px;
|
|
72
|
+
cursor: pointer;
|
|
73
|
+
font-size: 14px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.controls button:hover {
|
|
77
|
+
background: #6D28D9;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.info-box {
|
|
81
|
+
background: #EEF2FF;
|
|
82
|
+
border: 1px solid #C7D2FE;
|
|
83
|
+
border-radius: 8px;
|
|
84
|
+
padding: 16px;
|
|
85
|
+
margin: 20px 0;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.info-box h3 {
|
|
89
|
+
margin-top: 0;
|
|
90
|
+
color: #5B21B6;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
#chat-container {
|
|
94
|
+
height: 600px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
@media (max-width: 768px) {
|
|
98
|
+
.demo-grid {
|
|
99
|
+
grid-template-columns: 1fr;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
</style>
|
|
103
|
+
</head>
|
|
104
|
+
<body>
|
|
105
|
+
<div class="demo-container">
|
|
106
|
+
<div class="demo-header">
|
|
107
|
+
<h1>🎨 DelaChat Web Component</h1>
|
|
108
|
+
<p>Native browser custom element - works anywhere!</p>
|
|
109
|
+
</div>
|
|
110
|
+
|
|
111
|
+
<div class="info-box">
|
|
112
|
+
<h3>✨ What's a Web Component?</h3>
|
|
113
|
+
<p>A <strong>Web Component</strong> is a custom HTML element that works in any framework (or no framework!).</p>
|
|
114
|
+
<ul>
|
|
115
|
+
<li><strong>Encapsulated</strong> - Styles don't leak out</li>
|
|
116
|
+
<li><strong>Reusable</strong> - Use like any HTML tag</li>
|
|
117
|
+
<li><strong>Framework agnostic</strong> - Works with React, Vue, Angular, vanilla JS</li>
|
|
118
|
+
<li><strong>Native</strong> - Built into the browser, no dependencies</li>
|
|
119
|
+
</ul>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<div class="demo-grid">
|
|
123
|
+
<!-- Usage Examples -->
|
|
124
|
+
<div class="demo-card">
|
|
125
|
+
<h2>📝 Usage (Super Simple!)</h2>
|
|
126
|
+
|
|
127
|
+
<h3>1. Include Script</h3>
|
|
128
|
+
<div class="code-block">
|
|
129
|
+
<script src="delachat-webcomponent.js"></script>
|
|
130
|
+
</div>
|
|
131
|
+
|
|
132
|
+
<h3>2. Use the Tag</h3>
|
|
133
|
+
<div class="code-block">
|
|
134
|
+
<dela-chat
|
|
135
|
+
api-url="https://localhost:5001"
|
|
136
|
+
session-uid="your-session"
|
|
137
|
+
datasource="EPMSCA"
|
|
138
|
+
product-id="200"
|
|
139
|
+
token="your-token">
|
|
140
|
+
</dela-chat>
|
|
141
|
+
</div>
|
|
142
|
+
|
|
143
|
+
<h3>3. That's it! ✅</h3>
|
|
144
|
+
<p>No initialization code needed!</p>
|
|
145
|
+
|
|
146
|
+
<h3>🎮 Control Buttons</h3>
|
|
147
|
+
<div class="controls">
|
|
148
|
+
<button onclick="chat.open()">Open Chat</button>
|
|
149
|
+
<button onclick="chat.close()">Close Chat</button>
|
|
150
|
+
<button onclick="chat.clearHistory()">Clear History</button>
|
|
151
|
+
<button onclick="sendProgrammaticMessage()">Send Message Programmatically</button>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
<!-- Live Demo -->
|
|
156
|
+
<div class="demo-card">
|
|
157
|
+
<h2>💬 Live Demo</h2>
|
|
158
|
+
<div id="chat-container">
|
|
159
|
+
<!-- Web Component -->
|
|
160
|
+
<dela-chat
|
|
161
|
+
id="myChat"
|
|
162
|
+
api-url="https://localhost:5001"
|
|
163
|
+
session-uid="demo-session-123"
|
|
164
|
+
datasource="EPMSCA"
|
|
165
|
+
product-id="200"
|
|
166
|
+
token="demo-token-456"
|
|
167
|
+
height="550px">
|
|
168
|
+
</dela-chat>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
|
|
173
|
+
<!-- Integration Examples -->
|
|
174
|
+
<div class="demo-card">
|
|
175
|
+
<h2>🔗 Integration Examples</h2>
|
|
176
|
+
|
|
177
|
+
<h3>Vanilla JavaScript</h3>
|
|
178
|
+
<div class="code-block">
|
|
179
|
+
<script src="delachat-webcomponent.js"></script>
|
|
180
|
+
|
|
181
|
+
<dela-chat id="chat"
|
|
182
|
+
api-url="https://api.company.com"
|
|
183
|
+
session-uid="session-123"
|
|
184
|
+
token="token-456">
|
|
185
|
+
</dela-chat>
|
|
186
|
+
|
|
187
|
+
<script>
|
|
188
|
+
const chat = document.getElementById('chat');
|
|
189
|
+
|
|
190
|
+
// Listen to events
|
|
191
|
+
chat.addEventListener('message-sent', (e) => {
|
|
192
|
+
console.log('User sent:', e.detail.message);
|
|
193
|
+
});
|
|
194
|
+
|
|
195
|
+
chat.addEventListener('message-received', (e) => {
|
|
196
|
+
console.log('AI replied:', e.detail.message);
|
|
197
|
+
});
|
|
198
|
+
|
|
199
|
+
chat.addEventListener('error', (e) => {
|
|
200
|
+
console.error('Error:', e.detail.error);
|
|
201
|
+
});
|
|
202
|
+
|
|
203
|
+
// Control programmatically
|
|
204
|
+
chat.sendMessage('Hello!');
|
|
205
|
+
</script>
|
|
206
|
+
</div>
|
|
207
|
+
|
|
208
|
+
<h3>React</h3>
|
|
209
|
+
<div class="code-block">
|
|
210
|
+
import { useRef, useEffect } from 'react';
|
|
211
|
+
|
|
212
|
+
function ChatWidget({ sessionUid, token }) {
|
|
213
|
+
const chatRef = useRef(null);
|
|
214
|
+
|
|
215
|
+
useEffect(() => {
|
|
216
|
+
const chat = chatRef.current;
|
|
217
|
+
|
|
218
|
+
const handleMessage = (e) => {
|
|
219
|
+
console.log('Message sent:', e.detail.message);
|
|
220
|
+
};
|
|
221
|
+
|
|
222
|
+
chat.addEventListener('message-sent', handleMessage);
|
|
223
|
+
|
|
224
|
+
return () => {
|
|
225
|
+
chat.removeEventListener('message-sent', handleMessage);
|
|
226
|
+
};
|
|
227
|
+
}, []);
|
|
228
|
+
|
|
229
|
+
return (
|
|
230
|
+
<dela-chat
|
|
231
|
+
ref={chatRef}
|
|
232
|
+
api-url="https://api.company.com"
|
|
233
|
+
session-uid={sessionUid}
|
|
234
|
+
datasource="EPMSCA"
|
|
235
|
+
product-id="200"
|
|
236
|
+
token={token}
|
|
237
|
+
/>
|
|
238
|
+
);
|
|
239
|
+
}
|
|
240
|
+
</div>
|
|
241
|
+
|
|
242
|
+
<h3>Vue</h3>
|
|
243
|
+
<div class="code-block">
|
|
244
|
+
<template>
|
|
245
|
+
<dela-chat
|
|
246
|
+
ref="chat"
|
|
247
|
+
:api-url="apiUrl"
|
|
248
|
+
:session-uid="sessionUid"
|
|
249
|
+
:datasource="datasource"
|
|
250
|
+
:product-id="productId"
|
|
251
|
+
:token="token"
|
|
252
|
+
@message-sent="handleMessageSent"
|
|
253
|
+
@message-received="handleMessageReceived"
|
|
254
|
+
@error="handleError"
|
|
255
|
+
/>
|
|
256
|
+
</template>
|
|
257
|
+
|
|
258
|
+
<script>
|
|
259
|
+
export default {
|
|
260
|
+
props: ['sessionUid', 'token'],
|
|
261
|
+
data() {
|
|
262
|
+
return {
|
|
263
|
+
apiUrl: 'https://api.company.com',
|
|
264
|
+
datasource: 'EPMSCA',
|
|
265
|
+
productId: 200
|
|
266
|
+
};
|
|
267
|
+
},
|
|
268
|
+
methods: {
|
|
269
|
+
handleMessageSent(e) {
|
|
270
|
+
console.log('Sent:', e.detail.message);
|
|
271
|
+
},
|
|
272
|
+
handleMessageReceived(e) {
|
|
273
|
+
console.log('Received:', e.detail.message);
|
|
274
|
+
},
|
|
275
|
+
handleError(e) {
|
|
276
|
+
console.error('Error:', e.detail.error);
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
};
|
|
280
|
+
</script>
|
|
281
|
+
</div>
|
|
282
|
+
|
|
283
|
+
<h3>Angular</h3>
|
|
284
|
+
<div class="code-block">
|
|
285
|
+
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
|
|
286
|
+
|
|
287
|
+
@Component({
|
|
288
|
+
selector: 'app-chat',
|
|
289
|
+
template: `
|
|
290
|
+
<dela-chat #chat
|
|
291
|
+
[attr.api-url]="apiUrl"
|
|
292
|
+
[attr.session-uid]="sessionUid"
|
|
293
|
+
[attr.datasource]="datasource"
|
|
294
|
+
[attr.product-id]="productId"
|
|
295
|
+
[attr.token]="token">
|
|
296
|
+
</dela-chat>
|
|
297
|
+
`
|
|
298
|
+
})
|
|
299
|
+
export class ChatComponent implements AfterViewInit {
|
|
300
|
+
@ViewChild('chat') chatElement: ElementRef;
|
|
301
|
+
|
|
302
|
+
apiUrl = 'https://api.company.com';
|
|
303
|
+
sessionUid = 'session-123';
|
|
304
|
+
datasource = 'EPMSCA';
|
|
305
|
+
productId = 200;
|
|
306
|
+
token = 'token-456';
|
|
307
|
+
|
|
308
|
+
ngAfterViewInit() {
|
|
309
|
+
const chat = this.chatElement.nativeElement;
|
|
310
|
+
|
|
311
|
+
chat.addEventListener('message-sent', (e: any) => {
|
|
312
|
+
console.log('Sent:', e.detail.message);
|
|
313
|
+
});
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
</div>
|
|
317
|
+
|
|
318
|
+
<h3>WinForms / WPF (WebView2)</h3>
|
|
319
|
+
<div class="code-block">
|
|
320
|
+
// Same as before - just load the HTML with the component!
|
|
321
|
+
await webView.ExecuteScriptAsync(@"
|
|
322
|
+
// Web component already in page, just update attributes
|
|
323
|
+
const chat = document.querySelector('dela-chat');
|
|
324
|
+
chat.setAttribute('session-uid', '" + sessionUid + @"');
|
|
325
|
+
chat.setAttribute('token', '" + token + @"');
|
|
326
|
+
");
|
|
327
|
+
</div>
|
|
328
|
+
</div>
|
|
329
|
+
|
|
330
|
+
<!-- API Reference -->
|
|
331
|
+
<div class="demo-card">
|
|
332
|
+
<h2>📚 API Reference</h2>
|
|
333
|
+
|
|
334
|
+
<h3>Attributes</h3>
|
|
335
|
+
<ul>
|
|
336
|
+
<li><code>api-url</code> - API base URL (required)</li>
|
|
337
|
+
<li><code>session-uid</code> - Session UID (required)</li>
|
|
338
|
+
<li><code>datasource</code> - Datasource name (required)</li>
|
|
339
|
+
<li><code>product-id</code> - Product ID (required)</li>
|
|
340
|
+
<li><code>token</code> - Verification token (required)</li>
|
|
341
|
+
<li><code>theme</code> - "light" or "dark" (optional, default: light)</li>
|
|
342
|
+
<li><code>height</code> - Height (optional, default: 600px)</li>
|
|
343
|
+
<li><code>width</code> - Width (optional, default: 100%)</li>
|
|
344
|
+
</ul>
|
|
345
|
+
|
|
346
|
+
<h3>Methods</h3>
|
|
347
|
+
<ul>
|
|
348
|
+
<li><code>chat.sendMessage(text)</code> - Send a message</li>
|
|
349
|
+
<li><code>chat.open()</code> - Open chat</li>
|
|
350
|
+
<li><code>chat.close()</code> - Close chat</li>
|
|
351
|
+
<li><code>chat.clearHistory()</code> - Clear messages</li>
|
|
352
|
+
</ul>
|
|
353
|
+
|
|
354
|
+
<h3>Events</h3>
|
|
355
|
+
<ul>
|
|
356
|
+
<li><code>ready</code> - Fired when component is ready</li>
|
|
357
|
+
<li><code>message-sent</code> - User sent a message</li>
|
|
358
|
+
<li><code>message-received</code> - AI sent a response</li>
|
|
359
|
+
<li><code>error</code> - An error occurred</li>
|
|
360
|
+
<li><code>close</code> - User clicked close button</li>
|
|
361
|
+
</ul>
|
|
362
|
+
</div>
|
|
363
|
+
|
|
364
|
+
<!-- Advantages -->
|
|
365
|
+
<div class="demo-card">
|
|
366
|
+
<h2>🎯 Why Web Components?</h2>
|
|
367
|
+
|
|
368
|
+
<h3>vs Vanilla JS (Current Approach)</h3>
|
|
369
|
+
<table style="width: 100%; border-collapse: collapse;">
|
|
370
|
+
<tr style="background: #f8f9fa;">
|
|
371
|
+
<th style="padding: 8px; text-align: left; border-bottom: 2px solid #dee2e6;">Feature</th>
|
|
372
|
+
<th style="padding: 8px; text-align: left; border-bottom: 2px solid #dee2e6;">Vanilla JS</th>
|
|
373
|
+
<th style="padding: 8px; text-align: left; border-bottom: 2px solid #dee2e6;">Web Component</th>
|
|
374
|
+
</tr>
|
|
375
|
+
<tr>
|
|
376
|
+
<td style="padding: 8px; border-bottom: 1px solid #dee2e6;">Usage</td>
|
|
377
|
+
<td style="padding: 8px; border-bottom: 1px solid #dee2e6;">DelaChat.create('#id', config)</td>
|
|
378
|
+
<td style="padding: 8px; border-bottom: 1px solid #dee2e6;"><dela-chat ...></td>
|
|
379
|
+
</tr>
|
|
380
|
+
<tr>
|
|
381
|
+
<td style="padding: 8px; border-bottom: 1px solid #dee2e6;">HTML-like</td>
|
|
382
|
+
<td style="padding: 8px; border-bottom: 1px solid #dee2e6;">❌ JavaScript API</td>
|
|
383
|
+
<td style="padding: 8px; border-bottom: 1px solid #dee2e6;">✅ HTML tag</td>
|
|
384
|
+
</tr>
|
|
385
|
+
<tr>
|
|
386
|
+
<td style="padding: 8px; border-bottom: 1px solid #dee2e6;">Style isolation</td>
|
|
387
|
+
<td style="padding: 8px; border-bottom: 1px solid #dee2e6;">⚠️ CSS classes only</td>
|
|
388
|
+
<td style="padding: 8px; border-bottom: 1px solid #dee2e6;">✅ Shadow DOM</td>
|
|
389
|
+
</tr>
|
|
390
|
+
<tr>
|
|
391
|
+
<td style="padding: 8px; border-bottom: 1px solid #dee2e6;">Framework support</td>
|
|
392
|
+
<td style="padding: 8px; border-bottom: 1px solid #dee2e6;">✅ Works</td>
|
|
393
|
+
<td style="padding: 8px; border-bottom: 1px solid #dee2e6;">✅ Native support</td>
|
|
394
|
+
</tr>
|
|
395
|
+
<tr>
|
|
396
|
+
<td style="padding: 8px; border-bottom: 1px solid #dee2e6;">Browser API</td>
|
|
397
|
+
<td style="padding: 8px; border-bottom: 1px solid #dee2e6;">❌ Custom</td>
|
|
398
|
+
<td style="padding: 8px; border-bottom: 1px solid #dee2e6;">✅ Standard</td>
|
|
399
|
+
</tr>
|
|
400
|
+
</table>
|
|
401
|
+
|
|
402
|
+
<h3 style="margin-top: 20px;">Key Advantages</h3>
|
|
403
|
+
<ul>
|
|
404
|
+
<li>✅ <strong>Cleaner HTML</strong> - Use as a regular tag</li>
|
|
405
|
+
<li>✅ <strong>True encapsulation</strong> - Shadow DOM isolates styles</li>
|
|
406
|
+
<li>✅ <strong>Browser standard</strong> - Not a custom framework</li>
|
|
407
|
+
<li>✅ <strong>Better DevTools</strong> - Inspectable in Elements panel</li>
|
|
408
|
+
<li>✅ <strong>Reactive attributes</strong> - Update via setAttribute()</li>
|
|
409
|
+
</ul>
|
|
410
|
+
</div>
|
|
411
|
+
</div>
|
|
412
|
+
|
|
413
|
+
<!-- Load the Web Component -->
|
|
414
|
+
<script src="delachat-webcomponent.js"></script>
|
|
415
|
+
|
|
416
|
+
<script>
|
|
417
|
+
// Get reference to component
|
|
418
|
+
const chat = document.getElementById('myChat');
|
|
419
|
+
|
|
420
|
+
// Listen to events
|
|
421
|
+
chat.addEventListener('ready', () => {
|
|
422
|
+
console.log('✅ Chat component ready!');
|
|
423
|
+
});
|
|
424
|
+
|
|
425
|
+
chat.addEventListener('message-sent', (e) => {
|
|
426
|
+
console.log('📤 User sent:', e.detail.message);
|
|
427
|
+
});
|
|
428
|
+
|
|
429
|
+
chat.addEventListener('message-received', (e) => {
|
|
430
|
+
console.log('📥 AI replied:', e.detail.message);
|
|
431
|
+
});
|
|
432
|
+
|
|
433
|
+
chat.addEventListener('error', (e) => {
|
|
434
|
+
console.error('❌ Error:', e.detail.error);
|
|
435
|
+
});
|
|
436
|
+
|
|
437
|
+
chat.addEventListener('close', () => {
|
|
438
|
+
console.log('❎ Chat closed');
|
|
439
|
+
});
|
|
440
|
+
|
|
441
|
+
// Send message programmatically
|
|
442
|
+
function sendProgrammaticMessage() {
|
|
443
|
+
chat.sendMessage('This message was sent programmatically!');
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
// Log all events to demonstrate
|
|
447
|
+
window.addEventListener('DOMContentLoaded', () => {
|
|
448
|
+
console.log('🚀 Page loaded. Try interacting with the chat!');
|
|
449
|
+
});
|
|
450
|
+
</script>
|
|
451
|
+
</body>
|
|
452
|
+
</html>
|
package/types/index.d.ts
ADDED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DelaChat Web Component Type Definitions
|
|
3
|
+
* @packageDocumentation
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
declare namespace JSX {
|
|
7
|
+
interface IntrinsicElements {
|
|
8
|
+
'dela-chat': DelaChatAttributes;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Configuration for DelaChat component
|
|
14
|
+
*/
|
|
15
|
+
export interface DelaChatConfig {
|
|
16
|
+
/** API base URL */
|
|
17
|
+
apiUrl: string;
|
|
18
|
+
/** Session UID from PPM.Auth */
|
|
19
|
+
sessionUid: string;
|
|
20
|
+
/** Datasource name */
|
|
21
|
+
datasource: string;
|
|
22
|
+
/** Product ID */
|
|
23
|
+
productId: number;
|
|
24
|
+
/** Verification token */
|
|
25
|
+
token: string;
|
|
26
|
+
/** Theme ('light' or 'dark') */
|
|
27
|
+
theme?: 'light' | 'dark';
|
|
28
|
+
/** Component height (default: '600px') */
|
|
29
|
+
height?: string;
|
|
30
|
+
/** Component width (default: '100%') */
|
|
31
|
+
width?: string;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Message structure
|
|
36
|
+
*/
|
|
37
|
+
export interface ChatMessage {
|
|
38
|
+
id: string;
|
|
39
|
+
text: string;
|
|
40
|
+
sender: 'user' | 'ai';
|
|
41
|
+
timestamp: Date;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Custom events emitted by DelaChat component
|
|
46
|
+
*/
|
|
47
|
+
export interface DelaChatEvents {
|
|
48
|
+
/** Fired when component is ready */
|
|
49
|
+
ready: CustomEvent<void>;
|
|
50
|
+
/** Fired when user sends a message */
|
|
51
|
+
'message-sent': CustomEvent<{ message: ChatMessage }>;
|
|
52
|
+
/** Fired when AI responds */
|
|
53
|
+
'message-received': CustomEvent<{ message: ChatMessage }>;
|
|
54
|
+
/** Fired on errors */
|
|
55
|
+
error: CustomEvent<{ error: string }>;
|
|
56
|
+
/** Fired when chat is closed */
|
|
57
|
+
close: CustomEvent<void>;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* DelaChat Web Component attributes
|
|
62
|
+
*/
|
|
63
|
+
export interface DelaChatAttributes extends React.HTMLAttributes<HTMLElement> {
|
|
64
|
+
'api-url'?: string;
|
|
65
|
+
'session-uid'?: string;
|
|
66
|
+
'datasource'?: string;
|
|
67
|
+
'product-id'?: string | number;
|
|
68
|
+
'token'?: string;
|
|
69
|
+
'theme'?: 'light' | 'dark';
|
|
70
|
+
'height'?: string;
|
|
71
|
+
'width'?: string;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* DelaChat Web Component class
|
|
76
|
+
*/
|
|
77
|
+
export class DelaChatComponent extends HTMLElement {
|
|
78
|
+
/** Component configuration */
|
|
79
|
+
readonly config: DelaChatConfig;
|
|
80
|
+
|
|
81
|
+
/** Current messages */
|
|
82
|
+
readonly messages: ChatMessage[];
|
|
83
|
+
|
|
84
|
+
/** Whether chat is open */
|
|
85
|
+
readonly isOpen: boolean;
|
|
86
|
+
|
|
87
|
+
/** Whether chat is loading */
|
|
88
|
+
readonly isLoading: boolean;
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* Send a message programmatically
|
|
92
|
+
* @param message - Message text to send
|
|
93
|
+
*/
|
|
94
|
+
sendMessage(message: string): Promise<void>;
|
|
95
|
+
|
|
96
|
+
/**
|
|
97
|
+
* Open the chat interface
|
|
98
|
+
*/
|
|
99
|
+
open(): void;
|
|
100
|
+
|
|
101
|
+
/**
|
|
102
|
+
* Close the chat interface
|
|
103
|
+
*/
|
|
104
|
+
close(): void;
|
|
105
|
+
|
|
106
|
+
/**
|
|
107
|
+
* Clear chat history
|
|
108
|
+
*/
|
|
109
|
+
clearHistory(): void;
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* Reload chat history from server
|
|
113
|
+
*/
|
|
114
|
+
loadHistory(): Promise<void>;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/**
|
|
118
|
+
* Global custom element registry
|
|
119
|
+
*/
|
|
120
|
+
declare global {
|
|
121
|
+
interface HTMLElementTagNameMap {
|
|
122
|
+
'dela-chat': DelaChatComponent;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
interface Window {
|
|
126
|
+
DelaChatComponent: typeof DelaChatComponent;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
export {};
|