@midscene/visualizer 0.20.2-beta-20250704091851.0 → 0.21.0

package/dist/es/component/playground/ServiceModeControl.js

@@ -72,6 +72,7 @@ const ServiceModeControl = ({
         style: {
           display: "flex",
           alignItems: "center",
+          justifyContent: "space-between",
           gap: "10px"
         },
         children: [

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

@@ -12,140 +12,20 @@ body {
     "Segoe UI Emoji";
   font-size: 14px;
 }
-.playground-container,
-.image-describer {
+.prompt-input-wrapper {
   width: 100%;
-  height: 100%;
-}
-.playground-container.vertical-mode,
-.image-describer.vertical-mode {
-  height: inherit;
-}
-.playground-container.vertical-mode .form-part h3,
-.image-describer.vertical-mode .form-part h3 {
-  font-size: 14px;
-  line-height: 1.6;
-}
-.playground-container .playground-header,
-.image-describer .playground-header {
-  padding: 10px 10px 30px;
-}
-.playground-container .playground-left-panel,
-.image-describer .playground-left-panel {
-  width: 100%;
-  background-color: #FFF;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  overflow-y: auto !important;
-}
-.playground-container .playground-left-panel .ant-form,
-.image-describer .playground-left-panel .ant-form {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.playground-container .form-part h3,
-.image-describer .form-part h3 {
-  margin-top: 0;
-  margin-bottom: 12px;
-  font-size: 18px;
 }
-.playground-container .form-part .form-sub-title,
-.image-describer .form-part .form-sub-title {
-  margin-bottom: 12px;
-  font-size: 14px;
-}
-.playground-container .form-part .switch-btn-wrapper .ant-btn,
-.image-describer .form-part .switch-btn-wrapper .ant-btn {
-  padding: 0;
-}
-.playground-container .loading-container,
-.image-describer .loading-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 20px 20px;
-}
-.playground-container .loading-container .loading-progress-text,
-.image-describer .loading-container .loading-progress-text {
-  text-align: center;
-  width: 100%;
-  color: #777;
-  margin-top: 16px;
-}
-.playground-container .loading-container .loading-progress-text-tab-info,
-.image-describer .loading-container .loading-progress-text-tab-info {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.playground-container .loading-container .loading-progress-text-progress,
-.image-describer .loading-container .loading-progress-text-progress {
-  height: 60px;
-}
-.playground-container .result-wrapper,
-.image-describer .result-wrapper {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  box-sizing: border-box;
-  border-radius: 4px;
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: auto;
-}
-.playground-container .result-wrapper.result-wrapper-compact,
-.image-describer .result-wrapper.result-wrapper-compact {
-  padding: 0;
-}
-.playground-container .result-wrapper.vertical-mode-result,
-.image-describer .result-wrapper.vertical-mode-result {
-  height: inherit;
-  min-height: 300px;
-  display: flex;
-  flex-direction: column;
-  flex: 1 1;
-}
-.playground-container .result-wrapper pre,
-.image-describer .result-wrapper pre {
-  display: block;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-}
-.playground-container .result-wrapper .result-empty-tip,
-.image-describer .result-wrapper .result-empty-tip {
-  flex: 1 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 200px;
-  width: 100%;
-  height: 100%;
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  border-radius: 8px;
-  color: rgba(0, 0, 0, 0.45);
-  font-size: 14px;
-  box-sizing: border-box;
-}
-.input-wrapper {
-  box-sizing: border-box;
-}
-.input-wrapper .mode-radio-group-wrapper {
+.prompt-input-wrapper .mode-radio-group-wrapper {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.input-wrapper .mode-radio-group {
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
   display: flex;
   align-items: center;
   height: 100%;
 }
-.input-wrapper .mode-radio-group .ant-radio-button-wrapper {
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper {
   height: 24px;
   padding: 0 8px;
   line-height: 24px;
@@ -156,55 +36,85 @@ body {
   background-color: #F7F7F7;
   font-size: 12px;
 }
-.input-wrapper .mode-radio-group .ant-radio-button-wrapper:before {
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper:before {
   display: none;
 }
-.input-wrapper .mode-radio-group .ant-radio-button-wrapper:focus-within {
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper:focus-within {
   outline: none;
 }
-.input-wrapper .mode-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
   background-color: #2B83FF;
   border-color: #2B83FF;
   color: white;
 }
-.input-wrapper .mode-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked:hover {
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked:hover {
   color: #fff;
 }
-.input-wrapper .mode-radio-group .ant-radio-button-wrapper:hover {
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper:hover {
   color: #2B83FF;
 }
-.input-wrapper .main-side-console-input {
+.prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
+  display: flex;
+  align-items: center;
+}
+.prompt-input-wrapper .main-side-console-input {
   position: relative;
   margin-top: 10px;
 }
-.input-wrapper .main-side-console-input .main-side-console-input-textarea {
+.prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea {
   border-radius: 12px;
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  padding: 12px 16px 52px 16px;
+  border: 1px solid #F2F4F7;
+  background: white;
+  padding: 12px 16px;
   transition: background-color 0.2s ease;
   overflow-y: auto;
   white-space: pre-wrap;
   line-height: 21px;
   scrollbar-width: thin;
 }
-.input-wrapper .main-side-console-input .main-side-console-input-textarea::-webkit-scrollbar {
+@keyframes hue-shift {
+  0% {
+    filter: hue-rotate(0deg);
+  }
+  100% {
+    filter: hue-rotate(360deg);
+  }
+}
+.prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea:focus-within {
+  border: 1px solid transparent;
+  background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #4285f4 0%, #0066FF 25%, #7B02C5 50%, #ea4335 75%, #ff7043 100%) border-box;
+}
+.prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea::-webkit-scrollbar {
   width: 6px;
 }
-.input-wrapper .main-side-console-input .main-side-console-input-textarea::-webkit-scrollbar-thumb {
+.prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea::-webkit-scrollbar-thumb {
   background-color: rgba(0, 0, 0, 0.2);
   border-radius: 3px;
 }
-.input-wrapper .main-side-console-input.disabled .form-controller-wrapper {
+.prompt-input-wrapper .main-side-console-input.loading .main-side-console-input-textarea {
+  border: 1px solid transparent;
+  background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #4285f4 0%, #0066FF 25%, #7B02C5 50%, #ea4335 75%, #ff7043 100%) border-box;
+  animation: hue-shift 5s linear infinite;
+}
+.prompt-input-wrapper .main-side-console-input .ant-form-item-control-input-content {
+  border: 3px solid transparent;
+  border-radius: 14px;
+  z-index: 999;
+}
+.prompt-input-wrapper .main-side-console-input:focus-within .ant-form-item-control-input-content {
+  border-color: rgba(43, 131, 255, 0.16);
+}
+.prompt-input-wrapper .main-side-console-input.disabled .form-controller-wrapper {
   background-color: transparent;
 }
-.input-wrapper .ant-input {
+.prompt-input-wrapper .ant-input {
   padding-bottom: 40px;
 }
-.input-wrapper .form-controller-wrapper {
+.prompt-input-wrapper .form-controller-wrapper {
   position: absolute;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: flex-end;
   width: calc(100% - 32px);
   box-sizing: border-box;
   align-items: flex-end;
@@ -212,17 +122,164 @@ body {
   background-color: #FFF;
   left: 16px;
   bottom: 0.5px;
-  padding: 8px 0;
+  padding: 12px 0;
   line-height: 32px;
   transition: background-color 0.2s ease;
 }
-.input-wrapper .settings-wrapper {
+.prompt-input-wrapper .settings-wrapper {
   display: flex;
   flex-direction: row;
   gap: 2px;
   color: #777;
   flex-wrap: wrap;
 }
-.input-wrapper .settings-wrapper.settings-wrapper-hover {
+.prompt-input-wrapper .settings-wrapper.settings-wrapper-hover {
   color: #3b3b3b;
 }
+.selector-trigger {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.selector-trigger .action-icon {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.85);
+  transition: all 0.2s;
+}
+.selector-trigger .action-icon:hover {
+  color: #2B83FF;
+}
+.history-modal-container {
+  height: 70vh;
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px 12px 0 0;
+  overflow: hidden;
+}
+.history-modal-container .history-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 48px;
+  line-height: 48px;
+  padding: 0 25px;
+}
+.history-modal-container .history-modal-header .close-button {
+  margin-right: -4px;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.history-modal-container .history-modal-header .close-button .anticon {
+  font-size: 18px;
+  color: #999999;
+}
+.history-modal-container .history-modal-header .close-button:hover .anticon {
+  color: #666666;
+}
+.history-modal-container .history-search-section {
+  padding: 16px 20px;
+  background: #ffffff;
+}
+.history-modal-container .history-search-section .search-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: rgba(0, 0, 0, 0.25);
+}
+.history-modal-container .history-search-section .search-input-wrapper .search-input {
+  flex: 1 1;
+  height: 36px;
+  border-radius: 16px;
+  background: #f1f2f3;
+  border: none;
+}
+.history-modal-container .history-search-section .search-input-wrapper .search-input .ant-input {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+.history-modal-container .history-search-section .search-input-wrapper .search-input:hover,
+.history-modal-container .history-search-section .search-input-wrapper .search-input:focus-within {
+  border-color: #d9d9d9;
+  background: #ffffff;
+}
+.history-modal-container .history-search-section .search-input-wrapper .clear-button {
+  color: #1890ff;
+  padding: 0;
+  height: auto;
+}
+.history-modal-container .history-search-section .search-input-wrapper .clear-button:hover {
+  color: #40a9ff;
+}
+.history-modal-container .history-content {
+  flex: 1 1;
+  overflow-y: auto;
+  padding: 0 25px 25px 25px;
+}
+.history-modal-container .history-content .history-group {
+  margin-bottom: 10px;
+}
+.history-modal-container .history-content .history-group .history-group-title {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+  height: 40px;
+  line-height: 40px;
+  font-weight: 400;
+}
+.history-modal-container .history-content .history-group .history-item {
+  cursor: pointer;
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.85);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.history-modal-container .history-content .history-group .history-item:hover {
+  background: #f2f4f7;
+  padding: 0 8px;
+  margin: 0 -8px;
+}
+.history-modal-container .history-content .no-results {
+  text-align: center;
+  padding: 40px 20px;
+  color: #999999;
+}
+.ant-modal-wrap .ant-modal-content {
+  animation: slideUpFromBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
+}
+@keyframes slideUpFromBottom {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.result-wrapper {
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  margin: 4px 0;
+}
+.result-wrapper .loading-container {
+  text-align: center;
+}
+.result-wrapper pre {
+  margin: 4px 0;
+  margin: 0;
+  white-space: pre-wrap;
+  text-wrap: unset;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  background: #F2F4F7;
+  border-radius: 8px;
+  padding: 14px;
+  overflow: scroll;
+}

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

@@ -6,6 +6,7 @@ var buffer = {
 };
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Alert } from "antd";
+import ShinyText from "../shiny-text";
 import "./index.css";
 const errorMessageServerNotReady = /* @__PURE__ */ jsxs("span", { children: [
   "Don't worry, just one more step to launch the playground server.",
@@ -26,7 +27,7 @@ const serverLaunchTip = (notReadyMessage = errorMessageServerNotReady) => /* @__
     type: "warning"
   }
 ) });
-const emptyResultTip = /* @__PURE__ */ jsx("div", { className: "result-empty-tip", style: {}, children: /* @__PURE__ */ jsx("span", { children: "The result will be shown here" }) });
+const emptyResultTip = /* @__PURE__ */ jsx("div", { className: "result-empty-tip", style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(ShinyText, { disabled: true, text: "The result will be shown here" }) });
 const trackingTip = "limit popup to current tab";
 const deepThinkTip = "deep think";
 export {

package/dist/es/component/store/store.js

@@ -69,6 +69,11 @@ const useEnvConfig = create((set, get) => {
       set({ config: config2, configString: configString2 });
       localStorage.setItem(CONFIG_KEY, configString2);
     },
+    syncFromStorage: () => {
+      const latestConfigString = getConfigStringFromLocalStorage();
+      const latestConfig = parseConfig(latestConfigString);
+      set({ config: latestConfig, configString: latestConfigString });
+    },
     forceSameTabNavigation: savedForceSameTabNavigation,
     setForceSameTabNavigation: (forceSameTabNavigation) => {
       set({ forceSameTabNavigation });