Add patient personalization: profile saved once, reused every chat turn

2026-08-25 11:55:13 +07:00
parent 501c226ecd
commit 1ddd878431
12 changed files with 548 additions and 6 deletions
@@ -0,0 +1,154 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import type { PatientProfile } from "@duoc-thu/shared-types";
+import { getPatientProfile, savePatientProfile } from "@duoc-thu/api-client";
+
+const EMPTY: PatientProfile = {
+  ageText: null,
+  weightKg: null,
+  renalFunction: null,
+  hepaticFunction: null,
+  knownAllergies: null,
+};
+
+/** Optional per-account clinical context. Nothing here is required — an
+ * empty profile behaves exactly like no profile: the chatbot keeps asking
+ * age/weight per turn, same as an anonymous session. Only a logged-in user
+ * ever sees this page (`AccountMenu` is the only link to it). */
+export function ProfileForm() {
+  const [profile, setProfile] = useState<PatientProfile>(EMPTY);
+  const [loaded, setLoaded] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  useEffect(() => {
+    getPatientProfile()
+      .then((p) => p && setProfile(p))
+      .finally(() => setLoaded(true));
+  }, []);
+
+  async function onSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    setError(null);
+    setSaved(false);
+    setPending(true);
+    try {
+      const result = await savePatientProfile(profile);
+      setProfile(result);
+      setSaved(true);
+    } catch {
+      setError("Không lưu được lúc này. Vui lòng thử lại.");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  if (!loaded) return null;
+
+  return (
+    <div className="flex flex-1 items-center justify-center p-6">
+      <form
+        onSubmit={onSubmit}
+        className="w-full max-w-sm space-y-4 rounded-2xl border border-border-subtle bg-surface p-6 shadow-sm"
+      >
+        <div>
+          <h1 className="text-lg font-bold text-txt-primary">
+            Hồ sơ bệnh nhân
+          </h1>
+          <p className="mt-1 text-xs text-txt-secondary">
+            Điền sẵn để không phải nhắc lại tuổi/cân nặng mỗi lượt hỏi. Bỏ
+            trống mục nào thì chatbot vẫn hỏi lại mục đó như bình thường.
+          </p>
+        </div>
+
+        <label className="block text-xs font-semibold text-txt-secondary">
+          Tuổi
+          <input
+            type="text"
+            value={profile.ageText ?? ""}
+            onChange={(e) => setProfile({ ...profile, ageText: e.target.value })}
+            placeholder="VD: 8 tuổi, sơ sinh 2 tháng"
+            className="mt-1 w-full rounded-lg border border-border-subtle bg-surface-hover px-3 py-2 text-sm text-txt-primary"
+          />
+        </label>
+
+        <label className="block text-xs font-semibold text-txt-secondary">
+          Cân nặng (kg)
+          <input
+            type="number"
+            min={0}
+            max={500}
+            value={profile.weightKg ?? ""}
+            onChange={(e) =>
+              setProfile({
+                ...profile,
+                weightKg: e.target.value === "" ? null : Number(e.target.value),
+              })
+            }
+            className="mt-1 w-full rounded-lg border border-border-subtle bg-surface-hover px-3 py-2 text-sm text-txt-primary"
+          />
+        </label>
+
+        <label className="block text-xs font-semibold text-txt-secondary">
+          Chức năng thận
+          <input
+            type="text"
+            value={profile.renalFunction ?? ""}
+            onChange={(e) =>
+              setProfile({ ...profile, renalFunction: e.target.value })
+            }
+            placeholder="VD: suy thận độ 2, Clcr 45 ml/phút"
+            className="mt-1 w-full rounded-lg border border-border-subtle bg-surface-hover px-3 py-2 text-sm text-txt-primary"
+          />
+        </label>
+
+        <label className="block text-xs font-semibold text-txt-secondary">
+          Chức năng gan
+          <input
+            type="text"
+            value={profile.hepaticFunction ?? ""}
+            onChange={(e) =>
+              setProfile({ ...profile, hepaticFunction: e.target.value })
+            }
+            placeholder="VD: suy gan nhẹ"
+            className="mt-1 w-full rounded-lg border border-border-subtle bg-surface-hover px-3 py-2 text-sm text-txt-primary"
+          />
+        </label>
+
+        <label className="block text-xs font-semibold text-txt-secondary">
+          Dị ứng đã biết
+          <input
+            type="text"
+            value={profile.knownAllergies ?? ""}
+            onChange={(e) =>
+              setProfile({ ...profile, knownAllergies: e.target.value })
+            }
+            placeholder="VD: dị ứng penicillin"
+            className="mt-1 w-full rounded-lg border border-border-subtle bg-surface-hover px-3 py-2 text-sm text-txt-primary"
+          />
+        </label>
+
+        {error && <p className="text-xs text-red-500">{error}</p>}
+        {saved && !error && (
+          <p className="text-xs text-emerald-600">Đã lưu.</p>
+        )}
+
+        <div className="flex items-center gap-3">
+          <button
+            type="submit"
+            disabled={pending}
+            className="rounded-lg bg-accent-primary px-4 py-2 text-sm font-semibold text-txt-inverse disabled:opacity-60"
+          >
+            {pending ? "Đang lưu..." : "Lưu"}
+          </button>
+          <Link href="/" className="text-xs text-txt-secondary hover:underline">
+            Về trang tra cứu
+          </Link>
+        </div>
+      </form>
+    </div>
+  );
+}