list-custom.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <script setup lang="ts">
  2. import {
  3. CoffeeOutlined,
  4. FireOutlined,
  5. SmileOutlined,
  6. UserOutlined,
  7. } from '@ant-design/icons-vue';
  8. import { Attachments, BubbleList, Prompts } from 'ant-design-x-vue';
  9. import { Flex, Typography } from 'ant-design-vue';
  10. import type { BubbleListProps } from 'ant-design-x-vue';
  11. import { h } from 'vue';
  12. defineOptions({ name: 'AXBubbleListCustomSetup' });
  13. const roles: BubbleListProps['roles'] = {
  14. ai: {
  15. placement: 'start',
  16. typing: true,
  17. avatar: { icon: h(UserOutlined), style: { background: '#fde3cf' } },
  18. },
  19. suggestion: {
  20. placement: 'start',
  21. avatar: { icon: h(UserOutlined), style: { visibility: 'hidden' } },
  22. variant: 'borderless',
  23. messageRender: (items) =>
  24. h(Prompts, { vertical: true, items: items as any }),
  25. },
  26. file: {
  27. placement: 'start',
  28. avatar: { icon: h(UserOutlined), style: { visibility: 'hidden' } },
  29. variant: 'borderless',
  30. messageRender: (items: any) =>
  31. h(
  32. Flex,
  33. { vertical: true, gap: 'middle' },
  34. items.map((item: any) =>
  35. h(Attachments.FileCard, { key: item.uid, item: item }),
  36. ),
  37. ),
  38. },
  39. };
  40. </script>
  41. <template>
  42. <BubbleList
  43. :roles="roles"
  44. :items="[
  45. // Normal
  46. {
  47. key: 0,
  48. role: 'ai',
  49. content: 'Normal message',
  50. },
  51. // ReactNode
  52. {
  53. key: 1,
  54. role: 'ai',
  55. content: h(Typography.Text, { type: 'danger' }, 'ReactNode message'),
  56. },
  57. // Role: suggestion
  58. {
  59. key: 2,
  60. role: 'suggestion',
  61. content: [
  62. {
  63. key: '6',
  64. icon: h(CoffeeOutlined, { style: { color: '#964B00' } }),
  65. description: 'How to rest effectively after long hours of work?',
  66. },
  67. {
  68. key: '7',
  69. icon: h(SmileOutlined, { style: { color: '#FAAD14' } }),
  70. description:
  71. 'What are the secrets to maintaining a positive mindset?',
  72. },
  73. {
  74. key: '8',
  75. icon: h(FireOutlined, { style: { color: '#FF4D4F' } }),
  76. description: 'How to stay calm under immense pressure?',
  77. },
  78. ],
  79. },
  80. // Role: file
  81. {
  82. key: 3,
  83. role: 'file',
  84. content: [
  85. {
  86. uid: '1',
  87. name: 'excel-file.xlsx',
  88. size: 111111,
  89. description: 'Checking the data',
  90. },
  91. {
  92. uid: '2',
  93. name: 'word-file.docx',
  94. size: 222222,
  95. status: 'uploading',
  96. percent: 23,
  97. },
  98. ],
  99. },
  100. ]"
  101. />
  102. </template>