我有一个使用OpenAI生成答案的Next.js操作：
export async function continueConversation( messages: CoreMessage[], data: PersonResponse, prompt: string) { const { full_name, job_title, ...rest } = data const result = await streamText({ system: `您是一位${job_title}，您的名字是${full_name}。根据${JSON.stringify( rest )}回答问题`, model: openai("gpt-4o-2024-05-13"), messages, prompt, }) const stream = createStreamableValue(result.textStream) return stream.value}在用户界面中，我有以下代码部分：
{messages.map((m, i) => ( <div key={i} className="whitespace-pre-wrap flex flex-col px-8"> <div className={cn( "flex items-start", m.role === "user" && "justify-end" )} > {m.role === "assistant" && ( <Avatar className="w-8 h-8 mr-3 mt-1"> <AvatarImage src={`https://${github_url}.png`} alt={getInitials(full_name as string)} /> <AvatarFallback className="text-sm font-semibold tracking-[2px] bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40]"> {getInitials(full_name as string)} </AvatarFallback> </Avatar> )} <span className={cn( "my-2", m.role === "user" && "bg-neutral-800 px-4 py-3 rounded-full" )} > {m.content as string} </span> </div> </div> ))}在输出中，我得到的结果是Markdown格式：
回答：
您可以使用react-markdown包来显示Markdown，这个包的大小只有45.4kb
npm install react-markdown
import Markdown from "react-markdown"export default function Home(){ // 在这里调用API return ( {messages.map((m, i) => ( <div key={i} className="whitespace-pre-wrap flex flex-col px-8"> <div> {m.role === "assistant" && ( <Avatar > <AvatarImage src={`https://${github_url}.png`} alt={getInitials(full_name as string)} /> <AvatarFallback className="text-sm"> {getInitials(full_name as string)} </AvatarFallback> </Avatar> )} <span className={cn( "my-2", m.role === "user" && "bg-neutral-800 px-4 py-3 rounded-full" )} > <Markdown>{m.content}</Markdown> </span> </div> </div> ))} )}