From 95e3fd6c38edcfccf7a3dcdd6137e7900f0f0c7c Mon Sep 17 00:00:00 2001
From: "mula.liu" <mula.liu@163.com>
Date: Thu, 2 Apr 2026 22:11:28 +0800
Subject: [PATCH] v0.1.4-p4

---
 .../components/DashboardChatPanel.css         | 15 +++++++-------
 .../components/DashboardChatPanel.tsx         |  1 +
 .../hooks/useDashboardChatComposer.ts         | 20 +++++++++++++++++++
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/frontend/src/modules/dashboard/components/DashboardChatPanel.css b/frontend/src/modules/dashboard/components/DashboardChatPanel.css
index fe9d025..ecdf719 100644
--- a/frontend/src/modules/dashboard/components/DashboardChatPanel.css
+++ b/frontend/src/modules/dashboard/components/DashboardChatPanel.css
@@ -48,9 +48,9 @@
 .ops-composer-shell {
   position: relative;
   display: grid;
-  grid-template-rows: minmax(96px, auto) auto;
+  grid-template-rows: minmax(0, auto) auto;
   gap: 0;
-  min-height: 108px;
+  min-height: 0;
   overflow: hidden;
   border: 1px solid color-mix(in oklab, var(--line) 70%, var(--text) 8%);
   border-radius: 10px;
@@ -337,13 +337,13 @@
 
 .ops-composer-shell .ops-composer-input,
 .ops-composer-shell .ops-composer-input.input {
-  min-height: 96px;
+  min-height: calc((1.45em * 3) + 20px);
   max-height: 220px;
-  overflow: auto;
+  overflow-y: hidden;
   resize: none;
   font-size: 14px;
   line-height: 1.45;
-  padding: 14px 42px 10px 14px;
+  padding: 6px 42px 6px 12px;
   border: 0 !important;
   border-bottom: 0 !important;
   border-radius: 10px 10px 0 0;
@@ -444,9 +444,10 @@
   align-items: center;
   justify-content: flex-end;
   gap: 6px;
-  min-height: 44px;
-  padding: 4px 10px 6px 10px;
+  min-height: 38px;
+  padding: 2px 10px 4px 10px;
   background: var(--panel);
+  border-top: 1px solid color-mix(in oklab, var(--line) 34%, transparent);
   border-radius: 0 0 10px 10px;
   width: auto;
 }
diff --git a/frontend/src/modules/dashboard/components/DashboardChatPanel.tsx b/frontend/src/modules/dashboard/components/DashboardChatPanel.tsx
index e49b577..72ae318 100644
--- a/frontend/src/modules/dashboard/components/DashboardChatPanel.tsx
+++ b/frontend/src/modules/dashboard/components/DashboardChatPanel.tsx
@@ -591,6 +591,7 @@ export function DashboardChatPanel({
             <textarea
               ref={composerTextareaRef}
               className="input ops-composer-input"
+              rows={3}
               value={command}
               onChange={(event) => onCommandChange(event.target.value)}
               onKeyDown={onComposerKeyDown}
diff --git a/frontend/src/modules/dashboard/hooks/useDashboardChatComposer.ts b/frontend/src/modules/dashboard/hooks/useDashboardChatComposer.ts
index 2d16344..9d4ddf3 100644
--- a/frontend/src/modules/dashboard/hooks/useDashboardChatComposer.ts
+++ b/frontend/src/modules/dashboard/hooks/useDashboardChatComposer.ts
@@ -7,6 +7,9 @@ import { normalizeAssistantMessageText, normalizeUserMessageText } from '../mess
 import type { QuotedReply, StagedSubmissionDraft } from '../types';
 import { loadComposerDraft, persistComposerDraft } from '../utils';
 
+const COMPOSER_MIN_ROWS = 3;
+const COMPOSER_MAX_HEIGHT_PX = 220;
+
 type PromptTone = 'info' | 'success' | 'warning' | 'error';
 
 interface NotifyOptions {
@@ -120,6 +123,23 @@ export function useDashboardChatComposer({
     setQuotedReply(null);
   }, [selectedBotId]);
 
+  useEffect(() => {
+    const textarea = composerTextareaRef.current;
+    if (!textarea || typeof window === 'undefined') return;
+    const computed = window.getComputedStyle(textarea);
+    const lineHeight = Number.parseFloat(computed.lineHeight) || 20;
+    const paddingTop = Number.parseFloat(computed.paddingTop) || 0;
+    const paddingBottom = Number.parseFloat(computed.paddingBottom) || 0;
+    const borderTop = Number.parseFloat(computed.borderTopWidth) || 0;
+    const borderBottom = Number.parseFloat(computed.borderBottomWidth) || 0;
+    const minHeight = Math.ceil((lineHeight * COMPOSER_MIN_ROWS) + paddingTop + paddingBottom + borderTop + borderBottom);
+
+    textarea.style.height = 'auto';
+    const nextHeight = Math.min(COMPOSER_MAX_HEIGHT_PX, Math.max(minHeight, textarea.scrollHeight));
+    textarea.style.height = `${nextHeight}px`;
+    textarea.style.overflowY = textarea.scrollHeight > nextHeight + 1 ? 'auto' : 'hidden';
+  }, [command, selectedBotId]);
+
   useEffect(() => {
     const hasDraft =
       Boolean(String(command || '').trim())