feat: add ThreadChat component with message handling and UI interactions

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>

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;

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;

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>
   );
 };

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;
+    }
   }
 }