feat(chat): toggle send button icon by input content

This commit is contained in:
2026-06-22 18:58:57 +08:00
parent 031bad376f
commit 9a65f2f9ad
2 changed files with 13 additions and 5 deletions
@@ -70,6 +70,7 @@ export function ChatInputBar({ disabled = false }: ChatInputBarProps) {
/>
<ChatSendButton
disabled={!hasContent || disabled}
hasContent={hasContent}
onClick={handleSend}
/>
</div>
+12 -5
View File
@@ -8,27 +8,34 @@
* - 默认:粉色背景 + 渐变边缘
* - 聚焦 / 激活:完整 primaryGradientaccent → 透明)
*
* 图标:lucide-react <ArrowUp />tree-shakablecurrentColor 继承父 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>
);
}