@assistant-ui/mcp-docs-server 0.2.3 → 0.3.0

package/.docs/raw/docs/ui/thread-list.mdx

@@ -1,411 +0,0 @@
----
-title: Thread List Component
-description: Sidebar or dropdown component for switching between AI chat conversations. Persistent thread state, search, and active selection — built for assistant-ui apps.
-platforms: ["react"]
----
-
-import { ThreadListSample } from "@/components/pages/docs/samples/threadlist";
-import { PreviewCode } from "@/components/pages/docs/preview-code.server";
-import { ThreadListSidebarSample } from "@/components/pages/docs/samples/thread-list/sidebar-composition";
-import { ThreadListActiveSample } from "@/components/pages/docs/samples/thread-list/active-threads";
-import { ThreadListNewSample } from "@/components/pages/docs/samples/thread-list/new-thread";
-import { ThreadListArchiveSample } from "@/components/pages/docs/samples/thread-list/archive-thread";
-
-<ThreadListSample />
-
-<Callout>
-This demo uses `ThreadListSidebar`, which includes `thread-list` as a dependency and provides a complete sidebar layout. For custom implementations, you can use `thread-list` directly.
-</Callout>
-
-## Getting Started
-
-<Steps>
-  <Step>
-
-### Add the component
-
-Use `threadlist-sidebar` for a complete sidebar layout or `thread-list` for custom layouts.
-
-#### ThreadListSidebar
-
-<InstallCommand shadcn={["threadlist-sidebar"]} />
-
-#### ThreadList
-
-<InstallCommand shadcn={["thread-list"]} />
-
-  </Step>
-  <Step>
-
-### Use in your application
-
-<Tabs items={["With Sidebar", "Without Sidebar"]}>
-  <Tab value="With Sidebar">
-    ```tsx title="/app/assistant.tsx"
-    import { Thread } from "@/components/assistant-ui/thread";
-    import { ThreadListSidebar } from "@/components/assistant-ui/threadlist-sidebar";
-    import {
-      SidebarProvider,
-      SidebarInset,
-      SidebarTrigger
-    } from "@/components/ui/sidebar";
-
-    export default function Assistant() {
-      return (
-        <SidebarProvider>
-          <div className="flex h-dvh w-full">
-            <ThreadListSidebar />
-            <SidebarInset>
-              {/* Add sidebar trigger, location can be customized */}
-              <SidebarTrigger className="absolute top-4 left-4" />
-              <Thread />
-            </SidebarInset>
-          </div>
-        </SidebarProvider>
-      );
-    }
-    ```
-  </Tab>
-  <Tab value="Without Sidebar">
-    ```tsx title="/app/assistant.tsx"
-    import { Thread } from "@/components/assistant-ui/thread";
-    import { ThreadList } from "@/components/assistant-ui/thread-list";
-
-    export default function Assistant() {
-      return (
-        <div className="grid h-full grid-cols-[200px_1fr]">
-          <ThreadList />
-          <Thread />
-        </div>
-      );
-    }
-    ```
-  </Tab>
-</Tabs>
-
-  </Step>
-</Steps>
-
-## Anatomy
-
-The `ThreadList` component is built with the following primitives:
-
-```tsx
-import { ThreadListPrimitive, ThreadListItemPrimitive } from "@assistant-ui/react";
-
-<ThreadListPrimitive.Root>
-  <ThreadListPrimitive.New />
-  <ThreadListPrimitive.Items>
-    {() => (
-      <ThreadListItemPrimitive.Root>
-        <ThreadListItemPrimitive.Trigger>
-          <ThreadListItemPrimitive.Title />
-        </ThreadListItemPrimitive.Trigger>
-        <ThreadListItemPrimitive.Archive />
-        <ThreadListItemPrimitive.Delete />
-      </ThreadListItemPrimitive.Root>
-    )}
-  </ThreadListPrimitive.Items>
-</ThreadListPrimitive.Root>
-```
-
-## Examples
-
-### Active Threads
-
-Select a different seeded conversation, or use the search field to filter the threads by title.
-
-<PreviewCode file="components/pages/docs/samples/thread-list/active-threads" name="ActiveThreadList">
-  <ThreadListActiveSample />
-</PreviewCode>
-
-### New Thread
-
-The list starts empty, thus only the New Thread button shows. Click New Thread to make an active thread. The search field shows when a thread exists.
-
-<PreviewCode file="components/pages/docs/samples/thread-list/new-thread" name="EmptyThreadList">
-  <ThreadListNewSample />
-</PreviewCode>
-
-### Sidebar Composition
-
-`ThreadListSidebar` wraps the same `ThreadList` in a complete sidebar shell.
-
-<PreviewCode file="components/pages/docs/samples/thread-list/sidebar-composition" name="ThreadListSidebarDemo" className="p-0">
-  <ThreadListSidebarSample />
-</PreviewCode>
-
-### Archive a Thread
-
-Open the More menu of the active thread, then select Archive. The `onArchive` callback moves the thread to the archived list. Select Restore (`ThreadListItemPrimitive.Unarchive`) to move the thread back to the regular list.
-
-<PreviewCode file="components/pages/docs/samples/thread-list/archive-thread" name="ArchivableThreadList">
-  <ThreadListArchiveSample />
-</PreviewCode>
-
-## API Reference
-
-### ThreadListPrimitive.Root
-
-Container for the thread list.
-
-<ParametersTable
-  type="ThreadListPrimitiveRootProps"
-  parameters={[
-    {
-      name: "asChild",
-      type: "boolean",
-      default: "false",
-      description: "Merge props with child element instead of rendering a wrapper div.",
-    },
-  ]}
-/>
-
-### ThreadListPrimitive.Items
-
-Renders all threads in the list.
-
-<ParametersTable
-  type="ThreadListPrimitiveItemsProps"
-  parameters={[
-    {
-      name: "archived",
-      type: "boolean",
-      description: "When true, renders archived threads instead of active threads.",
-    },
-    {
-      name: "components",
-      type: "object",
-      required: true,
-      description: "Component configuration.",
-      children: [
-        {
-          type: "Components",
-          parameters: [
-            {
-              name: "ThreadListItem",
-              type: "ComponentType",
-              required: true,
-              description: "Component to render for each thread item.",
-            },
-          ],
-        },
-      ],
-    },
-  ]}
-/>
-
-### ThreadListPrimitive.New
-
-A button to create a new thread.
-
-<ParametersTable
-  type="ThreadListPrimitiveNewProps"
-  parameters={[
-    {
-      name: "asChild",
-      type: "boolean",
-      default: "false",
-      description: "Merge props with child element instead of rendering a wrapper button.",
-    },
-  ]}
-/>
-
-### ThreadListPrimitive.LoadMore
-
-A button that appends the next page of threads. See the [LoadMore primitive reference](/docs/primitives/thread-list#loadmore) for usage and [Threads concepts](/docs/runtimes/concepts/threads#paginating-the-thread-list) for the adapter contract.
-
-<ParametersTable
-  type="ThreadListPrimitiveLoadMoreProps"
-  parameters={[
-    {
-      name: "asChild",
-      type: "boolean",
-      default: "false",
-      description: "Merge props with child element instead of rendering a wrapper button.",
-    },
-  ]}
-/>
-
-### ThreadListItemPrimitive.Root
-
-Container for a single thread item. Automatically sets `data-active` and `aria-current` when this is the current thread.
-
-<ParametersTable
-  type="ThreadListItemPrimitiveRootProps"
-  parameters={[
-    {
-      name: "asChild",
-      type: "boolean",
-      default: "false",
-      description: "Merge props with child element instead of rendering a wrapper div.",
-    },
-  ]}
-/>
-
-### ThreadListItemPrimitive.Trigger
-
-A button that switches to this thread when clicked.
-
-<ParametersTable
-  type="ThreadListItemPrimitiveTriggerProps"
-  parameters={[
-    {
-      name: "asChild",
-      type: "boolean",
-      default: "false",
-      description: "Merge props with child element instead of rendering a wrapper button.",
-    },
-  ]}
-/>
-
-### ThreadListItemPrimitive.Title
-
-Renders the thread's title.
-
-<ParametersTable
-  type="ThreadListItemPrimitiveTitleProps"
-  parameters={[
-    {
-      name: "fallback",
-      type: "ReactNode",
-      description: "Content to display when the thread has no title.",
-    },
-  ]}
-/>
-
-### ThreadListItemPrimitive.Archive
-
-A button to archive the thread.
-
-<ParametersTable
-  type="ThreadListItemPrimitiveArchiveProps"
-  parameters={[
-    {
-      name: "asChild",
-      type: "boolean",
-      default: "false",
-      description: "Merge props with child element instead of rendering a wrapper button.",
-    },
-  ]}
-/>
-
-### ThreadListItemPrimitive.Unarchive
-
-A button to restore an archived thread.
-
-<ParametersTable
-  type="ThreadListItemPrimitiveUnarchiveProps"
-  parameters={[
-    {
-      name: "asChild",
-      type: "boolean",
-      default: "false",
-      description: "Merge props with child element instead of rendering a wrapper button.",
-    },
-  ]}
-/>
-
-### ThreadListItemPrimitive.Delete
-
-A button to permanently delete the thread.
-
-<ParametersTable
-  type="ThreadListItemPrimitiveDeleteProps"
-  parameters={[
-    {
-      name: "asChild",
-      type: "boolean",
-      default: "false",
-      description: "Merge props with child element instead of rendering a wrapper button.",
-    },
-  ]}
-/>
-
-### ThreadListItemMorePrimitive
-
-A dropdown menu for additional thread actions, built on Radix UI DropdownMenu.
-
-#### ThreadListItemMorePrimitive.Root
-
-Menu container that manages dropdown state.
-
-<ParametersTable
-  type="ThreadListItemMorePrimitiveRootProps"
-  parameters={[
-    {
-      name: "asChild",
-      type: "boolean",
-      default: "false",
-      description: "Merge props with child element instead of rendering a wrapper div.",
-    },
-  ]}
-/>
-
-#### ThreadListItemMorePrimitive.Trigger
-
-Button to open the menu.
-
-<ParametersTable
-  type="ThreadListItemMorePrimitiveTriggerProps"
-  parameters={[
-    {
-      name: "asChild",
-      type: "boolean",
-      default: "false",
-      description: "Merge props with child element instead of rendering a wrapper button.",
-    },
-  ]}
-/>
-
-#### ThreadListItemMorePrimitive.Content
-
-Menu content container.
-
-<ParametersTable
-  type="ThreadListItemMorePrimitiveContentProps"
-  parameters={[
-    {
-      name: "asChild",
-      type: "boolean",
-      default: "false",
-      description: "Merge props with child element instead of rendering a wrapper div.",
-    },
-  ]}
-/>
-
-#### ThreadListItemMorePrimitive.Item
-
-Individual menu item.
-
-<ParametersTable
-  type="ThreadListItemMorePrimitiveItemProps"
-  parameters={[
-    {
-      name: "asChild",
-      type: "boolean",
-      default: "false",
-      description: "Merge props with child element instead of rendering a wrapper div.",
-    },
-  ]}
-/>
-
-#### ThreadListItemMorePrimitive.Separator
-
-Visual separator between items.
-
-<ParametersTable
-  type="ThreadListItemMorePrimitiveSeparatorProps"
-  parameters={[
-    {
-      name: "asChild",
-      type: "boolean",
-      default: "false",
-      description: "Merge props with child element instead of rendering a wrapper div.",
-    },
-  ]}
-/>
-
-## Related Components
-
-- [Thread](/docs/ui/thread) - The main chat interface displayed alongside the list