bubble-custom.vue 1.9 KB

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