bubble-custom.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <script setup lang="ts">
  2. import {
  3. FrownOutlined,
  4. SmileOutlined,
  5. SyncOutlined,
  6. UserOutlined,
  7. } from '@ant-design/icons-vue';
  8. import { BubbleList } from 'ant-design-x-vue';
  9. import { Button, Flex, Space, Spin } from 'ant-design-vue';
  10. import type { BubbleListProps } from 'ant-design-x-vue';
  11. import { ref, h } from 'vue';
  12. defineOptions({ name: 'AXBubbleBubbleCustomSetup' });
  13. const roles: BubbleListProps['roles'] = {
  14. ai: {
  15. placement: 'start',
  16. avatar: { icon: h(UserOutlined), style: { background: '#fde3cf' } },
  17. typing: { step: 5, interval: 20 },
  18. style: {
  19. maxWidth: 600,
  20. marginInlineEnd: 44,
  21. },
  22. styles: {
  23. footer: {
  24. width: '100%',
  25. },
  26. },
  27. loadingRender: () =>
  28. h(Space, null, [h(Spin, { size: 'small' }), 'Custom loading...']),
  29. },
  30. user: {
  31. placement: 'end',
  32. avatar: { icon: h(UserOutlined), style: { background: '#87d068' } },
  33. },
  34. };
  35. // const listRef = useTemplateRef<InstanceType<typeof BubbleList>>(null);
  36. const listRef = ref<InstanceType<typeof BubbleList>>(null);
  37. </script>
  38. <template>
  39. <BubbleList
  40. ref="listRef"
  41. :style="{ maxHeight: 300 }"
  42. :roles="roles"
  43. :items="[
  44. {
  45. key: 'welcome',
  46. role: 'ai',
  47. content: 'Mock welcome content. '.repeat(10),
  48. footer: h(Flex, null, [
  49. h(Button, {
  50. size: 'small',
  51. type: 'text',
  52. icon: h(SyncOutlined),
  53. style: { marginInlineEnd: 'auto' },
  54. }),
  55. h(Button, { size: 'small', type: 'text', icon: h(SmileOutlined) }),
  56. h(Button, { size: 'small', type: 'text', icon: h(FrownOutlined) }),
  57. ]),
  58. },
  59. {
  60. key: 'ask',
  61. role: 'user',
  62. content: 'Mock user content.',
  63. },
  64. {
  65. key: 'ai',
  66. role: 'ai',
  67. loading: true,
  68. },
  69. ]"
  70. />
  71. </template>