upd

src/components/Chat2.tsx

@@ -6,28 +6,44 @@ import CloseIcon from "./icons/CloseIcon";
 import SendChatIcon from "./icons/SendChatIcon";
 import Button from "./ui/Button";
 import useStreamUserStore from "../stores/useStreamUserStore";
-import { FormEvent, useRef, useState } from "react";
-import IMessage from "../types/IMessage";
-import useStateRef from "react-usestateref";
+import { FormEvent, useEffect, useRef, useState } from "react";
+import useSocketStore from "../stores/useSocketStore";
+import useChatStore from "../stores/useChatStore";
 
 interface Props {
   onClose: () => void;
 }
 
 function Chat2({ onClose }: Props) {
-//   const { socket } = useSocketStore();
+  const { socket } = useSocketStore();
   const { me, users } = useStreamUserStore();
-  const [messages] = useStateRef<IMessage[]>([]);
+  // const [messages] = useStateRef<IMessage[]>([]);
   const messagesRef = useRef<HTMLDivElement>(null);
   const [messageText, setMessageText] = useState<string>("");
   const messageTextRef = useRef<HTMLInputElement>(null);
+  const { messages } = useChatStore();
 
   function sendMessage(e: FormEvent) {
     e.preventDefault();
+
+    socket?.emit("message", messageText);
+
+    setMessageText("");
   }
 
+  useEffect(() => {
+    if (!messages.length) return;
+
+    messagesRef.current?.scrollTo({
+      top: messagesRef.current.scrollHeight,
+      behavior: "smooth",
+    });
+  }, [messages]);
+
   return (
-    <div className={`chat relative h-full flex flex-col w-[296px] bg-white`}>
+    <div
+      className={`chat relative h-[calc(100vh-48px)] flex flex-col w-[296px] bg-white`}
+    >
       <div className="flex items-center justify-between p-2 pl-4 border-b border-[#DAE0E5]">
         <p className="text-sm font-semibold">
           <Trans i18nKey={"chat"}>Чат</Trans>
@@ -47,14 +63,16 @@ function Chat2({ onClose }: Props) {
           <div
             key={index}
             className={`text-sm p-2 flex flex-col gap-1 rounded-lg ${
-              users.find((user) => user.id === me?.id)?.name === message.name
+              users.find((user) => user.id === me?.id)?.id === message.userId
                 ? "bg-[#C4DDF5]"
                 : "bg-[#F0F1F2]"
             }`}
           >
-            {users.find((user) => user.id === me?.id)?.name !==
-              message.name && (
-              <p className="text-[#49A1F5] font-semibold">{message.name}</p>
+            {users.find((user) => user.id === me?.id)?.id !==
+              message.userId && (
+              <p className="text-[#49A1F5] font-semibold">
+                {users.find((user) => user.id === message.userId)?.name}
+              </p>
             )}
 
             <p className="break-words">{message.text}</p>
@@ -70,7 +88,7 @@ function Chat2({ onClose }: Props) {
             ref={messageTextRef}
             type="text"
             placeholder={t("writeAMessage")}
-            className="w-full bg-transparent text-sm outline-none"
+            className="w-full text-sm bg-transparent outline-none"
             value={messageText}
             onChange={(e) => setMessageText(e.target.value)}
           />