diff --git a/client/public/img/popups/EmptyMessageFeed.svg b/client/public/img/popups/EmptyMessageFeed.svg new file mode 100644 index 0000000..57a444a --- /dev/null +++ b/client/public/img/popups/EmptyMessageFeed.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/public/img/popups/MessageUserPfp.png b/client/public/img/popups/MessageUserPfp.png new file mode 100644 index 0000000..e481b8b Binary files /dev/null and b/client/public/img/popups/MessageUserPfp.png differ diff --git a/client/src/components/popups/ChatPopup.tsx b/client/src/components/popups/ChatPopup.tsx new file mode 100644 index 0000000..db4230d --- /dev/null +++ b/client/src/components/popups/ChatPopup.tsx @@ -0,0 +1,188 @@ +import { useRef, useState, useEffect } from "react"; +import SendIcon from "../icons/SendIcon"; +import Button from "../ui/Button"; +import { useMe } from "../../hooks/useAuth"; +import clsx from "clsx"; + +export default function ChatPopup() { + const [messages, setMessages] = useState([ + { + senderId: "1", + timestamp: "12:22", + content: + "У меня все сломалось, ничего не работает, картинки нет, все пошло по пизде, помогите мне кто-нибудь, пожалуйста", + }, + { + senderId: "2", + timestamp: "12:22", + content: "🤡🤡🤡", + }, + ]); + + function onMessageSend(message: string) { + setMessages([ + ...messages, + { + senderId: "1", + timestamp: "12:22", + content: message, + }, + ]); + } + + return ( +
+ + +
+ ); +} + +function MessageFeed({ messages }: { messages: MessageItemProps[] }) { + const messagesEndRef = useRef(null); + + // Скролл к концу при получении нового сообщения + useEffect(() => { + messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); + }, [messages]); + + return ( +
+ + {messages.length === 0 ? ( +
+ + + Здесь пока нет сообщений.
Можно начать беседу с приветствия + +
+ ) : ( +
+ {messages.map((message, index) => ( + + ))} +
+
+ )} +
+ ); +} + +interface MessageItemProps { + senderId: string; + timestamp: string; + content: string; +} + +function MessageItem({ senderId, timestamp, content }: MessageItemProps) { + const { data: user } = useMe(); + const isFromMe = senderId === "1"; + + return ( +
+
+
+ {!isFromMe && ( +
+ {user?.fullName} +
+ )} +
{content}
+
+ {timestamp} +
+ +
+ user +
+
+ ); +} + +function MessageInput({ + onMessageSend, +}: { + onMessageSend: (message: string) => void; +}) { + const [message, setMessage] = useState(""); + const textareaRef = useRef(null); + + useEffect(() => { + const textarea = textareaRef.current; + if (!textarea) return; + textarea.style.height = "auto"; + + const computedStyle = window.getComputedStyle(textarea); + const lineHeight = parseInt(computedStyle.lineHeight); + const maxHeight = lineHeight * 4; + const newHeight = Math.min(textarea.scrollHeight, maxHeight); + + textarea.style.height = `${newHeight}px`; + textarea.style.overflowY = + textarea.scrollHeight > maxHeight ? "auto" : "hidden"; + }, [message]); + + function handleChange(e: React.ChangeEvent) { + setMessage(e.target.value); + } + + function sendMessage() { + setMessage(""); + onMessageSend(message); + } + + return ( +
textareaRef.current?.focus()} + className="flex w-full min-h-[4.444vw] p-[1.111vw] items-end justify-between absolute bottom-0 left-0 bg-white" + > +