Update app.py

app.py

@@ -7,6 +7,7 @@ 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
 
@@ -180,7 +181,7 @@ def answer_query(query):
         logger.error(f"Error in answer_query: {str(e)}")
         return f"Error: {str(e)}", "", "", ""
 
-# --- Gradio Chatbot UI (No history, just chat bubbles) ---
+# --- Gradio Chatbot UI ---
 def process_question(q):
     if not q.strip():
         return "Please enter a question.", "", ""
@@ -188,28 +189,37 @@ def process_question(q):
     answer, confidence, source, record_id = answer_query(q)
     return answer, confidence, source, record_id
 
-# --- Simple Chatbot UI without history (just bot responses) ---
+# --- Chatbot UI Design (Chat bubble style) ---
 with gr.Blocks(title="Company Documents Q&A Chatbot", theme=gr.themes.Soft()) as demo:
     gr.Markdown("## 📚 Company Documents Q&A Chatbot")
-    
+
     with gr.Row():
         with gr.Column(scale=3):
             question = gr.Textbox(
                 label="Ask a Question",
                 placeholder="What are the conditions for permanent employment status?",
-                lines=1
+                lines=1,
+                interactive=True
             )
         with gr.Column(scale=1):
             submit_btn = gr.Button("Submit", variant="primary")
 
     with gr.Row():
         with gr.Column():
-            # Chatbot UI with user-bot chat-like bubbles
-            answer_out = gr.Markdown(label="Answer")
-            conf_out = gr.Markdown(label="Confidence")
-            source_out = gr.Markdown(label="Source Link")
-            record_out = gr.Markdown(label="Salesforce Record ID")
-
-    submit_btn.click(fn=process_question, inputs=question, outputs=[answer_out, conf_out, source_out, record_out])
+            # Chatbot styled for a more modern chat look with bubbles
+            output_area = gr.HTML(
+                label="Chat", 
+                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])
 
 demo.launch(server_name="0.0.0.0", server_port=7860, share=True)