1
const stream = await model.stream(messages)
2

3
for await (const chunk of stream) {
4
  controller.enqueue(encoder.encode(content))
5
}

1
const transport = useMemo(
2
  () => new TextStreamChatTransport<UIMessage>({
3
    api: `${getWebClientEnv().NEXT_PUBLIC_API_BASE_URL}/rpc/chat/inbox`,
4
    body: {
5
      conversation,
6
    },
7
  }),
8
  [conversation],
9
)

01
const upstream = await fetch(`${baseURL.replace(/\/$/, "")}/chat/completions`, {
02
  method: "POST",
03
  headers: {
04
    authorization: `Bearer ${env.DEEPSEEK_API_KEY}`,
05
    "content-type": "application/json",
06
  },
07
  body: JSON.stringify({
08
    model: env.DEEPSEEK_MODEL ?? "deepseek-chat",
09
    messages,
10
    stream: true,
11
  }),
12
  signal: c.req.raw.signal,
13
})

01
const textStream = new ReadableStream<Uint8Array>({
02
  async start(controller) {
03
    const encoder = new TextEncoder()
04
    const decoder = new TextDecoder()
05
    const reader = upstream.body?.getReader()
06
    let buffer = ""
07
    let closed = false
08

09
    if (!reader) {
10
      controller.close()
11
      return
12
    }
13

14
    try {
15
      while (true) {
16
        const { done, value } = await reader.read()
17

18
        if (done || closed) {
19
          break
20
        }
21

22
        buffer += decoder.decode(value, { stream: true })
23

24
        const lines = buffer.split("\n")
25
        buffer = lines.pop() ?? ""
26

27
        for (const line of lines) {
28
          const trimmed = line.trim()
29

30
          if (!trimmed.startsWith("data:")) {
31
            continue
32
          }
33

34
          const data = trimmed.slice(5).trim()
35

36
          if (!data) {
37
            continue
38
          }
39

40
          if (data === "[DONE]") {
41
            closed = true
42
            controller.close()
43
            break
44
          }
45

46
          const parsed = JSON.parse(data) as {
47
            choices?: Array<{ delta?: { content?: unknown } }>
48
          }
49
          const content = parsed.choices?.[0]?.delta?.content
50

51
          if (typeof content === "string" && content) {
52
            controller.enqueue(encoder.encode(content))
53
          }
54
        }
55

56
        if (closed) {
57
          break
58
        }
59
      }
60

61
      if (!closed) {
62
        controller.close()
63
      }
64
    } catch (error) {
65
      controller.error(error)
66
    }
67
  },
68
})

1
return new Response(textStream, {
2
  headers: {
3
    "content-type": "text/plain; charset=utf-8",
4
    "cache-control": "no-cache",
5
    "x-accel-buffering": "no",
6
  },
7
})

1
const TYPEWRITER_INTERVAL_MS = 18
2
const TYPEWRITER_CHARS_PER_STEP = 1

1
function getTextLength(text: string) {
2
  return Array.from(text).length
3
}
4

5
function sliceText(text: string, length: number) {
6
  return Array.from(text).slice(0, length).join("")
7
}

01
const [visibleAssistantTextById, setVisibleAssistantTextById] =
02
  useState<Record<string, string>>({})
03

04
const assistantFullTextById = useMemo(() => {
05
  const textById: Record<string, string> = {}
06

07
  for (const message of messages) {
08
    if (message.role !== "assistant") {
09
      continue
10
    }
11

12
    const text = getMessageText(message)
13

14
    if (text) {
15
      textById[message.id] = text
16
    }
17
  }
18

19
  return textById
20
}, [assistantTextSignature, messages])

01
useEffect(() => {
02
  setVisibleAssistantTextById((current) => {
03
    const next: Record<string, string> = {}
04
    let changed = false
05

06
    for (const [id, fullText] of Object.entries(assistantFullTextById)) {
07
      const visibleText = current[id]
08

09
      if (visibleText === undefined || !fullText.startsWith(visibleText)) {
10
        next[id] = sliceText(fullText, TYPEWRITER_CHARS_PER_STEP)
11
        changed = true
12
        continue
13
      }
14

15
      next[id] = visibleText
16
    }
17

18
    if (Object.keys(current).length !== Object.keys(next).length) {
19
      changed = true
20
    }
21

22
    return changed ? next : current
23
  })
24
}, [assistantFullTextById])

01
const hasTypewriterWork = Object.entries(assistantFullTextById).some(([id, fullText]) => {
02
  const visibleText = visibleAssistantTextById[id] ?? ""
03

04
  return getTextLength(visibleText) < getTextLength(fullText)
05
})
06

07
useEffect(() => {
08
  if (!hasTypewriterWork) {
09
    return
10
  }
11

12
  const timer = window.setTimeout(() => {
13
    setVisibleAssistantTextById((current) => {
14
      let changed = false
15
      const next = { ...current }
16

17
      for (const [id, fullText] of Object.entries(assistantFullTextById)) {
18
        const visibleText = current[id] ?? ""
19
        const visibleLength = getTextLength(visibleText)
20
        const fullLength = getTextLength(fullText)
21

22
        if (visibleLength >= fullLength) {
23
          continue
24
        }
25

26
        next[id] = sliceText(fullText, visibleLength + TYPEWRITER_CHARS_PER_STEP)
27
        changed = true
28
      }
29

30
      return changed ? next : current
31
    })
32
  }, TYPEWRITER_INTERVAL_MS)
33

34
  return () => window.clearTimeout(timer)
35
}, [assistantFullTextById, hasTypewriterWork, visibleAssistantTextById])

1
const shouldShowTypingBubble =
2
  status === "submitted" ||
3
  (status === "streaming" && latestMessage?.role !== "assistant") ||
4
  (status === "streaming" && latestMessage?.role === "assistant" && !latestAssistantText)

1
if (!isUser && !messageText.trim()) {
2
  return null
3
}