Codex
67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
"use client";
|
|
import { ArrowUp, Plus, X } from "lucide-react";
|
|
|
|
export interface ChatSendButtonProps {
|
|
disabled: boolean;
|
|
hasContent: boolean;
|
|
isMenuOpen: boolean;
|
|
menuId: string;
|
|
onClick: () => void;
|
|
onMenuToggle: () => void;
|
|
onPointerDownSend: () => void;
|
|
}
|
|
|
|
export function ChatSendButton({
|
|
disabled,
|
|
hasContent,
|
|
isMenuOpen,
|
|
menuId,
|
|
onClick,
|
|
onMenuToggle,
|
|
onPointerDownSend,
|
|
}: ChatSendButtonProps) {
|
|
const isSendMode = hasContent;
|
|
const label = isSendMode
|
|
? "Send message"
|
|
: isMenuOpen
|
|
? "Close chat actions"
|
|
: "Open chat actions";
|
|
return (
|
|
<button
|
|
type="button"
|
|
data-analytics-ignore={isSendMode ? true : undefined}
|
|
data-analytics-key={isSendMode ? undefined : "chat.toggle_actions"}
|
|
className={[
|
|
"flex aspect-square size-(--chat-send-button-size,42px) shrink-0 cursor-pointer items-center justify-center rounded-full border transition-[background,color,transform,box-shadow] duration-200 disabled:cursor-not-allowed disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#f657a0]",
|
|
isSendMode
|
|
? "border-transparent bg-[linear-gradient(to_right,var(--color-button-gradient-start,#ff67e0),var(--color-button-gradient-end,#ff52a2))] text-white shadow-[0_8px_20px_rgba(246,87,160,0.3)]"
|
|
: isMenuOpen
|
|
? "border-transparent bg-[#38262d] text-white shadow-[0_8px_18px_rgba(56,38,45,0.18)]"
|
|
: "border-[rgba(104,67,80,0.09)] bg-[#f8f1f4] text-[#76505f] shadow-none",
|
|
]
|
|
.filter(Boolean)
|
|
.join(" ")}
|
|
disabled={disabled}
|
|
onPointerDown={(event) => {
|
|
if (event.pointerType === "mouse") return;
|
|
if (disabled) return;
|
|
event.preventDefault();
|
|
if (!isSendMode) return;
|
|
onPointerDownSend();
|
|
}}
|
|
onClick={isSendMode ? onClick : onMenuToggle}
|
|
aria-label={label}
|
|
aria-expanded={isSendMode ? undefined : isMenuOpen}
|
|
aria-controls={isSendMode ? undefined : menuId}
|
|
>
|
|
{isSendMode ? (
|
|
<ArrowUp size={23} strokeWidth={2.4} aria-hidden="true" />
|
|
) : isMenuOpen ? (
|
|
<X size={22} strokeWidth={2.2} aria-hidden="true" />
|
|
) : (
|
|
<Plus size={23} strokeWidth={2.2} aria-hidden="true" />
|
|
)}
|
|
</button>
|
|
);
|
|
}
|