@assistant-ui/mcp-docs-server 0.1.25 → 0.1.27

package/.docs/raw/docs/ink/primitives.mdx

@@ -697,3 +697,144 @@ A built-in component for rendering tool calls with expandable/collapsible output
 | `renderHeader` | `(props: { toolName, status, expanded }) => ReactNode` | Custom header renderer |
 | `renderArgs` | `(props: { args, argsText }) => ReactNode` | Custom args renderer |
 | `renderResult` | `(props: { result, isError }) => ReactNode` | Custom result renderer |
+
+## Diff
+
+```tsx
+import { DiffPrimitive, DiffView } from "@assistant-ui/react-ink";
+```
+
+Components for rendering code diffs in the terminal.
+
+### DiffView
+
+Pre-composed component that combines all diff primitives for easy diff rendering. Accepts either a unified diff patch string or old/new file content for inline comparison.
+
+```tsx
+// From a patch string
+<DiffView
+  patch={unifiedDiffString}
+  showLineNumbers
+  contextLines={3}
+  maxLines={50}
+/>
+
+// From file contents
+<DiffView
+  oldFile={{ content: "old text", name: "file.txt" }}
+  newFile={{ content: "new text", name: "file.txt" }}
+  showLineNumbers
+/>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `patch` | `string` | Unified diff patch string to parse and display |
+| `oldFile` | `{ content: string; name?: string }` | Old file content for inline comparison |
+| `newFile` | `{ content: string; name?: string }` | New file content for inline comparison |
+| `showLineNumbers` | `boolean` | Whether to show line numbers (default: true) |
+| `contextLines` | `number` | Number of context lines to show around changes |
+| `maxLines` | `number` | Maximum number of lines to display |
+
+### Root
+
+Container `Box` that provides diff context to child components. Parses the patch or computes the diff from old/new file content.
+
+```tsx
+<DiffPrimitive.Root
+  patch={patchString}
+  oldFile={{ content: oldContent, name: "file.txt" }}
+  newFile={{ content: newContent, name: "file.txt" }}
+>
+  {children}
+</DiffPrimitive.Root>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `patch` | `string` | Unified diff patch string |
+| `oldFile` | `{ content: string; name?: string }` | Old file for inline diff |
+| `newFile` | `{ content: string; name?: string }` | New file for inline diff |
+
+### Header
+
+Displays file header information including filename(s) and change statistics.
+
+```tsx
+<DiffPrimitive.Header fileIndex={0} />
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `fileIndex` | `number` | Index of file to display header for (default: 0) |
+
+### Content
+
+Renders the diff content with lines. Supports context folding and line truncation.
+
+```tsx
+<DiffPrimitive.Content
+  fileIndex={0}
+  showLineNumbers
+  contextLines={3}
+  maxLines={100}
+  renderLine={({ line, index }) => <CustomLine line={line} />}
+  renderFold={({ region, index }) => <CustomFold region={region} />}
+/>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `fileIndex` | `number` | Index of file to display (default: 0) |
+| `showLineNumbers` | `boolean` | Show line numbers (default: true) |
+| `contextLines` | `number` | Number of context lines around changes |
+| `maxLines` | `number` | Maximum lines to display |
+| `renderLine` | `(props: { line; index }) => ReactNode` | Custom line renderer |
+| `renderFold` | `(props: { region; index }) => ReactNode` | Custom fold region renderer |
+
+### Line
+
+Renders an individual diff line with appropriate coloring and indicators.
+
+```tsx
+<DiffPrimitive.Line
+  line={parsedLine}
+  showLineNumbers
+  lineNumberWidth={4}
+/>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `line` | `ParsedLine` | The parsed line object to render |
+| `showLineNumbers` | `boolean` | Show line numbers (default: true) |
+| `lineNumberWidth` | `number` | Width for line number padding (default: 4) |
+
+### Stats
+
+Displays diff statistics (additions and deletions count).
+
+```tsx
+<DiffPrimitive.Stats fileIndex={0} />
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `fileIndex` | `number` | Index of file to display stats for (default: 0) |
+
+### Composing with Primitives
+
+For custom layouts, use the primitives directly:
+
+```tsx
+<DiffPrimitive.Root patch={patchString}>
+  <Box flexDirection="column">
+    <DiffPrimitive.Header />
+    <DiffPrimitive.Stats />
+    <DiffPrimitive.Content
+      showLineNumbers
+      contextLines={2}
+    />
+  </Box>
+</DiffPrimitive.Root>
+```

package/.docs/raw/docs/primitives/action-bar.mdx

