Bubble

Bubble component for chat.

Usageimport { Bubble } from 'ant-design-x-vue'

Sourcepackages/components/bubble

Examples

Basic

Ant Design X

Hello World Next line Tab indent

Basic

Basic usage.

<script setup lang="tsx">
defineOptions({ name: 'AXBubbleBasicV2' });

import { AntDesignOutlined, CopyOutlined, CheckOutlined, RedoOutlined } from '@ant-design/icons-vue';
import { Bubble, Actions } from 'ant-design-x-vue';
import { Avatar } from 'ant-design-vue';
import { ref, h } from 'vue';

const copiedKey = ref('');

const actionItems = (content: string) => [
  {
    key: 'copy',
    icon: copiedKey.value === content ? <CheckOutlined /> : <CopyOutlined />,
    label: 'Copy',
    onItemClick: () => {
      navigator.clipboard.writeText(content);
      copiedKey.value = content;
      setTimeout(() => { copiedKey.value = ''; }, 2000);
    },
  },
  {
    key: 'retry',
    icon: <RedoOutlined />,
    label: 'Retry',
  },
];

const text = `Hello World\nNext line\nTab\tindent`;

defineRender(() => (
  <Bubble
    content={text}
    typing={{ effect: 'fade-in' }}
    header={<h5>Ant Design X</h5>}
    footer={(content) => (
      <Actions items={actionItems(content as string)} onClick={() => console.log(content)} />
    )}
    avatar={<Avatar icon={<AntDesignOutlined />} />}
  />
));
</script>

Hide source

Loading

Loading state:

Loading

Controls the loading state through the loading property.

<script setup lang="tsx">
defineOptions({ name: 'AXBubbleLoadingV2' });

import { ref } from 'vue';
import { Bubble } from 'ant-design-x-vue';
import { Flex, Switch } from 'ant-design-vue';

const loading = ref(true);

defineRender(() => (
  <Flex gap="large" vertical>
    <Bubble loading={loading.value} content="hello world !" />
    <Flex gap="large" wrap>
      Loading state:
      <Switch checked={loading.value} onChange={(val: boolean) => (loading.value = val)} />
    </Flex>
  </Flex>
));
</script>

Hide source

Variant and shape

filled - default

filled - round

filled - corner left

filled - corner right

outlined - default

outlined - round

outlined - corner left

outlined - corner right

shadow - default

shadow - round

shadow - corner left

shadow - corner right

borderless bubble

Variant and shape

Sets the bubble style variant through the variant property and the bubble shape through the shape property.

<script setup lang="tsx">
defineOptions({ name: 'AXBubbleVariantAndShapeV2' });

import { Bubble } from 'ant-design-x-vue';
import { Flex } from 'ant-design-vue';

defineRender(() => (
  <Flex vertical gap="small" class="ax-bubble-variants">
    <Flex gap="small" wrap>
      <Bubble content="filled - default" />
      <Bubble content="filled - round" shape="round" />
      <Bubble content="filled - corner left" shape="corner" />
      <Bubble content="filled - corner right" shape="corner" placement="end" />
    </Flex>
    <Flex gap="small" wrap>
      <Bubble content="outlined - default" variant="outlined" />
      <Bubble content="outlined - round" variant="outlined" shape="round" />
      <Bubble content="outlined - corner left" variant="outlined" shape="corner" />
      <Bubble content="outlined - corner right" variant="outlined" shape="corner" placement="end" />
    </Flex>
    <Flex gap="small" wrap>
      <Bubble content="shadow - default" variant="shadow" />
      <Bubble content="shadow - round" variant="shadow" shape="round" />
      <Bubble content="shadow - corner left" variant="shadow" shape="corner" />
      <Bubble content="shadow - corner right" variant="shadow" shape="corner" placement="end" />
    </Flex>
    <Flex gap="small" wrap style={{ marginTop: '8px' }}>
      <Bubble content={<span>borderless bubble</span>} variant="borderless" />
    </Flex>
  </Flex>
));
</script>

<style>
.ax-bubble-variants :deep(.ant-bubble) {
  flex: none;
  max-width: 100%;
}
</style>

Hide source

Avatar and placement

align left

align right

Avatar and placement

Sets a custom avatar through avatar, placement through placement, and extra content through extra.

<script setup lang="tsx">
defineOptions({ name: 'AXBubbleSiderAndPlacementV2' });

import { CopyOutlined, UserOutlined } from '@ant-design/icons-vue';
import { Bubble } from 'ant-design-x-vue';
import { Avatar, Flex, Tooltip } from 'ant-design-vue';

defineRender(() => (
  <Flex vertical gap="small">
    <Flex gap="small" wrap>
      <div style={{ width: '100%' }}>
        <Bubble
          content="align left"
          avatar={
            <Tooltip title="main side">
              <Avatar icon={<UserOutlined />} />
            </Tooltip>
          }
          extra={
            <Tooltip title="extra side">
              <CopyOutlined />
            </Tooltip>
          }
        />
      </div>
    </Flex>
    <Flex gap="small" wrap>
      <div style={{ width: '100%' }}>
        <Bubble
          content="align right"
          placement="end"
          avatar={
            <Tooltip title="main side">
              <Avatar icon={<UserOutlined />} />
            </Tooltip>
          }
          extra={
            <Tooltip title="extra side">
              <CopyOutlined />
            </Tooltip>
          }
        />
      </div>
    </Flex>
  </Flex>
));
</script>

Hide source

Header

header

align left

header

align right

Header

Sets the bubble header through the header property.

<script setup lang="tsx">
defineOptions({ name: 'AXBubbleHeaderV2' });

import { UserOutlined } from '@ant-design/icons-vue';
import { Bubble } from 'ant-design-x-vue';
import { Avatar, Flex } from 'ant-design-vue';

defineRender(() => (
  <Flex vertical gap="small">
    <Flex gap="small" wrap>
      <div style={{ width: '100%' }}>
        <Bubble content="align left" header="header" avatar={<Avatar icon={<UserOutlined />} />} />
      </div>
    </Flex>
    <Flex gap="small" wrap>
      <div style={{ width: '100%' }}>
        <Bubble
          content="align right"
          placement="end"
          header="header"
          avatar={<Avatar icon={<UserOutlined />} />}
        />
      </div>
    </Flex>
  </Flex>
));
</script>

