Update app.py

app.py

@@ -650,271 +650,399 @@ def delete_kb_file(filename: str) -> Tuple[str, str]:
 # GRADIO UI
 # -----------------------------
 
+# Build the KB file table as an HTML string (called on load + after every change)
+def kb_panel_html(file_table_html: str, status_msg: str = "") -> str:
+    status_block = ""
+    if status_msg:
+        colour = "#065f46" if "✅" in status_msg else "#991b1b"
+        bg     = "#d1fae5" if "✅" in status_msg else "#fee2e2"
+        status_block = (
+            f"<div style='margin:8px 0;padding:8px 12px;background:{bg};color:{colour};"
+            f"border-radius:8px;font-size:.81rem;line-height:1.5'>{status_msg}</div>"
+        )
+    return f"""
+<div id="kb-backdrop" class="kb-backdrop" onclick="closeKB()"></div>
+<div id="kb-panel"   class="kb-panel-wrap">
+  <div class="kb-panel-head">
+    <span style="font-size:1rem;margin-right:8px">📁</span>
+    <h2>Knowledge Base</h2>
+    <button class="kb-close-btn" onclick="closeKB()">✕</button>
+  </div>
+  <div class="kb-panel-body">
+    <div class="kb-section-label">Files in index</div>
+    {file_table_html}
+    {status_block}
+  </div>
+</div>
+"""
+
 STYLE_HTML = """
 <style>
-/* ── Tokens ───────────────────────────── */
-:root {
-  --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);
-}
-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}
+:root{
+  --sage:#6b8f71;--sage-l:#eaf2eb;--sage-d:#4f6e55;
+  --sand:#f5f0e8;--cream:#fdfaf5;--stone:#e4ddd3;
+  --ink:#2d2d2d;--muted:#7a7167;
+  --rose:#c0717a;--rose-l:#f8eded;
+  --r:14px;--sh:0 2px 10px rgba(0,0,0,.07);
+}
+*{box-sizing:border-box}
+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:900px!important;margin:0 auto!important;padding:0!important}
+
+/* ── Header ─────────────────────────────────────────── */
+.app-header{
+  background:var(--cream);border-bottom:1px solid var(--stone);
+  padding:14px 20px;display:flex;align-items:center;gap:12px;
+}
+.app-icon{
+  width:38px;height:38px;background:var(--sage);border-radius:10px;
+  display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0;
+}
+.app-title{margin:0 0 1px;font-size:1.1rem;font-weight:650;color:var(--ink);letter-spacing:-.01em}
+.app-sub{margin:0;font-size:.77rem;color:var(--muted)}
+.manage-kb-btn{
+  margin-left:auto;background:var(--cream);border:1.5px solid var(--stone);
+  border-radius:8px;padding:6px 13px;font-size:.78rem;font-weight:500;
+  color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:5px;
+  transition:background .15s,border-color .15s,color .15s;white-space:nowrap;
+}
+.manage-kb-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(--r) var(--r) 4px var(--r)!important;
+  padding:10px 15px!important;max-width:76%!important;
+  font-size:.9rem!important;line-height:1.6!important;box-shadow:var(--sh)!important;
+}
+.message.bot>div{
+  background:var(--cream)!important;border:1px solid var(--stone)!important;
+  border-radius:var(--r) var(--r) var(--r) 4px!important;
+  padding:12px 16px!important;max-width:80%!important;
+  font-size:.9rem!important;line-height:1.65!important;
+  box-shadow:var(--sh)!important;color:var(--ink)!important;
+}
+/* Hide default Gradio chatbot label */
+.label-wrap,.chatbot-label,label.svelte-1b6s6vi{display:none!important}
+
+/* ── "Try asking" + example pills ───────────────────── */
+.try-label{
+  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
+  color:var(--muted);padding:10px 14px 4px;background:var(--cream);
+}
+.examples-table{
+  display:flex!important;flex-wrap:wrap!important;gap:6px!important;
+  padding:4px 14px 10px!important;background:var(--cream);
+  border-bottom:1px solid var(--stone)!important;
+}
+/* flatten table cells so pills flow naturally */
+.examples-table table,.examples-table tbody,
+.examples-table tr,.examples-table td{
+  display:contents!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}
+  padding:5px 13px!important;font-size:.78rem!important;font-weight:500!important;
+  line-height:1.4!important;cursor:pointer!important;
+  transition:all .15s!important;box-shadow:0 1px 2px 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}
+  background:var(--sage)!important;color:#fff!important;border-color:var(--sage)!important;
+}
+
+/* ── Input bar ───────────────────────────────────────── */
+.chat-input-container{
+  background:var(--cream)!important;border-top:1px solid var(--stone)!important;
+  padding:8px 12px!important;
+}
+.chat-input-container textarea{
+  background:var(--sand)!important;border:1.5px solid var(--stone)!important;
+  border-radius:10px!important;padding:9px 13px!important;
+  font-size:.88rem!important;color:var(--ink)!important;
+  resize:none!important;transition:border-color .18s,box-shadow .18s!important;
+}
+.chat-input-container textarea:focus{
+  border-color:var(--sage)!important;outline:none!important;
+  box-shadow:0 0 0 3px rgba(107,143,113,.16)!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}
+  border-radius:9px!important;padding:0 13px!important;height:36px!important;
+  font-weight:600!important;transition:background .15s!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}
+/* ── Compact toolbar ─────────────────────────────────── */
+.tb-bar{
+  display:flex;align-items:center;gap:2px;
+  padding:4px 12px 5px;background:var(--cream);border-top:1px solid var(--stone);
+}
+.tb-btn{
+  width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
+  background:none;border:none;border-radius:5px;cursor:pointer;color:var(--muted);
+  transition:background .13s,color .13s;position:relative;flex-shrink:0;
+}
 .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 svg{width:13px;height:13px;pointer-events:none}
+.tb-sep{width:1px;height:14px;background:var(--stone);margin:0 2px;flex-shrink:0}
+.tb-btn::after{
+  content:attr(data-tip);position:absolute;bottom:calc(100% + 5px);left:50%;
+  transform:translateX(-50%);background:rgba(30,30,30,.9);color:#fff;
+  font-size:.65rem;padding:3px 7px;border-radius:4px;white-space:nowrap;
+  pointer-events:none;opacity:0;transition:opacity .12s;z-index:99;
+}
 .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;
+/* ── KB slide-in panel ───────────────────────────────── */
+.kb-backdrop{
+  display:none;position:fixed;inset:0;
+  background:rgba(45,45,45,.35);z-index:1000;backdrop-filter:blur(1px);
+}
+.kb-backdrop.open{display:block}
+.kb-panel-wrap{
+  position:fixed;top:0;right:0;bottom:0;width:360px;max-width:94vw;
   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}
+  box-shadow:-6px 0 28px rgba(0,0,0,.12);z-index:1001;
+  transform:translateX(110%);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-panel-head{
+  display:flex;align-items:center;padding:14px 16px;
+  border-bottom:1px solid var(--stone);background:var(--sand);flex-shrink:0;gap:8px;
+}
+.kb-panel-head h2{margin:0;font-size:.92rem;font-weight:650;color:var(--ink);flex:1}
+.kb-close-btn{
+  background:none;border:none;cursor:pointer;color:var(--muted);
+  width:26px;height:26px;border-radius:5px;font-size:.9rem;
+  display:flex;align-items:center;justify-content:center;transition:background .13s;
+}
 .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-panel-body{flex:1;overflow-y:auto;padding:14px 14px 24px}
+.kb-section-label{
+  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
+  color:var(--muted);margin:0 0 8px;
+}
+.kb-section-label+*{margin-top:0}
+.kb-divider{height:1px;background:var(--stone);margin:16px 0}
+
+/* File table */
+.kb-file-table{width:100%;border-collapse:collapse;font-size:.8rem}
+.kb-file-table th{
+  background:var(--sand);padding:6px 8px;text-align:left;
+  font-weight:600;font-size:.7rem;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)}
+.kb-file-table tr:last-child td{border-bottom:none}
+.kb-del-btn{
+  background:none;border:none;cursor:pointer;color:var(--rose);
+  padding:2px 5px;border-radius:4px;font-size:.85rem;transition:background .13s;
+}
+.kb-del-btn:hover{background:var(--rose-l)}
 
 /* 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-upload-zone{
+  border:2px dashed var(--stone);border-radius:10px;background:var(--sand);
+  padding:20px;text-align:center;font-size:.8rem;color:var(--muted);
+  transition:border-color .18s,background .18s;cursor:pointer;margin:6px 0 10px;
+}
+.kb-upload-zone:hover{border-color:var(--sage);background:var(--sage-l)}
+.gr-file-drop,[data-testid="file"]{
+  border:none!important;border-radius:10px!important;
+  background:transparent!important;margin:0!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}
+.kb-upload-btn>button,.kb-upload-btn button{
+  background:var(--sage)!important;color:#fff!important;border:none!important;
+  border-radius:8px!important;padding:8px 0!important;font-weight:600!important;
+  font-size:.83rem!important;width:100%!important;transition:background .15s!important;
+  cursor:pointer!important;
+}
+.kb-upload-btn>button:hover,.kb-upload-btn button:hover{background:var(--sage-d)!important}
+.kb-delete-btn>button,.kb-delete-btn button{
+  background:var(--rose-l)!important;color:var(--rose)!important;
+  border:1px solid #e8b4b8!important;border-radius:8px!important;
+  padding:7px 0!important;font-weight:600!important;font-size:.83rem!important;
+  width:100%!important;transition:all .15s!important;cursor:pointer!important;
+}
+.kb-delete-btn>button:hover,.kb-delete-btn button:hover{
+  background:var(--rose)!important;color:#fff!important;
+}
+.kb-textbox input,.kb-textbox textarea{
+  border:1.5px solid var(--stone)!important;border-radius:8px!important;
+  padding:7px 11px!important;font-size:.82rem!important;
+  background:var(--sand)!important;color:var(--ink)!important;
+  transition:border-color .15s!important;
+}
+.kb-textbox input:focus,.kb-textbox textarea:focus{
+  border-color:var(--sage)!important;outline:none!important;
+  box-shadow:0 0 0 3px rgba(107,143,113,.14)!important;
+}
 
-/* ── 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}
+/* Status messages */
+.kb-status-ok{
+  background:#d1fae5;color:#065f46;border-radius:7px;
+  padding:6px 11px;font-size:.79rem;margin-top:6px;line-height:1.5;
+}
+.kb-status-err{
+  background:#fee2e2;color:#991b1b;border-radius:7px;
+  padding:6px 11px;font-size:.79rem;margin-top:6px;line-height:1.5;
+}
+
+/* Empty state */
+.kb-empty{
+  text-align:center;padding:24px 12px;color:var(--muted);
+}
+.kb-empty-icon{font-size:2rem;opacity:.45;margin-bottom:6px}
+.kb-empty-text{font-size:.8rem;line-height:1.5}
 
-/* ── Mobile ──────────────────────────── */
 @media(max-width:640px){
   .gradio-container{padding:0!important}
-  .kb-header{padding:10px 14px!important}
+  .app-header{padding:10px 12px!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}
+  .examples-table{gap:5px!important;padding:3px 10px 8px!important}
 }
 </style>
 
 <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")}
+  document.getElementById("kb-panel").classList.toggle("open");
+  document.getElementById("kb-backdrop").classList.toggle("open");
 }
 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")}
+  document.getElementById("kb-panel").classList.remove("open");
+  document.getElementById("kb-backdrop").classList.remove("open");
+}
+function kbDeleteFile(name){
+  // Fill the hidden Gradio textbox and click the hidden delete button
+  var inputs = document.querySelectorAll("#kb-delete-input input, #kb-delete-input textarea");
+  inputs.forEach(function(el){
+    el.value = name;
+    el.dispatchEvent(new Event("input", {bubbles:true}));
+    el.dispatchEvent(new Event("change", {bubbles:true}));
+  });
+  setTimeout(function(){
+    var btn = document.querySelector("#kb-delete-btn button, #kb-delete-btn");
+    if(btn) btn.click();
+  }, 80);
 }
 </script>
 """
 
