sofzcc commited on
Commit
1cb7516
·
verified ·
1 Parent(s): 0104a35

Rename index.html to site/index.html

Browse files
Files changed (2) hide show
  1. index.html +0 -828
  2. site/index.html +9 -0
index.html DELETED
@@ -1,828 +0,0 @@
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>Self-Service KB Assistant</title>
7
- <link rel="preconnect" href="https://fonts.googleapis.com">
8
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
9
- <style>
10
- /* ─── Reset & tokens ────────────────────────────────────────── */
11
- *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
12
- :root {
13
- --bg: #F5F0E8;
14
- --surface: #FDFAF5;
15
- --border: #E2D9CE;
16
- --border2: #C9BFB3;
17
- --ink: #1E1C1A;
18
- --ink2: #4A4540;
19
- --muted: #7A7167;
20
- --muted2: #A09890;
21
- --sage: #5C7E62;
22
- --sage-h: #4A6550;
23
- --sage-bg: #EAF2EB;
24
- --sage-bg2: #D0E6D3;
25
- --rose: #B5626A;
26
- --rose-bg: #F8EDEE;
27
- --r: 10px;
28
- --r2: 7px;
29
- --r3: 5px;
30
- --sh: 0 1px 4px rgba(0,0,0,.08);
31
- --sh2: 0 4px 16px rgba(0,0,0,.12);
32
- }
33
- html, body {
34
- height: 100%; overflow: hidden;
35
- background: var(--bg);
36
- font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
37
- font-size: 14px; color: var(--ink);
38
- -webkit-font-smoothing: antialiased;
39
- }
40
-
41
- /* ─── Layout ────────────────────────────────────────────────── */
42
- #app { display: flex; flex-direction: column; height: 100vh; }
43
-
44
- /* Header */
45
- header {
46
- height: 52px; flex-shrink: 0;
47
- background: var(--surface); border-bottom: 1px solid var(--border);
48
- display: flex; align-items: center; padding: 0 20px; gap: 12px;
49
- box-shadow: var(--sh); z-index: 10;
50
- }
51
- .h-logo {
52
- width: 32px; height: 32px; border-radius: 8px;
53
- background: var(--sage); display: flex; align-items: center;
54
- justify-content: center; font-size: 16px; flex-shrink: 0;
55
- box-shadow: 0 1px 5px rgba(92,126,98,.4);
56
- }
57
- .h-name { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
58
- .h-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
59
- .h-badge {
60
- margin-left: auto; font-size: 10.5px; font-weight: 500;
61
- color: var(--sage); background: var(--sage-bg);
62
- border: 1px solid var(--sage-bg2); border-radius: 999px; padding: 3px 10px;
63
- }
64
-
65
- /* Body grid */
66
- #body {
67
- display: grid;
68
- grid-template-columns: 200px 1fr 224px;
69
- flex: 1; overflow: hidden;
70
- }
71
-
72
- /* ─── Left panel ────────────────────────────────────────────── */
73
- #left {
74
- border-right: 1px solid var(--border);
75
- background: var(--surface);
76
- display: flex; flex-direction: column; overflow: hidden;
77
- }
78
- .panel-hdr {
79
- padding: 13px 14px 10px;
80
- font-size: 10px; font-weight: 600; letter-spacing: .08em;
81
- text-transform: uppercase; color: var(--muted2);
82
- border-bottom: 1px solid var(--border);
83
- display: flex; align-items: center; gap: 6px; flex-shrink: 0;
84
- }
85
- .panel-hdr::before {
86
- content: ""; width: 5px; height: 5px;
87
- background: var(--sage); border-radius: 50%; flex-shrink: 0;
88
- }
89
- #suggestions { overflow-y: auto; padding: 10px 10px 16px; flex: 1; }
90
- .pill {
91
- width: 100%; display: flex; align-items: flex-start; gap: 8px;
92
- text-align: left; background: var(--surface);
93
- border: 1px solid var(--border); border-radius: var(--r);
94
- padding: 9px 11px; font-size: 12.5px; color: var(--ink2);
95
- cursor: pointer; margin-bottom: 7px; line-height: 1.45;
96
- transition: all .15s; opacity: 0;
97
- animation: fadeUp .3s ease forwards;
98
- }
99
- .pill::before { content: "→"; color: var(--sage); flex-shrink: 0; transition: transform .15s; }
100
- .pill:hover { background: var(--sage-bg); border-color: var(--sage); color: var(--sage-h); transform: translateX(2px); }
101
- .pill:hover::before { transform: translateX(2px); }
102
- @keyframes fadeUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
103
-
104
- /* ─── Centre: chat ───────────────────────────────────────────── */
105
- #centre {
106
- display: flex; flex-direction: column; overflow: hidden;
107
- background: var(--bg);
108
- }
109
- #messages {
110
- flex: 1; overflow-y: auto; padding: 20px 20px 12px;
111
- display: flex; flex-direction: column; gap: 14px;
112
- }
113
- /* Empty state */
114
- #empty-state {
115
- flex: 1; display: flex; flex-direction: column;
116
- align-items: center; justify-content: center;
117
- gap: 10px; color: var(--muted); text-align: center;
118
- padding: 40px 20px;
119
- }
120
- .es-icon { font-size: 2.6rem; opacity: .35; }
121
- .es-title { font-size: 14px; font-weight: 500; color: var(--ink2); }
122
- .es-sub { font-size: 12px; line-height: 1.6; max-width: 260px; }
123
- /* Bubbles */
124
- .msg { display: flex; flex-direction: column; animation: bubIn .2s ease; }
125
- @keyframes bubIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
126
- .msg.user { align-items: flex-end; }
127
- .msg.bot { align-items: flex-start; }
128
- .bubble {
129
- padding: 10px 14px; max-width: 74%; line-height: 1.65; font-size: 13.5px;
130
- }
131
- .msg.user .bubble {
132
- background: var(--sage); color: #fff;
133
- border-radius: var(--r) var(--r) 3px var(--r);
134
- box-shadow: 0 2px 8px rgba(92,126,98,.28);
135
- }
136
- .msg.bot .bubble {
137
- background: var(--surface); color: var(--ink);
138
- border: 1px solid var(--border);
139
- border-radius: var(--r) var(--r) var(--r) 3px;
140
- box-shadow: var(--sh);
141
- }
142
- /* Markdown-ish */
143
- .bubble p { margin-bottom: .5em; }
144
- .bubble p:last-child { margin-bottom: 0; }
145
- .bubble ul, .bubble ol { padding-left: 1.3em; margin: .4em 0; }
146
- .bubble li { margin-bottom: .25em; }
147
- .bubble strong { font-weight: 600; }
148
- .bubble code { background: rgba(0,0,0,.07); border-radius: 3px; padding: 1px 5px; font-family: monospace; font-size: .92em; }
149
- /* Source chips */
150
- .src-row {
151
- display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
152
- margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border);
153
- }
154
- .src-lbl {
155
- font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
156
- text-transform: uppercase; color: var(--muted2); flex-shrink: 0;
157
- }
158
- .src-chip {
159
- display: inline-flex; align-items: center; gap: 4px;
160
- background: var(--sage-bg); border: 1px solid var(--sage-bg2);
161
- border-radius: 999px; padding: 2px 10px 2px 7px;
162
- font-size: 11px; font-weight: 500; color: var(--sage-h);
163
- animation: chipIn .2s ease; transition: background .13s;
164
- }
165
- .src-chip:hover { background: var(--sage-bg2); }
166
- @keyframes chipIn { from { opacity:0; transform:scale(.9) translateY(3px); } to { opacity:1; transform:scale(1) translateY(0); } }
167
- /* Typing indicator */
168
- .typing { display: flex; gap: 5px; align-items: center; padding: 12px 14px; }
169
- .typing span {
170
- width: 7px; height: 7px; border-radius: 50%; background: var(--border2);
171
- animation: bounce .9s infinite ease;
172
- }
173
- .typing span:nth-child(2) { animation-delay: .15s; }
174
- .typing span:nth-child(3) { animation-delay: .30s; }
175
- @keyframes bounce { 0%,80%,100% { transform:translateY(0); } 40% { transform:translateY(-6px); } }
176
-
177
- /* ─── Input area ─────────────────────────────────────────────── */
178
- #input-area {
179
- flex-shrink: 0; background: var(--surface);
180
- border-top: 1px solid var(--border); padding: 10px 14px 10px;
181
- }
182
- #input-card {
183
- border: 1.5px solid var(--border); border-radius: var(--r);
184
- background: var(--bg); overflow: hidden;
185
- transition: border-color .18s, box-shadow .18s;
186
- }
187
- #input-card:focus-within {
188
- border-color: var(--sage);
189
- box-shadow: 0 0 0 3px rgba(92,126,98,.12);
190
- }
191
- #input-row { display: flex; align-items: flex-end; }
192
- #msg-input {
193
- flex: 1; border: none; background: transparent; resize: none;
194
- padding: 11px 13px; font-size: 13.5px; font-family: inherit;
195
- color: var(--ink); line-height: 1.55; outline: none;
196
- min-height: 44px; max-height: 140px;
197
- }
198
- #msg-input::placeholder { color: var(--muted2); }
199
- #send-btn {
200
- margin: 0 7px 7px 0; align-self: flex-end;
201
- width: 34px; height: 34px; border-radius: var(--r2); border: none;
202
- background: var(--sage); color: #fff; cursor: pointer;
203
- display: flex; align-items: center; justify-content: center;
204
- box-shadow: 0 1px 4px rgba(92,126,98,.3);
205
- transition: background .14s, transform .1s; flex-shrink: 0;
206
- }
207
- #send-btn:hover { background: var(--sage-h); transform: translateY(-1px); }
208
- #send-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
209
- #send-btn svg { width: 16px; height: 16px; pointer-events: none; }
210
- /* Toolbar */
211
- #toolbar {
212
- display: flex; align-items: center; gap: 1px;
213
- padding: 4px 9px 6px; background: var(--bg);
214
- border-top: 1px solid var(--border);
215
- }
216
- .tb {
217
- width: 26px; height: 26px; border: none; background: none;
218
- border-radius: var(--r3); cursor: pointer; color: var(--muted);
219
- display: flex; align-items: center; justify-content: center;
220
- transition: background .12s, color .12s; position: relative;
221
- }
222
- .tb svg { width: 13px; height: 13px; pointer-events: none; }
223
- .tb:hover { background: var(--sage-bg); color: var(--sage); }
224
- .tb-sep { width: 1px; height: 12px; background: var(--border2); margin: 0 3px; flex-shrink: 0; }
225
- .tb[title]::after {
226
- content: attr(title);
227
- position: absolute; bottom: calc(100% + 6px); left: 50%;
228
- transform: translateX(-50%);
229
- background: var(--ink); color: #fff;
230
- font-size: 10px; padding: 3px 7px; border-radius: 4px;
231
- white-space: nowrap; pointer-events: none;
232
- opacity: 0; transition: opacity .12s; z-index: 99;
233
- }
234
- .tb:hover[title]::after { opacity: 1; }
235
- #char-count { margin-left: auto; font-size: 10px; color: var(--muted2); }
236
-
237
- /* ─── Right panel: KB files ──────────────────────────────────── */
238
- #right {
239
- border-left: 1px solid var(--border);
240
- background: var(--surface);
241
- display: flex; flex-direction: column; overflow: hidden;
242
- }
243
- .rp-head {
244
- padding: 12px 14px 11px; border-bottom: 1px solid var(--border);
245
- flex-shrink: 0; display: flex; align-items: center; gap: 0;
246
- }
247
- .rp-title {
248
- font-size: 10px; font-weight: 600; letter-spacing: .08em;
249
- text-transform: uppercase; color: var(--muted2);
250
- display: flex; align-items: center; gap: 6px;
251
- }
252
- .rp-title::before {
253
- content: ""; width: 5px; height: 5px;
254
- background: var(--sage); border-radius: 50%;
255
- }
256
- #file-count {
257
- font-size: 10px; font-weight: 600; color: var(--sage);
258
- background: var(--sage-bg); border: 1px solid var(--sage-bg2);
259
- border-radius: 999px; padding: 1px 7px; margin-left: 7px;
260
- }
261
- /* Add file button */
262
- .add-wrap { position: relative; margin-left: auto; }
263
- .add-btn {
264
- display: flex; align-items: center; gap: 4px;
265
- background: var(--sage-bg); border: 1px solid var(--sage-bg2);
266
- color: var(--sage-h); border-radius: var(--r2);
267
- padding: 5px 11px; font-size: 12px; font-weight: 600;
268
- cursor: pointer; transition: all .14s;
269
- }
270
- .add-btn:hover { background: var(--sage); color: #fff; border-color: var(--sage); box-shadow: 0 1px 6px rgba(92,126,98,.3); }
271
- .add-tip {
272
- display: none; position: absolute; top: calc(100% + 7px); right: 0;
273
- background: var(--ink); color: #f5f5f0;
274
- border-radius: var(--r2); padding: 11px 14px;
275
- font-size: 11.5px; line-height: 1.7; min-width: 210px;
276
- box-shadow: var(--sh2); z-index: 60;
277
- }
278
- .add-tip strong { display: block; margin-bottom: 5px; color: #fff; font-size: 12px; }
279
- .add-tip i { display: flex; align-items: center; gap: 6px; opacity: .85; font-style: normal; }
280
- .add-tip i::before { content: "·"; color: #9ecfa4; }
281
- .add-tip::before {
282
- content: ""; position: absolute; top: -5px; right: 13px;
283
- border: 5px solid transparent; border-top: 0;
284
- border-bottom-color: var(--ink);
285
- }
286
- .add-wrap:hover .add-tip { display: block; }
287
- #file-input { display: none; }
288
-
289
- /* File list */
290
- #file-list { overflow-y: auto; padding: 4px 8px 16px; flex: 1; }
291
- #file-count-line { font-size: 10.5px; color: var(--muted2); padding: 8px 6px 4px; }
292
- .f-row {
293
- display: flex; align-items: center; gap: 7px;
294
- padding: 7px 8px; border-radius: var(--r2);
295
- transition: background .12s; position: relative;
296
- }
297
- .f-row:hover { background: var(--bg); }
298
- .f-ico { font-size: 13px; opacity: .75; flex-shrink: 0; }
299
- .f-name {
300
- flex: 1; font-size: 12px; color: var(--ink2);
301
- overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
302
- }
303
- .f-actions {
304
- display: none; gap: 1px; align-items: center; flex-shrink: 0;
305
- }
306
- .f-row:hover .f-actions { display: flex; }
307
- .f-btn {
308
- background: none; border: none; cursor: pointer;
309
- font-size: 12px; padding: 3px 5px; border-radius: 4px;
310
- color: var(--muted); transition: background .11s, color .11s;
311
- }
312
- .f-btn:hover { background: var(--border); color: var(--ink); }
313
- .f-btn.del:hover { background: var(--rose-bg); color: var(--rose); }
314
- /* Rename row */
315
- .f-rename {
316
- display: none; padding: 5px 8px; gap: 5px; align-items: center;
317
- }
318
- .f-rename.on { display: flex; }
319
- .f-rename input {
320
- flex: 1; border: 1.5px solid var(--sage); border-radius: var(--r3);
321
- padding: 4px 8px; font-size: 11px; background: var(--bg);
322
- color: var(--ink); outline: none; font-family: inherit;
323
- }
324
- .f-rename .r-save {
325
- background: var(--sage); color: #fff; border: none;
326
- border-radius: var(--r3); padding: 4px 9px;
327
- font-size: 11px; font-weight: 600; cursor: pointer;
328
- }
329
- .f-rename .r-cancel {
330
- background: none; border: 1px solid var(--border); color: var(--muted);
331
- border-radius: var(--r3); padding: 4px 7px; font-size: 11px; cursor: pointer;
332
- }
333
-
334
- /* ─── Toast ─────────────────────────────────────────────────── */
335
- #toast {
336
- position: fixed; bottom: 20px; left: 50%;
337
- transform: translateX(-50%) translateY(8px);
338
- background: var(--ink); color: #fff;
339
- border-radius: var(--r2); padding: 8px 18px;
340
- font-size: 12px; box-shadow: var(--sh2);
341
- opacity: 0; pointer-events: none;
342
- transition: opacity .2s, transform .2s; z-index: 999; white-space: nowrap;
343
- }
344
- #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
345
-
346
- /* ─── Upload progress overlay ───────────────────────────────── */
347
- #upload-overlay {
348
- display: none; position: fixed; inset: 0;
349
- background: rgba(30,28,26,.45); z-index: 998;
350
- align-items: center; justify-content: center;
351
- }
352
- #upload-overlay.show { display: flex; }
353
- .upload-card {
354
- background: var(--surface); border-radius: var(--r);
355
- padding: 28px 32px; text-align: center; box-shadow: var(--sh2);
356
- display: flex; flex-direction: column; align-items: center; gap: 10px;
357
- }
358
- .upload-card .spinner {
359
- width: 30px; height: 30px; border: 3px solid var(--border);
360
- border-top-color: var(--sage); border-radius: 50%;
361
- animation: spin .7s linear infinite;
362
- }
363
- @keyframes spin { to { transform: rotate(360deg); } }
364
- .upload-card p { font-size: 13px; color: var(--muted); }
365
-
366
- /* ─── Scrollbar ─────────────────────────────────────────���───── */
367
- * { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
368
- ::-webkit-scrollbar { width: 4px; }
369
- ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }
370
- ::selection { background: rgba(92,126,98,.2); }
371
-
372
- /* ─── Mobile ────────────────────────────────────────────────── */
373
- @media (max-width: 860px) {
374
- #body { grid-template-columns: 1fr; }
375
- #left, #right { display: none; }
376
- }
377
- </style>
378
- </head>
379
- <body>
380
- <div id="app">
381
-
382
- <!-- Header -->
383
- <header>
384
- <div class="h-logo">🤖</div>
385
- <div>
386
- <div class="h-name" id="app-name">KB Assistant</div>
387
- <div class="h-sub">Search the knowledge base and get answers in plain language</div>
388
- </div>
389
- <span class="h-badge">MVP · AI-powered</span>
390
- </header>
391
-
392
- <!-- 3-col body -->
393
- <div id="body">
394
-
395
- <!-- Left: suggestions -->
396
- <div id="left">
397
- <div class="panel-hdr">Try asking</div>
398
- <div id="suggestions"></div>
399
- </div>
400
-
401
- <!-- Centre: chat -->
402
- <div id="centre">
403
- <div id="messages">
404
- <div id="empty-state">
405
- <div class="es-icon">💬</div>
406
- <div class="es-title">Ask me anything</div>
407
- <div class="es-sub" id="welcome-msg">Search the knowledge base and get an answer in plain language.</div>
408
- </div>
409
- </div>
410
-
411
- <!-- Input area -->
412
- <div id="input-area">
413
- <div id="input-card">
414
- <div id="input-row">
415
- <textarea id="msg-input" placeholder="Ask a question…" rows="1"></textarea>
416
- <button id="send-btn" title="Send (Enter)">
417
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
418
- <line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/>
419
- </svg>
420
- </button>
421
- </div>
422
- <div id="toolbar">
423
- <button class="tb" title="Attach file" id="attach-btn">
424
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
425
- <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>
426
- </svg>
427
- </button>
428
- <button class="tb" title="Paste from clipboard" id="paste-btn">
429
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
430
- <rect x="8" y="2" width="8" height="4" rx="1"/>
431
- <path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"/>
432
- </svg>
433
- </button>
434
- <div class="tb-sep"></div>
435
- <button class="tb" title="Bold" data-wrap="**">
436
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
437
- <path d="M6 4h8a4 4 0 010 8H6zM6 12h9a4 4 0 010 8H6z"/>
438
- </svg>
439
- </button>
440
- <button class="tb" title="Italic" data-wrap="*">
441
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
442
- <line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/>
443
- <line x1="15" y1="4" x2="9" y2="20"/>
444
- </svg>
445
- </button>
446
- <button class="tb" title="Bullet list" id="bullet-btn">
447
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
448
- <line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/>
449
- <line x1="9" y1="18" x2="20" y2="18"/>
450
- <circle cx="4" cy="6" r="1.5" fill="currentColor" stroke="none"/>
451
- <circle cx="4" cy="12" r="1.5" fill="currentColor" stroke="none"/>
452
- <circle cx="4" cy="18" r="1.5" fill="currentColor" stroke="none"/>
453
- </svg>
454
- </button>
455
- <button class="tb" title="Inline code" data-wrap="`">
456
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
457
- <polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
458
- </svg>
459
- </button>
460
- <span id="char-count"></span>
461
- </div>
462
- </div>
463
- </div>
464
- </div>
465
-
466
- <!-- Right: KB files -->
467
- <div id="right">
468
- <div class="rp-head">
469
- <span class="rp-title">Knowledge Base</span>
470
- <span id="file-count">0</span>
471
- <div class="add-wrap">
472
- <button class="add-btn" id="add-file-btn">+ Add file</button>
473
- <div class="add-tip">
474
- <strong>Add to knowledge base</strong>
475
- <i>Formats: .txt &nbsp;.md &nbsp;.pdf &nbsp;.docx</i>
476
- <i>Max 10 MB per file</i>
477
- <i>Multiple files at once</i>
478
- <i>Index rebuilds automatically</i>
479
- </div>
480
- </div>
481
- </div>
482
- <div id="file-list">
483
- <div id="file-count-line"></div>
484
- <div id="file-rows"></div>
485
- </div>
486
- </div>
487
-
488
- </div><!-- #body -->
489
- </div><!-- #app -->
490
-
491
- <input type="file" id="file-input" multiple accept=".txt,.md,.pdf,.docx,.doc">
492
- <div id="upload-overlay"><div class="upload-card"><div class="spinner"></div><p>Indexing documents…</p></div></div>
493
- <div id="toast"></div>
494
-
495
- <script>
496
- // ─── State ────────────────────────────────────────────────────
497
- const history = [];
498
- let isThinking = false;
499
-
500
- // ─── Utilities ───────────────────────────────────────────────
501
- function toast(msg, duration = 2800) {
502
- const t = document.getElementById('toast');
503
- t.textContent = msg; t.classList.add('show');
504
- setTimeout(() => t.classList.remove('show'), duration);
505
- }
506
-
507
- function md(text) {
508
- // Minimal markdown → HTML
509
- return text
510
- .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
511
- .replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>')
512
- .replace(/\*(.+?)\*/g,'<em>$1</em>')
513
- .replace(/`(.+?)`/g,'<code>$1</code>')
514
- .replace(/^•\s+(.+)/gm,'<li>$1</li>')
515
- .replace(/^-\s+(.+)/gm,'<li>$1</li>')
516
- .replace(/(<li>.*<\/li>)/s,'<ul>$1</ul>')
517
- .replace(/\n\n+/g,'</p><p>')
518
- .replace(/\n/g,'<br>')
519
- .replace(/^(.)/,'<p>$1').replace(/(.)$/,'$1</p>');
520
- }
521
-
522
- function extIcon(name) {
523
- const e = name.split('.').pop().toLowerCase();
524
- return ({pdf:'📄', docx:'📝', doc:'📝', md:'📋', txt:'📃'})[e] || '📄';
525
- }
526
-
527
- // ─── Chat ─────────────────────────────────────────────────────
528
- function addMessage(role, text, sources) {
529
- const msgs = document.getElementById('messages');
530
-
531
- // Remove empty state on first message
532
- const es = document.getElementById('empty-state');
533
- if (es) es.remove();
534
-
535
- const msg = document.createElement('div');
536
- msg.className = `msg ${role}`;
537
-
538
- if (role === 'user') {
539
- const b = document.createElement('div');
540
- b.className = 'bubble';
541
- b.textContent = text;
542
- msg.appendChild(b);
543
- } else {
544
- const b = document.createElement('div');
545
- b.className = 'bubble';
546
- b.innerHTML = md(text);
547
- // Source chips
548
- if (sources && sources.length) {
549
- const row = document.createElement('div');
550
- row.className = 'src-row';
551
- const lbl = document.createElement('span');
552
- lbl.className = 'src-lbl'; lbl.textContent = 'Source';
553
- row.appendChild(lbl);
554
- sources.forEach(s => {
555
- const chip = document.createElement('span');
556
- chip.className = 'src-chip';
557
- chip.innerHTML = `${extIcon(s)} ${s}`;
558
- row.appendChild(chip);
559
- });
560
- b.appendChild(row);
561
- }
562
- msg.appendChild(b);
563
- }
564
- msgs.appendChild(msg);
565
- msgs.scrollTop = msgs.scrollHeight;
566
- return msg;
567
- }
568
-
569
- function addTyping() {
570
- const msgs = document.getElementById('messages');
571
- const es = document.getElementById('empty-state');
572
- if (es) es.remove();
573
-
574
- const msg = document.createElement('div');
575
- msg.className = 'msg bot'; msg.id = 'typing-indicator';
576
- const b = document.createElement('div');
577
- b.className = 'bubble typing';
578
- b.innerHTML = '<span></span><span></span><span></span>';
579
- msg.appendChild(b); msgs.appendChild(msg);
580
- msgs.scrollTop = msgs.scrollHeight;
581
- }
582
-
583
- function removeTyping() {
584
- const t = document.getElementById('typing-indicator');
585
- if (t) t.remove();
586
- }
587
-
588
- async function sendMessage() {
589
- const input = document.getElementById('msg-input');
590
- const text = input.value.trim();
591
- if (!text || isThinking) return;
592
-
593
- input.value = ''; input.style.height = 'auto';
594
- isThinking = true;
595
- document.getElementById('send-btn').disabled = true;
596
- document.getElementById('char-count').textContent = '';
597
-
598
- addMessage('user', text, null);
599
- history.push({ role: 'user', content: text });
600
- addTyping();
601
-
602
- try {
603
- const res = await fetch('/api/chat', {
604
- method: 'POST',
605
- headers: { 'Content-Type': 'application/json' },
606
- body: JSON.stringify({ message: text, history: history.slice(-6) })
607
- });
608
- const data = await res.json();
609
- removeTyping();
610
- addMessage('bot', data.answer, data.sources);
611
- history.push({ role: 'assistant', content: data.answer });
612
- } catch (e) {
613
- removeTyping();
614
- addMessage('bot', 'Sorry, something went wrong. Please try again.', null);
615
- } finally {
616
- isThinking = false;
617
- document.getElementById('send-btn').disabled = false;
618
- input.focus();
619
- }
620
- }
621
-
622
- // ─── Files ────────────────────────────────────────────────────
623
- async function loadFiles() {
624
- const res = await fetch('/api/files');
625
- const data = await res.json();
626
- renderFiles(data.files, data.count);
627
- }
628
-
629
- function renderFiles(files, count) {
630
- document.getElementById('file-count').textContent = count;
631
- document.getElementById('file-count-line').textContent =
632
- count ? `${count} file${count !== 1 ? 's' : ''} indexed` : '';
633
-
634
- const rows = document.getElementById('file-rows');
635
- rows.innerHTML = '';
636
-
637
- if (!files.length) {
638
- rows.innerHTML = `
639
- <div style="text-align:center;padding:32px 12px;color:var(--muted2)">
640
- <div style="font-size:2rem;opacity:.35;margin-bottom:8px">📭</div>
641
- <div style="font-size:11.5px;line-height:1.6">No files yet.<br>Click <strong>+ Add file</strong> above.</div>
642
- </div>`;
643
- return;
644
- }
645
-
646
- files.forEach(f => {
647
- const name = f.name;
648
- const safeId = name.replace(/[^a-zA-Z0-9_-]/g, '_');
649
-
650
- const row = document.createElement('div');
651
- row.className = 'f-row'; row.id = `row-${safeId}`;
652
- row.innerHTML = `
653
- <span class="f-ico">${extIcon(name)}</span>
654
- <span class="f-name" title="${name}">${name}</span>
655
- <div class="f-actions">
656
- <button class="f-btn" title="Rename" onclick="startRename('${name}','${safeId}')">✎</button>
657
- <button class="f-btn del" title="Delete" onclick="deleteFile('${name}')">🗑</button>
658
- </div>`;
659
-
660
- const renameRow = document.createElement('div');
661
- renameRow.className = 'f-rename'; renameRow.id = `rename-${safeId}`;
662
- renameRow.innerHTML = `
663
- <input id="ri-${safeId}" value="${name}" placeholder="${name}">
664
- <button class="r-save" onclick="saveRename('${name}','${safeId}')">Save</button>
665
- <button class="r-cancel" onclick="cancelRename('${safeId}')">✕</button>`;
666
-
667
- rows.appendChild(row);
668
- rows.appendChild(renameRow);
669
- });
670
- }
671
-
672
- async function deleteFile(name) {
673
- if (!confirm(`Delete ${name}?`)) return;
674
- try {
675
- await fetch(`/api/files/${encodeURIComponent(name)}`, { method: 'DELETE' });
676
- toast(`🗑 Deleted ${name}`);
677
- loadFiles();
678
- } catch { toast('❌ Could not delete file'); }
679
- }
680
-
681
- function startRename(name, safeId) {
682
- document.getElementById(`row-${safeId}`).style.display = 'none';
683
- const rr = document.getElementById(`rename-${safeId}`);
684
- rr.classList.add('on');
685
- const inp = document.getElementById(`ri-${safeId}`);
686
- inp.focus(); inp.select();
687
- }
688
-
689
- function cancelRename(safeId) {
690
- document.getElementById(`row-${safeId}`).style.display = '';
691
- document.getElementById(`rename-${safeId}`).classList.remove('on');
692
- }
693
-
694
- async function saveRename(oldName, safeId) {
695
- const newName = document.getElementById(`ri-${safeId}`).value.trim();
696
- if (!newName || newName === oldName) { cancelRename(safeId); return; }
697
- try {
698
- const res = await fetch('/api/files/rename', {
699
- method: 'PUT',
700
- headers: { 'Content-Type': 'application/json' },
701
- body: JSON.stringify({ old_name: oldName, new_name: newName })
702
- });
703
- if (!res.ok) { const d = await res.json(); toast(`❌ ${d.detail}`); return; }
704
- toast(`✅ Renamed to ${newName}`);
705
- loadFiles();
706
- } catch { toast('❌ Could not rename file'); }
707
- }
708
-
709
- async function uploadFiles(fileList) {
710
- const overlay = document.getElementById('upload-overlay');
711
- overlay.classList.add('show');
712
- const fd = new FormData();
713
- Array.from(fileList).forEach(f => fd.append('files', f));
714
- try {
715
- const res = await fetch('/api/files/upload', { method: 'POST', body: fd });
716
- const data = await res.json();
717
- const saved = data.saved || [];
718
- const skipped = data.skipped || [];
719
- if (saved.length) toast(`✅ Uploaded: ${saved.join(', ')}`);
720
- if (skipped.length) toast(`⚠️ Skipped: ${skipped.join(', ')}`, 4000);
721
- loadFiles();
722
- } catch { toast('❌ Upload failed'); }
723
- finally { overlay.classList.remove('show'); }
724
- }
725
-
726
- // ─── Toolbar ─────────────────────────────────────────────────
727
- function wrapSelection(tag) {
728
- const t = document.getElementById('msg-input');
729
- const s = t.selectionStart, e = t.selectionEnd;
730
- if (s === e) return;
731
- const v = t.value;
732
- t.value = v.slice(0,s) + tag + v.slice(s,e) + tag + v.slice(e);
733
- t.selectionStart = s; t.selectionEnd = e + tag.length * 2;
734
- t.dispatchEvent(new Event('input', { bubbles: true }));
735
- }
736
-
737
- // ─── Init ─────────────────────────────────────────────────────
738
- async function init() {
739
- const cfg = await fetch('/api/config').then(r => r.json());
740
- document.title = cfg.name;
741
- document.getElementById('app-name').textContent = cfg.name;
742
- document.getElementById('welcome-msg').textContent = cfg.welcome;
743
-
744
- // Suggestion pills
745
- const container = document.getElementById('suggestions');
746
- cfg.quick_actions.forEach((q, i) => {
747
- const btn = document.createElement('button');
748
- btn.className = 'pill';
749
- btn.textContent = q;
750
- btn.style.animationDelay = `${i * 0.07}s`;
751
- btn.onclick = () => {
752
- const inp = document.getElementById('msg-input');
753
- inp.value = q;
754
- inp.dispatchEvent(new Event('input', { bubbles: true }));
755
- inp.focus();
756
- };
757
- container.appendChild(btn);
758
- });
759
-
760
- await loadFiles();
761
-
762
- // Event listeners
763
- const input = document.getElementById('msg-input');
764
-
765
- input.addEventListener('input', () => {
766
- input.style.height = 'auto';
767
- input.style.height = Math.min(input.scrollHeight, 140) + 'px';
768
- const len = input.value.length;
769
- const cc = document.getElementById('char-count');
770
- cc.textContent = len > 600 ? `${len}/800` : '';
771
- });
772
-
773
- input.addEventListener('keydown', e => {
774
- if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
775
- });
776
-
777
- document.getElementById('send-btn').addEventListener('click', sendMessage);
778
-
779
- document.getElementById('attach-btn').addEventListener('click', () => {
780
- document.getElementById('file-input').click();
781
- });
782
- document.getElementById('add-file-btn').addEventListener('click', () => {
783
- document.getElementById('file-input').click();
784
- });
785
- document.getElementById('file-input').addEventListener('change', e => {
786
- if (e.target.files.length) uploadFiles(e.target.files);
787
- e.target.value = '';
788
- });
789
-
790
- document.getElementById('paste-btn').addEventListener('click', async () => {
791
- try {
792
- const txt = await navigator.clipboard.readText();
793
- const t = document.getElementById('msg-input');
794
- const s = t.selectionStart;
795
- t.value = t.value.slice(0, s) + txt + t.value.slice(t.selectionEnd);
796
- t.selectionStart = t.selectionEnd = s + txt.length;
797
- t.dispatchEvent(new Event('input', { bubbles: true }));
798
- } catch { input.focus(); }
799
- });
800
-
801
- document.getElementById('bullet-btn').addEventListener('click', () => {
802
- const t = document.getElementById('msg-input');
803
- const lines = t.value.split('\n');
804
- const idx = t.value.slice(0, t.selectionStart).split('\n').length - 1;
805
- lines[idx] = '- ' + lines[idx];
806
- t.value = lines.join('\n');
807
- t.dispatchEvent(new Event('input', { bubbles: true }));
808
- });
809
-
810
- document.querySelectorAll('.tb[data-wrap]').forEach(btn => {
811
- btn.addEventListener('click', () => wrapSelection(btn.dataset.wrap));
812
- });
813
-
814
- // Drag-and-drop onto right panel
815
- document.getElementById('right').addEventListener('dragover', e => e.preventDefault());
816
- document.getElementById('right').addEventListener('drop', e => {
817
- e.preventDefault();
818
- if (e.dataTransfer.files.length) uploadFiles(e.dataTransfer.files);
819
- });
820
-
821
- // Focus input on load
822
- input.focus();
823
- }
824
-
825
- init();
826
- </script>
827
- </body>
828
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
site/index.html ADDED
@@ -0,0 +1,9 @@
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Self-Service KB Assistant</title>
5
+ </head>
6
+ <body>
7
+ <h1>Self-Service KB Assistant</h1>
8
+ </body>
9
+ </html>