Update app.py

app.py

@@ -1,3 +1,4 @@
+
 import gradio as gr
 import logging
 import os
@@ -7,7 +8,6 @@ from langchain.text_splitter import RecursiveCharacterTextSplitter
 import faiss
 from simple_salesforce import Salesforce
 from dotenv import load_dotenv
-import json
 import zipfile
 from pathlib import Path
 
@@ -181,17 +181,20 @@ def answer_query(query):
         logger.error(f"Error in answer_query: {str(e)}")
         return f"Error: {str(e)}", "", "", ""
 
-# --- Gradio Chatbot UI ---
-def process_question(q):
+# --- Gradio Chatbot UI Design ---
+def process_question(q, chat_history):
     if not q.strip():
-        return "Please enter a question.", "", ""
+        return chat_history + [("User", "Please enter a question.")], "", ""
     
     answer, confidence, source, record_id = answer_query(q)
-    return answer, confidence, source, record_id
+    chat_history.append(("User", q))
+    chat_history.append(("Bot", answer))
+    
+    return chat_history, confidence, source, record_id
 
-# --- Chatbot UI Design (Chat bubble style) ---
+# --- Chatbot UI with dynamic styling using elem_id ---
 with gr.Blocks(title="Company Documents Q&A Chatbot", theme=gr.themes.Soft()) as demo:
-    gr.Markdown("## 📚 Company Documents Q&A Chatbot")
+    gr.Markdown("## 📚 **Company Policies Q&A Chatbot**")
 
     with gr.Row():
         with gr.Column(scale=3):
@@ -199,27 +202,25 @@ with gr.Blocks(title="Company Documents Q&A Chatbot", theme=gr.themes.Soft()) as
                 label="Ask a Question",
                 placeholder="What are the conditions for permanent employment status?",
                 lines=1,
-                interactive=True
+                interactive=True,
+                elem_id="user-question",
+                visible=True
             )
         with gr.Column(scale=1):
-            submit_btn = gr.Button("Submit", variant="primary")
+            submit_btn = gr.Button("Submit", variant="primary", elem_id="submit-btn")
 
     with gr.Row():
         with gr.Column():
-            # Chatbot styled for a more modern chat look with bubbles
-            output_area = gr.HTML(
-                label="Chat", 
+            chat_history = gr.Chatbot(
+                label="Chat History", 
                 elem_id="chatbox",
-                value="""
-                    <div style="padding: 10px; background-color: #f5f5f5; border-radius: 10px;">
-                        <div style="padding: 5px 10px; background-color: #dfe1e6; border-radius: 10px; margin-bottom: 10px;">
-                            <b>User:</b> <span id="user-message"> </span>
-                        </div>
-                        <div style="padding: 5px 10px; background-color: #007bff; color: white; border-radius: 10px;">
-                            <b>Bot:</b> <span id="bot-message"> </span>
-                        </div>
-                    </div>""")
-
-    submit_btn.click(fn=process_question, inputs=question, outputs=[output_area])
+                height=400,  # Set a fixed height
+                show_label=False  # Hide the label to make the chat more clean
+            )
+            conf_out = gr.Markdown(label="Confidence", elem_id="confidence")
+            source_out = gr.Markdown(label="Source Link", elem_id="source-link")
+            record_out = gr.Markdown(label="Salesforce Record ID", elem_id="salesforce-id")
+
+    submit_btn.click(fn=process_question, inputs=[question, chat_history], outputs=[chat_history, conf_out, source_out, record_out])
 
 demo.launch(server_name="0.0.0.0", server_port=7860, share=True)