custom.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <script setup lang="tsx">
  2. import { Button, Divider, Form, Input, Typography } from 'ant-design-vue';
  3. import { useXAgent } from 'ant-design-x-vue';
  4. import { reactive, ref } from 'vue';
  5. defineOptions({ name: 'AXUseXAgentCustom' });
  6. const lines = ref<string[]>([]);
  7. const modelRef = reactive({
  8. question: '',
  9. });
  10. Form.useForm(modelRef);
  11. const log = (text: string) => {
  12. lines.value = [...lines.value, text];
  13. };
  14. const [ agent ] = useXAgent({
  15. request: ({ message }, { onUpdate, onSuccess }) => {
  16. let times = 0;
  17. const id = setInterval(() => {
  18. times += 1;
  19. onUpdate(`Thinking...(${times}/3)`);
  20. if (times >= 3) {
  21. onSuccess(`It's funny that you ask: ${message}`);
  22. clearInterval(id);
  23. }
  24. }, 500);
  25. },
  26. });
  27. const onFinish = ({ question }: { question: string }) => {
  28. log(`[You] Ask: ${question}`);
  29. agent.value.request(
  30. { message: question },
  31. {
  32. onUpdate: (message) => {
  33. log(`[Agent] Update: ${message}`);
  34. },
  35. onSuccess: (message) => {
  36. log(`[Agent] Answer: ${message}`);
  37. modelRef.question = ''
  38. },
  39. // Current demo not use error
  40. onError: () => { },
  41. },
  42. );
  43. };
  44. defineRender(() => {
  45. return (
  46. <>
  47. <Form
  48. model={modelRef}
  49. layout="vertical"
  50. onFinish={onFinish}
  51. // @ts-expect-error
  52. autoComplete="off"
  53. >
  54. <Form.Item label="Question" name="question">
  55. <Input v-model:value={modelRef.question} />
  56. </Form.Item>
  57. <Form.Item>
  58. <Button htmlType="submit" type="primary" loading={agent.value.isRequesting()}>
  59. submit
  60. </Button>
  61. </Form.Item>
  62. </Form>
  63. <Divider />
  64. <Typography>
  65. <ul style={{ listStyle: 'circle', paddingLeft: 0 }}>
  66. {lines.value.map((line, index) => (
  67. <li key={index}>{line}</li>
  68. ))}
  69. </ul>
  70. </Typography>
  71. </>
  72. )
  73. });
  74. </script>