@midscene/visualizer 0.30.9 → 0.30.11-beta-20251218071621.0

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

@@ -32,8 +32,20 @@
   overflow: scroll;
 }
 
+[data-theme="dark"] .result-wrapper .loading-container .loading-progress-text {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .result-wrapper pre {
+  color: #f8fafd;
+  background: rgba(255, 255, 255, .08);
+  border: 1px solid rgba(255, 255, 255, .12);
+}
+
 .prompt-input-wrapper {
+  box-sizing: border-box;
   width: 100%;
+  padding: 0 4px;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper {
@@ -179,35 +191,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 {
@@ -219,20 +258,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 {
@@ -240,7 +294,7 @@
 }
 
 .prompt-input-wrapper .ant-form-item-with-help + .form-controller-wrapper {
-  bottom: 22px;
+  bottom: 14px;
 }
 
 .prompt-input-wrapper .ant-input {
@@ -249,21 +303,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;
@@ -356,11 +439,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;
 }
@@ -423,6 +501,188 @@
   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);
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;

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

@@ -1,24 +1,24 @@
 "use strict";
 var __webpack_modules__ = {
-    "../../hooks/useServerValid": function(module) {
+    "../../hooks/useServerValid" (module) {
         module.exports = require("../../hooks/useServerValid.js");
     },
-    "../../store/store": function(module) {
+    "../../store/store" (module) {
         module.exports = require("../../store/store.js");
     },
-    "../../types": function(module) {
+    "../../types" (module) {
         module.exports = require("../../types.js");
     },
-    "../context-preview": function(module) {
+    "../context-preview" (module) {
         module.exports = require("../context-preview/index.js");
     },
-    "../playground-result": function(module) {
+    "../playground-result" (module) {
         module.exports = require("../playground-result/index.js");
     },
-    "../prompt-input": function(module) {
+    "../prompt-input" (module) {
         module.exports = require("../prompt-input/index.js");
     },
-    "../service-mode-control": function(module) {
+    "../service-mode-control" (module) {
         module.exports = require("../service-mode-control/index.js");
     }
 };
@@ -66,33 +66,31 @@ var __webpack_exports__ = {};
 (()=>{
     __webpack_require__.r(__webpack_exports__);
     __webpack_require__.d(__webpack_exports__, {
-        ContextPreview: ()=>_context_preview__WEBPACK_IMPORTED_MODULE_0__.ContextPreview,
-        PlaygroundResultView: ()=>_playground_result__WEBPACK_IMPORTED_MODULE_1__.PlaygroundResultView,
-        PromptInput: ()=>_prompt_input__WEBPACK_IMPORTED_MODULE_2__.PromptInput,
-        ServiceModeControl: ()=>_service_mode_control__WEBPACK_IMPORTED_MODULE_4__.ServiceModeControl,
-        useEnvConfig: ()=>_store_store__WEBPACK_IMPORTED_MODULE_6__.useEnvConfig,
-        useServerValid: ()=>_hooks_useServerValid__WEBPACK_IMPORTED_MODULE_3__.useServerValid
+        ContextPreview: ()=>_context_preview__rspack_import_0.ContextPreview,
+        PlaygroundResultView: ()=>_playground_result__rspack_import_1.PlaygroundResultView,
+        PromptInput: ()=>_prompt_input__rspack_import_2.PromptInput,
+        ServiceModeControl: ()=>_service_mode_control__rspack_import_4.ServiceModeControl,
+        useEnvConfig: ()=>_store_store__rspack_import_6.useEnvConfig,
+        useServerValid: ()=>_hooks_useServerValid__rspack_import_3.useServerValid
     });
-    var _context_preview__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../context-preview");
-    var _playground_result__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("../playground-result");
-    var _prompt_input__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("../prompt-input");
-    var _hooks_useServerValid__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("../../hooks/useServerValid");
-    var _service_mode_control__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("../service-mode-control");
-    var _types__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("../../types");
-    var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _types__WEBPACK_IMPORTED_MODULE_5__)if ([
-        "PromptInput",
-        "ContextPreview",
+    var _context_preview__rspack_import_0 = __webpack_require__("../context-preview");
+    var _playground_result__rspack_import_1 = __webpack_require__("../playground-result");
+    var _prompt_input__rspack_import_2 = __webpack_require__("../prompt-input");
+    var _hooks_useServerValid__rspack_import_3 = __webpack_require__("../../hooks/useServerValid");
+    var _service_mode_control__rspack_import_4 = __webpack_require__("../service-mode-control");
+    var _types__rspack_import_5 = __webpack_require__("../../types");
+    var __rspack_reexport = {};
+    for(const __rspack_import_key in _types__rspack_import_5)if ([
+        "useServerValid",
         "ServiceModeControl",
-        "default",
-        "PlaygroundResultView",
         "useEnvConfig",
-        "useServerValid"
-    ].indexOf(__WEBPACK_IMPORT_KEY__) < 0) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _types__WEBPACK_IMPORTED_MODULE_5__[key];
-    }).bind(0, __WEBPACK_IMPORT_KEY__);
-    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _store_store__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__("../../store/store");
+        "PlaygroundResultView",
+        "PromptInput",
+        "ContextPreview",
+        "default"
+    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_types__rspack_import_5[__rspack_import_key];
+    __webpack_require__.d(__webpack_exports__, __rspack_reexport);
+    var _store_store__rspack_import_6 = __webpack_require__("../../store/store");
 })();
 exports.ContextPreview = __webpack_exports__.ContextPreview;
 exports.PlaygroundResultView = __webpack_exports__.PlaygroundResultView;
@@ -100,14 +98,14 @@ exports.PromptInput = __webpack_exports__.PromptInput;
 exports.ServiceModeControl = __webpack_exports__.ServiceModeControl;
 exports.useEnvConfig = __webpack_exports__.useEnvConfig;
 exports.useServerValid = __webpack_exports__.useServerValid;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+for(var __rspack_i in __webpack_exports__)if (-1 === [
     "ContextPreview",
     "PlaygroundResultView",
     "PromptInput",
     "ServiceModeControl",
     "useEnvConfig",
     "useServerValid"
-].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/playground-result/index.css

@@ -32,3 +32,13 @@
   overflow: scroll;
 }
 
+[data-theme="dark"] .result-wrapper .loading-container .loading-progress-text {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .result-wrapper pre {
+  color: #f8fafd;
+  background: rgba(255, 255, 255, .08);
+  border: 1px solid rgba(255, 255, 255, .12);
+}
+