From c5faa76317b5b09badd148b632dfb236cf1f8883 Mon Sep 17 00:00:00 2001
From: Arpan Dhakal <arpandhakal20@gmail.com>
Date: Mon, 10 Feb 2025 16:22:02 +0545
Subject: [PATCH] feat(OUT-1381) : enabled images and attachments in comment
 card and comment input.

---
 src/components/AttachmentLayout.tsx    |  1 -
 src/components/cards/CommentCard.tsx   |  4 ++++
 src/components/inputs/CommentInput.tsx | 21 +++++++++++++++++++--
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/AttachmentLayout.tsx b/src/components/AttachmentLayout.tsx
index 1c074c112..336fb5af7 100644
--- a/src/components/AttachmentLayout.tsx
+++ b/src/components/AttachmentLayout.tsx
@@ -30,7 +30,6 @@ const AttachmentLayout: React.FC<AttachmentLayoutProps> = ({ selected, src, file
     padding: { sm: '4px 8px', md: '4px 12px 4px 8px' },
     border: (theme) => `1px solid ${theme.color.gray[selected ? 600 : 150]}`,
     background: '#fff',
-    boxShadow: '0px 3px 4px 0px rgba(16, 17, 19, 0.06), 0px 4px 11px 0px rgba(20, 21, 24, 0.18)',
 
     '@media (max-width: 600px)': {
       '&:active': {
diff --git a/src/components/cards/CommentCard.tsx b/src/components/cards/CommentCard.tsx
index e303df031..560bec554 100644
--- a/src/components/cards/CommentCard.tsx
+++ b/src/components/cards/CommentCard.tsx
@@ -2,6 +2,7 @@
 
 import { DotSeparator } from '@/app/detail/ui/DotSeparator'
 import { BoldTypography, CommentCardContainer, StyledModal, StyledTypography } from '@/app/detail/ui/styledComponent'
+import AttachmentLayout from '@/components/AttachmentLayout'
 import { ListBtn } from '@/components/buttons/ListBtn'
 import { PrimaryBtn } from '@/components/buttons/PrimaryBtn'
 import { MenuBox } from '@/components/inputs/MenuBox'
@@ -127,6 +128,7 @@ export const CommentCard = ({
           getContent={() => {}}
           readonly
           editorClass="tapwrite-comment"
+          attachmentLayout={AttachmentLayout}
         />
 
         {Array.isArray((comment as LogResponse).details?.replies) &&
@@ -150,6 +152,7 @@ export const CommentCard = ({
                   getContent={() => {}}
                   readonly
                   editorClass="tapwrite-comment"
+                  attachmentLayout={AttachmentLayout}
                 />
               </Stack>
             )
@@ -168,6 +171,7 @@ export const CommentCard = ({
                 placeholder="Leave a reply..."
                 suggestions={assigneeSuggestions}
                 editorClass="tapwrite-reply-input"
+                attachmentLayout={AttachmentLayout}
               />
               <InputAdornment
                 position="end"
diff --git a/src/components/inputs/CommentInput.tsx b/src/components/inputs/CommentInput.tsx
index 64eac7d94..f721b5020 100644
--- a/src/components/inputs/CommentInput.tsx
+++ b/src/components/inputs/CommentInput.tsx
@@ -2,11 +2,14 @@
 
 import { CommentCardContainer } from '@/app/detail/ui/styledComponent'
 import { CopilotAvatar } from '@/components/atoms/CopilotAvatar'
+import AttachmentLayout from '@/components/AttachmentLayout'
+import { MAX_UPLOAD_LIMIT } from '@/constants/attachments'
 import { selectAuthDetails } from '@/redux/features/authDetailsSlice'
 import { selectTaskBoard } from '@/redux/features/taskBoardSlice'
 import { selectTaskDetails } from '@/redux/features/taskDetailsSlice'
 import { CreateComment } from '@/types/dto/comment.dto'
 import { getMentionsList } from '@/utils/getMentionList'
+import { deleteEditorAttachmentsHandler, uploadImageHandler } from '@/utils/inlineImage'
 import { ArrowUpward } from '@mui/icons-material'
 import { IconButton, InputAdornment, Stack } from '@mui/material'
 import { useEffect, useState } from 'react'
@@ -23,7 +26,7 @@ export const CommentInput = ({ createComment, task_id }: Prop) => {
   const [isListOrMenuActive, setIsListOrMenuActive] = useState(false)
   const { assigneeSuggestions } = useSelector(selectTaskDetails)
   const { tokenPayload } = useSelector(selectAuthDetails)
-  const { assignee } = useSelector(selectTaskBoard)
+  const { assignee, token, activeTask } = useSelector(selectTaskBoard)
   const currentUserId = tokenPayload?.internalUserId ?? tokenPayload?.clientId
   const currentUserDetails = assignee.find((el) => el.id === currentUserId)
 
@@ -77,6 +80,15 @@ export const CommentInput = ({ createComment, task_id }: Prop) => {
     }
   }, [detail, isListOrMenuActive]) // Depend on detail to ensure the latest state is captured
 
+  const uploadFn = token
+    ? async (file: File) => {
+        if (activeTask) {
+          const fileUrl = await uploadImageHandler(file, token ?? '', activeTask.workspaceId, task_id)
+          return fileUrl
+        }
+      }
+    : undefined
+
   return (
     <Stack direction="row" columnGap={2} alignItems="flex-start">
       <CopilotAvatar
@@ -99,7 +111,7 @@ export const CommentInput = ({ createComment, task_id }: Prop) => {
           content={detail}
           getContent={setDetail}
           placeholder="Leave a comment..."
-          suggestions={assigneeSuggestions}
+          // suggestions={assigneeSuggestions} enable this for mentions
           editorClass="tapwrite-comment-input"
           hardbreak
           onActiveStatusChange={(prop) => {
@@ -113,6 +125,11 @@ export const CommentInput = ({ createComment, task_id }: Prop) => {
             display: 'flex',
             flexDirection: 'column',
           }}
+          uploadFn={uploadFn}
+          deleteEditorAttachments={(url) => deleteEditorAttachmentsHandler(url, token ?? '', task_id, null)}
+          attachmentLayout={AttachmentLayout}
+          addAttachmentButton
+          maxUploadLimit={MAX_UPLOAD_LIMIT}
         />
         <InputAdornment
           position="end"