From ed828d9417bb5c742692e833037131bf57e4df65 Mon Sep 17 00:00:00 2001
From: Gomathi9520 <gomathi@hexrfactory.com>
Date: Fri, 23 May 2025 09:33:06 +0530
Subject: [PATCH 1/7] refactor: remove console log from TotalCardComponent

---
 .../IotInputCards/InputSelecterComponent.tsx  | 312 +++++++++++-------
 .../floating/cards/TotalCardComponent.tsx     |   2 +-
 2 files changed, 186 insertions(+), 128 deletions(-)

diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/InputSelecterComponent.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/InputSelecterComponent.tsx
index 2d82225..210e2b4 100644
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/InputSelecterComponent.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/InputSelecterComponent.tsx
@@ -12,140 +12,198 @@ import Widget4InputCard3D from './Widget4InputCard3D'
 import WarehouseThroughputInputComponent from './WarehouseThroughputInputComponent'
 import { useWidgetStore } from '../../../../../store/useWidgetStore'
 
+// const InputSelecterComponent = () => {
+//     const { selectedChartId } = useWidgetStore();
+
+//   if (selectedChartId && selectedChartId.type && selectedChartId.type === 'bar' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">2D Widget Input</div>
+//         <BarChartInput />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'line' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">2D Widget Input</div>
+//         <LineGrapInput />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'pie' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">2D Widget Input</div>
+//         <PieChartInput />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'doughnut' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">2D Widget Input</div>
+//         <PieChartInput />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'polarArea' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">2D Widget Input</div>
+//         <PieChartInput />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'progress 1' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">2D Widget Input</div>
+//         <Progress1Input />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'progress 2' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">2D Widget Input</div>
+//         <Progress2Input />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'warehouseThroughput floating' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">Floting Widget Input</div>
+//         <WarehouseThroughputInputComponent />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'fleetEfficiency floating' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">Floting Widget Input</div>
+//         <FleetEfficiencyInputComponent />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'floating total-card' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">Floting Widget Input</div>
+//         <FleetEfficiencyInputComponent />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 1' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">3D Widget Input</div>
+//         <Widget4InputCard3D />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 2' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">3D Widget Input</div>
+//         <Widget2InputCard3D />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 3' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">3D Widget Input</div>
+//         <Widget3InputCard3D />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 4' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">3D Widget Input</div>
+//         <Widget4InputCard3D />
+//         </>
+//       )
+//   }
+
+//   else {
+//     return (
+//         <div>No chart selected</div>
+//       )
+//   }
+// }
+
+const chartTypeMap: Record<| 'bar'| 'line'| 'pie' | 'doughnut' | 'polarArea'| 'progress 1' | 'progress 2'
+  | 'ui-Widget 1'| 'ui-Widget 2'| 'ui-Widget 3'| 'ui-Widget 4',JSX.Element> = {
+  bar: <BarChartInput />,
+  line: <LineGrapInput />,
+  pie: <PieChartInput />,
+  doughnut: <PieChartInput />,
+  polarArea: <PieChartInput />,
+  'progress 1': <Progress1Input />,
+  'progress 2': <Progress2Input />,
+  'ui-Widget 1': <Widget4InputCard3D />,
+  'ui-Widget 2': <Widget2InputCard3D />,
+  'ui-Widget 3': <Widget3InputCard3D />,
+  'ui-Widget 4': <Widget4InputCard3D />,
+};
+
+const classNameMap: Record<
+  | 'warehouseThroughput floating'
+  | 'fleetEfficiency floating'
+  | 'floating total-card',
+  JSX.Element
+> = {
+  'warehouseThroughput floating': <WarehouseThroughputInputComponent />,
+  'fleetEfficiency floating': <FleetEfficiencyInputComponent />,
+  'floating total-card': <FleetEfficiencyInputComponent />,
+};
+
 const InputSelecterComponent = () => {
-    const { selectedChartId } = useWidgetStore();
+  const { selectedChartId } = useWidgetStore();
 
-  if (selectedChartId && selectedChartId.type && selectedChartId.type === 'bar' ) {
-    return (
+  if (selectedChartId) {
+    const { type, className } = selectedChartId;
+
+    if (type && chartTypeMap[type as keyof typeof chartTypeMap]) {
+      const label = ['ui-Widget 1', 'ui-Widget 2', 'ui-Widget 3', 'ui-Widget 4'].includes(type)
+        ? '3D Widget Input'
+        : '2D Widget Input';
+
+      return (
         <>
-        <div className="sideBarHeader">2D Widget Input</div>
-        <BarChartInput />
+          <div className="sideBarHeader">{label}</div>
+          {chartTypeMap[type as keyof typeof chartTypeMap]}
         </>
-      )
-  }
+      );
+    }
 
-  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'line' ) {
-    return (
+    if (className && classNameMap[className as keyof typeof classNameMap]) {
+      return (
         <>
-        <div className="sideBarHeader">2D Widget Input</div>
-        <LineGrapInput />
+          <div className="sideBarHeader">Floting Widget Input</div>
+          {classNameMap[className as keyof typeof classNameMap]}
         </>
-      )
+      );
+    }
   }
 
-  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'pie' ) {
-    return (
-        <>
-        <div className="sideBarHeader">2D Widget Input</div>
-        <PieChartInput />
-        </>
-      )
-  }
+  return <div>No chart selected</div>;
+};
 
