hooked the socket to messages and applyed a fix

components/chat/chat-item.tsx

@@ -13,6 +13,8 @@ import { Edit, FileIcon, ShieldAlert, ShieldCheck, Trash } from "lucide-react";
 import Image from "next/image";
 import { useEffect, useState } from "react";
 import { cn } from "@/lib/utils";
+import { useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 
 import {
     Form,
@@ -63,6 +65,16 @@ export const ChatItem = ({
 }: ChatItemProps) => {
     const [isEditing, setIsEditing] = useState(false); 
     const { onOpen } = useModal();
+    const params = useParams();
+    const router = useRouter();
+
+    const onMemberClick = () => {
+        if (member.id === currentMember.id) {
+            return;
+        }
+
+        router.push(`/servers/${params?.serverId}/conversations/${member.id}`);
+    }
 
     useEffect(() => {
         const handleKeyDown = (event: KeyboardEvent) => {
@@ -120,13 +132,13 @@ export const ChatItem = ({
     return (
         <div className="relative group flex items-center hover:bg-black/5 p-4 transition w-full">
             <div className="group flex gap-x-2 items-start w-full">
-                <div className="cursor-pointer hover:drop-shadow-md transition">
+                <div onClick={onMemberClick} className="cursor-pointer hover:drop-shadow-md transition">
                     <UserAvatar src={member.profile.imageUrl}/>
                 </div>
                 <div className="flex flex-col w-full">
                     <div className="flex items-center gap-x-2">
                         <div className="flex items-center">
-                            <p className="font-semibold text-sm hove:underline cursor-pointer">
+                            <p onClick={onMemberClick} className="font-semibold text-sm hover:underline cursor-pointer">
                                 {member.profile.name}
                             </p>
                             <ActionTooltip label={member.role}>

components/chat/chat-messages.tsx

@@ -8,6 +8,7 @@ import { useChatQuery } from "@/hooks/use-chat-query";
 import { Loader2, ServerCrash } from "lucide-react";
 import { Fragment } from "react";
 import { ChatItem } from "./chat-item";
+import { useChatSocket } from "@/hooks/use-chat-socket";
 
 const DATE_FORMAT = "d MMM yyyy, HH:mm";
 
@@ -41,6 +42,8 @@ export const ChatMessages = ({
     type,
 }: ChatMessagesProps) => {
     const queryKey = `chat:${chatId}`;
+    const addKey = `chat:${chatId}:messages`;
+    const updateKey = `chat:${chatId}:messages:update`;
 
     const {
         data,
@@ -53,7 +56,8 @@ export const ChatMessages = ({
         apiUrl,
         paramKey,
         paramValue,
-    })
+    });
+    useChatSocket({ queryKey, addKey, updateKey});
 
     if (status === "pending") {
         return (

hooks/use-chat-socket.ts

@@ -0,0 +1,80 @@
+import { useSocket } from "@/components/providers/socket-provider";
+import { Member, Message, Profile } from "@prisma/client";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect } from "react";
+
+type ChatSockerProps = {
+    addKey: string;
+    updateKey: string;
+    queryKey: string;
+}
+
+type MessageWithMemberWithProfile = Message & {
+    member: Member & {
+        profile: Profile;
+    }
+}
+
+export const useChatSocket = ({ addKey, updateKey, queryKey }: ChatSockerProps) => {
+    const { socket } = useSocket();
+    const queryClient = useQueryClient();
+
+    useEffect(() => {
+        if (!socket) return;
+
+        socket.on(addKey, (message: MessageWithMemberWithProfile) => {
+            queryClient.setQueryData([queryKey], ( oldData: any) => {
+                if (!oldData || !oldData.pages || oldData.pages.length === 0) {
+                    return oldData;
+                }
+
+                const newData = oldData.pages.map((page: any) => {
+                    return {
+                        ...page,
+                        items: page.items.map((item: MessageWithMemberWithProfile ) => {
+                            if (item.id === message.id) {
+                                return message;
+                            }
+                            return item;
+                        })
+                    }
+                });
+
+                return {
+                    ...oldData,
+                    pages: newData,
+                    
+                }
+            })
+        });
+
+        socket.on(addKey, (message: MessageWithMemberWithProfile) => {
+            queryClient.setQueryData([queryKey], (oldData: any) => {
+                if (!oldData || !oldData.pages || oldData.pages.length === 0) {
+                    return {
+                        pages: [{
+                            items: [message],
+                        }]
+                    }
+                }
+
+                const newData = [...oldData.pages];
+
+                newData[0] = {
+                    ...newData[0],
+                    items: [message, ...newData[0].items],
+                };
+
+                return {
+                    ...oldData,
+                    pages: newData,
+                };
+            });
+        });
+
+        return () => {
+            socket.off(addKey);
+            socket.off(updateKey);
+        }
+    }, [queryClient, socket, addKey, updateKey, queryKey]);
+}

next.config.js

@@ -1,5 +1,13 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+    webpack: (config) => {
+        config.externals.push({
+            "utf-8-validate": "utf-8-validate",
+            "bufferutil": "commonjs bufferutil"
+        })
+
+        return config;
+    },
     images: {
         domains: [
             "uploadthing.com",