chaining

Author: zombieJ

components/x-request/index.ts

@@ -46,6 +46,21 @@ interface XRequestMessage extends AnyObject {
   content?: XRequestMessageContent;
 }
 
+/** Debug usage */
+export interface InternalRequestConfig {
+  /**
+   * Replace the default base URL
+   */
+  baseURL?: string;
+
+  /**
+   * Attach files if needed
+   */
+  files?: Blob[];
+
+  method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
+}
+
 /**
  * Compatible with the parameters of OpenAI's chat.completions.create,
  * with plans to support more parameters and adapters in the future
@@ -127,22 +142,55 @@ class XRequestClass {
     return XRequestClass.instanceBuffer.get(id) as XRequestClass;
   }
 
-  public create = async <Input = AnyObject, Output = SSEOutput>(
+  /**
+   * @private Internal dev usage, do not use it in production or lock your version
+   */
+  public call = async <Input = AnyObject, Output = SSEOutput>(
     params: XRequestParams & Input,
+    config: InternalRequestConfig,
     callbacks?: XRequestCallbacks<Output>,
     transformStream?: XStreamOptions<Output>['transformStream'],
   ) => {
-    const requestInit = {
-      method: 'POST',
-      body: JSON.stringify({
+    const { baseURL, files, method = 'POST' } = config;
+
+    const isGetMethod = method === 'GET';
+
+    let body: string | FormData;
+
+    if (files?.length) {
+      const formData = new FormData();
+      files.forEach((file) => {
+        formData.append('file', file);
+      });
+      formData.append('data', JSON.stringify(params));
+
+      body = formData;
+    } else {
+      body = JSON.stringify({
         model: this.model,
         ...params,
-      }),
+      });
+    }
+
+    const requestInit = {
+      method,
+      body: isGetMethod ? undefined : body,
       headers: this.defaultHeaders,
     };
 
     try {
-      const response = await xFetch(this.baseURL, {
+      let mergedURL = baseURL || this.baseURL;
+
+      // Convert GET params to URL
+      if (isGetMethod) {
+        const url = new URL(mergedURL);
+        Object.keys(params).forEach((key) => {
+          url.searchParams.append(key, (params as any)[key]);
+        });
+        mergedURL = url.toString();
+      }
+
+      const response = await xFetch(mergedURL, {
         fetch: this.customOptions.fetch,
         ...requestInit,
       });
@@ -179,6 +227,14 @@ class XRequestClass {
     }
   };
 
+  public create = async <Input = AnyObject, Output = SSEOutput>(
+    params: XRequestParams & Input,
+    callbacks?: XRequestCallbacks<Output>,
+    transformStream?: XStreamOptions<Output>['transformStream'],
+  ) => {
+    return this.call<Input, Output>(params, {}, callbacks, transformStream);
+  };
+
   private customResponseHandler = async <Output = SSEOutput>(
     response: Response,
     callbacks?: XRequestCallbacks<Output>,

docs/playground/ChainReaction/ChatBox.tsx

@@ -52,6 +52,12 @@ export default function ChatBox(props: ChatBoxProps) {
   const [open, setOpen] = React.useState(false);
   const [files, setFiles] = React.useState<GetProp<AttachmentsProps, 'items'>>([]);
 
+  React.useEffect(() => {
+    if (!files.length) {
+      setOpen(false);
+    }
+  }, [files.length]);
+
   // =========================== Sender ===========================
   const [text, setText] = React.useState('');
 

docs/playground/ChainReaction/index.tsx

@@ -82,8 +82,8 @@ function App() {
   const { styles } = useStyle();
 
   // ============================ Data ============================
-  const onChatSubmit = (text: string) => {
-    onRequest([{ text, role: 'user' }]);
+  const onChatSubmit = (text: string, files: File[]) => {
+    onRequest([{ text, role: 'user', files }]);
   };
 
   const [items, lastChainTask] = React.useMemo(() => {

docs/playground/ChainReaction/useChain.ts

@@ -1,20 +1,105 @@
-import { useXAgent, useXChat } from '@ant-design/x';
+import { useXAgent, useXChat, XRequest } from '@ant-design/x';
 
 export interface AgentMessageSingleType {
   role: 'user' | 'ai' | 'chain';
   text: string;
+  files?: File[];
 }
 
 export type AgentMessageType = AgentMessageSingleType[];
 
+// Used for chaining request
+const sharedRequest = XRequest({
+  baseURL: '-',
+});
+
 export default function useChain() {
   // =========================== Agent ============================
   const [agent] = useXAgent<AgentMessageType>({
     request: async ({ message = [] }, { onSuccess, onUpdate }) => {
       // Note: this is used for development usage.
       // You can realize with your own request logic.
       const sessionUrl = localStorage.getItem('api/session');
+      const diagnosticsUrl = localStorage.getItem('api/diagnostics');
       console.log('sessionUrl', sessionUrl);
+
+      if (!sessionUrl || !diagnosticsUrl) {
+        return;
+      }
+
+      // Start Chain Reaction
+      const [msg] = message;
+
+      const fetchResult = await fetch(sessionUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          query: msg.text,
+          // llmProvider: 'openai',
+          // llmModelName: 'gpt-4o',
+          llmProvider: 'alibaba',
+          llmModelName: 'qwen-plus',
+        }),
+      });
+
+      const resultJSON = (await fetchResult.json()) as {
+        message: string;
+        task_id: string;
+      };
+      console.log('resultJSON', resultJSON);
+
+      let prevRetStr: string = '';
+
+      // Loop call
+      setInterval(async () => {
+        sharedRequest.call(
+          {},
+          {
+            baseURL: diagnosticsUrl!,
+            method: 'GET',
+          },
+          {
+            onUpdate(chunk) {
+              const nextRetStr = JSON.stringify(chunk);
+              if (prevRetStr !== nextRetStr) {
+                prevRetStr = nextRetStr;
+                console.log('Info:', chunk);
+              }
+              // console.log('onUpdate', chunk);
+            },
+            onSuccess(chunk) {
+              // console.log('onSuccess', chunk);
+            },
+            onError(error) {
+              // console.log('onError', error);
+            },
+          },
+        );
+      }, 100);
+
+      // Get status
+      // sharedRequest.call(
+      //   {
+      //     task_id: resultJSON.task_id,
+      //   },
+      //   {
+      //     baseURL: diagnosticsUrl!,
+      //     method: 'GET',
+      //   },
+      //   {
+      //     onUpdate(chunk) {
+      //       console.log('onUpdate', chunk);
+      //     },
+      //     onSuccess(chunk) {
+      //       console.log('onSuccess', chunk);
+      //     },
+      //     onError(error) {
+      //       console.log('onError', error);
+      //     },
+      //   },
+      // );
     },
   });