feat: reschedule-by-office batch SMS, AI follow-up toggle, date-shortcut fix, combined flow diagram
- Add Reschedule for Column button on schedule page with AI follow-up toggle (default on)
- Add POST /api/twilio/send-reschedule-batch — sends Reschedule by Office template, starts AI reschedule conversation per patient
- Add {officePhone} (office call-in number) and {twilioPhone} (SMS number) variable replacement in both batch endpoints
- Fix broken variable names in Reschedule by Office template ({office phone number) → {officePhone}, {Twilio phone number} → {twilioPhone})
- Fix reschedule-graph: when patient replies with date in same message as YES/NO (e.g. "ok, 5/18"), AI now checks day open and asks for time instead of asking "what day and time?"
- Fix twilio-webhooks: same date-shortcut logic for reminder flow — "no, 5/18" skips "when to reschedule?" and goes straight to day check
- Update LangGraph SVG: rename to Reminder & Reschedule Flow, combine both entry points (Reminder SMS + Reschedule SMS) into one diagram with date-shortcut annotations
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gitead
@@ -57,64 +57,61 @@ function newId() {
|
||||
return Date.now().toString(36) + Math.random().toString(36).slice(2);
|
||||
}
|
||||
|
||||
// ─── LangGraph flow diagram (SVG) ─────────────────────────────────────────────
|
||||
// ─── Combined Reminder & Reschedule flow diagram (SVG) ────────────────────────
|
||||
|
||||
function LangGraphFlow() {
|
||||
const W = 640;
|
||||
const cx = 320; // top-section center
|
||||
const W = 700;
|
||||
const cx = 350;
|
||||
const nW = 210;
|
||||
const nx = cx - nW / 2;
|
||||
const nx = cx - nW / 2; // 245
|
||||
|
||||
// ── Top sequence ──────────────────────────────────────────────────────────
|
||||
const n1y = 16, n1h = 52;
|
||||
const n2y = 84, n2h = 52;
|
||||
const n3y = 152, n3h = 76; // AI classifies + sends MSG 1
|
||||
// ── Dual entry nodes ──────────────────────────────────────────────────────
|
||||
const entryW = 192;
|
||||
const lEntryCx = 155;
|
||||
const rEntryCx = 545;
|
||||
const e1y = 14, e1h = 56;
|
||||
|
||||
const forkHY = n3y + n3h + 22; // 250
|
||||
// Merge connector (horizontal line where both branches meet)
|
||||
const mergeY = e1y + e1h + 14; // 84
|
||||
|
||||
// Branch centers
|
||||
const lcx = 138; // YES (left)
|
||||
const rcx = 490; // NO (right)
|
||||
// ── Center sequence ───────────────────────────────────────────────────────
|
||||
const n2y = mergeY + 14, n2h = 52; // Patient replies y=98
|
||||
const n3y = n2y + n2h + 14, n3h = 84; // AI classifies y=164
|
||||
|
||||
const forkHY = n3y + n3h + 22; // 270
|
||||
|
||||
// ── Branch centers ────────────────────────────────────────────────────────
|
||||
const lcx = 140; // YES (left)
|
||||
const rcx = 490; // NO / Reschedule (right)
|
||||
|
||||
// ── YES branch ────────────────────────────────────────────────────────────
|
||||
const yes1y = forkHY + 50; // 300
|
||||
const yes1h = 78;
|
||||
const yes2y = yes1y + yes1h + 14; // 392
|
||||
const yes2h = 52;
|
||||
const yesW = 195;
|
||||
const yes1y = forkHY + 50, yes1h = 88; // y=320
|
||||
const yes2y = yes1y + yes1h + 12, yes2h = 52; // y=460
|
||||
|
||||
// ── 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;
|
||||
// ── NO / Reschedule branch ────────────────────────────────────────────────
|
||||
const noW = 208;
|
||||
const failX = rcx + noW / 2 + 8; // 602
|
||||
const failW = 92;
|
||||
|
||||
const totalH = Math.max(yes2y + yes2h, no9y + no9h) + 24;
|
||||
const no1y = forkHY + 50, no1h = 84; // y=320 ask date / shortcut
|
||||
const no2y = no1y + no1h + 14, no2h = 82; // y=418 day check
|
||||
const no3y = no2y + no2h + 14, no3h = 64; // y=514 ask time
|
||||
const no4y = no3y + no3h + 14, no4h = 82; // y=592 time check
|
||||
const no5y = no4y + no4h + 14, no5h = 64; // y=688 confirm datetime
|
||||
const no6y = no5y + no5h + 14, no6h = 74; // y=766 patient YES/NO
|
||||
const no7y = no6y + no6h + 14, no7h = 82; // y=854 slot check
|
||||
const no8y = no7y + no7h + 14, no8h = 80; // y=950 move appointment
|
||||
const no9y = no8y + no8h + 14, no9h = 54; // y=1044 patient thanks
|
||||
|
||||
// Helper: failure annotation box to the right of a check node
|
||||
const failX = rcx + noW / 2 + 8;
|
||||
const failW = 122;
|
||||
const totalH = Math.max(yes2y + yes2h, no9y + no9h) + 28;
|
||||
|
||||
return (
|
||||
<svg
|
||||
viewBox={`0 0 ${W} ${totalH}`}
|
||||
className="w-full max-w-2xl mx-auto"
|
||||
role="img"
|
||||
aria-label="LangGraph appointment reminder conversation flow"
|
||||
aria-label="LangGraph Reminder and Reschedule conversation flow"
|
||||
>
|
||||
<defs>
|
||||
<marker id="rg2ah" markerWidth="10" markerHeight="7"
|
||||
@@ -125,15 +122,31 @@ function LangGraphFlow() {
|
||||
refX="7" refY="3" orient="auto" markerUnits="userSpaceOnUse">
|
||||
<polygon points="0 0,8 3,0 6" fill="#EF4444" />
|
||||
</marker>
|
||||
<marker id="rg2short" markerWidth="8" markerHeight="6"
|
||||
refX="7" refY="3" orient="auto" markerUnits="userSpaceOnUse">
|
||||
<polygon points="0 0,8 3,0 6" fill="#047857" />
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
{/* ══ TOP SEQUENCE ═══════════════════════════════════════════════ */}
|
||||
{/* ══ DUAL ENTRY NODES ════════════════════════════════════════════ */}
|
||||
|
||||
{/* N1: Office sends reminder */}
|
||||
<rect x={nx} y={n1y} width={nW} height={n1h} rx={8} fill="#EFF6FF" stroke="#3B82F6" strokeWidth={1.5} />
|
||||
<text x={cx} y={n1y+22} textAnchor="middle" fontSize={13} fontWeight="600" fill="#1D4ED8">Office sends reminder SMS</text>
|
||||
<text x={cx} y={n1y+40} textAnchor="middle" fontSize={10} fill="#93C5FD">Staff triggers the batch send</text>
|
||||
<line x1={cx} y1={n1y+n1h} x2={cx} y2={n2y-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#rg2ah)" />
|
||||
{/* Left: Reminder SMS */}
|
||||
<rect x={lEntryCx-entryW/2} y={e1y} width={entryW} height={e1h} rx={8} fill="#EFF6FF" stroke="#3B82F6" strokeWidth={1.5} />
|
||||
<text x={lEntryCx} y={e1y+22} textAnchor="middle" fontSize={12} fontWeight="600" fill="#1D4ED8">Office sends Reminder SMS</text>
|
||||
<text x={lEntryCx} y={e1y+40} textAnchor="middle" fontSize={9} fill="#93C5FD">Staff triggers batch send</text>
|
||||
|
||||
{/* Right: Reschedule by Office SMS */}
|
||||
<rect x={rEntryCx-entryW/2} y={e1y} width={entryW} height={e1h} rx={8} fill="#FFF7ED" stroke="#F97316" strokeWidth={1.5} />
|
||||
<text x={rEntryCx} y={e1y+22} textAnchor="middle" fontSize={12} fontWeight="600" fill="#C2410C">Office sends Reschedule SMS</text>
|
||||
<text x={rEntryCx} y={e1y+40} textAnchor="middle" fontSize={9} fill="#FDBA74">"Reschedule by Office" template</text>
|
||||
|
||||
{/* Converging lines → horizontal merge → Patient replies */}
|
||||
<line x1={lEntryCx} y1={e1y+e1h} x2={lEntryCx} y2={mergeY} stroke="#9CA3AF" strokeWidth={1.5} />
|
||||
<line x1={rEntryCx} y1={e1y+e1h} x2={rEntryCx} y2={mergeY} stroke="#9CA3AF" strokeWidth={1.5} />
|
||||
<line x1={lEntryCx} y1={mergeY} x2={rEntryCx} y2={mergeY} stroke="#9CA3AF" strokeWidth={1.5} />
|
||||
<line x1={cx} y1={mergeY} x2={cx} y2={n2y-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#rg2ah)" />
|
||||
|
||||
{/* ══ CENTER SEQUENCE ══════════════════════════════════════════════ */}
|
||||
|
||||
{/* N2: Patient replies */}
|
||||
<rect x={nx} y={n2y} width={nW} height={n2h} rx={8} fill="#F9FAFB" stroke="#D1D5DB" strokeWidth={1.5} />
|
||||
@@ -141,18 +154,18 @@ function LangGraphFlow() {
|
||||
<text x={cx} y={n2y+40} textAnchor="middle" fontSize={10} fill="#9CA3AF">Any SMS triggers the AI</text>
|
||||
<line x1={cx} y1={n2y+n2h} x2={cx} y2={n3y-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#rg2ah)" />
|
||||
|
||||
{/* N3: AI classifies + sends MSG 1 */}
|
||||
{/* N3: AI classifies */}
|
||||
<rect x={nx} y={n3y} width={nW} height={n3h} rx={8} fill="#ECFDF5" stroke="#10B981" strokeWidth={1.5} />
|
||||
<text x={cx} y={n3y+20} textAnchor="middle" fontSize={12} fontWeight="700" fill="#065F46">Google AI classifies YES / NO</text>
|
||||
<text x={cx} y={n3y+36} textAnchor="middle" fontSize={10} fontWeight="600" fill="#047857">MSG 1 → AI self-introduction sent</text>
|
||||
<text x={cx} y={n3y+52} textAnchor="middle" fontSize={9} fill="#6B7280" fontStyle="italic">"Hi! My name is Lisa at {"{officeName}"}…"</text>
|
||||
<text x={cx} y={n3y+66} textAnchor="middle" fontSize={9} fill="#6B7280" fontStyle="italic">MSG 2 → intent response (below)</text>
|
||||
<text x={cx} y={n3y+36} textAnchor="middle" fontSize={10} fontWeight="600" fill="#1D4ED8">Reminder: intro (MSG 1) + reply (MSG 2)</text>
|
||||
<text x={cx} y={n3y+52} textAnchor="middle" fontSize={10} fontWeight="600" fill="#C2410C">Reschedule: reply sent directly</text>
|
||||
<text x={cx} y={n3y+70} textAnchor="middle" fontSize={9} fill="#6B7280" fontStyle="italic">Date in reply → AI skips to Day Check</text>
|
||||
|
||||
{/* Fork lines */}
|
||||
<line x1={cx} y1={n3y+n3h} x2={cx} y2={forkHY} stroke="#9CA3AF" strokeWidth={1.5} />
|
||||
<line x1={lcx} y1={forkHY} x2={rcx} y2={forkHY} stroke="#9CA3AF" strokeWidth={1.5} />
|
||||
<line x1={lcx} y1={forkHY} x2={lcx} y2={yes1y-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#rg2ah)" />
|
||||
<line x1={rcx} y1={forkHY} x2={rcx} y2={no1y-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#rg2ah)" />
|
||||
<line x1={cx} y1={n3y+n3h} x2={cx} y2={forkHY} stroke="#9CA3AF" strokeWidth={1.5} />
|
||||
<line x1={lcx} y1={forkHY} x2={rcx} y2={forkHY} stroke="#9CA3AF" strokeWidth={1.5} />
|
||||
<line x1={lcx} y1={forkHY} x2={lcx} y2={yes1y-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#rg2ah)" />
|
||||
<line x1={rcx} y1={forkHY} x2={rcx} y2={no1y-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#rg2ah)" />
|
||||
|
||||
{/* YES / NO badges */}
|
||||
<rect x={lcx-26} y={forkHY-12} width={52} height={24} rx={12} fill="#F0FDF4" stroke="#22C55E" strokeWidth={1.5} />
|
||||
@@ -162,35 +175,42 @@ function LangGraphFlow() {
|
||||
|
||||
{/* ══ YES BRANCH ══════════════════════════════════════════════════ */}
|
||||
|
||||
{/* Yes1: Thank you */}
|
||||
<rect x={lcx-nW/2} y={yes1y} width={nW} height={yes1h} rx={8} fill="#F0FDF4" stroke="#22C55E" strokeWidth={1.5} />
|
||||
<text x={lcx} y={yes1y+20} textAnchor="middle" fontSize={11} fontWeight="600" fill="#15803D">MSG 2: Thank you for confirming!</text>
|
||||
<text x={lcx} y={yes1y+38} textAnchor="middle" fontSize={9} fill="#6B7280" fontStyle="italic">"See you on [date & time]"</text>
|
||||
<text x={lcx} y={yes1y+56} textAnchor="middle" fontSize={9} fill="#6B7280" fontStyle="italic">Appointment confirmed ✓</text>
|
||||
<rect x={lcx-yesW/2} y={yes1y} width={yesW} height={yes1h} rx={8} fill="#F0FDF4" stroke="#22C55E" strokeWidth={1.5} />
|
||||
<text x={lcx} y={yes1y+18} textAnchor="middle" fontSize={10} fontWeight="600" fill="#15803D">Reminder: Thank you for confirming!</text>
|
||||
<text x={lcx} y={yes1y+34} textAnchor="middle" fontSize={10} fontWeight="600" fill="#C2410C">Reschedule: What day & time?</text>
|
||||
<text x={lcx} y={yes1y+52} textAnchor="middle" fontSize={9} fill="#6B7280" fontStyle="italic">"See you on [date & time]"</text>
|
||||
<text x={lcx} y={yes1y+70} textAnchor="middle" fontSize={8} fill="#047857">date in reply → Day Check ↘</text>
|
||||
<line x1={lcx} y1={yes1y+yes1h} x2={lcx} y2={yes2y-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#rg2ah)" />
|
||||
|
||||
{/* Yes2: Patient thanks → closing */}
|
||||
<rect x={lcx-nW/2} y={yes2y} width={nW} height={yes2h} rx={8} fill="#F9FAFB" stroke="#D1D5DB" strokeWidth={1.5} />
|
||||
{/* Yes2: Patient thanks */}
|
||||
<rect x={lcx-yesW/2} y={yes2y} width={yesW} height={yes2h} rx={8} fill="#F9FAFB" stroke="#D1D5DB" strokeWidth={1.5} />
|
||||
<text x={lcx} y={yes2y+20} textAnchor="middle" fontSize={11} fontWeight="600" fill="#374151">Patient: "Thank you / OK"</text>
|
||||
<text x={lcx} y={yes2y+38} textAnchor="middle" fontSize={9} fill="#9CA3AF" fontStyle="italic">AI: "Thank you for choosing us!</text>
|
||||
<text x={lcx} y={yes2y+50} textAnchor="middle" fontSize={9} fill="#9CA3AF" fontStyle="italic">See you on [date]"</text>
|
||||
<text x={lcx} y={yes2y+38} textAnchor="middle" fontSize={9} fill="#9CA3AF" fontStyle="italic">AI: "Thank you for choosing us! See you on [date]"</text>
|
||||
|
||||
{/* Dashed shortcut: YES with date → Day Check */}
|
||||
<line
|
||||
x1={lcx + yesW/2} y1={yes1y + 52}
|
||||
x2={rcx - noW/2 - 2} y2={no2y + 34}
|
||||
stroke="#047857" strokeWidth={1} strokeDasharray="4 3"
|
||||
markerEnd="url(#rg2short)"
|
||||
/>
|
||||
|
||||
{/* ══ NO / RESCHEDULE BRANCH ══════════════════════════════════════ */}
|
||||
|
||||
{/* no1: When would you like to reschedule? */}
|
||||
{/* no1: Understandable / ask date (with date-shortcut note) */}
|
||||
<rect x={rcx-noW/2} y={no1y} width={noW} height={no1h} rx={8} fill="#FFF7ED" stroke="#F97316" strokeWidth={1.5} />
|
||||
<text x={rcx} y={no1y+20} textAnchor="middle" fontSize={11} fontWeight="600" fill="#C2410C">MSG 2: It is understandable!</text>
|
||||
<text x={rcx} y={no1y+38} textAnchor="middle" fontSize={11} fontWeight="600" fill="#C2410C">When would you like to reschedule?</text>
|
||||
<text x={rcx} y={no1y+54} textAnchor="middle" fontSize={9} fill="#9CA3AF" fontStyle="italic">Patient replies with a preferred date</text>
|
||||
<text x={rcx} y={no1y+18} textAnchor="middle" fontSize={11} fontWeight="600" fill="#C2410C">MSG 2: It is understandable!</text>
|
||||
<text x={rcx} y={no1y+34} textAnchor="middle" fontSize={11} fontWeight="600" fill="#C2410C">When would you like to reschedule?</text>
|
||||
<text x={rcx} y={no1y+52} textAnchor="middle" fontSize={9} fill="#9CA3AF" fontStyle="italic">Patient replies with a preferred date</text>
|
||||
<text x={rcx} y={no1y+70} textAnchor="middle" fontSize={8} fill="#047857" fontStyle="italic">date in reply → skips to Day Check ↓</text>
|
||||
<line x1={rcx} y1={no1y+no1h} x2={rcx} y2={no2y-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#rg2ah)" />
|
||||
|
||||
{/* no2: Date received + day-open check */}
|
||||
{/* no2: Day check */}
|
||||
<rect x={rcx-noW/2} y={no2y} width={noW} height={no2h} rx={8} fill="#ECFDF5" stroke="#10B981" strokeWidth={1.5} />
|
||||
<text x={rcx} y={no2y+18} textAnchor="middle" fontSize={11} fontWeight="700" fill="#065F46">Check: Is office open on that day?</text>
|
||||
<text x={rcx} y={no2y+34} textAnchor="middle" fontSize={9} fill="#6B7280">(reads Office Hours settings)</text>
|
||||
<text x={rcx} y={no2y+52} textAnchor="middle" fontSize={9} fill="#15803D" fontWeight="600">✓ Open → ask what time</text>
|
||||
<text x={rcx} y={no2y+68} textAnchor="middle" fontSize={9} fill="#DC2626" fontWeight="600">✗ Closed → "Office closed on [day]. Choose another day?"</text>
|
||||
{/* fail annotation */}
|
||||
<text x={rcx} y={no2y+68} textAnchor="middle" fontSize={9} fill="#DC2626" fontWeight="600">✗ Closed → "Office closed on [day]. Choose another?"</text>
|
||||
<line x1={rcx+noW/2} y1={no2y+no2h-16} x2={failX-1} y2={no2y+no2h-16} stroke="#EF4444" strokeWidth={1} strokeDasharray="3 2" markerEnd="url(#rg2fail)" />
|
||||
<rect x={failX} y={no2y+no2h-28} width={failW} height={24} rx={5} fill="#FEF2F2" stroke="#FCA5A5" strokeWidth={1} />
|
||||
<text x={failX+failW/2} y={no2y+no2h-12} textAnchor="middle" fontSize={8} fill="#DC2626">↩ loops back to ask date</text>
|
||||
@@ -203,7 +223,7 @@ function LangGraphFlow() {
|
||||
<text x={rcx} y={no3y+52} textAnchor="middle" fontSize={9} fill="#9CA3AF" fontStyle="italic">Patient replies with a time (e.g. "1 pm")</text>
|
||||
<line x1={rcx} y1={no3y+no3h} x2={rcx} y2={no4y-2} stroke="#9CA3AF" strokeWidth={1.5} markerEnd="url(#rg2ah)" />
|
||||
|
||||
{/* no4: Time received + hours check */}
|
||||
{/* no4: Time check */}
|
||||
<rect x={rcx-noW/2} y={no4y} width={noW} height={no4h} rx={8} fill="#ECFDF5" stroke="#10B981" strokeWidth={1.5} />
|
||||
<text x={rcx} y={no4y+18} textAnchor="middle" fontSize={11} fontWeight="700" fill="#065F46">Check: Is time within office hours?</text>
|
||||
<text x={rcx} y={no4y+34} textAnchor="middle" fontSize={9} fill="#6B7280">(e.g. not during lunch 12–1pm)</text>
|
||||
@@ -244,7 +264,7 @@ function LangGraphFlow() {
|
||||
<rect x={rcx-noW/2} y={no8y} width={noW} height={no8h} rx={8}
|
||||
fill="#F0F9FF" stroke="#0EA5E9" strokeWidth={1.5} strokeDasharray="5 3" />
|
||||
<rect x={rcx-46} y={no8y-11} width={92} height={22} rx={11} fill="#E0F2FE" stroke="#0EA5E9" strokeWidth={1.5} />
|
||||
<text x={rcx} y={no8y+3} textAnchor="middle" fontSize={9} fontWeight="700" fill="#0369A1">DB Update</text>
|
||||
<text x={rcx} y={no8y+3} textAnchor="middle" fontSize={9} fontWeight="700" fill="#0369A1">DB Update</text>
|
||||
<text x={rcx} y={no8y+22} textAnchor="middle" fontSize={11} fontWeight="600" fill="#0369A1">Appointment moved!</text>
|
||||
<text x={rcx} y={no8y+38} textAnchor="middle" fontSize={9} fill="#6B7280" fontStyle="italic">"Appt moved to [date at time].</text>
|
||||
<text x={rcx} y={no8y+52} textAnchor="middle" fontSize={9} fill="#6B7280" fontStyle="italic">Receptionist will confirm tomorrow."</text>
|
||||
@@ -703,6 +723,8 @@ export function AiChatSettingsCard() {
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-xs font-mono">{"{firstName}"}</code>{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-xs font-mono">{"{officeName}"}</code>{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-xs font-mono">{"{officeAddress}"}</code>{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-xs font-mono" title="Office call-in phone number">{"{officePhone}"}</code>{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-xs font-mono" title="Twilio SMS number patients text back to">{"{twilioPhone}"}</code>{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-xs font-mono">{"{appointmentDate}"}</code>{" "}
|
||||
<code className="bg-muted px-1 py-0.5 rounded text-xs font-mono">{"{appointmentTime}"}</code>
|
||||
</p>
|
||||
@@ -892,7 +914,7 @@ export function AiChatSettingsCard() {
|
||||
<Tabs defaultValue="reminder">
|
||||
<TabsList className="w-full">
|
||||
<TabsTrigger value="reminder" className="flex-1 text-xs">
|
||||
Appointment Reminder Flow
|
||||
Reminder & Reschedule Flow
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="new_patient" className="flex-1 text-xs">
|
||||
New Patient / After-Hours Flow
|
||||
|
||||
@@ -166,6 +166,8 @@ export default function AppointmentsPage() {
|
||||
const [isSendingReminders, setIsSendingReminders] = useState(false);
|
||||
const [reminderAiFollowUp, setReminderAiFollowUp] = useState(true);
|
||||
const [selectedRescheduleColumns, setSelectedRescheduleColumns] = useState<Set<number>>(new Set());
|
||||
const [isSendingReschedule, setIsSendingReschedule] = useState(false);
|
||||
const [rescheduleAiFollowUp, setRescheduleAiFollowUp] = useState(true);
|
||||
const [selectedDownloadPdfColumns, setSelectedDownloadPdfColumns] = useState<Set<number>>(new Set());
|
||||
const [isDownloadingClaimPdfs, setIsDownloadingClaimPdfs] = useState(false);
|
||||
const [columnLabels, setColumnLabels] = useState<Record<string, string>>({});
|
||||
@@ -1260,6 +1262,27 @@ export default function AppointmentsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleSendRescheduleForColumn = async () => {
|
||||
if (!user || selectedRescheduleColumns.size === 0) return;
|
||||
setIsSendingReschedule(true);
|
||||
try {
|
||||
const res = await apiRequest("POST", "/api/twilio/send-reschedule-batch", {
|
||||
date: formattedSelectedDate,
|
||||
staffIds: Array.from(selectedRescheduleColumns),
|
||||
aiFollowUp: rescheduleAiFollowUp,
|
||||
});
|
||||
const { sent, skipped } = await res.json();
|
||||
toast({
|
||||
title: "Reschedule Messages Sent",
|
||||
description: `Sent ${sent} message${sent !== 1 ? "s" : ""}${skipped > 0 ? `, skipped ${skipped} (no phone)` : ""}.`,
|
||||
});
|
||||
} catch (err: any) {
|
||||
toast({ title: "Failed to Send Reschedule Messages", description: err?.message ?? String(err), variant: "destructive" });
|
||||
} finally {
|
||||
setIsSendingReschedule(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownloadClaimPdfs = async () => {
|
||||
if (!user || selectedDownloadPdfColumns.size === 0) return;
|
||||
const staffIdsParam = Array.from(selectedDownloadPdfColumns).join(",");
|
||||
@@ -1458,10 +1481,21 @@ export default function AppointmentsPage() {
|
||||
{/* Reschedule for Column section */}
|
||||
<div className="flex items-center gap-2 border rounded-md px-3 py-2 bg-white shadow-sm">
|
||||
<Button
|
||||
disabled={true}
|
||||
onClick={() => handleSendRescheduleForColumn()}
|
||||
disabled={isLoading || isSendingReschedule || selectedRescheduleColumns.size === 0}
|
||||
size="sm"
|
||||
>
|
||||
Reschedule for Column
|
||||
{isSendingReschedule ? (
|
||||
<>
|
||||
<LoaderCircleIcon className="h-4 w-4 mr-1 animate-spin" />
|
||||
Sending...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<MessageSquare className="h-4 w-4 mr-1" />
|
||||
Reschedule for Column
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{staffMembers.map((staff, index) => (
|
||||
<label
|
||||
@@ -1479,6 +1513,20 @@ export default function AppointmentsPage() {
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
<div className="flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200">
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={rescheduleAiFollowUp}
|
||||
onClick={() => setRescheduleAiFollowUp((v) => !v)}
|
||||
className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none ${rescheduleAiFollowUp ? "bg-teal-600" : "bg-gray-300"}`}
|
||||
>
|
||||
<span
|
||||
className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transform transition-transform ${rescheduleAiFollowUp ? "translate-x-4" : "translate-x-0"}`}
|
||||
/>
|
||||
</button>
|
||||
<span className="text-xs text-gray-600 whitespace-nowrap">AI follow up</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Download Claim PDF for Column section */}
|
||||
|
||||
Reference in New Issue
Block a user