Update app.py

app.py

@@ -610,58 +610,307 @@ def delete_kb_file(filename: str) -> Tuple[str, str]:
 
 
 # -----------------------------
-# GRADIO UI
-# — css= not supported in all Gradio versions;
-#   inject styles via gr.HTML(<style>) inside the Blocks instead.
+# GRADIO UI  —  Single-page layout
+# Styles injected via gr.HTML to stay compatible with all Gradio versions.
 # -----------------------------
 
 STYLE_HTML = """
 <style>
+/* ── Design tokens: soft, warm palette ───────────────── */
 :root {
-  --accent:#4f6ef7; --accent-h:#3a56d4;
-  --danger:#ef4444; --danger-h:#dc2626;
-  --surface:#fff; --bg:#f4f6fb;
-  --border:#e5e7eb; --muted:#6b7280;
-  --radius:12px; --shadow:0 2px 12px rgba(0,0,0,.08);
+  --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);
 }
-body,.gradio-container{background:var(--bg)!important;
-  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif!important}
-.app-header{background:linear-gradient(135deg,var(--accent) 0%,#7c3aed 100%);
-  color:#fff;padding:20px 24px 16px;border-radius:var(--radius) var(--radius) 0 0;margin-bottom:0}
-.app-header h1{margin:0 0 4px;font-size:clamp(1.2rem,4vw,1.6rem);font-weight:700;letter-spacing:-.02em}
-.app-header p{margin:0;opacity:.85;font-size:clamp(.8rem,2.5vw,.92rem)}
-.tabs>.tab-nav{background:var(--surface)!important;border-bottom:2px solid var(--border)!important;padding:0 16px!important;gap:4px!important}
-.tabs>.tab-nav button{border-radius:var(--radius) var(--radius) 0 0!important;padding:10px 18px!important;
-  font-weight:500!important;font-size:.88rem!important;color:var(--muted)!important;
-  border:none!important;background:transparent!important;transition:color .2s,background .2s!important}
-.tabs>.tab-nav button.selected{color:var(--accent)!important;border-bottom:2px solid var(--accent)!important}
-.message.user>div{background:var(--accent)!important;color:#fff!important;
-  border-radius:var(--radius) var(--radius) 4px var(--radius)!important;
-  padding:10px 14px!important;max-width:82%!important;
-  font-size:clamp(.85rem,2.5vw,.95rem)!important;line-height:1.55!important;box-shadow:var(--shadow)!important}
-.message.bot>div{background:var(--surface)!important;border:1px solid var(--border)!important;
-  border-radius:var(--radius) var(--radius) var(--radius) 4px!important;
-  padding:10px 14px!important;max-width:88%!important;
-  font-size:clamp(.85rem,2.5vw,.95rem)!important;line-height:1.6!important;box-shadow:var(--shadow)!important}
-.chat-input-container textarea{border-radius:24px!important;border:1.5px solid var(--border)!important;
-  padding:10px 16px!important;font-size:.93rem!important;resize:none!important;transition:border-color .2s!important}
-.chat-input-container textarea:focus{border-color:var(--accent)!important;outline:none!important;
-  box-shadow:0 0 0 3px rgba(79,110,247,.15)!important}
-.examples-table button,.example{border-radius:999px!important;border:1.5px solid var(--accent)!important;
-  color:var(--accent)!important;background:transparent!important;padding:6px 14px!important;
-  font-size:.82rem!important;font-weight:500!important;transition:background .2s,color .2s!important;white-space:nowrap!important}
-.examples-table button:hover,.example:hover{background:var(--accent)!important;color:#fff!important}
-@media(max-width:640px){
-  .gradio-container{padding:0!important}
-  .app-header{border-radius:0!important;padding:14px 16px 12px!important}
-  .tabs>.tab-nav button{padding:8px 12px!important;font-size:.82rem!important}
-  .message.user>div,.message.bot>div{max-width:95%!important;font-size:.88rem!important}
-  .kb-row{flex-direction:column!important}
-  .kb-row>*{width:100%!important}
+
+/* ── 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;
+}
+.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;
+}
+
+/* ── 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);
+}
+.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;
+}
+.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>
 """
 
