Update app.py

app.py

@@ -543,17 +543,54 @@ def chat_respond(message: str, history: list) -> str:
 # -----------------------------
 
 def list_kb_files() -> str:
+    """Return an HTML file table with per-row delete buttons."""
     patterns = ["*.txt", "*.md", "*.pdf", "*.docx", "*.doc"]
     paths: List[str] = []
     for pat in patterns:
         paths.extend(glob.glob(os.path.join(KB_DIR, pat)))
     paths = sorted(paths)
+
     if not paths:
-        return "_No files yet. Upload documents to get started._"
-    rows = ["| File | Size |", "|------|------|"]
+        return (
+            "<div style='text-align:center;padding:28px 16px;color:var(--muted,#7a7167)'>"
+            "<div style='font-size:2rem;margin-bottom:8px'>📭</div>"
+            "<div style='font-size:.85rem'>No files yet.<br>Upload documents to get started.</div>"
+            "</div>"
+        )
+
+    ext_icons = {".pdf": "📄", ".docx": "📝", ".doc": "📝", ".md": "📋", ".txt": "📃"}
+    rows_html = ""
     for p in paths:
-        rows.append(f"| {os.path.basename(p)} | {os.path.getsize(p)/1024:.1f} KB |")
-    return "\n".join(rows)
+        name = os.path.basename(p)
+        ext  = os.path.splitext(name)[1].lower()
+        icon = ext_icons.get(ext, "📄")
+        size = os.path.getsize(p) / 1024
+        size_str = f"{size:.0f} KB" if size < 1024 else f"{size/1024:.1f} MB"
+        rows_html += (
+            f"<tr>"
+            f"<td style='padding:8px 10px;border-bottom:1px solid var(--stone,#e8e2d9);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap'>"
+            f"<span style='margin-right:6px'>{icon}</span>"
+            f"<span title='{name}' style='font-size:.82rem;color:var(--ink,#2d2d2d)'>{name}</span>"
+            f"</td>"
+            f"<td style='padding:8px 6px;border-bottom:1px solid var(--stone,#e8e2d9);font-size:.78rem;color:var(--muted,#7a7167);white-space:nowrap'>{size_str}</td>"
+            f"<td style='padding:8px 6px;border-bottom:1px solid var(--stone,#e8e2d9);text-align:right'>"
+            f"<button onclick='(function(){{var t=document.querySelector(\"#delete-input textarea, #delete-input input\");if(t){{t.value=\"{name}\";t.dispatchEvent(new Event(\"input\",{{bubbles:true}}));}}var b=document.querySelector(\"#delete-btn\");if(b)b.click();}})();' "
+            f"style='background:none;border:none;cursor:pointer;color:var(--rose,#c0717a);font-size:.85rem;padding:2px 4px;border-radius:4px;transition:background .15s' "
+            f"title='Delete {name}' onmouseover='this.style.background=\"var(--rose-l,#f5e6e8)\"' onmouseout='this.style.background=\"none\"'>🗑</button>"
+            f"</td>"
+            f"</tr>"
+        )
+
+    return (
+        f"<table style='width:100%;border-collapse:collapse;font-size:.82rem'>"
+        f"<thead><tr>"
+        f"<th style='padding:7px 10px;background:var(--sand,#f5f0e8);text-align:left;font-weight:600;font-size:.75rem;color:var(--muted,#7a7167);border-bottom:1px solid var(--stone,#e8e2d9)'>File</th>"
+        f"<th style='padding:7px 6px;background:var(--sand,#f5f0e8);text-align:left;font-weight:600;font-size:.75rem;color:var(--muted,#7a7167);border-bottom:1px solid var(--stone,#e8e2d9)'>Size</th>"
+        f"<th style='padding:7px 6px;background:var(--sand,#f5f0e8);border-bottom:1px solid var(--stone,#e8e2d9)'></th>"
+        f"</tr></thead>"
+        f"<tbody>{rows_html}</tbody>"
+        f"</table>"
+    )
 
 
 def upload_kb_files(files) -> Tuple[str, str]:
@@ -610,307 +647,239 @@ def delete_kb_file(filename: str) -> Tuple[str, str]:
 
 
 # -----------------------------
