UI for file search

src/assets/images/icons/SideDrawer/AIToolkit.tsx

@@ -0,0 +1,12 @@
+const SvgComponent = ({ color }: { color: string }) => (
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g>
+      <path
+        d="M5.76758 12H4L6.62695 4.89062H7.74512L7.56934 6.38477L5.76758 12ZM7.2373 6.38477L7.04199 4.89062H8.16992L10.8115 12H9.04395L7.2373 6.38477ZM9.00488 10.6768H5.28418V9.33887H9.00488V10.6768ZM13.1357 12H11.4854V4.89062H13.1357V12Z"
+        fill={color}
+      />
+    </g>
+    <rect x="0.75" y="0.75" width="16.5" height="16.5" rx="2.25" stroke={color} strokeWidth="1.5" />
+  </svg>
+);
+export default SvgComponent;

src/assets/images/icons/SideDrawer/Assistant.tsx

@@ -0,0 +1,12 @@
+const SvgComponent = ({ color }: { color: string }) => (
+  <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g>
+      <path
+        d="M7.13079 2.71251C7.38858 3.06257 7.65 3.44574 7.65 3.88048V4.25C7.65 4.71944 7.26944 5.1 6.8 5.1C4.26945 5.1 2.10828 6.67938 1.24781 8.90682C1.14768 9.16602 0.906004 9.35 0.62813 9.35C0.281223 9.35 0 9.63122 0 9.97813V12.1219C0 12.4688 0.281223 12.75 0.62813 12.75C0.906004 12.75 1.14768 12.934 1.24781 13.1932C2.10828 15.4206 4.26945 17 6.8 17H10.2C12.7305 17 14.8917 15.4206 15.7522 13.1932C15.8523 12.934 16.094 12.75 16.3719 12.75C16.7188 12.75 17 12.4688 17 12.1219V9.97813C17 9.63122 16.7188 9.35 16.3719 9.35C16.094 9.35 15.8523 9.16603 15.7522 8.90682C14.8917 6.67938 12.7305 5.1 10.2 5.1C9.73056 5.1 9.35 4.71944 9.35 4.25V3.8862C9.35 3.45139 9.61242 3.06855 9.87188 2.71965C10.0829 2.43596 10.2077 2.08455 10.2077 1.70425C10.2077 0.763304 9.44435 0 8.50425 0C7.5633 0 6.8 0.763304 6.8 1.70425C6.8 2.0814 6.92285 2.43013 7.13079 2.71251ZM2.55 11.05C2.55 8.70315 4.45315 6.8 6.8 6.8H10.2C12.5469 6.8 14.45 8.70315 14.45 11.05V11.0611C14.45 13.3968 12.5469 15.3 10.2 15.3H6.8C4.45315 15.3 2.55 13.3968 2.55 11.05ZM11.05 10.2C10.5806 10.2 10.2 10.5806 10.2 11.05C10.2 11.5194 10.5806 11.9 11.05 11.9C11.5194 11.9 11.9 11.5194 11.9 11.05C11.9 10.5806 11.5194 10.2 11.05 10.2ZM5.95 10.2C5.48056 10.2 5.1 10.5806 5.1 11.05C5.1 11.5194 5.48056 11.9 5.95 11.9C6.41944 11.9 6.8 11.5194 6.8 11.05C6.8 10.5806 6.41944 10.2 5.95 10.2Z"
+        fill={color}
+      />
+      <path d="M7.13079 2.71251C7.38858 3.06257 7.65 3.44574 7.65 3.88048V4.25C7.65 4.71944 7.26944 5.1 6.8 5.1C4.26945 5.1 2.10828 6.67938 1.24781 8.90682C1.14768 9.16602 0.906004 9.35 0.62813 9.35C0.281223 9.35 0 9.63122 0 9.97813V12.1219C0 12.4688 0.281223 12.75 0.62813 12.75C0.906004 12.75 1.14768 12.934 1.24781 13.1932C2.10828 15.4206 4.26945 17 6.8 17H10.2C12.7305 17 14.8917 15.4206 15.7522 13.1932C15.8523 12.934 16.094 12.75 16.3719 12.75C16.7188 12.75 17 12.4688 17 12.1219V9.97813C17 9.63122 16.7188 9.35 16.3719 9.35C16.094 9.35 15.8523 9.16603 15.7522 8.90682C14.8917 6.67938 12.7305 5.1 10.2 5.1C9.73056 5.1 9.35 4.71944 9.35 4.25V3.8862C9.35 3.45139 9.61242 3.06855 9.87188 2.71965C10.0829 2.43596 10.2077 2.08455 10.2077 1.70425C10.2077 0.763304 9.44435 0 8.50425 0C7.5633 0 6.8 0.763304 6.8 1.70425C6.8 2.0814 6.92285 2.43013 7.13079 2.71251ZM2.55 11.05C2.55 8.70315 4.45315 6.8 6.8 6.8H10.2C12.5469 6.8 14.45 8.70315 14.45 11.05V11.0611C14.45 13.3968 12.5469 15.3 10.2 15.3H6.8C4.45315 15.3 2.55 13.3968 2.55 11.05ZM11.05 10.2C10.5806 10.2 10.2 10.5806 10.2 11.05C10.2 11.5194 10.5806 11.9 11.05 11.9C11.5194 11.9 11.9 11.5194 11.9 11.05C11.9 10.5806 11.5194 10.2 11.05 10.2ZM5.95 10.2C5.48056 10.2 5.1 10.5806 5.1 11.05C5.1 11.5194 5.48056 11.9 5.95 11.9C6.41944 11.9 6.8 11.5194 6.8 11.05C6.8 10.5806 6.41944 10.2 5.95 10.2Z" />
+    </g>
+  </svg>
+);
+export default SvgComponent;

