diff --git a/client/src/components/chat-affix/registerMessagingSocketHandlers.js b/client/src/components/chat-affix/registerMessagingSocketHandlers.js index a6c7cc33a..41d65427d 100644 --- a/client/src/components/chat-affix/registerMessagingSocketHandlers.js +++ b/client/src/components/chat-affix/registerMessagingSocketHandlers.js @@ -334,12 +334,47 @@ export const registerMessagingHandlers = ({ socket, client }) => { break; case "tag-added": + // Ensure `job_conversations` is properly formatted + const formattedJobConversations = job_conversations.map((jc) => ({ + __typename: "job_conversations", + jobid: jc.jobid || jc.job?.id, + conversationid: conversationId, + job: jc.job || { + __typename: "jobs", + id: data.selectedJob.id, + ro_number: data.selectedJob.ro_number, + ownr_co_nm: data.selectedJob.ownr_co_nm, + ownr_fn: data.selectedJob.ownr_fn, + ownr_ln: data.selectedJob.ownr_ln + } + })); + client.cache.modify({ id: client.cache.identify({ __typename: "conversations", id: conversationId }), fields: { - job_conversations: (existing = []) => [...existing, ...job_conversations] + job_conversations: (existing = []) => { + // Ensure no duplicates based on `jobid` + const existingIds = new Set( + existing.map( + (jc) => + client.cache.readFragment({ + id: client.cache.identify(jc), + fragment: gql` + fragment JobConversationId on job_conversations { + jobid + } + ` + })?.jobid + ) + ); + + const newItems = formattedJobConversations.filter((jc) => !existingIds.has(jc.jobid)); + + return [...existing, ...newItems]; + } } }); + break; case "tag-removed": diff --git a/client/src/components/chat-messages-list/chat-message-list.component.jsx b/client/src/components/chat-messages-list/chat-message-list.component.jsx index f045cae8c..3f2bba2f0 100644 --- a/client/src/components/chat-messages-list/chat-message-list.component.jsx +++ b/client/src/components/chat-messages-list/chat-message-list.component.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from "react"; +import React, { useCallback, useEffect, useRef, useState } from "react"; import { Virtuoso } from "react-virtuoso"; import { renderMessage } from "./renderMessage"; import "./chat-message-list.styles.scss"; @@ -16,7 +16,7 @@ export default function ChatMessageListComponent({ messages }) { loadedImagesRef.current = 0; }; - const preloadImages = (imagePaths, onComplete) => { + const preloadImages = useCallback((imagePaths, onComplete) => { resetImageLoadState(); if (imagePaths.length === 0) { @@ -34,7 +34,7 @@ export default function ChatMessageListComponent({ messages }) { } }; }); - }; + }, []); // Ensure all images are loaded on initial render useEffect(() => { @@ -51,7 +51,7 @@ export default function ChatMessageListComponent({ messages }) { }); } }); - }, [messages]); + }, [messages, preloadImages]); // Handle scrolling when new messages are added useEffect(() => { @@ -69,7 +69,7 @@ export default function ChatMessageListComponent({ messages }) { }); } }); - }, [messages, atBottom]); + }, [messages, atBottom, preloadImages]); return (