+# ── 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_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>
+  <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>
+  <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
+  </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>
+  <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>
+  <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>
+</div>
+"""
+
 examples = [
     q["query"]
     for q in CONFIG.get("quick_actions", [])
@@ -674,58 +923,93 @@ examples = [
 
 with gr.Blocks(title=CONFIG["client"]["name"]) as demo:
 
-    # Inject styles — compatible with all Gradio versions
     gr.HTML(STYLE_HTML)
 
+    # ── Header ────────────────────────────────────────────────────────
     gr.HTML(f"""
-        <div class="app-header">
-            <h1>🤖 {CONFIG["client"]["name"]}</h1>
-            <p>Ask me anything — I'll search the knowledge base and answer in plain language.</p>
-        </div>
+    <div class="kb-header">
+      <div class="kb-header-icon">🤖</div>
+      <div>
+        <h1>{CONFIG["client"]["name"]}</h1>
+        <p>Search the knowledge base and get answers in plain language</p>
+      </div>
+    </div>
     """)
 
-    with gr.Tabs(elem_classes="tabs"):
+    # ── Main layout: chat left, KB panel right ─────────────────────────
+    with gr.Row():
+
+        # ── Left: full chat interface ──────────────────────────────────
+        with gr.Column(scale=3):
 
-        # ── Tab 1: Chat ──────────────────────────────────────────────
-        with gr.TabItem("💬 Chat"):
             gr.ChatInterface(
                 fn=chat_respond,
                 examples=examples,
                 cache_examples=False,
             )
 
-        # ── Tab 2: KB Manager ────────────────────────────────────────
-        with gr.TabItem("📁 KB Manager"):
-            gr.HTML(
-                "<div style='padding:16px 0 4px'>"
-                "<strong>Manage Knowledge Base Documents</strong><br>"
-                "<span style='color:#6b7280;font-size:.88rem'>"
-                "Supported: .txt · .md · .pdf · .docx — Index rebuilds automatically after every change"
-                "</span></div>"
+            # Input toolbar rendered after the chat interface
+            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",
             )
-
-            with gr.Row(elem_classes="kb-row"):
-
-                with gr.Column(scale=2):
-                    upload_input = gr.File(
-                        label="Drop files here or click to browse (max 10 MB each)",
-                        file_count="multiple",
-                        file_types=[".txt", ".md", ".pdf", ".docx", ".doc"],
-                    )
-                    upload_btn    = gr.Button("⬆️ Upload & Index", variant="primary")
-                    upload_status = gr.Markdown()
-
-                with gr.Column(scale=1):
-                    gr.Markdown("**Current KB Files**")
-                    kb_file_list = gr.Markdown(value=list_kb_files)
-                    gr.HTML("<hr style='border:none;border-top:1px solid #e5e7eb;margin:12px 0'>")
-                    gr.Markdown("**Delete a File**")
-                    delete_input  = gr.Textbox(placeholder="Exact filename, e.g. guide.pdf", show_label=False)
-                    delete_btn    = gr.Button("🗑️ Delete", variant="stop")
-                    delete_status = gr.Markdown()
-
-            upload_btn.click(upload_kb_files, inputs=[upload_input], outputs=[upload_status, kb_file_list])
-            delete_btn.click(delete_kb_file,  inputs=[delete_input],  outputs=[delete_status, kb_file_list])
+            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 ───────────────────────────────────────────────────
+    upload_btn.click(
+        upload_kb_files,
+        inputs=[upload_input],
+        outputs=[upload_status, kb_file_list],
+    )
+    delete_btn.click(
+        delete_kb_file,
+        inputs=[delete_input],
+        outputs=[delete_status, kb_file_list],
+    )
+    toolbar_upload.change(
+        upload_kb_files,
+        inputs=[toolbar_upload],
+        outputs=[toolbar_upload_status, kb_file_list],
+    )
 
 
 # -----------------------------