feat(web): screens from docs/mock — focus flow, today, meds, doctor, profile
- /flow renders the dialog engine's current step as a mock screen (consent,
age, onboarding and scales with progress, mood 0–10, free text, dose
reminder, crisis with hotlines and breathing, safety plan), so every
engine scenario gets the design without duplicating its logic
- today / meds / doctor / profile / messages tabs; navy sidebar and
emergency rail on desktop, emergency block and tab bar on phones
- API: GET /me/{token}/today (today's doses, week marks, next visit, demo
clock time); demo ЕМИАС sign-in seeds the persona's synthetic profile and
prescription from the dashboard fixtures
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,115 @@
|
||||
import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
|
||||
|
||||
import { api } from "../api/client";
|
||||
import type { DialogEvent, Reply } from "../api/types";
|
||||
import { useSession } from "../session/SessionContext";
|
||||
import { sessionStore, type ChatEntry, type DialogSnapshot } from "../session/store";
|
||||
|
||||
/*
|
||||
* One conversation with the dialog engine per signed-in patient, shared by every screen:
|
||||
* focus screens render `pending` (the latest unanswered batch), «Сообщения» renders `entries`.
|
||||
* The engine owns the logic (consent, onboarding, scales, check-ins, meds, crisis) — exactly as in Telegram.
|
||||
*/
|
||||
|
||||
const OUTBOX_POLL_MS = 6000;
|
||||
|
||||
let seq = 0;
|
||||
const newId = () => `${Date.now().toString(36)}-${(seq++).toString(36)}`;
|
||||
const asEntries = (replies: Reply[]): ChatEntry[] => replies.map((reply) => ({ id: newId(), from: "assistant", reply }));
|
||||
|
||||
interface DialogApi extends DialogSnapshot {
|
||||
busy: boolean;
|
||||
error: boolean;
|
||||
started: boolean;
|
||||
/** Sends an event; `echo` is what the patient «said» (button label / text) for the history. */
|
||||
send: (event: DialogEvent, echo?: string) => Promise<boolean>;
|
||||
start: () => Promise<boolean>;
|
||||
markRead: () => void;
|
||||
}
|
||||
|
||||
const Ctx = createContext<DialogApi | null>(null);
|
||||
const EMPTY: DialogSnapshot = { entries: [], pending: [], unread: 0 };
|
||||
|
||||
export function DialogProvider({ children }: { children: ReactNode }) {
|
||||
const { session } = useSession();
|
||||
const token = session?.token ?? null;
|
||||
const [owner, setOwner] = useState(token);
|
||||
const [snap, setSnap] = useState<DialogSnapshot>(() => (token ? sessionStore.loadDialog(token) : EMPTY));
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState(false);
|
||||
const tokenRef = useRef(token);
|
||||
tokenRef.current = token;
|
||||
|
||||
// Switching accounts: reset to that token's snapshot during render, so it is never saved under another token.
|
||||
if (owner !== token) {
|
||||
setOwner(token);
|
||||
setSnap(token ? sessionStore.loadDialog(token) : EMPTY);
|
||||
setError(false);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (token && owner === token) sessionStore.saveDialog(token, snap);
|
||||
}, [token, owner, snap]);
|
||||
|
||||
const send = useCallback(
|
||||
async (event: DialogEvent, echo?: string) => {
|
||||
const t = tokenRef.current;
|
||||
if (!t) return false;
|
||||
setBusy(true);
|
||||
setError(false);
|
||||
try {
|
||||
const replies = await api.sendEvent(t, event);
|
||||
setSnap((prev) => ({
|
||||
entries: [
|
||||
...prev.entries,
|
||||
...(echo ? [{ id: newId(), from: "patient" as const, text: echo }] : []),
|
||||
...asEntries(replies),
|
||||
],
|
||||
pending: replies,
|
||||
unread: 0,
|
||||
}));
|
||||
return true;
|
||||
} catch {
|
||||
setError(true);
|
||||
return false;
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const start = useCallback(() => send({ type: "start" }), [send]);
|
||||
const markRead = useCallback(() => setSnap((prev) => (prev.unread ? { ...prev, unread: 0 } : prev)), []);
|
||||
|
||||
// System-initiated messages (reminders, check-ins, scales) arrive through the outbox.
|
||||
useEffect(() => {
|
||||
if (!token) return;
|
||||
const timer = window.setInterval(() => {
|
||||
api
|
||||
.outbox(token)
|
||||
.then((replies) => {
|
||||
if (!replies.length || tokenRef.current !== token) return;
|
||||
setSnap((prev) => ({
|
||||
entries: [...prev.entries, ...asEntries(replies)],
|
||||
pending: replies,
|
||||
unread: prev.unread + replies.length,
|
||||
}));
|
||||
})
|
||||
.catch(() => undefined);
|
||||
}, OUTBOX_POLL_MS);
|
||||
return () => window.clearInterval(timer);
|
||||
}, [token]);
|
||||
|
||||
const value = useMemo<DialogApi>(
|
||||
() => ({ ...snap, busy, error, started: snap.entries.length > 0, send, start, markRead }),
|
||||
[snap, busy, error, send, start, markRead],
|
||||
);
|
||||
return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
|
||||
}
|
||||
|
||||
export function useDialog(): DialogApi {
|
||||
const value = useContext(Ctx);
|
||||
if (!value) throw new Error("useDialog outside DialogProvider");
|
||||
return value;
|
||||
}
|
||||
Reference in New Issue
Block a user