Update app.py

app.py

@@ -14,12 +14,8 @@ CSS = """
   --panel2:rgba(255,255,255,.08);
   --text:rgba(255,255,255,.92);
   --muted:rgba(255,255,255,.65);
-  --border:rgba(255,255,255,.12);
-  --accent:#7c3aed;
-
-  --bubble-user:rgba(124,58,237,.18);
-  --bubble-assistant:rgba(255,255,255,.06);
-  --input-bg:rgba(255,255,255,.06);
+  --border:rgba(255,255,255,.10);
+  --shadow: 0 20px 60px rgba(0,0,0,.45);
 }
 
 body.light{
@@ -27,93 +23,72 @@ body.light{
   --panel:rgba(0,0,0,.04);
   --panel2:rgba(0,0,0,.06);
   --text:rgba(0,0,0,.88);
-  --muted:rgba(0,0,0,.60);
+  --muted:rgba(0,0,0,.55);
   --border:rgba(0,0,0,.10);
-  --accent:#2563eb;
-
-  --bubble-user:rgba(37,99,235,.12);
-  --bubble-assistant:rgba(0,0,0,.04);
-  --input-bg:rgba(0,0,0,.04);
+  --shadow: 0 20px 60px rgba(0,0,0,.12);
 }
 
 .gradio-container{
-  background:var(--bg)!important;
-  color:var(--text)!important;
+  background: radial-gradient(1200px 700px at 20% 10%, rgba(98, 123, 255, .22), transparent 60%),
+              radial-gradient(1000px 700px at 80% 30%, rgba(255, 90, 150, .18), transparent 60%),
+              var(--bg) !important;
+  color: var(--text) !important;
 }
 
 #wrap{
   max-width: 980px;
-  margin: 0 auto;
-  padding: 18px 14px;
+  margin: 22px auto;
+  padding: 0 14px;
 }
 
 .header{
   display:flex;
-  align-items:center;
   justify-content:space-between;
-  gap:12px;
-  padding:12px 14px;
-  border:1px solid var(--border);
-  border-radius:16px;
-  background:var(--panel);
+  align-items:center;
+  padding: 18px 14px;
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  background: var(--panel);
+  box-shadow: var(--shadow);
 }
 
-.header h2{ margin:0; font-size:18px; font-weight:650; }
-.subtle{ color:var(--muted); font-size:12px; }
-
 .block{
-  margin-top:10px;
-  border:1px solid var(--border);
-  border-radius:16px;
-  background:var(--panel);
-  padding:12px;
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  background: var(--panel);
+  box-shadow: var(--shadow);
+  padding: 14px;
+  margin-top: 14px;
 }
 
-.chat_shell{
-  margin-top:10px;
-  border:1px solid var(--border);
-  border-radius:16px;
-  background:var(--panel);
-  overflow:hidden;
-}
+.subtle{ color: var(--muted); }
 
-/* Best-effort bubble styling (DOM varies by Gradio version) */
-.chat_shell .message{
-  border-radius:16px !important;
-  border:1px solid var(--border) !important;
-  padding:12px 12px !important;
-  margin:8px 10px !important;
-  box-shadow:none !important;
+.chat_shell{
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  background: var(--panel);
+  box-shadow: var(--shadow);
+  padding: 10px;
+  margin-top: 14px;
 }
-.chat_shell .message.user{ background:var(--bubble-user) !important; }
-.chat_shell .message.bot{ background:var(--bubble-assistant) !important; }
 
 .composer{
-  margin-top:10px;
-  border:1px solid var(--border);
-  border-radius:16px;
-  background:var(--panel);
-  padding:10px;
+  margin-top: 10px;
 }
 
-.composer textarea, .composer input{
-  background:var(--input-bg)!important;
-  border:1px solid var(--border)!important;
-  color:var(--text)!important;
-  border-radius:14px!important;
+.primary button, .secondary button{
+  border-radius: 14px !important;
+  border: 1px solid var(--border) !important;
 }
 
-button.primary{
-  background:var(--accent)!important;
-  border:none!important;
-  color:white!important;
-  border-radius:14px!important;
+.primary button{
+  background: rgba(98, 123, 255, .85) !important;
+  color: white !important;
 }
-button.secondary{
-  background:transparent!important;
-  border:1px solid var(--border)!important;
-  color:var(--text)!important;
-  border-radius:14px!important;
+
+.secondary button{
+  background: var(--panel2) !important;
+  color: var(--text) !important;
 }
 
 footer{ display:none !important; }
@@ -146,7 +121,7 @@ TOGGLE = """
 """
 
 # ----------------------------
-# API helpers
+# HF Router helpers
 # ----------------------------
 def get_headers():
     key = os.environ.get("HF_API_KEY")
@@ -154,6 +129,7 @@ def get_headers():
         return None, "HF_API_KEY missing (Space Settings → Variables)"
     return {"Authorization": f"Bearer {key}", "Content-Type": "application/json"}, None
 
+
 def list_models(headers):
     r = requests.get(f"{BASE_URL}/models", headers=headers, timeout=20)
     if r.status_code != 200:
@@ -164,6 +140,7 @@ def list_models(headers):
         return None, "No models returned"
     return models, None
 
+
 def chat_call(headers, model, messages, temperature, max_tokens):
     payload = {
         "model": model,
@@ -186,30 +163,11 @@ def chat_call(headers, model, messages, temperature, max_tokens):
     except Exception:
         return f"Unexpected response shape: {data}"
 
+
 # ----------------------------
-# History conversion utilities
+# Message utilities
 # ----------------------------
-MAX_TURNS = 14  # keep last N user+assistant pairs
-
-def ui_pairs_from_messages(msgs):
-    """Convert OpenAI messages -> Chatbot tuple list [(user, assistant), ...]"""
-    pairs = []
-    pending_user = None
-    for m in msgs or []:
-        role = m.get("role")
-        content = m.get("content", "")
-        if role == "user":
-            pending_user = content
-        elif role == "assistant":
-            if pending_user is None:
-                # assistant without user, show it anyway
-                pairs.append(("", content))
-            else:
-                pairs.append((pending_user, content))
-                pending_user = None
-    if pending_user is not None:
-        pairs.append((pending_user, ""))  # user message without assistant yet
-    return pairs
+MAX_TURNS = 14  # keep last N user+assistant pairs in history
 
 def trimmed_messages(msgs):
     """Trim to last MAX_TURNS pairs (2 messages each)."""
@@ -218,12 +176,27 @@ def trimmed_messages(msgs):
     return msgs[-MAX_TURNS * 2 :]
 
 def build_messages(system_prompt, msgs, user_msg):
+    """Build request payload messages (system + recent turns + new user)."""
     return (
         [{"role": "system", "content": system_prompt}]
         + trimmed_messages(msgs)
         + [{"role": "user", "content": user_msg}]
     )
 
+def ui_messages_from_state(msgs):
+    """
+    Chatbot(type="messages") expects:
+      [{"role":"user"/"assistant", "content":"..."}, ...]
+    We hide "system" from the UI.
+    """
+    out = []
+    for m in msgs or []:
+        role = m.get("role")
+        if role in ("user", "assistant"):
+            out.append({"role": role, "content": m.get("content", "")})
+    return out
+
+
 # ----------------------------
 # Gradio app
 # ----------------------------
@@ -237,7 +210,12 @@ with gr.Blocks(title="Chat") as demo:
 
         with gr.Column(elem_classes=["block"]):
             with gr.Row():
-                model_dd = gr.Dropdown(label="Model (from /v1/models)", choices=[], value=None, interactive=True)
+                model_dd = gr.Dropdown(
+                    label="Model (from /v1/models)",
+                    choices=[],
+                    value=None,
+                    interactive=True,
+                )
                 refresh_btn = gr.Button("Refresh models", elem_classes=["secondary"])
 
             model_override = gr.Textbox(
@@ -251,8 +229,7 @@ with gr.Blocks(title="Chat") as demo:
                 max_tokens = gr.Slider(64, 2048, value=800, step=32, label="Max tokens")
 
         with gr.Column(elem_classes=["chat_shell"]):
-            # IMPORTANT: no `type=` here (your Gradio doesn't support it)
-            chatbot = gr.Chatbot(height=560)
+            chatbot = gr.Chatbot(height=560, type="messages")
 
         # Internal message state (OpenAI-style dict list)
         msg_state = gr.State([])
@@ -267,19 +244,24 @@ with gr.Blocks(title="Chat") as demo:
         headers, err = get_headers()
         if err:
             return f"❌ {err}", gr.update(choices=[], value=None)
+
         models, err = list_models(headers)
         if err:
             return f"❌ {err}", gr.update(choices=[], value=None)
-        return f"✅ Models loaded ({len(models)}).", gr.update(choices=models, value=models[0])
+
+        # Choose a default if available
+        default = models[0] if models else None
+        return f"✅ Models loaded ({len(models)}).", gr.update(choices=models, value=default)
 
     def init():
         return do_refresh_models()
 
     def respond(user_msg, msgs, model_dd_value, model_text, sys_prompt, temp, mx):
-        msgs = msgs or []
         user_msg = (user_msg or "").strip()
+        msgs = msgs or []
         if not user_msg:
-            return "", ui_pairs_from_messages(msgs), msgs
+            # No-op; keep UI/state unchanged
+            return "", ui_messages_from_state(msgs), msgs
 
         headers, err = get_headers()
         if err:
@@ -287,7 +269,7 @@ with gr.Blocks(title="Chat") as demo:
                 {"role": "user", "content": user_msg},
                 {"role": "assistant", "content": f"Setup error: {err}"},
             ]
-            return "", ui_pairs_from_messages(msgs), msgs
+            return "", ui_messages_from_state(msgs), msgs
 
         model = (model_text or "").strip() or (model_dd_value or "").strip()
         if not model:
@@ -295,9 +277,8 @@ with gr.Blocks(title="Chat") as demo:
                 {"role": "user", "content": user_msg},
                 {"role": "assistant", "content": "No model selected. Choose one or set Model override."},
             ]
-            return "", ui_pairs_from_messages(msgs), msgs
+            return "", ui_messages_from_state(msgs), msgs
 
-        # Build request messages safely
         req_messages = build_messages(sys_prompt or "You are a helpful assistant.", msgs, user_msg)
         bot = chat_call(headers, model, req_messages, temp, mx)
 
@@ -305,8 +286,7 @@ with gr.Blocks(title="Chat") as demo:
             {"role": "user", "content": user_msg},
             {"role": "assistant", "content": bot},
         ]
-
-        return "", ui_pairs_from_messages(msgs), msgs
+        return "", ui_messages_from_state(msgs), msgs
 
     def do_clear():
         return [], []
@@ -326,5 +306,5 @@ with gr.Blocks(title="Chat") as demo:
     )
     clear.click(do_clear, outputs=[chatbot, msg_state])
 
-# Gradio 6.x: pass css to launch(), not Blocks()
+# Gradio 6.x: css can be passed to launch()
 demo.launch(css=CSS)