diff --git a/apps/Frontend/src/components/settings/ai-chat-settings-card.tsx b/apps/Frontend/src/components/settings/ai-chat-settings-card.tsx index b78b9b89..46162725 100644 --- a/apps/Frontend/src/components/settings/ai-chat-settings-card.tsx +++ b/apps/Frontend/src/components/settings/ai-chat-settings-card.tsx @@ -37,219 +37,201 @@ function previewTemplate(text: string, officeName: string) { // ─── LangGraph flow diagram (SVG) ───────────────────────────────────────────── function LangGraphFlow() { - const W = 620; - const cx = W / 2; // 310 - const nodeW = 200; - const nx = cx - nodeW / 2; // 210 + const W = 640; + const cx = 320; // top-section center + const nW = 210; + const nx = cx - nW / 2; - // sequential node y positions & heights - const n1y = 16, n1h = 58; - const n2y = 116, n2h = 58; - const n3y = 216, n3h = 78; + // ── Top sequence ────────────────────────────────────────────────────────── + const n1y = 16, n1h = 52; + const n2y = 84, n2h = 52; + const n3y = 152, n3h = 76; // AI classifies + sends MSG 1 - // fork geometry - const forkHY = n3y + n3h + 22; // 316 - const lcx = 150, rcx = 470; // branch centers (balanced around 310) + const forkHY = n3y + n3h + 22; // 250 - // main branch nodes - const branchY = forkHY + 58; // 374 - const branchW = 220; - const branchH = 88; - const branchBottom = branchY + branchH; // 462 + // Branch centers + const lcx = 138; // YES (left) + const rcx = 490; // NO (right) - // ── Rescheduling sub-tree (below NO/left branch at lcx=150) ────────────── - const rsForkHY = branchBottom + 28; // 490 patient says YES/NO to reschedule - const rsYesCx = 90; - const rsNoCx = 215; - const rsNodeY = rsForkHY + 32; // 522 - const rsNodeH = 54; + // ── YES branch ──────────────────────────────────────────────────────────── + const yes1y = forkHY + 50; // 300 + const yes1h = 78; + const yes2y = yes1y + yes1h + 14; // 392 + const yes2h = 52; - // ASAP-or-next-week fork (below rsYesCx=90) - const prefForkHY = rsNodeY + rsNodeH + 22; // 598 - const asakCx = 48; - const nwkCx = 138; - const prefNodeY = prefForkHY + 32; // 630 - const prefNodeH = 62; + // ── NO branch – step-by-step ────────────────────────────────────────────── + const noW = 226; + const no1y = forkHY + 50; // 300 — "When would you like to reschedule?" + const no1h = 62; + const no2y = no1y + no1h + 14; // 376 — patient gives date + day-open check + const no2h = 80; + const no3y = no2y + no2h + 14; // 470 — "What time on [date]?" + const no3h = 62; + const no4y = no3y + no3h + 14; // 546 — patient gives time + hours check + const no4h = 80; + const no5y = no4y + no4h + 14; // 640 — "Just to confirm — [date at time]?" + const no5h = 62; + const no6y = no5y + no5h + 14; // 716 — patient confirms YES / NO + const no6h = 72; + const no7y = no6y + no6h + 14; // 802 — slot availability check + const no7h = 80; + const no8y = no7y + no7h + 14; // 896 — DB move + AI badge + const no8h = 78; + const no9y = no8y + no8h + 14; // 988 — patient thanks / closing + const no9h = 54; - const totalH = prefNodeY + prefNodeH + 54 + 20 + 54 + 22; // time node + DB node + padding + const totalH = Math.max(yes2y + yes2h, no9y + no9h) + 24; + + // Helper: failure annotation box to the right of a check node + const failX = rcx + noW / 2 + 8; + const failW = 122; return ( - {/* Arrowhead marker */} - - + + + + + - {/* ── Node 1: Office sends reminder ─────────────────────────── */} - - Office sends reminder - Staff triggers the SMS + {/* ══ TOP SEQUENCE ═══════════════════════════════════════════════ */} - {/* Arrow 1 → 2 */} - + {/* N1: Office sends reminder */} + + Office sends reminder SMS + Staff triggers the batch send + - {/* ── Node 2: Patient replies ───────────────────────────────── */} - - Patient replies - Any message triggers the AI + {/* N2: Patient replies */} + + Patient replies + Any SMS triggers the AI + - {/* Arrow 2 → 3 */} - + {/* N3: AI classifies + sends MSG 1 */} + + Google AI classifies YES / NO + MSG 1 → AI self-introduction sent + "Hi! My name is Lisa at {"{officeName}"}…" + MSG 2 → intent response (below) - {/* ── Node 3: AI introduces itself ──────────────────────────── */} - - AI introduces itself - "Hi! My name is Lisa, the dedicated - AI assistant at {"{officeName}"}..." - - {/* ── Fork connectors ───────────────────────────────────────── */} - {/* Vertical down from N3 */} - - {/* Horizontal fork line */} - - {/* Left drop → NO branch */} - - {/* Right drop → YES branch */} - - - {/* ── YES / NO badges on the fork ───────────────────────────── */} - {/* NO badge — left junction */} - - NO - - {/* YES badge — right junction */} - - YES - - {/* ── Left branch: NO → "Would you like to reschedule?" ───────── */} - - It is understandable! - Would you like to - reschedule? - - {/* ── Right branch: YES → Confirm ───────────────────────────── */} - - Thank you for - confirming! - "See you on [date & time]" - - {/* ══════════ RESCHEDULING SUB-TREE ══════════════════════════════ */} - - {/* Vertical from NO node bottom */} - - {/* Horizontal YES/NO fork */} - - - + {/* Fork lines */} + + + + {/* YES / NO badges */} - - YES - - NO + + YES + + NO - {/* YES → "ASAP or next week?" node */} - - ASAP or - next week? - (if Mon–Thu appt) + {/* ══ YES BRANCH ══════════════════════════════════════════════════ */} - {/* NO → polite close */} - - No problem! - Conversation ends + {/* Yes1: Thank you */} + + MSG 2: Thank you for confirming! + "See you on [date & time]" + Appointment confirmed ✓ + - {/* Vertical from "ASAP or next week?" down to preference fork */} - - {/* ASAP / Next week fork */} - - - + {/* Yes2: Patient thanks → closing */} + + Patient: "Thank you / OK" + AI: "Thank you for choosing us! + See you on [date]" - {/* ASAP badge */} - - ASAP - {/* Next week badge */} - - Next week + {/* ══ NO / RESCHEDULE BRANCH ══════════════════════════════════════ */} - {/* ASAP → "Can you come tomorrow?" */} - - Can you come - tomorrow? - YES → ask time + {/* no1: When would you like to reschedule? */} + + MSG 2: It is understandable! + When would you like to reschedule? + Patient replies with a preferred date + - {/* Next week → "Mon, Tue, or Wed?" */} - - Mon, Tue, - or Wed? - → ask time + {/* no2: Date received + day-open check */} + + Check: Is office open on that day? + (reads Office Hours settings) + ✓ Open → ask what time + ✗ Closed → "Office closed on [day]. Choose another day?" + {/* fail annotation */} + + + ↩ loops back to ask date + - {/* ── Time-slot node (shared by both paths) ─────────────────── */} - {/* Left vertical from ASAP node */} - - {/* Right vertical from NextWeek node */} - - {/* Horizontal converge line */} - - {/* Drop to time node */} - + {/* no3: What time on [date]? */} + + AI: "What time do you prefer + on [date]?" + Patient replies with a time (e.g. "1 pm") + - {/* Time-slot node */} - - Morning or - afternoon? + {/* no4: Time received + hours check */} + + Check: Is time within office hours? + (e.g. not during lunch 12–1pm) + ✓ In hours → ask to confirm + ✗ → "Not available. Our hours: [AM]–[PM]. Other time?" + + + ↩ loops back to ask time + - {/* DB update node (dashed) */} - - + AI: "Just to confirm — + do you prefer [date at time]?" + Patient replies YES or NO + + + {/* no6: Patient YES/NO */} + + Patient confirms or corrects + ✓ YES → check slot availability + ✗ NO → "No problem! What day/time?" + ↩ returns to date step + + + {/* no7: Slot availability check */} + + Check: Is slot available for staff? + (no overlapping appointments) + ✓ Free → move appointment + ✗ Taken → "[date] not available. Other time?" + + + ↩ loops back to ask date + + + {/* no8: DB move + AI badge */} + - - DB Update - Appt. moved! - "See you on [day] at [time]" + + DB Update + Appointment moved! + "Appt moved to [date at time]. + Receptionist will confirm tomorrow." + 🤖 AI badge shown on schedule grid + + + {/* no9: Patient thanks */} + + Patient: "Thank you / OK" + AI: "Thank you for choosing us! See you on [date]" ); }