-  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'doughnut' ) {
-    return (
-        <>
-        <div className="sideBarHeader">2D Widget Input</div>
-        <PieChartInput />
-        </>
-      )
-  }
-
-  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'polarArea' ) {
-    return (
-        <>
-        <div className="sideBarHeader">2D Widget Input</div>
-        <PieChartInput />
-        </>
-      )
-  }
-
-  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'progress 1' ) {
-    return (
-        <>
-        <div className="sideBarHeader">2D Widget Input</div>
-        <Progress1Input />
-        </>
-      )
-  }
-
-  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'progress 2' ) {
-    return (
-        <>
-        <div className="sideBarHeader">2D Widget Input</div>
-        <Progress2Input />
-        </>
-      )
-  }
-
-  else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'warehouseThroughput floating' ) {
-    return (
-        <>
-        <div className="sideBarHeader">Floting Widget Input</div>
-        <WarehouseThroughputInputComponent />
-        </>
-      )
-  }
-
-  else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'fleetEfficiency floating' ) {
-    return (
-        <>
-        <div className="sideBarHeader">Floting Widget Input</div>
-        <FleetEfficiencyInputComponent />
-        </>
-      )
-  }
-
-  else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'floating total-card' ) {
-    return (
-        <>
-        <div className="sideBarHeader">Floting Widget Input</div>
-        <FleetEfficiencyInputComponent />
-        </>
-      )
-  }
-
-  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 1' ) {
-    return (
-        <>
-        <div className="sideBarHeader">3D Widget Input</div>
-        <Widget4InputCard3D />
-        </>
-      )
-  }
-
-  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 2' ) {
-    return (
-        <>
-        <div className="sideBarHeader">3D Widget Input</div>
-        <Widget2InputCard3D />
-        </>
-      )
-  }
-
-  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 3' ) {
-    return (
-        <>
-        <div className="sideBarHeader">3D Widget Input</div>
-        <Widget3InputCard3D />
-        </>
-      )
-  }
-
-  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 4' ) {
-    return (
-        <>
-        <div className="sideBarHeader">3D Widget Input</div>
-        <Widget4InputCard3D />
-        </>
-      )
-  }
-
-  else {
-    return (
-        <div>No chart selected</div>
-      )
-  }
-}
-
-export default InputSelecterComponent
\ No newline at end of file
+export default InputSelecterComponent;
\ No newline at end of file
diff --git a/app/src/modules/visualization/widgets/floating/cards/TotalCardComponent.tsx b/app/src/modules/visualization/widgets/floating/cards/TotalCardComponent.tsx
index edc19e6..2e6886c 100644
--- a/app/src/modules/visualization/widgets/floating/cards/TotalCardComponent.tsx
+++ b/app/src/modules/visualization/widgets/floating/cards/TotalCardComponent.tsx
@@ -12,7 +12,7 @@ import {
 } from "../../../../../components/icons/3dChartIcons";
 
 const TotalCardComponent = ({ object }: any) => {
-  console.log('object: ', object);
+
   const [progress, setProgress] = useState<any>(0);
   const [measurements, setmeasurements] = useState<any>({});
   const [duration, setDuration] = useState("1h");

From 3ad1cb3c58616e4dfb28ed4c737f0008a878ec4f Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Fri, 23 May 2025 12:07:58 +0530
Subject: [PATCH 2/7] feat: enhance Messages and ThreadChat components with
 improved textarea handling and styling

---
 .../components/ui/collaboration/Messages.tsx  |  55 ++++++++-
 .../ui/collaboration/ThreadChat.tsx           |  44 ++++++--
 .../function/textAreaHeightAdjust.ts          |  17 +++
 app/src/modules/scene/setup/setup.tsx         |   3 +-
 app/src/pages/Project.tsx                     |   2 +-
 app/src/styles/components/input.scss          |   3 +-
 app/src/styles/scene/comments.scss            | 105 ++++++++++++++++--
 7 files changed, 201 insertions(+), 28 deletions(-)
 create mode 100644 app/src/components/ui/collaboration/function/textAreaHeightAdjust.ts

diff --git a/app/src/components/ui/collaboration/Messages.tsx b/app/src/components/ui/collaboration/Messages.tsx
index 3440204..3fffb4b 100644
--- a/app/src/components/ui/collaboration/Messages.tsx
+++ b/app/src/components/ui/collaboration/Messages.tsx
@@ -1,30 +1,71 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
 import { KebabIcon } from "../../icons/ExportCommonIcons";
+import { adjustHeight } from "./function/textAreaHeightAdjust";
 
 interface MessageProps {
-  val: Reply;
+  val: Reply | CommentSchema;
   i: number;
 }
 
 const Messages: React.FC<MessageProps> = ({ val, i }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [openOptions, setOpenOptions] = useState(false);
+
+  // input
+  const [value, setValue] = useState<string>(
+    "reply" in val ? val.reply : val.comment
+  );
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
   const currentUser = "1";
 
   const UserName = "username";
 
+  useEffect(() => {
+    if (textareaRef.current) adjustHeight(textareaRef.current);
+  }, [value]);
+
+  function handleCancelAction() {
+    setIsEditing(false);
+  }
+
+  function handleSaveAction() {
+    setIsEditing(false);
+  }
+
   return (
     <>
       {isEditing ? (
         <div className="edit-container">
           <div className="input-container">
-            <textarea />
+            <textarea
+              placeholder="type here"
+              ref={textareaRef}
+              autoFocus
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              style={{ resize: "none" }}
+            />
           </div>
           <div className="actions-container">
+            <div className="options"></div>
             <div className="actions">
-              <button className="cancel-button">Cancel</button>
-              <button className="save-button">Save</button>
+              <button
+                className="cancel-button"
+                onClick={() => {
+                  handleCancelAction();
+                }}
+              >
+                Cancel
+              </button>
+              <button
+                className="save-button"
+                onClick={() => {
+                  handleSaveAction();
+                }}
+              >
+                Save
+              </button>
             </div>
           </div>
         </div>
@@ -66,7 +107,9 @@ const Messages: React.FC<MessageProps> = ({ val, i }) => {
                 )}
               </div>
             )}
-            <div className="message">{val.reply}</div>
+            <div className="message">
+              {"reply" in val ? val.reply : val.comment}
+            </div>
           </div>
         </div>
       )}
