Upgrade UI

app.py

@@ -3,8 +3,10 @@ import os
 import gradio as gr
 from huggingface_hub import InferenceClient
 from engine.chat import generate_response
-from engine.persona import get_empty_persona, is_persona_empty, validate_persona
+from engine.memory import load_recent_messages
+from engine.persona import get_empty_persona, is_persona_empty, persona_summary, validate_persona
 from engine.prompt_builder import get_avatar_path, load_character
+from engine.suggestions import generate_suggestions
 
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
@@ -30,6 +32,16 @@ char_name = character.get("name", CHARACTER_ID)
 char_role = character.get("identity", {}).get("role", "")
 greeting  = character.get("greeting", "Hello. What do you want?")
 
+# ── Persona state ──────────────────────────────────────────────────────────────
+# Defined before ChatInterface so it can be referenced in additional_inputs
+# AND updated by the sidebar form inside gr.Blocks.
+persona_state = gr.State(get_empty_persona())
+
+# ── Suggestion text states ─────────────────────────────────────────────────────
+# gr.Button value can't be read as input, so we store each suggestion's
+# plain text in a separate gr.State and use that to fill the textbox.
+suggestion_texts = [gr.State("") for _ in range(4)]
+
 # ── Gradio respond function ────────────────────────────────────────────────────
 def respond(
     message:     str,
@@ -71,29 +83,131 @@ chatbot = gr.ChatInterface(
         value=[{"role": "assistant", "content": greeting}],
         label=char_name,
         avatar_images=(None, avatar_path),
-        height=500,
+        height=480,
     ),
     additional_inputs=[
         gr.Slider(minimum=1,   maximum=2048, value=512,  step=1,    label="Max new tokens"),
         gr.Slider(minimum=0.1, maximum=4.0,  value=0.7,  step=0.1,  label="Temperature"),
         gr.Slider(minimum=0.1, maximum=1.0,  value=0.95, step=0.05, label="Top-p"),
-        gr.State(get_empty_persona()),   # persona state — hidden until Phase 9 form is wired
+        persona_state,   # hidden — updated by the sidebar form
     ],
     additional_inputs_accordion=gr.Accordion("⚙️ Settings", open=False),
 )
 
+
+# ── Event handlers ─────────────────────────────────────────────────────────────
+
+def apply_persona_fn(name, age, gender, personality, background):
+    persona = validate_persona({
+        "name": name, "age": age, "gender": gender,
+        "personality": personality, "background": background,
+    })
+    if is_persona_empty(persona):
+        return persona, "*No persona set.*"
+    return persona, f"*✓ Active: {persona_summary(persona)}*"
+
+
+def clear_persona_fn():
+    # Returns: persona_state, 5 form fields, status
+    return get_empty_persona(), "", "", "", "", "", "*Persona cleared.*"
+
+
+def get_suggestions_fn():
+    """Generate 4 reply suggestions from recent conversation memory."""
+    if not HF_TOKEN:
+        return [gr.update(visible=False)] + [gr.update(visible=False)] * 4 + [""] * 4
+
+    recent = load_recent_messages(CHARACTER_ID, max_messages=6)
+    if not recent:
+        return [gr.update(visible=False)] + [gr.update(visible=False)] * 4 + [""] * 4
+
+    client      = InferenceClient(token=HF_TOKEN)
+    suggestions = generate_suggestions(character, recent, client, MODEL)
+
+    group_update = gr.update(visible=True)
+    btn_updates  = [gr.update(value=f"{s['emoji']}  {s['text']}", visible=True) for s in suggestions]
+    text_values  = [s["text"] for s in suggestions]
+
+    return [group_update] + btn_updates + text_values
+
+
+# ── Blocks layout ──────────────────────────────────────────────────────────────
 with gr.Blocks(title=f"Chat with {char_name}") as demo:
+
+    # ── Sidebar ────────────────────────────────────────────────────────────────
     with gr.Sidebar():
-        gr.LoginButton()
+
+        # Character info
         gr.Markdown(f"## {char_name}")
         if char_role:
             gr.Markdown(f"*{char_role}*")
         if avatar_path:
-            gr.Image(value=avatar_path, show_label=False, height=280, container=False)
+            gr.Image(value=avatar_path, show_label=False, height=220, container=False)
         else:
-            gr.Markdown("*No avatar image found.*")
+            gr.Markdown("*No avatar found.*")
+
+        gr.Markdown("---")
+
+        # Persona form
+        gr.Markdown("### 🎭 Your Persona")
+        gr.Markdown("*Define who you're playing — all fields optional.*")
+
+        p_name        = gr.Textbox(label="Name",        placeholder="e.g. Alex")
+        p_age         = gr.Textbox(label="Age",         placeholder="e.g. 28")
+        p_gender      = gr.Textbox(label="Gender",      placeholder="e.g. Female")
+        p_personality = gr.Textbox(label="Personality", placeholder="e.g. curious, skeptical")
+        p_background  = gr.Textbox(
+            label="Background", lines=2,
+            placeholder="e.g. A journalist investigating a disappearance",
+        )
+
+        with gr.Row():
+            apply_btn = gr.Button("Apply", variant="primary", scale=2)
+            clear_btn = gr.Button("Clear", scale=1)
+
+        persona_status = gr.Markdown("")
+
+    # ── Chat area ──────────────────────────────────────────────────────────────
     chatbot.render()
 
+    # ── Suggestion area ────────────────────────────────────────────────────────
+    suggest_btn = gr.Button("💡 Suggest replies", size="sm", variant="secondary")
+
+    with gr.Group(visible=False) as suggestion_group:
+        with gr.Row():
+            s_btns = [
+                gr.Button("", variant="secondary", size="sm", visible=False)
+                for _ in range(4)
+            ]
+
+    # ── Events ─────────────────────────────────────────────────────────────────
+
+    apply_btn.click(
+        fn=apply_persona_fn,
+        inputs=[p_name, p_age, p_gender, p_personality, p_background],
+        outputs=[persona_state, persona_status],
+    )
+
+    clear_btn.click(
+        fn=clear_persona_fn,
+        inputs=[],
+        outputs=[persona_state, p_name, p_age, p_gender, p_personality, p_background, persona_status],
+    )
+
+    suggest_btn.click(
+        fn=get_suggestions_fn,
+        inputs=[],
+        outputs=[suggestion_group] + s_btns + suggestion_texts,
+    )
+
+    # Each suggestion button fills the chat textbox with its stored text
+    for btn, text_state in zip(s_btns, suggestion_texts):
+        btn.click(
+            fn=lambda t: t,
+            inputs=[text_state],
+            outputs=[chatbot.textbox],
+        )
+
 
 if __name__ == "__main__":
     demo.launch()