Merge zustand/io/migration

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

@@ -332,7 +332,7 @@ export default function ParameterComponent({
                 <div>
                   <IconComponent
                     name="Info"
-                    className="relative bottom-0.5 ml-2 h-3 w-4"
+                    className="relative bottom-px ml-1.5 h-3 w-4"
                   />
                 </div>
               </ShadTooltip>

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

@@ -128,7 +128,7 @@ export default function GenericNode({
 
   const showNode = data.showNode ?? true;
 
-  const nameEditable = data.node?.flow || data.type === "CustomComponent";
+  const nameEditable = true;
 
   const emojiRegex = /\p{Emoji}/u;
   const isEmoji = emojiRegex.test(data?.node?.icon!);
@@ -332,8 +332,8 @@ export default function GenericNode({
                       />
                     </div>
                   ) : (
-                    <ShadTooltip content={data.node?.display_name}>
-                      <div className="group flex items-center gap-2.5">
+                    <div className="group flex items-center gap-2.5">
+                      <ShadTooltip content={data.id}>
                         <div
                           onDoubleClick={(event) => {
                             if (nameEditable) {
@@ -348,24 +348,23 @@ export default function GenericNode({
                         >
                           {data.node?.display_name}
                         </div>
-
-                        {nameEditable && (
-                          <div
-                            onClick={(event) => {
-                              setInputName(true);
-                              takeSnapshot();
-                              event.stopPropagation();
-                              event.preventDefault();
-                            }}
-                          >
-                            <IconComponent
-                              name="Pencil"
-                              className="hidden h-4 w-4 animate-pulse text-status-blue group-hover:block"
-                            />
-                          </div>
-                        )}
-                      </div>
-                    </ShadTooltip>
+                      </ShadTooltip>
+                      {nameEditable && (
+                        <div
+                          onClick={(event) => {
+                            setInputName(true);
+                            takeSnapshot();
+                            event.stopPropagation();
+                            event.preventDefault();
+                          }}
+                        >
+                          <IconComponent
+                            name="Pencil"
+                            className="hidden h-4 w-4 animate-pulse text-status-blue group-hover:block"
+                          />
+                        </div>
+                      )}
+                    </div>
                   )}
                 </div>
               )}

src/frontend/src/components/CrashErrorComponent/index.tsx

@@ -1,36 +1,63 @@
+import { XCircle } from "lucide-react";
 import { crashComponentPropsType } from "../../types/components";
+import { Button } from "../ui/button";
+import { Card, CardContent, CardFooter, CardHeader } from "../ui/card";
 
 export default function CrashErrorComponent({
   error,
   resetErrorBoundary,
 }: crashComponentPropsType): JSX.Element {
   return (
-    <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-foreground bg-opacity-50">
-      <div className="flex h-1/3 min-h-fit max-w-4xl flex-col justify-evenly rounded-lg bg-background p-8 text-start shadow-lg">
-        <h1 className="mb-4 text-3xl text-status-red">
-          Oops! An unknown error has occurred.
-        </h1>
-        <p className="mb-4 text-xl text-foreground">
-          Please click the 'Reset Application' button to restore the
-          application's state. If the error persists, please create an issue on
-          our GitHub page. We apologize for any inconvenience this may have
-          caused.
-        </p>
-        <div className="flex justify-center">
-          <button
-            onClick={resetErrorBoundary}
-            className="mr-4 rounded bg-primary px-4 py-2 font-bold text-background hover:bg-ring"
-          >
-            Reset Application
-          </button>
-          <a
-            href="https://github.com/logspace-ai/langflow/issues/new"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="rounded bg-status-red px-4 py-2 font-bold text-background hover:bg-error-foreground"
-          >
-            Create Issue
-          </a>
+    <div className="z-50 flex h-screen w-screen items-center justify-center bg-foreground bg-opacity-50">
+      <div className="flex h-screen w-screen flex-col  bg-background text-start shadow-lg">
+        <div className="m-auto grid w-1/2 justify-center gap-5 text-center">
+          <Card className="p-8">
+            <CardHeader>
+              <div className="m-auto">
+                <XCircle strokeWidth={1.5} className="h-16 w-16" />
+              </div>
+              <div>
+                <p className="mb-4 text-xl text-foreground">
+                  Sorry, we found an unexpected error!
+                </p>
+              </div>
+            </CardHeader>
+
+            <CardContent className="grid">
+              <div>
+                <p>
+                Please report errors with detailed tracebacks on the{" "}
+                  <a
+                    href="https://github.com/logspace-ai/langflow/issues"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="font-medium  hover:underline "
+                  >
+                    GitHub Issues
+                  </a>{" "}
+                  page.
+                  <br></br>
+                   Thank you!
+                </p>
+              </div>
+            </CardContent>
+
+            <CardFooter>
+              <div className="m-auto mt-4 flex justify-center">
+                <Button onClick={resetErrorBoundary}>Restart Langflow</Button>
+
+                <a
+                  href="https://github.com/logspace-ai/langflow/issues/new"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Button className="ml-3" variant={"outline"}>
+                    Report on GitHub
+                  </Button>
+                </a>
+              </div>
+            </CardFooter>
+          </Card>
         </div>
       </div>
     </div>

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

@@ -153,7 +153,7 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
                               trigger={
                                 <div className="file-component-badge-div">
                                   <Badge variant="gray" size="md">
-                                    {input.id}
+                                    {node.data.node.display_name}
                                   </Badge>
                                   {haveChat && (
                                     <div
@@ -194,7 +194,7 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
                     className="api-modal-tabs-content mt-4"
                   >
                     <div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold">
-                      <IconComponent className="h-4 w-4" name={"Braces"} />
+                      <IconComponent className="h-4 w-4" name={"FileType2"} />
                       {outputsModalTitle}
                     </div>
                     {nodes

src/frontend/src/constants/constants.ts

@@ -701,7 +701,7 @@ export const editTextPlaceholder = "Type message here.";
 export const inputHandleHover = "Avaliable input components:";
 export const outputHandleHover = "Avaliable output components:";
 export const textInputModalTitle = "Text Inputs";
-export const outputsModalTitle = "Prompt Outputs";
+export const outputsModalTitle = "Text Outputs";
 export const langflowChatTitle = "Langflow Chat";
 export const chatInputPlaceholder =
   "No chat input variables found. Click to run your flow.";

src/frontend/src/contexts/authContext.tsx

@@ -7,6 +7,7 @@ import {
   requestLogout,
 } from "../controllers/API";
 import useAlertStore from "../stores/alertStore";
+import useFlowsManagerStore from "../stores/flowsManagerStore";
 import { Users } from "../types/api";
 import { AuthContextType } from "../types/contexts/auth";
 
@@ -79,6 +80,7 @@ export function AuthProvider({ children }): React.ReactElement {
           getUser();
         } else {
           setLoading(false);
+          useFlowsManagerStore.setState({ isLoading: false });
         }
       });
   }, [setUserData, setLoading, autoLogin, setIsAdmin]);

src/frontend/src/icons/Azure/index.tsx

@@ -0,0 +1,8 @@
+import React, { forwardRef } from "react";
+import SvgAzure from "./Azure";
+
+export const AzureIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
+  (props, ref) => {
+    return <SvgAzure ref={ref} {...props} />;
+  }
+);

src/frontend/src/icons/Ollama/index.tsx

@@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import SvgOllama from "./Ollama";
+
+export const OllamaIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <SvgOllama ref={ref} {...props} />;
+});

src/frontend/src/icons/Postgres/index.tsx

@@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import SvgPostgres from "./Postgres";
+
+export const PostgresIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <SvgPostgres ref={ref} {...props} />;
+});

src/frontend/src/icons/Redis/index.tsx

@@ -0,0 +1,8 @@
+import React, { forwardRef } from "react";
+import { SvgRedis } from "./Redis";
+
+export const RedisIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
+  (props, ref) => {
+    return <SvgRedis ref={ref} {...props} />;
+  }
+);

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -47,12 +47,6 @@ export default function CodeAreaModal({
   const [error, setError] = useState<{
     detail: { error: string | undefined; traceback: string | undefined };
   } | null>(null);
-  const handleModalWShortcut = useFlowStore(
-    (state) => state.handleModalWShortcut
-  );
-  const openCodeModalWShortcut = useFlowStore(
-    (state) => state.openCodeModalWShortcut
-  );
   const [open, setOpen] = useState(false);
   const nodes = useFlowStore((state) => state.nodes);
 
@@ -62,26 +56,7 @@ export default function CodeAreaModal({
     if (dynamic && Object.keys(nodeClass!.template).length > 2) {
       return;
     }
-  }, []);                                                          
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        (event.key === "C" || event.key === "c") &&
-        (event.metaKey || event.ctrlKey) &&
-        selected
-      ) {
-        event.preventDefault();
-        console.log("entrou")
-        setOpen((oldState) => !oldState);
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
   }, []);
-  
 
   useEffect(() => {
     console.log(open)

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -488,4 +488,4 @@ export default function Page({
       </main>
     </div>
   );
-}
+}

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -90,13 +90,6 @@ export default function NodeToolbarComponent({
   }, [showModalAdvanced]);
   const updateNodeInternals = useUpdateNodeInternals();
 
-  const openCodeModalWShortcut = useFlowStore(
-    (state) => state.openCodeModalWShortcut
-  );
-  const handleModalWShortcut = useFlowStore(
-    (state) => state.handleModalWShortcut
-  );
-
   const setLastCopiedSelection = useFlowStore(
     (state) => state.setLastCopiedSelection
   );

src/frontend/src/stores/flowStore.ts

@@ -30,6 +30,7 @@ import {
 } from "../types/zustand/flow";
 import { buildVertices } from "../utils/buildUtils";
 import {
+  checkChatInput,
   cleanEdges,
   getHandleId,
   getNodeId,
@@ -56,16 +57,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   flowPool: {},
   inputs: [],
   outputs: [],
-  openCodeModalWShortcut: false,
-  handleModalWShortcut: (modal) => {
-    switch (modal) {
-      case "code":
-        set((state) => ({
-          openCodeModalWShortcut: !state.openCodeModalWShortcut,
-        }));
-        break;
-    }
-  },
   setFlowPool: (flowPool) => {
     set({ flowPool });
   },
@@ -228,6 +219,10 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     );
   },
   paste: (selection, position) => {
+    if(selection.nodes.some((node) => node.data.type === "ChatInput") && checkChatInput(get().nodes)){
+      useAlertStore.getState().setErrorData({title: "Error pasting components", list: ["You can only have one ChatInput component in the flow"]});
+      return;
+    }
     let minimumX = Infinity;
     let minimumY = Infinity;
     let idsMap = {};

src/frontend/src/stores/typesStore.ts

@@ -16,7 +16,7 @@ export const useTypesStore = create<TypesStoreType>((set, get) => ({
       setLoading(true);
       getAll()
         .then((response) => {
-          const data = response.data;
+          const data = response?.data;
           useAlertStore.setState({ loading: false });
           set((old) => ({
             types: typesGenerator(data),

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

@@ -40,8 +40,6 @@ export type FlowPoolType = {
 };
 
 export type FlowStoreType = {
-  openCodeModalWShortcut: boolean;
-  handleModalWShortcut: (modal: string) => void;
   flowPool: FlowPoolType;
   inputs: Array<{ type: string; id: string }>;
   outputs: Array<{ type: string; id: string }>;

src/frontend/src/utils/reactflowUtils.ts

@@ -44,6 +44,10 @@ import {
 } from "./utils";
 const uid = new ShortUniqueId({ length: 5 });
 
+export function checkChatInput(nodes: Node[]) {
+  return nodes.some((node) => node.data.type === "ChatInput");
+}
+
 export function cleanEdges(nodes: Node[], edges: Edge[]) {
   let newEdges = cloneDeep(edges);
   edges.forEach((edge) => {

src/frontend/src/utils/styleUtils.ts

@@ -42,6 +42,7 @@ import {
   FileSearch,
   FileSearch2,
   FileText,
+  FileType2,
   FileUp,
   Fingerprint,
   FlaskConical,
@@ -124,10 +125,11 @@ import {
   XCircle,
   Zap,
 } from "lucide-react";
-import { FaApple, FaGithub } from "react-icons/fa";
+import { FaApple, FaGithub, FaRobot } from "react-icons/fa";
 import { AWSIcon } from "../icons/AWS";
 import { AirbyteIcon } from "../icons/Airbyte";
 import { AnthropicIcon } from "../icons/Anthropic";
+import { AzureIcon } from "../icons/Azure";
 import { BingIcon } from "../icons/Bing";
 import { ChromaIcon } from "../icons/ChromaIcon";
 import { CohereIcon } from "../icons/Cohere";
@@ -147,9 +149,12 @@ import { MetaIcon } from "../icons/Meta";
 import { MidjourneyIcon } from "../icons/Midjorney";
 import { MongoDBIcon } from "../icons/MongoDB";
 import { NotionIcon } from "../icons/Notion";
+import { OllamaIcon } from "../icons/Ollama";
 import { OpenAiIcon } from "../icons/OpenAi";
 import { PineconeIcon } from "../icons/Pinecone";
+import { PostgresIcon } from "../icons/Postgres";
 import { QDrantIcon } from "../icons/QDrant";
+import { RedisIcon } from "../icons/Redis";
 import { SearxIcon } from "../icons/Searx";
 import { ShareIcon } from "../icons/Share";
 import { Share2Icon } from "../icons/Share2";
@@ -253,6 +258,20 @@ export const nodeNames: { [char: string]: string } = {
 };
 
 export const nodeIconsLucide: iconsType = {
+  AzureChatOpenAi: AzureIcon,
+  Ollama: OllamaIcon,
+  ChatOllama: OllamaIcon,
+  AzureOpenAiEmbeddings: AzureIcon,
+  Azure: AzureIcon,
+  OllamaEmbeddings: OllamaIcon,
+  ChatOllamaModel: OllamaIcon,
+  Faiss: MetaIcon,
+  FaissSearch: MetaIcon,
+  AzureOpenAiModel: AzureIcon,
+  Redis: RedisIcon,
+  RedisSearch: RedisIcon,
+  PostgresChatMessageHistory: PostgresIcon,
+  BaiduQianfan: FaRobot,
   Play,
   Vectara: VectaraIcon,
   ArrowUpToLine: ArrowUpToLine,
@@ -354,6 +373,7 @@ export const nodeIconsLucide: iconsType = {
   Plus,
   Redo,
   Settings2,
+  FileType2,
   Undo,
   FileSearch2,
   ChevronRight,