Add versioning support to collaboration features and API calls

- Adjust logic in socket responses to handle versioning for comments and threads.

app/src/components/layout/scenes/MainScene.tsx

@@ -3,6 +3,7 @@ import {
   useLoadingProgress,
   useRenameModeStore,
   useSaveVersion,
+  useSelectedComment,
   useSelectedFloorItem,
   useSocketStore,
   useWidgetSubOption,
@@ -39,6 +40,7 @@ import { useVersionHistoryStore } from "../../../store/builder/useVersionHistory
 import { useVersionContext } from "../../../modules/builder/version/versionContext";
 import VersionSaved from "../sidebarRight/versionHisory/VersionSaved";
 import Footer from "../../footer/Footer";
+import ThreadChat from "../../ui/collaboration/ThreadChat";
 
 function MainScene() {
   const { setMainProduct } = useMainProduct();
@@ -64,6 +66,7 @@ function MainScene() {
   const { versionHistory } = useVersionHistoryStore();
   const { selectedVersionStore } = useVersionContext();
   const { selectedVersion, setSelectedVersion } = selectedVersionStore();
+  const { selectedComment, commentPositionState } = useSelectedComment();
 
   useEffect(() => {
     if (activeModule !== 'simulation') {
@@ -185,6 +188,7 @@ function MainScene() {
       {activeModule !== "market" && !selectedUser && <Footer />}
 
       <VersionSaved />
+      {(commentPositionState !== null || selectedComment !== null) && <ThreadChat/>}
 
     </>
   );

app/src/components/ui/collaboration/Messages.tsx

@@ -10,6 +10,7 @@ import { useCommentStore } from "../../../store/collaboration/useCommentStore";
 import { useSelectedComment, useSocketStore } from "../../../store/builder/store";
 import { getRelativeTime } from "./function/getRelativeTime";
 import { editThreadTitleApi } from "../../../services/factoryBuilder/comments/editThreadTitleApi";
+import { useVersionContext } from "../../../modules/builder/version/versionContext";
 
 
 interface MessageProps {
@@ -34,8 +35,9 @@ const Messages: React.FC<MessageProps> = ({ val, i, setMessages, mode, setIsEdit
   const { threadSocket } = useSocketStore();
   const { userName, userId, organization } = getUserData();
   const [isEditComment, setIsEditComment] = useState(false)
-
   const { selectedComment, setCommentPositionState } = useSelectedComment();
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
 
   // input
   const [value, setValue] = useState<string>(
@@ -59,11 +61,11 @@ const Messages: React.FC<MessageProps> = ({ val, i, setMessages, mode, setIsEdit
 
   const handleSaveAction = async () => {
 
-    if (!projectId) return
+    if (!projectId || !selectedVersion) return
 
     if (isEditableThread && editedThread) {
       try {
-        // const editThreadTitle = await editThreadTitleApi(projectId, (val as CommentSchema).threadId, value)
+        // const editThreadTitle = await editThreadTitleApi(projectId, (val as CommentSchema).threadId, value, selectedVersion?.versionId || "")
         // if (editThreadTitle.message == "ThreadTitle updated Successfully") {
         //   const editedThread: CommentSchema = {
         //     state: 'active',
@@ -74,7 +76,8 @@ const Messages: React.FC<MessageProps> = ({ val, i, setMessages, mode, setIsEdit
         //     lastUpdatedAt: new Date().toISOString(),
         //     position: editThreadTitle.data.position,
         //     rotation: [0, 0, 0],
-        //     comments: []
+        //     comments: [],
+        //  versionId: selectedVersion?.versionId || ""
         //   }
         //   updateComment((val as CommentSchema).threadId, editedThread)
         // }
@@ -84,17 +87,17 @@ const Messages: React.FC<MessageProps> = ({ val, i, setMessages, mode, setIsEdit
           userId,
           threadTitle: value,
           organization,
-          threadId: (val as CommentSchema).threadId
+          threadId: (val as CommentSchema).threadId || selectedComment.threadId,
+          versionId: selectedVersion?.versionId || ""
         }
 
         threadSocket.emit('v1:thread:updateTitle', threadEdit)
       } catch {
       }
     } else {
-
       if (mode === "edit") {
         try {
-          // const editComments = await addCommentsApi(projectId, value, selectedComment?.threadId, (val as Reply).replyId)
+          // const editComments = await addCommentsApi(projectId, value, selectedComment?.threadId, (val as Reply).replyId,  selectedVersion?.versionId || "")
           // 
           // const commentData = {
           //   replyId: `${editComments.data?.replyId}`,
@@ -102,6 +105,7 @@ const Messages: React.FC<MessageProps> = ({ val, i, setMessages, mode, setIsEdit
           //   createdAt: getRelativeTime(editComments.data?.createdAt),
           //   lastUpdatedAt: "2 hrs ago",
           //   comment: value,
+          //  versionId: selectedVersion?.versionId || ""
           // }
 
           // updateReply((val as CommentSchema).threadId, (val as Reply)?.replyId, commentData);
@@ -114,7 +118,8 @@ const Messages: React.FC<MessageProps> = ({ val, i, setMessages, mode, setIsEdit
               comment: value,
               organization,
               threadId: selectedComment?.threadId,
-              commentId: (val as Reply).replyId ?? ""
+              commentId: (val as Reply).replyId ?? "",
+              versionId: selectedVersion?.versionId || ""
             }
 
 
@@ -133,10 +138,10 @@ const Messages: React.FC<MessageProps> = ({ val, i, setMessages, mode, setIsEdit
   }
 
   const handleDeleteAction = async (replyID: any) => {
-    if (!projectId) return
+    if (!projectId || !selectedVersion) return
     setOpenOptions(false);
     try {
-      // const deletedComment = await deleteCommentApi(projectId, selectedComment?.threadId, (val as Reply).replyId)
+      // const deletedComment = await deleteCommentApi(projectId, selectedComment?.threadId, (val as Reply).replyId ,  selectedVersion?.versionId || "")
       // 
       // if (deletedComment === "'Thread comment deleted Successfully'") {
       //   setMessages && setMessages(prev => prev.filter(message => message.replyId !== replyID));
@@ -151,13 +156,16 @@ const Messages: React.FC<MessageProps> = ({ val, i, setMessages, mode, setIsEdit
           userId,
           commentId: (val as Reply).replyId,
           organization,
-          threadId: selectedComment?.threadId
+          threadId: selectedComment?.threadId,
+          versionId: selectedVersion?.versionId || ""
         }
-
+        setMessages(prev => {
-
+          console.log("Previous messages:", prev.map((val) => val)); // 👈 logs the current state
-        setMessages(prev => prev.filter(message => message.replyId !== (val as Reply).replyId))
+          return prev.filter(message => message.replyId !== (val as Reply).replyId);
-
+        });
         removeReply(selectedComment?.threadId, (val as Reply).replyId); // Remove listener after response
+        console.log('(val as Reply).replyId: ', (val as Reply).replyId);
+
         threadSocket.emit("v1-Comment:delete", deleteComment);
       }
     } catch {

app/src/components/ui/collaboration/ThreadChat.tsx

@@ -12,6 +12,7 @@ import { addCommentsApi } from "../../../services/factoryBuilder/comments/addCom
 import { deleteThreadApi } from "../../../services/factoryBuilder/comments/deleteThreadApi";
 import { createThreadApi } from "../../../services/factoryBuilder/comments/createThreadApi";
 import { getRelativeTime } from "./function/getRelativeTime";
+import { useVersionContext } from "../../../modules/builder/version/versionContext";
 
 const ThreadChat: React.FC = () => {
   const { userId, organization } = getUserData();
@@ -34,6 +35,8 @@ const ThreadChat: React.FC = () => {
   const { threadSocket } = useSocketStore();
   const modeRef = useRef<'create' | 'edit' | null>(null);
   const messagesRef = useRef<HTMLDivElement>(null);
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
 
   useEffect(() => {
     modeRef.current = mode;
@@ -48,12 +51,12 @@ const ThreadChat: React.FC = () => {
         )
         .map((c) => {
           return {
-            replyId: c._id ?? "",
+            replyId: c._id ?? c.replyId,
             creatorId: c.creatorId || c.userId,
             createdAt: c.createdAt,
             lastUpdatedAt: "1 hr ago",
             comment: c.comment,
-            _id: c._id ?? "",
+            _id: c._id ?? c.replyId,
           };
         });
 
@@ -61,7 +64,7 @@ const ThreadChat: React.FC = () => {
 
     }
 
-  }, [selectedComment])
+  }, [])
 
   useEffect(() => {
     if (textareaRef.current) adjustHeight(textareaRef.current);
@@ -143,7 +146,7 @@ const ThreadChat: React.FC = () => {
   const handleCreateComments = async (e: any) => {
     e.preventDefault();
     try {
-      // const createComments = await addCommentsApi(projectId, value, selectedComment?.threadId)/ 
+      // const createComments = await addCommentsApi(projectId, value, selectedComment?.threadId,  selectedVersion?.versionId || "")/ 
       // if (createComments.message === 'Thread comments add Successfully' && createComments.data) {
       //     const commentData = {
       //         replyId: `${createComments.data?._id}`,
@@ -151,6 +154,7 @@ const ThreadChat: React.FC = () => {
       //         createdAt: "2 hrs ago",
       //         lastUpdatedAt: "2 hrs ago",
       //         comment: value,
+      //  versionId: selectedVersion?.versionId || ""
       //     }
       //     setMessages((prevMessages) => [
       //         ...prevMessages,
@@ -162,11 +166,13 @@ const ThreadChat: React.FC = () => {
 
       if (threadSocket && mode === "create") {
         const addComment = {
+          versionId: selectedVersion?.versionId || "",
           projectId,
           userId,
           comment: value,
           organization,
-          threadId: selectedComment?.threadId
+          threadId: selectedComment?.threadId,
+
         }
 
         threadSocket.emit("v1-Comment:add", addComment);
@@ -179,19 +185,21 @@ const ThreadChat: React.FC = () => {
   const handleDeleteThread = async () => {
     if (!projectId) return;
     try {
-      // const deleteThread = await deleteThreadApi(projectId, selectedComment?.threadId)
+      // const deleteThread = await deleteThreadApi(projectId, selectedComment?.threadId, selectedVersion?.versionId || "")
       // 
       // if (deleteThread.message === "Thread deleted Successfully") {
       //     removeComment(selectedComment?.threadId)
       //     setSelectedComment([])
       // }
+      console.log('threadSocket:threadChat ', threadSocket);
       if (threadSocket) {
         // projectId, userId, organization, threadId
         const deleteThread = {
           projectId,
           userId,
           organization,
-          threadId: selectedComment?.threadId
+          threadId: selectedComment?.threadId,
+          versionId: selectedVersion?.versionId || ""
         }
 
         setSelectedComment(null)
@@ -211,11 +219,12 @@ const ThreadChat: React.FC = () => {
     try {
       //     try {
       // const thread = await createThreadApi(
-      //     projectId,
+      //   projectId,
-      //     "active",
+      //   "active",
-      //     commentPositionState[0].position,
+      //   commentPositionState[0].position,
-      //     [0, 0, 0],
+      //   [0, 0, 0],
-      //     value
+      //   value,
+      //   selectedVersion?.versionId || ""
       // );
       // 
       // 
@@ -241,15 +250,17 @@ const ThreadChat: React.FC = () => {
 
       const createThread = {
         projectId,
+        versionId: selectedVersion?.versionId || "",
         userId,
         organization,
         state: "active",
         position: commentPositionState.position,
         rotation: [0, 0, 0],
-        threadTitle: value
+        threadTitle: value,
       };
 
       if (threadSocket) {
+        console.log('createThread: ', createThread);
 
         setInputActive(false);
         threadSocket.emit("v1:thread:create", createThread);

app/src/modules/collaboration/comments/instances/commentInstances.tsx

@@ -5,16 +5,19 @@ import { getAllThreads } from '../../../../services/factoryBuilder/comments/getA
 import { useParams } from 'react-router-dom';
 import { getUserData } from '../../../../functions/getUserData';
 import { getRelativeTime } from '../../../../components/ui/collaboration/function/getRelativeTime';
+import { useVersionContext } from '../../../builder/version/versionContext';
 
 function CommentInstances() {
     const { comments, setComments } = useCommentStore();
     const { projectId } = useParams();
-    const { userId } = getUserData()
+    const { userId } = getUserData();
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
 
     const getThreads = async () => {
-        if (!projectId) return;
+        if (!projectId || !selectedVersion) return;
         try {
-            const getComments = await getAllThreads(projectId);
+            const getComments = await getAllThreads(projectId, selectedVersion?.versionId);
 
             const formattedThreads = Array.isArray(getComments.data)
                 ? getComments.data.map((thread: any) => ({

app/src/modules/collaboration/socket/threadSocketResponses.dev.tsx

@@ -14,12 +14,13 @@ interface ThreadSocketProps {
 const ThreadSocketResponsesDev = ({ setMessages, modeRef, messages }: ThreadSocketProps) => {
     const { threadSocket } = useSocketStore();
     const { selectedComment, setSelectedComment, setCommentPositionState, commentPositionState } = useSelectedComment();
-    const { comments, addComment, addReply, updateComment, updateReply } = useCommentStore();
+    const { comments, removeReply, addComment, addReply, updateComment, updateReply } = useCommentStore();
     const { userId } = getUserData();
 
     useEffect(() => {
         if (!threadSocket) return;
 
+
         // --- Add Comment Handler ---
         // const handleAddComment = (data: any) => {
         //     
@@ -55,52 +56,56 @@ const ThreadSocketResponsesDev = ({ setMessages, modeRef, messages }: ThreadSock
         // };
         // threadSocket.on('v1-Comment:response:add', handleAddComment);
         const handleAddComment = (data: any) => {
-            // console.log('Add: ', data);
+
+
 
             const commentData = {
                 replyId: data.data?._id,
                 creatorId: data.data?.userId,
                 createdAt: getRelativeTime(data.data?.createdAt),
                 lastUpdatedAt: "2 hrs ago",
-                comment: data.data.comment,
+                comment: data.data?.comment,
             };
 
             if (modeRef.current === "create") {
-
-
                 addReply(selectedComment?.threadId, commentData);
                 setMessages((prevMessages) => [...prevMessages, commentData]);
             } else if (modeRef.current === "edit") {
-
                 updateReply(selectedComment?.threadId, data.data?._id, commentData);
                 setMessages((prev) =>
                     prev.map((message) => {
                         // 👈 log each message
+
+
                         return message.replyId === data.data?._id
                             ? { ...message, comment: data.data?.comment }
                             : message;
                     })
                 );
-                // console.log('data.data?.comment: ', data.data?.comment);
+
             } else {
 
             }
 
-            threadSocket.off("v1-Comment:response:add", handleAddComment);
         };
         threadSocket.on('v1-Comment:response:add', handleAddComment);
         // --- Delete Comment Handler ---
 
         const handleDeleteComment = (data: any) => {
-            // console.log('delete: ', data);
 
-            threadSocket.off('v1-Comment:response:delete', handleDeleteComment);
+            // setMessages(prev => {
+            //      // 👈 logs the current state
+            //     return prev.filter(message => message.replyId !== data.data._id);
+            // });
+
+            // removeReply(selectedComment?.threadId, data.data._id);
+            // 
         };
         threadSocket.on('v1-Comment:response:delete', handleDeleteComment);
 
         // --- Create Thread Handler ---
         const handleCreateThread = (data: any) => {
-            // console.log('createThread: ', data);
+
 
             const comment: CommentSchema = {
                 state: 'active',
@@ -117,20 +122,28 @@ const ThreadSocketResponsesDev = ({ setMessages, modeRef, messages }: ThreadSock
             addComment(comment);
             setCommentPositionState(null);
             // setSelectedComment(null);
-            threadSocket.off('v1-thread:response:create', handleCreateThread);
         };
         threadSocket.on('v1-thread:response:create', handleCreateThread);
 
         // --- Delete Thread Handler ---
+        // const handleDeleteThread = (data: any) => {
+        //     
+
+        // };
+        // threadSocket.on("v1-thread:response:delete", handleDeleteThread);
+        console.log(
+            "del"
+        );
         const handleDeleteThread = (data: any) => {
 
-            threadSocket.off('v1-thread:response:delete', handleDeleteThread);
         };
-        threadSocket.on('v1-thread:response:delete', handleDeleteThread);
+        threadSocket.on("v1-thread:response:delete", handleDeleteThread);
+
 
 
         const handleEditThread = (data: any) => {
 
+
             const editedThread: CommentSchema = {
                 state: 'active',
                 threadId: data.data?._id,
@@ -138,17 +151,16 @@ const ThreadSocketResponsesDev = ({ setMessages, modeRef, messages }: ThreadSock
                 createdAt: data.data?.createdAt,
                 threadTitle: data.data?.threadTitle,
                 lastUpdatedAt: new Date().toISOString(),
-                position: data.data.position,
+                position: data.data?.position,
                 rotation: [0, 0, 0],
-                comments: data.data.comments,
+                comments: data.data?.comments,
             };
 
-            // console.log('data.data?._id: ', data.data?._id);
+            // 
             updateComment(data.data?._id, editedThread);
             setSelectedComment(editedThread)
 
             // setSelectedComment(null);
-
         };
         threadSocket.on('v1-thread:response:updateTitle', handleEditThread);
 

app/src/pages/Project.tsx

@@ -29,7 +29,6 @@ import { SceneProvider } from "../modules/scene/sceneContext";
 import { getVersionHistoryApi } from "../services/factoryBuilder/versionControl/getVersionHistoryApi";
 import { useVersionHistoryStore } from "../store/builder/useVersionHistoryStore";
 import { VersionProvider } from "../modules/builder/version/versionContext";
-import ThreadChat from "../components/ui/collaboration/ThreadChat";
 
 const Project: React.FC = () => {
 	let navigate = useNavigate();
@@ -47,7 +46,7 @@ const Project: React.FC = () => {
 	const { selectedUser } = useSelectedUserStore();
 	const { isLogListVisible } = useLogger();
 	const { setVersions } = useVersionHistoryStore();
-	const { selectedComment, commentPositionState } = useSelectedComment();
+
 
 	useEffect(() => {
 		if (!email || !userId) {
@@ -132,7 +131,7 @@ const Project: React.FC = () => {
 					<LogList />
 				</RenderOverlay>
 			)}
-			{(commentPositionState !== null || selectedComment !== null) && <ThreadChat />}
+
 		</div>
 	);
 };

app/src/services/factoryBuilder/comments/deleteThreadApi.ts

@@ -1,10 +1,15 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 // let url_Backend_dwinzo = `http://192.168.0.102:5000`;
 
-export const deleteThreadApi = async (projectId: string, threadId: string) => {
+export const deleteThreadApi = async (
+  projectId: string,
+  threadId: string,
+  versionId: string
+) => {
   const body: any = {
     projectId,
     threadId,
+    versionId,
   };
 
   try {

app/src/services/factoryBuilder/comments/getAllThreads.ts

@@ -1,9 +1,10 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 
-export const getAllThreads = async (projectId: string) => {
+export const getAllThreads = async (projectId: string, versionId: string) => {
+  console.log("projectId: ", projectId, versionId);
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/v1/Threads/${projectId}`,
+      `${url_Backend_dwinzo}/api/v1/Threads/${projectId}/${versionId}`,
       {
         method: "GET",
         headers: {
@@ -21,7 +22,6 @@ export const getAllThreads = async (projectId: string) => {
     }
 
     const result = await response.json();
-    console.log('result: ', result);
 
     return result;
   } catch (error) {