adding chat features, admin features and bug fixes

frontend/src/components/chat/ChatMessage.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+import type { NextcloudMessage } from '../../types/nextcloud.types';
+
+interface ChatMessageProps {
+  message: NextcloudMessage;
+  isOwnMessage: boolean;
+}
+
+const ChatMessage: React.FC<ChatMessageProps> = ({ message, isOwnMessage }) => {
+  const time = new Date(message.timestamp * 1000).toLocaleTimeString('de-DE', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  if (message.systemMessage) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', my: 0.5 }}>
+        <Typography variant="caption" sx={{ fontStyle: 'italic', color: 'text.secondary' }}>
+          {message.message} - {time}
+        </Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: isOwnMessage ? 'flex-end' : 'flex-start',
+        my: 0.5,
+        px: 1,
+      }}
+    >
+      <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,
+        }}
+      >
+        {!isOwnMessage && (
+          <Typography variant="caption" sx={{ fontWeight: 600, display: 'block' }}>
+            {message.actorDisplayName}
+          </Typography>
+        )}
+        <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+          {message.message}
+        </Typography>
+        <Typography
+          variant="caption"
+          sx={{
+            display: 'block',
+            textAlign: 'right',
+            mt: 0.25,
+            opacity: 0.7,
+          }}
+        >
+          {time}
+        </Typography>
+      </Paper>
+    </Box>
+  );
+};
+
+export default ChatMessage;