feat: improve conversation readability

app.py

@@ -163,83 +163,142 @@ def build_recap_html(hadm_id: str, model: str, cefr: str, personality: str, reca
     )
 
 
-
-def _row(label: str, val) -> str:
+# ---------------------------------------------------------------------------
+# Profile HTML helpers (card-based layout matching recap style)
+# ---------------------------------------------------------------------------
+def _profile_item(label: str, val) -> str:
+    """Build a single key-value item inside a profile card."""
     safe_val = html.escape(str(val)) if val not in (None, "") else "N/A"
     safe_label = html.escape(str(label))
     return (
-        f"<tr>"
-        f"<td style='padding:3px 8px;white-space:nowrap;vertical-align:top'><b>{safe_label}:</b></td>"
-        f"<td style='padding:3px 8px'>{safe_val}</td>"
-        f"</tr>"
+        f"<div style='display:flex;gap:6px;padding:5px 0;"
+        f"border-bottom:1px solid #f3f4f6;font-size:13px;line-height:1.5'>"
+        f"<span style='color:#6b7280;white-space:nowrap;min-width:110px;"
+        f"font-weight:500'>{safe_label}</span>"
+        f"<span style='color:#1f2937;flex:1'>{safe_val}</span>"
+        f"</div>"
     )
 
 
-def _section(title: str, rows_html: str) -> str:
+def _profile_card(icon: str, title: str, items_html: str, accent: str = "#3b82f6") -> str:
+    """Build a styled card section for the profile panel."""
     return (
-        f"<div style='font-weight:bold;color:#2c3e50;border-bottom:1px solid #ccc;"
-        f"margin:10px 0 4px;padding-bottom:2px'>{title}</div>"
-        f"<table style='border-collapse:collapse;font-size:13px;margin-bottom:4px'>"
-        f"{rows_html}</table>"
+        f"<div style='background:var(--background-fill-primary,#fff);"
+        f"border:1px solid var(--border-color-primary,#e5e7eb);border-radius:10px;"
+        f"padding:14px 16px;margin-bottom:10px'>"
+        f"<div style='display:flex;align-items:center;gap:8px;margin-bottom:10px;"
+        f"padding-bottom:8px;border-bottom:2px solid {accent}'>"
+        f"<span style='font-size:16px'>{icon}</span>"
+        f"<span style='font-size:13px;font-weight:600;letter-spacing:0.03em;"
+        f"text-transform:uppercase;color:{accent}'>{html.escape(title)}</span>"
+        f"</div>"
+        f"{items_html}"
+        f"</div>"
     )
 
 
 def build_profile_html(p: dict) -> str:
