UI Improvements

app.py

@@ -694,118 +694,61 @@ with gr.Blocks(css=custom_css, theme=theme) as demo:
     """)
 
     # ══════════════════════════════════════════
-    #  TABS
+    #  CHAT
     # ══════════════════════════════════════════
-    with gr.Tabs():
-
-        # ─── CHAT TAB ───
-        with gr.Tab("💬  Chat Assistant"):
-            with gr.Row(equal_height=True):
-
-                # LEFT SIDEBAR
-                with gr.Column(scale=1, elem_classes="sidebar-panel"):
-                    gr.HTML("""
-                    <p class="sidebar-section-title">📌 &nbsp;Supported Topics</p>
-                    <div class="topic-chip"><span class="topic-icon">🏖️</span> Leave Policies</div>
-                    <div class="topic-chip"><span class="topic-icon">🏠</span> Work From Home Rules</div>
-                    <div class="topic-chip"><span class="topic-icon">🕐</span> Attendance Guidelines</div>
-                    <div class="topic-chip"><span class="topic-icon">🎁</span> Employee Benefits</div>
-                    <div class="topic-chip"><span class="topic-icon">📋</span> HR Procedures</div>
-                    <div class="topic-chip"><span class="topic-icon">🔄</span> Probation & Onboarding</div>
-                    <div class="alert-box">
-                        <p>⚠️ &nbsp;This assistant exclusively answers DDS HR handbook questions. For confidential queries, email connect@decodingdatascience.com</p>
-                    </div>
-                    """)
-
-                # RIGHT CHAT PANEL
-                with gr.Column(scale=2, elem_classes="chat-card"):
-                    question = gr.Textbox(
-                        label="Ask Your HR Question",
-                        placeholder="e.g. How do I apply for annual leave? What is the WFH policy?",
-                        lines=3,
-                        elem_classes="ask-box"
-                    )
-
-                    answer = gr.Textbox(
-                        label="DORA's Response",
-                        lines=10,
-                        elem_classes="response-box"
-                    )
-
-                    with gr.Row():
-                        ask_btn = gr.Button("🚀  Send Question", variant="primary", elem_classes="btn-ask")
-                        clear_btn = gr.Button("✕  Clear", elem_classes="btn-clear")
-
-                    gr.Examples(
-                        label="Quick Questions",
-                        examples=[
-                            ["What is the annual leave policy?"],
-                            ["How do I apply for medical leave?"],
-                            ["What are the working hours?"],
-                            ["What is the probation period?"],
-                            ["What is the work from home policy?"],
-                        ],
-                        inputs=question
-                    )
-
-                    ask_btn.click(fn=query_doc, inputs=question, outputs=answer)
-                    question.submit(fn=query_doc, inputs=question, outputs=answer)
-                    clear_btn.click(lambda: ("", ""), outputs=[question, answer])
-
-        # ─── FAQ TAB ───
-        with gr.Tab("❓  FAQs"):
-            gr.HTML("""
-            <div style="max-width:760px;">
-                <p style="font-family:Sora,sans-serif;font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:rgba(99,179,255,0.55);margin-bottom:20px;">Frequently Asked Questions</p>
-
-                <div style="background:rgba(56,130,246,0.07);border:1px solid rgba(56,130,246,0.15);border-radius:12px;padding:18px 20px;margin-bottom:10px;">
-                    <p style="font-size:14px;font-weight:600;color:#a8d4ff;margin-bottom:6px;">What topics can DORA answer?</p>
-                    <p style="font-size:13px;color:rgba(170,205,245,0.65);line-height:1.7;margin:0;">DORA exclusively answers questions based on the DDS HR Handbook — covering leave policies, WFH rules, attendance, benefits, probation, and HR procedures.</p>
+    with gr.Row(equal_height=True):
+
+            # LEFT SIDEBAR
+            with gr.Column(scale=1, elem_classes="sidebar-panel"):
+                gr.HTML("""
+                <p class="sidebar-section-title">📌 &nbsp;Supported Topics</p>
+                <div class="topic-chip"><span class="topic-icon">🏖️</span> Leave Policies</div>
+                <div class="topic-chip"><span class="topic-icon">🏠</span> Work From Home Rules</div>
+                <div class="topic-chip"><span class="topic-icon">🕐</span> Attendance Guidelines</div>
+                <div class="topic-chip"><span class="topic-icon">🎁</span> Employee Benefits</div>
+                <div class="topic-chip"><span class="topic-icon">📋</span> HR Procedures</div>
+                <div class="topic-chip"><span class="topic-icon">🔄</span> Probation & Onboarding</div>
+                <div class="alert-box">
+                    <p>⚠️ &nbsp;This assistant exclusively answers DDS HR handbook questions. For confidential queries, email connect@decodingdatascience.com</p>
                 </div>
+                """)
+
+            # RIGHT CHAT PANEL
+            with gr.Column(scale=2, elem_classes="chat-card"):
+                question = gr.Textbox(
+                    label="Ask Your HR Question",
+                    placeholder="e.g. How do I apply for annual leave? What is the WFH policy?",
+                    lines=3,
+                    elem_classes="ask-box"
+                )
+
+                answer = gr.Textbox(
+                    label="DORA's Response",
+                    lines=10,
+                    elem_classes="response-box"
+                )
+
+                with gr.Row():
+                    ask_btn = gr.Button("🚀  Send Question", variant="primary", elem_classes="btn-ask")
+                    clear_btn = gr.Button("✕  Clear", elem_classes="btn-clear")
+
+                gr.Examples(
+                    label="Quick Questions",
+                    examples=[
+                        ["What is the annual leave policy?"],
+                        ["How do I apply for medical leave?"],
+                        ["What are the working hours?"],
+                        ["What is the probation period?"],
+                        ["What is the work from home policy?"],
+                    ],
+                    inputs=question
+                )
+
+                ask_btn.click(fn=query_doc, inputs=question, outputs=answer)
+                question.submit(fn=query_doc, inputs=question, outputs=answer)
+                clear_btn.click(lambda: ("", ""), outputs=[question, answer])
 
