custom.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <script setup lang="ts">
  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: 'AXUseXAgentCustomSetup' });
  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. </script>
  45. <template>
  46. <Form
  47. :model="modelRef"
  48. layout="vertical"
  49. auto-complete="off"
  50. @finish="onFinish"
  51. >
  52. <Form.Item
  53. label="Question"
  54. name="question"
  55. >
  56. <Input v-model:value="modelRef.question" />
  57. </Form.Item>
  58. <Form.Item>
  59. <Button
  60. html-type="submit"
  61. type="primary"
  62. :loading="agent.isRequesting()"
  63. >
  64. submit
  65. </Button>
  66. </Form.Item>
  67. </Form>
  68. <Divider />
  69. <Typography>
  70. <ul :style="{listStyle: 'circle', paddingLeft: 0 }">
  71. <li
  72. v-for="(line, index) in lines"
  73. :key="index"
  74. >
  75. {{ line }}
  76. </li>
  77. </ul>
  78. </Typography>
  79. </template>