Messagestandard

대화 한 건(message)의 틀입니다. 아바타·머리글·본문·바닥글을 놓고 좌우 정렬을 정합니다. shadcn base-nova 의 `message` 를 그대로 싣습니다. 스크롤과 새 메시지 따라가기는 `message-scroller`, 말풍선은 `bubble` 을 함께 씁니다.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/message

대화 한 건(message)의 틀입니다. 아바타·머리글·본문·바닥글을 놓고 좌우 정렬을 정합니다. shadcn base-nova 의 message 를 그대로 싣습니다. 스크롤과 새 메시지 따라가기는 message-scroller, 말풍선은 bubble 을 함께 씁니다.

설치

pnpm dlx shadcn@4.23.0 add @uikit/message

사용

tsx

import {  Message,  MessageAvatar,  MessageContent,  MessageFooter,  MessageGroup,  MessageHeader,} from "@/components/ui/message";
export function Thread() {  return (    <MessageGroup>      <Message>        <MessageAvatar>N</MessageAvatar>        <MessageContent>          <MessageHeader>Nine</MessageHeader>          <p>Is the room ready?</p>          <MessageFooter>10:30</MessageFooter>        </MessageContent>      </Message>      <Message align="end">        <MessageContent>          <p>Yes, check-in is open.</p>        </MessageContent>      </Message>    </MessageGroup>  );}

속성

이 아이템은 upstream 문서에 링크가 없습니다. 모든 부품은 div 속성과 className 을 받습니다.

부품	`data-slot`	덧붙인 속성
`MessageGroup`	`message-group`
`Message`	`message`	`align`(`"start" \| "end"`, 기본 `"start"`)
`MessageAvatar`	`message-avatar`
`MessageContent`	`message-content`
`MessageHeader`	`message-header`
`MessageFooter`	`message-footer`

기본으로 지키는 것

Message 는 data-align 을 남기고, end 이면 아바타·본문 순서를 뒤집는 클래스(data-[align=end]:flex-row-reverse)를 입힙니다. 알 수 없는 align 은 속성만 남기고 던지지 않습니다.
MessageFooter 가 있으면 MessageAvatar 가 위로 올라가도록 Message 안의 has 선택자가 맞춥니다.
자식이 없는 부품과 한글·이모지·오른쪽에서 왼쪽 글자, 매우 긴 글자도 던지지 않고 그립니다.

접근성

키보드 조작은 없는 틀입니다. 대화 목록의 역할(role="log")과 스크롤 영역 이름은 message-scroller 가 줍니다.

의존

npm: cn. 다른 아이템: 없음.