ChatPanel

ChatPanel supplies the growing flex-column body shared by inline and floating conversations.

01Preview

Collection guide

Assistant

ChatPanel arranges the conversation in a growing column.

02Usage

Load @dg/ui/styles.css once in the root layout.

<script>
  import { ChatPanel, ChatThread, ChatMessage } from "@dg/ui";
</script>

<div class="conversation">
  <ChatPanel><ChatThread><ChatMessage text="Welcome." /></ChatThread></ChatPanel>
</div>

<style>
  /* A bounded inline viewport lets the thread scroll within the page. */
  .conversation {
    display: flex;
    flex-direction: column;
    height: 32rem;
  }
</style>

03Notes

Native HTML attributes, DOM callbacks, class and style are forwarded to the panel element.
Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.

04Parameters

Name	Type	Default	Description
`children`	`Snippet`	`undefined`	Flex-column body, usually `ChatThread` and `ChatComposer`. An inline parent must provide a height.

05Accessibility

The panel is a layout div. Compose ChatThread for a named scrolling region and ChatComposer for a labeled input. The inline parent must supply a bounded height.

Related subjects

Markdown source: components/chat-panel