Message Scroller

새 메시지에 자동으로 스크롤을 따라가는 컨테이너입니다.

데모

안녕하세요, 예약 변경이 가능할까요?

네, 어떤 날짜로 변경을 원하시나요?

다음 주 금요일 오후로 부탁드립니다.

확인했습니다. 금요일 오후 3시로 변경해 드릴게요.

감사합니다!

코드

<MessageScrollerProvider defaultScrollPosition="end">
  <MessageScroller className="h-56 rounded-lg border">
    <MessageScrollerViewport>
      <MessageScrollerContent className="p-4">
        {turns.map((turn) => (
          <MessageScrollerItem key={turn.id} messageId={turn.id}>
            <Bubble align={turn.align} variant={turn.align === "end" ? "default" : "muted"}>
              <BubbleContent>{turn.text}</BubbleContent>
            </Bubble>
          </MessageScrollerItem>
        ))}
      </MessageScrollerContent>
    </MessageScrollerViewport>
    <MessageScrollerButton direction="end" />
  </MessageScroller>
</MessageScrollerProvider>

사용 규칙

MessageScrollerProvider로 MessageScroller 전체를 감싸야 자동 스크롤 상태가 공유된다.
각 메시지에 고유한 messageId를 부여해 scrollToMessage로 특정 메시지를 가리킬 수 있게 한다.
MessageScrollerButton으로 위로 스크롤한 뒤에도 최신 메시지로 돌아갈 수단을 제공한다.

Don't

고정 높이 컨테이너 없이 사용해 무한정 늘어나는 페이지 스크롤과 뒤섞이게 하지 않는다.
MessageScrollerItem 없이 메시지를 나열해 뷰포트 밖 아이템의 렌더링 최적화를 놓치지 않는다.