Chat#

Chat / ChatGroup / ChatBubble 은 Flutter / Web 양쪽에서 동일한 API 로 채팅 인터페이스를 구성합니다.

Live Preview#

class ChatDefaultExample extends StatelessComponent {
  const ChatDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return div(
      const [
        Chat(
          header: Component.text('Support'),
          bubble: ChatBubble(
            child: Component.text('Hello! How can I help?'),
          ),
          footer: Component.text('10:00 AM'),
        ),
        Gap.space12(),
        Chat(
          alignment: CoreChatAlignment.end,
          bubble: ChatBubble(
            alignment: CoreChatAlignment.end,
            variant: CoreChatBubbleVariant.primary,
            child: Component.text('I have a question.'),
          ),
          footer: Component.text('10:01 AM'),
        ),
      ],
      classes: 'flex flex-col w-full',
    );
  }
}

class ChatDefaultExample extends StatelessWidget {
  const ChatDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: const [
        Chat(
          header: Text('Support'),
          bubble: ChatBubble(
            child: Text('Hello! How can I help?'),
          ),
          footer: Text('10:00 AM'),
        ),
        Gap.space12(),
        Chat(
          alignment: CoreChatAlignment.end,
          bubble: ChatBubble(
            alignment: CoreChatAlignment.end,
            variant: CoreChatBubbleVariant.primary,
            child: Text('I have a question.'),
          ),
          footer: Text('10:01 AM'),
        ),
      ],
    );
  }
}

컴포넌트 구성#

• Chat — 한 번의 메시지 한 줄. 슬롯: avatar / header / bubble / footer.
• ChatGroup — 같은 발신자의 메시지 묶음. 슬롯: avatar / header / bubbles[] / footer.
• ChatBubble — 말풍선 컨테이너. 슬롯: child. variant (8 종) 와 tail boolean 으로 색상 / 꼬리 제어.

기본 사용법 (Basic Usage)#

Chat(
  header: Text('Support'),
  bubble: ChatBubble(child: Text('Hello! How can I help?')),
  footer: Text('10:00 AM'),
)

Chat(
  alignment: CoreChatAlignment.end,
  bubble: ChatBubble(
    alignment: CoreChatAlignment.end,
    variant: CoreChatBubbleVariant.primary,
    child: Text('I have a question.'),
  ),
  footer: Text('10:01 AM'),
)

Chat(
  header: Component.text('Support'),
  bubble: ChatBubble(
    child: Component.text('Hello! How can I help?'),
  ),
  footer: Component.text('10:00 AM'),
)

Chat(
  alignment: CoreChatAlignment.end,
  bubble: ChatBubble(
    alignment: CoreChatAlignment.end,
    variant: CoreChatBubbleVariant.primary,
    child: Component.text('I have a question.'),
  ),
  footer: Component.text('10:01 AM'),
)

Props#

Chat#

ChatBubble#

ChatGroup#

디자인 토큰#

관련 컴포넌트#

• Avatar — 메시지 발신자 표시.
• Loading — AI 응답 대기 인디케이터.
• TextField — 입력 영역.