-# GRADIO UI  —  Single-page layout
-# Styles injected via gr.HTML to stay compatible with all Gradio versions.
+# GRADIO UI
 # -----------------------------
 
 STYLE_HTML = """
 <style>
-/* ── Design tokens: soft, warm palette ───────────────── */
+/* ── Tokens ───────────────────────────── */
 :root {
-  --sage:   #6b8f71;   /* soft sage green  — primary accent  */
-  --sage-l: #e8f0e9;   /* sage tint        — hover fill      */
-  --sage-d: #4f6e55;   /* darker sage      — active state    */
-  --sand:   #f5f0e8;   /* warm sand        — page background */
-  --cream:  #fdfaf5;   /* cream            — surface / cards */
-  --stone:  #e8e2d9;   /* light stone      — borders         */
-  --ink:    #2d2d2d;   /* near-black       — primary text    */
-  --muted:  #7a7167;   /* warm grey        — secondary text  */
-  --rose:   #c0717a;   /* muted rose       — danger / delete */
-  --rose-l: #f5e6e8;   /* rose tint        — danger hover    */
-  --radius: 14px;
-  --shadow: 0 2px 10px rgba(0,0,0,.07);
-  --shadow-md: 0 4px 20px rgba(0,0,0,.10);
-}
-
-/* ── Base ─────────────────────────────────────────────── */
-body, .gradio-container {
-  background: var(--sand) !important;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
-  color: var(--ink) !important;
-}
-.gradio-container { max-width: 1100px !important; margin: 0 auto !important; }
-
-/* ── Header ───────────────────────────────────────────── */
-.kb-header {
-  background: var(--cream);
-  border-bottom: 1px solid var(--stone);
-  padding: 18px 24px 14px;
-  display: flex;
-  align-items: center;
-  gap: 14px;
-}
-.kb-header-icon {
-  width: 42px; height: 42px;
-  background: var(--sage);
-  border-radius: 12px;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 1.3rem; flex-shrink: 0;
+  --sage:#6b8f71; --sage-l:#e8f0e9; --sage-d:#4f6e55;
+  --sand:#f5f0e8; --cream:#fdfaf5; --stone:#e8e2d9;
+  --ink:#2d2d2d; --muted:#7a7167;
+  --rose:#c0717a; --rose-l:#f5e6e8;
+  --radius:14px; --shadow:0 2px 10px rgba(0,0,0,.07);
 }
-.kb-header h1 {
-  margin: 0 0 2px;
-  font-size: clamp(1.05rem, 3vw, 1.35rem);
-  font-weight: 650;
-  color: var(--ink);
-  letter-spacing: -.01em;
-}
-.kb-header p { margin: 0; font-size: .83rem; color: var(--muted); }
-
-/* ── Chat bubbles ─────────────────────────────────────── */
-.message.user > div {
-  background: var(--sage) !important;
-  color: #fff !important;
-  border-radius: var(--radius) var(--radius) 4px var(--radius) !important;
-  padding: 10px 15px !important;
-  max-width: 80% !important;
-  font-size: clamp(.84rem, 2vw, .94rem) !important;
-  line-height: 1.6 !important;
-  box-shadow: var(--shadow) !important;
-}
-.message.bot > div {
-  background: var(--cream) !important;
-  border: 1px solid var(--stone) !important;
-  border-radius: var(--radius) var(--radius) var(--radius) 4px !important;
-  padding: 12px 16px !important;
-  max-width: 84% !important;
-  font-size: clamp(.84rem, 2vw, .94rem) !important;
-  line-height: 1.65 !important;
-  box-shadow: var(--shadow) !important;
-  color: var(--ink) !important;
-}
-
-/* ── Suggested question pills — auto-sizing ───────────── */
-.examples-table { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding: 10px 0 4px !important; }
-.examples-table button, .example {
-  display: inline-flex !important;
-  align-items: center !important;
-  width: auto !important;               /* KEY: no forced width — wraps to content */
-  white-space: normal !important;       /* allow text to wrap if very long */
-  border-radius: 999px !important;
-  border: 1.5px solid var(--sage) !important;
-  color: var(--sage-d) !important;
-  background: var(--cream) !important;
-  padding: 6px 16px !important;
-  font-size: .8rem !important;
-  font-weight: 500 !important;
-  line-height: 1.4 !important;
-  text-align: center !important;
-  cursor: pointer !important;
-  transition: background .18s, color .18s, border-color .18s !important;
-  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
-}
-.examples-table button:hover, .example:hover {
-  background: var(--sage) !important;
-  color: #fff !important;
-  border-color: var(--sage) !important;
+body,.gradio-container{background:var(--sand)!important;
+  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif!important;color:var(--ink)!important}
+.gradio-container{max-width:1120px!important;margin:0 auto!important}
+
+/* ── Header ──────────────────────────── */
+.kb-header{background:var(--cream);border-bottom:1px solid var(--stone);
+  padding:16px 22px 14px;display:flex;align-items:center;gap:14px}
+.kb-icon{width:40px;height:40px;background:var(--sage);border-radius:11px;
+  display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
+.kb-header h1{margin:0 0 2px;font-size:clamp(1rem,3vw,1.3rem);font-weight:650;
+  color:var(--ink);letter-spacing:-.01em}
+.kb-header p{margin:0;font-size:.8rem;color:var(--muted)}
+.kb-header-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
+.kb-toggle-btn{background:transparent;border:1.5px solid var(--stone);
+  border-radius:8px;padding:6px 12px;font-size:.78rem;font-weight:500;
+  color:var(--muted);cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:5px}
+.kb-toggle-btn:hover{background:var(--sage-l);border-color:var(--sage);color:var(--sage-d)}
+
+/* ── Chat bubbles ─────────────────────── */
+.message.user>div{background:var(--sage)!important;color:#fff!important;
+  border-radius:var(--radius) var(--radius) 4px var(--radius)!important;
+  padding:10px 15px!important;max-width:78%!important;
+  font-size:clamp(.84rem,2vw,.93rem)!important;line-height:1.6!important;box-shadow:var(--shadow)!important}
+.message.bot>div{background:var(--cream)!important;border:1px solid var(--stone)!important;
+  border-radius:var(--radius) var(--radius) var(--radius) 4px!important;
+  padding:12px 16px!important;max-width:82%!important;
+  font-size:clamp(.84rem,2vw,.93rem)!important;line-height:1.65!important;
+  box-shadow:var(--shadow)!important;color:var(--ink)!important}
+
+/* Hide the default "Chatbot" label */
+.chatbot-label,.label-wrap{display:none!important}
+
+/* ── Suggested pills — auto-sizing ───── */
+.examples-table{display:flex!important;flex-wrap:wrap!important;gap:7px!important;
+  padding:8px 16px 12px!important;background:var(--cream);border-top:1px solid var(--stone)}
+.examples-table td,.examples-table th{padding:0!important;border:none!important;background:none!important}
+.examples-table button,.example{
+  display:inline-flex!important;align-items:center!important;
+  width:auto!important;white-space:normal!important;
+  border-radius:999px!important;border:1.5px solid var(--stone)!important;
+  color:var(--sage-d)!important;background:var(--cream)!important;
+  padding:5px 14px!important;font-size:.78rem!important;font-weight:500!important;
+  line-height:1.4!important;text-align:left!important;cursor:pointer!important;
+  transition:background .15s,color .15s,border-color .15s!important;
+  box-shadow:0 1px 3px rgba(0,0,0,.05)!important}
+.examples-table button:hover,.example:hover{
+  background:var(--sage)!important;color:#fff!important;border-color:var(--sage)!important}
+
+/* "Try asking" label above pills */
+.try-label{font-size:.73rem;font-weight:600;color:var(--muted);
+  letter-spacing:.04em;text-transform:uppercase;padding:10px 16px 0;background:var(--cream)}
+
+/* ── Chat input ───────────────────────── */
+.chat-input-container{background:var(--cream)!important;
+  border-top:1px solid var(--stone)!important;padding:10px 14px!important}
+.chat-input-container textarea{background:var(--sand)!important;
+  border:1.5px solid var(--stone)!important;border-radius:12px!important;
+  padding:10px 14px!important;font-size:.9rem!important;color:var(--ink)!important;
+  resize:none!important;transition:border-color .2s,box-shadow .2s!important}
+.chat-input-container textarea:focus{border-color:var(--sage)!important;outline:none!important;
+  box-shadow:0 0 0 3px rgba(107,143,113,.18)!important}
+.chat-input-container textarea::placeholder{color:var(--muted)!important}
+.chat-input-container button[aria-label="Send"]{
+  background:var(--sage)!important;color:#fff!important;border:none!important;
+  border-radius:10px!important;padding:0 14px!important;height:38px!important;
+  font-weight:600!important;transition:background .18s!important}
+.chat-input-container button[aria-label="Send"]:hover{background:var(--sage-d)!important}
+
+/* ── Compact icon toolbar ─────────────── */
+.input-toolbar{display:flex;align-items:center;gap:3px;
+  padding:5px 14px 6px;background:var(--cream);
+  border-top:1px solid var(--stone)}
+.tb-btn{display:inline-flex;align-items:center;justify-content:center;
+  width:28px;height:28px;background:transparent;border:none;
+  border-radius:6px;cursor:pointer;color:var(--muted);
+  transition:background .15s,color .15s;position:relative}
+.tb-btn:hover{background:var(--sage-l);color:var(--sage-d)}
+.tb-btn svg{width:14px;height:14px;pointer-events:none}
+.tb-sep{width:1px;height:16px;background:var(--stone);margin:0 3px}
+/* Tooltip */
+.tb-btn::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);
+  left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
+  font-size:.68rem;padding:3px 7px;border-radius:5px;white-space:nowrap;
+  pointer-events:none;opacity:0;transition:opacity .15s}
+.tb-btn:hover::after{opacity:1}
+
+/* ── KB panel (slide-in overlay) ─────── */
+.kb-panel-wrap{position:fixed;top:0;right:0;bottom:0;width:340px;max-width:92vw;
+  background:var(--cream);border-left:1px solid var(--stone);
+  box-shadow:-4px 0 20px rgba(0,0,0,.10);z-index:1000;
+  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
+  display:flex;flex-direction:column;overflow:hidden}
+.kb-panel-wrap.open{transform:translateX(0)}
+.kb-panel-head{display:flex;align-items:center;padding:14px 16px;
+  border-bottom:1px solid var(--stone);background:var(--sand);flex-shrink:0}
+.kb-panel-head h2{margin:0;font-size:.95rem;font-weight:650;color:var(--ink);flex:1}
+.kb-close-btn{background:none;border:none;cursor:pointer;color:var(--muted);
+  font-size:1.1rem;padding:2px 6px;border-radius:6px;transition:background .15s}
+.kb-close-btn:hover{background:var(--stone)}
+.kb-panel-body{flex:1;overflow-y:auto;padding:14px 14px 20px}
+.kb-section-label{font-size:.72rem;font-weight:700;color:var(--muted);
+  letter-spacing:.05em;text-transform:uppercase;margin:14px 0 7px}
+.kb-section-label:first-child{margin-top:0}
+
+/* File table inside panel */
+.kb-file-table{width:100%;border-collapse:collapse;font-size:.81rem}
+.kb-file-table th{background:var(--sand);padding:6px 8px;text-align:left;
+  font-weight:600;font-size:.72rem;color:var(--muted);border-bottom:1px solid var(--stone)}
+.kb-file-table td{padding:7px 8px;border-bottom:1px solid var(--stone);color:var(--ink)}
+
+/* Upload zone */
+.gr-file-drop,[data-testid="file"]{border:2px dashed var(--stone)!important;
+  border-radius:var(--radius)!important;background:var(--sand)!important;
+  transition:border-color .2s,background .2s!important}
+.gr-file-drop:hover,[data-testid="file"]:hover{border-color:var(--sage)!important;
+  background:var(--sage-l)!important}
+
+/* KB action buttons */
+.kb-upload-btn button{background:var(--sage)!important;color:#fff!important;
+  border:none!important;border-radius:9px!important;padding:9px 0!important;
+  font-weight:600!important;font-size:.85rem!important;width:100%!important;
+  transition:background .18s!important}
+.kb-upload-btn button:hover{background:var(--sage-d)!important}
+.kb-delete-btn button{background:var(--rose-l)!important;color:var(--rose)!important;
+  border:1px solid var(--rose)!important;border-radius:9px!important;padding:8px 0!important;
+  font-weight:600!important;font-size:.85rem!important;width:100%!important;
+  transition:background .18s,color .18s!important}
+.kb-delete-btn button:hover{background:var(--rose)!important;color:#fff!important}
+
+/* Overlay backdrop */
+.kb-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:999}
+.kb-backdrop.open{display:block}
+
+/* ── Empty state ─────────────────────── */
+.empty-state{display:flex;flex-direction:column;align-items:center;
+  justify-content:center;padding:40px 20px;gap:10px;color:var(--muted);text-align:center}
+.empty-state-icon{font-size:2.6rem;opacity:.5}
+.empty-state-title{font-size:.95rem;font-weight:600;color:var(--ink)}
+.empty-state-sub{font-size:.82rem;max-width:260px;line-height:1.5}
+
+/* ── Mobile ──────────────────────────── */
+@media(max-width:640px){
+  .gradio-container{padding:0!important}
+  .kb-header{padding:10px 14px!important}
+  .kb-panel-wrap{width:100%;max-width:100vw}
+  .message.user>div,.message.bot>div{max-width:95%!important}
+  .examples-table{gap:5px!important;padding:6px 10px 8px!important}
+  .input-toolbar{padding:4px 10px 5px!important}
 }
+</style>
 
-/* ── Chat input area ──────────────────────────────────── */
-.chat-input-container {
-  background: var(--cream) !important;
-  border-top: 1px solid var(--stone) !important;
-  padding: 10px 14px !important;
-  border-radius: 0 0 var(--radius) var(--radius) !important;
-}
-.chat-input-container textarea {
-  background: var(--sand) !important;
-  border: 1.5px solid var(--stone) !important;
-  border-radius: 12px !important;
-  padding: 10px 14px !important;
-  font-size: .92rem !important;
-  color: var(--ink) !important;
-  resize: none !important;
-  transition: border-color .2s, box-shadow .2s !important;
-  min-height: 52px !important;
-}
-.chat-input-container textarea:focus {
-  border-color: var(--sage) !important;
-  box-shadow: 0 0 0 3px rgba(107,143,113,.18) !important;
-  outline: none !important;
-}
-.chat-input-container textarea::placeholder { color: var(--muted) !important; }
-
-/* Send button */
-.chat-input-container button[aria-label="Send"],
-.chat-input-container button.send-btn {
-  background: var(--sage) !important;
-  color: #fff !important;
-  border: none !important;
-  border-radius: 10px !important;
-  padding: 0 16px !important;
-  height: 40px !important;
-  font-weight: 600 !important;
-  transition: background .18s, transform .1s !important;
-}
-.chat-input-container button[aria-label="Send"]:hover { background: var(--sage-d) !important; transform: translateY(-1px) !important; }
-
-/* ── Input toolbar (file attach, image, paste, format) ── */
-.input-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 14px 0;
-  background: var(--cream);
-  border-top: 1px solid var(--stone);
-  flex-wrap: wrap;
-}
-.toolbar-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  background: transparent;
-  border: 1px solid var(--stone);
-  border-radius: 8px;
-  padding: 4px 10px;
-  font-size: .76rem;
-  color: var(--muted);
-  cursor: pointer;
-  transition: background .15s, color .15s, border-color .15s;
-  white-space: nowrap;
-}
-.toolbar-btn:hover { background: var(--sage-l); color: var(--sage-d); border-color: var(--sage); }
-.toolbar-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
-.toolbar-sep { width: 1px; height: 18px; background: var(--stone); margin: 0 2px; }
-
-/* ── KB panel (inline, below chat) ───────────────────── */
-.kb-panel {
-  background: var(--cream);
-  border: 1px solid var(--stone);
-  border-radius: var(--radius);
-  margin: 12px 0 0;
-  overflow: hidden;
-  box-shadow: var(--shadow);
+<script>
+function toggleKB(){
+  var p=document.getElementById("kb-panel");
+  var b=document.getElementById("kb-backdrop");
+  if(p){p.classList.toggle("open");b&&b.classList.toggle("open")}
 }
-.kb-panel-header {
-  background: var(--sand);
-  border-bottom: 1px solid var(--stone);
-  padding: 10px 16px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  user-select: none;
+function closeKB(){
+  var p=document.getElementById("kb-panel");
+  var b=document.getElementById("kb-backdrop");
+  if(p){p.classList.remove("open");b&&b.classList.remove("open")}
 }
-.kb-panel-header span { font-weight: 600; font-size: .88rem; color: var(--ink); flex: 1; }
-.kb-panel-header small { font-size: .75rem; color: var(--muted); }
-.kb-panel-body { padding: 16px; }
-
-/* ── File table ───────────────────────────────────────── */
-.file-table { width: 100%; border-collapse: collapse; font-size: .83rem; margin-top: 4px; }
-.file-table th { background: var(--sand); padding: 7px 12px; text-align: left; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--stone); }
-.file-table td { padding: 7px 12px; border-bottom: 1px solid var(--stone); color: var(--ink); }
-.file-table tr:last-child td { border-bottom: none; }
-
-/* ── Buttons ──────────────────────────────────────────── */
-button.upload-btn {
-  background: var(--sage) !important; color: #fff !important;
-  border: none !important; border-radius: 9px !important;
-  padding: 9px 20px !important; font-weight: 600 !important;
-  font-size: .86rem !important; width: 100% !important;
-  transition: background .18s !important; cursor: pointer !important;
-}
-button.upload-btn:hover { background: var(--sage-d) !important; }
-button.delete-btn {
-  background: var(--rose-l) !important; color: var(--rose) !important;
-  border: 1px solid var(--rose) !important; border-radius: 9px !important;
-  padding: 9px 20px !important; font-weight: 600 !important;
-  font-size: .86rem !important; width: 100% !important;
-  transition: background .18s !important; cursor: pointer !important;
-}
-button.delete-btn:hover { background: var(--rose) !important; color: #fff !important; }
-
-/* ── Status pills ─────────────────────────────────────── */
-.status-ok  { display:inline-block; background:#d1fae5; color:#065f46; border-radius:6px; padding:5px 12px; font-size:.82rem; }
-.status-err { display:inline-block; background:#fee2e2; color:#991b1b; border-radius:6px; padding:5px 12px; font-size:.82rem; }
-
-/* ── Gradio file drop zone ────────────────────────────── */
-.gr-file-drop, [data-testid="file"] {
-  border: 2px dashed var(--stone) !important;
-  border-radius: var(--radius) !important;
-  background: var(--sand) !important;
-  transition: border-color .2s, background .2s !important;
-}
-.gr-file-drop:hover, [data-testid="file"]:hover {
-  border-color: var(--sage) !important;
-  background: var(--sage-l) !important;
-}
-
-/* ── Mobile ───────────────────────────────────────────── */
-@media (max-width: 640px) {
-  .gradio-container { padding: 0 !important; }
-  .kb-header { padding: 12px 14px 10px !important; }
-  .message.user > div, .message.bot > div { max-width: 95% !important; }
-  .examples-table { gap: 6px !important; }
-  .input-toolbar { padding: 5px 10px 0 !important; gap: 3px !important; }
-  .toolbar-btn { padding: 4px 8px !important; font-size: .72rem !important; }
-  .kb-panel-body > .row { flex-direction: column !important; }
-}
-</style>
+</script>
 """
 
