removed react-components empty package

- also sorted the the react-component components into the right folders
- fixed components that returned an array of elements instead of a JSX element

frontend/src/components/atoms/elements/File.tsx

@@ -1,6 +1,6 @@
 import Link from '@mui/material/Link';
 
-import { Attachment } from 'components/molecules/react-components/Attachment';
+import { Attachment } from 'components/atoms/Attachment';
 
 import { type IFileElement } from 'client-types/';
 

frontend/src/components/atoms/elements/Text.tsx

@@ -1,6 +1,6 @@
 import Box from '@mui/material/Box';
 
-import { Markdown } from 'components/molecules/react-components/Markdown';
+import { Markdown } from 'components/molecules/Markdown';
 
 import { useFetch } from 'hooks/useFetch';
 

frontend/src/components/atoms/inputs/InputLabel.tsx

@@ -3,7 +3,7 @@ import Box from '@mui/material/Box';
 import MInputLabel from '@mui/material/InputLabel';
 import Tooltip from '@mui/material/Tooltip';
 
-import { NotificationCount } from 'components/molecules/react-components/NotificationCount';
+import { NotificationCount } from 'components/molecules/messages/components/NotificationCount';
 
 import { NotificationCountProps } from 'types/NotificationCount';
 

frontend/src/components/atoms/inputs/selects/MenuItem.tsx

@@ -3,7 +3,7 @@ import { grey, primary } from 'theme/index';
 import MMenuItem from '@mui/material/MenuItem';
 import Stack from '@mui/material/Stack';
 
-import { NotificationCount } from 'components/molecules/react-components/NotificationCount';
+import { NotificationCount } from 'components/molecules/messages/components/NotificationCount';
 
 import { SelectItem } from './SelectInput';
 

frontend/src/components/molecules/react-components/Code.tsx → frontend/src/components/molecules/Code.tsx

@@ -10,7 +10,7 @@ import { useIsDarkMode } from 'hooks/useIsDarkMode';
 
 import 'highlight.js/styles/monokai-sublime.css';
 
