@midscene/visualizer 0.27.1-beta-20250822053848.0 → 0.27.1-beta-20250822103738.0

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

@@ -48,10 +48,9 @@ const external_store_history_js_namespaceObject = require("../store/history.js")
 require("./index.css");
 const { Text } = external_antd_namespaceObject.Typography;
 const HistorySelector = (param)=>{
-    let { onSelect } = param;
+    let { onSelect, history, currentType } = param;
     const [isModalOpen, setIsModalOpen] = (0, external_react_namespaceObject.useState)(false);
     const [searchText, setSearchText] = (0, external_react_namespaceObject.useState)('');
-    const history = (0, external_store_history_js_namespaceObject.useHistoryStore)((state)=>state.history);
     const clearHistory = (0, external_store_history_js_namespaceObject.useHistoryStore)((state)=>state.clearHistory);
     const groupedHistory = (0, external_react_namespaceObject.useMemo)(()=>{
         const now = Date.now();
@@ -73,7 +72,7 @@ const HistorySelector = (param)=>{
         setIsModalOpen(false);
     };
     const handleClearHistory = ()=>{
-        clearHistory();
+        clearHistory(currentType);
         setSearchText('');
         setIsModalOpen(false);
     };

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

@@ -1,5 +1,14 @@
 "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, {
@@ -30,40 +39,105 @@ 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");
+var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
 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 } = param;
+    let { runButtonEnabled, form, serviceMode, selectedType, dryMode, stoppable, loading, onRun, onStop, clearPromptAfterRun = true, actionSpace } = 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 params = external_antd_namespaceObject.Form.useWatch('params', form);
     const history = (0, history_js_namespaceObject.useHistoryStore)((state)=>state.history);
+    const lastSelectedType = (0, history_js_namespaceObject.useHistoryStore)((state)=>state.lastSelectedType);
     const addHistory = (0, history_js_namespaceObject.useHistoryStore)((state)=>state.addHistory);
-    const lastHistory = history[0];
+    const setLastSelectedType = (0, history_js_namespaceObject.useHistoryStore)((state)=>state.setLastSelectedType);
+    const historyForSelectedType = (0, external_react_namespaceObject.useMemo)(()=>history[selectedType] || [], [
+        history,
+        selectedType
+    ]);
+    const needsStructuredParams = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (actionSpace) {
+            const action = actionSpace.find((a)=>a.interfaceAlias === selectedType || a.name === selectedType);
+            return null == action ? void 0 : action.paramSchema;
+        }
+        return [
+            'aiInput',
+            'aiKeyboardPress',
+            'aiScroll'
+        ].includes(selectedType);
+    }, [
+        selectedType,
+        actionSpace
+    ]);
+    const getDefaultParams = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (!needsStructuredParams || !actionSpace) return {};
+        const action = actionSpace.find((a)=>a.interfaceAlias === selectedType || a.name === selectedType);
+        if ((null == action ? void 0 : action.paramSchema) && (0, external_types_js_namespaceObject.isZodObjectSchema)(action.paramSchema)) {
+            const defaultParams = {};
+            const schema = action.paramSchema;
+            Object.keys(schema.shape).forEach((key)=>{
+                const field = schema.shape[key];
+                const defaultValue = (0, external_types_js_namespaceObject.extractDefaultValue)(field);
+                if (void 0 !== defaultValue) defaultParams[key] = defaultValue;
+            });
+            return defaultParams;
+        }
+        return {};
+    }, [
+        selectedType,
+        needsStructuredParams,
+        actionSpace
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!form.getFieldValue('type') && lastSelectedType) form.setFieldValue('type', lastSelectedType);
+    }, [
+        form,
+        lastSelectedType
+    ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
+        if (selectedType && selectedType !== lastSelectedType) setLastSelectedType(selectedType);
+    }, [
+        selectedType,
+        lastSelectedType,
+        setLastSelectedType
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const lastHistory = historyForSelectedType[0];
         if (lastHistory) {
             form.setFieldsValue({
-                type: lastHistory.type || 'aiAction',
-                prompt: lastHistory.prompt || ''
+                type: lastHistory.type,
+                prompt: lastHistory.prompt || '',
+                params: lastHistory.params
             });
             setPromptValue(lastHistory.prompt || '');
         } else {
+            const defaultParams = getDefaultParams();
             form.setFieldsValue({
-                type: 'aiAction',
-                prompt: ''
+                prompt: '',
+                params: defaultParams
             });
             setPromptValue('');
         }
-    }, []);
+    }, [
+        selectedType,
+        historyForSelectedType,
+        form,
+        getDefaultParams
+    ]);
     const handleSelectHistory = (0, external_react_namespaceObject.useCallback)((historyItem)=>{
         form.setFieldsValue({
             prompt: historyItem.prompt,
-            type: historyItem.type
+            type: historyItem.type,
+            params: historyItem.params
         });
         setPromptValue(historyItem.prompt);
     }, [
@@ -76,23 +150,73 @@ const PromptInput = (param)=>{
     }, [
         form
     ]);
-    const isRunButtonEnabled = runButtonEnabled && promptValue.trim().length > 0;
+    const hasSingleStructuredParam = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (!needsStructuredParams || !actionSpace) return false;
+        const action = actionSpace.find((a)=>a.interfaceAlias === selectedType || a.name === selectedType);
+        if ((null == action ? void 0 : action.paramSchema) && (0, external_types_js_namespaceObject.isZodObjectSchema)(action.paramSchema)) {
+            const schema = action.paramSchema;
+            return 1 === Object.keys(schema.shape).length;
+        }
+        return false;
+    }, [
+        selectedType,
+        needsStructuredParams,
+        actionSpace
+    ]);
+    const isRunButtonEnabled = (0, external_react_namespaceObject.useMemo)(()=>(0, external_playground_utils_js_namespaceObject.isRunButtonEnabled)(runButtonEnabled, !!needsStructuredParams, params, actionSpace, selectedType, promptValue), [
+        runButtonEnabled,
+        needsStructuredParams,
+        selectedType,
+        actionSpace,
+        promptValue,
+        params
+    ]);
     const handleRunWithHistory = (0, external_react_namespaceObject.useCallback)(()=>{
         const values = form.getFieldsValue();
-        if (values.prompt) addHistory({
+        let historyPrompt = '';
+        if (needsStructuredParams && values.params && actionSpace) {
+            const action = actionSpace.find((a)=>a.interfaceAlias === selectedType || a.name === selectedType);
+            if ((null == action ? void 0 : action.paramSchema) && (0, external_types_js_namespaceObject.isZodObjectSchema)(action.paramSchema)) {
+                let locateValue = '';
+                const otherValues = [];
+                const schema = action.paramSchema;
+                Object.keys(schema.shape).forEach((key)=>{
+                    const paramValue = values.params[key];
+                    if (null != paramValue && '' !== paramValue) {
+                        const field = schema.shape[key];
+                        const { actualField } = (0, external_types_js_namespaceObject.unwrapZodType)(field);
+                        if ((0, external_types_js_namespaceObject.isLocateField)(actualField)) locateValue = String(paramValue);
+                        else if ('distance' === key) otherValues.push(`${paramValue}`);
+                        else otherValues.push(String(paramValue));
+                    }
+                });
+                const mainPart = otherValues.join(' ');
+                historyPrompt = locateValue ? `${mainPart} | ${locateValue}` : mainPart;
+            } else historyPrompt = values.prompt || '';
+        } else historyPrompt = values.prompt || '';
+        addHistory({
             type: values.type,
-            prompt: values.prompt,
+            prompt: historyPrompt,
+            params: values.params,
             timestamp: Date.now()
         });
         onRun();
         if (clearPromptAfterRun) {
             setPromptValue('');
-            form.setFieldValue('prompt', '');
+            if (needsStructuredParams) {
+                const defaultParams = getDefaultParams();
+                form.setFieldValue('params', defaultParams);
+            } else form.setFieldValue('prompt', '');
         }
     }, [
         form,
         addHistory,
-        onRun
+        onRun,
+        needsStructuredParams,
+        selectedType,
+        clearPromptAfterRun,
+        actionSpace,
+        getDefaultParams
     ]);
     const handleKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
         if ('Enter' === e.key && e.metaKey && isRunButtonEnabled) {
@@ -113,6 +237,116 @@ const PromptInput = (param)=>{
         handleRunWithHistory,
         isRunButtonEnabled
     ]);
+    const handleStructuredKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
+        if ('Enter' === e.key && e.metaKey && isRunButtonEnabled) {
+            handleRunWithHistory();
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }, [
+        handleRunWithHistory,
+        isRunButtonEnabled
+    ]);
+    const renderStructuredParams = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (!needsStructuredParams) return null;
+        if (actionSpace) {
+            const action = actionSpace.find((a)=>a.interfaceAlias === selectedType || a.name === selectedType);
+            if ((null == action ? void 0 : action.paramSchema) && (0, external_types_js_namespaceObject.isZodObjectSchema)(action.paramSchema)) {
+                const schema = action.paramSchema;
+                const schemaKeys = Object.keys(schema.shape);
+                if (1 === schemaKeys.length) {
+                    const key = schemaKeys[0];
+                    const field = schema.shape[key];
+                    const { actualField, isOptional } = (0, external_types_js_namespaceObject.unwrapZodType)(field);
+                    const isLocateFieldFlag = (0, external_types_js_namespaceObject.isLocateField)(actualField);
+                    let placeholderText = '';
+                    if (isLocateFieldFlag) placeholderText = 'Describe the element you want to interact with';
+                    else {
+                        placeholderText = `Enter ${key}`;
+                        if ('keyName' === key) placeholderText = 'Enter key name or text to type';
+                        if ('value' === key) placeholderText = 'Enter text to input';
+                    }
+                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
+                        name: [
+                            'params',
+                            key
+                        ],
+                        style: {
+                            margin: 0
+                        },
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Input.TextArea, {
+                            className: "main-side-console-input-textarea",
+                            rows: 4,
+                            placeholder: placeholderText,
+                            autoFocus: true,
+                            onKeyDown: handleStructuredKeyDown
+                        })
+                    });
+                }
+                const fields = [];
+                schemaKeys.forEach((key, index)=>{
+                    var _actualField__def, _actualField__def1;
+                    const fieldSchema = schema.shape[key];
+                    const { actualField, isOptional } = (0, external_types_js_namespaceObject.unwrapZodType)(fieldSchema);
+                    const isLocateFieldFlag = (0, external_types_js_namespaceObject.isLocateField)(actualField);
+                    const label = key.charAt(0).toUpperCase() + key.slice(1);
+                    const isRequired = !isOptional;
+                    const marginBottom = index === schemaKeys.length - 1 ? 0 : 12;
+                    const fieldProps = {
+                        name: key,
+                        label,
+                        fieldSchema: actualField,
+                        isRequired,
+                        marginBottom
+                    };
+                    if (isLocateFieldFlag) fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.LocateField, {
+                        ...fieldProps
+                    }));
+                    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
+                    }));
+                    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
+                    }));
+                    else fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.TextField, {
+                        ...fieldProps
+                    }));
+                });
+                if ('aiScroll' === selectedType) {
+                    const directionField = fields.find((field)=>/*#__PURE__*/ external_react_default().isValidElement(field) && 'direction' === field.props.name);
+                    const distanceField = fields.find((field)=>/*#__PURE__*/ external_react_default().isValidElement(field) && 'distance' === field.props.name);
+                    const otherFields = fields.filter((field)=>/*#__PURE__*/ external_react_default().isValidElement(field) && 'direction' !== field.props.name && 'distance' !== field.props.name);
+                    if (directionField && distanceField) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "structured-params",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                style: {
+                                    display: 'flex',
+                                    gap: 12,
+                                    marginBottom: 12
+                                },
+                                children: [
+                                    directionField,
+                                    distanceField
+                                ]
+                            }),
+                            otherFields
+                        ]
+                    });
+                }
+                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "structured-params",
+                    children: fields
+                });
+            }
+        }
+        return null;
+    }, [
+        selectedType,
+        needsStructuredParams,
+        actionSpace,
+        handleStructuredKeyDown
+    ]);
     const handleMouseEnter = (0, external_react_namespaceObject.useCallback)(()=>{
         setHoveringSettings(true);
     }, []);
