/* screens-3.jsx — enhanced AI-driven versions of Triage, Vitals, AI screens * with live Claude chat, body map, vision-based vitals, neural viz, reasoning chain */ // ────────────────────────────────────────────────────────────── // 3'. TRIAGE WITH LIVE AI CHAT + BODY MAP // ────────────────────────────────────────────────────────────── const SYSTEM_PROMPT_TH = `คุณคือ "พี่หมอดี" พยาบาลผู้ช่วย AI ในตู้คัดกรอง OPD ของโรงพยาบาล ตอบเป็นภาษาไทย กระชับ อบอุ่น เหมือนพยาบาลตัวจริงคุยกับคนไข้ ทำหน้าที่: ถามคำถามคัดกรองทีละข้อสั้นๆ (เช่น ระยะเวลา ระดับความรุนแรง อาการร่วม) ห้ามวินิจฉัย ห้ามให้ยา — เพียงเก็บข้อมูลและให้กำลังใจ จบข้อความด้วยคำถามเดียวให้ผู้ป่วยตอบ ใช้ <= 2 ประโยค`; const SYSTEM_PROMPT_EN = `You are "MorDee", an AI nurse assistant in a hospital OPD triage kiosk. Reply in English, concisely, warmly — like a real nurse talking to a patient. Role: ask one short triage question at a time (e.g. duration, severity, associated symptoms). Do NOT diagnose or prescribe — only collect information and offer reassurance. End with a single question for the patient. Use <= 2 sentences.`; function ScreenTriageAI({ scenario, onNext, aiMode }) { const T = useT(); const { lang } = useLang(); const [mode, setMode] = React.useState('chat'); // chat | bodymap const [bodyParts, setBodyParts] = React.useState(scenario.id === 'knee' ? ['kneeR'] : scenario.id === 'chest' ? ['chest', 'armL'] : scenario.id === 'fever' ? ['throat', 'head'] : []); const greet = lang === 'en' ? `Hi, I'm "MorDee" your AI nurse assistant.\n${scenario.patient.name.en}, what brings you in today?` : `สวัสดีค่ะ ดิฉันชื่อ "พี่หมอดี" จะช่วยประเมินอาการเบื้องต้นนะคะ\nวันนี้${scenario.patient.name.th.replace('คุณ', 'คุณ')}มาด้วยอาการอะไรคะ?`; const [messages, setMessages] = React.useState([ { role: 'nurse', text: greet }, ]); const [input, setInput] = React.useState(T(scenario.chief)); const [thinking, setThinking] = React.useState(false); const [turn, setTurn] = React.useState(0); const scrollRef = React.useRef(null); React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages, thinking]); // 4 user messages: chief (turn 0) + 3 scripted questions (turns 1..3) const TOTAL_TURNS = 4; const SCRIPTED = scenario.triage; const askNext = async (userMsg) => { setMessages(m => [...m, { role: 'user', text: userMsg }]); setInput(''); setThinking(true); let reply = ''; if (aiMode === 'live' && window.claude && window.claude.complete) { try { const nurseLabel = lang === 'en' ? 'MorDee' : 'พี่หมอดี'; const patientLabel = lang === 'en' ? 'Patient' : 'ผู้ป่วย'; const history = [...messages, { role: 'user', text: userMsg }] .map(m => `${m.role === 'nurse' ? nurseLabel : patientLabel}: ${m.text}`).join('\n'); const sysPrompt = lang === 'en' ? SYSTEM_PROMPT_EN : SYSTEM_PROMPT_TH; const ctxLine = lang === 'en' ? `Patient context: ${T(scenario.patient.name)}, age ${scenario.patient.age}, chief complaint: ${T(scenario.chief)}` : `บริบทผู้ป่วย: ${T(scenario.patient.name)}, อายุ ${scenario.patient.age}, อาการหลัก: ${T(scenario.chief)}`; const tail = lang === 'en' ? `\n\n${nurseLabel} (reply in 1-2 short sentences + one question):` : `\n\nพี่หมอดี (ตอบให้สั้น 1-2 ประโยค + คำถามเดียว):`; const fullPrompt = `${sysPrompt}\n\n${ctxLine}\n\n${lang === 'en' ? 'Conversation' : 'บทสนทนา'}:\n${history}${tail}`; reply = await window.claude.complete(fullPrompt); } catch (e) { console.warn('claude error', e); } } if (!reply) { // scripted fallback: turn 0 = user just gave chief → ask SCRIPTED[0] (duration); // turn 1..2 → next scripted q; turn === SCRIPTED.length → closing thanks. const q = turn < SCRIPTED.length ? SCRIPTED[turn] : null; reply = q ? T(q.q) : T({ th: 'รับทราบค่ะ ขอบคุณที่ตอบนะคะ ดิฉันจะส่งข้อมูลให้แพทย์เลยค่ะ', en: 'Got it, thank you. Sending your info to the doctor now.' }); } setTimeout(() => { setMessages(m => [...m, { role: 'nurse', text: reply.trim() }]); setThinking(false); setTurn(t => t + 1); }, aiMode === 'live' ? 200 : 700); }; const handleQuickReply = (txt) => askNext(txt); const toggleBodyPart = (id) => { setBodyParts(b => b.includes(id) ? b.filter(x => x !== id) : [...b, id]); }; const finished = turn >= TOTAL_TURNS; return ( {/* Mode tabs */}
setMode('chat')} icon="ph-chat-circle-dots" label={T({ th: 'คุยกับพยาบาล AI', en: 'Chat with AI nurse' })}/> setMode('bodymap')} icon="ph-person" label={T({ th: `ระบุจุดที่ปวด${bodyParts.length ? ` (${bodyParts.length})` : ''}`, en: `Mark pain points${bodyParts.length ? ` (${bodyParts.length})` : ''}` })}/>
{mode === 'chat' && (
{/* Chat scrollable */}
{messages.map((m, i) => m.role === 'nurse' ? : )} {thinking && }
{/* Input area */} {!finished ? ( input.trim() && askNext(input.trim())} sttPhrase={getSTTPhrase(scenario, turn, lang)} quickReplies={getQuickReplies(scenario, turn, lang)} onQuick={handleQuickReply} disabled={thinking}/> ) : (
{T({ th: 'คัดกรองเสร็จสิ้น', en: 'Triage complete' })}
{T({ th: 'ส่งข้อมูลให้ AI วิเคราะห์ต่อ', en: 'Sending data for AI analysis' })}
{T({ th: 'วิเคราะห์ด้วย AI', en: 'Analyze with AI' })}
)}
)} {mode === 'bodymap' && (
{lang === 'en' ? <>Tap where it feels abnormal : <>แตะตำแหน่งที่ รู้สึกผิดปกติ}
{T({ th: 'AI จะนำตำแหน่งและความรุนแรงไปประกอบการวินิจฉัย', en: 'AI uses location and severity in its diagnosis.' })}
{T({ th: 'จุดที่เลือก', en: 'Selected' })} ({bodyParts.length})
{bodyParts.length === 0 ? (
{T({ th: 'ยังไม่ได้เลือก', en: 'None selected' })}
) : (
{bodyParts.map(id => { const r = BODY_REGIONS.find(x => x.id === id); return r ? (
{window.getBodyLabel ? window.getBodyLabel(r, lang) : (typeof r.label === 'string' ? r.label : r.label[lang])}
) : null; })}
)}
{lang === 'en' ? <>Tip: Mark multiple points — AI looks for patterns, e.g. chest pain radiating to left arm : <>เคล็ดลับ: ระบุได้หลายจุด AI จะหา pattern ที่เกี่ยวข้องกัน เช่น ปวดอกร้าวแขนซ้าย}
setMode('chat')}>{T({ th: 'กลับไปคุย', en: 'Back to chat' })} setMode('chat')} iconRight="ph-arrow-right">{T({ th: 'ยืนยันตำแหน่ง', en: 'Confirm location' })}
)} ); } function ModeChip({ active, onClick, icon, label }) { return ( ); } function NurseMessage({ text }) { const T = useT(); return (
{T({ th: 'พี่หมอดี', en: 'MorDee' })} · {T({ th: 'พยาบาล AI', en: 'AI nurse' })}
{text}
); } function UserMessage({ text }) { const T = useT(); return (
{T({ th: 'คุณ', en: 'You' })}
{text}
); } function NurseTyping({ aiMode }) { const T = useT(); return (
{[0, 1, 2].map(i => ( ))} {aiMode === 'live' ? T({ th: 'Claude AI กำลังคิด...', en: 'Claude AI thinking...' }) : T({ th: 'กำลังพิมพ์...', en: 'Typing...' })}
); } // VOICE-FIRST INPUT (Google Assistant style) // idle → big mic CTA + scrim of quick chips + "type instead" link // listening → fullscreen-ish gradient panel, 4-bar bouncing waveform, "Listening…" // transcribing → text streams in big, waveform calms // done → preview transcript + Send / Retry / Edit // type → keyboard fallback (text input + send) function ChatInput({ value, onChange, onSend, quickReplies = [], onQuick, disabled, sttPhrase }) { const { lang } = useLang(); const T = useT(); const [stt, setStt] = React.useState('idle'); // idle | listening | transcribing | done const [typeMode, setTypeMode] = React.useState(false); const charTimer = React.useRef(null); const listenTimer = React.useRef(null); const startSTT = () => { if (stt !== 'idle' || disabled) return; setTypeMode(false); setStt('listening'); onChange(''); listenTimer.current = setTimeout(() => { setStt('transcribing'); streamPhrase(sttPhrase || (lang === 'en' ? 'I have stomach pain for 2 days, low fever, loose stools about 3 times.' : 'มีอาการ ปวดท้อง 2 วัน มีไข้ต่ำๆ ถ่ายเหลวประมาณ 3 ครั้ง')); }, 1100); }; const streamPhrase = (phrase) => { let i = 0; const tick = () => { i = Math.min(i + Math.ceil(Math.random() * 2), phrase.length); onChange(phrase.slice(0, i)); if (i < phrase.length) { charTimer.current = setTimeout(tick, 38 + Math.random() * 60); } else { setStt('done'); } }; tick(); }; const cancelSTT = () => { clearTimeout(listenTimer.current); clearTimeout(charTimer.current); setStt('idle'); onChange(''); }; const stopSTT = () => { clearTimeout(listenTimer.current); clearTimeout(charTimer.current); setStt('done'); }; const sendIt = () => { onSend(); setStt('idle'); setTypeMode(false); }; React.useEffect(() => () => { clearTimeout(listenTimer.current); clearTimeout(charTimer.current); }, []); // ── LISTENING / TRANSCRIBING — big animated panel ───────────── if (stt === 'listening' || stt === 'transcribing') { const isListening = stt === 'listening'; return (
{/* Big pulsing mic */}
{isListening ? T({ th: 'กำลังฟัง...', en: 'Listening…' }) : T({ th: 'กำลังถอดเสียง...', en: 'Transcribing…' })}
{isListening ? T({ th: 'พูดให้ชัดเจน — ระบบจะแปลงเสียงเป็นข้อความให้อัตโนมัติ', en: 'Speak clearly — your voice will turn into text automatically.' }) : T({ th: 'จับใจความจากเสียงของคุณ', en: 'Capturing what you said.' })}
{/* Live transcript preview */} {!isListening && value && (
"{value}"
)}
{T({ th: 'หยุด', en: 'Stop' })} {T({ th: 'ยกเลิก', en: 'Cancel' })}
); } // ── DONE — preview transcript with Send / Retry / Edit ─────── if (stt === 'done') { return (
{T({ th: 'ถอดเสียงสำเร็จ', en: 'Transcribed' })}
"{value}"
{T({ th: 'ส่งเลย', en: 'Send' })} { cancelSTT(); startSTT(); }} icon="ph-arrow-counter-clockwise"> {T({ th: 'พูดอีกครั้ง', en: 'Speak again' })} { setStt('idle'); setTypeMode(true); }} icon="ph-pencil-simple"> {T({ th: 'แก้ไขข้อความ', en: 'Edit text' })}
); } // ── TYPE FALLBACK — keyboard input ─────────────────────────── if (typeMode) { return (
onChange(e.target.value)} onKeyDown={e => e.key === 'Enter' && value.trim() && sendIt()} placeholder={T({ th: 'พิมพ์คำตอบ...', en: 'Type your answer…' })} disabled={disabled} className="font-medium text-lg sm:text-2xl lg:text-3xl leading-none" style={{ flex: 1, border: 'none', outline: 'none', color: K.ink, background: 'transparent', padding: '12px 0', caretColor: K.primary900, minWidth: 0, }}/> {T({ th: 'ส่ง', en: 'Send' })}
); } // ── IDLE — voice-first hero ────────────────────────────────── return (
{/* Big mic CTA */}
{T({ th: 'แตะที่ไมค์แล้วพูดได้เลย', en: 'Tap the mic and speak' })}
{T({ th: 'พยาบาล AI ฟังภาษาไทยและอังกฤษ', en: 'AI nurse listens in both Thai and English' })}
{/* Quick reply chips — small + secondary */} {quickReplies.length > 0 && (
{T({ th: 'หรือเลือกคำตอบ', en: 'Or pick a quick reply' })}
{quickReplies.map((q, i) => ( ))}
)}
); } // Phrase + quick-reply sets are aligned to the conversation turn: // turn 0 = chief complaint (response to "what brings you in?") // turn 1 = duration / onset // turn 2 = severity / quality / when worst // turn 3 = associated symptoms / radiation / swelling function getSTTPhrase(scenario, turn, lang) { const phrases = lang === 'en' ? { fever: [ 'I have a cough, fever, and sore throat.', 'About two days now.', 'Moderate — bearable but it disrupts my sleep.', 'Some clear runny nose and a mild headache too.', ], knee: [ 'My right knee hurts and walking is hard.', 'Gradual — about two to three months, no fall.', 'It hurts most going up and down stairs.', 'A little swelling, no redness or warmth.', ], chest: [ 'I have tight chest pain and shortness of breath.', 'About half an hour.', 'It feels tight, like being squeezed.', 'It radiates to my left arm and jaw.', ], } : { fever: [ 'มีไข้ ไอ และเจ็บคอ', 'เป็นมาประมาณ 2 วันแล้ว', 'รุนแรงปานกลาง พอทนได้ แต่นอนไม่ค่อยหลับ', 'มีน้ำมูกใส ๆ กับปวดหัวนิดหน่อย', ], knee: [ 'ปวดเข่าขวา เดินไม่ค่อยสะดวก', 'ค่อย ๆ ปวดมา 2-3 เดือน ไม่ได้ล้ม', 'ปวดมากตอนขึ้น-ลงบันได', 'บวมเล็กน้อย ไม่แดง ไม่ร้อน', ], chest: [ 'เจ็บแน่นหน้าอก หายใจหอบ', 'เป็นมาประมาณครึ่งชั่วโมง', 'เจ็บแบบโดนบีบ แน่น ๆ', 'ร้าวลงแขนซ้ายและกราม', ], }; const arr = phrases[scenario.id] || phrases.fever; return arr[Math.min(turn, arr.length - 1)]; } function getQuickReplies(scenario, turn, lang) { const all = lang === 'en' ? { fever: [ ['Cough + fever + sore throat', 'Mainly sore throat', 'Dry cough'], // 0 chief ['Less than 1 day', '1–3 days', 'More than 1 week'], // 1 duration ['Mild', 'Moderate', 'Severe'], // 2 severity ['Runny nose', 'Headache', 'Trouble breathing', 'None'], // 3 associated ], knee: [ ['Right knee', 'Left knee', 'Both knees'], // 0 chief ['Gradual, 2–3 months', 'Recent fall/impact', 'Not sure'], // 1 onset ['Going up/down stairs', 'On waking', 'Prolonged sitting', 'All the time'], // 2 worst ['Mild swelling', 'Red, warm, swollen', 'No swelling'], // 3 swelling ], chest: [ ['Tight chest pain', 'Short of breath', 'Tight + cannot breathe'], // 0 chief ['Less than 1 hr', '1–6 hrs', 'More than 6 hrs'], // 1 duration ['Tight / squeezing', 'Burning', 'Sharp / stabbing'], // 2 quality ['Radiates to arm', 'Radiates to jaw', 'Radiates to back', 'Does not radiate'], // 3 radiation ], } : { fever: [ ['ไอ มีไข้ เจ็บคอ', 'เจ็บคอเป็นหลัก', 'ไอแห้ง ๆ'], ['น้อยกว่า 1 วัน', '1–3 วัน', 'มากกว่า 1 สัปดาห์'], ['เล็กน้อย', 'ปานกลาง', 'รุนแรง'], ['น้ำมูก', 'ปวดศีรษะ', 'หายใจลำบาก', 'ไม่มี'], ], knee: [ ['ปวดเข่าขวา', 'ปวดเข่าซ้าย', 'ปวด 2 ข้าง'], ['ค่อย ๆ เป็น 2-3 เดือน', 'มีล้ม/กระแทก', 'ไม่แน่ใจ'], ['ขึ้น-ลงบันได', 'ตื่นนอน', 'นั่งนาน ๆ', 'ตลอดเวลา'], ['บวมเล็กน้อย', 'บวมแดงร้อน', 'ไม่มี'], ], chest: [ ['เจ็บแน่นหน้าอก', 'หายใจหอบ', 'แน่นอก หายใจไม่ออก'], ['ไม่ถึง 1 ชม.', '1–6 ชม.', 'มากกว่า 6 ชม.'], ['แน่น/บีบ', 'แสบ/ร้อน', 'จี๊ด/แปลบ'], ['ร้าวแขน', 'ร้าวกราม', 'ร้าวหลัง', 'ไม่ร้าว'], ], }; const sets = all[scenario.id] || all.fever; return sets[Math.min(turn, sets.length - 1)] || []; } // ────────────────────────────────────────────────────────────── // 4'. VITALS WITH VISION MODE // ────────────────────────────────────────────────────────────── function ScreenVitalsAI({ scenario, onNext }) { const T = useT(); const { lang } = useLang(); const [mode, setMode] = React.useState('vision'); // vision | device const [phase, setPhase] = React.useState('intro'); // intro | scan | done const [progress, setProgress] = React.useState(0); const v = scenario.vitals; const flags = scenario.vitalsFlags || {}; React.useEffect(() => { if (phase !== 'scan') return; let p = 0; const t = setInterval(() => { p += 2.5; setProgress(p); if (p >= 100) { clearInterval(t); setTimeout(() => setPhase('done'), 500); } }, 80); return () => clearInterval(t); }, [phase]); return ( {/* Mode switcher */} {phase === 'intro' && (
setMode('vision')} icon="ph-camera" badge={T({ th: 'NEW · AI', en: 'NEW · AI' })} title="Vision-based" sub={T({ th: 'กล้องหน้าจออ่านชีพจร, อัตราการหายใจ และระดับความเครียดจากใบหน้า · 30 วินาที', en: 'Front camera reads pulse, respiratory rate, and stress from your face · 30 sec' })}/> setMode('device')} icon="ph-cuff" title="Medical Devices" sub={T({ th: 'ใช้เครื่องวัดมาตรฐาน — ปลอกแขน, pulse oximeter, เทอร์โมมิเตอร์', en: 'Use standard devices — cuff, pulse oximeter, thermometer' })}/>
{mode === 'vision' && (
{T({ th: 'เทคโนโลยี rPPG', en: 'rPPG technology' })}
{lang === 'en' ? <>Remote Photoplethysmography — the camera detects skin-color changes from blood flow to extract vital signs without touching any device. : <>Remote Photoplethysmography — กล้องตรวจจับการเปลี่ยนแปลงสีผิวจากการไหลเวียนเลือดเพื่อสกัดสัญญาณชีพ โดยไม่ต้องสัมผัสอุปกรณ์}
)} {mode === 'device' && ( )}
{T({ th: 'ข้ามขั้นตอนนี้', en: 'Skip this step' })} setPhase('scan')} iconRight="ph-play">{T({ th: `เริ่มวัด ${mode === 'vision' ? '(ไม่ต้องสัมผัส)' : ''}`, en: `Start scan ${mode === 'vision' ? '(contactless)' : ''}` })}
)} {phase === 'scan' && mode === 'vision' && (
LIVE rPPG SIGNAL
SNR: 24.5 dB ● Locked
EXTRACTING VITALS · {progress}%
= 18} label={T({ th: 'กำลังจับใบหน้า...', en: 'Locking face...' })}/> = 35} label={T({ th: 'วัดอัตราการเต้นของหัวใจ', en: 'Measuring heart rate' })}/> = 55} label={T({ th: 'ประมาณ SpO₂ จากความเข้มสีผิว', en: 'Estimating SpO₂ from skin color' })}/> = 75} label={T({ th: 'วัดอัตราการหายใจ', en: 'Measuring respiratory rate' })}/> = 92} label={T({ th: 'ประเมิน HRV และระดับความเครียด', en: 'Computing HRV and stress level' })}/>
{T({ th: 'โปรดมองตรงไปที่กล้อง · นั่งนิ่ง ๆ · แสงสว่างเพียงพอ', en: 'Look straight at the camera · sit still · ensure good lighting' })}
)} {phase === 'scan' && mode === 'device' && (
{progress}%
{progress < 30 ? T({ th: 'กำลังวัดอุณหภูมิ...', en: 'Measuring temperature...' }) : progress < 60 ? T({ th: 'กำลังวัดความดันโลหิต...', en: 'Measuring blood pressure...' }) : progress < 90 ? T({ th: 'กำลังวัด SpO₂...', en: 'Measuring SpO₂...' }) : T({ th: 'กำลังประมวลผล...', en: 'Processing...' })}
)} {phase === 'done' && (
{T({ th: `วัดเสร็จเรียบร้อย ${mode === 'vision' ? '· แบบ contactless' : ''} · ส่งข้อมูลให้ AI`, en: `Scan complete ${mode === 'vision' ? '· contactless' : ''} · sending to AI` })}
{T({ th: 'วิเคราะห์ด้วย AI', en: 'Analyze with AI' })}
)} ); } function ModeCard({ active, onClick, icon, title, sub, badge }) { return ( ); } function Bullet({ icon, label }) { return (
{label}
); } function ScanLine({ done, label }) { return (
{label}
); } // ────────────────────────────────────────────────────────────── // 5'. AI ANALYSIS WITH NEURAL NET + REASONING + COHORT // ────────────────────────────────────────────────────────────── function ScreenAIAdvanced({ scenario, onNext, onRestart }) { const T = useT(); const ai = scenario.ai; const isER = ai.urgencyLevel >= 4; const [shown, setShown] = React.useState(false); React.useEffect(() => { const t = setTimeout(() => setShown(true), 30); return () => clearTimeout(t); }, []); const urgencyTone = isER ? { bg: K.dangerBg, fg: K.danger } : ai.urgencyLevel >= 3 ? { bg: K.warningBg, fg: K.warning } : { bg: K.successBg, fg: K.success }; const conditions = (ai.conditions || []).slice(0, 3); const handleShare = () => { if (typeof onNext === 'function') onNext(); }; const handleRestart = () => { if (typeof onRestart === 'function') onRestart(); }; return (
{/* Top bar — dark band with logo, lang toggle, close X */}
MorDee
{/* Body */}
{/* Header */}

