@midscene/visualizer 0.30.9 → 0.30.11-beta-20251218071621.0

package/dist/lib/component/prompt-input/index.js

@@ -42,15 +42,38 @@ 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 store_js_namespaceObject = require("../../store/store.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");
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
 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 PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMode, stoppable, loading, onRun, onStop, clearPromptAfterRun = true, actionSpace, hideDomAndScreenshotOptions = false, deviceType })=>{
     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);
@@ -62,6 +85,8 @@ const PromptInput = (param)=>{
     const lastSelectedType = (0, history_js_namespaceObject.useHistoryStore)((state)=>state.lastSelectedType);
     const addHistory = (0, history_js_namespaceObject.useHistoryStore)((state)=>state.addHistory);
     const setLastSelectedType = (0, history_js_namespaceObject.useHistoryStore)((state)=>state.setLastSelectedType);
+    const planningStrategy = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.planningStrategy);
+    const setPlanningStrategy = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.setPlanningStrategy);
     const historyForSelectedType = (0, external_react_namespaceObject.useMemo)(()=>history[selectedType] || [], [
         history,
         selectedType
@@ -142,12 +167,14 @@ const PromptInput = (param)=>{
         const hasTracking = 'In-Browser-Extension' === serviceMode;
         const hasDeepThink = showDeepThinkOption;
         const hasDataExtraction = showDataExtractionOptions && !hideDomAndScreenshotOptions;
-        return hasTracking || hasDeepThink || hasDataExtraction;
+        const hasDeviceOptions = 'android' === deviceType || 'ios' === deviceType;
+        return hasTracking || hasDeepThink || hasDataExtraction || hasDeviceOptions;
     }, [
         serviceMode,
         showDeepThinkOption,
         showDataExtractionOptions,
-        hideDomAndScreenshotOptions
+        hideDomAndScreenshotOptions,
+        deviceType
     ]);
     const availableDropdownMethods = (0, external_react_namespaceObject.useMemo)(()=>{
         const metadataMethods = Object.keys(constants_js_namespaceObject.apiMetadata);
@@ -474,21 +501,11 @@ const PromptInput = (param)=>{
                         marginBottom,
                         placeholder
                     };
-                    if (isLocateFieldFlag) fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_index_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, {
-                        ...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, {
-                        ...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, {
-                        ...fieldProps
-                    }, key));
-                    else fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_index_js_namespaceObject.TextField, {
-                        ...fieldProps
-                    }, key));
+                    if (isLocateFieldFlag) fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_index_js_namespaceObject.LocateField, _object_spread({}, 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, _object_spread({}, 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, _object_spread({}, 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, _object_spread({}, fieldProps), key));
+                    else fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_index_js_namespaceObject.TextField, _object_spread({}, fieldProps), key));
                 });
                 if ('aiScroll' === selectedType) {
                     const directionField = fields.find((field)=>/*#__PURE__*/ external_react_default().isValidElement(field) && 'direction' === field.props.name);
@@ -544,7 +561,7 @@ const PromptInput = (param)=>{
                 loading: loading,
                 children: text
             });
-        if (dryMode) return 'aiAction' === selectedType ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tooltip, {
+        if (dryMode) return 'aiAct' === 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');
@@ -684,6 +701,7 @@ const PromptInput = (param)=>{
                                     'click'
                                 ],
                                 disabled: !runButtonEnabled,
+                                overlayClassName: "more-apis-dropdown",
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.Button, {
                                     className: `more-apis-button ${!constants_js_namespaceObject.defaultMainButtons.includes(selectedType) ? 'selected-from-dropdown' : ''}`,
                                     children: [
@@ -710,7 +728,8 @@ const PromptInput = (param)=>{
                                     enableTracking: 'In-Browser-Extension' === serviceMode,
                                     showDeepThinkOption: showDeepThinkOption,
                                     showDataExtractionOptions: showDataExtractionOptions,
-                                    hideDomAndScreenshotOptions: hideDomAndScreenshotOptions
+                                    hideDomAndScreenshotOptions: hideDomAndScreenshotOptions,
+                                    deviceType: deviceType
                                 })
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_history_selector_index_js_namespaceObject.HistorySelector, {
@@ -756,9 +775,48 @@ const PromptInput = (param)=>{
                             (0, playground_utils_js_namespaceObject.actionNameForType)(selectedType)
                         ]
                     }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                        className: "form-controller-wrapper",
-                        children: renderActionButton()
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: `form-controller-wrapper ${'aiAct' === selectedType ? 'with-strategy' : ''}`,
+                        children: [
+                            'aiAct' === selectedType && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Dropdown, {
+                                menu: {
+                                    items: [
+                                        {
+                                            key: 'standard',
+                                            label: 'Standard',
+                                            onClick: ()=>setPlanningStrategy('standard')
+                                        },
+                                        {
+                                            key: 'fast',
+                                            label: 'Fast',
+                                            onClick: ()=>setPlanningStrategy('fast')
+                                        }
+                                    ],
+                                    selectedKeys: [
+                                        planningStrategy
+                                    ]
+                                },
+                                trigger: [
+                                    'click'
+                                ],
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("a", {
+                                    onClick: (e)=>e.preventDefault(),
+                                    className: "planning-strategy-selector",
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.Space, {
+                                        size: 4,
+                                        children: [
+                                            'fast' === planningStrategy ? 'Fast' : 'Standard',
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.DownOutlined, {
+                                                style: {
+                                                    fontSize: 10
+                                                }
+                                            })
+                                        ]
+                                    })
+                                })
+                            }),
+                            renderActionButton()
+                        ]
                     })
                 ]
             })
