Update app.py

app.py

@@ -1,15 +1,28 @@
 import gradio as gr
 from datetime import datetime
+import random
 
 # Shared state to store messages
 messages = []
 
+# Generate a random color for each user
+user_colors = {}
+
+def get_user_color(user_id):
+    if user_id not in user_colors:
+        user_colors[user_id] = f"#{random.randint(0, 0xFFFFFF):06x}"
+    return user_colors[user_id]
+
 def chat(message, history):
     global messages
     
+    # Generate a unique user ID (in a real app, this would be managed by authentication)
+    user_id = f"User_{len(user_colors) + 1}"
+    
     # Add the new message to the shared state
     timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
-    messages.append([f"User ({timestamp})", message])
+    user_color = get_user_color(user_id)
+    messages.append([None, f"<span style='color: {user_color};'>{user_id}</span>: {message}<br><small>{timestamp}</small>"])
     
     # Return the updated chat history
     return "", messages
@@ -25,8 +38,8 @@ def get_updates(history):
     return history
 
 # Create the Gradio interface
-with gr.Blocks() as demo:
-    chatbot = gr.Chatbot(label="Chat History")
+with gr.Blocks(css="#chatbot {height: 400px; overflow-y: auto;}") as demo:
+    chatbot = gr.Chatbot(elem_id="chatbot")
     msg = gr.Textbox(label="Type your message here")
     clear = gr.Button("Clear")