XProvider

Provides unified global configuration for components.

Usage notes

XProvider inherits from antdv's ConfigProvider and provides global configuration for components in ant-design-x-vue.

If you are already using antdv's ConfigProvider, please make the following changes to your code:

- import { ConfigProvider } from 'ant-design-vue';
+ import { XProvider } from 'ant-design-x-vue';

  const App = () => (
-   <ConfigProvider>
+   <XProvider>
      <YourApp />
-   </ConfigProvider>
+   </XProvider>
  );

Examples

Direction

Direction:

LTRRTL

• Conversation - 1
• Conversation - 2

Hello Ant Design X!

Hello World!

Ignite Your Creativity

Tell me a Joke

Hello Ant Design X!

status: success

Ant Design X help you build AI chat/platform app as ready-to-use 📦.

Hello World!

status: success

Pending...

status: pending

Direction

Here lists the components that support rtl direction, and you can switch directions in the demo.

<script setup lang="tsx">
import {
  AlipayCircleOutlined,
  BulbOutlined,
  CheckCircleOutlined,
  GithubOutlined,
  LoadingOutlined,
  SmileOutlined,
  UserOutlined,
} from '@ant-design/icons-vue';
import { Card, Divider, Flex, Radio, Typography } from 'ant-design-vue';
import {
  Bubble,
  Conversations,
  Prompts,
  Sender,
  Suggestion,
  ThoughtChain,
  XProvider,
} from 'ant-design-x-vue';
import type { XProviderProps } from 'ant-design-x-vue';
import { ref } from 'vue';

defineOptions({ name: 'AXProviderDirection' });

const value = ref('');
const direction = ref<XProviderProps['direction']>('ltr');

defineRender(() => (
  <>
    <Flex gap={12} style={{ marginBottom: '16px' }} align="center">
      <Typography.Text>Direction:</Typography.Text>
      <Radio.Group value={direction.value} onChange={(e: any) => (direction.value = e.target.value)}>
        <Radio.Button value="ltr">LTR</Radio.Button>
        <Radio.Button value="rtl">RTL</Radio.Button>
      </Radio.Group>
    </Flex>

    <Flex gap={12} vertical>
      <Card>
        <XProvider direction={direction.value}>
          <Flex style={{ height: '500px' }} gap={12}>
            <Conversations
              style={{ width: '200px' }}
              defaultActiveKey="1"
              items={[
                { key: '1', label: 'Conversation - 1', icon: <GithubOutlined /> },
                { key: '2', label: 'Conversation - 2', icon: <AlipayCircleOutlined /> },
              ]}
            />
            <Divider type="vertical" style={{ height: '100%' }} />
            <Flex vertical justify="space-between" style={{ flex: 1 }}>
              <Bubble.List
                items={[
                  {
                    key: '1',
                    role: 'user',
                    placement: 'end',
                    content: 'Hello Ant Design X!',
                    avatar: <UserOutlined />,
                  },
                  { key: '2', role: 'ai', content: 'Hello World!' },
                  { key: '3', role: 'ai', content: '', loading: true },
                ]}
              />
              <Flex vertical gap={12}>
                <Prompts
                  items={[
                    {
                      key: '1',
                      icon: <BulbOutlined style={{ color: '#FFD700' }} />,
                      label: 'Ignite Your Creativity',
                    },
                    {
                      key: '2',
                      icon: <SmileOutlined style={{ color: '#52C41A' }} />,
                      label: 'Tell me a Joke',
                    },
                  ]}
                />
                <Suggestion items={[{ label: 'Write a report', value: 'report' }]}>
                  {{
                    default: ({ onTrigger, onKeyDown }: any) => (
                      <Sender
                        value={value.value}
                        onChange={(nextVal: string) => {
                          if (nextVal === '/') {
                            onTrigger();
                          } else if (!nextVal) {
                            onTrigger(false);
                          }
                          value.value = nextVal;
                        }}
                        onKeyDown={onKeyDown}
                        placeholder='Type "/" to trigger suggestion'
                      />
                    ),
                  }}
                </Suggestion>
              </Flex>
            </Flex>
            <Divider type="vertical" style={{ height: '100%' }} />
            <ThoughtChain
              style={{ width: '200px' }}
              items={[
                {
                  title: 'Hello Ant Design X!',
                  status: 'success',
                  description: 'status: success',
                  icon: <CheckCircleOutlined />,
                  content:
                    'Ant Design X help you build AI chat/platform app as ready-to-use 📦.',
                },
                {
                  title: 'Hello World!',
                  status: 'success',
                  description: 'status: success',
                  icon: <CheckCircleOutlined />,
                },
                {
                  title: 'Pending...',
                  status: 'loading',
                  description: 'status: pending',
                  icon: <LoadingOutlined />,
                },
              ]}
            />
          </Flex>
        </XProvider>
      </Card>
    </Flex>
  </>
));
</script>