@@ -0,0 +1,351 @@
+---
+title: ActionBar
+description: Build message action buttons with auto-hide, copy state, and intelligent disabling.
+---
+
+import { ActionBarPrimitiveSample } from "@/components/docs/samples/action-bar-primitive";
+import { ActionBarPrimitive as ActionBarPrimitiveDocs } from "@/generated/primitiveDocs";
+
+The ActionBar primitive provides message actions: copy, reload, edit, feedback, speech, and export. It handles intelligent visibility with auto-hide on hover, automatic disabling based on message state, and floating behavior. You compose the buttons; the primitive handles action state and availability.
+
+<Tabs items={["Preview", "Code"]}>
+  <Tab>
+    <ActionBarPrimitiveSample />
+  </Tab>
+  <Tab>
+```tsx
+import {
+  ActionBarPrimitive,
+  MessagePrimitive,
+} from "@assistant-ui/react";
+import { CheckIcon, CopyIcon, RefreshCwIcon } from "lucide-react";
+
+function AssistantMessage() {
+  return (
+    <MessagePrimitive.Root className="group flex flex-col items-start gap-1">
+      <div className="max-w-[80%] rounded-2xl bg-muted px-4 py-2.5 text-sm">
+        <MessagePrimitive.Parts />
+      </div>
+      <ActionBarPrimitive.Root
+        hideWhenRunning
+        autohide="not-last"
+        autohideFloat="always"
+        className="flex gap-0.5 data-[floating]:opacity-0 data-[floating]:group-hover:opacity-100 data-[floating]:transition-opacity"
+      >
+        <ActionBarPrimitive.Copy className="group/copy flex size-8 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground">
+          <CopyIcon className="size-4 group-data-[copied]/copy:hidden" />
+          <CheckIcon className="hidden size-4 group-data-[copied]/copy:block" />
+        </ActionBarPrimitive.Copy>
+        <ActionBarPrimitive.Reload className="flex size-8 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground">
+          <RefreshCwIcon className="size-4" />
+        </ActionBarPrimitive.Reload>
+      </ActionBarPrimitive.Root>
+    </MessagePrimitive.Root>
+  );
+}
+```
+  </Tab>
+</Tabs>
+
+## Quick Start
+
+A minimal action bar with copy and reload:
+
+```tsx
+import { ActionBarPrimitive } from "@assistant-ui/react";
+
+<ActionBarPrimitive.Root>
+  <ActionBarPrimitive.Copy>Copy</ActionBarPrimitive.Copy>
+  <ActionBarPrimitive.Reload>Reload</ActionBarPrimitive.Reload>
+</ActionBarPrimitive.Root>
+```
+
+`Root` renders a `<div>`, action buttons render `<button>` elements. Each button auto-disables when its action isn't available (e.g., Copy is disabled when there's no content, Reload is disabled while the model is running).
+
+<Callout type="info">
+ActionBar must be placed inside a `MessagePrimitive.Root` because it reads message state from the nearest message context.
+</Callout>
+
+<Callout type="info">
+Runtime setup: primitives require runtime context. Wrap your UI in `AssistantRuntimeProvider` with a runtime (for example `useLocalRuntime(...)`). See [Pick a Runtime](/docs/runtimes/pick-a-runtime).
+</Callout>
+
+## Core Concepts
+
+### Auto-Hide & Floating
+
+The `autohide` prop controls when the action bar is visible:
+
+- **`"never"`** (default): always visible
+- **`"not-last"`**: hidden on all messages except the last, shown on hover
+- **`"always"`**: hidden on all messages, shown on hover
+
+When `autohideFloat` is set, hidden action bars get the `data-floating` attribute instead of being removed from the DOM. This lets you animate them with CSS:
+
+```tsx
+<ActionBarPrimitive.Root
+  autohide="not-last"
+  autohideFloat="always"
+  className="data-[floating]:opacity-0 data-[floating]:group-hover:opacity-100 data-[floating]:transition-opacity"
+>
+  {/* buttons */}
+</ActionBarPrimitive.Root>
+```
+
+The `"single-branch"` option for `autohideFloat` only floats when the message has a single branch (no alternatives).
+
+### Automatic Disabling
+
+Action buttons automatically disable based on state, with no manual wiring needed:
+
+- **Copy**: disabled when there's no copyable text content or an assistant message is still running
+- **Reload**: disabled when the thread is running or the message role isn't assistant
+- **Edit**: disabled when the message is already being edited
+- **Speak**: disabled when there's no speakable text or an assistant message is still running
+
+### Copy State
+
+After clicking Copy, the button gets a `data-copied` attribute for a configurable duration (default 3 seconds). Use this for visual feedback:
+
+```tsx
+<ActionBarPrimitive.Copy copiedDuration={2000} className="group">
+  <CopyIcon className="group-data-[copied]:hidden" />
+  <CheckIcon className="hidden group-data-[copied]:block" />
+</ActionBarPrimitive.Copy>
+```
+
+### Feedback Buttons
+
+Feedback buttons track submission state with `data-submitted`:
+
+```tsx
+<ActionBarPrimitive.FeedbackPositive className="data-[submitted]:text-green-500">
+  👍
+</ActionBarPrimitive.FeedbackPositive>
+<ActionBarPrimitive.FeedbackNegative className="data-[submitted]:text-red-500">
+  👎
+</ActionBarPrimitive.FeedbackNegative>
+```
+
+## Parts
+
+### Root
+
+Container with auto-hide and floating behavior. Renders a `<div>` element unless `asChild` is set.
+
+```tsx
+<ActionBarPrimitive.Root
+  hideWhenRunning
+  autohide="not-last"
+  autohideFloat="always"
+  className="flex gap-1"
+>
+  <ActionBarPrimitive.Copy>Copy</ActionBarPrimitive.Copy>
+  <ActionBarPrimitive.Reload>Reload</ActionBarPrimitive.Reload>
+</ActionBarPrimitive.Root>
+```
+
+<PrimitivesTypeTable type="ActionBarPrimitiveRootProps" parameters={ActionBarPrimitiveDocs.Root.props.filter(p => p.name !== "asChild")} />
+
+### Copy
+
+Copies message text to clipboard. Renders a `<button>` element unless `asChild` is set.
+
+```tsx
+<ActionBarPrimitive.Copy copiedDuration={2000} className="group">
+  <CopyIcon className="group-data-[copied]:hidden" />
+  <CheckIcon className="hidden group-data-[copied]:block" />
+</ActionBarPrimitive.Copy>
+```
+
+<PrimitivesTypeTable type="ActionBarPrimitiveCopyProps" parameters={ActionBarPrimitiveDocs.Copy.props.filter(p => p.name !== "asChild")} />
+
+### Reload
+
+Reloads or regenerates the current assistant message. Renders a `<button>` element unless `asChild` is set.
+
+```tsx
+<ActionBarPrimitive.Reload className="rounded-md px-2 py-1 text-sm hover:bg-muted">
+  Regenerate
+</ActionBarPrimitive.Reload>
+```
+
+### Edit
+
+Enters edit mode for the current message. Renders a `<button>` element unless `asChild` is set.
+
+```tsx
+<ActionBarPrimitive.Edit className="rounded-md px-2 py-1 text-sm hover:bg-muted">
+  Edit
+</ActionBarPrimitive.Edit>
+```
+
+### Speak
+
+Starts speech playback for the current message. Renders a `<button>` element unless `asChild` is set.
+
+```tsx
+<ActionBarPrimitive.Speak className="rounded-md px-2 py-1 text-sm hover:bg-muted">
+  Play
+</ActionBarPrimitive.Speak>
+```
+
+### StopSpeaking
+
+Stops speech playback for the current message. Renders a `<button>` element unless `asChild` is set.
+
+```tsx
+<ActionBarPrimitive.StopSpeaking className="rounded-md px-2 py-1 text-sm hover:bg-muted">
+  Stop
+</ActionBarPrimitive.StopSpeaking>
+```
+
+### FeedbackPositive
+
+Submits positive feedback for the current message. Renders a `<button>` element unless `asChild` is set.
+
+```tsx
+<ActionBarPrimitive.FeedbackPositive className="rounded-md px-2 py-1 text-sm hover:bg-muted">
+  Helpful
+</ActionBarPrimitive.FeedbackPositive>
+```
+
+### FeedbackNegative
+
+Submits negative feedback for the current message. Renders a `<button>` element unless `asChild` is set.
+
+```tsx
+<ActionBarPrimitive.FeedbackNegative className="rounded-md px-2 py-1 text-sm hover:bg-muted">
+  Not helpful
+</ActionBarPrimitive.FeedbackNegative>
+```
+
+### ExportMarkdown
+
+Downloads message as Markdown or calls custom handler. Renders a `<button>` element unless `asChild` is set.
+
+```tsx
+<ActionBarPrimitive.ExportMarkdown
+  onExport={async (content) => {
+    await navigator.clipboard.writeText(content);
+  }}
+>
+  Export
+</ActionBarPrimitive.ExportMarkdown>
+```
+
+<PrimitivesTypeTable type="ActionBarPrimitiveExportMarkdownProps" parameters={ActionBarPrimitiveDocs.ExportMarkdown.props.filter(p => p.name !== "asChild")} />
+
+## Patterns
+
+### Assistant Action Bar
+
+```tsx
+<ActionBarPrimitive.Root
+  hideWhenRunning
+  autohide="not-last"
+  autohideFloat="single-branch"
+>
+  <ActionBarPrimitive.Copy>Copy</ActionBarPrimitive.Copy>
+  <ActionBarPrimitive.Reload>Regenerate</ActionBarPrimitive.Reload>
+  <ActionBarPrimitive.ExportMarkdown>Export</ActionBarPrimitive.ExportMarkdown>
+</ActionBarPrimitive.Root>
+```
+
+### User Action Bar
+
+```tsx
+<ActionBarPrimitive.Root hideWhenRunning autohide="not-last">
+  <ActionBarPrimitive.Edit>Edit</ActionBarPrimitive.Edit>
+</ActionBarPrimitive.Root>
+```
+
+### Speech Toggle
+
+```tsx
+<AuiIf condition={(s) => !s.message.isSpeaking}>
+  <ActionBarPrimitive.Speak>Play</ActionBarPrimitive.Speak>
+</AuiIf>
+<AuiIf condition={(s) => s.message.isSpeaking}>
+  <ActionBarPrimitive.StopSpeaking>Stop</ActionBarPrimitive.StopSpeaking>
+</AuiIf>
+```
+
+<Callout type="info">
+Speech requires a `SpeechSynthesisAdapter` configured in your runtime. See [Speech & Dictation](/docs/guides/speech) for setup.
+</Callout>
+
+### Export with Custom Handler
+
+```tsx
+<ActionBarPrimitive.ExportMarkdown
+  onExport={async (content) => {
+    await navigator.clipboard.writeText(content);
+    toast("Copied as Markdown!");
+  }}
+>
+  Copy Markdown
+</ActionBarPrimitive.ExportMarkdown>
+```
+
+## Overflow Menu (ActionBarMorePrimitive)
+
+`ActionBarMorePrimitive` is a Radix DropdownMenu for overflow actions, using the same pattern as `ThreadListItemMorePrimitive`. Use it to group secondary actions behind a "more" button.
+
+`ActionBarMorePrimitive.Item` maps to Radix `DropdownMenu.Item`, so it preserves menu keyboard/focus semantics. Prefer `asChild` when composing an `ActionBarPrimitive` button into a menu item.
+
+`ActionBarMorePrimitive.Content` defaults to `sideOffset={4}` so the menu has a small gap from the trigger.
+
+| Part | Element | Purpose |
+|------|---------|---------|
+| `Root` | N/A | Radix DropdownMenu provider |
+| `Trigger` | `<button>` | Opens the dropdown |
+| `Content` | `<div>` (portal) | The dropdown panel |
+| `Item` | `<div>` | A menu item |
+| `Separator` | `<div>` | Visual separator between items |
+
+```tsx
+import {
+  ActionBarPrimitive,
+  ActionBarMorePrimitive,
+} from "@assistant-ui/react";
+import { MoreHorizontalIcon } from "lucide-react";
+
+<ActionBarPrimitive.Root>
+  <ActionBarPrimitive.Copy>Copy</ActionBarPrimitive.Copy>
+  <ActionBarPrimitive.Reload>Regenerate</ActionBarPrimitive.Reload>
+  <ActionBarMorePrimitive.Root>
+    <ActionBarMorePrimitive.Trigger className="flex size-8 items-center justify-center rounded-lg hover:bg-muted">
+      <MoreHorizontalIcon className="size-4" />
+    </ActionBarMorePrimitive.Trigger>
+    <ActionBarMorePrimitive.Content side="bottom" align="end">
+      <ActionBarMorePrimitive.Item asChild>
+        <ActionBarPrimitive.ExportMarkdown>
+          Export Markdown
+        </ActionBarPrimitive.ExportMarkdown>
+      </ActionBarMorePrimitive.Item>
+      <ActionBarMorePrimitive.Separator />
+      <ActionBarMorePrimitive.Item asChild>
+        <ActionBarPrimitive.FeedbackPositive>
+          Helpful
+        </ActionBarPrimitive.FeedbackPositive>
+      </ActionBarMorePrimitive.Item>
+    </ActionBarMorePrimitive.Content>
+  </ActionBarMorePrimitive.Root>
+</ActionBarPrimitive.Root>
+```
+
+See the [ActionBarMorePrimitive API Reference](/docs/api-reference/primitives/action-bar-more) for full prop details.
+
+## Relationship to Components
+
+The shadcn [Thread](/docs/ui/thread) component uses `ActionBarPrimitive` inside its `AssistantMessage` (with Copy, Reload, and an export dropdown) and `UserMessage` (with Edit). If those defaults work, use the component. Reach for `ActionBarPrimitive` directly when you need different actions, custom layout, or actions outside the standard thread UI.
+
+ActionBar is commonly paired with [BranchPicker](/docs/primitives/branch-picker) for navigating between alternative responses on assistant messages.
+
+## API Reference
+
+For full prop details on every part, see the [ActionBarPrimitive API Reference](/docs/api-reference/primitives/action-bar).
+
+Related:
+- [ActionBarMorePrimitive API Reference](/docs/api-reference/primitives/action-bar-more)