AI 组件（X 系列）总览

VEF Framework 集成了来自 @ant-design/x 的 AI/对话 UI 组件，以 X 前缀重新导出。这些组件专为构建 AI 驱动的对话界面而设计。

来源： 从 @ant-design/x 重新导出。完整文档：Ant Design X

可用组件

导出名称	Ant Design X 组件	说明
XBubble	Bubble	对话消息气泡
XSender	Sender	带发送按钮的消息输入框
XConversations	Conversations	会话列表
XPrompts	Prompts	建议提示词列表
XThoughtChain	ThoughtChain	AI 推理链展示
XWelcome	Welcome	欢迎屏幕
XAttachments	Attachments	文件附件区域
XActions	Actions	消息操作按钮
XSuggestion	Suggestion	内联建议列表
XSources	Sources	参考来源展示
XFileCard	FileCard	文件预览卡片
XThink	Think	AI 思考/加载指示器
XNotification	notification	AI 通知工具函数
XMarkdown	VEF 封装	支持流式的 Markdown 渲染器
XMermaid	VEF 封装	Mermaid 图表渲染器
XCodeHighlighter	VEF 封装	AI 响应中的代码块

导入

import {
  XBubble,
  XSender,
  XConversations,
  XMarkdown,
} from '@vef-framework-react/components';

最简对话示例

import { XBubble, XSender, Stack } from '@vef-framework-react/components';
import { useState } from 'react';

interface Message {
  id: number;
  role: 'user' | 'assistant';
  content: string;
}

export default function ChatDemo() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [value, setValue] = useState('');

  const handleSend = (text: string) => {
    setMessages((prev) => [
      ...prev,
      { id: Date.now(), role: 'user', content: text },
    ]);
    setValue('');
    // 在此调用 AI API...
  };

  return (
    <Stack style={{ height: '100%' }}>
      <div style={{ flex: 1, overflow: 'auto', padding: 16 }}>
        {messages.map((msg) => (
          <XBubble
            key={msg.id}
            placement={msg.role === 'user' ? 'end' : 'start'}
            content={msg.content}
          />
        ))}
      </div>
      <XSender
        value={value}
        onChange={setValue}
        onSubmit={handleSend}
        placeholder="请输入问题..."
      />
    </Stack>
  );
}