Merge pull request #1010 from pranavmene2000/938-chevron-button-to-hi…

…de/re-open-images

feat: added chevron button to hide/re-open images

frontend/src/components/feature/chat/ChatMessage/Renderers/ImageMessage.tsx

@@ -1,13 +1,13 @@
 import { getFileName } from '@/utils/operations'
 import { ImageMessage } from '../../../../../../../types/Messaging/Message'
-import { Box, Button, Dialog, Flex, Link } from '@radix-ui/themes'
-import { Suspense, lazy, memo, useState } from 'react'
+import { Box, Button, Dialog, Flex, IconButton, Link, Text } from '@radix-ui/themes'
+import { Suspense, lazy, memo, useState, useRef, useEffect } from 'react'
 import { DIALOG_CONTENT_CLASS } from '@/utils/layout/dialog'
-import { BiDownload } from 'react-icons/bi'
+import { BiDownload, BiChevronDown, BiChevronRight } from 'react-icons/bi'
 import { UserFields } from '@/utils/users/UserListProvider'
 import { DateMonthAtHourMinuteAmPm } from '@/utils/dateConversions'
 import { clsx } from 'clsx'
-import { useIsDesktop, useIsMobile } from '@/hooks/useMediaQuery'
+import { useIsMobile } from '@/hooks/useMediaQuery'
 
 const ImageViewer = lazy(() => import('@/components/common/ImageViewer'))
 
@@ -25,20 +25,49 @@ export const ImageMessageBlock = memo(({ message, isScrolling = false, user }: I
 
     const isMobile = useIsMobile()
 
-    const height = message.thumbnail_height ? isMobile ? message.thumbnail_height / 2 : message.thumbnail_height : '200'
+    const fileName = getFileName(message.file)
+
+    const [isVisible, setIsVisible] = useState<boolean>(true)
+
+    const height = isVisible ? (message.thumbnail_height ? isMobile ? message.thumbnail_height / 2 : message.thumbnail_height : '200') : '0'
     const width = message.thumbnail_width ? isMobile ? message.thumbnail_width / 2 : message.thumbnail_width : '300'
+    const contentRef = useRef<HTMLDivElement | null>(null);
 
-    const fileName = getFileName(message.file)
+    useEffect(() => {
+        if (isVisible && contentRef.current) {
+            setTimeout(() => {
+                if (contentRef.current) {
+                    contentRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+            }, 200);
+        }
+    }, [isVisible]);
 
     return (
         <Flex direction='column' gap='1'>
-            <Link
-                href={message.file}
-                size='1'
-                color='gray'
-                target='_blank'>{fileName}</Link>
+            <Flex className='p-1 items-center'>
+                <IconButton
+                    size='1'
+                    variant="ghost"
+                    color="gray"
+                    radius='large'
+                    className='pl-0 mr-[1px] cursor-pointer font-bold hover:bg-transparent text-accent-a11 hover:text-gray-12'
+                    aria-label={`Click to ${isVisible ? "hide" : "show"} image`}
+                    title={`${isVisible ? "Hide" : "Show"} image`}
+                    onClick={() => setIsVisible(prev => !prev)}
+                >
+                    {isVisible ? <BiChevronDown size='18' /> : <BiChevronRight size='18' />}
+                </IconButton>
+                <Link
+                    href={message.file}
+                    size='1'
+                    color='gray'
+                    target='_blank'>{fileName}
+                </Link>
+            </Flex>
             <Box
-                className='relative rounded-md cursor-pointer'
+                ref={contentRef}
+                className={`relative rounded-md cursor-pointer transition-all duration-300 ease-ease-out-circ overflow-hidden`}
                 role='button'
                 onClick={() => setIsOpen(!isScrolling && true)}
                 style={{
@@ -118,4 +147,4 @@ export const ImageMessageBlock = memo(({ message, isScrolling = false, user }: I
             }
         </Flex>
     )
-})
+})