fix(VE-5055): add validations in textarea

src/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.tsx

@@ -173,6 +173,7 @@ const CommentTextArea: React.FC<ICommentTextArea> = React.memo(
             const target = event.target as HTMLTextAreaElement | null;
             if (!target) return;
             const newPlainTextValue = target.value;
+            const trimmedValue = newPlainTextValue.trim();
 
             // TODO mentions will be handled in upcoming PRs this is a zombie code for now
             // const to_users = [...state.to_users];
@@ -196,7 +197,7 @@ const CommentTextArea: React.FC<ICommentTextArea> = React.memo(
                 state.toUsers ?? []
             );
             setError({
-                hasError: errorMessage !== "",
+                hasError: errorMessage !== "" || trimmedValue === "",
                 message: errorMessage,
             });
 

src/visualBuilder/components/Collab/ThreadPopup/ThreadFooter.tsx

@@ -45,12 +45,14 @@ const ThreadFooter = ({
                 >
                     Cancel
                 </Button>
+                {isDisabled}
+                {loading}
                 <Button
                     type="button"
                     buttonType="primary"
                     onClick={onSubmit}
                     testId={"thread-save-btn"}
-                    disabled={isDisabled}
+                    disabled={isDisabled || loading}
                 >
                     {editComment === "" ? "Post" : "Update"}
                 </Button>

src/visualBuilder/utils/__test__/collabUtils.test.ts

@@ -77,6 +77,21 @@ describe("Utility Functions", () => {
             expect(result.message).toBe("Hello {{1}}");
             expect(result.toUsers).toEqual(["1"]);
         });
+
+        it("should trim the message and replace multiple spaces with a single space", () => {
+            const state = {
+                message: "   Hello   @JohnDoe   and   @JaneDoe    ",
+                toUsers: [
+                    { id: "1", display: "@JohnDoe" },
+                    { id: "2", display: "@JaneDoe" },
+                ],
+                createdBy: "1",
+                author: "[email protected]",
+            };
+            const result = getCommentBody(state);
+            expect(result.message).toBe("Hello {{1}} and {{2}}");
+            expect(result.toUsers).toEqual(["1", "2"]);
+        });
     });
 
     describe("getThreadTitle", () => {

src/visualBuilder/utils/collabUtils.ts

@@ -115,7 +115,7 @@ export const sanitizeData = (dirty: any): string => {
  * @returns {Object} The comment body containing the sanitized message and mentioned users.
  */
 export const getCommentBody = (state: ICommentState): ICommentState => {
-    let finalMessage = state.message;
+    let finalMessage = state.message.trim().replace(/\s+/g, " ");
     const comment = {
         message: finalMessage,
         toUsers: [],