Update app.py

app.py

@@ -214,21 +214,123 @@ def ask_agent_ui(question):
 # -----------------------------
 # Gradio UI
 # -----------------------------
-with gr.Blocks(title="# 🌊 Dox the Data Professional's Advisor 🤖", theme=gr.themes.Ocean()) as demo:
+# with gr.Blocks(title="# 🌊 Dox the Data Professional's Advisor 🤖", theme=gr.themes.Ocean()) as demo:
+#     gr.Markdown("# 🌊 Dox the Data Professional's Advisor 🤖")
+#     gr.Markdown("🧠 Dox knows about 4 DataCamp cheat sheets: (1️⃣ Hugging Face | 2️⃣ AI Agents | 3️⃣ SQL with AI | 4️⃣ Azure CLI):")
+    
+#     # Create two columns for better layout
+#     with gr.Row():
+#         with gr.Column(scale=3):
+#             question = gr.Textbox(
+#                 label="Ask Dox a question:",
+#                 lines=2,
+#                 scale=9,
+#                 placeholder="🤔 Type your question here..."
+#             )
+            
+#             # Examples section
+#             gr.Markdown("### 💡 Example Questions")
+#             gr.Examples(
+#                 examples=[
+#                     "How do you log into Azure using device code authentication?",
+#                     "What are the three main components of an AI agent?",
+#                     "What are the \"core four\" Hugging Face libraries?",
+#                     "What SQL clause is used to filter data after grouping?"
+#                 ],
+#                 inputs=question,
+#                 label="Example Questions"
+#             )
+            
+#             ask_btn = gr.Button("Submit 📤", variant="primary")
+#             # Define CSS to hide the horizontal scrollbar
+#             css = """
+#             .hide-scrollbar {
+#                 overflow-x: hidden !important;
+#             }
+#             """
+#             gr.Markdown("### ✅ Answer: ")
+#             answer = gr.Markdown(
+#                 label="✅ Answer: ",
+#                 render=True,
+#                 #container=True,
+#                 buttons=['copy'],
+#                 min_height=200#,
+#                 #elem_id="answer_markdown",
+#                 #elem_id="hide-scrollbar"
+#             )
+
+#         # PDF preview column (Output)
+#         with gr.Column(scale=2):
+#             markdown = gr.Markdown("### 📄 Referenced PDF Document will show here: ⤵️")
+#             link_state = gr.State()
+#             show_btn = gr.Button("Show PDF 📄", visible=False, variant="secondary")
+#             output_image = gr.Image(label="PDF Preview (Page 1)", visible=False)
+
+#             gr.Markdown("""
+#             ---
+#             ### 📌 Tips:
+#             - **PDFs automatically appear** when I cite them
+#             - I prioritize my knowledge base then search the web
+#             - Citations include direct links to sources
+#             - Keep questions data/tech related
+#             """, visible=False)
+    
+#     # Ask agent functionality
+#     ask_btn.click(
+#         ask_agent_ui,
+#         inputs=question,
+#         outputs=[answer, link_state, output_image]
+#     ).then(
+#     # Show PDF functionality
+#         display_pdf,
+#         inputs=link_state,
+#         outputs=output_image
+#     )
+    
+#     # # Show PDF functionality
+#     # show_btn.click(
+#     #     display_pdf,
+#     #     inputs=link_state,
+#     #     outputs=output_image
+#     # ).then(
+#     #     lambda: gr.update(visible=True),
+#     #     None,
+#     #     output_image
+#     # )
+
+# if __name__ == "__main__":
+#     demo.launch()
+
+# -----------------------------
+# Gradio UI (Improved)
+# -----------------------------
+with gr.Blocks(
+    title="# 🌊 Dox the Data Professional's Advisor 🤖",
+    theme=gr.themes.Ocean(),
+    css="""
+    .container { max-width: 1200px; margin: auto; }
+    .chatbot { height: 450px; overflow: auto; }
+    """
+) as demo:
+
     gr.Markdown("# 🌊 Dox the Data Professional's Advisor 🤖")
     gr.Markdown("🧠 Dox knows about 4 DataCamp cheat sheets: (1️⃣ Hugging Face | 2️⃣ AI Agents | 3️⃣ SQL with AI | 4️⃣ Azure CLI):")
