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
package/src/index.html
ADDED
|
@@ -0,0 +1,343 @@
|
|
|
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 Component - Demo</title>
|
|
7
|
+
<link rel="stylesheet" href="delachat.css">
|
|
8
|
+
<style>
|
|
9
|
+
body {
|
|
10
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
11
|
+
margin: 0;
|
|
12
|
+
padding: 20px;
|
|
13
|
+
background: #f5f5f5;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.demo-container {
|
|
17
|
+
max-width: 1200px;
|
|
18
|
+
margin: 0 auto;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.demo-header {
|
|
22
|
+
text-align: center;
|
|
23
|
+
margin-bottom: 40px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.demo-header h1 {
|
|
27
|
+
font-size: 36px;
|
|
28
|
+
margin: 0 0 10px 0;
|
|
29
|
+
color: #7C3AED;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.demo-header p {
|
|
33
|
+
color: #666;
|
|
34
|
+
font-size: 18px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.demo-grid {
|
|
38
|
+
display: grid;
|
|
39
|
+
grid-template-columns: 1fr 1fr;
|
|
40
|
+
gap: 20px;
|
|
41
|
+
margin-bottom: 40px;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.demo-card {
|
|
45
|
+
background: white;
|
|
46
|
+
border-radius: 12px;
|
|
47
|
+
padding: 20px;
|
|
48
|
+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.demo-card h2 {
|
|
52
|
+
margin-top: 0;
|
|
53
|
+
color: #333;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.demo-code {
|
|
57
|
+
background: #f8f9fa;
|
|
58
|
+
border: 1px solid #e9ecef;
|
|
59
|
+
border-radius: 6px;
|
|
60
|
+
padding: 12px;
|
|
61
|
+
font-family: 'Courier New', monospace;
|
|
62
|
+
font-size: 13px;
|
|
63
|
+
overflow-x: auto;
|
|
64
|
+
margin: 10px 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.demo-config {
|
|
68
|
+
display: grid;
|
|
69
|
+
gap: 12px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.demo-config label {
|
|
73
|
+
display: block;
|
|
74
|
+
font-weight: 600;
|
|
75
|
+
margin-bottom: 4px;
|
|
76
|
+
color: #555;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.demo-config input {
|
|
80
|
+
width: 100%;
|
|
81
|
+
padding: 8px 12px;
|
|
82
|
+
border: 1px solid #ddd;
|
|
83
|
+
border-radius: 6px;
|
|
84
|
+
font-size: 14px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.demo-config button {
|
|
88
|
+
background: #7C3AED;
|
|
89
|
+
color: white;
|
|
90
|
+
border: none;
|
|
91
|
+
padding: 10px 20px;
|
|
92
|
+
border-radius: 6px;
|
|
93
|
+
cursor: pointer;
|
|
94
|
+
font-size: 14px;
|
|
95
|
+
font-weight: 600;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.demo-config button:hover {
|
|
99
|
+
background: #6D28D9;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
#chat-container {
|
|
103
|
+
height: 600px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.demo-info {
|
|
107
|
+
background: #EEF2FF;
|
|
108
|
+
border: 1px solid #C7D2FE;
|
|
109
|
+
border-radius: 8px;
|
|
110
|
+
padding: 16px;
|
|
111
|
+
margin: 20px 0;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.demo-info h3 {
|
|
115
|
+
margin-top: 0;
|
|
116
|
+
color: #5B21B6;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.demo-info ul {
|
|
120
|
+
margin: 10px 0;
|
|
121
|
+
padding-left: 20px;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.demo-info li {
|
|
125
|
+
margin: 8px 0;
|
|
126
|
+
color: #4C1D95;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
@media (max-width: 768px) {
|
|
130
|
+
.demo-grid {
|
|
131
|
+
grid-template-columns: 1fr;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
</style>
|
|
135
|
+
</head>
|
|
136
|
+
<body>
|
|
137
|
+
<div class="demo-container">
|
|
138
|
+
<div class="demo-header">
|
|
139
|
+
<h1>🤖 DelaChat Component</h1>
|
|
140
|
+
<p>Standalone, plug-and-play chat component for any application</p>
|
|
141
|
+
</div>
|
|
142
|
+
|
|
143
|
+
<div class="demo-info">
|
|
144
|
+
<h3>✨ Features</h3>
|
|
145
|
+
<ul>
|
|
146
|
+
<li><strong>Zero Dependencies</strong> - Pure vanilla JavaScript</li>
|
|
147
|
+
<li><strong>Plug and Play</strong> - Include script, initialize, done</li>
|
|
148
|
+
<li><strong>Cross-Platform</strong> - Works in Web, WinForms, WPF, C++, Electron</li>
|
|
149
|
+
<li><strong>Lightweight</strong> - ~30KB total (gzipped: ~10KB)</li>
|
|
150
|
+
<li><strong>Framework Agnostic</strong> - Works with React, Vue, Angular, or vanilla JS</li>
|
|
151
|
+
</ul>
|
|
152
|
+
</div>
|
|
153
|
+
|
|
154
|
+
<div class="demo-grid">
|
|
155
|
+
<!-- Configuration Panel -->
|
|
156
|
+
<div class="demo-card">
|
|
157
|
+
<h2>⚙️ Configuration</h2>
|
|
158
|
+
<div class="demo-config">
|
|
159
|
+
<div>
|
|
160
|
+
<label for="apiUrl">API URL</label>
|
|
161
|
+
<input type="text" id="apiUrl" value="https://localhost:5001" />
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
<div>
|
|
165
|
+
<label for="sessionUid">Session UID</label>
|
|
166
|
+
<input type="text" id="sessionUid" placeholder="Enter your session UID" />
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
<div>
|
|
170
|
+
<label for="datasource">Datasource</label>
|
|
171
|
+
<input type="text" id="datasource" value="EPMSCA" />
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<div>
|
|
175
|
+
<label for="productId">Product ID</label>
|
|
176
|
+
<input type="number" id="productId" value="200" />
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<div>
|
|
180
|
+
<label for="token">Verification Token</label>
|
|
181
|
+
<input type="text" id="token" placeholder="Enter your token" />
|
|
182
|
+
</div>
|
|
183
|
+
|
|
184
|
+
<button onclick="reinitializeChat()">🔄 Reinitialize Chat</button>
|
|
185
|
+
</div>
|
|
186
|
+
|
|
187
|
+
<h3 style="margin-top: 30px;">📝 Usage Example</h3>
|
|
188
|
+
<div class="demo-code">
|
|
189
|
+
<link rel="stylesheet" href="delachat.css">
|
|
190
|
+
<script src="delachat.js"></script>
|
|
191
|
+
|
|
192
|
+
<div id="chat"></div>
|
|
193
|
+
|
|
194
|
+
<script>
|
|
195
|
+
DelaChat.create('#chat', {
|
|
196
|
+
apiUrl: 'https://localhost:5001',
|
|
197
|
+
sessionUid: 'your-session-uid',
|
|
198
|
+
datasource: 'EPMSCA',
|
|
199
|
+
productId: 200,
|
|
200
|
+
token: 'your-token'
|
|
201
|
+
});
|
|
202
|
+
</script>
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
205
|
+
|
|
206
|
+
<!-- Chat Component -->
|
|
207
|
+
<div class="demo-card">
|
|
208
|
+
<h2>💬 Live Demo</h2>
|
|
209
|
+
<div id="chat-container"></div>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
|
|
213
|
+
<div class="demo-card">
|
|
214
|
+
<h2>🚀 Quick Start Guide</h2>
|
|
215
|
+
|
|
216
|
+
<h3>1. Include Files</h3>
|
|
217
|
+
<div class="demo-code">
|
|
218
|
+
<link rel="stylesheet" href="delachat.min.css">
|
|
219
|
+
<script src="delachat.min.js"></script>
|
|
220
|
+
</div>
|
|
221
|
+
|
|
222
|
+
<h3>2. Add Container</h3>
|
|
223
|
+
<div class="demo-code">
|
|
224
|
+
<div id="chat-container"></div>
|
|
225
|
+
</div>
|
|
226
|
+
|
|
227
|
+
<h3>3. Initialize</h3>
|
|
228
|
+
<div class="demo-code">
|
|
229
|
+
<script>
|
|
230
|
+
const chat = DelaChat.create('#chat-container', {
|
|
231
|
+
apiUrl: 'https://your-api-url',
|
|
232
|
+
sessionUid: 'session-uid-from-your-app',
|
|
233
|
+
datasource: 'EPMSCA',
|
|
234
|
+
productId: 200,
|
|
235
|
+
token: 'verification-token',
|
|
236
|
+
|
|
237
|
+
// Optional callbacks
|
|
238
|
+
onReady: () => console.log('Chat ready'),
|
|
239
|
+
onMessageSent: (msg) => console.log('Sent:', msg),
|
|
240
|
+
onError: (err) => console.error('Error:', err)
|
|
241
|
+
});
|
|
242
|
+
|
|
243
|
+
// Control methods
|
|
244
|
+
chat.open();
|
|
245
|
+
chat.close();
|
|
246
|
+
chat.sendMessage('Hello!');
|
|
247
|
+
</script>
|
|
248
|
+
</div>
|
|
249
|
+
</div>
|
|
250
|
+
|
|
251
|
+
<div class="demo-card">
|
|
252
|
+
<h2>📦 Integration Examples</h2>
|
|
253
|
+
|
|
254
|
+
<h3>WinForms (C#)</h3>
|
|
255
|
+
<div class="demo-code">
|
|
256
|
+
var webView = new WebView2();
|
|
257
|
+
await webView.EnsureCoreWebView2Async();
|
|
258
|
+
webView.CoreWebView2.Navigate("file:///path/to/delachat.html");
|
|
259
|
+
|
|
260
|
+
await webView.ExecuteScriptAsync(@"
|
|
261
|
+
DelaChat.create('#chat', {
|
|
262
|
+
apiUrl: 'https://localhost:5001',
|
|
263
|
+
sessionUid: '" + sessionUid + @"',
|
|
264
|
+
token: '" + token + @"'
|
|
265
|
+
});
|
|
266
|
+
");
|
|
267
|
+
</div>
|
|
268
|
+
|
|
269
|
+
<h3>React</h3>
|
|
270
|
+
<div class="demo-code">
|
|
271
|
+
import { useEffect, useRef } from 'react';
|
|
272
|
+
|
|
273
|
+
function ChatWidget({ sessionUid, token }) {
|
|
274
|
+
const chatRef = useRef(null);
|
|
275
|
+
|
|
276
|
+
useEffect(() => {
|
|
277
|
+
if (chatRef.current) {
|
|
278
|
+
window.DelaChat.create(chatRef.current, {
|
|
279
|
+
apiUrl: 'https://localhost:5001',
|
|
280
|
+
sessionUid,
|
|
281
|
+
token,
|
|
282
|
+
datasource: 'EPMSCA',
|
|
283
|
+
productId: 200
|
|
284
|
+
});
|
|
285
|
+
}
|
|
286
|
+
}, [sessionUid, token]);
|
|
287
|
+
|
|
288
|
+
return <div ref={chatRef} />;
|
|
289
|
+
}
|
|
290
|
+
</div>
|
|
291
|
+
</div>
|
|
292
|
+
</div>
|
|
293
|
+
|
|
294
|
+
<script src="delachat.js"></script>
|
|
295
|
+
<script>
|
|
296
|
+
var chatInstance;
|
|
297
|
+
|
|
298
|
+
// Initialize chat with default config
|
|
299
|
+
function initializeChat() {
|
|
300
|
+
const config = {
|
|
301
|
+
apiUrl: document.getElementById('apiUrl').value || 'https://localhost:5001',
|
|
302
|
+
sessionUid: document.getElementById('sessionUid').value || 'demo-session-' + Date.now(),
|
|
303
|
+
datasource: document.getElementById('datasource').value || 'EPMSCA',
|
|
304
|
+
productId: parseInt(document.getElementById('productId').value) || 200,
|
|
305
|
+
token: document.getElementById('token').value || 'demo-token-' + Date.now(),
|
|
306
|
+
|
|
307
|
+
onReady: function() {
|
|
308
|
+
console.log('DelaChat is ready!');
|
|
309
|
+
},
|
|
310
|
+
|
|
311
|
+
onMessageSent: function(message) {
|
|
312
|
+
console.log('Message sent:', message);
|
|
313
|
+
},
|
|
314
|
+
|
|
315
|
+
onMessageReceived: function(message) {
|
|
316
|
+
console.log('Message received:', message);
|
|
317
|
+
},
|
|
318
|
+
|
|
319
|
+
onError: function(error) {
|
|
320
|
+
console.error('DelaChat error:', error);
|
|
321
|
+
alert('Error: ' + error.message);
|
|
322
|
+
},
|
|
323
|
+
|
|
324
|
+
onClose: function() {
|
|
325
|
+
console.log('Chat closed');
|
|
326
|
+
}
|
|
327
|
+
};
|
|
328
|
+
|
|
329
|
+
chatInstance = DelaChat.create('#chat-container', config);
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
function reinitializeChat() {
|
|
333
|
+
if (chatInstance) {
|
|
334
|
+
chatInstance.destroy();
|
|
335
|
+
}
|
|
336
|
+
initializeChat();
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
// Initialize on page load
|
|
340
|
+
window.addEventListener('DOMContentLoaded', initializeChat);
|
|
341
|
+
</script>
|
|
342
|
+
</body>
|
|
343
|
+
</html>
|