From 13a693a0bcc031fbc2745ac436d88c3ea5d06f2d Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Thu, 22 May 2025 15:41:28 +0530
Subject: [PATCH 1/6] feat: add ThreadChat component with message handling and
 UI interactions

---
 .../ui/collaboration/CommentThreads.tsx       |  8 +-
 .../components/ui/collaboration/Messages.tsx  | 80 +++++++++++++++++++
 .../ui/collaboration/ThreadChat.tsx           | 63 +++++++++++++++
 app/src/pages/Project.tsx                     |  2 -
 app/src/styles/scene/comments.scss            | 18 ++++-
 5 files changed, 161 insertions(+), 10 deletions(-)
 create mode 100644 app/src/components/ui/collaboration/Messages.tsx
 create mode 100644 app/src/components/ui/collaboration/ThreadChat.tsx

diff --git a/app/src/components/ui/collaboration/CommentThreads.tsx b/app/src/components/ui/collaboration/CommentThreads.tsx
index 82cd6fb..67554ce 100644
--- a/app/src/components/ui/collaboration/CommentThreads.tsx
+++ b/app/src/components/ui/collaboration/CommentThreads.tsx
@@ -28,7 +28,9 @@ const CommentThreads: React.FC = () => {
         onPointerEnter={() => getDetails()}
         onPointerLeave={() => getDetails()}
         onClick={() => getDetails("clicked")}
-        className={`comments-threads-container ${expand ? "open" : "closed"}`}
+        className={`comments-threads-container ${
+          expand ? "open" : "closed"
+        } unread`}
       >
         <div className="users-commented">
           {commentsedUsers.map((val, i) => (
@@ -41,9 +43,7 @@ const CommentThreads: React.FC = () => {
             </div>
           ))}
         </div>
-        <div
-          className={`last-comment-details ${expand ? "expand" : ""}`}
-        >
+        <div className={`last-comment-details ${expand ? "expand" : ""}`}>
           <div className="header">
             <div className="user-name">user</div>
             <div className="time">4 mins, ago</div>
diff --git a/app/src/components/ui/collaboration/Messages.tsx b/app/src/components/ui/collaboration/Messages.tsx
new file mode 100644
index 0000000..b0bfae4
--- /dev/null
+++ b/app/src/components/ui/collaboration/Messages.tsx
@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
+import { KebabIcon } from "../../icons/ExportCommonIcons";
+
+interface MessageProps {
+  val: {
+    userName: string;
+    userId: string;
+    message: string;
+    creationTime: string;
+    idEdited: boolean;
+    modifiedTime: string;
+  };
+  i: number;
+}
+
+const Messages: React.FC<MessageProps> = ({ val, i }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [openOptions, setOpenOptions] = useState(false);
+  const currentUser = "1";
+  return (
+    <>
+      {isEditing ? (
+        <>
+          <div
+            className="profile"
+            style={{ background: getAvatarColor(i, val.userName) }}
+          >
+            {val.userName[0]}
+          </div>
+          <div className="content">
+            <div className="user-details">
+              <div className="user-name">{val.userName}</div>
+              <div className="time">{val.creationTime}</div>
+            </div>
+            {val.userId === currentUser && (
+              <div className="more-options">
+                <button
+                  className="more-options-button"
+                  onClick={() => {
+                    setOpenOptions(true);
+                  }}
+                >
+                  <KebabIcon />
+                </button>
+                {openOptions && (
+                  <div className="options-list">
+                    <button
+                      className="option"
+                      onClick={() => {
+                        setIsEditing(true);
+                      }}
+                    >
+                      Edit
+                    </button>
+                    <button className="option">Delete</button>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </>
+      ) : (
+        <div className="edit-container">
+          <div className="input-container">
+            <textarea />
+          </div>
+          <div className="actions-container">
+            <div className="actions">
+              <button className="cancel-button">Cancel</button>
+              <button className="save-button">Save</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Messages;
diff --git a/app/src/components/ui/collaboration/ThreadChat.tsx b/app/src/components/ui/collaboration/ThreadChat.tsx
new file mode 100644
index 0000000..c1441a2
--- /dev/null
+++ b/app/src/components/ui/collaboration/ThreadChat.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import { CloseIcon, KebabIcon } from "../../icons/ExportCommonIcons";
+import Messages from "./Messages";
+import { ExpandIcon } from "../../icons/SimulationIcons";
+
+const ThreadChat: React.FC = () => {
+  const messages = [
+    {
+      userName: "user 1",
+      userId: "1",
+      message: "hello, thread check",
+      creationTime: "2 hrs ago",
+      idEdited: true,
+      modifiedTime: "5 mins ago",
+    },
+    {
+      userName: "user 2",
+      userId: "2",
+      message: "hello, thread check",
+      creationTime: "2 hrs ago",
+      idEdited: true,
+      modifiedTime: "5 mins ago",
+    },
+  ];
+
+  return (
+    <div className="thread-char-wrapper">
+      <div className="thread-char-container">
+        <div className="header-wrapper">
+          <div className="header">Comment</div>
+          <div className="header-options">
+            <button className="options-button">
+              <KebabIcon />
+            </button>
+            <div className="options-list">
+              <div className="options">Mark as Unread</div>
+              <div className="options">Mark as Resolved</div>
+              <div className="options">Delete Thread</div>
+            </div>
+            <button className="close-button">
+              <CloseIcon />
+            </button>
+          </div>
+        </div>
+        <div className="messages-wrapper">
+          {messages.map((val, i) => (
+            <Messages val={val} i={i} key={val.userId} />
+          ))}
+        </div>
+        <div className="send-message-wrapper">
+            <div className="input-container">
+                <input type="text" />
+                <div className="sent-button">
+                    <ExpandIcon />
+                </div>
+            </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ThreadChat;
diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx
index 1437021..d40a831 100644
--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@@ -38,7 +38,6 @@ import {useToggleStore} from "../store/useUIToggleStore";
 import RegularDropDown from "../components/ui/inputs/RegularDropDown";
 import VersionSaved from "../components/layout/sidebarRight/versionHisory/VersionSaved";
 import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
-import CommentThreads from "../components/ui/collaboration/CommentThreads";
 
 const Project: React.FC = () => {
   let navigate = useNavigate();
@@ -181,7 +180,6 @@ const Project: React.FC = () => {
         </>
       )}
       <VersionSaved />
-      <CommentThreads />
     </div>
   );
 };
diff --git a/app/src/styles/scene/comments.scss b/app/src/styles/scene/comments.scss
index af3bc99..1487d7e 100644
--- a/app/src/styles/scene/comments.scss
+++ b/app/src/styles/scene/comments.scss
@@ -32,9 +32,6 @@
       display: flex;
       align-items: start;
       flex-direction: column;
-      padding-top: 0;
-      height: 0;
-      width: 0;
       overflow: hidden;
       transition: all 0.2s;
       .header {
@@ -52,15 +49,22 @@
         margin-top: 10px;
       }
       .replies {
-        margin-top: 10px;
+        margin-top: 4px;
         font-size: var(--font-size-small);
         color: var(--input-text-color);
       }
+      .header,
+      .message,
+      .replies {
+        display: none;
+        opacity: 0;
+      }
     }
     .expand {
       min-width: 200px;
       max-width: 260px;
       padding: 12px;
+      padding-top: 0;
       height: 100%;
     }
   }
@@ -68,5 +72,11 @@
     .users-commented {
       padding: 12px;
     }
+    .header,
+    .message,
+    .replies {
+      display: flex !important;
+      opacity: 1 !important;
+    }
   }
 }

From 60e47f97646e1c9b746a14514b8eebb5081c67b2 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Thu, 22 May 2025 15:44:13 +0530
Subject: [PATCH 2/6] Refactor collaboration store structure and implement
 comments functionality

---
 .../components/layout/sidebarRight/Header.tsx |   2 +-
 app/src/components/templates/FollowPerson.tsx |   2 +-
 .../collaboration/camera/collabCams.tsx       |  38 ++++--
 .../collaboration/camera/collabUserIcon.tsx   |   2 +-
 .../modules/collaboration/collaboration.tsx   |  36 ++---
 .../collaboration/comments/commentsGroup.tsx  | 123 ++++++++++++++++++
 .../commentInstance/commentInstance.tsx       |  71 ++++++++++
 .../comments/instances/commentInstances.tsx   |  23 ++++
 .../simulation/events/arrows/arrows.tsx       |  27 +++-
 app/src/pages/Project.tsx                     |   2 +-
 .../{ => collaboration}/useCollabStore.ts     |  72 +++++-----
 .../store/collaboration/useCommentStore.ts    |  92 +++++++++++++
 app/src/types/collaborationTypes.d.ts         |  20 +++
 13 files changed, 431 insertions(+), 79 deletions(-)
 create mode 100644 app/src/modules/collaboration/comments/commentsGroup.tsx
 create mode 100644 app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx
 create mode 100644 app/src/modules/collaboration/comments/instances/commentInstances.tsx
 rename app/src/store/{ => collaboration}/useCollabStore.ts (95%)
 create mode 100644 app/src/store/collaboration/useCommentStore.ts
 create mode 100644 app/src/types/collaborationTypes.d.ts

diff --git a/app/src/components/layout/sidebarRight/Header.tsx b/app/src/components/layout/sidebarRight/Header.tsx
index 2673671..77d5807 100644
--- a/app/src/components/layout/sidebarRight/Header.tsx
+++ b/app/src/components/layout/sidebarRight/Header.tsx
@@ -4,7 +4,7 @@ import { useActiveUsers, 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/useCollabStore";
+import { useSelectedUserStore } from "../../../store/collaboration/useCollabStore";
 import useToggleStore from "../../../store/useUIToggleStore";
 import { ToggleSidebarIcon } from "../../icons/HeaderIcons";
 import useModuleStore from "../../../store/useModuleStore";
diff --git a/app/src/components/templates/FollowPerson.tsx b/app/src/components/templates/FollowPerson.tsx
index 63fb26a..36f0b53 100644
--- a/app/src/components/templates/FollowPerson.tsx
+++ b/app/src/components/templates/FollowPerson.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import RenderOverlay from "./Overlay";
-import { useSelectedUserStore } from "../../store/useCollabStore";
+import { useSelectedUserStore } from "../../store/collaboration/useCollabStore";
 import { useCamMode } from "../../store/builder/store";
 
 const FollowPerson: React.FC = () => {
diff --git a/app/src/modules/collaboration/camera/collabCams.tsx b/app/src/modules/collaboration/camera/collabCams.tsx
index 5c4e8d6..f24d6aa 100644
--- a/app/src/modules/collaboration/camera/collabCams.tsx
+++ b/app/src/modules/collaboration/camera/collabCams.tsx
@@ -1,18 +1,19 @@
 import * as THREE from "three";
 import { useEffect, useRef, useState } from "react";
-import { useFrame } from "@react-three/fiber";
+import { useFrame, useThree } from "@react-three/fiber";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import camModel from "../../../assets/gltf-glb/camera face 2.gltf";
 import getActiveUsersData from "../../../services/factoryBuilder/collab/getActiveUsers";
-import { useActiveUsers, useSocketStore } from "../../../store/builder/store";
+import { useActiveUsers, useCamMode, useSocketStore } from "../../../store/builder/store";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
 import { useNavigate } from "react-router-dom";
 import { Html } from "@react-three/drei";
 import CollabUserIcon from "./collabUserIcon";
 import useModuleStore from "../../../store/useModuleStore";
 import { getAvatarColor } from "../functions/getAvatarColor";
-import { useSelectedUserStore } from "../../../store/useCollabStore";
+import { useSelectedUserStore } from "../../../store/collaboration/useCollabStore";
 import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import setCameraView from "../functions/setCameraView";
 
 const CamModelsGroup = () => {
   const navigate = useNavigate();
@@ -30,6 +31,28 @@ const CamModelsGroup = () => {
   dracoLoader.setDecoderPath("three/examples/jsm/libs/draco/gltf/");
   loader.setDRACOLoader(dracoLoader);
 
+
+  const { camMode } = useCamMode();
+  const { camera, controls } = useThree(); // Access R3F camera and controls
+
+  useEffect(() => {
+    if (camMode !== "FollowPerson") return;
+    // If a user is selected, set the camera view to their location
+    // and update the camera and controls accordingly
+    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<
@@ -260,11 +283,10 @@ const CamModelsGroup = () => {
               textAlign: "center",
               fontFamily: "Arial, sans-serif",
               display: `${activeModule !== "visualization" ? "" : "none"}`,
-              opacity: `${
-                selectedUser?.name !== cam.userData.userName && !isPlaying
-                  ? 1
-                  : 0
-              }`,
+              opacity: `${selectedUser?.name !== cam.userData.userName && !isPlaying
+                ? 1
+                : 0
+                }`,
               transition: "opacity .2s ease",
             }}
             position={[-0.015, 0, 0.7]}
diff --git a/app/src/modules/collaboration/camera/collabUserIcon.tsx b/app/src/modules/collaboration/camera/collabUserIcon.tsx
index 7a9873b..e45d7a5 100644
--- a/app/src/modules/collaboration/camera/collabUserIcon.tsx
+++ b/app/src/modules/collaboration/camera/collabUserIcon.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import CustomAvatar from "../users/Avatar";
-import { useSelectedUserStore } from "../../../store/useCollabStore";
+import { useSelectedUserStore } from "../../../store/collaboration/useCollabStore";
 import { useCamMode } from "../../../store/builder/store";
 
 interface CollabUserIconProps {
diff --git a/app/src/modules/collaboration/collaboration.tsx b/app/src/modules/collaboration/collaboration.tsx
index 36e7131..d3486a5 100644
--- a/app/src/modules/collaboration/collaboration.tsx
+++ b/app/src/modules/collaboration/collaboration.tsx
@@ -1,34 +1,18 @@
-import React, { useEffect } from "react";
+import React from "react";
 import CamModelsGroup from "./camera/collabCams";
-import { useSelectedUserStore } from "../../store/useCollabStore";
-import { useThree } from "@react-three/fiber";
-import setCameraView from "./functions/setCameraView";
-import { useCamMode } from "../../store/builder/store";
+import CommentsGroup from "./comments/commentsGroup";
 
 const Collaboration: React.FC = () => {
-  const { selectedUser } = useSelectedUserStore();
-  const { camMode } = useCamMode();
-  const { camera, controls } = useThree(); // Access R3F camera and controls
 
-  useEffect(() => {
-    if (camMode !== "FollowPerson") return;
-    // If a user is selected, set the camera view to their location
-    // and update the camera and controls accordingly
-    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]);
+    return (
+        <>
 
-  return <CamModelsGroup />;
+            <CamModelsGroup />
+
+            <CommentsGroup />
+
+        </>
+    );
 };
 
 export default Collaboration;
diff --git a/app/src/modules/collaboration/comments/commentsGroup.tsx b/app/src/modules/collaboration/comments/commentsGroup.tsx
new file mode 100644
index 0000000..06dc20e
--- /dev/null
+++ b/app/src/modules/collaboration/comments/commentsGroup.tsx
@@ -0,0 +1,123 @@
+import { useEffect, useState } from "react";
+import { useActiveTool } from "../../../store/builder/store"
+import { useThree } from "@react-three/fiber";
+import { MathUtils, Vector3 } from "three";
+import { useCommentStore } from "../../../store/collaboration/useCommentStore";
+import CommentInstances from "./instances/commentInstances";
+import { Sphere } from "@react-three/drei";
+
+function CommentsGroup() {
+    const { gl, raycaster, camera, scene, pointer } = useThree();
+    const { activeTool } = useActiveTool();
+    const { addComment } = useCommentStore();
+    const [hoverPos, setHoverPos] = useState<Vector3 | null>(null);
+
+    const userId = localStorage.getItem('userId') ?? '';
+
+    useEffect(() => {
+        const canvasElement = gl.domElement;
+
+        let drag = false;
+        let isLeftMouseDown = false;
+
+        const onMouseDown = (evt: MouseEvent) => {
+            if (evt.button === 0) {
+                isLeftMouseDown = true;
+                drag = false;
+            }
+        };
+
+        const onMouseUp = (evt: MouseEvent) => {
+            if (evt.button === 0) {
+                isLeftMouseDown = false;
+            }
+        }
+
+        const onMouseMove = () => {
+            if (isLeftMouseDown) {
+                drag = true;
+            }
+
+            raycaster.setFromCamera(pointer, camera);
+            const intersects = raycaster
+                .intersectObjects(scene.children, true)
+                .filter(
+                    (intersect) =>
+                        !intersect.object.name.includes("Roof") &&
+                        !intersect.object.name.includes("MeasurementReference") &&
+                        !intersect.object.name.includes("commentHolder") &&
+                        !intersect.object.name.includes("agv-collider") &&
+                        !(intersect.object.type === "GridHelper")
+                );
+
+            if (intersects.length > 0) {
+                const point = intersects[0].point;
+                setHoverPos(new Vector3(point.x, Math.max(point.y, 0), point.z));
+            } else {
+                setHoverPos(null);
+            }
+        };
+
+        const onMouseClick = () => {
+            if (drag) return;
+
+            const intersects = raycaster
+                .intersectObjects(scene.children, true)
+                .filter(
+                    (intersect) =>
+                        !intersect.object.name.includes("Roof") &&
+                        !intersect.object.name.includes("MeasurementReference") &&
+                        !intersect.object.name.includes("commentHolder") &&
+                        !intersect.object.name.includes("agv-collider") &&
+                        !(intersect.object.type === "GridHelper")
+                );
+            if (intersects.length > 0) {
+                const position = new Vector3(intersects[0].point.x, Math.max(intersects[0].point.y, 0), intersects[0].point.z);
+
+                const comment: CommentSchema = {
+                    state: 'active',
+                    commentId: MathUtils.generateUUID(),
+                    creatorId: userId,
+                    createdAt: new Date().toISOString(),
+                    lastUpdatedAt: new Date().toISOString(),
+                    position: position.toArray(),
+                    rotation: [0, 0, 0],
+                    replies: []
+                }
+
+                addComment(comment);
+                setHoverPos(null);
+            }
+        }
+
+        if (activeTool === 'comment') {
+            canvasElement.addEventListener("mousedown", onMouseDown);
+            canvasElement.addEventListener("mouseup", onMouseUp);
+            canvasElement.addEventListener("mousemove", onMouseMove);
+            canvasElement.addEventListener("click", onMouseClick);
+        } else {
+            setHoverPos(null);
+        }
+
+        return () => {
+            canvasElement.removeEventListener("mousedown", onMouseDown);
+            canvasElement.removeEventListener("mouseup", onMouseUp);
+            canvasElement.removeEventListener("mousemove", onMouseMove);
+            canvasElement.removeEventListener("click", onMouseClick);
+        };
+    }, [activeTool, camera])
+
+    return (
+        <>
+            <CommentInstances />
+
+            {hoverPos && (
+                <Sphere name={'commentHolder'} args={[0.1, 16, 16]} position={hoverPos}>
+                    <meshStandardMaterial color="orange" />
+                </Sphere>
+            )}
+        </>
+    )
+}
+
+export default CommentsGroup
\ No newline at end of file
diff --git a/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx b/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx
new file mode 100644
index 0000000..07b6ae7
--- /dev/null
+++ b/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx
@@ -0,0 +1,71 @@
+import { Html, TransformControls } from '@react-three/drei';
+import { useEffect, useRef, useState } from 'react'
+import { usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
+import { detectModifierKeys } from '../../../../../utils/shortcutkeys/detectModifierKeys';
+
+function CommentInstance({ comment }: { comment: CommentSchema }) {
+    const { isPlaying } = usePlayButtonStore();
+    const CommentRef = useRef(null);
+    const [selectedComment, setSelectedComment] = useState<CommentSchema | null>(null);
+    const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null);
+
+    if (comment.state === 'inactive' || isPlaying) return null;
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            const keyCombination = detectModifierKeys(e);
+            if (!selectedComment) return;
+            if (keyCombination === "G") {
+                setTransformMode((prev) => (prev === "translate" ? null : "translate"));
+            }
+            if (keyCombination === "R") {
+                setTransformMode((prev) => (prev === "rotate" ? null : "rotate"));
+            }
+        };
+
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [selectedComment]);
+
+    return (
+
+        <>
+            <Html
+                ref={CommentRef}
+                zIndexRange={[1, 0]}
+                prepend
+                sprite
+                center
+                position={comment.position}
+                rotation={comment.rotation}
+            >
+
+                <div
+                    className='outer'
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        setSelectedComment(comment);
+                        console.log("down");
+                    }}
+                    onPointerOver={(e) => {
+                        e.stopPropagation();
+                    }}>
+                    <div>
+                        hii
+                    </div>
+                </div>
+            </Html>
+            {CommentRef.current && transformMode && (
+                <TransformControls
+                    object={CommentRef.current}
+                    mode={transformMode}
+                    onMouseUp={(e) => {
+
+                    }}
+                />
+            )}
+        </>
+    )
+}
+
+export default CommentInstance;
\ No newline at end of file
diff --git a/app/src/modules/collaboration/comments/instances/commentInstances.tsx b/app/src/modules/collaboration/comments/instances/commentInstances.tsx
new file mode 100644
index 0000000..53dc4c6
--- /dev/null
+++ b/app/src/modules/collaboration/comments/instances/commentInstances.tsx
@@ -0,0 +1,23 @@
+import React, { useEffect } from 'react'
+import CommentInstance from './commentInstance/commentInstance'
+import { useCommentStore } from '../../../../store/collaboration/useCommentStore'
+
+function CommentInstances() {
+    const { comments } = useCommentStore();
+
+    useEffect(() => {
+        console.log('comments: ', comments);
+    }, [comments])
+
+    return (
+        <>
+            {comments.map((comment: CommentSchema) => (
+                <React.Fragment key={comment.commentId}>
+                    <CommentInstance comment={comment} />
+                </React.Fragment>
+            ))}
+        </>
+    )
+}
+
+export default CommentInstances
\ No newline at end of file
diff --git a/app/src/modules/simulation/events/arrows/arrows.tsx b/app/src/modules/simulation/events/arrows/arrows.tsx
index 5eb6a9f..943b614 100644
--- a/app/src/modules/simulation/events/arrows/arrows.tsx
+++ b/app/src/modules/simulation/events/arrows/arrows.tsx
@@ -1,6 +1,7 @@
 import * as THREE from "three";
-import { useMemo, useRef } from "react";
+import { useMemo, useRef, useState } from "react";
 import { useThree } from "@react-three/fiber";
+import { useDeleteTool } from "../../../../store/builder/store";
 
 interface ConnectionLine {
     id: string;
@@ -10,8 +11,10 @@ interface ConnectionLine {
 }
 
 export function Arrows({ connections }: { connections: ConnectionLine[] }) {
+    const [hoveredLineKey, setHoveredLineKey] = useState<string | null>(null);
     const groupRef = useRef<THREE.Group>(null);
     const { scene } = useThree();
+    const { deleteTool } = useDeleteTool();
 
     const getWorldPositionFromScene = (uuid: string): THREE.Vector3 | null => {
         const obj = scene.getObjectByProperty("uuid", uuid);
@@ -52,11 +55,25 @@ export function Arrows({ connections }: { connections: ConnectionLine[] }) {
 
         return (
             <group key={key}>
-                <mesh geometry={shaftGeometry}>
-                    <meshStandardMaterial color="#42a5f5" />
+                <mesh
+                    geometry={shaftGeometry}
+                    onPointerOver={() => setHoveredLineKey(key)}
+                    onPointerOut={() => setHoveredLineKey(null)}
+                >
+                    <meshStandardMaterial
+                        color={deleteTool && hoveredLineKey === key ? "red" : "#42a5f5"}
+                    />
                 </mesh>
-                <mesh position={end} quaternion={rotation} geometry={headGeometry}>
-                    <meshStandardMaterial color="#42a5f5" />
+                <mesh
+                    position={end}
+                    quaternion={rotation}
+                    geometry={headGeometry}
+                    onPointerOver={() => setHoveredLineKey(key)}
+                    onPointerOut={() => setHoveredLineKey(null)}
+                >
+                    <meshStandardMaterial
+                        color={deleteTool && hoveredLineKey === key ? "red" : "#42a5f5"}
+                    />
                 </mesh>
             </group>
         );
diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx
index 8419e13..943323b 100644
--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@@ -21,7 +21,7 @@ import { usePlayButtonStore } from "../store/usePlayButtonStore";
 import MarketPlace from "../modules/market/MarketPlace";
 import LoadingPage from "../components/templates/LoadingPage";
 import KeyPressListener from "../utils/shortcutkeys/handleShortcutKeys";
-import { useSelectedUserStore } from "../store/useCollabStore";
+import { useSelectedUserStore } from "../store/collaboration/useCollabStore";
 import FollowPerson from "../components/templates/FollowPerson";
 import Scene from "../modules/scene/scene";
 import { createHandleDrop } from "../modules/visualization/functions/handleUiDrop";
diff --git a/app/src/store/useCollabStore.ts b/app/src/store/collaboration/useCollabStore.ts
similarity index 95%
rename from app/src/store/useCollabStore.ts
rename to app/src/store/collaboration/useCollabStore.ts
index 499e857..b768126 100644
--- a/app/src/store/useCollabStore.ts
+++ b/app/src/store/collaboration/useCollabStore.ts
@@ -1,36 +1,36 @@
-import { create } from 'zustand';
-
-interface SelectedUser {
-    color: string;
-    name: string;
-    id: string,
-    location?: {
-        position: {
-            x: number;
-            y: number;
-            z: number;
-        };
-        rotation?: {
-            x: number;
-            y: number;
-            z: number;
-        };
-        target?: {
-            x: number;
-            y: number;
-            z: number;
-        };
-    }
-}
-
-interface SelectedUserStore {
-    selectedUser: SelectedUser | null;
-    setSelectedUser: (user: SelectedUser) => void;
-    clearSelectedUser: () => void;
-}
-
-export const useSelectedUserStore = create<SelectedUserStore>((set) => ({
-    selectedUser: null,
-    setSelectedUser: (user) => set({ selectedUser: user }),
-    clearSelectedUser: () => set({ selectedUser: null }),
-}));
+import { create } from 'zustand';
+
+interface SelectedUser {
+    color: string;
+    name: string;
+    id: string,
+    location?: {
+        position: {
+            x: number;
+            y: number;
+            z: number;
+        };
+        rotation?: {
+            x: number;
+            y: number;
+            z: number;
+        };
+        target?: {
+            x: number;
+            y: number;
+            z: number;
+        };
+    }
+}
+
+interface SelectedUserStore {
+    selectedUser: SelectedUser | null;
+    setSelectedUser: (user: SelectedUser) => void;
+    clearSelectedUser: () => void;
+}
+
+export const useSelectedUserStore = create<SelectedUserStore>((set) => ({
+    selectedUser: null,
+    setSelectedUser: (user) => set({ selectedUser: user }),
+    clearSelectedUser: () => set({ selectedUser: null }),
+}));
diff --git a/app/src/store/collaboration/useCommentStore.ts b/app/src/store/collaboration/useCommentStore.ts
new file mode 100644
index 0000000..cd4d7c3
--- /dev/null
+++ b/app/src/store/collaboration/useCommentStore.ts
@@ -0,0 +1,92 @@
+import { create } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+
+interface CommentStore {
+    comments: CommentsSchema;
+
+    // Comment operations
+    addComment: (comment: CommentSchema) => void;
+    setComments: (comments: CommentsSchema) => void;
+    updateComment: (commentId: string, updates: Partial<CommentSchema>) => void;
+    removeComment: (commentId: string) => void;
+
+    // Reply operations
+    addReply: (commentId: string, reply: Reply) => void;
+    updateReply: (commentId: string, replyId: string, updates: Partial<Reply>) => void;
+    removeReply: (commentId: string, replyId: string) => void;
+
+    // Getters
+    getCommentById: (commentId: string) => CommentSchema | undefined;
+}
+
+export const useCommentStore = create<CommentStore>()(
+    immer((set, get) => ({
+        comments: [],
+
+        // Comment operations
+        addComment: (comment) => {
+            set((state) => {
+                if (!state.comments.find(c => c.commentId === comment.commentId)) {
+                    state.comments.push(JSON.parse(JSON.stringify(comment)));
+                }
+            });
+        },
+
+        setComments: (comments) => {
+            set((state) => {
+                state.comments = comments;
+            });
+        },
+
+        updateComment: (commentId, updates) => {
+            set((state) => {
+                const comment = state.comments.find(c => c.commentId === commentId);
+                if (comment) {
+                    Object.assign(comment, updates);
+                }
+            });
+        },
+
+        removeComment: (commentId) => {
+            set((state) => {
+                state.comments = state.comments.filter(c => c.commentId !== commentId);
+            });
+        },
+
+        // Reply operations
+        addReply: (commentId, reply) => {
+            set((state) => {
+                const comment = state.comments.find(c => c.commentId === commentId);
+                if (comment) {
+                    comment.replies.push(reply);
+                }
+            });
+        },
+
+        updateReply: (commentId, replyId, updates) => {
+            set((state) => {
+                const comment = state.comments.find(c => c.commentId === commentId);
+                if (comment) {
+                    const reply = comment.replies.find(r => r.replyId === replyId);
+                    if (reply) {
+                        Object.assign(reply, updates);
+                    }
+                }
+            });
+        },
+
+        removeReply: (commentId, replyId) => {
+            set((state) => {
+                const comment = state.comments.find(c => c.commentId === commentId);
+                if (comment) {
+                    comment.replies = comment.replies.filter(r => r.replyId !== replyId);
+                }
+            });
+        },
+
+        // Getter
+        getCommentById: (commentId) => {
+            return get().comments.find(c => c.commentId === commentId);
+        },
+    }))
+);
diff --git a/app/src/types/collaborationTypes.d.ts b/app/src/types/collaborationTypes.d.ts
new file mode 100644
index 0000000..6a055a7
--- /dev/null
+++ b/app/src/types/collaborationTypes.d.ts
@@ -0,0 +1,20 @@
+interface CommentSchema {
+    state: "active" | "inactive";
+    commentId: string;
+    creatorId: string;
+    createdAt: string;
+    lastUpdatedAt: string;
+    position: [number, number, number];
+    rotation: [number, number, number];
+    replies: Reply[];
+}
+
+interface Reply {
+    replyId: string;
+    creatorId: string;
+    createdAt: string;
+    lastUpdatedAt: string;
+    reply: string;
+}
+
+type CommentsSchema = CommentSchema[];
\ No newline at end of file

From b6aa4ab632775bfd68d8f297ddd6a09976464448 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Thu, 22 May 2025 15:50:39 +0530
Subject: [PATCH 3/6] feat: update CommentThreads component and integrate it
 into CommentInstance

---
 app/src/components/ui/collaboration/CommentThreads.tsx   | 4 ++--
 .../instances/commentInstance/commentInstance.tsx        | 8 +++++---
 app/src/styles/scene/comments.scss                       | 9 ++++++---
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/app/src/components/ui/collaboration/CommentThreads.tsx b/app/src/components/ui/collaboration/CommentThreads.tsx
index 82cd6fb..7fb1d89 100644
--- a/app/src/components/ui/collaboration/CommentThreads.tsx
+++ b/app/src/components/ui/collaboration/CommentThreads.tsx
@@ -2,14 +2,14 @@ import React, { useState } from "react";
 import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
 
 const CommentThreads: React.FC = () => {
-  const [expand, setExpand] = useState(true);
+  const [expand, setExpand] = useState(false);
   const commentsedUsers = [
     {
       userId: "1",
       userName: "user",
     },
     {
-      userId: "1",
+      userId: "2",
       userName: "Admin",
     },
   ];
diff --git a/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx b/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx
index 07b6ae7..42655bb 100644
--- a/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx
+++ b/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx
@@ -2,6 +2,7 @@ import { Html, TransformControls } from '@react-three/drei';
 import { useEffect, useRef, useState } from 'react'
 import { usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
 import { detectModifierKeys } from '../../../../../utils/shortcutkeys/detectModifierKeys';
+import CommentThreads from '../../../../../components/ui/collaboration/CommentThreads';
 
 function CommentInstance({ comment }: { comment: CommentSchema }) {
     const { isPlaying } = usePlayButtonStore();
@@ -38,9 +39,10 @@ function CommentInstance({ comment }: { comment: CommentSchema }) {
                 center
                 position={comment.position}
                 rotation={comment.rotation}
+                className='comments-main-wrapper'
             >
-
-                <div
+                <CommentThreads />
+                {/* <div
                     className='outer'
                     onClick={(e) => {
                         e.stopPropagation();
@@ -53,7 +55,7 @@ function CommentInstance({ comment }: { comment: CommentSchema }) {
                     <div>
                         hii
                     </div>
-                </div>
+                </div> */}
             </Html>
             {CommentRef.current && transformMode && (
                 <TransformControls
diff --git a/app/src/styles/scene/comments.scss b/app/src/styles/scene/comments.scss
index af3bc99..33a792d 100644
--- a/app/src/styles/scene/comments.scss
+++ b/app/src/styles/scene/comments.scss
@@ -1,10 +1,13 @@
 @use "../abstracts/variables" as *;
 @use "../abstracts/mixins" as *;
 
+.comments-main-wrapper{
+  position: relative;
+}
 .comments-threads-wrapper {
-  position: fixed;
-  top: 50%;
-  left: 50%;
+  position: absolute;
+  top: 0;
+  left: 0;
   padding: 4px;
   background: var(--background-color);
   border-radius: #{$border-radius-large} #{$border-radius-large} #{$border-radius-large}

From e161c2768e4b359ccf58ba762df4e5c10ccd5969 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Thu, 22 May 2025 15:53:04 +0530
Subject: [PATCH 4/6] fix: update comments thread position to absolute for
 better layout

---
 app/src/styles/scene/comments.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/src/styles/scene/comments.scss b/app/src/styles/scene/comments.scss
index 1487d7e..e04cfa7 100644
--- a/app/src/styles/scene/comments.scss
+++ b/app/src/styles/scene/comments.scss
@@ -2,9 +2,9 @@
 @use "../abstracts/mixins" as *;
 
 .comments-threads-wrapper {
-  position: fixed;
-  top: 50%;
-  left: 50%;
+  position: absolute;
+  top: 0;
+  left: 0;
   padding: 4px;
   background: var(--background-color);
   border-radius: #{$border-radius-large} #{$border-radius-large} #{$border-radius-large}

From ae7f33c48542cfdc3a79d47c9feb647de4a207ae Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Thu, 22 May 2025 15:58:09 +0530
Subject: [PATCH 5/6] refactor: rearrange early return for better readability
 in CommentInstance

---
 .../instances/commentInstance/commentInstance.tsx        | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx b/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx
index 42655bb..5b5c145 100644
--- a/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx
+++ b/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx
@@ -10,8 +10,7 @@ function CommentInstance({ comment }: { comment: CommentSchema }) {
     const [selectedComment, setSelectedComment] = useState<CommentSchema | null>(null);
     const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null);
 
-    if (comment.state === 'inactive' || isPlaying) return null;
-
+    
     useEffect(() => {
         const handleKeyDown = (e: KeyboardEvent) => {
             const keyCombination = detectModifierKeys(e);
@@ -23,11 +22,13 @@ function CommentInstance({ comment }: { comment: CommentSchema }) {
                 setTransformMode((prev) => (prev === "rotate" ? null : "rotate"));
             }
         };
-
+        
         window.addEventListener("keydown", handleKeyDown);
         return () => window.removeEventListener("keydown", handleKeyDown);
     }, [selectedComment]);
-
+    
+    if (comment.state === 'inactive' || isPlaying) return null;
+    
     return (
 
         <>

From 919f0fc9aa0231b662966cf181f875ce26aefe56 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Thu, 22 May 2025 16:05:19 +0530
Subject: [PATCH 6/6] feat: add comment field to CommentSchema for new comment
 functionality

---
 app/src/modules/collaboration/comments/commentsGroup.tsx | 1 +
 app/src/types/collaborationTypes.d.ts                    | 1 +
 2 files changed, 2 insertions(+)

diff --git a/app/src/modules/collaboration/comments/commentsGroup.tsx b/app/src/modules/collaboration/comments/commentsGroup.tsx
index 06dc20e..6c10f3d 100644
--- a/app/src/modules/collaboration/comments/commentsGroup.tsx
+++ b/app/src/modules/collaboration/comments/commentsGroup.tsx
@@ -79,6 +79,7 @@ function CommentsGroup() {
                     commentId: MathUtils.generateUUID(),
                     creatorId: userId,
                     createdAt: new Date().toISOString(),
+                    comment: '',
                     lastUpdatedAt: new Date().toISOString(),
                     position: position.toArray(),
                     rotation: [0, 0, 0],
diff --git a/app/src/types/collaborationTypes.d.ts b/app/src/types/collaborationTypes.d.ts
index 6a055a7..445949a 100644
--- a/app/src/types/collaborationTypes.d.ts
+++ b/app/src/types/collaborationTypes.d.ts
@@ -3,6 +3,7 @@ interface CommentSchema {
     commentId: string;
     creatorId: string;
     createdAt: string;
+    comment: string;
     lastUpdatedAt: string;
     position: [number, number, number];
     rotation: [number, number, number];