优化会话输入框出现滚动条时的样式

src/components/chat/message-input.tsx

@@ -1107,15 +1107,6 @@ export function MessageInput({
 
   const hasImageAttachments = imageAttachments.length > 0
   const hasResourceAttachments = resourceAttachments.length > 0
-  const topPaddingClass =
-    hasImageAttachments && hasResourceAttachments
-      ? "pt-[6.25rem]"
-      : hasImageAttachments
-        ? "pt-[4.5rem]"
-        : hasResourceAttachments
-          ? "pt-10"
-          : "pt-3"
-  const bottomPaddingClass = "pb-10"
   const showDragActive = isDragActive && !disabled
 
   const selectorItems = (
@@ -1144,6 +1135,88 @@ export function MessageInput({
     </>
   )
 
+  const actionButtons = isEditingQueueItem ? (
+    <div className="flex items-center gap-1">
+      <Button
+        onClick={onCancelQueueEdit}
+        variant="ghost"
+        size="icon"
+        className="h-8 w-8"
+        title={tQueue("cancelEdit")}
+      >
+        <X className="h-4 w-4" />
+      </Button>
+      <Button
+        onClick={handleSend}
+        disabled={!hasSendableContent}
+        size="icon"
+        title={tQueue("saveEdit")}
+      >
+        <Check className="h-4 w-4" />
+      </Button>
+    </div>
+  ) : isPrompting && onCancel ? (
+    <div className="flex items-center gap-1">
+      <Button
+        onClick={handleSend}
+        disabled={!hasSendableContent}
+        variant="secondary"
+        size="icon"
+        className="h-8 w-8"
+        title={tQueue("addToQueue")}
+      >
+        <ListPlus className="h-4 w-4" />
+      </Button>
+      <Button
+        onClick={onCancel}
+        variant="destructive"
+        size="icon"
+        title={t("cancel")}
+      >
+        <Square className="h-4 w-4" />
+      </Button>
+    </div>
+  ) : onForkSend ? (
+    <div className="flex items-center">
+      <Button
+        onClick={handleSend}
+        disabled={disabled || !hasSendableContent}
+        size="icon"
+        className="rounded-r-none"
+        title={t("send")}
+      >
+        <Send className="h-4 w-4" />
+      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            disabled={disabled || !hasSendableContent}
+            size="icon"
+            className="rounded-l-none border-l border-primary-foreground/20 w-6"
+            aria-label={t("forkAndSend")}
+          >
+            <ChevronUp className="h-3 w-3" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" side="top">
+          <DropdownMenuItem onSelect={handleForkSendClick}>
+            <GitFork className="h-4 w-4" />
+            {t("forkAndSend")}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  ) : (
+    <Button
+      onClick={handleSend}
+      disabled={disabled || !hasSendableContent}
+      size="icon"
+      title={t("send")}
+    >
+      <Send className="h-4 w-4" />
+    </Button>
+  )
+
   return (
     <div
       ref={containerRef}
@@ -1159,27 +1232,15 @@ export function MessageInput({
           onSelect={handleSlashSelect}
         />
       )}
-      <Textarea
+      <div
-        ref={textareaRef}
-        value={text}
-        onChange={handleTextChange}
-        onKeyDown={handleKeyDown}
-        onCompositionStart={() => (composingRef.current = true)}
-        onCompositionEnd={() => (composingRef.current = false)}
-        onPaste={handlePaste}
-        onFocus={onFocus}
-        placeholder={resolvedPlaceholder}
         className={cn(
-          "text-sm pr-12 resize-none bg-transparent",
+          "flex flex-col rounded-xl border border-input bg-transparent transition-colors focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50",
           showDragActive && "ring-1 ring-primary/40",
-          topPaddingClass,
-          bottomPaddingClass,
           className
         )}
-        autoFocus={autoFocus}
+      >
-      />
         {(hasImageAttachments || hasResourceAttachments) && (
-        <div className="absolute left-2 right-12 top-2 z-10 flex flex-col gap-1">
+          <div className="flex shrink-0 flex-col gap-1 px-2 pt-2">
             {hasImageAttachments && (
               <div className="flex items-center gap-1 overflow-x-auto pb-0.5">
                 {imageAttachments.map((attachment) => (
@@ -1234,13 +1295,21 @@ export function MessageInput({
             )}
           </div>
         )}
-      {showDragActive && (
+        <Textarea
-        <div className="pointer-events-none absolute inset-1 z-20 flex items-center justify-center rounded-md border border-dashed border-primary/50 bg-background/80 text-xs text-muted-foreground">
+          ref={textareaRef}
-          {t("dropFilesToAttach")}
+          value={text}
-        </div>
+          onChange={handleTextChange}
-      )}
+          onKeyDown={handleKeyDown}
-      <div className="@container absolute left-2 right-24 bottom-2">
+          onCompositionStart={() => (composingRef.current = true)}
-        <div className="flex items-center gap-1">
+          onCompositionEnd={() => (composingRef.current = false)}
+          onPaste={handlePaste}
+          onFocus={onFocus}
+          placeholder={resolvedPlaceholder}
+          className="min-h-0 flex-1 overflow-y-auto border-0 bg-transparent text-sm shadow-none focus-visible:border-0 focus-visible:ring-0"
+          autoFocus={autoFocus}
+        />
+        <div className="@container flex shrink-0 items-end justify-between gap-2 px-2 pb-2">
+          <div className="flex min-w-0 items-end gap-1">
             <Button
               onClick={handlePickFiles}
               disabled={disabled}
@@ -1274,88 +1343,13 @@ export function MessageInput({
               </Popover>
             )}
           </div>
+          <div className="shrink-0">{actionButtons}</div>
         </div>
-      {isEditingQueueItem ? (
-        <div className="absolute right-2 bottom-2 flex items-center gap-1">
-          <Button
-            onClick={onCancelQueueEdit}
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8"
-            title={tQueue("cancelEdit")}
-          >
-            <X className="h-4 w-4" />
-          </Button>
-          <Button
-            onClick={handleSend}
-            disabled={!hasSendableContent}
-            size="icon"
-            title={tQueue("saveEdit")}
-          >
-            <Check className="h-4 w-4" />
-          </Button>
       </div>
-      ) : isPrompting && onCancel ? (
+      {showDragActive && (
-        <div className="absolute right-2 bottom-2 flex items-center gap-1">
+        <div className="pointer-events-none absolute inset-1 z-20 flex items-center justify-center rounded-md border border-dashed border-primary/50 bg-background/80 text-xs text-muted-foreground">
-          <Button
+          {t("dropFilesToAttach")}
-            onClick={handleSend}
-            disabled={!hasSendableContent}
-            variant="secondary"
-            size="icon"
-            className="h-8 w-8"
-            title={tQueue("addToQueue")}
-          >
-            <ListPlus className="h-4 w-4" />
-          </Button>
-          <Button
-            onClick={onCancel}
-            variant="destructive"
-            size="icon"
-            title={t("cancel")}
-          >
-            <Square className="h-4 w-4" />
-          </Button>
         </div>
-      ) : onForkSend ? (
-        <div className="absolute right-2 bottom-2 flex items-center">
-          <Button
-            onClick={handleSend}
-            disabled={disabled || !hasSendableContent}
-            size="icon"
-            className="rounded-r-none"
-            title={t("send")}
-          >
-            <Send className="h-4 w-4" />
-          </Button>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                disabled={disabled || !hasSendableContent}
-                size="icon"
-                className="rounded-l-none border-l border-primary-foreground/20 w-6"
-                aria-label={t("forkAndSend")}
-              >
-                <ChevronUp className="h-3 w-3" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" side="top">
-              <DropdownMenuItem onSelect={handleForkSendClick}>
-                <GitFork className="h-4 w-4" />
-                {t("forkAndSend")}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      ) : (
-        <Button
-          onClick={handleSend}
-          disabled={disabled || !hasSendableContent}
-          size="icon"
-          className="absolute right-2 bottom-2"
-          title={t("send")}
-        >
-          <Send className="h-4 w-4" />
-        </Button>
       )}
     </div>
   )