bug on chat solved

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

@@ -1,54 +1,78 @@
-import { useContext } from "react";
+import { useContext, useEffect, useRef } from "react";
 import { alertContext } from "../../contexts/alertContext";
-import {
+import { XMarkIcon } from "@heroicons/react/24/solid";
-  XMarkIcon,
-} from "@heroicons/react/24/solid";
 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({}: AlertDropdownType) {
-  const {
+	const { closePopUp } = useContext(PopUpContext);
-    notificationList,
+	const componentRef = useRef<HTMLDivElement>(null);
-    clearNotificationList,
-    removeFromNotificationList,
-  } = useContext(alertContext);
-  const {closePopUp} =  useContext(PopUpContext)
 
+	useEffect(() => {
+		function handleClickOutside(event: MouseEvent) {
+			if (
+				componentRef.current &&
+				!componentRef.current.contains(event.target as Node)
+			) {
+        console.log(event)
+				closePopUp();
+			}
+		}
 
-  return (
+		// Bind the event listener
-      <div className="z-10 py-3 pb-4 rounded-md bg-white ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[16rem] h-[28rem] flex flex-col">
+		document.addEventListener("mousedown", handleClickOutside);
-        <div className="flex pl-3 flex-row justify-between text-md font-medium text-gray-800">
+
-          Notifications
+		// Cleanup the event listener when the component is unmounted
-          <div className="flex gap-2 pr-3 ">
+		return () => {
-            <button
+			document.removeEventListener("mousedown", handleClickOutside);
-              className="hover:text-red-500"
+		};
-              onClick={() => {closePopUp(); setTimeout(clearNotificationList, 100)}}
+	}, [componentRef]);
-            >
+
-              <TrashIcon className="w-[1.1rem] h-[1.1rem]" />
+	const {
-            </button>
+		notificationList,
-            <button
+		clearNotificationList,
-              className="hover:text-red-500"
+		removeFromNotificationList,
-              onClick={closePopUp}
+	} = useContext(alertContext);
-            >
+
-              <XMarkIcon className="h-5 w-5" />
+	return (
-            </button>
+		<div
-          </div>
+			ref={componentRef}
-        </div>
+			className="z-10 py-3 pb-4 rounded-md bg-white ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[16rem] h-[28rem] flex flex-col"
-        <div className="mt-2 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide">
+		>
-          {notificationList.length !== 0 ? 
+			<div className="flex pl-3 flex-row justify-between text-md font-medium text-gray-800">
-          notificationList.map((alertItem, index) => (
+				Notifications
-            <SingleAlert key={alertItem.id} dropItem={alertItem} removeAlert={removeFromNotificationList} />
+				<div className="flex gap-2 pr-3 ">
-          ))
+					<button
-        :
+						className="hover:text-red-500"
-        <div className="h-full w-full pb-16 text-gray-500 flex justify-center items-center">
+						onClick={() => {
-          No new notifications
+							closePopUp();
-          </div>
+							setTimeout(clearNotificationList, 100);
-        }
+						}}
-        </div>
+					>
-      </div>
+						<TrashIcon className="w-[1.1rem] h-[1.1rem]" />
-  );
+					</button>
+					<button className="hover:text-red-500" onClick={closePopUp}>
+						<XMarkIcon className="h-5 w-5" />
+					</button>
+				</div>
+			</div>
+			<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={alertItem.id}
+							dropItem={alertItem}
+							removeAlert={removeFromNotificationList}
+						/>
+					))
+				) : (
+					<div className="h-full w-full pb-16 text-gray-500 flex justify-center items-center">
+						No new notifications
+					</div>
+				)}
+			</div>
+		</div>
+	);
 }

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

@@ -16,9 +16,8 @@ import ChatMessage from "./chatMessage";
 const _ = require("lodash");
 
 export default function Chat({ flow, reactFlowInstance }: ChatType) {
-	const { updateFlow } = useContext(TabsContext);
+	const { updateFlow,lockChat,setLockChat,flows,tabIndex } = 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);
@@ -26,10 +25,15 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
 	const addChatHistory = (
 		message: string,
 		isSend: boolean,
-		thought?: string
+		thought?: string,
 	) => {
+		let tabsChange = false;
 		setChatHistory((old) => {
 			let newChat = _.cloneDeep(old);
+			if(flow.chat !==old){
+				tabsChange = true
+				return old
+			}
 			if (thought) {
 				newChat.push({ message, isSend, thought });
 			} else {
@@ -37,6 +41,15 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
 			}
 			return newChat;
 		});
+		if(tabsChange){
+			console.log(flow.chat)
+			if(thought){
+				updateFlow({..._.cloneDeep(flow),chat:[...flow.chat,{isSend,message,thought}]})
+			}
+			else{
+				updateFlow({..._.cloneDeep(flow),chat:[...flow.chat,{isSend,message}]})
+			}
+		}
 		setSaveChat((chat) => !chat);
 	};
 	useEffect(() => {
@@ -86,7 +99,7 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
 				addChatHistory(message, true);
 				console.log({ ...reactFlowInstance.toObject(), message, chatHistory });
 
-				sendAll({ ...reactFlowInstance.toObject(), message, chatHistory })
+				sendAll({ ...reactFlowInstance.toObject(), message, chatHistory})
 					.then((r) => {
 						console.log(r.data);
 						addChatHistory(r.data.result, false, r.data.thought);
@@ -99,7 +112,7 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
 			} else {
 				setErrorData({
 					title: "Error sending message",
-					list: ["There are required fields not filled yet."],
+					list: [ "Oops! Looks like you missed some required information. Please fill in all the required fields before continuing."],
 				});
 			}
 		} else {

langflow/frontend/src/contexts/tabsContext.tsx

@@ -14,6 +14,8 @@ const TabsContextInitialValue: TabsContextType = {
 	incrementNodeId: () => 0,
 	downloadFlow: () => {},
 	uploadFlow: () => {},
+	lockChat: false,
+	setLockChat:(prevState:boolean)=>{}
 };
 
 export const TabsContext = createContext<TabsContextType>(
@@ -25,6 +27,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 	const [tabIndex, setTabIndex] = useState(0);
 	const [flows, setFlows] = useState<Array<FlowType>>([]);
 	const [id, setId] = useState(0);
+	const [lockChat, setLockChat] = useState(false);
 
 	const newNodeId = useRef(0);
 	function incrementNodeId() {
@@ -166,6 +169,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 	return (
 		<TabsContext.Provider
 			value={{
+				lockChat,
+				setLockChat,
 				tabIndex,
 				setTabIndex,
 				flows,

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

@@ -11,5 +11,5 @@ export type sendAllProps={
     edges: Edge[];
     viewport: Viewport;
     message:string;
-    chatHistory:{message:string,isSend:boolean}[]
+    chatHistory:{message:string,isSend:boolean}[],
 };

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

@@ -10,4 +10,6 @@ export type TabsContextType = {
 	incrementNodeId: () => number;
 	downloadFlow: () => void;
 	uploadFlow: () => void;
+	lockChat:boolean,
+	setLockChat:(prevState:boolean)=>void
 };