// chatbot.jsx β "Mira", the AI-driven in-app assistant for Eurostar wholesale customers.
// Powers: take orders, reorder past orders, live stock/substitutes, show customer price,
// proforma, dues & order status, payment help, escalate to rep, RFQ, complaints,
// multilingual, voice input, photo input. Calls the built-in AI via window.claude.complete.
function ChatAssistant({ persona, cart, addToCart, navigate, isOnline, route }) {
const [open, setOpen] = React.useState(false);
const [busy, setBusy] = React.useState(false);
const [input, setInput] = React.useState('');
const [listening, setListening] = React.useState(false);
const [pendingImg, setPendingImg] = React.useState(null);
const fileRef = React.useRef(null);
const recRef = React.useRef(null);
// Stable per-chat-session id so the whole conversation logs as one thread (for Mira Admin β Chats).
const sessionRef = React.useRef('S-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 7));
const [msgs, setMsgs] = React.useState(() => ([
{ role: 'assistant', text: `Namaste${persona && persona.contact ? ' ' + persona.contact.split(' ')[0] : ''} π I'm Mira, your Eurostar assistant. I can take an order, repeat a past order, check stock or your dues, track a shipment, raise a custom request, or sort out any issue β in your language. How can I help?` }
]));
const scroller = React.useRef(null);
React.useEffect(() => { if (scroller.current) scroller.current.scrollTop = scroller.current.scrollHeight; }, [msgs, open, busy]);
// ---- Shipment updates pushed from the CRM: Mira proactively tells the customer when an order is dispatched ----
const [unread, setUnread] = React.useState(0);
// Office can switch the customer-facing Mira off from Mira Admin β Turn Mira
// on/off. Pulled from the back room so the toggle reaches every customer, not
// just the device that set it. Polled so a change applies without a reload.
const [miraOn, setMiraOn] = React.useState(true);
React.useEffect(() => {
const API = window.EUROSTAR_API || location.origin;
let alive = true;
const pull = () => fetch(API + '/admin/mira/enabled')
.then((r) => (r.ok ? r.json() : null))
.then((d) => { if (alive && d && typeof d === 'object') setMiraOn(d.salesApp !== false); })
.catch(() => {});
pull();
const iv = setInterval(pull, 15000);
return () => { alive = false; clearInterval(iv); };
}, []);
// Pull the image library from the back room so Mira can send the pictures the
// office uploaded β on any customer device, not just the one that uploaded
// them. imageLib() reads this localStorage key.
React.useEffect(() => {
const API = window.EUROSTAR_API || location.origin;
fetch(API + '/admin/mira/images')
.then((r) => (r.ok ? r.json() : null))
.then((d) => { if (Array.isArray(d)) { try { localStorage.setItem('eurostar-mira-images', JSON.stringify(d)); } catch (e) {} } })
.catch(() => {});
}, []);
const readNotifs = () => { try { return JSON.parse(localStorage.getItem('eurostar-mira-notifications') || '[]'); } catch (e) { return []; } };
// Production filters by the logged-in customer id; in this prototype we surface unread shipment updates.
const pendingNotifs = () => readNotifs().filter(n => !n.read);
React.useEffect(() => {
const tick = () => setUnread(pendingNotifs().length);
tick();
const iv = setInterval(tick, 3000);
window.addEventListener('storage', tick);
return () => { clearInterval(iv); window.removeEventListener('storage', tick); };
}, []);
React.useEffect(() => {
if (!open) return;
const pend = pendingNotifs();
if (!pend.length) return;
const bubbles = pend.map(n => ({ role: 'assistant', text: `π¦ Good news! Your order ${n.orderId} has been dispatched${n.courier ? ' via ' + n.courier : ''}.${n.track ? '\nTracking number: ' + n.track : ''}\nYou'll receive it soon β reply here if you need anything. π` }));
setMsgs(m => [...m, ...bubbles]);
try {
const all = readNotifs().map(n => n.read ? n : { ...n, read: true });
localStorage.setItem('eurostar-mira-notifications', JSON.stringify(all));
} catch (e) {}
setUnread(0);
}, [open]);
// ---- live context Mira can reason over ----
const cats = (window.CATEGORIES || []).map(c => `${c.short} (${c.id})`).join(', ');
// Mira must not read the demo ORDERS book β that is the sample personas' data,
// so she would discuss a stranger's orders with whoever is signed in. Only the
// orders this browser actually placed are safe context here; the assistant is
// not authenticated, so it cannot fetch the customer's real history.
const orders = (window.loadMyOrders ? loadMyOrders(persona) : []) || [];
const findP = (pid) => (window.findProduct ? window.findProduct(pid) : null);
const findT = (t) => (window.findTone ? window.findTone(t) : null);
const histText = orders.slice(0, 5).map(o => `${o.id} [${o.date}, ${o.status}]: ` + o.lines.map(l => { const p = findP(l.pid); return (p ? p.name : l.pid) + ' Γ' + l.qty; }).join(', ')).join(' | ') || 'no past orders on file';
const soldKeys = window.loadSoldOut ? Object.keys(window.loadSoldOut()) : [];
const soldText = soldKeys.length ? soldKeys.slice(0, 14).map(k => { const p = k.split('|'); return p[0] + ' ' + p.slice(-2).join(' '); }).join('; ') : 'nothing is sold out right now';
const isCredit = ['15', '30', '45', '60'].includes(String(persona.terms));
// ---- Full catalog briefing: every category with its grades, colours, shapes, sizes, unit & MOQ ----
const catalogFacts = () => {
try {
const CATS = window.CATEGORIES || [];
const GBY = window.GRADES_BY_CATEGORY || {};
const CBY = window.COLORS_BY_CATEGORY || {};
const SBY = window.SHAPES_BY_CATEGORY || {};
const nm = (x) => (x && (x.name || x.label || x.short || x.id)) || x;
const uLong = window.unitLabelLong || ((c) => (window.catUnit ? window.catUnit(c) : 'pc'));
const moqOf = window.unitMoq ? (c) => window.unitMoq(c) : () => 1;
const lines = CATS.map((c) => {
const id = c.id;
const grades = (GBY[id] || []).map((g) => g.name + (g.tier ? ' [' + g.tier + ']' : '')).filter(Boolean);
const colours = (CBY[id] || []).map(nm).filter(Boolean);
const shapes = (SBY[id] || []).map(nm).filter(Boolean);
let unit = 'pc';
try { unit = window.catUnit ? window.catUnit(id) : 'pc'; } catch (e) {}
let moq = 1;
try { moq = moqOf(id); } catch (e) {}
const parts = [];
if (grades.length) parts.push('Grades: ' + grades.join('; '));
if (colours.length) parts.push('Colours: ' + colours.slice(0, 40).join(', '));
if (shapes.length) parts.push('Shapes: ' + shapes.join(', '));
parts.push('Sold by: ' + unit + (moq > 1 ? ' (min ' + moq + ')' : ''));
return 'β’ ' + (c.short || c.name) + ' (' + id + ') β ' + (c.blurb ? c.blurb + ' ' : '') + parts.join(' | ');
});
const sizeList = (window.FULL_SIZES || []).map((s) => (s.r != null ? s.r : s)).join(', ');
return 'FULL CATALOG (this is the complete, authoritative product list β do NOT invent anything beyond it):\n' + lines.join('\n') + (sizeList ? '\n\nTypical round sizes available (mm): ' + sizeList : '');
} catch (e) { return ''; }
};
// Image library (uploaded by the office in Mira Admin β Images). Each: {id,name,desc,data}.
const imageLib = () => { try { return JSON.parse(localStorage.getItem('eurostar-mira-images') || '[]'); } catch (e) { return []; } };
const imageLibFacts = () => {
const lib = imageLib();
if (!lib.length) return '';
return '\n\nIMAGE LIBRARY β these are the ONLY images you can send. To send one, append <>exact name<> at the very end of your message. Send an image ONLY when the customer clearly asks for that specific item AND its exact name is in the list below. If the customer asks for an image that is NOT in this list, tell them you don\'t have that image yet β NEVER send a different image as a substitute, and never invent one:\n- ' + lib.map(im => im.name + (im.desc ? ' (' + im.desc + ')' : '')).join('\n- ');
};
// Admin-defined overrides (edited in the Mira Admin page, stored in localStorage).
const miraOverrides = () => {
let s = '';
try {
const inst = localStorage.getItem('eurostar-mira-instructions');
if (inst && inst.trim()) s += '\n\nADMIN INSTRUCTIONS (highest priority, set by Eurostar office):\n' + inst.trim();
const rules = JSON.parse(localStorage.getItem('eurostar-mira-rules') || '[]');
if (rules.length) s += '\n\nCORRECTION RULES (always follow):\n- ' + rules.join('\n- ');
const know = JSON.parse(localStorage.getItem('eurostar-mira-knowledge') || '[]');
if (know.length) s += '\n\nKNOWLEDGE BASE:\n' + know.map(k => 'β’ ' + k.title + ': ' + k.text).join('\n');
const ex = JSON.parse(localStorage.getItem('eurostar-mira-examples') || '[]');
if (ex.length) s += '\n\nEXAMPLE ANSWERS (match this phrasing/approach):\n' + ex.map(e => 'Q: ' + e.q + '\nA: ' + e.a).join('\n');
} catch (e) {}
return s;
};
const systemPrompt = () => `You are "Mira", the warm, concise WhatsApp-style assistant for Eurostar Technologies β a B2B wholesale supplier of cubic zirconia, moissanite and coloured gemstones to jewellers across Asia-Pacific. You serve trade customers (jewellers / manufacturers).
CUSTOMER: ${persona.company} Β· account ${persona.code} Β· ${persona.location || ''} Β· terms: ${isCredit ? persona.terms + ' days credit' : 'cash'}.
THEIR RECENT ORDERS: ${histText}.
CURRENTLY SOLD OUT: ${soldText}.
PRODUCT CATEGORIES (use the id in actions): ${cats}.
${catalogFacts()}
ORDERING: category β (grade) β colour β shape β size(s) in mm β quantity. White Round CZ is only white & round (just ask sizes). Quote realistic wholesale INR per piece (white round CZ ~βΉ2-5, moissanite much higher, coloured stones vary). Minimum order βΉ1,000; courier free above βΉ1,000. If a requested size is in the sold-out list, say so and offer the nearest available size or an RFQ.
LANGUAGE: detect the customer's language (English, Hindi, Gujarati, Tamil, Telugu, Kannada, Hinglish) and reply in the SAME language/script.
YOU CAN ALSO: recommend substitutes & sensible upsells; explain certificates (GRA/IGI), MOQ, shipping, returns; help with payments; raise custom requests; log complaints. Be proactive β if their history suggests a routine restock, gently offer to reorder.
THE EUROSTAR WAY (sell exactly how Eurostar trains its reps β from the official Eurostar Sales Training Script):
- Eurostar is trusted since 1980; manufacturers care about consistent quality, calibration, and reliable supply. Carry that reputation.
- Relationship first, white round next: a new customer rarely switches white round on day one. OPEN with something special (Moissanite, HD Zirconia, Alpanite colours, fancy bracelets), build trust with a perfect small order, THEN bridge to White Round CZ β that's where the volume and repeat business live. If the customer asks for white round themselves, that's the dream β go straight there and serve it brilliantly.
- Be consultative: before recommending, DISCOVER three things β what jewellery they make (gold / silver / imitation), which stones they buy in bulk, and where they feel pain (price, quality, or supply). Let their answers pick the product.
- WHITE-ROUND GRADE DECISION TREE (use the customer's metal to choose):
Β· Ask FIRST: "What metal do you work in β gold, silver, or brass (imitation)?"
Β· GOLD (weight matters β gold is βΉ15,000+/g): ask if they sell by GROSS weight (stone weight included) or NET weight (stone weight deducted). GROSS β lead with weight: HD Zirconia (~25% extra weight) β if over budget, Elements H/HH/HEA β then GQ H/HH/HHH. Tip: ask their target weight at a size (e.g. "what weight do you want at 1.50 mm?") and guide them to the grade that hits it. NET β look & clarity lead: Elements Thin/Normal, GQ, Euro AAA β Laser Engraved for premium.
Β· SILVER (~βΉ250/g, weight not a priority β quality & price lead): start at GQ β Euro AAA β Prizma β Eternal β Rajkot Silver/Shampoo packets for lowest budget.
Β· BRASS / imitation: Rajkot mass-produced packets only (Silver Packet / Shampoo Packet).
Β· A customer can always take MULTIPLE options β encourage a small trial of a couple of sizes/grades.
- The white-round pitch: "Whatever you pay for your white round today, let me show you the same grade from Eurostar β fully castable, withstands 1000Β°C+, holds calibration, won't break in setting. Try a small trial." NEVER attack a competitor β acknowledge β reassure β invite a small trial. The trial does the selling.
- Objection replies (acknowledge β reassure β offer a small trial): "I have a supplier" β "Good, sir β keep a strong second option, just try a small trial." "Your price is high" β "Compare the same grade; poor calibration costs more in setting time & rejections β try the trial and see the real cost." "I'll think about it" β "Shall I send a trial of one or two sizes so you decide with the stone in hand?" "I only buy white round" β "Perfect β that's our strength, let me quote your sizes now."
- Commercial rules you MUST respect: minimum order βΉ1,000 (flat βΉ300 courier at βΉ1,000, free above). Everyone starts as CASH (pay then ship). Credit terms (15/30/45/60 days) and discounts are approved ONLY by the office β NEVER promise a price, discount, or credit on your own; route negotiations to the office/rep. Custom items go via RFQ (βΉ10,000 min). Quote what the app shows.
ACCURACY β DO NOT HALLUCINATE (critical):
- Never invent product specifications. Do NOT make up colours, shapes, sizes, grades, sub-types, certificates, or numbers you were not given. If you don't know a specific detail, say "let me confirm the exact options for you" and offer to open that category in the app or connect the rep β do not guess.
- HD Zirconia facts (state ONLY these): it has a SINGLE grade and is available in WHITE only. Its benefit is ~25% extra weight for the same size (good for "gross weight" billing), same sparkle/calibration as regular CZ, fully castable, withstands 1000Β°C+. It does NOT come in fancy colours or special grades β never claim otherwise.
- For other categories, speak in general terms ("we carry a wide range of sizes and shades") rather than inventing exact lists. Keep enthusiasm in check β be warm but factually careful. When unsure, defer to the app or the rep.
SILENT ACTION COMMANDS β append at the VERY END of your message, nothing after. Use only when appropriate:
- Add items to cart (only AFTER the customer confirms): <>[{"name":"White Round CZ Β· 2.00 mm","category":"whitecz","shape":"round","size":"2.00 mm","color":"White","quality":"AAA","qty":500,"pricePerPc":3.2}]<>
- Repeat a past order (after they confirm): <>last<> or <>EUR-2406-0210<>
- Open a screen: <>orders<> (cart), <>rfq<> (custom quote), <>franchise<>
- Offer to connect their Eurostar rep / escalate an issue: <>short reason<>
- Send an image from the library to the customer: <>exact image name<> (you may send more than one)
Keep replies short (2-5 sentences), friendly and practical. Never mention or explain these markers to the customer.${imageLibFacts()}${miraOverrides()}`;
const parseActions = (text) => {
let clean = text, cartItems = null, go = null, reorder = null, escalate = null, images = [];
const grab = (re) => { const m = clean.match(re); if (m) { clean = clean.replace(m[0], '').trim(); return m[1].trim(); } return null; };
// Images (may be several). A name from the office's media library resolves
// to the stored picture; anything else is treated as a catalogue key
// ("laser|white|round") and fetched from the back room, which serves every
// photo the office has uploaded from any screen.
const API = window.EUROSTAR_API || location.origin;
const mediaUrl = (key) => API + '/assistant/media?key=' + encodeURIComponent(key.trim());
const lib = imageLib();
let im;
const imgRe = /<>([\s\S]*?)<>/;
while ((im = clean.match(imgRe))) {
const raw = im[1].trim();
const nm = raw.toLowerCase();
const hit = lib.find(x => (x.name || '').trim().toLowerCase() === nm) || lib.find(x => (x.name || '').trim().toLowerCase().includes(nm) || nm.includes((x.name || '').trim().toLowerCase()));
if (hit) images.push(hit);
else if (raw) images.push({ name: raw, desc: '', data: mediaUrl(raw) });
clean = clean.replace(im[0], '').trim();
}
// A bare media link in the text is a picture the customer should SEE, not a
// URL to copy out. Turn it into the image itself and take it out of the
// sentence.
const linkRe = /(?:https?:\/\/[^\s)]+)?\/assistant\/media\?key=([^\s)]+)/i;
let lk;
while ((lk = clean.match(linkRe))) {
let key = lk[1];
try { key = decodeURIComponent(key); } catch (e) {}
images.push({ name: key, desc: '', data: mediaUrl(key) });
clean = clean.replace(lk[0], '').replace(/\s{2,}/g, ' ').trim();
}
const cm = clean.match(/<>([\s\S]*?)<>/);
if (cm) { try { cartItems = JSON.parse(cm[1].trim()); } catch (e) {} clean = clean.replace(cm[0], '').trim(); }
reorder = grab(/<>([\s\S]*?)<>/);
go = grab(/<>([\s\S]*?)<>/);
escalate = grab(/<>([\s\S]*?)<>/);
return { clean, cartItems, go, reorder, escalate, images };
};
const applyCart = (items) => {
let n = 0;
(items || []).forEach((it) => {
const qty = Math.max(1, parseInt(it.qty, 10) || 0);
const price = parseFloat(it.pricePerPc) || 0;
const short = (window.CATEGORIES || []).find(c => c.id === it.category);
addToCart({
pid: 'AI-' + (it.category || 'gen') + '-' + String(it.size || '').replace(/\W/g, '') + '-' + Math.floor(Math.random() * 999),
name: it.name || ((it.color ? it.color + ' ' : '') + (short ? short.short : 'Stone')),
shape: it.shape || 'round', size: it.size || '', quality: it.quality || '', color: it.color || '', toneHex: '#9a8',
unitMode: 'pc', ct: qty, qty, perCtPrice: price, unitPrice: price, lineTotal: price * qty,
});
n++;
});
return n;
};
const applyReorder = (which) => {
let order = (which && which !== 'last') ? orders.find(o => o.id === which || o.id.includes(which)) : orders[0];
if (!order) return { n: 0 };
let n = 0;
order.lines.forEach((l) => {
const p = findP(l.pid); if (!p) return; const tone = findT(p.tone);
addToCart({ pid: p.id, name: p.name, shape: p.shape, size: p.size, quality: p.clarity || p.quality || '', color: tone ? tone.name : '', toneHex: tone ? tone.color : '#9a8', unitMode: 'pc', ct: l.qty, qty: l.qty, perCtPrice: p.price, unitPrice: p.price, lineTotal: p.price * l.qty });
n++;
});
return { n, id: order.id };
};
const pushAssistantTurn = (reply) => {
const { clean, cartItems, go, reorder, escalate, images } = parseActions(reply || '');
const out = [{ role: 'assistant', text: clean || 'Sorry, could you say that again?' }];
if (images && images.length) images.forEach(im => out.push({ role: 'assistant', img: im.data, text: im.desc || '' }));
if (reorder) { const r = applyReorder(reorder); if (r.n) out.push({ role: 'system', text: `β Reordered ${r.n} line${r.n > 1 ? 's' : ''} from ${r.id}.`, cta: 'cart' }); }
if (cartItems && cartItems.length) { const added = applyCart(cartItems); if (added) out.push({ role: 'system', text: `β Added ${added} item${added > 1 ? 's' : ''} to your cart.`, cta: 'cart' }); }
if (escalate) out.push({ role: 'system', text: 'Connect with your Eurostar rep', cta: 'rep' });
setMsgs(m => [...m, ...out]);
if (go && ['orders', 'rfq', 'franchise', 'home'].includes(go)) setTimeout(() => navigate({ name: go, tab: go === 'orders' ? 'cart' : undefined }), 600);
};
// Where the customer is standing, in words. Sent with every message so
// "what's the 3 mm rate?" on a colour page answers that colour rather than
// asking which of the twenty-nine categories was meant.
const pageNote = () => {
try {
const r = route || {};
const catName = (id) => {
const c = (window.CATEGORIES || []).find((x) => x.id === id);
return c ? `${c.name} (${id})` : id;
};
const bits = [];
switch (r.name) {
case 'home': bits.push('the shop home page, browsing categories'); break;
case 'catalog': bits.push(`the ${catName(r.cat)} catalogue page`); break;
case 'browse':
bits.push(`the ordering flow for ${catName(r.cat)}`);
if (r.grade) bits.push(`grade "${r.grade}"`);
if (r.color) bits.push(`colour "${r.color}"`);
if (r.shape) bits.push(`shape "${r.shape}"`);
bits.push('choosing sizes and quantities');
break;
case 'product': bits.push(`a product page${r.pid ? ` for ${r.pid}` : ''}${r.cat ? ` in ${catName(r.cat)}` : ''}`); break;
case 'orders': bits.push('their orders and cart'); break;
case 'checkout': bits.push('the checkout page'); break;
case 'payment': bits.push(`the payment page${r.order && r.order.id ? ` for order ${r.order.id}` : ''}`); break;
case 'confirmation': bits.push('the order confirmation page'); break;
case 'orderDetail': bits.push(`the detail page for order ${(r.order && r.order.id) || r.id || ''}`.trim()); break;
case 'rfq': bits.push('the RFQ enquiry form'); break;
case 'franchise': bits.push('the franchise enquiry page'); break;
default: if (r.name) bits.push(`the ${r.name} page`);
}
if (cart && cart.length) bits.push(`${cart.length} line${cart.length > 1 ? 's' : ''} already in their cart`);
return bits.length ? 'Sales App β ' + bits.join(' Β· ') : '';
} catch (e) { return ''; }
};
const send = async (textOverride) => {
const q = (textOverride != null ? textOverride : input).trim();
if ((!q && !pendingImg) || busy) return;
const userMsg = { role: 'user', text: q || 'Sent a photo', img: pendingImg };
const next = [...msgs, userMsg];
setMsgs(next); setInput(''); const imgNote = pendingImg ? ' (The customer attached a PHOTO of a stone β ask 1-2 clarifying questions about size/colour/shape to identify the category, then help.)' : '';
setPendingImg(null); setBusy(true);
try {
const history = next.slice(-12).map(m => (m.role === 'user' ? 'Customer' : m.role === 'assistant' ? 'Mira' : '') + (m.text ? ': ' + m.text : '')).filter(Boolean).join('\n');
// The back room answers, not the browser.
//
// This used to call window.claude.complete β an API that only exists
// inside the preview harness, so on the real site the shop's Mira threw
// "offline" on every message and the customer got the fallback line. It
// was also a second brain: the office's instructions, rules and knowledge
// live on the server, and this browser copy never saw them. One endpoint
// now serves the shop, the CRM, the LMS and the phone app, and it reads
// the live catalogue β prices, packing, photos β as it answers.
const API = window.EUROSTAR_API || location.origin;
const r = await fetch(API + '/assistant/chat', {
method: 'POST',
headers: { 'content-type': 'application/json' },
body: JSON.stringify({
app: 'sales',
sessionId: sessionRef.current,
who: persona.company,
cust: (persona && persona.code) || '',
contact: (persona && persona.contact) || '',
// The shop-side facts the server cannot know: who is signed in, what
// they have been buying, and the conversation so far.
context: systemPrompt(),
page: pageNote(),
message: 'Conversation so far:\n' + history + imgNote + '\n\nReply as Mira to the last customer message.',
}),
});
if (!r.ok) throw new Error('assistant unavailable');
const data = await r.json();
const reply = (data && data.reply) || '';
if (!reply) throw new Error('empty reply');
pushAssistantTurn(reply);
try {
const log = JSON.parse(localStorage.getItem('eurostar-mira-chatlog') || '[]');
log.push({
sessionId: sessionRef.current,
cust: (persona && persona.code) || '',
who: persona.company,
contact: (persona && persona.contact) || '',
q,
a: (reply || '').replace(/<<[\s\S]*?<>/g, '').trim(),
ts: Date.now()
});
localStorage.setItem('eurostar-mira-chatlog', JSON.stringify(log.slice(-300)));
// Push a clean turn to the back room so office staff see this chat in
// Mira Admin from any device (not just this browser).
const API = window.EUROSTAR_API || location.origin;
fetch(API + '/assistant/chatlog', {
method: 'POST', headers: { 'content-type': 'application/json' },
body: JSON.stringify({ app: 'sales', sessionId: sessionRef.current, who: persona.company, cust: (persona && persona.code) || '', contact: (persona && persona.contact) || '', q, a: (reply || '').replace(/<<[\s\S]*?<>/g, '').trim() }),
}).catch(() => {});
} catch (e) {}
} catch (e) {
setMsgs(m => [...m, { role: 'assistant', text: isOnline === false ? "You're offline right now β I'll be ready the moment you reconnect. You can still browse and queue orders." : "I couldn't reach the assistant just now. Please try again, or tap a category to order directly." }]);
} finally { setBusy(false); }
};
// ---- voice input (Web Speech API) ----
const toggleVoice = () => {
const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SR) { alert('Voice input is not supported in this browser.'); return; }
if (listening && recRef.current) { recRef.current.stop(); return; }
const rec = new SR(); recRef.current = rec; rec.lang = 'en-IN'; rec.interimResults = false; rec.maxAlternatives = 1;
rec.onresult = (ev) => { const t = ev.results[0][0].transcript; setInput(t); setTimeout(() => send(t), 50); };
rec.onend = () => setListening(false); rec.onerror = () => setListening(false);
setListening(true); rec.start();
};
// ---- photo input ----
const onPhoto = (e) => {
const f = e.target.files && e.target.files[0]; if (!f) return;
const r = new FileReader(); r.onload = () => setPendingImg(r.result); r.readAsDataURL(f); e.target.value = '';
};
const repLink = (kind) => kind === 'wa' ? 'https://wa.me/919372342451' : 'tel:+919372342451';
const quicks = ['Reorder my last order', 'Order white round CZ', 'Is 2.00 mm in stock?', 'What do I owe?', 'Track my order', 'I have a quality issue'];
if (!miraOn) return null;
return (
{!open &&
}
{open &&
π
Mira Β· Eurostar Assistant
{busy ? 'typingβ¦' : listening ? 'listeningβ¦' : 'Online Β· in your language'}
}
{m.text}