flowengine-mcp-app 1.1.1 → 1.2.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.
- package/README.md +20 -9
- package/build/index.js +68 -55
- package/build/index.js.map +1 -1
- package/build/ui/base.d.ts +1 -0
- package/build/ui/base.d.ts.map +1 -1
- package/build/ui/base.js +201 -77
- package/build/ui/base.js.map +1 -1
- package/build/ui/chat.d.ts +6 -0
- package/build/ui/chat.d.ts.map +1 -0
- package/build/ui/chat.js +1530 -0
- package/build/ui/chat.js.map +1 -0
- package/build/ui/component-viewer.d.ts +14 -0
- package/build/ui/component-viewer.d.ts.map +1 -0
- package/build/ui/component-viewer.js +678 -0
- package/build/ui/component-viewer.js.map +1 -0
- package/build/ui/dashboard.d.ts +21 -0
- package/build/ui/dashboard.d.ts.map +1 -0
- package/build/ui/dashboard.js +252 -0
- package/build/ui/dashboard.js.map +1 -0
- package/build/ui/instances.js +4 -0
- package/build/ui/instances.js.map +1 -1
- package/build/ui/n8n-viewer.d.ts +12 -0
- package/build/ui/n8n-viewer.d.ts.map +1 -0
- package/build/ui/n8n-viewer.js +371 -0
- package/build/ui/n8n-viewer.js.map +1 -0
- package/package.json +1 -1
package/build/ui/chat.js
ADDED
|
@@ -0,0 +1,1530 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AI Chat Interface for FlowEngine with n8n Demo
|
|
3
|
+
* Matches FlowEngine website chat UI exactly
|
|
4
|
+
*/
|
|
5
|
+
export function renderChatInterface() {
|
|
6
|
+
return `<!DOCTYPE html>
|
|
7
|
+
<html lang="en">
|
|
8
|
+
<head>
|
|
9
|
+
<meta charset="UTF-8">
|
|
10
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
11
|
+
<title>FlowEngine Chat</title>
|
|
12
|
+
<style>
|
|
13
|
+
* {
|
|
14
|
+
margin: 0;
|
|
15
|
+
padding: 0;
|
|
16
|
+
box-sizing: border-box;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
body {
|
|
20
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
21
|
+
background: #000000;
|
|
22
|
+
color: #ffffff;
|
|
23
|
+
height: 100vh;
|
|
24
|
+
overflow: hidden;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.layout {
|
|
28
|
+
display: flex;
|
|
29
|
+
height: 100vh;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Sidebar */
|
|
33
|
+
.sidebar {
|
|
34
|
+
width: 260px;
|
|
35
|
+
background: #000000;
|
|
36
|
+
border-right: 1px solid rgba(31, 41, 55, 1);
|
|
37
|
+
display: flex;
|
|
38
|
+
flex-direction: column;
|
|
39
|
+
flex-shrink: 0;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@media (max-width: 768px) {
|
|
43
|
+
.sidebar {
|
|
44
|
+
display: none;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.sidebar-header {
|
|
49
|
+
padding: 16px;
|
|
50
|
+
border-bottom: 1px solid rgba(31, 41, 55, 1);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.logo {
|
|
54
|
+
display: flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
gap: 8px;
|
|
57
|
+
font-size: 18px;
|
|
58
|
+
font-weight: 700;
|
|
59
|
+
background: linear-gradient(135deg, #3b82f6, #8b5cf6, #10b981);
|
|
60
|
+
-webkit-background-clip: text;
|
|
61
|
+
-webkit-text-fill-color: transparent;
|
|
62
|
+
background-clip: text;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.new-chat-btn {
|
|
66
|
+
width: 100%;
|
|
67
|
+
padding: 12px;
|
|
68
|
+
background: rgba(31, 41, 55, 0.5);
|
|
69
|
+
border: 1px solid rgba(75, 85, 99, 1);
|
|
70
|
+
border-radius: 8px;
|
|
71
|
+
color: #ffffff;
|
|
72
|
+
font-size: 14px;
|
|
73
|
+
font-weight: 500;
|
|
74
|
+
cursor: pointer;
|
|
75
|
+
display: flex;
|
|
76
|
+
align-items: center;
|
|
77
|
+
justify-content: center;
|
|
78
|
+
gap: 8px;
|
|
79
|
+
margin-top: 12px;
|
|
80
|
+
transition: all 0.2s;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.new-chat-btn:hover {
|
|
84
|
+
background: rgba(31, 41, 55, 0.8);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.sidebar-section {
|
|
88
|
+
padding: 16px;
|
|
89
|
+
flex: 1;
|
|
90
|
+
overflow-y: auto;
|
|
91
|
+
overflow-x: hidden;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.section-title {
|
|
95
|
+
font-size: 12px;
|
|
96
|
+
font-weight: 600;
|
|
97
|
+
color: rgba(156, 163, 175, 1);
|
|
98
|
+
text-transform: uppercase;
|
|
99
|
+
letter-spacing: 0.05em;
|
|
100
|
+
margin-bottom: 12px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.nav-list {
|
|
104
|
+
display: flex;
|
|
105
|
+
flex-direction: column;
|
|
106
|
+
gap: 4px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.nav-item {
|
|
110
|
+
padding: 10px 12px;
|
|
111
|
+
border-radius: 8px;
|
|
112
|
+
color: rgba(209, 213, 219, 1);
|
|
113
|
+
font-size: 14px;
|
|
114
|
+
cursor: pointer;
|
|
115
|
+
display: flex;
|
|
116
|
+
align-items: center;
|
|
117
|
+
gap: 8px;
|
|
118
|
+
transition: all 0.2s;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.nav-item:hover {
|
|
122
|
+
background: rgba(31, 41, 55, 0.5);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.nav-item.active {
|
|
126
|
+
background: rgba(31, 41, 55, 0.8);
|
|
127
|
+
color: #ffffff;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.chat-item {
|
|
131
|
+
padding: 10px 12px;
|
|
132
|
+
border-radius: 8px;
|
|
133
|
+
color: rgba(209, 213, 219, 1);
|
|
134
|
+
font-size: 14px;
|
|
135
|
+
cursor: pointer;
|
|
136
|
+
display: flex;
|
|
137
|
+
align-items: center;
|
|
138
|
+
gap: 8px;
|
|
139
|
+
transition: all 0.2s;
|
|
140
|
+
position: relative;
|
|
141
|
+
white-space: nowrap;
|
|
142
|
+
overflow: hidden;
|
|
143
|
+
text-overflow: ellipsis;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.chat-item:hover {
|
|
147
|
+
background: rgba(31, 41, 55, 0.5);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.chat-item.active {
|
|
151
|
+
background: rgba(31, 41, 55, 0.8);
|
|
152
|
+
color: #ffffff;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.chat-item:hover .chat-item-actions {
|
|
156
|
+
opacity: 1;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.chat-item-actions {
|
|
160
|
+
position: absolute;
|
|
161
|
+
right: 8px;
|
|
162
|
+
display: flex;
|
|
163
|
+
gap: 4px;
|
|
164
|
+
opacity: 0;
|
|
165
|
+
transition: opacity 0.2s;
|
|
166
|
+
background: rgba(31, 41, 55, 1);
|
|
167
|
+
padding: 2px;
|
|
168
|
+
border-radius: 4px;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.chat-item-action {
|
|
172
|
+
display: flex;
|
|
173
|
+
align-items: center;
|
|
174
|
+
justify-content: center;
|
|
175
|
+
width: 24px;
|
|
176
|
+
height: 24px;
|
|
177
|
+
background: transparent;
|
|
178
|
+
border: none;
|
|
179
|
+
border-radius: 4px;
|
|
180
|
+
color: rgba(156, 163, 175, 1);
|
|
181
|
+
cursor: pointer;
|
|
182
|
+
transition: all 0.2s;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.chat-item-action:hover {
|
|
186
|
+
background: rgba(55, 65, 81, 1);
|
|
187
|
+
color: rgba(209, 213, 219, 1);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.chat-item-action.delete:hover {
|
|
191
|
+
background: rgba(220, 38, 38, 0.2);
|
|
192
|
+
color: rgba(248, 113, 113, 1);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.sidebar-footer {
|
|
196
|
+
padding: 16px;
|
|
197
|
+
border-top: 1px solid rgba(31, 41, 55, 1);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.footer-link {
|
|
201
|
+
padding: 10px 12px;
|
|
202
|
+
border-radius: 8px;
|
|
203
|
+
color: rgba(209, 213, 219, 1);
|
|
204
|
+
font-size: 14px;
|
|
205
|
+
cursor: pointer;
|
|
206
|
+
display: flex;
|
|
207
|
+
align-items: center;
|
|
208
|
+
gap: 8px;
|
|
209
|
+
transition: all 0.2s;
|
|
210
|
+
text-decoration: none;
|
|
211
|
+
margin-bottom: 8px;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.footer-link:hover {
|
|
215
|
+
background: rgba(31, 41, 55, 0.5);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
/* Main Content Area */
|
|
219
|
+
.main-content {
|
|
220
|
+
display: flex;
|
|
221
|
+
flex: 1;
|
|
222
|
+
min-width: 0;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
/* Chat Section */
|
|
226
|
+
.chat-section {
|
|
227
|
+
flex: 1;
|
|
228
|
+
display: flex;
|
|
229
|
+
flex-direction: column;
|
|
230
|
+
min-height: 0;
|
|
231
|
+
order: 2;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
@media (min-width: 1024px) {
|
|
235
|
+
.chat-section {
|
|
236
|
+
order: 1;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.chat-messages {
|
|
241
|
+
flex: 1;
|
|
242
|
+
overflow-y: auto;
|
|
243
|
+
overflow-x: hidden;
|
|
244
|
+
padding: 16px;
|
|
245
|
+
padding-top: 96px;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
@media (min-width: 768px) {
|
|
249
|
+
.chat-messages {
|
|
250
|
+
padding: 16px;
|
|
251
|
+
padding-top: 16px;
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.message-wrapper {
|
|
256
|
+
margin-bottom: 32px;
|
|
257
|
+
display: flex;
|
|
258
|
+
min-width: 0;
|
|
259
|
+
max-width: 100%;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.message-wrapper.user {
|
|
263
|
+
justify-content: flex-end;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.message-wrapper.assistant {
|
|
267
|
+
justify-content: flex-start;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.user-message {
|
|
271
|
+
display: inline-block;
|
|
272
|
+
background: rgba(31, 41, 55, 0.5);
|
|
273
|
+
color: #ffffff;
|
|
274
|
+
border-radius: 24px;
|
|
275
|
+
padding: 12px 16px;
|
|
276
|
+
font-size: 15px;
|
|
277
|
+
line-height: 1.5;
|
|
278
|
+
max-width: 80%;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.assistant-message {
|
|
282
|
+
color: #ffffff;
|
|
283
|
+
font-size: 15px;
|
|
284
|
+
line-height: 1.75;
|
|
285
|
+
width: 100%;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.assistant-message p {
|
|
289
|
+
margin-bottom: 12px;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.assistant-message ul, .assistant-message ol {
|
|
293
|
+
margin-left: 24px;
|
|
294
|
+
margin-bottom: 12px;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.assistant-message li {
|
|
298
|
+
margin-bottom: 4px;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.chat-input-container {
|
|
302
|
+
padding: 16px;
|
|
303
|
+
border-top: 1px solid rgba(31, 41, 55, 1);
|
|
304
|
+
background: #000000;
|
|
305
|
+
flex-shrink: 0;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.chat-input-wrapper {
|
|
309
|
+
background: rgba(17, 24, 39, 0.5);
|
|
310
|
+
border: 1px solid rgba(31, 41, 55, 1);
|
|
311
|
+
border-radius: 8px;
|
|
312
|
+
padding: 8px;
|
|
313
|
+
display: flex;
|
|
314
|
+
flex-direction: column;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.chat-input {
|
|
318
|
+
width: 100%;
|
|
319
|
+
background: transparent;
|
|
320
|
+
border: none;
|
|
321
|
+
color: #ffffff;
|
|
322
|
+
font-size: 16px;
|
|
323
|
+
line-height: 1.5;
|
|
324
|
+
resize: none;
|
|
325
|
+
outline: none;
|
|
326
|
+
padding: 12px;
|
|
327
|
+
min-height: 48px;
|
|
328
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.chat-input::placeholder {
|
|
332
|
+
color: rgba(209, 213, 219, 1);
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.chat-input-footer {
|
|
336
|
+
display: flex;
|
|
337
|
+
justify-content: space-between;
|
|
338
|
+
align-items: center;
|
|
339
|
+
margin-top: 2px;
|
|
340
|
+
padding: 4px;
|
|
341
|
+
padding-top: 0;
|
|
342
|
+
gap: 8px;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.mode-buttons {
|
|
346
|
+
display: flex;
|
|
347
|
+
align-items: center;
|
|
348
|
+
gap: 6px;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
/* Boost Mode Button */
|
|
352
|
+
.boost-mode-btn {
|
|
353
|
+
display: flex;
|
|
354
|
+
align-items: center;
|
|
355
|
+
justify-content: center;
|
|
356
|
+
gap: 4px;
|
|
357
|
+
padding: 6px 12px;
|
|
358
|
+
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
|
359
|
+
border: none;
|
|
360
|
+
border-radius: 8px;
|
|
361
|
+
color: #ffffff;
|
|
362
|
+
font-size: 13px;
|
|
363
|
+
font-weight: 500;
|
|
364
|
+
cursor: pointer;
|
|
365
|
+
transition: all 0.2s;
|
|
366
|
+
position: relative;
|
|
367
|
+
overflow: hidden;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.boost-mode-btn:hover {
|
|
371
|
+
transform: translateY(-1px);
|
|
372
|
+
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
.boost-mode-btn.active {
|
|
376
|
+
animation: pulse 2s ease-in-out infinite;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
.boost-mode-btn.active::before {
|
|
380
|
+
content: '';
|
|
381
|
+
position: absolute;
|
|
382
|
+
inset: 0;
|
|
383
|
+
background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 100%);
|
|
384
|
+
animation: shine 2s ease-in-out infinite;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
@keyframes pulse {
|
|
388
|
+
0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
|
|
389
|
+
50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
@keyframes shine {
|
|
393
|
+
0% { transform: translateX(-100%); }
|
|
394
|
+
100% { transform: translateX(100%); }
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
/* Plan Mode Button */
|
|
398
|
+
.plan-mode-btn {
|
|
399
|
+
display: flex;
|
|
400
|
+
align-items: center;
|
|
401
|
+
justify-content: center;
|
|
402
|
+
gap: 6px;
|
|
403
|
+
padding: 6px 12px;
|
|
404
|
+
background: rgba(31, 41, 55, 0.5);
|
|
405
|
+
border: 1px solid rgba(75, 85, 99, 1);
|
|
406
|
+
border-radius: 8px;
|
|
407
|
+
color: rgba(156, 163, 175, 1);
|
|
408
|
+
font-size: 13px;
|
|
409
|
+
font-weight: 500;
|
|
410
|
+
cursor: pointer;
|
|
411
|
+
transition: all 0.2s;
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
.plan-mode-btn:hover {
|
|
415
|
+
background: rgba(31, 41, 55, 0.8);
|
|
416
|
+
border-color: rgba(107, 114, 128, 1);
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
.plan-mode-btn.active {
|
|
420
|
+
background: rgba(139, 92, 246, 0.1);
|
|
421
|
+
border-color: rgba(139, 92, 246, 0.5);
|
|
422
|
+
color: rgba(196, 181, 253, 1);
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
.toggle-switch {
|
|
426
|
+
width: 32px;
|
|
427
|
+
height: 18px;
|
|
428
|
+
background: rgba(75, 85, 99, 1);
|
|
429
|
+
border-radius: 9px;
|
|
430
|
+
position: relative;
|
|
431
|
+
transition: all 0.2s;
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
.plan-mode-btn.active .toggle-switch {
|
|
435
|
+
background: rgba(139, 92, 246, 1);
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
.toggle-switch::after {
|
|
439
|
+
content: '';
|
|
440
|
+
position: absolute;
|
|
441
|
+
width: 14px;
|
|
442
|
+
height: 14px;
|
|
443
|
+
background: #ffffff;
|
|
444
|
+
border-radius: 50%;
|
|
445
|
+
top: 2px;
|
|
446
|
+
left: 2px;
|
|
447
|
+
transition: all 0.2s;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
.plan-mode-btn.active .toggle-switch::after {
|
|
451
|
+
left: 16px;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
/* Widget Mode Button */
|
|
455
|
+
.widget-mode-btn {
|
|
456
|
+
display: flex;
|
|
457
|
+
align-items: center;
|
|
458
|
+
justify-content: center;
|
|
459
|
+
gap: 4px;
|
|
460
|
+
padding: 6px 12px;
|
|
461
|
+
background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
|
|
462
|
+
border: none;
|
|
463
|
+
border-radius: 8px;
|
|
464
|
+
color: #ffffff;
|
|
465
|
+
font-size: 13px;
|
|
466
|
+
font-weight: 500;
|
|
467
|
+
cursor: pointer;
|
|
468
|
+
transition: all 0.2s;
|
|
469
|
+
position: relative;
|
|
470
|
+
overflow: hidden;
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
.widget-mode-btn:hover {
|
|
474
|
+
transform: translateY(-1px);
|
|
475
|
+
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
.widget-mode-btn.active {
|
|
479
|
+
animation: pulse-green 2s ease-in-out infinite;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
@keyframes pulse-green {
|
|
483
|
+
0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
|
|
484
|
+
50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
.send-button {
|
|
488
|
+
display: flex;
|
|
489
|
+
align-items: center;
|
|
490
|
+
justify-content: center;
|
|
491
|
+
width: 32px;
|
|
492
|
+
height: 32px;
|
|
493
|
+
background: transparent;
|
|
494
|
+
color: rgba(156, 163, 175, 1);
|
|
495
|
+
border: none;
|
|
496
|
+
border-radius: 8px;
|
|
497
|
+
cursor: pointer;
|
|
498
|
+
transition: all 0.2s;
|
|
499
|
+
padding: 0;
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
.send-button:hover:not(:disabled) {
|
|
503
|
+
background: rgba(55, 65, 81, 1);
|
|
504
|
+
color: rgba(209, 213, 219, 1);
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
.send-button:disabled {
|
|
508
|
+
color: rgba(75, 85, 99, 1);
|
|
509
|
+
cursor: not-allowed;
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
.send-button.has-content {
|
|
513
|
+
background: #ffffff;
|
|
514
|
+
color: #000000;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
.send-button.has-content:hover {
|
|
518
|
+
background: rgba(229, 231, 235, 1);
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
@media (max-width: 640px) {
|
|
522
|
+
.boost-mode-btn .btn-text,
|
|
523
|
+
.plan-mode-btn .btn-text,
|
|
524
|
+
.widget-mode-btn .btn-text {
|
|
525
|
+
display: none;
|
|
526
|
+
}
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
/* n8n Demo Section */
|
|
530
|
+
.demo-section {
|
|
531
|
+
flex: 1;
|
|
532
|
+
border-left: 1px solid rgba(31, 41, 55, 1);
|
|
533
|
+
background: #000000;
|
|
534
|
+
display: none;
|
|
535
|
+
position: relative;
|
|
536
|
+
order: 1;
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
.demo-section.show {
|
|
540
|
+
display: flex;
|
|
541
|
+
flex-direction: column;
|
|
542
|
+
position: fixed;
|
|
543
|
+
inset: 0;
|
|
544
|
+
z-index: 50;
|
|
545
|
+
}
|
|
546
|
+
|
|
547
|
+
@media (min-width: 1024px) {
|
|
548
|
+
.demo-section {
|
|
549
|
+
display: flex;
|
|
550
|
+
flex-direction: column;
|
|
551
|
+
position: relative;
|
|
552
|
+
inset: auto;
|
|
553
|
+
z-index: auto;
|
|
554
|
+
order: 2;
|
|
555
|
+
}
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
.demo-header {
|
|
559
|
+
padding: 12px 16px;
|
|
560
|
+
border-bottom: 1px solid rgba(31, 41, 55, 1);
|
|
561
|
+
display: flex;
|
|
562
|
+
justify-content: space-between;
|
|
563
|
+
align-items: center;
|
|
564
|
+
gap: 12px;
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
.demo-tabs {
|
|
568
|
+
display: flex;
|
|
569
|
+
gap: 4px;
|
|
570
|
+
flex: 1;
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
.demo-tab {
|
|
574
|
+
padding: 6px 12px;
|
|
575
|
+
background: transparent;
|
|
576
|
+
border: none;
|
|
577
|
+
border-radius: 6px;
|
|
578
|
+
color: rgba(156, 163, 175, 1);
|
|
579
|
+
font-size: 13px;
|
|
580
|
+
font-weight: 500;
|
|
581
|
+
cursor: pointer;
|
|
582
|
+
transition: all 0.2s;
|
|
583
|
+
white-space: nowrap;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
.demo-tab:hover {
|
|
587
|
+
background: rgba(31, 41, 55, 0.5);
|
|
588
|
+
color: rgba(209, 213, 219, 1);
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
.demo-tab.active {
|
|
592
|
+
background: rgba(31, 41, 55, 0.8);
|
|
593
|
+
color: #ffffff;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
.demo-actions {
|
|
597
|
+
display: flex;
|
|
598
|
+
gap: 8px;
|
|
599
|
+
align-items: center;
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
.demo-action-btn {
|
|
603
|
+
display: flex;
|
|
604
|
+
align-items: center;
|
|
605
|
+
justify-content: center;
|
|
606
|
+
gap: 4px;
|
|
607
|
+
padding: 6px 10px;
|
|
608
|
+
background: rgba(31, 41, 55, 0.5);
|
|
609
|
+
border: 1px solid rgba(75, 85, 99, 1);
|
|
610
|
+
border-radius: 6px;
|
|
611
|
+
color: rgba(209, 213, 219, 1);
|
|
612
|
+
font-size: 12px;
|
|
613
|
+
font-weight: 500;
|
|
614
|
+
cursor: pointer;
|
|
615
|
+
transition: all 0.2s;
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
.demo-action-btn:hover {
|
|
619
|
+
background: rgba(31, 41, 55, 0.8);
|
|
620
|
+
border-color: rgba(107, 114, 128, 1);
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
.demo-close {
|
|
624
|
+
display: flex;
|
|
625
|
+
align-items: center;
|
|
626
|
+
justify-content: center;
|
|
627
|
+
width: 32px;
|
|
628
|
+
height: 32px;
|
|
629
|
+
background: rgba(55, 65, 81, 1);
|
|
630
|
+
color: #ffffff;
|
|
631
|
+
border: none;
|
|
632
|
+
border-radius: 8px;
|
|
633
|
+
cursor: pointer;
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
@media (min-width: 1024px) {
|
|
637
|
+
.demo-close {
|
|
638
|
+
display: none;
|
|
639
|
+
}
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
.demo-container {
|
|
643
|
+
flex: 1;
|
|
644
|
+
position: relative;
|
|
645
|
+
overflow: hidden;
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
.demo-panel {
|
|
649
|
+
display: none;
|
|
650
|
+
position: absolute;
|
|
651
|
+
inset: 0;
|
|
652
|
+
width: 100%;
|
|
653
|
+
height: 100%;
|
|
654
|
+
}
|
|
655
|
+
|
|
656
|
+
.demo-panel.active {
|
|
657
|
+
display: block;
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
#n8nDemoElement {
|
|
661
|
+
width: 100%;
|
|
662
|
+
height: 100%;
|
|
663
|
+
border: none;
|
|
664
|
+
background: #000000;
|
|
665
|
+
}
|
|
666
|
+
|
|
667
|
+
.widget-preview-panel {
|
|
668
|
+
padding: 16px;
|
|
669
|
+
overflow-y: auto;
|
|
670
|
+
background: #000000;
|
|
671
|
+
display: flex;
|
|
672
|
+
align-items: center;
|
|
673
|
+
justify-content: center;
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
.widget-preview-container {
|
|
677
|
+
background: rgba(17, 24, 39, 0.5);
|
|
678
|
+
border: 1px solid rgba(31, 41, 55, 1);
|
|
679
|
+
border-radius: 12px;
|
|
680
|
+
padding: 24px;
|
|
681
|
+
text-align: center;
|
|
682
|
+
}
|
|
683
|
+
|
|
684
|
+
.widget-preview-empty {
|
|
685
|
+
color: rgba(156, 163, 175, 1);
|
|
686
|
+
font-size: 14px;
|
|
687
|
+
padding: 40px 20px;
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
/* Chatbot Preview Styles */
|
|
691
|
+
.chatbot-preview {
|
|
692
|
+
position: relative;
|
|
693
|
+
width: 380px;
|
|
694
|
+
height: 450px;
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
.chat-bubble {
|
|
698
|
+
position: absolute;
|
|
699
|
+
bottom: 16px;
|
|
700
|
+
right: 16px;
|
|
701
|
+
width: 60px;
|
|
702
|
+
height: 60px;
|
|
703
|
+
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
|
704
|
+
border-radius: 50%;
|
|
705
|
+
display: flex;
|
|
706
|
+
align-items: center;
|
|
707
|
+
justify-content: center;
|
|
708
|
+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
|
709
|
+
cursor: pointer;
|
|
710
|
+
transition: transform 0.2s;
|
|
711
|
+
}
|
|
712
|
+
|
|
713
|
+
.chat-bubble:hover {
|
|
714
|
+
transform: scale(1.05);
|
|
715
|
+
}
|
|
716
|
+
|
|
717
|
+
.chat-window {
|
|
718
|
+
position: absolute;
|
|
719
|
+
bottom: 96px;
|
|
720
|
+
right: 16px;
|
|
721
|
+
width: 320px;
|
|
722
|
+
height: 340px;
|
|
723
|
+
background: rgba(17, 24, 39, 1);
|
|
724
|
+
border: 1px solid rgba(55, 65, 81, 1);
|
|
725
|
+
border-radius: 12px;
|
|
726
|
+
display: flex;
|
|
727
|
+
flex-direction: column;
|
|
728
|
+
overflow: hidden;
|
|
729
|
+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
|
730
|
+
}
|
|
731
|
+
|
|
732
|
+
.chat-header {
|
|
733
|
+
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
|
734
|
+
padding: 16px 20px;
|
|
735
|
+
display: flex;
|
|
736
|
+
align-items: center;
|
|
737
|
+
gap: 12px;
|
|
738
|
+
}
|
|
739
|
+
|
|
740
|
+
.chat-header-avatar {
|
|
741
|
+
width: 40px;
|
|
742
|
+
height: 40px;
|
|
743
|
+
background: rgba(255, 255, 255, 0.2);
|
|
744
|
+
border-radius: 50%;
|
|
745
|
+
display: flex;
|
|
746
|
+
align-items: center;
|
|
747
|
+
justify-content: center;
|
|
748
|
+
color: #ffffff;
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
.chat-header-title {
|
|
752
|
+
color: #ffffff;
|
|
753
|
+
font-weight: 600;
|
|
754
|
+
font-size: 16px;
|
|
755
|
+
}
|
|
756
|
+
|
|
757
|
+
.chat-messages-preview {
|
|
758
|
+
flex: 1;
|
|
759
|
+
padding: 16px;
|
|
760
|
+
background: rgba(17, 24, 39, 1);
|
|
761
|
+
overflow-y: auto;
|
|
762
|
+
display: flex;
|
|
763
|
+
flex-direction: column;
|
|
764
|
+
gap: 12px;
|
|
765
|
+
}
|
|
766
|
+
|
|
767
|
+
.chat-message-bot {
|
|
768
|
+
display: flex;
|
|
769
|
+
gap: 8px;
|
|
770
|
+
align-items: flex-start;
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
.chat-message-avatar {
|
|
774
|
+
width: 32px;
|
|
775
|
+
height: 32px;
|
|
776
|
+
background: linear-gradient(135deg, #10b981, #06b6d4);
|
|
777
|
+
border-radius: 50%;
|
|
778
|
+
flex-shrink: 0;
|
|
779
|
+
display: flex;
|
|
780
|
+
align-items: center;
|
|
781
|
+
justify-content: center;
|
|
782
|
+
color: #ffffff;
|
|
783
|
+
font-size: 12px;
|
|
784
|
+
}
|
|
785
|
+
|
|
786
|
+
.chat-message-bubble {
|
|
787
|
+
background: rgba(31, 41, 55, 0.8);
|
|
788
|
+
padding: 10px 14px;
|
|
789
|
+
border-radius: 12px;
|
|
790
|
+
color: rgba(209, 213, 219, 1);
|
|
791
|
+
font-size: 14px;
|
|
792
|
+
line-height: 1.5;
|
|
793
|
+
max-width: 80%;
|
|
794
|
+
}
|
|
795
|
+
|
|
796
|
+
.chat-message-user {
|
|
797
|
+
display: flex;
|
|
798
|
+
justify-content: flex-end;
|
|
799
|
+
}
|
|
800
|
+
|
|
801
|
+
.chat-message-user .chat-message-bubble {
|
|
802
|
+
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
|
803
|
+
color: #ffffff;
|
|
804
|
+
}
|
|
805
|
+
|
|
806
|
+
.chat-input-preview {
|
|
807
|
+
padding: 12px;
|
|
808
|
+
background: rgba(17, 24, 39, 1);
|
|
809
|
+
border-top: 1px solid rgba(55, 65, 81, 1);
|
|
810
|
+
display: flex;
|
|
811
|
+
gap: 8px;
|
|
812
|
+
}
|
|
813
|
+
|
|
814
|
+
.chat-input-field {
|
|
815
|
+
flex: 1;
|
|
816
|
+
padding: 10px 14px;
|
|
817
|
+
background: rgba(31, 41, 55, 0.8);
|
|
818
|
+
border: 1px solid rgba(75, 85, 99, 1);
|
|
819
|
+
border-radius: 8px;
|
|
820
|
+
color: rgba(209, 213, 219, 1);
|
|
821
|
+
font-size: 14px;
|
|
822
|
+
}
|
|
823
|
+
|
|
824
|
+
.chat-send-btn {
|
|
825
|
+
width: 40px;
|
|
826
|
+
height: 40px;
|
|
827
|
+
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
|
828
|
+
border: none;
|
|
829
|
+
border-radius: 8px;
|
|
830
|
+
color: #ffffff;
|
|
831
|
+
display: flex;
|
|
832
|
+
align-items: center;
|
|
833
|
+
justify-content: center;
|
|
834
|
+
cursor: pointer;
|
|
835
|
+
}
|
|
836
|
+
|
|
837
|
+
::-webkit-scrollbar {
|
|
838
|
+
width: 8px;
|
|
839
|
+
}
|
|
840
|
+
|
|
841
|
+
::-webkit-scrollbar-track {
|
|
842
|
+
background: transparent;
|
|
843
|
+
}
|
|
844
|
+
|
|
845
|
+
::-webkit-scrollbar-thumb {
|
|
846
|
+
background: rgba(75, 85, 99, 0.5);
|
|
847
|
+
border-radius: 4px;
|
|
848
|
+
}
|
|
849
|
+
|
|
850
|
+
::-webkit-scrollbar-thumb:hover {
|
|
851
|
+
background: rgba(75, 85, 99, 0.7);
|
|
852
|
+
}
|
|
853
|
+
</style>
|
|
854
|
+
</head>
|
|
855
|
+
<body>
|
|
856
|
+
<div class="layout">
|
|
857
|
+
<!-- Sidebar -->
|
|
858
|
+
<aside class="sidebar">
|
|
859
|
+
<div class="sidebar-header">
|
|
860
|
+
<div class="logo">
|
|
861
|
+
<img src="https://flowengine.cloud/logo.svg" alt="FlowEngine" style="width: 28px; height: 28px;" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
|
862
|
+
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
|
863
|
+
<path d="M12 2L2 7L12 12L22 7L12 2Z" fill="url(#gradient)" stroke="currentColor" stroke-width="2"/>
|
|
864
|
+
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2"/>
|
|
865
|
+
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2"/>
|
|
866
|
+
<defs>
|
|
867
|
+
<linearGradient id="gradient" x1="2" y1="2" x2="22" y2="22">
|
|
868
|
+
<stop offset="0%" stop-color="#3b82f6"/>
|
|
869
|
+
<stop offset="50%" stop-color="#8b5cf6"/>
|
|
870
|
+
<stop offset="100%" stop-color="#10b981"/>
|
|
871
|
+
</linearGradient>
|
|
872
|
+
</defs>
|
|
873
|
+
</svg>
|
|
874
|
+
FlowEngine
|
|
875
|
+
</div>
|
|
876
|
+
<button class="new-chat-btn" id="newChatBtn">
|
|
877
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
878
|
+
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
879
|
+
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
880
|
+
</svg>
|
|
881
|
+
New Chat
|
|
882
|
+
</button>
|
|
883
|
+
</div>
|
|
884
|
+
|
|
885
|
+
<div class="sidebar-section">
|
|
886
|
+
|
|
887
|
+
<div class="section-title" style="margin-top: 24px;">Recent Chats</div>
|
|
888
|
+
<div class="nav-list" id="chatList">
|
|
889
|
+
<div class="chat-item active" data-chat-id="welcome">
|
|
890
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
891
|
+
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
|
892
|
+
</svg>
|
|
893
|
+
<span class="chat-item-title">Welcome Chat</span>
|
|
894
|
+
<div class="chat-item-actions">
|
|
895
|
+
<button class="chat-item-action delete" title="Delete chat">
|
|
896
|
+
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
897
|
+
<polyline points="3 6 5 6 21 6"></polyline>
|
|
898
|
+
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
|
899
|
+
</svg>
|
|
900
|
+
</button>
|
|
901
|
+
</div>
|
|
902
|
+
</div>
|
|
903
|
+
</div>
|
|
904
|
+
</div>
|
|
905
|
+
|
|
906
|
+
<div class="sidebar-footer">
|
|
907
|
+
<a href="https://flowengine.cloud" target="_blank" class="footer-link">
|
|
908
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
909
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
910
|
+
<line x1="2" y1="12" x2="22" y2="12"></line>
|
|
911
|
+
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
|
|
912
|
+
</svg>
|
|
913
|
+
Visit FlowEngine
|
|
914
|
+
</a>
|
|
915
|
+
</div>
|
|
916
|
+
</aside>
|
|
917
|
+
|
|
918
|
+
<!-- Main Content -->
|
|
919
|
+
<div class="main-content">
|
|
920
|
+
<!-- Chat Section -->
|
|
921
|
+
<div class="chat-section" id="chatView">
|
|
922
|
+
<div class="chat-messages" id="chatMessages">
|
|
923
|
+
<div class="message-wrapper assistant">
|
|
924
|
+
<div class="assistant-message">
|
|
925
|
+
<p>👋 Welcome to FlowEngine! Describe your workflow and I'll help you build it.</p>
|
|
926
|
+
<p>Try asking me to create:</p>
|
|
927
|
+
<ul>
|
|
928
|
+
<li>A workflow that sends Slack notifications for new leads</li>
|
|
929
|
+
<li>An automation that syncs Google Sheets to Airtable</li>
|
|
930
|
+
<li>A chatbot widget for your website</li>
|
|
931
|
+
</ul>
|
|
932
|
+
</div>
|
|
933
|
+
</div>
|
|
934
|
+
</div>
|
|
935
|
+
|
|
936
|
+
<div class="chat-input-container">
|
|
937
|
+
<form id="chatForm">
|
|
938
|
+
<div class="chat-input-wrapper">
|
|
939
|
+
<textarea
|
|
940
|
+
id="chatInput"
|
|
941
|
+
class="chat-input"
|
|
942
|
+
placeholder="Message..."
|
|
943
|
+
rows="1"
|
|
944
|
+
></textarea>
|
|
945
|
+
<div class="chat-input-footer">
|
|
946
|
+
<div class="mode-buttons">
|
|
947
|
+
<button type="button" class="boost-mode-btn" id="boostModeBtn" title="Boost Mode - Enhanced AI capabilities">
|
|
948
|
+
<span style="font-size: 16px;">🚀</span>
|
|
949
|
+
<span class="btn-text">Boost</span>
|
|
950
|
+
</button>
|
|
951
|
+
<button type="button" class="plan-mode-btn" id="planModeBtn" title="Plan Mode - Get a plan before building">
|
|
952
|
+
<div class="toggle-switch"></div>
|
|
953
|
+
<span class="btn-text">Plan</span>
|
|
954
|
+
</button>
|
|
955
|
+
<button type="button" class="widget-mode-btn" id="widgetModeBtn" title="Widget Mode - Generate UI components">
|
|
956
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
957
|
+
<rect x="3" y="3" width="7" height="7"></rect>
|
|
958
|
+
<rect x="14" y="3" width="7" height="7"></rect>
|
|
959
|
+
<rect x="14" y="14" width="7" height="7"></rect>
|
|
960
|
+
<rect x="3" y="14" width="7" height="7"></rect>
|
|
961
|
+
</svg>
|
|
962
|
+
<span class="btn-text">UI</span>
|
|
963
|
+
</button>
|
|
964
|
+
</div>
|
|
965
|
+
<button type="submit" class="send-button" id="sendButton" disabled>
|
|
966
|
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
|
967
|
+
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
|
|
968
|
+
</svg>
|
|
969
|
+
</button>
|
|
970
|
+
</div>
|
|
971
|
+
</div>
|
|
972
|
+
</form>
|
|
973
|
+
</div>
|
|
974
|
+
</div>
|
|
975
|
+
|
|
976
|
+
<!-- n8n Demo Section -->
|
|
977
|
+
<div class="demo-section" id="demoSection">
|
|
978
|
+
<div class="demo-header">
|
|
979
|
+
<div class="demo-tabs">
|
|
980
|
+
<button class="demo-tab active" data-panel="workflow">Workflow</button>
|
|
981
|
+
<button class="demo-tab" data-panel="widget">Widget</button>
|
|
982
|
+
</div>
|
|
983
|
+
<div class="demo-actions">
|
|
984
|
+
<button class="demo-action-btn" id="shareBtn" title="Share workflow">
|
|
985
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
986
|
+
<circle cx="18" cy="5" r="3"></circle>
|
|
987
|
+
<circle cx="6" cy="12" r="3"></circle>
|
|
988
|
+
<circle cx="18" cy="19" r="3"></circle>
|
|
989
|
+
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
|
|
990
|
+
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
|
|
991
|
+
</svg>
|
|
992
|
+
<span>Share</span>
|
|
993
|
+
</button>
|
|
994
|
+
<button class="demo-action-btn" id="exportBtn" title="Export workflow">
|
|
995
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
996
|
+
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
997
|
+
<polyline points="7 10 12 15 17 10"></polyline>
|
|
998
|
+
<line x1="12" y1="15" x2="12" y2="3"></line>
|
|
999
|
+
</svg>
|
|
1000
|
+
<span>Export</span>
|
|
1001
|
+
</button>
|
|
1002
|
+
</div>
|
|
1003
|
+
<button class="demo-close" id="demoClose">
|
|
1004
|
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
1005
|
+
<path d="M18 6L6 18M6 6l12 12"></path>
|
|
1006
|
+
</svg>
|
|
1007
|
+
</button>
|
|
1008
|
+
</div>
|
|
1009
|
+
<div class="demo-container">
|
|
1010
|
+
<div class="demo-panel active" id="workflowPanel">
|
|
1011
|
+
<n8n-demo id="n8nDemoElement"></n8n-demo>
|
|
1012
|
+
</div>
|
|
1013
|
+
<div class="demo-panel" id="widgetPanel">
|
|
1014
|
+
<div class="widget-preview-panel" id="widgetPreview">
|
|
1015
|
+
<!-- Empty State (shown initially) -->
|
|
1016
|
+
<div class="widget-preview-container" id="widgetEmptyState">
|
|
1017
|
+
<div class="widget-preview-empty">
|
|
1018
|
+
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="margin: 0 auto 16px; opacity: 0.3;">
|
|
1019
|
+
<rect x="3" y="3" width="7" height="7"></rect>
|
|
1020
|
+
<rect x="14" y="3" width="7" height="7"></rect>
|
|
1021
|
+
<rect x="14" y="14" width="7" height="7"></rect>
|
|
1022
|
+
<rect x="3" y="14" width="7" height="7"></rect>
|
|
1023
|
+
</svg>
|
|
1024
|
+
<p>No widget generated yet</p>
|
|
1025
|
+
<p style="font-size: 13px; margin-top: 8px; opacity: 0.7;">Enable Widget Mode to generate UI components</p>
|
|
1026
|
+
</div>
|
|
1027
|
+
</div>
|
|
1028
|
+
|
|
1029
|
+
<!-- Chatbot Preview (shown when widget mode is active) -->
|
|
1030
|
+
<div class="chatbot-preview" id="chatbotPreview" style="display: none;">
|
|
1031
|
+
<!-- Chat Bubble -->
|
|
1032
|
+
<div class="chat-bubble">
|
|
1033
|
+
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
1034
|
+
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" stroke="#ffffff"></path>
|
|
1035
|
+
</svg>
|
|
1036
|
+
</div>
|
|
1037
|
+
|
|
1038
|
+
<!-- Chat Window -->
|
|
1039
|
+
<div class="chat-window">
|
|
1040
|
+
<!-- Header -->
|
|
1041
|
+
<div class="chat-header">
|
|
1042
|
+
<div class="chat-header-avatar">
|
|
1043
|
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
1044
|
+
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
|
1045
|
+
</svg>
|
|
1046
|
+
</div>
|
|
1047
|
+
<div class="chat-header-title">AI Assistant</div>
|
|
1048
|
+
</div>
|
|
1049
|
+
|
|
1050
|
+
<!-- Messages -->
|
|
1051
|
+
<div class="chat-messages-preview">
|
|
1052
|
+
<!-- Bot Message -->
|
|
1053
|
+
<div class="chat-message-bot">
|
|
1054
|
+
<div class="chat-message-avatar">🤖</div>
|
|
1055
|
+
<div class="chat-message-bubble">
|
|
1056
|
+
Hi! I'm your AI assistant. How can I help you today?
|
|
1057
|
+
</div>
|
|
1058
|
+
</div>
|
|
1059
|
+
|
|
1060
|
+
<!-- User Message -->
|
|
1061
|
+
<div class="chat-message-user">
|
|
1062
|
+
<div class="chat-message-bubble">
|
|
1063
|
+
Hello! What can you do?
|
|
1064
|
+
</div>
|
|
1065
|
+
</div>
|
|
1066
|
+
|
|
1067
|
+
<!-- Bot Message -->
|
|
1068
|
+
<div class="chat-message-bot">
|
|
1069
|
+
<div class="chat-message-avatar">🤖</div>
|
|
1070
|
+
<div class="chat-message-bubble">
|
|
1071
|
+
I can help you with various tasks, answer questions, and guide you through processes. Just ask!
|
|
1072
|
+
</div>
|
|
1073
|
+
</div>
|
|
1074
|
+
</div>
|
|
1075
|
+
|
|
1076
|
+
<!-- Input Area -->
|
|
1077
|
+
<div class="chat-input-preview">
|
|
1078
|
+
<input type="text" class="chat-input-field" placeholder="Type your message..." disabled>
|
|
1079
|
+
<button class="chat-send-btn">
|
|
1080
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
|
1081
|
+
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
|
|
1082
|
+
</svg>
|
|
1083
|
+
</button>
|
|
1084
|
+
</div>
|
|
1085
|
+
</div>
|
|
1086
|
+
</div>
|
|
1087
|
+
</div>
|
|
1088
|
+
</div>
|
|
1089
|
+
</div>
|
|
1090
|
+
</div>
|
|
1091
|
+
|
|
1092
|
+
</div>
|
|
1093
|
+
</div>
|
|
1094
|
+
|
|
1095
|
+
<script src="https://n8n-io.github.io/n8n-demo-webcomponent/webcomponents-loader.js"></script>
|
|
1096
|
+
<script type="module" src="https://n8n-io.github.io/n8n-demo-webcomponent/n8n-demo.bundled.js"></script>
|
|
1097
|
+
<script>
|
|
1098
|
+
const chatForm = document.getElementById('chatForm');
|
|
1099
|
+
const chatInput = document.getElementById('chatInput');
|
|
1100
|
+
const chatMessages = document.getElementById('chatMessages');
|
|
1101
|
+
const sendButton = document.getElementById('sendButton');
|
|
1102
|
+
const demoSection = document.getElementById('demoSection');
|
|
1103
|
+
const demoClose = document.getElementById('demoClose');
|
|
1104
|
+
const demoElement = document.getElementById('n8nDemoElement');
|
|
1105
|
+
const chatView = document.getElementById('chatView');
|
|
1106
|
+
const newChatBtn = document.getElementById('newChatBtn');
|
|
1107
|
+
const boostModeBtn = document.getElementById('boostModeBtn');
|
|
1108
|
+
const planModeBtn = document.getElementById('planModeBtn');
|
|
1109
|
+
const widgetModeBtn = document.getElementById('widgetModeBtn');
|
|
1110
|
+
|
|
1111
|
+
// Mode states
|
|
1112
|
+
let isBoostMode = false;
|
|
1113
|
+
let isPlanMode = false;
|
|
1114
|
+
let isWidgetMode = false;
|
|
1115
|
+
|
|
1116
|
+
// Chat management
|
|
1117
|
+
let chats = [
|
|
1118
|
+
{ id: 'welcome', title: 'Welcome Chat', messages: [] }
|
|
1119
|
+
];
|
|
1120
|
+
let currentChatId = 'welcome';
|
|
1121
|
+
let chatCounter = 1;
|
|
1122
|
+
|
|
1123
|
+
// Chat management functions
|
|
1124
|
+
function createNewChat() {
|
|
1125
|
+
const chatId = 'chat-' + Date.now();
|
|
1126
|
+
const chatTitle = 'New Chat ' + chatCounter++;
|
|
1127
|
+
chats.push({ id: chatId, title: chatTitle, messages: [] });
|
|
1128
|
+
|
|
1129
|
+
// Add to sidebar
|
|
1130
|
+
const chatList = document.getElementById('chatList');
|
|
1131
|
+
const chatItem = document.createElement('div');
|
|
1132
|
+
chatItem.className = 'chat-item';
|
|
1133
|
+
chatItem.setAttribute('data-chat-id', chatId);
|
|
1134
|
+
chatItem.innerHTML = \`
|
|
1135
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
1136
|
+
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
|
1137
|
+
</svg>
|
|
1138
|
+
<span class="chat-item-title">\${chatTitle}</span>
|
|
1139
|
+
<div class="chat-item-actions">
|
|
1140
|
+
<button class="chat-item-action delete" title="Delete chat">
|
|
1141
|
+
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
1142
|
+
<polyline points="3 6 5 6 21 6"></polyline>
|
|
1143
|
+
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
|
1144
|
+
</svg>
|
|
1145
|
+
</button>
|
|
1146
|
+
</div>
|
|
1147
|
+
\`;
|
|
1148
|
+
chatList.appendChild(chatItem);
|
|
1149
|
+
|
|
1150
|
+
// Add event listeners
|
|
1151
|
+
chatItem.addEventListener('click', (e) => {
|
|
1152
|
+
if (!e.target.closest('.chat-item-action')) {
|
|
1153
|
+
switchToChat(chatId);
|
|
1154
|
+
}
|
|
1155
|
+
});
|
|
1156
|
+
|
|
1157
|
+
chatItem.querySelector('.delete').addEventListener('click', (e) => {
|
|
1158
|
+
e.stopPropagation();
|
|
1159
|
+
deleteChat(chatId);
|
|
1160
|
+
});
|
|
1161
|
+
|
|
1162
|
+
// Switch to new chat
|
|
1163
|
+
switchToChat(chatId);
|
|
1164
|
+
}
|
|
1165
|
+
|
|
1166
|
+
function switchToChat(chatId) {
|
|
1167
|
+
currentChatId = chatId;
|
|
1168
|
+
|
|
1169
|
+
// Update active state
|
|
1170
|
+
document.querySelectorAll('.chat-item').forEach(item => item.classList.remove('active'));
|
|
1171
|
+
const activeItem = document.querySelector(\`.chat-item[data-chat-id="\${chatId}"]\`);
|
|
1172
|
+
if (activeItem) activeItem.classList.add('active');
|
|
1173
|
+
|
|
1174
|
+
// Clear messages and load chat messages
|
|
1175
|
+
while (chatMessages.children.length > 1) {
|
|
1176
|
+
chatMessages.removeChild(chatMessages.lastChild);
|
|
1177
|
+
}
|
|
1178
|
+
|
|
1179
|
+
const chat = chats.find(c => c.id === chatId);
|
|
1180
|
+
if (chat && chat.messages.length > 0) {
|
|
1181
|
+
// Restore chat messages
|
|
1182
|
+
chat.messages.forEach(msg => {
|
|
1183
|
+
chatMessages.appendChild(msg.cloneNode(true));
|
|
1184
|
+
});
|
|
1185
|
+
}
|
|
1186
|
+
|
|
1187
|
+
scrollToBottom();
|
|
1188
|
+
}
|
|
1189
|
+
|
|
1190
|
+
function deleteChat(chatId) {
|
|
1191
|
+
if (chats.length === 1) {
|
|
1192
|
+
alert('Cannot delete the last chat');
|
|
1193
|
+
return;
|
|
1194
|
+
}
|
|
1195
|
+
|
|
1196
|
+
const index = chats.findIndex(c => c.id === chatId);
|
|
1197
|
+
if (index > -1) {
|
|
1198
|
+
chats.splice(index, 1);
|
|
1199
|
+
}
|
|
1200
|
+
|
|
1201
|
+
const chatItem = document.querySelector(\`.chat-item[data-chat-id="\${chatId}"]\`);
|
|
1202
|
+
if (chatItem) chatItem.remove();
|
|
1203
|
+
|
|
1204
|
+
// Switch to first chat if current was deleted
|
|
1205
|
+
if (currentChatId === chatId) {
|
|
1206
|
+
switchToChat(chats[0].id);
|
|
1207
|
+
}
|
|
1208
|
+
}
|
|
1209
|
+
|
|
1210
|
+
function saveChatMessages() {
|
|
1211
|
+
const chat = chats.find(c => c.id === currentChatId);
|
|
1212
|
+
if (chat) {
|
|
1213
|
+
chat.messages = Array.from(chatMessages.children).slice(1); // Skip welcome message
|
|
1214
|
+
}
|
|
1215
|
+
}
|
|
1216
|
+
|
|
1217
|
+
|
|
1218
|
+
// New chat button
|
|
1219
|
+
newChatBtn.addEventListener('click', () => {
|
|
1220
|
+
// Save current chat messages
|
|
1221
|
+
saveChatMessages();
|
|
1222
|
+
|
|
1223
|
+
// Create new chat
|
|
1224
|
+
createNewChat();
|
|
1225
|
+
|
|
1226
|
+
// Hide demo
|
|
1227
|
+
demoSection.classList.remove('show');
|
|
1228
|
+
// Reset modes
|
|
1229
|
+
isBoostMode = false;
|
|
1230
|
+
isPlanMode = false;
|
|
1231
|
+
isWidgetMode = false;
|
|
1232
|
+
boostModeBtn.classList.remove('active');
|
|
1233
|
+
planModeBtn.classList.remove('active');
|
|
1234
|
+
widgetModeBtn.classList.remove('active');
|
|
1235
|
+
// Focus input
|
|
1236
|
+
chatInput.focus();
|
|
1237
|
+
});
|
|
1238
|
+
|
|
1239
|
+
// Initialize chat item listeners
|
|
1240
|
+
document.querySelectorAll('.chat-item').forEach(item => {
|
|
1241
|
+
item.addEventListener('click', (e) => {
|
|
1242
|
+
if (!e.target.closest('.chat-item-action')) {
|
|
1243
|
+
const chatId = item.getAttribute('data-chat-id');
|
|
1244
|
+
switchToChat(chatId);
|
|
1245
|
+
}
|
|
1246
|
+
});
|
|
1247
|
+
|
|
1248
|
+
const deleteBtn = item.querySelector('.delete');
|
|
1249
|
+
if (deleteBtn) {
|
|
1250
|
+
deleteBtn.addEventListener('click', (e) => {
|
|
1251
|
+
e.stopPropagation();
|
|
1252
|
+
const chatId = item.getAttribute('data-chat-id');
|
|
1253
|
+
deleteChat(chatId);
|
|
1254
|
+
});
|
|
1255
|
+
}
|
|
1256
|
+
});
|
|
1257
|
+
|
|
1258
|
+
// Boost Mode button
|
|
1259
|
+
boostModeBtn.addEventListener('click', () => {
|
|
1260
|
+
isBoostMode = !isBoostMode;
|
|
1261
|
+
if (isBoostMode) {
|
|
1262
|
+
boostModeBtn.classList.add('active');
|
|
1263
|
+
} else {
|
|
1264
|
+
boostModeBtn.classList.remove('active');
|
|
1265
|
+
}
|
|
1266
|
+
});
|
|
1267
|
+
|
|
1268
|
+
// Plan Mode button
|
|
1269
|
+
planModeBtn.addEventListener('click', () => {
|
|
1270
|
+
isPlanMode = !isPlanMode;
|
|
1271
|
+
if (isPlanMode) {
|
|
1272
|
+
planModeBtn.classList.add('active');
|
|
1273
|
+
planModeBtn.title = 'Plan mode ON - will outline steps first';
|
|
1274
|
+
} else {
|
|
1275
|
+
planModeBtn.classList.remove('active');
|
|
1276
|
+
planModeBtn.title = 'Plan Mode - Get a plan before building';
|
|
1277
|
+
}
|
|
1278
|
+
});
|
|
1279
|
+
|
|
1280
|
+
// Widget Mode button
|
|
1281
|
+
widgetModeBtn.addEventListener('click', () => {
|
|
1282
|
+
isWidgetMode = !isWidgetMode;
|
|
1283
|
+
if (isWidgetMode) {
|
|
1284
|
+
widgetModeBtn.classList.add('active');
|
|
1285
|
+
// Show widget preview immediately
|
|
1286
|
+
document.getElementById('widgetEmptyState').style.display = 'none';
|
|
1287
|
+
document.getElementById('chatbotPreview').style.display = 'block';
|
|
1288
|
+
} else {
|
|
1289
|
+
widgetModeBtn.classList.remove('active');
|
|
1290
|
+
// Hide widget preview
|
|
1291
|
+
document.getElementById('widgetEmptyState').style.display = 'block';
|
|
1292
|
+
document.getElementById('chatbotPreview').style.display = 'none';
|
|
1293
|
+
}
|
|
1294
|
+
});
|
|
1295
|
+
|
|
1296
|
+
// Sample workflow for demo
|
|
1297
|
+
const sampleWorkflow = {
|
|
1298
|
+
"name": "Sample Automation",
|
|
1299
|
+
"nodes": [
|
|
1300
|
+
{
|
|
1301
|
+
"parameters": {},
|
|
1302
|
+
"id": "1",
|
|
1303
|
+
"name": "Start",
|
|
1304
|
+
"type": "n8n-nodes-base.start",
|
|
1305
|
+
"typeVersion": 1,
|
|
1306
|
+
"position": [250, 300]
|
|
1307
|
+
},
|
|
1308
|
+
{
|
|
1309
|
+
"parameters": {
|
|
1310
|
+
"url": "https://api.example.com/webhook",
|
|
1311
|
+
"method": "POST"
|
|
1312
|
+
},
|
|
1313
|
+
"id": "2",
|
|
1314
|
+
"name": "Webhook",
|
|
1315
|
+
"type": "n8n-nodes-base.httpRequest",
|
|
1316
|
+
"typeVersion": 1,
|
|
1317
|
+
"position": [450, 300]
|
|
1318
|
+
},
|
|
1319
|
+
{
|
|
1320
|
+
"parameters": {
|
|
1321
|
+
"channel": "#notifications"
|
|
1322
|
+
},
|
|
1323
|
+
"id": "3",
|
|
1324
|
+
"name": "Slack",
|
|
1325
|
+
"type": "n8n-nodes-base.slack",
|
|
1326
|
+
"typeVersion": 1,
|
|
1327
|
+
"position": [650, 300]
|
|
1328
|
+
}
|
|
1329
|
+
],
|
|
1330
|
+
"connections": {
|
|
1331
|
+
"Start": {
|
|
1332
|
+
"main": [[{ "node": "Webhook", "type": "main", "index": 0 }]]
|
|
1333
|
+
},
|
|
1334
|
+
"Webhook": {
|
|
1335
|
+
"main": [[{ "node": "Slack", "type": "main", "index": 0 }]]
|
|
1336
|
+
}
|
|
1337
|
+
}
|
|
1338
|
+
};
|
|
1339
|
+
|
|
1340
|
+
// Initialize n8n demo
|
|
1341
|
+
function initDemo() {
|
|
1342
|
+
if (customElements.get('n8n-demo')) {
|
|
1343
|
+
demoElement.setAttribute('workflow', JSON.stringify(sampleWorkflow));
|
|
1344
|
+
demoElement.setAttribute('theme', 'dark');
|
|
1345
|
+
demoElement.setAttribute('collapseformobile', 'false');
|
|
1346
|
+
} else {
|
|
1347
|
+
setTimeout(initDemo, 100);
|
|
1348
|
+
}
|
|
1349
|
+
}
|
|
1350
|
+
setTimeout(initDemo, 500);
|
|
1351
|
+
|
|
1352
|
+
// Update send button state
|
|
1353
|
+
chatInput.addEventListener('input', () => {
|
|
1354
|
+
const hasContent = chatInput.value.trim().length > 0;
|
|
1355
|
+
sendButton.disabled = !hasContent;
|
|
1356
|
+
if (hasContent) {
|
|
1357
|
+
sendButton.classList.add('has-content');
|
|
1358
|
+
} else {
|
|
1359
|
+
sendButton.classList.remove('has-content');
|
|
1360
|
+
}
|
|
1361
|
+
});
|
|
1362
|
+
|
|
1363
|
+
// Handle form submission
|
|
1364
|
+
chatForm.addEventListener('submit', async (e) => {
|
|
1365
|
+
e.preventDefault();
|
|
1366
|
+
const message = chatInput.value.trim();
|
|
1367
|
+
if (!message) return;
|
|
1368
|
+
|
|
1369
|
+
// Build mode indicators
|
|
1370
|
+
let modeIndicators = [];
|
|
1371
|
+
if (isBoostMode) modeIndicators.push('🚀 Boost');
|
|
1372
|
+
if (isPlanMode) modeIndicators.push('📋 Plan');
|
|
1373
|
+
if (isWidgetMode) modeIndicators.push('🎨 Widget');
|
|
1374
|
+
|
|
1375
|
+
// Add user message
|
|
1376
|
+
const userWrapper = document.createElement('div');
|
|
1377
|
+
userWrapper.className = 'message-wrapper user';
|
|
1378
|
+
let userMessageHTML = \`<div class="user-message">\${escapeHtml(message)}\`;
|
|
1379
|
+
if (modeIndicators.length > 0) {
|
|
1380
|
+
userMessageHTML += \`<div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12px; opacity: 0.7;">\${modeIndicators.join(' • ')}</div>\`;
|
|
1381
|
+
}
|
|
1382
|
+
userMessageHTML += \`</div>\`;
|
|
1383
|
+
userWrapper.innerHTML = userMessageHTML;
|
|
1384
|
+
chatMessages.appendChild(userWrapper);
|
|
1385
|
+
|
|
1386
|
+
// Clear input
|
|
1387
|
+
chatInput.value = '';
|
|
1388
|
+
sendButton.disabled = true;
|
|
1389
|
+
sendButton.classList.remove('has-content');
|
|
1390
|
+
|
|
1391
|
+
// Show demo section
|
|
1392
|
+
demoSection.classList.add('show');
|
|
1393
|
+
|
|
1394
|
+
// Simulate AI response based on modes
|
|
1395
|
+
setTimeout(() => {
|
|
1396
|
+
const aiWrapper = document.createElement('div');
|
|
1397
|
+
aiWrapper.className = 'message-wrapper assistant';
|
|
1398
|
+
|
|
1399
|
+
let responseHTML = '<div class="assistant-message">';
|
|
1400
|
+
|
|
1401
|
+
if (isPlanMode) {
|
|
1402
|
+
responseHTML += \`
|
|
1403
|
+
<p><strong>📋 Plan:</strong></p>
|
|
1404
|
+
<ol>
|
|
1405
|
+
<li>Set up webhook trigger node</li>
|
|
1406
|
+
<li>Configure HTTP request for data processing</li>
|
|
1407
|
+
<li>Add Slack notification node</li>
|
|
1408
|
+
<li>Test and deploy workflow</li>
|
|
1409
|
+
</ol>
|
|
1410
|
+
\`;
|
|
1411
|
+
}
|
|
1412
|
+
|
|
1413
|
+
responseHTML += \`
|
|
1414
|
+
<p>\${isBoostMode ? '🚀 <strong>Enhanced:</strong> ' : ''}I've created a\${isWidgetMode ? ' workflow with UI component' : ' workflow'} for you! Check the preview on the right.</p>
|
|
1415
|
+
<p>This workflow will:</p>
|
|
1416
|
+
<ul>
|
|
1417
|
+
<li>Trigger when an event occurs</li>
|
|
1418
|
+
<li>Send data to your webhook</li>
|
|
1419
|
+
<li>Post a notification to Slack</li>
|
|
1420
|
+
</ul>
|
|
1421
|
+
\`;
|
|
1422
|
+
|
|
1423
|
+
if (isWidgetMode) {
|
|
1424
|
+
responseHTML += \`
|
|
1425
|
+
<p style="margin-top: 12px; padding: 12px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 8px;">
|
|
1426
|
+
🎨 <strong>Widget Generated:</strong> Check the "Widget" tab to preview your UI component
|
|
1427
|
+
</p>
|
|
1428
|
+
\`;
|
|
1429
|
+
// Show widget preview and switch to widget tab
|
|
1430
|
+
document.getElementById('widgetEmptyState').style.display = 'none';
|
|
1431
|
+
document.getElementById('chatbotPreview').style.display = 'block';
|
|
1432
|
+
setTimeout(() => {
|
|
1433
|
+
const widgetTab = document.querySelector('.demo-tab[data-panel="widget"]');
|
|
1434
|
+
if (widgetTab) widgetTab.click();
|
|
1435
|
+
}, 1000);
|
|
1436
|
+
}
|
|
1437
|
+
|
|
1438
|
+
responseHTML += '</div>';
|
|
1439
|
+
aiWrapper.innerHTML = responseHTML;
|
|
1440
|
+
chatMessages.appendChild(aiWrapper);
|
|
1441
|
+
scrollToBottom();
|
|
1442
|
+
}, 500);
|
|
1443
|
+
|
|
1444
|
+
// Save messages to current chat
|
|
1445
|
+
setTimeout(() => {
|
|
1446
|
+
saveChatMessages();
|
|
1447
|
+
|
|
1448
|
+
// Update chat title if it's a new chat
|
|
1449
|
+
const chat = chats.find(c => c.id === currentChatId);
|
|
1450
|
+
if (chat && chat.title.startsWith('New Chat') && chat.messages.length === 0) {
|
|
1451
|
+
const titlePreview = message.slice(0, 30) + (message.length > 30 ? '...' : '');
|
|
1452
|
+
chat.title = titlePreview;
|
|
1453
|
+
const chatItem = document.querySelector(\`.chat-item[data-chat-id="\${currentChatId}"] .chat-item-title\`);
|
|
1454
|
+
if (chatItem) chatItem.textContent = titlePreview;
|
|
1455
|
+
}
|
|
1456
|
+
}, 1000);
|
|
1457
|
+
|
|
1458
|
+
scrollToBottom();
|
|
1459
|
+
});
|
|
1460
|
+
|
|
1461
|
+
// Close demo on mobile
|
|
1462
|
+
demoClose.addEventListener('click', () => {
|
|
1463
|
+
demoSection.classList.remove('show');
|
|
1464
|
+
});
|
|
1465
|
+
|
|
1466
|
+
// Demo panel tabs
|
|
1467
|
+
document.querySelectorAll('.demo-tab').forEach(tab => {
|
|
1468
|
+
tab.addEventListener('click', () => {
|
|
1469
|
+
const panelName = tab.getAttribute('data-panel');
|
|
1470
|
+
|
|
1471
|
+
// Update active tab
|
|
1472
|
+
document.querySelectorAll('.demo-tab').forEach(t => t.classList.remove('active'));
|
|
1473
|
+
tab.classList.add('active');
|
|
1474
|
+
|
|
1475
|
+
// Update active panel
|
|
1476
|
+
document.querySelectorAll('.demo-panel').forEach(p => p.classList.remove('active'));
|
|
1477
|
+
document.getElementById(panelName + 'Panel').classList.add('active');
|
|
1478
|
+
});
|
|
1479
|
+
});
|
|
1480
|
+
|
|
1481
|
+
// Share button
|
|
1482
|
+
const shareBtn = document.getElementById('shareBtn');
|
|
1483
|
+
shareBtn.addEventListener('click', () => {
|
|
1484
|
+
// Simple share functionality - copy workflow JSON
|
|
1485
|
+
const workflow = JSON.stringify(sampleWorkflow, null, 2);
|
|
1486
|
+
navigator.clipboard.writeText(workflow).then(() => {
|
|
1487
|
+
const originalText = shareBtn.innerHTML;
|
|
1488
|
+
shareBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg><span>Copied!</span>';
|
|
1489
|
+
setTimeout(() => {
|
|
1490
|
+
shareBtn.innerHTML = originalText;
|
|
1491
|
+
}, 2000);
|
|
1492
|
+
});
|
|
1493
|
+
});
|
|
1494
|
+
|
|
1495
|
+
// Export button
|
|
1496
|
+
const exportBtn = document.getElementById('exportBtn');
|
|
1497
|
+
exportBtn.addEventListener('click', () => {
|
|
1498
|
+
// Export workflow as JSON file
|
|
1499
|
+
const workflow = JSON.stringify(sampleWorkflow, null, 2);
|
|
1500
|
+
const blob = new Blob([workflow], { type: 'application/json' });
|
|
1501
|
+
const url = URL.createObjectURL(blob);
|
|
1502
|
+
const a = document.createElement('a');
|
|
1503
|
+
a.href = url;
|
|
1504
|
+
a.download = 'workflow.json';
|
|
1505
|
+
a.click();
|
|
1506
|
+
URL.revokeObjectURL(url);
|
|
1507
|
+
|
|
1508
|
+
const originalText = exportBtn.innerHTML;
|
|
1509
|
+
exportBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg><span>Exported!</span>';
|
|
1510
|
+
setTimeout(() => {
|
|
1511
|
+
exportBtn.innerHTML = originalText;
|
|
1512
|
+
}, 2000);
|
|
1513
|
+
});
|
|
1514
|
+
|
|
1515
|
+
function scrollToBottom() {
|
|
1516
|
+
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|
1517
|
+
}
|
|
1518
|
+
|
|
1519
|
+
function escapeHtml(text) {
|
|
1520
|
+
const div = document.createElement('div');
|
|
1521
|
+
div.textContent = text;
|
|
1522
|
+
return div.innerHTML;
|
|
1523
|
+
}
|
|
1524
|
+
|
|
1525
|
+
chatInput.focus();
|
|
1526
|
+
</script>
|
|
1527
|
+
</body>
|
|
1528
|
+
</html>`;
|
|
1529
|
+
}
|
|
1530
|
+
//# sourceMappingURL=chat.js.map
|