Spaces:
Configuration error
Configuration error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Self-Service KB Assistant</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <style> | |
| /* ─── Reset & tokens ────────────────────────────────────────── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --bg: #F5F0E8; | |
| --surface: #FDFAF5; | |
| --border: #E2D9CE; | |
| --border2: #C9BFB3; | |
| --ink: #1E1C1A; | |
| --ink2: #4A4540; | |
| --muted: #7A7167; | |
| --muted2: #A09890; | |
| --sage: #5C7E62; | |
| --sage-h: #4A6550; | |
| --sage-bg: #EAF2EB; | |
| --sage-bg2: #D0E6D3; | |
| --rose: #B5626A; | |
| --rose-bg: #F8EDEE; | |
| --r: 10px; | |
| --r2: 7px; | |
| --r3: 5px; | |
| --sh: 0 1px 4px rgba(0,0,0,.08); | |
| --sh2: 0 4px 16px rgba(0,0,0,.12); | |
| } | |
| html, body { | |
| height: 100%; overflow: hidden; | |
| background: var(--bg); | |
| font-family: "Inter", ui-sans-serif, system-ui, sans-serif; | |
| font-size: 14px; color: var(--ink); | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* ─── Layout ────────────────────────────────────────────────── */ | |
| #app { display: flex; flex-direction: column; height: 100vh; } | |
| /* Header */ | |
| header { | |
| height: 52px; flex-shrink: 0; | |
| background: var(--surface); border-bottom: 1px solid var(--border); | |
| display: flex; align-items: center; padding: 0 20px; gap: 12px; | |
| box-shadow: var(--sh); z-index: 10; | |
| } | |
| .h-logo { | |
| width: 32px; height: 32px; border-radius: 8px; | |
| background: var(--sage); display: flex; align-items: center; | |
| justify-content: center; font-size: 16px; flex-shrink: 0; | |
| box-shadow: 0 1px 5px rgba(92,126,98,.4); | |
| } | |
| .h-name { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; } | |
| .h-sub { font-size: 11px; color: var(--muted); margin-top: 1px; } | |
| .h-badge { | |
| margin-left: auto; font-size: 10.5px; font-weight: 500; | |
| color: var(--sage); background: var(--sage-bg); | |
| border: 1px solid var(--sage-bg2); border-radius: 999px; padding: 3px 10px; | |
| } | |
| /* Body grid */ | |
| #body { | |
| display: grid; | |
| grid-template-columns: 200px 1fr 224px; | |
| flex: 1; overflow: hidden; | |
| } | |
| /* ─── Left panel ────────────────────────────────────────────── */ | |
| #left { | |
| border-right: 1px solid var(--border); | |
| background: var(--surface); | |
| display: flex; flex-direction: column; overflow: hidden; | |
| } | |
| .panel-hdr { | |
| padding: 13px 14px 10px; | |
| font-size: 10px; font-weight: 600; letter-spacing: .08em; | |
| text-transform: uppercase; color: var(--muted2); | |
| border-bottom: 1px solid var(--border); | |
| display: flex; align-items: center; gap: 6px; flex-shrink: 0; | |
| } | |
| .panel-hdr::before { | |
| content: ""; width: 5px; height: 5px; | |
| background: var(--sage); border-radius: 50%; flex-shrink: 0; | |
| } | |
| #suggestions { overflow-y: auto; padding: 10px 10px 16px; flex: 1; } | |
| .pill { | |
| width: 100%; display: flex; align-items: flex-start; gap: 8px; | |
| text-align: left; background: var(--surface); | |
| border: 1px solid var(--border); border-radius: var(--r); | |
| padding: 9px 11px; font-size: 12.5px; color: var(--ink2); | |
| cursor: pointer; margin-bottom: 7px; line-height: 1.45; | |
| transition: all .15s; opacity: 0; | |
| animation: fadeUp .3s ease forwards; | |
| } | |
| .pill::before { content: "→"; color: var(--sage); flex-shrink: 0; transition: transform .15s; } | |
| .pill:hover { background: var(--sage-bg); border-color: var(--sage); color: var(--sage-h); transform: translateX(2px); } | |
| .pill:hover::before { transform: translateX(2px); } | |
| @keyframes fadeUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } } | |
| /* ─── Centre: chat ───────────────────────────────────────────── */ | |
| #centre { | |
| display: flex; flex-direction: column; overflow: hidden; | |
| background: var(--bg); | |
| } | |
| #messages { | |
| flex: 1; overflow-y: auto; padding: 20px 20px 12px; | |
| display: flex; flex-direction: column; gap: 14px; | |
| } | |
| /* Empty state */ | |
| #empty-state { | |
| flex: 1; display: flex; flex-direction: column; | |
| align-items: center; justify-content: center; | |
| gap: 10px; color: var(--muted); text-align: center; | |
| padding: 40px 20px; | |
| } | |
| .es-icon { font-size: 2.6rem; opacity: .35; } | |
| .es-title { font-size: 14px; font-weight: 500; color: var(--ink2); } | |
| .es-sub { font-size: 12px; line-height: 1.6; max-width: 260px; } | |
| /* Bubbles */ | |
| .msg { display: flex; flex-direction: column; animation: bubIn .2s ease; } | |
| @keyframes bubIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } } | |
| .msg.user { align-items: flex-end; } | |
| .msg.bot { align-items: flex-start; } | |
| .bubble { | |
| padding: 10px 14px; max-width: 74%; line-height: 1.65; font-size: 13.5px; | |
| } | |
| .msg.user .bubble { | |
| background: var(--sage); color: #fff; | |
| border-radius: var(--r) var(--r) 3px var(--r); | |
| box-shadow: 0 2px 8px rgba(92,126,98,.28); | |
| } | |
| .msg.bot .bubble { | |
| background: var(--surface); color: var(--ink); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r) var(--r) var(--r) 3px; | |
| box-shadow: var(--sh); | |
| } | |
| /* Markdown-ish */ | |
| .bubble p { margin-bottom: .5em; } | |
| .bubble p:last-child { margin-bottom: 0; } | |
| .bubble ul, .bubble ol { padding-left: 1.3em; margin: .4em 0; } | |
| .bubble li { margin-bottom: .25em; } | |
| .bubble strong { font-weight: 600; } | |
| .bubble code { background: rgba(0,0,0,.07); border-radius: 3px; padding: 1px 5px; font-family: monospace; font-size: .92em; } | |
| /* Source chips */ | |
| .src-row { | |
| display: flex; align-items: center; flex-wrap: wrap; gap: 5px; | |
| margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); | |
| } | |
| .src-lbl { | |
| font-size: 9.5px; font-weight: 700; letter-spacing: .08em; | |
| text-transform: uppercase; color: var(--muted2); flex-shrink: 0; | |
| } | |
| .src-chip { | |
| display: inline-flex; align-items: center; gap: 4px; | |
| background: var(--sage-bg); border: 1px solid var(--sage-bg2); | |
| border-radius: 999px; padding: 2px 10px 2px 7px; | |
| font-size: 11px; font-weight: 500; color: var(--sage-h); | |
| animation: chipIn .2s ease; transition: background .13s; | |
| } | |
| .src-chip:hover { background: var(--sage-bg2); } | |
| @keyframes chipIn { from { opacity:0; transform:scale(.9) translateY(3px); } to { opacity:1; transform:scale(1) translateY(0); } } | |
| /* Typing indicator */ | |
| .typing { display: flex; gap: 5px; align-items: center; padding: 12px 14px; } | |
| .typing span { | |
| width: 7px; height: 7px; border-radius: 50%; background: var(--border2); | |
| animation: bounce .9s infinite ease; | |
| } | |
| .typing span:nth-child(2) { animation-delay: .15s; } | |
| .typing span:nth-child(3) { animation-delay: .30s; } | |
| @keyframes bounce { 0%,80%,100% { transform:translateY(0); } 40% { transform:translateY(-6px); } } | |
| /* ─── Input area ─────────────────────────────────────────────── */ | |
| #input-area { | |
| flex-shrink: 0; background: var(--surface); | |
| border-top: 1px solid var(--border); padding: 10px 14px 10px; | |
| } | |
| #input-card { | |
| border: 1.5px solid var(--border); border-radius: var(--r); | |
| background: var(--bg); overflow: hidden; | |
| transition: border-color .18s, box-shadow .18s; | |
| } | |
| #input-card:focus-within { | |
| border-color: var(--sage); | |
| box-shadow: 0 0 0 3px rgba(92,126,98,.12); | |
| } | |
| #input-row { display: flex; align-items: flex-end; } | |
| #msg-input { | |
| flex: 1; border: none; background: transparent; resize: none; | |
| padding: 11px 13px; font-size: 13.5px; font-family: inherit; | |
| color: var(--ink); line-height: 1.55; outline: none; | |
| min-height: 44px; max-height: 140px; | |
| } | |
| #msg-input::placeholder { color: var(--muted2); } | |
| #send-btn { | |
| margin: 0 7px 7px 0; align-self: flex-end; | |
| width: 34px; height: 34px; border-radius: var(--r2); border: none; | |
| background: var(--sage); color: #fff; cursor: pointer; | |
| display: flex; align-items: center; justify-content: center; | |
| box-shadow: 0 1px 4px rgba(92,126,98,.3); | |
| transition: background .14s, transform .1s; flex-shrink: 0; | |
| } | |
| #send-btn:hover { background: var(--sage-h); transform: translateY(-1px); } | |
| #send-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } | |
| #send-btn svg { width: 16px; height: 16px; pointer-events: none; } | |
| /* Toolbar */ | |
| #toolbar { | |
| display: flex; align-items: center; gap: 1px; | |
| padding: 4px 9px 6px; background: var(--bg); | |
| border-top: 1px solid var(--border); | |
| } | |
| .tb { | |
| width: 26px; height: 26px; border: none; background: none; | |
| border-radius: var(--r3); cursor: pointer; color: var(--muted); | |
| display: flex; align-items: center; justify-content: center; | |
| transition: background .12s, color .12s; position: relative; | |
| } | |
| .tb svg { width: 13px; height: 13px; pointer-events: none; } | |
| .tb:hover { background: var(--sage-bg); color: var(--sage); } | |
| .tb-sep { width: 1px; height: 12px; background: var(--border2); margin: 0 3px; flex-shrink: 0; } | |
| .tb[title]::after { | |
| content: attr(title); | |
| position: absolute; bottom: calc(100% + 6px); left: 50%; | |
| transform: translateX(-50%); | |
| background: var(--ink); color: #fff; | |
| font-size: 10px; padding: 3px 7px; border-radius: 4px; | |
| white-space: nowrap; pointer-events: none; | |
| opacity: 0; transition: opacity .12s; z-index: 99; | |
| } | |
| .tb:hover[title]::after { opacity: 1; } | |
| #char-count { margin-left: auto; font-size: 10px; color: var(--muted2); } | |
| /* ─── Right panel: KB files ──────────────────────────────────── */ | |
| #right { | |
| border-left: 1px solid var(--border); | |
| background: var(--surface); | |
| display: flex; flex-direction: column; overflow: hidden; | |
| } | |
| .rp-head { | |
| padding: 12px 14px 11px; border-bottom: 1px solid var(--border); | |
| flex-shrink: 0; display: flex; align-items: center; gap: 0; | |
| } | |
| .rp-title { | |
| font-size: 10px; font-weight: 600; letter-spacing: .08em; | |
| text-transform: uppercase; color: var(--muted2); | |
| display: flex; align-items: center; gap: 6px; | |
| } | |
| .rp-title::before { | |
| content: ""; width: 5px; height: 5px; | |
| background: var(--sage); border-radius: 50%; | |
| } | |
| #file-count { | |
| font-size: 10px; font-weight: 600; color: var(--sage); | |
| background: var(--sage-bg); border: 1px solid var(--sage-bg2); | |
| border-radius: 999px; padding: 1px 7px; margin-left: 7px; | |
| } | |
| /* Add file button */ | |
| .add-wrap { position: relative; margin-left: auto; } | |
| .add-btn { | |
| display: flex; align-items: center; gap: 4px; | |
| background: var(--sage-bg); border: 1px solid var(--sage-bg2); | |
| color: var(--sage-h); border-radius: var(--r2); | |
| padding: 5px 11px; font-size: 12px; font-weight: 600; | |
| cursor: pointer; transition: all .14s; | |
| } | |
| .add-btn:hover { background: var(--sage); color: #fff; border-color: var(--sage); box-shadow: 0 1px 6px rgba(92,126,98,.3); } | |
| .add-tip { | |
| display: none; position: absolute; top: calc(100% + 7px); right: 0; | |
| background: var(--ink); color: #f5f5f0; | |
| border-radius: var(--r2); padding: 11px 14px; | |
| font-size: 11.5px; line-height: 1.7; min-width: 210px; | |
| box-shadow: var(--sh2); z-index: 60; | |
| } | |
| .add-tip strong { display: block; margin-bottom: 5px; color: #fff; font-size: 12px; } | |
| .add-tip i { display: flex; align-items: center; gap: 6px; opacity: .85; font-style: normal; } | |
| .add-tip i::before { content: "·"; color: #9ecfa4; } | |
| .add-tip::before { | |
| content: ""; position: absolute; top: -5px; right: 13px; | |
| border: 5px solid transparent; border-top: 0; | |
| border-bottom-color: var(--ink); | |
| } | |
| .add-wrap:hover .add-tip { display: block; } | |
| #file-input { display: none; } | |
| /* File list */ | |
| #file-list { overflow-y: auto; padding: 4px 8px 16px; flex: 1; } | |
| #file-count-line { font-size: 10.5px; color: var(--muted2); padding: 8px 6px 4px; } | |
| .f-row { | |
| display: flex; align-items: center; gap: 7px; | |
| padding: 7px 8px; border-radius: var(--r2); | |
| transition: background .12s; position: relative; | |
| } | |
| .f-row:hover { background: var(--bg); } | |
| .f-ico { font-size: 13px; opacity: .75; flex-shrink: 0; } | |
| .f-name { | |
| flex: 1; font-size: 12px; color: var(--ink2); | |
| overflow: hidden; text-overflow: ellipsis; white-space: nowrap; | |
| } | |
| .f-actions { | |
| display: none; gap: 1px; align-items: center; flex-shrink: 0; | |
| } | |
| .f-row:hover .f-actions { display: flex; } | |
| .f-btn { | |
| background: none; border: none; cursor: pointer; | |
| font-size: 12px; padding: 3px 5px; border-radius: 4px; | |
| color: var(--muted); transition: background .11s, color .11s; | |
| } | |
| .f-btn:hover { background: var(--border); color: var(--ink); } | |
| .f-btn.del:hover { background: var(--rose-bg); color: var(--rose); } | |
| /* Rename row */ | |
| .f-rename { | |
| display: none; padding: 5px 8px; gap: 5px; align-items: center; | |
| } | |
| .f-rename.on { display: flex; } | |
| .f-rename input { | |
| flex: 1; border: 1.5px solid var(--sage); border-radius: var(--r3); | |
| padding: 4px 8px; font-size: 11px; background: var(--bg); | |
| color: var(--ink); outline: none; font-family: inherit; | |
| } | |
| .f-rename .r-save { | |
| background: var(--sage); color: #fff; border: none; | |
| border-radius: var(--r3); padding: 4px 9px; | |
| font-size: 11px; font-weight: 600; cursor: pointer; | |
| } | |
| .f-rename .r-cancel { | |
| background: none; border: 1px solid var(--border); color: var(--muted); | |
| border-radius: var(--r3); padding: 4px 7px; font-size: 11px; cursor: pointer; | |
| } | |
| /* ─── Toast ─────────────────────────────────────────────────── */ | |
| #toast { | |
| position: fixed; bottom: 20px; left: 50%; | |
| transform: translateX(-50%) translateY(8px); | |
| background: var(--ink); color: #fff; | |
| border-radius: var(--r2); padding: 8px 18px; | |
| font-size: 12px; box-shadow: var(--sh2); | |
| opacity: 0; pointer-events: none; | |
| transition: opacity .2s, transform .2s; z-index: 999; white-space: nowrap; | |
| } | |
| #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } | |
| /* ─── Upload progress overlay ───────────────────────────────── */ | |
| #upload-overlay { | |
| display: none; position: fixed; inset: 0; | |
| background: rgba(30,28,26,.45); z-index: 998; | |
| align-items: center; justify-content: center; | |
| } | |
| #upload-overlay.show { display: flex; } | |
| .upload-card { | |
| background: var(--surface); border-radius: var(--r); | |
| padding: 28px 32px; text-align: center; box-shadow: var(--sh2); | |
| display: flex; flex-direction: column; align-items: center; gap: 10px; | |
| } | |
| .upload-card .spinner { | |
| width: 30px; height: 30px; border: 3px solid var(--border); | |
| border-top-color: var(--sage); border-radius: 50%; | |
| animation: spin .7s linear infinite; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .upload-card p { font-size: 13px; color: var(--muted); } | |
| /* ─── Scrollbar ─────────────────────────────────────────────── */ | |
| * { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; } | |
| ::-webkit-scrollbar { width: 4px; } | |
| ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; } | |
| ::selection { background: rgba(92,126,98,.2); } | |
| /* ─── Mobile ────────────────────────────────────────────────── */ | |
| @media (max-width: 860px) { | |
| #body { grid-template-columns: 1fr; } | |
| #left, #right { display: none; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <!-- Header --> | |
| <header> | |
| <div class="h-logo">🤖</div> | |
| <div> | |
| <div class="h-name" id="app-name">KB Assistant</div> | |
| <div class="h-sub">Search the knowledge base and get answers in plain language</div> | |
| </div> | |
| <span class="h-badge">MVP · AI-powered</span> | |
| </header> | |
| <!-- 3-col body --> | |
| <div id="body"> | |
| <!-- Left: suggestions --> | |
| <div id="left"> | |
| <div class="panel-hdr">Try asking</div> | |
| <div id="suggestions"></div> | |
| </div> | |
| <!-- Centre: chat --> | |
| <div id="centre"> | |
| <div id="messages"> | |
| <div id="empty-state"> | |
| <div class="es-icon">💬</div> | |
| <div class="es-title">Ask me anything</div> | |
| <div class="es-sub" id="welcome-msg">Search the knowledge base and get an answer in plain language.</div> | |
| </div> | |
| </div> | |
| <!-- Input area --> | |
| <div id="input-area"> | |
| <div id="input-card"> | |
| <div id="input-row"> | |
| <textarea id="msg-input" placeholder="Ask a question…" rows="1"></textarea> | |
| <button id="send-btn" title="Send (Enter)"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"> | |
| <line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <div id="toolbar"> | |
| <button class="tb" title="Attach file" id="attach-btn"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"> | |
| <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"/> | |
| </svg> | |
| </button> | |
| <button class="tb" title="Paste from clipboard" id="paste-btn"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"> | |
| <rect x="8" y="2" width="8" height="4" rx="1"/> | |
| <path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"/> | |
| </svg> | |
| </button> | |
| <div class="tb-sep"></div> | |
| <button class="tb" title="Bold" data-wrap="**"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"> | |
| <path d="M6 4h8a4 4 0 010 8H6zM6 12h9a4 4 0 010 8H6z"/> | |
| </svg> | |
| </button> | |
| <button class="tb" title="Italic" data-wrap="*"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"> | |
| <line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/> | |
| <line x1="15" y1="4" x2="9" y2="20"/> | |
| </svg> | |
| </button> | |
| <button class="tb" title="Bullet list" id="bullet-btn"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"> | |
| <line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/> | |
| <line x1="9" y1="18" x2="20" y2="18"/> | |
| <circle cx="4" cy="6" r="1.5" fill="currentColor" stroke="none"/> | |
| <circle cx="4" cy="12" r="1.5" fill="currentColor" stroke="none"/> | |
| <circle cx="4" cy="18" r="1.5" fill="currentColor" stroke="none"/> | |
| </svg> | |
| </button> | |
| <button class="tb" title="Inline code" data-wrap="`"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"> | |
| <polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/> | |
| </svg> | |
| </button> | |
| <span id="char-count"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right: KB files --> | |
| <div id="right"> | |
| <div class="rp-head"> | |
| <span class="rp-title">Knowledge Base</span> | |
| <span id="file-count">0</span> | |
| <div class="add-wrap"> | |
| <button class="add-btn" id="add-file-btn">+ Add file</button> | |
| <div class="add-tip"> | |
| <strong>Add to knowledge base</strong> | |
| <i>Formats: .txt .md .pdf .docx</i> | |
| <i>Max 10 MB per file</i> | |
| <i>Multiple files at once</i> | |
| <i>Index rebuilds automatically</i> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="file-list"> | |
| <div id="file-count-line"></div> | |
| <div id="file-rows"></div> | |
| </div> | |
| </div> | |
| </div><!-- #body --> | |
| </div><!-- #app --> | |
| <input type="file" id="file-input" multiple accept=".txt,.md,.pdf,.docx,.doc"> | |
| <div id="upload-overlay"><div class="upload-card"><div class="spinner"></div><p>Indexing documents…</p></div></div> | |
| <div id="toast"></div> | |
| <script> | |
| // ─── State ──────────────────────────────────────────────────── | |
| const history = []; | |
| let isThinking = false; | |
| // ─── Utilities ─────────────────────────────────────────────── | |
| function toast(msg, duration = 2800) { | |
| const t = document.getElementById('toast'); | |
| t.textContent = msg; t.classList.add('show'); | |
| setTimeout(() => t.classList.remove('show'), duration); | |
| } | |
| function md(text) { | |
| // Minimal markdown → HTML | |
| return text | |
| .replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>') | |
| .replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>') | |
| .replace(/\*(.+?)\*/g,'<em>$1</em>') | |
| .replace(/`(.+?)`/g,'<code>$1</code>') | |
| .replace(/^•\s+(.+)/gm,'<li>$1</li>') | |
| .replace(/^-\s+(.+)/gm,'<li>$1</li>') | |
| .replace(/(<li>.*<\/li>)/s,'<ul>$1</ul>') | |
| .replace(/\n\n+/g,'</p><p>') | |
| .replace(/\n/g,'<br>') | |
| .replace(/^(.)/,'<p>$1').replace(/(.)$/,'$1</p>'); | |
| } | |
| function extIcon(name) { | |
| const e = name.split('.').pop().toLowerCase(); | |
| return ({pdf:'📄', docx:'📝', doc:'📝', md:'📋', txt:'📃'})[e] || '📄'; | |
| } | |
| // ─── Chat ───────────────────────────────────────────────────── | |
| function addMessage(role, text, sources) { | |
| const msgs = document.getElementById('messages'); | |
| // Remove empty state on first message | |
| const es = document.getElementById('empty-state'); | |
| if (es) es.remove(); | |
| const msg = document.createElement('div'); | |
| msg.className = `msg ${role}`; | |
| if (role === 'user') { | |
| const b = document.createElement('div'); | |
| b.className = 'bubble'; | |
| b.textContent = text; | |
| msg.appendChild(b); | |
| } else { | |
| const b = document.createElement('div'); | |
| b.className = 'bubble'; | |
| b.innerHTML = md(text); | |
| // Source chips | |
| if (sources && sources.length) { | |
| const row = document.createElement('div'); | |
| row.className = 'src-row'; | |
| const lbl = document.createElement('span'); | |
| lbl.className = 'src-lbl'; lbl.textContent = 'Source'; | |
| row.appendChild(lbl); | |
| sources.forEach(s => { | |
| const chip = document.createElement('span'); | |
| chip.className = 'src-chip'; | |
| chip.innerHTML = `${extIcon(s)} ${s}`; | |
| row.appendChild(chip); | |
| }); | |
| b.appendChild(row); | |
| } | |
| msg.appendChild(b); | |
| } | |
| msgs.appendChild(msg); | |
| msgs.scrollTop = msgs.scrollHeight; | |
| return msg; | |
| } | |
| function addTyping() { | |
| const msgs = document.getElementById('messages'); | |
| const es = document.getElementById('empty-state'); | |
| if (es) es.remove(); | |
| const msg = document.createElement('div'); | |
| msg.className = 'msg bot'; msg.id = 'typing-indicator'; | |
| const b = document.createElement('div'); | |
| b.className = 'bubble typing'; | |
| b.innerHTML = '<span></span><span></span><span></span>'; | |
| msg.appendChild(b); msgs.appendChild(msg); | |
| msgs.scrollTop = msgs.scrollHeight; | |
| } | |
| function removeTyping() { | |
| const t = document.getElementById('typing-indicator'); | |
| if (t) t.remove(); | |
| } | |
| async function sendMessage() { | |
| const input = document.getElementById('msg-input'); | |
| const text = input.value.trim(); | |
| if (!text || isThinking) return; | |
| input.value = ''; input.style.height = 'auto'; | |
| isThinking = true; | |
| document.getElementById('send-btn').disabled = true; | |
| document.getElementById('char-count').textContent = ''; | |
| addMessage('user', text, null); | |
| history.push({ role: 'user', content: text }); | |
| addTyping(); | |
| try { | |
| const res = await fetch('/api/chat', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ message: text, history: history.slice(-6) }) | |
| }); | |
| const data = await res.json(); | |
| removeTyping(); | |
| addMessage('bot', data.answer, data.sources); | |
| history.push({ role: 'assistant', content: data.answer }); | |
| } catch (e) { | |
| removeTyping(); | |
| addMessage('bot', 'Sorry, something went wrong. Please try again.', null); | |
| } finally { | |
| isThinking = false; | |
| document.getElementById('send-btn').disabled = false; | |
| input.focus(); | |
| } | |
| } | |
| // ─── Files ──────────────────────────────────────────────────── | |
| async function loadFiles() { | |
| const res = await fetch('/api/files'); | |
| const data = await res.json(); | |
| renderFiles(data.files, data.count); | |
| } | |
| function renderFiles(files, count) { | |
| document.getElementById('file-count').textContent = count; | |
| document.getElementById('file-count-line').textContent = | |
| count ? `${count} file${count !== 1 ? 's' : ''} indexed` : ''; | |
| const rows = document.getElementById('file-rows'); | |
| rows.innerHTML = ''; | |
| if (!files.length) { | |
| rows.innerHTML = ` | |
| <div style="text-align:center;padding:32px 12px;color:var(--muted2)"> | |
| <div style="font-size:2rem;opacity:.35;margin-bottom:8px">📭</div> | |
| <div style="font-size:11.5px;line-height:1.6">No files yet.<br>Click <strong>+ Add file</strong> above.</div> | |
| </div>`; | |
| return; | |
| } | |
| files.forEach(f => { | |
| const name = f.name; | |
| const safeId = name.replace(/[^a-zA-Z0-9_-]/g, '_'); | |
| const row = document.createElement('div'); | |
| row.className = 'f-row'; row.id = `row-${safeId}`; | |
| row.innerHTML = ` | |
| <span class="f-ico">${extIcon(name)}</span> | |
| <span class="f-name" title="${name}">${name}</span> | |
| <div class="f-actions"> | |
| <button class="f-btn" title="Rename" onclick="startRename('${name}','${safeId}')">✎</button> | |
| <button class="f-btn del" title="Delete" onclick="deleteFile('${name}')">🗑</button> | |
| </div>`; | |
| const renameRow = document.createElement('div'); | |
| renameRow.className = 'f-rename'; renameRow.id = `rename-${safeId}`; | |
| renameRow.innerHTML = ` | |
| <input id="ri-${safeId}" value="${name}" placeholder="${name}"> | |
| <button class="r-save" onclick="saveRename('${name}','${safeId}')">Save</button> | |
| <button class="r-cancel" onclick="cancelRename('${safeId}')">✕</button>`; | |
| rows.appendChild(row); | |
| rows.appendChild(renameRow); | |
| }); | |
| } | |
| async function deleteFile(name) { | |
| if (!confirm(`Delete ${name}?`)) return; | |
| try { | |
| await fetch(`/api/files/${encodeURIComponent(name)}`, { method: 'DELETE' }); | |
| toast(`🗑 Deleted ${name}`); | |
| loadFiles(); | |
| } catch { toast('❌ Could not delete file'); } | |
| } | |
| function startRename(name, safeId) { | |
| document.getElementById(`row-${safeId}`).style.display = 'none'; | |
| const rr = document.getElementById(`rename-${safeId}`); | |
| rr.classList.add('on'); | |
| const inp = document.getElementById(`ri-${safeId}`); | |
| inp.focus(); inp.select(); | |
| } | |
| function cancelRename(safeId) { | |
| document.getElementById(`row-${safeId}`).style.display = ''; | |
| document.getElementById(`rename-${safeId}`).classList.remove('on'); | |
| } | |
| async function saveRename(oldName, safeId) { | |
| const newName = document.getElementById(`ri-${safeId}`).value.trim(); | |
| if (!newName || newName === oldName) { cancelRename(safeId); return; } | |
| try { | |
| const res = await fetch('/api/files/rename', { | |
| method: 'PUT', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ old_name: oldName, new_name: newName }) | |
| }); | |
| if (!res.ok) { const d = await res.json(); toast(`❌ ${d.detail}`); return; } | |
| toast(`✅ Renamed to ${newName}`); | |
| loadFiles(); | |
| } catch { toast('❌ Could not rename file'); } | |
| } | |
| async function uploadFiles(fileList) { | |
| const overlay = document.getElementById('upload-overlay'); | |
| overlay.classList.add('show'); | |
| const fd = new FormData(); | |
| Array.from(fileList).forEach(f => fd.append('files', f)); | |
| try { | |
| const res = await fetch('/api/files/upload', { method: 'POST', body: fd }); | |
| const data = await res.json(); | |
| const saved = data.saved || []; | |
| const skipped = data.skipped || []; | |
| if (saved.length) toast(`✅ Uploaded: ${saved.join(', ')}`); | |
| if (skipped.length) toast(`⚠️ Skipped: ${skipped.join(', ')}`, 4000); | |
| loadFiles(); | |
| } catch { toast('❌ Upload failed'); } | |
| finally { overlay.classList.remove('show'); } | |
| } | |
| // ─── Toolbar ───────────────────────────────────────────────── | |
| function wrapSelection(tag) { | |
| const t = document.getElementById('msg-input'); | |
| const s = t.selectionStart, e = t.selectionEnd; | |
| if (s === e) return; | |
| const v = t.value; | |
| t.value = v.slice(0,s) + tag + v.slice(s,e) + tag + v.slice(e); | |
| t.selectionStart = s; t.selectionEnd = e + tag.length * 2; | |
| t.dispatchEvent(new Event('input', { bubbles: true })); | |
| } | |
| // ─── Init ───────────────────────────────────────────────────── | |
| async function init() { | |
| const cfg = await fetch('/api/config').then(r => r.json()); | |
| document.title = cfg.name; | |
| document.getElementById('app-name').textContent = cfg.name; | |
| document.getElementById('welcome-msg').textContent = cfg.welcome; | |
| // Suggestion pills | |
| const container = document.getElementById('suggestions'); | |
| cfg.quick_actions.forEach((q, i) => { | |
| const btn = document.createElement('button'); | |
| btn.className = 'pill'; | |
| btn.textContent = q; | |
| btn.style.animationDelay = `${i * 0.07}s`; | |
| btn.onclick = () => { | |
| const inp = document.getElementById('msg-input'); | |
| inp.value = q; | |
| inp.dispatchEvent(new Event('input', { bubbles: true })); | |
| inp.focus(); | |
| }; | |
| container.appendChild(btn); | |
| }); | |
| await loadFiles(); | |
| // Event listeners | |
| const input = document.getElementById('msg-input'); | |
| input.addEventListener('input', () => { | |
| input.style.height = 'auto'; | |
| input.style.height = Math.min(input.scrollHeight, 140) + 'px'; | |
| const len = input.value.length; | |
| const cc = document.getElementById('char-count'); | |
| cc.textContent = len > 600 ? `${len}/800` : ''; | |
| }); | |
| input.addEventListener('keydown', e => { | |
| if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } | |
| }); | |
| document.getElementById('send-btn').addEventListener('click', sendMessage); | |
| document.getElementById('attach-btn').addEventListener('click', () => { | |
| document.getElementById('file-input').click(); | |
| }); | |
| document.getElementById('add-file-btn').addEventListener('click', () => { | |
| document.getElementById('file-input').click(); | |
| }); | |
| document.getElementById('file-input').addEventListener('change', e => { | |
| if (e.target.files.length) uploadFiles(e.target.files); | |
| e.target.value = ''; | |
| }); | |
| document.getElementById('paste-btn').addEventListener('click', async () => { | |
| try { | |
| const txt = await navigator.clipboard.readText(); | |
| const t = document.getElementById('msg-input'); | |
| const s = t.selectionStart; | |
| t.value = t.value.slice(0, s) + txt + t.value.slice(t.selectionEnd); | |
| t.selectionStart = t.selectionEnd = s + txt.length; | |
| t.dispatchEvent(new Event('input', { bubbles: true })); | |
| } catch { input.focus(); } | |
| }); | |
| document.getElementById('bullet-btn').addEventListener('click', () => { | |
| const t = document.getElementById('msg-input'); | |
| const lines = t.value.split('\n'); | |
| const idx = t.value.slice(0, t.selectionStart).split('\n').length - 1; | |
| lines[idx] = '- ' + lines[idx]; | |
| t.value = lines.join('\n'); | |
| t.dispatchEvent(new Event('input', { bubbles: true })); | |
| }); | |
| document.querySelectorAll('.tb[data-wrap]').forEach(btn => { | |
| btn.addEventListener('click', () => wrapSelection(btn.dataset.wrap)); | |
| }); | |
| // Drag-and-drop onto right panel | |
| document.getElementById('right').addEventListener('dragover', e => e.preventDefault()); | |
| document.getElementById('right').addEventListener('drop', e => { | |
| e.preventDefault(); | |
| if (e.dataTransfer.files.length) uploadFiles(e.dataTransfer.files); | |
| }); | |
| // Focus input on load | |
| input.focus(); | |
| } | |
| init(); | |
| </script> | |
| </body> | |
| </html> | |