use.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <script setup lang="tsx">
  2. import { AlipayCircleOutlined, BulbOutlined, CheckCircleOutlined, GithubOutlined, LoadingOutlined, SmileOutlined, UserOutlined } from '@ant-design/icons-vue';
  3. import { Card, Divider, Flex, Radio, Typography } from 'ant-design-vue';
  4. import { Bubble, Conversations, Prompts, Sender, Suggestion, ThoughtChain, XProvider, type XProviderProps } from 'ant-design-x-vue';
  5. import { ref } from 'vue';
  6. defineOptions({ name: 'AXProviderUse' });
  7. const value = ref('');
  8. const direction = ref<XProviderProps['direction']>('ltr');
  9. defineRender(() => {
  10. return (
  11. <div>
  12. <Flex gap={12} style={{ marginBottom: '16px' }} align="center">
  13. <Typography.Text>Direction:</Typography.Text>
  14. <Radio.Group value={direction.value} onChange={(e) => direction.value = e.target.value}>
  15. <Radio.Button value="ltr">LTR</Radio.Button>
  16. <Radio.Button value="rtl">RTL</Radio.Button>
  17. </Radio.Group>
  18. </Flex>
  19. <Card>
  20. <XProvider direction={direction.value}>
  21. <Flex style={{ height: '500px' }} gap={12}>
  22. <Conversations
  23. style={{ width: '200px' }}
  24. defaultActiveKey="1"
  25. items={[
  26. {
  27. key: '1',
  28. label: 'Conversation - 1',
  29. icon: <GithubOutlined />,
  30. },
  31. {
  32. key: '2',
  33. label: 'Conversation - 2',
  34. icon: <AlipayCircleOutlined />,
  35. },
  36. ]}
  37. />
  38. <Divider type="vertical" style={{ height: '100%' }} />
  39. <Flex vertical style={{ flex: 1 }} gap={8}>
  40. <Bubble.List
  41. style={{ flex: 1 }}
  42. items={[
  43. {
  44. key: '1',
  45. placement: 'end',
  46. content: 'Hello Ant Design X!',
  47. avatar: { icon: <UserOutlined /> },
  48. },
  49. {
  50. key: '2',
  51. content: 'Hello World!',
  52. },
  53. {
  54. key: '2',
  55. content: '',
  56. loading: true,
  57. },
  58. ]}
  59. />
  60. <Prompts
  61. items={[
  62. {
  63. key: '1',
  64. icon: <BulbOutlined style={{ color: '#FFD700' }} />,
  65. label: 'Ignite Your Creativity',
  66. },
  67. {
  68. key: '2',
  69. icon: <SmileOutlined style={{ color: '#52C41A' }} />,
  70. label: 'Tell me a Joke',
  71. },
  72. ]}
  73. />
  74. <Suggestion
  75. items={[{ label: 'Write a report', value: 'report' }]}
  76. children={({ onTrigger, onKeyDown }) => {
  77. return (
  78. <Sender
  79. value={value.value}
  80. onChange={(nextVal) => {
  81. if (nextVal === '/') {
  82. onTrigger();
  83. } else if (!nextVal) {
  84. onTrigger(false);
  85. }
  86. value.value = nextVal;
  87. }}
  88. onKeyDown={onKeyDown}
  89. placeholder='Type "/" to trigger suggestion'
  90. />
  91. );
  92. }}
  93. />
  94. </Flex>
  95. <Divider type="vertical" style={{ height: '100%' }} />
  96. <ThoughtChain
  97. style={{ width: '200px' }}
  98. items={[
  99. {
  100. title: 'Hello Ant Design X!',
  101. status: 'success',
  102. description: 'status: success',
  103. icon: <CheckCircleOutlined />,
  104. content: 'Ant Design X help you build AI chat/platform app as ready-to-use 📦.',
  105. },
  106. {
  107. title: 'Hello World!',
  108. status: 'success',
  109. description: 'status: success',
  110. icon: <CheckCircleOutlined />,
  111. },
  112. {
  113. title: 'Pending...',
  114. status: 'pending',
  115. description: 'status: pending',
  116. icon: <LoadingOutlined />,
  117. },
  118. ]}
  119. />
  120. </Flex>
  121. </XProvider>
  122. </Card>
  123. </div>
  124. )
  125. })
  126. </script>