-# ── Input toolbar HTML  ────────────────────────────────────────────────────────
-# Rendered above the Gradio chat input; provides affordances for attach, image,
-# paste and formatting hints. Clicking "Attach file" programmatically triggers
-# the hidden Gradio File component via JS.
+# Toolbar — compact icon-only buttons with tooltips
 TOOLBAR_HTML = """
 <div class="input-toolbar" id="input-toolbar">
-  <button class="toolbar-btn" onclick="document.getElementById('kb-upload-trigger').click()" title="Attach a document to add to the knowledge base">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
-    Attach file
+  <button class="tb-btn" data-tip="Attach file to KB"
+    onclick="document.getElementById('kb-upload-trigger').click()">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <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="toolbar-btn" onclick="
-    var t=document.querySelector('.chat-input-container textarea');
-    if(t){navigator.clipboard.readText().then(txt=>{var s=t.selectionStart,e=t.selectionEnd;t.value=t.value.slice(0,s)+txt+t.value.slice(e);t.selectionStart=t.selectionEnd=s+txt.length;t.dispatchEvent(new Event('input',{bubbles:true}))}).catch(()=>t.focus())}
-  " title="Paste clipboard text into the message box">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
-    Paste
+  <button class="tb-btn" data-tip="Paste from clipboard"
+    onclick="(function(){var t=document.querySelector('.chat-input-container textarea');if(t){navigator.clipboard.readText().then(function(txt){var 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(function(){t.focus()})}})()">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <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="toolbar-sep"></div>
-  <button class="toolbar-btn" onclick="
-    var t=document.querySelector('.chat-input-container textarea');
-    if(t){var s=t.selectionStart,e=t.selectionEnd,sel=t.value.slice(s,e);
-    if(sel){t.value=t.value.slice(0,s)+'**'+sel+'**'+t.value.slice(e);t.dispatchEvent(new Event('input',{bubbles:true}))}}
-  " title="Bold selected text">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 4h8a4 4 0 010 8H6zM6 12h9a4 4 0 010 8H6z"/></svg>
-    Bold
+  <div class="tb-sep"></div>
+  <button class="tb-btn" data-tip="Bold (select text first)"
+    onclick="(function(){var t=document.querySelector('.chat-input-container textarea');if(!t)return;var s=t.selectionStart,e=t.selectionEnd,v=t.value;if(s===e)return;t.value=v.slice(0,s)+'**'+v.slice(s,e)+'**'+v.slice(e);t.selectionStart=s;t.selectionEnd=e+4;t.dispatchEvent(new Event('input',{bubbles:true}))})()">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+      <path d="M6 4h8a4 4 0 010 8H6zM6 12h9a4 4 0 010 8H6z"/>
+    </svg>
   </button>
-  <button class="toolbar-btn" onclick="
-    var t=document.querySelector('.chat-input-container textarea');
-    if(t){var s=t.selectionStart,e=t.selectionEnd,sel=t.value.slice(s,e);
-    if(sel){t.value=t.value.slice(0,s)+'*'+sel+'*'+t.value.slice(e);t.dispatchEvent(new Event('input',{bubbles:true}))}}
-  " title="Italic selected text">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
-    Italic
+  <button class="tb-btn" data-tip="Italic (select text first)"
+    onclick="(function(){var t=document.querySelector('.chat-input-container textarea');if(!t)return;var s=t.selectionStart,e=t.selectionEnd,v=t.value;if(s===e)return;t.value=v.slice(0,s)+'*'+v.slice(s,e)+'*'+v.slice(e);t.selectionStart=s;t.selectionEnd=e+2;t.dispatchEvent(new Event('input',{bubbles:true}))})()">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <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="toolbar-btn" onclick="
-    var t=document.querySelector('.chat-input-container textarea');
-    if(t){var lines=t.value.split('\n');var s=t.selectionStart;var lineIdx=t.value.slice(0,s).split('\n').length-1;
-    lines[lineIdx]='- '+lines[lineIdx];t.value=lines.join('\n');t.dispatchEvent(new Event('input',{bubbles:true}))}
-  " title="Add bullet point">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><circle cx="3" cy="6" r="1" fill="currentColor"/><circle cx="3" cy="12" r="1" fill="currentColor"/><circle cx="3" cy="18" r="1" fill="currentColor"/></svg>
-    List
+  <button class="tb-btn" data-tip="Add bullet to current line"
+    onclick="(function(){var t=document.querySelector('.chat-input-container textarea');if(!t)return;var lines=t.value.split('\n'),pos=t.selectionStart,idx=t.value.slice(0,pos).split('\n').length-1;lines[idx]='- '+lines[idx];t.value=lines.join('\n');t.dispatchEvent(new Event('input',{bubbles:true}))})()">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <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="toolbar-btn" onclick="
-    var t=document.querySelector('.chat-input-container textarea');
-    if(t){var s=t.selectionStart,e=t.selectionEnd,sel=t.value.slice(s,e);
-    if(sel){t.value=t.value.slice(0,s)+'`'+sel+'`'+t.value.slice(e);t.dispatchEvent(new Event('input',{bubbles:true}))}}
-  " title="Inline code format">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
-    Code
+  <button class="tb-btn" data-tip="Inline code (select text first)"
+    onclick="(function(){var t=document.querySelector('.chat-input-container textarea');if(!t)return;var s=t.selectionStart,e=t.selectionEnd,v=t.value;if(s===e)return;t.value=v.slice(0,s)+'`'+v.slice(s,e)+'`'+v.slice(e);t.selectionStart=s;t.selectionEnd=e+2;t.dispatchEvent(new Event('input',{bubbles:true}))})()">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
+    </svg>
   </button>
 </div>
 """
 
