{fi.title}

{fi.sub}

set("name", e.target.value)} disabled={status === "submitting"} autoComplete="name" /> set("email", e.target.value)} disabled={status === "submitting"} autoComplete="email" />

set("message", e.target.value)}
        disabled={status === "submitting"}
      />
      <button
        className="td-chat-form-submit"
        onClick={submit}
        disabled={status === "submitting" || !fields.name.trim() || !fields.email.trim()}
      >
        {status === "submitting" ? fi.sending : fi.submit}
      </button>
      {status === "error" && <p className="td-chat-form-err">{fi.error}</p>}
    </div>
  );
}

function ChatWidget({ lang = "en" }) {
  const [open, setOpen]        = csState(false);
  const [msgs, setMsgs]        = csState([]);
  const [input, setInput]      = csState("");
  const [streaming, setStream] = csState(false);
  const bottomRef = csRef(null);
  const inputRef  = csRef(null);

csEffect(() => { bottomRef.current?.scrollIntoView({ behavior: "smooth" }); }, [msgs]);
  csEffect(() => { if (open) setTimeout(() => inputRef.current?.focus(), 80); }, [open]);

const send = async () => {
    const text = input.trim();
    if (!text || streaming) return;

const userMsg = { role: "user", text };

// Build OpenAI-format history for the edge function
    const history = [
      ...msgs
        .map(m => ({
          role: m.role === "model" ? "assistant" : m.role,
          content: m.type === "contact_form"
            ? (m.prelude || "[I showed the user a contact form]")
            : m.text,
        }))
        .filter(m => m.content),
      { role: "user", content: text },
    ];

setMsgs(prev => [...prev, userMsg, { role: "model", text: "" }]);
    setInput("");
    setStream(true);

try {
      const res = await chatStream(history);
      const reader = res.body.getReader();
      const dec = new TextDecoder();
      let buf = "";

while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        buf += dec.decode(value, { stream: true });
        const lines = buf.split("\n");
        buf = lines.pop() || "";
        for (const line of lines) {
          if (!line.startsWith("data: ")) continue;
          if (line === "data: [DONE]") continue;
          try {
            const part = JSON.parse(line.slice(6))?.choices?.[0]?.delta?.content || "";
            if (!part) continue;
            setMsgs(prev => {
              const c = [...prev];
              c[c.length - 1] = { role: "model", text: c[c.length - 1].text + part };
              return c;
            });
          } catch (_) {}
        }
      }

// After streaming: detect <<CONTACT_FORM>> and swap message type
      setMsgs(prev => {
        const next = [...prev];
        const last = next[next.length - 1];
        if (last.role === "model" && last.text.includes("<<CONTACT_FORM>>")) {
          const prelude = last.text.replace(/<<CONTACT_FORM>>/g, "").trim();
          next[next.length - 1] = { role: "model", type: "contact_form", prelude };
        }
        return next;
      });
    } catch (_) {
      setMsgs(prev => {
        const c = [...prev];
        c[c.length - 1] = { role: "model", text: ERROR_MSG };
        return c;
      });
    }

setStream(false);
  };

const onKey = e => {
    if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); }
  };

return (
    <>
      {open && (
        <div className="td-chat-panel" role="dialog" aria-label="Transdigital AI assistant">
          <div className="td-chat-header">
            <span><span className="td-chat-dot" aria-hidden="true" />// TRANSDIGITAL-AI // ONLINE</span>
            <button className="td-chat-close" onClick={() => setOpen(false)} aria-label="Close chat">[ × ]</button>
          </div>

<div className="td-chat-body">
            {msgs.length === 0 && (
              <p className="td-chat-welcome">{WELCOME}</p>
            )}
            {msgs.map((m, i) => (
              <div key={i} className={`td-chat-msg td-chat-msg--${m.role}`}>
                {m.role === "model" && <span className="td-chat-tag" aria-hidden="true">TD-AI ›</span>}
                <span className="td-chat-text">
                  {m.type === "contact_form" ? (
                    <>
                      {m.prelude && <span>{m.prelude}</span>}
                      <ChatContactForm lang={lang} />
                    </>
                  ) : (
                    <>
                      {m.text}
                      {streaming && i === msgs.length - 1 && m.role === "model" && (
                        <span className="td-cursor" aria-hidden="true" />
                      )}
                    </>
                  )}
                </span>
              </div>
            ))}
            <div ref={bottomRef} />
          </div>

<div className="td-chat-foot">
            <input
              ref={inputRef}
              className="td-chat-input"
              value={input}
              onChange={e => setInput(e.target.value)}
              onKeyDown={onKey}
              placeholder="Ask about vendors, services, licensing…"
              disabled={streaming}
              autoComplete="off"
              aria-label="Chat message"
            />
            <button
              className="td-chat-send"
              onClick={send}
              disabled={streaming || !input.trim()}
              aria-label="Send message"
            >↑</button>
          </div>
        </div>
      )}

<button
        className={`td-chat-fab${open ? " td-chat-fab--open" : ""}`}
        onClick={() => setOpen(o => !o)}
        aria-label={open ? "Close assistant" : "Open AI assistant"}
      >
        {open ? "[ × ]" : lang === "pt" ? "PERGUNTAR" : "ASK AI"}
      </button>
    </>
  );
}

Object.assign(window, { ChatWidget });