useXChat

[12123456]

useXChat 如何使用自定义api

[dosubot[bot]]

useXChat 使用自定义 API 需要通过 provider 模式来配置。以下是基本步骤：

import { useXChat, XRequest, AbstractChatProvider } from '@ant-design/x';

// 1. 创建自定义 Provider
class CustomProvider extends AbstractChatProvider {
  transformParams(requestParams, options) {
    return { ...(options?.params || {}), ...(requestParams || {}) };
  }
  
  transformLocalMessage(requestParams) {
    return { content: requestParams.query || '', role: 'user' };
  }
  
  transformMessage(info) {
    const { originMessage, chunk } = info || {};
    const data = JSON.parse(chunk.data);
    return {
      content: `${originMessage?.content || ''}${data.content || ''}`,
      role: 'assistant'
    };
  }
}

// 2. 配置自定义 API 端点
const provider = new CustomProvider({
  request: XRequest('https://your-api.com/endpoint', {
    manual: true,
    params: { /* 你的 API 参数 */ },
  }),
});

// 3. 使用 useXChat
const { onRequest, messages, isRequesting } = useXChat({
  provider,
  requestPlaceholder: { content: '思考中...', role: 'assistant' },
  requestFallback: { content: '发生错误', role: 'assistant' },
});

关键点：

• 继承 AbstractChatProvider 并实现三个方法：transformParams（处理请求参数）、transformLocalMessage（格式化用户消息）、transformMessage（解析 API 响应）
• XRequest 支持自定义 headers、fetch 函数、timeout 等配置

完整示例可参考 custom-provider-width-ui.tsx。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[12123456]

所以在useXChat中必须传入provider，如何使用application/json的请求

[dosubot[bot]]

好消息！XRequest 会根据响应的 content-type 自动检测是 JSON 还是 SSE，你不需要特殊配置。

使用 application/json 的完整示例：

import React, { useState } from 'react';
import { useXChat, DefaultChatProvider, XRequest } from '@ant-design/x-sdk';

function ChatDemo() {
  // 创建 provider
  const [provider] = useState(
    new DefaultChatProvider({
      request: XRequest('https://your-api.com/chat', {
        manual: true,  // 重要：让 useXChat 控制请求时机
        headers: {
          'Authorization': 'Bearer your-token',  // 可选：自定义 header
        },
      }),
    }),
  );

  const { onRequest, messages, isRequesting } = useXChat({
    provider,
    requestPlaceholder: { 
      choices: [{ message: { content: '思考中...', role: 'assistant' } }] 
    },
    requestFallback: { 
      choices: [{ message: { content: '请求失败', role: 'assistant' } }] 
    },
  });

  const handleSend = (text: string) => {
    onRequest({ query: text });
  };

  return (
    // 你的 UI 组件
  );
}

关键点：

1. manual: true 是必须的，让 useXChat 控制请求时机
2. XRequest 默认已经设置 Content-Type: application/json
3. 只要你的 API 返回 Content-Type: application/json 响应头，就会自动使用 JSON 模式（非流式）

参考官方示例：default-chat-provider.tsx

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[12123456]

但有个问题：后端 API 需要带 token、走项目已有的 request 拦截器（处理认证、错误等）。直接用 XRequest 会绕过这些。

[dosubot[bot]]

XRequest 支持传入自定义 fetch 函数，可以集成你项目已有的请求拦截器：

import { useXChat, DefaultChatProvider, XRequest } from '@ant-design/x-sdk';
import { yourRequest } from '@/utils/request'; // 你项目的 request 工具

// 自定义 fetch 函数，包装你的拦截器
const customFetch = async (url, options) => {
  const token = getAuthToken(); // 你的 token 获取逻辑
  
  const response = await fetch(url, {
    ...options,
    headers: {
      ...options.headers,
      Authorization: `Bearer ${token}`,
    },
  });
  
  // 你的错误处理逻辑
  if (!response.ok) {
    handleError(response);
    throw new Error('Request failed');
  }
  
  return response;
};

// 创建 provider 时传入 custom fetch
const [provider] = useState(
  new DefaultChatProvider({
    request: XRequest('https://your-api.com/chat', {
      manual: true,
      fetch: customFetch,  // 使用自定义 fetch
    }),
  }),
);

const { onRequest, messages } = useXChat({ provider });

fetch 选项的签名：

fetch?: (url: string, options: XRequestOptions) => Promise<Response>

这样你就可以在 customFetch 里复用项目已有的认证、错误处理等逻辑，不会绕过现有拦截器。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[12123456]

项目的认证逻辑在 axios 拦截器里，如何操作