+# Welcome greeting injected as first bot message
+WELCOME_MSG = CONFIG["messages"].get(
+    "welcome",
+    "Ask me anything about the documents in the knowledge base!"
+)
+
 examples = [
     q["query"]
     for q in CONFIG.get("quick_actions", [])
@@ -921,80 +890,95 @@ examples = [
     "Why is self-service important for customer support?",
 ]
 
+def chat_respond_with_greeting(message: str, history: list) -> str:
+    """Wrapper that injects a greeting on the first turn."""
+    return chat_respond(message, history)
+
 with gr.Blocks(title=CONFIG["client"]["name"]) as demo:
 
     gr.HTML(STYLE_HTML)
 
-    # ── Header ────────────────────────────────────────────────────────
+    # ── Backdrop for KB panel ──────────────────────────────────────────
+    gr.HTML('<div class="kb-backdrop" id="kb-backdrop" onclick="closeKB()"></div>')
+
+    # ── KB slide-in panel ──────────────────────────────────────────────
+    with gr.Group(elem_id="kb-panel", elem_classes="kb-panel-wrap"):
+        gr.HTML("""
+        <div class="kb-panel-head">
+          <h2>📁 Knowledge Base</h2>
+          <button class="kb-close-btn" onclick="closeKB()" title="Close">✕</button>
+        </div>
+        """)
+        with gr.Column(elem_classes="kb-panel-body"):
+            gr.HTML('<div class="kb-section-label">Files in index</div>')
+            kb_file_list  = gr.HTML(value=list_kb_files)
+
+            gr.HTML('<div class="kb-section-label">Upload documents</div>')
+            gr.HTML('<div style="font-size:.75rem;color:var(--muted);margin-bottom:6px">.txt · .md · .pdf · .docx &nbsp;·&nbsp; max 10 MB each</div>')
+            upload_input  = gr.File(
+                label="",
+                file_count="multiple",
+                file_types=[".txt", ".md", ".pdf", ".docx", ".doc"],
+                show_label=False,
+            )
+            upload_btn    = gr.Button("⬆ Upload & Index", elem_classes="kb-upload-btn")
+            upload_status = gr.Markdown()
+
+            gr.HTML('<div class="kb-section-label" style="margin-top:18px">Delete a file</div>')
+            delete_input  = gr.Textbox(
+                placeholder="Filename, e.g. guide.pdf",
+                show_label=False,
+                elem_id="delete-input",
+            )
+            delete_btn    = gr.Button("🗑 Delete", elem_classes="kb-delete-btn", elem_id="delete-btn")
+            delete_status = gr.Markdown()
+
+    # ── Page header ────────────────────────────────────────────────────
     gr.HTML(f"""
     <div class="kb-header">
-      <div class="kb-header-icon">🤖</div>
+      <div class="kb-icon">🤖</div>
       <div>
         <h1>{CONFIG["client"]["name"]}</h1>
         <p>Search the knowledge base and get answers in plain language</p>
       </div>
+      <div class="kb-header-actions">
+        <button class="kb-toggle-btn" onclick="toggleKB()">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
+            <polyline points="14 2 14 8 20 8"/>
+          </svg>
+          Manage KB
+        </button>
+      </div>
     </div>
     """)
 
-    # ── Main layout: chat left, KB panel right ─────────────────────────
-    with gr.Row():
+    # ── Chat — full width, with empty state ───────────────────────────
+    with gr.Column():
 
-        # ── Left: full chat interface ──────────────────────────────────
-        with gr.Column(scale=3):
+        # "Try asking" label + examples rendered above the chat interface
+        gr.HTML('<div class="try-label">✦ Try asking</div>')
 
-            gr.ChatInterface(
-                fn=chat_respond,
-                examples=examples,
-                cache_examples=False,
-            )
+        gr.ChatInterface(
+            fn=chat_respond,
+            examples=examples,
+            cache_examples=False,
+        )
 
-            # Input toolbar rendered after the chat interface
-            gr.HTML(TOOLBAR_HTML)
+        # Compact icon toolbar
+        gr.HTML(TOOLBAR_HTML)
 
-            # Hidden file input triggered by toolbar "Attach file" button.
-            # Uploaded files are added to the KB and indexed automatically.
-            toolbar_upload = gr.File(
-                label="",
-                file_count="multiple",
-                file_types=[".txt", ".md", ".pdf", ".docx", ".doc"],
-                visible=False,
-                elem_id="kb-upload-trigger",
-            )
-            toolbar_upload_status = gr.Markdown(visible=False)
-
-        # ── Right: KB manager panel ────────────────────────────────────
-        with gr.Column(scale=1):
-
-            gr.HTML("""
-            <div class="kb-panel">
-              <div class="kb-panel-header">
-                <span>📁 Knowledge Base</span>
-                <small>Files · Upload · Delete</small>
-              </div>
-            </div>
-            """)
-
-            with gr.Group():
-                kb_file_list  = gr.Markdown(value=list_kb_files)
-
-                upload_input  = gr.File(
-                    label="Upload files (.txt .md .pdf .docx, max 10 MB)",
-                    file_count="multiple",
-                    file_types=[".txt", ".md", ".pdf", ".docx", ".doc"],
-                )
-                upload_btn    = gr.Button("⬆️ Upload & Index", variant="primary", elem_classes="upload-btn")
-                upload_status = gr.Markdown()
-
-                gr.HTML("<div style='height:1px;background:var(--stone,#e8e2d9);margin:10px 0'></div>")
-
-                delete_input  = gr.Textbox(
-                    placeholder="Filename to delete, e.g. guide.pdf",
-                    show_label=False,
-                )
-                delete_btn    = gr.Button("🗑️ Delete file", variant="stop", elem_classes="delete-btn")
-                delete_status = gr.Markdown()
-
-    # ── Event wiring ───────────────────────────────────────────────────
+        # Hidden file input for toolbar attach button
+        toolbar_upload        = gr.File(
+            label="",
+            file_count="multiple",
+            file_types=[".txt", ".md", ".pdf", ".docx", ".doc"],
+            visible=False,
+            elem_id="kb-upload-trigger",
+        )
+        toolbar_upload_status = gr.Markdown(visible=False)
+
+    # ── Event wiring ──────────────────────────────────────────────────
     upload_btn.click(
         upload_kb_files,
         inputs=[upload_input],