Merge branch 'zustand/io/migration' of personal:logspace-ai/langflow into zustand/io/migration

src/backend/langflow/api/v1/flows.py

@@ -59,9 +59,9 @@ def read_flows(
         if auth_settings.AUTO_LOGIN:
             flows = session.exec(
                 select(Flow).where(
-                    (Flow.user_id == None) | (Flow.user_id == current_user.id)
+                    (Flow.user_id == None) | (Flow.user_id == current_user.id)  # noqa
                 )
-            ).all()  # noqa
+            ).all()
         else:
             flows = current_user.flows
 
@@ -71,10 +71,10 @@ def read_flows(
         try:
             example_flows = session.exec(
                 select(Flow).where(
-                    Flow.user_id == None,
+                    Flow.user_id == None,  # noqa
-                    Flow.folder == STARTER_FOLDER_NAME,  # noqa
+                    Flow.folder == STARTER_FOLDER_NAME,
                 )
-            ).all()  # noqa
+            ).all()
             for example_flow in example_flows:
                 if example_flow.id not in flow_ids:
                     flows.append(example_flow)

src/backend/langflow/components/textsplitters/RecursiveCharacterTextSplitter.py

@@ -5,7 +5,7 @@ from langchain_core.documents import Document
 
 from langflow import CustomComponent
 from langflow.schema import Record
-from langflow.utils.util import build_loader_repr_from_documents
+from langflow.utils.util import build_loader_repr_from_records
 
 
 class RecursiveCharacterTextSplitterComponent(CustomComponent):
@@ -84,5 +84,6 @@ class RecursiveCharacterTextSplitterComponent(CustomComponent):
             else:
                 documents.append(_input)
         docs = splitter.split_documents(documents)
-        self.repr_value = build_loader_repr_from_documents(docs)
+        records = self.to_records(docs)
-        return self.to_records(docs)
+        self.repr_value = build_loader_repr_from_records(records)
+        return records

src/backend/langflow/graph/vertex/base.py

@@ -59,8 +59,13 @@ class Vertex:
         self.updated_raw_params = False
         self.id: str = data["id"]
         self.is_state = False
-        self.is_input = any(input_component_name in self.id for input_component_name in INPUT_COMPONENTS)
+        self.is_input = any(
-        self.is_output = any(output_component_name in self.id for output_component_name in OUTPUT_COMPONENTS)
+            input_component_name in self.id for input_component_name in INPUT_COMPONENTS
+        )
+        self.is_output = any(
+            output_component_name in self.id
+            for output_component_name in OUTPUT_COMPONENTS
+        )
         self.has_session_id = None
         self._custom_component = None
         self.has_external_input = False
@@ -101,11 +106,17 @@ class Vertex:
 
     def set_state(self, state: str):
         self.state = VertexStates[state]
-        if self.state == VertexStates.INACTIVE and self.graph.in_degree_map[self.id] < 2:
+        if (
+            self.state == VertexStates.INACTIVE
+            and self.graph.in_degree_map[self.id] < 2
+        ):
             # If the vertex is inactive and has only one in degree
             # it means that it is not a merge point in the graph
             self.graph.inactivated_vertices.add(self.id)
-        elif self.state == VertexStates.ACTIVE and self.id in self.graph.inactivated_vertices:
+        elif (
+            self.state == VertexStates.ACTIVE
+            and self.id in self.graph.inactivated_vertices
+        ):
             self.graph.inactivated_vertices.remove(self.id)
 
     @property
@@ -122,7 +133,9 @@ class Vertex:
         # If the Vertex.type is a power component
         # then we need to return the built object
         # instead of the result dict
-        if self.is_interface_component and not isinstance(self._built_object, UnbuiltObject):
+        if self.is_interface_component and not isinstance(
+            self._built_object, UnbuiltObject
+        ):
             result = self._built_object
             # if it is not a dict or a string and hasattr model_dump then
             # return the model_dump
@@ -134,7 +147,11 @@ class Vertex:
 
         if isinstance(self._built_result, UnbuiltResult):
             return {}
-        return self._built_result if isinstance(self._built_result, dict) else {"result": self._built_result}
+        return (
+            self._built_result
+            if isinstance(self._built_result, dict)
+            else {"result": self._built_result}
+        )
 
     def set_artifacts(self) -> None:
         pass
@@ -204,19 +221,31 @@ class Vertex:
         self.selected_output_type = self.data["node"].get("selected_output_type")
         self.is_input = self.data["node"].get("is_input") or self.is_input
         self.is_output = self.data["node"].get("is_output") or self.is_output
