fix: api watch data

.env

@@ -1 +1,2 @@
 PORT=9000
+UMI_DEV_SERVER_COMPRESS=none

config/proxy.ts

@@ -11,6 +11,18 @@ export default function createProxyTable(target?: string) {
         secure: false,
         ws: true,
         pathRewrite: (pth: string) => pth.replace(`/^/${api}/`, `/${api}`),
+        // onProxyRes: (proxyRes: any, req: any, res: any) => {
+        //   if (req.headers.accept === 'text/event-stream') {
+        //     res.writeHead(res.statusCode, {
+        //       'Content-Type': 'text/event-stream',
+        //       'Cache-Control': 'no-transform',
+        //       Connection: 'keep-alive',
+        //       'X-Accel-Buffering': 'no',
+        //       'Access-Control-Allow-Origin': '*'
+        //     });
+        //     proxyRes.pipe(res);
+        //   }
+        // },
         headers: {
           origin: newTarget,
           Connection: 'keep-alive'

src/components/seal-table/index.tsx

@@ -99,7 +99,7 @@ const SealTable: React.FC<SealTableProps> = (props) => {
               columnProps as SealColumnProps;
             if (React.isValidElement(child)) {
               return (
-                <Col span={span}>
+                <Col span={span} key={i}>
                   <TableHeader
                     title={title}
                     style={headerStyle}

src/hooks/use-chunk-request.ts

@@ -125,11 +125,21 @@ const useSetChunkRequest = () => {
   };
 
   const resetResultSchema = (result: any[]) => {
+    //  ============ handle list data ============
+    // return _.map(result, (data: any) => {
+    //   if (data.type === WatchEventType.DELETE) {
+    //     data.ids = _.map(data.items, (item: any) => item.id);
+    //   }
+    //   data.collection = data.items || [];
+    //   return data;
+    // });
+    // ============ handle list data ============
+
     return _.map(result, (data: any) => {
       if (data.type === WatchEventType.DELETE) {
-        data.ids = _.map(data.items, (item: any) => item.id);
+        data.ids = data.data?.id ? [data.data.id] : [];
       }
-      data.collection = data.items || [];
+      data.collection = data.data ? [data.data] : [];
       return data;
     });
   };

src/hooks/use-event-source.ts

@@ -37,8 +37,8 @@ export default function useEventSource() {
 
     eventSourceRef.current.onmessage = (res: any) => {
       try {
+        console.log('event source message: ', { res, resData: res });
         const data = JSON.parse(res.data);
-        console.log('event source message: ', { data, resData: res });
         onmessage(data);
       } catch (error) {
         // error

src/hooks/use-update-chunk-list.ts

@@ -3,8 +3,9 @@ import _ from 'lodash';
 
 interface ChunkedCollection {
   ids: string[];
+  data: any;
   collection: any[];
-  type: string;
+  type: string | number;
 }
 // Only used to update lists without nested state
 export function useUpdateChunkedList(

src/pages/llmodels/index.tsx

@@ -372,19 +372,15 @@ const Models: React.FC = () => {
 
   useEffect(() => {
     fetchData();
-    // createModelsDataByFetch();
-    createModelEvent();
-    createModelsChunkRequest();
+    setTimeout(() => {
+      createModelsChunkRequest();
+    }, 1000);
 
     return () => {
       chunkRequedtRef.current?.current?.cancel?.();
     };
   }, [queryParams]);
 
-  useEffect(() => {
-    // watch models list
-  }, [queryParams]);
-
   const renderChildren = (list: any) => {
     return (
       <Space size={16} direction="vertical" style={{ width: '100%' }}>

src/utils/fetch-chunk-data.ts

@@ -75,3 +75,19 @@ export const readStreamData = async (
   // callback(chunk);
   await readStreamData(reader, decoder, callback);
 };
+
+export const readTextEventStreamData = async (
+  reader: any,
+  decoder: TextDecoder,
+  callback: (data: any) => void
+) => {
+  const { done, value } = await reader.read();
+
+  if (done) {
+    return;
+  }
+
+  let chunk = decoder.decode(value, { stream: true });
+  callback(chunk);
+  await readTextEventStreamData(reader, decoder, callback);
+};