From f6117d8b91523b2fe580409fa055483aee1efc6b Mon Sep 17 00:00:00 2001
From: "dev.daminik00" <dev.daminik00@gmail.com>
Date: Fri, 19 Sep 2025 01:07:22 +0200
Subject: [PATCH] fix

---
 .../MessageInput/MessageInput.module.scss     | 15 ++++++++
 .../chat/MessageInput/MessageInput.tsx        | 34 ++++++++++++++-----
 .../MessageInputWrapper.tsx                   | 16 +++++++--
 src/hooks/chats/useChatSocket.ts              |  2 ++
 4 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/src/components/domains/chat/MessageInput/MessageInput.module.scss b/src/components/domains/chat/MessageInput/MessageInput.module.scss
index a703a61..5cfbb84 100644
--- a/src/components/domains/chat/MessageInput/MessageInput.module.scss
+++ b/src/components/domains/chat/MessageInput/MessageInput.module.scss
@@ -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;
+}
diff --git a/src/components/domains/chat/MessageInput/MessageInput.tsx b/src/components/domains/chat/MessageInput/MessageInput.tsx
index c41fb68..621742f 100644
--- a/src/components/domains/chat/MessageInput/MessageInput.tsx
+++ b/src/components/domains/chat/MessageInput/MessageInput.tsx
@@ -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,14 +67,24 @@ export default function MessageInput({
         onKeyDown={handleKeyDown}
         maxRows={5}
       />
-      <Button
-        onClick={handleSend}
-        disabled={!message.trim() || disabled}
-        aria-label="Send"
-        className={styles.sendButton}
-      >
-        <Icon name={IconName.PaperAirplane} size={{ height: 14, width: 14 }} />
-      </Button>
+      <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}
+          aria-label="Send"
+          className={styles.sendButton}
+        >
+          <Icon name={IconName.PaperAirplane} size={{ height: 14, width: 14 }} />
+        </Button>
+      </div>
     </div>
   );
 }
diff --git a/src/components/domains/chat/MessageInputWrapper/MessageInputWrapper.tsx b/src/components/domains/chat/MessageInputWrapper/MessageInputWrapper.tsx
index b5909c5..5759bc6 100644
--- a/src/components/domains/chat/MessageInputWrapper/MessageInputWrapper.tsx
+++ b/src/components/domains/chat/MessageInputWrapper/MessageInputWrapper.tsx
@@ -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>
   );
diff --git a/src/hooks/chats/useChatSocket.ts b/src/hooks/chats/useChatSocket.ts
index eb3c3a7..29efd5d 100644
--- a/src/hooks/chats/useChatSocket.ts
+++ b/src/hooks/chats/useChatSocket.ts
@@ -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,