Update app.py

app.py

@@ -2,7 +2,6 @@ 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)
@@ -65,8 +64,6 @@ body {
     margin: 10px 0 10px 30%;
     position: relative;
     animation: slideIn 0.3s ease;
-    display: flex;
-    align-items: center;
 }
 
 .msg-bot {
@@ -77,23 +74,14 @@ 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;
 }
 
-.bot-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    margin-right: 15px;
+.msg-bot::before {
+    content: "✈️";
+    position: absolute;
+    left: -35px;
+    top: 15px;
+    font-size: 1.5em;
 }
 
 .card {
@@ -106,20 +94,54 @@ body {
     transition: transform 0.2s;
 }
 
-.typing-animation {
-    display: inline-block;
-    position: relative;
-    padding-right: 5px;
+.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;
 }
 
-.typing-animation::after {
-    content: "|";
-    animation: blink 1s infinite;
-    opacity: 1;
+input[type="text"] {
+    border: 2px solid var(--secondary) !important;
+    border-radius: 12px !important;
+    padding: 15px !important;
+    font-size: 1em;
 }
 
-@keyframes blink {
-    50% { opacity: 0; }
+button {
+    background: var(--primary) !important;
+    color: white !important;
+    border: none !important;
+    padding: 12px 25px !important;
+    border-radius: 10px !important;
+    transition: all 0.2s !important;
+}
+
+button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(42,92,130,0.2) !important;
 }
 
 @keyframes slideIn {
@@ -132,7 +154,16 @@ body {
     to { opacity: 1; transform: translateY(0); }
 }
 
-/* Resto dello CSS invariato */
+@media (max-width: 600px) {
+    .gradio-container {
+        border-radius: 0;
+    }
+    
+    .msg-user, .msg-bot {
+        margin-left: 10%;
+        margin-right: 10%;
+    }
+}
 """
 
 class ChatManager:
@@ -170,7 +201,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'>Maggiori info</a>" if 'link' in item 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 ''}
                 </div>
             </div>
             """
@@ -179,7 +210,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:
@@ -187,7 +218,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"""
@@ -207,15 +238,7 @@ def respond(message, chat_history):
     except Exception as e:
         bot_response = f"⚠️ Errore: {str(e)}"
     
-    # 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)
+    chat_history[-1] = (message, bot_response)
     return "", chat_history
 
 def reset_context(chat_history):
@@ -242,10 +265,10 @@ with gr.Blocks(css=CSS) as app:
             label="Chat",
             elem_classes="chat-container",
             show_label=False,
-            avatar_images=[
-                ("https://i.ibb.co/8XJp0dN/user-avatar.png", "user"),  # Sostituisci
-                ("https://i.ibb.co/8XJp0dN/bot-avatar.png", "bot")     # Sostituisci
-            ],
+            avatar_images=(
+                None, 
+                "https://i.ibb.co/8XJp0dN/bot-avatar.png"  # Sostituisci con il tuo URL
+            ),
             value=[[None, "Ciao sono la tua guida turistica, come posso aiutarti? 🌍"]]
         )