AI Components (X) Overview

VEF Framework includes a set of AI/chat UI components from @ant-design/x, re-exported with the X prefix. These components are designed for building AI-powered conversational interfaces.

Source: Re-exported from @ant-design/x. Full documentation: Ant Design X

Available Components

Export Name	Ant Design X Component	Description
XBubble	Bubble	Chat message bubble
XSender	Sender	Message input with send button
XConversations	Conversations	Conversation list
XPrompts	Prompts	Suggested prompt list
XThoughtChain	ThoughtChain	AI reasoning chain display
XWelcome	Welcome	Welcome screen
XAttachments	Attachments	File attachment area
XActions	Actions	Message action buttons
XSuggestion	Suggestion	Inline suggestion list
XSources	Sources	Reference sources display
XFileCard	FileCard	File preview card
XThink	Think	AI thinking/loading indicator
XNotification	notification	AI notification utility
XMarkdown	VEF wrapper	Markdown renderer with streaming
XMermaid	VEF wrapper	Mermaid diagram renderer
XCodeHighlighter	VEF wrapper	Code block for AI responses

Import

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

Minimal Chat Example

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('');
    // Call your AI API here...
  };

  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="Ask anything..."
      />
    </Stack>
  );
}