onClick?.(value)}>
+
+ );
+};
+
+export default CustomCard;
diff --git a/src/components/common/Cards/CustomCardStyles.tsx b/src/components/common/Cards/CustomCardStyles.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e240091c22c7aec9fc6f400132ff6df611bd3808
--- /dev/null
+++ b/src/components/common/Cards/CustomCardStyles.tsx
@@ -0,0 +1,52 @@
+import { makeStyles, tokens, shorthands } from '@fluentui/react-components';
+
+const CustomCardStyles = makeStyles({
+ guideCard: {
+ boxShadow: tokens.shadow16,
+ width: '250px',
+ minHeight: '100px',
+ display: 'flex',
+ flexDirection: 'column',
+ ...shorthands.margin(tokens.spacingVerticalXL, tokens.spacingHorizontalXL),
+ ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalL),
+ ...shorthands.borderRadius(tokens.borderRadiusLarge),
+ ':hover': {
+ boxShadow: tokens.shadow28,
+ '& .step': {
+ backgroundColor: tokens.colorBrandBackground,
+ color: tokens.colorNeutralBackground1
+ }
+ }
+ },
+ step: {
+ ...shorthands.padding(
+ tokens.spacingVerticalXXS,
+ tokens.spacingHorizontalXXS
+ ),
+ fontSize: tokens.fontSizeBase600,
+ fontWeight: tokens.fontWeightBold,
+ color: tokens.colorBrandBackground,
+ backgroundColor: tokens.colorNeutralBackground1,
+ ...shorthands.borderRadius(tokens.borderRadiusCircular),
+ width: '32px',
+ height: '32px',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ marginRight: tokens.spacingHorizontalM
+ },
+ title: {
+ fontSize: tokens.fontSizeBase500,
+ fontWeight: tokens.fontWeightSemibold
+ },
+ content: {
+ fontSize: tokens.fontSizeBase400,
+ ...shorthands.margin(tokens.spacingVerticalS, 0)
+ },
+ header: {
+ display: 'flex',
+ alignItems: 'center'
+ }
+});
+
+export default CustomCardStyles;
diff --git a/src/components/common/Cards/ExampleCards/ExampleCards.tsx b/src/components/common/Cards/ExampleCards/ExampleCards.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7aa8b9ec6b3972a96af23ce1a232410b15e39c25
--- /dev/null
+++ b/src/components/common/Cards/ExampleCards/ExampleCards.tsx
@@ -0,0 +1,64 @@
+import { useTranslation } from 'react-i18next';
+import CustomCard from '../CustomCard';
+import ExampleCardsStyles from './ExampleCardsStyles';
+
+export type Example = {
+ text: string;
+ value: string;
+};
+
+const EXAMPLES_DE: Example[] = [
+ {
+ text: 'Was ist auf der Weinversteigerung in Trier passiert?',
+ value: 'Was ist auf der Weinversteigerung in Trier passiert?'
+ },
+ {
+ text: 'Worüber ist der Edelmann E erbost?',
+ value: 'Worüber ist der Edelmann E erbost??'
+ },
+ {
+ text: 'Warum wurde B die Einreise in die USA verweigert?',
+ value: 'Warum wurde B die Einreise in die USA verweigert?'
+ }
+];
+
+const EXAMPLES_EN: Example[] = [
+ {
+ text: 'What did Detective Miller discover?',
+ value: 'What did Detective Miller discover?'
+ },
+ {
+ text: 'What stories does Willow have?',
+ value: 'What stories does Willow have?'
+ },
+ {
+ text: "How many people were in Max's group? ",
+ value: "How many people were in Max's group?"
+ }
+];
+
+interface ExampleCardsProps {
+ onExampleClicked: (value?: string) => void;
+}
+
+export const ExampleCards = ({ onExampleClicked }: ExampleCardsProps) => {
+ const styles = ExampleCardsStyles();
+ const { i18n } = useTranslation();
+ const examples = i18n.language === 'de' ? EXAMPLES_DE : EXAMPLES_EN;
+ return (
+
+
+
+
+ {step}
+ {title}
+ {children}
+
+ {examples.map((example, i) => (
+
+ {example.text}
+
+ ))}
+
+ );
+};
+
+export default ExampleCards;
diff --git a/src/components/common/Cards/ExampleCards/ExampleCardsStyles.tsx b/src/components/common/Cards/ExampleCards/ExampleCardsStyles.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b066fd91cb502da1ba3a9a41461e006ea39f7bc9
--- /dev/null
+++ b/src/components/common/Cards/ExampleCards/ExampleCardsStyles.tsx
@@ -0,0 +1,29 @@
+import { makeStyles, tokens, shorthands } from '@fluentui/react-components';
+
+const ExampleCardsStyles = makeStyles({
+ container: {
+ display: 'flex',
+ flexDirection: 'column'
+ },
+ examplesCardList: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ ...shorthands.gap('10px'),
+
+ justifyContent: 'center'
+ },
+ demoTextContainer: {
+ textAlign: 'center', // Zentriert den Text und den Link
+ marginTop: tokens.spacingVerticalM, // Gibt etwas Abstand nach oben
+ marginBottom: tokens.spacingVerticalM // Gibt etwas Abstand nach unten
+ },
+ demoLink: {
+ fontSize: tokens.fontSizeBase400, // Etwas größere Schrift für den Link
+ fontWeight: tokens.fontWeightSemibold, // Macht den Link fett
+ color: tokens.colorBrandBackground, // Farbe für den Link, nutze Brand-Farben für Klickbarkeit
+ ...shorthands.margin(tokens.spacingVerticalS, 0),
+ paddingBottom: '65px'
+ }
+});
+
+export default ExampleCardsStyles;
diff --git a/src/components/common/Cards/GuideCards/GuideCards.tsx b/src/components/common/Cards/GuideCards/GuideCards.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5b016d83e9c164de38223b21334f627d40c002aa
--- /dev/null
+++ b/src/components/common/Cards/GuideCards/GuideCards.tsx
@@ -0,0 +1,32 @@
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import CustomCard from '../CustomCard';
+import GuideCardsStyles from './GuideCardsStyles';
+
+const GuideCards = () => {
+ const styles = GuideCardsStyles();
+ const { t } = useTranslation();
+
+ return (
+
+
+ );
+};
+
+export default GuideCards;
diff --git a/src/components/common/Cards/GuideCards/GuideCardsStyles.tsx b/src/components/common/Cards/GuideCards/GuideCardsStyles.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a9217f577a3e5a5e3e89a3df717093419adcec98
--- /dev/null
+++ b/src/components/common/Cards/GuideCards/GuideCardsStyles.tsx
@@ -0,0 +1,28 @@
+import { makeStyles, tokens, shorthands } from '@fluentui/react-components';
+
+const GuideCardsStyles = makeStyles({
+ container: {
+ display: 'flex',
+ flexDirection: 'column'
+ },
+ guideCardList: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ ...shorthands.gap('10px'),
+ justifyContent: 'center'
+ },
+ demoTextContainer: {
+ textAlign: 'center', // Zentriert den Text und den Link
+ marginTop: tokens.spacingVerticalM, // Gibt etwas Abstand nach oben
+ marginBottom: tokens.spacingVerticalM // Gibt etwas Abstand nach unten
+ },
+ demoLink: {
+ fontSize: tokens.fontSizeBase400, // Etwas größere Schrift für den Link
+ fontWeight: tokens.fontWeightSemibold, // Macht den Link fett
+ color: tokens.colorBrandBackground, // Farbe für den Link, nutze Brand-Farben für Klickbarkeit
+ ...shorthands.margin(tokens.spacingVerticalS, 0),
+ paddingBottom: '65px'
+ }
+});
+
+export default GuideCardsStyles;
diff --git a/src/components/common/ChatMessage/ChatMessage.tsx b/src/components/common/ChatMessage/ChatMessage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/components/common/FileExplorer/FileExplorer.tsx b/src/components/common/FileExplorer/FileExplorer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ce1445f3bebfc0c67a6f4c31dd2ff817d8077750
--- /dev/null
+++ b/src/components/common/FileExplorer/FileExplorer.tsx
@@ -0,0 +1,179 @@
+import { KeyboardEvent, MouseEvent, useEffect, useState } from 'react';
+import {
+ Button,
+ Dialog,
+ DialogActions,
+ DialogBody,
+ DialogContent,
+ DialogSurface,
+ DialogTitle,
+ DialogTrigger,
+ CompoundButton,
+ Spinner,
+ OnSelectionChangeData
+} from '@fluentui/react-components';
+import { DocumentFolder24Regular } from '@fluentui/react-icons';
+import { useTranslation } from 'react-i18next';
+import FileExplorerStyles from './FileExplorerStyles';
+import { FileList as FileListComp } from '../FileList/FileList';
+import NextCloudIcon from './NextCloudIcon.svg?react';
+import UploadButton from './UploadButton';
+import { useUser } from '../../../context/UserProvider';
+import { File as FileType } from '../../../models/File';
+import { getFiles, createFiles, deleteFiles } from '../../../api/fileApi';
+import { useToast } from '../../../context/ToastProvider';
+
+export const FileExplorer = () => {
+ const styles = FileExplorerStyles();
+ const { t } = useTranslation();
+ const { user } = useUser();
+ const { showToast } = useToast();
+ const [files, setFiles] = useState
+
+ {t('guideCardStep1Content')}
+
+
+ {t('guideCardStep2Content')}
+
+
+ {t('guideCardStep3Content')}
+
+
+
+
+ {t('guideCardDemoLinkText')}
+
+
+
+
+ );
+ } else {
+ return (
+
+ );
+ }
+};
+
+export default LoginButton;
diff --git a/src/components/common/LoginButton/LoginButtonStyles.tsx b/src/components/common/LoginButton/LoginButtonStyles.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c8589424ea80c4954871b013118ab044bdc51e88
--- /dev/null
+++ b/src/components/common/LoginButton/LoginButtonStyles.tsx
@@ -0,0 +1,14 @@
+import { makeStyles, tokens } from '@fluentui/react-components';
+
+const LoginButtonStyles = makeStyles({
+ userText: {
+ fontWeight: tokens.fontWeightMedium,
+ marginRight: tokens.spacingHorizontalL
+ },
+ loginButtonContainer: {
+ display: 'flex',
+ alignItems: 'center'
+ }
+});
+
+export default LoginButtonStyles;
diff --git a/src/components/common/MenuItem/MenuItem.tsx b/src/components/common/MenuItem/MenuItem.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/components/common/Messages/ChatGPTMessageItem/ChatGPTMessageItem.tsx b/src/components/common/Messages/ChatGPTMessageItem/ChatGPTMessageItem.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..45b68e291e6288190faf82dbea314b61868412b8
--- /dev/null
+++ b/src/components/common/Messages/ChatGPTMessageItem/ChatGPTMessageItem.tsx
@@ -0,0 +1,51 @@
+import {
+ Text,
+ Persona,
+ Skeleton,
+ SkeletonItem
+} from '@fluentui/react-components';
+import ChatGPTMessageItemStyles from './ChatGPTMessageItemStyles';
+import { Message } from '../../../../models/Message';
+import { BotSparkleRegular } from '@fluentui/react-icons';
+import { useTranslation } from 'react-i18next';
+
+interface ChatGPTMessageItemProps {
+ message: Message;
+ isLoading?: boolean;
+}
+
+const ChatGPTMessageItem = ({
+ message,
+ isLoading = false
+}: ChatGPTMessageItemProps) => {
+ const styles = ChatGPTMessageItemStyles();
+ const { t } = useTranslation();
+
+ return (
+ {user?.email}
+ }
+ size="large"
+ onClick={() => logout()}
+ />
+
+
+ );
+};
+
+export default ChatGPTMessageItem;
diff --git a/src/components/common/Messages/ChatGPTMessageItem/ChatGPTMessageItemStyles.tsx b/src/components/common/Messages/ChatGPTMessageItem/ChatGPTMessageItemStyles.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b8153067ab9a9a9e4ca0d04600bf2aeaf634ff45
--- /dev/null
+++ b/src/components/common/Messages/ChatGPTMessageItem/ChatGPTMessageItemStyles.tsx
@@ -0,0 +1,62 @@
+import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+
+const ChatGPTMessageItemStyles = makeStyles({
+ container: {
+ alignSelf: 'start',
+ maxWidth: '1000px',
+ width: '80%',
+ ...shorthands.gap(tokens.spacingHorizontalL),
+ alignItems: 'center',
+ display: 'flex',
+ ':hover & .timestamp': {
+ backgroundColor: tokens.colorBrandBackground,
+ opacity: '1'
+ }
+ },
+ messageContent: {
+ ...shorthands.borderRadius('6px'),
+ ...shorthands.padding(
+ tokens.spacingHorizontalXL,
+ tokens.spacingHorizontalXXXL,
+ tokens.spacingHorizontalL,
+ tokens.spacingHorizontalL
+ ),
+ ...shorthands.margin('10px', '0'),
+ display: 'flex',
+ flexDirection: 'column',
+ backgroundColor: tokens.colorNeutralBackground1,
+ boxShadow: tokens.shadow4,
+ width: '90%',
+ ...shorthands.gap(tokens.spacingHorizontalS)
+ },
+ content: {
+ color: tokens.colorNeutralForeground1,
+ ...shorthands.margin('0'),
+ whiteSpace: 'pre-line'
+ },
+ timestamp: {
+ color: tokens.colorNeutralForeground3,
+ opacity: '1',
+ transitionTimingFunction: tokens.curveDecelerateMid,
+ transitionDuration: tokens.durationFast,
+ transitionProperty: 'opacity'
+ },
+ avatarContainer: {
+ display: 'flex',
+ alignSelf: 'start',
+ marginTop: tokens.spacingHorizontalXL,
+ ...shorthands.gap(tokens.spacingHorizontalS),
+ width: '7rem'
+ },
+ contentSkeleton: {
+ alignItems: 'center',
+ display: 'flex',
+ flexDirection: 'column',
+ paddingBottom: '10px',
+ position: 'relative',
+ ...shorthands.gap('10px'),
+ width: '100%'
+ }
+});
+
+export default ChatGPTMessageItemStyles;
diff --git a/src/components/common/Messages/ChatInput/ChatInput.tsx b/src/components/common/Messages/ChatInput/ChatInput.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..164c58f307e82d38497e8ce8cb29d57e792b145d
--- /dev/null
+++ b/src/components/common/Messages/ChatInput/ChatInput.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { Button, Textarea } from '@fluentui/react-components';
+import ChatInputStyles from './ChatInputStyles';
+import { Send24Filled } from '@fluentui/react-icons';
+
+interface ChatInputProps {
+ onSendMessage: (value: string) => void;
+ demo?: boolean;
+}
+
+const ChatInput = ({ onSendMessage, demo = false }: ChatInputProps) => {
+ const [input, setInput] = useState('');
+ const styles = ChatInputStyles();
+
+ const handleSubmit = (e: React.KeyboardEvent
+
+
+ {isLoading && message.content == 'Loading' ? (
+
+
+ ) : (
+ {message.content as string}
+ )}
+
+
+
+
+
+