Hide source

Footer and placement

footer

outer footer

footer

inner footer

footer

outer footer and align right

footer

inner footer and align left

Footer and placement

Sets the bubble footer through the footer property and controls the footer position through footerPlacement.

<script setup lang="tsx">
defineOptions({ name: 'AXBubbleFooterV2' });

import { CopyOutlined, RedoOutlined, UserOutlined } from '@ant-design/icons-vue';
import { Bubble, Actions } from 'ant-design-x-vue';
import { Avatar, Flex } from 'ant-design-vue';

const actionItems = [
  {
    key: 'retry',
    icon: <RedoOutlined />,
    label: 'Retry',
  },
  {
    key: 'copy',
    icon: <CopyOutlined />,
    label: 'Copy',
  },
];

defineRender(() => (
  <Flex vertical gap="small">
    <Flex gap="small" wrap>
      <div style={{ width: '100%' }}>
        <Bubble
          content="outer footer"
          header="footer"
          avatar={<Avatar icon={<UserOutlined />} />}
          footer={(content) => <Actions items={actionItems} onClick={() => console.log(content)} />}
        />
      </div>
    </Flex>
    <Flex gap="small" wrap>
      <div style={{ width: '100%' }}>
        <Bubble
          content="inner footer"
          placement="end"
          footerPlacement="inner-end"
          header="footer"
          avatar={<Avatar icon={<UserOutlined />} />}
          footer={(content) => <Actions items={actionItems} onClick={() => console.log(content)} />}
        />
      </div>
    </Flex>
    <Flex gap="small" wrap>
      <div style={{ width: '100%' }}>
        <Bubble
          content="outer footer and align right"
          footerPlacement="outer-end"
          header="footer"
          avatar={<Avatar icon={<UserOutlined />} />}
          footer={(content) => <Actions items={actionItems} onClick={() => console.log(content)} />}
        />
      </div>
    </Flex>
    <Flex gap="small" wrap>
      <div style={{ width: '100%' }}>
        <Bubble
          content="inner footer and align left"
          placement="end"
          footerPlacement="inner-start"
          header="footer"
          avatar={<Avatar icon={<UserOutlined />} />}
          footer={(content) => <Actions items={actionItems} onClick={() => console.log(content)} />}
        />
      </div>
    </Flex>
  </Flex>
));
</script>

Hide source

System message

Hello, this is a system message

Hello, this is a system message

ok

Hello, this is a system message

cancel

System message

Displays system messages using the Bubble.System component.

<script setup lang="tsx">
defineOptions({ name: 'AXBubbleSystemV2' });

import { Bubble } from 'ant-design-x-vue';
import { Flex, Space, Typography } from 'ant-design-vue';

const text = `Hello, this is a system message`;

defineRender(() => (
  <Flex gap={16} vertical>
    <Bubble.System content={text} />
    <Bubble.System
      variant="outlined"
      shape="round"
      content={
        <Space>
          {text}
          <Typography.Link>ok</Typography.Link>
        </Space>
      }
    />
    <Bubble.System
      variant="borderless"
      content={
        <Space>
          {text}
          <Typography.Link>cancel</Typography.Link>
        </Space>
      }
    />
  </Flex>
));
</script>

Hide source

Divider

message 1

Solid

message 2

Dashed

message 3

Dotted

message 4

Plain Text

message 5

Divider

Use the Bubble.Divider component to add a separator.

<script setup lang="tsx">
defineOptions({ name: 'AXBubbleDividerV2' });

import { Bubble } from 'ant-design-x-vue';
import { Flex } from 'ant-design-vue';

defineRender(() => (
  <Flex gap={16} vertical>
    <Bubble content="message 1" />
    <Bubble.Divider content="Solid" />
    <Bubble content="message 2" placement="end" />
    <Bubble.Divider content="Dashed" dividerProps={{ variant: 'dashed' }} />
    <Bubble content="message 3" />
    <Bubble.Divider content="Dotted" dividerProps={{ variant: 'dotted' }} />
    <Bubble content="message 4" placement="end" />
    <Bubble.Divider content="Plain Text" dividerProps={{ plain: true }} />
    <Bubble content="message 5" />
  </Flex>
));
</script>

Hide source

Animation

非流式数据 / Non-streaming data:

动画效果 / Animation effects:

fade-intyping

保留公共前缀 / Preserve common prefix:

Animation

Configure animation effects through the typing property, supporting two effects: fade-in and typing.

<script setup lang="tsx">
defineOptions({ name: 'AXBubbleAnimationV2' });

import { ref } from 'vue';
import { CopyOutlined, RedoOutlined, UserOutlined } from '@ant-design/icons-vue';
import { Bubble, Actions } from 'ant-design-x-vue';
import { Avatar, Button, Divider, Flex, RadioGroup, RadioButton, Switch } from 'ant-design-vue';

const text = 'Ant Design X - Better UI toolkit for your AI Chat WebApp. '.repeat(5);
const text2 = 'Ant Design X - Build your AI Chat WebApp with an easier way. '.repeat(5);

const actionItems = [
  {
    key: 'retry',
    icon: <RedoOutlined />,
    label: 'Retry',
  },
  {
    key: 'copy',
    icon: <CopyOutlined />,
    label: 'Copy',
  },
];

const loading = ref(true);
const data = ref('');
const effect = ref<'fade-in' | 'typing'>('fade-in');
const keepPrefix = ref(false);
// The same string does not change `content`, so remount to replay it.
// A different string stays mounted so `keepPrefix` can keep the shared head.
const playback = ref(0);

const loadText = (next: string) => {
  loading.value = false;
  if (data.value === next) playback.value += 1;
  data.value = next;
};

const loadAll = () => loadText(text);
const replaceText = () => loadText(text2);

