{p.split(/(\*\*[^*]+\*\*)/).map((seg, i) => seg.startsWith('**') ? {seg.slice(2, -2)} : seg)}

{/* Status header */}

{transferred ? 'Vigilo · ljudski operater' : 'Vigilo · glasovni asistent'}

{phaseInfo.status}

{mm}:{ss}

{/* Big avatar */}

{/* Pulse rings — speed depends on phase */} {(phase === 'connecting' || phase === 'greeting' || phase === 'listening' || phase === 'thinking') && [0, 1, 2].map(i => (

))} {/* Center avatar */}

{transferred ? 'MS' : 'Z'}

{/* Live transcript chip */} {phaseInfo.transcript && (

{phaseInfo.transcript.who === 'ti' && } {phaseInfo.transcript.who === 'ZmAI' && } {phaseInfo.transcript.who === 'sys' && } {phaseInfo.transcript.who === 'ti' ? 'TI' : phaseInfo.transcript.who === 'ZmAI' ? 'ZMAI' : 'SISTEM'}

{phaseInfo.transcript.t}

)}

{/* Bottom controls */}

); } // ───────────────────────────────────────────────────────────── // Chat screen // ───────────────────────────────────────────────────────────── function ZmAIScreen({ initialMessages, onStartCall }) { const [messages, setMessages] = React.useState(initialMessages); const [input, setInput] = React.useState(''); const [waiting, setWaiting] = React.useState(false); const scrollRef = React.useRef(null); // Auto-scroll on new message React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages]); // Reset when initial changes React.useEffect(() => { setMessages(initialMessages); }, [initialMessages]); const nowStr = () => { const d = new Date(); return String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0'); }; const ask = (qKey, freeText) => { if (waiting) return; const qa = qKey ? QA[qKey] : null; const userText = qa ? qa.q : freeText; if (!userText) return; setInput(''); setMessages(m => [...m, { from: 'user', text: userText, time: nowStr() }]); setWaiting(true); setTimeout(() => { setMessages(m => [...m, { from: 'bot', typing: true, time: nowStr() }]); }, 250); setTimeout(() => { setMessages(m => { const copy = m.slice(0, -1); if (qa) { copy.push({ from: 'bot', text: qa.a, src: qa.src, time: nowStr() }); } else { copy.push({ from: 'bot', text: 'Tvoje pitanje sam zabeležio i prosleđujem koordinatoru. Odgovor stiže uskoro. U međuvremenu možeš pretražiti česte teme ispod.', time: nowStr(), }); } return copy; }); setWaiting(false); }, 1900); }; // Suggested replies — koja nisu već pitana const askedKeys = new Set(messages.filter(m => m.from === 'user').map(m => { const found = Object.entries(QA).find(([k, v]) => v.q === m.text); return found ? found[0] : null; }).filter(Boolean)); const suggestions = Object.entries(QA).filter(([k]) => !askedKeys.has(k)); return (

{/* Header */}

ZmAI

Asistent · uvek dostupan

{/* Messages scroll */}

{/* Disclaimer */}

ZmAI odgovara iz Zakona o izboru i CRTA priručnika. Ne zamenjuje koordinatora — za hitne stvari javi se direktno.

{messages.map((m, i) => )}

{/* Quick replies + input */}

{suggestions.length > 0 && !waiting && (

Česta pitanja

{suggestions.map(([k, qa]) => ( ask(k)} style={{ flexShrink: 0, padding: '8px 12px', background: 'white', border: '1px solid ' + V6.ink200, borderRadius: 10, fontSize: 12.5, fontWeight: 500, color: V6.ink800, display: 'inline-flex', alignItems: 'center', gap: 6, }}> {qa.q} ))}

)}

setInput(e.target.value)}
              onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); ask(null, input.trim()); } }}
              placeholder="Pitaj ZmAI…"
              style={{
                flex: 1, border: 0, outline: 0, background: 'transparent',
                font: 'inherit', fontSize: 14, color: V6.ink900,
                resize: 'none', padding: '4px 0', minHeight: 20, maxHeight: 80,
                fontFamily: V6.font, lineHeight: 1.4,
              }}
              rows={1}
            />
            <Tap6 style={{
              width: 32, height: 32, borderRadius: '50%',
              display: 'grid', placeItems: 'center',
              color: V6.ink500,
            }}><Mic6 size={16}/></Tap6>
          </div>
          <Tap6 onClick={() => ask(null, input.trim())} disabled={!input.trim() || waiting} style={{
            width: 44, height: 44, borderRadius: '50%',
            background: input.trim() && !waiting ? V6.ink950 : V6.ink200,
            color: input.trim() && !waiting ? 'white' : V6.ink400,
            display: 'grid', placeItems: 'center',
          }}><Send6 size={17} sw={2.2}/></Tap6>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Flow
// ─────────────────────────────────────────────────────────────
function ZmAIFlow({ tweaks }) {
  const [mode, setMode] = React.useState(tweaks.mode || 'chat'); // chat | call
  const [callPhase, setCallPhase] = React.useState('connecting');

// Sync from tweaks
  React.useEffect(() => {
    setMode(tweaks.mode || 'chat');
    if (tweaks.mode === 'call') {
      setCallPhase(tweaks.callPhase || 'connecting');
    }
  }, [tweaks.mode, tweaks.callPhase]);

// Auto-progression for call (only if not pinned by tweaks)
  React.useEffect(() => {
    if (mode !== 'call' || tweaks.callPhase) return;
    const seq = [
      { phase: 'connecting',   ms: 1200 },
      { phase: 'greeting',     ms: 2800 },
      { phase: 'listening',    ms: 3000 },
      { phase: 'thinking',     ms: 2500 },
      { phase: 'transferring', ms: 2500 },
      { phase: 'transferred',  ms: 99999 },
    ];
    const i = seq.findIndex(s => s.phase === callPhase);
    if (i < 0 || i === seq.length - 1) return;
    const t = setTimeout(() => setCallPhase(seq[i + 1].phase), seq[i].ms);
    return () => clearTimeout(t);
  }, [mode, callPhase, tweaks.callPhase]);

if (mode === 'call') {
    return <CallScreen
      phase={callPhase}
      onEnd={() => { setMode('chat'); setCallPhase('connecting'); }}
    />;
  }
  return <ZmAIScreen initialMessages={initial} onStartCall={() => { setMode('call'); setCallPhase('connecting'); }}/>;
}

Object.assign(window, { ZmAIFlow });