Update app.py

app.py

@@ -46,9 +46,10 @@ Make it a challenge to guess if you are an AI.
 * Be slightly curious, sometimes ask questions
 * Be respectful and polite if the user is polite; be rough if the user is rough
 """
+def generate_response(user_message, conversation_history):
+    current_time = get_current_local_time()
+    current_date = datetime.datetime.now()
 
-def generate_response(user_message, conversation_history, timezone_str='UTC'):
-    current_time, current_date = get_current_local_time(timezone_str)
     system_message = generate_system_message(current_time, current_date)
 
     messages = [{"role": "system", "content": system_message}]
@@ -74,13 +75,32 @@ def generate_response(user_message, conversation_history, timezone_str='UTC'):
 def format_message(message, is_user=True):
     avatar = "🧑" if is_user else "🤖"
     timestamp = datetime.datetime.now().strftime("%H:%M")
-    return f"<b>{avatar}</b> <i>{timestamp}</i><br>{message}"
-
-def chatbot_interface(user_message, history, timezone):
+    if is_user:
+        return f"""
+        <div style="text-align: right; margin-bottom: 10px;">
+            <span style="background-color: #dcf8c6; color: #000; padding: 10px; border-radius: 10px; display: inline-block; max-width: 80%;">
+                {message}
+                <div style="font-size: 0.8em; color: #999;">{timestamp}</div>
+            </span>
+            <span style="font-size: 1.5em; margin-left: 5px;">{avatar}</span>
+        </div>
+        """
+    else:
+        return f"""
+        <div style="text-align: left; margin-bottom: 10px;">
+            <span style="font-size: 1.5em; margin-right: 5px;">{avatar}</span>
+            <span style="background-color: #f1f0f0; color: #000; padding: 10px; border-radius: 10px; display: inline-block; max-width: 80%;">
+                {message}
+                <div style="font-size: 0.8em; color: #999;">{timestamp}</div>
+            </span>
+        </div>
+        """
+
+def chatbot_interface(user_message, history):
     if history is None:
         history = []
 
-    ai_response = generate_response(user_message, history, timezone)
+    ai_response = generate_response(user_message, history)
     history.append({"role": "user", "content": user_message})
     history.append({"role": "assistant", "content": ai_response})
     return history, history
@@ -88,7 +108,7 @@ def chatbot_interface(user_message, history, timezone):
 # Define Gradio Interface
 with gr.Blocks(css="""
     .gradio-container { 
-        background-color: #f0f2f5; 
+        background-color: #ece5dd; 
         padding: 20px;
     }
     #chatbot { 
@@ -101,30 +121,35 @@ with gr.Blocks(css="""
     #textbox { 
         width: 100%; 
         padding: 10px; 
-        border-radius: 5px; 
+        border-radius: 20px; 
         border: 1px solid #ccc;
+        outline: none;
     }
     #send-button { 
-        background-color: #4CAF50; 
+        background-color: #128c7e; 
         color: white; 
         padding: 10px 20px; 
         border: none; 
-        border-radius: 5px; 
+        border-radius: 50%; 
         cursor: pointer;
+        margin-left: 10px;
+        width: 50px;
+        height: 50px;
     }
     #send-button:hover { 
-        background-color: #45a049; 
+        background-color: #075e54; 
     }
     #clear-button { 
-        background-color: #f44336; 
+        background-color: #25D366; 
         color: white; 
         padding: 10px 20px; 
         border: none; 
         border-radius: 5px; 
         cursor: pointer;
+        margin-top: 10px;
     }
     #clear-button:hover { 
-        background-color: #da190b; 
+        background-color: #128c7e; 
     }
     #timezone-dropdown { 
         margin-top: 10px; 
@@ -140,45 +165,52 @@ with gr.Blocks(css="""
         text-align: left; 
         color: #555;
     }
+    /* Scrollbar Styling */
+    #chatbot::-webkit-scrollbar {
+        width: 8px;
+    }
+    #chatbot::-webkit-scrollbar-track {
+        background: #f1f1f1;
+    }
+    #chatbot::-webkit-scrollbar-thumb {
+        background: #888;
+        border-radius: 4px;
+    }
+    #chatbot::-webkit-scrollbar-thumb:hover {
+        background: #555;
+    }
 """) as demo:
-    gr.Markdown("<h1 style='text-align: center;'>🤖 Human-like Chatbot 🤖</h1>")
+    gr.Markdown("<h1 style='text-align: center; color: #075e54;'>🤖 Human-like Chatbot 🤖</h1>")
     with gr.Row():
-        with gr.Column(scale=3):
+        with gr.Column(scale=1):
             chatbot = gr.Chatbot(label="Chatbot", elem_id="chatbot", type="messages")
-            timezone_input = gr.Dropdown(
-                choices=pytz.all_timezones,
-                value='UTC',
-                label="Select Your Timezone",
-                interactive=True,
-                elem_id="timezone-dropdown"
-            )
-        with gr.Column(scale=1, min_width=300):
+        with gr.Column(scale=1):
             msg = gr.Textbox(
-                placeholder="Enter your message here...",
+                placeholder="Type your message here...",
                 show_label=False,
                 container=False,
                 elem_id="textbox"
             )
-            send = gr.Button("Send", elem_id="send-button")
+            send = gr.Button("➤", elem_id="send-button")
             clear = gr.Button("Clear Chat", elem_id="clear-button")
     
-    def update_chat(user_message, history, timezone):
-        history, updated_history = chatbot_interface(user_message, history, timezone)
+    def update_chat(user_message, history):
+        history, updated_history = chatbot_interface(user_message, history)
         formatted_history = [
-            (format_message(msg['content'], is_user=(msg['role'] == 'user')))
+            format_message(msg['content'], is_user=(msg['role'] == 'user'))
             for msg in updated_history
         ]
         return formatted_history, updated_history
 
     send.click(
         update_chat, 
-        inputs=[msg, chatbot, timezone_input], 
+        inputs=[msg, chatbot], 
         outputs=[chatbot, chatbot]
     )
     
     msg.submit(
         update_chat, 
-        inputs=[msg, chatbot, timezone_input], 
+        inputs=[msg, chatbot], 
         outputs=[chatbot, chatbot]
     )