fix
This commit is contained in:
parent
f3872e7ce1
commit
f6117d8b91
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user