# Conversation

> Scrollable message log that sticks to the bottom while new content streams in.

Source: https://ui.jcsoftdev.com/docs/components/conversation

Scrollable message log that sticks to the bottom while new content streams in. Scrolling up
pauses the follow behavior and reveals a "jump to latest" button. Fills its parent's height.

## Import

```ts
import { Conversation } from "@jcsoftdev/ui/ai";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/ai/conversation`.

## Usage

```tsx
export const Default: Story = {
  render: (args) => (
    <Conversation {...args}>
      <History count={10} />
    </Conversation>
  ),
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | `"Conversación"` | Accessible name of the message log. |
| `jumpLabel` | `string` | `"Ir al último mensaje"` | Label of the "jump to latest" button. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/ai-conversation--default)
- [Growing History](/storybook/?path=/story/ai-conversation--growing-history)
- [Narrow](/storybook/?path=/story/ai-conversation--narrow)
- [Preset Brutal](/storybook/?path=/story/ai-conversation--preset-brutal)

## Source

`packages/ui/src/ai/conversation/conversation.tsx`