basic.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  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 { ThoughtChain, type ThoughtChainItem, XRequest } from 'ant-design-x-vue';
  5. import { ref, h } from 'vue';
  6. defineOptions({ name: 'AXXRequestBasicSetup' });
  7. /**
  8. * 🔔 Please replace the BASE_URL, PATH, MODEL, API_KEY with your own values.
  9. */
  10. const BASE_URL = 'https://api.example.com';
  11. const PATH = '/chat';
  12. const MODEL = 'gpt-3.5-turbo';
  13. // const API_KEY = '';
  14. const exampleRequest = XRequest({
  15. baseURL: BASE_URL + PATH,
  16. model: MODEL,
  17. /** 🔥🔥 Its dangerously! */
  18. // dangerouslyApiKey: API_KEY
  19. });
  20. const status = ref<ThoughtChainItem['status']>();
  21. const lines = ref<Record<string, string>[]>([]);
  22. async function request() {
  23. status.value = 'pending';
  24. await exampleRequest.create(
  25. {
  26. messages: [{ role: 'user', content: 'hello, who are u?' }],
  27. stream: true,
  28. },
  29. {
  30. onSuccess: (messages) => {
  31. status.value = 'success';
  32. console.log('onSuccess', messages);
  33. },
  34. onError: (error) => {
  35. status.value = 'error';
  36. console.error('onError', error);
  37. },
  38. onUpdate: (msg) => {
  39. lines.value = [...lines.value, msg];
  40. console.log('onUpdate', msg);
  41. },
  42. },
  43. );
  44. }
  45. </script>
  46. <template>
  47. <Flex
  48. align="start"
  49. gap="16"
  50. :style="{ overflow: 'auto' }"
  51. >
  52. <Button
  53. type="primary"
  54. :disabled="status === 'pending'"
  55. @click="request"
  56. >
  57. {{ `Request - ${BASE_URL + PATH}` }}
  58. </Button>
  59. <ThoughtChain
  60. :items="[
  61. {
  62. title: 'Request Log',
  63. status: status,
  64. icon: status === 'pending' ? h(LoadingOutlined) : h(TagsOutlined),
  65. description:
  66. status === 'error' &&
  67. exampleRequest.baseURL === BASE_URL + PATH &&
  68. 'Please replace the BASE_URL, PATH, MODEL, API_KEY with your own values.',
  69. content: h(Descriptions, { column: 1 }, [
  70. h(Descriptions.Item, { label: 'Status' }, status || '-'),
  71. h(Descriptions.Item, { label: 'Update Times' }, lines.length.toString())
  72. ]),
  73. },
  74. ]"
  75. />
  76. </Flex>
  77. </template>