src/assets/images/icons/SideDrawer/Storage.tsx

@@ -0,0 +1,9 @@
+const SvgComponent = ({ color }: { color: string }) => (
+  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8.5 16C6.26296 16 4.37037 15.6556 2.82222 14.9667C1.27407 14.2778 0.5 13.437 0.5 12.4444V3.55556C0.5 2.57778 1.28148 1.74074 2.84444 1.04444C4.40741 0.348148 6.29259 0 8.5 0C10.7074 0 12.5926 0.348148 14.1556 1.04444C15.7185 1.74074 16.5 2.57778 16.5 3.55556V12.4444C16.5 13.437 15.7259 14.2778 14.1778 14.9667C12.6296 15.6556 10.737 16 8.5 16ZM8.5 5.35556C9.81852 5.35556 11.1444 5.16667 12.4778 4.78889C13.8111 4.41111 14.5593 4.00741 14.7222 3.57778C14.5593 3.14815 13.8148 2.74074 12.4889 2.35556C11.163 1.97037 9.83333 1.77778 8.5 1.77778C7.15185 1.77778 5.82963 1.96667 4.53333 2.34444C3.23704 2.72222 2.48519 3.13333 2.27778 3.57778C2.48519 4.02222 3.23704 4.42963 4.53333 4.8C5.82963 5.17037 7.15185 5.35556 8.5 5.35556ZM8.5 9.77778C9.12222 9.77778 9.72222 9.74815 10.3 9.68889C10.8778 9.62963 11.4296 9.54445 11.9556 9.43333C12.4815 9.32222 12.9778 9.18519 13.4444 9.02222C13.9111 8.85926 14.337 8.67407 14.7222 8.46667V5.8C14.337 6.00741 13.9111 6.19259 13.4444 6.35556C12.9778 6.51852 12.4815 6.65556 11.9556 6.76667C11.4296 6.87778 10.8778 6.96296 10.3 7.02222C9.72222 7.08148 9.12222 7.11111 8.5 7.11111C7.87778 7.11111 7.27037 7.08148 6.67778 7.02222C6.08519 6.96296 5.52593 6.87778 5 6.76667C4.47407 6.65556 3.98148 6.51852 3.52222 6.35556C3.06296 6.19259 2.64815 6.00741 2.27778 5.8V8.46667C2.64815 8.67407 3.06296 8.85926 3.52222 9.02222C3.98148 9.18519 4.47407 9.32222 5 9.43333C5.52593 9.54445 6.08519 9.62963 6.67778 9.68889C7.27037 9.74815 7.87778 9.77778 8.5 9.77778ZM8.5 14.2222C9.18148 14.2222 9.87407 14.1704 10.5778 14.0667C11.2815 13.963 11.9296 13.8259 12.5222 13.6556C13.1148 13.4852 13.6111 13.2926 14.0111 13.0778C14.4111 12.863 14.6481 12.6444 14.7222 12.4222V10.2444C14.337 10.4519 13.9111 10.637 13.4444 10.8C12.9778 10.963 12.4815 11.1 11.9556 11.2111C11.4296 11.3222 10.8778 11.4074 10.3 11.4667C9.72222 11.5259 9.12222 11.5556 8.5 11.5556C7.87778 11.5556 7.27037 11.5259 6.67778 11.4667C6.08519 11.4074 5.52593 11.3222 5 11.2111C4.47407 11.1 3.98148 10.963 3.52222 10.8C3.06296 10.637 2.64815 10.4519 2.27778 10.2444V12.4444C2.35185 12.6667 2.58519 12.8815 2.97778 13.0889C3.37037 13.2963 3.86296 13.4852 4.45556 13.6556C5.04815 13.8259 5.7 13.963 6.41111 14.0667C7.12222 14.1704 7.81852 14.2222 8.5 14.2222Z"
+      fill={color}
+    />
+  </svg>
+);
+export default SvgComponent;