-# Toolbar — compact icon-only buttons with tooltips
 TOOLBAR_HTML = """
-<div class="input-toolbar" id="input-toolbar">
+<div class="tb-bar">
   <button class="tb-btn" data-tip="Attach file to KB"
-    onclick="document.getElementById('kb-upload-trigger').click()">
+    onclick="document.getElementById('kb-file-attach').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="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()})}})()">
+    onclick="(function(){var t=document.querySelector('.chat-input-container textarea');if(!t)return;navigator.clipboard.readText().then(function(s){var i=t.selectionStart;t.value=t.value.slice(0,i)+s+t.value.slice(t.selectionEnd);t.selectionStart=t.selectionEnd=i+s.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="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 class="tb-btn" data-tip="Bold"
+    onclick="(function(){var t=document.querySelector('.chat-input-container textarea');if(!t)return;var s=t.selectionStart,e=t.selectionEnd;if(s===e)return;var v=t.value;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="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 class="tb-btn" data-tip="Italic"
+    onclick="(function(){var t=document.querySelector('.chat-input-container textarea');if(!t)return;var s=t.selectionStart,e=t.selectionEnd;if(s===e)return;var v=t.value;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="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 class="tb-btn" data-tip="Bullet list"
+    onclick="(function(){var t=document.querySelector('.chat-input-container textarea');if(!t)return;var lines=t.value.split('\\n'),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}))})()">
+    <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="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 class="tb-btn" data-tip="Code"
+    onclick="(function(){var t=document.querySelector('.chat-input-container textarea');if(!t)return;var s=t.selectionStart,e=t.selectionEnd;if(s===e)return;var v=t.value;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", [])
-    if "query" in q
+    q["query"] for q in CONFIG.get("quick_actions", []) if "query" in q
 ] or [
     "What makes a good knowledge base article?",
     "How could a KB assistant help support agents?",
     "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)
 
-    # ── 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)
+    # ── App header ────────────────────────────────────────────────────
+    gr.HTML(f"""
+    <div class="app-header">
+      <div class="app-icon">🤖</div>
+      <div>
+        <p class="app-title">{CONFIG["client"]["name"]}</p>
+        <p class="app-sub">Search the knowledge base and get answers in plain language</p>
+      </div>
+      <button class="manage-kb-btn" onclick="toggleKB()">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+          <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>
+    """)
 
+    # ── KB slide panel — rendered as pure HTML, outside Gradio layout ─
+    kb_panel_block = gr.HTML(value=list_kb_files)   # hidden, just holds current table
+    gr.HTML("""
+    <div id="kb-backdrop" class="kb-backdrop" onclick="closeKB()"></div>
+    <div id="kb-panel"    class="kb-panel-wrap">
+      <div class="kb-panel-head">
+        <span>📁</span>
+        <h2>Knowledge Base</h2>
+        <button class="kb-close-btn" onclick="closeKB()">✕</button>
+      </div>
+      <div class="kb-panel-body" id="kb-panel-body">
+        <!-- File list injected by Gradio below -->
+      </div>
+    </div>
+    """)
+
+    # ── "Try asking" label rendered above ChatInterface ───────────────
+    gr.HTML('<div class="try-label">✦ Try asking</div>')
+
+    # ── Main chat ─────────────────────────────────────────────────────
+    gr.ChatInterface(
+        fn=chat_respond,
+        examples=examples,
+        cache_examples=False,
+    )
+
+    # ── Compact toolbar ───────────────────────────────────────────────
+    gr.HTML(TOOLBAR_HTML)
+
+    # ── KB Manager widgets (visible in panel via CSS overlay) ─────────
+    # These are real Gradio widgets positioned inside the panel via JS injection.
+    with gr.Column(visible=True) as kb_widgets:
+        with gr.Group():
+            gr.HTML('<div class="kb-section-label" style="margin-top:0">Files in index</div>')
+            kb_file_list  = gr.HTML(value=list_kb_files)
+            gr.HTML('<div class="kb-divider"></div>')
             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>')
+            gr.HTML('<p style="font-size:.74rem;color:var(--muted);margin:0 0 6px">.txt · .md · .pdf · .docx &nbsp;·&nbsp; max 10 MB</p>')
             upload_input  = gr.File(
                 label="",
                 file_count="multiple",
@@ -923,62 +1051,60 @@ with gr.Blocks(title=CONFIG["client"]["name"]) as demo:
             )
             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>')
+            gr.HTML('<div class="kb-divider"></div>')
+            gr.HTML('<div class="kb-section-label">Delete a file</div>')
             delete_input  = gr.Textbox(
                 placeholder="Filename, e.g. guide.pdf",
                 show_label=False,
-                elem_id="delete-input",
+                elem_id="kb-delete-input",
+                elem_classes="kb-textbox",
             )
-            delete_btn    = gr.Button("🗑 Delete", elem_classes="kb-delete-btn", elem_id="delete-btn")
+            delete_btn    = gr.Button("🗑 Delete file", elem_classes="kb-delete-btn", elem_id="kb-delete-btn")
             delete_status = gr.Markdown()
 
-    # ── Page header ────────────────────────────────────────────────────
-    gr.HTML(f"""
-    <div class="kb-header">
-      <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>
+    # ── Hidden file input for toolbar attach ─────────────────────────
+    toolbar_upload        = gr.File(
+        label="",
+        file_count="multiple",
+        file_types=[".txt", ".md", ".pdf", ".docx", ".doc"],
+        visible=False,
+        elem_id="kb-file-attach",
+    )
+    toolbar_upload_status = gr.Markdown(visible=False)
+
+    # ── JS: move KB widgets into the slide panel after render ─────────
+    gr.HTML("""
+    <script>
+    (function moveKBWidgets(){
+      var target = document.getElementById("kb-panel-body");
+      // Walk up from kb-delete-btn to find the Gradio column wrapper
+      function tryMove(){
+        var btn = document.getElementById("kb-delete-btn");
+        if(!btn || !target) { setTimeout(tryMove, 300); return; }
+        // Find the wrapping gradio column (go up ~6 levels)
+        var el = btn;
+        for(var i=0;i<8;i++){
+          if(!el.parentElement) break;
+          el = el.parentElement;
+          if(el.classList.contains("block") && el.parentElement &&
+             el.parentElement.classList.contains("block")){
+            target.appendChild(el.parentElement);
+            return;
+          }
+        }
+        // Fallback: move the direct block container
+        target.appendChild(el);
+      }
+      if(document.readyState === "loading"){
+        document.addEventListener("DOMContentLoaded", function(){ setTimeout(tryMove, 500); });
+      } else {
+        setTimeout(tryMove, 500);
+      }
+    })();
+    </script>
     """)
 
-    # ── Chat — full width, with empty state ───────────────────────────
-    with gr.Column():
-
-        # "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,
-        )
-
-        # Compact icon toolbar
-        gr.HTML(TOOLBAR_HTML)
-
-        # 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 ──────────────────────────────────────────────────
+    # ── Event wiring ─────────────────────────────────────────────────
     upload_btn.click(
         upload_kb_files,
         inputs=[upload_input],