@midscene/visualizer 0.14.3 → 0.14.4-beta-20250414114024.0

package/dist/es/component/color.js

@@ -30,7 +30,7 @@ function highlightColorForType(type) {
 function globalThemeConfig() {
   return {
     token: {
-      colorPrimary: "#06b1ab"
+      colorPrimary: "#00B4AC"
     },
     components: {
       Layout: {

package/dist/es/component/env-config.js

@@ -5,7 +5,8 @@ var buffer = {
   Buffer
 };
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Button, Input, Modal, Tooltip } from "antd";
+import { SettingOutlined } from "@ant-design/icons";
+import { Input, Modal, Tooltip } from "antd";
 import { useState } from "react";
 import { iconForStatus } from "./misc";
 import { useEnvConfig } from "./store/store";
@@ -25,71 +26,89 @@ function EnvConfig() {
   const handleCancel = () => {
     setIsModalOpen(false);
   };
-  const editBtn = /* @__PURE__ */ jsx(Button, { type: "link", size: "small", onClick: showModal, children: "Edit" });
-  const [showEditButton, setShowEditButton] = useState(false);
-  const configTip = Object.keys(config).length === 0 ? /* @__PURE__ */ jsxs("div", { children: [
-    iconForStatus("failed"),
-    " No config",
-    /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        title: "Please set up your environment variables before using.",
-        placement: "right",
-        open: !isModalOpen && popupTab === "playground",
-        children: /* @__PURE__ */ jsx(Button, { type: "primary", onClick: showModal, children: "Click to set up" })
-      }
-    ) })
-  ] }) : /* @__PURE__ */ jsx(
+  const configTip = Object.keys(config).length === 0 ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, { title: "No Config", children: iconForStatus("failed") }) }) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      overlayInnerStyle: {
+        width: "fit-content"
+      },
+      title: /* @__PURE__ */ jsx("div", { children: Object.entries(config).map(([key, value]) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            lineHeight: "1.8",
+            display: "flex",
+            alignItems: "center",
+            marginBottom: "5px"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { style: { color: "#52c41a", marginRight: "8px" }, children: iconForStatus("success") }),
+            /* @__PURE__ */ jsxs("span", { style: { whiteSpace: "nowrap" }, children: [
+              key,
+              ": ",
+              key === "MIDSCENE_MODEL_NAME" ? value : "***"
+            ] })
+          ]
+        },
+        key
+      )) }),
+      children: iconForStatus("success")
+    }
+  ) });
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      onMouseEnter: () => setShowEditButton(true),
-      onMouseLeave: () => setShowEditButton(false),
-      children: Object.entries(config).map(([key, value]) => /* @__PURE__ */ jsx("div", { style: { lineHeight: "1.8" }, children: /* @__PURE__ */ jsxs("span", { children: [
-        iconForStatus("success"),
-        " ",
-        key,
-        ":",
-        " ",
-        key === "MIDSCENE_MODEL_NAME" ? value : "***",
-        " ",
-        showEditButton && editBtn
-      ] }) }, key))
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { marginRight: "8px" }, children: configTip }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            title: "Please set up your environment variables before using.",
+            placement: "bottom",
+            open: Object.keys(config).length === 0,
+            children: /* @__PURE__ */ jsx(SettingOutlined, { onClick: showModal })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Modal,
+          {
+            title: "Env Config",
+            open: isModalOpen,
+            onOk: handleOk,
+            onCancel: handleCancel,
+            okText: "Save",
+            style: { width: "800px" },
+            children: [
+              /* @__PURE__ */ jsx(
+                Input.TextArea,
+                {
+                  rows: 7,
+                  placeholder: "OPENAI_API_KEY=sk-...\nMIDSCENE_MODEL_NAME=gpt-4o-2024-08-06\n...",
+                  value: tempConfigString,
+                  onChange: (e) => setTempConfigString(e.target.value),
+                  style: { whiteSpace: "nowrap", wordWrap: "break-word" }
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { children: "The format is KEY=VALUE and separated by new lines." }),
+                /* @__PURE__ */ jsxs("p", { children: [
+                  "These data will be saved ",
+                  /* @__PURE__ */ jsx("strong", { children: "locally in your browser" }),
+                  "."
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
     }
   );
-  return /* @__PURE__ */ jsxs("div", { children: [
-    configTip,
-    /* @__PURE__ */ jsxs(
-      Modal,
-      {
-        title: "Env Config",
-        open: isModalOpen,
-        onOk: handleOk,
-        onCancel: handleCancel,
-        okText: "Save",
-        style: { width: "800px" },
-        children: [
-          /* @__PURE__ */ jsx(
-            Input.TextArea,
-            {
-              rows: 7,
-              placeholder: "OPENAI_API_KEY=sk-...\nMIDSCENE_MODEL_NAME=gpt-4o-2024-08-06\n...",
-              value: tempConfigString,
-              onChange: (e) => setTempConfigString(e.target.value),
-              style: { whiteSpace: "nowrap", wordWrap: "break-word" }
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { children: "The format is KEY=VALUE and separated by new lines." }),
-            /* @__PURE__ */ jsxs("p", { children: [
-              "These data will be saved ",
-              /* @__PURE__ */ jsx("strong", { children: "locally in your browser" }),
-              "."
-            ] })
-          ] })
-        ]
-      }
-    )
-  ] });
 }
 export {
   EnvConfig

package/dist/es/component/player.css

@@ -1,26 +1,33 @@
 .player-container {
-  width: fit-content;
+  width: 100%;
+  height: 100%;
   max-width: 100%;
   max-height: 100%;
-  padding: 12px 0;
-  padding-bottom: 0;
-  background: #434443DD;
+  padding: 8px;
+  background: #fff;
   box-sizing: border-box;
-  border: 1px solid #979797;
-  border-radius: 6px;
+  border: 1px solid #0000000F;
+  border-radius: 8px;
   line-height: 100%;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  overflow: visible;
+  min-height: 300px;
 }
 .player-container .canvas-container {
-  flex-grow: 1;
+  flex: none;
+  min-height: 200px;
+  max-height: calc(100% - 4px - 42px - 15px * 2 - 12px);
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   overflow: hidden;
-  padding: 0 12px;
+  padding: 8px;
+  margin-bottom: 12px;
+  position: relative;
+  background-color: #F5F5F5;
+  border-radius: inherit;
 }
 .player-container .canvas-container canvas {
   max-width: 100%;
@@ -28,13 +35,20 @@
   box-sizing: border-box;
   display: block;
   margin: 0 auto;
+  object-fit: contain;
+}
+.player-container .player-timeline-wrapper {
+  width: 100%;
+  flex-shrink: 0;
+  margin-bottom: 2px;
+  position: relative;
 }
 .player-container .player-timeline {
   width: 100%;
   height: 4px;
   background: #666;
   position: relative;
-  margin-top: -2px;
+  flex-shrink: 0;
 }
 .player-container .player-timeline .player-timeline-progress {
   transition-timing-function: linear;
@@ -42,36 +56,40 @@
   top: 0;
   left: 0;
   height: 4px;
-  background: #06b1ab;
+  background: #00B4AC;
+}
+.player-container .player-tools-wrapper {
+  width: 100%;
+  flex-shrink: 0;
+  position: relative;
 }
 .player-container .player-tools {
   margin-top: 15px;
   margin-bottom: 15px;
   max-width: 100%;
   overflow: hidden;
-  color: #FFF;
-  font-size: 16px;
+  color: #000;
+  font-size: 14px;
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   padding: 0 12px;
   justify-content: space-between;
-  height: 40px;
+  height: 42px;
   flex-shrink: 0;
 }
 .player-container .player-tools .player-control {
   flex-grow: 1;
   display: flex;
   flex-direction: row;
-  align-items: left;
+  align-items: center;
 }
 .player-container .player-tools .status-icon {
   transition: 0.2s;
-  width: 40px;
-  height: 40px;
+  width: 32px;
+  height: 32px;
   margin-right: 12px;
-  background: #666;
-  border-radius: 6px;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -81,29 +99,25 @@
   flex-grow: 1;
   overflow: hidden;
   position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 .player-container .player-tools .title {
   font-weight: bold;
-  height: 20px;
   line-height: 20px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  position: absolute;
-  top: 0;
-  left: 0;
   width: 100%;
 }
 .player-container .player-tools .subtitle {
-  height: 20px;
   line-height: 20px;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  position: absolute;
-  top: 18px;
-  left: 0;
 }
 .player-container .player-tools .player-tools-item {
   height: 100%;

package/dist/es/component/player.js

@@ -52,7 +52,7 @@ import {
   DownloadOutlined,
   LoadingOutlined
 } from "@ant-design/icons";
-import { Button, ConfigProvider, Spin } from "antd";
+import { Button, Spin } from "antd";
 import { rectMarkForItem } from "./blackboard";
 import { getTextureFromCache, loadTexture } from "./pixi-loader";
 const canvasPaddingLeft = 0;
@@ -431,14 +431,67 @@ function Player(props) {
       frame(animate);
     });
   });
+  const updateCanvasSize = () => {
+    if (!divContainerRef.current || !app)
+      return;
+    const container = divContainerRef.current.parentElement;
+    if (!container)
+      return;
+    const parentContainerHeight = container.clientHeight;
+    const containerWidth = divContainerRef.current.clientWidth;
+    if (containerWidth <= 0 || parentContainerHeight <= 0)
+      return;
+    const timelineHeight = 4;
+    const toolsHeight = 40;
+    const toolsMargin = 15 * 2;
+    const paddingHeight = 12;
+    const reservedHeight = timelineHeight + toolsHeight + toolsMargin + paddingHeight;
+    const availableContainerHeight = Math.max(
+      200,
+      parentContainerHeight - reservedHeight
+    );
+    const aspectRatio = imageWidth / imageHeight;
+    let targetWidth = containerWidth;
+    let targetHeight = containerWidth / aspectRatio;
+    if (targetHeight > availableContainerHeight) {
+      targetHeight = availableContainerHeight;
+      targetWidth = targetHeight * aspectRatio;
+    }
+    const maxSize = 600;
+    if (targetWidth > maxSize) {
+      targetWidth = maxSize;
+      targetHeight = maxSize / aspectRatio;
+    }
+    if (targetHeight > maxSize) {
+      targetHeight = maxSize;
+      targetWidth = maxSize * aspectRatio;
+    }
+    targetWidth = Math.floor(targetWidth);
+    targetHeight = Math.floor(targetHeight);
+    if (app.canvas) {
+      app.canvas.style.width = `${targetWidth}px`;
+      app.canvas.style.height = `${targetHeight}px`;
+    }
+    const safeCanvasHeight = Math.min(targetHeight, availableContainerHeight);
+    divContainerRef.current.style.height = `${safeCanvasHeight}px`;
+    const playerContainer = divContainerRef.current.closest(".player-container");
+    if (playerContainer && playerContainer instanceof HTMLElement) {
+      const totalHeight = safeCanvasHeight + reservedHeight;
+      playerContainer.style.minHeight = `${totalHeight}px`;
+    }
+  };
   const init = () => __async(this, null, function* () {
     if (!divContainerRef.current || !scripts)
       return;
     yield app.init({
-      width: canvasWidth,
-      height: canvasHeight,
-      background: 16053492
+      width: imageWidth,
+      height: imageHeight,
+      background: 16053492,
+      autoDensity: true,
+      antialias: true
     });
+    if (!divContainerRef.current)
+      return;
     divContainerRef.current.appendChild(app.canvas);
     windowContentContainer.x = 0;
     windowContentContainer.y = 0;
@@ -589,15 +642,15 @@ function Player(props) {
   let statusOnClick = () => {
   };
   if (animationProgress < 1) {
-    statusIconElement = /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }), size: "default" });
+    statusIconElement = /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true, color: "#333" }), size: "default" });
   } else if (mouseOverStatusIcon) {
-    statusIconElement = /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(CaretRightOutlined, {}), size: "default" });
+    statusIconElement = /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(CaretRightOutlined, { color: "#333" }), size: "default" });
     statusStyle.cursor = "pointer";
