@midscene/visualizer 0.15.0 → 0.15.1

package/dist/lib/component/player.css

@@ -90,7 +90,6 @@
   flex-direction: row;
   align-items: center;
   overflow: hidden;
-  max-width: calc(100% - 50px);
 }
 .player-container .player-tools .status-icon {
   transition: 0.2s;

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

@@ -59,6 +59,7 @@ const PromptInput = ({
 }) => {
   const [hoveringSettings, setHoveringSettings] = (0, import_react.useState)(false);
   const placeholder = (0, import_playground_utils.getPlaceholderForType)(selectedType);
+  const textAreaRef = (0, import_react.useRef)(null);
   const history = (0, import_history.useHistoryStore)((state) => state.history);
   const addHistory = (0, import_history.useHistoryStore)((state) => state.addHistory);
   const lastHistory = history[0];
@@ -105,6 +106,14 @@ const PromptInput = ({
     },
     [handleRunWithHistory]
   );
+  const handleChange = (0, import_react.useCallback)(() => {
+    setTimeout(() => {
+      if (textAreaRef.current) {
+        const textarea = textAreaRef.current.resizableTextArea.textArea;
+        textarea.scrollTop = textarea.scrollHeight;
+      }
+    }, 0);
+  }, []);
   const handleMouseEnter = (0, import_react.useCallback)(() => {
     setHoveringSettings(true);
   }, []);
@@ -166,37 +175,45 @@ const PromptInput = ({
       ) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HistorySelector.HistorySelector, { onSelect: handleSelectHistory })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "main-side-console-input", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Form.Item, { name: "prompt", style: { margin: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        TextArea,
-        {
-          className: "main-side-console-input-textarea",
-          disabled: !runButtonEnabled,
-          rows: 4,
-          placeholder,
-          autoFocus: true,
-          onKeyDown: handleKeyDown
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-controller-wrapper", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            className: hoveringSettings ? "settings-wrapper settings-wrapper-hover" : "settings-wrapper",
-            onMouseEnter: handleMouseEnter,
-            onMouseLeave: handleMouseLeave,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_ConfigSelector.ConfigSelector,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: `main-side-console-input ${!runButtonEnabled ? "disabled" : ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Form.Item, { name: "prompt", style: { margin: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            TextArea,
+            {
+              className: "main-side-console-input-textarea",
+              disabled: !runButtonEnabled,
+              rows: 2,
+              placeholder,
+              autoFocus: true,
+              onKeyDown: handleKeyDown,
+              onChange: handleChange,
+              ref: textAreaRef
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-controller-wrapper", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
               {
-                enableTracking: serviceMode === "In-Browser-Extension",
-                showDeepThinkOption: selectedType === "aiTap"
+                className: hoveringSettings ? "settings-wrapper settings-wrapper-hover" : "settings-wrapper",
+                onMouseEnter: handleMouseEnter,
+                onMouseLeave: handleMouseLeave,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_ConfigSelector.ConfigSelector,
+                  {
+                    enableTracking: serviceMode === "In-Browser-Extension",
+                    showDeepThinkOption: selectedType === "aiTap"
+                  }
+                )
               }
-            )
-          }
-        ),
-        renderActionButton()
-      ] })
-    ] })
+            ),
+            renderActionButton()
+          ] })
+        ]
+      }
+    )
   ] });
 };
 // Annotate the CommonJS export names for ESM import in node:

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

@@ -155,26 +155,44 @@ body {
   margin-top: 10px;
 }
 .input-wrapper .main-side-console-input .main-side-console-input-textarea {
-  height: 90px;
   border-radius: 12px;
   border: 1px solid rgba(0, 0, 0, 0.12);
-  padding: 12px 16px;
+  padding: 12px 16px 52px 16px;
+  transition: background-color 0.2s ease;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  line-height: 21px;
+  max-height: 150px;
+  scrollbar-width: thin;
+}
+.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 {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+.input-wrapper .main-side-console-input.disabled .form-controller-wrapper {
+  background-color: transparent;
 }
 .input-wrapper .ant-input {
   padding-bottom: 40px;
 }
 .input-wrapper .form-controller-wrapper {
   position: absolute;
-  bottom: 8px;
-  padding: 0 12px;
-  left: 0px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  width: 100%;
+  width: calc(100% - 32px);
   box-sizing: border-box;
   align-items: flex-end;
   gap: 8px;
+  background-color: #FFF;
+  left: 16px;
+  bottom: 0.5px;
+  padding: 8px 0;
+  line-height: 32px;
+  transition: background-color 0.2s ease;
 }
 .input-wrapper .settings-wrapper {
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/visualizer",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
   "types": "./dist/types/index.d.ts",
@@ -71,9 +71,9 @@
     "@ant-design/icons": "^5.3.1",
     "antd": "^5.21.6",
     "dayjs": "1.11.11",
-    "@midscene/core": "0.15.0",
-    "@midscene/shared": "0.15.0",
-    "@midscene/web": "0.15.0"
+    "@midscene/core": "0.15.1",
+    "@midscene/shared": "0.15.1",
+    "@midscene/web": "0.15.1"
   },
   "scripts": {
     "dev": "npm run build && npx npm-watch",