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 = ({
))}
-