defineRender(() => (
  <Flex vertical gap="small">
    <Flex gap="small" align="center">
      <span>非流式数据 / Non-streaming data:</span>
      <Button type="primary" onClick={loadAll}>
        load data-1
      </Button>
      <Button onClick={replaceText}>load data-2</Button>
    </Flex>
    <Flex gap="small" align="center">
      <span>动画效果 / Animation effects:</span>
      <RadioGroup value={effect.value} onChange={(e: any) => (effect.value = e.target.value)}>
        <RadioButton value="fade-in">fade-in</RadioButton>
        <RadioButton value="typing">typing</RadioButton>
      </RadioGroup>
    </Flex>
    <Flex gap="small" align="center">
      <span>保留公共前缀 / Preserve common prefix:</span>
      <Switch checked={keepPrefix.value} onChange={(val: boolean) => (keepPrefix.value = val)} />
    </Flex>
    <Divider />
    <Flex gap="small" align="center">
      <Bubble
        key={playback.value}
        loading={loading.value}
        content={data.value}
        typing={{ effect: effect.value, interval: 50, step: 3, keepPrefix: keepPrefix.value }}
        header={<h5>ADX</h5>}
        footer={(content) => <Actions items={actionItems} onClick={() => console.log(content)} />}
        avatar={<Avatar icon={<UserOutlined />} />}
        onTyping={() => console.log('typing')}
        onTypingComplete={() => console.log('typing complete')}
      />
    </Flex>
  </Flex>
));
</script>

Hide source

Editable

editable bubble 1

editable bubble 2

Editable

Enable editing functionality through the editable property.

<script setup lang="tsx">
defineOptions({ name: 'AXBubbleEditableV2' });

import { ref } from 'vue';
import { EditOutlined, UserOutlined } from '@ant-design/icons-vue';
import { Bubble, Actions } from 'ant-design-x-vue';
import { Avatar, Flex } from 'ant-design-vue';

const editable = ref<[boolean, { editing: boolean; okText: string; cancelText: any }]>([
  false,
  { editing: false, okText: 'ok', cancelText: <span>cancel</span> },
]);
const content = ref(['editable bubble 1', 'editable bubble 2']);

defineRender(() => (
  <Flex vertical gap="small" style={{ minHeight: '200px' }}>
    <Flex>
      <Bubble
        editable={editable.value[0]}
        content={content.value[0]}
        avatar={<Avatar icon={<UserOutlined />} />}
        footer={
          <Actions
            items={[
              {
                key: 'edit',
                icon: <EditOutlined />,
                label: 'edit',
              },
            ]}
            onClick={({ key }) => (editable.value = [key === 'edit', editable.value[1]])}
          />
        }
        onEditCancel={() => (editable.value = [false, editable.value[1]])}
        onEditConfirm={(val: string) => {
          content.value = [val, content.value[1]];
          editable.value = [false, editable.value[1]];
        }}
      />
    </Flex>
    <Flex>
      <Bubble
        style={{ width: '100%' }}
        placement="end"
        editable={editable.value[1]}
        content={content.value[1]}
        avatar={<Avatar icon={<UserOutlined />} />}
        footer={
          <Actions
            items={[
              {
                key: 'edit',
                icon: <EditOutlined />,
                label: 'edit',
              },
            ]}
            onClick={({ key }) =>
              (editable.value = [editable.value[0], { ...editable.value[1], editing: key === 'edit' }])
            }
          />
        }
        onEditCancel={() => (editable.value = [editable.value[0], { ...editable.value[1], editing: false }])}
        onEditConfirm={(val: string) => {
          content.value = [content.value[0], val];
          editable.value = [editable.value[0], { ...editable.value[1], editing: false }];
        }}
      />
    </Flex>
  </Flex>
));
</script>

Hide source

Streaming

流式数据 / steaming data:

强制关闭流式标志 / Force close the streaming flag:

启用动画 / Enable animation:

onTypingComplete 触发次数 / trigger times: 0

Streaming

Indicate the streaming status through the streaming property, used in conjunction with animation effects.

<script setup lang="tsx">
defineOptions({ name: 'AXBubbleStreamV2' });

import { ref, watch, onUnmounted, computed } from 'vue';
import { UserOutlined } from '@ant-design/icons-vue';
import { Bubble, type BubbleProps } from 'ant-design-x-vue';
import { Avatar, Button, Divider, Flex, Switch, Typography } from 'ant-design-vue';

const text = 'Ant Design X - Better UI toolkit for your AI Chat WebApp. '.repeat(5);

// 模拟流式内容
const streamContent = ref('');
const isDone = ref(true);
let timer: number | null = null;

const startStream = (content: string, step: number, interval: number) => {
  isDone.value = false;
  streamContent.value = '';
  let currentLength = 0;

  if (timer) clearInterval(timer);
  timer = setInterval(() => {
    currentLength += step;
    if (currentLength <= content.length - 1) {
      streamContent.value = content.slice(0, currentLength);
    } else {
      streamContent.value = content;
      isDone.value = true;
      if (timer) clearInterval(timer);
    }
  }, interval) as any;
};

onUnmounted(() => {
  if (timer) clearInterval(timer);
});

const loading = ref(true);
const data = ref('');
const typing = ref(false);
const disableStreaming = ref(false);
const count = ref(0);

const typingConfig: BubbleProps['typing'] = {
  effect: 'typing',
  step: 5,
  interval: 50,
  keepPrefix: true,
};

const loadStream = (step: number, interval: number) => {
  loading.value = false;
  count.value = 0;
  const newText = `${(Math.random() * 10).toFixed(0)} - ${text}`;
  data.value = newText;
  startStream(newText, step, interval);
};

const handleClear = () => {
  data.value = '';
  streamContent.value = '';
  isDone.value = true;
  if (timer) clearInterval(timer);
};

defineRender(() => (
  <Flex vertical gap="small">
    <Flex gap="small" align="center">
      <span>流式数据 / steaming data:</span>
      <Button type="primary" onClick={() => loadStream(2, 100)}>
        load slowly
      </Button>
      <Button onClick={() => loadStream(10, 50)}>load quickly</Button>
      <Button type="link" onClick={handleClear}>
        clear
      </Button>
    </Flex>
    <Flex gap="small" align="center">
      <span>强制关闭流式标志 / Force close the streaming flag: </span>
      <Switch checked={disableStreaming.value} onChange={(val: boolean) => (disableStreaming.value = val)} />
    </Flex>
    <Flex gap="small" align="center">
      <span>启用动画 / Enable animation:</span>
      <Switch checked={typing.value} onChange={(val: boolean) => (typing.value = val)} />
    </Flex>
    <Flex gap="small" align="center">
      <span>
        onTypingComplete 触发次数 / trigger times:{' '}
        <Typography.Text type="danger">{count.value}</Typography.Text>
      </span>
    </Flex>
    <Divider />
    <Flex gap="small" align="center">
      <Bubble
        loading={loading.value}
        content={streamContent.value}
        streaming={disableStreaming.value ? false : !isDone.value}
        typing={typing.value ? typingConfig : false}
        header={<h5>ADX</h5>}
        avatar={<Avatar icon={<UserOutlined />} />}
        onTyping={() => console.log('typing')}
        onTypingComplete={() => {
          count.value++;
          console.log('typing complete');
        }}
      />
    </Flex>
  </Flex>
));
</script>