src/common/HelpData.tsx

@@ -1,6 +1,6 @@
 export interface HelpDataProps {
   heading: string;
-  link: string;
+  link?: string;
 }
 
 export const speedSendInfo: HelpDataProps = {
@@ -101,3 +101,15 @@ export const blockedContactsInfo: HelpDataProps = {
     'Glific allows you to block contacts who are sending unwanted or inappropriate messages, ensuring a positive experience for both your beneficiaries and staff.',
   link: 'https://glific.github.io/docs/docs/Product%20Features/Others/All%20product%20features/#block-contacts', // Replace with the actual Glific documentation link
 };
+
+export const assistantsInfo: HelpDataProps = {
+  heading:
+    'Assistants can call OpenAI’s models with specific instructions to tune their personality and capabilities. Assistants can access multiple tools in parallel. Assistants can access files in several formats as part of their creation. When using tools, Assistants can also create files (e.g., images, spreadsheets, etc) and cite files they reference in the Messages they create.',
+  link: 'https://glific.github.io/docs/docs/Product%20Features/Flows/Flow%20Variables/Flow%20variables%20vs%20Contact%20variables', // Replace with the actual Glific documentation link
+};
+
+export const storageInfo: HelpDataProps = {
+  heading:
+    'Assistants can call OpenAI’s models with specific instructions to tune their personality and capabilities. Assistants can access multiple tools in parallel. Assistants can access files in several formats as part of their creation. When using tools, Assistants can also create files (e.g., images, spreadsheets, etc) and cite files they reference in the Messages they create.',
+  link: 'https://glific.github.io/docs/docs/Product%20Features/Flows/Flow%20Variables/Flow%20variables%20vs%20Contact%20variables', // Replace with the actual Glific documentation link
+};

src/components/UI/Heading/Heading.module.css

@@ -40,3 +40,9 @@
   cursor: pointer;
   margin-top: 10px;
 }
+
+.Button {
+  width: 100%;
+  display: flex;
+  column-gap: 5px;
+}

src/components/UI/Heading/Heading.tsx

@@ -2,16 +2,34 @@ import { useNavigate } from 'react-router-dom';
 import HelpIcon from '../HelpIcon/HelpIcon';
 import styles from './Heading.module.css';
 import BackIcon from 'assets/images/icons/BackIconFlow.svg?react';
+import { Button } from '../Form/Button/Button';
+import AddIcon from 'assets/images/add.svg?react';
 
 export interface HeadingProps {
   formTitle: string;
   helpData?: any;
   showHeaderHelp?: boolean;
   backLink?: string;
+  headerHelp?: string;
+  button?: {
+    show: boolean;
+    label: string;
+    action: any;
+    icon?: any;
+  };
 }
 
