chat lock ready

langflow/frontend/src/App.tsx

@@ -8,7 +8,6 @@ import SuccessAlert from "./alerts/success";
 import ExtraSidebar from "./components/ExtraSidebarComponent";
 import { alertContext } from "./contexts/alertContext";
 import { locationContext } from "./contexts/locationContext";
-import Header from "./components/HeaderComponent";
 import TabsManagerComponent from "./pages/FlowPage/components/tabsManagerComponent";
 
 export default function App() {

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

@@ -25,13 +25,13 @@ export default function AlertDropdown({}: AlertDropdownType) {
           Notifications
           <div className="flex gap-3 pr-2 ">
             <button
-              className="hover:text-black"
+              className="hover:text-red-500"
               onClick={() => {closePopUp(); setTimeout(clearNotificationList, 100)}}
             >
               <TrashIcon className="w-5 h-5" />
             </button>
             <button
-              className="hover:text-black"
+              className="hover:text-red-500"
               onClick={closePopUp}
             >
               <XMarkIcon className="h-6 w-6" />

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

@@ -1,53 +0,0 @@
-import { useContext, useState } from 'react'
-import {
-    BellIcon,
-    MoonIcon,
-    SunIcon,
-  } from '@heroicons/react/24/outline'
-import { alertContext } from '../../contexts/alertContext'
-import { useLayer } from 'react-laag'
-import AlertDropdown from '../../alerts/alertDropDown'
-import { darkContext } from '../../contexts/darkContext'
-
-export default function Header(){
-  const {notificationCenter, setNotificationCenter} = useContext(alertContext)
-  const [isOpen,setIsOpen] = useState(false)
-  const {layerProps,renderLayer, triggerProps} = useLayer({
-    isOpen,
-    placement: "left-start",
-    auto:true,
-    onOutsideClick:()=>setIsOpen(false),
-    preferX: "left",
-    triggerOffset: 10,
-    containerOffset: 12,
-    overflowContainer:false,
-    arrowOffset: 4,
-  })
-  const {dark, setDark} = useContext(darkContext);
-    return (
-    <header className="relative flex h-16 w-full shrink-0 items-center bg-white dark:bg-gray-800">
-        {/* Desktop nav area */}
-        <div className="flex min-w-0 flex-1  flex-row-reverse items-center justify-between">
-          <div className="ml-10 flex shrink-0 items-center space-x-10 pr-4">
-            <div className="flex items-center space-x-8">
-              <span className="inline-flex gap-6">
-                <button className="text-gray-400 hover:text-gray-500 " onClick={()=>{setDark(!dark)}}>
-                  {dark ?
-                    <SunIcon className="h-6 w-6" />
-                  :
-                    <MoonIcon className="h-6 w-6" />
-                  }
-                </button>
-                <button type="button" {...triggerProps} className="-mx-1 rounded-full p-1 text-gray-400 hover:text-gray-500 relative" onClick={()=>{setNotificationCenter(false);setIsOpen(true)}}>
-                  <span className="sr-only">View notifications</span>
-                  {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}></div>)}
-              </span>
-              </div>
-            </div>
-          </div>
-        </header>
-    )
-}

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

@@ -1,13 +1,14 @@
 import { Transition } from "@headlessui/react";
 import {
 	Bars3CenterLeftIcon,
+	LockClosedIcon,
 	PaperAirplaneIcon,
 	XMarkIcon,
 } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useRef, useState } from "react";
 import { sendAll } from "../../controllers/NodesServices";
 import { alertContext } from "../../contexts/alertContext";
-import { nodeColors } from "../../utils";
+import { classNames, nodeColors } from "../../utils";
 import { TabsContext } from "../../contexts/tabsContext";
 import { ChatType } from "../../types/chat";
 
