fix: rapid update 20250126 (#615)

Co-authored-by: Hu Yueh-Wei <[email protected]>
TEN-framework · Jan 26, 2025 · 04e1ca4 · 04e1ca4
1 parent 0d85648
commit 04e1ca4
Showing 8 changed files with 153 additions and 26 deletions.
diff --git a/core/src/ten_manager/designer_frontend/bun.lockb b/core/src/ten_manager/designer_frontend/bun.lockb
diff --git a/core/src/ten_manager/designer_frontend/src/components/AppBar/FileMenu.tsx b/core/src/ten_manager/designer_frontend/src/components/AppBar/FileMenu.tsx
@@ -46,9 +46,10 @@ export function FileMenu(props: FileMenuProps) {
 
   const { data, error, isLoading } = useDirList(folderPath);
 
-  const { appendWidget } = useWidgetStore();
+  const { appendWidgetIfNotExists } = useWidgetStore();
 
-  const handleRunApp = React.useCallback(async () => {
+  const handleRunApp = async () => {
+    console.log("handleRunApp ===");
     try {
       const baseDirData = await getBaseDir();
       const baseDir = baseDirData?.base_dir;
@@ -59,21 +60,22 @@ export function FileMenu(props: FileMenuProps) {
 
       const scriptName = "start";
 
-      appendWidget({
+      appendWidgetIfNotExists({
         id: "run-app-" + Date.now(),
         category: EWidgetCategory.LogViewer,
         display_type: EWidgetDisplayType.Popup,
         metadata: {
           wsUrl: "ws://localhost:49483/api/designer/v1/ws/run-app",
           baseDir,
           scriptName,
+          supportStop: true,
         },
       });
     } catch (err) {
       console.error(err);
       toast.error("Failed to get base directory.");
     }
-  }, [appendWidget]);
+  };
 
   const handleManualOk = async () => {
     if (!folderPath.trim()) {

diff --git a/core/src/ten_manager/designer_frontend/src/components/Popup/GlobalPopups.tsx b/core/src/ten_manager/designer_frontend/src/components/Popup/GlobalPopups.tsx
@@ -75,14 +75,12 @@ export function GlobalPopups() {
           onClose={() => removeWidget(widget.id)}
         />
       ))}
-      {logViewerWidgetsMemo.map((widget) => (
-        <LogViewerPopup id={widget.id} key={`LogViewerPopup-${widget.id}`} />
-      ))}
       {logViewerWidgetsMemo.map((widget) => (
         <LogViewerPopup
           id={widget.id}
           key={`LogViewerPopup-${widget.id}`}
           data={widget.metadata}
+          supportStop={widget.metadata.supportStop}
         />
       ))}
     </>

diff --git a/core/src/ten_manager/designer_frontend/src/components/Popup/LogViewerPopup.tsx b/core/src/ten_manager/designer_frontend/src/components/Popup/LogViewerPopup.tsx
@@ -5,7 +5,7 @@
 // Refer to the "LICENSE" file in the root directory for more information.
 //
 import { useTranslation } from "react-i18next";
-import { PinIcon } from "lucide-react";
+import { PinIcon, OctagonXIcon } from "lucide-react";
 
 import Popup from "@/components/Popup/Popup";
 import LogViewerWidget from "@/components/Widget/LogViewerWidget";
@@ -22,10 +22,11 @@ interface LogViewerPopupProps {
     baseDir?: string;
     scriptName?: string;
   };
+  supportStop?: boolean;
 }
 
 export function LogViewerPopup(props: LogViewerPopupProps) {
-  const { id, data } = props;
+  const { id, data, supportStop = false } = props;
 
   const { t } = useTranslation();
   const { updateWidgetDisplayType, removeWidget } = useWidgetStore();
@@ -64,6 +65,18 @@ export function LogViewerPopup(props: LogViewerPopupProps) {
           Icon: PinIcon,
           onClick: handlePinToDock,
         },
+        ...(supportStop
+          ? [
+              {
+                id: "stop",
+                label: t("action.stop"),
+                Icon: OctagonXIcon,
+                onClick: () => {
+                  console.log("stop");
+                },
+              },
+            ]
+          : []),
       ]}
     >
       <LogViewerWidget id={id} data={data} />

diff --git a/core/src/ten_manager/designer_frontend/src/components/Popup/Popup.tsx b/core/src/ten_manager/designer_frontend/src/components/Popup/Popup.tsx
@@ -247,7 +247,8 @@ const Popup: React.FC<PopupProps> = ({
     <div
       className={cn(
         "fixed text-sm overflow-hidden",
-        "bg-background/80 backdrop-blur-sm border border-border/50 shadow-lg",
+        "bg-background/80 backdrop-blur-sm border border-border/50",
+        "shadow-xl ring-1 ring-border/50 dark:bg-gray-900/90",
         "text-foreground rounded-lg focus:outline-none flex flex-col popup",
         "transition-opacity duration-200 ease-in-out",
         isVisible ? "opacity-100" : "opacity-0",

diff --git a/core/src/ten_manager/designer_frontend/src/components/Widget/LogViewerWidget.tsx b/core/src/ten_manager/designer_frontend/src/components/Widget/LogViewerWidget.tsx
@@ -100,13 +100,6 @@ export default function LogViewerWidget(props: ILogViewerWidgetProps) {
     };
   }, [data?.wsUrl, data?.baseDir, data?.scriptName]);
 
-  const filteredLogs = React.useMemo(() => {
-    if (!defferedSearchInput) {
-      return logs;
-    }
-    return logs.filter((line) => line.includes(defferedSearchInput));
-  }, [logs, defferedSearchInput]);
-
   return (
     <div className="flex h-full w-full flex-col" id={id}>
       <div className="h-12 w-full flex items-center space-x-2 px-2">
@@ -121,17 +114,132 @@ export default function LogViewerWidget(props: ILogViewerWidgetProps) {
         </Button>
       </div>
       <ScrollArea className="h-[calc(100%-3rem)] w-full">
-        <div className="p-2 text-sm font-mono">
-          {filteredLogs.map((line, idx) => (
-            <div
-              key={`log-line-${idx}`}
-              className={cn("py-0.5 hover:bg-gray-100 dark:hover:bg-gray-800")}
-            >
-              {line}
-            </div>
-          ))}
+        <div className="p-2">
+          <LogViewerLogItemList logs={logs} search={defferedSearchInput} />
         </div>
       </ScrollArea>
     </div>
   );
 }
+
+const string2uuid = (str: string) => {
+  // Create a deterministic hash from the string
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash; // Convert to 32-bit integer
+  }
+
+  // Use the hash to create a deterministic UUID-like string
+  const hashStr = Math.abs(hash).toString(16).padStart(8, "0");
+  return (
+    `${hashStr}-${hashStr.slice(0, 4)}` +
+    `-4${hashStr.slice(4, 7)}-${hashStr.slice(7, 11)}-${hashStr.slice(0, 12)}`
+  );
+};
+
+export interface ILogViewerLogItemProps {
+  id: string;
+  extension?: string;
+  file?: string;
+  line?: number;
+  host?: string;
+  message: string;
+}
+
+const string2LogItem = (str: string): ILogViewerLogItemProps => {
+  const regex = /^(\w+)@([^:]+):(\d+)\s+\[([^\]]+)\]\s+(.+)$/;
+  const match = str.match(regex);
+  if (!match) {
+    return {
+      id: string2uuid(str),
+      message: str,
+    };
+  }
+  const [, extension, file, line, host, message] = match;
+  return {
+    id: string2uuid(str),
+    extension,
+    file,
+    line: parseInt(line, 10),
+    host,
+    message,
+  };
+};
+
+function LogViewerLogItem(props: ILogViewerLogItemProps & { search?: string }) {
+  const { id, extension, file, line, host, message, search } = props;
+
+  return (
+    <div
+      className={cn(
+        "font-mono text-xs py-0.5",
+        "hover:bg-gray-100 dark:hover:bg-gray-800"
+      )}
+      id={id}
+    >
+      {extension && (
+        <>
+          <span className="text-blue-500 dark:text-blue-400">{extension}</span>
+          <span className="text-gray-500 dark:text-gray-400">@</span>
+        </>
+      )}
+      {file && (
+        <>
+          <span className="text-emerald-600 dark:text-emerald-400">{file}</span>
+          <span className="text-gray-500 dark:text-gray-400">:</span>
+        </>
+      )}
+      {line && (
+        <span className="text-amber-600 dark:text-amber-400">{line}</span>
+      )}
+      {host && (
+        <>
+          <span className="text-gray-500 dark:text-gray-400"> [</span>
+          <span className="text-purple-600 dark:text-purple-400">{host}</span>
+          <span className="text-gray-500 dark:text-gray-400">] </span>
+        </>
+      )}
+      {search ? (
+        <span className="whitespace-pre-wrap">
+          {message.split(search).map((part, i, arr) => (
+            <React.Fragment key={i}>
+              {part}
+              {i < arr.length - 1 && (
+                <span className="bg-yellow-200 dark:bg-yellow-800">
+                  {search}
+                </span>
+              )}
+            </React.Fragment>
+          ))}
+        </span>
+      ) : (
+        <span className="whitespace-pre-wrap">{message}</span>
+      )}
+    </div>
+  );
+}
+
+function LogViewerLogItemList(props: { logs: string[]; search?: string }) {
+  const { logs: rawLogs, search } = props;
+
+  const logsMemo = React.useMemo(() => {
+    return rawLogs.map(string2LogItem);
+  }, [rawLogs]);
+
+  const filteredLogs = React.useMemo(() => {
+    if (!search) {
+      return logsMemo;
+    }
+    return logsMemo.filter((log) => log.message.includes(search));
+  }, [logsMemo, search]);
+
+  return (
+    <>
+      {filteredLogs.map((log) => (
+        <LogViewerLogItem key={log.id} {...log} search={search} />
+      ))}
+    </>
+  );
+}
diff --git a/core/src/ten_manager/designer_frontend/src/components/ui/NavigationMenu.tsx b/core/src/ten_manager/designer_frontend/src/components/ui/NavigationMenu.tsx
@@ -59,6 +59,8 @@ const NavigationMenuTrigger = React.forwardRef<
   <NavigationMenuPrimitive.Trigger
     ref={ref}
     className={cn(navigationMenuTriggerStyle(), "group", className)}
+    onPointerMove={(event) => event.preventDefault()}
+    onPointerLeave={(event) => event.preventDefault()}
     {...props}
   >
     {children}{" "}
@@ -80,6 +82,8 @@ const NavigationMenuContent = React.forwardRef<
       "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
       className
     )}
+    onPointerMove={(event) => event.preventDefault()}
+    onPointerLeave={(event) => event.preventDefault()}
     {...props}
   />
 ));

diff --git a/core/src/ten_manager/designer_frontend/src/types/widgets.ts b/core/src/ten_manager/designer_frontend/src/types/widgets.ts
@@ -62,6 +62,7 @@ interface ILogViewerWidgetData {
   wsUrl: string;
   baseDir: string;
   scriptName: string;
+  supportStop?: boolean;
 }
 
 export interface ILogViewerWidget extends IWidgetBase {