@midscene/visualizer 0.15.0 → 0.15.1

package/dist/es/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/es/component/playground/PromptInput.js

@@ -7,7 +7,7 @@ var buffer = {
 import { jsx, jsxs } from "react/jsx-runtime";
 import { BorderOutlined, SendOutlined } from "@ant-design/icons";
 import { Button, Form, Input, Radio, Space, Tooltip } from "antd";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useHistoryStore } from "../store/history";
 import { ConfigSelector } from "./ConfigSelector";
 import { HistorySelector } from "./HistorySelector";
@@ -26,6 +26,7 @@ const PromptInput = ({
 }) => {
   const [hoveringSettings, setHoveringSettings] = useState(false);
   const placeholder = getPlaceholderForType(selectedType);
+  const textAreaRef = useRef(null);
   const history = useHistoryStore((state) => state.history);
   const addHistory = useHistoryStore((state) => state.addHistory);
   const lastHistory = history[0];
@@ -72,6 +73,14 @@ const PromptInput = ({
     },
     [handleRunWithHistory]
   );
+  const handleChange = useCallback(() => {
+    setTimeout(() => {
+      if (textAreaRef.current) {
+        const textarea = textAreaRef.current.resizableTextArea.textArea;
+        textarea.scrollTop = textarea.scrollHeight;
+      }
+    }, 0);
+  }, []);
   const handleMouseEnter = useCallback(() => {
     setHoveringSettings(true);
   }, []);
@@ -133,37 +142,45 @@ const PromptInput = ({
       ) }),
       /* @__PURE__ */ jsx(HistorySelector, { onSelect: handleSelectHistory })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "main-side-console-input", children: [
-      /* @__PURE__ */ jsx(Form.Item, { name: "prompt", style: { margin: 0 }, children: /* @__PURE__ */ jsx(
-        TextArea,
-        {
-          className: "main-side-console-input-textarea",
-          disabled: !runButtonEnabled,
-          rows: 4,
-          placeholder,
-          autoFocus: true,
-          onKeyDown: handleKeyDown
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("div", { className: "form-controller-wrapper", children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: hoveringSettings ? "settings-wrapper settings-wrapper-hover" : "settings-wrapper",
-            onMouseEnter: handleMouseEnter,
-            onMouseLeave: handleMouseLeave,
-            children: /* @__PURE__ */ jsx(
-              ConfigSelector,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `main-side-console-input ${!runButtonEnabled ? "disabled" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx(Form.Item, { name: "prompt", style: { margin: 0 }, children: /* @__PURE__ */ jsx(
+            TextArea,
+            {
+              className: "main-side-console-input-textarea",
+              disabled: !runButtonEnabled,
+              rows: 2,
+              placeholder,
+              autoFocus: true,
+              onKeyDown: handleKeyDown,
+              onChange: handleChange,
+              ref: textAreaRef
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "form-controller-wrapper", children: [
+            /* @__PURE__ */ 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__ */ jsx(
+                  ConfigSelector,
+                  {
+                    enableTracking: serviceMode === "In-Browser-Extension",
+                    showDeepThinkOption: selectedType === "aiTap"
+                  }
+                )
               }
-            )
-          }
-        ),
-        renderActionButton()
-      ] })
-    ] })
+            ),
+            renderActionButton()
+          ] })
+        ]
+      }
+    )
   ] });
 };
 export {

package/dist/es/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/dist/index.css

@@ -156,26 +156,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;
@@ -281,7 +299,6 @@ body {
   flex-direction: row;
   align-items: center;
   overflow: hidden;
-  max-width: calc(100% - 50px);
 }
 .player-container .player-tools .status-icon {
   transition: 0.2s;