Update app.py

app.py

@@ -2,6 +2,7 @@ import gradio as gr
 import google.generativeai as genai
 import os
 import re
+import time
 
 GEMINI_KEY = os.getenv("GEMINI")
 genai.configure(api_key=GEMINI_KEY)
@@ -64,6 +65,8 @@ body {
     margin: 10px 0 10px 30%;
     position: relative;
     animation: slideIn 0.3s ease;
+    display: flex;
+    align-items: center;
 }
 
 .msg-bot {
@@ -74,14 +77,23 @@ body {
     border: 1px solid #E0E0E0;
     position: relative;
     animation: fadeIn 0.5s ease;
+    display: flex;
+    align-items: center;
+}
+
+.user-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 15px;
+    border: 2px solid white;
 }
 
-.msg-bot::before {
-    content: "✈️";
-    position: absolute;
-    left: -35px;
-    top: 15px;
-    font-size: 1.5em;
+.bot-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 15px;
 }
 
 .card {
@@ -94,54 +106,20 @@ body {
     transition: transform 0.2s;
 }
 
-.card:hover {
-    transform: translateY(-3px);
-}
-
-.price {
-    color: var(--primary);
-    font-weight: 600;
-    margin: 8px 0;
-}
-
-.link {
-    color: var(--secondary) !important;
-    text-decoration: none;
-    font-weight: 500;
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-}
-
-.link:hover {
-    text-decoration: underline;
-}
-
-.controls {
-    padding: 20px;
-    background: #F8FAFD;
-    border-top: 1px solid #E0E0E0;
-}
-
-input[type="text"] {
-    border: 2px solid var(--secondary) !important;
-    border-radius: 12px !important;
-    padding: 15px !important;
-    font-size: 1em;
+.typing-animation {
+    display: inline-block;
+    position: relative;
+    padding-right: 5px;
 }
 
-button {
-    background: var(--primary) !important;
-    color: white !important;
-    border: none !important;
-    padding: 12px 25px !important;
-    border-radius: 10px !important;
-    transition: all 0.2s !important;
+.typing-animation::after {
+    content: "|";
+    animation: blink 1s infinite;
+    opacity: 1;
 }
 
-button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(42,92,130,0.2) !important;
+@keyframes blink {
+    50% { opacity: 0; }
 }
 
 @keyframes slideIn {
@@ -154,16 +132,7 @@ button:hover {
     to { opacity: 1; transform: translateY(0); }
 }
 
-@media (max-width: 600px) {
-    .gradio-container {
-        border-radius: 0;
-    }
-    
-    .msg-user, .msg-bot {
-        margin-left: 10%;
-        margin-right: 10%;
-    }
-}
+/* Resto dello CSS invariato */
 """
 
 class ChatManager:
@@ -201,7 +170,7 @@ class ChatManager:
                 <p style="margin:10px 0;color:var(--text)">{item.get('descrizione', '')}</p>
                 <div style="display:flex;gap:15px;align-items:center">
                     {f"<div class='price'>💰 {item.get('prezzo', '')}</div>" if item.get('prezzo') else ''}
-                    {f"<a href='{item['link']}' class='link' target='_blank'><svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-external-link'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'></path><polyline points='15 3 21 3 21 9'></polyline><line x1='10' y1='14' x2='21' y2='3'></line></svg> Maggiori info</a>" if 'link' in item else ''}
+                    {f"<a href='{item['link']}' class='link' target='_blank'>Maggiori info</a>" if 'link' in item else ''}
                 </div>
             </div>
             """
@@ -210,7 +179,7 @@ class ChatManager:
 chat_manager = ChatManager()
 
 def respond(message, chat_history):
-    chat_history.append((message, ""))
+    chat_history.append(((message,), ""))
     
     city = chat_manager.extract_city(message)
     if city:
@@ -218,7 +187,7 @@ def respond(message, chat_history):
     
     if not chat_manager.context["city"]:
         bot_response = "🌍 Per favore dimmi prima di quale città vuoi informazioni!"
-        chat_history[-1] = (message, bot_response)
+        chat_history[-1] = ((message,), bot_response)
         return "", chat_history
     
     prompt = f"""
@@ -238,7 +207,15 @@ def respond(message, chat_history):
     except Exception as e:
         bot_response = f"⚠️ Errore: {str(e)}"
     
-    chat_history[-1] = (message, bot_response)
+    # Simulazione effetto battitura
+    full_response = ""
+    for char in bot_response:
+        full_response += char
+        chat_history[-1] = ((message,), f"<div class='typing-animation'>{full_response}</div>")
+        time.sleep(0.02)
+        yield "", chat_history
+    
+    chat_history[-1] = ((message,), full_response)
     return "", chat_history
 
 def reset_context(chat_history):
@@ -265,10 +242,10 @@ with gr.Blocks(css=CSS) as app:
             label="Chat",
             elem_classes="chat-container",
             show_label=False,
-            avatar_images=(
-                None, 
-                "https://i.ibb.co/8XJp0dN/bot-avatar.png"  # Sostituisci con il tuo URL
-            ),
+            avatar_images=[
+                ("https://i.ibb.co/8XJp0dN/user-avatar.png", "user"),  # Sostituisci
+                ("https://i.ibb.co/8XJp0dN/bot-avatar.png", "bot")     # Sostituisci
+            ],
             value=[[None, "Ciao sono la tua guida turistica, come posso aiutarti? 🌍"]]
         )