fix: chatbot improvements

src/config/i18n.ts

@@ -30,6 +30,7 @@ i18n.use(initReactI18next).init({
     escapeValue: false,
     formatSeparator: ',',
   },
+  fallbackLng: 'en',
 });
 
 export default i18n;

src/langs/de.json

@@ -0,0 +1,5 @@
+{
+  "translations": {
+    "CHATBOT_CONFIGURATION_MISSING": "Dieser chatbot wurde nicht  not been configured yet."
+  }
+}

src/langs/en.json

@@ -1,159 +1,47 @@
 {
     "translations": {
-        "Welcome to the Graasp App Starter Kit": "Welcome to the Graasp App Starter Kit",
-        "Cancel": "Cancel",
-        "Finish": "Finish",
-        "Save": "Save",
-        "Stop": "Stop",
-        "Clear": "Clear",
-        "Saved": "Saved",
-        "Send": "Send",
-        "Reply": "Reply",
-        "Yes": "Yes",
-        "Write": "Write",
-        "Preview": "Preview",
-        "User": "User",
-        "Version": "Version",
-        "Are you sure you want to delete this comment?": "Are you sure you want to delete this comment?",
-        "View the Users in the Sample Space": "View the Users in the Sample Space",
-        "Selected Student is:": "Selected Student is:",
-        "No student selected": "No student selected",
-        "Image Uri": "Image Uri",
-        "Name": "Name",
-        "Settings": "Settings",
-        "Code": "Code",
-        "Programming Language": "Programming Language",
-        "Show Header to Students": "Show Header to Students",
-        "Allow Comments": "Allow Comments",
-        "Allow Replies": "Allow Replies",
-        "Student Comments": "Student Comments",
-        "Code Review": "Code Review",
-        "Total Number of Messages": "Total Number of Messages",
-        "View Chat": "View Chat",
-        "Select a bot to impersonate": "Select a bot to impersonate",
-        "Close": "Close",
-        "Viewing discussion from": "Viewing discussion from {{user}}",
-        "Bot Users": "Bot Users",
-        "Avatar": "Avatar",
-        "Instructor": "Instructor",
-        "Actions": "Actions",
-        "No Bots": "No Bots",
-        "Add a New Bot User": "Add a New Bot User",
-        "Warning! You are impersonating a bot. Clear the field above to write comments as yourself.": "Warning! You are impersonating a bot. Clear the field above to write comments as yourself.",
-        "[DELETED]": "[DELETED]",
-        "Toggle Visibility": "Toggle Visibility",
-        "Toggle Fullscreen": "Toggle Fullscreen",
-        "Fullscreen": "Fullscreen",
-        "show more": "show more",
-        "Delete Bot": "Delete Bot",
-        "Delete All Comments for Bot": "Delete All Comments for Bot",
-        "Enable Auto Reply": "Enable Auto Reply",
-        "Enable Automatic Message Seeding": "Enable Automatic Message Seeding",
-        "Upload File": "Upload File",
-        "Bot Personality": "Bot Personality",
-        "Reset Defaults": "Reset Defaults",
-        "Add Empty Step": "Add Empty Step",
-        "Show Toolbar to Students": "Show Toolbar to Students",
-        "Show All Comments": "Show All Comments",
-        "Hide All Comments": "Hide All Comments",
-        "Code Settings": "Code Settings",
-        "Display Settings": "Display Settings",
-        "Show Version Navigation": "Show Version Navigation",
-        "Show Code Edit Button": "Show Code Edit Button",
-        "Show Code Run Button": "Show Code Run Button",
-        "Show Visibility Toggle": "Show Visibility Toggle",
-        "Allow students to see other students' code": "Allow students to see other students' code",
-        "Downloading": "Downloading",
-        "Download Actions": "Download Actions",
-        "Edit": "Edit",
-        "Commit Info": "Commit Info",
-        "Run": "Run",
-        "Author": "Author",
-        "Message": "Message",
-        "Description": "Description",
-        "Created": "Created",
-        "Commit Changes": "Commit Changes",
-        "Commit Message": "Commit Message",
-        "Optional Extended Description": "Optional Extended Description",
-        "Updated Code sample": "Updated Code sample",
-        "Add an Optional Description": "Add an Optional Description",
-        "You can reply with": "You can reply with",
-        "Quick Replies": "Quick Replies",
-        "Restart interaction": "Restart interaction",
-        "Default Version": "Default Version",
-        "Help needed": "Help needed",
-        "Table View": "Table View",
-        "Settings View": "Settings",
-        "Preset View": "Preset View",
-        "No Comments": "No Comments",
-        "Define Interaction Mode": "Define Interaction Mode",
-        "App Customization": "App Customization",
-        "Delete": "Delete",
-        "Report": "Report",
-        "Reason": "Reason",
-        "Report a comment": "Report a comment",
-        "Please provide below the reason for reporting this comment": "Please provide below the reason for reporting this comment",
-        "Type your comment": "Type your comment",
-        "Respond to this comment": "Respond to this comment",
-        "LineComment": "Line Comment: {{line}}",
-        "MultiLineComment": "Multiline Comment: {{start}} - {{end}}",
-        "Define Review Mode": "Define Review Mode",
-        "Individual - Each student works in isolation": "Individual - Each student works in isolation",
-        "Collaborative - Students see other students work": "Collaborative - Students see other students work",
-        "Remove orphans": "Remove orphans",
-        "Number of orphan threads": "Orphan threads: {{threads}} ({{totalComments}} total comments)",
-        "total comments": "total comments",
-        "Submit Code": "Submit Code",
-        "User Select": "User Select",
-        "This is the Code Execution panel": "This is the Code Execution panel",
-        "Back to Code Review": "Back to Code Review",
-        "No Commit Message": "~No message~",
-        "Execute Code": "Execute Code",
-        "Review Code": "Review Code",
-        "Collaborate on Code": "Collaborate on Code",
-        "Header code": "Header code",
-        "Footer code": "Footer code",
-        "Code to review": "Code to review",
-        "Input requested": "Input requested",
-        "Submit": "Submit",
-        "Unsaved modifications": "Unsaved modifications",
-        "APP_VERSION": "version {{ version }}",
-        "Choose the App Mode": "Choose the App Mode",
-        "File added": "File added",
-        "Upload complete": "Upload complete",
-        "This is just a preview. No files can be uploaded.": "This is just a preview. No files can be uploaded.",
-        "Data files": "Data files",
-        "Upload Data Files": "Upload Data Files",
-        "No files": "No files",
-        "Supported formats": "Supported formats: {{formats}}",
-        "Old Code": "Old Code",
-        "New Code": "New Code",
-        "Line Offset": "Line Offset",
-        "Save Setting to Preview": "Save Setting to Preview",
-        "Show Preview": "Show Preview",
-        "Pre-loaded libraries": "Preloaded Libraries",
-        "Stop Execution": "Stop Execution",
-        "Clear outputs and figures": "Clear Outputs and Figures",
-        "Run Code": "Run Code",
-        "Save Code": "Save Code",
-        "just now": "just now",
-        "MAX_COMMENT_LENGTH_SETTING": "Maximum comment length (default is {{default}} character)",
-        "MAX_THREAD_LENGTH_SETTING": "Maximum thread length (default is {{default}} messages per user)",
+        "SETTINGS_VIEW_TITLE": "Configuration",
+        "CONVERSATIONS_VIEW_TITLE": "Conversations",
+        "DOWNLOADING_LABEL": "Downloading",
+        "DOWNLOAD_ACTIONS_LABEL": "Download Actions",
+        "DOWNLOAD_DATA_LABEL": "Download Data",
+        "REMOVE_ORPHANS_LABEL": "Remove Orphans",
+        "NUMBER_OF_ORPHAN_THREADS_one": "Orphan threads: {{threads}} ({{count}} comment in total)",
+        "NUMBER_OF_ORPHAN_THREADS_other": "Orphan threads: {{threads}} ({{count}} comments in total)",
+        "NAME_COLUMN_HEADER": "Name",
+        "MESSAGE_NUMBER_COLUMN_HEADER": "Total number of messages",
+        "VIEW_CHAT_COLUMN_HEADER": "View Chat",
+        "DISCUSSION_DIALOG_TITLE": "Discussion from {{user}}",
+        "CHATBOT_CONFIGURATION_MISSING": "This chatbot has not been configured yet.",
+        "ERROR_PROMPT_NOT_IN_JSON_FORMAT": "Prompt has to be in JSON format.",
+        "CHATBOT_SETTING_TITLE": "Chatbot",
+        "EDIT_LABEL": "Edit",
+        "DELETE_LABEL": "Delete",
+        "CANCEL_LABEL": "Cancel",
+        "SEND_LABEL": "Send",
+        "CHATBOT_NAME_LABEL": "Chatbot Name",
+        "CHATBOT_NAME_HELPER": "This is the name that users will see when they interact with the chatbot",
+        "CHATBOT_NAME_DEFAULT_MESSAGE": "by default",
+        "CHATBOT_PROMPT_LABEL": "Chatbot Prompt",
+        "CHATBOT_PROMPT_HELPER_LABEL": "In-depth technical description",
+        "CHATBOT_PROMPT_HELPER": "This is the name that users will see when they interact with the chatbot",
+        "CHATBOT_PROMPT_FORMAT_HELPER": "To describe the initial situation, create an object at the start of the array with 2 keys: 'role' and 'content'. For the initial description the role must be 'system'. Place your description of the initial situation in the 'content' key. Add interaction examples after that. Add one object per message with the role corresponding to either 'assistant' or 'user'.",
+        "CHATBOT_PROMPT_FORMAT_EXAMPLE": "Here is an example",
+        "CHATBOT_PROMPT_API_REFERENCE": "See the API reference",
+        "CHATBOT_CUE_LABEL": "Cue",
+        "CHATBOT_CUE_HELPER": "This defines the content of the first message of the chatbot. You can change it to better orient the conversation with the user.",
+        "CHATBOT_CUE_EMPTY_MESSAGE": "The cue is empty.",
+        "SAVE_LABEL": "Save",
+        "SAVED_LABEL": "Saved",
+        "GENERAL_SETTING_TITLE": "General",
+        "MAXIMUM_COMMENT_LENGTH_LABEL": "Maximum comment length (number of characters)",
+        "MAXIMUM_THREAD_LENGTH_LABEL": "Maximum conversation length (number of messages)",
+        "JUST_NOW_COMMENT_HEADER": "Just now",
+        "COMMENT_ACTIONS_TOOLTIP": "Actions",
         "COMMENT_TEXT_TOO_LONG": "The comment text can not be longer than {{max_length}} characters",
-        "Add New Chatbot Prompt": "Add New Chatbot Prompt",
-        "Edit Chatbot Prompt": "Edit Chatbot Prompt",
-        "Chatbot Prompts": "Chatbot Prompts",
-        "No Chatbot Prompts": "No Chatbot Prompts",
-        "Initial Prompt": "Initial Prompt",
-        "Chatbot Prompt": "Chatbot Prompt",
-        "Chatbot": "Chatbot",
-        "Line Number (first line is 0)": "Line Number (first line is 0)",
-        "Loading": "Loading",
-        "Optional Text": "Optional Text",
-        "Download Data": "Download Data",
-        "Cue": "Cue",
-        "Chatbot Name": "Chatbot Name",
-        "Prompt": "Prompt",
-        "CHATBOT_CONFIGURATION_MISSING": "This chatbot has not been configured yet."
+        "COMMENT_PLACEHOLDER": "Type your comment here",
+        "LOADING_RESPONSE_PLACEHOLDER": "Loading response",
+        "RESPONSE_BOX_PLACEHOLDER": "Respond to this comment",
+        "NO_COMMENTS_PLACEHOLDER": "No comments"
     }
 }