Hide source

Theme

ColorPrimary:文字颜色:

• Conversation - 1
• Conversation - 2

Do you want?

Hot Topics

What are you interested in?

Design Guide

How to design a good product?

Start Creating

How to start a new project?

Theme

Modify the theme through theme.

<script setup lang="tsx">
import {
  CommentOutlined,
  FireOutlined,
  HeartOutlined,
  ReadOutlined,
  RocketOutlined,
  SmileOutlined,
} from '@ant-design/icons-vue';
import { Card, Divider, Flex, message, Space, Typography } from 'ant-design-vue';
import { Conversations, Prompts, Sender, Suggestion, XProvider } from 'ant-design-x-vue';
import { computed, ref } from 'vue';

function withAlpha(hex: string, alpha: number) {
  const raw = hex.replace('#', '');
  const full = raw.length === 3 ? raw.split('').map((c) => c + c).join('') : raw;
  const value = Number.parseInt(full, 16);
  if (!Number.isFinite(value) || full.length !== 6) return `rgba(0, 0, 0, ${alpha})`;
  const r = (value >> 16) & 255;
  const g = (value >> 8) & 255;
  const b = value & 255;
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}

defineOptions({ name: 'AXProviderTheme' });

const colorPrimary = ref('#d10eef');
// Prompt cards use a fixed light gradient. Dark docs would otherwise paint
// their labels with the dark-algorithm text token (near white).
const textColor = ref('#141414');

const promptTextStyle = computed(() => ({
  '--ax-theme-demo-text': textColor.value,
  '--ax-theme-demo-desc': withAlpha(textColor.value, 0.65),
}));

const renderTitle = (icon: any, title: string) => (
  <Space align="start">
    {icon}
    <span>{title}</span>
  </Space>
);

const promptItems = [
  {
    key: '1',
    label: renderTitle(<FireOutlined style={{ color: '#FF4D4F' }} />, 'Hot Topics'),
    description: 'What are you interested in?',
    children: [
      { key: '1-1', description: "What's new in X?" },
      { key: '1-2', description: "What's AGI?" },
      { key: '1-3', description: 'Where is the doc?' },
    ],
  },
  {
    key: '2',
    label: renderTitle(<ReadOutlined style={{ color: '#1890FF' }} />, 'Design Guide'),
    description: 'How to design a good product?',
    children: [
      { key: '2-1', icon: <HeartOutlined />, description: 'Know the well' },
      { key: '2-2', icon: <SmileOutlined />, description: 'Set the AI role' },
      { key: '2-3', icon: <CommentOutlined />, description: 'Express the feeling' },
    ],
  },
  {
    key: '3',
    label: renderTitle(<RocketOutlined style={{ color: '#722ED1' }} />, 'Start Creating'),
    description: 'How to start a new project?',
    children: [
      { key: '3-1', label: 'Fast Start', description: 'Install Ant Design X' },
      { key: '3-2', label: 'Online Playground', description: 'Play on the web without installing' },
    ],
  },
];

