refactor: update Messages and ThreadChat components to use Reply interface and improve data handling

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

@@ -3,14 +3,7 @@ import { getAvatarColor } from "../../../modules/collaboration/functions/getAvat
 import { KebabIcon } from "../../icons/ExportCommonIcons";
 
 interface MessageProps {
-  val: {
+  val: Reply;
-    userName: string;
-    userId: string;
-    message: string;
-    creationTime: string;
-    idEdited: boolean;
-    modifiedTime: string;
-  };
   i: number;
 }
 
@@ -18,22 +11,25 @@ const Messages: React.FC<MessageProps> = ({ val, i }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [openOptions, setOpenOptions] = useState(false);
   const currentUser = "1";
+
+  const UserName = "username";
+
   return (
     <>
       {isEditing ? (
         <>
           <div
             className="profile"
-            style={{ background: getAvatarColor(i, val.userName) }}
+            style={{ background: getAvatarColor(i, UserName) }}
           >
-            {val.userName[0]}
+            {UserName[0]}
           </div>
           <div className="content">
             <div className="user-details">
-              <div className="user-name">{val.userName}</div>
+              <div className="user-name">{UserName}</div>
-              <div className="time">{val.creationTime}</div>
+              <div className="time">{val.createdAt}</div>
             </div>
-            {val.userId === currentUser && (
+            {val.creatorId === currentUser && (
               <div className="more-options">
                 <button
                   className="more-options-button"

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

@@ -6,20 +6,18 @@ import { ExpandIcon } from "../../icons/SimulationIcons";
 const ThreadChat: React.FC = () => {
   const messages = [
     {
-      userName: "user 1",
+      replyId: "user 1",
-      userId: "1",
+      creatorId: "1",
-      message: "hello, thread check",
+      createdAt: "hello, thread check",
-      creationTime: "2 hrs ago",
+      lastUpdatedAt: "2 hrs ago",
-      idEdited: true,
+      reply: "true",
-      modifiedTime: "5 mins ago",
     },
     {
       userName: "user 2",
       userId: "2",
       message: "hello, thread check",
       creationTime: "2 hrs ago",
-      idEdited: true,
+      idEdited: "true",
-      modifiedTime: "5 mins ago",
     },
   ];
 
@@ -44,7 +42,7 @@ const ThreadChat: React.FC = () => {
         </div>
         <div className="messages-wrapper">
           {messages.map((val, i) => (
-            <Messages val={val} i={i} key={val.userId} />
+            <Messages val={val as Reply} i={i} key={val.userId} />
           ))}
         </div>
         <div className="send-message-wrapper">

app/src/types/collaborationTypes.d.ts

@@ -10,7 +10,7 @@ interface CommentSchema {
     replies: Reply[];
 }
 
-export interface Reply {
+interface Reply {
     replyId: string;
     creatorId: string;
     createdAt: string;