-        template_dicts = {key: value for key, value in self.data["node"]["template"].items() if isinstance(value, dict)}
+        template_dicts = {
+            key: value
+            for key, value in self.data["node"]["template"].items()
+            if isinstance(value, dict)
+        }
 
         self.has_session_id = "session_id" in template_dicts
 
         self.required_inputs = [
-            template_dicts[key]["type"] for key, value in template_dicts.items() if value["required"]
+            template_dicts[key]["type"]
+            for key, value in template_dicts.items()
+            if value["required"]
         ]
         self.optional_inputs = [
-            template_dicts[key]["type"] for key, value in template_dicts.items() if not value["required"]
+            template_dicts[key]["type"]
+            for key, value in template_dicts.items()
+            if not value["required"]
         ]
         # Add the template_dicts[key]["input_types"] to the optional_inputs
         self.optional_inputs.extend(
-            [input_type for value in template_dicts.values() for input_type in value.get("input_types", [])]
+            [
+                input_type
+                for value in template_dicts.values()
+                for input_type in value.get("input_types", [])
+            ]
         )
 
         template_dict = self.data["node"]["template"]
@@ -263,7 +292,11 @@ class Vertex:
             self.updated_raw_params = False
             return
 
-        template_dict = {key: value for key, value in self.data["node"]["template"].items() if isinstance(value, dict)}
+        template_dict = {
+            key: value
+            for key, value in self.data["node"]["template"].items()
+            if isinstance(value, dict)
+        }
         params = {}
 
         for edge in self.edges:
@@ -284,7 +317,10 @@ class Vertex:
                         # we don't know the key of the dict but we need to set the value
                         # to the vertex that is the source of the edge
                         param_dict = template_dict[param_key]["value"]
-                        params[param_key] = {key: self.graph.get_vertex(edge.source_id) for key in param_dict.keys()}
+                        params[param_key] = {
+                            key: self.graph.get_vertex(edge.source_id)
+                            for key in param_dict.keys()
+                        }
                     else:
                         params[param_key] = self.graph.get_vertex(edge.source_id)
 
@@ -320,7 +356,11 @@ class Vertex:
                     # list of dicts, so we need to convert it to a dict
                     # before passing it to the build method
                     if isinstance(val, list):
-                        params[key] = {k: v for item in value.get("value", []) for k, v in item.items()}
+                        params[key] = {
+                            k: v
+                            for item in value.get("value", [])
+                            for k, v in item.items()
+                        }
                     elif isinstance(val, dict):
                         params[key] = val
                 elif value.get("type") == "int" and val is not None:
@@ -445,7 +485,9 @@ class Vertex:
         if isinstance(self._built_object, str):
             self._built_result = self._built_object
 
-        result = await generate_result(self._built_object, inputs, self.has_external_output, session_id)
+        result = await generate_result(
+            self._built_object, inputs, self.has_external_output, session_id
+        )
         self._built_result = result
 
     async def _build_each_node_in_params_dict(self, user_id=None):
@@ -461,17 +503,22 @@ class Vertex:
             elif isinstance(value, list) and self._is_list_of_nodes(value):
                 await self._build_list_of_nodes_and_update_params(key, value, user_id)
             elif isinstance(value, dict):
-                await self._build_dict_of_nodes_and_update_params(key, value, user_id)
+                await self._build_dict_and_update_params(key, value, user_id)
             elif key not in self.params or self.updated_raw_params:
                 self.params[key] = value
 
-    async def _build_dict_of_nodes_and_update_params(self, key, nodes: Dict[str, "Vertex"], user_id=None):
+    async def _build_dict_and_update_params(
+        self, key, nodes_dict: Dict[str, "Vertex"], user_id=None
+    ):
         """
         Iterates over a dictionary of nodes, builds each and updates the params dictionary.
         """
-        for sub_key, node in nodes.items():
+        for sub_key, value in nodes_dict.items():
-            built = await node.get_result(requester=self, user_id=user_id)
+            if not self._is_node(value):
-            self.params[key][sub_key] = built
+                self.params[key][sub_key] = value
+            else:
+                built = await value.get_result(requester=self, user_id=user_id)
+                self.params[key][sub_key] = built
 
     def _is_node(self, value):
         """
@@ -485,7 +532,9 @@ class Vertex:
         """
         return all(self._is_node(node) for node in value)
 
