feat(OUT-1381) : enabled images and attachments in comment card and comment input.

Author: arpandhakal

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': {

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"

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"