src/langs/fr.json

@@ -1,5 +1,47 @@
 {
   "translations": {
-    "Chatbot Name": "Nom du chatbot"
+    "SETTINGS_VIEW_TITLE": "Configuration",
+    "CONVERSATIONS_VIEW_TITLE": "Discussions",
+    "DOWNLOADING_LABEL": "En téléchargement",
+    "DOWNLOAD_ACTIONS_LABEL": "Télécharger les actions",
+    "DOWNLOAD_DATA_LABEL": "Télécharger les données",
+    "REMOVE_ORPHANS_LABEL": "Supprimer les orphelins",
+    "NUMBER_OF_ORPHAN_THREADS_one": "Conversations orphelines: {{threads}} ({{count}} commentaire au total)",
+    "NUMBER_OF_ORPHAN_THREADS_other": "Conversations orphelines: {{threads}} ({{count}} commentaires au total)",
+    "NAME_COLUMN_HEADER": "Nom",
+    "MESSAGE_NUMBER_COLUMN_HEADER": "Nombre de messages",
+    "VIEW_CHAT_COLUMN_HEADER": "Voir la conversation",
+    "DISCUSSION_DIALOG_TITLE": "Discussion de {{user}}",
+    "CHATBOT_CONFIGURATION_MISSING": "Ce chatbot n'a pas encore été configuré",
+    "ERROR_PROMPT_NOT_IN_JSON_FORMAT": "Le script doit être au format JSON. Veuillez vous référer à la description technique approfondie.",
+    "CHATBOT_SETTING_TITLE": "Chatbot",
+    "EDIT_LABEL": "Éditer",
+    "DELETE_LABEL": "Delete",
+    "CANCEL_LABEL": "Annuler",
+    "SEND_LABEL": "Envoyer",
+    "CHATBOT_NAME_LABEL": "Nom du chatbot",
+    "CHATBOT_NAME_HELPER": "Ceci est le nom que les utilisateurs verront quand ils interrogeront le chatbot.",
+    "CHATBOT_NAME_DEFAULT_MESSAGE": "par défaut",
+    "CHATBOT_PROMPT_LABEL": "Context initial",
+    "CHATBOT_PROMPT_HELPER_LABEL": "Description technique approfondie",
+    "CHATBOT_PROMPT_HELPER": "Un tableau d'objets au format JSON décrivant le context et donnant des examples d'interaction avec le chatbot. Permet d'orienter la discussion avec le chatbot. Précisez par example le cadre dans lequel l'interaction a lieu, une classe, un exercice, etc. Vous pouvez également décrire les sujets que le chatbot est en mesure d'aborder afin de restreindre le champ d'interaction.",
+    "CHATBOT_PROMPT_FORMAT_HELPER": "Pour décrire la situation initiale, créez un objet au début du tableau avec les deux clés 'role' et 'content'. Pour la description initiale le role doit être 'system'. Placez votre description de la situation dans la clé 'content'. Ajoutez ensuite des exemples d'interactions avec l'assistant. Ajoutez un objet par message en alternant les rôles 'assistant' pour le chatbot et 'user' pour l'utilisateur humain.",
+    "CHATBOT_PROMPT_FORMAT_EXAMPLE": "Voici un example (en anglais)",
+    "CHATBOT_PROMPT_API_REFERENCE": "Voir la documentation API",
+    "CHATBOT_CUE_LABEL": "Message d'accroche",
+    "CHATBOT_CUE_HELPER": "Ceci définit le contenu du premier message du chatbot. Vous pouvez le personnaliser pour lancer au mieux l'interaction avec les utilisateurs.",
+    "CHATBOT_CUE_EMPTY_MESSAGE": "Le message d'accroche est vide",
+    "SAVE_LABEL": "Sauvegarder",
+    "SAVED_LABEL": "Sauvegardé",
+    "GENERAL_SETTING_TITLE": "Généraux",
+    "MAXIMUM_COMMENT_LENGTH_LABEL": "Longueur maximum d'un commentaire (nombre de caractères)",
+    "MAXIMUM_THREAD_LENGTH_LABEL": "Longueur maximum de la discussion (nombre de messages)",
+    "JUST_NOW_COMMENT_HEADER": "À l'instant",
+    "COMMENT_ACTIONS_TOOLTIP": "Actions",
+    "COMMENT_TEXT_TOO_LONG": "Le text du commentaire ne peut pas dépasser {{max_length}} caractères",
+    "COMMENT_PLACEHOLDER": "Type your comment here",
+    "LOADING_RESPONSE_PLACEHOLDER": "Chargement de la réponse",
+    "RESPONSE_BOX_PLACEHOLDER": "Répondre à ce message",
+    "NO_COMMENTS_PLACEHOLDER": "Pas de commentaires"
   }
 }

