basic.vue 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <script setup lang="tsx">
  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 } from 'vue';
  6. defineOptions({ name: 'AXXRequestBasic' });
  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. defineRender(() => {
  46. return (
  47. <Flex align="start" gap={16} style={{ overflow: 'auto' }}>
  48. <Button type="primary" disabled={status.value === 'pending'} onClick={request}>
  49. Request - {BASE_URL}
  50. {PATH}
  51. </Button>
  52. <ThoughtChain
  53. items={[
  54. {
  55. title: 'Request Log',
  56. status: status.value,
  57. icon: status.value === 'pending' ? <LoadingOutlined /> : <TagsOutlined />,
  58. description:
  59. status.value === 'error' &&
  60. exampleRequest.baseURL === BASE_URL + PATH &&
  61. 'Please replace the BASE_URL, PATH, MODEL, API_KEY with your own values.',
  62. content: (
  63. <Descriptions column={1}>
  64. <Descriptions.Item label="Status">{status.value || '-'}</Descriptions.Item>
  65. <Descriptions.Item label="Update Times">{lines.value.length}</Descriptions.Item>
  66. </Descriptions>
  67. ),
  68. },
  69. ]}
  70. />
  71. </Flex>
  72. )
  73. });
  74. </script>