gpt-vis.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <script setup lang="tsx">
  2. import { ref } from 'vue';
  3. import { Bubble } from 'ant-design-x-vue';
  4. import type { BubbleProps } from 'ant-design-x-vue';
  5. // import { GPTVis } from '@antv/gpt-vis';
  6. import { Button, Flex } from 'ant-design-vue';
  7. defineOptions({ name: 'BubbleGptVis' });
  8. const text = `
  9. **GPT-Vis**, Components for GPTs, generative AI, and LLM projects. Not only UI Components. [more...](https://github.com/antvis/GPT-Vis) \n\n
  10. Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable *growth* particularly in recent years.
  11. \`\`\`vis-chart
  12. {
  13. "type": "line",
  14. "data": [{"time":2013,"value":59.3},{"time":2014,"value":64.4},{"time":2015,"value":68.9},{"time":2016,"value":74.4},{"time":2017,"value":82.7},{"time":2018,"value":91.9},{"time":2019,"value":99.1},{"time":2020,"value":101.6},{"time":2021,"value":114.4},{"time":2022,"value":121}],
  15. "axisXTitle": "year",
  16. "axisYTitle": "sale"
  17. }
  18. \`\`\`
  19. `;
  20. const RenderMarkdown: BubbleProps['messageRender'] = (content) => {
  21. // The @antv/gpt-vis is only support React
  22. // return <GPTVis>{content}</GPTVis>;
  23. return content
  24. };
  25. const rerenderKey = ref(0);
  26. defineRender(() => {
  27. return (
  28. <Flex vertical gap="small" key={rerenderKey.value}>
  29. <Button
  30. style={{ alignSelf: 'flex-end' }}
  31. onClick={() => {
  32. rerenderKey.value = rerenderKey.value + 1
  33. }}
  34. >
  35. Re-Render
  36. </Button>
  37. <Bubble
  38. typing={{ step: 20, interval: 150 }}
  39. content={text}
  40. messageRender={RenderMarkdown}
  41. avatar={{
  42. src: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2Q5LRJ3LFPUAAAAAAAAAAAAADmJ7AQ/fmt.webp',
  43. }}
  44. variant="outlined"
  45. />
  46. </Flex>
  47. )
  48. });
  49. </script>