antdx 如何接入dify

import { UserOutlined } from '@ant-design/icons';

import { Bubble, Sender, useXAgent, useXChat } from '@ant-design/x';

import { Flex, type GetProp } from 'antd';

import React from 'react';

const roles: GetProp<typeof Bubble.List, 'roles'> = {

  ai: {

    placement: 'start',

    avatar: { icon: <UserOutlined />, style: { background: '#fde3cf' } },

  },

  local: {

    placement: 'end',

    avatar: { icon: <UserOutlined />, style: { background: '#87d068' } },

  },

};

const App = () => {

  const [content, setContent] = React.useState('');

  // Agent for request

  const [agent] = useXAgent<string, { message: string }, string>({

    request: async ({ message }, { onSuccess, onUpdate }) => {

      const abc = { "query": message, "response_mode": "streaming", "model_config": { "model": { "provider": "langgenius/xinference/xinference", "name": "DeepSeek-R1-Distill-Qwen-32B", "mode": "chat", "completion_params": { "stop": [] } }, "pre_prompt": "", "created_by": "26bbb57f-1f7c-4e70-a866-eb36f53c0d18", "created_at": 1760510873, "updated_by": "26bbb57f-1f7c-4e70-a866-eb36f53c0d18", "updated_at": 1760510873, "dataset_configs": { "retrieval_model": "multiple", "top_k": 4, "datasets": { "datasets": [] } } }, "conversation_id": "", "files": [], "inputs": {} }

      const url = '/dify/console/api/apps/f2fc94b1-d266-4ff1-b18c-fd762523b43d/chat-messages'

      const response = await fetch(url, {

        method: 'POST',

        headers: {

          'Content-Type': 'application/json',

          Authorization: `Bearer ${localStorage.getItem('access_token')}`,

        },

        body: JSON.stringify(abc),

      });

      if (!response.body) throw new Error('No response body');

      const reader = response.body.getReader();

      const decoder = new TextDecoder('utf-8');

      let buffer = '';

      var a = "";

      while (true) {

        const sth = await reader.read();

        const { done, value } = sth;

        if (done) break;

        buffer += decoder.decode(value, { stream: true });

        const lines = buffer.split('\n');

        buffer = lines.pop() || '';

        for (const line of lines) {

          if (line.startsWith('data:')) {

            const data = line.slice(5).trim();

            if (JSON.parse(data).event == 'message_end') {

              onSuccess(a);

              return;

            }

            a += JSON.parse(data)?.answer || "";

            onUpdate(a);

          }

        }

      }

    },

  });

  // Chat messages

  const { onRequest, messages } = useXChat({

    agent,

  });

  return (

    <div className='flex' style={{ height: "100%", overflow: "hidden", flexDirection: "column", padding: "16px" }}>

      <Bubble.List

        roles={roles}

        style={{ flex: 1, overflowY: 'auto', padding: '16px' }}

        items={messages.map(({ id, message, status }) => ({

          key: id,

          loading: status === 'loading',

          role: status === 'local' ? 'local' : 'ai',

          content: message,

        }))}

      />

      <Sender

        loading={agent.isRequesting()}

        value={content}

        onChange={setContent}

        onSubmit={(nextContent) => {

          onRequest(nextContent);

          setContent('');

        }}

      />

    </div>

  );

};

export default App;