Add error handling and try to improve the display in mobile UIs

app.py

@@ -64,12 +64,20 @@ def chat_fn(message, history):
     check_format(history, "messages")
 
     # Create the streaming response
-    stream = client.chat.completions.create(
-        model=model_config.get('MODEL_NAME'),
-        messages=history,
-        temperature=0.8,
-        stream=True
-    )
+    try:
+        stream = client.chat.completions.create(
+            model=model_config.get('MODEL_NAME'),
+            messages=history,
+            temperature=0.8,
+            stream=True
+        )
+    except Exception as e:
+        print(f"Error: {e}")
+        yield gr.ChatMessage(
+            role="assistant",
+            content="😔 The model is unavailable at the moment. Please try again later.",
+        )
+        return
 
     if is_reasoning:
         history.append(gr.ChatMessage(
@@ -149,6 +157,10 @@ with gr.Blocks(theme=gr.themes.Default(primary_hue="green")) as demo:
             padding: 0;
         }
         
+        .chatbot {
+            max-height: 1400px;
+        }
+        
         @media (max-width: 800px) {
             .responsive-row {
                 flex-direction: column;
@@ -160,6 +172,9 @@ with gr.Blocks(theme=gr.themes.Default(primary_hue="green")) as demo:
                 flex-direction: column;
                 align-items: flex-start;
             }
+            .chatbot {
+                max-height: 900px;
+            }
         }
     """)
 
@@ -177,16 +192,18 @@ with gr.Blocks(theme=gr.themes.Default(primary_hue="green")) as demo:
         with gr.Column(scale=4, min_width=0):
             description_html = gr.HTML(description, elem_classes="model-message")
 
-    chat_bot = gr.Chatbot(
+    chatbot = gr.Chatbot(
         type="messages",
         height="calc(100dvh - 280px)",
+        elem_classes="chatbot",
     )
 
     chat_interface = gr.ChatInterface(
         chat_fn,
         description="",
         type="messages",
-        chatbot=chat_bot
+        chatbot=chatbot,
+        fill_height=True,
     )
 
     # Add this line to ensure the model is reset to default on page reload
@@ -197,7 +214,7 @@ with gr.Blocks(theme=gr.themes.Default(primary_hue="green")) as demo:
         # Remove the "Model: " prefix to get the actual model name
         actual_model_name = model_name.replace("Model: ", "")
         desc = setup_model(actual_model_name)
-        chat_bot.clear()  # Critical line
+        chatbot.clear()  # Critical line
         return desc