Hide source

Custom content render

Preview

Ant Design X

Custom content render

Customize rendered content through contentRender.

<script setup lang="tsx">
defineOptions({ name: 'AXBubbleCustomContentV2' });

import { ref } from 'vue';
import { Bubble } from 'ant-design-x-vue';
import { Button, Flex, Image } from 'ant-design-vue';

type ContentType = {
  imageUrl: string;
  text: string;
  actionNode: any;
};

const content = ref<ContentType>({
  imageUrl:
    'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original',
  text: 'Ant Design X',
  actionNode: <>Click Me</>,
});

defineRender(() => (
  <Bubble
    content={content.value}
    contentRender={(c) => {
      return (
        <Flex gap="middle" align="center">
          <Image height={50} src={(c as ContentType).imageUrl} />
          <span style={{ fontSize: '18px', fontWeight: 'bold' }}>{(c as ContentType).text}</span>
        </Flex>
      );
    }}
    footer={(c) => {
      return (
        <Button
          onClick={() => {
            content.value = {
              ...content.value,
              actionNode: <>🎉 Happy Ant Design X !</>,
            };
          }}
          type="text"
        >
          {(c as ContentType)?.actionNode}
        </Button>
      );
    }}
  />
));
</script>

Hide source

Render Markdown content

Render as markdown content to show rich text!

Link: Ant Design X

Render Markdown content

Render rich text together with Markdown.

<script setup lang="tsx">
defineOptions({ name: 'AXBubbleMarkdownV2' });

import { ref, watchEffect, type CSSProperties } from 'vue';
import { Bubble } from 'ant-design-x-vue';
import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import { Button, Flex, theme, Typography } from 'ant-design-vue';

const text = `
> Render as markdown content to show rich text!

Link: [Ant Design X](https://x.ant.design)
`.trim();

const { token } = theme.useToken();
const index = ref(text.length);
const isServer = import.meta.env.SSR;

watchEffect((onCleanup) => {
  if (!isServer && index.value < text.length) {
    const timerId = setTimeout(() => {
      index.value += 5;
    }, 20);
    onCleanup(() => clearTimeout(timerId));
  }
});

defineRender(() => (
  <Flex vertical gap={16}>
    <Flex>
      <Button type="primary" onClick={() => (index.value = 1)}>
        rerender
      </Button>
    </Flex>
    <Flex>
      <Bubble
        content={text.slice(0, index.value)}
        contentRender={(content) => (
          <Typography
            class="ax-bubble-md"
            style={{
              '--ax-link': token.value.colorLink,
              '--ax-link-hover': token.value.colorLinkHover,
            } as CSSProperties}
          >
            <XMarkdown content={content as string} />
          </Typography>
        )}
      />
    </Flex>
  </Flex>
));
</script>

<style>
/* Match the React Bubble markdown demo: antd Typography link, no glyph.
   `.vp-doc a` underlines and recolors anchors, and `.x-markdown-light a::after`
   appends a superscript ↗. */
