Response Stream

1"use client"
2 
3import { cn } from "@/lib/utils"
4import React, { useCallback, useEffect, useRef, useState } from "react"
5 
6export type Mode = "typewriter" | "fade"
7 
8export type UseTextStreamOptions = {
9  textStream: string | AsyncIterable<string>
10  speed?: number
11  mode?: Mode
12  onComplete?: () => void
13  fadeDuration?: number
14  segmentDelay?: number
15  characterChunkSize?: number
16  onError?: (error: unknown) => void
17}
18 
19export type UseTextStreamResult = {
20  displayedText: string
21  isComplete: boolean
22  segments: { text: string; index: number }[]
23  getFadeDuration: () => number
24  getSegmentDelay: () => number
25  reset: () => void
26  startStreaming: () => void
27  pause: () => void
28  resume: () => void
29}
30 
31function useTextStream({
32  textStream,
33  speed = 20,
34  mode = "typewriter",
35  onComplete,
36  fadeDuration,
37  segmentDelay,
38  characterChunkSize,
39  onError,
40}: UseTextStreamOptions): UseTextStreamResult {
41  const [displayedText, setDisplayedText] = useState("")
42  const [isComplete, setIsComplete] = useState(false)
43  const [segments, setSegments] = useState<{ text: string; index: number }[]>(
44    []
45  )
46 
47  const speedRef = useRef(speed)
48  const modeRef = useRef(mode)
49  const currentIndexRef = useRef(0)
50  const animationRef = useRef<number | null>(null)
51  const fadeDurationRef = useRef(fadeDuration)
52  const segmentDelayRef = useRef(segmentDelay)
53  const characterChunkSizeRef = useRef(characterChunkSize)
54  const streamRef = useRef<AbortController | null>(null)
55  const completedRef = useRef(false)
56  const onCompleteRef = useRef(onComplete)
57 
58  useEffect(() => {
59    speedRef.current = speed
60    modeRef.current = mode
61    fadeDurationRef.current = fadeDuration
62    segmentDelayRef.current = segmentDelay
63    characterChunkSizeRef.current = characterChunkSize
64  }, [speed, mode, fadeDuration, segmentDelay, characterChunkSize])
65 
66  useEffect(() => {
67    onCompleteRef.current = onComplete
68  }, [onComplete])
69 
70  const getChunkSize = useCallback(() => {
71    if (typeof characterChunkSizeRef.current === "number") {
72      return Math.max(1, characterChunkSizeRef.current)
73    }
74 
75    const normalizedSpeed = Math.min(100, Math.max(1, speedRef.current))
76 
77    if (modeRef.current === "typewriter") {
78      if (normalizedSpeed < 25) return 1
79      return Math.max(1, Math.round((normalizedSpeed - 25) / 10))
80    } else if (modeRef.current === "fade") {
81      return 1
82    }
83 
84    return 1
85  }, [])
86 
87  const getProcessingDelay = useCallback(() => {
88// … truncated