用 Streamdown 优雅地打字输出 AI 流式返回的文本

如果眼睛足够敏锐，你会发现有些 AI tool 通过 SSE 返回流式文本时，会先打印出 * ** - 或其它 Markdown 格式化字符，之后又迅速消失。用户阅读过程中，格式化的不同导致不同程度的 layout shift，文本不停换位置或忽大忽小，造成视觉疲劳。

问题

在网页中，我们通常用 react-markdown 来解析 Markdown 代码，一次性整体解析是没问题的，但 SSE 零零散散地把字串返到页面 Markdown 未成功解析时，用户就会看到奇奇怪怪的字符先。

解决办法

写正则，修正各种 Markdown 语法不正确的场景；
直接用 package Streamdown

代码

js 复制代码

// Nextjs

'use client';

import { useChat } from '@ai-sdk/react';
import { useState } from 'react';
import { Streamdown } from 'streamdown'; // 引入 streamdown

export default function Page() {
  const { messages, sendMessage, status } = useChat();
  const [input, setInput] = useState('');

  return (
    <>
      {messages.map(message => (
        <div key={message.id}>
          {message.parts.filter(part => part.type === 'text').map((part, index) => (
          
            { /* 用 Streamdown 包住 Markdown 文本 */ }
            <Streamdown key={index}>{part.text}</Streamdown>
          ))}
        </div>
      ))}

      <form
        onSubmit={e => {
          e.preventDefault();
          if (input.trim()) {
            sendMessage({ text: input });
            setInput('');
          }
        }}
      >
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          disabled={status !== 'ready'}
          placeholder="说点什么..."
        />
        <button type="submit" disabled={status !== 'ready'}>
          提交
        </button>
      </form>
    </>
  );
}