# CopilotChat

> AI assistant chat with streamed Markdown answers, tool-call steps, sources, artifacts, follow-ups, context chips, file attachments, slash commands, toggles, history, a model picker and @mentions, as a side panel or a full page.

Source: https://docs.nasaqui.com/components/copilot-chat

## Install

```bash
npx shadcn@latest add https://docs.nasaqui.com/r/copilot-chat.json
```

The chat for an AI assistant inside your product. The answer streams in as Markdown, the tools the assistant used show
as a folded list of steps, and the sources sit under the text. The visitor can pin context (a file, a page, a
selection), pick a model, and mention things with `@`. Code in an answer gets the copy menu from
[`CodeBlockAI`](https://docs.nasaqui.com/components/code-block-variants), so it can be copied as a prompt for Claude, ChatGPT or Cursor.
It stores only the text in the box: you own `messages` and stream into them.

## When to use

- An assistant panel next to your app, or a full page chat.
- Answers that cite sources or call tools and should show it.

## When not to use

- People talking to people: use [`Inbox`](https://docs.nasaqui.com/components/inbox) or [`ChatWidget`](https://docs.nasaqui.com/components/chat-widget).
- A plain message thread: use [`Chat`](https://docs.nasaqui.com/components/chat).

## Import

```tsx
import { CopilotChat } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```

## Quick start

```tsx
import { CopilotChat, type CopilotMessage } from "@fadymondy/nasaq/web";
import { useState } from "react";

declare function ask(prompt: string, onToken: (t: string) => void): Promise<void>;

export function Assistant() {
  const [messages, setMessages] = useState<CopilotMessage[]>([]);
  return (
    <CopilotChat
      messages={messages}
      starters={["Summarise this week", "What is overdue?"]}
      onSend={async (text) => {
        const id = crypto.randomUUID();
        setMessages((m) => [
          ...m,
          { id: `${id}u`, role: "user", text },
          { id, role: "assistant", text: "", streaming: true },
        ]);
        await ask(text, (token) =>
          setMessages((all) => all.map((x) => (x.id === id ? { ...x, text: x.text + token } : x))),
        );
        setMessages((all) => all.map((x) => (x.id === id ? { ...x, streaming: false } : x)));
      }}
    />
  );
}
```

## Anatomy

```
CopilotChat                       data-slot="copilot-chat" (data-mode="panel" | "page")
├─ header                         title, history, new chat, copy conversation, headerActions, close
├─ empty state                    title and starter prompts
├─ ChatThread                     role="log", follows the stream
│  ├─ ChatMessage (user)
│  └─ CopilotAnswer               ChatMessage with:
│     ├─ CopilotSteps             data-slot="copilot-steps", folded tool calls
│     ├─ Markdown                 code blocks are CodeBlockAI
│     ├─ ArtifactList             cards, tables, charts, pickers from the answer
│     ├─ CopilotSources           numbered links
│     ├─ copilot-stream-error     role="alert" with Retry, when `error` is set
│     ├─ actions                  copy, share, good, not helpful, try again
│     └─ follow-ups               suggestion chips under the last answer
├─ copilot-commands               "/" listbox above the box
└─ composer                       data-slot="copilot-composer": drop zone, command chips, attachment chips,
                                  CopilotContextBar, MentionTextarea, attach, toggles, model, send or stop
```

## API

**CopilotChat**: every `section` prop except `children` and `title`, plus:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `messages` | `readonly CopilotMessage[]` | required | `{ id, role, text, at?, steps?, sources?, followUps?, streaming?, error?, feedback? }`. |
| `onSend` | `(text, { context, model, mentions }) => void \| Promise<void>` | required | A prompt from the box, a starter or a follow-up. |
| `onStop` | `() => void` | | Turns the send button into a stop button while an answer streams. |
| `onRegenerate` | `(messageId) => void` | | Try again on the last answer. |
| `onFeedback` | `(messageId, "up" \| "down") => void` | | Shows the two rating buttons. |
| `mode` | `"panel" \| "page"` | `"panel"` | Side sheet or centred full page column. |
| `title` / `onClose` / `onNewChat` | | "Copilot" | Header. Close shows in panel mode. |
| `starters` | `readonly string[]` | none | Prompts on the empty screen. |
| `context` / `onContextChange` / `contextOptions` | `CopilotContextItem[]` | none | Chips with remove and an Add context menu. |
| `models` / `model` / `onModelChange` | `CopilotModel[]` | none | The model picker. |
| `mentions` | `readonly MentionOption[]` | none | Things the visitor can `@` mention. |
| `copyTargets` | `AiTarget[]` | Claude, ChatGPT, Cursor | Assistants in the code copy menu. |
| `draft` / `onDraftChange` | `string` | | Control the box, e.g. to fill it from outside. |
| `attachments` / `onAttach` / `onAttachmentsChange` / `accept` | `CopilotAttachment[]` | | Attach button, paste and drop. You upload in `onAttach` and report `progress` and `error`; Send waits for uploads. |
| `commands` | `CopilotCommand[]` | | Typing `/` opens a menu; chosen commands become chips and are sent in `meta.commands`. |
| `toggles` / `activeToggles` / `onTogglesChange` | `CopilotToggle[]` | | Pressed buttons such as "Web search", sent in `meta.toggles`. |
| `sessions` / `activeSessionId` / `onSessionSelect` / `onSessionDelete` | `CopilotSessionSummary[]` | | The History menu. |
| `onArtifactAction` / `onArtifactPick` / `allowHtml` | | | Artifacts in `message.artifacts`; see `artifact-renderer`. |
| `share` | `boolean` | | A Share button on answers where `navigator.share` exists. |
| `disclaimer` | `ReactNode` | | Small print under the box. |
| `headerActions` | `ReactNode` | | Buttons before Close. |
| `labels` | `Partial<CopilotChatLabels>` | | Override any string. |

Messages with `hidden: true` are not shown, so an app can send structured replies (such as a picked option) without cluttering the thread. `onSend` receives `{ context, model, mentions, attachments, commands, toggles }`.

**Parts** you can use alone: `CopilotAnswer`, `CopilotSteps`, `CopilotSources`, `CopilotContextBar`, `CopilotAttachmentChip`.
**Helpers** (pure, tested): `transcriptToMarkdown`, `stepCounts`, `isSafeUrl`, `hostOf`, `withoutContext`, `availableContext`, `slashQuery`, `filterCommands`, `withoutSlash`, `isPreviewUrl`, `visibleMessages`.

For streaming, retries and sessions without wiring these yourself, wrap the app in [`CopilotProvider`](https://docs.nasaqui.com/components/copilot-provider).

## Examples

**Tool steps and sources on an answer**

```tsx
import { CopilotAnswer } from "@fadymondy/nasaq/web";

export const Answer = () => (
  <CopilotAnswer
    message={{
      id: "1",
      role: "assistant",
      text: "Three invoices are overdue.",
      steps: [{ id: "s1", label: "Searched invoices", tool: "invoices.search", status: "done", detail: "status=overdue" }],
      sources: [{ id: "a", title: "Invoices", url: "https://example.com/invoices" }],
    }}
  />
);
```

## Accessibility

- The thread is a `role="log"` that follows the stream until the reader scrolls up. A streaming answer sets `aria-busy`.
- Steps are a real disclosure button with a text summary. Status is an icon plus text, never colour alone.
- Every icon button has a name. The model picker, context chips and follow-ups are keyboard reachable. Enter sends, Shift+Enter adds a line and Enter is ignored during IME composition.
- The "/" menu is a labelled `listbox` whose active option is `aria-selected`. Arrow keys move, Enter or Tab choose, Escape closes it, and a live region announces the matches.
- Toggles are `aria-pressed` buttons. Attachments are named by file and say their upload progress or error. A failed answer is an `alert` with a Retry button.
- Source links open in a new tab with `rel="noopener noreferrer"`. Only `http` and `https` links are made clickable.

## RTL & i18n

- English and Arabic follow the Nasaq locale. Each answer paragraph uses `dir="auto"`, so Arabic and English mix in one answer. Code, tool names and hosts stay left to right.
- The send arrow mirrors. Side panel edge follows the inline end.

## Styling & tokens

- Built on `chat`, `markdown`, `mention-textarea`, `code-block-variants`, `collapsible`, `select` (the model menu is `AiModelSelect` from `ai-model-picker`) and `--nq-*` tokens.
- Target `[data-slot="copilot-chat"]`, `[data-slot="copilot-steps"]`, `[data-slot="copilot-sources"]`.

## Do / Don't

- Do set `streaming: false` on the message when the stream ends, or the box stays locked.
- Do keep `steps` in the message so history shows what the assistant did.
- Don't put secrets in `context` labels: they are shown on screen.
- Don't render raw HTML from the model: the Markdown drops it for you.

## Related

- [`Chat`](https://docs.nasaqui.com/components/chat)
- [`Markdown`](https://docs.nasaqui.com/components/markdown)
- [`MentionTextarea`](https://docs.nasaqui.com/components/mention-textarea)
- [`CodeBlockVariants`](https://docs.nasaqui.com/components/code-block-variants)

## Code

### React

```tsx
import { CopilotChat, type CopilotMessage } from "@fadymondy/nasaq/web";
import { useState } from "react";

declare function ask(prompt: string, onToken: (t: string) => void): Promise<void>;

export function Assistant() {
  const [messages, setMessages] = useState<CopilotMessage[]>([]);
  return (
    <CopilotChat
      messages={messages}
      starters={["Summarise this week", "What is overdue?"]}
      onSend={async (text) => {
        const id = crypto.randomUUID();
        setMessages((m) => [
          ...m,
          { id: `${id}u`, role: "user", text },
          { id, role: "assistant", text: "", streaming: true },
        ]);
        await ask(text, (token) =>
          setMessages((all) => all.map((x) => (x.id === id ? { ...x, text: x.text + token } : x))),
        );
        setMessages((all) => all.map((x) => (x.id === id ? { ...x, streaming: false } : x)));
      }}
    />
  );
}
```

### shadcn

```tsx
import { CopilotChat, type CopilotMessage } from "@/components/ui/copilot-chat";
import { useState } from "react";

declare function ask(prompt: string, onToken: (t: string) => void): Promise<void>;

export function Assistant() {
  const [messages, setMessages] = useState<CopilotMessage[]>([]);
  return (
    <CopilotChat
      messages={messages}
      starters={["Summarise this week", "What is overdue?"]}
      onSend={async (text) => {
        const id = crypto.randomUUID();
        setMessages((m) => [
          ...m,
          { id: `${id}u`, role: "user", text },
          { id, role: "assistant", text: "", streaming: true },
        ]);
        await ask(text, (token) =>
          setMessages((all) => all.map((x) => (x.id === id ? { ...x, text: x.text + token } : x))),
        );
        setMessages((all) => all.map((x) => (x.id === id ? { ...x, streaming: false } : x)));
      }}
    />
  );
}
```

### Vue

```vue
<script setup lang="ts">
import { NqCopilotChat, type CopilotMessage } from "@fadymondy/nasaq/vue";
import { ref } from "vue";

declare function ask(prompt: string, onToken: (t: string) => void): Promise<void>;

const messages = ref<CopilotMessage[]>([]);

async function onSend(text: string) {
  const id = crypto.randomUUID();
  messages.value = [
    ...messages.value,
    { id: `${id}u`, role: "user", text },
    { id, role: "assistant", text: "", streaming: true },
  ];
  await ask(text, (token) => {
    messages.value = messages.value.map((x) => (x.id === id ? { ...x, text: x.text + token } : x));
  });
  messages.value = messages.value.map((x) => (x.id === id ? { ...x, streaming: false } : x));
}
</script>

<template>
  <NqCopilotChat :messages="messages" :starters="['Summarise this week', 'What is overdue?']" :on-send="onSend" />
</template>
```

### Blade

````blade
@php
    $messages = [
        ['id' => 'u1', 'role' => 'user', 'text' => 'What is overdue?', 'at' => '2026-09-29 08:58:00'],
        [
            'id' => 'a1', 'role' => 'assistant', 'at' => '2026-09-29 08:58:05',
            'steps' => [['id' => 's1', 'label' => 'Searched the board', 'tool' => 'tasks.search', 'status' => 'done', 'detail' => 'status = overdue']],
            'text' => "Two tasks are overdue:\n\n- **Send the invoice** (3 days)\n- **Review the contract** (1 day)\n\n```sql\nSELECT title FROM tasks WHERE due < now();\n```\n",
            'sources' => [['id' => 'src1', 'title' => 'Task board', 'url' => 'https://example.com/board']],
            'followUps' => ['Show the details', 'Remind the owners'],
        ],
    ];
@endphp
<div class="h-[40rem] w-full max-w-xl">
    <x-nq::copilot-chat :messages="$messages" :starters="['Summarise this week', 'What is overdue?']" :context="[['id' => 'c1', 'label' => 'Q3 plan', 'kind' => 'file']]"
        :context-options="[['id' => 'c2', 'label' => 'Roadmap', 'kind' => 'page']]" :commands="[['id' => 'deploy', 'label' => 'Deploy', 'description' => 'Ship a build', 'kind' => 'tool']]"
        :models="[['id' => 'fast', 'label' => 'Fast'], ['id' => 'deep', 'label' => 'Deep']]" :toggles="[['id' => 'web', 'label' => 'Web search']]"
        :sessions="[['id' => 'h1', 'title' => 'Weekly summary', 'at' => '2026-09-28 10:00:00']]" closable new-chat attachable stoppable regenerate feedback
        disclaimer="AI can make mistakes. Check important details." />
</div>
````

### HTML + Alpine

````html
<div class="h-[40rem] w-full max-w-xl">
    <section aria-label="Copilot conversation" data-slot="copilot-chat" data-mode="panel" x-data="nqCopilotChat(JSON.parse('{\u0022commands\u0022:[{\u0022id\u0022:\u0022deploy\u0022,\u0022label\u0022:\u0022Deploy\u0022,\u0022description\u0022:\u0022Ship a build\u0022,\u0022kind\u0022:\u0022tool\u0022}],\u0022context\u0022:[{\u0022id\u0022:\u0022c1\u0022,\u0022label\u0022:\u0022Q3 plan\u0022,\u0022kind\u0022:\u0022file\u0022}],\u0022contextOptions\u0022:[{\u0022id\u0022:\u0022c2\u0022,\u0022label\u0022:\u0022Roadmap\u0022,\u0022kind\u0022:\u0022page\u0022}],\u0022toggles\u0022:[],\u0022model\u0022:\u0022fast\u0022,\u0022feedback\u0022:{},\u0022busy\u0022:false,\u0022stoppable\u0022:true,\u0022count\u0022:2,\u0022transcript\u0022:\u0022**You**\\n\\nWhat is overdue?\\n\\n---\\n\\n**Copilot**\\n\\nTwo tasks are overdue:\\n\\n- **Send the invoice** (3 days)\\n- **Review the contract** (1 day)\\n\\n```sql\\nSELECT title FROM tasks WHERE due \\u003C now();\\n```\\n\\n1. [Task board](https:\\\/\\\/example.com\\\/board)\u0022,\u0022words\u0022:{\u0022commands\u0022:\u0022Tools and skills\u0022,\u0022noCommands\u0022:\u0022No matching tools\u0022,\u0022removeContext\u0022:\u0022Remove {name}\u0022,\u0022removeCommand\u0022:\u0022Stop using {name}\u0022,\u0022removeAttachment\u0022:\u0022Remove {name}\u0022,\u0022copied\u0022:\u0022Copied\u0022,\u0022copy\u0022:\u0022Copy answer\u0022,\u0022copyChat\u0022:\u0022Copy conversation\u0022,\u0022sendFailed\u0022:\u0022Could not send. Try again.\u0022,\u0022locale\u0022:\u0022en\u0022}}'))"
    x-on:nq-copilot-synced="outbox = []"
    class="flex min-h-0 flex-col bg-background text-foreground h-full w-full border-border">
    <header class="flex items-center gap-2 border-b border-border px-4 py-2.5">
        <span aria-hidden="true" class="grid size-7 shrink-0 place-items-center rounded-full bg-primary text-primary-foreground"><svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/>
  <path d="M20 2v4"/>
  <path d="M22 4h-4"/>
  <circle cx="4" cy="20" r="2"/>
</svg></span>
        <h2 class="min-w-0 flex-1 truncate text-label">Copilot</h2>
                    <div data-slot="popover" x-data="nqPopover(false)" x-modelable="open" x-id="['nq-popover']" class="contents">
    <button data-slot="popover-trigger"
     type="button"                         x-bind:data-popup-open="open ? &#039;&#039; : undefined" x-ref="trigger" aria-haspopup="dialog" x-on:click="toggle()" :aria-expanded="open" aria-label="History" title="History" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
  <path d="M3 3v5h5"/>
  <path d="M12 7v5l4 2"/>
</svg></button>
                <template x-teleport="body">
    <div data-slot="popover-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-end.offset.6="$refs.trigger"
        class="z-50 max-w-[var(--available-width)] rounded-floating border border-border bg-popover text-body-sm text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 w-72 p-1"><ul aria-label="History" data-slot="copilot-history" class="flex max-h-80 flex-col overflow-y-auto">
                                                                                            <li class="group flex items-center gap-1">
                                    <button type="button" x-on:click="pickSession('h1'); close()"                                         class="flex min-w-0 flex-1 flex-col rounded-control px-2.5 py-1.5 text-start outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus aria-[current]:bg-nq-selected">
                                        <span dir="auto" class="truncate text-body-sm text-foreground">Weekly summary</span>
                                        <time data-slot="date-time" datetime="2026-09-28T10:00:00+00:00" dir="auto"     class="tabular-nums [unicode-bidi:isolate] text-[11px] text-muted-foreground">Sep 28, 2026, 10:00 AM</time>
                                    </button>
                                    <button data-slot="button"
     type="button"                         x-on:click="dropSession(&#039;h1&#039;)" aria-label="Delete Weekly summary" title="Delete Weekly summary" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg></button>
                                </li>
                                                    </ul></div>
</template>
</div>
                            <button data-slot="button"
     type="button"                         x-on:click="$dispatch(&#039;nq-new-chat&#039;)" aria-label="New chat" title="New chat" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="M12 5v14"/>
</svg></button>
                            <button data-slot="button"
     type="button"                         x-on:click="copyAll()" x-bind:aria-label="copyLabel(&#039;all&#039;, &#039;Copy conversation&#039;)" x-bind:title="copyLabel(&#039;all&#039;, &#039;Copy conversation&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg x-show="isCopied('all')" style="display: none" aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                <svg x-show="! isCopied('all')" aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
</svg></button>
                                    <button data-slot="button"
     type="button"                         x-on:click="$dispatch(&#039;nq-close&#039;)" aria-label="Close" title="Close" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
            </header>
        <div data-slot="chat-thread" x-data="nqChatThread" x-show="threadShown()" style="" class="relative flex flex-col min-h-0 flex-1">
    <div x-ref="scroller" x-on:scroll="onScroll()" role="log" aria-live="polite" aria-relevant="additions" aria-label="Copilot conversation" tabindex="0"
        class="min-h-0 flex-1 overflow-y-auto overscroll-contain outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus">
        <div x-ref="content" class="flex flex-col gap-5 p-4"><div data-slot="chat-message" data-side="user"          data-id="u1" class="flex max-w-[85%] items-start gap-2 flex-row-reverse self-end">
            <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-6 text-[10px] rounded-full mt-0.5">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="You" >Y</span>
    </span>
        <div class="flex min-w-0 flex-col gap-1 items-end">
                    <div class="flex items-center gap-2 text-caption text-muted-foreground">
                <span class="text-label text-foreground">You</span>                <time data-slot="date-time" datetime="2026-09-29T08:58:00+00:00" dir="auto"     class="tabular-nums [unicode-bidi:isolate]">8:58 AM</time>
            </div>
                <div data-slot="chat-bubble"             class="min-w-0 rounded-card px-3 py-2 text-body bg-secondary text-secondary-foreground">
                                                <p dir="auto" class="whitespace-pre-wrap text-start [overflow-wrap:anywhere]">What is overdue?</p>
                                                </div>
            </div>
</div>
                                                <div data-slot="chat-message" data-side="assistant"          data-id="a1" class="flex max-w-[85%] items-start gap-2 self-start w-full min-w-0 [&>div:last-child]:flex-1 [&_[data-slot=chat-bubble]]:w-full">
            <span aria-hidden="true" class="grid size-8 shrink-0 place-items-center rounded-full bg-primary text-primary-foreground"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/>
  <path d="M20 2v4"/>
  <path d="M22 4h-4"/>
  <circle cx="4" cy="20" r="2"/>
</svg></span>
        <div class="flex min-w-0 flex-col gap-1 items-start">
                    <div class="flex items-center gap-2 text-caption text-muted-foreground">
                <span class="text-label text-foreground">Copilot</span>                <time data-slot="date-time" datetime="2026-09-29T08:58:05+00:00" dir="auto"     class="tabular-nums [unicode-bidi:isolate]">8:58 AM</time>
            </div>
                <div data-slot="chat-bubble"             class="min-w-0 rounded-card px-3 py-2 text-body border border-border bg-card text-nq-fg-body">
                                                <div class="flex min-w-0 flex-col gap-3">
        <div data-slot="copilot-steps" x-data="nqCollapsible(false)" x-modelable="open" x-id="['nq-collapsible']"
    :data-open="open ? '' : undefined" :data-closed="open ? undefined : ''"
     data-closed     class="rounded-control border border-border bg-secondary">
    <button type="button" x-on:click="toggle()" x-bind:aria-expanded="open ? 'true' : 'false'" x-bind:aria-controls="$id('nq-collapsible', 'panel')"
        class="flex min-h-control-sm w-full items-center gap-2 px-3 py-1.5 text-start text-caption text-muted-foreground outline-none focus-visible:outline-2 focus-visible:outline-nq-focus">
                    <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                <span class="min-w-0 flex-1 truncate">Used 1 tool</span>
        <svg aria-hidden="true" x-bind:class="open ? 'rotate-180' : ''" class="size-3.5 shrink-0 transition-transform duration-150 ease-nq" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m6 9 6 6 6-6"/>
</svg>    </button>
    <div data-slot="collapsible-panel" x-ref="panel" x-nq-presence="open" :id="$id('nq-collapsible', 'panel')"
     data-closed style="display:none"     class="h-(--collapsible-panel-height) overflow-hidden transition-[height,opacity] duration-200 ease-nq motion-reduce:transition-none data-starting-style:h-0 data-starting-style:opacity-0 data-ending-style:h-0 data-ending-style:opacity-0"><ol class="flex flex-col gap-2 border-t border-border px-3 py-2">
                            <li data-status="done" class="flex items-start gap-2 text-caption">
                    <span class="mt-0.5 shrink-0" aria-hidden="true">
                                                    <svg class="size-3.5 text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                                            </span>
                    <span class="flex min-w-0 flex-col gap-0.5">
                        <span class="text-foreground">
                            Searched the board
                            <code dir="ltr" class="ms-2 rounded-sm bg-card px-1 font-mono text-[0.85em] text-muted-foreground">tasks.search</code>                        </span>
                        <span dir="auto" class="truncate font-mono text-muted-foreground">status = overdue</span>                    </span>
                </li>
                    </ol></div>
</div>
                                                        <div data-slot="markdown" class="flex min-w-0 flex-col gap-3 text-nq-fg-body text-body"><p data-slot="text" dir="auto" class="text-body text-nq-fg-body text-start">Two tasks are overdue:</p>
<ul dir="auto" class="list-disc space-y-1 ps-6 text-body text-nq-fg-body marker:text-muted-foreground">
<li dir="auto" class="text-start [&amp;.task-list-item]:list-none [&amp;.task-list-item]:-ms-6"><strong class="font-semibold text-foreground">Send the invoice</strong> (3 days)</li>
<li dir="auto" class="text-start [&amp;.task-list-item]:list-none [&amp;.task-list-item]:-ms-6"><strong class="font-semibold text-foreground">Review the contract</strong> (1 day)</li>
</ul>
</div>
                                                                <figure data-slot="code-block" data-language="sql" dir="ltr" x-data="nqCodeBlock(JSON.parse('{\u0022code\u0022:\u0022SELECT title FROM tasks WHERE due \\u003C now();\u0022,\u0022language\u0022:\u0022sql\u0022}'))" x-bind:data-highlighted="highlighted ? '' : null"
    class="group/code relative m-0 overflow-hidden rounded-surface border border-border bg-nq-surface-soft text-start [--shiki-foreground:var(--nq-fg)] [--shiki-background:transparent] [--shiki-token-comment:var(--nq-fg-muted)] [--shiki-token-keyword:var(--nq-accent-text)] [--shiki-token-string:var(--nq-success-text)] [--shiki-token-string-expression:var(--nq-success-text)] [--shiki-token-constant:var(--nq-warning-text)] [--shiki-token-function:var(--nq-info-text)] [--shiki-token-parameter:var(--nq-fg-body)] [--shiki-token-punctuation:var(--nq-fg-muted)] [--shiki-token-link:var(--nq-info-text)]">
            <div class="absolute end-1.5 top-1.5 z-10 opacity-0 transition-opacity duration-150 ease-nq focus-within:opacity-100 group-hover/code:opacity-100 pointer-coarse:opacity-100">
            <span data-slot="code-copy-menu" x-data="nqCodeCopyMenu(JSON.parse('{\u0022code\u0022:\u0022SELECT title FROM tasks WHERE due \\u003C now();\u0022,\u0022markdown\u0022:\u0022```sql\\nSELECT title FROM tasks WHERE due \\u003C now();\\n```\u0022,\u0022prompts\u0022:{\u0022claude\u0022:\u0022Read this snippet, explain what it does, and show how to use it in my project.\\n\\n```sql\\nSELECT title FROM tasks WHERE due \\u003C now();\\n```\\n\u0022,\u0022chatgpt\u0022:\u0022Explain what this snippet does and how to use it in my project.\\n\\n```sql\\nSELECT title FROM tasks WHERE due \\u003C now();\\n```\\n\u0022,\u0022cursor\u0022:\u0022Apply this snippet to my codebase. Match the existing style and keep the change small.\\n\\n```sql\\nSELECT title FROM tasks WHERE due \\u003C now();\\n```\\n\u0022},\u0022links\u0022:{\u0022claude\u0022:\u0022https:\\\/\\\/claude.ai\\\/new?q=Read%20this%20snippet%2C%20explain%20what%20it%20does%2C%20and%20show%20how%20to%20use%20it%20in%20my%20project.%0A%0A%60%60%60sql%0ASELECT%20title%20FROM%20tasks%20WHERE%20due%20%3C%20now%28%29%3B%0A%60%60%60%0A\u0022,\u0022chatgpt\u0022:\u0022https:\\\/\\\/chatgpt.com\\\/?q=Explain%20what%20this%20snippet%20does%20and%20how%20to%20use%20it%20in%20my%20project.%0A%0A%60%60%60sql%0ASELECT%20title%20FROM%20tasks%20WHERE%20due%20%3C%20now%28%29%3B%0A%60%60%60%0A\u0022,\u0022cursor\u0022:\u0022cursor:\\\/\\\/anysphere.cursor-deeplink\\\/prompt?text=Apply%20this%20snippet%20to%20my%20codebase.%20Match%20the%20existing%20style%20and%20keep%20the%20change%20small.%0A%0A%60%60%60sql%0ASELECT%20title%20FROM%20tasks%20WHERE%20due%20%3C%20now%28%29%3B%0A%60%60%60%0A\u0022},\u0022t\u0022:{\u0022code\u0022:\u0022Code copied to clipboard\u0022,\u0022markdown\u0022:\u0022Markdown copied to clipboard\u0022,\u0022prompt\u0022:\u0022Prompt for :name copied to clipboard\u0022,\u0022failed\u0022:\u0022Could not copy\u0022,\u0022tooLong\u0022:\u0022Too long for a link. Prompt copied instead.\u0022},\u0022names\u0022:{\u0022claude\u0022:\u0022Claude\u0022,\u0022chatgpt\u0022:\u0022ChatGPT\u0022,\u0022cursor\u0022:\u0022Cursor\u0022}}'))" class="inline-flex items-center">
    <button data-slot="button"
     type="button"                         aria-label="Copy code" x-on:click="copyCode()" x-bind:data-copied="done ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 data-copied:text-nq-success-text">
        <svg aria-hidden="true" x-show="! done" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
</svg>        <svg aria-hidden="true" x-show="done" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></button>
    <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="code-copy-menu-trigger"
     type="button"                         x-bind="trigger" x-ref="trigger" aria-label="Copy options" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 -ms-1 w-5">
        <svg aria-hidden="true" class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m6 9 6 6 6-6"/>
</svg></button>
        <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-end.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-56"><div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="copyCode()" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
</svg> Copy code</div>
            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="copyMarkdown()" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
  <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
  <path d="M10 9H8"/>
  <path d="M16 13H8"/>
  <path d="M16 17H8"/>
</svg> Copy as Markdown</div>
                            <div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                <div data-slot="dropdown-menu-label" role="presentation" class="px-2.5 pt-1.5 pb-1 text-caption font-medium text-muted-foreground">Use with AI</div>
                                    <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="copyPrompt(&#039;claude&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/>
  <path d="M20 2v4"/>
  <path d="M22 4h-4"/>
  <circle cx="4" cy="20" r="2"/>
</svg> <span>Copy prompt for <bdi dir="ltr">Claude</bdi></span></div>
                                    <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="copyPrompt(&#039;chatgpt&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/>
  <path d="M20 2v4"/>
  <path d="M22 4h-4"/>
  <circle cx="4" cy="20" r="2"/>
</svg> <span>Copy prompt for <bdi dir="ltr">ChatGPT</bdi></span></div>
                                    <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="copyPrompt(&#039;cursor&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/>
  <path d="M20 2v4"/>
  <path d="M22 4h-4"/>
  <circle cx="4" cy="20" r="2"/>
</svg> <span>Copy prompt for <bdi dir="ltr">Cursor</bdi></span></div>
                                                    <div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="open(&#039;claude&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 3h6v6"/>
  <path d="M10 14 21 3"/>
  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
</svg> <span>Open in <bdi dir="ltr">Claude</bdi></span></div>
                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="open(&#039;chatgpt&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 3h6v6"/>
  <path d="M10 14 21 3"/>
  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
</svg> <span>Open in <bdi dir="ltr">ChatGPT</bdi></span></div>
                                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="open(&#039;cursor&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 3h6v6"/>
  <path d="M10 14 21 3"/>
  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
</svg> <span>Open in <bdi dir="ltr">Cursor</bdi></span></div></div>
</template></div>
    <span role="status" aria-live="polite" class="sr-only" x-text="status"></span>
</span>        </div>
        <pre data-slot="code-block-pre" role="region" tabindex="0" aria-label="Code"
        class="m-0 overflow-auto bg-transparent py-3 font-mono text-code text-[var(--shiki-foreground)] outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus "><code class="block w-max min-w-full"><span data-line="1"  class="flex min-h-[1lh] border-s-2 border-transparent pe-4 whitespace-pre ps-3"><span data-code-line>SELECT title FROM tasks WHERE due &lt; now();</span></span></code></pre>
</figure>
                                                                    <div data-slot="copilot-sources" class="flex flex-col gap-1.5">
    <span class="text-caption text-muted-foreground">Sources</span>
    <ol class="flex flex-wrap gap-2">
                                <li class="min-w-0">
                <a href="https://example.com/board" target="_blank" rel="noopener noreferrer"  class="flex max-w-56 items-center gap-2 rounded-control border border-border bg-card px-2 py-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus">                                        <span class="grid size-4 shrink-0 place-items-center rounded-full bg-secondary text-[10px] tabular-nums text-muted-foreground">1</span>
                    <span class="flex min-w-0 flex-col">
                        <span dir="auto" class="truncate text-caption text-foreground">Task board</span>
                        <span dir="ltr" class="truncate text-[11px] text-muted-foreground">example.com</span>                    </span>
                </a>            </li>
            </ol>
</div>
                    <div class="flex items-center gap-0.5 text-muted-foreground" data-slot="copilot-actions">
                <button data-slot="button"
     type="button"                         data-id="a1" data-copy="Two tasks are overdue:
- **Send the invoice** (3 days)
- **Review the contract** (1 day)
```sql
SELECT title FROM tasks WHERE due &amp;lt; now();
```" x-on:click="copyAnswer($el)" x-bind:aria-label="copyLabel(&#039;a1&#039;, &#039;Copy answer&#039;)" x-bind:title="copyLabel(&#039;a1&#039;, &#039;Copy answer&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg x-show="isCopied('a1')" style="display: none" aria-hidden="true" class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                    <svg x-show="! isCopied('a1')" aria-hidden="true" class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
</svg></button>
                                                    <button data-slot="button"
     type="button"                         x-on:click="rate(&#039;a1&#039;, &#039;up&#039;)" x-bind:aria-pressed="pressed(&#039;a1&#039;, &#039;up&#039;)" aria-label="Good answer" title="Good answer" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 aria-pressed:text-nq-accent">
        <svg aria-hidden="true" class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/>
  <path d="M7 10v12"/>
</svg></button>
                    <button data-slot="button"
     type="button"                         x-on:click="rate(&#039;a1&#039;, &#039;down&#039;)" x-bind:aria-pressed="pressed(&#039;a1&#039;, &#039;down&#039;)" aria-label="Not helpful" title="Not helpful" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 aria-pressed:text-nq-danger-text">
        <svg aria-hidden="true" class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"/>
  <path d="M17 14V2"/>
</svg></button>
                                                    <button data-slot="button"
     type="button"                         x-on:click="regenerate(&#039;a1&#039;)" aria-label="Try again" title="Try again" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
  <path d="M21 3v5h-5"/>
  <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
  <path d="M8 16H3v5"/>
</svg></button>
                            </div>
                            <div role="group" aria-label="Suggested follow-ups" class="flex flex-wrap gap-2">
                                    <button type="button" dir="auto" x-on:click="send('Show the details')"
                        class="rounded-full border border-border bg-card px-3 py-1 text-start text-caption text-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus">Show the details</button>
                                    <button type="button" dir="auto" x-on:click="send('Remind the owners')"
                        class="rounded-full border border-border bg-card px-3 py-1 text-start text-caption text-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus">Remind the owners</button>
                            </div>
            </div>
                                                </div>
            </div>
</div>
        <template x-for="m in outbox" x-bind:key="m.id">
            <div data-slot="chat-message" data-side="user" class="flex max-w-[85%] items-start gap-2 flex-row-reverse self-end">
                <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-6 text-[10px] rounded-full mt-0.5">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="You" >Y</span>
    </span>
                <div class="flex min-w-0 flex-col gap-1 items-end">
                    <div class="flex items-center gap-2 text-caption text-muted-foreground"><span class="text-label text-foreground">You</span></div>
                    <div data-slot="chat-bubble" class="min-w-0 rounded-card px-3 py-2 text-body bg-secondary text-secondary-foreground">
                        <span x-show="m.files.length" class="flex flex-wrap gap-1.5" role="list" aria-label="Attachments">
                            <template x-for="f in m.files" x-bind:key="f.id">
                                <span role="listitem" data-slot="copilot-attachment" class="inline-flex max-w-56 items-center gap-2 rounded-control border border-border bg-card p-1 pe-1.5 text-caption">
                                    <span aria-hidden="true" class="grid size-8 shrink-0 place-items-center rounded-sm bg-secondary text-muted-foreground"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
  <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
  <path d="M10 9H8"/>
  <path d="M16 13H8"/>
  <path d="M16 17H8"/>
</svg></span>
                                    <span class="flex min-w-0 flex-col"><span dir="auto" class="truncate text-foreground" x-text="f.name"></span><span class="truncate text-[11px] tabular-nums text-muted-foreground" x-text="fileDetail(f)"></span></span>
                                </span>
                            </template>
                        </span>
                        <p x-show="m.text" x-text="m.text" dir="auto" class="whitespace-pre-wrap text-start [overflow-wrap:anywhere]"></p>
                    </div>
                </div>
            </div>
        </template></div>
    </div>
    <button data-slot="chat-jump"
     type="button"                         x-show="away" x-cloak="x-cloak" x-on:click="jump()" aria-label="Jump to latest" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover size-control-sm p-0 absolute end-4 bottom-3 rounded-full shadow-sm">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 5v14"/>
  <path d="m19 12-7 7-7-7"/>
</svg></button>
</div>
    <div class="flex flex-col gap-2 border-t border-border p-3">
        <div class="relative flex w-full flex-col gap-2">
            <div x-show="showContext()"  role="group" aria-label="Context" data-slot="copilot-context" class="flex flex-wrap items-center gap-1.5">
                <template x-for="i in ctx" x-bind:key="i.id">
                    <span class="inline-flex max-w-48 items-center gap-1 rounded-full border border-border bg-secondary ps-2.5 pe-1 text-caption text-foreground">
                        <span x-show="i.kind" class="text-muted-foreground" x-text="i.kind"></span>
                        <span dir="auto" class="truncate" x-text="i.label"></span>
                        <button type="button" x-bind:aria-label="removeContextLabel(i)" x-on:click="dropContext(i.id)" class="grid size-5 shrink-0 place-items-center rounded-full text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus"><svg aria-hidden="true" class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </span>
                </template>
                <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" x-show="available().length" class="contents"><button type="button" x-bind="trigger" aria-label="Add context"
                        class="inline-flex h-6 items-center gap-1 rounded-full border border-dashed border-border px-2 text-caption text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                        <svg aria-hidden="true" class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="M12 5v14"/>
</svg>Add context
                    </button>
                    <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-start.offset.4="$refs.trigger"
        class="z-50 min-w-44 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"><template x-for="o in available()" x-bind:key="o.id">
                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="addContext(o)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span x-show="o.kind" class="text-muted-foreground" x-text="o.kind"></span><span dir="auto" x-text="o.label"></span></div>
                        </template></div>
</template></div>
            </div>
                            <div x-show="slashOpen()" style="display: none" data-slot="copilot-commands" class="absolute inset-x-0 bottom-full z-10 mb-2 overflow-hidden rounded-card border border-border bg-popover text-popover-foreground">
                    <p class="border-b border-border px-3 py-1.5 text-caption text-muted-foreground">Tools and skills</p>
                    <p x-show="matches().length === 0" style="display: none" class="px-3 py-3 text-caption text-muted-foreground">No matching tools</p>
                    <ul role="listbox" aria-label="Tools and skills" class="max-h-60 overflow-y-auto p-1">
                        <template x-for="(c, i) in matches()" x-bind:key="c.id">
                            <li role="option" x-bind:aria-selected="i === activeIndex() ? 'true' : 'false'" x-on:mousedown.prevent x-on:click="choose(c)" x-on:mouseenter="slashIndex = i"
                                class="flex cursor-pointer items-center gap-2 rounded-control px-2.5 py-1.5 aria-selected:bg-nq-selected">
                                <svg aria-hidden="true" class="size-3.5 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M22 2 2 22"/>
</svg>                                <span class="flex min-w-0 flex-1 flex-col">
                                    <span dir="auto" class="truncate text-body-sm text-foreground" x-text="c.label"></span>
                                    <span x-show="c.description" dir="auto" class="truncate text-caption text-muted-foreground" x-text="c.description"></span>
                                </span>
                                <span x-show="c.kind" class="inline-flex items-center rounded-full bg-secondary px-2 text-caption text-secondary-foreground" x-text="c.kind"></span>
                            </li>
                        </template>
                    </ul>
                </div>
                        <span aria-live="polite" class="sr-only" x-text="announce()"></span>
            <div data-slot="copilot-composer" x-bind:data-dragging="dragging ? '' : null" x-on:dragover="onDragOver($event)" x-on:dragleave="onDragLeave($event)" x-on:drop="onDrop($event)"
                class="relative flex flex-col gap-2 rounded-card border border-border bg-card p-2 focus-within:outline-2 focus-within:outline-nq-focus data-[dragging]:border-dashed data-[dragging]:border-primary">
                <div x-show="dragging" style="display: none" aria-hidden="true" class="pointer-events-none absolute inset-0 z-10 grid place-items-center rounded-card bg-card/90 text-body-sm text-foreground">Drop files to attach</div>
                <div x-show="files.length + chosen.length > 0" style="display: none" class="flex flex-wrap items-center gap-1.5">
                    <template x-for="c in chosenCommands()" x-bind:key="c.id">
                        <span data-slot="copilot-command-chip" class="inline-flex max-w-48 items-center gap-1 rounded-full bg-nq-selected ps-2 pe-1 text-caption text-foreground">
                            <svg aria-hidden="true" class="size-3 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M22 2 2 22"/>
</svg>                            <span dir="auto" class="truncate" x-text="c.label"></span>
                            <button type="button" x-bind:aria-label="removeCommandLabel(c)" x-on:click="unchoose(c.id)" class="grid size-5 shrink-0 place-items-center rounded-full text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus"><svg aria-hidden="true" class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                        </span>
                    </template>
                    <template x-for="f in files" x-bind:key="f.id">
                        <span data-slot="copilot-attachment" x-bind:title="f.error || f.name" class="inline-flex max-w-56 items-center gap-2 rounded-control border border-border bg-card p-1 pe-1.5 text-caption">
                            <img x-show="isImage(f)" style="display: none" x-bind:src="isImage(f) ? f.url : null" alt="" class="size-8 shrink-0 rounded-sm object-cover" />
                            <span x-show="! isImage(f)" aria-hidden="true" class="grid size-8 shrink-0 place-items-center rounded-sm bg-secondary text-muted-foreground"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
  <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
  <path d="M10 9H8"/>
  <path d="M16 13H8"/>
  <path d="M16 17H8"/>
</svg></span>
                            <span class="flex min-w-0 flex-col"><span dir="auto" class="truncate text-foreground" x-text="f.name"></span><span class="truncate text-[11px] tabular-nums text-muted-foreground" x-text="fileDetail(f)"></span></span>
                            <button type="button" x-bind:aria-label="removeFileLabel(f)" x-on:click="removeFile(f.id)" class="grid size-5 shrink-0 place-items-center rounded-full text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus"><svg aria-hidden="true" class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                        </span>
                    </template>
                </div>
                <div data-slot="mention-textarea" x-data="nqMentionTextarea('', JSON.parse('{\u0022suggestions\u0022:[],\u0022strings\u0022:{\u0022list\u0022:\u0022Mentions\u0022,\u0022empty\u0022:\u0022No matches\u0022,\u0022count\u0022:\u0022{n} suggestions\u0022,\u0022person\u0022:\u0022People\u0022,\u0022team\u0022:\u0022Teams\u0022,\u0022group\u0022:\u0022Groups\u0022,\u0022teamOne\u0022:\u0022Team\u0022,\u0022groupOne\u0022:\u0022Group\u0022}}'))" x-modelable="text" x-id="['nq-mention']"
    x-model="draft" x-on:nq-mentions-change="setFound($event)" class="relative w-full">
    <textarea data-slot="textarea"
                x-bind="area" x-ref="area" rows="2" aria-label="Message" placeholder="Ask anything. Type @ to mention. Type / for tools and skills." x-on:keyup="onCaret($event)" x-on:click="onCaret($event)" x-on:paste="onPaste($event)" x-on:keydown="onKey($event)" class="min-w-0 rounded-control border-input text-body text-foreground transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] max-h-40 min-h-12 w-full resize-none border-0 bg-transparent p-1 shadow-none outline-none focus-visible:outline-none"></textarea>
    <ul x-show="open()" x-cloak :id="listId()" role="listbox" aria-label="Mentions" data-slot="mention-list" :style="listStyle()" @mousedown.prevent
        class="absolute z-50 max-h-56 w-64 max-w-full overflow-y-auto rounded-floating border border-border bg-popover p-1 text-body-sm text-popover-foreground shadow-floating">
        <template x-for="r in rows()" :key="r.key">
            <li x-bind="row(r)">
                <span x-show="r.type === 'heading'" x-text="r.type === 'heading' ? heading(r.kind) : ''"></span>
                <span x-show="r.type === 'option' && (r.option.kind ?? 'person') === 'person'" class="relative inline-flex shrink-0">
                    <span data-slot="avatar" aria-hidden="true" class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-6 text-[10px] rounded-full">
                        <img x-show="r.type === 'option' && r.option.avatar" data-slot="avatar-image" :src="r.type === 'option' ? r.option.avatar : null" alt="" class="size-full object-cover" style="display: none">
                        <span x-show="r.type === 'option' && ! r.option.avatar" data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-text="r.type === 'option' ? initials(r.option.name) : ''"></span>
                    </span>
                    <span x-show="r.type === 'option' && r.option.presence" style="display: none" data-slot="presence-dot" aria-hidden="true"
                        :data-presence="r.type === 'option' ? r.option.presence : null"
                        :class="r.type === 'option' && r.option.presence ? presenceClass(r.option.presence) : ''"
                        class="absolute -end-0.5 -bottom-0.5 inline-block size-2.5 shrink-0 rounded-full border-2 border-popover"></span>
                </span>
                <span x-show="r.type === 'option' && (r.option.kind ?? 'person') !== 'person'" style="display: none" aria-hidden="true" class="inline-flex size-6 shrink-0 items-center justify-center rounded-control bg-secondary text-secondary-foreground">
                    <span class="flex [&_svg]:size-3.5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
  <path d="M16 3.128a4 4 0 0 1 0 7.744"/>
  <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
  <circle cx="9" cy="7" r="4"/>
</svg></span>
                </span>
                <span x-show="r.type === 'option'" class="flex min-w-0 flex-col">
                    <span class="truncate text-label text-foreground">
                        <span x-text="r.type === 'option' ? r.option.name : ''"></span>
                        <span x-show="r.type === 'option' && (r.option.kind ?? 'person') !== 'person'" style="display: none" class="sr-only" x-text="r.type === 'option' ? ' (' + kindLabel(r.option.kind) + ')' : ''"></span>
                    </span>
                    <span x-show="r.type === 'option' && r.option.description" style="display: none" class="truncate text-caption text-muted-foreground" x-text="r.type === 'option' ? r.option.description : ''"></span>
                </span>
            </li>
        </template>
    </ul>
    <div x-show="emptyShown()" x-cloak data-slot="mention-empty" :style="listStyle()"
        class="absolute z-50 w-64 max-w-full rounded-floating border border-border bg-popover px-3 py-2 text-body-sm text-muted-foreground shadow-floating">No matches</div>
    <span role="status" class="sr-only" x-text="status()"></span>
    </div>
                <div class="flex flex-wrap items-center gap-1">
                                            <input type="file" multiple hidden  x-on:change="onPick($event)" />
                        <button data-slot="button"
     type="button"                         x-on:click="pick()" aria-label="Attach files" title="Attach files" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"/>
</svg></button>
                                                                <div role="group" aria-label="Options" class="flex flex-wrap items-center gap-1">
                                                                                            <button data-slot="button"
     type="button"                         x-on:click="flip(&#039;web&#039;)" x-bind:aria-pressed="isOn(&#039;web&#039;)" title="" class="inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap rounded-control border border-transparent font-sans transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-nq-hover h-control-sm gap-1.5 px-2 text-caption text-muted-foreground aria-pressed:bg-nq-selected aria-pressed:text-foreground">
        Web search</button>
                                                    </div>
                                                                <div data-slot="select" x-data="nqSelect('fast', false)" x-modelable="value" x-id="['nq-select']" x-model="modelId" class="contents">
    <button data-slot="ai-model-select" x-ref="trigger" x-bind="trigger"
        aria-label="Model" class="flex items-center justify-between gap-2 rounded-control border-input px-3 text-foreground min-h-[var(--nq-touch-min,0px)] cursor-default select-none outline-none transition-colors duration-150 ease-nq focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-popup-open:border-nq-focus data-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control-sm w-auto min-w-0 max-w-44 border-0 bg-transparent text-caption">
    <span data-slot="select-value" x-text="label() ?? ''" :data-placeholder="empty() ? '' : undefined"
    class="min-w-0 flex-1 truncate text-start data-placeholder:text-muted-foreground"></span>
    <span class="flex shrink-0 text-muted-foreground [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg></span>
</button>
    <template x-teleport="body">
    <div data-slot="select-content" x-ref="popup" x-bind="popup" x-nq-presence="open" x-anchor.bottom-start.offset.4="$refs.trigger"
        class="z-50 min-w-[var(--anchor-width)] max-h-[var(--available-height)] overflow-y-auto rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
        <div data-slot="select-item" x-bind="item('fast', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('fast')" x-cloak class="contents"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Fast</span>
</div>
                    <div data-slot="select-item" x-bind="item('deep', false)"
    class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control ps-8 pe-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="isSelected('deep')" x-cloak class="contents"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></span>
    </span>
    <span data-slot="select-item-text" class="min-w-0 flex-1 truncate">Deep</span>
</div>
    </div>
</template>
    </div>
                                        <span class="flex-1"></span>
                                            <button data-slot="button"
     type="button"                         x-show="busy" style="display: none" x-on:click="stop()" aria-label="Stop" title="Stop" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] size-control-sm p-0">
        <svg aria-hidden="true" class="size-3.5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="18" height="18" x="3" y="3" rx="2"/>
</svg></button>
                                        <button data-slot="button"
     type="button"                         x-show="sendShown()" style="" x-on:click="send()" x-bind:disabled="! canSend()" aria-label="Send" title="Send" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] size-control-sm p-0">
        <svg aria-hidden="true" class="size-3.5 rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/>
  <path d="m21.854 2.147-10.94 10.939"/>
</svg></button>
                </div>
            </div>
            <p role="alert" x-show="error" x-text="error" style="display: none" class="text-caption text-nq-danger-text"></p>
            <p class="text-center text-[11px] text-muted-foreground">AI can make mistakes. Check important details.</p>        </div>
    </div>
</section>
</div>
````