@@ -161,52 +395,106 @@ const PromptInput = (param)=>{
             /*#__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: "mode-radio-group",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
+                                name: "type",
+                                style: {
+                                    margin: 0
+                                },
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Radio.Group, {
+                                    buttonStyle: "solid",
+                                    disabled: !runButtonEnabled,
+                                    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 = 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, external_playground_utils_js_namespaceObject.actionNameForType)(apiType)
+                                            })
+                                        }, apiType);
                                     })
                                 })
-                            ]
-                        })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Dropdown, {
+                                menu: (()=>{
+                                    const hiddenAPIs = Object.keys(external_playground_constants_js_namespaceObject.apiMetadata).filter((api)=>!external_playground_constants_js_namespaceObject.defaultMainButtons.includes(api));
+                                    const groupedItems = [];
+                                    const interactionAPIs = hiddenAPIs.filter((api)=>'interaction' === external_playground_constants_js_namespaceObject.apiMetadata[api].group);
+                                    if (interactionAPIs.length > 0) groupedItems.push({
+                                        key: 'interaction-group',
+                                        type: 'group',
+                                        label: 'Interaction APIs',
+                                        children: interactionAPIs.map((api)=>({
+                                                key: api,
+                                                label: (0, external_playground_utils_js_namespaceObject.actionNameForType)(api),
+                                                title: external_playground_constants_js_namespaceObject.apiMetadata[api].title,
+                                                onClick: ()=>{
+                                                    form.setFieldValue('type', api);
+                                                }
+                                            }))
+                                    });
+                                    const extractionAPIs = hiddenAPIs.filter((api)=>'extraction' === external_playground_constants_js_namespaceObject.apiMetadata[api].group);
+                                    if (extractionAPIs.length > 0) groupedItems.push({
+                                        key: 'extraction-group',
+                                        type: 'group',
+                                        label: 'Data Extraction APIs',
+                                        children: extractionAPIs.map((api)=>({
+                                                key: api,
+                                                label: (0, external_playground_utils_js_namespaceObject.actionNameForType)(api),
+                                                title: external_playground_constants_js_namespaceObject.apiMetadata[api].title,
+                                                onClick: ()=>{
+                                                    form.setFieldValue('type', api);
+                                                }
+                                            }))
+                                    });
+                                    const validationAPIs = hiddenAPIs.filter((api)=>'validation' === external_playground_constants_js_namespaceObject.apiMetadata[api].group);
+                                    if (validationAPIs.length > 0) groupedItems.push({
+                                        key: 'validation-group',
+                                        type: 'group',
+                                        label: 'Validation APIs',
+                                        children: validationAPIs.map((api)=>({
+                                                key: api,
+                                                label: (0, external_playground_utils_js_namespaceObject.actionNameForType)(api),
+                                                title: external_playground_constants_js_namespaceObject.apiMetadata[api].title,
+                                                onClick: ()=>{
+                                                    form.setFieldValue('type', api);
+                                                }
+                                            }))
+                                    });
+                                    return {
+                                        items: groupedItems
+                                    };
+                                })(),
+                                placement: "bottomLeft",
+                                trigger: [
+                                    'click'
+                                ],
+                                disabled: !runButtonEnabled,
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.Button, {
+                                    className: `more-apis-button ${!external_playground_constants_js_namespaceObject.defaultMainButtons.includes(selectedType) ? 'selected-from-dropdown' : ''}`,
+                                    children: [
+                                        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',
+                                                marginLeft: '2px'
+                                            }
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                         className: "action-icons",
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_HistorySelector_js_namespaceObject.HistorySelector, {
-                                onSelect: handleSelectHistory
+                                onSelect: handleSelectHistory,
+                                history: historyForSelectedType,
+                                currentType: selectedType
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                                 className: hoveringSettings ? 'settings-wrapper settings-wrapper-hover' : 'settings-wrapper',
@@ -214,7 +502,7 @@ const PromptInput = (param)=>{
                                 onMouseLeave: handleMouseLeave,
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ConfigSelector_js_namespaceObject.ConfigSelector, {
                                     enableTracking: 'In-Browser-Extension' === serviceMode,
-                                    showDeepThinkOption: 'aiTap' === selectedType
+                                    showDeepThinkOption: 'aiTap' === selectedType || 'aiHover' === selectedType || 'aiInput' === selectedType || 'aiRightClick' === selectedType || 'aiLocate' === selectedType
                                 })
                             })
                         ]
@@ -224,7 +512,10 @@ const PromptInput = (param)=>{
             /*#__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, {
+                    needsStructuredParams ? hasSingleStructuredParam ? renderStructuredParams() : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "structured-params-container",
+                        children: renderStructuredParams()
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
                         name: "prompt",
                         style: {
                             margin: 0