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

package/dist/es/component/playground/index.css

@@ -50,8 +50,31 @@ body {
   color: #fff;
 }
 
-.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper:hover {
-  color: #2b83ff;
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button {
+  height: 24px;
+  box-shadow: none;
+  background-color: #f7f7f7;
+  border: none;
+  border-radius: 11px;
+  align-items: center;
+  gap: 2px;
+  padding: 0 8px;
+  font-size: 12px;
+  display: inline-flex;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button:hover {
+  background-color: #e6e6e6;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button.selected-from-dropdown {
+  color: #fff;
+  background-color: #2b83ff;
+  font-weight: 500;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button.selected-from-dropdown:hover {
+  background-color: #2b83ff;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
@@ -120,6 +143,10 @@ body {
   background-color: rgba(0, 0, 0, 0);
 }
 
+.prompt-input-wrapper .ant-form-item-with-help + .form-controller-wrapper {
+  bottom: 22px;
+}
+
 .prompt-input-wrapper .ant-input {
   padding-bottom: 40px;
 }
@@ -152,6 +179,137 @@ body {
   color: #3b3b3b;
 }
 
+.prompt-input-wrapper .structured-params-container {
+  background: linear-gradient(#fff, #fff) padding-box padding-box, linear-gradient(135deg, #4285f4 0%, #06f 25%, #7b02c5 50%, #ea4335 75%, #ff7043 100%) border-box;
+  border: 1px solid rgba(0, 0, 0, 0);
+  border-radius: 12px;
+  padding: 16px 16px 56px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item {
+  flex-direction: column;
+  display: flex;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label {
+  text-align: left;
+  flex-basis: auto;
+  padding-bottom: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label {
+  color: rgba(0, 0, 0, .85);
+  height: auto;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:after {
+  color: #ff4d4f;
+  font-family: SimSun, sans-serif;
+  font-size: 12px;
+  line-height: 1;
+  display: inline-block;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
+  margin-left: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
+  margin-left: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
+  margin-left: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
+  margin-right: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
+  margin-right: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
+  margin-right: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-control {
+  flex: 1;
+  margin-top: 0;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-row {
+  flex-direction: column;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-control-input {
+  min-height: auto;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-input, .prompt-input-wrapper .structured-params-container .structured-params .ant-input-number, .prompt-input-wrapper .structured-params-container .structured-params .ant-select {
+  border: 1px solid #e1e5e9;
+  border-radius: 6px;
+  width: 100%;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-input:hover, .prompt-input-wrapper .structured-params-container .structured-params .ant-input-number:hover, .prompt-input-wrapper .structured-params-container .structured-params .ant-select:hover {
+  border-color: #40a9ff;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-input:focus, .prompt-input-wrapper .structured-params-container .structured-params .ant-input-number:focus, .prompt-input-wrapper .structured-params-container .structured-params .ant-select:focus, .prompt-input-wrapper .structured-params-container .structured-params .ant-input:focus-within, .prompt-input-wrapper .structured-params-container .structured-params .ant-input-number:focus-within, .prompt-input-wrapper .structured-params-container .structured-params .ant-select:focus-within {
+  border-color: #40a9ff;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, .2);
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params textarea.ant-input {
+  padding-bottom: 5px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-input-number .ant-input-number-input {
+  box-shadow: none;
+  border: none;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-input-number:hover .ant-input-number-input {
+  box-shadow: none;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-select {
+  min-width: 120px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-select .ant-select-selector {
+  box-shadow: none;
+  border: none;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-select:hover .ant-select-selector, .prompt-input-wrapper .structured-params-container .structured-params .ant-select.ant-select-focused .ant-select-selector {
+  box-shadow: none;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-radio-group {
+  width: 100%;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-radio-group .ant-radio-button-wrapper {
+  border: 1px solid #e1e5e9;
+  border-radius: 6px;
+  height: 32px;
+  margin-right: 4px;
+  font-size: 12px;
+  line-height: 30px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
+  color: #fff;
+  background-color: #2b83ff;
+  border-color: #2b83ff;
+}
+
 .selector-trigger {
   cursor: pointer;
   width: 24px;

package/dist/es/component/playground/playground-constants.mjs

@@ -42,4 +42,72 @@ const emptyResultTip = /*#__PURE__*/ jsx("div", {
 });
 const trackingTip = 'limit popup to current tab';
 const deepThinkTip = 'deep think';
-export { deepThinkTip, emptyResultTip, errorMessageServerNotReady, serverLaunchTip, trackingTip };
+const apiMetadata = {
+    aiAction: {
+        group: 'interaction',
+        title: 'Auto Planning: plan the steps and execute'
+    },
+    aiTap: {
+        group: 'interaction',
+        title: 'Click an element'
+    },
+    aiHover: {
+        group: 'interaction',
+        title: 'Hover over an element'
+    },
+    aiInput: {
+        group: 'interaction',
+        title: 'Input text into an element'
+    },
+    aiRightClick: {
+        group: 'interaction',
+        title: 'Right-click an element'
+    },
+    aiKeyboardPress: {
+        group: 'interaction',
+        title: 'Press keyboard keys'
+    },
+    aiScroll: {
+        group: 'interaction',
+        title: 'Scroll the page or element'
+    },
+    aiLocate: {
+        group: 'interaction',
+        title: 'Locate an element on the page'
+    },
+    aiQuery: {
+        group: 'extraction',
+        title: 'Extract data directly from the UI'
+    },
+    aiBoolean: {
+        group: 'extraction',
+        title: 'Get true/false answer'
+    },
+    aiNumber: {
+        group: 'extraction',
+        title: 'Extract numeric value'
+    },
+    aiString: {
+        group: 'extraction',
+        title: 'Extract text value'
+    },
+    aiAsk: {
+        group: 'extraction',
+        title: 'Ask a question about the UI'
+    },
+    aiAssert: {
+        group: 'validation',
+        title: 'Assert a condition is true'
+    },
+    aiWaitFor: {
+        group: 'validation',
+        title: 'Wait for a condition to be met'
+    }
+};
+const defaultMainButtons = [
+    'aiAction',
+    'aiTap',
+    'aiQuery',
+    'aiAssert'
+];
+export { apiMetadata, deepThinkTip, defaultMainButtons, emptyResultTip, errorMessageServerNotReady, serverLaunchTip, trackingTip };

package/dist/es/component/playground/playground-utils.mjs

@@ -1,5 +1,6 @@
 import { PLAYGROUND_SERVER_PORT } from "@midscene/shared/constants";
 import { ERROR_CODE_NOT_IMPLEMENTED_AS_DESIGNED, StaticPage, StaticPageAgent } from "@midscene/web/playground";
+import { isZodObjectSchema, unwrapZodType } from "./types.mjs";
 const serverBase = `http://localhost:${PLAYGROUND_SERVER_PORT}`;
 const checkServerStatus = async ()=>{
     try {
@@ -63,6 +64,17 @@ const actionNameForType = (type)=>{
     if ('aiQuery' === type) return 'Query';
     if ('aiAssert' === type) return 'Assert';
     if ('aiTap' === type) return 'Tap';
+    if ('aiHover' === type) return 'Hover';
+    if ('aiInput' === type) return 'Input';
+    if ('aiRightClick' === type) return 'Right Click';
+    if ('aiKeyboardPress' === type) return 'Keyboard Press';
+    if ('aiScroll' === type) return 'Scroll';
+    if ('aiLocate' === type) return 'Locate';
+    if ('aiBoolean' === type) return 'Boolean';
+    if ('aiNumber' === type) return 'Number';
+    if ('aiString' === type) return 'String';
+    if ('aiAsk' === type) return 'Ask';
+    if ('aiWaitFor' === type) return 'Wait For';
     return type;
 };
 const staticAgentFromContext = (context)=>{
@@ -78,6 +90,18 @@ const formatErrorMessage = (e)=>{
 const getPlaceholderForType = (type)=>{
     if ('aiQuery' === type) return 'What do you want to query?';
     if ('aiAssert' === type) return 'What do you want to assert?';
+    if ('aiTap' === type) return 'What element do you want to tap?';
+    if ('aiHover' === type) return 'What element do you want to hover over?';
+    if ('aiInput' === type) return 'Format: <value> | <element>\nExample: hello world | search box';
+    if ('aiRightClick' === type) return 'What element do you want to right-click?';
+    if ('aiKeyboardPress' === type) return 'Format: <key> | <element (optional)>\nExample: Enter | text field';
+    if ('aiScroll' === type) return 'Format: <direction> <amount> | <element (optional)>\nExample: down 500 | main content';
+    if ('aiLocate' === type) return 'What element do you want to locate?';
+    if ('aiBoolean' === type) return 'What do you want to check (returns true/false)?';
+    if ('aiNumber' === type) return 'What number do you want to extract?';
+    if ('aiString' === type) return 'What text do you want to extract?';
+    if ('aiAsk' === type) return 'What do you want to ask?';
+    if ('aiWaitFor' === type) return 'What condition do you want to wait for?';
     return 'What do you want to do?';
 };
 const blankResult = {
@@ -86,4 +110,22 @@ const blankResult = {
     reportHTML: null,
     error: null
 };
-export { actionNameForType, blankResult, cancelTask, checkServerStatus, formatErrorMessage, getPlaceholderForType, getTaskProgress, overrideServerConfig, requestPlaygroundServer, serverBase, staticAgentFromContext };
+const isRunButtonEnabled = (runButtonEnabled, needsStructuredParams, params, actionSpace, selectedType, promptValue)=>{
+    if (!runButtonEnabled) return false;
+    if (needsStructuredParams) {
+        const currentParams = params || {};
+        const action = null == actionSpace ? void 0 : actionSpace.find((a)=>a.interfaceAlias === selectedType || a.name === selectedType);
+        if ((null == action ? void 0 : action.paramSchema) && isZodObjectSchema(action.paramSchema)) {
+            const schema = action.paramSchema;
+            return Object.keys(schema.shape).every((key)=>{
+                const field = schema.shape[key];
+                const { isOptional } = unwrapZodType(field);
+                const value = currentParams[key];
+                return isOptional || void 0 !== value && '' !== value && null !== value;
+            });
+        }
+        return true;
+    }
+    return promptValue.trim().length > 0;
+};
+export { actionNameForType, blankResult, cancelTask, checkServerStatus, formatErrorMessage, getPlaceholderForType, getTaskProgress, isRunButtonEnabled, overrideServerConfig, requestPlaygroundServer, serverBase, staticAgentFromContext };

package/dist/es/component/playground/types.mjs

@@ -0,0 +1,50 @@
+const VALIDATION_CONSTANTS = {
+    ZOD_TYPES: {
+        OPTIONAL: 'ZodOptional',
+        DEFAULT: 'ZodDefault',
+        NULLABLE: 'ZodNullable',
+        OBJECT: 'ZodObject',
+        ENUM: 'ZodEnum',
+        NUMBER: 'ZodNumber',
+        STRING: 'ZodString'
+    },
+    FIELD_FLAGS: {
+        LOCATION: 'midscene_location_field_flag'
+    },
+    DEFAULT_VALUES: {
+        ACTION_TYPE: 'aiAction',
+        TIMEOUT_MS: 15000,
+        CHECK_INTERVAL_MS: 3000
+    }
+};
+const isZodObjectSchema = (schema)=>'object' == typeof schema && null !== schema && 'shape' in schema && 'parse' in schema && 'function' == typeof schema.parse;
+const isLocateField = (field)=>{
+    var _field__def, _field__def_shape, _field__def1, _field__def_shape1, _field__def2;
+    return !!((null == (_field__def = field._def) ? void 0 : _field__def.typeName) === VALIDATION_CONSTANTS.ZOD_TYPES.OBJECT && (null == (_field__def_shape = (_field__def1 = field._def).shape) ? void 0 : _field__def_shape.call(_field__def1)) && VALIDATION_CONSTANTS.FIELD_FLAGS.LOCATION in ((null == (_field__def_shape1 = (_field__def2 = field._def).shape) ? void 0 : _field__def_shape1.call(_field__def2)) || {}));
+};
+const unwrapZodType = (field)=>{
+    var _actualField__def, _actualField__def1, _actualField__def2;
+    let actualField = field;
+    let isOptional = false;
+    let hasDefault = false;
+    while((null == (_actualField__def = actualField._def) ? void 0 : _actualField__def.typeName) === VALIDATION_CONSTANTS.ZOD_TYPES.OPTIONAL || (null == (_actualField__def1 = actualField._def) ? void 0 : _actualField__def1.typeName) === VALIDATION_CONSTANTS.ZOD_TYPES.DEFAULT || (null == (_actualField__def2 = actualField._def) ? void 0 : _actualField__def2.typeName) === VALIDATION_CONSTANTS.ZOD_TYPES.NULLABLE){
+        var _actualField__def3, _actualField__def4;
+        if ((null == (_actualField__def3 = actualField._def) ? void 0 : _actualField__def3.typeName) === VALIDATION_CONSTANTS.ZOD_TYPES.OPTIONAL) isOptional = true;
+        if ((null == (_actualField__def4 = actualField._def) ? void 0 : _actualField__def4.typeName) === VALIDATION_CONSTANTS.ZOD_TYPES.DEFAULT) hasDefault = true;
+        actualField = actualField._def.innerType || actualField;
+    }
+    return {
+        actualField,
+        isOptional,
+        hasDefault
+    };
+};
+const extractDefaultValue = (field)=>{
+    var _currentField__def;
+    let currentField = field;
+    while(null == (_currentField__def = currentField._def) ? void 0 : _currentField__def.innerType){
+        if (currentField._def.typeName === VALIDATION_CONSTANTS.ZOD_TYPES.DEFAULT && currentField._def.defaultValue) return currentField._def.defaultValue();
+        currentField = currentField._def.innerType;
+    }
+};
+export { VALIDATION_CONSTANTS, extractDefaultValue, isLocateField, isZodObjectSchema, unwrapZodType };

package/dist/es/component/replay-scripts.mjs

@@ -1,7 +1,7 @@
 'use client';
 import "./player.css";
 import { mousePointer } from "../utils.mjs";
-import { paramStr, typeStr } from "@midscene/web/ui-utils";
+import { paramStr, typeStr } from "@midscene/core/agent";
 import { treeToList } from "@midscene/shared/extractor";
 const stillDuration = 900;
 const actionSpinningPointerDuration = 300;
@@ -50,11 +50,10 @@ const allScriptsFromDump = (dump)=>{
     dump.executions.forEach((execution)=>{
         if (execution.sdkVersion) sdkVersion = execution.sdkVersion;
         execution.tasks.forEach((task)=>{
-            var _insightTask_pageContext_size, _insightTask_pageContext;
-            const insightTask = task;
-            if (null == (_insightTask_pageContext = insightTask.pageContext) ? void 0 : null == (_insightTask_pageContext_size = _insightTask_pageContext.size) ? void 0 : _insightTask_pageContext_size.width) {
-                width = insightTask.pageContext.size.width;
-                height = insightTask.pageContext.size.height;
+            var _task_pageContext_size, _task_pageContext;
+            if (null == (_task_pageContext = task.pageContext) ? void 0 : null == (_task_pageContext_size = _task_pageContext.size) ? void 0 : _task_pageContext_size.width) {
+                width = task.pageContext.size.width;
+                height = task.pageContext.size.height;
             }
         });
     });
@@ -81,14 +80,24 @@ const allScriptsFromDump = (dump)=>{
         if (index !== allScripts.length - 1 && 'Done' === script.title) return false;
         return true;
     });
+    const modelBriefs = (()=>{
+        var _list_;
+        const list = [
+            ...modelBriefsSet
+        ];
+        if (!list.length) return list;
+        const firstOneInfo = null == (_list_ = list[0]) ? void 0 : _list_.split('/', 2)[1];
+        if (firstOneInfo && list.slice(1).every((item)=>(null == item ? void 0 : item.split('/', 2)[1]) === firstOneInfo)) return [
+            firstOneInfo
+        ];
+        return list;
+    })();
     return {
         scripts: allScriptsWithoutIntermediateDoneFrame,
         width,
         height,
         sdkVersion,
-        modelBriefs: [
-            ...modelBriefsSet
-        ]
+        modelBriefs
     };
 };
 const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{

package/dist/es/component/store/history.mjs

@@ -27,29 +27,63 @@ __webpack_require__.d(external_zustand_namespaceObject, {
     create: ()=>create
 });
 const { create: history_create } = external_zustand_namespaceObject;
-const HISTORY_KEY = 'midscene-prompt-history';
+const HISTORY_KEY = 'midscene-prompt-history-v2';
+const LAST_SELECTED_TYPE_KEY = 'midscene-last-selected-type';
 const getHistoryFromLocalStorage = ()=>{
     const historyString = localStorage.getItem(HISTORY_KEY);
-    return historyString ? JSON.parse(historyString) : [];
+    return historyString ? JSON.parse(historyString) : {};
+};
+const getLastSelectedType = ()=>localStorage.getItem(LAST_SELECTED_TYPE_KEY) || 'aiAction';
+const setLastSelectedType = (type)=>{
+    localStorage.setItem(LAST_SELECTED_TYPE_KEY, type);
 };
 const useHistoryStore = history_create((set, get)=>({
         history: getHistoryFromLocalStorage(),
-        clearHistory: ()=>{
+        lastSelectedType: getLastSelectedType(),
+        clearHistory: (type)=>{
+            const newHistory = {
+                ...get().history
+            };
+            delete newHistory[type];
             set({
-                history: []
+                history: newHistory
             });
-            localStorage.removeItem(HISTORY_KEY);
+            localStorage.setItem(HISTORY_KEY, JSON.stringify(newHistory));
         },
         addHistory: (historyItem)=>{
-            const newHistory = [
+            const { type } = historyItem;
+            const currentHistory = get().history;
+            const typeHistory = currentHistory[type] || [];
+            const stringifiedNewItem = JSON.stringify({
+                prompt: historyItem.prompt,
+                params: historyItem.params
+            });
+            const newTypeHistory = [
                 historyItem,
-                ...get().history.filter((h)=>h.prompt !== historyItem.prompt)
+                ...typeHistory.filter((h)=>{
+                    const stringifiedOldItem = JSON.stringify({
+                        prompt: h.prompt,
+                        params: h.params
+                    });
+                    return stringifiedOldItem !== stringifiedNewItem;
+                })
             ];
-            while(newHistory.length > 10)newHistory.pop();
+            if (newTypeHistory.length > 10) newTypeHistory.length = 10;
+            const newHistory = {
+                ...currentHistory,
+                [type]: newTypeHistory
+            };
             set({
                 history: newHistory
             });
             localStorage.setItem(HISTORY_KEY, JSON.stringify(newHistory));
+        },
+        getHistoryForType: (type)=>get().history[type] || [],
+        setLastSelectedType: (type)=>{
+            set({
+                lastSelectedType: type
+            });
+            setLastSelectedType(type);
         }
     }));
 export { useHistoryStore };

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

@@ -0,0 +1,165 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    TextField: ()=>TextField,
+    NumberField: ()=>NumberField,
+    LocateField: ()=>LocateField,
+    EnumField: ()=>EnumField
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_antd_namespaceObject = require("antd");
+const { TextArea } = external_antd_namespaceObject.Input;
+const renderLabel = (label, isOptional)=>`${label}${isOptional ? ' (Optional)' : ''}`;
+const TextField = (param)=>{
+    let { name, label, isRequired, marginBottom } = param;
+    const placeholder = `Enter ${name}`;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
+        name: [
+            'params',
+            name
+        ],
+        label: renderLabel(label, !isRequired),
+        rules: isRequired ? [
+            {
+                required: true,
+                message: `Please input ${name}`
+            }
+        ] : [],
+        style: {
+            marginBottom
+        },
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Input, {
+            placeholder: placeholder
+        })
+    }, name);
+};
+const LocateField = (param)=>{
+    let { name, label, isRequired, marginBottom } = param;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
+        name: [
+            'params',
+            name
+        ],
+        label: renderLabel(label, !isRequired),
+        rules: isRequired ? [
+            {
+                required: true,
+                message: `Please describe the ${name}`
+            }
+        ] : [],
+        style: {
+            marginBottom
+        },
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TextArea, {
+            rows: 2,
+            placeholder: `Describe the ${name}, use natural language`
+        })
+    }, name);
+};
+const EnumField = (param)=>{
+    let { name, label, fieldSchema, isRequired, marginBottom } = param;
+    const enumValues = fieldSchema._def.values || [];
+    const selectOptions = enumValues.map((value)=>({
+            value,
+            label: value.charAt(0).toUpperCase() + value.slice(1)
+        }));
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
+        name: [
+            'params',
+            name
+        ],
+        label: label,
+        rules: isRequired ? [
+            {
+                required: true,
+                message: `Please select ${name}`
+            }
+        ] : [],
+        style: {
+            marginBottom
+        },
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Select, {
+            placeholder: `Select ${name}`,
+            options: selectOptions
+        })
+    }, name);
+};
+const NumberField = (param)=>{
+    let { name, label, isRequired, marginBottom } = param;
+    const placeholder = 'distance' === name ? 500 : 0;
+    const min = 0;
+    const max = 'distance' === name ? 10000 : void 0;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
+        name: [
+            'params',
+            name
+        ],
+        label: `${label}${'distance' === name ? ' (px)' : ''}`,
+        rules: isRequired ? [
+            {
+                required: true,
+                message: `Please input ${name}`
+            },
+            {
+                type: 'number',
+                min,
+                message: `${label} must be at least ${min}`
+            }
+        ] : [
+            {
+                type: 'number',
+                min,
+                message: `${label} must be at least ${min}`
+            }
+        ],
+        style: {
+            flex: 'distance' === name ? 1 : void 0,
+            marginBottom
+        },
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.InputNumber, {
+            placeholder: placeholder.toString(),
+            min: min,
+            max: max,
+            step: 'distance' === name ? 10 : 1,
+            style: {
+                width: '100%'
+            }
+        })
+    }, name);
+};
+exports.EnumField = __webpack_exports__.EnumField;
+exports.LocateField = __webpack_exports__.LocateField;
+exports.NumberField = __webpack_exports__.NumberField;
+exports.TextField = __webpack_exports__.TextField;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "EnumField",
+    "LocateField",
+    "NumberField",
+    "TextField"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});