From dd4195ae3a2c80fc22271c540b5f842d17c8e395 Mon Sep 17 00:00:00 2001
From: AYUSHKUMAR_21JE0209
 <103947228+AyushKumar123456789@users.noreply.github.com>
Date: Mon, 27 Jan 2025 22:40:34 +0530
Subject: [PATCH] fix : Add Hover Effect to FileMessage Component (#845)

* feat: Enhance FileMessage component with hover effect based on theme

* fixed linting
---
 .../src/views/FileMessage/FileMessage.js      | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/views/FileMessage/FileMessage.js b/packages/react/src/views/FileMessage/FileMessage.js
index a074e981e..4944005c0 100644
--- a/packages/react/src/views/FileMessage/FileMessage.js
+++ b/packages/react/src/views/FileMessage/FileMessage.js
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, memo } from 'react';
+import React, { useState, useCallback, memo, useContext } from 'react';
 import PropTypes from 'prop-types';
 import {
   Box,
@@ -9,6 +9,9 @@ import {
   useToastBarDispatch,
   useComponentOverrides,
   appendClassNames,
+  useTheme,
+  lighten,
+  darken,
 } from '@embeddedchat/ui-elements';
 import FilePreviewContainer from './FilePreviewContainer';
 import FileBodyContainer from '../Message/MessageBodyContainer';
@@ -26,6 +29,19 @@ const FileMessage = ({ fileMessage }) => {
   const { RCInstance } = useRCContext();
   const messages = useMessageStore((state) => state.messages);
 
+  const theme = useTheme();
+  const { mode } = theme;
+  const messageStyles = styles.message;
+
+  const hoverStyle = {
+    '&:hover': {
+      backgroundColor:
+        mode === 'light'
+          ? darken(theme.theme.colors.background, 0.03)
+          : lighten(theme.theme.colors.background, 1),
+    },
+  };
+
   const [fileToDelete, setFileToDelete] = useState({});
 
   const downloadFile = useCallback((url, title) => {
@@ -69,7 +85,7 @@ const FileMessage = ({ fileMessage }) => {
       <Box
         className={appendClassNames('ec-file', classNames)}
         style={styleOverrides}
-        css={styles.message}
+        css={[messageStyles, hoverStyle]}
       >
         <FilePreviewContainer file={fileMessage} />
         <FileBodyContainer style={{ width: '75%' }}>