{T({ th: 'สรุปผลตรวจอาการ', en: 'Symptom Check Summary' })}

{T({ th: 'AI วิเคราะห์เบื้องต้นจากอาการที่คุณแจ้ง', en: 'AI preliminary analysis from your reported symptoms' })}

{/* Unified summary card */}
{/* 3-stat row: department, urgency, wait */}
{T({ th: 'แผนก', en: 'Department' })}
{T(ai.department)}
{T({ th: 'ความเร่งด่วน', en: 'Urgency' })}
{T(ai.urgency)}
{T({ th: 'คิวรอ', en: 'Wait' })}
{T(ai.wait)}
{/* Top 3 conditions with probability bars */}
{T({ th: 'ภาวะที่เป็นไปได้สูงสุด', en: 'Top possible conditions' })}
{conditions.map((c, i) => (
{T(c.name)}
{c.prob}%
))}
{/* Disclaimer microcopy */}
{T({ th: 'คำแนะนำเบื้องต้น · ควรพบแพทย์เพื่อยืนยันการวินิจฉัย', en: 'Preliminary guidance only - see a doctor for diagnosis' })}
{/* CTAs */}
); } function DeviceStep({ n, icon, title, sub, last }) { return (
{n}
{title}
{sub}
); } function ResultPill({ icon, label, value }) { return (
{label}
{value}
); } window.ScreenTriageAI = ScreenTriageAI; window.ScreenVitalsAI = ScreenVitalsAI; window.ScreenAIAdvanced = ScreenAIAdvanced;