ThreadListItemMorePrimitive

Dropdown menu for additional thread actions like archive and delete.

A dropdown menu for displaying additional actions on a thread list item. Built on top of Radix UI Dropdown Menu.

Anatomy

import {
  ThreadListItemPrimitive,
  ThreadListItemMorePrimitive
} from "@assistant-ui/react";

const ThreadListItemMore = () => (
  <ThreadListItemMorePrimitive.Root>
    <ThreadListItemMorePrimitive.Trigger>
      More options
    </ThreadListItemMorePrimitive.Trigger>
    <ThreadListItemMorePrimitive.Content>
      <ThreadListItemPrimitive.Archive asChild>
        <ThreadListItemMorePrimitive.Item>
          Archive
        </ThreadListItemMorePrimitive.Item>
      </ThreadListItemPrimitive.Archive>
      <ThreadListItemMorePrimitive.Separator />
      <ThreadListItemPrimitive.Delete asChild>
        <ThreadListItemMorePrimitive.Item>
          Delete
        </ThreadListItemMorePrimitive.Item>
      </ThreadListItemPrimitive.Delete>
    </ThreadListItemMorePrimitive.Content>
  </ThreadListItemMorePrimitive.Root>
);

API Reference

Root

Contains all parts of the dropdown menu. Wraps Radix UI's DropdownMenu.Root.

ThreadListItemMorePrimitiveRootProps

open?:

boolean

The controlled open state of the dropdown menu.

defaultOpen?:

boolean

The open state of the dropdown menu when it is initially rendered.

onOpenChange?:

(open: boolean) => void

Event handler called when the open state changes.

modal:

boolean = true

Whether the dropdown menu should be modal.

Trigger

The button that toggles the dropdown menu. Wraps Radix UI's DropdownMenu.Trigger.

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

ThreadListItemMorePrimitiveTriggerProps

asChild:

boolean = 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.

Content

The container for the dropdown menu items. Wraps Radix UI's DropdownMenu.Portal and DropdownMenu.Content.

ThreadListItemMorePrimitiveContentProps

side:

"top" | "right" | "bottom" | "left" = "bottom"

The preferred side of the trigger to render against.

sideOffset:

number = 4

The distance in pixels from the trigger.

align:

"start" | "center" | "end" = "center"

The preferred alignment against the trigger.

alignOffset:

number = 0

An offset in pixels from the align option.

portalProps?:

PortalProps

Props to pass to the Portal component.

Item

A menu item within the dropdown. Wraps Radix UI's DropdownMenu.Item.

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

ThreadListItemMorePrimitiveItemProps

asChild:

boolean = 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.

disabled?:

boolean

Whether the item is disabled.

onSelect?:

(event: Event) => void

Event handler called when the user selects an item.

Separator

A visual separator between menu items. Wraps Radix UI's DropdownMenu.Separator.

ThreadListItemMorePrimitiveSeparatorProps

asChild:

boolean = 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.

Examples

With Icons

import { ArchiveIcon, TrashIcon, MoreHorizontalIcon } from "lucide-react";

const ThreadListItemMore = () => (
  <ThreadListItemMorePrimitive.Root>
    <ThreadListItemMorePrimitive.Trigger asChild>
      <button className="icon-button">
        <MoreHorizontalIcon />
      </button>
    </ThreadListItemMorePrimitive.Trigger>
    <ThreadListItemMorePrimitive.Content
      side="bottom"
      align="start"
      className="dropdown-content"
    >
      <ThreadListItemPrimitive.Archive asChild>
        <ThreadListItemMorePrimitive.Item className="dropdown-item">
          <ArchiveIcon className="icon" />
          Archive
        </ThreadListItemMorePrimitive.Item>
      </ThreadListItemPrimitive.Archive>
    </ThreadListItemMorePrimitive.Content>
  </ThreadListItemMorePrimitive.Root>
);

const ThreadListItem = () => (
  <ThreadListItemPrimitive.Root className="thread-item">
    <ThreadListItemPrimitive.Trigger className="thread-trigger">
      <ThreadListItemPrimitive.Title fallback="New Chat" />
    </ThreadListItemPrimitive.Trigger>

    <ThreadListItemMorePrimitive.Root>
      <ThreadListItemMorePrimitive.Trigger asChild>
        <button className="more-button">
          <MoreHorizontalIcon />
        </button>
      </ThreadListItemMorePrimitive.Trigger>
      <ThreadListItemMorePrimitive.Content>
        <ThreadListItemPrimitive.Archive asChild>
          <ThreadListItemMorePrimitive.Item>
            <ArchiveIcon />
            Archive
          </ThreadListItemMorePrimitive.Item>
        </ThreadListItemPrimitive.Archive>
      </ThreadListItemMorePrimitive.Content>
    </ThreadListItemMorePrimitive.Root>
  </ThreadListItemPrimitive.Root>
);