@midscene/visualizer 0.30.10 → 1.0.0

package/dist/es/component/prompt-input/index.css

@@ -1,5 +1,7 @@
 .prompt-input-wrapper {
+  box-sizing: border-box;
   width: 100%;
+  padding: 0 4px;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper {
@@ -145,35 +147,62 @@
 }
 
 .prompt-input-wrapper .main-side-console-input {
+  z-index: 1;
+  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;
   margin-top: 10px;
+  padding-bottom: 56px;
   position: relative;
 }
 
+@keyframes hue-shift {
+  0% {
+    -webkit-filter: hue-rotate();
+    filter: hue-rotate();
+  }
+
+  100% {
+    -webkit-filter: hue-rotate(360deg);
+    filter: hue-rotate(360deg);
+  }
+}
+
+.prompt-input-wrapper .main-side-console-input:focus-within {
+  z-index: 10;
+  box-shadow: 0 0 0 3px rgba(43, 131, 255, .16);
+}
+
 .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea {
+  resize: none;
   white-space: pre-wrap;
   scrollbar-width: thin;
-  background: #fff;
-  border: 1px solid #f2f4f7;
-  border-radius: 12px;
+  background: none;
+  border: none;
+  border-radius: 0;
+  outline: none;
+  min-height: 120px;
   padding: 12px 16px;
   line-height: 21px;
   transition: background-color .2s;
+  position: relative;
   overflow-y: auto;
 }
 
-@keyframes hue-shift {
-  0% {
-    filter: hue-rotate();
-  }
+.prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea:focus {
+  box-shadow: none;
+  border: none;
+  outline: none;
+}
 
-  100% {
-    filter: hue-rotate(360deg);
-  }
+.prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea:focus-visible {
+  box-shadow: none;
+  border: none;
+  outline: none;
 }
 
-.prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea:focus-within {
-  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);
+.prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea:after {
+  display: none;
 }
 
 .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea::-webkit-scrollbar {
@@ -185,20 +214,35 @@
   border-radius: 3px;
 }
 
-.prompt-input-wrapper .main-side-console-input.loading .main-side-console-input-textarea {
+.prompt-input-wrapper .main-side-console-input.loading {
   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);
-  animation: 5s linear infinite hue-shift;
 }
 
-.prompt-input-wrapper .main-side-console-input .ant-form-item-control-input-content {
-  z-index: 999;
-  border: 3px solid rgba(0, 0, 0, 0);
-  border-radius: 14px;
-}
-
-.prompt-input-wrapper .main-side-console-input:focus-within .ant-form-item-control-input-content {
-  border-color: rgba(43, 131, 255, .16);
+.prompt-input-wrapper .main-side-console-input.loading:before {
+  content: "";
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+  z-index: -1;
+  background: linear-gradient(135deg, #4285f4 0%, #06f 25%, #7b02c5 50%, #ea4335 75%, #ff7043 100%);
+  border-radius: 12px;
+  padding: 1px;
+  animation: 5s linear infinite hue-shift;
+  position: absolute;
+  top: -1px;
+  bottom: -1px;
+  left: -1px;
+  right: -1px;
+  -webkit-mask-image: linear-gradient(#fff 0, #fff 0), linear-gradient(#fff 0, #fff 0);
+  -webkit-mask-position: 0 0, 0 0;
+  -webkit-mask-size: auto, auto;
+  -webkit-mask-repeat: repeat, repeat;
+  -webkit-mask-clip: content-box, border-box;
+  -webkit-mask-origin: content-box, border-box;
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  -webkit-mask-source-type: auto, auto;
+  mask-mode: match-source, match-source;
 }
 
 .prompt-input-wrapper .main-side-console-input.disabled .form-controller-wrapper {
@@ -206,7 +250,7 @@
 }
 
 .prompt-input-wrapper .ant-form-item-with-help + .form-controller-wrapper {
-  bottom: 22px;
+  bottom: 14px;
 }
 
 .prompt-input-wrapper .ant-input {
@@ -215,21 +259,50 @@
 
 .prompt-input-wrapper .form-controller-wrapper {
   box-sizing: border-box;
-  background-color: #fff;
+  z-index: 1000;
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0);
   flex-direction: row;
   justify-content: flex-end;
   align-items: flex-end;
   gap: 8px;
   width: calc(100% - 32px);
+  height: 56px;
   padding: 12px 0;
   line-height: 32px;
   transition: background-color .2s;
   display: flex;
   position: absolute;
-  bottom: 1px;
+  bottom: 0;
   left: 16px;
 }
 
+.prompt-input-wrapper .form-controller-wrapper > * {
+  pointer-events: auto;
+}
+
+.prompt-input-wrapper .form-controller-wrapper.with-strategy {
+  justify-content: space-between;
+}
+
+.prompt-input-wrapper .planning-strategy-selector {
+  color: #2b83ff;
+  cursor: pointer;
+  align-items: center;
+  font-size: 13px;
+  transition: opacity .2s;
+  display: inline-flex;
+}
+
+.prompt-input-wrapper .planning-strategy-selector:hover {
+  opacity: .8;
+}
+
+.prompt-input-wrapper .ant-dropdown-menu-item-selected {
+  color: #2b83ff !important;
+  background-color: #e6f4ff !important;
+}
+
 .prompt-input-wrapper .settings-wrapper {
   color: #777;
   flex-flow: wrap;
@@ -322,11 +395,6 @@
   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;
 }
@@ -389,3 +457,185 @@
   color: #2b83ff;
 }
 
+.more-apis-dropdown .ant-dropdown-menu {
+  scrollbar-width: thin;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.more-apis-dropdown .ant-dropdown-menu::-webkit-scrollbar {
+  width: 6px;
+}
+
+.more-apis-dropdown .ant-dropdown-menu::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.more-apis-dropdown .ant-dropdown-menu::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.more-apis-dropdown .ant-dropdown-menu::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper {
+  color: #f8fafd !important;
+  background-color: rgba(255, 255, 255, .08) !important;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
+  color: #fff !important;
+  background-color: #2b83ff !important;
+  border-color: #2b83ff !important;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button {
+  color: #f8fafd !important;
+  background-color: rgba(255, 255, 255, .08) !important;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button:hover {
+  background-color: rgba(255, 255, 255, .12) !important;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button.selected-from-dropdown {
+  color: #fff !important;
+  background-color: #2b83ff !important;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
+  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(31, 31, 31, .5) 20%, rgba(31, 31, 31, .8) 40%, rgba(31, 31, 31, .95) 60%, #1f1f1f 70%) !important;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .main-side-console-input {
+  background: #1f1f1f !important;
+  border-color: rgba(255, 255, 255, .12) !important;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .main-side-console-input:focus-within {
+  background: linear-gradient(#1f1f1f, #1f1f1f) padding-box padding-box, linear-gradient(135deg, #4285f4 0%, #06f 25%, #7b02c5 50%, #ea4335 75%, #ff7043 100%) border-box !important;
+  border: 1px solid rgba(0, 0, 0, 0) !important;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea {
+  color: #f8fafd !important;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .main-side-console-input.loading {
+  background: linear-gradient(#1f1f1f, #1f1f1f) padding-box padding-box, linear-gradient(135deg, #4285f4 0%, #06f 25%, #7b02c5 50%, #ea4335 75%, #ff7043 100%) border-box !important;
+  border: 1px solid rgba(0, 0, 0, 0) !important;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .ant-form-item-control-input-content .ant-input, [data-theme="dark"] .prompt-input-wrapper .ant-form-item-control-input-content textarea.ant-input {
+  color: #f8fafd !important;
+  background: rgba(255, 255, 255, .04) !important;
+  border-color: rgba(255, 255, 255, .12) !important;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .ant-form-item-control-input-content .ant-btn {
+  color: #f8fafd !important;
+  background-color: rgba(255, 255, 255, .08) !important;
+  border-color: rgba(255, 255, 255, .12) !important;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .ant-form-item-control-input-content .ant-btn.ant-btn-primary {
+  color: #fff !important;
+  background-color: #2b83ff !important;
+  border-color: #2b83ff !important;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .form-controller-wrapper {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .planning-strategy-selector {
+  color: #2b83ff !important;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .planning-strategy-selector:hover {
+  opacity: .8;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .ant-dropdown-menu-item-selected {
+  color: #2b83ff !important;
+  background-color: rgba(43, 131, 255, .15) !important;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .structured-params-container {
+  background: linear-gradient(#1f1f1f, #1f1f1f) padding-box padding-box, linear-gradient(135deg, #4285f4 0%, #06f 25%, #7b02c5 50%, #ea4335 75%, #ff7043 100%) border-box !important;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-form-item-label > label {
+  color: #f8fafd !important;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-input, [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-input-number, [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-select, [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-radio-group .ant-radio-button-wrapper {
+  color: #f8fafd !important;
+  background-color: rgba(255, 255, 255, .04) !important;
+  border-color: rgba(255, 255, 255, .12) !important;
+}
+
+[data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
+  color: #fff !important;
+  background-color: #2b83ff !important;
+  border-color: #2b83ff !important;
+}
+
+[data-theme="dark"] .prompt-input .tip-button {
+  background-color: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .prompt-input .tip-button.active {
+  color: #fff;
+  background-color: #2b83ff;
+}
+
+[data-theme="dark"] .prompt-input .prompt-textarea-wrapper {
+  background-color: rgba(255, 255, 255, .04);
+}
+
+[data-theme="dark"] .prompt-input .prompt-textarea-wrapper:hover, [data-theme="dark"] .prompt-input .prompt-textarea-wrapper.focused {
+  background-color: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .prompt-input .btn-wrapper .btn-item {
+  color: #fff;
+  background-color: #2b83ff;
+}
+
+[data-theme="dark"] .prompt-input .btn-wrapper .btn-item:hover {
+  background-color: #2b83ff;
+}
+
+[data-theme="dark"] .prompt-input .dropdown-content {
+  background-color: #1f1f1f;
+  border-color: rgba(255, 255, 255, .12);
+}
+
+[data-theme="dark"] .prompt-input .param-label {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .prompt-input .error-message {
+  color: #ff4d4f;
+}
+
+[data-theme="dark"] .prompt-input .send-button-text {
+  color: #2b83ff;
+}
+
+[data-theme="dark"] .more-apis-dropdown .ant-dropdown-menu::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .more-apis-dropdown .ant-dropdown-menu::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, .2);
+}
+
+[data-theme="dark"] .more-apis-dropdown .ant-dropdown-menu::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, .3);
+}
+

package/dist/es/component/prompt-input/index.mjs

@@ -1,18 +1,41 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { BorderOutlined, DownOutlined, SendOutlined } from "@ant-design/icons";
 import "./index.css";
-import { Button, Dropdown, Form, Input, Radio, Tooltip } from "antd";
+import { Button, Dropdown, Form, Input, Radio, Space, Tooltip } from "antd";
 import react, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useHistoryStore } from "../../store/history.mjs";
+import { useEnvConfig } from "../../store/store.mjs";
 import { extractDefaultValue, isLocateField, isZodObjectSchema, unwrapZodType } from "../../types.mjs";
 import { apiMetadata, defaultMainButtons } from "../../utils/constants.mjs";
 import { actionNameForType, getPlaceholderForType, isRunButtonEnabled as playground_utils_mjs_isRunButtonEnabled } from "../../utils/playground-utils.mjs";
 import { ConfigSelector } from "../config-selector/index.mjs";
 import { BooleanField, EnumField, LocateField, NumberField, TextField } from "../form-field/index.mjs";
 import { HistorySelector } from "../history-selector/index.mjs";
+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 } = 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] = useState(false);
     const [promptValue, setPromptValue] = useState('');
     const placeholder = getPlaceholderForType(selectedType);
@@ -24,6 +47,8 @@ const PromptInput = (param)=>{
     const lastSelectedType = useHistoryStore((state)=>state.lastSelectedType);
     const addHistory = useHistoryStore((state)=>state.addHistory);
     const setLastSelectedType = useHistoryStore((state)=>state.setLastSelectedType);
+    const planningStrategy = useEnvConfig((state)=>state.planningStrategy);
+    const setPlanningStrategy = useEnvConfig((state)=>state.setPlanningStrategy);
     const historyForSelectedType = useMemo(()=>history[selectedType] || [], [
         history,
         selectedType
@@ -104,12 +129,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 = useMemo(()=>{
         const metadataMethods = Object.keys(apiMetadata);
@@ -436,21 +463,11 @@ const PromptInput = (param)=>{
                         marginBottom,
                         placeholder
                     };
-                    if (isLocateFieldFlag) fields.push(/*#__PURE__*/ jsx(LocateField, {
-                        ...fieldProps
-                    }, key));
-                    else if ((null == (_actualField__def = actualField._def) ? void 0 : _actualField__def.typeName) === 'ZodEnum') fields.push(/*#__PURE__*/ jsx(EnumField, {
-                        ...fieldProps
-                    }, key));
-                    else if ((null == (_actualField__def1 = actualField._def) ? void 0 : _actualField__def1.typeName) === 'ZodNumber') fields.push(/*#__PURE__*/ jsx(NumberField, {
-                        ...fieldProps
-                    }, key));
-                    else if ((null == (_actualField__def2 = actualField._def) ? void 0 : _actualField__def2.typeName) === 'ZodBoolean') fields.push(/*#__PURE__*/ jsx(BooleanField, {
-                        ...fieldProps
-                    }, key));
-                    else fields.push(/*#__PURE__*/ jsx(TextField, {
-                        ...fieldProps
-                    }, key));
+                    if (isLocateFieldFlag) fields.push(/*#__PURE__*/ jsx(LocateField, _object_spread({}, fieldProps), key));
+                    else if ((null == (_actualField__def = actualField._def) ? void 0 : _actualField__def.typeName) === 'ZodEnum') fields.push(/*#__PURE__*/ jsx(EnumField, _object_spread({}, fieldProps), key));
+                    else if ((null == (_actualField__def1 = actualField._def) ? void 0 : _actualField__def1.typeName) === 'ZodNumber') fields.push(/*#__PURE__*/ jsx(NumberField, _object_spread({}, fieldProps), key));
+                    else if ((null == (_actualField__def2 = actualField._def) ? void 0 : _actualField__def2.typeName) === 'ZodBoolean') fields.push(/*#__PURE__*/ jsx(BooleanField, _object_spread({}, fieldProps), key));
+                    else fields.push(/*#__PURE__*/ jsx(TextField, _object_spread({}, fieldProps), key));
                 });
                 if ('aiScroll' === selectedType) {
                     const directionField = fields.find((field)=>/*#__PURE__*/ react.isValidElement(field) && 'direction' === field.props.name);
@@ -506,7 +523,7 @@ const PromptInput = (param)=>{
                 loading: loading,
                 children: text
             });
-        if (dryMode) return 'aiAction' === selectedType ? /*#__PURE__*/ jsx(Tooltip, {
+        if (dryMode) return 'aiAct' === selectedType ? /*#__PURE__*/ jsx(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');
@@ -646,6 +663,7 @@ const PromptInput = (param)=>{
                                     'click'
                                 ],
                                 disabled: !runButtonEnabled,
+                                overlayClassName: "more-apis-dropdown",
                                 children: /*#__PURE__*/ jsxs(Button, {
                                     className: `more-apis-button ${!defaultMainButtons.includes(selectedType) ? 'selected-from-dropdown' : ''}`,
                                     children: [
@@ -672,7 +690,8 @@ const PromptInput = (param)=>{
                                     enableTracking: 'In-Browser-Extension' === serviceMode,
                                     showDeepThinkOption: showDeepThinkOption,
                                     showDataExtractionOptions: showDataExtractionOptions,
-                                    hideDomAndScreenshotOptions: hideDomAndScreenshotOptions
+                                    hideDomAndScreenshotOptions: hideDomAndScreenshotOptions,
+                                    deviceType: deviceType
                                 })
                             }),
                             /*#__PURE__*/ jsx(HistorySelector, {
@@ -718,9 +737,48 @@ const PromptInput = (param)=>{
                             actionNameForType(selectedType)
                         ]
                     }),
-                    /*#__PURE__*/ jsx("div", {
-                        className: "form-controller-wrapper",
-                        children: renderActionButton()
+                    /*#__PURE__*/ jsxs("div", {
+                        className: `form-controller-wrapper ${'aiAct' === selectedType ? 'with-strategy' : ''}`,
+                        children: [
+                            'aiAct' === selectedType && /*#__PURE__*/ jsx(Dropdown, {
+                                menu: {
+                                    items: [
+                                        {
+                                            key: 'standard',
+                                            label: 'Standard',
+                                            onClick: ()=>setPlanningStrategy('standard')
+                                        },
+                                        {
+                                            key: 'fast',
+                                            label: 'Fast',
+                                            onClick: ()=>setPlanningStrategy('fast')
+                                        }
+                                    ],
+                                    selectedKeys: [
+                                        planningStrategy
+                                    ]
+                                },
+                                trigger: [
+                                    'click'
+                                ],
+                                children: /*#__PURE__*/ jsx("a", {
+                                    onClick: (e)=>e.preventDefault(),
+                                    className: "planning-strategy-selector",
+                                    children: /*#__PURE__*/ jsxs(Space, {
+                                        size: 4,
+                                        children: [
+                                            'fast' === planningStrategy ? 'Fast' : 'Standard',
+                                            /*#__PURE__*/ jsx(DownOutlined, {
+                                                style: {
+                                                    fontSize: 10
+                                                }
+                                            })
+                                        ]
+                                    })
+                                })
+                            }),
+                            renderActionButton()
+                        ]
                     })
                 ]
             })