fix:发送按钮问题

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,20 +130,33 @@ export default function App() {
 
             {/* 输入区 */}
             <div className="p-4">
-              <div className="flex items-end gap-3">
-                <Textarea
+              {/* 这个容器视觉上就是“一个输入框” */}
+              <div className="rounded-xl border border-default-200 bg-background shadow-sm">
+                {/* 上半部分：真正可滚动/可拖拉的 textarea */}
+                <div className="px-3 pt-3">
+                  <textarea
                     value={inputText}
-                  onValueChange={setInputText}
+                    onChange={(e) => setInputText(e.target.value)}
                     onKeyDown={handleKeyDown}
                     placeholder="输入消息，Enter 发送，Shift+Enter 换行"
-                  minRows={2}
-                  maxRows={6}
-                  isDisabled={isSending}
-                  variant="bordered"
-                  className="flex-1"
+                    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()}
                   >
@@ -163,6 +164,7 @@ export default function App() {
                   </Button>
                 </div>
               </div>
+            </div>
           </CardBody>
         </Card>
       </div>