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

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

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

Usage

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
• Growing History
• Narrow
• Preset Brutal

Source

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