@midscene/visualizer 0.28.2-beta-20250909133629.0 → 0.28.2-beta-20250910021445.0

package/dist/lib/component/{github-star/index.js → github-star.js}

@@ -27,7 +27,7 @@ __webpack_require__.d(__webpack_exports__, {
     GithubStar: ()=>GithubStar
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-require("./index.css");
+require("./github-star.css");
 const GithubStar = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("a", {
         href: "https://github.com/web-infra-dev/midscene",
         target: "_blank",

package/dist/lib/component/{logo/index.js → logo.js}

@@ -28,7 +28,7 @@ __webpack_require__.d(__webpack_exports__, {
     LogoUrl: ()=>LogoUrl
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-require("./index.css");
+require("./logo.css");
 const LogoUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/Midscene.png';
 const Logo = (param)=>{
     let { hideLogo = false } = param;

package/dist/lib/component/{misc/index.js → misc.js}

@@ -1,14 +1,5 @@
 "use strict";
 var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
 (()=>{
     __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, {
@@ -33,17 +24,11 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    serverLaunchTip: ()=>serverLaunchTip,
-    errorMessageServerNotReady: ()=>errorMessageServerNotReady,
-    timeCostStrElement: ()=>timeCostStrElement,
     iconForStatus: ()=>iconForStatus,
-    emptyResultTip: ()=>emptyResultTip
+    timeCostStrElement: ()=>timeCostStrElement
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const icons_namespaceObject = require("@ant-design/icons");
-const external_antd_namespaceObject = require("antd");
-const index_js_namespaceObject = require("../shiny-text/index.js");
-var index_js_default = /*#__PURE__*/ __webpack_require__.n(index_js_namespaceObject);
 function timeCostStrElement(timeCost) {
     let str;
     str = 'number' != typeof timeCost ? '-' : `${(timeCost / 1000).toFixed(2)}s`;
@@ -95,54 +80,10 @@ const iconForStatus = (status)=>{
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.MinusOutlined, {});
     }
 };
-const errorMessageServerNotReady = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
-    children: [
-        "Don't worry, just one more step to launch the playground server.",
-        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("br", {}),
-        "Please run one of the commands under the midscene project directory:",
-        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("br", {}),
-        "a. ",
-        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("strong", {
-            children: "npx midscene-playground"
-        }),
-        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("br", {}),
-        "b. ",
-        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("strong", {
-            children: "npx --yes @midscene/web"
-        })
-    ]
-});
-const serverLaunchTip = function() {
-    let notReadyMessage = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : errorMessageServerNotReady;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: "server-tip",
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Alert, {
-            message: "Playground Server Not Ready",
-            description: notReadyMessage,
-            type: "warning"
-        })
-    });
-};
-const emptyResultTip = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-    className: "result-empty-tip",
-    style: {
-        textAlign: 'center'
-    },
-    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_default(), {
-        disabled: true,
-        text: "The result will be shown here"
-    })
-});
-exports.emptyResultTip = __webpack_exports__.emptyResultTip;
-exports.errorMessageServerNotReady = __webpack_exports__.errorMessageServerNotReady;
 exports.iconForStatus = __webpack_exports__.iconForStatus;
-exports.serverLaunchTip = __webpack_exports__.serverLaunchTip;
 exports.timeCostStrElement = __webpack_exports__.timeCostStrElement;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "emptyResultTip",
-    "errorMessageServerNotReady",
     "iconForStatus",
-    "serverLaunchTip",
     "timeCostStrElement"
 ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
 Object.defineProperty(exports, '__esModule', {

package/dist/lib/component/{player/index.js → player.js}

@@ -40,20 +40,20 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 require("pixi.js/unsafe-eval");
 const external_pixi_js_namespaceObject = require("pixi.js");
 const external_react_namespaceObject = require("react");
-require("./index.css");
-const index_js_namespaceObject = require("../../utils/index.js");
+require("./player.css");
+const external_utils_js_namespaceObject = require("../utils.js");
 const icons_namespaceObject = require("@ant-design/icons");
 const extractor_namespaceObject = require("@midscene/shared/extractor");
 const external_antd_namespaceObject = require("antd");
-const global_perspective_js_namespaceObject = require("../../icons/global-perspective.js");
+const global_perspective_js_namespaceObject = require("../icons/global-perspective.js");
 var global_perspective_js_default = /*#__PURE__*/ __webpack_require__.n(global_perspective_js_namespaceObject);
-const player_setting_js_namespaceObject = require("../../icons/player-setting.js");
+const player_setting_js_namespaceObject = require("../icons/player-setting.js");
 var player_setting_js_default = /*#__PURE__*/ __webpack_require__.n(player_setting_js_namespaceObject);
-const show_marker_js_namespaceObject = require("../../icons/show-marker.js");
+const show_marker_js_namespaceObject = require("../icons/show-marker.js");
 var show_marker_js_default = /*#__PURE__*/ __webpack_require__.n(show_marker_js_namespaceObject);
-const store_js_namespaceObject = require("../../store/store.js");
-const pixi_loader_js_namespaceObject = require("../../utils/pixi-loader.js");
-const external_blackboard_index_js_namespaceObject = require("../blackboard/index.js");
+const external_blackboard_js_namespaceObject = require("./blackboard.js");
+const external_pixi_loader_js_namespaceObject = require("./pixi-loader.js");
+const store_js_namespaceObject = require("./store/store.js");
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -215,11 +215,11 @@ function Player(props) {
     const repaintImage = async ()=>{
         const imgToUpdate = currentImg.current;
         if (!imgToUpdate) return void console.warn('no image to update');
-        if (!(0, pixi_loader_js_namespaceObject.getTextureFromCache)(imgToUpdate)) {
+        if (!(0, external_pixi_loader_js_namespaceObject.getTextureFromCache)(imgToUpdate)) {
             console.warn('image not loaded', imgToUpdate);
-            await (0, pixi_loader_js_namespaceObject.loadTexture)(imgToUpdate);
+            await (0, external_pixi_loader_js_namespaceObject.loadTexture)(imgToUpdate);
         }
-        const texture = (0, pixi_loader_js_namespaceObject.getTextureFromCache)(imgToUpdate);
+        const texture = (0, external_pixi_loader_js_namespaceObject.getTextureFromCache)(imgToUpdate);
         if (!texture) throw new Error('texture not found');
         const sprite = external_pixi_js_namespaceObject.Sprite.from(texture);
         if (!sprite) throw new Error('sprite not found');
@@ -235,7 +235,7 @@ function Player(props) {
     const spinningPointer = (frame)=>{
         var _pointerSprite_current, _pointerSprite_current1;
         if (!spinningPointerSprite.current) {
-            spinningPointerSprite.current = external_pixi_js_namespaceObject.Sprite.from(index_js_namespaceObject.mouseLoading);
+            spinningPointerSprite.current = external_pixi_js_namespaceObject.Sprite.from(external_utils_js_namespaceObject.mouseLoading);
             spinningPointerSprite.current.zIndex = LAYER_ORDER_SPINNING_POINTER;
             spinningPointerSprite.current.anchor.set(0.5, 0.5);
             spinningPointerSprite.current.scale.set(0.5);
@@ -264,11 +264,11 @@ function Player(props) {
     };
     const updatePointer = async (img, x, y)=>{
         var _pointerSprite_current, _pointerSprite_current1;
-        if (!(0, pixi_loader_js_namespaceObject.getTextureFromCache)(img)) {
+        if (!(0, external_pixi_loader_js_namespaceObject.getTextureFromCache)(img)) {
             console.warn('image not loaded', img);
-            await (0, pixi_loader_js_namespaceObject.loadTexture)(img);
+            await (0, external_pixi_loader_js_namespaceObject.loadTexture)(img);
         }
-        const texture = (0, pixi_loader_js_namespaceObject.getTextureFromCache)(img);
+        const texture = (0, external_pixi_loader_js_namespaceObject.getTextureFromCache)(img);
         if (!texture) throw new Error('texture not found');
         const sprite = external_pixi_js_namespaceObject.Sprite.from(texture);
         let targetX = null == (_pointerSprite_current = pointerSprite.current) ? void 0 : _pointerSprite_current.x;
@@ -413,7 +413,7 @@ function Player(props) {
                     const randomIndex = Math.floor(Math.random() * elementsToAdd.length);
                     const element = elementsToAdd.splice(randomIndex, 1)[0];
                     if (element) {
-                        const [insightMarkGraphic] = (0, external_blackboard_index_js_namespaceObject.rectMarkForItem)(element.rect, element.content, 'element');
+                        const [insightMarkGraphic] = (0, external_blackboard_js_namespaceObject.rectMarkForItem)(element.rect, element.content, 'element');
                         insightMarkGraphic.alpha = 0;
                         insightMarkContainer.addChild(insightMarkGraphic);
                         childrenCount++;
@@ -425,17 +425,17 @@ function Player(props) {
                     while(elementsToAdd.length > 0){
                         const randomIndex = Math.floor(Math.random() * elementsToAdd.length);
                         const element = elementsToAdd.splice(randomIndex, 1)[0];
-                        const [insightMarkGraphic] = (0, external_blackboard_index_js_namespaceObject.rectMarkForItem)(element.rect, element.content, 'element');
+                        const [insightMarkGraphic] = (0, external_blackboard_js_namespaceObject.rectMarkForItem)(element.rect, element.content, 'element');
                         insightMarkGraphic.alpha = 1;
                         insightMarkContainer.addChild(insightMarkGraphic);
                     }
                     if (searchArea) {
-                        const [searchAreaGraphic] = (0, external_blackboard_index_js_namespaceObject.rectMarkForItem)(searchArea, 'Search Area', 'searchArea');
+                        const [searchAreaGraphic] = (0, external_blackboard_js_namespaceObject.rectMarkForItem)(searchArea, 'Search Area', 'searchArea');
                         searchAreaGraphic.alpha = 1;
                         insightMarkContainer.addChild(searchAreaGraphic);
                     }
                     highlightElements.map((element)=>{
-                        const [insightMarkGraphic] = (0, external_blackboard_index_js_namespaceObject.rectMarkForItem)(element.rect, element.content || '', 'highlight');
+                        const [insightMarkGraphic] = (0, external_blackboard_js_namespaceObject.rectMarkForItem)(element.rect, element.content || '', 'highlight');
                         insightMarkGraphic.alpha = 1;
                         insightMarkContainer.addChild(insightMarkGraphic);
                     });
@@ -482,11 +482,11 @@ function Player(props) {
             const allImages = scripts.filter((item)=>!!item.img).map((item)=>item.img);
             await Promise.all([
                 ...allImages,
-                index_js_namespaceObject.mouseLoading,
-                index_js_namespaceObject.mousePointer
-            ].map(pixi_loader_js_namespaceObject.loadTexture));
+                external_utils_js_namespaceObject.mouseLoading,
+                external_utils_js_namespaceObject.mousePointer
+            ].map(external_pixi_loader_js_namespaceObject.loadTexture));
             insightMarkContainer.removeChildren();
-            await updatePointer(index_js_namespaceObject.mousePointer, imageWidth / 2, imageHeight / 2);
+            await updatePointer(external_utils_js_namespaceObject.mousePointer, imageWidth / 2, imageHeight / 2);
             await repaintImage();
             await updateCamera({
                 ...basicCameraState

package/dist/lib/component/{config-selector/index.js → playground/ConfigSelector.js}

@@ -39,8 +39,9 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_antd_namespaceObject = require("antd");
 const setting_js_namespaceObject = require("../../icons/setting.js");
 var setting_js_default = /*#__PURE__*/ __webpack_require__.n(setting_js_namespaceObject);
-const store_js_namespaceObject = require("../../store/store.js");
-const constants_js_namespaceObject = require("../../utils/constants.js");
+const store_js_namespaceObject = require("../store/store.js");
+const external_playground_constants_js_namespaceObject = require("./playground-constants.js");
+require("./index.css");
 const ConfigSelector = (param)=>{
     let { showDeepThinkOption = false, enableTracking = false, showDataExtractionOptions = false, hideDomAndScreenshotOptions = false } = param;
     const forceSameTabNavigation = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.forceSameTabNavigation);
@@ -74,7 +75,7 @@ const ConfigSelector = (param)=>{
             label: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Checkbox, {
                 onChange: (e)=>setForceSameTabNavigation(e.target.checked),
                 checked: forceSameTabNavigation,
-                children: constants_js_namespaceObject.trackingTip
+                children: external_playground_constants_js_namespaceObject.trackingTip
             }),
             key: 'track-config'
         });
@@ -84,7 +85,7 @@ const ConfigSelector = (param)=>{
                     setDeepThink(e.target.checked);
                 },
                 checked: deepThink,
-                children: constants_js_namespaceObject.deepThinkTip
+                children: external_playground_constants_js_namespaceObject.deepThinkTip
             }),
             key: 'deep-think-config'
         });
@@ -95,7 +96,7 @@ const ConfigSelector = (param)=>{
                         setScreenshotIncluded(e.target.checked);
                     },
                     checked: screenshotIncluded,
-                    children: constants_js_namespaceObject.screenshotIncludedTip
+                    children: external_playground_constants_js_namespaceObject.screenshotIncludedTip
                 }),
                 key: 'screenshot-included-config'
             });
@@ -110,7 +111,7 @@ const ConfigSelector = (param)=>{
                                 marginBottom: '4px',
                                 fontSize: '14px'
                             },
-                            children: constants_js_namespaceObject.domIncludedTip
+                            children: external_playground_constants_js_namespaceObject.domIncludedTip
                         }),
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.Radio.Group, {
                             size: "small",

package/dist/lib/component/{context-preview/index.js → playground/ContextPreview.js}

@@ -37,11 +37,12 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_antd_namespaceObject = require("antd");
-const index_js_namespaceObject = require("../blackboard/index.js");
-var index_js_default = /*#__PURE__*/ __webpack_require__.n(index_js_namespaceObject);
-const external_misc_index_js_namespaceObject = require("../misc/index.js");
-const playground_demo_ui_context_json_namespaceObject = require("../playground/playground-demo-ui-context.json");
-var playground_demo_ui_context_json_default = /*#__PURE__*/ __webpack_require__.n(playground_demo_ui_context_json_namespaceObject);
+const external_blackboard_js_namespaceObject = require("../blackboard.js");
+var external_blackboard_js_default = /*#__PURE__*/ __webpack_require__.n(external_blackboard_js_namespaceObject);
+const external_misc_js_namespaceObject = require("../misc.js");
+const external_playground_demo_ui_context_json_namespaceObject = require("../playground-demo-ui-context.json");
+var external_playground_demo_ui_context_json_default = /*#__PURE__*/ __webpack_require__.n(external_playground_demo_ui_context_json_namespaceObject);
+require("./index.css");
 const ContextPreview = (param)=>{
     let { uiContextPreview, setUiContextPreview, showContextPreview } = param;
     if (!showContextPreview) return null;
@@ -51,18 +52,18 @@ const ContextPreview = (param)=>{
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
                 children: "UI Context"
             }),
-            uiContextPreview ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_default(), {
+            uiContextPreview ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_blackboard_js_default(), {
                 uiContext: uiContextPreview,
                 hideController: true
             }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                 children: [
-                    (0, external_misc_index_js_namespaceObject.iconForStatus)('failed'),
+                    (0, external_misc_js_namespaceObject.iconForStatus)('failed'),
                     " No UI context",
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
                         type: "link",
                         onClick: (e)=>{
                             e.preventDefault();
-                            setUiContextPreview(playground_demo_ui_context_json_default());
+                            setUiContextPreview(external_playground_demo_ui_context_json_default());
                         },
                         children: "Load Demo"
                     }),

package/dist/lib/component/{history-selector/index.js → playground/HistorySelector.js}

@@ -44,7 +44,7 @@ const history_js_namespaceObject = require("../../icons/history.js");
 var history_js_default = /*#__PURE__*/ __webpack_require__.n(history_js_namespaceObject);
 const magnifying_glass_js_namespaceObject = require("../../icons/magnifying-glass.js");
 var magnifying_glass_js_default = /*#__PURE__*/ __webpack_require__.n(magnifying_glass_js_namespaceObject);
-const external_store_history_js_namespaceObject = require("../../store/history.js");
+const external_store_history_js_namespaceObject = require("../store/history.js");
 require("./index.css");
 const { Text } = external_antd_namespaceObject.Typography;
 const HistorySelector = (param)=>{

package/dist/lib/component/{playground-result/index.js → playground/PlaygroundResult.js}

@@ -38,16 +38,17 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const icons_namespaceObject = require("@ant-design/icons");
 const external_antd_namespaceObject = require("antd");
-const constants_js_namespaceObject = require("../../utils/constants.js");
-const index_js_namespaceObject = require("../player/index.js");
-const external_shiny_text_index_js_namespaceObject = require("../shiny-text/index.js");
-var external_shiny_text_index_js_default = /*#__PURE__*/ __webpack_require__.n(external_shiny_text_index_js_namespaceObject);
+const external_player_js_namespaceObject = require("../player.js");
+const external_shiny_text_js_namespaceObject = require("../shiny-text.js");
+var external_shiny_text_js_default = /*#__PURE__*/ __webpack_require__.n(external_shiny_text_js_namespaceObject);
+const external_playground_constants_js_namespaceObject = require("./playground-constants.js");
+require("./index.css");
 const PlaygroundResultView = (param)=>{
     let { result, loading, serverValid, serviceMode, replayScriptsInfo, replayCounter, loadingProgressText, verticalMode = false, notReadyMessage, fitMode, autoZoom } = param;
     let resultWrapperClassName = 'result-wrapper';
     if (verticalMode) resultWrapperClassName += ' vertical-mode-result';
     if (replayScriptsInfo && verticalMode) resultWrapperClassName += ' result-wrapper-compact';
-    let resultDataToShow = constants_js_namespaceObject.emptyResultTip;
+    let resultDataToShow = external_playground_constants_js_namespaceObject.emptyResultTip;
     if (serverValid || 'Server' !== serviceMode) {
         if (loading) resultDataToShow = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
             className: "loading-container",
@@ -60,14 +61,14 @@ const PlaygroundResultView = (param)=>{
                 }),
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                     className: "loading-progress-text loading-progress-text-progress",
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_shiny_text_index_js_default(), {
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_shiny_text_js_default(), {
                         text: loadingProgressText,
                         speed: 3
                     })
                 })
             ]
         });
-        else if (replayScriptsInfo) resultDataToShow = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.Player, {
+        else if (replayScriptsInfo) resultDataToShow = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_player_js_namespaceObject.Player, {
             replayScripts: replayScriptsInfo.scripts,
             imageWidth: replayScriptsInfo.width,
             imageHeight: replayScriptsInfo.height,
@@ -83,7 +84,7 @@ const PlaygroundResultView = (param)=>{
         }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("pre", {
             children: JSON.stringify(null == result ? void 0 : result.result, null, 2)
         });
-    } else resultDataToShow = (0, constants_js_namespaceObject.serverLaunchTip)(notReadyMessage);
+    } else resultDataToShow = (0, external_playground_constants_js_namespaceObject.serverLaunchTip)(notReadyMessage);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         className: resultWrapperClassName,
         style: {

package/dist/lib/component/{prompt-input/index.js → playground/PromptInput.js}

@@ -37,23 +37,23 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const icons_namespaceObject = require("@ant-design/icons");
-require("./index.css");
 const external_antd_namespaceObject = require("antd");
 const external_react_namespaceObject = require("react");
 var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
-const history_js_namespaceObject = require("../../store/history.js");
-const external_types_js_namespaceObject = require("../../types.js");
-const constants_js_namespaceObject = require("../../utils/constants.js");
-const playground_utils_js_namespaceObject = require("../../utils/playground-utils.js");
-const index_js_namespaceObject = require("../config-selector/index.js");
-const external_form_field_index_js_namespaceObject = require("../form-field/index.js");
-const external_history_selector_index_js_namespaceObject = require("../history-selector/index.js");
+const history_js_namespaceObject = require("../store/history.js");
+const external_ConfigSelector_js_namespaceObject = require("./ConfigSelector.js");
+const external_FormField_js_namespaceObject = require("./FormField.js");
+const external_HistorySelector_js_namespaceObject = require("./HistorySelector.js");
+const external_playground_constants_js_namespaceObject = require("./playground-constants.js");
+const external_playground_utils_js_namespaceObject = require("./playground-utils.js");
+const external_types_js_namespaceObject = require("./types.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, actionSpace, hideDomAndScreenshotOptions = false } = param;
     const [hoveringSettings, setHoveringSettings] = (0, external_react_namespaceObject.useState)(false);
     const [promptValue, setPromptValue] = (0, external_react_namespaceObject.useState)('');
-    const placeholder = (0, playground_utils_js_namespaceObject.getPlaceholderForType)(selectedType);
+    const placeholder = (0, external_playground_utils_js_namespaceObject.getPlaceholderForType)(selectedType);
     const textAreaRef = (0, external_react_namespaceObject.useRef)(null);
     const params = external_antd_namespaceObject.Form.useWatch('params', form);
     const lastHistoryRef = (0, external_react_namespaceObject.useRef)(null);
@@ -149,12 +149,12 @@ const PromptInput = (param)=>{
         hideDomAndScreenshotOptions
     ]);
     const availableDropdownMethods = (0, external_react_namespaceObject.useMemo)(()=>{
-        const metadataMethods = Object.keys(constants_js_namespaceObject.apiMetadata);
+        const metadataMethods = Object.keys(external_playground_constants_js_namespaceObject.apiMetadata);
         if (!actionSpace || 0 === actionSpace.length) return metadataMethods;
         const availableMethods = actionSpace.map((action)=>action.interfaceAlias || action.name);
         const finalMethods = new Set();
         metadataMethods.forEach((method)=>{
-            const methodInfo = constants_js_namespaceObject.apiMetadata[method];
+            const methodInfo = external_playground_constants_js_namespaceObject.apiMetadata[method];
             if ((null == methodInfo ? void 0 : methodInfo.group) === 'extraction' || (null == methodInfo ? void 0 : methodInfo.group) === 'validation') finalMethods.add(method);
             else if (availableMethods.includes(method)) finalMethods.add(method);
         });
@@ -259,7 +259,7 @@ const PromptInput = (param)=>{
         needsStructuredParams,
         actionSpace
     ]);
-    const isRunButtonEnabled = (0, external_react_namespaceObject.useMemo)(()=>(0, playground_utils_js_namespaceObject.isRunButtonEnabled)(runButtonEnabled, !!needsStructuredParams, params, actionSpace, selectedType, promptValue), [
+    const isRunButtonEnabled = (0, external_react_namespaceObject.useMemo)(()=>(0, external_playground_utils_js_namespaceObject.isRunButtonEnabled)(runButtonEnabled, !!needsStructuredParams, params, actionSpace, selectedType, promptValue), [
         runButtonEnabled,
         needsStructuredParams,
         selectedType,
@@ -443,19 +443,19 @@ const PromptInput = (param)=>{
                         marginBottom,
                         placeholder
                     };
-                    if (isLocateFieldFlag) fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_index_js_namespaceObject.LocateField, {
+                    if (isLocateFieldFlag) fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.LocateField, {
                         ...fieldProps
                     }, key));
-                    else if ((null == (_actualField__def = actualField._def) ? void 0 : _actualField__def.typeName) === 'ZodEnum') fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_index_js_namespaceObject.EnumField, {
+                    else if ((null == (_actualField__def = actualField._def) ? void 0 : _actualField__def.typeName) === 'ZodEnum') fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.EnumField, {
                         ...fieldProps
                     }, key));
-                    else if ((null == (_actualField__def1 = actualField._def) ? void 0 : _actualField__def1.typeName) === 'ZodNumber') fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_index_js_namespaceObject.NumberField, {
+                    else if ((null == (_actualField__def1 = actualField._def) ? void 0 : _actualField__def1.typeName) === 'ZodNumber') fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.NumberField, {
                         ...fieldProps
                     }, key));
-                    else if ((null == (_actualField__def2 = actualField._def) ? void 0 : _actualField__def2.typeName) === 'ZodBoolean') fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_index_js_namespaceObject.BooleanField, {
+                    else if ((null == (_actualField__def2 = actualField._def) ? void 0 : _actualField__def2.typeName) === 'ZodBoolean') fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.BooleanField, {
                         ...fieldProps
                     }, key));
-                    else fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_index_js_namespaceObject.TextField, {
+                    else fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.TextField, {
                         ...fieldProps
                     }, key));
                 });
