Task

Overview

Task displays agent work as a small collapsible block. Consumers own the task list and status updates.

Usage

import {
  Task,
  TaskContent,
  TaskItem,
  TaskItemFile,
  TaskTrigger,
} from "@tilt-legal/cubitt-components/chat-elements";

Examples

Default

<Task>
  <TaskTrigger title="Searching matter sources" />
  <TaskContent>
    <TaskItem>
      Checked <TaskItemFile>lease-summary.pdf</TaskItemFile> for terms.
    </TaskItem>
  </TaskContent>
</Task>

Running

Use Shimmer in the trigger when the consumer knows work is still active.

<Task>
  <TaskTrigger title={<Shimmer as="span">Searching matter sources</Shimmer>} />
  <TaskContent>
    <TaskItem>
      Reading <TaskItemFile>lease-summary.pdf</TaskItemFile> for terms.
    </TaskItem>
  </TaskContent>
</Task>

API Reference

Root collapsible container for a task block. Extends Collapsible props.

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`true`	Initial open state when uncontrolled.
`open`	`boolean`	-	Controlled open state inherited from Collapsible.
`onOpenChange`	`(open: boolean) => void`	-	Callback fired when the collapsible state changes.
`className`	`string`	-	Additional CSS classes for the root collapsible.

TaskTrigger

Clickable trigger for the task block. Extends CollapsibleTrigger props, except the native title attribute is replaced with task title content.

Prop	Type	Default	Description
`title`	`React.ReactNode`	-	Task title shown beside the default magnifier icon. Required.
`children`	`React.ReactNode`	-	Custom trigger content. Replaces the default icon/title/chevron.
`className`	`string`	-	Additional CSS classes for the trigger.

TaskContent

Collapsible panel for task details. Extends CollapsiblePanel props.

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Task item content rendered in the panel.
`className`	`string`	-	Additional CSS classes for the panel.

TaskItem

Task detail row. Extends all HTML div props.

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Detail row content.
`className`	`string`	-	Additional CSS classes for the item.

TaskItemFile

Inline file pill used inside task details. Extends all HTML div props.

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	File label or custom file content.
`className`	`string`	-	Additional CSS classes for the file pill.

Task
Preview