feat: improve text analysis settings

- Hide the chatbot settings if use chatbot is off - Increase the size of the students field - Disable multiline for the lesson title field
graasp · Dec 7, 2023 · 6a6776a · 6a6776a
1 parent 5c63b89
commit 6a6776a
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 19 deletions.
diff --git a/src/components/common/settings/SetText.tsx b/src/components/common/settings/SetText.tsx
@@ -13,13 +13,18 @@ type Prop = {
   textFieldLabel: string;
   textDataCy: string;
   buttonDataCy: string;
+
+  multiline?: boolean;
+  minRows?: number;
 };
 
 const SetText: FC<Prop> = ({
   resourceKey,
   textFieldLabel,
   textDataCy,
   buttonDataCy,
+  multiline = false,
+  minRows = 1,
 }) => {
   const [resourceText, setResourceText] = useState(
     DEFAULT_TEXT_RESOURCE_SETTING.text,
@@ -72,12 +77,13 @@ const SetText: FC<Prop> = ({
     >
       <TextField
         data-cy={textDataCy}
-        multiline
+        multiline={multiline}
         label={textFieldLabel}
         variant="outlined"
         onChange={onChange}
         sx={{ width: FULL_WIDTH, marginRight: DEFAULT_MARGIN }}
         value={resourceText}
+        minRows={minRows}
       />
       <SaveButton
         buttonDataCy={buttonDataCy}

diff --git a/src/components/common/settings/SwitchModes.tsx b/src/components/common/settings/SwitchModes.tsx
@@ -11,7 +11,11 @@ import { USE_CHATBOT_DATA_CY } from '../../../config/selectors';
 import { DEFAULT_MARGIN } from '../../../config/stylingConstants';
 import { useAppSettingContext } from '../../context/AppSettingContext';
 
-const SwitchModes: FC = () => {
+type Prop = {
+  onChange?: (useChatbot: boolean) => void;
+};
+
+const SwitchModes: FC<Prop> = ({ onChange }) => {
   const [useChatbot, setUseChatbot] = useState(false);
   const { patchAppSetting, postAppSetting, appSettingArray } =
     useAppSettingContext();
@@ -23,7 +27,11 @@ const SwitchModes: FC = () => {
   useEffect(() => {
     const { useBot } = useChatbotSetting?.data || DEFAULT_USE_CHATBOT_SETTING;
     setUseChatbot(useBot);
-  }, [useChatbotSetting]);
+
+    if (onChange) {
+      onChange(useBot);
+    }
+  }, [onChange, useChatbotSetting]);
 
   const handleOnChange = ({
     target,

diff --git a/src/components/views/admin/BuilderView.tsx b/src/components/views/admin/BuilderView.tsx
@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 
-import { Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 
 import {
   INITIAL_CHATBOT_PROMPT_SETTING_KEY,
@@ -26,6 +26,12 @@ import SwitchModes from '../../common/settings/SwitchModes';
 
 // eslint-disable-next-line arrow-body-style
 const BuilderView: FC = () => {
+  const [displayChatbot, setDisplayChatbot] = useState(false);
+
+  const updateDisplayChatbot = (display: boolean): void => {
+    setDisplayChatbot(display);
+  };
+
   return (
     <div data-cy={BUILDER_VIEW_CY}>
       <PublicAlert />
@@ -38,7 +44,6 @@ const BuilderView: FC = () => {
       >
         Prepare Your Lesson
       </Typography>
-      <SwitchModes />
       <SetText
         textDataCy={TITLE_INPUT_FIELD_CY}
         buttonDataCy={SAVE_TITLE_BUTTON_CY}
@@ -49,21 +54,28 @@ const BuilderView: FC = () => {
         textDataCy={TEXT_INPUT_FIELD_CY}
         buttonDataCy={SAVE_TEXT_BUTTON_CY}
         resourceKey={TEXT_RESOURCE_SETTING_KEY}
+        multiline
+        minRows={2}
         textFieldLabel="Enter the text students will see"
       />
-      <SetText
-        textDataCy={INITIAL_PROMPT_INPUT_FIELD_CY}
-        buttonDataCy={INITIAL_PROMPT_BUTTON_CY}
-        resourceKey={INITIAL_PROMPT_SETTING_KEY}
-        textFieldLabel="Enter the intial prompt describing the conversation (as a template for {{keyword}})"
-      />
-      <SetText
-        textDataCy={INITIAL_CHATBOT_PROMPT_INPUT_FIELD_CY}
-        buttonDataCy={INITIAL_CHATBOT_PROMPT_BUTTON_CY}
-        resourceKey={INITIAL_CHATBOT_PROMPT_SETTING_KEY}
-        textFieldLabel="Enter the chatbot's first line (as a template for {{keyword}})"
-      />
-      <KeyWords />
+      <SwitchModes onChange={updateDisplayChatbot} />
+      <Box display={displayChatbot ? 'block' : 'none'}>
+        <SetText
+          textDataCy={INITIAL_PROMPT_INPUT_FIELD_CY}
+          buttonDataCy={INITIAL_PROMPT_BUTTON_CY}
+          resourceKey={INITIAL_PROMPT_SETTING_KEY}
+          multiline
+          textFieldLabel="Enter the intial prompt describing the conversation (as a template for {{keyword}})"
+        />
+        <SetText
+          textDataCy={INITIAL_CHATBOT_PROMPT_INPUT_FIELD_CY}
+          buttonDataCy={INITIAL_CHATBOT_PROMPT_BUTTON_CY}
+          resourceKey={INITIAL_CHATBOT_PROMPT_SETTING_KEY}
+          multiline
+          textFieldLabel="Enter the chatbot's first line (as a template for {{keyword}})"
+        />
+        <KeyWords />
+      </Box>
     </div>
   );
 };