preset.vue 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  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, useXAgent, type ThoughtChainItem } from 'ant-design-x-vue';
  5. import { ref } from 'vue';
  6. defineOptions({ name: 'AXUseXAgentPreset' });
  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. /** 🔥🔥 Its dangerously! */
  14. // const API_KEY = '';
  15. interface YourMessageType {
  16. role: string;
  17. content: string;
  18. }
  19. const status = ref<ThoughtChainItem['status']>();
  20. const lines = ref<Record<string, string>[]>([]);
  21. const [ agent ] = useXAgent<YourMessageType>({
  22. baseURL: BASE_URL + PATH,
  23. model: MODEL,
  24. // dangerouslyApiKey: API_KEY
  25. });
  26. async function request() {
  27. status.value = 'pending';
  28. agent.value.request(
  29. {
  30. messages: [{ role: 'user', content: 'hello, who are u?' }],
  31. stream: true,
  32. },
  33. {
  34. onSuccess: (messages) => {
  35. status.value = 'success';
  36. console.log('onSuccess', messages);
  37. },
  38. onError: (error) => {
  39. status.value = 'error';
  40. console.error('onError', error);
  41. },
  42. onUpdate: (msg) => {
  43. // @ts-expect-error
  44. lines.value = [...lines.value, msg];
  45. console.log('onUpdate', msg);
  46. },
  47. },
  48. );
  49. }
  50. defineRender(() => {
  51. return (
  52. <Flex align="start" gap={16} style={{ overflow: 'auto' }}>
  53. <div>
  54. <Button type="primary" disabled={status.value === 'pending'} onClick={request}>
  55. Agent Request
  56. </Button>
  57. </div>
  58. <div>
  59. <ThoughtChain
  60. style={{ marginLeft: 16 }}
  61. items={[
  62. {
  63. title: 'Agent Request Log',
  64. status: status.value,
  65. icon: status.value === 'pending' ? <LoadingOutlined /> : <TagsOutlined />,
  66. description:
  67. status.value === 'error' &&
  68. agent.value.config.baseURL === BASE_URL + PATH &&
  69. 'Please replace the BASE_URL, PATH, MODEL, API_KEY with your own values.',
  70. content: (
  71. <Descriptions column={1}>
  72. <Descriptions.Item label="Status">{status.value || '-'}</Descriptions.Item>
  73. <Descriptions.Item label="Update Times">{lines.value.length}</Descriptions.Item>
  74. </Descriptions>
  75. ),
  76. },
  77. ]}
  78. />
  79. </div>
  80. </Flex>
  81. )
  82. });
  83. </script>