## Overview [#overview] `Task` displays agent work as a small collapsible block. Consumers own the task list and status updates. ## Usage [#usage] ```tsx import { Task, TaskContent, TaskItem, TaskItemFile, TaskTrigger, } from "@tilt-legal/cubitt-components/chat-elements"; ``` ## Examples [#examples] ### Default [#default] ```tsx Checked lease-summary.pdf for terms. ``` ### Running [#running] Use `Shimmer` in the trigger when the consumer knows work is still active. ```tsx Searching matter sources} /> Reading lease-summary.pdf for terms. ``` ## API Reference [#api-reference] ### Task [#task] 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 [#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 [#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 [#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 [#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. |