本文会使用 Next13，不熟悉也没关系，用到的 api 不多，不懂的 api 可以查看 Next13 文档。
注意：需要申请有一个 openai 的 apiKey，不然就无法调用接口哦。
getReader()：返回一个 Reader，可以从 ReadableStream 读取的对象，返回的 Reader 类似于迭代器。locked：每个 ReadableStream 一次只能有一个活动的 Reader，当 Reader 在使用时，ReadableStream 被锁定并且getReader()不能被调用。pipeThrough()：将其 ReadableStream 连接到 ReadableWritablePair(一个 TransformStream)。它返回一个新的 ReadableStream（类比一下：把它理解成一个数组的 map 方法）。getReader() 的返回类型：cancel()：在一个活动的 Reader 中，这个方法取消关联的 ReadableStream。releaseLock()：停用 Reader 并解锁流。read()返回来两个属性的 ReadableStreamReadResult 的 Promise:
done：布尔值，false 表示可以读取，true 表示最后一个块。value：块(chunk)。getReader()来获取 Reader。getReader() 之后，readableStream 被锁定，所以 B 行打印的是 true，如果想再次调用getReader()，必须调用releaseLock()(E 行)。read()返回属性 done 和 value，如果 done 为 true，表示是最后一个块，start(controller) 调用构造函数后立即调用 start 方法。enqueue(chunk)：添加 chunk 到 ReadableStream 的内部队列。close()：关闭 ReadableStream，消费者仍然可以清空队列，在那之后，流结束。for-await-of来进行迭代。for-await-of永远不会结束。TransformStream最常见的方式是pipeThrough。.pipeThrough()将 readableStream 传输到 transformStream 的可写端，并进行转换返回其可读端。TextEncoder.encode()：将字符串作为输入，并返回 Uint8Array 包含 UTF-8 编码的文本。
TextDecoderStream()，作用就是将接收到的二进制流转换为可读的文本流(Uint8Array -> string)。start(controller)：在调用构造函数后立即被调用，可以在转换之前做一些准备。transform(chunk, controller) 执行实际的转化 。接受一个输入块，并可以使用 controller 将一个或多个转换后的输出块排队。enqueue(chunk)：添加 chunk 到 TransformStream 的可读端（输出）。terminate()：关闭 TransformStream 的可读端（输出）并在可写端（输入）出错。如果转换器对可写端（输入）的剩余块不感兴趣并想跳过他们，则可以使用它。body，它返回的是ReadableStream。fetch.body返回的是二进制流，后面会再提到。pnpm create next-app初始化一个 Next13 项目。src/ directory with this project? Notype.ts定义关于 message 的类型。app/page.tsx里面书写即可。app/api/chat/route.ts，用来处理 api 请求。关于 Next.js 的 Route 可以查看相关文档，不过多赘述。
export function POST就可以处理 POST 请求。libs/streaming-text-response.ts就是对于 Response 的简单封装，将状态码置为 200。libs/ai-stream.ts用来处理网络流，使用 ReadableStream 先 mock 两条数据。hooks/use-chat.ts。types.ts文件，定义好 use-chat 的类型声明。useSWR来声明一个状态，第二个参数(fetcher)传入 null，表示不需要进行网络请求，可以把它当成本地状态来处理，返回的 mutate 函数可以对这个状态进行更新。utils.ts文件用来保存两个工具函数: nanoid、createChunkDecoder。/api/chat，请求成功之后将数据渲染出来。fetch.body方法返回的是一个二进制流（Uint8Array），fetch 提供了text()、json()、blob()等方式将二进制流转化为其他数据格式。libs/ai-stream.ts里面推到队列里面的是字符串，所以就会报错。本文后面会使用第二种方式。
可以点击查看openai-edge具体的 api。
app/api/chat/route.ts中连接 openai。process.env.OPENAI_API_KEY读取的是环境变量，我们可以新建一个.env.local的文件。使用.env.local 命名是为了防止将该文件提交到 git，如果上传到 github 会暴露 apiKey。
res.body返回的是ReadableStream<Uint8Array>，之前写的 pipeThrough(createCallbacksTransformer)是将 string -> Uint8Array，目前先用不到，先注释掉。eventsource-parser这个库，这个库就是用来解析 sse 数据的。createCallbacksTransformer 将 string 格式再转成 Uint8Array 格式。createEventStreamTransformer：createEventStreamTransformer方法传入了自定义解析器，customParser 该怎么写呢？libs/ai-stream.ts 文件就只负责流的处理，将 customParser 作为参数传入即可，具体如何解析取决于上层应用。libs/openai-stream.ts实现 openai 流的 customParser。trimStartOfStreamHelper辅助函数把 chunk 最前面的空格给去掉。JSON.parse的方式来解析成对象，最后在读取相对应的字段即可。app/api/chat/route.ts文件，将 AIStream 替换成 OpenAIStream。hooks/use-chat.ts 中使用了 AbortController 传递给了 fetch 函数，写一个 stop 方法来实现暂停。libs/marked.ts文件，用来写 markdown -> HTML 的方法@tailwindcss/typography的配置也比较简单，在tailwind.config.js的 plugin 配置一下。app/MessageCard.tsx文件中，给需要进行渲染 markdown html 的内容添加上类名：prose 。hooks/use-scroll-bottom。app/page.tsx中导入进行使用即可。interface ReadableStream<TChunk> {getReader(): ReadableStreamDefaultReader<TChunk>;pipeThrough<TChunk2>(transform: ReadableWritablePair<TChunk2, TChunk>,options?: StreamPipeOptions): ReadableStream<TChunk2>;readonly locked: boolean;// 忽略// [Symbol.asyncIterator](): AsyncIterator<TChunk>;// cancel(reason?: any): Promise<void>;// pipeTo(// destination: WritableStream<TChunk>,// options?: StreamPipeOptions// ): Promise<void>;// tee(): [ReadableStream<TChunk>, ReadableStream<TChunk>];}
interface ReadableStreamGenericReader {cancel(reason?: any): Promise<void>;// 忽略// readonly closed: Promise<undefined>;}interface ReadableStreamDefaultReader<TChunk>extends ReadableStreamGenericReader {releaseLock(): void;read(): Promise<ReadableStreamReadResult<TChunk>>;}interface ReadableStreamReadResult<TChunk> {done: boolean;value: TChunk | undefined;}
const reader = readableStream.getReader(); // (A)console.log(readableStream.locked); // true (B)let result = '';try {while (true) {const { done, value } = await reader.read(); // (C)if (done) {break;}result += value; // (D)}} finally {reader.releaseLock(); // (E)}console.log('result', result);
new ReadableStream(underlyingSource?, queuingStrategy?)
interface UnderlyingSource<TChunk> {start?(controller: ReadableStreamController<TChunk>): void | Promise<void>;// 忽略// pull?(controller: ReadableStreamController<TChunk>): void | Promise<void>;// cancel?(reason?: any): void | Promise<void>;// type: 'bytes' | undefined;// autoAllocateChunkSize: bigint;}
type ReadableStreamController<TChunk> =| ReadableStreamDefaultController<TChunk>| ReadableByteStreamController<TChunk>; // 先忽略interface ReadableStreamDefaultController<TChunk> {enqueue(chunk?: TChunk): void;close(): void;// 忽略// readonly desiredSize: number | Null;// error(err?: any): void;}
async function test14() {const readableStream = new ReadableStream({start(controller) {controller.enqueue('First Line\n'); // (A)controller.enqueue('Second Line\n'); // (B)controller.close(); // (C)},});for await (const chunk of readableStream) {console.log(chunk);}}test14();// First Line// Second Line
const transformStream = readableStream.pipeThrough(transformStream);
async function test21() {const encoder = new TextEncoder();const readableByteStream = new ReadableStream({start(controller) {controller.enqueue(encoder.encode('hello\n'));controller.enqueue(encoder.encode('world\n'));},});const readableStream = readableByteStream.pipeThrough(new TextDecoderStream('utf-8'));for await (const stringChunk of readableStream) {console.log(stringChunk);}}test21();
interface TransformStream<InChunk, OutChunk> {start?(controller: TransformStreamDefaultController<OutChunk>): void | Promise<void>;transform?(chunk: InChunk,controller: TransformStreamDefaultController<OutChunk>): void | Promise<void>;// 忽略// flush?(// chunk: InChunk,// controller: TransformStreamDefaultController<OutChunk>// ): void | Promise<void>;}
interface TransformStreamDefaultController<OutChunk> {enqueue(chunk?: OutChunk): void;terminate(): void;// 忽略// readonly desiredSize: number | null;// error(err?: any): void;}
async function test20() {// 创建一个 ReadableStream 对象const readableStream = new ReadableStream({start(controller) {controller.enqueue('hello');controller.enqueue('world');controller.close();},});// 创建一个 TransformStream 对象const transformer = new TransformStream({transform(chunk, controller) {// 对输入数据进行转换处理const transformedChunk = chunk.toUpperCase();// 将转换后的数据通过 controller.enqueue() 方法推送到输出流 ReadableStreamcontroller.enqueue(transformedChunk);},});// 通过 TransformStream 进行处理流的转换const newReadableStream = readableStream.pipeThrough(transformer);// 使用 reader 方式来读取 ReadableStreamconst reader = newReadableStream.getReader();while (true) {const { done, value } = await reader.read();if (done) {break;}console.log(value); // HELLO WORLD}}test20();
async function main() {const res = await fetch('https://example.com');const data = await res.json();console.log('data', data);}main();
async function main() {const res = await fetch('https://example.com');const body = res.body; // ReadableStreamconst reader = body.getReader();while (true) {const { done, value } = await reader.read();if (done) {break;}console.log('value', value);}}main();
// types.tsexport type Message = {id: string;createdAt?: Date;content: string;role: 'system' | 'user' | 'assistant';};
import { Message } from '@/types';import classNames from 'classnames';interface MessageCardProps {message: Message;}type AvatarProps = Pick<Message, 'role'>;const Avatar = ({ role }: AvatarProps) => {const getName = () => (role === 'user' ? 'U' : 'AI');return (<spanclassName={classNames('w-6 h-6 inline-flex items-center justify-center rounded-full min-w-[24px]',role === 'user' ? 'bg-orange-300' : 'bg-green-400')}>{getName()}</span>);};const MessageCard = ({ message }: MessageCardProps) => {return (<div key={message.id} className="flex items-center"><Avatar role={message.role} /><div className="ml-2">{message.content}</div></div>);};export default MessageCard;
// app/page.tsx'use client';import MessageCard from './MessageCard';import { Message } from '@/types';const Chat = () => {const messages: Message[] = [{ id: '1', content: 'hello', role: 'user' },{ id: '2', content: 'world', role: 'assistant' },];return (<div className="flex h-full flex-col w-full max-w-xl pb-36 pt-9 mx-auto stretch"><ul className="space-y-4">{messages.map((message) => (<MessageCard key={message.id} message={message} />))}</ul><formonSubmit={(e) => {e.preventDefault();}}><inputclassName="w-full p-3 focus-visible:outline-gray-300 border border-gray-300 rounded-md shadow-xl focus:shadow-2xl transition-all"placeholder="随便说点什么..."/></form></div>);};export default Chat;
// app/api/chat/route.ts// GET 是书写规范!!!export async function GET() {const data = 'hello world';return NextResponse.json({ data });}
// app/api/chat/route.tsexport const runtime = 'edge'; // 如果要流式渲染则需要加上这一行export async function POST(req: Request) {const stream = AIStream();console.log('stream:', stream);return new StreamingTextResponse(stream);}
// libs/streaming-text-response.tsexport class StreamingTextResponse extends Response {constructor(res: ReadableStream, init?: ResponseInit) {super(res as any, {...init,status: 200,headers: {'Content-Type': 'text/plain; charset=utf-8',...init?.headers,},});}}
// libs/ai-stream.tsexport function AIStream(): ReadableStream {const stream = new ReadableStream({start(controller) {controller.enqueue('hello\n');controller.enqueue('world\n');controller.close();},});return stream;}
pnpm add nanoid swr
// types.ts// 省略其他代码...export type CreateMessage = {id?: string;createdAt?: Date;content: string;role: 'system' | 'user' | 'assistant';};// type.tsexport type UseChatOptions = {// 指定聊天功能的API地址，默认为'/api/chat'api?: string;// 指定聊天的唯一标识符，如果没有指定，则使用useId生成唯一的Hook IDid?: string;// 消息列表初始化内容，默认为空数组initialMessages?: Message[];// 输入框的初始内容，默认为空字符串initialInput?: string;};// hooks/use-chat.tsexport type UseChatHelpers = {// 当前消息列表messages: Message[];// 请求过程中可能出现的错误error: undefined | Error;// 向聊天中追加一条消息append: (message: Message | CreateMessage) => Promise<string | null | undefined>;// 设置聊天消息列表setMessages: (messages: Message[]) => void;// 输入框内容input: string;// 设置输入框内容setInput: Dispatch<SetStateAction<string>>;// 处理输入框内容变化handleInputChange: (e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>) => void;// 处理表单提交handleSubmit: (e: FormEvent<HTMLFormElement>) => void;// 请求是否正在加载中isLoading: boolean;};export function useChat(options?: UseChatOptions): UseChatHelpers;
export function useChat({api = '/api/chat',id,initialInput = '',initialMessages = [],}: UseChatOptions = {}): UseChatHelpers {const hookId = useId();// 生成一个chatIdconst chatId = id || hookId;const { data, mutate } = useSWR<Message[]>([api, chatId], null, {fallbackData: initialMessages,});const messages = data!;// 用 ref 保存最新的消息列表const messagesRef = useRef<Message[]>(messages);useEffect(() => {messagesRef.current = messages;}, [messages]);// 处理input输入const [input, setInput] = useState(initialInput);const handleInputChange = useCallback((e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>) => {setInput(e.target.value);},[]);// 设置消息列表const setMessages = useCallback((messages: Message[]) => {mutate(messages, false);messagesRef.current = messages;},[mutate]);return {messages,setMessages,input,setInput,handleInputChange,};}
// utils.tsimport { customAlphabet } from 'nanoid';export const nanoid = customAlphabet('0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',7);export function createChunkDecoder() {const decoder = new TextDecoder();return function (chunk: Uint8Array | undefined): string {if (!chunk) return '';return decoder.decode(chunk, { stream: true });};}
export function useChat({api = '/api/chat',id,initialInput = '',initialMessages = [],}: UseChatOptions = {}): UseChatHelpers {// 省略其它代码...const { error, trigger, isMutating } = useSWRMutation<string | null,any,[string, string],Message[]>([api, chatId],async (_, { arg: messagesSnapshot }) => {try {const abortController = new AbortController();abortControllerRef.current = abortController;// 保存上一次的消息列表，用于时光回溯const previousMessages = messagesRef.current;// 先更新UImutate(messagesSnapshot, false);// 处理参数const body = messagesSnapshot.map(({ role, content }) => ({role,content,}));const res = await fetch(api, {method: 'POST',body: JSON.stringify({ messages: body }),signal: abortController.signal,}).catch((err) => {// 如果报错了，回退到上一次的消息列表mutate(previousMessages, false);throw err;});if (!res.ok) {// 如果接口请求不成功，回退到上一次的消息列表mutate(previousMessages, false);throw new Error((await res.text()) || 'Faild to fetch the chat response.');}// body为空，直接报错if (!res.body) {throw new Error('The response body is empty.');}let result = '';const createdAt = new Date();// 创建唯一的消息IDconst replyId = nanoid();// 使用 reader 的方式读取ReadableStreamconst reader = res.body.getReader();// 使用 TextDecoder 进行将 Uint8Array 解码成 stringconst decode = createChunkDecoder();while (true) {const { done, value } = await reader.read();if (done) {break;}// 将二进制value 解析成字符串，然后进行拼接result += decode(value);// 及时更新UImutate([...messagesSnapshot,{id: replyId,createdAt,content: result,role: 'assistant',},],false);// 如果请求取消了，则需要暂停读取streamif (abortControllerRef.current === null) {reader.cancel();break;}}abortControllerRef.current = null;return result;} catch (err) {if ((err as any).name === 'AbortError') {abortControllerRef.current = null;return null;}throw err;}},{revalidate: false, // 不需要重新验证缓存});const append = useCallback(async (message: Message | CreateMessage) => {if (!message.id) {message.id = nanoid();}// 将消息添加到消息列表，手动触发接口请求return trigger(messagesRef.current.concat(message as Message));},[trigger]);const handleSubmit = useCallback((e: FormEvent<HTMLFormElement>) => {e.preventDefault();// 如果输入框没有内容，直接返回if (!input) {return;}// 将内容添加到消息列表中append({content: input,role: 'user',createdAt: new Date(),});setInput('');},[append, input]);return {error,append,handleSubmit,isLoading: isMutating,};}
// app/page.tsxconst Chat = () => {const { messages, input, handleSubmit, handleInputChange } = useChat();return (<div className="flex h-full flex-col w-full max-w-xl pb-36 pt-9 mx-auto stretch"><ul className="space-y-4">{messages.map((message) => (<MessageCard key={message.id} message={message} />))}</ul><form onSubmit={handleSubmit}><inputvalue={input}onChange={handleInputChange}className="w-full p-3 focus-visible:outline-gray-300 rounded shadow-xl focus:shadow-2xl transition-all"placeholder="随便说点什么..."/></form></div>);};export default Chat;
export function AIStream(): ReadableStream {const stream = new ReadableStream({start(controller) {controller.enqueue('hello\n'); // 字符串controller.enqueue('world\n'); // 字符串controller.close();},});return stream;}
const textEncoder = new TextEncoder();const stream = new ReadableStream({start(controller) {controller.enqueue(textEncoder.encode('hello\n'));controller.enqueue(textEncoder.encode('world\n'));controller.close();},});
export function createCallbacksTransformer() {const encoder = new TextEncoder();return new TransformStream<string, Uint8Array>({async transform(message, controller): Promise<void> {controller.enqueue(encoder.encode(message));},});}export function AIStream(): ReadableStream {const stream = new ReadableStream({start(controller) {controller.enqueue('hello\n');controller.enqueue('world\n');controller.close();},});return stream.pipeThrough(createCallbacksTransformer());}
pnpm add openai-edge
// app/api/chat/route.tsconst config = new Configuration({// 申请好的 OPENAI_API_KEYapiKey: process.env.OPENAI_API_KEY,});const openai = new OpenAIApi(config);export const runtime = 'edge';export async function POST(req: Request) {// 获得请求参数const { messages } = await req.json();const response = await openai.createChatCompletion({model: 'gpt-3.5-turbo',stream: true,messages: messages.map((message: any) => ({content: message.content,role: message.role,})),});// 将 response 传递给 AIStream 进行处理const stream = AIStream(response);return new StreamingTextResponse(stream);}
OPENAI_API_KEY=api key
// libs/ai-stream.tsexport function AIStream(res: Response): ReadableStream {if (!res.ok) {throw new Error(`Failed to convert the response to stream. Received status code: ${res.status}.`);}const stream =res.body ||new ReadableStream({start(controller) {controller.close();},});return stream;// .pipeThrough(createCallbacksTransformer);}
[field]: value\n
dataeventidretry
pnpm add eventsource-parser
// libs/ai-stream.tsimport {createParser,type EventSourceParser,type ParseEvent,} from 'eventsource-parser';export function createEventStreamTransformer(customParser: AIStreamParser) {const decoder = new TextDecoder();let parser: EventSourceParser;return new TransformStream<Uint8Array, string>({async start(controller) {function onParse(event: ParseEvent) {if (event.type === 'event') {const data = event.data; // data 就是解析之后的每个数据if (data === '[DONE]') {// 如果是[DONE] 表示解析完毕。controller.terminate();return;}// 将 json 数据字符串传入到自定义解析器进行过滤const message = customParser(data);// 如果 message 有值的话，就推到队列中。if (message) controller.enqueue(message);}}// 创建解析器parser = createParser(onParse);},transform(chunk) {parser.feed(decoder.decode(chunk));},});}
// libs/ai-stream.tsexport function AIStream(res: Response): ReadableStream {// 省略其他代码...return stream.pipeThrough(createEventStreamTransformer()).pipeThrough(createCallbacksTransformer());}
// libs/ai-stream.tsexport function AIStream(res: Response,customParser: AIStreamParser // 新增): ReadableStream {// 省略其他代码...return stream.pipeThrough(createEventStreamTransformer(customParser)) // 传入.pipeThrough(createCallbacksTransformer());}
// libs/openai-stream.tsimport { AIStream } from './ai-stream';export function trimStartOfStreamHelper() {let start = true;return (text: string) => {if (start) text = text.trimStart();if (text) start = false;return text;};}function parseOpenAIStream(): (data: string) => string | void {const trimStartOfStream = trimStartOfStreamHelper();return (data) => {const json = JSON.parse(data); // 将 json 字符串解析成对象const text = trimStartOfStream(json.choices[0]?.delta?.content ?? json.choices[0]?.text ?? ''); // 读取对应的字段return text;};}export function OpenAIStream(res: Response): ReadableStream {return AIStream(res, parseOpenAIStream());}
// app/api/chat/route.tsexport async function POST(req: Request) {// 省略其他代码...const stream = OpenAIStream(response); // AIStream() -> OpenAIStream()return new StreamingTextResponse(stream);}
// hooks/use-chat.tsexport type UseChatHelpers = {reload: () => Promise<string | null | undefined>;};export function useChat({api = '/api/chat',id,initialInput = '',initialMessages = [],}: UseChatOptions = {}): UseChatHelpers {// 省略其他代码...const reload = useCallback(async () => {if (messagesRef.current.length === 0) return null;const lastMessage = messagesRef.current[messagesRef.current.length - 1];// 如果最后一条消息是 chatgpt 生成的if (lastMessage.role === 'assistant') {// 去掉消息列表的最后一条消息，然后触发接口请求return trigger(messagesRef.current.slice(0, -1));}return trigger(messagesRef.current);}, [trigger]);return {// 省略其他的代码...reload,};}
// app/page.tsx// 省略其他代码...import { Pause, Send, RotateCw, MoreHorizontal } from 'react-feather';import classNames from 'classnames';const Chat = () => {// 省略其他代码...const { reload, messages } = useChat();const disabledClassName = isLoading? 'cursor-not-allowed pointer-events-none opacity-70': '';return (// 省略其他代码...<div className="fixed w-full left-0 bottom-0 py-4 bg-gray-100 border-t border-t-gray-300">{messages.length > 0 ? (<buttonclassName="mb-2 mx-auto border border-gray-300 bg-gray-100 text-gray-600 p-2 px-8 rounded-md hover:bg-gray-200 transition-all flex items-center"onClick={reload}><RotateCw className="mr-2" size={16} />重新生成</button>) : null}<formonSubmit={handleSubmit}className="max-w-xl w-full mx-auto relative"><div className="relative"><inputdisabled={isLoading}value={input}onChange={handleInputChange}className={classNames('w-full p-3 focus-visible:outline-gray-300 border border-gray-300 bg-gray-100 rounded-md shadow-xl focus:shadow-2xl transition-all',disabledClassName)}placeholder="随便说点什么..."/>{isLoading ? (<buttonclassName={classNames('absolute right-3 bg-gray-200 p-1 top-1/2 -translate-y-1/2 rounded max-w-xs transition-all',disabledClassName)}><MoreHorizontal size={16} /></button>) : (<button className="absolute right-3 bg-gray-200 hover:text-white p-1 top-1/2 -translate-y-1/2 rounded max-w-xs hover:bg-green-400 transition-all"><Send size={16} /></button>)}</div></form></div>);};
// hooks/use-chat.tsexport type UseChatHelpers = {stop: () => void;};export function useChat({api = '/api/chat',id,initialInput = '',initialMessages = [],}: UseChatOptions = {}): UseChatHelpers {// 省略其他代码...const stop = useCallback(() => {if (abortControllerRef.current) {// 取消请求abortControllerRef.current.abort();abortControllerRef.current = null;}}, []);return {// 省略其他的代码...stop,};}
// app/page.tsximport { Pause, Send } from 'react-feather';const Chat = () => {// 省略其它代码...const { stop, isLoading, messages } = useChat();const getBtnContent = () => {if (isLoading) {return (<><Pause className="mr-2" size={16} />暂停生成</>);}return (<><RotateCw className="mr-2" size={16} />重新生成</>);};return (// 省略其他代码...<div className="fixed w-full left-0 bottom-0 py-4 bg-gray-100 border-t border-t-gray-300">{messages.length > 0 ? (<buttonclassName="mb-2 mx-auto border border-gray-300 bg-gray-100 text-gray-600 p-2 px-8 rounded-md hover:bg-gray-200 transition-all flex items-center"onClick={isLoading ? stop : reload}>{getBtnContent()}</button>) : null}<formonSubmit={handleSubmit}className="max-w-xl w-full mx-auto relative">{/* 省略其他代码... */}</form></div>);};
pnpm add markedpnpm add @tailwindcss/typography @types/marked -D
// libs/marked.tsimport { marked } from 'marked';export const markdownToHTML = (markdown: string) => {if (!markdown || typeof markdown !== 'string') {return '';}return marked.parse(markdown);};
// tailwind.config.js/** @type {import('tailwindcss').Config} */module.exports = {// 省略其他代码...plugins: [require('@tailwindcss/typography')],};
// app/MessageCard.tsximport { markdownToHTML } from '@/libs/marked';const MessageCard = ({ message }: MessageCardProps) => {const content = markdownToHTML(message.content);return (<div className="flex items-start"><Avatar role={message.role} /><divclassName="pl-2 leading-6 prose transition-all max-w-xl" // 在这里!dangerouslySetInnerHTML={{ __html: content }}></div></div>);};
// hooks/use-scroll-bottom.tsimport throttle from 'lodash.throttle';import { RefObject, useEffect } from 'react';interface UseScrollBottomOptions {scrollRef: RefObject<HTMLElement>;}const useScrollBottom = ({ scrollRef }: UseScrollBottomOptions) => {useEffect(() => {const scrollingElement = scrollRef.current;const callback: MutationCallback = function (mutationsList) {for (let mutation of mutationsList) {if (mutation.type === 'childList') {window.scrollTo(0, document.body.scrollHeight);}}};const throttleCallback = throttle(callback, 1000 / 16);const observer = new MutationObserver(throttleCallback);if (scrollingElement) {observer.observe(scrollingElement!, {subtree: true,childList: true,});}return () => {observer.disconnect();};}, []);};export default useScrollBottom;
// app/page.tsxconst Chat = () => {const scrollRef = useRef<HTMLUListElement | null>(null);useScrollBottom({ scrollRef });return (<ul className="space-y-4" ref={scrollRef}>// 绑定ref{messages.map((message) => (<MessageCard key={message.id} message={message} />))}</ul>);};