OUT-1380 | Comment box designs

package.json

@@ -68,7 +68,7 @@
     "server-only": "^0.0.1",
     "supabase": "^2.1.1",
     "swr": "^2.2.5",
-    "tapwrite": "1.1.82",
+    "tapwrite": "1.1.83",
     "zod": "^3.23.8"
   },
   "devDependencies": {

src/app/api/activity-logs/services/activity-log.service.ts

@@ -16,6 +16,8 @@ import { LogResponse, LogResponseSchema } from '../schemas/LogResponseSchema'
 import APIError from '@api/core/exceptions/api'
 import httpStatus from 'http-status'
 import { MAX_FETCH_ASSIGNEE_COUNT } from '@/constants/users'
+import { replaceImageSrc } from '@/utils/signedUrlReplacer'
+import { getSignedUrl } from '@/utils/signUrl'
 
 export class ActivityLogService extends BaseService {
   constructor(user: User) {
@@ -87,6 +89,14 @@ export class ActivityLogService extends BaseService {
 
     const commentService = new CommentService(this.user)
     const comments = await commentService.getCommentsByIds(commentIds)
+    const processedComments = await Promise.all(
+      comments.map(async (comment) => {
+        return {
+          ...comment,
+          content: await replaceImageSrc(comment.content, getSignedUrl),
+        }
+      }),
+    )
     const allReplies = await commentService.getReplies(commentIds)
 
     const logResponseData = filteredActivityLogs.map((activityLog) => {
@@ -97,7 +107,7 @@ export class ActivityLogService extends BaseService {
           activityLog.type,
           activityLog.userRole,
           activityLog.details,
-          comments,
+          processedComments,
           allReplies,
           internalUsers,
           clientUsers,

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,14 @@ export const CommentCard = ({
           getContent={() => {}}
           readonly
           editorClass="tapwrite-comment"
+          attachmentLayout={AttachmentLayout}
+          parentContainerStyle={{
+            width: '100%',
+            height: '100%',
+            maxWidth: '566px',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
         />
 
         {Array.isArray((comment as LogResponse).details?.replies) &&
@@ -150,6 +159,14 @@ export const CommentCard = ({
                   getContent={() => {}}
                   readonly
                   editorClass="tapwrite-comment"
+                  attachmentLayout={AttachmentLayout}
+                  parentContainerStyle={{
+                    width: '100%',
+                    height: '100%',
+                    maxWidth: '566px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                  }}
                 />
               </Stack>
             )
@@ -168,6 +185,14 @@ export const CommentCard = ({
                 placeholder="Leave a reply..."
                 suggestions={assigneeSuggestions}
                 editorClass="tapwrite-reply-input"
+                attachmentLayout={AttachmentLayout}
+                parentContainerStyle={{
+                  width: '100%',
+                  height: '100%',
+                  maxWidth: '566px',
+                  display: 'flex',
+                  flexDirection: 'column',
+                }}
               />
               <InputAdornment
                 position="end"

src/components/inputs/CommentInput.tsx

@@ -2,14 +2,17 @@
 
 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'
+import { Box, IconButton, InputAdornment, Stack } from '@mui/material'
+import { useEffect, useRef, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { Tapwrite } from 'tapwrite'
 
@@ -23,7 +26,7 @@
   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)
 
@@ -75,8 +78,45 @@
     return () => {
       window.removeEventListener('keydown', handleKeyDown)
     }
   }, [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
+  const [isDragging, setIsDragging] = useState(false)
+  const dragCounter = useRef(0)
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault()
+    if (!isDragging) {
+      setIsDragging(true)
+    }
+  }
+
+  const handleDragEnter = () => {
+    dragCounter.current += 1
+    if (!isDragging) {
+      setIsDragging(true)
+    }
+  }
+
+  const handleDragLeave = () => {
+    dragCounter.current -= 1
+    if (dragCounter.current === 0) {
+      setIsDragging(false)
+    }
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragging(false)
+    dragCounter.current = 0
+  }
   return (
     <Stack direction="row" columnGap={2} alignItems="flex-start">
       <CopilotAvatar
@@ -91,15 +131,19 @@
       />
       <CommentCardContainer
         sx={{
-          backgroundColor: (theme) => `${theme.color.base.white}`,
+          backgroundColor: (theme) => (isDragging ? theme.color.background.bgCommentDrag : theme.color.base.white),
           wordBreak: 'break-word',
         }}
+        onDragOver={handleDragOver}
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
       >
         <Tapwrite
           content={detail}
           getContent={setDetail}
           placeholder="Leave a comment..."
-          suggestions={assigneeSuggestions}
+          // suggestions={assigneeSuggestions} enable this for mentions
           editorClass="tapwrite-comment-input"
           hardbreak
           onActiveStatusChange={(prop) => {
@@ -109,31 +153,40 @@
           parentContainerStyle={{
             width: '100%',
             height: '100%',
-            maxWidth: '600px',
+            maxWidth: '566px',
             display: 'flex',
             flexDirection: 'column',
           }}
+          uploadFn={uploadFn}
+          deleteEditorAttachments={(url) => deleteEditorAttachmentsHandler(url, token ?? '', task_id, null)}
+          attachmentLayout={AttachmentLayout}
+          addAttachmentButton
+          maxUploadLimit={MAX_UPLOAD_LIMIT}
+          endButtons={
+            <Box
+              sx={{
+                alignSelf: 'center',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <IconButton
+                onClick={handleSubmit}
+                sx={{
+                  backgroundColor: '#000',
+                  borderRadius: '4px',
+                  padding: '5px',
+                  '&:hover': { bgcolor: '#000' },
+                  height: '24px',
+                  width: '24px',
+                }}
+              >
+                <ArrowUpward sx={{ color: '#ffffff', fontSize: '18px' }} />
+              </IconButton>
+            </Box>
+          }
         />
-        <InputAdornment
-          position="end"
-          sx={{
-            alignSelf: 'flex-end',
-            display: 'flex',
-            alignItems: 'flex-end',
-          }}
-        >
-          <IconButton
-            onClick={() => handleSubmit()} // Call handleSubmit on button click
-            sx={{
-              backgroundColor: '#000',
-              borderRadius: '4px',
-              padding: '5px',
-              '&:hover': { bgcolor: '#000' },
-            }}
-          >
-            <ArrowUpward sx={{ color: '#ffffff', fontSize: '18px' }} />
-          </IconButton>
-        </InputAdornment>
       </CommentCardContainer>
     </Stack>
   )

src/theme/theme.ts

@@ -82,6 +82,7 @@ export const theme = createTheme({
       bgCard: '#DFE1E4',
       bgCallout: '#F8F9FB',
       bgHover: '#F1F3F8',
+      bgCommentDrag: '#E6F0FF',
     },
     error: '#CC0000',
     muiError: '#D32F2F',

src/types/theme.d.ts

@@ -80,6 +80,7 @@ export declare module '@mui/material/styles' {
         bgCard: string
         bgCallout: string
         bgHover: string
+        bgCommentDrag: string
       }
       error: string
       muiError: string
@@ -164,6 +165,7 @@ export declare module '@mui/material/styles' {
         bgCard: React.CSSProperties['color']
         bgCallout: React.CSSProperties['color']
         bgHover: React.CSSProperties['color']
+        bgCommentDrag: React.CSSProperties['color']
       }
       error: React.CSSProperties['color']
       muiError: React.CSSProperties['color']

yarn.lock

@@ -8024,10 +8024,10 @@ tapable@^2.2.0:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
 
-[email protected].82:
-  version "1.1.82"
-  resolved "https://registry.yarnpkg.com/tapwrite/-/tapwrite-1.1.82.tgz#9056cef00520fd2b75b4739715faf4771397f269"
-  integrity sha512-qkQ1sLe2FuisYukFiJ7BosT6pmtSSZdwuQvFOZ51zbrhyFc0TAdHhd7ufBvEoeM3YhiyYg/CqO1/UAjw3DQwCQ==
+[email protected].83:
+  version "1.1.83"
+  resolved "https://registry.yarnpkg.com/tapwrite/-/tapwrite-1.1.83.tgz#7dab06fd3cf500856ae8ff4eab5b881502ec3328"
+  integrity sha512-UgimYSjtgR8c2tq+hmdyKaPG3cXYmCPwsgJ35J7cnI74J+yYygNne1fXk6yqT/O3KfLYimM58BsAvGSSLVs9AQ==
   dependencies:
     re-resizable "^6.10.0"
     tippy.js "^6.3.7"