src/modules/common/ChatbotPrompt.tsx

@@ -155,7 +155,7 @@ const ChatbotPrompt = ({ id }: Props): JSX.Element | null => {
         >
           <CardHeader
             title={DEFAULT_BOT_USERNAME}
-            subheader={t('just now')}
+            subheader={t('JUST_NOW_COMMENT_HEADER')}
             avatar={<ChatbotAvatar />}
           />
           <CardContent sx={{ p: 2, py: 0, '&:last-child': { pb: 0 } }}>

src/modules/common/CodeEditor.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { CSSProperties, FC } from 'react';
 
 import { Box, Stack, styled, useTheme } from '@mui/material';
 
@@ -18,10 +18,11 @@ const StyledEditorContainer = styled(Box)({
 type Props = {
   value: string;
   readOnly?: boolean;
+  fontSize?: CSSProperties['fontSize'];
   onChange?: (newValue: string) => void;
 };
 
-const CodeEditor: FC<Props> = ({ value, readOnly, onChange }) => {
+const CodeEditor: FC<Props> = ({ value, readOnly, fontSize, onChange }) => {
   const theme = useTheme();
 
   return (
@@ -32,6 +33,7 @@ const CodeEditor: FC<Props> = ({ value, readOnly, onChange }) => {
           onChange={onChange}
           height="100%"
           style={{
+            fontSize,
             height: '100%',
           }}
           value={value}

src/modules/common/Comment.tsx

@@ -101,7 +101,7 @@ const Comment = ({ comment, onEdit }: Props): JSX.Element => {
         }
         action={
           <>
-            <Tooltip title={t('Actions')}>
+            <Tooltip title={t('COMMENT_ACTIONS_TOOLTIP')}>
               <IconButton
                 onClick={(e) => {
                   setMenuAnchorEl(e.currentTarget);

src/modules/common/CommentActions.tsx

@@ -33,7 +33,7 @@ const CommentActions = ({
   const { t } = useTranslation();
   const { mutate: deleteAppData } = mutations.useDeleteAppData();
   const { mutate: postAction } = mutations.usePostAppAction();
-  console.debug(open, showEdit, showDelete);
+
   return (
     <Menu
       MenuListProps={{ dense: true }}
@@ -64,7 +64,7 @@ const CommentActions = ({
           <ListItemIcon>
             <Edit color="primary" />
           </ListItemIcon>
-          <ListItemText>{t('Edit')}</ListItemText>
+          <ListItemText>{t('EDIT_LABEL')}</ListItemText>
         </MenuItem>
       )}
       {showDelete && (
@@ -81,7 +81,7 @@ const CommentActions = ({
           <ListItemIcon>
             <Delete color="error" />
           </ListItemIcon>
-          <ListItemText>{t('Delete')}</ListItemText>
+          <ListItemText>{t('DELETE_LABEL')}</ListItemText>
         </MenuItem>
       )}
     </Menu>

src/modules/common/CommentEditor.tsx

@@ -158,7 +158,7 @@ const CommentEditor = ({
         </Stack>
         <TextArea
           data-cy={COMMENT_EDITOR_TEXTAREA_CYPRESS}
-          placeholder={t('Type your comment')}
+          placeholder={t('COMMENT_PLACEHOLDER')}
           minRows={1}
           maxRows={10}
           ref={ref}
@@ -181,15 +181,15 @@ const CommentEditor = ({
               variant="outlined"
               onClick={() => onCancel()}
             >
-              {t('Cancel')}
+              {t('CANCEL_LABEL')}
             </Button>
             <Button
               dataCy={COMMENT_EDITOR_SAVE_BUTTON_CYPRESS}
               color="primary"
               variant="outlined"
               onClick={() => onSend(text)}
             >
-              {t('Send')}
+              {t('SEND_LABEL')}
             </Button>
           </Stack>
         </Stack>

src/modules/common/CommentThread.tsx

@@ -113,7 +113,9 @@ const CommentThread = ({ children }: Props): JSX.Element | null => {
           {i + 1 === arr.length && isLoading && (
             <ResponseContainer>
               <Stack spacing={2} direction="row" justifyContent="center">
-                <Typography color="#666">{t('Loading')}</Typography>
+                <Typography color="#666">
+                  {t('LOADING_RESPONSE_PLACEHOLDER')}
+                </Typography>
                 <CircularProgress sx={{ color: '#666' }} size="20px" />
               </Stack>
             </ResponseContainer>

src/modules/common/ResponseBox.tsx

@@ -25,7 +25,7 @@ const ResponseBox = ({ onClick, commentId, dataCy }: Props): JSX.Element => {
       <StyledTextField
         data-cy={dataCy || COMMENT_RESPONSE_BOX_CY}
         fullWidth
-        placeholder={t('Respond to this comment')}
+        placeholder={t('RESPONSE_BOX_PLACEHOLDER')}
         onClick={() => onClick(commentId)}
       />
     </ResponseContainer>