list-custom.vue 2.6 KB

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