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 <ChatSendButton
disabled={!hasContent || disabled} disabled={!hasContent || disabled}
hasContent={hasContent}
onClick={handleSend} onClick={handleSend}
/> />
</div> </div>
+12 -5
View File
@@ -8,27 +8,34 @@
* - 默认:粉色背景 + 渐变边缘 * - 默认:粉色背景 + 渐变边缘
* - 聚焦 / 激活:完整 primaryGradientaccent → 透明) * - 聚焦 / 激活:完整 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"; import styles from "./chat-send-button.module.css";
export interface ChatSendButtonProps { export interface ChatSendButtonProps {
disabled: boolean; disabled: boolean;
hasContent: boolean;
onClick: () => void; onClick: () => void;
} }
export function ChatSendButton({ disabled, onClick }: ChatSendButtonProps) { export function ChatSendButton({
disabled,
hasContent,
onClick,
}: ChatSendButtonProps) {
const Icon = hasContent ? ArrowUp : Plus;
return ( return (
<button <button
type="button" type="button"
className={`${styles.button} ${disabled ? "" : styles.buttonActive}`} className={`${styles.button} ${disabled ? "" : styles.buttonActive}`}
disabled={disabled} disabled={disabled}
onClick={onClick} 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> </button>
); );
} }