-                <div style="background:rgba(56,130,246,0.07);border:1px solid rgba(56,130,246,0.15);border-radius:12px;padding:18px 20px;margin-bottom:10px;">
-                    <p style="font-size:14px;font-weight:600;color:#a8d4ff;margin-bottom:6px;">Can DORA provide salary or confidential details?</p>
-                    <p style="font-size:13px;color:rgba(170,205,245,0.65);line-height:1.7;margin:0;">No. Salary ranges, performance reviews, and confidential HR data are outside DORA's scope. Please email connect@decodingdatascience.com for such queries.</p>
-                </div>
-
-                <div style="background:rgba(56,130,246,0.07);border:1px solid rgba(56,130,246,0.15);border-radius:12px;padding:18px 20px;margin-bottom:10px;">
-                    <p style="font-size:14px;font-weight:600;color:#a8d4ff;margin-bottom:6px;">What happens if I ask something outside HR?</p>
-                    <p style="font-size:13px;color:rgba(170,205,245,0.65);line-height:1.7;margin:0;">DORA will politely decline and redirect you to the appropriate HR contact, without answering out-of-scope queries.</p>
-                </div>
 
-                <div style="background:rgba(56,130,246,0.07);border:1px solid rgba(56,130,246,0.15);border-radius:12px;padding:18px 20px;margin-bottom:10px;">
-                    <p style="font-size:14px;font-weight:600;color:#a8d4ff;margin-bottom:6px;">Who do I contact for urgent HR issues?</p>
-                    <p style="font-size:13px;color:rgba(170,205,245,0.65);line-height:1.7;margin:0;">📧 connect@decodingdatascience.com — for confidential matters, escalations, or questions outside the handbook.</p>
-                </div>
-
-                <div style="background:rgba(56,130,246,0.07);border:1px solid rgba(56,130,246,0.15);border-radius:12px;padding:18px 20px;margin-bottom:10px;">
-                    <p style="font-size:14px;font-weight:600;color:#a8d4ff;margin-bottom:6px;">How does DORA find answers?</p>
-                    <p style="font-size:13px;color:rgba(170,205,245,0.65);line-height:1.7;margin:0;">DORA uses Retrieval-Augmented Generation (RAG): your question is matched against the DDS HR Handbook stored in Pinecone vector database, and GPT-4o mini generates a precise answer from the retrieved context.</p>
-                </div>
-            </div>
-            """)
-
-        # ─── ABOUT TAB ───
-        with gr.Tab("ℹ️  About"):
-            gr.HTML("""
-            <div style="max-width:720px;">
-                <p style="font-family:Sora,sans-serif;font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:rgba(99,179,255,0.55);margin-bottom:16px;">About This Project</p>
-                <p style="font-size:20px;font-weight:600;color:#c8e0ff;font-family:Sora,sans-serif;margin-bottom:8px;">DORA — DDS Organizational Resources Assistant</p>
-                <p style="font-size:14px;color:rgba(170,205,245,0.6);line-height:1.75;margin-bottom:24px;font-weight:300;">
-                    An enterprise-grade AI chatbot that gives DDS employees instant, accurate access to HR policies — powered by a RAG pipeline built on LlamaIndex, Pinecone, and OpenAI.
-                </p>
-                <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px;">
-                    <div style="background:rgba(56,130,246,0.07);border:1px solid rgba(56,130,246,0.15);border-radius:14px;padding:16px;">
-                        <p style="font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(99,179,255,0.5);font-weight:600;margin-bottom:10px;">✅ Capabilities</p>
-                        <p style="font-size:13px;color:rgba(180,215,255,0.7);line-height:1.8;font-weight:300;">• Instant HR policy answers<br>• Handbook-grounded responses<br>• Semantic vector search<br>• Chain-of-thought reasoning<br>• Polite out-of-scope handling</p>
-                    </div>
-                    <div style="background:rgba(234,179,8,0.05);border:1px solid rgba(234,179,8,0.12);border-radius:14px;padding:16px;">
-                        <p style="font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(252,211,77,0.5);font-weight:600;margin-bottom:10px;">⚙️ Tech Stack</p>
-                        <p style="font-size:13px;color:rgba(200,220,255,0.65);line-height:1.8;font-weight:300;">• LlamaIndex RAG pipeline<br>• Pinecone vector database<br>• GPT-4o mini (OpenAI)<br>• text-embedding-ada-002<br>• Gradio UI + HuggingFace</p>
-                    </div>
-                </div>
-            </div>
-            """)
 
     # ══════════════════════════════════════════
     #  FOOTER
@@ -814,60 +757,60 @@ with gr.Blocks(css=custom_css, theme=theme) as demo:
     <div class="dora-footer">
         <div class="footer-grid">
 
-            <!-- COL 1: Developer -->
-            <div>
-                <p class="footer-col-title">Developer</p>
-                <p class="footer-about-name">Nipun Kavinda</p>
-                <p class="footer-about-role">AI & Data Science Engineer</p>
-                <p class="footer-about-desc">
-                    Building intelligent enterprise solutions at the intersection of LLMs, RAG pipelines, and production-grade AI systems.
-                    Passionate about making AI practical and accessible.
-                </p>
-                <div style="margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;">
-                    <span class="footer-tech-pill">🐍 Python</span>
-                    <span class="footer-tech-pill">🦙 LlamaIndex</span>
-                    <span class="footer-tech-pill">🌲 Pinecone</span>
-                    <span class="footer-tech-pill">🤖 OpenAI</span>
-                </div>
+        <!-- COL 1: Developer -->
+        <div>
+            <p class="footer-col-title">Developer</p>
+            <p class="footer-about-name">Nipun Kavinda</p>
+            <p class="footer-about-role">AI & Data Science Engineer</p>
+            <p class="footer-about-desc">
+                Building intelligent enterprise solutions at the intersection of LLMs, RAG pipelines, and production-grade AI systems.
+                Passionate about making AI practical and accessible.
+            </p>
+            <div style="margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;">
+                <span class="footer-tech-pill">🐍 Python</span>
+                <span class="footer-tech-pill">🦙 LlamaIndex</span>
+                <span class="footer-tech-pill">🌲 Pinecone</span>
+                <span class="footer-tech-pill">🤖 OpenAI</span>
             </div>
+        </div>
 
-            <!-- COL 2: Project -->
-            <div>
-                <p class="footer-col-title">Project</p>
-                <a class="footer-link" href="#">
-                    <span class="link-icon">📁</span> DORA v1.0 — HR Chatbot
-                </a>
-                <a class="footer-link" href="#">
-                    <span class="link-icon">🔗</span> HuggingFace Space
-                </a>
-                <a class="footer-link" href="#">
-                    <span class="link-icon">📄</span> DDS HR Handbook
-                </a>
-                <a class="footer-link" href="mailto:connect@decodingdatascience.com">
-                    <span class="link-icon">✉️</span> connect@decodingdatascience.com
-                </a>
-            </div>
+        <!-- COL 2: Project -->
+        <div>
+            <p class="footer-col-title">Project</p>
+            <a class="footer-link" href="#">
+                <span class="link-icon">📁</span> DORA v1.0 — HR Chatbot
+            </a>
+            <a class="footer-link" href="#">
+                <span class="link-icon">🔗</span> HuggingFace Space
+            </a>
+            <a class="footer-link" href="#">
+                <span class="link-icon">📄</span> DDS HR Handbook
+            </a>
+            <a class="footer-link" href="mailto:connect@decodingdatascience.com">
+                <span class="link-icon">✉️</span> connect@decodingdatascience.com
+            </a>
+        </div>
 
-            <!-- COL 3: Organization -->
-            <div>
-                <p class="footer-col-title">Organization</p>
-                <p style="font-family:Sora,sans-serif;font-size:14px;font-weight:600;color:#a8ceff;margin-bottom:4px;">Decoding Data Science</p>
-                <p style="font-size:12px;color:rgba(140,180,230,0.45);margin-bottom:12px;font-weight:300;">Enterprise AI Division</p>
-                <a class="footer-link" href="https://decodingdatascience.com" target="_blank">
-                    <span class="link-icon">🌐</span> decodingdatascience.com
-                </a>
-                <a class="footer-link" href="mailto:connect@decodingdatascience.com">
-                    <span class="link-icon">📧</span> HR Support Email
-                </a>
-                <div style="margin-top:14px;padding:10px 13px;background:rgba(34,197,94,0.07);border:1px solid rgba(34,197,94,0.15);border-radius:9px;font-size:11.5px;color:rgba(110,231,183,0.7);">
-                    ● &nbsp;System Operational &nbsp;|&nbsp; v1.0.0
-                </div>
+        <!-- COL 3: Organization -->
+        <div>
+            <p class="footer-col-title">Organization</p>
+            <p style="font-family:Sora,sans-serif;font-size:14px;font-weight:600;color:#a8ceff;margin-bottom:4px;">Decoding Data Science</p>
+            <p style="font-size:12px;color:rgba(140,180,230,0.45);margin-bottom:12px;font-weight:300;">Enterprise AI Division</p>
+            <a class="footer-link" href="https://decodingdatascience.com" target="_blank">
+                <span class="link-icon">🌐</span> decodingdatascience.com
+            </a>
+            <a class="footer-link" href="mailto:connect@decodingdatascience.com">
+                <span class="link-icon">📧</span> HR Support Email
+            </a>
+            <div style="margin-top:14px;padding:10px 13px;background:rgba(34,197,94,0.07);border:1px solid rgba(34,197,94,0.15);border-radius:9px;font-size:11.5px;color:rgba(110,231,183,0.7);">
+                ● &nbsp;System Operational &nbsp;|&nbsp; v1.0.0
             </div>
         </div>
+        </div>
 
         <div class="footer-bottom">
-            <span class="footer-copyright">© 2025 Nipun Kavinda · Built for Decoding Data Science Internal HR Support</span>
-            <span class="footer-dds-brand">DDS · DORA · Enterprise AI</span>
+        <span class="footer-copyright">© 2025 Nipun Kavinda · Built for Decoding Data Science Internal HR Support</span>
+        <span class="footer-dds-brand">DDS · DORA · Enterprise AI</span>
         </div>
     </div>
     """)