ThreadListPrimitive

Thread list primitives for rendering conversation navigation, new thread actions, and custom assistant sidebars.

For examples and usage patterns, see ThreadList.

Anatomy

import { ThreadListPrimitive } from "@assistant-ui/react";

const ThreadList = () => (
  <ThreadListPrimitive.Root>
    <ThreadListPrimitive.New />
    <ThreadListPrimitive.Items>
      {() => <MyThreadListItem />}
    </ThreadListPrimitive.Items>
  </ThreadListPrimitive.Root>
);

API Reference

Root

This primitive renders a <div> element unless asChild is set.

ThreadListPrimitiveRootProps
asChildboolean= false

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

render?ReactElement | undefined

New

This primitive renders a <button> element unless asChild is set.

ThreadListPrimitiveNewProps
asChildboolean= false

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

render?ReactElement | undefined

Data attributeValues
[data-active]Present when the new-thread button represents the current fresh thread.

Items

ThreadListPrimitiveItemsProps
archived?boolean | undefined

components?ThreadListItemsComponentConfigdeprecated

Deprecated: Use the children render function instead.

ThreadListItemsComponentConfig
ThreadListItemComponentType

children?(value: { threadListItem: ThreadListItemState }) => ReactNode

Render function called for each thread list item. Receives the item.

ItemByIndex

Renders a single thread list item at the specified index.
ThreadListPrimitiveItemByIndexProps
indexnumber

archived?boolean | undefined

componentsThreadListItemsComponentConfig

ThreadListItemsComponentConfig
ThreadListItemComponentType

LoadMore

This primitive renders a <button> element unless asChild is set.

ThreadListPrimitiveLoadMoreProps
asChildboolean= false

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

render?ReactElement | undefined