-    basic = (
-        "<h3 style='margin:0 0 6px'>Patient Profile</h3>"
-        f"<table style='border-collapse:collapse;font-size:14px;margin-bottom:4px'>"
-        f"{_row('Age', p.get('age'))}"
-        f"{_row('Gender', p.get('gender'))}"
-        f"{_row('Race', p.get('race'))}"
-        f"{_row('Arrival Transport', p.get('arrival_transport'))}"
-        f"</table>"
+    hadm_id = p.get("hadm_id", "")
+    avatar_url = _PATIENT_AVATAR_URLS.get(hadm_id, list(_PATIENT_AVATAR_URLS.values())[0])
+    safe_avatar = html.escape(avatar_url)
+
+    # Header with avatar
+    header = (
+        f"<div style='text-align:center;margin-bottom:14px'>"
+        f"<img src='{safe_avatar}' style='width:52px;height:52px;border-radius:50%;"
+        f"background:#f3f4f6;padding:3px;margin-bottom:6px' alt='Patient'>"
+        f"<div style='font-size:15px;font-weight:600;color:#1f2937'>Patient Profile</div>"
+        f"</div>"
+    )
+
+    basic = _profile_card("👤", "Demographics",
+        _profile_item("Age", p.get("age"))
+        + _profile_item("Gender", p.get("gender"))
+        + _profile_item("Race", p.get("race"))
+        + _profile_item("Transport", p.get("arrival_transport")),
+        accent="#3b82f6",
     )
-    social = _section(
-        "Social History",
-        _row("Tobacco", p.get("tobacco"))
-        + _row("Alcohol", p.get("alcohol"))
-        + _row("Illicit Drug", p.get("illicit_drug"))
-        + _row("Exercise", p.get("exercise"))
-        + _row("Marital Status", p.get("marital_status"))
-        + _row("Children", p.get("children"))
-        + _row("Living Situation", p.get("living_situation"))
-        + _row("Occupation", p.get("occupation"))
-        + _row("Insurance", p.get("insurance")),
+    social = _profile_card("🏠", "Social History",
+        _profile_item("Tobacco", p.get("tobacco"))
+        + _profile_item("Alcohol", p.get("alcohol"))
+        + _profile_item("Illicit Drug", p.get("illicit_drug"))
+        + _profile_item("Exercise", p.get("exercise"))
+        + _profile_item("Marital Status", p.get("marital_status"))
+        + _profile_item("Children", p.get("children"))
+        + _profile_item("Living Situation", p.get("living_situation"))
+        + _profile_item("Occupation", p.get("occupation"))
+        + _profile_item("Insurance", p.get("insurance")),
+        accent="#10b981",
     )
-    history = _section(
-        "Previous Medical History",
-        _row("Allergies", p.get("allergies"))
-        + _row("Family History", p.get("family_medical_history"))
-        + _row("Medical Devices", p.get("medical_device"))
-        + _row("Prior Medical History", p.get("medical_history")),
+    history = _profile_card("📋", "Previous Medical History",
+        _profile_item("Allergies", p.get("allergies"))
+        + _profile_item("Family History", p.get("family_medical_history"))
+        + _profile_item("Medical Devices", p.get("medical_device"))
+        + _profile_item("Prior History", p.get("medical_history")),
+        accent="#f59e0b",
     )
-    visit = _section(
-        "Current Visit",
-        _row("Present Illness (+)", p.get("present_illness_positive"))
-        + _row("Present Illness (−)", p.get("present_illness_negative"))
-        + _row("Chief Complaint", p.get("chiefcomplaint"))
-        + _row("Pain (0–10)", p.get("pain"))
-        + _row("Medications", p.get("medication"))
-        + _row("Disposition", p.get("disposition"))
-        + _row("Diagnosis", p.get("diagnosis")),
+    visit = _profile_card("🩺", "Current Visit",
+        _profile_item("Present Illness (+)", p.get("present_illness_positive"))
+        + _profile_item("Present Illness (−)", p.get("present_illness_negative"))
+        + _profile_item("Chief Complaint", p.get("chiefcomplaint"))
+        + _profile_item("Pain (0–10)", p.get("pain"))
+        + _profile_item("Medications", p.get("medication"))
+        + _profile_item("Disposition", p.get("disposition"))
+        + _profile_item("Diagnosis", p.get("diagnosis")),
+        accent="#ef4444",
+    )
+
+    return (
+        f"<div style='font-family:Noto Sans KR,Noto Sans,Malgun Gothic,Apple SD Gothic Neo,sans-serif;"
+        f"font-size:14px;line-height:1.5;background:var(--color-accent-soft,#f0f7ff);"
+        f"border:1px solid var(--border-color-primary,#e5e7eb);border-radius:12px;"
+        f"padding:18px 16px;max-height:400px;overflow-y:auto'>"
+        f"{header}{basic}{social}{history}{visit}"
+        f"</div>"
     )
-    return f"<div style='font-family:Noto Sans KR,Noto Sans,Malgun Gothic,Apple SD Gothic Neo,sans-serif;font-size:14px;line-height:1.5;background:#ffffff;padding:16px;border-radius:10px'>{basic}{social}{history}{visit}</div>"
 
 
 def build_blind_profile_html(p: dict) -> str:
     """Show only basic demographic info for practice mode without full case details."""
-    content = (
-        "<h3 style='margin:0 0 6px'>Patient Info</h3>"
-        "<p style='font-size:12px;color:#888;margin:0 0 8px;font-style:italic'>"
-        "Basic demographics only — gather the rest through consultation.</p>"
-        f"<table style='border-collapse:collapse;font-size:14px;margin-bottom:4px'>"
-        f"{_row('Age', p.get('age'))}"
-        f"{_row('Gender', p.get('gender'))}"
-        f"{_row('Race', p.get('race'))}"
-        f"{_row('Arrival Transport', p.get('arrival_transport'))}"
-        f"</table>"
+    hadm_id = p.get("hadm_id", "")
+    avatar_url = _PATIENT_AVATAR_URLS.get(hadm_id, list(_PATIENT_AVATAR_URLS.values())[0])
+    safe_avatar = html.escape(avatar_url)
+
+    header = (
+        f"<div style='text-align:center;margin-bottom:14px'>"
+        f"<img src='{safe_avatar}' style='width:52px;height:52px;border-radius:50%;"
+        f"background:#f3f4f6;padding:3px;margin-bottom:6px' alt='Patient'>"
+        f"<div style='font-size:15px;font-weight:600;color:#1f2937'>Patient Info</div>"
+        f"<div style='font-size:12px;color:#9ca3af;font-style:italic;margin-top:4px'>"
+        f"Basic demographics only — gather the rest through consultation.</div>"
+        f"</div>"
+    )
+
+    basic = _profile_card("👤", "Demographics",
+        _profile_item("Age", p.get("age"))
+        + _profile_item("Gender", p.get("gender"))
+        + _profile_item("Race", p.get("race"))
+        + _profile_item("Transport", p.get("arrival_transport")),
+        accent="#3b82f6",
+    )
+
+    hint = (
+        "<div style='background:var(--background-fill-primary,#fff);"
+        "border:1px dashed #d1d5db;border-radius:10px;padding:16px;text-align:center;"
+        "color:#9ca3af;font-size:13px'>"
+        "🔍 Additional information is hidden.<br>"
+        "Interview the patient to uncover their history."
+        "</div>"
+    )
+
+    return (
+        f"<div style='font-family:Noto Sans KR,Noto Sans,Malgun Gothic,Apple SD Gothic Neo,sans-serif;"
+        f"font-size:14px;line-height:1.5;background:var(--color-accent-soft,#f0f7ff);"
+        f"border:1px solid var(--border-color-primary,#e5e7eb);border-radius:12px;"
+        f"padding:18px 16px'>"
+        f"{header}{basic}{hint}"
+        f"</div>"
     )
-    return f"<div style='font-family:Noto Sans KR,Noto Sans,Malgun Gothic,Apple SD Gothic Neo,sans-serif;font-size:14px;line-height:1.5;background:#ffffff;padding:16px;border-radius:10px'>{content}</div>"
 
 
 # ---------------------------------------------------------------------------
@@ -1088,7 +1147,7 @@ with gr.Blocks(title="PatientSim", theme=gr.themes.Soft(), css=CUSTOM_CSS) as de
             with gr.Column(scale=2):
                 auto_chatbot = gr.Chatbot(
                     label="Doctor–Patient Dialogue",
-                    height=560,
+                    height=700,
                     show_label=True,
                     avatar_images=(
                         _DOCTOR_AVATAR,
@@ -1119,7 +1178,7 @@ with gr.Blocks(title="PatientSim", theme=gr.themes.Soft(), css=CUSTOM_CSS) as de
             with gr.Column(scale=2):
                 chatbot = gr.Chatbot(
                     label="Consultation",
-                    height=560,
+                    height=700,
                     show_label=True,
                     avatar_images=(
                         _DOCTOR_AVATAR,