defineRender(() => (
  <>
    <Flex gap={12} style={{ marginBottom: '16px' }} align="center">
      <Typography.Text>ColorPrimary:</Typography.Text>
      <input
        type="color"
        value={colorPrimary.value}
        onInput={(e: Event) => {
          colorPrimary.value = (e.target as HTMLInputElement).value;
        }}
      />
      <Typography.Text>文字颜色:</Typography.Text>
      <input
        type="color"
        value={textColor.value}
        onInput={(e: Event) => {
          textColor.value = (e.target as HTMLInputElement).value;
        }}
      />
    </Flex>
    <Card>
      <XProvider theme={{ token: { colorPrimary: colorPrimary.value } }}>
        <Flex style={{ height: '500px' }} gap={12}>
          <Conversations
            style={{ width: '130px' }}
            creation={{ onClick: () => {} }}
            defaultActiveKey="1"
            items={[
              { key: '1', label: 'Conversation - 1' },
              { key: '2', label: 'Conversation - 2' },
            ]}
          />
          <Divider type="vertical" style={{ height: '100%' }} />
          <Flex justify="space-between" vertical style={{ flex: 1 }} gap={8}>
            <Prompts
              class="ax-provider-theme-prompts"
              style={promptTextStyle.value}
              title="Do you want?"
              items={promptItems}
              wrap
              styles={{
                list: { justifyContent: 'space-around', maxWidth: '1000px', margin: '0 auto' },
                item: {
                  flex: 'none',
                  width: 'calc(30% - 6px)',
                  backgroundImage: 'linear-gradient(137deg, #e5f4ff 0%, #efe7ff 100%)',
                  border: '0',
                },
                subItem: { background: 'rgba(255,255,255,0.45)', border: '1px solid #FFF' },
              }}
              onItemClick={(info: any) => {
                message.success(`You clicked a prompt: ${info.data.key}`);
              }}
            />
            <Suggestion items={[{ label: 'Write a report', value: 'report' }]}>
              {{
                default: ({ onTrigger, onKeyDown }: any) => (
                  <Sender
                    onChange={(nextVal: string) => {
                      if (nextVal === '/') {
                        onTrigger();
                      } else if (!nextVal) {
                        onTrigger(false);
                      }
                    }}
                    onKeyDown={onKeyDown}
                    placeholder='Type "/" to trigger suggestion'
                  />
                ),
              }}
            </Suggestion>
          </Flex>
        </Flex>
      </XProvider>
    </Card>
  </>
));
</script>