-    
-    # Create two columns for better layout
+
     with gr.Row():
+
+        # LEFT SIDE (CHAT)
         with gr.Column(scale=3):
+
+            chatbot = gr.Chatbot(label="💬 Conversation", elem_classes="chatbot")
+
             question = gr.Textbox(
                 label="Ask Dox a question:",
-                lines=2,
-                scale=9,
-                placeholder="🤔 Type your question here..."
+                placeholder="🤔 Type your question here...",
+                lines=2
             )
-            
-            # Examples section
+
+            ask_btn = gr.Button("Submit 📤", variant="primary")
+
             gr.Markdown("### 💡 Example Questions")
             gr.Examples(
                 examples=[
@@ -238,65 +340,54 @@ with gr.Blocks(title="# 🌊 Dox the Data Professional's Advisor 🤖", theme=gr
                     "What SQL clause is used to filter data after grouping?"
                 ],
                 inputs=question,
-                label="Example Questions"
-            )
-            
-            ask_btn = gr.Button("Submit 📤", variant="primary")
-            # Define CSS to hide the horizontal scrollbar
-            css = """
-            .hide-scrollbar {
-                overflow-x: hidden !important;
-            }
-            """
-            gr.Markdown("### ✅ Answer: ")
-            answer = gr.Markdown(
-                label="✅ Answer: ",
-                render=True,
-                #container=True,
-                buttons=['copy'],
-                min_height=200#,
-                #elem_id="answer_markdown",
-                #elem_id="hide-scrollbar"
             )
 
-        # PDF preview column (Output)
+        # RIGHT SIDE (PDF PREVIEW)
         with gr.Column(scale=2):
-            markdown = gr.Markdown("### 📄 Referenced PDF Document will show here: ⤵️")
+
+            gr.Markdown("### 📄 Referenced PDF Document")
+
             link_state = gr.State()
-            show_btn = gr.Button("Show PDF 📄", visible=False, variant="secondary")
-            output_image = gr.Image(label="PDF Preview (Page 1)", visible=False)
-
-            gr.Markdown("""
-            ---
-            ### 📌 Tips:
-            - **PDFs automatically appear** when I cite them
-            - I prioritize my knowledge base then search the web
-            - Citations include direct links to sources
-            - Keep questions data/tech related
-            """, visible=False)
-    
-    # Ask agent functionality
+
+            output_image = gr.Image(
+                label="Preview (Page 1)",
+                visible=False
+            )
+
+    # -----------------------------
+    # Chat Logic
+    # -----------------------------
+    def chat_ui(user_message, chat_history):
+        response_text, link = ask_agent(user_message)
+
+        chat_history = chat_history + [[user_message, response_text]]
+
+        return (
+            chat_history,
+            link,
+            gr.update(value=None, visible=False)
+        )
+
     ask_btn.click(
-        ask_agent_ui,
-        inputs=question,
-        outputs=[answer, link_state, output_image]
+        chat_ui,
+        inputs=[question, chatbot],
+        outputs=[chatbot, link_state, output_image]
+    ).then(
+        display_pdf,
+        inputs=link_state,
+        outputs=output_image
+    )
+
+    # Enter key submit
+    question.submit(
+        chat_ui,
+        inputs=[question, chatbot],
+        outputs=[chatbot, link_state, output_image]
     ).then(
-    # Show PDF functionality
         display_pdf,
         inputs=link_state,
         outputs=output_image
     )
-    
-    # # Show PDF functionality
-    # show_btn.click(
-    #     display_pdf,
-    #     inputs=link_state,
-    #     outputs=output_image
-    # ).then(
-    #     lambda: gr.update(visible=True),
-    #     None,
-    #     output_image
-    # )
 
 if __name__ == "__main__":
     demo.launch()