matthias/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Matthias Hochmeister
2026-03-13 15:49:58 +01:00
parent 75c919c063
commit 03155dcf7a
6 changed files with 289 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
backend/src/controllers/nextcloud.controller.ts
View File

@@ -354,8 +354,8 @@ class NextcloudController {
try {
const credentials = await userService.getNextcloudCredentials(req.user!.id);
if (!credentials) { res.status(401).json({ success: false, message: 'Nextcloud nicht verbunden' }); return; }
const token = req.params.token;
const messageId = parseInt(req.params.messageId, 10);
const token = req.params.token as string;
const messageId = parseInt(req.params.messageId as string, 10);
const { reaction } = req.body;
if (!token || isNaN(messageId) || !reaction) { res.status(400).json({ success: false, message: 'Parameter fehlen' }); return; }
await nextcloudService.addReaction(token, messageId, reaction, credentials.loginName, credentials.appPassword);
@@ -371,8 +371,8 @@ class NextcloudController {
try {
const credentials = await userService.getNextcloudCredentials(req.user!.id);
if (!credentials) { res.status(401).json({ success: false, message: 'Nextcloud nicht verbunden' }); return; }
const token = req.params.token;
const messageId = parseInt(req.params.messageId, 10);
const token = req.params.token as string;
const messageId = parseInt(req.params.messageId as string, 10);
const reaction = req.query.reaction as string;
if (!token || isNaN(messageId) || !reaction) { res.status(400).json({ success: false, message: 'Parameter fehlen' }); return; }
await nextcloudService.removeReaction(token, messageId, reaction, credentials.loginName, credentials.appPassword);
@@ -388,8 +388,8 @@ class NextcloudController {
try {
const credentials = await userService.getNextcloudCredentials(req.user!.id);
if (!credentials) { res.status(401).json({ success: false, message: 'Nextcloud nicht verbunden' }); return; }
const token = req.params.token;
const messageId = parseInt(req.params.messageId, 10);
const token = req.params.token as string;
const messageId = parseInt(req.params.messageId as string, 10);
if (!token || isNaN(messageId)) { res.status(400).json({ success: false, message: 'Parameter fehlen' }); return; }
const data = await nextcloudService.getReactions(token, messageId, credentials.loginName, credentials.appPassword);
res.status(200).json({ success: true, data });
@@ -404,8 +404,8 @@ class NextcloudController {
try {
const credentials = await userService.getNextcloudCredentials(req.user!.id);
if (!credentials) { res.status(401).json({ success: false, message: 'Nextcloud nicht verbunden' }); return; }
const token = req.params.token;
const pollId = parseInt(req.params.pollId, 10);
const token = req.params.token as string;
const pollId = parseInt(req.params.pollId as string, 10);
if (!token || isNaN(pollId)) { res.status(400).json({ success: false, message: 'Parameter fehlen' }); return; }
const data = await nextcloudService.getPollDetails(token, pollId, credentials.loginName, credentials.appPassword);
res.status(200).json({ success: true, data });

7
backend/src/routes/nextcloud.routes.ts
View File

@@ -20,4 +20,11 @@ router.post('/rooms/:token/read', authenticate, nextcloudController.markRoomAsRe
router.get('/files/:fileId/download', authenticate, nextcloudController.downloadFile.bind(nextcloudController));
router.get('/files/:fileId/preview', authenticate, nextcloudController.getFilePreview.bind(nextcloudController));
router.get('/users', authenticate, nextcloudController.searchUsers.bind(nextcloudController));
router.post('/rooms', authenticate, nextcloudController.createRoom.bind(nextcloudController));
router.get('/rooms/:token/messages/:messageId/reactions', authenticate, nextcloudController.getReactions.bind(nextcloudController));
router.post('/rooms/:token/messages/:messageId/reactions', authenticate, nextcloudController.addReaction.bind(nextcloudController));
router.delete('/rooms/:token/messages/:messageId/reactions', authenticate, nextcloudController.removeReaction.bind(nextcloudController));
router.get('/rooms/:token/polls/:pollId', authenticate, nextcloudController.getPoll.bind(nextcloudController));
export default router;

116
frontend/src/components/chat/ChatMessage.tsx
View File

@@ -1,13 +1,21 @@
import React from 'react';
import React, { useState } from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import Tooltip from '@mui/material/Tooltip';
import IconButton from '@mui/material/IconButton';
import ReplyIcon from '@mui/icons-material/Reply';
import type { NextcloudMessage } from '../../types/nextcloud.types';
import FileMessageContent from './FileMessageContent';
import RichMessageText from './RichMessageText';
import PollMessageContent from './PollMessageContent';
import MessageReactions from './MessageReactions';
interface ChatMessageProps {
message: NextcloudMessage;
isOwnMessage: boolean;
onReplyClick?: (message: NextcloudMessage) => void;
onReactionToggled?: (messageId: number) => void;
}
function hasFileParams(params?: Record<string, any>): boolean {
@@ -15,7 +23,12 @@ function hasFileParams(params?: Record<string, any>): boolean {
return Object.keys(params).some((k) => k === 'file' || k.startsWith('file'));
}
const ChatMessage: React.FC<ChatMessageProps> = ({ message, isOwnMessage }) => {
function hasPollParam(params?: Record<string, any>): boolean {
return params?.object?.type === 'talk-poll';
}
const ChatMessage: React.FC<ChatMessageProps> = ({ message, isOwnMessage, onReplyClick, onReactionToggled }) => {
const [hovered, setHovered] = useState(false);
const time = new Date(message.timestamp * 1000).toLocaleTimeString('de-DE', {
hour: '2-digit',
minute: '2-digit',
@@ -25,7 +38,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ message, isOwnMessage }) => {
return (
<Box sx={{ display: 'flex', justifyContent: 'center', my: 0.5 }}>
<Typography variant="caption" sx={{ fontStyle: 'italic', color: 'text.secondary' }}>
{message.message} - {time}
<RichMessageText message={message.message} messageParameters={message.messageParameters} /> - {time}
</Typography>
</Box>
);
@@ -33,10 +46,13 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ message, isOwnMessage }) => {
const isFileMessage =
hasFileParams(message.messageParameters) && message.message.includes('{file}');
const isPollMessage = hasPollParam(message.messageParameters);
// For file messages, extract any surrounding text
const textBeforeFile = isFileMessage ? message.message.split('{file}')[0].trim() : null;
const reactions = message.reactions ?? {};
const reactionsSelf = message.reactionsSelf ?? [];
return (
<Box
sx={{
@@ -44,14 +60,31 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ message, isOwnMessage }) => {
justifyContent: isOwnMessage ? 'flex-end' : 'flex-start',
my: 0.5,
px: 1,
alignItems: 'flex-end',
gap: 0.5,
}}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
>
{/* Reply button for own messages (shown on left) */}
{isOwnMessage && onReplyClick && (
<Tooltip title="Antworten">
<IconButton
size="small"
onClick={() => onReplyClick(message)}
sx={{ opacity: hovered ? 0.7 : 0, transition: 'opacity 0.15s', mb: 0.5 }}
>
<ReplyIcon sx={{ fontSize: '0.9rem', transform: 'scaleX(-1)' }} />
</IconButton>
</Tooltip>
)}
<Box sx={{ maxWidth: '80%' }}>
<Paper
elevation={0}
sx={{
px: 1.5,
py: 0.75,
maxWidth: '80%',
bgcolor: isOwnMessage ? 'primary.main' : (theme) => theme.palette.mode === 'dark' ? 'grey.800' : 'grey.200',
color: isOwnMessage ? 'primary.contrastText' : 'text.primary',
borderRadius: 2,
@@ -62,12 +95,43 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ message, isOwnMessage }) => {
{message.actorDisplayName}
</Typography>
)}
{isFileMessage ? (
{/* Quoted parent message */}
{message.parent && (
<Box sx={{
borderLeft: '3px solid',
borderColor: isOwnMessage ? 'rgba(255,255,255,0.4)' : 'divider',
pl: 1,
mb: 0.75,
opacity: 0.75,
borderRadius: '0 4px 4px 0',
py: 0.25,
bgcolor: isOwnMessage ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.04)',
}}>
<Typography variant="caption" sx={{ display: 'block', fontWeight: 600, lineHeight: 1.4 }}>
{message.parent.actorDisplayName}
</Typography>
<Typography variant="caption" noWrap sx={{ display: 'block', lineHeight: 1.4 }}>
{message.parent.message}
</Typography>
</Box>
)}
{isPollMessage ? (
<PollMessageContent
roomToken={message.token}
pollId={message.messageParameters!.object.id}
pollName={message.messageParameters!.object.name ?? ''}
isOwnMessage={isOwnMessage}
/>
) : isFileMessage ? (
<>
{textBeforeFile && (
<Typography variant="body2" sx={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', mb: 0.5 }}>
{textBeforeFile}
</Typography>
<RichMessageText
message={textBeforeFile}
messageParameters={message.messageParameters}
isOwnMessage={isOwnMessage}
/>
)}
<FileMessageContent
messageParameters={message.messageParameters!}
@@ -75,10 +139,13 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ message, isOwnMessage }) => {
/>
</>
) : (
<Typography variant="body2" sx={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
{message.message}
</Typography>
<RichMessageText
message={message.message}
messageParameters={message.messageParameters}
isOwnMessage={isOwnMessage}
/>
)}
<Typography
variant="caption"
sx={{
@@ -91,6 +158,31 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ message, isOwnMessage }) => {
{time}
</Typography>
</Paper>
{/* Reactions */}
{!message.systemMessage && (
<MessageReactions
token={message.token}
messageId={message.id}
reactions={reactions}
reactionsSelf={reactionsSelf}
onReactionToggled={() => onReactionToggled?.(message.id)}
/>
)}
</Box>
{/* Reply button for other messages (shown on right) */}
{!isOwnMessage && onReplyClick && (
<Tooltip title="Antworten">
<IconButton
size="small"
onClick={() => onReplyClick(message)}
sx={{ opacity: hovered ? 0.7 : 0, transition: 'opacity 0.15s', mb: 0.5 }}
>
<ReplyIcon sx={{ fontSize: '0.9rem' }} />
</IconButton>
</Tooltip>
)}
</Box>
);
};

29
frontend/src/components/chat/ChatMessageView.tsx
View File

@@ -9,6 +9,7 @@ import Tooltip from '@mui/material/Tooltip';
import SendIcon from '@mui/icons-material/Send';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import AttachFileIcon from '@mui/icons-material/AttachFile';
import CloseIcon from '@mui/icons-material/Close';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { nextcloudApi } from '../../services/nextcloud';
import { useChat } from '../../contexts/ChatContext';
@@ -28,6 +29,7 @@ const ChatMessageView: React.FC = () => {
const [isLoading, setIsLoading] = useState(false);
const [uploadProgress, setUploadProgress] = useState<number | null>(null);
const [isDragOver, setIsDragOver] = useState(false);
const [replyToMessage, setReplyToMessage] = useState<NextcloudMessage | null>(null);
const fileInputRef = useRef<HTMLInputElement>(null);
const lastMsgIdRef = useRef<number>(0);
@@ -91,7 +93,8 @@ const ChatMessageView: React.FC = () => {
const room = rooms.find((r) => r.token === selectedRoomToken);
const sendMutation = useMutation({
mutationFn: (message: string) => nextcloudApi.sendMessage(selectedRoomToken!, message),
mutationFn: ({ message, replyTo }: { message: string; replyTo?: number }) =>
nextcloudApi.sendMessage(selectedRoomToken!, message, replyTo),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['nextcloud', 'rooms'] });
},
@@ -113,8 +116,9 @@ const ChatMessageView: React.FC = () => {
const handleSend = () => {
const trimmed = input.trim();
if (!trimmed || !selectedRoomToken) return;
sendMutation.mutate(trimmed);
sendMutation.mutate({ message: trimmed, replyTo: replyToMessage?.id });
setInput('');
setReplyToMessage(null);
};
const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -124,6 +128,10 @@ const ChatMessageView: React.FC = () => {
}
};
const handleReactionToggled = (_messageId: number) => {
// reactions are stored in message objects; for now just mark rooms as potentially changed
};
const handleUploadFile = async (file: File) => {
if (!selectedRoomToken) return;
if (file.size > 50 * 1024 * 1024) {
@@ -161,7 +169,7 @@ const ChatMessageView: React.FC = () => {
return (
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1 }}>
<Typography color="text.secondary" variant="body2">
Raum auswählen
Raum ausw\u00E4hlen
</Typography>
</Box>
);
@@ -202,6 +210,8 @@ const ChatMessageView: React.FC = () => {
key={msg.id}
message={msg}
isOwnMessage={msg.actorType === 'users' && msg.actorId === loginName}
onReplyClick={setReplyToMessage}
onReactionToggled={handleReactionToggled}
/>
))
)}
@@ -209,6 +219,17 @@ const ChatMessageView: React.FC = () => {
</Box>
<Box sx={{ p: 1, borderTop: 1, borderColor: 'divider' }}>
{replyToMessage && (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 1, py: 0.5, bgcolor: 'action.hover', borderRadius: 1, mb: 0.5 }}>
<Box sx={{ flex: 1, minWidth: 0 }}>
<Typography variant="caption" sx={{ fontWeight: 600, display: 'block' }}>{replyToMessage.actorDisplayName}</Typography>
<Typography variant="caption" noWrap sx={{ display: 'block', opacity: 0.7 }}>{replyToMessage.message}</Typography>
</Box>
<IconButton size="small" onClick={() => setReplyToMessage(null)}>
<CloseIcon fontSize="small" />
</IconButton>
</Box>
)}
{uploadProgress !== null && (
<LinearProgress variant="determinate" value={uploadProgress} sx={{ mb: 0.5, borderRadius: 1 }} />
)}
@@ -219,7 +240,7 @@ const ChatMessageView: React.FC = () => {
style={{ display: 'none' }}
onChange={handleFileInputChange}
/>
<Tooltip title="Datei anhängen">
<Tooltip title="Datei anh\u00E4ngen">
<span>
<IconButton
size="small"

29
frontend/src/components/chat/ChatRoomList.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import Box from '@mui/material/Box';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
@@ -7,13 +7,31 @@ import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Avatar from '@mui/material/Avatar';
import Badge from '@mui/material/Badge';
import Typography from '@mui/material/Typography';
import Tooltip from '@mui/material/Tooltip';
import IconButton from '@mui/material/IconButton';
import AddIcon from '@mui/icons-material/Add';
import { useQueryClient } from '@tanstack/react-query';
import { useChat } from '../../contexts/ChatContext';
import NewChatDialog from './NewChatDialog';
const ChatRoomList: React.FC = () => {
const { rooms, selectedRoomToken, selectRoom } = useChat();
const queryClient = useQueryClient();
const [dialogOpen, setDialogOpen] = useState(false);
return (
<Box sx={{ overflow: 'auto', flex: 1 }}>
<Box sx={{ display: 'flex', alignItems: 'center', px: 1.5, py: 0.75, borderBottom: 1, borderColor: 'divider' }}>
<Typography variant="caption" sx={{ flex: 1, fontWeight: 600, opacity: 0.6, letterSpacing: '0.05em' }}>
GESPR\u00C4CHE
</Typography>
<Tooltip title="Neues Gespr\u00E4ch">
<IconButton size="small" onClick={() => setDialogOpen(true)}>
<AddIcon fontSize="small" />
</IconButton>
</Tooltip>
</Box>
<List disablePadding>
{rooms.map((room) => {
const isSelected = room.token === selectedRoomToken;
@@ -75,6 +93,15 @@ const ChatRoomList: React.FC = () => {
);
})}
</List>
<NewChatDialog
open={dialogOpen}
onClose={() => setDialogOpen(false)}
onRoomCreated={(token) => {
queryClient.invalidateQueries({ queryKey: ['nextcloud', 'rooms'] });
selectRoom(token);
setDialogOpen(false);
}}
/>
</Box>
);
};

98
frontend/src/components/chat/FileMessageContent.tsx
View File

@@ -43,31 +43,46 @@ function extractFileParams(messageParameters: Record<string, any>): FileParam[]
return files;
}
interface ImageLightboxProps {
type OverlayMode = 'image' | 'pdf' | 'video';
interface ContentOverlayProps {
open: boolean;
onClose: () => void;
previewUrl: string;
mode: OverlayMode;
contentUrl: string;
downloadUrl: string;
name: string;
}
const ImageLightbox: React.FC<ImageLightboxProps> = ({ open, onClose, previewUrl, downloadUrl, name }) => (
const ContentOverlay: React.FC<ContentOverlayProps> = ({ open, onClose, mode, contentUrl, downloadUrl, name }) => (
<Dialog
open={open}
onClose={onClose}
maxWidth="lg"
fullWidth
slotProps={{ paper: { sx: { bgcolor: 'black', m: 1 } } }}
slotProps={{ paper: { sx: { bgcolor: mode === 'image' ? 'black' : 'background.paper', m: 1 } } }}
>
<DialogContent sx={{ p: 0, position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 200 }}>
{mode === 'image' && (
<Box
component="img"
src={previewUrl}
src={contentUrl}
alt={name}
sx={{ maxWidth: '100%', maxHeight: '85vh', display: 'block', objectFit: 'contain' }}
/>
{/* Close button */}
<Tooltip title="Schließen">
)}
{mode === 'pdf' && (
<Box component="iframe" src={contentUrl} sx={{ width: '100%', height: '80vh', border: 'none', display: 'block' }} title={name} />
)}
{mode === 'video' && (
<Box
component="video"
controls
src={contentUrl}
sx={{ maxWidth: '100%', maxHeight: '85vh', display: 'block' }}
/>
)}
<Tooltip title="Schlie\u00DFen">
<IconButton
onClick={onClose}
size="small"
@@ -76,7 +91,6 @@ const ImageLightbox: React.FC<ImageLightboxProps> = ({ open, onClose, previewUrl
<CloseIcon fontSize="small" />
</IconButton>
</Tooltip>
{/* Download button */}
<Tooltip title="Herunterladen">
<IconButton
component="a"
@@ -90,7 +104,6 @@ const ImageLightbox: React.FC<ImageLightboxProps> = ({ open, onClose, previewUrl
<DownloadIcon fontSize="small" />
</IconButton>
</Tooltip>
{/* Filename */}
<Typography
variant="caption"
sx={{ position: 'absolute', bottom: 8, left: 0, right: 0, textAlign: 'center', color: 'rgba(255,255,255,0.7)', px: 2 }}
@@ -103,17 +116,27 @@ const ImageLightbox: React.FC<ImageLightboxProps> = ({ open, onClose, previewUrl
);
const FileMessageContent: React.FC<FileMessageContentProps> = ({ messageParameters, isOwnMessage }) => {
const [lightboxFile, setLightboxFile] = useState<FileParam | null>(null);
const [overlayFile, setOverlayFile] = useState<{ file: FileParam; mode: OverlayMode } | null>(null);
const files = extractFileParams(messageParameters);
if (files.length === 0) return null;
const getOverlayMode = (file: FileParam): OverlayMode | null => {
const mime = file.mimetype ?? '';
if (mime.startsWith('image/') && file.previewAvailable === 'yes') return 'image';
if (mime === 'application/pdf') return 'pdf';
if (mime.startsWith('video/')) return 'video';
return null;
};
return (
<>
{files.map((file, idx) => {
const downloadUrl = `/api/nextcloud/talk/files/${file.id}/download${file.path ? `?path=${encodeURIComponent(file.path)}` : ''}`;
const thumbUrl = `/api/nextcloud/talk/files/${file.id}/preview?w=400&h=400`;
const fullUrl = `/api/nextcloud/talk/files/${file.id}/preview?w=1200&h=1200`;
const isImage = file.mimetype?.startsWith('image/') && file.previewAvailable === 'yes';
const mime = file.mimetype ?? '';
const isImage = mime.startsWith('image/') && file.previewAvailable === 'yes';
const isAudio = mime.startsWith('audio/');
const overlayMode = getOverlayMode(file);
if (isImage) {
return (
@@ -122,7 +145,7 @@ const FileMessageContent: React.FC<FileMessageContentProps> = ({ messageParamete
component="img"
src={thumbUrl}
alt={file.name}
onClick={() => setLightboxFile(file)}
onClick={() => setOverlayFile({ file, mode: 'image' })}
sx={{
maxWidth: '100%',
maxHeight: 200,
@@ -154,9 +177,32 @@ const FileMessageContent: React.FC<FileMessageContentProps> = ({ messageParamete
);
}
if (isAudio) {
return (
<Box key={idx} sx={{ mt: 0.5 }}>
<Box
component="audio"
controls
src={downloadUrl}
sx={{ width: '100%', display: 'block' }}
/>
<Typography variant="caption" sx={{ opacity: 0.7, fontSize: '0.7rem', display: 'block', mt: 0.25 }} noWrap>
{file.name}
</Typography>
</Box>
);
}
return (
<Box
key={idx}
onClick={() => {
if (overlayMode) {
setOverlayFile({ file, mode: overlayMode });
} else {
window.open(downloadUrl, '_blank', 'noopener,noreferrer');
}
}}
sx={{
mt: 0.5,
display: 'flex',
@@ -164,9 +210,15 @@ const FileMessageContent: React.FC<FileMessageContentProps> = ({ messageParamete
gap: 1,
p: 0.75,
borderRadius: 1,
cursor: 'pointer',
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)',
: (theme: any) => theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)',
'&:hover': {
bgcolor: isOwnMessage
? 'rgba(255,255,255,0.25)'
: (theme: any) => theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)',
},
}}
>
<InsertDriveFileIcon fontSize="small" sx={{ opacity: 0.8, flexShrink: 0 }} />
@@ -188,6 +240,7 @@ const FileMessageContent: React.FC<FileMessageContentProps> = ({ messageParamete
download={file.name}
target="_blank"
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
sx={{ flexShrink: 0, color: 'inherit' }}
>
<DownloadIcon fontSize="small" />
@@ -197,13 +250,18 @@ const FileMessageContent: React.FC<FileMessageContentProps> = ({ messageParamete
);
})}
{lightboxFile && (
<ImageLightbox
{overlayFile && (
<ContentOverlay
open
onClose={() => setLightboxFile(null)}
previewUrl={`/api/nextcloud/talk/files/${lightboxFile.id}/preview?w=1200&h=1200`}
downloadUrl={`/api/nextcloud/talk/files/${lightboxFile.id}/download${lightboxFile.path ? `?path=${encodeURIComponent(lightboxFile.path)}` : ''}`}
name={lightboxFile.name}
onClose={() => setOverlayFile(null)}
mode={overlayFile.mode}
contentUrl={
overlayFile.mode === 'image'
? `/api/nextcloud/talk/files/${overlayFile.file.id}/preview?w=1200&h=1200`
: `/api/nextcloud/talk/files/${overlayFile.file.id}/download${overlayFile.file.path ? `?path=${encodeURIComponent(overlayFile.file.path)}` : ''}`
}
downloadUrl={`/api/nextcloud/talk/files/${overlayFile.file.id}/download${overlayFile.file.path ? `?path=${encodeURIComponent(overlayFile.file.path)}` : ''}`}
name={overlayFile.file.name}
/>
)}
</>