Chat — Atelier

Demo

Live PreviewReact

Interactive demo coming soon. See the code example above.

html

<atl-chat variant="drawer" [(open)]="open" status="idle">
  <atl-chat-header>
    <atl-avatar size="sm" name="AI" />
    <span>AI Assistant</span>
    <atl-badge variant="success" size="sm">Online</atl-badge>
  </atl-chat-header>
  <atl-chat-messages>
    <atl-chat-message role="assistant">Hi! How can I help today?</atl-chat-message>
    <atl-chat-message role="user">Show me a sorting function.</atl-chat-message>
    <atl-chat-message role="assistant">
      <atl-code-block language="ts" [code]="snippet" />
    </atl-chat-message>
  </atl-chat-messages>
  <atl-chat-input (send)="onSend($event)" (stop)="onStop()" />
</atl-chat>

API (Angular)

Prop	Type	Default	Description
`variant`	`'drawer' \| 'popup' \| 'inline'`	`'drawer'`	Layout — slide-in drawer, floating bubble + popup window, or embedded inline card.
`status`	`'idle' \| 'streaming' \| 'error'`	`'idle'`	Connection / response status. Drives the input footer button (Send → Stop) and disables the textarea while streaming.
`open`	`boolean`	`false`	Whether the chat is open. Only used by drawer and popup variants. Two-way bindable.
`onOpenChange`	`(open: boolean) => void`	`—`	React: emitted when the open state should change. Vue uses v-model:open; Angular uses [(open)].

Composition parts

Chat is composed from the parts below. Each part is its own component — drop the ones you don't need.

`AtlChatHeader`

Title block (avatar / name / status badge) plus the close button. Slot-only. The close button is auto-hidden on the inline variant.

`AtlChatMessages`

Scrollable message list. Project AtlChatMessage, AtlChatTyping, and AtlChatSuggestion children inside.

`AtlChatMessage`

A single message bubble. Role drives alignment (user → right, primary fill; assistant/system → left, surface-sunken). Use failed for the error-state dashed border.

Prop	Type	Default	Description
`role`	`'user' \| 'assistant' \| 'system'`	`'assistant'`	Sender of the message — drives bubble color and alignment.
`failed`	`boolean`	`false`	Marks the message as failed (red dashed border).

`AtlChatTyping`

Three animated dots. Render at the end of the message list while the assistant is streaming. Respects prefers-reduced-motion.

`AtlChatSuggestion`

Tappable starter chip used in the empty state. Emits selected (Angular/Vue) or onSelected (React) with the label.

Prop	Type	Default	Description
`label`	`string`	`— (required)`	Primary text of the chip.
`hint`	`string`	`—`	Optional secondary text shown below the label.

`AtlChatInput`

Composable input footer. Wraps a textarea and renders a primary "Send" button — automatically swapped for a danger "Stop" button while the parent chat's status is "streaming".

Prop	Type	Default	Description
`placeholder`	`string`	`status-aware`	Defaults to "Message your AI assistant…", "Waiting for response…" while streaming, or "Try again…" on error.
`value`	`string`	`—`	Optional controlled value. Omit for uncontrolled internal state.
`onSend`	`(text: string) => void`	`—`	Fires on Enter (without Shift) or Send-button click.
`onStop`	`() => void`	`—`	Fires when the Stop button is clicked while streaming.

Accessibility

ARIA roledialog (drawer/popup), region (inline)

Key	Action
`Escape`	Close drawer or popup variant. Inline variant ignores Escape.
`Tab / Shift+Tab`	Cycle focus inside the drawer (focus is trapped via CDK A11y / focus-trap equivalents).
`Enter (in input)`	Send the message.
`Shift+Enter (in input)`	Insert a newline without sending.

Explore in Storybook

Edit this page on GitHub