@@ -766,9 +824,9 @@ const PromptInput = (param)=>{
     });
 };
 exports.PromptInput = __webpack_exports__.PromptInput;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+for(var __rspack_i in __webpack_exports__)if (-1 === [
     "PromptInput"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true
 });

package/dist/lib/component/screenshot-viewer/index.css

@@ -0,0 +1,214 @@
+.screenshot-viewer {
+  flex-direction: column;
+  height: 100%;
+  display: flex;
+}
+
+.screenshot-viewer.offline, .screenshot-viewer.loading, .screenshot-viewer.error {
+  text-align: center;
+  color: #666;
+  justify-content: center;
+  align-items: center;
+}
+
+.screenshot-viewer.offline .screenshot-placeholder h3, .screenshot-viewer.loading .screenshot-placeholder h3, .screenshot-viewer.error .screenshot-placeholder h3 {
+  color: #1890ff;
+  text-transform: capitalize;
+  margin-bottom: 12px;
+  font-size: 18px;
+}
+
+.screenshot-viewer.offline .screenshot-placeholder p, .screenshot-viewer.loading .screenshot-placeholder p, .screenshot-viewer.error .screenshot-placeholder p {
+  color: #666;
+  margin: 0;
+}
+
+.screenshot-viewer.offline .screenshot-placeholder p.error-message, .screenshot-viewer.loading .screenshot-placeholder p.error-message, .screenshot-viewer.error .screenshot-placeholder p.error-message {
+  color: #ff4d4f;
+}
+
+.screenshot-viewer .screenshot-header {
+  justify-content: space-between;
+  align-items: center;
+  height: 56px;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-header .screenshot-title {
+  flex-direction: column;
+  gap: 4px;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-header .screenshot-title h3 {
+  color: #000;
+  text-transform: capitalize;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-header .screenshot-title .screenshot-subtitle {
+  color: #999;
+  margin: 0;
+  font-size: 12px;
+}
+
+.screenshot-viewer .screenshot-container {
+  background: #f2f4f7;
+  border-radius: 16px;
+  flex-direction: column;
+  flex: 1;
+  padding: 0 15px;
+  display: flex;
+  overflow: hidden;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay {
+  z-index: 10;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 12px 5px 8px;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .device-name-overlay {
+  color: rgba(0, 0, 0, .85);
+  text-transform: capitalize;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .device-name-overlay .info-icon {
+  opacity: .8;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .device-name-overlay .info-icon:hover {
+  opacity: 1;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls {
+  opacity: 1;
+  box-sizing: border-box;
+  border-radius: 4px;
+  align-items: center;
+  gap: 10px;
+  height: 18px;
+  padding: 4px 8px;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .last-update-time {
+  color: #666;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  overflow: hidden;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .operation-indicator {
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .ant-btn {
+  box-shadow: none;
+  background: none;
+  border: none;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .ant-btn:hover {
+  background-color: rgba(0, 0, 0, .06);
+  border-radius: 2px;
+  transition: all .2s;
+  transform: scale(1.1);
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .ant-btn .anticon {
+  color: #666;
+  font-size: 12px;
+  transition: color .2s;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-content {
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  min-height: 0;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-content .screenshot-image {
+  object-fit: contain;
+  border-radius: 12px;
+  max-width: 100%;
+  height: auto;
+  max-height: 100%;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-content .screenshot-placeholder {
+  text-align: center;
+  color: #999;
+}
+
+[data-theme="dark"] .screenshot-viewer.offline, [data-theme="dark"] .screenshot-viewer.loading, [data-theme="dark"] .screenshot-viewer.error {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .screenshot-viewer.offline .screenshot-placeholder h3, [data-theme="dark"] .screenshot-viewer.loading .screenshot-placeholder h3, [data-theme="dark"] .screenshot-viewer.error .screenshot-placeholder h3 {
+  color: #1890ff;
+}
+
+[data-theme="dark"] .screenshot-viewer.offline .screenshot-placeholder p, [data-theme="dark"] .screenshot-viewer.loading .screenshot-placeholder p, [data-theme="dark"] .screenshot-viewer.error .screenshot-placeholder p {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .screenshot-viewer.offline .screenshot-placeholder p.error-message, [data-theme="dark"] .screenshot-viewer.loading .screenshot-placeholder p.error-message, [data-theme="dark"] .screenshot-viewer.error .screenshot-placeholder p.error-message {
+  color: #ff4d4f;
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-header .screenshot-title h3 {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-header .screenshot-title .screenshot-subtitle {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container {
+  background: #141414;
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-overlay .device-name-overlay, [data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .last-update-time {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .ant-btn:hover {
+  background-color: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .ant-btn .anticon {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-content .screenshot-placeholder {
+  color: rgba(255, 255, 255, .45);
+}
+