feat: Enhance image processing in data-fetching and update SEO meta tags for product images; add Telegram assistant link in ChatAssistant component with localization support

src/components/ChatAssistant.js

@@ -15,7 +15,13 @@ import StopIcon from '@mui/icons-material/Stop';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
 import parse, { domToReact } from 'html-react-parser';
 import { Link } from 'react-router-dom';
+import MuiLink from '@mui/material/Link';
+import { alpha } from '@mui/material/styles';
+import TelegramIcon from '@mui/icons-material/Telegram';
 import { isUserLoggedIn } from './LoginComponent.js';
+import { withTranslation } from '../i18n/withTranslation.js';
+
+const TELEGRAM_ASSISTANT_URL = 'https://t.me/Growheads_de_Bot';
 // Initialize window object for storing messages
 if (!window.chatMessages) {
   window.chatMessages = [];
@@ -451,8 +457,9 @@ class ChatAssistant extends Component {
   });
   
   render() {
-    const { open, onClose } = this.props;
+    const { open, onClose, t } = this.props;
     const { messages, inputValue, isTyping, isRecording, recordingTime, isGuest, privacyConfirmed } = this.state;
+    const showTelegramHint = !messages.some((m) => m.sender === 'user');
     
     if (!open) {
       return null;
@@ -517,6 +524,58 @@ class ChatAssistant extends Component {
             gap: 2,
           }}
         >
+          {showTelegramHint && (
+            <Paper
+              elevation={4}
+              sx={{
+                p: 2,
+                borderRadius: 2,
+                border: 2,
+                borderColor: 'primary.main',
+                bgcolor: (theme) => alpha(theme.palette.primary.main, 0.14),
+                boxShadow: (theme) =>
+                  `0 4px 14px ${alpha(theme.palette.primary.main, 0.35)}`,
+              }}
+            >
+              <Box sx={{ display: 'flex', gap: 1.5, alignItems: 'flex-start' }}>
+                <TelegramIcon
+                  sx={{
+                    fontSize: 40,
+                    color: 'primary.main',
+                    flexShrink: 0,
+                    filter: (theme) =>
+                      `drop-shadow(0 1px 2px ${alpha(theme.palette.primary.dark, 0.45)})`,
+                  }}
+                />
+                <Box sx={{ minWidth: 0 }}>
+                  <Typography
+                    variant="subtitle1"
+                    component="div"
+                    fontWeight={700}
+                    color="text.primary"
+                    sx={{ lineHeight: 1.45, mb: 0.25 }}
+                  >
+                    {t('chat.telegramAssistantIntro')}
+                  </Typography>
+                  <MuiLink
+                    href={TELEGRAM_ASSISTANT_URL}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    variant="subtitle1"
+                    fontWeight={800}
+                    sx={{
+                      wordBreak: 'break-all',
+                      color: 'primary.dark',
+                      textDecorationColor: 'primary.main',
+                      '&:hover': { color: 'primary.main' },
+                    }}
+                  >
+                    {t('chat.telegramAssistantLink')}
+                  </MuiLink>
+                </Box>
+              </Box>
+            </Paper>
+          )}
           {messages &&messages.map((message) => (
             <Box 
               key={message.id} 
@@ -653,4 +712,4 @@ class ChatAssistant extends Component {
   }
 }
 
-export default ChatAssistant;
+export default withTranslation()(ChatAssistant);

src/components/Product.js

@@ -345,7 +345,7 @@ class Product extends Component {
             <div
               style={{
                 position: 'absolute',
-                top: '45%',
+                top: '40%',
                 left: '45%',
                 transform: 'translate(-50%, -50%) rotate(-10deg)',
                 color: 'white',