

<Preview name="TaskDefaultExample" />

## 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]

<Tabs items="['Preview', 'Code']">
  <Tab value="Preview">
    <Preview name="TaskDefaultExample" />
  </Tab>

  <Tab value="Code">
    ```tsx
    <Task>
      <TaskTrigger title="Searching matter sources" />
      <TaskContent>
        <TaskItem>
          Checked <TaskItemFile>lease-summary.pdf</TaskItemFile> for terms.
        </TaskItem>
      </TaskContent>
    </Task>
    ```
  </Tab>
</Tabs>

### Running [#running]

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

<Tabs items="['Preview', 'Code']">
  <Tab value="Preview">
    <Preview name="TaskRunningExample" />
  </Tab>

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