This commit is contained in:
dev.daminik00 2025-09-19 01:07:22 +02:00
parent f3872e7ce1
commit f6117d8b91
4 changed files with 57 additions and 10 deletions

View File

@ -20,3 +20,18 @@
align-items: center;
justify-content: center;
}
.sendButtonWrapper {
position: relative;
width: 40px;
height: 40px;
}
.disabledOverlay {
position: absolute;
inset: 0;
border-radius: 50%;
z-index: 1;
background: transparent;
cursor: pointer;
}

View File

@ -10,11 +10,13 @@ import styles from "./MessageInput.module.scss";
interface MessageInputProps {
onSend: (message: string) => void;
disabled?: boolean;
onDisabledClick?: () => void;
}
export default function MessageInput({
onSend,
disabled = false,
onDisabledClick,
}: MessageInputProps) {
const t = useTranslations("Chat");
const [message, setMessage] = useState("");
@ -28,6 +30,12 @@ export default function MessageInput({
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === "Enter") {
// If disabled (e.g., zero balance), open refill modal instead of sending
if (!e.ctrlKey && disabled) {
e.preventDefault();
onDisabledClick?.();
return;
}
if (e.ctrlKey) {
// Ctrl + Enter - добавляем перенос строки
e.preventDefault();
@ -59,6 +67,15 @@ export default function MessageInput({
onKeyDown={handleKeyDown}
maxRows={5}
/>
<div className={styles.sendButtonWrapper}>
{/* Capture clicks when disabled to open refill modal */}
{disabled && typeof onDisabledClick === "function" && (
<div
className={styles.disabledOverlay}
onClick={onDisabledClick}
aria-hidden
/>
)}
<Button
onClick={handleSend}
disabled={!message.trim() || disabled}
@ -68,5 +85,6 @@ export default function MessageInput({
<Icon name={IconName.PaperAirplane} size={{ height: 14, width: 14 }} />
</Button>
</div>
</div>
);
}

View File

@ -1,5 +1,6 @@
"use client";
import { useShowRefillModal } from "@/hooks/refill/useShowRefillModal";
import { useChat } from "@/providers/chat-provider";
import { MessageInput } from "..";
@ -7,15 +8,26 @@ import { MessageInput } from "..";
import styles from "./MessageInputWrapper.module.scss";
export default function MessageInputWrapper() {
const { send, balance } = useChat();
const { send, balance, chatId } = useChat();
const { showRefillModal } = useShowRefillModal();
// Блокируем отправку сообщений при нулевом или отрицательном балансе
const disabled = (balance?.balance ?? 0) <= 0;
const handleDisabledClick = () => {
if (disabled && chatId) {
showRefillModal(chatId);
}
};
return (
<div className={styles.container}>
<div className={styles.inputWrapper}>
<MessageInput onSend={send} disabled={disabled} />
<MessageInput
onSend={send}
disabled={disabled}
onDisabledClick={handleDisabledClick}
/>
</div>
</div>
);

View File

@ -345,6 +345,7 @@ export const useChatSocket = (
return useMemo(
() => ({
chatId,
messages,
balance,
session,
@ -368,6 +369,7 @@ export const useChatSocket = (
hasMoreOlderMessages,
}),
[
chatId,
messages,
balance,
session,