feat(chat): toggle send button icon by input content
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -8,27 +8,34 @@
|
|||||||
* - 默认:粉色背景 + 渐变边缘
|
* - 默认:粉色背景 + 渐变边缘
|
||||||
* - 聚焦 / 激活:完整 primaryGradient(accent → 透明)
|
* - 聚焦 / 激活:完整 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";
|
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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user