refactored assistants page

src/common/HelpData.tsx

@@ -1,6 +1,6 @@
 export interface HelpDataProps {
   heading: string;
-  link: string;
+  link?: string;
 }
 
 export const speedSendInfo: HelpDataProps = {

src/components/UI/HelpIcon/HelpIcon.tsx

@@ -26,14 +26,16 @@ export const HelpIcon = ({
             <div>
               <div className={styles.HoverPopUpText}>
                 {helpData.heading}
-                <div
-                  className={styles.HoverLink}
-                  onClick={() => {
-                    window.open(helpData.link);
-                  }}
-                >
-                  Learn more
-                </div>
+                {helpData.link && (
+                  <div
+                    className={styles.HoverLink}
+                    onClick={() => {
+                      window.open(helpData.link);
+                    }}
+                  >
+                    Learn more
+                  </div>
+                )}
               </div>
             </div>
           )}

src/containers/AIToolkit/AssistantOptions/AssistantOptions.module.css

@@ -0,0 +1,40 @@
+.AssistantOptions {
+  margin: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+}
+
+.Label {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #555;
+  display: flex;
+  align-items: center;
+  column-gap: 0.5rem;
+}
+
+.Temperature {
+  display: flex;
+  column-gap: 1rem;
+  align-items: center;
+}
+
+.Slider {
+  width: 80%;
+  display: flex;
+  align-items: center;
+  column-gap: 1rem;
+}
+
+.SliderDisplay {
+  font-size: 15px;
+  padding: 4px 8px;
+  border: 0.5px solid #a4a4a4;
+  border-radius: 4px;
+  width: 15%;
+}
+
+.SliderDisplay:focus {
+  outline: none;
+}

src/containers/AIToolkit/AssistantOptions/AssistantOptions.tsx

@@ -0,0 +1,86 @@
+import { FormControlLabel, Slider, Switch, Typography } from '@mui/material';
+import { useState } from 'react';
+import styles from './AssistantOptions.module.css';
+import InfoIcon from 'assets/images/icons/Info.svg?react';
+import Tooltip from 'components/UI/Tooltip/Tooltip';
+import HelpIcon from 'components/UI/HelpIcon/HelpIcon';
+
+interface AssistantOptionsProps {
+  form: any;
+  field: any;
+  fileSearch: boolean;
+}
+
+const temperatureInfo =
+  'Controls randomness: Lowering results in less random completions. As the temperature approaches zero, the model will become deterministic and repetitive.';
+
+const fileSearchInfo =
+  'File search enables the assistant with knowledge from files that you or your users upload. Once a file is uploaded, the assistant automatically decides when to retrieve content based on user requests.';
+
+export const AssistantOptions = ({ form, field, fileSearch }: AssistantOptionsProps) => {
+  const [checked, setChecked] = useState(false);
+  console.log(field.value);
+
+  return (
+    <div className={styles.AssistantOptions}>
+      <div>
+        <Typography variant="subtitle2" className={styles.Label} data-testid="inputLabel">
+          Tools
+        </Typography>
+        <FormControlLabel
+          control={
+            <Switch
+              checked={field.value.fileSearch}
+              name="fileSearch"
+              onChange={(event) => {
+                form.setFieldValue('options', {
+                  ...field.value,
+                  fileSearch: event.target.checked,
+                });
+                console.log(event.target.checked);
+              }}
+            />
+          }
+          label="File Search"
+        />
+
+        <button>Files</button>
+      </div>
+
+      <div className={styles.Temperature}>
+        <Typography variant="subtitle2" className={styles.Label} data-testid="inputLabel">
+          Temperature
+          <HelpIcon
+            helpData={{
+              heading: temperatureInfo,
+            }}
+          />
+        </Typography>
+
+        <div className={styles.Slider}>
+          <Slider
+            onChange={(_, value) => {
+              form.setFieldValue('options', {
+                ...field.value,
+                temperature: value,
+              });
+            }}
+            value={field.value.temperature}
+            step={0.01}
+            max={2}
+          />
+          <input
+            value={field.value.temperature}
+            onChange={(event) => {
+              form.setFieldValue('options', {
+                ...field.value,
+                temperature: event.target.value,
+              });
+            }}
+            className={styles.SliderDisplay}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

src/containers/AIToolkit/Assistants/Assistants.module.css

@@ -5,7 +5,7 @@
 
 .MainContainer {
   width: 100%;
-  height: 80%;
+  height: calc(100vh - 110px);
   display: flex;
 }
 
@@ -15,19 +15,28 @@
   border-right: 1px solid #00000029;
   padding: 2rem 4rem;
   background-color: #f8faf5;
+  position: relative;
 }
 
 .RightContainer {
   height: 100%;
   width: 50% !important;
+  overflow-y: scroll;
+}
+
+.Search {
+  width: 50%;
+  position: absolute;
+  top: 0;
+  margin: 1rem 0;
 }
 
 .AssistantList {
+  margin-top: 2rem;
   height: 100%;
   display: flex;
   flex-direction: column;
   row-gap: 0.5rem;
-  margin: 1rem 0;
   overflow-y: scroll;
 }
 

src/containers/AIToolkit/Assistants/Assistants.tsx

@@ -14,6 +14,7 @@ export const Assistants = () => {
       inserted_at: '6:30 PM',
     },
   ];
+
   return (
     <div className={styles.AssistantContainer}>
       <Heading
@@ -24,7 +25,7 @@ export const Assistants = () => {
       />
       <div className={styles.MainContainer}>
         <div className={styles.LeftContainer}>
-          <div>
+          <div className={styles.Search}>
             <SearchBar
               className={styles.ChatSearchBar}
               handleChange={() => {}}

src/containers/AIToolkit/CreateAssistant.tsx/CreateAssistant.tsx

@@ -1,69 +1,91 @@
 import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete';
 import { Input } from 'components/UI/Form/Input/Input';
-import { FormLayout } from 'containers/Form/FormLayout';
 import {
   CREATE_COLLECTION,
   DELETE_COLLECTION,
   UPDATE_COLLECTION,
 } from 'graphql/mutations/Collection';
 import { GET_COLLECTION } from 'graphql/queries/Collection';
+import { AssistantOptions } from '../AssistantOptions/AssistantOptions';
+import { useState } from 'react';
+import { FormLayout } from '../FormLayout/FormLayout';
+
+const queries = {
+  getItemQuery: GET_COLLECTION,
+  createItemQuery: CREATE_COLLECTION,
+  updateItemQuery: UPDATE_COLLECTION,
+  deleteItemQuery: DELETE_COLLECTION,
+};
 
 export const CreateAssistant = () => {
-  const queries = {
-    getItemQuery: GET_COLLECTION,
-    createItemQuery: CREATE_COLLECTION,
-    updateItemQuery: UPDATE_COLLECTION,
-    deleteItemQuery: DELETE_COLLECTION,
-  };
+  const [name, setName] = useState('');
+  const [model, setModel] = useState();
+  const [prompt, setPrompt] = useState('');
+  const [fileSearch, setFileSearch] = useState(true);
+  const [options, setOptions] = useState({ fileSearch: true, temperature: 1 });
+
+  const models = [
+    { id: '1', name: 'gpt-4o ' },
+    { id: '2', name: 'GPT-4' },
+    { id: '3', name: 'GPT-5' },
+  ];
+
   const formFields = [
     {
       component: AutoComplete,
       name: 'model',
-      options: [],
+      options: models,
       optionLabel: 'name',
       label: 'Model',
       skipPayload: true,
       helperText: 'Choose the best model for your needs',
+      multiple: false,
     },
     {
       component: Input,
       name: 'name',
       type: 'text',
       label: 'Name',
-      helpeText: 'Give a recognizable name for your assistant',
+      helperText: 'Give a recognizable name for your assistant',
     },
     {
       component: Input,
-      name: 'description',
+      name: 'prompt',
       type: 'text',
-      label: 'Description',
+      label: 'Instructions',
       rows: 3,
       textArea: true,
+      helperText: 'Set the instructions according to your requirements.',
+    },
+    {
+      component: AssistantOptions,
+      name: 'options',
+      fileSearch,
+      options,
     },
   ];
-  const states = {};
-  const setStates = () => {};
-  const setPayload = () => {};
+
+  const states = {
+    name,
+    model,
+    prompt,
+    fileSearch,
+    options,
+  };
+
+  const setStates = ({ name: nameValue, prompt: promptValue, model: modelValue }: any) => {
+    setName(nameValue);
+    setModel(modelValue);
+    setPrompt(promptValue);
+  };
+
+  const setPayload = (payload: any) => {
+    console.log(payload);
+  };
 
   const FormSchema = {};
 
   return (
-    <FormLayout
-      formFields={formFields}
-      roleAccessSupport
-      {...queries}
-      states={states}
-      setPayload={setPayload}
-      languageSupport={false}
-      setStates={setStates}
-      validationSchema={FormSchema}
-      listItemName="collection"
-      dialogMessage={'dialogMessage'}
-      redirectionLink={'redirectLink'}
-      listItem="group"
-      icon={'collectionIcon'}
-      backLinkButton={`/$}`}
-      noHeading
-    />
+    <FormLayout initialValues={states} validationSchema={FormSchema} formFieldItems={formFields} />
   );
 };

src/containers/AIToolkit/FormLayout/FormLayout.module.css

@@ -0,0 +1,34 @@
+.FormContainer {
+  padding: 3rem;
+  height: 100%;
+  position: relative;
+}
+
+.Form {
+  height: 100%;
+  overflow-y: scroll;
+}
+
+.Form::-webkit-scrollbar {
+  display: none;
+}
+
+.Label {
+  color: #555;
+  font-size: 1rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+.FormFields {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+}
+
+.Buttons {
+  background-color: #fff;
+  padding: 1rem 0;
+  position: absolute;
+  bottom: 0;
+}