Merge branch 'zustand/io/migration' of github.com:logspace-ai/langflow into zustand/io/migration

src/frontend/src/App.tsx

@@ -20,6 +20,7 @@ import useAlertStore from "./stores/alertStore";
 import { useDarkStore } from "./stores/darkStore";
 import useFlowsManagerStore from "./stores/flowsManagerStore";
 import { useTypesStore } from "./stores/typesStore";
+import { useStoreStore } from "./stores/storeStore";
 
 export default function App() {
   const removeFromTempNotificationList = useAlertStore(
@@ -28,7 +29,6 @@ export default function App() {
   const tempNotificationList = useAlertStore(
     (state) => state.tempNotificationList
   );
-  const loading = useAlertStore((state) => state.loading);
   const [fetchError, setFetchError] = useState(false);
   const isLoading = useFlowsManagerStore((state) => state.isLoading);
 
@@ -38,9 +38,11 @@ export default function App() {
 
   const { isAuthenticated } = useContext(AuthContext);
   const refreshFlows = useFlowsManagerStore((state) => state.refreshFlows);
+  const fetchApiData = useStoreStore((state) => state.fetchApiData);
   const getTypes = useTypesStore((state) => state.getTypes);
   const refreshVersion = useDarkStore((state) => state.refreshVersion);
   const refreshStars = useDarkStore((state) => state.refreshStars);
+  const checkHasStore = useStoreStore((state) => state.checkHasStore);
 
   useEffect(() => {
     refreshStars();
@@ -52,6 +54,8 @@ export default function App() {
       getTypes().then(() => {
         refreshFlows();
       });
+      checkHasStore();
+      fetchApiData();
     }
   }, [isAuthenticated]);
 

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -167,6 +167,7 @@ export default function GenericNode({
     buildStatus: BuildStatus | undefined,
     validationStatus: validationStatusType | null
   ) => {
+    console.log(buildStatus);
     const isValid = validationStatus && validationStatus.valid;
     if (isValid) {
       return "green-status";
@@ -192,7 +193,6 @@ export default function GenericNode({
   };
   const renderIconPlayOrPauseComponents = (
     buildStatus: BuildStatus | undefined,
-    validationStatus: validationStatusType | null
   ) => {
     if (buildStatus === BuildStatus.BUILDING) {
       return <Loading />;
@@ -200,7 +200,7 @@ export default function GenericNode({
       return (
         <IconComponent
           name="Play"
-          className="absolute ml-0.5 h-5 fill-current stroke-2 text-muted-foreground hover:text-medium-indigo"
+          className="absolute ml-0.5 h-5 fill-current stroke-2 text-muted-foreground group-hover:text-medium-indigo"
         />
       );
     }
@@ -467,44 +467,21 @@ export default function GenericNode({
                 variant="secondary"
                 className={"group h-9 px-1.5"}
                 onClick={() => {
-                  if (buildStatus === BuildStatus.BUILDING || isBuilding)
+                  if (data?.buildStatus === BuildStatus.BUILDING || isBuilding)
                     return;
                   buildFlow(data.id);
                 }}
               >
                 <div>
                   <ShadTooltip
-                    styleClasses="cursor-default"
                     content={
-                      buildStatus === BuildStatus.BUILDING ? (
+                      "Build"
-                        <span>Building...</span>
-                      ) : !validationStatus ? (
-                        <span className="flex">
-                          Build{" "}
-                          <IconComponent
-                            name="Play"
-                            className=" h-5 stroke-status-green stroke-2"
-                          />{" "}
-                          flow to validate status.
-                        </span>
-                      ) : (
-                        <div className="max-h-96 overflow-auto">
-                          {typeof validationStatus.params === "string"
-                            ? `${durationString}\n${validationStatus.params}`
-                                .split("\n")
-                                .map((line, index) => (
-                                  <div key={index}>{line}</div>
-                                ))
-                            : durationString}
-                        </div>
-                      )
                     }
                     side="bottom"
                   >
                     <div className="generic-node-status-position flex items-center justify-center">
                       {renderIconPlayOrPauseComponents(
                         buildStatus,
-                        validationStatus
                       )}
                     </div>
                   </ShadTooltip>
@@ -513,7 +490,6 @@ export default function GenericNode({
             )}
             <div className="">
               <ShadTooltip
-                styleClasses="cursor-default"
                 content={
                   data?.buildStatus === BuildStatus.BUILDING ? (
                     <span>Building...</span>
@@ -529,7 +505,6 @@ export default function GenericNode({
                     </div>
                   )
                 }
-                side="bottom"
               >
                 <div>
                   {renderIconStatusComponents(

src/frontend/src/components/IOview/index.tsx

@@ -1,7 +1,11 @@
+import { cloneDeep } from "lodash";
 import { useEffect, useState } from "react";
 import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
 import BaseModal from "../../modals/baseModal";
+import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
+import { NodeType } from "../../types/flow";
+import { validateNodes } from "../../utils/reactflowUtils";
 import { cn } from "../../utils/utils";
 import AccordionComponent from "../AccordionComponent";
 import IOInputField from "../IOInputField";
@@ -16,19 +20,22 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
   const inputs = useFlowStore((state) => state.inputs).filter(
     (input) => input.type !== "ChatInput"
   );
+  const chatInput = useFlowStore((state) => state.inputs).find(
+    (input) => input.type === "ChatInput"
+  );
   const outputs = useFlowStore((state) => state.outputs).filter(
     (output) => output.type !== "ChatOutput"
   );
+  const chatOutput = useFlowStore((state) => state.outputs).find(
+    (output) => output.type === "ChatOutput"
+  );
   const nodes = useFlowStore((state) => state.nodes).filter(
     (node) =>
       (inputs.some((input) => input.id === node.id) ||
-        outputs.some((output) => output.id === node.id)) &&
+        outputs.some((output) => output.id === node.id))
-      node.type !== "ChatInput" &&
-      node.type !== "ChatOutput"
-  );
-  const haveChat = useFlowStore((state) => state.outputs).some(
-    (output) => output.type === "ChatOutput"
   );
+  const haveChat =
+    chatInput || chatOutput
   const [selectedTab, setSelectedTab] = useState(
     inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0
   );
@@ -36,6 +43,45 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
     { type: string; id: string } | undefined
   >(undefined);
 
+  const { getNode, setNode, buildFlow, getFlow } = useFlowStore();
+  const { setErrorData } = useAlertStore();
+  const setIsBuilding = useFlowStore((state) => state.setIsBuilding);
+  const [lockChat, setLockChat] = useState(false);
+  const [chatValue, setChatValue] = useState("");
+  const isBuilding = useFlowStore((state) => state.isBuilding);
+
+  async function sendMessage(count = 1): Promise<void> {
+    if (isBuilding) return;
+    const { nodes, edges } = getFlow();
+    let nodeValidationErrors = validateNodes(nodes, edges);
+    if (nodeValidationErrors.length === 0) {
+      setIsBuilding(true);
+      setLockChat(true);
+      setChatValue("");
+      const chatInputNode = nodes.find((node) => node.id === chatInput?.id);
+      if (chatInputNode) {
+        let newNode = cloneDeep(chatInputNode);
+        newNode.data.node!.template["message"].value = chatValue;
+        setNode(chatInput!.id, newNode);
+      }
+      for (let i = 0; i < count; i++) {
+        await buildFlow().catch((err) => {
+          console.error(err);
+          setLockChat(false);
+        });
+      }
+      setLockChat(false);
+
+      //set chat message in the flow and run build
+      //@ts-ignore
+    } else {
+      setErrorData({
+        title: "Oops! Looks like you missed some required information:",
+        list: nodeValidationErrors,
+      });
+    }
+  }
+
   useEffect(() => {
     setSelectedViewField(undefined);
     setSelectedTab(inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0);
@@ -43,7 +89,7 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
 
   return (
     <BaseModal
-      size={haveChat ? "large" : "small"}
+      size={haveChat ? (selectedTab === 0 ? "large-thin" : "large") : "small"}
       open={open}
       setOpen={setOpen}
     >
@@ -60,7 +106,8 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
         </div>
       </BaseModal.Header>
       <BaseModal.Content>
-        <div className="flex-max-width mt-2 h-[80vh]">
+        <div className="flex h-full flex-col">
+          <div className="flex-max-width mt-2 h-full">
             {selectedTab !== 0 && (
               <div
                 className={cn(
@@ -70,7 +117,9 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
               >
                 <Tabs
                   value={selectedTab.toString()}
-                className={"api-modal-tabs "}
+                  className={
+                    "flex h-full flex-col overflow-hidden rounded-md border bg-muted text-center"
+                  }
                   onValueChange={(value) => {
                     setSelectedTab(Number(value));
                   }}
@@ -226,12 +275,27 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
                   />
                 )
               ) : (
-              <NewChatView />
+                <NewChatView
+                  sendMessage={sendMessage}
+                  chatValue={chatValue}
+                  setChatValue={setChatValue}
+                  lockChat={lockChat}
+                  setLockChat={setLockChat}
+                />
               )
             ) : (
-            <div className="absolute bottom-8 right-8">
+              <div className="absolute bottom-8 right-8"></div>
-              <Button className="px-3">
+            )}
-                <IconComponent name="Play" className="h-6 w-6" />
+          </div>
+          {!haveChat && (
+            <div className="flex w-full justify-end pt-6">
+              <Button variant={"outline"} className="px-3 flex gap-2" onClick={() => sendMessage(1)}>
+                
+                <IconComponent
+                  name={isBuilding ? "Loader2" : "Play"}
+                  className={cn("h-4 w-4", isBuilding ? "animate-spin" : "fill-current text-medium-indigo")}
+                />
+                Run Flow
               </Button>
             </div>
           )}

src/frontend/src/components/ViewTriggers/chat/index.tsx

@@ -21,7 +21,7 @@ export default function ChatTrigger({}): JSX.Element {
       >
         <div className="flex gap-3">
           <IconComponent
-            name="Sliders"
+            name="Zap"
             className={"message-button-icon h-6 w-6 transition-all"}
           />
         </div>

src/frontend/src/components/newChatView/chatMessage/index.tsx

@@ -70,7 +70,7 @@ export default function ChatMessage({
 
   useEffect(() => {
     // This effect is specifically for calling updateChat after streaming ends
-    if (!isStreaming && streamUrl === null) {
+    if (!isStreaming && streamUrl) {
       if (updateChat) {
         updateChat(chat, chatMessage, streamUrl);
       }

src/frontend/src/components/newChatView/index.tsx

@@ -1,4 +1,4 @@
-import _, { cloneDeep } from "lodash";
+import _ from "lodash";
 import { useEffect, useRef, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import { deleteFlowPool } from "../../controllers/API";
@@ -11,30 +11,21 @@ import {
   ChatOutputType,
   FlowPoolObjectType,
 } from "../../types/chat";
-import { NodeType } from "../../types/flow";
-import { validateNodes } from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
 import ChatInput from "./chatInput";
 import ChatMessage from "./chatMessage";
 
-export default function NewChatView(): JSX.Element {
+export default function NewChatView({
-  const [chatValue, setChatValue] = useState("");
+  sendMessage,
-  const {
+  chatValue,
-    flowPool,
+  setChatValue,
-    outputs,
+  lockChat,
-    inputs,
+  setLockChat,
-    getNode,
+}): JSX.Element {
-    setNode,
+  const { flowPool, outputs, inputs, CleanFlowPool } = useFlowStore();
-    buildFlow,
+  const { setNoticeData } = useAlertStore();
-    getFlow,
-    CleanFlowPool,
-  } = useFlowStore();
-  const { setErrorData, setNoticeData } = useAlertStore();
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
-  const setIsBuilding = useFlowStore((state) => state.setIsBuilding);
-  const [lockChat, setLockChat] = useState(false);
   const messagesRef = useRef<HTMLDivElement | null>(null);
-  const isBuilding = useFlowStore((state) => state.isBuilding);
   const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
 
   const inputTypes = inputs.map((obj) => obj.type);
@@ -115,40 +106,6 @@ export default function NewChatView(): JSX.Element {
     }
   }, []);
 
-  async function sendMessage(count = 1): Promise<void> {
-    if (isBuilding) return;
-    const { nodes, edges } = getFlow();
-    let nodeValidationErrors = validateNodes(nodes, edges);
-    if (nodeValidationErrors.length === 0) {
-      setIsBuilding(true);
-      setLockChat(true);
-      setChatValue("");
-      const chatInputId = inputIds.find((inputId) =>
-        inputId.includes("ChatInput")
-      );
-      const chatInput: NodeType = getNode(chatInputId!) as NodeType;
-      if (chatInput) {
-        let newNode = cloneDeep(chatInput);
-        newNode.data.node!.template["message"].value = chatValue;
-        setNode(chatInputId!, newNode);
-      }
-      for (let i = 0; i < count; i++) {
-        await buildFlow().catch((err) => {
-          console.error(err);
-          setLockChat(false);
-        });
-      }
-      setLockChat(false);
-
-      //set chat message in the flow and run build
-      //@ts-ignore
-    } else {
-      setErrorData({
-        title: "Oops! Looks like you missed some required information:",
-        list: nodeValidationErrors,
-      });
-    }
-  }
   function clearChat(): void {
     setChatHistory([]);
     deleteFlowPool(currentFlowId).then((_) => {

src/frontend/src/modals/baseModal/index.tsx

@@ -66,6 +66,7 @@ interface BaseModalProps {
     | "small"
     | "medium"
     | "large"
+    | "large-thin"
     | "large-h-full"
     | "small-h-full"
     | "medium-h-full"
@@ -128,6 +129,10 @@ function BaseModal({
       minWidth = "min-w-[80vw]";
       height = "h-[80vh]";
       break;
+    case "large-thin":
+        minWidth = "min-w-[65vw]";
+        height = "h-[80vh]";
+        break;
     case "large-h-full":
       minWidth = "min-w-[80vw]";
       break;

src/frontend/src/modals/formModal/index.tsx

@@ -576,6 +576,7 @@ export default function FormModal({
                           chatHistory.length - 1 === index ? true : false
                         }
                         key={index}
+                        updateChat={() => {}}
                       />
                     ))
                   ) : (

src/frontend/src/pages/StorePage/index.tsx

@@ -39,8 +39,6 @@ export default function StorePage(): JSX.Element {
   const loadingApiKey = useStoreStore((state) => state.loadingApiKey);
 
   const setValidApiKey = useStoreStore((state) => state.updateValidApiKey);
-  const setLoadingApiKey = useStoreStore((state) => state.updateLoadingApiKey);
-  const setHasApiKey = useStoreStore((state) => state.updateHasApiKey);
 
   const { apiKey } = useContext(AuthContext);
 
@@ -48,6 +46,9 @@ export default function StorePage(): JSX.Element {
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId
   );
+  const currentFlowId = useFlowsManagerStore(
+    (state) => state.currentFlowId
+  );
   const [loading, setLoading] = useState(true);
   const [loadingTags, setLoadingTags] = useState(true);
   const { id } = useParams();
@@ -63,10 +64,6 @@ export default function StorePage(): JSX.Element {
   const [searchNow, setSearchNow] = useState("");
   const [selectFilter, setSelectFilter] = useState("all");
 
-  useEffect(() => {
-    handleGetTags();
-  }, []);
-
   useEffect(() => {
     if (!loadingApiKey) {
       if (!hasApiKey) {
@@ -86,9 +83,10 @@ export default function StorePage(): JSX.Element {
         });
       }
     }
-  }, [loadingApiKey, validApiKey, hasApiKey]);
+  }, [loadingApiKey, validApiKey, hasApiKey, currentFlowId]);
 
   useEffect(() => {
+    handleGetTags();
     handleGetComponents();
   }, [
     tabActive,
@@ -119,7 +117,7 @@ export default function StorePage(): JSX.Element {
   }
 
   function handleGetComponents() {
-    if (!hasApiKey || loadingApiKey) return;
+    if (loadingApiKey) return;
     setLoading(true);
     getStoreComponents({
       component_id: id,
@@ -176,23 +174,6 @@ export default function StorePage(): JSX.Element {
     setPageSize(12);
   }
 
-  const fetchApiData = async () => {
-    setLoadingApiKey(true);
-    try {
-      const res = await checkHasApiKey();
-      setHasApiKey(res?.has_api_key ?? false);
-      setValidApiKey(res?.is_valid ?? false);
-      setLoadingApiKey(false);
-    } catch (e) {
-      setLoadingApiKey(false);
-      console.log(e);
-    }
-  };
-
-  useEffect(() => {
-    fetchApiData();
-  }, [apiKey]);
-
   return (
     <PageLayout
       betaIcon

src/frontend/src/stores/storeStore.tsx

@@ -1,19 +1,34 @@
 import { create } from "zustand";
-import { checkHasStore } from "../controllers/API";
+import { checkHasApiKey, checkHasStore } from "../controllers/API";
 import { StoreStoreType } from "../types/zustand/store";
+import useAlertStore from "./alertStore";
 
 export const useStoreStore = create<StoreStoreType>((set) => ({
   hasStore: true,
   validApiKey: false,
   hasApiKey: false,
   loadingApiKey: true,
-  updateHasStore: (hasStore) => set(() => ({ hasStore: hasStore })),
+  checkHasStore: () => {
+    checkHasStore().then((res) => {
+      set({ hasStore: res?.enabled ?? false });
+    });
+  },
   updateValidApiKey: (validApiKey) => set(() => ({ validApiKey: validApiKey })),
   updateLoadingApiKey: (loadingApiKey) =>
     set(() => ({ loadingApiKey: loadingApiKey })),
   updateHasApiKey: (hasApiKey) => set(() => ({ hasApiKey: hasApiKey })),
-}));
+  fetchApiData: async () => {
-
+    set({ loadingApiKey: true });
-checkHasStore().then((res) => {
+    try {
-  useStoreStore.setState({ hasStore: res?.enabled ?? false });
+      const res = await checkHasApiKey();
+      set({
+        validApiKey: res?.is_valid ?? false,
+        hasApiKey: res?.has_api_key ?? false,
+        loadingApiKey: false,
       });
+    } catch (e) {
+      set({ loadingApiKey: false });
+      console.log(e);
+    }
+  },
+}));

src/frontend/src/style/applies.css

@@ -175,7 +175,7 @@
     @apply fixed bottom-4 right-4;
   }
   .message-button-icon {
-    @apply fill-chat-trigger stroke-chat-trigger stroke-1;
+    @apply fill-medium-indigo stroke-medium-indigo stroke-1;
   }
   .disabled-message-button-icon {
     @apply fill-chat-trigger-disabled stroke-chat-trigger-disabled stroke-1;

src/frontend/src/types/components/index.ts

@@ -524,11 +524,7 @@ export type chatMessagePropsType = {
   chat: ChatMessageType;
   lockChat: boolean;
   lastMessage: boolean;
-  updateChat?: (
+  updateChat: (chat: ChatMessageType, message: string, stream_url: string) => void;
-    chat: ChatMessageType,
-    message: string,
-    stream_url: string | null
-  ) => void;
 };
 
 export type formModalPropsType = {

src/frontend/src/types/zustand/store/index.ts

@@ -3,8 +3,9 @@ export type StoreStoreType = {
   validApiKey: boolean;
   hasApiKey: boolean;
   loadingApiKey: boolean;
-  updateHasStore: (hasStore: boolean) => void;
+  checkHasStore: () => void;
   updateValidApiKey: (validApiKey: boolean) => void;
   updateHasApiKey: (hasApiKey: boolean) => void;
   updateLoadingApiKey: (loadingApiKey: boolean) => void;
+  fetchApiData: () => Promise<void>;
 };

src/frontend/src/utils/utils.ts

@@ -58,11 +58,12 @@ export function normalCaseToSnakeCase(str: string): string {
     .join("_");
 }
 
-export function toTitleCase(str: string | undefined): string {
+export function toTitleCase(str: string | undefined, isNodeField?: boolean): string {
   if (!str) return "";
   let result = str
     .split("_")
     .map((word, index) => {
+      if (isNodeField) return word
       if (index === 0) {
         return checkUpperWords(
           word[0].toUpperCase() + word.slice(1).toLowerCase()
@@ -75,6 +76,7 @@ export function toTitleCase(str: string | undefined): string {
   return result
     .split("-")
     .map((word, index) => {
+      if (isNodeField) return word
       if (index === 0) {
         return checkUpperWords(
           word[0].toUpperCase() + word.slice(1).toLowerCase()
@@ -642,6 +644,6 @@ export function getFieldTitle(
   return template[templateField].display_name
     ? template[templateField].display_name!
     : template[templateField].name
-    ? toTitleCase(template[templateField].name!)
+    ? toTitleCase(template[templateField].name!, true)
-    : toTitleCase(templateField);
+    : toTitleCase(templateField, true);
 }