Merge pull request #139 from weiesky/feat/chat-composer-polish

weiesky · web-flow · commit 73e4b44ccdf0 · 2026-08-07T07:10:05.000-04:00
ui(chat): PC 对话区样式优化 — 输入条主题化、限宽居中、聚焦扩展动画
diff --git a/history.md b/history.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- ui(chat): **PC composer polish** — the composer card is capped at 1000px and centered on wide screens (shrinks responsively below); the card sits on its own input strip (`--bg-input-strip`, light gray `#F9F9F9` in the light theme) as a pure-white surface with a soft 8px drop shadow; and focusing the desktop textarea animates it to two lines (`height 0.2s ease`), collapsing back to content height (min one line) on blur. Autosize moved to a shared content-box helper (`resizeChatTextarea`) so an empty input snaps to exactly one line; mobile metrics/behavior unchanged.
+
 ## 1.7.17 (2026-08-05)
 
 - feat(v2): **persist agent identity from the wire header** — new `server/lib/v2/agent-id.js` parses `x-claude-code-agent-id` (`name@session-…` named / pure-hex anonymous) and the writer stores it as an optional `agent` field on journal req lines. Teammate display names no longer depend on the frontend's window-scoped heuristic registry, so names survive cold loads and mid-session gaps (new captures only).
diff --git a/src/components/chat/ChatInputBar.jsx b/src/components/chat/ChatInputBar.jsx
@@ -16,6 +16,28 @@ const SpeechRec = typeof window !== 'undefined' && window.isSecureContext
   ? (window.SpeechRecognition || window.webkitSpeechRecognition)
   : null;
 
