update nextcloud for file support

2026-03-13 13:46:08 +01:00
parent e36de3199a
commit e26d77ef35
10 changed files with 600 additions and 24 deletions
--- a/frontend/src/components/chat/FileMessageContent.tsx
+++ b/frontend/src/components/chat/FileMessageContent.tsx
@@ -0,0 +1,130 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
+import DownloadIcon from '@mui/icons-material/Download';
+
+interface FileParam {
+  name: string;
+  size?: number;
+  mimetype?: string;
+  id: number | string;
+  path?: string;
+  previewAvailable?: string;
+}
+
+interface FileMessageContentProps {
+  messageParameters: Record<string, any>;
+  isOwnMessage: boolean;
+}
+
+function formatFileSize(bytes?: number): string {
+  if (!bytes) return '';
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function extractFileParams(messageParameters: Record<string, any>): FileParam[] {
+  const files: FileParam[] = [];
+  for (const key of Object.keys(messageParameters)) {
+    if (key === 'file' || key.startsWith('file')) {
+      const val = messageParameters[key];
+      if (val && typeof val === 'object' && val.id) {
+        files.push(val as FileParam);
+      }
+    }
+  }
+  return files;
+}
+
+const FileMessageContent: React.FC<FileMessageContentProps> = ({ messageParameters, isOwnMessage }) => {
+  const files = extractFileParams(messageParameters);
+  if (files.length === 0) return null;
+
+  return (
+    <>
+      {files.map((file, idx) => {
+        const downloadUrl = `/api/nextcloud/talk/files/${file.id}/download${file.path ? `?path=${encodeURIComponent(file.path)}` : ''}`;
+        const previewUrl = `/api/nextcloud/talk/files/${file.id}/preview?w=400&h=400`;
+        const isImage = file.mimetype?.startsWith('image/') && file.previewAvailable === 'yes';
+
+        if (isImage) {
+          return (
+            <Box key={idx} sx={{ mt: 0.5 }}>
+              <a href={downloadUrl} target="_blank" rel="noopener noreferrer" download={file.name}>
+                <Box
+                  component="img"
+                  src={previewUrl}
+                  alt={file.name}
+                  sx={{
+                    maxWidth: '100%',
+                    maxHeight: 200,
+                    borderRadius: 1,
+                    display: 'block',
+                    cursor: 'pointer',
+                    '&:hover': { opacity: 0.9 },
+                  }}
+                />
+              </a>
+              <Typography variant="caption" sx={{ opacity: 0.7, fontSize: '0.7rem' }}>
+                {file.name}
+              </Typography>
+            </Box>
+          );
+        }
+
+        return (
+          <Box
+            key={idx}
+            sx={{
+              mt: 0.5,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 1,
+              p: 0.75,
+              borderRadius: 1,
+              bgcolor: isOwnMessage
+                ? 'rgba(255,255,255,0.15)'
+                : (theme) => theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)',
+            }}
+          >
+            <InsertDriveFileIcon fontSize="small" sx={{ opacity: 0.8, flexShrink: 0 }} />
+            <Box sx={{ flex: 1, minWidth: 0 }}>
+              <Typography
+                variant="body2"
+                noWrap
+                title={file.name}
+                sx={{ fontWeight: 500, lineHeight: 1.2 }}
+              >
+                {file.name}
+              </Typography>
+              {file.size && (
+                <Typography variant="caption" sx={{ opacity: 0.7 }}>
+                  {formatFileSize(file.size)}
+                </Typography>
+              )}
+            </Box>
+            <Tooltip title="Herunterladen">
+              <IconButton
+                size="small"
+                component="a"
+                href={downloadUrl}
+                download={file.name}
+                target="_blank"
+                rel="noopener noreferrer"
+                sx={{ flexShrink: 0, color: 'inherit' }}
+              >
+                <DownloadIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          </Box>
+        );
+      })}
+    </>
+  );
+};
+
+export default FileMessageContent;