fixed temperature slider

glific · Nov 13, 2024 · 259fd28 · 259fd28
1 parent f2e2f62
commit 259fd28
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 75 deletions.
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-1</p>}
         </div>
       </div>
 

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,9 +70,7 @@ export const CreateAssistant = ({
         onCompleted: ({ assistant }) => {
           setAssistantId(assistant?.assistant?.assistantId);
           setName(assistant?.assistant?.name);
-          let modelValue = modelOptions?.find(
-            (item: any) => item.label === assistant?.assistant?.model
-          );
+          let modelValue = modelOptions?.find((item: any) => item.label === assistant?.assistant?.model);
           setModel(modelValue);
           setInstructions(assistant?.assistant?.instructions || '');
           setOptions({
@@ -90,12 +83,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 +126,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 +177,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);
       },
@@ -205,15 +188,17 @@ export const CreateAssistant = ({
   if (showConfirmation) {
     dialog = (
       <DialogBox
-        title={`Are you sure you want to delete the assistant ${name}?`}
+        title={`Permanently delete assistant?`}
         handleCancel={handleClose}
         colorOk="warning"
         alignButtons="center"
         handleOk={handleDelete}
         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 +225,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

diff --git a/src/i18n/en/en.json b/src/i18n/en/en.json
@@ -519,7 +519,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.",