@@ -553,13 +553,13 @@ const PromptInput = (param)=>{
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Radio.Group, {
                                     buttonStyle: "solid",
                                     disabled: !runButtonEnabled,
-                                    children: constants_js_namespaceObject.defaultMainButtons.map((apiType)=>{
+                                    children: external_playground_constants_js_namespaceObject.defaultMainButtons.map((apiType)=>{
                                         var _apiMetadata_apiType;
                                         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tooltip, {
-                                            title: (null == (_apiMetadata_apiType = constants_js_namespaceObject.apiMetadata[apiType]) ? void 0 : _apiMetadata_apiType.title) || '',
+                                            title: (null == (_apiMetadata_apiType = external_playground_constants_js_namespaceObject.apiMetadata[apiType]) ? void 0 : _apiMetadata_apiType.title) || '',
                                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Radio.Button, {
                                                 value: apiType,
-                                                children: (0, playground_utils_js_namespaceObject.actionNameForType)(apiType)
+                                                children: (0, external_playground_utils_js_namespaceObject.actionNameForType)(apiType)
                                             })
                                         }, apiType);
                                     })
@@ -567,11 +567,11 @@ const PromptInput = (param)=>{
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Dropdown, {
                                 menu: (()=>{
-                                    const hiddenAPIs = availableDropdownMethods.filter((api)=>!constants_js_namespaceObject.defaultMainButtons.includes(api));
+                                    const hiddenAPIs = availableDropdownMethods.filter((api)=>!external_playground_constants_js_namespaceObject.defaultMainButtons.includes(api));
                                     const groupedItems = [];
                                     const interactionAPIs = hiddenAPIs.filter((api)=>{
                                         var _apiMetadata_api;
-                                        return (null == (_apiMetadata_api = constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'interaction';
+                                        return (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'interaction';
                                     });
                                     if (interactionAPIs.length > 0) groupedItems.push({
                                         key: 'interaction-group',
@@ -581,8 +581,8 @@ const PromptInput = (param)=>{
                                             var _apiMetadata_api;
                                             return {
                                                 key: api,
-                                                label: (0, playground_utils_js_namespaceObject.actionNameForType)(api),
-                                                title: (null == (_apiMetadata_api = constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
+                                                label: (0, external_playground_utils_js_namespaceObject.actionNameForType)(api),
+                                                title: (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
                                                 onClick: ()=>{
                                                     form.setFieldValue('type', api);
                                                 }
@@ -591,7 +591,7 @@ const PromptInput = (param)=>{
                                     });
                                     const extractionAPIs = hiddenAPIs.filter((api)=>{
                                         var _apiMetadata_api;
-                                        return (null == (_apiMetadata_api = constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'extraction';
+                                        return (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'extraction';
                                     });
                                     if (extractionAPIs.length > 0) groupedItems.push({
                                         key: 'extraction-group',
@@ -601,8 +601,8 @@ const PromptInput = (param)=>{
                                             var _apiMetadata_api;
                                             return {
                                                 key: api,
-                                                label: (0, playground_utils_js_namespaceObject.actionNameForType)(api),
-                                                title: (null == (_apiMetadata_api = constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
+                                                label: (0, external_playground_utils_js_namespaceObject.actionNameForType)(api),
+                                                title: (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
                                                 onClick: ()=>{
                                                     form.setFieldValue('type', api);
                                                 }
@@ -611,7 +611,7 @@ const PromptInput = (param)=>{
                                     });
                                     const validationAPIs = hiddenAPIs.filter((api)=>{
                                         var _apiMetadata_api;
-                                        return (null == (_apiMetadata_api = constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'validation';
+                                        return (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'validation';
                                     });
                                     if (validationAPIs.length > 0) groupedItems.push({
                                         key: 'validation-group',
@@ -621,22 +621,22 @@ const PromptInput = (param)=>{
                                             var _apiMetadata_api;
                                             return {
                                                 key: api,
-                                                label: (0, playground_utils_js_namespaceObject.actionNameForType)(api),
-                                                title: (null == (_apiMetadata_api = constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
+                                                label: (0, external_playground_utils_js_namespaceObject.actionNameForType)(api),
+                                                title: (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
                                                 onClick: ()=>{
                                                     form.setFieldValue('type', api);
                                                 }
                                             };
                                         })
                                     });
-                                    const deviceSpecificAPIs = hiddenAPIs.filter((api)=>!constants_js_namespaceObject.apiMetadata[api]);
+                                    const deviceSpecificAPIs = hiddenAPIs.filter((api)=>!external_playground_constants_js_namespaceObject.apiMetadata[api]);
                                     if (deviceSpecificAPIs.length > 0) groupedItems.push({
                                         key: 'device-specific-group',
                                         type: 'group',
                                         label: 'Device-Specific APIs',
                                         children: deviceSpecificAPIs.map((api)=>({
                                                 key: api,
-                                                label: (0, playground_utils_js_namespaceObject.actionNameForType)(api),
+                                                label: (0, external_playground_utils_js_namespaceObject.actionNameForType)(api),
                                                 title: '',
                                                 onClick: ()=>{
                                                     form.setFieldValue('type', api);
@@ -653,9 +653,9 @@ const PromptInput = (param)=>{
                                 ],
                                 disabled: !runButtonEnabled,
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.Button, {
-                                    className: `more-apis-button ${!constants_js_namespaceObject.defaultMainButtons.includes(selectedType) ? 'selected-from-dropdown' : ''}`,
+                                    className: `more-apis-button ${!external_playground_constants_js_namespaceObject.defaultMainButtons.includes(selectedType) ? 'selected-from-dropdown' : ''}`,
                                     children: [
-                                        selectedType && !constants_js_namespaceObject.defaultMainButtons.includes(selectedType) ? (0, playground_utils_js_namespaceObject.actionNameForType)(selectedType) : 'more',
+                                        selectedType && !external_playground_constants_js_namespaceObject.defaultMainButtons.includes(selectedType) ? (0, external_playground_utils_js_namespaceObject.actionNameForType)(selectedType) : 'more',
                                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.DownOutlined, {
                                             style: {
                                                 fontSize: '10px',
@@ -670,7 +670,7 @@ const PromptInput = (param)=>{
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                         className: "action-icons",
                         children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_history_selector_index_js_namespaceObject.HistorySelector, {
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_HistorySelector_js_namespaceObject.HistorySelector, {
                                 onSelect: handleSelectHistory,
                                 history: historyForSelectedType,
                                 currentType: selectedType
@@ -679,7 +679,7 @@ const PromptInput = (param)=>{
                                 className: hoveringSettings ? 'settings-wrapper settings-wrapper-hover' : 'settings-wrapper',
                                 onMouseEnter: handleMouseEnter,
                                 onMouseLeave: handleMouseLeave,
-                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.ConfigSelector, {
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ConfigSelector_js_namespaceObject.ConfigSelector, {
                                     enableTracking: 'In-Browser-Extension' === serviceMode,
                                     showDeepThinkOption: showDeepThinkOption,
                                     showDataExtractionOptions: showDataExtractionOptions,
@@ -721,7 +721,7 @@ const PromptInput = (param)=>{
                         },
                         children: [
                             'Click "Run" to execute ',
-                            (0, playground_utils_js_namespaceObject.actionNameForType)(selectedType)
+                            (0, external_playground_utils_js_namespaceObject.actionNameForType)(selectedType)
                         ]
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {