fix : Add Hover Effect to FileMessage Component (#845)

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

* fixed linting

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%' }}>