CopilotDock

Code

import { CopilotDock } from "@fadymondy/nasaq/web";<CopilotDock messages={messages} onSend={send} onStop={stop} starters={["Summarise my week"]} />;

AI Assistant · beta

Live examples and controls: CopilotDock in the lab.

InstallCopy Anchor Link

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

Puts CopilotChat 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 useCopy Anchor Link

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

When not to useCopy Anchor Link

• A dedicated assistant page: render CopilotChat mode="page".
• A one-shot question box inside a page: use AskAI.

ImportCopy Anchor Link

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

Quick startCopy Anchor Link

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

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

AnatomyCopy Anchor Link

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

APICopy Anchor Link

CopilotDockCopy Anchor Link

Takes every CopilotChat prop except mode and onClose, plus:

ExamplesCopy Anchor Link

Opened from a header buttonCopy Anchor Link

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 CopilotProviderCopy Anchor Link

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

Wider panel, no shortcutCopy Anchor Link

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

AccessibilityCopy Anchor Link

• 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 & i18nCopy Anchor Link

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 & tokensCopy Anchor Link

• 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'tCopy Anchor Link

• 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.

RelatedCopy Anchor Link

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

LabCopy Anchor Link

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