-export const Heading = ({ formTitle, helpData, showHeaderHelp = true, backLink }: HeadingProps) => {
+export const Heading = ({
+  formTitle,
+  helpData,
+  showHeaderHelp = true,
+  backLink,
+  headerHelp,
+  button,
+}: HeadingProps) => {
   const navigate = useNavigate();
+  const addIcon = <AddIcon className={styles.AddIcon} />;
+
   return (
     <div className={styles.Heading} data-testid="heading">
       <div className={styles.HeadingWrapper}>
@@ -24,10 +42,23 @@ export const Heading = ({ formTitle, helpData, showHeaderHelp = true, backLink }
             {helpData ? <HelpIcon helpData={helpData} /> : ''}
           </div>
           <div className={styles.TextHeading}>
-            {showHeaderHelp ? `Please enter below details.` : ''}
+            {showHeaderHelp ? headerHelp || `Please enter below details.` : ''}
           </div>
         </div>
       </div>
+      {button && button.show && (
+        <div>
+          <Button
+            className={styles.Button}
+            color="primary"
+            variant="contained"
+            onClick={() => button.action && button.action()}
+            data-testid="headingButton"
+          >
+            {button.icon || addIcon} {button.label}
+          </Button>
+        </div>
+      )}
     </div>
   );
 };

src/components/UI/HelpIcon/HelpIcon.tsx

@@ -26,14 +26,16 @@
             <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/components/UI/Layout/Navigation/SideMenus/SideMenus.module.css

@@ -104,3 +104,11 @@
   margin-left: -10px;
   padding-left: 25px;
 }
+
+.New {
+  background-color: #119656;
+  font-size: 10px;
+  border-radius: 4px;
+  padding: 2px 6px;
+  color: #fff;
+}

src/components/UI/Layout/Navigation/SideMenus/SideMenus.tsx

@@ -212,6 +212,7 @@ const SideMenus = ({ opened }: SideMenusProps) => {
               primary={t(menu.title as any)}
             />
           )}
+          {menu.new && <span className={styles.New}>{'New'}</span>}
         </ListItemButton>
       );
 

src/components/UI/ListIcon/ListIcon.tsx

@@ -28,6 +28,9 @@ import WaChatIcon from 'assets/images/icons/SideDrawer/WaGroupChat';
 import WaCollectionIcon from 'assets/images/icons/SideDrawer/WaGroupCollection';
 import WaGroupIcon from 'assets/images/icons/SideDrawer/WhatsAppGroupIcon';
 import KnowledgeBaseIcon from 'assets/images/icons/SideDrawer/KnowledgeBaseIcon';
+import AIToolkit from 'assets/images/icons/SideDrawer/AIToolkit';
+import Assistant from 'assets/images/icons/SideDrawer/Assistant';
+import Storage from 'assets/images/icons/SideDrawer/Storage';
 import styles from './ListIcon.module.css';
 import FiberNewIcon from '@mui/icons-material/FiberNew';
 import { Badge } from '@mui/material';
@@ -73,6 +76,9 @@ export const ListIcon = ({ icon = '', selected = false, count }: ListIconProps)
     waGroupChat: WaChatIcon,
     waGroup: WaGroupIcon,
     knowledgeBase: KnowledgeBaseIcon,
+    aiToolkit: AIToolkit,
+    assistant: Assistant,
+    storage: Storage,
   };
 
   const iconImage = stringsToIcons[icon] && (

src/config/menu.ts

@@ -17,6 +17,7 @@ export interface Menu {
   url?: string;
   show?: boolean;
   children?: Menu[];
+  new?: boolean;
 }
 
 // define all the menus in the system
@@ -97,6 +98,30 @@ const menus = (): Menu[] => [
     ],
     roles: managerLevel,
   },
+  {
+    title: 'AI Toolkit',
+    path: '/ai/assistants',
+    icon: 'aiToolkit',
+    type: 'sideDrawer',
+    roles: allRoles,
+    new: true,
+    children: [
+      {
+        title: 'Assistants',
+        path: '/ai/assistants',
+        icon: 'assistant',
+        type: 'sideDrawer',
+        roles: allRoles,
+      },
+      {
+        title: 'Vector Storage',
+        path: '/ai/storage',
+        icon: 'storage',
+        type: 'sideDrawer',
+        roles: allRoles,
+      },
+    ],
+  },
   {
     title: 'Support tickets',
     path: '/ticket',

src/containers/AIToolkit/Assistant/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;
+}