notifications on tabs bar'

langflow/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx

@@ -22,7 +22,7 @@ export default function SingleAlert({ dropItem, removeAlert}:SingleAlertComponen
       leaveTo={"transform translate-x-[-100%]"}
     >
         {type === "error"? 
-          <div className="flex bg-red-50 rounded-md p-4 mb-2" key={dropItem.id}>
+          <div className="flex bg-red-50 rounded-md p-3 mb-2 mx-2" key={dropItem.id}>
             <div className="flex-shrink-0">
               <XCircleIcon
                 className="h-5 w-5 text-red-400"
@@ -61,7 +61,7 @@ export default function SingleAlert({ dropItem, removeAlert}:SingleAlertComponen
             </div>
           </div>
         :(type === "notice" ?
-          <div className="flex rounded-md p-4 bg-blue-50 mb-2" key={dropItem.id}>
+          <div className="flex rounded-md bg-blue-50 p-3 mb-2 mx-2" key={dropItem.id}>
             <div className="flex-shrink-0">
               <InformationCircleIcon
                 className="h-5 w-5 text-blue-400"
@@ -99,7 +99,7 @@ export default function SingleAlert({ dropItem, removeAlert}:SingleAlertComponen
             </div>
           </div>
         :
-        <div className="flex bg-green-50 p-4 mb-2" key={dropItem.id}>
+        <div className="flex bg-green-50 p-3 mb-2 mx-2 rounded-md" key={dropItem.id}>
             <div className="flex-shrink-0">
               <CheckCircleIcon
                 className="h-5 w-5 text-green-400"

langflow/frontend/src/alerts/alertDropDown/index.tsx

@@ -3,54 +3,45 @@ import { alertContext } from "../../contexts/alertContext";
 import {
   XMarkIcon,
 } from "@heroicons/react/24/solid";
-import { Transition } from "@headlessui/react";
 import { TrashIcon } from "@heroicons/react/24/outline";
 import SingleAlert from "./components/singleAlertComponent";
 import { AlertDropdownType } from "../../types/alerts";
+import { PopUpContext } from "../../contexts/popUpContext";
 
 
 
-export default function AlertDropdown({closeFunction, open}: AlertDropdownType) {
+export default function AlertDropdown({}: AlertDropdownType) {
   const {
     notificationList,
     clearNotificationList,
     removeFromNotificationList,
   } = useContext(alertContext);
-
+  const {closePopUp} =  useContext(PopUpContext)
   
 
   return (
-    <Transition
+      <div className="z-10 py-2 pb-4 rounded-md bg-white ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[14rem] h-[28rem] flex flex-col">
-      show={open}
+        <div className="flex pl-3 flex-row justify-between text-md font-medium text-gray-800">
-      enter="transition ease-out duration-100"
-      enterFrom="transform opacity-0 scale-95"
-      enterTo="transform opacity-100 scale-100"
-      leave="transition ease-in duration-75"
-      leaveFrom="transform opacity-100 scale-100"
-      leaveTo="transform opacity-0 scale-95"
-    >
-      <div className="z-10 px-8 py-6 pb-8 rounded-md bg-white ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[36rem] h-[40rem] flex flex-col">
-        <div className="flex flex-row justify-between text-md font-medium text-gray-800">
           Notifications
-          <div className="flex gap-4">
+          <div className="flex gap-3 pr-2 ">
             <button
               className="hover:text-black"
-              onClick={() => {closeFunction(); setTimeout(clearNotificationList, 100)}}
+              onClick={() => {closePopUp(); setTimeout(clearNotificationList, 100)}}
             >
               <TrashIcon className="w-5 h-5" />
             </button>
             <button
               className="hover:text-black"
-              onClick={closeFunction}
+              onClick={closePopUp}
             >
               <XMarkIcon className="h-6 w-6" />
             </button>
           </div>
         </div>
-        <div className="mt-6 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide">
+        <div className="mt-2 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide">
           {notificationList.length !== 0 ? 
           notificationList.map((alertItem, index) => (
-            <SingleAlert key={index} dropItem={alertItem} removeAlert={removeFromNotificationList} />
+            <SingleAlert key={alertItem.id} dropItem={alertItem} removeAlert={removeFromNotificationList} />
           ))
         :
         <div className="h-full w-full pb-16 text-gray-500 flex justify-center items-center">
@@ -59,6 +50,5 @@ export default function AlertDropdown({closeFunction, open}: AlertDropdownType)
         }
         </div>
       </div>
-    </Transition>
   );
 }

langflow/frontend/src/components/HeaderComponent/index.tsx

@@ -20,6 +20,7 @@ export default function Header(){
     preferX: "left",
     triggerOffset: 10,
     containerOffset: 12,
+    overflowContainer:false,
     arrowOffset: 4,
   })
   const {dark, setDark} = useContext(darkContext);
@@ -42,7 +43,7 @@ export default function Header(){
                   {notificationCenter&&<div className='absolute top-[2px] w-2 h-2 rounded-full bg-red-600 right-[7px]'></div>}
                   
                   <BellIcon className="h-6 w-6" aria-hidden="true" />
-                </button>{renderLayer(<div {...layerProps}><AlertDropdown closeFunction={()=>setIsOpen(false)} open={isOpen}></AlertDropdown></div>)}
+                </button>{renderLayer(<div {...layerProps}></div>)}
               </span>
               </div>
             </div>

langflow/frontend/src/contexts/index.tsx

@@ -12,13 +12,13 @@ export default function ContextWrapper({ children }:{children:ReactNode}) {
 		<>
 			<DarkProvider>
 				<LocationProvider>
+					<AlertProvider>
 						<PopUpProvider>
 							<TypesProvider>
-              <TabsProvider>
+								<TabsProvider>{children}</TabsProvider>
-                <AlertProvider>{children}</AlertProvider>
-              </TabsProvider>
 							</TypesProvider>
 						</PopUpProvider>
+					</AlertProvider>
 				</LocationProvider>
 			</DarkProvider>
 		</>

langflow/frontend/src/pages/FlowPage/components/tabComponent/index.tsx

@@ -29,7 +29,7 @@ export default function TabComponent({ selected, flow, onClick }:{flow:FlowType,
 						</button>
 					</div>
 				) : (
-					<div className="bg-white dark:text-white dark:bg-gray-700 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-gray-600 px-4 py-1.5 rounded-t-xl -ml-px">
+					<div className="bg-white dark:text-white dark:bg-gray-700 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-gray-600 px-4 py-1 rounded-t-xl -ml-px">
 						{isRename ? (
 							<input
 								autoFocus

langflow/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx

@@ -1,11 +1,21 @@
-import { useContext, useEffect } from "react";
+import { useContext, useEffect, useState } from "react";
 import { ReactFlowProvider } from "reactflow";
 import TabComponent from "../tabComponent";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import FlowPage from "../..";
+import { darkContext } from "../../../../contexts/darkContext";
+import { BellIcon, MoonIcon, SunIcon } from "@heroicons/react/24/outline";
+import { PopUpContext } from "../../../../contexts/popUpContext";
+import AlertDropdown from "../../../../alerts/alertDropDown";
+import { alertContext } from "../../../../contexts/alertContext";
 
 export default function TabsManagerComponent() {
 	const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext);
+	const { openPopUp } = useContext(PopUpContext);
+	const AlertWidth = 224
+	const { dark, setDark } = useContext(darkContext);
+	const [isOpen, setIsOpen] = useState(false);
+	const {notificationCenter, setNotificationCenter} = useContext(alertContext)
 	useEffect(() => {
 		//create the first flow
 		if (flows.length === 0) {
@@ -33,6 +43,32 @@ export default function TabsManagerComponent() {
 					selected={false}
 					flow={null}
 				/>
+				<div className="ml-auto mr-2 flex gap-3">
+					<button
+						className="text-gray-400 hover:text-gray-500 "
+						onClick={() => {
+							setDark(!dark);
+						}}
+					>
+						{dark ? (
+							<SunIcon className="h-5 w-5" />
+						) : (
+							<MoonIcon className="h-5 w-5" />
+						)}
+					</button>
+					<button
+						className="text-gray-400 hover:text-gray-500 relative"
+						onClick={(event: React.MouseEvent<HTMLElement>) => {
+							setNotificationCenter(false)
+							const top = (event.target as Element).getBoundingClientRect().top
+							const left = (event.target as Element).getBoundingClientRect().left
+							openPopUp(<div className="z-10 absolute" style={{top:top+20, left:left-AlertWidth}}><AlertDropdown/></div>)
+						}}
+					>
+						{notificationCenter&&<div className='absolute w-1.5 h-1.5 rounded-full bg-red-600 right-[3px]'></div>}
+						<BellIcon className="h-5 w-5" aria-hidden="true" />
+					</button>
+				</div>
 			</div>
 			<div className="w-full h-full">
 				<ReactFlowProvider>

langflow/frontend/src/types/alerts/index.ts

@@ -3,8 +3,6 @@ export type NoticeAlertType = {title:string,link:string,id:string,removeAlert:(i
 export type SuccessAlertType = {title:string,id:string, removeAlert:(id:string)=>void}
 export type SingleAlertComponentType = {dropItem:AlertItemType,removeAlert:(index:string)=>void}
 export type AlertDropdownType = {
-    closeFunction: () => void;
-    open?: boolean;
   };
 export type AlertItemType = {
     type: "notice" | "error" | "success";