Filesearch: Added expandable textbox

src/components/UI/Form/Input/Input.module.css

@@ -28,10 +28,6 @@
   font-weight: 400;
 }
 
-.Multiline {
-  padding-bottom: 35px;
-}
-
 .Resend {
   color: #119656;
   font-weight: bold;

src/components/UI/Form/Input/Input.tsx

@@ -113,7 +113,7 @@ export const Input = ({ textArea = false, disabled = false, inputLabel = null, .
             inputComponent={editor ? editor.inputComponent : undefined}
             inputProps={editor ? editor.inputProps : inputProp}
             type={fieldType}
-            classes={{ multiline: styles.Multiline, input: !textArea ? inputStyles : '' }}
+            classes={{ input: !textArea ? inputStyles : '' }}
             disabled={disabled}
             error={showError}
             multiline={textArea}

src/containers/Assistants/Assistants.test.tsx

@@ -241,3 +241,27 @@ test('it should show errors for invalid value in temperature', async () => {
     expect(screen.getByText('Temperature value should be between 0-2')).toBeInTheDocument();
   });
 });
+
+test('it opens the instruction dialog box', async () => {
+  render(assistantsComponent());
+
+  await waitFor(() => {
+    expect(screen.getByText('Assistants')).toBeInTheDocument();
+    expect(screen.getByText('Assistant-1')).toBeInTheDocument();
+  });
+
+  await waitFor(() => {
+    expect(screen.getByTestId('expandIcon')).toBeInTheDocument();
+  });
+
+  fireEvent.click(screen.getByTestId('expandIcon'));
+  fireEvent.click(screen.getByTestId('cancel-button'));
+  fireEvent.click(screen.getByTestId('expandIcon'));
+
+  fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test instructions' } });
+  fireEvent.click(screen.getByTestId('save-button'));
+
+  await waitFor(() => {
+    expect(screen.getByText('test instructions')).toBeInTheDocument();
+  });
+});

src/containers/Assistants/CreateAssistant/CreateAssistant.module.css

@@ -66,3 +66,56 @@
 .DeleteIcon {
   margin-right: 0.5rem;
 }
+
+.Expand {
+  height: 100%;
+  display: flex;
+  align-items: end;
+  max-height: none;
+}
+
+.ExpandButton {
+  cursor: pointer;
+}
+
+.ExpandButton:hover {
+  background-color: #00000017;
+  border-radius: 0.5rem;
+}
+
+.InstructionsBox {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Instructions {
+  background-color: #fff;
+  width: 50%;
+  padding: 1rem;
+  border-radius: 1rem;
+}
+
+.Instructions h5 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.Instructions {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.Input {
+  width: 100%;
+}
+
+.InstructionButtons {
+  width: 100%;
+  display: flex;
+  justify-content: end;
+}

src/containers/Assistants/CreateAssistant/CreateAssistant.tsx

@@ -1,5 +1,5 @@
 import { useLazyQuery, useMutation, useQuery } from '@apollo/client';
-import { Typography } from '@mui/material';
+import { InputAdornment, Modal, OutlinedInput, Typography } from '@mui/material';
 import { Field, FormikProvider, useFormik } from 'formik';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -19,6 +19,7 @@
 
 import CopyIcon from 'assets/images/CopyGreen.svg?react';
 import DeleteIcon from 'assets/images/icons/Delete/White.svg?react';
+import ExpandIcon from 'assets/images/icons/ExpandContent.svg?react';
 
 import { AssistantOptions } from '../AssistantOptions/AssistantOptions';
 
@@ -38,6 +39,7 @@
   const [instructions, setInstructions] = useState('');
   const [options, setOptions] = useState({ fileSearch: true, temperature: 1 });
   const [showConfirmation, setShowConfirmation] = useState(false);
+  const [openInstructions, setOpenInstructions] = useState(false);
   const { t } = useTranslation();
 
   const states = {
@@ -109,6 +111,12 @@
     });
   };
 
+  const expandIcon = (
+    <InputAdornment className={styles.Expand} position="end">
+      <ExpandIcon data-testid="expandIcon" onClick={() => setOpenInstructions(true)} className={styles.ExpandButton} />
+    </InputAdornment>
+  );
+
   const formFields: any = [
     {
       component: AutoComplete,
@@ -145,6 +153,7 @@
       textArea: true,
       helperText: t('Set the instructions according to your requirements.'),
       onChange: (value: any) => setInstructions(value),
+      endAdornment: expandIcon,
     },
     {
       component: AssistantOptions,
@@ -187,6 +196,7 @@
   };
 
   let dialog;
+  let instructionsDialog;
   if (showConfirmation) {
     dialog = (
       <DialogBox
@@ -204,6 +214,33 @@
       </DialogBox>
     );
   }
+  if (openInstructions) {
+    instructionsDialog = (
+      <Modal open={openInstructions} onClose={() => setOpenInstructions(false)}>
+        <div className={styles.InstructionsBox}>
+          <div className={styles.Instructions}>
+            <h5>Edit system instructions</h5>
+            <OutlinedInput
+              name="expand-instructions"
+              onChange={(event) => setInstructions(event.target.value)}
+              value={instructions}
+              className={styles.Input}
+              multiline
+              rows={16}
+            />
+            <div className={styles.InstructionButtons}>
+              <Button data-testid="cancel-button" onClick={() => setOpenInstructions(false)} variant="outlined">
+                Cancel
+              </Button>
+              <Button data-testid="save-button" onClick={() => setOpenInstructions(false)} variant="contained">
+                Save
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Modal>
+    );
+  }
 
   if (loading || listLoading) {
     return <Loading />;
@@ -243,6 +280,7 @@
           </div>
         </form>
         {dialog}
+        {instructionsDialog}
       </div>
     </FormikProvider>
   );