Update app.py - Gradio UI Improvements

app.py

@@ -82,37 +82,106 @@ def get_references(query):
     return retrieve_with_metadata(query)["references"]
 
 # Gradio UI
+# def chat_interface(message, history):
+#     history = history or []
+#     history.append(("🧑 You: " + message, "⏳ Generating response..."))
+#     try:
+#         answer = rag_chain.invoke(message)
+#         references = get_references(message)
+#         if references:
+#             ref = references[0]
+#             ref_string = f"\n\n📚 **Reference:**\nSection: {ref['section']}\nURL: {ref['source']}"
+#         else:
+#             ref_string = "\n\n📚 **Reference:**\n_None available_"
+#         full_response = answer + ref_string
+#         history[-1] = ("🧑 You: " + message, "🤖 Bot: " + full_response)
+#     except Exception as e:
+#         history[-1] = ("🧑 You: " + message, f"🤖 Bot: ⚠️ {str(e)}")
+#     return history, history
+from datetime import datetime
+import time
+
 def chat_interface(message, history):
     history = history or []
-    history.append(("🧑 You: " + message, "⏳ Generating response..."))
+
+    # 🕒 Timestamp for user
+    timestamp = datetime.now().strftime("%H:%M:%S")
+    user_msg = f"🧑 **You**\n{message}\n\n<span style='font-size: 0.8em; color: gray;'>⏱️ {timestamp}</span>"
+
+    # ⏳ Show typing indicator
+    bot_msg = "⏳ _Bot is typing..._"
+    history.append((user_msg, bot_msg))
+
     try:
+        # 💬 Optional: simulate typing delay (cosmetic only)
+        time.sleep(0.5)
+
+        # RAG response generation
         answer = rag_chain.invoke(message)
         references = get_references(message)
+
         if references:
             ref = references[0]
             ref_string = f"\n\n📚 **Reference:**\nSection: {ref['section']}\nURL: {ref['source']}"
         else:
             ref_string = "\n\n📚 **Reference:**\n_None available_"
+
         full_response = answer + ref_string
-        history[-1] = ("🧑 You: " + message, "🤖 Bot: " + full_response)
+
+        # 🕒 Timestamp for bot
+        timestamp_bot = datetime.now().strftime("%H:%M:%S")
+        bot_response = f"🤖 **Bot**\n{full_response}\n\n<span style='font-size: 0.8em; color: gray;'>⏱️ {timestamp_bot}</span>"
+
+        # Replace typing placeholder
+        history[-1] = (user_msg, bot_response)
+
     except Exception as e:
-        history[-1] = ("🧑 You: " + message, f"🤖 Bot: ⚠️ {str(e)}")
-    return history, history
+        timestamp_bot = datetime.now().strftime("%H:%M:%S")
+        error_msg = f"🤖 **Bot**\n⚠️ {str(e)}\n\n<span style='font-size: 0.8em; color: gray;'>⏱️ {timestamp_bot}</span>"
+        history[-1] = (user_msg, error_msg)
+
+    return history, history, ""  # clear input box
 
+
+# def launch_gradio():
+#     with gr.Blocks() as demo:
+#         gr.Markdown("# 💬 ImageOnline RAG Chatbot")
+#         gr.Markdown("Ask about Website Designing, Web Development, App Development, About Us, Testimonials etc.")
+#         chatbot = gr.Chatbot()
+#         state = gr.State([])
+#         with gr.Row():
+#             msg = gr.Textbox(placeholder="Ask your question here...", show_label=False, scale=8)
+#             send_btn = gr.Button("📨 Send", scale=1)
+#         msg.submit(chat_interface, inputs=[msg, state], outputs=[chatbot, state])
+#         send_btn.click(chat_interface, inputs=[msg, state], outputs=[chatbot, state])
+#         with gr.Row():
+#             clear_btn = gr.Button("🧹 Clear Chat")
+#             clear_btn.click(fn=lambda: ([], []), outputs=[chatbot, state])
+#     return demo
 def launch_gradio():
     with gr.Blocks() as demo:
         gr.Markdown("# 💬 ImageOnline RAG Chatbot")
         gr.Markdown("Ask about Website Designing, Web Development, App Development, About Us, Testimonials etc.")
+
         chatbot = gr.Chatbot()
         state = gr.State([])
+
         with gr.Row():
-            msg = gr.Textbox(placeholder="Ask your question here...", show_label=False, scale=8)
+            msg = gr.Textbox(
+                placeholder="Ask your question here...",
+                show_label=False,
+                scale=8
+            )
             send_btn = gr.Button("📨 Send", scale=1)
-        msg.submit(chat_interface, inputs=[msg, state], outputs=[chatbot, state])
-        send_btn.click(chat_interface, inputs=[msg, state], outputs=[chatbot, state])
+
+        # 🔄 Trigger chat and clear input
+        msg.submit(chat_interface, inputs=[msg, state], outputs=[chatbot, state, msg])
+        send_btn.click(chat_interface, inputs=[msg, state], outputs=[chatbot, state, msg])
+
         with gr.Row():
             clear_btn = gr.Button("🧹 Clear Chat")
             clear_btn.click(fn=lambda: ([], []), outputs=[chatbot, state])
+
     return demo
 
 demo = launch_gradio()