- Builder as {permission}
-
-
-
-
-
-
-
-
-
- App Data
- {JSON.stringify(appDatas, null, 2)}
-
-
-
-
+
+
+
+
+ setActiveTab(newTab)} // Update the active tab when a new tab is selected
+ centered
+ >
+ }
+ iconPosition="start"
+ />
+ }
+ iconPosition="start"
+ />
+ }
+ iconPosition="start"
+ />
+
+ setActiveTab(newTab)} // Update the active tab when a new tab is selected
+ centered
+ >
+ }
+ iconPosition="start"
+ />
+
+
+
+
+
+
+ }
+ variant="contained"
+ onClick={() => saveSettings('assistants', assistants)}
+ disabled={useMemo(
+ () =>
+ // Disable if settings have not changed or list is empty
+ isEqual(assistantsSavedState, assistants) ||
+ assistants.assistantList.length === 0,
+ [assistants, assistantsSavedState],
+ )}
+ >
+ {t('SETTINGS.SAVE_BTN')}
+
+
+
+
+
+
+
+
+ }
+ variant="contained"
+ onClick={() => saveSettings('chat', chat)}
+ disabled={useMemo(
+ // Disable if settings have not changed
+ () => isEqual(chatSavedState, chat),
+ [chat, chatSavedState],
+ )}
+ >
+ {t('SETTINGS.SAVE_BTN')}
+
+
+
+
+
+
+
+
+ }
+ variant="contained"
+ onClick={() => saveSettings('exchanges', exchanges)}
+ disabled={useMemo(
+ () =>
+ // Disable if settings have not changed or list is empty
+ isEqual(exchangesSavedState, exchanges) ||
+ exchanges.exchangeList.length === 0,
+ [exchanges, exchangesSavedState],
+ )}
+ >
+ {t('SETTINGS.SAVE_BTN')}
+
+
+
+
+
+
+
+
+
);
};
diff --git a/src/modules/main/PlayerView.tsx b/src/modules/main/PlayerView.tsx
index 5bcc98f..78c4eed 100644
--- a/src/modules/main/PlayerView.tsx
+++ b/src/modules/main/PlayerView.tsx
@@ -1,22 +1,10 @@
-// import { Typography } from '@mui/material';
-// import { useLocalContext } from '@graasp/apps-query-client';
-// import { hooks } from '@/config/queryClient';
import { Box } from '@mui/material';
import { PLAYER_VIEW_CY } from '@/config/selectors';
import ParticipantInteraction from '@/modules/interaction/ParticipantInteraction';
const PlayerView = (): JSX.Element => (
- // const { permission } = useLocalContext();
- // const { data: appContext } = hooks.useAppContext();
- // const members = appContext?.members;
-
- {/* Player as {permission} */}
- {/* */}
- {/* Members */}
- {/* {JSON.stringify(members, null, 2)} */}
- {/* */}
);
diff --git a/src/modules/message/MessageInput.tsx b/src/modules/message/MessageInput.tsx
index cf1a45e..a1bc843 100644
--- a/src/modules/message/MessageInput.tsx
+++ b/src/modules/message/MessageInput.tsx
@@ -1,4 +1,5 @@
import { ReactElement, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
import CheckIcon from '@mui/icons-material/CheckRounded';
import SendRoundedIcon from '@mui/icons-material/SendRounded';
@@ -8,50 +9,36 @@ import FormControl from '@mui/material/FormControl';
import Textarea from '@mui/material/OutlinedInput';
import Stack from '@mui/material/Stack';
-import Exchange from '@/types/Exchange';
-
export type MessageInputProps = {
- exchange: Exchange;
- textAreaValue: string;
- setTextAreaValue: (value: string) => void;
- onSubmit: (keyPressData: KeyPressData[]) => void;
- completed: boolean;
- setExchange: (exchange: Exchange) => void;
- goToNextExchange: () => void;
-};
-
-type KeyPressData = {
- timestamp: number;
- key: string;
+ dismissExchange: () => void;
+ onSubmit: ({ content }: { content: string }) => void;
+ exchangeCompleted: boolean;
};
+// Main component function: MessageInput
const MessageInput = ({
- exchange,
- textAreaValue,
- setTextAreaValue,
+ dismissExchange,
onSubmit,
- completed,
- setExchange,
- goToNextExchange,
+ exchangeCompleted,
}: MessageInputProps): ReactElement => {
+ // State to manage the value of the textarea input
+ const [textAreaValue, setTextAreaValue] = useState('');
+
+ // Ref to get direct access to the textarea DOM element
const textAreaRef = useRef
(null);
- const [keypressData, setKeypressData] = useState([]);
- function dismissExchange(): void {
- const updatedExchange = { ...exchange };
- updatedExchange.dismissed = true;
- updatedExchange.dismissedAt = new Date();
- setExchange(updatedExchange);
- goToNextExchange();
- }
+ // Hook for internationalization (i18n) translation
+ const { t } = useTranslation();
- // const focusOnTextArea = (): void => {
- // const textareaElement = textAreaRef?.current?.querySelector('textarea');
- // if (textareaElement) {
- // textareaElement.focus();
- // }
- // };
+ // Function to focus on the textarea input
+ const focusOnTextArea = (): void => {
+ const textareaElement = textAreaRef?.current?.querySelector('textarea');
+ if (textareaElement) {
+ textareaElement.focus();
+ }
+ };
+ // Function to remove focus from the textarea input
const blurTextArea = (): void => {
const textareaElement = textAreaRef?.current?.querySelector('textarea');
if (textareaElement) {
@@ -59,22 +46,24 @@ const MessageInput = ({
}
};
+ // Effect to focus on the textarea whenever the component renders
useEffect(() => {
- // focusOnTextArea();
+ focusOnTextArea();
});
+ // Function to handle the send button click
const handleClick = (): void => {
if (textAreaValue.trim() !== '') {
- onSubmit(keypressData);
+ onSubmit({ content: textAreaValue });
+
setTextAreaValue('');
- // focus on the text area
- // focusOnTextArea();
- // blue text area
+ focusOnTextArea();
blurTextArea();
}
};
+ // Function to handle the dismiss button click
const handleDismiss = (): void => {
dismissExchange();
};
@@ -83,7 +72,7 @@ const MessageInput = ({