-    async def get_result(self, requester: Optional["Vertex"] = None, user_id=None, timeout=None) -> Any:
+    async def get_result(
+        self, requester: Optional["Vertex"] = None, user_id=None, timeout=None
+    ) -> Any:
         # PLEASE REVIEW THIS IF STATEMENT
         # Check if the Vertex was built already
         if self._built:
@@ -519,7 +568,9 @@ class Vertex:
             self._extend_params_list_with_result(key, result)
         self.params[key] = result
 
-    async def _build_list_of_nodes_and_update_params(self, key, nodes: List["Vertex"], user_id=None):
+    async def _build_list_of_nodes_and_update_params(
+        self, key, nodes: List["Vertex"], user_id=None
+    ):
         """
         Iterates over a list of nodes, builds each and updates the params dictionary.
         """
@@ -586,7 +637,9 @@ class Vertex:
         except Exception as exc:
             logger.exception(exc)
 
-            raise ValueError(f"Error building node {self.display_name}: {str(exc)}") from exc
+            raise ValueError(
+                f"Error building node {self.display_name}: {str(exc)}"
+            ) from exc
 
     def _update_built_object_and_artifacts(self, result):
         """
@@ -614,7 +667,9 @@ class Vertex:
             logger.warning(message)
         elif isinstance(self._built_object, (Iterator, AsyncIterator)):
             if self.display_name in ["Text Output"]:
-                raise ValueError(f"You are trying to stream to a {self.display_name}. Try using a Chat Output instead.")
+                raise ValueError(
+                    f"You are trying to stream to a {self.display_name}. Try using a Chat Output instead."
+                )
 
     def _reset(self, params_update: Optional[Dict[str, Any]] = None):
         self._built = False
@@ -676,16 +731,24 @@ class Vertex:
             return self._built_object
 
         # Get the requester edge
-        requester_edge = next((edge for edge in self.edges if edge.target_id == requester.id), None)
+        requester_edge = next(
+            (edge for edge in self.edges if edge.target_id == requester.id), None
+        )
         # Return the result of the requester edge
-        return None if requester_edge is None else await requester_edge.get_result(source=self, target=requester)
+        return (
+            None
+            if requester_edge is None
+            else await requester_edge.get_result(source=self, target=requester)
+        )
 
     def add_edge(self, edge: "ContractEdge") -> None:
         if edge not in self.edges:
             self.edges.append(edge)
 
     def __repr__(self) -> str:
-        return f"Vertex(display_name={self.display_name}, id={self.id}, data={self.data})"
+        return (
+            f"Vertex(display_name={self.display_name}, id={self.id}, data={self.data})"
+        )
 
     def __eq__(self, __o: object) -> bool:
         try:
@@ -706,4 +769,8 @@ class Vertex:
 
     def _built_object_repr(self):
         # Add a message with an emoji, stars for sucess,
-        return "Built sucessfully ✨" if self._built_object is not None else "Failed to build 😵‍💫"
+        return (
+            "Built sucessfully ✨"
+            if self._built_object is not None
+            else "Failed to build 😵‍💫"
+        )

src/backend/langflow/initial_setup/setup.py

@@ -2,6 +2,7 @@ from datetime import datetime
 from pathlib import Path
 
 import orjson
+from emoji import demojize, purely_emoji
 from loguru import logger
 from sqlmodel import select
 
@@ -31,6 +32,8 @@ def get_project_data(project):
     project_description = project.get("description")
     project_is_component = project.get("is_component")
     project_updated_at = project.get("updated_at")
+    if not project_updated_at:
+        project_updated_at = datetime.utcnow().isoformat()
     updated_at_datetime = datetime.strptime(project_updated_at, "%Y-%m-%dT%H:%M:%S.%f")
     project_data = project.get("data")
     project_icon = project.get("icon")
@@ -80,7 +83,7 @@ def create_new_project(
     new_project = FlowCreate(
         name=project_name,
         description=project_description,
-        icon=project_icon,
+        icon=project_icon if not purely_emoji(project_icon) else demojize(project_icon),
         icon_bg_color=project_icon_bg_color,
         data=project_data,
         is_component=project_is_component,
@@ -126,7 +129,9 @@ def create_or_update_starter_projects():
                 project_icon_bg_color,
             ) = get_project_data(project)
             if project_name and project_data:
-                for existing_project in get_all_flows_similar_to_project(session, project_name):
+                for existing_project in get_all_flows_similar_to_project(
+                    session, project_name
+                ):
                     session.delete(existing_project)
 
                 create_new_project(

src/backend/langflow/schema/schema.py

@@ -13,7 +13,7 @@ class Record(BaseModel):
     """
 
     data: dict = {}
