@midscene/visualizer 0.20.2-beta-20250704092743.0 → 0.21.0

package/dist/es/assets/close.909351c0.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.12354 2.66667L14.2863 13.3333" stroke="#333333" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.12354 13.3333L14.2863 2.66667" stroke="#333333" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/es/assets/history.164a4eab.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.63002 9.02131C3.76823 15.1469 8.82714 19.522 12.6931 19.522C16.5591 19.522 19.6931 16.388 19.6931 12.522C19.6931 8.65598 16.5591 5.52197 12.6931 5.52197C10.1024 5.52197 7.84043 6.92936 6.63002 9.02131Z" stroke="black" stroke-opacity="0.85" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.6948 8.32198L12.6943 12.5251L15.6621 15.4928" stroke="black" stroke-opacity="0.85" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/es/assets/magnifying-glass.9498e70e.svg

@@ -0,0 +1,12 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_541_8555)">
+<path d="M8.39697 14.2909C11.9178 14.2909 14.772 11.4367 14.772 7.91589C14.772 4.39509 11.9178 1.54089 8.39697 1.54089C4.87617 1.54089 2.02197 4.39509 2.02197 7.91589C2.02197 11.4367 4.87617 14.2909 8.39697 14.2909Z" stroke="black" stroke-opacity="0.65" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M10.5185 5.41956C9.97563 4.87667 9.22563 4.54089 8.39718 4.54089C7.56877 4.54089 6.81877 4.87667 6.27588 5.41956" stroke="black" stroke-opacity="0.65" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.98 12.499L16.162 15.681" stroke="black" stroke-opacity="0.65" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_541_8555">
+<rect width="18" height="18" fill="white" transform="translate(0.521973 0.0408936)"/>
+</clipPath>
+</defs>
+</svg>

package/dist/es/assets/setting.80ab7285.svg

