From 9a65f2f9ad876c915a20ce821b6bf737ea4581c9 Mon Sep 17 00:00:00 2001
From: chenhang <averych@126.com>
Date: Mon, 22 Jun 2026 18:58:57 +0800
Subject: [PATCH] feat(chat): toggle send button icon by input content

---
 src/app/chat/components/chat-input-bar.tsx   |  1 +
 src/app/chat/components/chat-send-button.tsx | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/app/chat/components/chat-input-bar.tsx b/src/app/chat/components/chat-input-bar.tsx
index eb90ede9..233b478a 100644
--- a/src/app/chat/components/chat-input-bar.tsx
+++ b/src/app/chat/components/chat-input-bar.tsx
@@ -70,6 +70,7 @@ export function ChatInputBar({ disabled = false }: ChatInputBarProps) {
         />
         <ChatSendButton
           disabled={!hasContent || disabled}
+          hasContent={hasContent}
           onClick={handleSend}
         />
       </div>
diff --git a/src/app/chat/components/chat-send-button.tsx b/src/app/chat/components/chat-send-button.tsx
index d643b720..913fddbe 100644
--- a/src/app/chat/components/chat-send-button.tsx
+++ b/src/app/chat/components/chat-send-button.tsx
@@ -8,27 +8,34 @@
  *   - 默认：粉色背景 + 渐变边缘
  *   - 聚焦 / 激活：完整 primaryGradient（accent → 透明）
  *
- * 图标：lucide-react <ArrowUp />（tree-shakable，currentColor 继承父 color）
+ * 图标：空输入显示 <Plus />，有内容时显示 <ArrowUp />
  */
-import { ArrowUp } from "lucide-react";
+import { ArrowUp, Plus } from "lucide-react";
 
 import styles from "./chat-send-button.module.css";
 
 export interface ChatSendButtonProps {
   disabled: boolean;
+  hasContent: boolean;
   onClick: () => void;
 }
 
-export function ChatSendButton({ disabled, onClick }: ChatSendButtonProps) {
+export function ChatSendButton({
+  disabled,
+  hasContent,
+  onClick,
+}: ChatSendButtonProps) {
+  const Icon = hasContent ? ArrowUp : Plus;
+
   return (
     <button
       type="button"
       className={`${styles.button} ${disabled ? "" : styles.buttonActive}`}
       disabled={disabled}
       onClick={onClick}
-      aria-label="Send message"
+      aria-label={hasContent ? "Send message" : "Add message content"}
     >
-      <ArrowUp className={styles.icon} size={24} aria-hidden="true" />
+      <Icon className={styles.icon} size={24} aria-hidden="true" />
     </button>
   );
 }