-    statusStyle.background = "#888";
+    statusStyle.background = "#F0f0f0";
     statusOnClick = () => setReplayMark(Date.now());
   } else {
     statusIconElement = // <Spin indicator={<CheckCircleOutlined />} size="default" />
-    /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(CaretRightOutlined, {}), size: "default" });
+    /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(CaretRightOutlined, { color: "#333" }), size: "default" });
   }
   const playerTopToolbar = (props == null ? void 0 : props.reportFileContent) ? /* @__PURE__ */ jsx("div", { className: "player-tools-right", children: /* @__PURE__ */ jsx("div", { className: "player-tools-item", children: /* @__PURE__ */ jsx(
     Button,
@@ -612,7 +665,7 @@ function Player(props) {
   ) }) }) : null;
   return /* @__PURE__ */ jsxs("div", { className: "player-container", children: [
     /* @__PURE__ */ jsx("div", { className: "canvas-container", ref: divContainerRef }),
-    /* @__PURE__ */ jsx("div", { className: "player-timeline", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "player-timeline-wrapper", children: /* @__PURE__ */ jsx("div", { className: "player-timeline", children: /* @__PURE__ */ jsx(
       "div",
       {
         className: "player-timeline-progress",
@@ -621,40 +674,25 @@ function Player(props) {
           transition: transitionStyle
         }
       }
-    ) }),
-    /* @__PURE__ */ jsxs("div", { className: "player-tools", children: [
-      /* @__PURE__ */ jsxs("div", { className: "player-control", children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "status-icon",
-            onMouseEnter: () => setMouseOverStatusIcon(true),
-            onMouseLeave: () => setMouseOverStatusIcon(false),
-            style: statusStyle,
-            onClick: statusOnClick,
-            children: /* @__PURE__ */ jsx(
-              ConfigProvider,
-              {
-                theme: {
-                  components: {
-                    Spin: {
-                      dotSize: 24,
-                      colorPrimary: "rgb(6,177,171)"
-                    }
-                  }
-                },
-                children: statusIconElement
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "status-text", children: [
-          /* @__PURE__ */ jsx("div", { className: "title", children: titleText }),
-          /* @__PURE__ */ jsx("div", { className: "subtitle", children: subTitleText })
-        ] })
+    ) }) }),
+    /* @__PURE__ */ jsx("div", { className: "player-tools-wrapper", children: /* @__PURE__ */ jsx("div", { className: "player-tools", children: /* @__PURE__ */ jsxs("div", { className: "player-control", children: [
+      /* @__PURE__ */ jsxs("div", { className: "status-text", children: [
+        /* @__PURE__ */ jsx("div", { className: "title", children: titleText }),
+        /* @__PURE__ */ jsx("div", { className: "subtitle", children: subTitleText })
       ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "status-icon",
+          onMouseEnter: () => setMouseOverStatusIcon(true),
+          onMouseLeave: () => setMouseOverStatusIcon(false),
+          style: statusStyle,
+          onClick: statusOnClick,
+          children: statusIconElement
+        }
+      ),
       playerTopToolbar
-    ] })
+    ] }) }) })
   ] });
 }
 export {

package/dist/es/component/playground/HistorySelector.js

@@ -33,10 +33,7 @@ const HistorySelector = ({
     label: /* @__PURE__ */ jsx("a", { onClick: () => clearHistory(), children: /* @__PURE__ */ jsx(Space, { children: "Clear History" }) }),
     key: "clear"
   });
-  return /* @__PURE__ */ jsx("div", { className: "history-selector", children: /* @__PURE__ */ jsx(Dropdown, { menu: { items }, children: /* @__PURE__ */ jsxs(Space, { children: [
-    /* @__PURE__ */ jsx(HistoryOutlined, {}),
-    "history"
-  ] }) }) });
+  return /* @__PURE__ */ jsx("div", { className: "history-selector", children: /* @__PURE__ */ jsx(Dropdown, { menu: { items }, children: /* @__PURE__ */ jsx(Space, { children: /* @__PURE__ */ jsx(HistoryOutlined, { style: { fontSize: 14 } }) }) }) });
 };
 export {
   HistorySelector

package/dist/es/component/playground/PlaygroundResult.js

@@ -50,7 +50,19 @@ const PlaygroundResultView = ({
   } else if (result == null ? void 0 : result.error) {
     resultDataToShow = /* @__PURE__ */ jsx("pre", { children: result == null ? void 0 : result.error });
   }
-  return /* @__PURE__ */ jsx("div", { className: resultWrapperClassName, children: resultDataToShow });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: resultWrapperClassName,
+      style: {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        flex: "1 1 auto"
+      },
+      children: resultDataToShow
+    }
+  );
 };
 export {
   PlaygroundResultView

package/dist/es/component/playground/PromptInput.js

@@ -5,8 +5,11 @@ var buffer = {
   Buffer
 };
 import { jsx, jsxs } from "react/jsx-runtime";
-import { BorderOutlined, SendOutlined } from "@ant-design/icons";
-import { Button, Form, Input, Radio, Tooltip } from "antd";
+import {
+  BorderOutlined,
+  SendOutlined
+} from "@ant-design/icons";
+import { Button, Form, Input, Radio, Space, Tooltip } from "antd";
 import { useCallback, useEffect, useState } from "react";
 import { useHistoryStore } from "../store/history";
 import { ConfigSelector } from "./ConfigSelector";
@@ -107,16 +110,27 @@ const PromptInput = ({
     stoppable
   ]);
   return /* @__PURE__ */ jsxs("div", { className: "form-part input-wrapper", children: [
-    /* @__PURE__ */ jsx("h3", { children: "Run" }),
-    /* @__PURE__ */ jsx(Form.Item, { name: "type", children: /* @__PURE__ */ jsxs(Radio.Group, { buttonStyle: "solid", disabled: !runButtonEnabled, children: [
-      /* @__PURE__ */ jsx(Radio.Button, { value: "aiAction", children: actionNameForType("aiAction") }),
-      /* @__PURE__ */ jsx(Radio.Button, { value: "aiQuery", children: actionNameForType("aiQuery") }),
-      /* @__PURE__ */ jsx(Radio.Button, { value: "aiAssert", children: actionNameForType("aiAssert") })
-    ] }) }),
+    /* @__PURE__ */ jsxs(Space, { className: "mode-radio-group-wrapper", children: [
+      /* @__PURE__ */ jsx(Form.Item, { name: "type", style: { margin: 0 }, children: /* @__PURE__ */ jsxs(
+        Radio.Group,
+        {
+          buttonStyle: "solid",
+          disabled: !runButtonEnabled,
+          className: "mode-radio-group",
+          children: [
+            /* @__PURE__ */ jsx(Radio.Button, { value: "aiAction", children: actionNameForType("aiAction") }),
+            /* @__PURE__ */ jsx(Radio.Button, { value: "aiQuery", children: actionNameForType("aiQuery") }),
+            /* @__PURE__ */ jsx(Radio.Button, { value: "aiAssert", children: actionNameForType("aiAssert") })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(HistorySelector, { onSelect: handleSelectHistory })
+    ] }),
     /* @__PURE__ */ jsxs("div", { className: "main-side-console-input", children: [
-      /* @__PURE__ */ jsx(Form.Item, { name: "prompt", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Form.Item, { name: "prompt", style: { margin: 0 }, children: /* @__PURE__ */ jsx(
         TextArea,
         {
+          className: "main-side-console-input-textarea",
           disabled: !runButtonEnabled,
           rows: 4,
           placeholder,
@@ -125,16 +139,13 @@ const PromptInput = ({
         }
       ) }),
       /* @__PURE__ */ jsxs("div", { className: "form-controller-wrapper", children: [
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           "div",
           {
             className: hoveringSettings ? "settings-wrapper settings-wrapper-hover" : "settings-wrapper",
             onMouseEnter: handleMouseEnter,
             onMouseLeave: handleMouseLeave,
-            children: [
-              /* @__PURE__ */ jsx(HistorySelector, { onSelect: handleSelectHistory }),
-              /* @__PURE__ */ jsx(ConfigSelector, { serviceMode })
-            ]
+            children: /* @__PURE__ */ jsx(ConfigSelector, { serviceMode })
           }
         ),
         renderActionButton()