@@ -16,6 +17,7 @@ const _ = require("lodash");
 export default function Chat({ flow, reactFlowInstance }: ChatType) {
 	const { updateFlow } = useContext(TabsContext);
 	const [saveChat, setSaveChat] = useState(false);
+	const [lockChat, setLockChat] = useState(false);
 	const [open, setOpen] = useState(true);
 	const [chatValue, setChatValue] = useState("");
 	const [chatHistory, setChatHistory] = useState(flow.chat);
@@ -69,15 +71,22 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
 	function sendMessage() {
 		if (chatValue !== "") {
 			if (validateNodes()) {
+				setLockChat(true);
 				let message = chatValue;
 				setChatValue("");
 				addChatHistory(message, true);
 				console.log({ ...reactFlowInstance.toObject(), message, chatHistory });
-				sendAll({ ...reactFlowInstance.toObject(), message, chatHistory }).then(
+
-					(r) => {
+				sendAll({ ...reactFlowInstance.toObject(), message, chatHistory })
+					.then((r) => {
+						console.log(r.data);
 						addChatHistory(r.data.result, false);
-					}
+						setLockChat(false);
-				);
+					})
+					.catch((error) => {
+						setErrorData({ title: error.message ?? "unknow error" });
+						setLockChat(false);
+					});
 			} else {
 				setErrorData({
 					title: "Error sending message",
@@ -106,9 +115,12 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
 			>
 				<div className="w-[340px] absolute bottom-0 right-6">
 					<div className="border dark:border-gray-700 h-full rounded-xl rounded-b-none bg-white dark:bg-gray-800 shadow">
-						<div onClick={() => {
+						<div
-									setOpen(false);
+							onClick={() => {
-								}} className="flex justify-between cursor-pointer items-center px-5 py-2 border-b dark:border-b-gray-700">
+								setOpen(false);
+							}}
+							className="flex justify-between cursor-pointer items-center px-5 py-2 border-b dark:border-b-gray-700"
+						>
 							<div className="flex gap-3 text-lg dark:text-white font-medium items-center">
 								<Bars3CenterLeftIcon
 									className="h-5 w-5 mt-1"
@@ -144,24 +156,35 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
 							<div className="relative w-full mt-1 rounded-md shadow-sm">
 								<input
 									onKeyDown={(event) => {
-										if (event.key === "Enter") {
+										if (event.key === "Enter" && !lockChat) {
 											sendMessage();
 										}
 									}}
 									type="text"
+									disabled={lockChat}
 									value={chatValue}
 									onChange={(e) => {
 										setChatValue(e.target.value);
 									}}
-									className="form-input block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white pr-10 sm:text-sm"
+									className={classNames(
+										lockChat ? "bg-gray-500" : "dark:bg-gray-700",
+										"form-input block w-full rounded-md border-gray-300 dark:border-gray-600  dark:text-white pr-10 sm:text-sm"
+									)}
 									placeholder="Send a message..."
 								/>
 								<div className="absolute inset-y-0 right-0 flex items-center pr-3">
-									<button onClick={() => sendMessage()}>
+									<button disabled={lockChat} onClick={() => sendMessage()}>
-										<PaperAirplaneIcon
+										{lockChat ? (
-											className="h-5 w-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+											<LockClosedIcon
-											aria-hidden="true"
+												className="h-5 w-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
-										/>
+												aria-hidden="true"
+											/>
+										) : (
+											<PaperAirplaneIcon
+												className="h-5 w-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+												aria-hidden="true"
+											/>
+										)}
 									</button>
 								</div>
 							</div>
@@ -180,7 +203,7 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
 				leaveTo="translate-y-96"
 			>
 				<div className="absolute bottom-0 right-6">
-					<div className="border flex justify-center align-center py-2 px-4 rounded-xl rounded-b-none bg-white dark:bg-gray-800 dark:border-gray-600 dark:text-white shadow">
+					<div className="border flex justify-center align-center py-1 px-3 rounded-xl rounded-b-none bg-white dark:bg-gray-800 dark:border-gray-600 dark:text-white shadow">
 						<button
 							onClick={() => {
 								setOpen(true);
@@ -188,7 +211,7 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
 						>
 							<div className="flex gap-3 text-lg font-medium items-center">
 								<Bars3CenterLeftIcon
-									className="h-8 w-8 mt-1"
+									className="h-6 w-6 mt-1"
 									style={{ color: nodeColors["chat"] }}
 								/>
 								Chat

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

@@ -14,7 +14,6 @@ export default function TabsManagerComponent() {
 	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

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

@@ -2,8 +2,7 @@ export type ErrorAlertType = {title:string,list:Array<string>,id:string,removeAl
 export type NoticeAlertType = {title:string,link:string,id:string,removeAlert:(id:string)=>void}
 export type SuccessAlertType = {title:string,id:string, removeAlert:(id:string)=>void}
 export type SingleAlertComponentType = {dropItem:AlertItemType,removeAlert:(index:string)=>void}
-export type AlertDropdownType = {
+export type AlertDropdownType = {};
-  };
 export type AlertItemType = {
     type: "notice" | "error" | "success";
     title: string;