diff --git a/app/src/components/ui/collaboration/ThreadChat.tsx b/app/src/components/ui/collaboration/ThreadChat.tsx
index 10c4a23..f3d5274 100644
--- a/app/src/components/ui/collaboration/ThreadChat.tsx
+++ b/app/src/components/ui/collaboration/ThreadChat.tsx
@@ -1,37 +1,49 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { CloseIcon, KebabIcon } from "../../icons/ExportCommonIcons";
 import Messages from "./Messages";
 import { ExpandIcon } from "../../icons/SimulationIcons";
+import { adjustHeight } from "./function/textAreaHeightAdjust";
 
 const ThreadChat: React.FC = () => {
   const [openThreadOptions, setOpenThreadOptions] = useState(false);
+
+  const [inputActive, setInputActive] = useState(false);
+
+  const [value, setValue] = useState<string>("");
+
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
   const messages = [
     {
       replyId: "user 1",
       creatorId: "1",
       createdAt: "hello, thread check",
       lastUpdatedAt: "2 hrs ago",
-      reply: "true",
+      reply: "reply 1",
     },
     {
       replyId: "user 2",
       creatorId: "2",
       createdAt: "hello, thread check",
       lastUpdatedAt: "2 hrs ago",
-      reply: "true",
+      reply: "reply 2",
     },
   ];
 
+  useEffect(() => {
+    if (textareaRef.current) adjustHeight(textareaRef.current);
+  }, [value]);
+
   return (
-    <div className="thread-char-wrapper">
-      <div className="thread-char-container">
+    <div className="thread-chat-wrapper">
+      <div className="thread-chat-container">
         <div className="header-wrapper">
           <div className="header">Comment</div>
           <div className="header-options">
             <button
               className="options-button"
               onClick={() => {
-                setOpenThreadOptions(true);
+                setOpenThreadOptions(!openThreadOptions);
               }}
             >
               <KebabIcon />
@@ -40,7 +52,7 @@ const ThreadChat: React.FC = () => {
               <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 className="options delete">Delete Thread</div>
               </div>
             )}
             <button className="close-button">
@@ -54,9 +66,21 @@ const ThreadChat: React.FC = () => {
           ))}
         </div>
         <div className="send-message-wrapper">
-          <div className="input-container">
-            <input type="text" />
-            <div className="sent-button">
+          <div className={`input-container ${inputActive ? "active" : ""}`}>
+            <textarea
+              placeholder="type something"
+              ref={textareaRef}
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              onFocus={() => setInputActive(true)}
+              onBlur={() => setInputActive(false)}
+              style={{ resize: "none" }}
+            />
+            <div
+              className={`sent-button ${
+                value === "" ? "disable-send-btn" : ""
+              }`}
+            >
               <ExpandIcon />
             </div>
           </div>
