Update app.py

app.py

@@ -92,37 +92,121 @@ def chat_interface(user_input):
 
 # ---- Gradio App Setup ----
 import gradio as gr
-
-auth = ("Tej", "186281mps", "ACC", "HIPE")
+import datetime
 
 with gr.Blocks() as app:
-    gr.Markdown("# **Autistic Assistant vß Edition 2024 Ultra: Gertrude's Autistic Experience**")
-    
-    with gr.Row():
-        with gr.Column(scale=1):
-            user_input = gr.Textbox(label="What will you say to Gertrude?", placeholder="Type something here...")
-            submit_button = gr.Button("Send")
-        with gr.Column(scale=1):
-            chatbot = gr.Textbox(label="Gertrude's Response", interactive=False)  # This is now a Textbox for output
-
-    # Adding custom styling for the UI
+    gr.Markdown("# **Gertrude**")
+
+    # Chat history container
+    chatbot = gr.HTML(value="<div id='chat-box'></div>", elem_id="chat-output", interactive=False)
+    user_input = gr.Textbox(label="", placeholder="Type a message...", lines=1)
+    submit_button = gr.Button("Send")
+
+    # Custom CSS for text message bubbles and layout
     gr.HTML("""
-        <style>
-            .gradio-container { 
-                background-color: #B3D9FF; 
-                padding: 20px; 
-                border-radius: 15px; 
-                font-family: 'Comic Sans MS'; 
-            }
-            .gradio-row { 
-                display: flex;
-                justify-content: space-between;
-            }
-        </style>
+    <style>
+        #chat-output {
+            background-color: #f0f0f0;
+            border: 1px solid #ccc;
+            border-radius: 10px;
+            height: 500px;
+            overflow-y: auto;
+            padding: 15px;
+            font-family: Arial, sans-serif;
+        }
+        .chat-bubble {
+            display: inline-block;
+            padding: 10px 15px;
+            border-radius: 20px;
+            margin: 5px 0;
+            max-width: 70%;
+            word-wrap: break-word;
+        }
+        .user-bubble {
+            background-color: #DCF8C6; /* WhatsApp light green */
+            float: right;
+            text-align: left;
+            margin-right: 10px;
+            clear: both;
+        }
+        .bot-bubble {
+            background-color: #FFFFFF; /* White for bot responses */
+            border: 1px solid #E1E1E1; 
+            float: left;
+            text-align: left;
+            margin-left: 10px;
+            clear: both;
+        }
+        .timestamp {
+            font-size: 10px;
+            color: #888;
+            margin: 2px 0 10px;
+        }
+        .typing {
+            font-style: italic;
+            color: #888;
+            margin: 5px;
+            animation: blink 1.5s step-start 0s infinite;
+        }
+        @keyframes blink {
+            50% { opacity: 0; }
+        }
+    </style>
     """)
 
+    # Chat logic with message timestamps
+    chat_history = []
+
+    def update_chat(user_message):
+        # Generate timestamp
+        timestamp = datetime.datetime.now().strftime("%I:%M %p")
+
+        # Add user message to the chat history
+        user_bubble = f"""
+        <div class='chat-bubble user-bubble'>
+            {user_message}
+            <div class='timestamp'>{timestamp}</div>
+        </div>
+        """
+        chat_history.append(user_bubble)
+
+        # Add bot "typing..." indicator
+        typing_indicator = """
+        <div class='chat-bubble bot-bubble typing'>Gertrude is typing...</div>
+        """
+        chat_history.append(typing_indicator)
+        
+        # Display chat history with typing indicator
+        chat_html = "".join(chat_history)
+        yield gr.HTML.update(value=f"<div id='chat-box'>{chat_html}</div>")
+
+        # Generate bot response and update the chat
+        bot_response = advanced_agi_chat(user_message)
+        chat_history.pop()  # Remove typing indicator
+        bot_bubble = f"""
+        <div class='chat-bubble bot-bubble'>
+            {bot_response}
+            <div class='timestamp'>{timestamp}</div>
+        </div>
+        """
+        chat_history.append(bot_bubble)
+        
+        # Update chat history with final bot response
+        chat_html = "".join(chat_history)
+        yield gr.HTML.update(value=f"<div id='chat-box'>{chat_html}")
+
+    # Connect button click with the chat logic
+    submit_button.click(
+        update_chat, 
+        inputs=user_input, 
+        outputs=chatbot, 
+        queue=True
+    )
+
+
+
     # Setting the button click event
-    submit_button.click(chat_interface, inputs=user_input, outputs=chatbot)
+
 
 # Launch the Gradio app
 app.launch()