@@ -0,0 +1,11 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5269 8.85531H17.5269" stroke="black" stroke-opacity="0.85" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.8599 7.52197V10.1886" stroke="black" stroke-opacity="0.85" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.8602 8.85531H7.52686" stroke="black" stroke-opacity="0.85" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.1935 13.522H7.52686" stroke="black" stroke-opacity="0.85" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.8599 12.1886V14.8553" stroke="black" stroke-opacity="0.85" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.1932 13.522H12.8599" stroke="black" stroke-opacity="0.85" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.5269 18.1886H17.5269" stroke="black" stroke-opacity="0.85" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.8599 16.8553V19.522" stroke="black" stroke-opacity="0.85" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.8602 18.1886H7.52686" stroke="black" stroke-opacity="0.85" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -7,20 +7,24 @@ var buffer = {
 import { jsx, jsxs } from "react/jsx-runtime";
 import { SettingOutlined } from "@ant-design/icons";
 import { Input, Modal, Tooltip } from "antd";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useEnvConfig } from "./store/store";
 function EnvConfig({
   showTooltipWhenEmpty = true,
-  tooltipPlacement = "bottom"
+  showModelName = true,
+  tooltipPlacement = "bottom",
+  mode = "icon"
 }) {
-  const { config, configString, loadConfig } = useEnvConfig();
+  const { config, configString, loadConfig, syncFromStorage } = useEnvConfig();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [tempConfigString, setTempConfigString] = useState(configString);
   const midsceneModelName = config.MIDSCENE_MODEL_NAME;
   const componentRef = useRef(null);
   const showModal = (e) => {
+    syncFromStorage();
     setIsModalOpen(true);
     e.preventDefault();
+    e.stopPropagation();
   };
   const handleOk = () => {
     setIsModalOpen(false);
@@ -29,6 +33,11 @@ function EnvConfig({
   const handleCancel = () => {
     setIsModalOpen(false);
   };
+  useEffect(() => {
+    if (isModalOpen) {
+      setTempConfigString(configString);
+    }
+  }, [isModalOpen, configString]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -37,13 +46,12 @@ function EnvConfig({
         justifyContent: "flex-end",
         gap: "10px",
         alignItems: "center",
-        width: "100%",
         height: "100%",
         minHeight: "32px"
       },
       ref: componentRef,
       children: [
-        midsceneModelName,
+        showModelName ? midsceneModelName : null,
         /* @__PURE__ */ jsx(
           Tooltip,
           {
@@ -52,10 +60,17 @@ function EnvConfig({
             align: { offset: [-10, 5] },
             open: (
               // undefined for default behavior of tooltip, hover for show
-              showTooltipWhenEmpty ? Object.keys(config).length === 0 : void 0
+              // close tooltip when modal is open
+              isModalOpen ? false : showTooltipWhenEmpty ? Object.keys(config).length === 0 : void 0
             ),
-            getPopupContainer: () => componentRef.current,
-            children: /* @__PURE__ */ jsx(SettingOutlined, { onClick: showModal })
+            children: mode === "icon" ? /* @__PURE__ */ jsx(SettingOutlined, { onClick: showModal }) : /* @__PURE__ */ jsx(
+              "span",
+              {
+                onClick: showModal,
+                style: { color: "#006AFF", cursor: "pointer" },
+                children: "set up"
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -66,7 +81,10 @@ function EnvConfig({
             onOk: handleOk,
             onCancel: handleCancel,
             okText: "Save",
-            style: { width: "800px" },
+            style: { width: "800px", height: "100%", marginTop: "10%" },
+            destroyOnClose: true,
+            maskClosable: true,
+            centered: true,
             children: [
               /* @__PURE__ */ jsx(
                 Input.TextArea,

package/dist/es/component/player.css

@@ -3,10 +3,10 @@
   height: 100%;
   max-width: 100%;
   max-height: 100%;
-  padding: 8px;
-  background: #fff;
+  padding: 12px;
+  background: #F5F5F5;
   box-sizing: border-box;
-  border: 1px solid #0000000F;
+  border: 1px solid #F5F5F5;
   border-radius: 8px;
   line-height: 100%;
   margin: 0 auto;
@@ -16,26 +16,55 @@
   min-height: 300px;
   position: relative;
 }
+.player-container[data-fit-mode=height] {
+  background: #fff;
+}
+.player-container[data-fit-mode=height] .canvas-container {
+  background-color: #F5F5F5;
+}
 .player-container .canvas-container {
-  flex: 1 1;
+  flex: 0 0 auto;
   min-height: 200px;
+  width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
-  padding: 8px;
   margin-bottom: 12px;
   position: relative;
-  background-color: #F5F5F5;
+  background-color: #fff;
   border-radius: inherit;
+  aspect-ratio: var(--canvas-aspect-ratio, 16/9);
 }
 .player-container .canvas-container canvas {
+  width: 100%;
+  height: auto;
   max-width: 100%;
   max-height: 100%;
   box-sizing: border-box;
   display: block;
   margin: 0 auto;
   object-fit: contain;
+  border: none;
+}
+.player-container .canvas-container[data-fit-mode=height] {
+  flex: 1 1 auto;
+  aspect-ratio: unset;
+  min-height: 0;
+  height: auto;
+}
+.player-container .canvas-container[data-fit-mode=height] canvas {
+  height: 100%;
+  width: auto;
+  max-width: 100%;
+  max-height: 100%;
+}
+.player-container .canvas-container[data-fit-mode=width] {
+  aspect-ratio: var(--canvas-aspect-ratio, 16/9);
+}
+.player-container .canvas-container[data-fit-mode=width] canvas {
+  width: 100%;
+  height: auto;
 }
 .player-container .player-timeline-wrapper {
   width: 100%;

package/dist/es/component/player.js

@@ -176,6 +176,7 @@ function Player(props) {
   const scripts = props == null ? void 0 : props.replayScripts;
   const imageWidth = (props == null ? void 0 : props.imageWidth) || 1920;
   const imageHeight = (props == null ? void 0 : props.imageHeight) || 1080;
+  const fitMode = (props == null ? void 0 : props.fitMode) || "height";
   const currentImg = useRef(((_a = scripts == null ? void 0 : scripts[0]) == null ? void 0 : _a.img) || null);
   const divContainerRef = useRef(null);
   const app = useMemo(() => new PIXI.Application(), []);
@@ -629,6 +630,20 @@ function Player(props) {
     Promise.resolve(
       (() => __async(this, null, function* () {
         yield init();
+        if (divContainerRef.current && imageWidth && imageHeight) {
+          const aspectRatio = imageWidth / imageHeight;
+          divContainerRef.current.style.setProperty(
+            "--canvas-aspect-ratio",
+            aspectRatio.toString()
+          );
+          divContainerRef.current.setAttribute("data-fit-mode", fitMode);
+          const playerContainer = divContainerRef.current.closest(
+            ".player-container"
+          );
+          if (playerContainer) {
+            playerContainer.setAttribute("data-fit-mode", fitMode);
+          }
+        }
         triggerReplay();
       }))()
     );
@@ -639,7 +654,7 @@ function Player(props) {
         console.warn("destroy failed", e);
       }
     };
-  }, []);
+  }, [imageWidth, imageHeight, fitMode]);
   useEffect(() => {
     if (replayMark) {
       return play();

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

@@ -4,9 +4,9 @@ import console from "console-browserify";
 var buffer = {
   Buffer
 };
-import { jsx, jsxs } from "react/jsx-runtime";
-import { AimOutlined } from "@ant-design/icons";
-import { Checkbox, Dropdown, Space } from "antd";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox, Dropdown } from "antd";
+import SettingOutlined from "../../assets/setting.80ab7285.svg";
 import { useEnvConfig } from "../store/store";
 import { deepThinkTip, trackingTip } from "./playground-constants";
 const ConfigSelector = ({
@@ -25,10 +25,7 @@ const ConfigSelector = ({
     return null;
   }
   const configItems = buildConfigItems();
-  return /* @__PURE__ */ jsx("div", { className: "config-selector", children: /* @__PURE__ */ jsx(Dropdown, { menu: { items: configItems }, children: /* @__PURE__ */ jsxs(Space, { children: [
-    /* @__PURE__ */ jsx(AimOutlined, {}),
-    renderSettingsDisplay()
-  ] }) }) });
+  return /* @__PURE__ */ jsx("div", { className: "selector-trigger", children: /* @__PURE__ */ jsx(Dropdown, { menu: { items: configItems }, trigger: ["click"], children: /* @__PURE__ */ jsx(SettingOutlined, { width: 24, height: 24 }) }) });
   function buildConfigItems() {
     const items = [];
     if (enableTracking) {
@@ -61,20 +58,6 @@ const ConfigSelector = ({
     }
     return items;
   }
-  function renderSettingsDisplay() {
-    const displayParts = [];
-    if (enableTracking) {
-      const trackingText = forceSameTabNavigation ? trackingTip : "don't track popup";
-      displayParts.push(trackingText);
-    }
-    if (showDeepThinkOption && deepThink) {
-      displayParts.push(deepThinkTip);
-    }
-    if (displayParts.length === 2) {
-      displayParts.splice(1, 0, "/");
-    }
-    return displayParts.join(" ");
-  }
 };
 export {
   ConfigSelector

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

@@ -4,36 +4,164 @@ import console from "console-browserify";
 var buffer = {
   Buffer
 };
-import { jsx, jsxs } from "react/jsx-runtime";
-import { HistoryOutlined } from "@ant-design/icons";
-import { Dropdown, Space } from "antd";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Input, Modal, Typography } from "antd";
+import { useMemo, useState } from "react";
+import CloseOutlined from "../../assets/close.909351c0.svg";
+import HistoryOutlined from "../../assets/history.164a4eab.svg";
+import MagnifyingGlass from "../../assets/magnifying-glass.9498e70e.svg";
 import { useHistoryStore } from "../store/history";
-import { actionNameForType } from "./playground-utils";
+const { Text } = Typography;
 const HistorySelector = ({
   onSelect
 }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [searchText, setSearchText] = useState("");
   const history = useHistoryStore((state) => state.history);
   const clearHistory = useHistoryStore((state) => state.clearHistory);
-  const items = history.map((item, index) => ({
-    label: /* @__PURE__ */ jsxs("a", { onClick: () => onSelect(item), children: [
-      actionNameForType(item.type),
-      " - ",
-      item.prompt.slice(0, 50),
-      item.prompt.length > 50 ? "..." : ""
-    ] }),
-    key: String(index)
-  }));
-  if (history.length === 0) {
-    return null;
-  }
-  items.push({
-    type: "divider"
-  });
-  items.push({
-    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__ */ jsx(Space, { children: /* @__PURE__ */ jsx(HistoryOutlined, { style: { fontSize: 14 } }) }) }) });
+  const groupedHistory = useMemo(() => {
+    const now = Date.now();
+    const sevenDaysAgo = now - 7 * 24 * 60 * 60 * 1e3;
+    const oneYearAgo = now - 365 * 24 * 60 * 60 * 1e3;
+    const filteredHistory = history.filter(
+      (item) => item.prompt.toLowerCase().includes(searchText.toLowerCase())
+    );
+    const groups = {
+      recent7Days: filteredHistory.filter(
+        (item) => item.timestamp >= sevenDaysAgo
+      ),
+      recent1Year: filteredHistory.filter(
+        (item) => item.timestamp < sevenDaysAgo && item.timestamp >= oneYearAgo
+      ),
+      older: filteredHistory.filter((item) => item.timestamp < oneYearAgo)
+    };
+    return groups;
+  }, [history, searchText]);
+  const handleHistoryClick = (item) => {
+    onSelect(item);
+    setIsModalOpen(false);
+  };
+  const handleClearHistory = () => {
+    clearHistory();
+    setSearchText("");
+    setIsModalOpen(false);
+  };
+  const renderHistoryGroup = (title, items) => {
+    if (items.length === 0)
+      return null;
+    return /* @__PURE__ */ jsxs("div", { className: "history-group", children: [
+      /* @__PURE__ */ jsx("div", { className: "history-group-title", children: title }),
+      items.map((item, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "history-item",
+          onClick: () => handleHistoryClick(item),
+          children: item.prompt
+        },
+        `${item.timestamp}-${index}`
+      ))
+    ] }, title);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "selector-trigger", onClick: () => setIsModalOpen(true), children: /* @__PURE__ */ jsx(HistoryOutlined, { width: 24, height: 24 }) }),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        open: isModalOpen,
+        onCancel: () => setIsModalOpen(false),
+        footer: null,
+        width: "100%",
+        closable: false,
+        centered: false,
+        transitionName: "",
+        maskTransitionName: "",
+        style: {
+          margin: 0,
+          padding: 0,
+          maxWidth: "none",
+          top: "auto",
+          bottom: 0
+        },
+        styles: {
+          wrapper: {
+            alignItems: "flex-end",
+            justifyContent: "center",
+            paddingBottom: 0,
+            display: "flex"
+          },
+          body: {
+            height: "70vh",
+            padding: 0,
+            margin: 0
+          },
+          content: {
+            height: "70vh",
+            borderRadius: "12px 12px 0 0",
+            margin: 0,
+            padding: 0,
+            marginBottom: 0,
+            position: "fixed",
+            bottom: 0,
+            left: 0,
+            right: 0
+          }
+        },
+        maskClosable: true,
+        destroyOnClose: true,
+        children: /* @__PURE__ */ jsxs("div", { className: "history-modal-container", children: [
+          /* @__PURE__ */ jsxs("div", { className: "history-modal-header", children: [
+            /* @__PURE__ */ jsxs(Text, { strong: true, style: { fontSize: "16px" }, children: [
+              "History (",
+              history.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                type: "text",
+                icon: /* @__PURE__ */ jsx(CloseOutlined, { width: 16, height: 16 }),
+                onClick: () => setIsModalOpen(false),
+                className: "close-button"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "history-search-section", children: /* @__PURE__ */ jsxs("div", { className: "search-input-wrapper", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                placeholder: "Search",
+                value: searchText,
+                onChange: (e) => setSearchText(e.target.value),
+                prefix: /* @__PURE__ */ jsx(MagnifyingGlass, { width: 18, height: 18 }),
+                className: "search-input",
+                allowClear: true
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "link",
+                onClick: handleClearHistory,
+                className: "clear-button",
+                disabled: history.length === 0,
+                children: "Clear"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "history-content", children: history.length === 0 ? (
+            /* no history record */
+            /* @__PURE__ */ jsx("div", { className: "no-results", children: /* @__PURE__ */ jsx(Text, { type: "secondary", children: "No history record" }) })
+          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            renderHistoryGroup("Last 7 days", groupedHistory.recent7Days),
+            renderHistoryGroup("Last 1 year", groupedHistory.recent1Year),
+            renderHistoryGroup("Earlier", groupedHistory.older),
+            searchText && groupedHistory.recent7Days.length === 0 && groupedHistory.recent1Year.length === 0 && groupedHistory.older.length === 0 && /* @__PURE__ */ jsx("div", { className: "no-results", children: /* @__PURE__ */ jsx(Text, { type: "secondary", children: "No matching history record" }) })
+          ] }) })
+        ] })
+      }
+    )
+  ] });
 };
 export {
   HistorySelector

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

@@ -19,7 +19,8 @@ const PlaygroundResultView = ({
   replayCounter,
   loadingProgressText,
   verticalMode = false,
-  notReadyMessage
+  notReadyMessage,
+  fitMode
 }) => {
   let resultWrapperClassName = "result-wrapper";
   if (verticalMode) {
@@ -43,14 +44,15 @@ const PlaygroundResultView = ({
         replayScripts: replayScriptsInfo.scripts,
         imageWidth: replayScriptsInfo.width,
         imageHeight: replayScriptsInfo.height,
-        reportFileContent: (serviceMode === "In-Browser-Extension" || serviceMode === "Server") && (result == null ? void 0 : result.reportHTML) ? result == null ? void 0 : result.reportHTML : null
+        reportFileContent: (serviceMode === "In-Browser-Extension" || serviceMode === "Server") && (result == null ? void 0 : result.reportHTML) ? result == null ? void 0 : result.reportHTML : null,
+        fitMode
       },
       replayCounter
     );
-  } else if (result == null ? void 0 : result.result) {
-    resultDataToShow = typeof (result == null ? void 0 : result.result) === "string" ? /* @__PURE__ */ jsx("pre", { children: result == null ? void 0 : result.result }) : /* @__PURE__ */ jsx("pre", { children: JSON.stringify(result == null ? void 0 : result.result, null, 2) });
   } else if (result == null ? void 0 : result.error) {
     resultDataToShow = /* @__PURE__ */ jsx("pre", { children: result == null ? void 0 : result.error });
+  } else if ((result == null ? void 0 : result.result) !== void 0) {
+    resultDataToShow = typeof (result == null ? void 0 : result.result) === "string" ? /* @__PURE__ */ jsx("pre", { children: result == null ? void 0 : result.result }) : /* @__PURE__ */ jsx("pre", { children: JSON.stringify(result == null ? void 0 : result.result, null, 2) });
   }
   return /* @__PURE__ */ jsx(
     "div",

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

@@ -25,6 +25,7 @@ const PromptInput = ({
   onStop
 }) => {
   const [hoveringSettings, setHoveringSettings] = useState(false);
+  const [promptValue, setPromptValue] = useState("");
   const placeholder = getPlaceholderForType(selectedType);
   const textAreaRef = useRef(null);
   const history = useHistoryStore((state) => state.history);
@@ -36,22 +37,34 @@ const PromptInput = ({
         type: lastHistory.type || "aiAction",
         prompt: lastHistory.prompt || ""
       });
+      setPromptValue(lastHistory.prompt || "");
     } else {
       form.setFieldsValue({
         type: "aiAction",
         prompt: ""
       });
+      setPromptValue("");
     }
-  }, [lastHistory, form]);
+  }, []);
   const handleSelectHistory = useCallback(
     (historyItem) => {
       form.setFieldsValue({
         prompt: historyItem.prompt,
         type: historyItem.type
       });
+      setPromptValue(historyItem.prompt);
+    },
+    [form]
+  );
+  const handlePromptChange = useCallback(
+    (e) => {
+      const value = e.target.value;
+      setPromptValue(value);
+      form.setFieldValue("prompt", value);
     },
     [form]
   );
+  const isRunButtonEnabled = runButtonEnabled && promptValue.trim().length > 0;
   const handleRunWithHistory = useCallback(() => {
     const values = form.getFieldsValue();
     if (values.prompt) {
@@ -62,10 +75,12 @@ const PromptInput = ({
       });
     }
     onRun();
+    setPromptValue("");
+    form.setFieldValue("prompt", "");
   }, [form, addHistory, onRun]);
   const handleKeyDown = useCallback(
     (e) => {
-      if (e.key === "Enter" && e.metaKey) {
+      if (e.key === "Enter" && e.metaKey && isRunButtonEnabled) {
         handleRunWithHistory();
         e.preventDefault();
         e.stopPropagation();
@@ -84,7 +99,7 @@ const PromptInput = ({
         }, 0);
       }
     },
-    [handleRunWithHistory]
+    [handleRunWithHistory, isRunButtonEnabled]
   );
   const handleMouseEnter = useCallback(() => {
     setHoveringSettings(true);
@@ -98,9 +113,9 @@ const PromptInput = ({
       {
         type: "primary",
         icon: /* @__PURE__ */ jsx(SendOutlined, {}),
-        style: { borderRadius: 20 },
+        style: { borderRadius: 20, zIndex: 999 },
         onClick: handleRunWithHistory,
-        disabled: !runButtonEnabled,
+        disabled: !isRunButtonEnabled,
         loading,
         children: text
       }
@@ -114,7 +129,7 @@ const PromptInput = ({
         {
           icon: /* @__PURE__ */ jsx(BorderOutlined, {}),
           onClick: onStop,
-          style: { borderRadius: 20 },
+          style: { borderRadius: 20, zIndex: 999 },
           children: "Stop"
         }
       );
@@ -125,11 +140,11 @@ const PromptInput = ({
     loading,
     handleRunWithHistory,
     onStop,
-    runButtonEnabled,
+    isRunButtonEnabled,
     selectedType,
     stoppable
   ]);
-  return /* @__PURE__ */ jsxs("div", { className: "form-part input-wrapper", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "prompt-input-wrapper", children: [
     /* @__PURE__ */ jsxs(Space, { className: "mode-radio-group-wrapper", children: [
       /* @__PURE__ */ jsx(Form.Item, { name: "type", style: { margin: 0 }, children: /* @__PURE__ */ jsxs(
         Radio.Group,
@@ -145,43 +160,45 @@ const PromptInput = ({
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx(HistorySelector, { onSelect: handleSelectHistory })
+      /* @__PURE__ */ jsxs("div", { className: "action-icons", children: [
+        /* @__PURE__ */ jsx(HistorySelector, { onSelect: handleSelectHistory }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: hoveringSettings ? "settings-wrapper settings-wrapper-hover" : "settings-wrapper",
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            children: /* @__PURE__ */ jsx(
+              ConfigSelector,
+              {
+                enableTracking: serviceMode === "In-Browser-Extension",
+                showDeepThinkOption: selectedType === "aiTap"
+              }
+            )
+          }
+        )
+      ] })
     ] }),
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `main-side-console-input ${!runButtonEnabled ? "disabled" : ""}`,
+        className: `main-side-console-input ${!runButtonEnabled ? "disabled" : ""} ${loading ? "loading" : ""}`,
         children: [
           /* @__PURE__ */ jsx(Form.Item, { name: "prompt", style: { margin: 0 }, children: /* @__PURE__ */ jsx(
             TextArea,
             {
               className: "main-side-console-input-textarea",
               disabled: !runButtonEnabled,
-              rows: 2,
+              rows: 4,
               placeholder,
               autoFocus: true,
               onKeyDown: handleKeyDown,
+              onChange: handlePromptChange,
+              value: promptValue,
               ref: textAreaRef
             }
           ) }),
-          /* @__PURE__ */ jsxs("div", { className: "form-controller-wrapper", children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: hoveringSettings ? "settings-wrapper settings-wrapper-hover" : "settings-wrapper",
-                onMouseEnter: handleMouseEnter,
-                onMouseLeave: handleMouseLeave,
-                children: /* @__PURE__ */ jsx(
-                  ConfigSelector,
-                  {
-                    enableTracking: serviceMode === "In-Browser-Extension",
-                    showDeepThinkOption: selectedType === "aiTap"
-                  }
-                )
-              }
-            ),
-            renderActionButton()
-          ] })
+          /* @__PURE__ */ jsx("div", { className: "form-controller-wrapper", children: renderActionButton() })
         ]
       }
     )