# CopilotDock

> App-wide assistant: a launcher or an Ask bar that opens CopilotChat in a non-modal panel docked to either edge or the bottom, floating, or expanded to the page. Toggled with ⌘J / Ctrl+J.

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

## Install

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

Puts [`CopilotChat`](https://docs.nasaqui.com/components/copilot-chat) one keystroke away on every page. A round launcher waits at the bottom inline-end corner. Opening it docks the chat as a panel on the inline-end edge. The panel is non-modal, so the page stays usable beside it. ⌘J / Ctrl+J toggles it from anywhere.

From the header, people can move the panel to the other edge or the bottom, float it as a window, or expand it to the full page. With `persistKey`, the position is remembered. With `collapsedBar`, a slim "Ask anything" bar replaces the round launcher.

## When to use

- Once, at the app shell level, when an assistant should be reachable from every page.

## When not to use

- A dedicated assistant page: render `CopilotChat mode="page"`.
- A one-shot question box inside a page: use [`AskAI`](https://docs.nasaqui.com/components/ask-ai).

## Import

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

## Quick start

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

<CopilotDock messages={messages} onSend={send} onStop={stop} starters={["Summarise my week"]} />;
```

## Anatomy

```
button [data-slot=copilot-dock-launcher]   (while closed, when `launcher`)
form   [data-slot=copilot-dock-bar]        (instead, with `collapsedBar`)
div    [data-slot=copilot-dock][data-open][data-side][data-expanded]   role complementary
└─ CopilotChat mode="panel" | "page" when expanded
   └─ header: …, [data-slot=copilot-dock-layout] menu, [data-slot=copilot-dock-expand], Close
```

## API

### `CopilotDock`

Takes every [`CopilotChat`](https://docs.nasaqui.com/components/copilot-chat) prop except `mode` and `onClose`, plus:

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `open` | `boolean` | — | Controlled open state. |
| `defaultOpen` | `boolean` | `false` | Uncontrolled start. |
| `onOpenChange` | `(open: boolean) => void` | — | Called on launcher, shortcut, close button and Escape. |
| `hotkey` | `string \| false` | `"j"` | Letter bound to ⌘ / Ctrl. `false` turns it off. |
| `launcher` | `boolean` | `true` | Show the floating button while closed. Turn off when a header button opens it. |
| `launcherIcon` | `ReactNode` | sparkles | Replaces the launcher icon. |
| `collapsedBar` | `boolean` | `false` | While closed, a slim bar at the bottom. Enter sends with `onSend` and opens. |
| `placement` | `"fixed" \| "absolute"` | `"fixed"` | `absolute` docks inside a `relative` parent (previews). |
| `side` / `defaultSide` / `onSideChange` | `"end" \| "start" \| "bottom" \| "float"` | `"end"` | Logical: `end` is the right edge in English and the left in Arabic. |
| `sides` | `CopilotDockSide[]` | all four | Choices in the header menu. One or none hides the menu. |
| `expanded` / `defaultExpanded` / `onExpandedChange` | `boolean` | `false` | Full page. Escape returns to the panel first. |
| `expandable` | `boolean` | `true` | Show the expand button. |
| `persistKey` | `string` | | localStorage key that remembers the position. |
| `width` | `string` | `"26rem"` | Side and floating width, never wider than the screen. |
| `height` | `string` | `50vh` / `40rem` | Bottom and floating height. |
| `dockLabels` | `Partial<CopilotDockLabels>` | — | Launcher and panel names. `labels` still goes to the chat. |

## Examples

### Opened from a header button

```tsx
const [open, setOpen] = useState(false);

<AppHeader>
  <Button variant="ghost" onClick={() => setOpen(true)}>Ask AI</Button>
</AppHeader>
<CopilotDock {...chat} open={open} onOpenChange={setOpen} launcher={false} />
```

### With CopilotProvider

```tsx
<CopilotProvider transport={transport} dock={{ persistKey: "copilot-side", collapsedBar: true }}>
  {children}
</CopilotProvider>
```

### Wider panel, no shortcut

```tsx
<CopilotDock {...chat} width="32rem" hotkey={false} />
```

## Accessibility

- The launcher has an accessible name, `aria-expanded`, `aria-controls` and `aria-keyshortcuts`.
- Opening moves focus to the prompt box. Escape inside the panel, or the close button, closes it and returns focus to the launcher.
- The panel is a `complementary` landmark named "Assistant" / "المساعد". It does not trap focus, so the page stays reachable.
- The position menu is a radio menu; the expand button reports `aria-pressed`. Escape leaves full page before it closes the panel.
- The Ask bar is a labelled `search` form; its input names the shortcut with `aria-keyshortcuts`.
- The shortcut matches on the physical key, so it works on Arabic keyboard layouts.

## RTL & i18n

The launcher and panel sit at the inline end, so they move to the left in Arabic. The position menu names physical sides ("Dock right") and its icons follow the direction. Launcher and panel names ship in English and Arabic; the chat's own strings come from `CopilotChat`.

## Styling & tokens

- Launcher: `bg-primary text-primary-foreground shadow-floating rounded-full`. Panel: `bg-background shadow-floating` with a hairline on the inner edge; floating adds `rounded-card` and a full border.
- Target with `[data-slot=copilot-dock]`, `[data-side]`, `[data-expanded]`, `[data-slot=copilot-dock-launcher]` and `[data-slot=copilot-dock-bar]`.

## Do / Don't

- Do mount it once, in the shell, so the conversation survives page changes.
- Don't stack it with another floating launcher in the same corner; move one with `className`.

## Related

`copilot-chat`, `copilot-provider`, `chat`, `ask-ai`, `feedback-reporter`, `app-shell`.

## Lab

https://docs.nasaqui.com/?path=/docs/components-ai-assistant-copilot-dock--docs

## Code

### React

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

<CopilotDock messages={messages} onSend={send} onStop={stop} starters={["Summarise my week"]} />;
```

### shadcn

```tsx
import { CopilotDock } from "@/components/ui/copilot-dock";

<CopilotDock messages={messages} onSend={send} onStop={stop} starters={["Summarise my week"]} />;
```

### Vue

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

const messages = ref<CopilotMessage[]>([]);
const send = (text: string) => messages.value.push({ id: String(messages.value.length + 1), role: "user", text });
</script>

<template>
  <NqCopilotDock :messages="messages" :on-send="send" :on-stop="() => {}" :starters="['Summarise my week']" />
</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', 'text' => 'Two tasks are overdue: **Send the invoice** and **Review the contract**.'],
    ];
@endphp
<div class="relative h-[32rem] w-full">
    <x-nq::copilot-dock id="dock-open" :messages="$messages" :starters="['Summarise my week']" placement="absolute" :open="true" persist-key="nq-dock-side" stoppable regenerate />
</div>
<div class="relative h-24 w-full">
    <x-nq::copilot-dock id="dock-closed" :messages="[]" placement="absolute" />
</div>
<div class="relative h-24 w-full">
    <x-nq::copilot-dock id="dock-bar" :messages="[]" placement="absolute" collapsed-bar />
</div>
```

### HTML + Alpine

```html
<div class="relative h-[32rem] w-full">
    <div data-slot="copilot-dock-root" x-data="nqCopilotDock(JSON.parse('{\u0022open\u0022:true,\u0022side\u0022:\u0022end\u0022,\u0022sides\u0022:[\u0022end\u0022,\u0022start\u0022,\u0022bottom\u0022,\u0022float\u0022],\u0022expanded\u0022:false,\u0022hotkey\u0022:\u0022j\u0022,\u0022persistKey\u0022:\u0022nq-dock-side\u0022,\u0022collapsedBar\u0022:false,\u0022width\u0022:\u002226rem\u0022,\u0022height\u0022:null,\u0022model\u0022:null,\u0022context\u0022:[],\u0022words\u0022:{\u0022open\u0022:\u0022Open assistant\u0022,\u0022send\u0022:\u0022Send\u0022,\u0022expand\u0022:\u0022Expand to full page\u0022,\u0022collapse\u0022:\u0022Exit full page\u0022}}'))" x-modelable="isOpen" x-on:keydown.window="onHotkey($event)" x-on:nq-close="closeDock()" class="contents">
            <button type="button" data-slot="copilot-dock-launcher" x-ref="launcher" x-show="! isOpen"  style="display: none"  aria-expanded="false" aria-controls="dock-open"
             aria-keyshortcuts="Control+J"  x-bind:title="launcherName()" title="Open assistant" aria-label="Open assistant" x-on:click="setOpen(true)"
            class="absolute bottom-4 end-4 z-40 inline-flex size-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-floating transition-colors duration-150 ease-nq hover:bg-primary/90 outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&amp;_svg]:size-5">
            <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>        </button>
            <div id="dock-open" x-ref="panel" role="complementary" aria-label="Assistant" tabindex="-1" data-slot="copilot-dock"
          data-open=""  data-side="end"         x-bind:hidden="! isOpen" x-bind:data-open="isOpen ? `` : null" x-bind:data-side="dockSide" x-bind:data-expanded="isExpanded ? `` : null" x-bind:style="sizeStyle()" x-bind:class="shapeClass()"
        x-on:keydown="onPanelKey($event)"
        class="absolute z-40 flex flex-col overflow-hidden border-border bg-background shadow-floating outline-none">
        <section aria-label="Copilot conversation" data-slot="copilot-chat" data-mode="panel" x-data="nqCopilotChat(JSON.parse('{\u0022commands\u0022:[],\u0022context\u0022:[],\u0022contextOptions\u0022:[],\u0022toggles\u0022:[],\u0022model\u0022:null,\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: **Send the invoice** and **Review the contract**.\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 flex-col bg-background text-foreground h-full w-full border-border min-h-0 flex-1">
    <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>
                                    <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>
                <div class="contents" x-show="! isExpanded">
                        <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="copilot-dock-layout"
     type="button"                         x-bind="trigger" x-ref="trigger" aria-label="Panel position" title="Panel position" 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">
        <span class="contents" x-show="dockSide === `end`" ><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="18" height="18" x="3" y="3" rx="2"/>
  <path d="M15 3v18"/>
</svg></span>
                                                                    <span class="contents" x-show="dockSide === `start`"  style="display: none" ><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="18" height="18" x="3" y="3" rx="2"/>
  <path d="M9 3v18"/>
</svg></span>
                                                                    <span class="contents" x-show="dockSide === `bottom`"  style="display: none" ><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="18" height="18" x="3" y="3" rx="2"/>
  <path d="M3 15h18"/>
</svg></span>
                                                                    <span class="contents" x-show="dockSide === `float`"  style="display: none" ><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="M21 9V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h4"/>
  <rect width="10" height="7" x="12" y="13" rx="2"/>
</svg></span></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 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"><div data-slot="dropdown-menu-label" role="presentation" class="px-2.5 pt-1.5 pb-1 text-caption font-medium text-muted-foreground">Panel position</div>
                                <div data-slot="dropdown-menu-radio-group" role="group" x-data="{ value: 'end' }" x-modelable="value" x-model="dockSide"><div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'end'"
    x-bind:aria-checked="value === 'end' ? 'true' : 'false'" x-bind:data-checked="value === 'end' ? '' : undefined" x-bind:data-unchecked="value === 'end' ? undefined : ''"
     data-keep-open         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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'end'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    <svg aria-hidden="true" class="size-4 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">
  <rect width="18" height="18" x="3" y="3" rx="2"/>
  <path d="M15 3v18"/>
</svg>                                            Dock right
</div>
                                                                            <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'start'"
    x-bind:aria-checked="value === 'start' ? 'true' : 'false'" x-bind:data-checked="value === 'start' ? '' : undefined" x-bind:data-unchecked="value === 'start' ? undefined : ''"
     data-keep-open         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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'start'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    <svg aria-hidden="true" class="size-4 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">
  <rect width="18" height="18" x="3" y="3" rx="2"/>
  <path d="M9 3v18"/>
</svg>                                            Dock left
</div>
                                                                            <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'bottom'"
    x-bind:aria-checked="value === 'bottom' ? 'true' : 'false'" x-bind:data-checked="value === 'bottom' ? '' : undefined" x-bind:data-unchecked="value === 'bottom' ? undefined : ''"
     data-keep-open         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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'bottom'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    <svg aria-hidden="true" class="size-4 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">
  <rect width="18" height="18" x="3" y="3" rx="2"/>
  <path d="M3 15h18"/>
</svg>                                            Dock bottom
</div>
                                                                            <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'float'"
    x-bind:aria-checked="value === 'float' ? 'true' : 'false'" x-bind:data-checked="value === 'float' ? '' : undefined" x-bind:data-unchecked="value === 'float' ? undefined : ''"
     data-keep-open         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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'float'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    <svg aria-hidden="true" class="size-4 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="M21 9V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h4"/>
  <rect width="10" height="7" x="12" y="13" rx="2"/>
</svg>                                            Floating window
</div></div></div>
</template></div>
                    </div>
                                                    <button data-slot="copilot-dock-expand"
     type="button"                         x-bind:aria-pressed="isExpanded ? `true` : `false`" x-bind:aria-label="expandLabel()" x-bind:title="expandLabel()" aria-label="Expand to full page" x-on:click="setExpanded(! isExpanded)" 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="isExpanded" style="display: none" 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="m14 10 7-7"/>
  <path d="M20 10h-6V4"/>
  <path d="m3 21 7-7"/>
  <path d="M4 14h6v6"/>
</svg>                        <svg x-show="! isExpanded" style="" 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="M15 3h6v6"/>
  <path d="m21 3-7 7"/>
  <path d="m3 21 7-7"/>
  <path d="M9 21H3v-6"/>
</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="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: <strong class="font-semibold text-foreground">Send the invoice</strong> and <strong class="font-semibold text-foreground">Review the contract</strong>.</p>
</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** and **Review the contract**." 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="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>
                                                </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()"  style="display: none"  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" style="display: none" 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>
                        <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." 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">
                                                                                <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>
                    </div>
    </div>
</section>
    </div>
</div>
</div>
<div class="relative h-24 w-full">
    <div data-slot="copilot-dock-root" x-data="nqCopilotDock(JSON.parse('{\u0022open\u0022:false,\u0022side\u0022:\u0022end\u0022,\u0022sides\u0022:[\u0022end\u0022,\u0022start\u0022,\u0022bottom\u0022,\u0022float\u0022],\u0022expanded\u0022:false,\u0022hotkey\u0022:\u0022j\u0022,\u0022persistKey\u0022:null,\u0022collapsedBar\u0022:false,\u0022width\u0022:\u002226rem\u0022,\u0022height\u0022:null,\u0022model\u0022:null,\u0022context\u0022:[],\u0022words\u0022:{\u0022open\u0022:\u0022Open assistant\u0022,\u0022send\u0022:\u0022Send\u0022,\u0022expand\u0022:\u0022Expand to full page\u0022,\u0022collapse\u0022:\u0022Exit full page\u0022}}'))" x-modelable="isOpen" x-on:keydown.window="onHotkey($event)" x-on:nq-close="closeDock()" class="contents">
            <button type="button" data-slot="copilot-dock-launcher" x-ref="launcher" x-show="! isOpen"  aria-expanded="false" aria-controls="dock-closed"
             aria-keyshortcuts="Control+J"  x-bind:title="launcherName()" title="Open assistant" aria-label="Open assistant" x-on:click="setOpen(true)"
            class="absolute bottom-4 end-4 z-40 inline-flex size-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-floating transition-colors duration-150 ease-nq hover:bg-primary/90 outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&amp;_svg]:size-5">
            <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>        </button>
            <div id="dock-closed" x-ref="panel" role="complementary" aria-label="Assistant" tabindex="-1" data-slot="copilot-dock"
         hidden   data-side="end"         x-bind:hidden="! isOpen" x-bind:data-open="isOpen ? `` : null" x-bind:data-side="dockSide" x-bind:data-expanded="isExpanded ? `` : null" x-bind:style="sizeStyle()" x-bind:class="shapeClass()"
        x-on:keydown="onPanelKey($event)"
        class="absolute z-40 flex flex-col overflow-hidden border-border bg-background shadow-floating outline-none">
        <section aria-label="Copilot conversation" data-slot="copilot-chat" data-mode="panel" x-data="nqCopilotChat(JSON.parse('{\u0022commands\u0022:[],\u0022context\u0022:[],\u0022contextOptions\u0022:[],\u0022toggles\u0022:[],\u0022model\u0022:null,\u0022feedback\u0022:{},\u0022busy\u0022:false,\u0022stoppable\u0022:false,\u0022count\u0022:0,\u0022transcript\u0022:\u0022\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 flex-col bg-background text-foreground h-full w-full border-border min-h-0 flex-1">
    <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 class="contents" x-show="! isExpanded">
                        <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="copilot-dock-layout"
     type="button"                         x-bind="trigger" x-ref="trigger" aria-label="Panel position" title="Panel position" 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">
        <span class="contents" x-show="dockSide === `end`" ><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="18" height="18" x="3" y="3" rx="2"/>
  <path d="M15 3v18"/>
</svg></span>
                                                                    <span class="contents" x-show="dockSide === `start`"  style="display: none" ><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="18" height="18" x="3" y="3" rx="2"/>
  <path d="M9 3v18"/>
</svg></span>
                                                                    <span class="contents" x-show="dockSide === `bottom`"  style="display: none" ><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="18" height="18" x="3" y="3" rx="2"/>
  <path d="M3 15h18"/>
</svg></span>
                                                                    <span class="contents" x-show="dockSide === `float`"  style="display: none" ><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="M21 9V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h4"/>
  <rect width="10" height="7" x="12" y="13" rx="2"/>
</svg></span></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 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"><div data-slot="dropdown-menu-label" role="presentation" class="px-2.5 pt-1.5 pb-1 text-caption font-medium text-muted-foreground">Panel position</div>
                                <div data-slot="dropdown-menu-radio-group" role="group" x-data="{ value: 'end' }" x-modelable="value" x-model="dockSide"><div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'end'"
    x-bind:aria-checked="value === 'end' ? 'true' : 'false'" x-bind:data-checked="value === 'end' ? '' : undefined" x-bind:data-unchecked="value === 'end' ? undefined : ''"
     data-keep-open         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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'end'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    <svg aria-hidden="true" class="size-4 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">
  <rect width="18" height="18" x="3" y="3" rx="2"/>
  <path d="M15 3v18"/>
</svg>                                            Dock right
</div>
                                                                            <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'start'"
    x-bind:aria-checked="value === 'start' ? 'true' : 'false'" x-bind:data-checked="value === 'start' ? '' : undefined" x-bind:data-unchecked="value === 'start' ? undefined : ''"
     data-keep-open         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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'start'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    <svg aria-hidden="true" class="size-4 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">
  <rect width="18" height="18" x="3" y="3" rx="2"/>
  <path d="M9 3v18"/>
</svg>                                            Dock left
</div>
                                                                            <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'bottom'"
    x-bind:aria-checked="value === 'bottom' ? 'true' : 'false'" x-bind:data-checked="value === 'bottom' ? '' : undefined" x-bind:data-unchecked="value === 'bottom' ? undefined : ''"
     data-keep-open         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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'bottom'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    <svg aria-hidden="true" class="size-4 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">
  <rect width="18" height="18" x="3" y="3" rx="2"/>
  <path d="M3 15h18"/>
</svg>                                            Dock bottom
</div>
                                                                            <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'float'"
    x-bind:aria-checked="value === 'float' ? 'true' : 'false'" x-bind:data-checked="value === 'float' ? '' : undefined" x-bind:data-unchecked="value === 'float' ? undefined : ''"
     data-keep-open         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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'float'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    <svg aria-hidden="true" class="size-4 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="M21 9V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h4"/>
  <rect width="10" height="7" x="12" y="13" rx="2"/>
</svg>                                            Floating window
</div></div></div>
</template></div>
                    </div>
                                                    <button data-slot="copilot-dock-expand"
     type="button"                         x-bind:aria-pressed="isExpanded ? `true` : `false`" x-bind:aria-label="expandLabel()" x-bind:title="expandLabel()" aria-label="Expand to full page" x-on:click="setExpanded(! isExpanded)" 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="isExpanded" style="display: none" 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="m14 10 7-7"/>
  <path d="M20 10h-6V4"/>
  <path d="m3 21 7-7"/>
  <path d="M4 14h6v6"/>
</svg>                        <svg x-show="! isExpanded" style="" 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="M15 3h6v6"/>
  <path d="m21 3-7 7"/>
  <path d="m3 21 7-7"/>
  <path d="M9 21H3v-6"/>
</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 x-show="! started()" class="flex min-h-0 flex-1 flex-col items-center justify-center gap-5 overflow-y-auto p-6 text-center">
            <span aria-hidden="true" class="grid size-12 place-items-center rounded-full bg-primary text-primary-foreground"><svg class="size-6" 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 flex-col gap-1">
                <h3 class="text-h3">How can I help?</h3>
                <p class="text-body-sm text-muted-foreground">Ask about your data, or start from one of these.</p>
            </div>
                    </div>
        <div data-slot="chat-thread" x-data="nqChatThread" x-show="threadShown()" style="display: none" 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"><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()"  style="display: none"  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" style="display: none" 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>
                        <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." 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">
                                                                                <span class="flex-1"></span>
                                        <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>
                    </div>
    </div>
</section>
    </div>
</div>
</div>
<div class="relative h-24 w-full">
    <div data-slot="copilot-dock-root" x-data="nqCopilotDock(JSON.parse('{\u0022open\u0022:false,\u0022side\u0022:\u0022end\u0022,\u0022sides\u0022:[\u0022end\u0022,\u0022start\u0022,\u0022bottom\u0022,\u0022float\u0022],\u0022expanded\u0022:false,\u0022hotkey\u0022:\u0022j\u0022,\u0022persistKey\u0022:null,\u0022collapsedBar\u0022:true,\u0022width\u0022:\u002226rem\u0022,\u0022height\u0022:null,\u0022model\u0022:null,\u0022context\u0022:[],\u0022words\u0022:{\u0022open\u0022:\u0022Open assistant\u0022,\u0022send\u0022:\u0022Send\u0022,\u0022expand\u0022:\u0022Expand to full page\u0022,\u0022collapse\u0022:\u0022Exit full page\u0022}}'))" x-modelable="isOpen" x-on:keydown.window="onHotkey($event)" x-on:nq-close="closeDock()" class="contents">
                <form data-slot="copilot-dock-bar" role="search" aria-label="Assistant" x-show="! isOpen"  x-on:submit.prevent="sendBar()"
            class="absolute inset-x-0 bottom-4 z-40 mx-auto flex w-[min(calc(100%-2rem),36rem)] items-center gap-2 rounded-full border border-border bg-background ps-3 pe-1.5 py-1.5 shadow-floating focus-within:border-nq-focus">
            <span aria-hidden="true" class="text-primary [&_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="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>
            <input type="text" x-ref="bar" x-model="barText" aria-label="Ask anything…" aria-controls="dock-bar"  aria-keyshortcuts="Control+J"  placeholder="Ask anything…"
                class="min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground" />
            <kbd x-show="shortcut && ! barText" style="display: none" x-text="shortcut" dir="ltr" class="hidden rounded-sm border border-border px-1 font-mono text-[11px] text-muted-foreground sm:inline"></kbd>
            <button data-slot="button"
     type="submit"                         x-bind:aria-label="barLabel()" aria-label="Open assistant" 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 rounded-full">
        <svg x-show="barText.trim() !== ``" style="display: none" 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="m5 12 7-7 7 7"/>
  <path d="M12 19V5"/>
</svg>                <svg x-show="barText.trim() === ``" 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="M15 3h6v6"/>
  <path d="m21 3-7 7"/>
  <path d="m3 21 7-7"/>
  <path d="M9 21H3v-6"/>
</svg></button>
        </form>
        <div id="dock-bar" x-ref="panel" role="complementary" aria-label="Assistant" tabindex="-1" data-slot="copilot-dock"
         hidden   data-side="end"         x-bind:hidden="! isOpen" x-bind:data-open="isOpen ? `` : null" x-bind:data-side="dockSide" x-bind:data-expanded="isExpanded ? `` : null" x-bind:style="sizeStyle()" x-bind:class="shapeClass()"
        x-on:keydown="onPanelKey($event)"
        class="absolute z-40 flex flex-col overflow-hidden border-border bg-background shadow-floating outline-none">
        <section aria-label="Copilot conversation" data-slot="copilot-chat" data-mode="panel" x-data="nqCopilotChat(JSON.parse('{\u0022commands\u0022:[],\u0022context\u0022:[],\u0022contextOptions\u0022:[],\u0022toggles\u0022:[],\u0022model\u0022:null,\u0022feedback\u0022:{},\u0022busy\u0022:false,\u0022stoppable\u0022:false,\u0022count\u0022:0,\u0022transcript\u0022:\u0022\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 flex-col bg-background text-foreground h-full w-full border-border min-h-0 flex-1">
    <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 class="contents" x-show="! isExpanded">
                        <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="copilot-dock-layout"
     type="button"                         x-bind="trigger" x-ref="trigger" aria-label="Panel position" title="Panel position" 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">
        <span class="contents" x-show="dockSide === `end`" ><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="18" height="18" x="3" y="3" rx="2"/>
  <path d="M15 3v18"/>
</svg></span>
                                                                    <span class="contents" x-show="dockSide === `start`"  style="display: none" ><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="18" height="18" x="3" y="3" rx="2"/>
  <path d="M9 3v18"/>
</svg></span>
                                                                    <span class="contents" x-show="dockSide === `bottom`"  style="display: none" ><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="18" height="18" x="3" y="3" rx="2"/>
  <path d="M3 15h18"/>
</svg></span>
                                                                    <span class="contents" x-show="dockSide === `float`"  style="display: none" ><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="M21 9V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h4"/>
  <rect width="10" height="7" x="12" y="13" rx="2"/>
</svg></span></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 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"><div data-slot="dropdown-menu-label" role="presentation" class="px-2.5 pt-1.5 pb-1 text-caption font-medium text-muted-foreground">Panel position</div>
                                <div data-slot="dropdown-menu-radio-group" role="group" x-data="{ value: 'end' }" x-modelable="value" x-model="dockSide"><div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'end'"
    x-bind:aria-checked="value === 'end' ? 'true' : 'false'" x-bind:data-checked="value === 'end' ? '' : undefined" x-bind:data-unchecked="value === 'end' ? undefined : ''"
     data-keep-open         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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'end'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    <svg aria-hidden="true" class="size-4 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">
  <rect width="18" height="18" x="3" y="3" rx="2"/>
  <path d="M15 3v18"/>
</svg>                                            Dock right
</div>
                                                                            <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'start'"
    x-bind:aria-checked="value === 'start' ? 'true' : 'false'" x-bind:data-checked="value === 'start' ? '' : undefined" x-bind:data-unchecked="value === 'start' ? undefined : ''"
     data-keep-open         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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'start'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    <svg aria-hidden="true" class="size-4 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">
  <rect width="18" height="18" x="3" y="3" rx="2"/>
  <path d="M9 3v18"/>
</svg>                                            Dock left
</div>
                                                                            <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'bottom'"
    x-bind:aria-checked="value === 'bottom' ? 'true' : 'false'" x-bind:data-checked="value === 'bottom' ? '' : undefined" x-bind:data-unchecked="value === 'bottom' ? undefined : ''"
     data-keep-open         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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'bottom'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    <svg aria-hidden="true" class="size-4 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">
  <rect width="18" height="18" x="3" y="3" rx="2"/>
  <path d="M3 15h18"/>
</svg>                                            Dock bottom
</div>
                                                                            <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'float'"
    x-bind:aria-checked="value === 'float' ? 'true' : 'false'" x-bind:data-checked="value === 'float' ? '' : undefined" x-bind:data-unchecked="value === 'float' ? undefined : ''"
     data-keep-open         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 ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'float'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    <svg aria-hidden="true" class="size-4 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="M21 9V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h4"/>
  <rect width="10" height="7" x="12" y="13" rx="2"/>
</svg>                                            Floating window
</div></div></div>
</template></div>
                    </div>
                                                    <button data-slot="copilot-dock-expand"
     type="button"                         x-bind:aria-pressed="isExpanded ? `true` : `false`" x-bind:aria-label="expandLabel()" x-bind:title="expandLabel()" aria-label="Expand to full page" x-on:click="setExpanded(! isExpanded)" 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="isExpanded" style="display: none" 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="m14 10 7-7"/>
  <path d="M20 10h-6V4"/>
  <path d="m3 21 7-7"/>
  <path d="M4 14h6v6"/>
</svg>                        <svg x-show="! isExpanded" style="" 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="M15 3h6v6"/>
  <path d="m21 3-7 7"/>
  <path d="m3 21 7-7"/>
  <path d="M9 21H3v-6"/>
</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 x-show="! started()" class="flex min-h-0 flex-1 flex-col items-center justify-center gap-5 overflow-y-auto p-6 text-center">
            <span aria-hidden="true" class="grid size-12 place-items-center rounded-full bg-primary text-primary-foreground"><svg class="size-6" 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 flex-col gap-1">
                <h3 class="text-h3">How can I help?</h3>
                <p class="text-body-sm text-muted-foreground">Ask about your data, or start from one of these.</p>
            </div>
                    </div>
        <div data-slot="chat-thread" x-data="nqChatThread" x-show="threadShown()" style="display: none" 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"><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()"  style="display: none"  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" style="display: none" 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>
                        <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." 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">
                                                                                <span class="flex-1"></span>
                                        <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>
                    </div>
    </div>
</section>
    </div>
</div>
</div>
```