/* mrwing — the live Mr. Wing chat surface. Talks to runWing (real Anthropic / window.claude / local NLU), confirms real actions, persists transcripts, and behaves as an accessible dialog. */ function TypingDots() { return (

{[0, 1, 2].map(i => )}

); } function ConfirmCard({ card, onConfirm, onCancel, done }) { const { t } = useLang(); const isCancel = card.type === "cancel"; const isEscalate = card.type === "escalate"; const isModify = card.type === "book" && card.mode === "modify"; if (isEscalate) { return (

{t("wing.escTitle")}

{card.reason || t("wing.escBody")}

); } const title = isCancel ? t("wing.confirmCancel") : isModify ? t("wing.confirmModify") : t("wing.confirmBooking"); return (

{title}

{card.title}

{card.detail &&

{card.detail}

}

{isCancel ? t("wing.refundToCard") : (card.pay || t("wing.savedCard"))} {isCancel ? "+" : ""}

{done ? (

{done === "no" ? <> {t("common.cancel")} : <> {isCancel ? t("status.Cancelled") : isModify ? t("status.Modified") : t("status.Confirmed")}}

) : (

)}

); } function MrWing() { const { t, lang } = useLang(); const store = useStore(); const { wingOpen, setWingOpen, wingSeed, setWingSeed, isMobile, saveConversation } = store; const sessionId = React.useRef("wing_" + Date.now().toString(36) + Math.random().toString(36).slice(2, 6)).current; const [messages, setMessages] = React.useState([{ role: "assistant", content: t("wing.greeting") }]); const [input, setInput] = React.useState(""); const [busy, setBusy] = React.useState(false); const [stream, setStream] = React.useState(null); const [confirmed, setConfirmed] = React.useState({}); const scrollRef = React.useRef(); const inputRef = React.useRef(); const dialogRef = React.useRef(null); const prevOpen = React.useRef(wingOpen); const hasKey = (store.apiKeys || []).some(k => k.id === "ai" && k.value && /^sk-/.test(k.value)); React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages, busy, stream]); React.useEffect(() => { if (wingOpen && inputRef.current) setTimeout(() => inputRef.current && inputRef.current.focus(), 60); }, [wingOpen]); // Esc to close React.useEffect(() => { if (!wingOpen) return; const onKey = (e) => { if (e.key === "Escape") setWingOpen(false); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [wingOpen]); // restore focus to the launcher when the dialog closes (keyboard a11y) React.useEffect(() => { if (prevOpen.current && !wingOpen) { const b = document.querySelector(".wing-launcher"); if (b) b.focus(); } prevOpen.current = wingOpen; }, [wingOpen]); // trap Tab focus inside the open dialog (aria-modal contract) const trapTab = (e) => { if (e.key !== "Tab" || !dialogRef.current) return; const f = [...dialogRef.current.querySelectorAll('button, input, a[href], select, textarea, [tabindex]:not([tabindex="-1"])')].filter(el => !el.disabled && el.offsetParent !== null); if (!f.length) return; const first = f[0], last = f[f.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } }; // persist transcript whenever it grows past the greeting React.useEffect(() => { if (messages.length <= 1) return; const lastCard = [...messages].reverse().find(m => m.card); const outcome = lastCard ? (lastCard.card.type === "escalate" ? "Escalated" : confirmed[messages.indexOf(lastCard)] === true ? "Booked" : "Quoted") : "Chat"; const firstUser = messages.find(m => m.role === "user"); saveConversation(sessionId, messages.map(m => ({ role: m.role, content: m.content, card: m.card || null })), { who: (store.searchCtx && firstUser ? "Web visitor" : "Web visitor"), outcome, channel: hasKey ? "Anthropic" : "Mr. Wing", preview: firstUser ? firstUser.content : "", }); }, [messages, confirmed]); const send = async (text) => { const content = (text || "").trim(); if (!content || busy) return; const next = [...messages, { role: "user", content }]; setMessages(next); setInput(""); setBusy(true); setStream(""); let acc = ""; const onToken = (tok) => { acc += tok; setStream(acc.split("```action")[0].trim()); }; try { const res = await window.runWing({ store, lang, messages: next, onToken }); setMessages(m => [...m, { role: "assistant", content: res.clean || "…", card: res.card, source: res.source }]); } catch (e) { setMessages(m => [...m, { role: "assistant", content: t("wing.netError") }]); } finally { setBusy(false); setStream(null); } }; React.useEffect(() => { if (wingSeed && wingOpen) { send(wingSeed); setWingSeed(null); } // eslint-disable-next-line }, [wingSeed, wingOpen]); const onConfirm = (idx, card) => { if (card.type === "cancel") { if (card.bookingId) store.cancelBooking(card.bookingId); setMessages(m => [...m, { role: "assistant", content: t("wing.cancelledMsg") }]); } else if (card.mode === "modify") { if (card.bookingId) store.modifyBooking(card.bookingId, { date: card.newDate || undefined, status: "Confirmed", note: "Rescheduled by Mr. Wing" }); setMessages(m => [...m, { role: "assistant", content: t("wing.modifiedMsg") }]); } else { const rec = store.addBooking({ type: card.mode || "flight", title: card.title, who: "Mr. Wing booking", amount: card.price || 0, channel: "Mr. Wing", date: (store.searchCtx && store.searchCtx.depart) || "2026-06-08", paidWith: card.pay }); setMessages(m => [...m, { role: "assistant", content: t("wing.bookedMsg", { id: rec.id }) }]); } setConfirmed(c => ({ ...c, [idx]: true })); }; const quick = lang === "ar" ? ["رحلة السعودية إلى جدة غدًا", "فندق في الرياض، ليلتان", "ألغِ رحلتي", "جناح كبار شخصيات في الريتز"] : ["Saudia to Jeddah tomorrow AM", "Hotel in Riyadh, 2 nights", "Cancel my flight", "VVIP suite at the Ritz"]; return ( <> {!wingOpen && !isMobile && ( )} {wingOpen && ( )} ); } Object.assign(window, { MrWing, ConfirmCard, TypingDots });