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)}
           />

src/components/icons/DesktopIcon.tsx

@@ -9,13 +9,13 @@ function DesktopIcon() {
     >
       <path
         d="M2.6665 3.87878C2.6665 3.20934 3.26346 2.66666 3.99984 2.66666L11.9998 2.66666C12.7362 2.66666 13.3332 3.20934 13.3332 3.87878V8.1212C13.3332 8.79064 12.7362 9.33332 11.9998 9.33332L3.99984 9.33332C3.26346 9.33332 2.6665 8.79064 2.6665 8.1212L2.6665 3.87878Z"
-        stroke="#ccc"
+        stroke="currentColor"
         strokeWidth={1.5}
         strokeLinecap="round"
       />
       <path
         d="M13.2794 11H2.72092C2.29049 11 1.90835 11.2754 1.77224 11.6838C1.5564 12.3313 2.03836 13 2.72092 13L13.2794 13C13.962 13 14.4439 12.3313 14.2281 11.6838C14.092 11.2754 13.7098 11 13.2794 11Z"
-        stroke="#ccc"
+        stroke="currentColor"
         strokeWidth={1.5}
         strokeLinecap="round"
       />

src/components/icons/MobileIcon.tsx

@@ -9,7 +9,7 @@ function MobileIcon() {
     >
       <path
         d="M7.44428 3.33333H8.55539M5.99984 14L9.99984 14C10.7362 14 11.3332 13.403 11.3332 12.6667V3.33333C11.3332 2.59695 10.7362 2 9.99984 2L5.99984 2C5.26346 2 4.6665 2.59695 4.6665 3.33333L4.6665 12.6667C4.6665 13.403 5.26346 14 5.99984 14Z"
-        stroke="#ccc"
+        stroke="currentColor"
         strokeWidth={1.5}
         strokeLinecap="round"
       />