Merge branch 'master' of github.com:glific/glific-frontend into enhan…

…cement/erp

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/common/HelpData.tsx

@@ -1,6 +1,6 @@
 export interface HelpDataProps {
   heading: string;
-  link: string;
+  link?: string;
 }
 
 export const speedSendInfo: HelpDataProps = {
@@ -101,3 +101,9 @@ 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
+};

src/components/UI/Form/AutoComplete/AutoComplete.tsx

@@ -113,6 +113,7 @@ export const AutoComplete = ({
       }
       return [];
     }
+
     return field.value;
   })();
 

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,35 @@ 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;
+    loading?: boolean;
+  };
 }
 
-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 +43,24 @@ 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"
+            loading={button.loading}
+          >
+            {button.icon || addIcon} {button.label}
+          </Button>
+        </div>
+      )}
     </div>
   );
 };

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/components/UI/Layout/Navigation/SideMenus/SideMenus.module.css

@@ -104,3 +104,45 @@
   margin-left: -10px;
   padding-left: 25px;
 }
+
+.New {
+  background-color: #119656;
+  font-size: 10px;
+  border-radius: 4px;
+  padding: 2px 6px;
+  color: #fff;
+  animation: animation 1s ease-in-out;
+}
+
+@keyframes animation {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  10%,
+  20% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+  }
+
+  30%,
+  50%,
+  70%,
+  90% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+    transform: scale3d(1.3, 1.3, 1.3) rotate3d(0, 0, 1, 3deg);
+  }
+
+  40%,
+  60%,
+  80% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}

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,7 @@ 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 Assistant from 'assets/images/icons/SideDrawer/Assistant';
 import styles from './ListIcon.module.css';
 import FiberNewIcon from '@mui/icons-material/FiberNew';
 import { Badge } from '@mui/material';
@@ -73,6 +74,7 @@ export const ListIcon = ({ icon = '', selected = false, count }: ListIconProps)
     waGroupChat: WaChatIcon,
     waGroup: WaGroupIcon,
     knowledgeBase: KnowledgeBaseIcon,
+    assistant: Assistant,
   };
 
   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
@@ -164,6 +165,14 @@ const menus = (): Menu[] => [
     showBadge: true,
     roles: managerLevel,
   },
+  {
+    title: 'Assistants',
+    path: '/assistants',
+    icon: 'assistant',
+    type: 'sideDrawer',
+    roles: allRoles,
+    new: true,
+  },
   {
     title: 'Manage',
     path: '/collection',