-    _default_value = None
+    _default_value: str = ""
 
     @classmethod
     def from_document(cls, document: Document) -> "Record":
@@ -63,7 +63,9 @@ class Record(BaseModel):
             return self.data.get(key, self._default_value)
         except KeyError:
             # Fallback to default behavior to raise AttributeError for undefined attributes
-            raise AttributeError(f"'{type(self).__name__}' object has no attribute '{key}'")
+            raise AttributeError(
+                f"'{type(self).__name__}' object has no attribute '{key}'"
+            )
 
     def __setattr__(self, key, value):
         """

src/backend/langflow/utils/util.py

@@ -5,8 +5,8 @@ from functools import wraps
 from typing import Any, Dict, List, Optional, Union
 
 from docstring_parser import parse
-from langchain_core.documents import Document
 
+from langflow.schema.schema import Record
 from langflow.template.frontend_node.constants import FORCE_SHOW_FIELDS
 from langflow.utils import constants
 
@@ -15,8 +15,12 @@ def remove_ansi_escape_codes(text):
     return re.sub(r"\x1b\[[0-9;]*[a-zA-Z]", "", text)
 
 
-def build_template_from_function(name: str, type_to_loader_dict: Dict, add_function: bool = False):
+def build_template_from_function(
-    classes = [item.__annotations__["return"].__name__ for item in type_to_loader_dict.values()]
+    name: str, type_to_loader_dict: Dict, add_function: bool = False
+):
+    classes = [
+        item.__annotations__["return"].__name__ for item in type_to_loader_dict.values()
+    ]
 
     # Raise error if name is not in chains
     if name not in classes:
@@ -37,8 +41,10 @@ def build_template_from_function(name: str, type_to_loader_dict: Dict, add_funct
                 for name_, value_ in value.__repr_args__():
                     if name_ == "default_factory":
                         try:
-                            variables[class_field_items]["default"] = get_default_factory(
+                            variables[class_field_items]["default"] = (
-                                module=_class.__base__.__module__, function=value_
+                                get_default_factory(
+                                    module=_class.__base__.__module__, function=value_
+                                )
                             )
                         except Exception:
                             variables[class_field_items]["default"] = None
@@ -46,7 +52,9 @@ def build_template_from_function(name: str, type_to_loader_dict: Dict, add_funct
                         variables[class_field_items][name_] = value_
 
                 variables[class_field_items]["placeholder"] = (
-                    docs.params[class_field_items] if class_field_items in docs.params else ""
+                    docs.params[class_field_items]
+                    if class_field_items in docs.params
+                    else ""
                 )
             # Adding function to base classes to allow
             # the output to be a function
@@ -61,7 +69,9 @@ def build_template_from_function(name: str, type_to_loader_dict: Dict, add_funct
             }
 
 
-def build_template_from_class(name: str, type_to_cls_dict: Dict, add_function: bool = False):
+def build_template_from_class(
+    name: str, type_to_cls_dict: Dict, add_function: bool = False
+):
     classes = [item.__name__ for item in type_to_cls_dict.values()]
 
     # Raise error if name is not in chains
@@ -85,9 +95,11 @@ def build_template_from_class(name: str, type_to_cls_dict: Dict, add_function: b
                     for name_, value_ in value.__repr_args__():
                         if name_ == "default_factory":
                             try:
-                                variables[class_field_items]["default"] = get_default_factory(
+                                variables[class_field_items]["default"] = (
-                                    module=_class.__base__.__module__,
+                                    get_default_factory(
-                                    function=value_,
+                                        module=_class.__base__.__module__,
+                                        function=value_,
+                                    )
                                 )
                             except Exception:
                                 variables[class_field_items]["default"] = None
@@ -95,7 +107,9 @@ def build_template_from_class(name: str, type_to_cls_dict: Dict, add_function: b
                             variables[class_field_items][name_] = value_
 
                     variables[class_field_items]["placeholder"] = (
-                        docs.params[class_field_items] if class_field_items in docs.params else ""
+                        docs.params[class_field_items]
+                        if class_field_items in docs.params
+                        else ""
                     )
             base_classes = get_base_classes(_class)
             # Adding function to base classes to allow
@@ -127,7 +141,9 @@ def build_template_from_method(
 
             # Check if the method exists in this class
             if not hasattr(_class, method_name):
-                raise ValueError(f"Method {method_name} not found in class {class_name}")
+                raise ValueError(
+                    f"Method {method_name} not found in class {class_name}"
+                )
 
             # Get the method
             method = getattr(_class, method_name)
@@ -146,8 +162,14 @@ def build_template_from_method(
                 "_type": _type,
                 **{
                     name: {
-                        "default": (param.default if param.default != param.empty else None),
+                        "default": (
-                        "type": (param.annotation if param.annotation != param.empty else None),
+                            param.default if param.default != param.empty else None
+                        ),
+                        "type": (
+                            param.annotation
+                            if param.annotation != param.empty
+                            else None
+                        ),
                         "required": param.default == param.empty,
                     }
                     for name, param in params.items()
@@ -234,7 +256,9 @@ def sync_to_async(func):
     return async_wrapper
 
 
-def format_dict(dictionary: Dict[str, Any], class_name: Optional[str] = None) -> Dict[str, Any]:
+def format_dict(
+    dictionary: Dict[str, Any], class_name: Optional[str] = None
+) -> Dict[str, Any]:
     """
     Formats a dictionary by removing certain keys and modifying the
     values of other keys.
