AI-Generated UI 技术深度解析：模型流式输出与 UI 渲染实践

Content-Type: text/event-streamCache-Control: no-cacheConnection: keep-alive

event: <event-type>data: <payload>id: <event-id>retry: <reconnection-time>

data: {"choices":[{"delta":{"content":"Hello"}}]}data: {"choices":[{"delta":{"content":" World"}}]}data: [DONE]

const eventSource = new EventSource('/api/stream');eventSource.onmessage = (event) => {  if (event.data === '[DONE]') {    eventSource.close();    return;  }  const { choices } = JSON.parse(event.data);  const content = choices[0]?.delta?.content;  if (content) appendToUI(content);};eventSource.onerror = (error) => {  console.error('Stream error:', error);  eventSource.close();};

async function streamCompletion(messages) {  const response = await fetch('/api/chat', {    method: 'POST',    headers: { 'Content-Type': 'application/json' },    body: JSON.stringify({ messages, stream: true }),  });  const reader = response.body.getReader();  const decoder = new TextDecoder();  let buffer = '';  while (true) {    const { done, value } = await reader.read();    if (done) break;    buffer += decoder.decode(value, { stream: true });
    // 按行解析 SSE 事件    const lines = buffer.split('\n');    buffer = lines.pop(); // 保留不完整的行
    for (const line of lines) {      if (line.startsWith('data: ')) {        const data = line.slice(6);        if (data === '[DONE]') return;
        try {          const parsed = JSON.parse(data);          yield parsed.choices[0]?.delta?.content || '';        } catch (e) {          // 忽略解析错误        }      }    }  }}

import OpenAI from 'openai';const client = new OpenAI();const stream = await client.chat.completions.create({  model: 'gpt-4o',  messages: [{ role: 'user', content: 'Hello' }],  stream: true,  stream_options: { include_usage: true }, // 获取 token 统计});for await (const chunk of stream) {  const content = chunk.choices[0]?.delta?.content;  if (content) process.stdout.write(content);}

{  "id": "chatcmpl-xxx",  "object": "chat.completion.chunk",  "created": 1234567890,  "model": "gpt-4o",  "choices": [{    "index": 0,    "delta": { "content": "Hello" },    "finish_reason": null  }]}

import Anthropic from '@anthropic-ai/sdk';const client = new Anthropic();const stream = await client.messages.create({  model: 'claude-3-5-sonnet-20241022',  max_tokens: 1024,  messages: [{ role: 'user', content: 'Hello' }],  stream: true,});for await (const event of stream) {  if (event.type === 'content_block_delta') {    process.stdout.write(event.delta.text);  }}

message_start → content_block_start → content_block_delta (多次) → content_block_stop → message_delta → message_stop

import { OpenAIRealtimeWebSocket } from 'openai/realtime/websocket';const rt = new OpenAIRealtimeWebSocket({ model: 'gpt-4o-realtime-preview' });rt.socket.addEventListener('open', () => {  rt.send({    type: 'response.create',    response: { modalities: ['text', 'audio'] }  });});rt.on('response.audio.delta', (event) => {  playAudioChunk(event.delta); // 播放音频片段});

┌─────────────────────────────────────────────────────────────┐│                     应用层 (Your App)                        │├─────────────────────────────────────────────────────────────┤│  UI 集成层: @ai-sdk/react | @ai-sdk/vue | @ai-sdk/svelte     ││  (useChat, useCompletion, useAgent hooks)                   │├─────────────────────────────────────────────────────────────┤│  核心层: ai                                                  ││  (generateText, streamText, generateObject, streamObject)   │├─────────────────────────────────────────────────────────────┤│  Provider 层: @ai-sdk/openai | @ai-sdk/anthropic | ...      ││  (provider-specific adapters)                               │├─────────────────────────────────────────────────────────────┤│  传输层: SSE / WebSocket                                     │└─────────────────────────────────────────────────────────────┘

import { streamText } from 'ai';import { openai } from '@ai-sdk/openai';const result = await streamText({  model: openai('gpt-4o'),  messages: [    { role: 'system', content: 'You are a helpful assistant.' },    { role: 'user', content: 'Write a poem about coding.' },  ],});// 方式一：异步迭代器for await (const chunk of result.textStream) {  process.stdout.write(chunk);}// 方式二：转换为 Response（用于 API 路由）return result.toTextStreamResponse();// 方式三：转换为数据流响应（包含元信息）return result.toDataStreamResponse();

'use client';import { useChat } from '@ai-sdk/react';export default function ChatPage() {  const {     messages,     // 消息历史    input,        // 输入框值    handleInputChange,    handleSubmit,    isLoading,    // 是否正在生成    error,        // 错误信息    stop,         // 停止生成    reload,       // 重新生成最后一条  } = useChat({    api: '/api/chat',    onFinish: (message) => {      console.log('Generation complete:', message);    },    onError: (error) => {      console.error('Stream error:', error);    },  });  return (    <div className="flex flex-col h-screen">      <div className="flex-1 overflow-y-auto p-4">        {messages.map((m) => (          <div key={m.id} className={m.role === 'user' ? 'text-right' : ''}>            <span className="font-bold">{m.role}: </span>            {m.content}          </div>        ))}      </div>
      <form onSubmit={handleSubmit} className="p-4 border-t">        <input          value={input}          onChange={handleInputChange}          placeholder="Say something..."          disabled={isLoading}          className="w-full p-2 border rounded"        />        {isLoading && (          <button type="button" onClick={stop}>            Stop          </button>        )}      </form>    </div>  );}

// app/api/chat/route.ts (Next.js App Router)import { streamText } from 'ai';import { openai } from '@ai-sdk/openai';export async function POST(req: Request) {  const { messages } = await req.json();  const result = await streamText({    model: openai('gpt-4o'),    messages,  });  return result.toDataStreamResponse();}

import { streamObject } from 'ai';import { openai } from '@ai-sdk/openai';import { z } from 'zod';const result = await streamObject({  model: openai('gpt-4o'),  schema: z.object({    recipe: z.object({      name: z.string(),      ingredients: z.array(z.object({        name: z.string(),        amount: z.string(),      })),      steps: z.array(z.string()),    }),  }),  prompt: 'Generate a lasagna recipe.',});// 流式获取部分对象for await (const partialObject of result.partialObjectStream) {  console.log('Partial:', partialObject);  // { recipe: { name: "Lasagna" } }  // { recipe: { name: "Lasagna", ingredients: [...] } }  // ...}

┌──────────────┐    ┌──────────────┐    ┌──────────────┐│ 用户 Prompt   │───►│  LLM 生成    │───►│  代码解析      ││ "创建登录页"   │    │  React 代码  │    │  & 验证       │└──────────────┘    └──────┬───────┘    └──────┬───────┘                          │                    │                          ▼                    ▼                   ┌──────────────┐    ┌──────────────┐                   │ Token 流式    │    │ 增量渲染      │                   │ 输出 (SSE)    │    │ 预览面板      │                   └──────────────┘    └──────────────┘

I'll create a login page with a modern design.<v0_artifact type="react" title="Login Page">import { Button } from "@/components/ui/button"import { Input } from "@/components/ui/input"export default function LoginPage() {  return (    <div className="flex min-h-screen items-center justify-center">      {/* ... */}    </div>  )}</v0_artifact>This component uses shadcn/ui for styling...

┌─────────────────────────────────────────────────────────────┐│                      Browser Tab                            ││  ┌─────────────────────────────────────────────────────────┐││  │                    Bolt.new UI                          │││  │  ┌───────────┐  ┌──────────────┐  ┌──────────────┐      │││  │  │  Chat     │  │  Code Editor │  │  Preview     │      │││  │  │  Panel    │  │  (Monaco)    │  │  (iframe)    │      │││  │  └─────┬─────┘  └──────┬───────┘  └──────┬───────┘      │││  └────────┼───────────────┼──────────────────┼─────────────┘││           │               │                  │              ││  ┌────────┴───────────────┴──────────────────┴─────────────┐││  │                 WebContainer Runtime                    │││  │  ┌─────────────────────────────────────────────────────┐│││  │  │                Node.js (WASM)                       ││││  │  │  • npm/pnpm 包管理                                   ││││  │  │  • Vite 开发服务器                                    ││││  │  │  • 虚拟文件系统                                       ││││  │  └─────────────────────────────────────────────────────┘│││  └─────────────────────────────────────────────────────────┘│└─────────────────────────────────────────────────────────────┘

interface FileOperation {  type: 'create' | 'update' | 'delete';  path: string;  content?: string;}// AI 输出格式示例// <bolt_file path="src/App.tsx">// import React from 'react';// export default function App() { ... }// </bolt_file>

class StreamingFileWriter {  private buffer: Map<string, string> = new Map();  private writeQueue: Promise<void> = Promise.resolve();  appendToFile(path: string, chunk: string) {    const current = this.buffer.get(path) || '';    this.buffer.set(path, current + chunk);
    // 防抖写入，避免频繁 I/O    this.scheduleFlush(path);  }  private scheduleFlush(path: string) {    this.writeQueue = this.writeQueue.then(async () => {      await this.debounce(50); // 50ms 防抖      const content = this.buffer.get(path);      if (content) {        await webcontainer.fs.writeFile(path, content);        // Vite HMR 自动触发      }    });  }}

// 监听服务器就绪webcontainer.on('server-ready', (port, url) => {  // 将预览 iframe 指向本地服务器  previewIframe.src = url;});// 文件变更自动触发 HMR，无需手动刷新

// 收到的 token 序列"function hello"     // 无法解析"function hello("    // 无法解析"function hello() {" // 无法解析"function hello() { return 'world'; }"  // 可以解析！

// Tree-sitter 的增量解析let mut parser = Parser::new();parser.set_language(tree_sitter_javascript::language())?;// 初始解析let tree = parser.parse("function hello() {", None)?;// 即使语法不完整，Tree-sitter 也能生成部分 AST// 增量更新let edit = InputEdit {    start_byte: 18,    old_end_byte: 18,    new_end_byte: 32,    // ...};tree.edit(&edit);let new_tree = parser.parse("function hello() { return 'hi'; }", Some(&tree))?;// 只重新解析变化的部分

function findSafeBoundary(code: string): number {  // 策略1：完整的语句（以分号或闭括号结尾）  const statementEnd = code.lastIndexOf(';');
  // 策略2：完整的代码块  const braceBalance = countBraces(code);  if (braceBalance === 0) {    return code.lastIndexOf('}') + 1;  }
  // 策略3：完整的行  return code.lastIndexOf('\n');}class StreamingCodeRenderer {  private buffer = '';  private rendered = '';  onChunk(chunk: string) {    this.buffer += chunk;
    const boundary = findSafeBoundary(this.buffer);    if (boundary > 0) {      const toRender = this.buffer.slice(0, boundary);      this.rendered += toRender;      this.buffer = this.buffer.slice(boundary);
      this.render(this.rendered);    }  }}

function streamingSyntaxHighlight(code: string, isComplete: boolean) {  if (isComplete) {    // 完整代码使用 Shiki/Prism 精确高亮    return highlightWithShiki(code);  } else {    // 流式过程中使用简单的正则高亮    return code      .replace(/\b(function|const|let|var|return|if|else)\b/g,         '<span class="keyword">$1</span>')      .replace(/'[^']*'/g, '<span class="string">$&</span>')      .replace(/\/\/.*/g, '<span class="comment">$&</span>');  }}

# 这是一个标题这是正文，包含 **加粗但还没闭

import { marked } from 'marked';function renderStreamingMarkdown(partial: string): string {  try {    // 尝试直接渲染    return marked.parse(partial);  } catch (e) {    // 失败则回退到纯文本    return escapeHtml(partial);  }}

function parseMarkdownBlocks(text: string) {  const blocks: { content: string; complete: boolean }[] = [];
  // 代码块检测  const codeBlockRegex = /```[\s\S]*?```/g;
  // 检测是否有未闭合的代码块  const openFences = (text.match(/```/g) || []).length;  const hasUnclosedCodeBlock = openFences % 2 !== 0;
  if (hasUnclosedCodeBlock) {    // 找到最后一个 ``` 的位置    const lastFence = text.lastIndexOf('```');    return {      complete: text.slice(0, lastFence),      pending: text.slice(lastFence),    };  }
  return { complete: text, pending: '' };}

import { micromark } from 'micromark';import { gfm, gfmHtml } from 'micromark-extension-gfm';const options = {  extensions: [gfm()],  htmlExtensions: [gfmHtml()],  allowDangerousHtml: true,};class StreamingMarkdownParser {  private completedHtml = '';  private buffer = '';  processChunk(chunk: string): string {    this.buffer += chunk;
    // 找到可以安全渲染的部分    const { complete, pending } = this.splitAtSafeBoundary(this.buffer);
    if (complete) {      const html = micromark(complete, options);      this.completedHtml += html;      this.buffer = pending;    }
    return this.completedHtml;  }  private splitAtSafeBoundary(text: string) {    // 在双换行处分割（段落边界）    const lastParagraphBreak = text.lastIndexOf('\n\n');    if (lastParagraphBreak > -1) {      return {        complete: text.slice(0, lastParagraphBreak),        pending: text.slice(lastParagraphBreak),      };    }    return { complete: '', pending: text };  }}

{"name": "John", "age": 30, "addre

function parsePartialJson<T>(partial: string): Partial<T> | null {  // 首先尝试直接解析  try {    return JSON.parse(partial);  } catch (e) {    // 尝试补全  }  let attempt = partial.trim();
  // 补全未闭合的字符串  const quoteCount = (attempt.match(/"/g) || []).length;  if (quoteCount % 2 !== 0) {    attempt += '"';  }
  // 补全未闭合的数组  const openBrackets = (attempt.match(/\[/g) || []).length;  const closeBrackets = (attempt.match(/\]/g) || []).length;  attempt += ']'.repeat(openBrackets - closeBrackets);
  // 补全未闭合的对象  const openBraces = (attempt.match(/{/g) || []).length;  const closeBraces = (attempt.match(/}/g) || []).length;  attempt += '}'.repeat(openBraces - closeBraces);
  try {    return JSON.parse(attempt);  } catch (e) {    return null;  }}

import { parser as jsonParser } from 'stream-json';import { streamValues } from 'stream-json/streamers/StreamValues';// Node.js 流式处理const pipeline = chain([  jsonParser(),  streamValues(),]);pipeline.on('data', ({ key, value }) => {  console.log(`Found ${key}: ${value}`);});// 逐块写入pipeline.write('{"name": ');pipeline.write('"John",');pipeline.write(' "age": 30}');pipeline.end();

import { streamObject } from 'ai';import { openai } from '@ai-sdk/openai';import { z } from 'zod';const schema = z.object({  name: z.string(),  age: z.number(),  address: z.object({    city: z.string(),    country: z.string(),  }),});const result = await streamObject({  model: openai('gpt-4o'),  schema,  prompt: 'Generate a person profile',});// 流式获取部分解析结果for await (const partial of result.partialObjectStream) {  console.log(partial);  // 第一次: { name: "John" }  // 第二次: { name: "John", age: 30 }  // 第三次: { name: "John", age: 30, address: { city: "NYC" } }  // ...}// 获取最终完整对象const finalObject = await result.object;

┌────────────────────────────────────────────────────────────┐│                     Cursor Editor                          ││  ┌────────────────────────────────────────────────────────┐││  │  VS Code Core (Monaco + Electron)                      │││  ├────────────────────────────────────────────────────────┤││  │  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  │││  │  │ Tab Complete │  │  Composer    │  │  Chat Panel  │  │││  │  │ (Ghost Text) │  │  (Agent)     │  │              │  │││  │  └──────┬───────┘  └──────┬───────┘  └──────┬───────┘  │││  │         │                 │                 │          │││  │  ┌──────┴─────────────────┴─────────────────┴───────┐  │││  │  │              AI Integration Layer                │  │││  │  │  • Context Collection (files, cursor, imports)   │  │││  │  │  • Model Router (Claude, GPT-4, Cursor-1.5)      │  │││  │  │  • Streaming Handler                             │  │││  │  └──────────────────────────────────────────────────┘  │││  └────────────────────────────────────────────────────────┘│└────────────────────────────────────────────────────────────┘

// 简化的 Tab Completion 实现interface CompletionContext {  prefix: string;       // 光标前的代码  suffix: string;       // 光标后的代码  language: string;     // 文件语言  filePath: string;     // 文件路径  imports: string[];    // 相关导入}async function* streamCompletion(context: CompletionContext) {  const response = await fetch('/api/complete', {    method: 'POST',    body: JSON.stringify({      model: 'cursor-small', // 快速模型用于补全      context,      max_tokens: 200,      stream: true,    }),  });  const reader = response.body.getReader();  const decoder = new TextDecoder();  while (true) {    const { done, value } = await reader.read();    if (done) break;
    const chunk = decoder.decode(value);    yield parseSSEChunk(chunk);  }}

// Monaco Editor decoration APIclass GhostTextProvider {  private decorations: string[] = [];  showSuggestion(editor: monaco.editor.IStandaloneCodeEditor,                  position: monaco.Position,                  suggestion: string) {    // 移除旧的装饰    this.decorations = editor.deltaDecorations(this.decorations, []);
    // 添加 Ghost Text    this.decorations = editor.deltaDecorations([], [{      range: new monaco.Range(        position.lineNumber,         position.column,        position.lineNumber,         position.column      ),      options: {        after: {          content: suggestion,          inlineClassName: 'ghost-text', // 半透明样式          cursorStops: InjectedTextCursorStops.None,        },      },    }]);  }  accept(editor: monaco.editor.IStandaloneCodeEditor) {    // 将 Ghost Text 转为实际文本    const position = editor.getPosition();    const suggestion = this.getCurrentSuggestion();
    editor.executeEdits('ghost-text', [{      range: new monaco.Range(        position.lineNumber, position.column,        position.lineNumber, position.column      ),      text: suggestion,    }]);
    this.clearDecorations(editor);  }}

// 流式 Diff 计算class StreamingDiffView {  private originalContent: string;  private newContent: string = '';  constructor(original: string) {    this.originalContent = original;  }  appendChunk(chunk: string) {    this.newContent += chunk;    this.updateDiff();  }  private updateDiff() {    // 使用 diff-match-patch 或 jsdiff 计算差异    const diffs = diffLines(this.originalContent, this.newContent);
    // 渲染为并排或内联 diff 视图    this.renderDiff(diffs);  }  private renderDiff(diffs: DiffResult[]) {    // 对于流式更新，只更新变化的部分    // 避免整体重渲染导致的闪烁
    diffs.forEach((diff, index) => {      const element = this.getDiffElement(index);      if (diff.added) {        element.className = 'diff-added';        element.textContent = diff.value;      } else if (diff.removed) {        element.className = 'diff-removed';        element.textContent = diff.value;      }    });  }}

┌─────────────────────────────────────────────────────────────┐│                     WebContainer                            ││  ┌─────────────────────────────────────────────────────────┐││  │  Node.js Runtime (编译为 WebAssembly)                    │││  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐      │││  │  │    V8 JS    │  │   libuv     │  │   Node API  │      │││  │  │   Engine    │  │ Event Loop  │  │   Polyfills │      │││  │  └─────────────┘  └─────────────┘  └─────────────┘      │││  └─────────────────────────────────────────────────────────┘││  ┌─────────────────────────────────────────────────────────┐││  │  Virtual File System                                    │││  │  • 内存存储 (主要)                                        │││  │  • IndexedDB 持久化 (可选)                               │││  │  • 文件监听 API                                          │││  └─────────────────────────────────────────────────────────┘││  ┌─────────────────────────────────────────────────────────┐││  │  Virtual Network Stack                                  │││  │  • Service Worker 拦截请求                               │││  │  • localhost 模拟                                        │││  │  • HTTP/HTTPS 支持                                       │││  └─────────────────────────────────────────────────────────┘│└─────────────────────────────────────────────────────────────┘

import { WebContainer } from '@webcontainer/api';async function bootDevEnvironment() {  // 启动 WebContainer  const webcontainer = await WebContainer.boot();
  // 挂载项目文件  await webcontainer.mount({    'package.json': {      file: {        contents: JSON.stringify({          name: 'my-app',          scripts: { dev: 'vite' },          dependencies: { 'vite': '^5.0.0' },        }),      },    },    'index.html': {      file: {        contents: '<html><body><div id="app"></div></body></html>',      },    },    'src': {      directory: {        'main.js': {          file: { contents: 'console.log("Hello!")' },        },      },    },  });
  // 安装依赖  const installProcess = await webcontainer.spawn('npm', ['install']);
  installProcess.output.pipeTo(new WritableStream({    write(data) {      console.log(data);    }  }));
  await installProcess.exit;
  // 启动开发服务器  const devProcess = await webcontainer.spawn('npm', ['run', 'dev']);
  // 监听服务器就绪  webcontainer.on('server-ready', (port, url) => {    console.log(`Dev server ready at ${url}`);    document.querySelector('iframe').src = url;  });
  // 文件监听（用于实现自定义 HMR 逻辑）  webcontainer.fs.watch('/src', { recursive: true }, (event, filename) => {    console.log(`File ${filename} changed`);  });}

class StreamingUIManager {  private buffer = '';  private renderScheduled = false;  private lastRenderTime = 0;
  private readonly MIN_RENDER_INTERVAL = 16; // ~60fps  onToken(token: string) {    this.buffer += token;
    if (!this.renderScheduled) {      this.renderScheduled = true;
      const timeSinceLastRender = Date.now() - this.lastRenderTime;      const delay = Math.max(0, this.MIN_RENDER_INTERVAL - timeSinceLastRender);
      setTimeout(() => {        this.render(this.buffer);        this.renderScheduled = false;        this.lastRenderTime = Date.now();      }, delay);    }  }}

import { useVirtualizer } from '@tanstack/react-virtual';function ChatHistory({ messages }) {  const parentRef = useRef<HTMLDivElement>(null);
  const virtualizer = useVirtualizer({    count: messages.length,    getScrollElement: () => parentRef.current,    estimateSize: () => 100,    overscan: 5,  });  return (    <div ref={parentRef} style={{ height: '100%', overflow: 'auto' }}>      <div style={{ height: `${virtualizer.getTotalSize()}px`, position: 'relative' }}>        {virtualizer.getVirtualItems().map((virtualRow) => (          <div            key={virtualRow.key}            style={{              position: 'absolute',              top: 0,              transform: `translateY(${virtualRow.start}px)`,            }}          >            <Message message={messages[virtualRow.index]} />          </div>        ))}      </div>    </div>  );}

async function* robustStream(messages: Message[]): AsyncGenerator<string> {  let retries = 0;  const MAX_RETRIES = 3;  let lastSuccessfulChunk = '';  while (retries < MAX_RETRIES) {    try {      const response = await fetch('/api/chat', {        method: 'POST',        body: JSON.stringify({ messages }),      });      if (!response.ok) {        throw new APIError(response.status, await response.text());      }      const reader = response.body.getReader();
      while (true) {        const { done, value } = await reader.read();        if (done) return;
        const chunk = new TextDecoder().decode(value);        lastSuccessfulChunk += chunk;        yield chunk;      }    } catch (error) {      if (error instanceof RateLimitError) {        const backoff = Math.pow(2, retries) * 1000;        await sleep(backoff);        retries++;      } else if (error instanceof NetworkError) {        // 网络错误可以立即重试        retries++;        // 从上次成功的位置继续        yield `\n[Connection restored, continuing...]\n`;      } else {        throw error; // 不可恢复的错误      }    }  }
  throw new Error('Max retries exceeded');}

function useTypingEffect(text: string, speed = 30) {  const [displayText, setDisplayText] = useState('');
  useEffect(() => {    let index = 0;    const timer = setInterval(() => {      if (index < text.length) {        setDisplayText(text.slice(0, index + 1));        index++;      } else {        clearInterval(timer);      }    }, speed);
    return () => clearInterval(timer);  }, [text, speed]);
  return displayText;}

function useAbortableStream() {  const abortControllerRef = useRef<AbortController | null>(null);
  const startStream = async (prompt: string) => {    // 取消之前的请求    abortControllerRef.current?.abort();    abortControllerRef.current = new AbortController();
    try {      const response = await fetch('/api/chat', {        method: 'POST',        body: JSON.stringify({ prompt }),        signal: abortControllerRef.current.signal,      });
      // ... 处理流    } catch (error) {      if (error.name === 'AbortError') {        console.log('Stream aborted by user');        return;      }      throw error;    }  };
  const stopStream = () => {    abortControllerRef.current?.abort();  };
  return { startStream, stopStream };}

function StreamingMessage({ content, isStreaming }) {  return (    <div      role="article"      aria-live={isStreaming ? "polite" : "off"}      aria-busy={isStreaming}      aria-label={isStreaming ? "AI is typing..." : "AI response"}    >      {content}      {isStreaming && (        <span className="sr-only">          AI is currently generating a response        </span>      )}    </div>  );}

// 未来的多模态流式 API（概念示例）for await (const chunk of multimodalStream) {  switch (chunk.type) {    case 'text':      appendText(chunk.content);      break;    case 'image':      // 图像可能分块传输      updateImageProgress(chunk.data, chunk.progress);      break;    case 'audio':      playAudioChunk(chunk.data);      break;    case 'ui_component':      // 直接生成可渲染的组件      renderComponent(chunk.component);      break;  }}