AI UI Patterns (스트리밍 메시지 렌더러)

#1ReactMedium

AI UI Patterns (스트리밍 메시지 렌더러)

AI UI Patterns - StreamingMessage

LLM 응답을 시뮬레이션하는 스트리밍 메시지 렌더러를 구현하세요. chunks 배열을 받아 일정 간격(50ms)으로 한 청크씩 누적해 화면에 보여주고, 모든 청크가 표시되기 전까지는 타이핑 인디케이터를 함께 렌더링합니다.

시그니처

function StreamingMessage(props: { chunks: string[] }): JSX.Element;

동작

마운트 시 chunks[0]만 표시되어 있고, 50ms마다 다음 청크가 누적되어 이어 붙는다
아직 모든 청크를 다 보여주지 않았다면 data-testid="typing" 인 요소를 함께 렌더
마지막 청크까지 표시되면 타이핑 인디케이터는 사라진다
본문 텍스트는 data-testid="message" 요소에 들어가고, 청크들은 그대로(공백 없이) 이어 붙인다

사용 예시

<StreamingMessage chunks={['Hello', ' ', 'world']} />
// 0ms:   message="Hello"          typing 표시
// 50ms:  message="Hello "          typing 표시
// 100ms: message="Hello world"     typing 없음

학습 포인트

useState + useEffect로 비동기 스트리밍 UI 모델링
setInterval / setTimeout 정리(cleanup)
진행 상태에 따른 인디케이터 조건부 렌더링

import { useEffect, useState } from 'react';

export function StreamingMessage({ chunks }: { chunks: string[] }) {
  // TODO: 현재까지 보여줄 청크 개수 상태를 관리하세요 (초기 1)
  // TODO: useEffect 안에서 setInterval로 50ms마다 count를 1씩 증가시키세요
  //       모든 청크가 표시되면 interval을 정리하세요 (cleanup 필수)
  // TODO: chunks.slice(0, count).join('')로 본문 텍스트 계산
  // TODO: count < chunks.length 인 경우 typing 인디케이터를 함께 렌더
  return (
    <div>
      <span data-testid="message"></span>
    </div>
  );
}

Open Sandbox

Sandpack 로드 중…

import { useEffect, useState } from 'react';

export function StreamingMessage({ chunks }: { chunks: string[] }) {
  // TODO: 현재까지 보여줄 청크 개수 상태를 관리하세요 (초기 1)
  // TODO: useEffect 안에서 setInterval로 50ms마다 count를 1씩 증가시키세요
  //       모든 청크가 표시되면 interval을 정리하세요 (cleanup 필수)
  // TODO: chunks.slice(0, count).join('')로 본문 텍스트 계산
  // TODO: count < chunks.length 인 경우 typing 인디케이터를 함께 렌더
  return (
    <div>
      <span data-testid="message"></span>
    </div>
  );
}

Open Sandbox