@midscene/visualizer 0.26.2-beta-20250812091127.0 → 0.26.3-beta-20250813021342.0

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

@@ -1,246 +1,259 @@
 "use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var PromptInput_exports = {};
-__export(PromptInput_exports, {
-  PromptInput: () => PromptInput
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    PromptInput: ()=>PromptInput
 });
-module.exports = __toCommonJS(PromptInput_exports);
-var import_buffer = __toESM(require("buffer"));
-var import_browser = __toESM(require("process/browser"));
-var import_console_browserify = __toESM(require("console-browserify"));
-var buffer = {
-  Buffer: import_buffer.default
-};
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_icons = require("@ant-design/icons");
-var import_antd = require("antd");
-var import_react = require("react");
-var import_history = require("../store/history");
-var import_ConfigSelector = require("./ConfigSelector");
-var import_HistorySelector = require("./HistorySelector");
-var import_playground_utils = require("./playground-utils");
-const { TextArea } = import_antd.Input;
-const PromptInput = ({
-  runButtonEnabled,
-  form,
-  serviceMode,
-  selectedType,
-  dryMode,
-  stoppable,
-  loading,
-  onRun,
-  onStop,
-  clearPromptAfterRun = true
-}) => {
-  const [hoveringSettings, setHoveringSettings] = (0, import_react.useState)(false);
-  const [promptValue, setPromptValue] = (0, import_react.useState)("");
-  const placeholder = (0, import_playground_utils.getPlaceholderForType)(selectedType);
-  const textAreaRef = (0, import_react.useRef)(null);
-  const history = (0, import_history.useHistoryStore)((state) => state.history);
-  const addHistory = (0, import_history.useHistoryStore)((state) => state.addHistory);
-  const lastHistory = history[0];
-  (0, import_react.useEffect)(() => {
-    if (lastHistory) {
-      form.setFieldsValue({
-        type: lastHistory.type || "aiAction",
-        prompt: lastHistory.prompt || ""
-      });
-      setPromptValue(lastHistory.prompt || "");
-    } else {
-      form.setFieldsValue({
-        type: "aiAction",
-        prompt: ""
-      });
-      setPromptValue("");
-    }
-  }, []);
-  const handleSelectHistory = (0, import_react.useCallback)(
-    (historyItem) => {
-      form.setFieldsValue({
-        prompt: historyItem.prompt,
-        type: historyItem.type
-      });
-      setPromptValue(historyItem.prompt);
-    },
-    [form]
-  );
-  const handlePromptChange = (0, import_react.useCallback)(
-    (e) => {
-      const value = e.target.value;
-      setPromptValue(value);
-      form.setFieldValue("prompt", value);
-    },
-    [form]
-  );
-  const isRunButtonEnabled = runButtonEnabled && promptValue.trim().length > 0;
-  const handleRunWithHistory = (0, import_react.useCallback)(() => {
-    const values = form.getFieldsValue();
-    if (values.prompt) {
-      addHistory({
-        type: values.type,
-        prompt: values.prompt,
-        timestamp: Date.now()
-      });
-    }
-    onRun();
-    if (clearPromptAfterRun) {
-      setPromptValue("");
-      form.setFieldValue("prompt", "");
-    }
-  }, [form, addHistory, onRun]);
-  const handleKeyDown = (0, import_react.useCallback)(
-    (e) => {
-      if (e.key === "Enter" && e.metaKey && isRunButtonEnabled) {
-        handleRunWithHistory();
-        e.preventDefault();
-        e.stopPropagation();
-      } else if (e.key === "Enter") {
-        setTimeout(() => {
-          if (textAreaRef.current) {
-            const textarea = textAreaRef.current.resizableTextArea.textArea;
-            const selectionStart = textarea.selectionStart;
-            const value = textarea.value;
-            const lastNewlineIndex = value.lastIndexOf("\n");
-            const isAtLastLine = lastNewlineIndex === -1 || selectionStart > lastNewlineIndex;
-            if (isAtLastLine) {
-              textarea.scrollTop = textarea.scrollHeight;
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const icons_namespaceObject = require("@ant-design/icons");
+const external_antd_namespaceObject = require("antd");
+const external_react_namespaceObject = require("react");
+const history_js_namespaceObject = require("../store/history.js");
+const external_ConfigSelector_js_namespaceObject = require("./ConfigSelector.js");
+const external_HistorySelector_js_namespaceObject = require("./HistorySelector.js");
+const external_playground_utils_js_namespaceObject = require("./playground-utils.js");
+require("./index.css");
+const { TextArea } = external_antd_namespaceObject.Input;
+const PromptInput = (param)=>{
+    let { runButtonEnabled, form, serviceMode, selectedType, dryMode, stoppable, loading, onRun, onStop, clearPromptAfterRun = true } = param;
+    const [hoveringSettings, setHoveringSettings] = (0, external_react_namespaceObject.useState)(false);
+    const [promptValue, setPromptValue] = (0, external_react_namespaceObject.useState)('');
+    const placeholder = (0, external_playground_utils_js_namespaceObject.getPlaceholderForType)(selectedType);
+    const textAreaRef = (0, external_react_namespaceObject.useRef)(null);
+    const history = (0, history_js_namespaceObject.useHistoryStore)((state)=>state.history);
+    const addHistory = (0, history_js_namespaceObject.useHistoryStore)((state)=>state.addHistory);
+    const lastHistory = history[0];
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (lastHistory) {
+            form.setFieldsValue({
+                type: lastHistory.type || 'aiAction',
+                prompt: lastHistory.prompt || ''
+            });
+            setPromptValue(lastHistory.prompt || '');
+        } else {
+            form.setFieldsValue({
+                type: 'aiAction',
+                prompt: ''
+            });
+            setPromptValue('');
+        }
+    }, []);
+    const handleSelectHistory = (0, external_react_namespaceObject.useCallback)((historyItem)=>{
+        form.setFieldsValue({
+            prompt: historyItem.prompt,
+            type: historyItem.type
+        });
+        setPromptValue(historyItem.prompt);
+    }, [
+        form
+    ]);
+    const handlePromptChange = (0, external_react_namespaceObject.useCallback)((e)=>{
+        const value = e.target.value;
+        setPromptValue(value);
+        form.setFieldValue('prompt', value);
+    }, [
+        form
+    ]);
+    const isRunButtonEnabled = runButtonEnabled && promptValue.trim().length > 0;
+    const handleRunWithHistory = (0, external_react_namespaceObject.useCallback)(()=>{
+        const values = form.getFieldsValue();
+        if (values.prompt) addHistory({
+            type: values.type,
+            prompt: values.prompt,
+            timestamp: Date.now()
+        });
+        onRun();
+        if (clearPromptAfterRun) {
+            setPromptValue('');
+            form.setFieldValue('prompt', '');
+        }
+    }, [
+        form,
+        addHistory,
+        onRun
+    ]);
+    const handleKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
+        if ('Enter' === e.key && e.metaKey && isRunButtonEnabled) {
+            handleRunWithHistory();
+            e.preventDefault();
+            e.stopPropagation();
+        } else if ('Enter' === e.key) setTimeout(()=>{
+            if (textAreaRef.current) {
+                const textarea = textAreaRef.current.resizableTextArea.textArea;
+                const selectionStart = textarea.selectionStart;
+                const value = textarea.value;
+                const lastNewlineIndex = value.lastIndexOf('\n');
+                const isAtLastLine = -1 === lastNewlineIndex || selectionStart > lastNewlineIndex;
+                if (isAtLastLine) textarea.scrollTop = textarea.scrollHeight;
             }
-          }
         }, 0);
-      }
-    },
-    [handleRunWithHistory, isRunButtonEnabled]
-  );
-  const handleMouseEnter = (0, import_react.useCallback)(() => {
-    setHoveringSettings(true);
-  }, []);
-  const handleMouseLeave = (0, import_react.useCallback)(() => {
-    setHoveringSettings(false);
-  }, []);
-  const renderActionButton = (0, import_react.useCallback)(() => {
-    const runButton = (text) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_antd.Button,
-      {
-        type: "primary",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.SendOutlined, {}),
-        style: { borderRadius: 20, zIndex: 999 },
-        onClick: handleRunWithHistory,
-        disabled: !isRunButtonEnabled,
+    }, [
+        handleRunWithHistory,
+        isRunButtonEnabled
+    ]);
+    const handleMouseEnter = (0, external_react_namespaceObject.useCallback)(()=>{
+        setHoveringSettings(true);
+    }, []);
+    const handleMouseLeave = (0, external_react_namespaceObject.useCallback)(()=>{
+        setHoveringSettings(false);
+    }, []);
+    const renderActionButton = (0, external_react_namespaceObject.useCallback)(()=>{
+        const runButton = (text)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
+                type: "primary",
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.SendOutlined, {}),
+                style: {
+                    borderRadius: 20,
+                    zIndex: 999
+                },
+                onClick: handleRunWithHistory,
+                disabled: !isRunButtonEnabled,
+                loading: loading,
+                children: text
+            });
+        if (dryMode) return 'aiAction' === selectedType ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tooltip, {
+            title: "Start executing until some interaction actions need to be performed. You can see the process of planning and locating.",
+            children: runButton('Dry Run')
+        }) : runButton('Run');
+        if (stoppable) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
+            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.BorderOutlined, {}),
+            onClick: onStop,
+            style: {
+                borderRadius: 20,
+                zIndex: 999
+            },
+            children: "Stop"
+        });
+        return runButton('Run');
+    }, [
+        dryMode,
         loading,
-        children: text
-      }
-    );
-    if (dryMode) {
-      return selectedType === "aiAction" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: "Start executing until some interaction actions need to be performed. You can see the process of planning and locating.", children: runButton("Dry Run") }) : runButton("Run");
-    }
-    if (stoppable) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_antd.Button,
-        {
-          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.BorderOutlined, {}),
-          onClick: onStop,
-          style: { borderRadius: 20, zIndex: 999 },
-          children: "Stop"
-        }
-      );
-    }
-    return runButton("Run");
-  }, [
-    dryMode,
-    loading,
-    handleRunWithHistory,
-    onStop,
-    isRunButtonEnabled,
-    selectedType,
-    stoppable
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "prompt-input-wrapper", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd.Space, { className: "mode-radio-group-wrapper", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Form.Item, { name: "type", style: { margin: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import_antd.Radio.Group,
-        {
-          buttonStyle: "solid",
-          disabled: !runButtonEnabled,
-          className: "mode-radio-group",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: "Auto Planning: plan the steps and execute", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Radio.Button, { value: "aiAction", children: (0, import_playground_utils.actionNameForType)("aiAction") }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: "Extract data directly from the UI", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Radio.Button, { value: "aiQuery", children: (0, import_playground_utils.actionNameForType)("aiQuery") }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: "Understand the UI and determine if the assertion is true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Radio.Button, { value: "aiAssert", children: (0, import_playground_utils.actionNameForType)("aiAssert") }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: "Instant Action: click something", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Radio.Button, { value: "aiTap", children: (0, import_playground_utils.actionNameForType)("aiTap") }) })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "action-icons", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HistorySelector.HistorySelector, { onSelect: handleSelectHistory }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            className: hoveringSettings ? "settings-wrapper settings-wrapper-hover" : "settings-wrapper",
-            onMouseEnter: handleMouseEnter,
-            onMouseLeave: handleMouseLeave,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_ConfigSelector.ConfigSelector,
-              {
-                enableTracking: serviceMode === "In-Browser-Extension",
-                showDeepThinkOption: selectedType === "aiTap"
-              }
-            )
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "div",
-      {
-        className: `main-side-console-input ${!runButtonEnabled ? "disabled" : ""} ${loading ? "loading" : ""}`,
+        handleRunWithHistory,
+        onStop,
+        isRunButtonEnabled,
+        selectedType,
+        stoppable
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "prompt-input-wrapper",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Form.Item, { name: "prompt", style: { margin: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            TextArea,
-            {
-              className: "main-side-console-input-textarea",
-              disabled: !runButtonEnabled,
-              rows: 4,
-              placeholder,
-              autoFocus: true,
-              onKeyDown: handleKeyDown,
-              onChange: handlePromptChange,
-              value: promptValue,
-              ref: textAreaRef
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "form-controller-wrapper", children: renderActionButton() })
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.Space, {
+                className: "mode-radio-group-wrapper",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
+                        name: "type",
+                        style: {
+                            margin: 0
+                        },
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.Radio.Group, {
+                            buttonStyle: "solid",
+                            disabled: !runButtonEnabled,
+                            className: "mode-radio-group",
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tooltip, {
+                                    title: "Auto Planning: plan the steps and execute",
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Radio.Button, {
+                                        value: "aiAction",
+                                        children: (0, external_playground_utils_js_namespaceObject.actionNameForType)('aiAction')
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tooltip, {
+                                    title: "Extract data directly from the UI",
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Radio.Button, {
+                                        value: "aiQuery",
+                                        children: (0, external_playground_utils_js_namespaceObject.actionNameForType)('aiQuery')
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tooltip, {
+                                    title: "Understand the UI and determine if the assertion is true",
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Radio.Button, {
+                                        value: "aiAssert",
+                                        children: (0, external_playground_utils_js_namespaceObject.actionNameForType)('aiAssert')
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tooltip, {
+                                    title: "Instant Action: click something",
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Radio.Button, {
+                                        value: "aiTap",
+                                        children: (0, external_playground_utils_js_namespaceObject.actionNameForType)('aiTap')
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "action-icons",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_HistorySelector_js_namespaceObject.HistorySelector, {
+                                onSelect: handleSelectHistory
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: hoveringSettings ? 'settings-wrapper settings-wrapper-hover' : 'settings-wrapper',
+                                onMouseEnter: handleMouseEnter,
+                                onMouseLeave: handleMouseLeave,
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ConfigSelector_js_namespaceObject.ConfigSelector, {
+                                    enableTracking: 'In-Browser-Extension' === serviceMode,
+                                    showDeepThinkOption: 'aiTap' === selectedType
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: `main-side-console-input ${!runButtonEnabled ? 'disabled' : ''} ${loading ? 'loading' : ''}`,
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
+                        name: "prompt",
+                        style: {
+                            margin: 0
+                        },
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TextArea, {
+                            className: "main-side-console-input-textarea",
+                            disabled: !runButtonEnabled,
+                            rows: 4,
+                            placeholder: placeholder,
+                            autoFocus: true,
+                            onKeyDown: handleKeyDown,
+                            onChange: handlePromptChange,
+                            value: promptValue,
+                            ref: textAreaRef
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "form-controller-wrapper",
+                        children: renderActionButton()
+                    })
+                ]
+            })
         ]
-      }
-    )
-  ] });
+    });
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  PromptInput
+exports.PromptInput = __webpack_exports__.PromptInput;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "PromptInput"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
 });