Update app.py

app.py

@@ -24,7 +24,7 @@ credential = ClientSecretCredential(
 )
 project = AIProjectClient(credential=credential, endpoint=PROJECT_ENDPOINT)
 
-# ── Lazy agent fetch (so app boots even if Azure is slow) ─────────
+# ── Lazy agent fetch ──────────────────────────────────────────────
 _agent = None
 
 def get_agent():
@@ -36,15 +36,9 @@ def get_agent():
 
 # ── Chat logic ────────────────────────────────────────────────────
 def respond(user_message: str, history: list, thread_state: dict | None):
-    """
-    Gradio calls this for every user message.
-    - Creates a new Azure thread on first message (per session).
-    - Sends user message → runs agent → returns assistant reply.
-    """
     if not user_message.strip():
         return history, thread_state
 
-    # First message in session → create new thread
     if thread_state is None or "thread_id" not in thread_state:
         thread = project.agents.threads.create()
         thread_state = {"thread_id": thread.id}
@@ -54,14 +48,12 @@ def respond(user_message: str, history: list, thread_state: dict | None):
     try:
         agent = get_agent()
 
-        # Send user message
         project.agents.messages.create(
             thread_id=thread_id,
             role="user",
             content=user_message,
         )
 
-        # Run agent
         run = project.agents.runs.create_and_process(
             thread_id=thread_id,
             agent_id=agent.id,
@@ -73,7 +65,6 @@ def respond(user_message: str, history: list, thread_state: dict | None):
                 "Please try again or start a new conversation."
             )
         else:
-            # Get latest assistant message
             messages = project.agents.messages.list(
                 thread_id=thread_id, order=ListSortOrder.DESCENDING
             )
@@ -95,76 +86,117 @@ def respond(user_message: str, history: list, thread_state: dict | None):
 
 
 def new_conversation():
-    """Reset chat history and thread state."""
     return [], None
 
 
-# ── Gradio UI ─────────────────────────────────────────────────────
-DESCRIPTION = """
-# 🤖 Agent Ken — PM + Social Impact Copilot
-
-A **Product Manager Copilot** with a social worker's empathy and harm-reduction lens.  
-Built on Azure AI Foundry Agent Service.
-
-**What I can help with:**
-- 🔍 Product discovery (JTBD, personas, problem statements)
-- 📊 Prioritization (RICE scoring, MoSCoW)
-- 📝 PRDs, user stories, acceptance criteria
-- 🧪 Experiment design (A/B tests, hypothesis templates)
-- 📈 Metrics & OKRs (North Star, funnels, guardrails)
-- 🤝 Stakeholder communication (memos, updates, FAQs)
-- ♿ Inclusive & ethical design considerations
-
----
-*Created by Kendrick Filbert • Powered by Azure AI Foundry*
+# ── CSS ───────────────────────────────────────────────────────────
+CSS = """
+/* Center and constrain width */
+.gradio-container {
+    max-width: 900px !important;
+    margin: 0 auto !important;
+}
+
+/* Hide footer */
+footer { display: none !important; }
+
+/* Header styling */
+.header-section {
+    text-align: center;
+    padding: 16px 0 8px 0;
+}
+.header-section h1 {
+    font-size: 1.5rem;
+    margin-bottom: 4px;
+}
+.header-section p {
+    font-size: 0.85rem;
+    opacity: 0.7;
+    margin: 0;
+}
+
+/* Chat takes priority space */
+.chat-area {
+    flex-grow: 1;
+}
+
+/* Input row */
+.input-row {
+    padding-top: 8px;
+}
+
+/* Compact buttons */
+.action-buttons {
+    display: flex;
+    gap: 8px;
+    justify-content: center;
+    padding: 4px 0;
+}
 """
 
+# ── Examples ──────────────────────────────────────────────────────
 EXAMPLES = [
-    "Help me write a PRD for a mobile mental health check-in feature",
-    "Score these 3 features using RICE: onboarding revamp, dark mode, referral program",
-    "Design an A/B test for our new checkout flow",
-    "What metrics should I track for a community-driven marketplace?",
-    "Help me draft a stakeholder memo about delaying our launch by 2 weeks",
-    "Review this user story for accessibility concerns",
+    ["Help me write a PRD for a mobile mental health check-in feature"],
+    ["Score these 3 features using RICE: onboarding revamp, dark mode, referral program"],
+    ["Design an A/B test for our new checkout flow"],
+    ["What metrics should I track for a community-driven marketplace?"],
+    ["Help me draft a stakeholder memo about delaying our launch by 2 weeks"],
 ]
 
-CSS = """
-.gradio-container { max-width: 850px !important; }
-footer { display: none !important; }
-"""
-
+# ��─ Gradio UI ─────────────────────────────────────────────────────
 with gr.Blocks(title="Agent Ken — PM Copilot") as demo:
 
-    gr.Markdown(DESCRIPTION)
+    # Compact header — no long description eating space
+    gr.HTML("""
+        <div class="header-section">
+            <h1>🤖 Agent Ken — PM + Social Impact Copilot</h1>
+            <p>Product Manager Copilot with harm-reduction lens · Built on Azure AI Foundry</p>
+        </div>
+    """)
 
+    # Chat — main focus, tall
     chatbot = gr.Chatbot(
         label="Agent Ken",
-        height=500,
+        height=550,
+        placeholder="👋 Hi! I'm Agent Ken — your PM + Social Impact Copilot. Ask me anything about product management, strategy, or inclusive design.",
     )
 
-    # State: thread_id per session (not visible to user)
+    # Thread state (invisible)
     thread_state = gr.State(value=None)
 
-    with gr.Row():
+    # Input row — textbox + send button side by side
+    with gr.Row(elem_classes="input-row"):
         msg_input = gr.Textbox(
-            placeholder="Ask Agent Ken anything about product management...",
-            label="Your message",
+            placeholder="Type your message here...",
+            label="",
+            show_label=False,
             scale=5,
             lines=1,
-            max_lines=4,
+            max_lines=3,
+            container=False,
         )
-        send_btn = gr.Button("Send 🚀", variant="primary", scale=1)
+        send_btn = gr.Button("Send 🚀", variant="primary", scale=1, min_width=100)
 
-    with gr.Row():
-        clear_btn = gr.Button("🗑️ New Conversation", variant="secondary")
+    # Action buttons — compact row
+    with gr.Row(elem_classes="action-buttons"):
+        clear_btn = gr.Button("🗑️ New Conversation", variant="secondary", size="sm")
 
-    with gr.Accordion("💡 Example prompts", open=False):
+    # Examples — collapsed, out of the way
+    with gr.Accordion("💡 Try an example", open=False):
         gr.Examples(
             examples=EXAMPLES,
             inputs=msg_input,
+            label="",
         )
 
-    # ── Event bindings ────────────────────────────────────────────
+    # Footer
+    gr.HTML("""
+        <div style="text-align:center; padding:8px 0; font-size:0.75rem; opacity:0.5;">
+            Created by Kendrick Filbert · Powered by Azure AI Foundry
+        </div>
+    """)
+
+    # ── Events ────────────────────────────────────────────────────
     send_btn.click(
         fn=respond,
         inputs=[msg_input, chatbot, thread_state],
@@ -184,4 +216,4 @@ with gr.Blocks(title="Agent Ken — PM Copilot") as demo:
 
 # ── Launch ────────────────────────────────────────────────────────
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860, css=CSS, theme=gr.themes.Soft())
+    demo.launch(server_name="0.0.0.0", server_port=7860, css=CSS, theme=gr.themes.Soft())