added collabcam socket response

app/src/app.tsx

@@ -1,14 +1,16 @@
-import React, { useEffect } from "react";
 import { Cache } from "three";
+import React, { useEffect } from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { LoggerProvider } from "./components/ui/log/LoggerContext";
+
+import UserAuth from "./pages/UserAuth";
+import ForgotPassword from "./pages/ForgotPassword";
 import Dashboard from "./pages/Dashboard";
 import Project from "./pages/Project";
-import UserAuth from "./pages/UserAuth";
-import "./styles/main.scss";
-import { LoggerProvider } from "./components/ui/log/LoggerContext";
-import ForgotPassword from "./pages/ForgotPassword";
 import PageNotFound from "./pages/PageNotFound";
 
+import "./styles/main.scss";
+
 const App: React.FC = () => {
     useEffect(() => {
         Cache.clear();

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

@@ -65,7 +65,9 @@ function MainScene() {
 
     useEffect(() => {
         if (builderSocket && projectId) {
+            setTimeout(() => {
                 builderSocket.emit("joinRoom", { projectId: projectId });
+            }, 1000);
         }
     }, [builderSocket, projectId]);
 

app/src/components/layout/sidebarRight/Header.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import orgImg from "../../../assets/image/orgTemp.png";
-import { useActiveUsers, useCamMode } from "../../../store/builder/store";
+import { useCamMode } from "../../../store/builder/store";
-import { ActiveUser } from "../../../types/users";
 import CollaborationPopup from "../../templates/CollaborationPopup";
 import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
 import { useSelectedUserStore } from "../../../store/collaboration/useCollabStore";
@@ -9,16 +8,16 @@ import { useToggleStore } from "../../../store/ui/useUIToggleStore";
 import { ToggleSidebarIcon } from "../../icons/HeaderIcons";
 import useModuleStore from "../../../store/ui/useModuleStore";
 import { getUserData } from "../../../functions/getUserData";
+import { useSceneContext } from "../../../modules/scene/sceneContext";
 
 const Header: React.FC = () => {
-  const { activeUsers } = useActiveUsers();
+    const { collabUsersStore } = useSceneContext();
-  const { userName } = getUserData();
+    const { collabUsers } = collabUsersStore();
+    const { userId, userName } = getUserData();
     const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
     const { activeModule } = useModuleStore();
 
-  const guestUsers: ActiveUser[] = activeUsers.filter(
+    const guestUsers = collabUsers.filter((user) => user.userId !== userId);
-    (user: ActiveUser) => user.userName !== userName
-  );
 
     const [userManagement, setUserManagement] = useState(false);
     const { setSelectedUser } = useSelectedUserStore();
@@ -56,28 +55,20 @@ const Header: React.FC = () => {
 
     return (
         <>
-      {userManagement && (
+            {userManagement && <CollaborationPopup setUserManagement={setUserManagement} />}
-        <CollaborationPopup setUserManagement={setUserManagement} />
-      )}
             <div className="header-container">
                 <div className="options-container">
                     <button
                         id="toggle-rightSidebar-ui-button"
-            className={`toggle-sidebar-ui-button ${!toggleUIRight ? "active" : ""
+                        className={`toggle-sidebar-ui-button ${!toggleUIRight ? "active" : ""}`}
-              }`}
                         onClick={() => {
                             if (activeModule !== "market") {
                                 setToggleUI(toggleUILeft, !toggleUIRight);
-                localStorage.setItem(
+                                localStorage.setItem("navBarUiRight", JSON.stringify(!toggleUIRight));
-                  "navBarUiRight",
-                  JSON.stringify(!toggleUIRight)
-                );
                             }
                         }}
                     >
-            <div className="tooltip">
+                        <div className="tooltip">{toggleUIRight ? "Hide" : "Show"} sidebar (ctrl + ])</div>
-              {toggleUIRight ? "Hide" : "Show"} sidebar (ctrl + ])
-            </div>
                         <ToggleSidebarIcon />
                     </button>
                     <button
@@ -96,9 +87,7 @@ const Header: React.FC = () => {
                 <div className="split"></div>
                 <div className="users-container">
                     <div className="guest-users-container">
-            {guestUsers.length > 3 && (
+                        {guestUsers.length > 3 && <div className="other-guest">+{guestUsers.length - 3}</div>}
-              <div className="other-guest">+{guestUsers.length - 3}</div>
-            )}
                         {guestUsers.slice(0, 3).map((user, index) => (
                             <button
                                 id="user-profile-button"

app/src/components/templates/CollaborationPopup.tsx

@@ -1,11 +1,9 @@
 import React, { useEffect, useState } from "react";
 import RenderOverlay from "./Overlay";
-import { ArrowIcon, CloseIcon } from "../icons/ExportCommonIcons";
+import { CloseIcon } from "../icons/ExportCommonIcons";
 import { AccessOption, User } from "../../types/users";
 import RegularDropDown from "../ui/inputs/RegularDropDown";
-import { access } from "fs";
 import MultiEmailInvite from "../ui/inputs/MultiEmailInvite";
-import { useActiveUsers } from "../../store/builder/store";
 import { getUserData } from "../../functions/getUserData";
 import { getProjectSharedList } from "../../services/factoryBuilder/collab/project/getProjectSharedList";
 import { useParams } from "react-router-dom";
@@ -21,42 +19,27 @@ const UserListTemplate: React.FC<UserListTemplateProps> = ({ user }) => {
     const { projectId } = useParams();
 
     const accessUpdate = async ({ option }: AccessOption) => {
-    if (!projectId) return
+        if (!projectId) return;
-    const accessSelection = await shareAccess(projectId, user.userId, option)
+        const accessSelection = await shareAccess(projectId, user.userId, option);
         setAccessSelection(option);
-  }
+    };
 
     return (
         <div className="user-list-container">
             <div className="user-details">
                 <div className="profile-image">
                     {user.profileImage ? (
-            <img
+                        <img src={user.profileImage || "https://via.placeholder.com/150"} alt={`${user.userName}'s profile`} />
-              src={user.profileImage || "https://via.placeholder.com/150"}
-              alt={`${user.
-                userName}'s profile`}
-            />
                     ) : (
-            <div
+                        <div className="no-profile-container" style={{ background: getAvatarColor(1, user.userId) }}>
-              className="no-profile-container"
+                            {user.userName.charAt(0).toUpperCase()}
-              style={{ background: getAvatarColor(1, user.userId) }}
-            >
-              {user.
-                userName.charAt(0).toUpperCase()}
                         </div>
                     )}
                 </div>
-        <div className="user-name"> {user.
+                <div className="user-name"> {user.userName.charAt(0).toUpperCase() + user.userName.slice(1).toLowerCase()}</div>
-          userName.charAt(0).toUpperCase() + user.
-            userName.slice(1).toLowerCase()}</div>
             </div>
             <div className="user-access">
-        <RegularDropDown
+                <RegularDropDown header={accessSelection} options={["Admin", "User", "Viewer"]} onSelect={(option) => accessUpdate({ option })} search={false} />
-          header={accessSelection}
-          options={["Admin", "User", "Viewer"]}
-          onSelect={(option) => accessUpdate({ option })}
-          search={false}
-        />
                 {/* <ArrowIcon /> */}
             </div>
         </div>
@@ -67,31 +50,25 @@ interface CollaborateProps {
     setUserManagement: (value: boolean) => void;
 }
 
-const CollaborationPopup: React.FC<CollaborateProps> = ({
+const CollaborationPopup: React.FC<CollaborateProps> = ({ setUserManagement }) => {
-  setUserManagement,
-}) => {
-  const { activeUsers } = useActiveUsers();
     const { userName } = getUserData();
-  const [users, setUsers] = useState([])
+    const [users, setUsers] = useState([]);
     const { projectId } = useParams();
 
     function getData() {
         if (!projectId) return;
-    getProjectSharedList(projectId).then((allUser) => {
+        getProjectSharedList(projectId)
-      const accesMail = allUser?.datas || []
+            .then((allUser) => {
-      setUsers(accesMail)
+                const accesMail = allUser?.datas || [];
-    }).catch((err) => {
+                setUsers(accesMail);
-
             })
+            .catch((err) => {});
     }
 
     useEffect(() => {
         getData();
-  }, [])
+    }, []);
 
-  useEffect(() => {
-    // 
-  }, [activeUsers]);
     return (
         <RenderOverlay>
             <div
@@ -131,9 +108,7 @@ const CollaborationPopup: React.FC<CollaborateProps> = ({
                             <div className="general-access-container">
                                 <div className="team-container">
                                     <div className="project-name">Untitled</div>
-                  <div className="number-of-peoples-have-access">
+                                    <div className="number-of-peoples-have-access">{users.length} persons</div>
-                    {users.length} persons
-                  </div>
                                 </div>
                             </div>
                             <div className="users-list-container">

app/src/components/ui/FileMenu.tsx

@@ -14,7 +14,6 @@ const FileMenu: React.FC = () => {
     const containerRef = useRef<HTMLButtonElement>(null);
     let clickTimeout: NodeJS.Timeout | null = null;
     const { projectName, setProjectName } = useProjectName();
-    // const { dashBoardSocket } = useSocketStore();
     const { projectId } = useParams();
     const { userId, organization, email } = getUserData();
 
@@ -58,16 +57,6 @@ const FileMenu: React.FC = () => {
                 projectName,
                 thumbnail: undefined,
             };
-
-            // if (dashBoardSocket) {
-            //   const handleResponse = (data: any) => {
-            //     console.log('Project update response:', data);
-            //     dashBoardSocket.off("v1-project:response:update", handleResponse); // Clean up
-            //   };
-            //   dashBoardSocket.on("v1-project:response:update", handleResponse);
-            //   dashBoardSocket.emit("v1:project:update", updateProjects);
-            // }
-
             //API for projects rename
 
             const updatedProjectName = await updateProjectApi(projectId, undefined, projectName);

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

@@ -34,7 +34,7 @@ const Messages: React.FC<MessageProps> = ({ val, i, setMessages, mode, setIsEdit
     const [isEditComment, setIsEditComment] = useState(false);
     const { selectedComment, setCommentPositionState } = useSelectedComment();
     const { versionStore, threadStore } = useSceneContext();
-    const { updateComment, removeReply, updateReply } = threadStore();
+    const { updateThread, removeReply, updateReply } = threadStore();
     const { selectedVersion } = versionStore();
 
     const [value, setValue] = useState<string>("comment" in val ? val.comment : val.threadTitle);
@@ -71,7 +71,7 @@ const Messages: React.FC<MessageProps> = ({ val, i, setMessages, mode, setIsEdit
                             rotation: [0, 0, 0],
                             comments: [],
                         };
-                        updateComment((val as ThreadSchema).threadId, editedThread);
+                        updateThread((val as ThreadSchema).threadId, editedThread);
                     }
                 });
             } else {

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

@@ -36,7 +36,7 @@ const ThreadChat: React.FC = () => {
     const messagesRef = useRef<HTMLDivElement>(null);
     const { versionStore, threadStore } = useSceneContext();
     const { selectedVersion } = versionStore();
-    const { addComment, removeComment, addReply, threads } = threadStore();
+    const { addThread, removeThread, addReply, threads } = threadStore();
 
     useEffect(() => {
         modeRef.current = mode;
@@ -157,7 +157,7 @@ const ThreadChat: React.FC = () => {
         } else if (threadSocket?.connected && mode === "create") {
             // SOCKET
 
-            const addComment = {
+            const addThread = {
                 versionId: selectedVersion?.versionId || "",
                 projectId,
                 userId,
@@ -166,7 +166,7 @@ const ThreadChat: React.FC = () => {
                 threadId: selectedComment?.threadId,
             };
 
-            threadSocket.emit("v1-Comment:add", addComment);
+            threadSocket.emit("v1-Comment:add", addThread);
         }
         setInputActive(false);
     };
@@ -179,7 +179,7 @@ const ThreadChat: React.FC = () => {
 
             deleteThreadApi(projectId, selectedComment?.threadId, selectedVersion?.versionId || "").then((deleteThread) => {
                 if (deleteThread.message === "Thread deleted Successfully") {
-                    removeComment(selectedComment?.threadId);
+                    removeThread(selectedComment?.threadId);
                     setSelectedComment(null);
                 }
             });
@@ -194,7 +194,7 @@ const ThreadChat: React.FC = () => {
                 versionId: selectedVersion?.versionId || "",
             };
             setSelectedComment(null);
-            removeComment(selectedComment?.threadId);
+            removeThread(selectedComment?.threadId);
             threadSocket.emit("v1:thread:delete", deleteThread);
         }
     };
@@ -219,7 +219,7 @@ const ThreadChat: React.FC = () => {
                         rotation: [0, 0, 0],
                         comments: [],
                     };
-                    addComment(comment);
+                    addThread(comment);
                     setCommentPositionState(null);
                     setInputActive(false);
                     setSelectedComment(null);

app/src/components/ui/log/LoggerContext.tsx

@@ -1,12 +1,5 @@
 // LoggerProvider.tsx
-import React, {
+import React, { createContext, useContext, useState, useCallback, useMemo, useEffect } from "react";
-  createContext,
-  useContext,
-  useState,
-  useCallback,
-  useMemo,
-  useEffect,
-} from "react";
 import { MathUtils } from "three";
 
 export type LogType = "log" | "info" | "warning" | "error" | "success";
@@ -35,9 +28,7 @@ interface LoggerContextValue {
 
 const LoggerContext = createContext<LoggerContextValue | undefined>(undefined);
 
-export const LoggerProvider: React.FC<{ children: React.ReactNode }> = ({
+export const LoggerProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  children,
-}) => {
     const [logs, setLogs] = useState<LogEntry[]>([]);
     const [isLogListVisible, setIsLogListVisible] = useState<boolean>(false);
     const [selectedTab, setSelectedTab] = useState<LogType | "all">("all");
@@ -67,23 +58,13 @@ export const LoggerProvider: React.FC<{ children: React.ReactNode }> = ({
             success: (message: string) => addLog("success", message),
             clear: () => {
                 if (selectedTab !== "all") {
-          setLogs((prevLogs) =>
+                    setLogs((prevLogs) => prevLogs.filter((log) => log.type !== selectedTab));
-            prevLogs.filter((log) => log.type !== selectedTab)
-          );
                 } else {
                     setLogs([]);
                 }
             },
         }),
-    [
+        [logs, setLogs, isLogListVisible, setIsLogListVisible, selectedTab, setSelectedTab, addLog]
-      logs,
-      setLogs,
-      isLogListVisible,
-      setIsLogListVisible,
-      selectedTab,
-      setSelectedTab,
-      addLog,
-    ]
     );
     useEffect(() => {
         (window as any).echo = {
@@ -96,11 +77,7 @@ export const LoggerProvider: React.FC<{ children: React.ReactNode }> = ({
         };
     }, [loggerMethods]);
 
-  return (
+    return <LoggerContext.Provider value={loggerMethods}>{children}</LoggerContext.Provider>;
-    <LoggerContext.Provider value={loggerMethods}>
-      {children}
-    </LoggerContext.Provider>
-  );
 };
 
 export const useLogger = () => {

app/src/modules/collaboration/camera/collabCams.tsx

@@ -1,18 +1,8 @@
 import * as THREE from "three";
-import { Html } from "@react-three/drei";
+import { Html, useGLTF } from "@react-three/drei";
-import { useNavigate } from "react-router-dom";
+import { useRef } from "react";
-import { useEffect, useRef, useState } from "react";
+import { useFrame } from "@react-three/fiber";
-import { useFrame, useThree } from "@react-three/fiber";
+import { useSceneContext } from "../../scene/sceneContext";
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
-import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
-import { useActiveUsers, useCamMode } from "../../../store/builder/store";
-import { useSocketStore } from "../../../store/socket/useSocketStore";
-import useModuleStore from "../../../store/ui/useModuleStore";
-import { useSelectedUserStore } from "../../../store/collaboration/useCollabStore";
-import { usePlayButtonStore } from "../../../store/ui/usePlayButtonStore";
-
-import setCameraView from "../functions/setCameraView";
-import getActiveUsersData from "../../../services/factoryBuilder/collab/users/getActiveUsers";
 import { getUserData } from "../../../functions/getUserData";
 import { getAvatarColor } from "../functions/getAvatarColor";
 
@@ -20,195 +10,42 @@ import CollabUserIcon from "./collabUserIcon";
 import camModel from "../../../assets/gltf-glb/camera face 2.gltf";
 
 const CamModelsGroup = () => {
-    const navigate = useNavigate();
+    const { collabUsersStore } = useSceneContext();
-    const groupRef = useRef<THREE.Group>(null);
+    const { collabUsers } = collabUsersStore();
-    const { organization, email } = getUserData();
+    const model: any = useGLTF(camModel);
-    const { setActiveUsers } = useActiveUsers();
+    const { userId: currentUserId } = getUserData();
-    const { builderSocket } = useSocketStore();
-    const { activeModule } = useModuleStore();
-    const { selectedUser, setSelectedUser } = useSelectedUserStore();
-    const { isPlaying } = usePlayButtonStore();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const loader = new GLTFLoader();
-    const dracoLoader = new DRACOLoader();
-    dracoLoader.setDecoderPath("three/examples/jsm/libs/draco/gltf/");
-    loader.setDRACOLoader(dracoLoader);
-
-    const { camMode } = useCamMode();
-    const { camera, controls } = useThree();
-
-    useEffect(() => {
-        if (camMode !== "FollowPerson") return;
-        if (selectedUser?.location) {
-            const { position, rotation, target } = selectedUser.location;
-            if (rotation && target)
-                setCameraView({
-                    controls,
-                    camera,
-                    position,
-                    rotation,
-                    target,
-                    username: selectedUser.name,
-                });
-        }
-    }, [selectedUser, camera, controls, camMode]);
-
-    const [cams, setCams] = useState<any[]>([]);
-    const [models, setModels] = useState<
-        Record<
-            string,
-            {
-                targetPosition: THREE.Vector3;
-                targetRotation: THREE.Euler;
-                target: THREE.Vector3;
-            }
-        >
-    >({});
-
-    const dedupeCams = (cams: any[]) => {
-        const seen = new Set();
-        return cams.filter((cam) => {
-            if (seen.has(cam.uuid)) return false;
-            seen.add(cam.uuid);
-            return true;
-        });
-    };
-
-    const dedupeUsers = (users: any[]) => {
-        const seen = new Set();
-        return users.filter((user) => {
-            if (seen.has(user._id)) return false;
-            seen.add(user._id);
-            return true;
-        });
-    };
-
-    useEffect(() => {
-        if (!email) navigate("/");
-
-        if (!builderSocket) return;
-
-        builderSocket.on("userConnectResponse", (data: any) => {
-            if (!groupRef.current) return;
-            if (data.data.userData.email === email) return;
-            if (builderSocket.id === data.socketId || organization !== data.organization) return;
-
-            const model = groupRef.current.getObjectByProperty("uuid", data.data.userData._id);
-            if (model) {
-                groupRef.current.remove(model);
-            }
-
-            loader.load(camModel, (gltf) => {
-                const newModel = gltf.scene.clone();
-                newModel.uuid = data.data.userData._id;
-                newModel.position.set(data.data.position.x, data.data.position.y, data.data.position.z);
-                newModel.rotation.set(data.data.rotation.x, data.data.rotation.y, data.data.rotation.z);
-                newModel.userData = data.data.userData;
-                newModel.userData.target = new THREE.Vector3(data.data.target.x, data.data.target.y, data.data.target.z);
-
-                setCams((prev) => dedupeCams([...prev, newModel]));
-                setActiveUsers((prev: any) => dedupeUsers([...prev, data.data.userData]));
-            });
-        });
-
-        builderSocket.on("userDisConnectResponse", (data: any) => {
-            if (!groupRef.current) return;
-            if (builderSocket.id === data.socketId || organization !== data.organization) return;
-
-            setCams((prev) => prev.filter((cam) => cam.uuid !== data.data.userData._id));
-            setActiveUsers((prev: any) => prev.filter((user: any) => user._id !== data.data.userData._id));
-        });
-
-        builderSocket.on("v1:camera:Response:update", (data: any) => {
-            if (!groupRef.current || builderSocket.id === data.socketId || organization !== data.organization) return;
-
-            if (selectedUser && selectedUser?.id === data.data.userId) {
-                setSelectedUser({
-                    color: selectedUser.color,
-                    name: selectedUser.name,
-                    id: selectedUser.id,
-                    location: {
-                        position: data.data.position,
-                        rotation: data.data.rotation,
-                        target: data.data.target,
-                    },
-                });
-            }
-            setModels((prev) => ({
-                ...prev,
-                [data.data.userId]: {
-                    targetPosition: new THREE.Vector3(data.data.position.x, data.data.position.y, data.data.position.z),
-                    targetRotation: new THREE.Euler(data.data.rotation.x, data.data.rotation.y, data.data.rotation.z),
-                    target: new THREE.Vector3(data.data.target.x, data.data.target.y, data.data.target.z),
-                },
-            }));
-        });
-
-        return () => {
-            builderSocket.off("userConnectResponse");
-            builderSocket.off("userDisConnectResponse");
-            builderSocket.off("v1:camera:Response:update");
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [email, loader, navigate, setActiveUsers, builderSocket]);
-
-    useFrame(() => {
-        if (!groupRef.current) return;
-        Object.keys(models).forEach((uuid) => {
-            const model = groupRef.current!.getObjectByProperty("uuid", uuid);
-            if (!model) return;
-
-            const { targetPosition, targetRotation } = models[uuid];
-            model.position.lerp(targetPosition, 0.1);
-            model.rotation.x = THREE.MathUtils.lerp(model.rotation.x, targetRotation.x, 0.1);
-            model.rotation.y = THREE.MathUtils.lerp(model.rotation.y, targetRotation.y, 0.1);
-            model.rotation.z = THREE.MathUtils.lerp(model.rotation.z, targetRotation.z, 0.1);
-        });
-    });
-
-    useEffect(() => {
-        if (!groupRef.current) return;
-
-        getActiveUsersData(organization)
-            .then((data) => {
-                const filteredData = data.cameraDatas.filter((camera: any) => camera.userData.email !== email);
-
-                if (filteredData.length > 0) {
-                    loader.load(camModel, (gltf) => {
-                        const newCams = filteredData.map((cam: any) => {
-                            const newModel = gltf.scene.clone();
-                            newModel.uuid = cam.userData._id;
-                            newModel.position.set(cam.position.x, cam.position.y, cam.position.z);
-                            newModel.rotation.set(cam.rotation.x, cam.rotation.y, cam.rotation.z);
-                            newModel.userData = cam.userData;
-                            cam.userData.position = newModel.position;
-                            cam.userData.rotation = newModel.rotation;
-                            newModel.userData.target = cam.target;
-
-                            return newModel;
-                        });
-
-                        const users = filteredData.map((cam: any) => cam.userData);
-                        setActiveUsers((prev: any) => dedupeUsers([...prev, ...users]));
-                        setCams((prev) => dedupeCams([...prev, ...newCams]));
-                    });
-                }
-            })
-            .catch(() => {
-                console.log("Error fetching active users data");
-            });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
 
     return (
-        <group ref={groupRef} name="Cam-Model-Group">
+        <group name="Cam-Model-Group">
-            {cams.map((cam, index) => (
+            {collabUsers
-                <primitive
+                .filter((user) => user.userId !== currentUserId)
-                    key={cam.uuid}
+                .map((user, index) => (
-                    //eslint-disable-next-line
+                    <CamModel key={user.userId} index={index} user={user} model={model.scene as THREE.Object3D} />
-                    object={cam}
+                ))}
-                    visible={selectedUser?.name !== cam.userData.userName && activeModule !== "visualization" && !isPlaying}
+        </group>
-                >
+    );
+};
+
+const CamModel = ({ user, model, index }: { user: CollabUsersScheme; model: THREE.Object3D; index: number }) => {
+    const ref = useRef<THREE.Group>(null);
+
+    const targetPos = new THREE.Vector3();
+    const targetQuat = new THREE.Quaternion();
+
+    useFrame((_, delta) => {
+        if (ref.current) {
+            targetPos.set(user.camData.position.x, user.camData.position.y, user.camData.position.z);
+
+            targetQuat.setFromEuler(new THREE.Euler(user.camData.rotation.x, user.camData.rotation.y, user.camData.rotation.z));
+
+            ref.current.position.lerp(targetPos, 5 * delta);
+            ref.current.quaternion.slerp(targetQuat, 5 * delta);
+        }
+    });
+
+    return (
+        <group ref={ref}>
+            <primitive object={model.clone()} />
             <Html
                 as="div"
                 center
@@ -218,24 +55,20 @@ const CamModelsGroup = () => {
                     color: "white",
                     textAlign: "center",
                     fontFamily: "Arial, sans-serif",
-                            display: `${activeModule !== "visualization" ? "" : "none"}`,
-                            opacity: `${selectedUser?.name !== cam.userData.userName && !isPlaying ? 1 : 0}`,
                     transition: "opacity .2s ease",
                 }}
                 position={[-0.015, 0, 0.7]}
             >
                 <CollabUserIcon
-                            userImage={cam.userData.userImage ?? ""}
+                    userImage={""}
-                            userName={cam.userData.userName}
+                    userName={user.userName}
-                            id={cam.userData._id}
+                    id={user.userId}
-                            color={getAvatarColor(index, cam.userData.userName)}
+                    color={getAvatarColor(index, user.userName)}
-                            position={cam.position}
+                    position={user.camData.position}
-                            rotation={cam.rotation}
+                    rotation={user.camData.rotation}
-                            target={cam.userData.target}
+                    target={user.camData.target}
                 />
             </Html>
-                </primitive>
-            ))}
         </group>
     );
 };

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

@@ -16,7 +16,7 @@ const ThreadSocketResponsesDev = ({ setMessages, modeRef, messages }: ThreadSock
     const { threadSocket } = useSocketStore();
     const { selectedComment, setSelectedComment, setCommentPositionState, commentPositionState } = useSelectedComment();
     const { threadStore } = useSceneContext();
-    const { threads, removeReply, addComment, addReply, updateComment, updateReply } = threadStore();
+    const { threads, removeReply, addThread, addReply, updateThread, updateReply } = threadStore();
     const { userId } = getUserData();
 
     useEffect(() => {
@@ -98,7 +98,7 @@ const ThreadSocketResponsesDev = ({ setMessages, modeRef, messages }: ThreadSock
                 comments: [],
             };
             setSelectedComment(comment);
-            addComment(comment);
+            addThread(comment);
             setCommentPositionState(null);
             // setSelectedComment(null);
         };
@@ -128,7 +128,7 @@ const ThreadSocketResponsesDev = ({ setMessages, modeRef, messages }: ThreadSock
             };
 
             //
-            updateComment(data.data?._id, editedThread);
+            updateThread(data.data?._id, editedThread);
             setSelectedComment(editedThread);
 
             // setSelectedComment(null);

app/src/modules/collaboration/socket/userResponses.tsx

@@ -1,8 +1,29 @@
 import { useEffect } from "react";
 import { useSocketStore } from "../../../store/socket/useSocketStore";
+import { useSceneContext } from "../../scene/sceneContext";
 
 function UserResponses() {
     const { builderSocket } = useSocketStore();
+    const { collabUsersStore } = useSceneContext();
+    const { setCollabUsers } = collabUsersStore();
+
+    //#region Users
+    useEffect(() => {
+        if (!builderSocket) return;
+
+        builderSocket.on("v1:room:userDatas", (data: any) => {
+            if (!data?.data?.UsersDetails || data.data.UsersDetails.length === 0) return;
+            console.log("data: ", data.data.UsersDetails);
+            setCollabUsers(data.data.UsersDetails);
+        });
+
+        return () => {
+            if (builderSocket) {
+                builderSocket.off("v1:room:userDatas");
+            }
+        };
+    }, [builderSocket]);
+    //#endregion
 
     //#region Camera
     useEffect(() => {
@@ -10,9 +31,6 @@ function UserResponses() {
 
         builderSocket.on("v1:camera:Response:update", (data: any) => {
             if (!data.message) return;
-            if (data.message === "Model created successfully") {
-            } else if (data.message === "Updated successfully") {
-            }
         });
 
         return () => {

app/src/modules/collaboration/threads/threadInstances/threadInstances.tsx

@@ -10,7 +10,7 @@ function ThreadInstances() {
     const { projectId } = useParams();
     const { userId } = getUserData();
     const { versionStore, threadStore } = useSceneContext();
-    const { threads, setComments } = threadStore();
+    const { threads, setThreads } = threadStore();
     const { selectedVersion } = versionStore();
 
     useEffect(() => {
@@ -36,7 +36,7 @@ function ThreadInstances() {
                               : [],
                       }))
                     : [];
-                setComments(formattedThreads);
+                setThreads(formattedThreads);
             })
             .catch((err) => {
                 console.error("Failed to fetch threads:", err);

app/src/modules/scene/controls/controls.tsx

@@ -82,7 +82,7 @@ export default function Controls() {
 
             setResetCamera(false);
         }
-    }, [resetCamera]);
+    }, [resetCamera, builderSocket, projectId]);
 
     useEffect(() => {
         controlsRef.current?.setBoundary(new THREE.Box3(new THREE.Vector3(...CONSTANTS.threeDimension.boundaryBottom), new THREE.Vector3(...CONSTANTS.threeDimension.boundaryTop)));

app/src/modules/scene/sceneContext.tsx

@@ -24,7 +24,9 @@ import { createStorageUnitStore, StorageUnitStoreType } from "../../store/simula
 import { createHumanStore, HumanStoreType } from "../../store/simulation/useHumanStore";
 import { createCraneStore, CraneStoreType } from "../../store/simulation/useCraneStore";
 
-import { createThreadsStore, ThreadStoreType } from "../../store/collaboration/useCommentStore";
+import { createThreadsStore, ThreadStoreType } from "../../store/collaboration/useThreadStore";
+
+import { createCollabusersStore, CollabUsersStoreType } from "../../store/collaboration/useCollabUsersStore";
 
 type SceneContextValue = {
     versionStore: VersionStoreType;
@@ -53,6 +55,8 @@ type SceneContextValue = {
 
     threadStore: ThreadStoreType;
 
+    collabUsersStore: CollabUsersStoreType;
+
     humanEventManagerRef: React.RefObject<HumanEventManagerState>;
     craneEventManagerRef: React.RefObject<CraneEventManagerState>;
 
@@ -90,6 +94,8 @@ export function SceneProvider({ children, layout }: { readonly children: React.R
 
     const threadStore = useMemo(() => createThreadsStore(), []);
 
+    const collabUsersStore = useMemo(() => createCollabusersStore(), []);
+
     const humanEventManagerRef = useRef<HumanEventManagerState>({ humanStates: [] });
     const craneEventManagerRef = useRef<CraneEventManagerState>({ craneStates: [] });
 
@@ -114,7 +120,8 @@ export function SceneProvider({ children, layout }: { readonly children: React.R
             storageUnitStore.getState().clearStorageUnits();
             humanStore.getState().clearHumans();
             craneStore.getState().clearCranes();
-            threadStore.getState().clearComments();
+            threadStore.getState().clearThreads();
+            collabUsersStore.getState().clearCollabUsers();
             humanEventManagerRef.current.humanStates = [];
             craneEventManagerRef.current.craneStates = [];
         },
@@ -139,6 +146,7 @@ export function SceneProvider({ children, layout }: { readonly children: React.R
             humanStore,
             craneStore,
             threadStore,
+            collabUsersStore,
         ]
     );
 
@@ -164,6 +172,7 @@ export function SceneProvider({ children, layout }: { readonly children: React.R
             humanStore,
             craneStore,
             threadStore,
+            collabUsersStore,
             humanEventManagerRef,
             craneEventManagerRef,
             clearStores,
@@ -190,6 +199,7 @@ export function SceneProvider({ children, layout }: { readonly children: React.R
             humanStore,
             craneStore,
             threadStore,
+            collabUsersStore,
             clearStores,
             layout,
         ]

app/src/pages/Dashboard.tsx

@@ -13,7 +13,7 @@ const Dashboard: React.FC = () => {
         const token = localStorage.getItem("token");
         const refreshToken = localStorage.getItem("refreshToken");
         if (token && refreshToken) {
-            useSocketStore.getState().initializeDashBoardSocket(token, refreshToken);
+            useSocketStore.getState().initializeProjectSocket(token, refreshToken);
         }
     }, [email, organization]);
 

app/src/pages/Project.tsx

@@ -24,7 +24,17 @@ const Project: React.FC = () => {
     let navigate = useNavigate();
     const echo = useLogger();
     const { setActiveModule } = useModuleStore();
-    const { initializeBuilderSocket, initializeVisualizationSocket, initializeThreadSocket, disconnectBuilderSocket, disconnectVisualizationSocket, disconnectThreadSocket } = useSocketStore();
+    const {
+        builderSocket,
+        visualizationSocket,
+        threadSocket,
+        initializeBuilderSocket,
+        initializeVisualizationSocket,
+        initializeThreadSocket,
+        disconnectBuilderSocket,
+        disconnectVisualizationSocket,
+        disconnectThreadSocket,
+    } = useSocketStore();
     const { projectId } = useParams();
     const { setProjectName } = useProjectName();
     const { userId, email } = getUserData();
@@ -33,6 +43,7 @@ const Project: React.FC = () => {
     const { activeTool } = useActiveTool();
 
     useEffect(() => {
+        setActiveModule("builder");
         if (!email || !userId) {
             console.error("User data not found in localStorage");
             navigate("/page-not-found");
@@ -64,30 +75,65 @@ const Project: React.FC = () => {
     }, [projectId]);
 
     useEffect(() => {
-        setActiveModule("builder");
-        if (email) {
         const token = localStorage.getItem("token");
         const refreshToken = localStorage.getItem("refreshToken");
-            echo.warn("Validating token");
+        
         if (token && refreshToken && projectId) {
+            echo.warn("Validating token");
             initializeBuilderSocket(token, refreshToken, projectId);
-                initializeVisualizationSocket(token, refreshToken, projectId);
+            echo.success("Builder socket initialized");
-                initializeThreadSocket(token, refreshToken, projectId);
-            }
-            echo.success("Project initialized and loaded successfully");
         } else {
             navigate("/");
+            return;
         }
 
-        // eslint-disable-next-line react-hooks/exhaustive-deps
         return () => {
-            if (projectId) {
+            if (projectId && builderSocket) {
                 disconnectBuilderSocket(projectId);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [projectId, builderSocket]);
+
+    useEffect(() => {
+        const token = localStorage.getItem("token");
+        const refreshToken = localStorage.getItem("refreshToken");
+        
+        if (token && refreshToken && projectId) {
+            initializeVisualizationSocket(token, refreshToken, projectId);
+            echo.success("Visualization socket initialized");
+        } else {
+            navigate("/");
+            return;
+        }
+
+        return () => {
+            if (projectId && visualizationSocket) {
                 disconnectVisualizationSocket(projectId);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [projectId, visualizationSocket]);
+
+    useEffect(() => {
+        const token = localStorage.getItem("token");
+        const refreshToken = localStorage.getItem("refreshToken");
+        
+        if (token && refreshToken && projectId) {
+            initializeThreadSocket(token, refreshToken, projectId);
+            echo.success("Thread socket initialized");
+        } else {
+            navigate("/");
+            return;
+        }
+
+        return () => {
+            if (projectId && threadSocket) {
                 disconnectThreadSocket(projectId);
             }
         };
-    }, [projectId]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [projectId, threadSocket]);
 
     useEffect(() => {
         handleCanvasCursors(activeTool);

app/src/services/factoryBuilder/collab/comments/addCommentApi.ts

@@ -2,7 +2,7 @@ let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_UR
 
 export const addCommentsApi = async (projectId: any, comment: string, threadId: string, versionId: string) => {
     try {
-        const response = await fetch(`${url_Backend_dwinzo}/api/V1/Thread/addComment`, {
+        const response = await fetch(`${url_Backend_dwinzo}/api/V1/Thread/addThread`, {
             method: "POST",
             headers: {
                 Authorization: "Bearer <access_token>",

app/src/services/factoryBuilder/collab/comments/editCommentApi.ts

@@ -2,7 +2,7 @@ let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_UR
 
 export const editCommentsApi = async (projectId: any, comment: string, commentId: string, threadId: string, versionId: string) => {
     try {
-        const response = await fetch(`${url_Backend_dwinzo}/api/V1/Thread/addComment`, {
+        const response = await fetch(`${url_Backend_dwinzo}/api/V1/Thread/addThread`, {
             method: "POST",
             headers: {
                 Authorization: "Bearer <access_token>",

app/src/store/builder/store.ts

@@ -145,14 +145,6 @@ export const useDrieTemp = create<any>((set: any) => ({
     setDrieTemp: (x: any) => set({ drieTemp: x }),
 }));
 
-export const useActiveUsers = create<any>((set: any) => ({
-    activeUsers: [],
-    setActiveUsers: (callback: (prev: any[]) => any[] | any[]) =>
-        set((state: { activeUsers: any[] }) => ({
-            activeUsers: typeof callback === "function" ? callback(state.activeUsers) : callback,
-        })),
-}));
-
 export const useDrieUIValue = create<any>((set: any) => ({
     drieUIValue: { touch: null, temperature: null, humidity: null },
 

app/src/store/collaboration/useCollabUsersStore.ts

@@ -0,0 +1,50 @@
+import { create } from "zustand";
+import { immer } from "zustand/middleware/immer";
+
+interface CollabUsersStore {
+    collabUsers: CollabUsersScheme[];
+
+    addCollabUser: (user: CollabUsersScheme) => void;
+    updateCollabUser: (userId: string, updates: Partial<CollabUsersScheme>) => void;
+    setCollabUsers: (users: CollabUsersScheme[]) => void;
+    removeCollabUser: (userId: string) => void;
+    clearCollabUsers: () => void;
+}
+
+export const createCollabusersStore = () => {
+    return create<CollabUsersStore>()(
+        immer((set) => ({
+            collabUsers: [],
+
+            addCollabUser: (user) =>
+                set((state) => {
+                    state.collabUsers.push(user);
+                }),
+
+            updateCollabUser: (userId, updates) =>
+                set((state) => {
+                    const idx = state.collabUsers.findIndex((u) => u.userId === userId);
+                    if (idx !== -1) {
+                        Object.assign(state.collabUsers[idx], updates);
+                    }
+                }),
+
+            setCollabUsers: (users) =>
+                set((state) => {
+                    state.collabUsers = users;
+                }),
+
+            removeCollabUser: (userId) =>
+                set((state) => {
+                    state.collabUsers = state.collabUsers.filter((u) => u.userId !== userId);
+                }),
+
+            clearCollabUsers: () =>
+                set((state) => {
+                    state.collabUsers = [];
+                }),
+        }))
+    );
+};
+
+export type CollabUsersStoreType = ReturnType<typeof createCollabusersStore>;

app/src/store/collaboration/useThreadStore.ts

@@ -4,17 +4,17 @@ import { immer } from "zustand/middleware/immer";
 interface ThreadStore {
     threads: ThreadsSchema;
 
-    addComment: (thread: ThreadSchema) => void;
+    addThread: (thread: ThreadSchema) => void;
-    setComments: (threads: ThreadsSchema) => void;
+    setThreads: (threads: ThreadsSchema) => void;
-    updateComment: (threadId: string, updates: Partial<ThreadSchema>) => void;
+    updateThread: (threadId: string, updates: Partial<ThreadSchema>) => void;
-    removeComment: (threadId: string) => void;
+    removeThread: (threadId: string) => void;
-    clearComments: () => void;
+    clearThreads: () => void;
 
     addReply: (threadId: string, reply: Reply) => void;
     updateReply: (threadId: string, replyId: string, updates: Partial<Reply>) => void;
     removeReply: (threadId: string, _id: string) => void;
 
-    getCommentById: (threadId: string) => ThreadSchema | undefined;
+    getThreadById: (threadId: string) => ThreadSchema | undefined;
 }
 
 export const createThreadsStore = () => {
@@ -22,7 +22,7 @@ export const createThreadsStore = () => {
         immer((set, get) => ({
             threads: [],
 
-            addComment: (thread) => {
+            addThread: (thread) => {
                 set((state) => {
                     if (!state.threads.find((c) => c.threadId === thread.threadId)) {
                         state.threads.push(JSON.parse(JSON.stringify(thread)));
@@ -30,13 +30,13 @@ export const createThreadsStore = () => {
                 });
             },
 
-            setComments: (threads) => {
+            setThreads: (threads) => {
                 set((state) => {
                     state.threads = threads;
                 });
             },
 
-            updateComment: (threadId, updates) => {
+            updateThread: (threadId, updates) => {
                 set((state) => {
                     const thread = state.threads.find((c) => c.threadId === threadId);
                     if (thread) {
@@ -45,13 +45,13 @@ export const createThreadsStore = () => {
                 });
             },
 
-            removeComment: (threadId) => {
+            removeThread: (threadId) => {
                 set((state) => {
                     state.threads = state.threads.filter((c) => c.threadId !== threadId);
                 });
             },
 
-            clearComments: () => {
+            clearThreads: () => {
                 set((state) => {
                     state.threads = [];
                 });
@@ -87,7 +87,7 @@ export const createThreadsStore = () => {
                 });
             },
 
-            getCommentById: (threadId) => {
+            getThreadById: (threadId) => {
                 return get().threads.find((c) => c.threadId === threadId);
             },
         }))

app/src/store/socket/useSocketStore.ts

@@ -4,98 +4,104 @@ import { io, Socket } from "socket.io-client";
 interface SocketStore {
     builderSocket: Socket | null;
     visualizationSocket: Socket | null;
-    dashBoardSocket: Socket | null;
     projectSocket: Socket | null;
     threadSocket: Socket | null;
 
     initializeBuilderSocket: (token: string, refreshToken: string, projectId: string) => void;
     initializeVisualizationSocket: (token: string, refreshToken: string, projectId: string) => void;
     initializeThreadSocket: (token: string, refreshToken: string, projectId: string) => void;
-    initializeDashBoardSocket: (token: string, refreshToken: string) => void;
     initializeProjectSocket: (token: string, refreshToken: string) => void;
 
     disconnectBuilderSocket: (projectId: string) => void;
     disconnectVisualizationSocket: (projectId: string) => void;
     disconnectThreadSocket: (projectId: string) => void;
-    disconnectDashBoardSocket: () => void;
     disconnectProjectSocket: () => void;
 
     disconnectAll: (projectId?: string) => void;
 }
 
+const socketOptions = (auth: any) => ({
+    reconnection: true,
+    reconnectionAttempts: Infinity,
+    reconnectionDelay: 2000,
+    timeout: 10000,
+    auth,
+});
+
+const attachLogs = (name: string, socket: Socket) => {
+    socket.on("connect", () => {
+        // console.log(`${name} socket connected:`, socket.id);
+    });
+
+    socket.on("disconnect", (reason) => {
+        // console.warn(`${name} socket disconnected:`, reason);
+    });
+
+    socket.on("error", (err) => {
+        // console.error(`${name} socket error:`, err);
+    });
+
+    socket.on("connect_error", (err) => {
+        console.warn(`${name} socket connection failed:`, err.message);
+    });
+};
+
 export const useSocketStore = create<SocketStore>((set, get) => ({
     builderSocket: null,
     visualizationSocket: null,
-    dashBoardSocket: null,
     projectSocket: null,
     threadSocket: null,
 
     initializeBuilderSocket: (token, refreshToken, projectId) => {
         if (get().builderSocket) return;
-        const builderSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder_v1`, {
+        const builderSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder_v1`, socketOptions({ token, refreshToken, projectId }));
-            reconnection: true,
+        attachLogs("Builder", builderSocket);
-            auth: { token, refreshToken, projectId },
-        });
         set({ builderSocket });
     },
 
     initializeVisualizationSocket: (token, refreshToken, projectId) => {
         if (get().visualizationSocket) return;
-        const visualizationSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization_v1`, {
+        const visualizationSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization_v1`, socketOptions({ token, refreshToken, projectId }));
-            reconnection: true,
+        attachLogs("Visualization", visualizationSocket);
-            auth: { token, refreshToken, projectId },
-        });
         set({ visualizationSocket });
     },
 
     initializeThreadSocket: (token, refreshToken, projectId) => {
         if (get().threadSocket) return;
-        const threadSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/thread`, {
+        const threadSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/thread`, socketOptions({ token, refreshToken, projectId }));
-            reconnection: true,
+        attachLogs("Thread", threadSocket);
-            auth: { token, refreshToken, projectId },
-        });
         set({ threadSocket });
     },
 
-    initializeDashBoardSocket: (token, refreshToken) => {
-        if (get().dashBoardSocket) return;
-        const dashBoardSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/dashboard`, {
-            reconnection: true,
-            auth: { token, refreshToken },
-        });
-        set({ dashBoardSocket });
-    },
-
     initializeProjectSocket: (token, refreshToken) => {
         if (get().projectSocket) return;
-        const projectSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/project`, {
+        const projectSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/project`, socketOptions({ token, refreshToken }));
-            reconnection: true,
+        attachLogs("Project", projectSocket);
-            auth: { token, refreshToken },
-        });
         set({ projectSocket });
     },
 
     disconnectBuilderSocket: (projectId) => {
         get().builderSocket?.emit("leaveRoom", { projectId });
+        setTimeout(() => {
             get().builderSocket?.disconnect();
             set({ builderSocket: null });
+        }, 1000);
     },
 
     disconnectVisualizationSocket: (projectId) => {
         get().visualizationSocket?.emit("leaveRoom", { projectId });
+        setTimeout(() => {
             get().visualizationSocket?.disconnect();
             set({ visualizationSocket: null });
+        }, 1000);
     },
 
     disconnectThreadSocket: (projectId) => {
         get().threadSocket?.emit("leaveRoom", { projectId });
+        setTimeout(() => {
             get().threadSocket?.disconnect();
             set({ threadSocket: null });
-    },
+        }, 1000);
-
-    disconnectDashBoardSocket: () => {
-        get().dashBoardSocket?.disconnect();
-        set({ dashBoardSocket: null });
     },
 
     disconnectProjectSocket: () => {
@@ -108,16 +114,16 @@ export const useSocketStore = create<SocketStore>((set, get) => ({
         get().visualizationSocket?.emit("leaveRoom", { projectId });
         get().threadSocket?.emit("leaveRoom", { projectId });
 
+        setTimeout(() => {
             get().builderSocket?.disconnect();
             get().visualizationSocket?.disconnect();
-        get().dashBoardSocket?.disconnect();
             get().projectSocket?.disconnect();
             get().threadSocket?.disconnect();
+        }, 1000);
 
         set({
             builderSocket: null,
             visualizationSocket: null,
-            dashBoardSocket: null,
             projectSocket: null,
             threadSocket: null,
         });

app/src/types/collaborationTypes.d.ts

@@ -1,3 +1,18 @@
+//#region CollllabUsersData
+interface CollabUsersScheme {
+    userId: string;
+    userName: string;
+    projectId: string;
+    versionId: string;
+    camData: {
+        position: { x: number; y: number; z: number };
+        rotation: { x: number; y: number; z: number };
+        target: { x: number; y: number; z: number };
+    };
+}
+//#endregion
+
+//#region Thread
 interface ThreadSchema {
     state: "active" | "inactive";
     threadId: string;
@@ -19,3 +34,4 @@ interface Reply {
 }
 
 type ThreadsSchema = ThreadSchema[];
+//#endregion