diff --git a/app/src/components/ui/collaboration/function/textAreaHeightAdjust.ts b/app/src/components/ui/collaboration/function/textAreaHeightAdjust.ts
new file mode 100644
index 0000000..63640d1
--- /dev/null
+++ b/app/src/components/ui/collaboration/function/textAreaHeightAdjust.ts
@@ -0,0 +1,17 @@
+export const adjustHeight = (textareaRef: HTMLTextAreaElement) => {
+    const el = textareaRef;
+    if (el) {
+        el.style.height = "auto";
+        el.style.height = "38px";
+
+        // Clamp to max height for 6 lines
+        const lineHeight = 18; // px, adjust if needed
+        const maxHeight = lineHeight * 6;
+        if (el.scrollHeight > maxHeight) {
+            el.style.overflowY = "auto";
+            el.style.height = `${maxHeight}px`;
+        } else {
+            el.style.overflowY = "hidden";
+        }
+    }
+};
\ No newline at end of file
diff --git a/app/src/modules/scene/setup/setup.tsx b/app/src/modules/scene/setup/setup.tsx
index f3f8d15..184bc56 100644
--- a/app/src/modules/scene/setup/setup.tsx
+++ b/app/src/modules/scene/setup/setup.tsx
@@ -5,7 +5,6 @@ import Controls from '../controls/controls';
 import { Environment } from '@react-three/drei'
 
 import background from "../../../assets/textures/hdr/mudroadpuresky2k.hdr";
-import { MovingClouds } from '../clouds/clouds';
 
 function Setup() {
     return (
@@ -18,7 +17,7 @@ function Setup() {
 
             <PostProcessing />
 
-            <MovingClouds />
+            {/* <MovingClouds /> */}
 
             <Environment files={background} environmentIntensity={1.5} />
         </>
diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx
index 2ab193e..fe16eeb 100644
--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@@ -183,7 +183,7 @@ const Project: React.FC = () => {
         </>
       )}
       <VersionSaved />
-      {/* <ThreadChat /> */}
+      <ThreadChat />
     </div>
   );
 };
diff --git a/app/src/styles/components/input.scss b/app/src/styles/components/input.scss
index 749094a..9ce31a7 100644
--- a/app/src/styles/components/input.scss
+++ b/app/src/styles/components/input.scss
@@ -3,7 +3,8 @@
 
 // global input style
 
-input {
+input,
+textarea {
   width: 100%;
   padding: 4px 8px;
   border-radius: #{$border-radius-large};
diff --git a/app/src/styles/scene/comments.scss b/app/src/styles/scene/comments.scss
index b5150d1..f7d5994 100644
--- a/app/src/styles/scene/comments.scss
+++ b/app/src/styles/scene/comments.scss
@@ -93,36 +93,86 @@
   }
 }
 
