94 lines
2.6 KiB
TypeScript
94 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
import { Button, Icon, IconName, TextareaAutoResize } from "@/components/ui";
|
|
|
|
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("");
|
|
|
|
const handleSend = () => {
|
|
if (message.trim() && !disabled) {
|
|
onSend(message.trim());
|
|
setMessage("");
|
|
}
|
|
};
|
|
|
|
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();
|
|
const target = e.target as HTMLTextAreaElement;
|
|
const start = target.selectionStart;
|
|
const end = target.selectionEnd;
|
|
const newValue =
|
|
message.substring(0, start) + "\n" + message.substring(end);
|
|
setMessage(newValue);
|
|
|
|
// Устанавливаем курсор после переноса строки
|
|
setTimeout(() => {
|
|
target.selectionStart = target.selectionEnd = start + 1;
|
|
}, 0);
|
|
} else {
|
|
// Enter без Ctrl - отправляем сообщение
|
|
e.preventDefault();
|
|
handleSend();
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<TextareaAutoResize
|
|
value={message}
|
|
onChange={e => setMessage(e.target.value)}
|
|
placeholder={t("message_input_placeholder")}
|
|
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}
|
|
aria-label="Send"
|
|
className={styles.sendButton}
|
|
>
|
|
<Icon
|
|
name={IconName.PaperAirplane}
|
|
size={{ height: 14, width: 14 }}
|
|
/>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|