Message scrollerstandard

대화 목록을 스크롤하는 영역(message scroller)입니다. 새 메시지에 맞춰 아래로 따라가고, 이전 메시지를 앞에 붙여도 위치를 지킵니다. shadcn base-nova 의 `message-scroller` 는 `@shadcn/react` 의 `MessageScroller` 를 감쌉니다.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/message-scroller

의존 아이템button

대화 목록을 스크롤하는 영역(message scroller)입니다. 새 메시지에 맞춰 아래로 따라가고, 이전 메시지를 앞에 붙여도 위치를 지킵니다. shadcn base-nova 의 message-scroller 는 @shadcn/react 의 MessageScroller 를 감쌉니다.

설치

pnpm dlx shadcn@4.23.0 add @uikit/message-scroller

사용

tsx

import {  MessageScroller,  MessageScrollerButton,  MessageScrollerContent,  MessageScrollerItem,  MessageScrollerProvider,  MessageScrollerViewport,} from "@/components/ui/message-scroller";
export function Conversation({ messages }: { messages: { id: string; text: string }[] }) {  return (    <MessageScrollerProvider>      <MessageScroller>        <MessageScrollerViewport aria-label="Conversation">          <MessageScrollerContent>            {messages.map((message) => (              <MessageScrollerItem key={message.id} messageId={message.id}>                {message.text}              </MessageScrollerItem>            ))}          </MessageScrollerContent>        </MessageScrollerViewport>        <MessageScrollerButton />      </MessageScroller>    </MessageScrollerProvider>  );}

속성

이 아이템은 upstream 문서에 링크가 없습니다. 부품은 @shadcn/react/message-scroller 의 이름과 같고, div 속성과 className 을 받습니다.

부품	요소	`data-slot`	주요 속성
`MessageScrollerProvider`	(없음)		`autoScroll`, `defaultScrollPosition`(`"start" \| "end" \| "last-anchor"`), `scrollEdgeThreshold`, `scrollPreviousItemPeek`, `scrollMargin`
`MessageScroller`	`div`	`message-scroller`
`MessageScrollerViewport`	`div role="region"`	`message-scroller-viewport`	`preserveScrollOnPrepend`, `aria-label`
`MessageScrollerContent`	`div role="log"`	`message-scroller-content`	`spacerClassName`
`MessageScrollerItem`	`div`	`message-scroller-item`	`messageId`, `scrollAnchor`(`false`)
`MessageScrollerButton`	`Button`	`message-scroller-button`	`direction`(`"end" \| "start"`, 기본 `"end"`), `variant`(`"secondary"`), `size`(`"icon-sm"`), `behavior`, `render`

훅	돌려주는 것
`useMessageScroller()`	`scrollToEnd`, `scrollToStart`, `scrollToMessage(messageId)`(없는 id 는 `false`)
`useMessageScrollerScrollable()`	`{ start: boolean, end: boolean }`
`useMessageScrollerVisibility()`	`{ currentAnchorId, visibleMessageIds }`

기본으로 지키는 것

MessageScrollerViewport 는 role="region" 이고 tabindex="0" 이라 키보드로 스크롤합니다. aria-label 로 이름을 줍니다.
MessageScrollerContent 는 role="log" 라 추가된 메시지를 화면 읽기 프로그램이 알립니다.
MessageScrollerButton 은 스크롤할 곳이 없으면 inert·tabindex="-1"·data-active="false" 입니다. 기본 글자는 sr-only 의 Scroll to end(direction="start" 는 Scroll to start)이고, children 을 주면 대체합니다.
부품과 훅은 MessageScrollerProvider 안에서만 쓸 수 있습니다. 밖에서는 useMessageScroller must be used within a MessageScroller. 같은 오류를 던집니다.
항목 1000개와 한글·이모지 본문도 던지지 않고 그립니다.

접근성

키	동작
`Tab`	스크롤 영역에 포커스를 줍니다
`↑` `↓` `PageUp` `PageDown` `Home` `End`	브라우저 기본 스크롤

의존

npm: @shadcn/react, cn, lucide-react. 다른 아이템: button.