-.thread-char-wrapper {
+.thread-chat-wrapper {
   position: absolute;
   // remove later
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   // ----
-  z-index: 10000;
-  .thread-char-container {
+  z-index: #{$z-index-ui-highest};
+  .thread-chat-container {
+    background: var(--background-color);
+    backdrop-filter: blur(14px);
+    border-radius: #{$border-radius-extra-large};
+    width: 20rem;
     .header-wrapper {
-      .header {
-      }
+      padding: 12px;
+      @include flex-space-between;
       .header-options {
-        .options-button {
-        }
+        @include flex-center;
+        position: relative;
         .options-list {
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          transform: translate(-24px, 100%);
+          background: var(--background-color);
+          padding: 8px 4px;
+          border-radius: #{$border-radius-medium};
+          backdrop-filter: blur(10px);
           .options {
+            text-wrap: nowrap;
+            padding: 2px 4px;
+            border-radius: #{$border-radius-medium};
+            cursor: pointer;
+            &:hover {
+              background: var(--background-color-accent);
+            }
+            &.delete {
+              &:hover {
+                color: var(--log-error-text-color);
+                background: var(--log-error-background-color);
+              }
+            }
+          }
+        }
+        .options-button,
+        .close-button {
+          @include flex-center;
+          height: 24px;
+          width: 24px;
+          border-radius: #{$border-radius-medium};
+          &:hover {
+            background: var(--background-color-solid);
           }
         }
         .close-button {
+          svg {
+            scale: 1.4;
+          }
         }
       }
     }
     .messages-wrapper {
+      padding: 12px;
+      padding-top: 0;
       .edit-container {
         .input-container {
         }
         .actions-container {
+          @include flex-space-between;
+          width: 100%;
+          margin: 8px 0;
           .actions {
-            .cancel-button {
+            @include flex-center;
+            gap: 4px;
+            .cancel-button,
+            .save-button {
+              padding: 4px 6px;
+              border-radius: #{$border-radius-large};
+              background: var(--background-color-solid);
+              outline: 1px solid var(--border-color);
             }
             .save-button {
             }
@@ -151,8 +201,47 @@
       }
     }
     .send-message-wrapper {
+      padding: 12px;
+      padding-top: 8px;
       .input-container {
+        position: relative;
+        @include flex-space-between;
+        background: var(--background-color);
+        border-radius: #{$border-radius-extra-large};
+        outline: 1px solid var(--border-color);
+        textarea {
+          background: transparent;
+          outline: none;
+          width: calc(100% - 36px);
+          overflow: hidden;
+          line-height: 28px;
+          max-height: 108px;
+        }
         .sent-button {
+          position: absolute;
+          right: 2px;
+          bottom: 2px;
+          @include flex-center;
+          padding: 2px;
+          svg {
+            rotate: 45deg;
+          }
+        }
+        .disable-send-btn {
+          filter: saturate(0);
+        }
+        &.active {
+          background: var(--background-color-solid);
+          padding-top: 4px;
+          flex-direction: column;
+          align-items: end;
+          textarea {
+            width: 100%;
+            line-height: 18px;
+          }
+          .sent-button {
+            position: relative;
+          }
         }
       }
     }

From b6597a912aed3a880ab591230f84d23bad87352d Mon Sep 17 00:00:00 2001
From: Gomathi9520 <gomathi@hexrfactory.com>
Date: Fri, 23 May 2025 12:12:23 +0530
Subject: [PATCH 3/7] chore: update ProductionCapacity component for improved
 readability and maintainability

---
 .../widgets/3d/cards/ProductionCapacity.tsx   | 129 +++++++++---------
 1 file changed, 66 insertions(+), 63 deletions(-)

diff --git a/app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx b/app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx
index 324f53c..a0620e9 100644
--- a/app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx
+++ b/app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx
@@ -31,6 +31,7 @@ interface ProductionCapacityProps {
   type: string;
   position: [number, number, number];
   rotation: [number, number, number];
+  scale?: [number, number, number];
   Data?: any;
   onContextMenu?: (event: React.MouseEvent) => void;
   // onPointerDown:any
@@ -41,7 +42,8 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
   type,
   Data,
   position,
-  rotation,
+  rotation = [0, 0, 0],
+  scale = [0.5, 0.5, 0.5],
   onContextMenu,
 }) => {
   const { selectedChartId, setSelectedChartId } = useWidgetStore();
@@ -198,74 +200,75 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
   useEffect(() => { }, [rotation]);
 
   return (
-
-    <Html
-      // data
-      position={position}
-      scale={[0.5, 0.5, 0.5]}
-      rotation={rotation}
-      // class
-      wrapperClass="pointer-none"
-      // other
-      transform
-      zIndexRange={[1, 0]}
-      prepend
-      // sprite
-      distanceFactor={20}
-      // events
-      onDragOver={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }}
-      onDrop={(e) => {
-        e.preventDefault();
-      }}
-    >
-      <div
-        className={`productionCapacity-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""
-          }`}
-        onClick={() => setSelectedChartId({ id: id, type: type })}
-        onContextMenu={onContextMenu}
-        style={{
-          width: "300px", // Original width
-          height: "300px", // Original height
-          // transform: transformStyle.transform,
-          transformStyle: "preserve-3d",
-          position: "absolute",
-          transform: "translate(-50%, -50%)",
+    <>
+      {position && scale && rotation && <Html
+        // data
+        position={position}
+        scale={scale}
+        rotation={rotation}
+        // class
+        wrapperClass="pointer-none"
+        // other
+        transform
+        zIndexRange={[1, 0]}
+        prepend
+        // sprite
+        distanceFactor={20}
+        // events
+        onDragOver={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+        onDrop={(e) => {
+          e.preventDefault();
         }}
       >
-        <div className="headeproductionCapacityr-wrapper">
-          <div className="header">Production Capacity</div>
-          <div className="production-capacity">
-            <div className="value">1,200</div>{" "}
-            <div className="value">units/hour</div>
-          </div>
-          <div className="production-capacity">
-            <div className="current">
-              <div className="key">Current</div>
-              <div className="value">1500</div>
+        <div
+          className={`productionCapacity-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""
+            }`}
+          onClick={() => setSelectedChartId({ id: id, type: type })}
+          onContextMenu={onContextMenu}
+          style={{
+            width: "300px", // Original width
+            height: "300px", // Original height
+            // transform: transformStyle.transform,
+            transformStyle: "preserve-3d",
+            position: "absolute",
+            transform: "translate(-50%, -50%)",
+          }}
+        >
+          <div className="headeproductionCapacityr-wrapper">
+            <div className="header">Production Capacity</div>
+            <div className="production-capacity">
+              <div className="value">1,200</div>{" "}
+              <div className="value">units/hour</div>
             </div>
-            <div className="target">
-              <div className="key">Target</div>
-              <div className="value">2.345</div>
+            <div className="production-capacity">
+              <div className="current">
+                <div className="key">Current</div>
+                <div className="value">1500</div>
+              </div>
+              <div className="target">
+                <div className="key">Target</div>
+                <div className="value">2.345</div>
+              </div>
+              {/* <div className="value">units/hour</div> */}
             </div>
-            {/* <div className="value">units/hour</div> */}
+          </div>{" "}
+          <div className="bar-chart charts">
+            {/* Bar Chart */}
+            <Bar
+              data={
+                Object.keys(measurements).length > 0
+                  ? chartData
+                  : defaultChartData
+              }
+              options={chartOptions}
+            />
           </div>
-        </div>{" "}
-        <div className="bar-chart charts">
-          {/* Bar Chart */}
-          <Bar
-            data={
-              Object.keys(measurements).length > 0
-                ? chartData
-                : defaultChartData
-            }
-            options={chartOptions}
-          />
         </div>
-      </div>
-    </Html>
+      </Html>}
+    </>
   );
 };
 

From 4dddc82c8c24c97c91687fd82ebe48fe9070d934 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Fri, 23 May 2025 15:29:18 +0530
Subject: [PATCH 4/7] feat: add delete action to Messages component and enhance
 styling for better user experience

---
 .../components/ui/collaboration/Messages.tsx  | 16 ++++-
 .../ui/collaboration/ThreadChat.tsx           |  7 +-
 app/src/styles/scene/comments.scss            | 70 +++++++++++++++++--
 3 files changed, 84 insertions(+), 9 deletions(-)

diff --git a/app/src/components/ui/collaboration/Messages.tsx b/app/src/components/ui/collaboration/Messages.tsx
index 3fffb4b..0544b1c 100644
--- a/app/src/components/ui/collaboration/Messages.tsx
+++ b/app/src/components/ui/collaboration/Messages.tsx
@@ -33,6 +33,10 @@ const Messages: React.FC<MessageProps> = ({ val, i }) => {
     setIsEditing(false);
   }
 
+  function handleDeleteAction() {
+    setOpenOptions(false);
+  }
+
   return (
     <>
       {isEditing ? (
@@ -87,7 +91,7 @@ const Messages: React.FC<MessageProps> = ({ val, i }) => {
                 <button
                   className="more-options-button"
                   onClick={() => {
-                    setOpenOptions(true);
+                    setOpenOptions(!openOptions);
                   }}
                 >
                   <KebabIcon />
@@ -97,12 +101,20 @@ const Messages: React.FC<MessageProps> = ({ val, i }) => {
                     <button
                       className="option"
                       onClick={() => {
+                        setOpenOptions(false);
                         setIsEditing(true);
                       }}
                     >
                       Edit
                     </button>
-                    <button className="option">Delete</button>
+                    <button
+                      className="option"
+                      onClick={() => {
+                        handleDeleteAction();
+                      }}
+                    >
+                      Delete
+                    </button>
                   </div>
                 )}
               </div>
diff --git a/app/src/components/ui/collaboration/ThreadChat.tsx b/app/src/components/ui/collaboration/ThreadChat.tsx
index f3d5274..4447188 100644
--- a/app/src/components/ui/collaboration/ThreadChat.tsx
+++ b/app/src/components/ui/collaboration/ThreadChat.tsx
@@ -17,14 +17,15 @@ const ThreadChat: React.FC = () => {
     {
       replyId: "user 1",
       creatorId: "1",
-      createdAt: "hello, thread check",
+      createdAt: "2 hrs ago",
       lastUpdatedAt: "2 hrs ago",
-      reply: "reply 1",
+      reply:
+        "reply testing reply content 1, reply testing reply content 1reply testing reply content 1",
     },
     {
       replyId: "user 2",
       creatorId: "2",
-      createdAt: "hello, thread check",
+      createdAt: "2 hrs ago",
       lastUpdatedAt: "2 hrs ago",
       reply: "reply 2",
     },
diff --git a/app/src/styles/scene/comments.scss b/app/src/styles/scene/comments.scss
index f7d5994..20560a2 100644
--- a/app/src/styles/scene/comments.scss
+++ b/app/src/styles/scene/comments.scss
@@ -121,12 +121,14 @@
           padding: 8px 4px;
           border-radius: #{$border-radius-medium};
           backdrop-filter: blur(10px);
+          z-index: 100;
           .options {
             text-wrap: nowrap;
             padding: 2px 4px;
             border-radius: #{$border-radius-medium};
             cursor: pointer;
             &:hover {
+              color: var(--text-button-color);
               background: var(--background-color-accent);
             }
             &.delete {
@@ -159,6 +161,12 @@
       padding-top: 0;
       .edit-container {
         .input-container {
+          textarea{
+            background: var(--background-color);
+            &:focus{
+              outline-color: var(--border-color-accent);
+            }
+          }
         }
         .actions-container {
           @include flex-space-between;
@@ -169,34 +177,88 @@
             gap: 4px;
             .cancel-button,
             .save-button {
-              padding: 4px 6px;
+              padding: 4px 10px;
               border-radius: #{$border-radius-large};
               background: var(--background-color-solid);
               outline: 1px solid var(--border-color);
             }
             .save-button {
+              color: var(--text-button-color);
+              background: var(--background-color-accent);
+              outline: none;
             }
           }
         }
       }
       .message-container {
+        position: relative;
+        @include flex-space-between;
+        align-items: flex-start;
+        gap: 12px;
+        margin-top: 8px;
+        &:first-child{
+          margin: 0;
+        }
         .profile {
+          height: 28px;
+          width: 28px;
+          min-width: 28px;
+          text-transform: uppercase;
+          line-height: 28px;
+          text-align: center;
+          border-radius: #{$border-radius-circle};
         }
         .content {
+          width: 100%;
           .user-details {
+            display: flex;
+            align-items: flex-end;
+            gap: 8px;
             .user-name {
+              text-transform: capitalize;
             }
             .time {
+              font-size: var(--font-size-tiny);
+              color: var(--input-text-color);
             }
           }
         }
         .more-options {
+          position: absolute;
+          right: 0;
+          top: 0;
           .more-options-button {
-          }
-          .options-list {
-            .option {
+            @include flex-center;
+            height: 18px;
+            width: 18px;
+            border-radius: #{$border-radius-small};
+            &:hover{
+              background: var(--background-color-solid);
             }
           }
+          .options-list {
+            position: absolute;
+            right: 0;
+            padding: 3px 6px;
+            background: var(--background-color);
+            backdrop-filter: blur(10px);
+            outline: 1px solid var(--border-color);
+            border-radius: #{$border-radius-medium};
+            z-index: 100;
+            .option {
+              width: 100%;
+              border-radius: #{$border-radius-medium};
+              padding: 2px 6px;
+              text-align: start;
+              &:hover{
+                background: var(--background-color-accent);
+                color: var(--text-button-color);
+              }
+            }
+          }
+        }
+        .message{
+          margin-top: 6px;
         }
       }
     }

From 3dc56ee1efc551430587f3543fe0be4b7ff4a9fa Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Fri, 23 May 2025 15:31:05 +0530
Subject: [PATCH 5/7] feat: remove ThreadChat component from Project page for
 cleaner UI

---
 app/src/pages/Project.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx
index fe16eeb..3b75365 100644
--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@@ -39,7 +39,6 @@ import RegularDropDown from "../components/ui/inputs/RegularDropDown";
 import VersionSaved from "../components/layout/sidebarRight/versionHisory/VersionSaved";
 import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
 import { useProductStore } from "../store/simulation/useProductStore";
-import ThreadChat from "../components/ui/collaboration/ThreadChat";
 
 const Project: React.FC = () => {
   let navigate = useNavigate();
@@ -183,7 +182,6 @@ const Project: React.FC = () => {
         </>
       )}
       <VersionSaved />
-      <ThreadChat />
     </div>
   );
 };

From 53c2ad091754199ac0f4846e16ba3fbbbac593d4 Mon Sep 17 00:00:00 2001
From: Gomathi9520 <gomathi@hexrfactory.com>
Date: Fri, 23 May 2025 17:09:54 +0530
Subject: [PATCH 6/7] feat: implement draggable functionality for ThreadChat
 component

---
 .../ui/collaboration/ThreadChat.tsx           | 86 ++++++++++++++++---
 app/src/styles/scene/comments.scss            |  2 +-
 2 files changed, 75 insertions(+), 13 deletions(-)

diff --git a/app/src/components/ui/collaboration/ThreadChat.tsx b/app/src/components/ui/collaboration/ThreadChat.tsx
index f3d5274..3e4a5ef 100644
--- a/app/src/components/ui/collaboration/ThreadChat.tsx
+++ b/app/src/components/ui/collaboration/ThreadChat.tsx
@@ -6,12 +6,15 @@ import { adjustHeight } from "./function/textAreaHeightAdjust";
 
 const ThreadChat: React.FC = () => {
   const [openThreadOptions, setOpenThreadOptions] = useState(false);
-
   const [inputActive, setInputActive] = useState(false);
-
   const [value, setValue] = useState<string>("");
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const [dragging, setDragging] = useState(false);
+  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+  const [position, setPosition] = useState({ x: 100, y: 100 });
 
   const messages = [
     {
@@ -34,17 +37,78 @@ const ThreadChat: React.FC = () => {
     if (textareaRef.current) adjustHeight(textareaRef.current);
   }, [value]);
 
+  const clamp = (val: number, min: number, max: number) => {
+    return Math.min(Math.max(val, min), max);
+  };
+
+  const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0) return;
+
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+
+    const rect = wrapper.getBoundingClientRect();
+    const offsetX = event.clientX - rect.left;
+    const offsetY = event.clientY - rect.top;
+
+    setDragging(true);
+    setDragOffset({ x: offsetX, y: offsetY });
+
+    wrapper.setPointerCapture(event.pointerId);
+  };
+
+  const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (!dragging) return;
+
+    const container = document.getElementById("work-space-three-d-canvas");
+    const wrapper = wrapperRef.current;
+    if (!container || !wrapper) return;
+
+    const containerRect = container.getBoundingClientRect();
+    const wrapperRect = wrapper.getBoundingClientRect();
+
+    let newX = event.clientX - containerRect.left - dragOffset.x;
+    let newY = event.clientY - containerRect.top - dragOffset.y;
+
+    const maxX = containerRect.width - wrapper.offsetWidth;
+    const maxY = containerRect.height - wrapper.offsetHeight;
+
+    newX = clamp(newX, 0, maxX);
+    newY = clamp(newY, 0, maxY);
+
+    setPosition({ x: newX, y: newY });
+  };
+
+  const handlePointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (!dragging) return;
+    setDragging(false);
+    const wrapper = wrapperRef.current;
+    if (wrapper) wrapper.releasePointerCapture(event.pointerId);
+  };
+
   return (
-    <div className="thread-chat-wrapper">
+    <div
+      ref={wrapperRef}
+      className="thread-chat-wrapper"
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      style={{
+        position: "absolute",
+        left: position.x,
+        top: position.y,
+        cursor: dragging ? "grabbing" : "grab",
+        userSelect: "none",
+        zIndex: 9999,
+      }}
+    >
       <div className="thread-chat-container">
         <div className="header-wrapper">
           <div className="header">Comment</div>
           <div className="header-options">
             <button
               className="options-button"
-              onClick={() => {
-                setOpenThreadOptions(!openThreadOptions);
-              }}
+              onClick={() => setOpenThreadOptions(!openThreadOptions)}
             >
               <KebabIcon />
             </button>
@@ -60,11 +124,13 @@ const ThreadChat: React.FC = () => {
             </button>
           </div>
         </div>
+
         <div className="messages-wrapper">
           {messages.map((val, i) => (
-            <Messages val={val as Reply} i={i} key={val.replyId} />
+            <Messages val={val as any} i={i} key={val.replyId} />
           ))}
         </div>
+
         <div className="send-message-wrapper">
           <div className={`input-container ${inputActive ? "active" : ""}`}>
             <textarea
@@ -76,11 +142,7 @@ const ThreadChat: React.FC = () => {
               onBlur={() => setInputActive(false)}
               style={{ resize: "none" }}
             />
-            <div
-              className={`sent-button ${
-                value === "" ? "disable-send-btn" : ""
-              }`}
-            >
+            <div className={`sent-button ${value === "" ? "disable-send-btn" : ""}`}>
               <ExpandIcon />
             </div>
           </div>
diff --git a/app/src/styles/scene/comments.scss b/app/src/styles/scene/comments.scss
index f7d5994..b77240c 100644
--- a/app/src/styles/scene/comments.scss
+++ b/app/src/styles/scene/comments.scss
@@ -98,7 +98,7 @@
   // remove later
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  // transform: translate(-50%, -50%);
   // ----
   z-index: #{$z-index-ui-highest};
   .thread-chat-container {

From a8432c6902d8f38573469cb9ef83b05d39c245e6 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Fri, 23 May 2025 17:41:44 +0530
Subject: [PATCH 7/7] feat: remove unnecessary transform property from
 thread-chat-wrapper

---
 app/src/styles/scene/comments.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/src/styles/scene/comments.scss b/app/src/styles/scene/comments.scss
index c981fe3..02e001d 100644
--- a/app/src/styles/scene/comments.scss
+++ b/app/src/styles/scene/comments.scss
@@ -98,7 +98,6 @@
   // remove later
   top: 50%;
   left: 50%;
-  // transform: translate(-50%, -50%);
   // ----
   z-index: #{$z-index-ui-highest};
   .thread-chat-container {