fix: logviewer and widget (#1051)

Author: shczhen

core/src/ten_manager/designer_frontend/bun.lock

@@ -64,7 +64,7 @@ export const LogViewerPopupContent = (props: { widget: ILogViewerWidget }) => {
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [backstageWidgets, widget.metadata.scriptType, widget.metadata.script]);
+  }, [widget.metadata.scriptType, widget.metadata.script]);
 
   return (
     <LogViewerFrontStageWidget

core/src/ten_manager/designer_frontend/bun.lockb

@@ -12,7 +12,7 @@ import AutoSizer from "react-virtualized-auto-sizer";
 import { Input } from "@/components/ui/Input";
 import { Button } from "@/components/ui/Button";
 import { cn } from "@/lib/utils";
-import { useWidgetStore } from "@/store/widget";
+import { useWidgetStore, appendLogsById } from "@/store/widget";
 import { ILogViewerWidget, ILogViewerWidgetOptions } from "@/types/widgets";
 import { EWSMessageType } from "@/types/apps";
 
@@ -22,8 +22,6 @@ export function LogViewerBackstageWidget(props: ILogViewerWidget) {
     metadata: { wsUrl, scriptType, script, postActions } = {},
   } = props;
 
-  const { appendLogViewerHistory } = useWidgetStore();
-
   const wsRef = React.useRef<WebSocket | null>(null);
 
   React.useEffect(() => {
@@ -47,32 +45,28 @@ export function LogViewerBackstageWidget(props: ILogViewerWidget) {
           msg.type === EWSMessageType.STANDARD_ERROR
         ) {
           const line = msg.data;
-          appendLogViewerHistory(id, [line]);
+          appendLogsById(id, [line]);
         } else if (msg.type === EWSMessageType.NORMAL_LINE) {
           const line = msg.data;
-          appendLogViewerHistory(id, [line]);
+          appendLogsById(id, [line]);
         } else if (msg.type === EWSMessageType.EXIT) {
           const code = msg.code;
           const errMsg = msg?.error_message;
-          appendLogViewerHistory(id, [
+          appendLogsById(id, [
             errMsg,
             `Process exited with code ${code}. Closing...`,
           ]);
 
           wsRef.current?.close();
         } else if (msg.status === "fail") {
-          appendLogViewerHistory(id, [
-            `Error: ${msg.message || "Unknown error"}\n`,
-          ]);
+          appendLogsById(id, [`Error: ${msg.message || "Unknown error"}\n`]);
         } else {
-          appendLogViewerHistory(id, [
-            `Unknown message: ${JSON.stringify(msg)}`,
-          ]);
+          appendLogsById(id, [`Unknown message: ${JSON.stringify(msg)}`]);
         }
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
       } catch (err) {
         // If it's not JSON, output it directly as text.
-        appendLogViewerHistory(id, [event.data]);
+        appendLogsById(id, [event.data]);
       }
     };
 

core/src/ten_manager/designer_frontend/src/components/Popup/LogViewer.tsx

@@ -41,4 +41,4 @@ export const TEN_FRAMEWORK_GH_OWNER = "Ten-framework";
 export const TEN_FRAMEWORK_GH_REPO = "ten-framework";
 
 // --- Doc
-export const TEN_DOC_URL = "https://doc.theten.ai/";
+export const TEN_DOC_URL = "https://theten.ai/";

core/src/ten_manager/designer_frontend/src/components/Widget/LogViewerWidget.tsx

@@ -239,3 +239,32 @@ export const useWidgetStore = create<{
     }) => set((state) => ({ extFilter: { ...state.extFilter, ...filter } })),
   }))
 );
+
+const logBuffer: {
+  [id: string]: {
+    history: string[];
+  };
+} = {};
+let timer: null | NodeJS.Timeout = null;
+
+// debounced function to append logs
+// to the logViewerHistory in the store
+export const appendLogsById = (id: string, logs: string[]) => {
+  if (!logBuffer[id]) {
+    logBuffer[id] = { history: logs };
+  } else {
+    logBuffer[id].history.push(...logs);
+  }
+
+  if (!timer) {
+    timer = setTimeout(() => {
+      Object.entries(logBuffer).forEach(([id, log]) => {
+        if (log.history.length > 0) {
+          useWidgetStore.getState().appendLogViewerHistory(id, log.history);
+        }
+        logBuffer[id].history = [];
+      });
+      timer = null;
+    }, 100); // Adjust the time interval as needed
+  }
+};