preset.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <script setup lang="ts">
  2. import { LoadingOutlined, TagsOutlined } from '@ant-design/icons-vue';
  3. import { Button, Descriptions, Flex } from 'ant-design-vue';
  4. import {
  5. ThoughtChain,
  6. useXAgent,
  7. type ThoughtChainItem,
  8. } from 'ant-design-x-vue';
  9. import { ref, h } from 'vue';
  10. defineOptions({ name: 'AXUseXAgentPresetSetup' });
  11. /**
  12. * 🔔 Please replace the BASE_URL, PATH, MODEL, API_KEY with your own values.
  13. */
  14. const BASE_URL = 'https://api.example.com';
  15. const PATH = '/chat';
  16. const MODEL = 'gpt-3.5-turbo';
  17. /** 🔥🔥 Its dangerously! */
  18. // const API_KEY = '';
  19. interface YourMessageType {
  20. role: string;
  21. content: string;
  22. }
  23. const status = ref<ThoughtChainItem['status']>();
  24. const lines = ref<Record<string, string>[]>([]);
  25. const [agent] = useXAgent<YourMessageType>({
  26. baseURL: BASE_URL + PATH,
  27. model: MODEL,
  28. // dangerouslyApiKey: API_KEY
  29. });
  30. async function request() {
  31. status.value = 'pending';
  32. agent.value.request(
  33. {
  34. messages: [{ role: 'user', content: 'hello, who are u?' }],
  35. stream: true,
  36. },
  37. {
  38. onSuccess: (messages) => {
  39. status.value = 'success';
  40. console.log('onSuccess', messages);
  41. },
  42. onError: (error) => {
  43. status.value = 'error';
  44. console.error('onError', error);
  45. },
  46. onUpdate: (msg) => {
  47. // @ts-expect-error
  48. lines.value = [...lines.value, msg];
  49. console.log('onUpdate', msg);
  50. },
  51. },
  52. );
  53. }
  54. </script>
  55. <template>
  56. <Flex
  57. align="start"
  58. :gap="16"
  59. :style="{ overflow: 'auto' }"
  60. >
  61. <div>
  62. <Button
  63. type="primary"
  64. :disabled="status === 'pending'"
  65. @click="request"
  66. >
  67. Agent Request
  68. </Button>
  69. </div>
  70. <div>
  71. <ThoughtChain
  72. :style="{ marginLeft: 16 }"
  73. :items="[
  74. {
  75. title: 'Agent Request Log',
  76. status: status,
  77. icon: status === 'pending' ? h(LoadingOutlined) : h(TagsOutlined),
  78. description:
  79. status === 'error' &&
  80. agent.config.baseURL === BASE_URL + PATH &&
  81. 'Please replace the BASE_URL, PATH, MODEL, API_KEY with your own values.',
  82. content: h(Descriptions, { column: 1 }, [
  83. h(
  84. Descriptions.Item,
  85. {
  86. label: 'Status',
  87. },
  88. () => status || '-',
  89. ),
  90. h(
  91. Descriptions.Item,
  92. {
  93. label: 'Update Times',
  94. },
  95. () => lines.length,
  96. ),
  97. ]),
  98. },
  99. ]"
  100. />
  101. </div>
  102. </Flex>
  103. </template>