.vp-doc .example-showcase .ax-bubble-md a {
  color: var(--ax-link, #1677ff);
  font-weight: 400;
  text-decoration: none;
}

.vp-doc .example-showcase .ax-bubble-md a:hover,
.vp-doc .example-showcase .ax-bubble-md a:active {
  color: var(--ax-link-hover, var(--ax-link, #1677ff));
  text-decoration: none;
}

.vp-doc .example-showcase .ax-bubble-md a::before,
.vp-doc .example-showcase .ax-bubble-md a::after {
  content: none !important;
}

.vp-doc .example-showcase .ax-bubble-md p,
.vp-doc .example-showcase .ax-bubble-md blockquote > p {
  margin: 0;
  line-height: 1.5714285714;
  font-size: inherit;
  color: inherit;
}

.vp-doc .example-showcase .ax-bubble-md blockquote {
  margin: 1em 0;
  padding: 0 0 0 0.6em;
  border: 0;
  border-inline-start: 4px solid rgba(100, 100, 100, 0.2);
  background: transparent;
  color: inherit;
  opacity: 0.85;
}
</style>

Hide source

GPT visualization

Render charts generated by the model in contentRender using @antv/gpt-vis. The vis code block in the browser is handled with new GPTVis({ container }).render(), and destroy() is called when the component is unmounted; server-side rendering does not create a canvas.

GPT-Vis, Components for GPTs, generative AI, and LLM projects. Not only UI Components. more...

Here's a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable growth particularly in recent years.

Use @antv/gpt-vis to draw Haidilao delivery revenue curves inside the bubble. Re-Render will re-stream the output.

<script setup lang="tsx">
defineOptions({ name: 'AXBubbleGptVisV2' });

import {
  defineComponent,
  nextTick,
  onBeforeUnmount,
  onMounted,
  ref,
  watch,
  watchEffect,
} from 'vue';
import { Bubble } from 'ant-design-x-vue';
import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import { Button, Flex, Typography } from 'ant-design-vue';
import { splitVisMarkdown, toRenderSyntax } from '../../shared/vis-markdown';

const text = `
**GPT-Vis**, Components for GPTs, generative AI, and LLM projects. Not only UI Components. [more...](https://github.com/antvis/GPT-Vis)

Here's a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable *growth* particularly in recent years.

\`\`\`vis
vis line
data
  - time 2013
    value 59.3
  - time 2014
    value 64.4
  - time 2015
    value 68.9
  - time 2016
    value 74.4
  - time 2017
    value 82.7
  - time 2018
    value 91.9
  - time 2019
    value 99.1
  - time 2020
    value 101.6
  - time 2021
    value 114.4
  - time 2022
    value 121
title Haidilao delivery revenue
axisXTitle year
axisYTitle sale
\`\`\`
`.trim();

type VisChart = { render: (value: string) => void; destroy: () => void };

const GptVisChart = defineComponent({
  name: 'GptVisChart',
  props: { syntax: { type: String, required: true } },
  setup(props) {
    const host = ref<HTMLDivElement | null>(null);
    let chart: VisChart | null = null;
    let painted = '';
    let disposed = false;

    const paint = (syntax: string) => {
      const value = toRenderSyntax(syntax);
      if (!chart || !value || value === painted) return;
      try {
        chart.render(value);
        painted = value;
      } catch (error) {
        console.warn(error);
      }
    };

    onMounted(() => {
      void (async () => {
        await nextTick();
        if (disposed || !host.value) return;
        const { GPTVis } = await import('@antv/gpt-vis');
        if (disposed || !host.value) return;
        const theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
        chart = new GPTVis({
          container: host.value,
          width: host.value.clientWidth || 640,
          height: 320,
          theme,
        });
        paint(props.syntax);
      })();
    });

    watch(() => props.syntax, (syntax) => paint(syntax));

    onBeforeUnmount(() => {
      disposed = true;
      chart?.destroy();
      chart = null;
    });

    return () => <div ref={host} class="ax-gpt-vis" />;
  },
});

const renderContent = (content: unknown) => {
  const part = splitVisMarkdown(String(content ?? ''));
  return (
    <Typography class="ax-bubble-gpt-vis">
      {part.before.trim() ? <XMarkdown content={part.before} /> : null}
      {part.syntax.trim().startsWith('vis ') ? <GptVisChart syntax={part.syntax} /> : null}
      {part.after.trim() ? <XMarkdown content={part.after} /> : null}
    </Typography>
  );
};

const index = ref(text.length);
const isServer = import.meta.env.SSR;

watchEffect((onCleanup) => {
  if (isServer || index.value >= text.length) return;
  const timerId = setTimeout(() => {
    index.value = Math.min(text.length, index.value + 5);
  }, 20);
  onCleanup(() => clearTimeout(timerId));
});

defineRender(() => (
  <Flex vertical gap="small">
    <Button style={{ alignSelf: 'flex-end' }} onClick={() => (index.value = 0)}>
      Re-Render
    </Button>
    <Bubble
      content={text.slice(0, index.value)}
      contentRender={renderContent}
      variant="outlined"
    />
  </Flex>
));
</script>

<style>
.vp-doc .example-showcase .ax-bubble-gpt-vis a {
  font-weight: 400;
  text-decoration: none;
}

.vp-doc .example-showcase .ax-bubble-gpt-vis a::before,
.vp-doc .example-showcase .ax-bubble-gpt-vis a::after {
  content: none !important;
}

.vp-doc .example-showcase .ax-bubble-gpt-vis p {
  margin: 0 0 0.6em;
  line-height: 1.7;
}

.ax-gpt-vis {
  width: 100%;
  min-height: 320px;
}
</style>

Hide source

Bubble list

启用 autoScroll / enabled autoScroll

定位到新气泡 / locate to new bubble

Bubble list

A preset bubble list that supports System and Divider types.

<script setup lang="tsx">
defineOptions({ name: 'AXBubbleListV2' });

import { computed, nextTick, onMounted, ref, type CSSProperties } from 'vue';
import {
  AntDesignOutlined,
  CheckOutlined,
  CopyOutlined,
  EditOutlined,
  LinkOutlined,
  RedoOutlined,
  UserOutlined,
} from '@ant-design/icons-vue';
import {
  Actions,
  Bubble,
  FileCard,
  type BubbleItemType,
  type BubbleListRef,
  type FileCardProps,
  type RoleType,
} from 'ant-design-x-vue';
import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import { Avatar, Button, Flex, Space, Switch, theme, Typography } from 'ant-design-vue';

const { token } = theme.useToken();

const actionItems = [
  {
    key: 'retry',
    icon: <RedoOutlined />,
    label: 'Retry',
  },
  {
    key: 'copy',
    icon: <CopyOutlined />,
    label: 'Copy',
  },
];

let id = 0;
const getKey = () => `bubble_${id++}`;

const genItem = (isAI: boolean, config?: Partial<BubbleItemType>): BubbleItemType => ({
  key: getKey(),
  role: isAI ? 'ai' : 'user',
  content: `${id} : ${isAI ? 'Mock AI content'.repeat(50) : 'Mock user content.'}`,
  ...config,
});

const text = `
> Render as markdown content to show rich text!

Link: [Ant Design X](https://x.ant.design)
`.trim();

const items = ref<BubbleItemType[]>([]);
const enableLocScroll = ref(true);
const autoScroll = ref(true);
const listRef = ref<BubbleListRef | null>(null);

const update = (key: string | number, data: Partial<BubbleItemType>) => {
  items.value = items.value.map((item) => (item.key === key ? { ...item, ...data } : item));
};

const add = (item: BubbleItemType) => {
  items.value = [...items.value, item];
};

onMounted(() => {
  items.value = [
    { key: getKey(), role: 'system', content: 'Welcome to use Ant Design X' },
    genItem(false, { typing: false }),
    genItem(true, { typing: false }),
    { key: getKey(), role: 'divider', content: 'divider' },
    genItem(false, { typing: false }),
    genItem(true, { typing: false, loading: true }),
  ];
});

const roles = computed<RoleType>(() => ({
  ai: {
    typing: true,
    header: 'AI',
    avatar: () => <Avatar icon={<AntDesignOutlined />} />,
    footer: (content) => <Actions items={actionItems} onClick={() => console.log(content)} />,
  },
  user: (data) => ({
    placement: 'end',
    typing: false,
    header: `User-${data.key}`,
    avatar: () => <Avatar icon={<UserOutlined />} />,
    footer: () => (
      <Actions
        items={[
          data.editable
            ? { key: 'done', icon: <CheckOutlined />, label: 'done' }
            : { key: 'edit', icon: <EditOutlined />, label: 'edit' },
        ]}
        onClick={({ key }) => update(data.key, { editable: key === 'edit' })}
      />
    ),
    onEditConfirm: (content: string) => {
      console.log(`editing User-${data.key}: `, content);
      update(data.key, { content, editable: false });
    },
    onEditCancel: () => {
      update(data.key, { editable: false });
    },
  }),
  reference: {
    variant: 'borderless',
    // 16px for list item gap
    styles: { root: { margin: 0, marginBottom: -12 } },
    avatar: () => '',
    contentRender: (content: FileCardProps) => (
      <Space>
        <LinkOutlined />
        <FileCard type="file" size="small" name={content.name} byte={content.byte} />
      </Space>
    ),
  },
}));

const scrollTo = (option: { top: 'top' | 'bottom' }) => {
  // Vue flushes the list DOM on the next tick. Measuring before that uses the
  // previous scroll height, so the jump misses the bubble that was just added.
  nextTick(() => {
    listRef.value?.scrollTo({ ...option, behavior: 'smooth' });
  });
};

const addBubble = () => {
  const chatItems = items.value.filter((item) => item.role === 'ai' || item.role === 'user');
  const isAI = !!(chatItems.length % 2);
  add(genItem(isAI, { typing: { effect: 'fade-in', step: [20, 50] } }));
  if (enableLocScroll.value) {
    scrollTo({ top: 'bottom' });
  }
};

const addMarkdown = () => {
  add({
    key: getKey(),
    role: 'ai',
    typing: { effect: 'fade-in', step: 6 },
    content: text,
    contentRender: (content: string) => (
      <Typography
        class="ax-bubble-md"
        style={
          {
            '--ax-link': token.value.colorLink,
            '--ax-link-hover': token.value.colorLinkHover,
          } as CSSProperties
        }
      >
        <XMarkdown content={content} />
      </Typography>
    ),
  });
  if (enableLocScroll.value) {
    scrollTo({ top: 'bottom' });
  }
};

const addDivider = () => {
  items.value = [...items.value, { key: getKey(), role: 'divider', content: 'Divider' }];
  if (enableLocScroll.value) {
    scrollTo({ top: 'bottom' });
  }
};

const addSystem = () => {
  items.value = [...items.value, { key: getKey(), role: 'system', content: 'This is a system message' }];
  if (enableLocScroll.value) {
    scrollTo({ top: 'bottom' });
  }
};

const addToTop = () => {
  const item = genItem(false);
  items.value = [item, genItem(true), genItem(false), ...items.value];
  if (enableLocScroll.value) {
    scrollTo({ top: 'top' });
  }
};

const addWithRef = () => {
  items.value = [
    ...items.value,
    {
      key: getKey(),
      role: 'reference',
      placement: 'end',
      content: { name: 'Ant-Design-X.pdf' },
    },
    genItem(false),
  ];
  if (enableLocScroll.value) {
    scrollTo({ top: 'bottom' });
  }
};

defineRender(() => (
  <Flex vertical style={{ height: '720px' }} gap={20}>
    <Flex vertical gap="small">
      <Space align="center">
        <Switch checked={autoScroll.value} onChange={(checked) => (autoScroll.value = !!checked)} />
        <span>启用 autoScroll / enabled autoScroll</span>
      </Space>
      <Space align="center">
        <Switch
          checked={enableLocScroll.value}
          onChange={(checked) => (enableLocScroll.value = !!checked)}
        />
        <span>定位到新气泡 / locate to new bubble</span>
      </Space>
    </Flex>
    <Flex gap="small" wrap="wrap">
      <Button type="primary" onClick={addBubble}>
        Add Bubble
      </Button>
      <Button onClick={addMarkdown}>Add Markdown</Button>
      <Button onClick={addDivider}>Add Divider</Button>
      <Button onClick={addSystem}>Add System</Button>
      <Button onClick={addToTop}>Add To Top</Button>
      <Button onClick={addWithRef}>Add With Ref</Button>
    </Flex>
    <div style={{ display: 'flex', flex: 1, minHeight: 0 }}>
      <Bubble.List
        style={{ height: '620px' }}
        ref={listRef}
        roles={roles.value}
        items={items.value}
        autoScroll={autoScroll.value}
      />
    </div>
  </Flex>
));
</script>

<style>
/* Match the React Bubble markdown demo inside VitePress.
   `.vp-doc a` underlines anchors, and `.x-markdown-light a::after` appends ↗. */
.vp-doc .example-showcase .ax-bubble-md a {
  color: var(--ax-link, #1677ff);
  font-weight: 400;
  text-decoration: none;
}

.vp-doc .example-showcase .ax-bubble-md a:hover,
.vp-doc .example-showcase .ax-bubble-md a:active {
  color: var(--ax-link-hover, var(--ax-link, #1677ff));
  text-decoration: none;
}

.vp-doc .example-showcase .ax-bubble-md a::before,
.vp-doc .example-showcase .ax-bubble-md a::after {
  content: none !important;
}

.vp-doc .example-showcase .ax-bubble-md p,
.vp-doc .example-showcase .ax-bubble-md blockquote > p {
  margin: 0;
  line-height: 1.5714285714;
  font-size: inherit;
  color: inherit;
}

.vp-doc .example-showcase .ax-bubble-md blockquote {
  margin: 1em 0;
  padding: 0 0 0 0.6em;
  border: 0;
  border-inline-start: 4px solid rgba(100, 100, 100, 0.2);
  background: transparent;
  color: inherit;
  opacity: 0.85;
}
</style>

Hide source

List extensions

Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content.

Mock user content.

Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content.

Mock user content.

Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content.

Mock user content.

Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content.

Mock user content.

Custom loading...

List extensions

The list supports extensions such as status and extraInfo.

<script setup lang="tsx">
defineOptions({ name: 'AXBubbleListExtraV2' });

import { ref, computed } from 'vue';
import { Bubble, Actions, type BubbleItemType, type RoleType } from 'ant-design-x-vue';
import { Flex, Spin } from 'ant-design-vue';

const items = ref<BubbleItemType[]>([
  {
    status: 'success',
    key: 'welcome',
    role: 'ai',
    variant: 'borderless',
    content: 'Mock welcome content. '.repeat(10),
    extraInfo: {
      feedback: 'like',
    },
  },
  {
    key: 'ask',
    role: 'user',
    content: 'Mock user content.',
  },
  {
    key: 'ai_0',
    role: 'ai',
    status: 'success',
    variant: 'borderless',
    content: 'Mock welcome content. '.repeat(10),
    extraInfo: {
      feedback: 'dislike',
    },
  },
  {
    key: 'user_1',
    role: 'user',
    content: 'Mock user content.',
  },
  {
    key: 'ai_1',
    role: 'ai',
    variant: 'borderless',
    status: 'success',
    content: 'Mock welcome content. '.repeat(10),
    extraInfo: {
      feedback: 'dislike',
    },
  },
  {
    key: 'user_2',
    role: 'user',
    content: 'Mock user content.',
  },
  {
    key: 'ai_2',
    role: 'ai',
    variant: 'borderless',
    status: 'success',
    content: 'Mock welcome content. '.repeat(10),
    extraInfo: {
      feedback: 'like',
    },
  },
  {
    key: 'user_3',
    role: 'user',
    content: 'Mock user content.',
  },
  {
    key: 'ai_3',
    role: 'ai',
    status: 'loading',
    loading: true,
    content: '',
  },
]);

const roles = computed<RoleType>(() => ({
  ai: {
    placement: 'start',
    typing: (_, { status }) =>
      status === 'updating' ? { effect: 'typing', step: 5, interval: 20 } : false,
    footer: (content, { key, extraInfo }) => (
      <Actions
        items={[
          {
            key: 'copy',
            label: 'copy',
          },
          {
            key: 'feedback',
            label: extraInfo?.feedback === 'like' ? '👍' : extraInfo?.feedback === 'dislike' ? '👎' : '🤔',
          },
        ]}
        onClick={({ key: actionKey }) => {
          if (actionKey === 'feedback') {
            items.value = items.value.map((message) => {
              if (message.key === key) {
                const currentFeedback = message.extraInfo?.feedback;
                const newFeedback = currentFeedback === 'like' ? 'dislike' : 'like';
                return { ...message, extraInfo: { feedback: newFeedback } };
              }
              return message;
            });
          }
        }}
      />
    ),
    loadingRender: () => (
      <Flex align="center" gap="small">
        <Spin size="small" />
        Custom loading...
      </Flex>
    ),
  },
  user: {
    placement: 'end',
  },
}));

defineRender(() => (
  <Bubble.List style={{ height: '500px' }} roles={roles.value} items={items.value} />
));
</script>

Hide source

Semantic customization

Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content.

Mock user content.

Custom loading...

Semantic customization

Custom role configuration, including a custom loadingRender.

<script setup lang="tsx">
defineOptions({ name: 'AXBubbleSemanticListCustomV2' });

import { ref } from 'vue';
import { FrownOutlined, SmileOutlined, SyncOutlined } from '@ant-design/icons-vue';
import { Bubble, type RoleType } from 'ant-design-x-vue';
import { Button, Flex, Spin } from 'ant-design-vue';

const listRef = ref<InstanceType<typeof Bubble.List> | null>(null);

const roles: RoleType = {
  ai: {
    placement: 'start',
    typing: { effect: 'typing', step: 5, interval: 20 },
    loadingRender: () => (
      <Flex align="center" gap="small">
        <Spin size="small" />
        Custom loading...
      </Flex>
    ),
  },
  user: {
    placement: 'end',
  },
};

defineRender(() => (
  <Bubble.List
    ref={listRef}
    style={{ height: '500px' }}
    roles={roles}
    items={[
      {
        key: 'welcome',
        role: 'ai',
        content: 'Mock welcome content. '.repeat(10),
        footer: (
          <Flex>
            <Button
              size="small"
              type="text"
              icon={<SyncOutlined />}
              style={{ marginInlineEnd: 'auto' }}
            />
            <Button size="small" type="text" icon={<SmileOutlined />} />
            <Button size="small" type="text" icon={<FrownOutlined />} />
          </Flex>
        ),
      },
      {
        key: 'ask',
        role: 'user',
        content: 'Mock user content.',
      },
      {
        key: 'ai',
        role: 'ai',
        loading: true,
        content: '',
      },
    ]}
  />
));
</script>

Hide source

List scroll control

List scroll control

Use the scrollTo method to control list scrolling.

<script setup lang="tsx">
defineOptions({ name: 'AXBubbleListScrollV2' });

import { ref, computed, onMounted } from 'vue';
import { AntDesignOutlined, CopyOutlined, RedoOutlined, UserOutlined } from '@ant-design/icons-vue';
import { Bubble, Actions, type BubbleItemType, type RoleType, type BubbleListRef } from 'ant-design-x-vue';
import { Avatar, Button, Flex } from 'ant-design-vue';

const actionItems = [
  {
    key: 'retry',
    icon: <RedoOutlined />,
    label: 'Retry',
  },
  {
    key: 'copy',
    icon: <CopyOutlined />,
    label: 'Copy',
  },
];

let id = 0;
const getKey = () => `bubble_${id++}`;

const genItem = (isAI: boolean, config?: Partial<BubbleItemType>): BubbleItemType => ({
  key: getKey(),
  role: isAI ? 'ai' : 'user',
  content: `${id} : ${isAI ? 'Mock AI content'.repeat(50) : 'Mock user content.'}`,
  ...config,
});

const listRef = ref<BubbleListRef | null>(null);
const items = ref<BubbleItemType[]>([]);

onMounted(() => {
  items.value = [
    genItem(false, { typing: false }),
    genItem(true, { typing: false }),
    genItem(false, { typing: false }),
    genItem(true, { typing: false }),
    genItem(false, { typing: false }),
    genItem(true, { typing: false }),
    genItem(false, { typing: false }),
    genItem(true, { typing: false }),
    genItem(false, { typing: false }),
    genItem(true, { typing: false }),
    genItem(false, { typing: false }),
  ];
});

const roles = computed<RoleType>(() => ({
  ai: {
    typing: true,
    header: 'AI',
    avatar: () => <Avatar icon={<AntDesignOutlined />} />,
    footer: (content) => <Actions items={actionItems} onClick={() => console.log(content)} />,
  },
  user: {
    placement: 'end',
    typing: false,
    header: 'User',
    avatar: () => <Avatar icon={<UserOutlined />} />,
  },
}));

defineRender(() => (
  <Flex vertical style={{ height: '720px' }} gap="small">
    <Flex gap="small" justify="space-between">
      <Flex gap="small">
        <Button type="primary" onClick={() => console.log(listRef.value?.nativeElement)}>
          Get Dom
        </Button>
        <Button onClick={() => listRef.value?.scrollTo({ top: 'top' })}>Scroll To Top</Button>
        <Button onClick={() => listRef.value?.scrollTo({ top: 'bottom', behavior: 'smooth' })}>
          Scroll To Bottom
        </Button>
        <Button onClick={() => listRef.value?.scrollTo({ top: Math.random() * 1000 })}>
          Scroll To Random
        </Button>
        <Button onClick={() => listRef.value?.scrollTo({ key: items.value[1].key, block: 'nearest' })}>
          Scroll To Second
        </Button>
      </Flex>
    </Flex>

    <Bubble.List
      ref={listRef}
      roles={roles.value}
      items={items.value}
      onScroll={(e: Event) => {
        console.log('scroll', (e.target as HTMLDivElement).scrollTop);
      }}
    />
  </Flex>
));
</script>

Hide source

API

Bubble

Prop	Description	Type	Default	Version
avatar	Display avatar	VNode | (content, info) => VNode	-
classNames	Semantic class names	Record<SemanticDOM, string>	-
content	Chat content	ContentType	-
contentRender	Custom rendered content	(content: ContentType, info: Info) => VNode	-	-
editable	Editable or not	boolean | EditableBubbleOption	false	-
extra	Extra Content	VNode	(content, info) => VNode	-
footer	Footer Content	VNode	(content, info) => VNode	-
footerPlacement	Footer Position	outer-start	outer-end	inner-start
header	Header Content	VNode	(content, info) => VNode	-
loading	Chat Content Loading State	boolean	false
placement	Message Position	start	end	start
shape	Bubble Shape	default	round	corner
streaming	Whether Streaming	boolean	false	-
styles	Semantic styles	Record<SemanticDOM, CSSProperties>	-
typing	Typing Animation Configuration	boolean	BubbleAnimationOption	Function
variant	Bubble Style Variant	filled	borderless	outlined
loadingRender	Custom Render Loading Content	() => VNode	-
messageRender	Custom Render Content (Deprecated, please use contentRender)	(content: ContentType) => VNode	-
onTyping	Callback during animation execution	(rendererContent: string, currentContent: string) => void	-	-
onTypingComplete	Callback when animation ends	(content?: string) => void	-
onEditConfirm	Callback when editing is confirmed	(content: string) => void	-	-
onEditCancel	Callback when editing is canceled	() => void	-	-

BubbleAnimationOption

Prop	Description	Type	Default
effect	Type of animation effect	typing | fade-in	fade-in
step	Content step unit, array format for random range	number | [number, number]	6
interval	Animation trigger interval	number	100
keepPrefix	Whether to keep common prefix when restarting animation	boolean	true

EditableBubbleOption

Prop	Description	Type	Default
editing	Whether in edit mode	boolean	false
okText	Text for confirm button	VNode | string	Confirm
cancelText	Text for cancel button	VNode | string	Cancel

Info

Prop	Description	Type
key	Unique identifier for data item	string | number
status	Message Status	local | loading | updating | success | error | abort
extraInfo	Additional Information	AnyObject

Bubble.System

Prop	Description	Type	Default
content	System Message Content	ContentType	-
variant	Bubble Style Variants	filled | borderless | outlined | shadow	shadow
shape	Bubble Shape	default | round | corner	-
styles	Semantic styles	Record<SemanticDOM, CSSProperties>	-
classNames	Semantic class names	Record<SemanticDOM, string>	-

Bubble.Divider

Prop	Description	Type	Default
content	Separator Content	ContentType	-
dividerProps	Separator Properties	DividerProps	-
styles	Semantic styles	Record<SemanticDOM, CSSProperties>	-
classNames	Semantic class names	Record<SemanticDOM, string>	-

Bubble.List

Prop	Description	Type	Default
autoScroll	Automatic scrolling to the latest location	boolean	true
items	Bubble Data List	BubbleItemType[]	-
roles	Bubble default property configuration, equivalent to 'role'. When passing in simultaneously, 'roles'	takes precedence RoleType	-
role	Same 'role' as React 2.10 'Bubble.List'	RoleType	-
styles	Semantic styles	Record<SemanticDOM, CSSProperties>	-
classNames	Semantic class names	Record<SemanticDOM, string>	-
onScroll	Rolling Event Callback	(e: Event) => void	-

BubbleItemType

Prop	Description	Type
key	Unique identifier for the data item (required)	string
role	Role type	ai
status	Message Status	local | loading | updating | success | error | abort
extraInfo	Additional Information	AnyObject
...BubbleProps	All properties inherited from Bubble	-

BubbleListRef

Method	Description	Type
nativeElement	Native DOM element	HTMLDivElement
scrollBoxNativeElement	Scroll container DOM	HTMLDivElement
scrollTo	Scroll to a specified position	(options: ScrollToOptions) => void

ScrollToOptions

Prop	Description	Type
key	Bubble to scroll to by key	string
top	Scroll position	number
offset	Scroll offset	number
behavior	Scroll behavior	smooth
block	Scroll alignment	start

Bubble Slots

Slot	Description	Type
avatar	Avatar	-
header	Header Panel
footer	Footer Content
extra	Extra Content
loading	Loading Placeholder	-
content	Message Content

Bubble.List Slots

Slot	Description	Type
avatar	Avatar
header	Header Panel
footer	Footer Content
extra	Extra Content
loading	Loading Placeholder
content	Message Content

Semantic DOM

Ant Design X Vue

Feel free to use Ant Design Vue !

• root

  气泡根节点

• body

  主体容器

• avatar

  头像的外层容器

• header

  头部的容器

• content

  聊天内容的容器

• footer

  底部的容器

• extra

  气泡尾边栏容器

System message

• root

  系统气泡根节点

• body

  主体容器

• content

  内容容器

Divider

• root

  分隔符根节点

• body

  主体容器

• content

  内容容器

Welcome to Ant Design X Vue

hello, Ant Design X Vue

divider

AI

Hello, nice to meet you!

• root

  对话列表根节点

• scroll

  对话列表滚动容器

• bubble

  对话气泡容器

• body

  对话气泡的主体容器

• avatar

  对话气泡的头像外层容器

• header

  对话气泡的头部容器

• content

  对话气泡的聊天内容容器

• footer

  对话气泡的底部容器

• extra

  对话气泡的尾边栏容器

• system

  系统气泡容器

• divider

  分割线气泡容器

Design Token

Token	Description	Type	Default
typingContent	Typing animation content	string	<code>|</code>
typingAnimationDuration	Typing animation duration	string	0.8s
typingAnimationName	Typing animation name	string	cursorBlink

Contributors

Contributors

Loading contributors…