-import { ClipboardCopy } from './ClipboardCopy';
+import { ClipboardCopy } from '../atoms/ClipboardCopy';
 
 const CodeSnippet = ({
  language,

frontend/src/components/molecules/react-components/Markdown.tsx → frontend/src/components/molecules/Markdown.tsx

@@ -16,12 +16,12 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 
+import { Code } from 'components/molecules/Code';
 import { ElementRef } from 'components/molecules/messages/components/ElementRef';
-import { Code } from 'components/molecules/react-components/Code';
 
 import type { IMessageElement } from 'client-types/';
 
-import { InlineCode } from './InlineCode';
+import { InlineCode } from '../atoms/InlineCode';
 
 interface Props {
  allowHtml?: boolean;

frontend/src/components/molecules/attachments.tsx

@@ -6,9 +6,9 @@ import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 
+import { Attachment } from 'components/atoms/Attachment';
 import CircularProgressIconButton from 'components/atoms/buttons/progressIconButton';
 import { Translator } from 'components/i18n';
-import { Attachment } from 'components/molecules/react-components/Attachment';
 
 import { attachmentsState } from 'state/chat';
 

frontend/src/components/molecules/chatProfiles.tsx

@@ -12,7 +12,7 @@ import {
 } from '@chainlit/react-client';
 
 import { InputStateHandler } from 'components/atoms/inputs';
-import { Markdown } from 'components/molecules/react-components/Markdown';
+import { Markdown } from 'components/molecules/Markdown';
 
 import { useIsDarkMode } from 'hooks/useIsDarkMode';
 

frontend/src/components/molecules/messages/components/FeedbackButtons.tsx

@@ -11,9 +11,9 @@ import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 
+import Dialog from 'components/atoms/Dialog';
 import { AccentButton } from 'components/atoms/buttons/AccentButton';
 import { TextInput } from 'components/atoms/inputs';
-import Dialog from 'components/molecules/react-components/Dialog';
 
 import type { IStep } from 'client-types/';
 

frontend/src/components/molecules/messages/components/MessageButtons.tsx

@@ -4,7 +4,7 @@ import { grey } from 'theme/palette';
 
 import Stack from '@mui/material/Stack';
 
-import { ClipboardCopy } from 'components/molecules/react-components/ClipboardCopy';
+import { ClipboardCopy } from 'components/atoms/ClipboardCopy';
 
 import { useIsDarkMode } from 'hooks/useIsDarkMode';
 

frontend/src/components/molecules/messages/components/MessageContent.tsx

@@ -6,9 +6,9 @@ import Divider from '@mui/material/Divider';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 
+import { Collapse } from 'components/atoms/Collapse';
 import { InlinedElements } from 'components/atoms/elements/InlinedElements';
-import { Collapse } from 'components/molecules/react-components/Collapse';
-import { Markdown } from 'components/molecules/react-components/Markdown';
+import { Markdown } from 'components/molecules/Markdown';
 
 import type { IMessageElement, IStep } from 'client-types/';
 

frontend/src/components/molecules/playground/editor/EditorWrapper.tsx

@@ -6,7 +6,7 @@ import Stack, { StackProps } from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { Theme, useTheme } from '@mui/material/styles';
 
-import { ClipboardCopy } from 'components/molecules/react-components/ClipboardCopy';
+import { ClipboardCopy } from 'components/atoms/ClipboardCopy';
 
 interface Props {
  className?: string;

frontend/src/components/organisms/chat/Messages/welcomeScreen.tsx

@@ -2,7 +2,7 @@ import { memo } from 'react';
 
 import { Box } from '@mui/material';
 
-import { Markdown } from 'components/molecules/react-components/Markdown';
+import { Markdown } from 'components/molecules/Markdown';
 
 const WelcomeScreen = memo(
  ({

frontend/src/components/organisms/threadHistory/Thread.tsx

@@ -73,31 +73,35 @@ const Thread = ({ thread, error, isLoading }: Props) => {
  );
 
  if (isLoading) {
- return [1, 2, 3].map((index) => (
- <Stack
- key={`thread-skeleton-${index}`}
- sx={{
- px: 2,
- gap: 4,
- mt: 5,
- flexDirection: 'row',
- justifyContent: 'center'
- }}
- >
- <Stack>
- <Skeleton width={50} />
- <Skeleton width={50} />
- </Stack>
- <Skeleton
- variant="rounded"
- sx={{
- maxWidth: '60rem',
- width: '100%',
- height: 100
- }}
- />
- </Stack>
- ));
+ return (
+ <>
+ {[1, 2, 3].map((index) => (
+ <Stack
+ key={`thread-skeleton-${index}`}
+ sx={{
+ px: 2,
+ gap: 4,
+ mt: 5,
+ flexDirection: 'row',
+ justifyContent: 'center'
+ }}
+ >
+ <Stack>
+ <Skeleton width={50} />
+ <Skeleton width={50} />
+ </Stack>
+ <Skeleton
+ variant="rounded"
+ sx={{
+ maxWidth: '60rem',
+ width: '100%',
+ height: 100
+ }}
+ />
+ </Stack>
+ ))}
+ </>
+ );
  }
 
  if (!thread || error) {

frontend/src/components/organisms/threadHistory/sidebar/ThreadList.tsx

@@ -43,25 +43,29 @@ const ThreadList = ({
  const { clear } = useChatInteract();
  const navigate = useNavigate();
  if (isFetching || (!threadHistory?.timeGroupedThreads && isLoadingMore)) {
- return [1, 2, 3].map((index) => (
- <Box key={`threads-skeleton-${index}`} sx={{ px: 1.5, mt: 2 }}>
- <Skeleton width={100} />
- {[1, 2].map((childIndex) => (
- <Stack
- key={`threads-skeleton-${index}-${childIndex}`}
- sx={{
- py: 2,
- flexDirection: 'row',
- alignItems: 'center',
- gap: 1.5
- }}
- >
- <Skeleton width={30} />
- <Skeleton width={'100%'} />
- </Stack>
+ return (
+ <>
+ {[1, 2, 3].map((index) => (
+ <Box key={`threads-skeleton-${index}`} sx={{ px: 1.5, mt: 2 }}>
+ <Skeleton width={100} />
+ {[1, 2].map((childIndex) => (
+ <Stack
+ key={`threads-skeleton-${index}-${childIndex}`}
+ sx={{
+ py: 2,
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 1.5
+ }}
+ >
+ <Skeleton width={30} />
+ <Skeleton width={'100%'} />
+ </Stack>
+ ))}
+ </Box>
  ))}
- </Box>
- ));
+ </>
+ );
  }
 
  if (error) {