Merge branch 'master' into enhancement/pin-flows

glific · Nov 21, 2024 · 6d8b311 · 6d8b311
2 parents 37366ac + ec8a274
commit 6d8b311
Show file tree

Hide file tree

Showing 18 changed files with 554 additions and 225 deletions.
diff --git a/src/common/utils.ts b/src/common/utils.ts
@@ -300,3 +300,9 @@ export const updateContactCache = (client: any, id: any) => {
 
   return null;
 };
+
+export const formatString = (str: string) =>
+  str
+    .replace(/_/g, ' ')
+    .replace(/([a-z])([0-9])/gi, '$1 $2')
+    .replace(/\b\w/g, (char) => char.toUpperCase());
diff --git a/src/components/UI/Form/PhoneInput/PhoneInput.tsx b/src/components/UI/Form/PhoneInput/PhoneInput.tsx
@@ -18,6 +18,7 @@ export interface InputProps {
   form: { touched: any; errors: any; setFieldValue: any };
   inputLabel?: string | null;
   disabled?: boolean;
+  changeHandler?: (event: string, data: {}, formFieldItems: string) => void;
 }
 
 export const PhoneInput = ({
@@ -33,6 +34,7 @@ export const PhoneInput = ({
   inputLabel = null,
   disabled = false,
   helperText,
+  changeHandler,
 }: InputProps) => {
   const errorText = getIn(errors, field.name);
   const touchedVal = getIn(touched, field.name);
@@ -58,7 +60,9 @@ export const PhoneInput = ({
           inputProps={inputProps}
           {...field}
           value={field.value}
-          onChange={(event) => {
+          onChange={(event, data, _, formFieldItems) => {
+            if (changeHandler) changeHandler(event, data, formFieldItems);
+
             setFieldValue(field.name, event);
           }}
         />

diff --git a/src/components/UI/Heading/Heading.tsx b/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 && (

diff --git a/src/containers/Assistants/AssistantOptions/AssistantOptions.module.css b/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;

diff --git a/src/containers/Assistants/AssistantOptions/AssistantOptions.tsx b/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>
 

diff --git a/src/containers/Assistants/Assistants.test.tsx b/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();
+  });
+});
diff --git a/src/containers/Assistants/CreateAssistant/CreateAssistant.tsx b/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