Merge branch 'dev' of https://github.com/logspace-ai/langflow into dev

langflow/backend/langflow_backend/interface/signature.py

@@ -86,7 +86,7 @@ def get_tool_signature(name: str):
     type_dict = {
         "str": {
             "type": "str",
-            "required": False,
+            "required": True,
             "list": False,
             "show": True,
             "placeholder": "",
@@ -111,9 +111,15 @@ def get_tool_signature(name: str):
         params = []
 
     template = {
-        param: (type_dict[param] if param == "llm" else type_dict["str"])
+        param: (type_dict[param].copy() if param == "llm" else type_dict["str"].copy())
         for param in params
-    }  # type: Dict[str, Any]
+    }
+
+    # Remove required from aiosession
+    if "aiosession" in template.keys():
+        template["aiosession"]["required"] = False
+        template["aiosession"]["show"] = False
+
     template["_type"] = tool_type
 
     return {

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

@@ -1,14 +1,22 @@
 import { Transition } from "@headlessui/react";
 import { XCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useEffect, useState } from "react";
-import { ErrorAlertType} from "../../types/alerts";
+import { ErrorAlertType } from "../../types/alerts";
 
-export default function ErrorAlert({ title, list = [], id, removeAlert }:ErrorAlertType) {
+export default function ErrorAlert({
+	title,
+	list = [],
+	id,
+	removeAlert,
+}: ErrorAlertType) {
 	const [show, setShow] = useState(true);
 	useEffect(() => {
-    if(show){
+		if (show) {
 			setTimeout(() => {
-        setShow(false); setTimeout(() => {removeAlert(id);}, 500);
+				setShow(false);
+				setTimeout(() => {
+					removeAlert(id);
+				}, 500);
 			}, 5000);
 		}
 	}, [id, removeAlert, show]);
@@ -24,38 +32,32 @@ export default function ErrorAlert({ title, list = [], id, removeAlert }:ErrorAl
 			leaveFrom={"transform translate-x-0"}
 			leaveTo={"transform translate-x-[-100%]"}
 		>
-      <div className="rounded-md w-96 mt-6 shadow-xl bg-red-50 p-4">
+			<div
+				onClick={() => {
+					setShow(false);
+					setTimeout(() => {
+						removeAlert(id);
+					}, 500);
+				}}
+				className="rounded-md w-96 mt-6 shadow-xl bg-red-50 p-4 cursor-pointer"
+			>
 				<div className="flex">
 					<div className="flex-shrink-0">
 						<XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
 					</div>
 					<div className="ml-3">
 						<h3 className="text-sm font-medium text-red-800">{title}</h3>
-            {list.length !== 0 
+						{list.length !== 0 ? (
-            ?
 							<div className="mt-2 text-sm text-red-700">
 								<ul className="list-disc space-y-1 pl-5">
 									{list.map((item, index) => (
-                <li key={index} >{item}</li>
+										<li key={index}>{item}</li>
 									))}
 								</ul>
 							</div>
-          :
+						) : (
 							<></>
-          }
+						)}
-            
-          </div>
-          <div className="ml-auto pl-3">
-            <div className="-mx-1.5 -my-1.5">
-              <button
-                type="button"
-                onClick={()=>{setShow(false); setTimeout(() => {removeAlert(id);}, 500);}}
-                className="inline-flex rounded-md bg-red-50 p-1.5 text-red-500"
-              >
-                <span className="sr-only">Dismiss</span>
-                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
-              </button>
-            </div>
 					</div>
 				</div>
 			</div>

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

@@ -4,12 +4,20 @@ import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { NoticeAlertType } from "../../types/alerts";
 
-export default function NoticeAlert({ title, link = "", id, removeAlert }:NoticeAlertType) {
+export default function NoticeAlert({
+	title,
+	link = "",
+	id,
+	removeAlert,
+}: NoticeAlertType) {
 	const [show, setShow] = useState(true);
 	useEffect(() => {
-    if(show){
+		if (show) {
 			setTimeout(() => {
-        setShow(false); setTimeout(() => {removeAlert(id);}, 500);
+				setShow(false);
+				setTimeout(() => {
+					removeAlert(id);
+				}, 500);
 			}, 5000);
 		}
 	}, [id, removeAlert, show]);
@@ -23,7 +31,13 @@ export default function NoticeAlert({ title, link = "", id, removeAlert }:Notice
 			leaveFrom={"transform translate-x-0"}
 			leaveTo={"transform translate-x-[-100%]"}
 		>
-      <div className="rounded-md w-96 mt-6 shadow-xl bg-blue-50 p-4">
+			<div
+				onClick={() => {
+					setShow(false);
+					removeAlert(id);
+				}}
+				className="rounded-md w-96 mt-6 shadow-xl bg-blue-50 p-4"
+			>
 				<div className="flex">
 					<div className="flex-shrink-0">
 						<InformationCircleIcon
@@ -34,31 +48,18 @@ export default function NoticeAlert({ title, link = "", id, removeAlert }:Notice
 					<div className="ml-3 flex-1 md:flex md:justify-between">
 						<p className="text-sm text-blue-700">{title}</p>
 						<p className="mt-3 text-sm md:mt-0 md:ml-6">
-              {link !== "" 
+							{link !== "" ? (
-              ?
 								<Link
 									to={link}
 									className="whitespace-nowrap font-medium text-blue-700 hover:text-blue-600"
 								>
 									Details
 								</Link>
-            :
+							) : (
 								<></>
-            }
+							)}
 						</p>
 					</div>
-          <div className="ml-auto pl-3">
-            <div className="-mx-1.5 -my-1.5">
-              <button
-                type="button"
-                onClick={()=>{setShow(false); removeAlert(id);}}
-                className="inline-flex rounded-md bg-blue-50 p-1.5 text-blue-500"
-              >
-                <span className="sr-only">Dismiss</span>
-                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
-              </button>
-            </div>
-          </div>
 				</div>
 			</div>
 		</Transition>

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

@@ -3,12 +3,19 @@ import { CheckCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useEffect, useState } from "react";
 import { SuccessAlertType } from "../../types/alerts";
 
-export default function SuccessAlert({ title, id, removeAlert }:SuccessAlertType) {
+export default function SuccessAlert({
+	title,
+	id,
+	removeAlert,
+}: SuccessAlertType) {
 	const [show, setShow] = useState(true);
 	useEffect(() => {
-    if(show){
+		if (show) {
 			setTimeout(() => {
-        setShow(false); setTimeout(() => {removeAlert(id);}, 500);
+				setShow(false);
+				setTimeout(() => {
+					removeAlert(id);
+				}, 500);
 			}, 5000);
 		}
 	}, [id, removeAlert, show]);
@@ -22,7 +29,13 @@ export default function SuccessAlert({ title, id, removeAlert }:SuccessAlertType
 			leaveFrom={"transform translate-x-0"}
 			leaveTo={"transform translate-x-[-100%]"}
 		>
-      <div className="rounded-md w-96 mt-6 shadow-xl bg-green-50 p-4">
+			<div
+				onClick={() => {
+					setShow(false);
+					removeAlert(id);
+				}}
+				className="rounded-md w-96 mt-6 shadow-xl bg-green-50 p-4"
+			>
 				<div className="flex">
 					<div className="flex-shrink-0">
 						<CheckCircleIcon
@@ -33,18 +46,6 @@ export default function SuccessAlert({ title, id, removeAlert }:SuccessAlertType
 					<div className="ml-3">
 						<p className="text-sm font-medium text-green-800">{title}</p>
 					</div>
-          <div className="ml-auto pl-3">
-            <div className="-mx-1.5 -my-1.5">
-              <button
-                type="button"
-                onClick={()=>{setShow(false); removeAlert(id);}}
-                className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500"
-              >
-                <span className="sr-only">Dismiss</span>
-                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
-              </button>
-            </div>
-          </div>
 				</div>
 			</div>
 		</Transition>

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

@@ -147,7 +147,7 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
 									clearChat();
 								}}
 							>
-								clear
+								Clear
 							</button>
 						</div>
 						<div className="w-full h-[400px] flex gap-3 mb-auto overflow-y-auto scrollbar-hide flex-col bg-gray-50 dark:bg-gray-900 p-3 py-5">

langflow/frontend/src/contexts/tabsContext.tsx

@@ -1,7 +1,8 @@
-import { createContext, useEffect, useState, useRef, ReactNode } from "react";
+import { createContext, useEffect, useState, useRef, ReactNode, useContext } from "react";
 import { FlowType } from "../types/flow";
 import { TabsContextType } from "../types/tabs";
 import { normalCaseToSnakeCase } from "../utils";
+import { alertContext } from "./alertContext";
 
 const TabsContextInitialValue: TabsContextType = {
 	tabIndex: 0,
@@ -20,6 +21,7 @@ export const TabsContext = createContext<TabsContextType>(
 );
 
 export function TabsProvider({ children }: { children: ReactNode }) {
+	const {setNoticeData} = useContext(alertContext)
 	const [tabIndex, setTabIndex] = useState(0);
 	const [flows, setFlows] = useState<Array<FlowType>>([]);
 	const [id, setId] = useState(0);
@@ -66,6 +68,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 
 		// simulate a click on the link element to trigger the download
 		link.click();
+		setNoticeData({title:"Warning: Critical data, including API keys, in JSON file. Keep secure and do not share."})
 	}
 
 	/**