123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- <script setup lang="ts">
- import {
- FrownOutlined,
- SmileOutlined,
- SyncOutlined,
- UserOutlined,
- } from '@ant-design/icons-vue';
- import { BubbleList } from 'ant-design-x-vue';
- import { Button, Flex, Space, Spin } from 'ant-design-vue';
- import type { BubbleListProps } from 'ant-design-x-vue';
- import { ref, h } from 'vue';
- defineOptions({ name: 'AXBubbleBubbleCustomSetup' });
- const roles: BubbleListProps['roles'] = {
- ai: {
- placement: 'start',
- avatar: { icon: h(UserOutlined), style: { background: '#fde3cf' } },
- typing: { step: 5, interval: 20 },
- style: {
- maxWidth: 600,
- marginInlineEnd: 44,
- },
- styles: {
- footer: {
- width: '100%',
- },
- },
- loadingRender: () =>
- h(Space, null, [h(Spin, { size: 'small' }), 'Custom loading...']),
- },
- user: {
- placement: 'end',
- avatar: { icon: h(UserOutlined), style: { background: '#87d068' } },
- },
- };
- // const listRef = useTemplateRef<InstanceType<typeof BubbleList>>(null);
- const listRef = ref<InstanceType<typeof BubbleList>>(null);
- </script>
- <template>
- <BubbleList
- ref="listRef"
- :style="{ maxHeight: 300 }"
- :roles="roles"
- :items="[
- {
- key: 'welcome',
- role: 'ai',
- content: 'Mock welcome content. '.repeat(10),
- footer: h(Flex, null, [
- h(Button, {
- size: 'small',
- type: 'text',
- icon: h(SyncOutlined),
- style: { marginInlineEnd: 'auto' },
- }),
- h(Button, { size: 'small', type: 'text', icon: h(SmileOutlined) }),
- h(Button, { size: 'small', type: 'text', icon: h(FrownOutlined) }),
- ]),
- },
- {
- key: 'ask',
- role: 'user',
- content: 'Mock user content.',
- },
- {
- key: 'ai',
- role: 'ai',
- loading: true,
- },
- ]"
- />
- </template>
|