+// Desktop textarea vertical metrics (must stay in sync with ChatInputBar.module.css):
+// padding 12px top + 4px bottom, line-height 21px (14 * 1.5).
+const FOCUS_VPAD = 16;
+const LINE_H = 21;
+const MIN_LINES = 1;
+const MAX_LINES = 6;
+const FOCUS_LINES = 2;
+
+// Shared autosize helper: measures the content box (scrollHeight minus vertical padding)
+// so an empty textarea snaps to exactly one line; `focused` pads short content up to two lines.
+// Mobile (isMobile && !isPad) keeps the legacy total-box behavior (different padding/font metrics).
+export function resizeChatTextarea(ta, { focused = false } = {}) {
+  if (!ta) return;
+  ta.style.height = 'auto';
+  if (isMobile && !isPad) {
+    ta.style.height = Math.min(ta.scrollHeight, 160) + 'px';
+    return;
+  }
+  const content = Math.min(Math.max(ta.scrollHeight - FOCUS_VPAD, LINE_H * MIN_LINES), LINE_H * MAX_LINES);
+  ta.style.height = (focused ? Math.max(content, LINE_H * FOCUS_LINES) : content) + 'px';
+}
+
 const SPEECH_LANG_MAP = {
   zh: 'zh-CN', 'zh-TW': 'zh-TW', en: 'en-US', ko: 'ko-KR',
   ja: 'ja-JP', de: 'de-DE', es: 'es-ES', fr: 'fr-FR',
@@ -46,6 +68,20 @@ function ChatInputBar({ inputRef, inputEmpty, inputSuggestion, terminalVisible,
   const recRef = useRef(null);
   const anchorRef = useRef({ prefix: '', suffix: '' });
   const rootRef = useRef(null);
+  // Desktop-only focus expand: focused empty/one-line input grows to two lines (animated via CSS).
+  const [focusExpand, setFocusExpand] = useState(false);
+  const focusExpandRef = useRef(false);
+
+  const resizeInput = (focused) => {
+    const ta = inputRef?.current;
+    if (!ta) return;
+    resizeChatTextarea(ta, { focused });
+  };
+  const applyFocusExpand = (on) => {
+    focusExpandRef.current = on;
+    setFocusExpand(on);
+    resizeInput(on);
+  };
 
   useEffect(() => () => {
     const rec = recRef.current;
@@ -173,8 +209,7 @@ function ChatInputBar({ inputRef, inputEmpty, inputSuggestion, terminalVisible,
         else interim += transcript;
       }
       t2.value = prefix + finalAcc + suffix;
-      t2.style.height = 'auto';
-      t2.style.height = Math.min(t2.scrollHeight, 120) + 'px';
+      resizeChatTextarea(t2, { focused: focusExpandRef.current });
       setInterimText(interim);
       onChange?.({ target: t2 });
     };
@@ -338,12 +373,14 @@ function ChatInputBar({ inputRef, inputEmpty, inputSuggestion, terminalVisible,
           <div className={styles.textareaWithGhost}>
             <textarea
               ref={inputRef}
-              className={styles.chatTextarea}
+              className={`${styles.chatTextarea}${focusExpand ? ` ${styles.chatTextareaFocused}` : ''}`}
               placeholder={inputSuggestion ? '' : t('ui.chatInput.placeholder')}
               rows={1}
               onKeyDown={onKeyDown}
               onInput={handleTextareaInput}
               onPaste={handlePaste}
+              onFocus={() => applyFocusExpand(true)}
+              onBlur={() => applyFocusExpand(false)}
             />
             {inputSuggestion && inputEmpty && (
               <div className={styles.ghostText}>{inputSuggestion}</div>
diff --git a/src/components/chat/ChatInputBar.module.css b/src/components/chat/ChatInputBar.module.css
@@ -1,15 +1,18 @@
 .chatInputBar {
-  padding: 8px 16px 12px;
-  background: var(--bg-input-bar);
+  /* 宽屏下用 max() 把卡片限宽 1000px 并居中，窄屏退化为 16px 边距。
+     外圈用 --bg-input-strip（亮 #F9F9F9 / 暗 #1e1e1e）托住白卡片 + 浅阴影。 */
+  padding: 8px max(16px, calc((100% - 1000px) / 2)) 12px;
+  background: var(--bg-input-strip);
   flex-shrink: 0;
 }
 
 .chatInputWrapper {
   display: flex;
   flex-direction: column;
-  background: var(--bg-elevated);
+  background: var(--bg-composer);
   border: 1px solid var(--border-secondary);
   border-radius: 16px;
+  box-shadow: var(--shadow-composer);
   transition: border-color 0.2s;
   overflow: visible;
 }
@@ -31,8 +34,9 @@
 
 .chatTextarea {
   width: 100%;
-  min-height: 22px;
-  max-height: 120px;
+  /* 行高 21px(14*1.5) + 上下 padding 16px：min 一行 37px，max 六行 136px */
+  min-height: 37px;
+  max-height: 136px;
   padding: 12px 14px 4px;
   background: #00000000;
   color: var(--text-primary);
@@ -43,6 +47,13 @@
   line-height: 1.5;
   font-family: var(--font-ui);
   box-sizing: border-box;
+  /* 聚焦扩展/失焦回收由 JS 写 style.height，这里负责过渡动画 */
+  transition: height 0.2s ease;
+}
+
+/* 桌面聚焦态：不足两行时补到两行总高 58px（42 内容 + 16 padding） */
+.chatTextareaFocused {
+  min-height: 58px;
 }
 
 .chatTextarea::placeholder {
@@ -532,6 +543,8 @@
     max-height: 208px;
     padding: 18px 21px 8px;
     font-size: 22px;
+    /* 移动端关闭高度动画，避免软键盘弹出时抖动 */
+    transition: none;
   }
 
   .ghostText {
@@ -627,9 +640,9 @@
 }
 
 /* ─── iPad/Pad 模式：恢复桌面默认值 ─── */
-:global(html.pad-mode) .chatInputBar { padding: 8px 16px 12px; }
+:global(html.pad-mode) .chatInputBar { padding: 8px max(16px, calc((100% - 1000px) / 2)) 12px; }
 :global(html.pad-mode) .chatInputWrapper { border-radius: 16px; }
-:global(html.pad-mode) .chatTextarea { min-height: 22px; max-height: 120px; padding: 12px 14px 4px; font-size: 14px; }
+:global(html.pad-mode) .chatTextarea { min-height: 37px; max-height: 136px; padding: 12px 14px 4px; font-size: 14px; transition: height 0.2s ease; }
 :global(html.pad-mode) .ghostText { padding: 12px 14px 4px; font-size: 14px; }
 :global(html.pad-mode) .chatInputBottom { padding: 4px 6px 6px; gap: 4px; }
 :global(html.pad-mode) .plusBtn,
diff --git a/src/components/chat/ChatView.jsx b/src/components/chat/ChatView.jsx
@@ -31,7 +31,7 @@ import { TeamButton, TeamModal } from '../dashboard/TeamSessionPanel';
 import { WorkflowButton, WorkflowRunsModal } from '../dashboard/WorkflowRunsPanel';
 import SnapLineOverlay from '../common/SnapLineOverlay';
 import RoleFilterBar from './RoleFilterBar';
-import ChatInputBar from './ChatInputBar';
+import ChatInputBar, { resizeChatTextarea } from './ChatInputBar';
 import WorkflowLiveHud from '../viewers/WorkflowLiveHud';
 import PresetModal from '../terminal/PresetModal';
 import UltraPlanModal from '../terminal/UltraPlanModal';
@@ -2175,8 +2175,7 @@ class ChatView extends React.Component {
     const textarea = this._inputRef.current;
     if (textarea) {
       textarea.value = description;
-      textarea.style.height = 'auto';
-      textarea.style.height = Math.min(textarea.scrollHeight, (isMobile && !isPad) ? 160 : 120) + 'px';
+      resizeChatTextarea(textarea, { focused: true });
       this.setState({ inputEmpty: false });
       textarea.focus();
     } else if (this._inputWs && this._inputWs.readyState === WebSocket.OPEN) {
@@ -2215,8 +2214,7 @@ class ChatView extends React.Component {
       const ta = this._inputRef.current;
       if (ta) {
         ta.value = assembled;
-        ta.style.height = 'auto';
-        ta.style.height = Math.min(ta.scrollHeight, 120) + 'px';
+        resizeChatTextarea(ta, { focused: document.activeElement === ta });
       }
       this.setState({
         ultraplanModalOpen: false,
@@ -2644,7 +2642,8 @@ class ChatView extends React.Component {
     }
     if (textareaToReset) {
       textareaToReset.value = '';
-      textareaToReset.style.height = 'auto';
+      // 发送后 textarea 仍保持聚焦（现有行为）：聚焦态回落到两行，非聚焦态收回一行
+      resizeChatTextarea(textareaToReset, { focused: document.activeElement === textareaToReset });
     }
     if (!skipUiState) {
       this._clearPendingImages();
@@ -2726,7 +2725,7 @@ class ChatView extends React.Component {
       const askId = this.state.pendingAsk.id;
       // 先把 textarea 清空 + 收 pending images（与正常路径一致的视觉反馈）
       textarea.value = '';
-      textarea.style.height = 'auto';
+      resizeChatTextarea(textarea, { focused: document.activeElement === textarea });
       this._clearPendingImages();
       this.setState({ inputEmpty: true, pendingInput: userText || imagePaths, inputSuggestion: null }, () => this.scrollToBottom());
       this.handleAskCancel(askId, 'Interrupted by user');
@@ -2756,8 +2755,7 @@ class ChatView extends React.Component {
       const textarea = this._inputRef.current;
       if (textarea) {
         textarea.value = this.state.inputSuggestion;
-        textarea.style.height = 'auto';
-        textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
+        resizeChatTextarea(textarea, { focused: document.activeElement === textarea });
       }
       this.setState({ inputSuggestion: null, inputEmpty: false });
       return;
@@ -2770,8 +2768,7 @@ class ChatView extends React.Component {
 
   handleInputChange = (e) => {
     const textarea = e.target;
-    textarea.style.height = 'auto';
-    textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
+    resizeChatTextarea(textarea, { focused: document.activeElement === textarea });
     const empty = !textarea.value.trim();
     this.setState({ inputEmpty: empty });
     if (this.state.inputSuggestion && !empty) {
@@ -2910,8 +2907,7 @@ class ChatView extends React.Component {
     if (!textarea) return;
     const cur = textarea.value;
     textarea.value = cur ? `${cur} ${quoted}` : quoted;
-    textarea.style.height = 'auto';
-    textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
+    resizeChatTextarea(textarea, { focused: true });
     this.setState({ inputEmpty: false });
     textarea.focus();
   };
diff --git a/src/components/chat/ChatView.module.css b/src/components/chat/ChatView.module.css
@@ -14,6 +14,16 @@
   flex-direction: column;
   -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain;
+  /* 宽屏下消息列限宽 1400px 并居中；> 选择器只收窄直接子元素（消息项），
+     不影响 sticky 按钮 / roleFilterBar / 审批面板 / 输入条等兄弟区域。
+     双滚动容器（普通 .container 与 Virtuoso Scroller）共用本类，一处生效。 */
+  & > * {
+    max-width: 1400px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+    box-sizing: border-box;
+  }
 }
 
 .mobileVirtuoso {
@@ -365,10 +375,12 @@
   position: relative;
 }
 
-/* 审批面板 + ChatInputBar 的共享定位容器。面板用 absolute bottom:100% 贴在输入栏之上。 */
+/* 审批面板 + ChatInputBar 的共享定位容器。面板用 absolute bottom:100% 贴在输入栏之上。
+   背景与外圈输入条（--bg-input-strip）一致，避免容器间露出页面底色接缝。 */
 .inputStack {
   position: relative;
   flex-shrink: 0;
+  background: var(--bg-input-strip);
 }
 
 .overlayPanel {
diff --git a/src/global.css b/src/global.css
@@ -14,6 +14,12 @@
   --bg-base-alt: #0d0d0d;
   --bg-container: #111;
   --bg-elevated: #1e1e1e;
+  /* Composer card fill: dark theme keeps the elevated tone */
+  --bg-composer: #1e1e1e;
+  /* Composer card drop shadow: subtle lift, 8px spread */
+  --shadow-composer: 0 2px 8px rgba(0, 0, 0, 0.35);
+  /* Strip behind the composer card: page color in dark, light gray in light */
+  --bg-input-strip: #0d0d0d;
   --bg-surface: #2a2a2a;
   --bg-code: #14141F;
   --bg-code-dark: #0d1117;
@@ -172,6 +178,12 @@
   --bg-base-alt: #F5F5F5;
   --bg-container: #FFFFFF;
   --bg-elevated: #F9F9F9;
+  /* Composer card fill: light theme uses pure white for contrast against the page */
+  --bg-composer: #FFFFFF;
+  /* Composer card drop shadow: subtle lift, 8px spread */
+  --shadow-composer: 0 2px 8px rgba(0, 0, 0, 0.08);
+  /* Strip behind the composer card: page color in dark, light gray in light */
+  --bg-input-strip: #F9F9F9;
   --bg-surface: #F0F0F0;
   --bg-code: #F5F5F5;
   --bg-code-dark: #F5F5F5;