@@ -320,7 +344,9 @@ def check_list_type(_type: str, value: Dict[str, Any]) -> str:
         The modified type string.
     """
     if any(list_type in _type for list_type in ["List", "Sequence", "Set"]):
-        _type = _type.replace("List[", "").replace("Sequence[", "").replace("Set[", "")[:-1]
+        _type = (
+            _type.replace("List[", "").replace("Sequence[", "").replace("Set[", "")[:-1]
+        )
         value["list"] = True
     else:
         value["list"] = False
@@ -423,7 +449,9 @@ def set_headers_value(value: Dict[str, Any]) -> None:
     value["value"] = """{"Authorization": "Bearer <token>"}"""
 
 
-def add_options_to_field(value: Dict[str, Any], class_name: Optional[str], key: str) -> None:
+def add_options_to_field(
+    value: Dict[str, Any], class_name: Optional[str], key: str
+) -> None:
     """
     Adds options to the field based on the class name and key.
     """
@@ -440,10 +468,20 @@ def add_options_to_field(value: Dict[str, Any], class_name: Optional[str], key:
         value["value"] = options_map[class_name][0]
 
 
-def build_loader_repr_from_documents(documents: List[Document]) -> str:
+def build_loader_repr_from_records(records: List[Record]) -> str:
-    if documents:
+    """
-        avg_length = sum(len(doc.page_content) for doc in documents) / len(documents)
+    Builds a string representation of the loader based on the given records.
-        return f"""{len(documents)} documents
+
-        \nAvg. Document Length (characters): {int(avg_length)}
+    Args:
-        Documents: {documents[:3]}..."""
+        records (List[Record]): A list of records.
-    return "0 documents"
+
+    Returns:
+        str: A string representation of the loader.
+
+    """
+    if records:
+        avg_length = sum(len(doc.text) for doc in records) / len(records)
+        return f"""{len(records)} records
+        \nAvg. Record Length (characters): {int(avg_length)}
+        Records: {records[:3]}..."""
+    return "0 records"

src/frontend/src/components/exampleComponent/index.tsx

@@ -7,90 +7,94 @@ import ShadTooltip from "../ShadTooltipComponent";
 import IconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
 import {
-    Card,
+  Card,
-    CardDescription,
+  CardDescription,
-    CardFooter,
+  CardFooter,
-    CardHeader,
+  CardHeader,
-    CardTitle,
+  CardTitle,
 } from "../ui/card";
 
 export default function CollectionCardComponent({
-    flow,
+  flow,
 }: {
-    flow: FlowType;
+  flow: FlowType;
-    authorized?: boolean;
+  authorized?: boolean;
 }) {
-    const addFlow = useFlowsManagerStore((state) => state.addFlow);
+  const addFlow = useFlowsManagerStore((state) => state.addFlow);
-    const navigate = useNavigate();
+  const navigate = useNavigate();
-    const emojiRegex = /\p{Emoji}/u;
+  const emojiRegex = /\p{Emoji}/u;
-    const isEmoji = (str: string) => emojiRegex.test(str);
+  const isEmoji = (str: string) => emojiRegex.test(str);
 
-    return (
+  return (
-        <Card
+    <Card
-            className={cn(
+      className={cn(
-                "group relative h-48 w-2/6 flex flex-col justify-between overflow-hidden transition-all hover:shadow-md",
+        "group relative flex h-48 w-2/6 flex-col justify-between overflow-hidden transition-all hover:shadow-md"
-            )}
+      )}
-        >
+    >
-            <div>
+      <div>
-                <CardHeader>
+        <CardHeader>
-                    <div>
+          <div>
-                        <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
+            <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
-                            {flow.icon && isEmoji(flow.icon) && (
+              {flow.icon && isEmoji(flow.icon) && (
-                                <div className="p-2 rounded-md flex align-middle items-center justify-center" style={{ backgroundColor: flow.icon_bg_color }}>
+                <div
-
+                  className="flex items-center justify-center rounded-md p-2 align-middle"
-                                    <div className="pl-0.5 h-7 w-7">
+                  style={{ backgroundColor: flow.icon_bg_color }}
-                                        {flow.icon}
+                >
-                                    </div>
+                  <div className="h-7 w-7 pl-0.5">{flow.icon}</div>
-                                </div>
-
-                            )}
-                            {(!flow.icon || !isEmoji(flow.icon)) &&
-                                <div className="p-2 rounded-md flex align-middle items-center justify-center" style={{ backgroundColor: flow.icon_bg_color }}>
-                                    <IconComponent
-                                        className={cn(
-                                            "flex-shrink-0 h-7 w-7 text-flow-icon",
-                                        )}
-                                        name={flow.icon || "Group"}
-                                    />
-                                </div>
-                            }
-                            <ShadTooltip content={flow.name}>
-                                <div className="w-full truncate">{flow.name}</div>
-                            </ShadTooltip>
-                        </CardTitle>
-                    </div>
-                    <CardDescription className="pb-2 pt-2">
-                        <ShadTooltip side="bottom" styleClasses="z-50" content={flow.description}>
-                            <div className="truncate-doubleline">{flow.description}</div>
-                        </ShadTooltip>
-                    </CardDescription>
-                </CardHeader>
-            </div>
-
-            <CardFooter>
-                <div className="flex w-full items-center justify-between gap-2">
-                    <div className="flex w-full flex-wrap justify-end gap-2">
-                        <Button
-                            onClick={() => {
-                                updateIds(flow.data!);
-                                addFlow(true, flow).then((id) => {
-                                    navigate("/flow/" + id);
-                                });
-                            }}
-                            tabIndex={-1}
-                            variant="outline"
-                            size="sm"
-                            className="whitespace-nowrap "
-                        >
-                            <IconComponent
-                                name="ExternalLink"
-                                className="main-page-nav-button select-none"
-                            />
-                            Select Flow
-                        </Button>
-                    </div>
                 </div>
-            </CardFooter>
+              )}
-        </Card>
+              {(!flow.icon || !isEmoji(flow.icon)) && (
-    );
+                <div
+                  className="flex items-center justify-center rounded-md p-2 align-middle"
+                  style={{ backgroundColor: flow.icon_bg_color }}
+                >
+                  <IconComponent
+                    className={cn("h-7 w-7 flex-shrink-0 text-flow-icon")}
+                    name={flow.icon || "Group"}
+                  />
+                </div>
+              )}
+              <ShadTooltip content={flow.name}>
+                <div className="w-full truncate">{flow.name}</div>
+              </ShadTooltip>
+            </CardTitle>
+          </div>
+          <CardDescription className="pb-2 pt-2">
+            <ShadTooltip
+              side="bottom"
+              styleClasses="z-50"
+              content={flow.description}
+            >
+              <div className="truncate-doubleline">{flow.description}</div>
+            </ShadTooltip>
+          </CardDescription>
+        </CardHeader>
+      </div>
+
+      <CardFooter>
+        <div className="flex w-full items-center justify-between gap-2">
+          <div className="flex w-full flex-wrap justify-end gap-2">
+            <Button
+              onClick={() => {
+                updateIds(flow.data!);
+                addFlow(true, flow).then((id) => {
+                  navigate("/flow/" + id);
+                });
+              }}
+              tabIndex={-1}
+              variant="outline"
+              size="sm"
+              className="whitespace-nowrap "
+            >
+              <IconComponent
+                name="ExternalLink"
+                className="main-page-nav-button select-none"
+              />
+              Select Flow
+            </Button>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  );
 }