From 08efdf4cd35fcb26b17196b66fe97e6fdfeff26d Mon Sep 17 00:00:00 2001
From: azu <azu@langcore.cn>
Date: Mon, 29 Dec 2025 17:35:24 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=8F=91=E9=80=81=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js | 72 ++++++++++++++++++++++++++++--------------------------
 1 file changed, 37 insertions(+), 35 deletions(-)

diff --git a/src/App.js b/src/App.js
index 0850ea1..30e7fd6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from "react";
 import {
-  Avatar,
   Button,
   Card,
   CardBody,
@@ -8,7 +7,6 @@ import {
   Divider,
   ScrollShadow,
   Spinner,
-  Textarea,
 } from "@heroui/react";
 import { requestBotReply } from "./dsAPI";
 
@@ -81,8 +79,7 @@ export default function App() {
       <div className="mx-auto max-w-3xl">
         <Card className="shadow-xl">
           {/* 顶部 */}
-          <CardHeader className="flex items-center gap-3">
-            <Avatar name="Bot" />
+          <CardHeader className="flex items-center">
             <div className="flex flex-col">
               <span className="font-semibold">Chatbot Demo</span>
               <span className="text-xs text-default-500">
@@ -99,16 +96,8 @@ export default function App() {
                 {messages.map((m) => {
                   const isUser = m.role === "user";
                   return (
-                    <div
-                      className={`flex ${isUser ? "justify-end" : "justify-start"}`}
-                    >
-                      <div
-                        className={`flex max-w-[80%] items-end gap-2 ${isUser ? "flex-row-reverse" : ""}`}
-                      >
-                        <Avatar
-                          size="sm"
-                          name={isUser ? "You" : "Bot"}
-                        />
+                    <div className={`flex ${isUser ? "justify-end" : "justify-start"}`} >
+                      <div className={`flex max-w-[80%] ${isUser ? "flex-row-reverse" : ""}`} >
                         <div
                           className={`rounded-2xl px-4 py-3 text-sm leading-relaxed ${isUser
                             ? "bg-primary text-primary-foreground"
@@ -124,8 +113,7 @@ export default function App() {
 
                 {isBotTyping && (
                   <div className="flex justify-start">
-                    <div className="flex items-center gap-2">
-                      <Avatar size="sm" name="Bot" />
+                    <div className="flex items-center">
                       <div className="flex items-center gap-2 rounded-2xl bg-content2 px-4 py-2 text-sm text-default-600">
                         <Spinner size="sm" />
                         正在回复…
@@ -142,25 +130,39 @@ export default function App() {
 
             {/* 输入区 */}
             <div className="p-4">
-              <div className="flex items-end gap-3">
-                <Textarea
-                  value={inputText}
-                  onValueChange={setInputText}
-                  onKeyDown={handleKeyDown}
-                  placeholder="输入消息，Enter 发送，Shift+Enter 换行"
-                  minRows={2}
-                  maxRows={6}
-                  isDisabled={isSending}
-                  variant="bordered"
-                  className="flex-1"
-                />
-                <Button
-                  color="primary"
-                  onPress={handleSend}
-                  isDisabled={isSending || !inputText.trim()}
-                >
-                  {isSending ? "发送中…" : "发送"}
-                </Button>
+              {/* 这个容器视觉上就是“一个输入框” */}
+              <div className="rounded-xl border border-default-200 bg-background shadow-sm">
+                {/* 上半部分：真正可滚动/可拖拉的 textarea */}
+                <div className="px-3 pt-3">
+                  <textarea
+                    value={inputText}
+                    onChange={(e) => setInputText(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder="输入消息，Enter 发送，Shift+Enter 换行"
+                    disabled={isSending}
+                    rows={2}
+                    className="
+                    w-full bg-transparent outline-none
+                    text-sm leading-relaxed text-foreground
+                    placeholder:text-default-400
+                    resize-y
+                    min-h-[72px] max-h-[220px]
+                    overflow-auto
+                  "
+                  />
+                </div>
+
+                {/* 下半部分：输入框“内部”的工具栏，按钮在右下角 */}
+                <div className="flex items-center justify-end gap-2 px-3 py-2">
+                  <Button
+                    color="primary"
+                    size="sm"
+                    onPress={handleSend}
+                    isDisabled={isSending || !inputText.trim()}
+                  >
+                    {isSending ? "发送中…" : "发送"}
+                  </Button>
+                </div>
               </div>
             </div>
           </CardBody>