Merge pull request #1964 from Wai-Technologies/users/nikhil/bug-759-1758-1759-functionality-and-ui-issue-for-chatbot-and-stepper

Resolved Bug 759-1758-1759 : Functionality and ui issue for chatbot and stepper

Author: nknikhilkasar

raaghu-components/src/rds-comp-chat/rds-comp-chat.scss

@@ -10,6 +10,7 @@
 .comments-container .btn-icon.btn-md {
   width: 35px !important;
   height: 35px !important;
+  min-width: 35px !important;
 }
 
 .comment-box {

raaghu-components/src/rds-comp-chat/rds-comp-chat.stories.tsx

@@ -11,7 +11,10 @@ const meta: Meta<typeof RdsCompUserComments> = {
     },
     tags: ['autodocs'],
     argTypes: {
-        allowDelete: { control: "boolean" },
+        allowDelete: { 
+            control: "boolean",
+            description: "When true, allows deletion of any message (both sent and received)" 
+        },
         isEmojiPicker: { control: "boolean" },
         isFilepload: { control: "boolean" },
         dateFormat: {

raaghu-components/src/rds-comp-chat/rds-comp-chat.tsx

@@ -12,6 +12,7 @@ interface Comment {
     image?: string; // Optional image field for comments with images
     addedTime?: any; // Track when the comment was added
     CommentId? : number;
+    tempId?: string; // Add temporary ID for tracking
 }
 
 interface RdsCompUserCommentsProps {
@@ -55,12 +56,18 @@ const RdsCompUserComments = (props: RdsCompUserCommentsProps) => {
   } = props;
 
   const [commentText, setCommentText] = useState<string>('');
-  const [commentList, setCommentList] = useState<Comment[]>(comments);
+  const [commentList, setCommentList] = useState<Comment[]>([]);
   const [showEmojiPicker, setShowEmojiPicker] = useState(false); // Toggle emoji picker
-  const [selectedMessageIndex, setSelectedMessageIndex] = useState<number | null>(null); // Track selected message for deletion
+  const [selectedMessageId, setSelectedMessageId] = useState<string | null>(null); // Track by ID instead of index
 
   useEffect(() => {
-    setCommentList(comments); // Set initial comments from props
+    const commentsWithIds = comments.map(comment => {
+      if (!comment.tempId) {
+        return { ...comment, tempId: `temp-${Date.now()}-${Math.random().toString(36).substring(2, 9)}` };
+      }
+      return comment;
+    });
+    setCommentList(commentsWithIds);
   }, [comments]);
 
   useEffect(() => {
@@ -84,7 +91,7 @@ const RdsCompUserComments = (props: RdsCompUserCommentsProps) => {
     const handleClickOutside = (event: MouseEvent) => {
       const commentContainer = document.querySelector('.comments-container');
       if (commentContainer && !commentContainer.contains(event.target as Node)) {
-        setSelectedMessageIndex(null); // Reset selected message index
+        setSelectedMessageId(null); // Reset selected message index
       }
     };
 
@@ -105,6 +112,7 @@ const RdsCompUserComments = (props: RdsCompUserCommentsProps) => {
       date: new Date().toLocaleDateString('en-US'),
       comment: commentText, // Emoji and text will be added here
       addedTime: Date.now(), // Store the time when the comment was added
+      tempId: `temp-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`, // Add unique temporary ID
     };
 
     setCommentList([...commentList, newComment]);
@@ -127,6 +135,7 @@ const RdsCompUserComments = (props: RdsCompUserCommentsProps) => {
           comment: '', // No text for image-only comments
           image: reader.result as string, // Base64 image data
           addedTime: Date.now(), // Store the time when the comment was added
+          tempId: `temp-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`, // Add unique temporary ID
         };
 
         setCommentList([...commentList, newComment]); // Add the new image comment
@@ -140,36 +149,34 @@ const RdsCompUserComments = (props: RdsCompUserCommentsProps) => {
     setShowEmojiPicker(false); // Close the emoji picker
   };
 
-  const handleDeleteComment = (index: number) => {
-  if (!allowDelete) return;
-
-  // Get the comment to be deleted
-  const commentToDelete = commentList[index];
-  const commentId = commentToDelete?.CommentId;
+  const handleDeleteComment = (commentId: number, tempId: string) => {
+    if (!allowDelete) return;
 
-  if (commentId === undefined) return;
+    // Update the comments list
+    setCommentList((prevList) => prevList.filter(c => c.tempId !== tempId));
 
-  // Update the comments list
-  setCommentList((prevList) => prevList.filter((_, i) => i !== index));
+    // Reset selection
+    setSelectedMessageId(null);
 
-  props.handleDeleteComment?.(commentId); // Trigger the callback with the comment ID
-};
+    if (commentId !== undefined) {
+      props.handleDeleteComment?.(commentId);
+    }
+  };
 
-  const handleDeleteOptionClick = (index: number) => {
-    setSelectedMessageIndex((prevIndex) => (prevIndex === index ? null : index)); // Toggle selection
+  const handleDeleteOptionClick = (tempId: string, event: React.MouseEvent) => {
+    event.stopPropagation(); // Prevent event bubbling
+    setSelectedMessageId(prevId => (prevId === tempId ? null : tempId));
   };
 
-  const confirmDeleteMessage = () => {
-    if (selectedMessageIndex === null) return;
-  
-    const commentToDelete = commentList[selectedMessageIndex];
-    const commentId = commentToDelete?.CommentId;
-  
-    // Update the comments list
-    setCommentList((prevList) => prevList.filter((_, i) => i !== selectedMessageIndex));
-  
-    commentId && props.handleDeleteComment?.(commentId);
-    setSelectedMessageIndex(null); // Reset the selected message index
+  const confirmDeleteMessage = (event: React.MouseEvent) => {
+    event.stopPropagation(); // Prevent event bubbling
+    
+    if (!selectedMessageId) return;
+
+    const commentToDelete = commentList.find(c => c.tempId === selectedMessageId);
+    if (!commentToDelete) return;
+
+    handleDeleteComment(commentToDelete.CommentId!, selectedMessageId);
   };
 
   const formatDate = (date: Date, dateFormat: string) => {
@@ -186,13 +193,16 @@ const RdsCompUserComments = (props: RdsCompUserCommentsProps) => {
   };
 
   return (
-    <div className={`comments-container ${width}`}>
-     {commentList.map((comment, index) => {
+    <div className={`comments-container ${width}`} onClick={() => setSelectedMessageId(null)}>
+     {commentList.map((comment) => {
         const isCurrentUser = comment.firstName === currentUser.firstName && comment.lastName === currentUser.lastName;
-        const showDeleteIcon = allowDelete && (Date.now() - (comment.addedTime || 0) < deleteIconTimeout); // Show delete icon based on timeout
+        const isSelected = selectedMessageId === comment.tempId; // Check if the message is selected
 
         return (
-          <div key={index} className={`comment-box ${isCurrentUser ? 'current-user' : 'other-user'}`} onClick={() => handleDeleteOptionClick(index)}>
+          <div key={comment.tempId} className={`comment-box ${isCurrentUser ? 'current-user' : 'other-user'}`} onClick={(e) => {
+            e.stopPropagation();
+            handleDeleteOptionClick(comment.tempId!, e);
+          }}>
             <div className={`d-flex ${isCurrentUser ? 'flex-row-reverse' : ''}`}>
               <div className="profile-initials">
                 {comment.profilePic && comment.profilePic.trim() !== "" ? (
@@ -218,7 +228,7 @@ const RdsCompUserComments = (props: RdsCompUserCommentsProps) => {
                   {comment.comment}
                   {comment.image && <img src={comment.image} alt="uploaded" className="comment-image" />}
                 </div>
-                {selectedMessageIndex === index && (
+                {isSelected && allowDelete && (
                   <div className="delete-option mt-2">
                     <RdsIcon
                     name="delete"
@@ -233,21 +243,6 @@ const RdsCompUserComments = (props: RdsCompUserCommentsProps) => {
                   </div>
                 )}
               </div>
-
-              {showDeleteIcon && isCurrentUser && (
-                <span className="d-flex align-items-top me-2 mt-2 d-none">
-                  <RdsIcon
-                    name="delete"
-                    fill={false}
-                    stroke={true}
-                    colorVariant="danger"
-                    isCursorPointer={true}
-                    width="18px"
-                    height="18px"
-                    onClick={() => handleDeleteComment(index)}
-                  />
-                </span>
-              )}
             </div>
 
             <div className={`comment-footer d-flex ${isCurrentUser ? 'justify-content-end' : 'justify-content-start'}`}>