Merge pull request #3130 from glific/filesearch-feedback

File search ui feedback

src/components/UI/Heading/Heading.tsx

@@ -20,14 +20,7 @@ export interface HeadingProps {
   };
 }
 
-export const Heading = ({
-  formTitle,
-  helpData,
-  showHeaderHelp = true,
-  backLink,
-  headerHelp,
-  button,
-}: HeadingProps) => {
+export const Heading = ({ formTitle, helpData, showHeaderHelp = true, backLink, headerHelp, button }: HeadingProps) => {
   const navigate = useNavigate();
   const addIcon = <AddIcon className={styles.AddIcon} />;
 
@@ -39,12 +32,12 @@ export const Heading = ({
         </div>
         <div>
           <div className={styles.HeadingTitle}>
-            <div className={styles.TitleText}>{formTitle}</div>
+            <div data-testid="headerTitle" className={styles.TitleText}>
+              {formTitle}
+            </div>
             {helpData ? <HelpIcon helpData={helpData} /> : ''}
           </div>
-          <div className={styles.TextHeading}>
-            {showHeaderHelp ? headerHelp || `Please enter below details.` : ''}
-          </div>
+          <div className={styles.TextHeading}>{showHeaderHelp ? headerHelp || `Please enter below details.` : ''}</div>
         </div>
       </div>
       {button && button.show && (

src/containers/Assistants/AssistantOptions/AssistantOptions.module.css

@@ -21,26 +21,43 @@
 .Temperature {
     display: flex;
     column-gap: 1rem;
-    align-items: center;
+    align-items: start;
     padding: 1rem 0;
 }
 
+.SliderContainer {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
 .Slider {
-    width: 80%;
     display: flex;
     align-items: center;
     column-gap: 1rem;
+    justify-content: space-between;
 }
 
 .SliderDisplay {
     font-size: 15px;
     padding: 4px 12px;
     border: 0.5px solid #a4a4a4;
     border-radius: 4px;
-    width: 15%;
     text-align: center;
 }
 
+.Error {
+    border-color: #fb5c5c;
+}
+
+.ErrorText {
+    width: 100%;
+    color: #fb5c5c;
+    font-size: 0.8rem;
+    margin-top: 0.5rem;
+    text-align: right;
+}
+
 .SliderDisplay:focus {
     outline: none;
 }
@@ -147,7 +164,6 @@
 .VectorStore {
     display: flex;
     width: 100%;
-    padding: 1rem 2rem;
     background-color: #ebf8ee;
     font-size: 0.8rem;
     padding: 0.5rem 1rem;

src/containers/Assistants/AssistantOptions/AssistantOptions.tsx

@@ -34,6 +34,7 @@ const temperatureInfo =
 export const AssistantOptions = ({ currentId, options, setOptions }: AssistantOptionsProps) => {
   const [showUploadDialog, setShowUploadDialog] = useState(false);
   const [files, setFiles] = useState<any[]>([]);
+  const [error, setError] = useState(false);
   const { t } = useTranslation();
 
   const [uploadFile, { loading: uploadingFile }] = useMutation(UPLOAD_FILE_TO_OPENAI);
@@ -201,34 +202,45 @@ export const AssistantOptions = ({ currentId, options, setOptions }: AssistantOp
             }}
           />
         </Typography>
-
-        <div className={styles.Slider}>
-          <Slider
-            name="slider"
-            onChange={(_, value) => {
-              setOptions({
-                ...options,
-                temperature: value,
-              });
-            }}
-            value={options.temperature}
-            step={0.01}
-            max={2}
-          />
-          <input
-            role="sliderDisplay"
-            name="sliderDisplay"
-            type="number"
-            step={0.1}
-            value={options.temperature}
-            onChange={(event) => {
-              setOptions({
-                ...options,
-                temperature: event.target.value,
-              });
-            }}
-            className={styles.SliderDisplay}
-          />
+        <div className={styles.SliderContainer}>
+          <div className={styles.Slider}>
+            <Slider
+              name="slider"
+              onChange={(_, value) => {
+                setOptions({
+                  ...options,
+                  temperature: value,
+                });
+              }}
+              value={options.temperature}
+              step={0.01}
+              max={2}
+              min={0}
+            />
+            <input
+              role="sliderDisplay"
+              name="sliderDisplay"
+              type="number"
+              step={0.1}
+              min={0}
+              max={2}
+              value={options.temperature}
+              onChange={(event) => {
+                const value = parseFloat(event.target.value);
+                if (value < 0 || value > 2) {
+                  setError(true);
+                  return;
+                }
+                setError(false);
+                setOptions({
+                  ...options,
+                  temperature: value,
+                });
+              }}
+              className={`${styles.SliderDisplay} ${error ? styles.Error : ''}`}
+            />
+          </div>
+          {error && <p className={styles.ErrorText}>Temperature value should be between 0-2</p>}
         </div>
       </div>
 

src/containers/Assistants/Assistants.test.tsx

@@ -216,3 +216,28 @@ test('it deletes the assistant', async () => {
     expect(notificationSpy).toHaveBeenCalled();
   });
 });
+
+test('it should show errors for invalid value in temperature', async () => {
+  render(assistantsComponent());
+
+  await waitFor(() => {
+    expect(screen.getByText('Assistants')).toBeInTheDocument();
+    expect(screen.getByText('Assistant-1')).toBeInTheDocument();
+  });
+
+  await waitFor(() => {
+    expect(screen.getByText('Instructions')).toBeInTheDocument();
+  });
+
+  fireEvent.change(screen.getByRole('sliderDisplay'), { target: { value: 2.5 } });
+
+  await waitFor(() => {
+    expect(screen.getByText('Temperature value should be between 0-2')).toBeInTheDocument();
+  });
+
+  fireEvent.change(screen.getByRole('sliderDisplay'), { target: { value: -2.5 } });
+
+  await waitFor(() => {
+    expect(screen.getByText('Temperature value should be between 0-2')).toBeInTheDocument();
+  });
+});

src/containers/Assistants/CreateAssistant/CreateAssistant.tsx

@@ -31,12 +31,7 @@ interface CreateAssistantProps {
   setUpdateList: any;
 }
 
-export const CreateAssistant = ({
-  currentId,
-  setUpdateList,
-  setCurrentId,
-  updateList,
-}: CreateAssistantProps) => {
+export const CreateAssistant = ({ currentId, setUpdateList, setCurrentId, updateList }: CreateAssistantProps) => {
   const [assistantId, setAssistantId] = useState('');
   const [name, setName] = useState('');
   const [model, setModel] = useState<any>(null);
@@ -75,8 +70,8 @@ export const CreateAssistant = ({
         onCompleted: ({ assistant }) => {
           setAssistantId(assistant?.assistant?.assistantId);
           setName(assistant?.assistant?.name);
-          let modelValue = modelOptions?.find(
-            (item: any) => item.label === assistant?.assistant?.model
+          const modelValue = modelOptions?.find(
+            (item: { label: string }) => item.label === assistant?.assistant?.model
           );
           setModel(modelValue);
           setInstructions(assistant?.assistant?.instructions || '');
@@ -90,12 +85,7 @@ export const CreateAssistant = ({
   }, [currentId, modelsList]);
 
   const handleCreate = () => {
-    const {
-      instructions: instructionsValue,
-      model: modelValue,
-      name: nameValue,
-      options: optionsValue,
-    } = states;
+    const { instructions: instructionsValue, model: modelValue, name: nameValue, options: optionsValue } = states;
 
     const payload = {
       instructions: instructionsValue,
@@ -138,9 +128,7 @@ export const CreateAssistant = ({
       onChange: (value: any) => setName(value),
       helperText: (
         <div className={styles.AssistantId}>
-          <span className={styles.HelperText}>
-            {t('Give a recognizable name for your assistant')}
-          </span>
+          <span className={styles.HelperText}>{t('Give a recognizable name for your assistant')}</span>
           <div data-testid="copyCurrentAssistantId" onClick={() => copyToClipboard(assistantId)}>
             <CopyIcon />
             <span>{assistantId}</span>
@@ -191,10 +179,7 @@ export const CreateAssistant = ({
       },
       onCompleted: ({ deleteAssistant }) => {
         setShowConfirmation(false);
-        setNotification(
-          `Assistant ${deleteAssistant.assistant.name} deleted successfully`,
-          'success'
-        );
+        setNotification(`Assistant ${deleteAssistant.assistant.name} deleted successfully`, 'success');
         setCurrentId(null);
         setUpdateList(!updateList);
       },
@@ -213,7 +198,9 @@ export const CreateAssistant = ({
         buttonOkLoading={deletingAssistant}
         disableOk={deletingAssistant}
       >
-        <div className={styles.DialogContent}>{t("You won't be able to use this assistant.")}</div>
+        <div className={styles.DialogContent}>
+          {t('Please confirm that this assistant is not being used in any of the active flows.')}
+        </div>
       </DialogBox>
     );
   }
@@ -240,12 +227,7 @@ export const CreateAssistant = ({
             ))}
           </div>
           <div className={styles.Buttons}>
-            <Button
-              loading={savingChanges}
-              onClick={handleCreate}
-              variant="contained"
-              data-testid="submitAction"
-            >
+            <Button loading={savingChanges} onClick={handleCreate} variant="contained" data-testid="submitAction">
               {t('Save')}
             </Button>
             <Button

src/i18n/en/en.json

@@ -518,7 +518,7 @@
   "Purpose-built AI that uses OpenAI's models and calls tools": "Purpose-built AI that uses OpenAI's models and calls tools",
   "Assistant created successfully": "Assistant created successfully",
   "Remove": "Remove",
-  "You won't be able to use this assistant.": "You won't be able to use this assistant.",
+  "Please confirm that this assistant is not being used in any of the active flows.": "Please confirm that this assistant is not being used in any of the active flows.",
   "Model": "Model",
   "Instructions": "Instructions",
   "Choose the best model for your needs.": "Choose the best model for your needs.",

src/mocks/Assistants.ts

@@ -6,12 +6,7 @@ import {
   UPDATE_ASSISTANT,
   UPLOAD_FILE_TO_OPENAI,
 } from 'graphql/mutations/Assistant';
-import {
-  GET_ASSISTANT,
-  GET_ASSISTANTS,
-  GET_ASSISTANT_FILES,
-  GET_MODELS,
-} from 'graphql/queries/Assistant';
+import { GET_ASSISTANT, GET_ASSISTANTS, GET_ASSISTANT_FILES, GET_MODELS } from 'graphql/queries/Assistant';
 
 const getAssistantsList = (limit: number = 3) => ({
   request: {
@@ -219,7 +214,7 @@ const updateAssistant = {
         instructions: 'test instructions',
         model: 'chatgpt-4o-latest',
         name: 'test name',
-        temperature: '1.5',
+        temperature: 1.5,
       },
     },
   },
@@ -271,6 +266,7 @@ export const MOCKS = [
   listOpenaiModels,
   getAssistant('1'),
   getAssistant('1'),
+  getAssistant('1'),
   getAssistant('2'),
   getAssistant('2'),
   getAssistant('2'),
@@ -290,9 +286,4 @@ export const MOCKS = [
 
 export const emptyMocks = [getAssistantsList(0), listOpenaiModels, getAssistant('2')];
 
-export const loadMoreMocks = [
-  getAssistantsList(25),
-  listOpenaiModels,
-  loadMoreQuery,
-  getAssistant('1'),
-];
+export const loadMoreMocks = [getAssistantsList(25), listOpenaiModels, loadMoreQuery, getAssistant('1')];