<bmx-chat>

<bmx-chat
  id="ex-chat"
  lang="en-GB"
  label="Support assistant"
  heading="How can I help?"
  description="Ask about orders, refunds or the API. This demonstration answers from the page itself - point the handler at your own service."
  assistant-name="Nova"
  suggestions="How do refunds work?,Show me the API in TypeScript,Compare the plans"
  attachments
  style="--bmx-chat-height: 34rem"
></bmx-chat>

<div class="row" style="margin-block-start: 1rem; gap: 0.5rem; flex-wrap: wrap">
  <button type="button" id="ex-chat-md">Save as Markdown</button>
  <button type="button" id="ex-chat-clear">Clear</button>
</div>

<script type="module">
  await customElements.whenDefined('bmx-chat');

  const chat = document.getElementById('ex-chat');

  // A stand-in for your own service: it streams a canned answer a few characters at a time.
  // In an application: `chat.handler = ({ messages, signal }) => fetch('/api/chat', { method: 'POST', body: JSON.stringify(messages), signal });`
  const answers = [
    {
      match: /refund/i,
      tools: [{ name: 'search', status: 'done', summary: 'Searched the help centre', detail: 'query: "refund policy"\n3 articles found' }],
      sources: [
        { title: 'Refunds and returns', url: 'https://binarymission.co.uk/support.html', snippet: 'Refunds are paid within 30 days of the return arriving.' },
        { title: 'Licence terms', url: 'https://binarymission.co.uk/eula.html' },
      ],
      text: 'Refunds are paid to the card you used, **within 30 days** of the return arriving [1].\n\n1. Open *Orders* and choose the order.\n2. Press **Return items** and pick a reason.\n3. Print the label and send the parcel.\n\nSoftware licences follow the licence terms instead [2].',
    },
    {
      match: /api|typescript|code/i,
      text: 'Here is the whole round trip in TypeScript:\n\n```ts\nconst chat = document.querySelector("bmx-chat");\nchat.handler = async function* ({ messages, signal }) {\n  const res = await fetch("/api/chat", { method: "POST", body: JSON.stringify(messages), signal });\n  // Stream the body as it arrives.\n  const reader = res.body.getReader();\n  const decoder = new TextDecoder();\n  for (;;) {\n    const { value, done } = await reader.read();\n    if (done) break;\n    yield decoder.decode(value, { stream: true });\n  }\n};\n```\n\nThe chat calls it for every message and **Stop** aborts the `signal`.',
    },
    {
      match: /plan|compare|price/i,
      text: '| Plan | Components | Source licence |\n| --- | --- | --- |\n| Web | 43 | Separate |\n| Pro | 54 | Separate |\n| Gold | All | Separate |\n\nEvery plan includes the same support; Gold adds the grids, canvas and logs.',
    },
  ];

  chat.handler = async function* ({ text, signal, update }) {
    const answer = answers.find(a => a.match.test(text)) ?? { text: `You asked: *${text.replace(/[*_`]/g, '')}*. Try one of the suggestions to see sources, code and tables.` };
    if (answer.tools) {
      update({ tools: answer.tools.map(t => ({ ...t, status: 'running' })) });
      await new Promise(r => setTimeout(r, 700));
      update({ tools: answer.tools });
    }
    if (answer.sources) update({ sources: answer.sources });
    for (let i = 0; i < answer.text.length; i += 6) {
      if (signal.aborted) return;
      await new Promise(r => setTimeout(r, 18));
      yield answer.text.slice(i, i + 6);
    }
  };

  document.getElementById('ex-chat-md').addEventListener('click', () => chat.download('md', 'support-conversation'));
  document.getElementById('ex-chat-clear').addEventListener('click', () => chat.clear());
</script>