diff --git a/src/common/utils.ts b/src/common/utils.ts index b3331c807..fa8d349a9 100644 --- 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 index 816a262b1..6ce4eef0e 100644 --- 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 index 631402922..296fabc5e 100644 --- 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 = ; @@ -39,12 +32,12 @@ export const Heading = ({
-
{formTitle}
+
+ {formTitle} +
{helpData ? : ''}
-
- {showHeaderHelp ? headerHelp || `Please enter below details.` : ''} -
+
{showHeaderHelp ? headerHelp || `Please enter below details.` : ''}
{button && button.show && ( diff --git a/src/containers/Assistants/AssistantOptions/AssistantOptions.module.css b/src/containers/Assistants/AssistantOptions/AssistantOptions.module.css index ca21b53f2..f26b427f2 100644 --- a/src/containers/Assistants/AssistantOptions/AssistantOptions.module.css +++ b/src/containers/Assistants/AssistantOptions/AssistantOptions.module.css @@ -21,15 +21,21 @@ .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 { @@ -37,10 +43,21 @@ 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 index 642a4aea1..297cf10ef 100644 --- 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([]); + 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 }} /> - -
- { - setOptions({ - ...options, - temperature: value, - }); - }} - value={options.temperature} - step={0.01} - max={2} - /> - { - setOptions({ - ...options, - temperature: event.target.value, - }); - }} - className={styles.SliderDisplay} - /> +
+
+ { + setOptions({ + ...options, + temperature: value, + }); + }} + value={options.temperature} + step={0.01} + max={2} + min={0} + /> + { + 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 : ''}`} + /> +
+ {error &&

Temperature value should be between 0-2

}
diff --git a/src/containers/Assistants/Assistants.test.tsx b/src/containers/Assistants/Assistants.test.tsx index b5f6b8ba0..f50d0ccbb 100644 --- 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 index 063f93e1f..c8488e8a1 100644 --- 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(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: (
- - {t('Give a recognizable name for your assistant')} - + {t('Give a recognizable name for your assistant')}
copyToClipboard(assistantId)}> {assistantId} @@ -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} > -
{t("You won't be able to use this assistant.")}
+
+ {t('Please confirm that this assistant is not being used in any of the active flows.')} +
); } @@ -240,12 +227,7 @@ export const CreateAssistant = ({ ))}
-