1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- <script setup lang="tsx">
- import { Button, Divider, Form, Input, Typography } from 'ant-design-vue';
- import { useXAgent } from 'ant-design-x-vue';
- import { reactive, ref } from 'vue';
- defineOptions({ name: 'AXUseXAgentCustom' });
- const lines = ref<string[]>([]);
- const modelRef = reactive({
- question: '',
- });
- Form.useForm(modelRef);
- const log = (text: string) => {
- lines.value = [...lines.value, text];
- };
- const [ agent ] = useXAgent({
- request: ({ message }, { onUpdate, onSuccess }) => {
- let times = 0;
- const id = setInterval(() => {
- times += 1;
- onUpdate(`Thinking...(${times}/3)`);
- if (times >= 3) {
- onSuccess(`It's funny that you ask: ${message}`);
- clearInterval(id);
- }
- }, 500);
- },
- });
- const onFinish = ({ question }: { question: string }) => {
- log(`[You] Ask: ${question}`);
- agent.value.request(
- { message: question },
- {
- onUpdate: (message) => {
- log(`[Agent] Update: ${message}`);
- },
- onSuccess: (message) => {
- log(`[Agent] Answer: ${message}`);
- modelRef.question = ''
- },
- // Current demo not use error
- onError: () => { },
- },
- );
- };
- defineRender(() => {
- return (
- <>
- <Form
- model={modelRef}
- layout="vertical"
- onFinish={onFinish}
- // @ts-expect-error
- autoComplete="off"
- >
- <Form.Item label="Question" name="question">
- <Input v-model:value={modelRef.question} />
- </Form.Item>
- <Form.Item>
- <Button htmlType="submit" type="primary" loading={agent.value.isRequesting()}>
- submit
- </Button>
- </Form.Item>
- </Form>
- <Divider />
- <Typography>
- <ul style={{ listStyle: 'circle', paddingLeft: 0 }}>
- {lines.value.map((line, index) => (
- <li key={index}>{line}</li>
- ))}
- </ul>
- </Typography>
- </>
- )
- });
- </script>
|