StreamingText

실시간 텍스트 스트리밍을 표시하는 컴포넌트입니다. AI 응답 표시에 적합합니다.

Installation

bash

npx axis-cli add streaming-text

Interactive Demo

Usage

tsx

import { StreamingText } from '@ax/ui'

export function Example() {
  const [content, setContent] = useState('')
  const [isStreaming, setIsStreaming] = useState(true)

  // 스트리밍 시뮬레이션
  useEffect(() => {
    const text = 'AI가 응답을 생성하고 있습니다...'
    let i = 0
    const interval = setInterval(() => {
      if (i < text.length) {
        setContent(text.slice(0, i + 1))
        i++
      } else {
        setIsStreaming(false)
        clearInterval(interval)
      }
    }, 50)
    return () => clearInterval(interval)
  }, [])

  return (
    <StreamingText
      content={content}
      isStreaming={isStreaming}
    />
  )
}

StreamingTextList

여러 스트리밍 메시지를 표시하는 컨테이너입니다.

tsx

import { StreamingTextList } from '@ax/ui'

const messages = [
  { id: '1', content: '첫 번째 메시지입니다.', isStreaming: false },
  { id: '2', content: '두 번째 메시지를 생성 중...', isStreaming: true },
]

export function Example() {
  return <StreamingTextList messages={messages} />
}

Props

Prop	Type	Default	Description
`content*`	`string`	-	표시할 텍스트 내용
`isStreaming*`	`boolean`	-	스트리밍 중 여부
`typingSpeed`	`number`	0	타이핑 속도 (ms per character)
`showCursor`	`boolean`	true	커서 표시 여부
`messageId`	`string`	-	메시지 ID (여러 메시지 구분용)