<style>
.ax-provider-theme-prompts .ant-prompts-label {
  color: var(--ax-theme-demo-text, #141414) !important;
}
.ax-provider-theme-prompts .ant-prompts-desc,
.ax-provider-theme-prompts .ant-prompts-icon {
  color: var(--ax-theme-demo-desc, rgba(0, 0, 0, 0.65)) !important;
}
</style>

Hide source

Internationalization

Change locale of components:

English中文

• 帮我写作
• AI编码
• 图片生成
• 深度搜索

Internationalization

Switch component text through locale. You can merge the language packs of ant-design-vue with ant-design-x-vue's zh_CN / en_US and pass it in.

<script setup lang="tsx">
import {
  CodeOutlined,
  FileImageOutlined,
  FileSearchOutlined,
  EditOutlined,
} from '@ant-design/icons-vue';
import { Card, Flex, Radio, Typography } from 'ant-design-vue';
import enUS from 'ant-design-vue/es/locale/en_US';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import { Actions, Conversations, XProvider, en_US, zh_CN } from 'ant-design-x-vue';
import { ref } from 'vue';

defineOptions({ name: 'AXProviderLocale' });

const labels = {
  en: {
    write: 'Help Me Write',
    coding: 'AI Coding',
    createImage: 'Create Image',
    deepSearch: 'Deep Search',
  },
  zh: {
    write: '帮我写作',
    coding: 'AI编码',
    createImage: '图片生成',
    deepSearch: '深度搜索',
  },
};

const localeType = ref<'zh' | 'en'>('zh');
const locale = ref({ ...zhCN, ...zh_CN });

const changeLocale = (e: { target: { value: 'zh' | 'en' } }) => {
  const next = e.target.value;
  localeType.value = next;
  locale.value = next === 'zh' ? { ...zhCN, ...zh_CN } : { ...enUS, ...en_US };
};

const actionItems = [
  {
    key: 'feedback',
    actionRender: () => <Actions.Feedback />,
  },
  {
    key: 'copy',
    label: 'copy',
    actionRender: () => <Actions.Copy text="copy value" />,
  },
  {
    key: 'audio',
    label: 'audio',
    actionRender: () => <Actions.Audio />,
  },
];

defineRender(() => (
  <>
    <Flex gap={12} style={{ marginBottom: '16px' }} align="center">
      <Typography.Text>Change locale of components:</Typography.Text>
      <Radio.Group value={localeType.value} onChange={changeLocale}>
        <Radio.Button value="en">English</Radio.Button>
        <Radio.Button value="zh">中文</Radio.Button>
      </Radio.Group>
    </Flex>
    <XProvider locale={locale.value}>
      <Flex gap={12} vertical>
        <Card>
          <Conversations
            style={{ width: '200px' }}
            defaultActiveKey="write"
            creation={{ onClick: () => {} }}
            items={[
              {
                key: 'write',
                label: labels[localeType.value].write,
                icon: <EditOutlined />,
              },
              {
                key: 'coding',
                label: labels[localeType.value].coding,
                icon: <CodeOutlined />,
              },
              {
                key: 'createImage',
                label: labels[localeType.value].createImage,
                icon: <FileImageOutlined />,
              },
              {
                key: 'deepSearch',
                label: labels[localeType.value].deepSearch,
                icon: <FileSearchOutlined />,
              },
            ]}
          />
        </Card>
        <Card>
          <Actions items={actionItems} />
        </Card>
      </Flex>
    </XProvider>
  </>
));
</script>

Hide source

Keyboard shortcuts

You can switch sessions using the shortcut key: Alt/⌥ + number

• Help Me Write
• AI Coding
• Create Image
• Deep Search

Keyboard shortcuts

Set shortcut keys through shortcutKeys.

<script setup lang="tsx">
import {
  CodeOutlined,
  FileImageOutlined,
  FileSearchOutlined,
  EditOutlined,
} from '@ant-design/icons-vue';
import { Card, Flex, Tag, Typography } from 'ant-design-vue';
import { Conversations, XProvider } from 'ant-design-x-vue';

defineOptions({ name: 'AXProviderShortcutKeys' });

defineRender(() => (
  <>
    <Flex gap={12} style={{ marginBottom: '16px' }} align="center">
      <Typography.Text>
        You can switch sessions using the shortcut key: <Tag>Alt/⌥</Tag> + <Tag>number</Tag>
      </Typography.Text>
    </Flex>
    <Card>
      <XProvider
        conversations={{
          shortcutKeys: {
            items: ['Alt', 'number'],
          },
        }}
      >
        <Conversations
          style={{ width: '200px' }}
          defaultActiveKey="write"
          items={[
            { key: 'write', label: 'Help Me Write', icon: <EditOutlined /> },
            { key: 'coding', label: 'AI Coding', icon: <CodeOutlined /> },
            { key: 'createImage', label: 'Create Image', icon: <FileImageOutlined /> },
            { key: 'deepSearch', label: 'Deep Search', icon: <FileSearchOutlined /> },
          ]}
        />
      </XProvider>
    </Card>
  </>
));
</script>

Hide source

API

XProvider fully inherits from antdv's ConfigProvider. Refer to properties here: Antdv ConfigProvider

Components Configuration

Prop	Description	Type	Default	Version
actions	Global configuration for the action list component	ComponentStyleConfig	-	-
attachments	Global configuration for the attachment input component	ComponentStyleConfig	-	-
bubble	Global configuration for the bubble component	ComponentStyleConfig	-	-
conversations	Global configuration for the conversation component	ComponentStyleConfig &	-	-
fileCard	Global configuration for the file card component	ComponentStyleConfig	-	-
prompts	Global configuration for the prompts component	ComponentStyleConfig	-	-
sender	Global configuration for the input box component	ComponentStyleConfig	-	-
sources	Global configuration for the references component	ComponentStyleConfig	-	-
suggestion	Global configuration for the suggestion component	ComponentStyleConfig	-	-
think	Global configuration for the thinking component	ComponentStyleConfig	-	-
thoughtChain	Global configuration for the thought chain component	ComponentStyleConfig	-	-
welcome	Global configuration for the welcome component	ComponentStyleConfig	-	-

Markdown component configuration

Prop	Description	Type	Default	Version
highlightCode	Global configuration for the code highlighting component	ComponentStyleConfig	-	-
mermaid	Global configuration for the Mermaid chart component	ComponentStyleConfig	-	-

ComponentStyleConfig

interface ComponentStyleConfig {
  style: CSSProperties;
  styles: Record<string, CSSProperties>;
  className: string;
  classNames: Record<string, string>;
}

ShortcutKeys

type PrefixKeysType = {
  Ctrl: [keyof KeyboardEvent, string, string];
  Alt: [keyof KeyboardEvent, string, string];
  Meta: [keyof KeyboardEvent, string, string];
  Shift: [keyof KeyboardEvent, string, string];
};

type ShortcutKeys<CustomKey = number | 'number'> =
  | [keyof PrefixKeysType, keyof PrefixKeysType, CustomKey]
  | [keyof PrefixKeysType, CustomKey];

Design Token

XProvider itself does not provide independent Component Tokens; please configure global Tokens and individual Component Tokens through theme.

Contributors

Contributors

Loading contributors…