Merge branch 'fix/minor_ui_adjustments' of https://github.com/langflow-ai/langflow into fix/minor_ui_adjustments

2024-06-10 17:23:27 -03:00 · 2024-06-10 17:23:27 -03:00 · 17d3d177c1
commit 17d3d177c1
parent d028d83d37 8f3706b6b7
66 changed files with 352 additions and 229 deletions
--- a/.gitattributes
+++ b/.gitattributes
@ -11,12 +11,12 @@
 *.ts text
 *.tsx text
 *.md text
-*.mdx text working-tree-encoding = UTF-8
+*.mdx text
 *.yml text
 *.yaml text
 *.xml text
 *.csv text
-*.json text working-tree-encoding = UTF-8
+*.json text
 *.sh text
 *.Dockerfile text
 Dockerfile text
--- a/src/backend/base/langflow/api/utils.py
+++ b/src/backend/base/langflow/api/utils.py
@ -219,7 +219,7 @@ async def build_and_cache_graph_from_db(flow_id: str, session: Session, chat_ser
        if vertex is None:
            raise ValueError(f"Vertex {vertex_id} not found")
        if not vertex._raw_params.get("session_id"):
-            vertex.update_raw_params({"session_id": flow_id})
+            vertex.update_raw_params({"session_id": flow_id}, overwrite=True)
    await chat_service.set_cache(flow_id, graph)
    return graph

--- a/src/backend/base/langflow/api/v1/files.py
+++ b/src/backend/base/langflow/api/v1/files.py
@ -110,7 +110,7 @@ async def download_profile_picture(
        extension = file_name.split(".")[-1]
        config_dir = get_storage_service().settings_service.settings.config_dir
        config_path = Path(config_dir)
-        folder_path = config_path / 'profile_pictures' / folder_name
+        folder_path = config_path / "profile_pictures" / folder_name
        content_type = build_content_type_from_extension(extension)
        file_content = await storage_service.get_file(flow_id=folder_path, file_name=file_name)
        return StreamingResponse(BytesIO(file_content), media_type=content_type)
@ -140,7 +140,6 @@ async def list_profile_pictures(storage_service: StorageService = Depends(get_st
        raise HTTPException(status_code=500, detail=str(e))


-
@router.get("/list/{flow_id}")
 async def list_files(
    flow_id: UUID = Depends(get_flow_id), storage_service: StorageService = Depends(get_storage_service)
--- a/src/backend/base/langflow/base/vectorstores/utils.py
+++ b/src/backend/base/langflow/base/vectorstores/utils.py
@ -15,7 +15,7 @@ def chroma_collection_to_records(collection_dict: dict):
    for i, doc in enumerate(collection_dict["documents"]):
        record_dict = {
            "id": collection_dict["ids"][i],
-            "document": doc,
+            "text": doc,
        }
        if "metadatas" in collection_dict:
            for key, value in collection_dict["metadatas"][i].items():
--- a/src/backend/base/langflow/components/outputs/RecordsOutput.py
+++ b/src/backend/base/langflow/components/outputs/RecordsOutput.py
@ -16,4 +16,5 @@ class RecordOutput(CustomComponent):
        }

    def build(self, input_value: Record) -> Record:
+        self.status = input_value
        return input_value
--- a/src/backend/base/langflow/components/retrievers/SelfQueryRetriever.py
+++ b/src/backend/base/langflow/components/retrievers/SelfQueryRetriever.py
@ -0,0 +1,68 @@
+# from langflow.field_typing import Data
+from langchain.chains.query_constructor.base import AttributeInfo
+from langchain.retrievers.self_query.base import SelfQueryRetriever
+from langchain_core.vectorstores import VectorStore
+
+from langflow.custom import CustomComponent
+from langflow.field_typing import BaseLanguageModel, Text
+from langflow.schema import Record
+from langflow.schema.message import Message
+
+
+class SelfQueryRetrieverComponent(CustomComponent):
+    display_name: str = "Self Query Retriever"
+    description: str = "Retriever that uses a vector store and an LLM to generate the vector store queries."
+    icon = "LangChain"
+
+    def build_config(self):
+        return {
+            "query": {
+                "display_name": "Query",
+                "input_types": ["Message", "Text"],
+                "info": "Query to be passed as input.",
+            },
+            "vectorstore": {
+                "display_name": "Vector Store",
+                "info": "Vector Store to be passed as input.",
+            },
+            "attribute_infos": {
+                "display_name": "Metadata Field Info",
+                "info": "Metadata Field Info to be passed as input.",
+            },
+            "document_content_description": {
+                "display_name": "Document Content Description",
+                "info": "Document Content Description to be passed as input.",
+            },
+            "llm": {
+                "display_name": "LLM",
+                "info": "LLM to be passed as input.",
+            },
+        }
+
+    def build(
+        self,
+        query: Message,
+        vectorstore: VectorStore,
+        attribute_infos: list[Record],
+        document_content_description: Text,
+        llm: BaseLanguageModel,
+    ) -> Record:
+        metadata_field_infos = [AttributeInfo(**record.data) for record in attribute_infos]
+        self_query_retriever = SelfQueryRetriever.from_llm(
+            llm=llm,
+            vectorstore=vectorstore,
+            document_contents=document_content_description,
+            metadata_field_info=metadata_field_infos,
+            enable_limit=True,
+        )
+
+        if isinstance(query, Message):
+            input_text = query.text
+        elif isinstance(query, str):
+            input_text = query
+        else:
+            raise ValueError(f"Query type {type(query)} not supported.")
+        documents = self_query_retriever.invoke(input=input_text)
+        records = [Record.from_document(document) for document in documents]
+        self.status = records
+        return records
--- a/src/backend/base/langflow/components/vectorstores/Chroma.py
+++ b/src/backend/base/langflow/components/vectorstores/Chroma.py
@ -1,3 +1,4 @@
+from copy import deepcopy
 from typing import List, Optional, Union

 import chromadb
@ -6,6 +7,7 @@ from langchain_chroma import Chroma
 from langchain_core.embeddings import Embeddings
 from langchain_core.retrievers import BaseRetriever
 from langchain_core.vectorstores import VectorStore
+
 from langflow.base.vectorstores.utils import chroma_collection_to_records
 from langflow.custom import CustomComponent
 from langflow.schema import Record
@ -48,6 +50,11 @@ class ChromaComponent(CustomComponent):
                "display_name": "Server SSL Enabled",
                "advanced": True,
            },
+            "allow_duplicates": {
+                "display_name": "Allow Duplicates",
+                "advanced": True,
+                "info": "If false, will not add documents that are already in the Vector Store.",
+            },
        }

    def build(
@ -61,6 +68,7 @@ class ChromaComponent(CustomComponent):
        chroma_server_host: Optional[str] = None,
        chroma_server_http_port: Optional[int] = None,
        chroma_server_grpc_port: Optional[int] = None,
+        allow_duplicates: bool = False,
    ) -> Union[VectorStore, BaseRetriever]:
        """
        Builds the Vector Store or BaseRetriever object.
@ -75,6 +83,7 @@ class ChromaComponent(CustomComponent):
        - chroma_server_host (Optional[str]): The host for the Chroma server.
        - chroma_server_http_port (Optional[int]): The HTTP port for the Chroma server.
        - chroma_server_grpc_port (Optional[int]): The gRPC port for the Chroma server.
+        - allow_duplicates (bool): Whether to allow duplicates in the Vector Store.

        Returns:
        - Union[VectorStore, BaseRetriever]: The Vector Store or BaseRetriever object.
@ -93,35 +102,34 @@ class ChromaComponent(CustomComponent):
            )
            client = chromadb.HttpClient(settings=chroma_settings)

-        # If documents, then we need to create a Chroma instance using .from_documents
-
        # Check index_directory and expand it if it is a relative path
        if index_directory is not None:
            index_directory = self.resolve_path(index_directory)

+        chroma = Chroma(
+            persist_directory=index_directory,
+            client=client,
+            embedding_function=embedding,
+            collection_name=collection_name,
+        )
+        if allow_duplicates:
+            stored_records = []
+        else:
+            stored_records = chroma_collection_to_records(chroma.get())
+            _stored_documents_without_id = []
+            for record in deepcopy(stored_records):
+                del record.id
+                _stored_documents_without_id.append(record)
        documents = []
        for _input in inputs or []:
            if isinstance(_input, Record):
-                documents.append(_input.to_lc_document())
+                if _input not in _stored_documents_without_id:
+                    documents.append(_input.to_lc_document())
            else:
-                documents.append(_input)
-        if documents is not None and embedding is not None:
-            if len(documents) == 0:
-                raise ValueError("If documents are provided, there must be at least one document.")
-            chroma = Chroma.from_documents(
-                documents=documents,  # type: ignore
-                persist_directory=index_directory,
-                collection_name=collection_name,
-                embedding=embedding,
-                client=client,
-            )
-        else:
-            chroma = Chroma(
-                persist_directory=index_directory,
-                client=client,
-                embedding_function=embedding,
-            )
+                raise ValueError("Inputs must be a Record objects.")

-        store = chroma.get()
-        self.status = chroma_collection_to_records(store)
+        if documents and embedding is not None:
+            chroma.add_documents(documents)
+
+        self.status = stored_records
        return chroma
--- a/src/backend/base/langflow/custom/custom_component/custom_component.py
+++ b/src/backend/base/langflow/custom/custom_component/custom_component.py
@ -126,8 +126,11 @@ class CustomComponent(Component):
    @staticmethod
    def resolve_path(path: str) -> str:
        """Resolves the path to an absolute path."""
+        if not path:
+            return path
        path_object = Path(path)
-        if path_object.parts[0] == "~":
+
+        if path_object.parts and path_object.parts[0] == "~":
            path_object = path_object.expanduser()
        elif path_object.is_relative_to("."):
            path_object = path_object.resolve()
--- a/src/backend/base/langflow/field_typing/prompt.py
+++ b/src/backend/base/langflow/field_typing/prompt.py
@ -25,6 +25,7 @@ class Prompt(Record):
        prompt_template = PromptTemplate.from_template(self.template)
        variables_with_str_values = dict_values_to_string(self.variables)
        formatted_prompt = prompt_template.format(**variables_with_str_values)
+        self.text = formatted_prompt
        return formatted_prompt

    @classmethod
--- a/src/backend/base/langflow/helpers/folders.py
+++ b/src/backend/base/langflow/helpers/folders.py
@ -20,4 +20,4 @@ def generate_unique_folder_name(folder_name, user_id, session):

        # If a folder with the name already exists, append (n) to the name and increment n
        folder_name = f"{original_name} ({n})"
-        n += 1
+        n += 1
--- a/src/backend/base/langflow/schema/record.py
+++ b/src/backend/base/langflow/schema/record.py
@ -1,12 +1,12 @@
 import copy
 import json
-from typing import cast, Optional
+from typing import Optional, cast

 from langchain_core.documents import Document
 from langchain_core.messages import AIMessage, BaseMessage, HumanMessage, SystemMessage
+from langchain_core.prompt_values import ImagePromptValue
 from langchain_core.prompts.image import ImagePromptTemplate
 from pydantic import BaseModel, model_serializer, model_validator
-from langchain_core.prompt_values import ImagePromptValue


 class Record(BaseModel):
@ -200,3 +200,6 @@ class Record(BaseModel):

    def __contains__(self, key):
        return key in self.data
+
+    def __eq__(self, other):
+        return isinstance(other, Record) and self.data == other.data
--- a/src/frontend/.prettierignore
+++ b/src/frontend/.prettierignore
@ -1 +1 @@
-build/*
+build/*
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@ -82,7 +82,7 @@
    "start": "vite",
    "build": "vite build",
    "serve": "vite preview",
-    "format": "npx prettier --write \"{docs,src}/**/*.{js,jsx,ts,tsx,json,md}\" --ignore-path .prettierignore",
+    "format": "npx prettier --write \"{tests,src}/**/*.{js,jsx,ts,tsx,json,md}\" --ignore-path .prettierignore",
    "type-check": "tsc --noEmit --pretty --project tsconfig.json && vite"
  },
  "simple-git-hooks": {
--- a/src/frontend/src/CustomNodes/GenericNode/components/outputModal/components/switchOutputView/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/outputModal/components/switchOutputView/index.tsx
@ -28,7 +28,7 @@ export default function SwitchOutputView(nodeId): JSX.Element {
  if (resultMessage.raw) {
    resultMessage = resultMessage.raw;
  }
-  console.log("resultType", results);
+
  return (
    <>
      <Case condition={!resultType || resultType === "unknown"}>
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@ -82,7 +82,9 @@ export default function ParameterComponent({
  const [openOutputModal, setOpenOutputModal] = useState(false);
  const flowPool = useFlowStore((state) => state.flowPool);

-  const displayOutputPreview = !!flowPool[data.id];
+  const displayOutputPreview =
+    !!flowPool[data.id] &&
+    flowPool[data.id][flowPool[data.id].length - 1]?.valid;

  const unknownOutput = !!(
    flowPool[data.id] &&
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@ -13,7 +13,7 @@ import {
  TOOLTIP_OUTDATED_NODE,
 } from "../../constants/constants";
 import { BuildStatus } from "../../constants/enums";
-import { getSpecificClassFromBuildStatus } from "../helpers/get-class-from-build-status";
+import { postCustomComponent } from "../../controllers/API";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
 import useAlertStore from "../../stores/alertStore";
 import { useDarkStore } from "../../stores/darkStore";
@ -25,6 +25,8 @@ import { NodeDataType } from "../../types/flow";
 import { handleKeyDown, scapedJSONStringfy } from "../../utils/reactflowUtils";
 import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
 import { classNames, cn } from "../../utils/utils";
+import { countHandlesFn } from "../helpers/count-handles";
+import { getSpecificClassFromBuildStatus } from "../helpers/get-class-from-build-status";
 import useCheckCodeValidity from "../hooks/use-check-code-validity";
 import useIconNodeRender from "../hooks/use-icon-render";
 import useIconStatus from "../hooks/use-icons-status";
@ -34,9 +36,7 @@ import useValidationStatusString from "../hooks/use-validation-status-string";
 import getFieldTitle from "../utils/get-field-title";
 import sortFields from "../utils/sort-fields";
 import ParameterComponent from "./components/parameterComponent";
-import { postCustomComponent } from "../../controllers/API";
 import { useShortcutsStore } from "../../stores/shortcuts";
-import { countHandlesFn } from "../helpers/count-handles";

 export default function GenericNode({
  data,
@ -260,6 +260,7 @@ export default function GenericNode({
          openAdvancedModal={false}
          onCloseAdvancedModal={() => {}}
          selected={selected}
+          updateNode={handleUpdateCode}
        />
      </NodeToolbar>
    );
--- a/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
+++ b/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
@ -4,11 +4,21 @@ import Loading from "../../components/ui/loading";
 import Xmark from "../../components/ui/xmark";
 import { BuildStatus } from "../../constants/enums";
 import { VertexBuildTypeAPI } from "../../types/api";
+import { cn } from "../../utils/utils";

 const useIconStatus = (
  buildStatus: BuildStatus | undefined,
  validationStatus: VertexBuildTypeAPI | null,
 ) => {
+  const conditionSuccess = validationStatus && validationStatus.valid;
+  const conditionInactive =
+    validationStatus &&
+    !validationStatus.valid &&
+    buildStatus === BuildStatus.INACTIVE;
+  const conditionError =
+    buildStatus === BuildStatus.ERROR ||
+    (validationStatus && !validationStatus.valid);
+
  const renderIconStatus = () => {
    if (buildStatus === BuildStatus.BUILDING) {
      return <Loading className="text-medium-indigo" />;
@ -17,31 +27,30 @@ const useIconStatus = (
        <>
          <IconComponent
            name="Play"
-            className="absolute ml-0.5 h-5 fill-current stroke-2 text-medium-indigo opacity-0 transition-all group-hover:opacity-100"
+            className={cn(
+              !conditionSuccess && !conditionInactive && !conditionError
+                ? "opacity-100"
+                : "opacity-0",
+              "absolute ml-0.5 h-5 fill-current stroke-2 text-muted-foreground transition-all group-hover:text-medium-indigo group-hover/node:opacity-100",
+            )}
          />
-          {validationStatus && validationStatus.valid ? (
+          {conditionSuccess ? (
            <Checkmark
-              className="absolute ml-0.5 h-5 stroke-2 text-status-green opacity-100 transition-all group-hover:opacity-0"
+              className="absolute ml-0.5 h-5 stroke-2 text-status-green opacity-100 transition-all group-hover/node:opacity-0"
              isVisible={true}
            />
-          ) : validationStatus &&
-            !validationStatus.valid &&
-            buildStatus === BuildStatus.INACTIVE ? (
+          ) : conditionInactive ? (
            <IconComponent
              name="Play"
-              className="absolute ml-0.5 h-5 fill-current stroke-2 text-status-green opacity-30 transition-all group-hover:opacity-0"
+              className="absolute ml-0.5 h-5 fill-current stroke-2 text-status-gray opacity-30 transition-all group-hover/node:opacity-0"
            />
-          ) : buildStatus === BuildStatus.ERROR ||
-            (validationStatus && !validationStatus.valid) ? (
+          ) : conditionError ? (
            <Xmark
              isVisible={true}
-              className="absolute ml-0.5 h-5 fill-current stroke-2 text-status-red opacity-100 transition-all group-hover:opacity-0"
+              className="absolute ml-0.5 h-5 fill-current stroke-2 text-status-red opacity-100 transition-all group-hover/node:opacity-0"
            />
          ) : (
-            <IconComponent
-              name="Play"
-              className="absolute ml-0.5 h-5 fill-current stroke-2 text-muted-foreground opacity-100 transition-all group-hover:opacity-0"
-            />
+            <></>
          )}
        </>
      );
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@ -1,6 +1,6 @@
 import { Transition } from "@headlessui/react";
+import { useMemo, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
-import { useEffect, useMemo, useRef, useState } from "react";
 import IOModal from "../../modals/IOModal";
 import ApiModal from "../../modals/apiModal/views";
 import ShareModal from "../../modals/shareModal";
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@ -26,7 +26,6 @@ import {
  TabsTrigger,
 } from "../../components/ui/tabs";
 import { LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants";
-import ExportModal from "../../modals/exportModal";
 import { Case } from "../../shared/components/caseComponent";
 import { useDarkStore } from "../../stores/darkStore";
 import useFlowStore from "../../stores/flowStore";
@ -43,9 +42,9 @@ import IconComponent from "../genericIconComponent";
 import InputComponent from "../inputComponent";
 import KeypairListComponent from "../keypairListComponent";
 import ShadTooltip from "../shadTooltipComponent";
+import { Button } from "../ui/button";
 import { Label } from "../ui/label";
 import { Switch } from "../ui/switch";
-import { Button } from "../ui/button";

 export default function CodeTabsComponent({
  flow,
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@ -16,11 +16,11 @@ import FlowSettingsModal from "../../../../modals/flowSettingsModal";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { useShortcutsStore } from "../../../../stores/shortcuts";
 import { cn } from "../../../../utils/utils";
 import IconComponent from "../../../genericIconComponent";
 import ShadTooltip from "../../../shadTooltipComponent";
 import { Button } from "../../../ui/button";
-import { useShortcutsStore } from "../../../../stores/shortcuts";

 export const MenuBar = ({}: {}): JSX.Element => {
  const shortcuts = useShortcutsStore((state) => state.shortcuts);
@ -115,7 +115,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
                      title: UPLOAD_ERROR_ALERT,
                      list: [error],
                    });
-                  }
+                  },
                );
              }}
            >
@ -201,7 +201,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
              name={isBuilding || saveLoading ? "Loader2" : "CheckCircle2"}
              className={cn(
                "h-4 w-4",
-                isBuilding || saveLoading ? "animate-spin" : "animate-wiggle"
+                isBuilding || saveLoading ? "animate-spin" : "animate-wiggle",
              )}
            />
            {printByBuildStatus()}
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@ -1,9 +1,9 @@
 import { useContext } from "react";
-import profileCircle from "../../assets/profile-circle.png";
 import { FaDiscord, FaGithub } from "react-icons/fa";
 import { RiTwitterXFill } from "react-icons/ri";
 import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import AlertDropdown from "../../alerts/alertDropDown";
+import profileCircle from "../../assets/profile-circle.png";
 import {
  BACKEND_URL,
  BASE_URL_API,
@ -18,7 +18,6 @@ import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useLocationStore } from "../../stores/locationStore";
 import { useStoreStore } from "../../stores/storeStore";
-import { gradients } from "../../utils/styleUtils";
 import IconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
 import {
@ -79,7 +78,7 @@ export default function Header(): JSX.Element {

  return (
    <div className="header-arrangement">
-      <div className="header-start-display lg:w-[30%]">
+      <div className="header-start-display lg:w-[407px]">
        <Link to="/all" className="cursor-pointer" onClick={checkForChanges}>
          <span className="ml-4 text-2xl">⛓️</span>
        </Link>
@ -202,8 +201,9 @@ export default function Header(): JSX.Element {
                      `${BACKEND_URL.slice(
                        0,
                        BACKEND_URL.length - 1,
-                      )}${BASE_URL_API}files/profile_pictures/${userData?.profile_image ?? "Space/046-rocket.png"}` ??
-                      profileCircle
+                      )}${BASE_URL_API}files/profile_pictures/${
+                        userData?.profile_image ?? "Space/046-rocket.png"
+                      }` ?? profileCircle
                    }
                    className="h-7 w-7 shrink-0 focus-visible:outline-0"
                  />
@ -219,8 +219,9 @@ export default function Header(): JSX.Element {
                            `${BACKEND_URL.slice(
                              0,
                              BACKEND_URL.length - 1,
-                            )}${BASE_URL_API}files/profile_pictures/${userData?.profile_image}` ??
-                            profileCircle
+                            )}${BASE_URL_API}files/profile_pictures/${
+                              userData?.profile_image
+                            }` ?? profileCircle
                          }
                          className="h-5 w-5 focus-visible:outline-0 "
                        />
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@ -48,12 +48,12 @@ export default function InputFileComponent({
  const handleButtonClick = (): void => {
    // Create a file input element
    const input = document.createElement("input");
+    document.body.appendChild(input);
    input.type = "file";
    input.accept = fileTypes?.join(",");
    input.style.display = "none"; // Hidden from view
    input.multiple = false; // Allow only one file selection
-
-    input.onchange = (event: Event): void => {
+    const onChangeFile = (event: Event): void => {
      setLoading(true);

      // Get the selected file
@ -90,6 +90,8 @@ export default function InputFileComponent({
      }
    };

+    input.addEventListener("change", onChangeFile);
+
    // Trigger the file selection dialog
    input.click();
  };
--- a/src/frontend/src/components/tableComponent/components/TableOptions/index.tsx
+++ b/src/frontend/src/components/tableComponent/components/TableOptions/index.tsx
@ -1,7 +1,7 @@
 import { cn } from "../../../../utils/utils";
+import IconComponent from "../../../genericIconComponent";
 import ShadTooltip from "../../../shadTooltipComponent";
 import { Button } from "../../../ui/button";
-import IconComponent from "../../../genericIconComponent";

 export default function TableOptions({
  resetGrid,
@ -18,7 +18,7 @@ export default function TableOptions({
 }): JSX.Element {
  return (
    <div className={cn("absolute bottom-3 left-6")}>
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-3">
        <div>
          <ShadTooltip content="Reset Columns">
            <Button
@ -31,7 +31,10 @@ export default function TableOptions({
            >
              <IconComponent
                name="RotateCcw"
-                className={cn("h-5 w-5 text-primary transition-all")}
+                strokeWidth={2}
+                className={cn(
+                  "h-5 w-5 text-primary transition-all hover:text-accent-foreground",
+                )}
              />
            </Button>
          </ShadTooltip>
@ -81,8 +84,8 @@ export default function TableOptions({
                <IconComponent
                  name="Trash2"
                  className={cn(
-                    "h-5 w-5 text-primary transition-all",
-                    !hasSelection ? "" : "hover:text-destructive",
+                    "h-5 w-5  text-primary transition-all",
+                    !hasSelection ? "" : "hover:text-status-red ",
                  )}
                />
              </Button>
--- a/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx
+++ b/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx
@ -1,6 +1,5 @@
 import { CustomCellRendererProps } from "ag-grid-react";
 import { cn, isTimeStampString } from "../../../../utils/utils";
-import ArrayReader from "../../../arrayReaderComponent";
 import DateReader from "../../../dateReaderComponent";
 import NumberReader from "../../../numberReader";
 import ObjectRender from "../../../objectRender";
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/tableComponent/index.tsx
@ -12,7 +12,6 @@ import { cn, toTitleCase } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
 import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
 import TableOptions from "./components/TableOptions";
-import { useParams } from "react-router-dom";
 import resetGrid from "./utils/reset-grid-columns";

 interface TableComponentProps extends AgGridReactProps {
@ -21,6 +20,7 @@ interface TableComponentProps extends AgGridReactProps {
  alertTitle?: string;
  alertDescription?: string;
  editable?: boolean | string[];
+  pagination?: boolean;
  onDelete?: () => void;
  onDuplicate?: () => void;
 }
@ -134,7 +134,6 @@ const TableComponent = forwardRef<
          }}
          columnDefs={colDef}
          ref={realRef}
-          pagination={true}
          onGridReady={onGridReady}
          onColumnMoved={onColumnMoved}
          onStateUpdated={(e) => {
@ -143,18 +142,20 @@ const TableComponent = forwardRef<
            }
          }}
        />
-        <TableOptions
-          stateChange={columnStateChange}
-          hasSelection={realRef.current?.api?.getSelectedRows().length > 0}
-          duplicateRow={props.onDuplicate ? props.onDuplicate : undefined}
-          deleteRow={props.onDelete ? props.onDelete : undefined}
-          resetGrid={() => {
-            resetGrid(realRef, initialColumnDefs);
-            setTimeout(() => {
-              setColumnStateChange(false);
-            }, 100);
-          }}
-        />
+        {props.pagination && (
+          <TableOptions
+            stateChange={columnStateChange}
+            hasSelection={realRef.current?.api?.getSelectedRows().length > 0}
+            duplicateRow={props.onDuplicate ? props.onDuplicate : undefined}
+            deleteRow={props.onDelete ? props.onDelete : undefined}
+            resetGrid={() => {
+              resetGrid(realRef, initialColumnDefs);
+              setTimeout(() => {
+                setColumnStateChange(false);
+              }, 100);
+            }}
+          />
+        )}
      </div>
    );
  },
--- a/src/frontend/src/components/ui/button.tsx
+++ b/src/frontend/src/components/ui/button.tsx
@ -5,7 +5,7 @@ import { cn } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";

 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none  ring-offset-background",
+  "inline-flex items-center gap-2 justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none  ring-offset-background",
  {
    variants: {
      variant: {
--- a/src/frontend/src/controllers/API/api.tsx
+++ b/src/frontend/src/controllers/API/api.tsx
@ -1,4 +1,4 @@
-import axios, { Axios, AxiosError, AxiosInstance } from "axios";
+import axios, { AxiosError, AxiosInstance } from "axios";
 import { useContext, useEffect } from "react";
 import { Cookies } from "react-cookie";
 import { renewAccessToken } from ".";
--- a/src/frontend/src/icons/LangChain/LangChainIcon.jsx
+++ b/src/frontend/src/icons/LangChain/LangChainIcon.jsx
@ -0,0 +1,24 @@
+const SvgLangChainIcon = (props) => (
+  <svg
+    viewBox="0 0 81 41"
+    fill="none"
+    height="200"
+    width="400"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M61.514 11.157a3.94 3.94 0 0 0-2.806 1.158l-3.018 3.01a3.95 3.95 0 0 0-1.147 3.095l.019.191a3.9 3.9 0 0 0 1.128 2.314 3.6 3.6 0 0 0 1.496.9q.046.263.047.53c0 .797-.31 1.546-.874 2.107l-.186.186c-1.008-.344-1.848-.847-2.607-1.604a6.9 6.9 0 0 1-1.927-3.67l-.034-.193-.153.124a4 4 0 0 0-.294.265l-3.018 3.01a3.957 3.957 0 0 0 2.807 6.757 3.96 3.96 0 0 0 2.806-1.158l3.019-3.01a3.96 3.96 0 0 0 0-5.599 3.9 3.9 0 0 0-1.462-.92 3.25 3.25 0 0 1 .924-2.855 6.9 6.9 0 0 1 2.664 1.656 6.9 6.9 0 0 1 1.926 3.67l.035.193.153-.124q.155-.125.296-.267l3.018-3.01a3.956 3.956 0 0 0-2.808-6.756z"
+      fill="CurrentColor"
+    />
+    <path
+      d="M59.897.149h-39.49C9.153.149 0 9.279 0 20.5c0 11.222 9.154 20.351 20.406 20.351h39.49c11.253 0 20.407-9.13 20.407-20.35C80.303 9.277 71.149.148 59.897.148M40.419 32.056c-.651.134-1.384.158-1.882-.36-.183.42-.612.199-.943.144-.03.085-.057.16-.085.246-1.1.073-1.925-1.046-2.449-1.89-1.04-.562-2.222-.904-3.285-1.492-.062.968.15 2.17-.774 2.794-.047 1.862 2.824.22 3.088 1.608-.204.022-.43-.033-.594.124-.749.726-1.608-.55-2.471-.023-1.16.582-1.276 1.059-2.71 1.179-.08-.12-.047-.2.02-.273.404-.468.433-1.02 1.122-1.22-.71-.111-1.303.28-1.901.59-.778.317-.772-.717-1.968.054-.132-.108-.069-.206.007-.289.304-.37.704-.425 1.155-.405-2.219-1.233-3.263 1.508-4.288.145-.308.081-.424.358-.618.553-.167-.183-.04-.405-.033-.62-.2-.094-.453-.139-.394-.459-.391-.132-.665.1-.957.32-.263-.203.178-.5.26-.712.234-.407.769-.084 1.04-.377.772-.437 1.847.273 2.729.153.68.085 1.52-.61 1.179-1.305-.726-.926-.598-2.137-.614-3.244-.09-.645-1.643-1.467-2.092-2.163-.555-.627-.987-1.353-1.42-2.068-1.561-3.014-1.07-6.886-3.037-9.685-.89.49-2.048.259-2.816-.399-.414.377-.432.87-.465 1.392-.994-.99-.87-2.863-.075-3.966a5.3 5.3 0 0 1 1.144-1.11c.098-.07.131-.14.129-.25.786-3.524 6.144-2.845 7.838-.348 1.229 1.537 1.6 3.57 2.994 4.997 1.875 2.047 4.012 3.85 5.742 6.03 1.637 1.992 2.806 4.328 3.826 6.683.416.782.42 1.74 1.037 2.408.304.403 1.79 1.5 1.467 1.888.186.403 1.573.959 1.092 1.35zm26.026-12.024-3.018 3.01a6.96 6.96 0 0 1-2.875 1.728l-.056.016-.02.053a6.9 6.9 0 0 1-1.585 2.446l-3.019 3.01a6.94 6.94 0 0 1-4.932 2.035 6.94 6.94 0 0 1-4.932-2.035 6.95 6.95 0 0 1 0-9.838l3.018-3.01a6.9 6.9 0 0 1 2.871-1.721l.055-.017.02-.053a6.9 6.9 0 0 1 1.59-2.454l3.019-3.01a6.94 6.94 0 0 1 4.932-2.035c1.865 0 3.616.723 4.932 2.035a6.9 6.9 0 0 1 2.04 4.92c0 1.86-.724 3.607-2.04 4.918z"
+      fill="CurrentColor"
+    />
+    <path
+      d="M28.142 28.413c-.265 1.03-.35 2.782-1.694 2.832-.11.595.413.819.89.627.472-.215.696.171.855.556.729.106 1.806-.242 1.847-1.103-1.088-.625-1.424-1.813-1.896-2.914z"
+      fill="CurrentColor"
+    />
+  </svg>
+);
+export default SvgLangChainIcon;
--- a/src/frontend/src/icons/LangChain/index.tsx
+++ b/src/frontend/src/icons/LangChain/index.tsx
@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import SvgLangChainIcon from "./LangChainIcon";
+
+export const LangChainIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <SvgLangChainIcon ref={ref} {...props} />;
+});
--- a/src/frontend/src/icons/LangChain/langchain-icon.svg
+++ b/src/frontend/src/icons/LangChain/langchain-icon.svg
@ -0,0 +1,5 @@
+<svg viewBox="0 0 81 41" fill="none" height="200" width="400"  xmlns="http://www.w3.org/2000/svg">
+  <path d="M61.514 11.157a3.94 3.94 0 0 0-2.806 1.158l-3.018 3.01a3.95 3.95 0 0 0-1.147 3.095l.019.191a3.9 3.9 0 0 0 1.128 2.314 3.6 3.6 0 0 0 1.496.9q.046.263.047.53c0 .797-.31 1.546-.874 2.107l-.186.186c-1.008-.344-1.848-.847-2.607-1.604a6.9 6.9 0 0 1-1.927-3.67l-.034-.193-.153.124a4 4 0 0 0-.294.265l-3.018 3.01a3.957 3.957 0 0 0 2.807 6.757 3.96 3.96 0 0 0 2.806-1.158l3.019-3.01a3.96 3.96 0 0 0 0-5.599 3.9 3.9 0 0 0-1.462-.92 3.25 3.25 0 0 1 .924-2.855 6.9 6.9 0 0 1 2.664 1.656 6.9 6.9 0 0 1 1.926 3.67l.035.193.153-.124q.155-.125.296-.267l3.018-3.01a3.956 3.956 0 0 0-2.808-6.756z" fill="CurrentColor"/>
+  <path d="M59.897.149h-39.49C9.153.149 0 9.279 0 20.5c0 11.222 9.154 20.351 20.406 20.351h39.49c11.253 0 20.407-9.13 20.407-20.35C80.303 9.277 71.149.148 59.897.148M40.419 32.056c-.651.134-1.384.158-1.882-.36-.183.42-.612.199-.943.144-.03.085-.057.16-.085.246-1.1.073-1.925-1.046-2.449-1.89-1.04-.562-2.222-.904-3.285-1.492-.062.968.15 2.17-.774 2.794-.047 1.862 2.824.22 3.088 1.608-.204.022-.43-.033-.594.124-.749.726-1.608-.55-2.471-.023-1.16.582-1.276 1.059-2.71 1.179-.08-.12-.047-.2.02-.273.404-.468.433-1.02 1.122-1.22-.71-.111-1.303.28-1.901.59-.778.317-.772-.717-1.968.054-.132-.108-.069-.206.007-.289.304-.37.704-.425 1.155-.405-2.219-1.233-3.263 1.508-4.288.145-.308.081-.424.358-.618.553-.167-.183-.04-.405-.033-.62-.2-.094-.453-.139-.394-.459-.391-.132-.665.1-.957.32-.263-.203.178-.5.26-.712.234-.407.769-.084 1.04-.377.772-.437 1.847.273 2.729.153.68.085 1.52-.61 1.179-1.305-.726-.926-.598-2.137-.614-3.244-.09-.645-1.643-1.467-2.092-2.163-.555-.627-.987-1.353-1.42-2.068-1.561-3.014-1.07-6.886-3.037-9.685-.89.49-2.048.259-2.816-.399-.414.377-.432.87-.465 1.392-.994-.99-.87-2.863-.075-3.966a5.3 5.3 0 0 1 1.144-1.11c.098-.07.131-.14.129-.25.786-3.524 6.144-2.845 7.838-.348 1.229 1.537 1.6 3.57 2.994 4.997 1.875 2.047 4.012 3.85 5.742 6.03 1.637 1.992 2.806 4.328 3.826 6.683.416.782.42 1.74 1.037 2.408.304.403 1.79 1.5 1.467 1.888.186.403 1.573.959 1.092 1.35zm26.026-12.024-3.018 3.01a6.96 6.96 0 0 1-2.875 1.728l-.056.016-.02.053a6.9 6.9 0 0 1-1.585 2.446l-3.019 3.01a6.94 6.94 0 0 1-4.932 2.035 6.94 6.94 0 0 1-4.932-2.035 6.95 6.95 0 0 1 0-9.838l3.018-3.01a6.9 6.9 0 0 1 2.871-1.721l.055-.017.02-.053a6.9 6.9 0 0 1 1.59-2.454l3.019-3.01a6.94 6.94 0 0 1 4.932-2.035c1.865 0 3.616.723 4.932 2.035a6.9 6.9 0 0 1 2.04 4.92c0 1.86-.724 3.607-2.04 4.918z" fill="CurrentColor"/>
+  <path d="M28.142 28.413c-.265 1.03-.35 2.782-1.694 2.832-.11.595.413.819.89.627.472-.215.696.171.855.556.729.106 1.806-.242 1.847-1.103-1.088-.625-1.424-1.813-1.896-2.914z" fill="CurrentColor"/>
+</svg>
--- a/src/frontend/src/index.tsx
+++ b/src/frontend/src/index.tsx
@ -8,7 +8,6 @@ import "./style/index.css";
 // @ts-ignore
 import "./style/applies.css";
 // @ts-ignore
-import { StrictMode } from "react";
 import "./style/classes.css";

 const root = ReactDOM.createRoot(
--- a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
@ -254,7 +254,13 @@ export default function IOFieldView({
              <div className={left ? "h-56" : "h-full"}>
                <RecordsOutputComponent
                  pagination={!left}
-                  rows={flowPoolNode?.data?.artifacts?.records ?? []}
+                  rows={
+                    Array.isArray(flowPoolNode?.data?.artifacts)
+                      ? flowPoolNode?.data?.artifacts?.map(
+                          (artifact) => artifact.data,
+                        ) ?? []
+                      : [flowPoolNode?.data?.artifacts]
+                  }
                  columnMode="union"
                />
              </div>
--- a/src/frontend/src/modals/IOModal/components/SessionView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/SessionView/index.tsx
@ -1,20 +1,10 @@
-import {
-  CellEditRequestEvent,
-  ColDef,
-  ColGroupDef,
-  SelectionChangedEvent,
-} from "ag-grid-community";
+import { CellEditRequestEvent, SelectionChangedEvent } from "ag-grid-community";
 import { useState } from "react";
 import TableComponent from "../../../../components/tableComponent";
-import { Card, CardContent } from "../../../../components/ui/card";
+import useRemoveMessages from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages";
+import useUpdateMessage from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage";
 import useAlertStore from "../../../../stores/alertStore";
 import { useMessagesStore } from "../../../../stores/messagesStore";
-import useUpdateMessage from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage";
-import useRemoveMessages from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages";
-import HeaderMessagesComponent from "../../../../pages/SettingsPage/pages/messagesPage/components/headerMessages";
-import { Button } from "../../../../components/ui/button";
-import ForwardedIconComponent from "../../../../components/genericIconComponent";
-import { cn } from "../../../../utils/utils";

 export default function SessionView({ rows }: { rows: Array<any> }) {
  const columns = useMessagesStore((state) => state.columns);
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx
@ -18,7 +18,9 @@ const UploadFileButton = ({
      />
      <Button
        disabled={lockChat}
-        className={`font-bold text-white transition-all ${lockChat ? "cursor-not-allowed" : "hover:text-muted-foreground"}`}
+        className={`font-bold text-white transition-all ${
+          lockChat ? "cursor-not-allowed" : "hover:text-muted-foreground"
+        }`}
        onClick={handleButtonClick}
        variant="none"
        size="none"
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx
@ -1,6 +1,5 @@
 import ShortUniqueId from "short-unique-id";
 import useFileUpload from "./use-file-upload";
-import useAlertStore from "../../../../../../stores/alertStore";

 const fsErrorText =
  "Please ensure your file has one of the following extensions:";
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-handle-file-change.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-handle-file-change.tsx
@ -1,6 +1,6 @@
 import ShortUniqueId from "short-unique-id";
-import useFileUpload from "./use-file-upload";
 import useAlertStore from "../../../../../../stores/alertStore";
+import useFileUpload from "./use-file-upload";

 const fsErrorText =
  "Please ensure your file has one of the following extensions:";
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx
@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import ShortUniqueId from "short-unique-id";
-import useFileUpload from "./use-file-upload";
 import useAlertStore from "../../../../../../stores/alertStore";
+import useFileUpload from "./use-file-upload";

 const fsErrorText =
  "Please ensure your file has one of the following extensions:";
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
@ -94,7 +94,9 @@ export default function ChatInput({
        </div>

        <div
-          className={`absolute bottom-2 left-4 ${lockChat || saveLoading ? "cursor-not-allowed" : ""}`}
+          className={`absolute bottom-2 left-4 ${
+            lockChat || saveLoading ? "cursor-not-allowed" : ""
+          }`}
        >
          <UploadFileButton
            lockChat={lockChat || saveLoading}
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/fileCardWrapper/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/fileCardWrapper/index.tsx
@ -1,7 +1,7 @@
 import { useState } from "react";
 import ForwardedIconComponent from "../../../../../../../components/genericIconComponent";
-import formatFileName from "../../../filePreviewChat/utils/format-file-name";
 import FileCard from "../../../fileComponent";
+import formatFileName from "../../../filePreviewChat/utils/format-file-name";

 export default function FileCardWrapper({
  index,
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
@ -7,16 +7,12 @@ import remarkMath from "remark-math";
 import MaleTechnology from "../../../../../assets/male-technologist.png";
 import Robot from "../../../../../assets/robot.png";
 import CodeTabsComponent from "../../../../../components/codeTabsComponent";
-import IconComponent, {
-  ForwardedIconComponent,
-} from "../../../../../components/genericIconComponent";
+import IconComponent from "../../../../../components/genericIconComponent";
 import SanitizedHTMLWrapper from "../../../../../components/sanitizedHTMLWrapper";
 import useAlertStore from "../../../../../stores/alertStore";
 import useFlowStore from "../../../../../stores/flowStore";
 import { chatMessagePropsType } from "../../../../../types/components";
 import { classNames, cn } from "../../../../../utils/utils";
-import FileCard from "../fileComponent";
-import formatFileName from "../filePreviewChat/utils/format-file-name";
 import FileCardWrapper from "./components/fileCardWrapper";

 export default function ChatMessage({
--- a/src/frontend/src/modals/IOModal/components/chatView/fileComponent/utils/get-classes.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/fileComponent/utils/get-classes.tsx
@ -1,5 +1,7 @@
 export default function getClasses(isHovered: boolean): string {
-  return `relative ${false ? "h-20 w-20" : "h-20 w-80"} cursor-pointer rounded-lg border  border-ring bg-muted shadow transition duration-300 hover:drop-shadow-lg ${
+  return `relative ${
+    false ? "h-20 w-20" : "h-20 w-80"
+  } cursor-pointer rounded-lg border  border-ring bg-muted shadow transition duration-300 hover:drop-shadow-lg ${
    isHovered ? "shadow-md" : ""
  }`;
 }
--- a/src/frontend/src/modals/IOModal/components/chatView/fileComponent/utils/handle-download.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/fileComponent/utils/handle-download.tsx
@ -18,7 +18,10 @@ export default async function handleDownload({
    isDownloading = true;

    const response = await fetch(
-      `${BACKEND_URL.slice(0, BACKEND_URL.length - 1)}${BASE_URL_API}files/download/${content}`,
+      `${BACKEND_URL.slice(
+        0,
+        BACKEND_URL.length - 1,
+      )}${BASE_URL_API}files/download/${content}`,
    );
    if (!response.ok) {
      throw new Error("Network response was not ok");
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/src/frontend/src/modals/IOModal/index.tsx
@ -85,6 +85,7 @@ export default function IOModal({
  const [sessions, setSessions] = useState<string[]>([]);
  const messages = useMessagesStore((state) => state.messages);
  const setColumns = useMessagesStore((state) => state.setColumns);
+  const flowPool = useFlowStore((state) => state.flowPool);
  async function updateVertices() {
    return updateVerticesOrder(currentFlow!.id, null);
  }
@ -229,10 +230,6 @@ export default function IOModal({
                          key={index}
                        >
                          <AccordionComponent
-                            disabled={
-                              node.data.node!.template["input_value"]?.value ===
-                              ""
-                            }
                            trigger={
                              <div className="file-component-badge-div">
                                <ShadTooltip
@ -288,12 +285,20 @@ export default function IOModal({
                      const output = outputs.find(
                        (output) => output.id === node.id,
                      )!;
+                      const textOutputValue =
+                        (flowPool[node!.id] ?? [])[
+                          (flowPool[node!.id]?.length ?? 1) - 1
+                        ]?.data?.artifacts ?? "";
+                      const disabled =
+                        textOutputValue === "" ||
+                        JSON.stringify(textOutputValue) === "{}";
                      return (
                        <div
                          className="file-component-accordion-div"
                          key={index}
                        >
                          <AccordionComponent
+                            disabled={disabled}
                            trigger={
                              <div className="file-component-badge-div">
                                <ShadTooltip
@ -353,13 +358,22 @@ export default function IOModal({
                          });
                        }}
                      >
-                        <div className="flex w-full items-center justify-between border-b px-2 py-1 align-middle">
-                          <Badge variant="gray" size="md">
-                            {session}
-                          </Badge>
-                          <div className="flex items-center justify-center gap-2 align-middle">
+                        <div className="flex w-full items-center justify-between gap-2 overflow-hidden border-b px-2 py-3.5 align-middle">
+                          <ShadTooltip styleClasses="z-50" content={session}>
+                            <div className="flex min-w-0">
+                              <Badge
+                                variant="gray"
+                                size="md"
+                                className="block truncate"
+                              >
+                                {session}
+                              </Badge>
+                            </div>
+                          </ShadTooltip>
+                          <div className="flex shrink-0 items-center justify-center gap-2 align-middle">
                            <Button
-                              variant="ghost"
+                              variant="none"
+                              size="icon"
                              onClick={(e) => {
                                e.preventDefault();
                                e.stopPropagation();
@ -370,7 +384,7 @@ export default function IOModal({
                            >
                              <ShadTooltip
                                styleClasses="z-50"
-                                content={"delete"}
+                                content={"Delete"}
                              >
                                <div>
                                  <IconComponent
--- a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx
+++ b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx
@ -2,7 +2,6 @@ import { ColDef, ValueGetterParams } from "ag-grid-community";
 import { useMemo } from "react";
 import TableNodeCellRender from "../../../components/tableComponent/components/tableNodeCellRender";
 import TableToggleCellRender from "../../../components/tableComponent/components/tableToggleCellRender";
-import TableTooltipRender from "../../../components/tableComponent/components/tableTooltipRender";

 const useColumnDefs = (
  myData: any,
--- a/src/frontend/src/modals/editNodeModal/index.tsx
+++ b/src/frontend/src/modals/editNodeModal/index.tsx
@ -3,6 +3,7 @@ import { forwardRef, useEffect, useRef, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import TableComponent from "../../components/tableComponent";
 import { Badge } from "../../components/ui/badge";
+import { useDarkStore } from "../../stores/darkStore";
 import useFlowStore from "../../stores/flowStore";
 import { NodeDataType } from "../../types/flow";
 import BaseModal from "../baseModal";
@ -29,6 +30,8 @@ const EditNodeModal = forwardRef(
  ) => {
    const myData = useRef(cloneDeep(data));

+    const isDark = useDarkStore((state) => state.dark);
+
    const setNode = useFlowStore((state) => state.setNode);

    function changeAdvanced(n) {
@ -66,13 +69,15 @@ const EditNodeModal = forwardRef(
    //    }, []);

    return (
-      <BaseModal key={data.id} size="medium-tall" open={open} setOpen={setOpen}>
+      <BaseModal key={data.id} open={open} setOpen={setOpen}>
        <BaseModal.Trigger>
          <></>
        </BaseModal.Trigger>
        <BaseModal.Header description={data.node?.description!}>
          <span className="pr-2">{data.type}</span>
-          <Badge variant="secondary">ID: {data.id}</Badge>
+          <Badge variant={isDark ? "gray" : "secondary"}>
+            <span className="relative top-[0.6px]">ID: {data.id}</span>
+          </Badge>
        </BaseModal.Header>
        <BaseModal.Content>
          <div className="flex h-full flex-col">
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@ -99,7 +99,7 @@ const ExportModal = forwardRef(
          </span>
        </BaseModal.Content>

-        <BaseModal.Footer submit={{ label: "Download Flow" }} />
+        <BaseModal.Footer submit={{ label: "Export" }} />
      </BaseModal>
    );
  },
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@ -180,6 +180,7 @@ export default function Page({

  function handleUndo(e: KeyboardEvent) {
    e.preventDefault();
+    e.stopImmediatePropagation();
    if (!isWrappedWithClass(e, "noundo")) {
      undo();
    }
@ -187,6 +188,7 @@ export default function Page({

  function handleRedo(e: KeyboardEvent) {
    e.preventDefault();
+    e.stopImmediatePropagation();
    if (!isWrappedWithClass(e, "noundo")) {
      redo();
    }
@ -194,6 +196,7 @@ export default function Page({

  function handleGroup(e: KeyboardEvent) {
    e.preventDefault();
+    e.stopImmediatePropagation();
    if (selectionMenuVisible) {
      handleGroupNode();
    }
@ -202,6 +205,7 @@ export default function Page({
  function handleDuplicate(e: KeyboardEvent) {
    e.preventDefault();
    e.stopPropagation();
+    e.stopImmediatePropagation();
    const selectedNode = nodes.filter((obj) => obj.selected);
    if (selectedNode.length > 0) {
      paste(
@ -216,6 +220,7 @@ export default function Page({

  function handleCopy(e: KeyboardEvent) {
    e.preventDefault();
+    e.stopImmediatePropagation();
    if (
      !isWrappedWithClass(e, "nocopy") &&
      window.getSelection()?.toString().length === 0 &&
@ -227,6 +232,7 @@ export default function Page({

  function handleCut(e: KeyboardEvent) {
    e.preventDefault();
+    e.stopImmediatePropagation();
    if (
      !isWrappedWithClass(e, "nocopy") &&
      window.getSelection()?.toString().length === 0 &&
@ -238,6 +244,7 @@ export default function Page({

  function handlePaste(e: KeyboardEvent) {
    e.preventDefault();
+    e.stopImmediatePropagation();
    if (
      !isWrappedWithClass(e, "nocopy") &&
      window.getSelection()?.toString().length === 0 &&
@ -253,6 +260,7 @@ export default function Page({

  function handleDelete(e: KeyboardEvent) {
    e.preventDefault();
+    e.stopImmediatePropagation();
    if (!isWrappedWithClass(e, "nodelete") && lastSelection) {
      takeSnapshot();
      deleteNode(lastSelection.nodes.map((node) => node.id));
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@ -3,9 +3,8 @@ import { useEffect, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useUpdateNodeInternals } from "reactflow";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
-import IconComponent, {
-  ForwardedIconComponent,
-} from "../../../../components/genericIconComponent";
+import IconComponent from "../../../../components/genericIconComponent";
+import RenderIcons from "../../../../components/renderIconComponent";
 import ShadTooltip from "../../../../components/shadTooltipComponent";
 import {
  Select,
@ -22,7 +21,6 @@ import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { useShortcutsStore } from "../../../../stores/shortcuts";
 import { useStoreStore } from "../../../../stores/storeStore";
-import { useTypesStore } from "../../../../stores/typesStore";
 import { APIClassType } from "../../../../types/api";
 import { nodeToolbarPropsType } from "../../../../types/components";
 import { FlowType } from "../../../../types/flow";
@ -34,7 +32,6 @@ import {
 } from "../../../../utils/reactflowUtils";
 import { classNames, cn, isThereModal } from "../../../../utils/utils";
 import ToolbarSelectItem from "./toolbarSelectItem";
-import RenderIcons from "../../../../components/renderIconComponent";

 export default function NodeToolbarComponent({
  data,
@ -46,6 +43,7 @@ export default function NodeToolbarComponent({
  selected,
  setShowState,
  onCloseAdvancedModal,
+  updateNode,
 }: nodeToolbarPropsType): JSX.Element {
  const version = useDarkStore((state) => state.version);
  const [showModalAdvanced, setShowModalAdvanced] = useState(false);
@ -307,6 +305,9 @@ export default function NodeToolbarComponent({
      case "delete":
        deleteNode(data.id);
        break;
+      case "update":
+        updateNode();
+        break;
      case "copy":
        const node = nodes.filter((node) => node.id === data.id);
        setLastCopiedSelection({ nodes: _.cloneDeep(node), edges: [] });
@ -452,7 +453,9 @@ export default function NodeToolbarComponent({
              side="top"
            >
              <button
-                className={`${isGroup ? "rounded-l-md" : ""} relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10`}
+                className={`${
+                  isGroup ? "rounded-l-md" : ""
+                } relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10`}
                onClick={() => {
                  setShowModalAdvanced(true);
                }}
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
@ -28,9 +28,11 @@ export default function ToolbarSelectItem({
    <div className={`flex ${style}`} data-testid={dataTestId}>
      <ForwardedIconComponent
        name={icon}
-        className={`   mr-2  ${icon === "Share3" ? "absolute left-2  top-[0.25em] h-6 w-6" : "mt-[0.15em] h-4 w-4"}   ${
-          ping && "animate-pulse text-green-500"
-        }`}
+        className={`   mr-2  ${
+          icon === "Share3"
+            ? "absolute left-2  top-[0.25em] h-6 w-6"
+            : "mt-[0.15em] h-4 w-4"
+        }   ${ping && "animate-pulse text-green-500"}`}
      />
      <span className={`${icon === "Share3" ? "ml-[1.8em]" : " "}`}>
        {value}
--- a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
@ -107,7 +107,7 @@ const HeaderComponent = ({
                  name="Trash2"
                  className={cn(
                    "h-5 w-5 text-primary transition-all",
-                    disableFunctions ? "" : "hover:text-destructive",
+                    disableFunctions ? "" : "hover:text-status-red",
                  )}
                />
              </Button>
--- a/src/frontend/src/pages/ProfileSettingsPage/index.tsx
+++ b/src/frontend/src/pages/ProfileSettingsPage/index.tsx
@ -2,7 +2,6 @@ import * as Form from "@radix-ui/react-form";
 import { cloneDeep } from "lodash";
 import { useContext, useEffect, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
-import GradientChooserComponent from "../SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent";
 import Header from "../../components/headerComponent";
 import InputComponent from "../../components/inputComponent";
 import { Button } from "../../components/ui/button";
@ -22,6 +21,7 @@ import {
  patchUserInputStateType,
 } from "../../types/components";
 import { gradients } from "../../utils/styleUtils";
+import GradientChooserComponent from "../SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent";
 export default function ProfileSettingsPage(): JSX.Element {
  const setCurrentFlowId = useFlowsManagerStore(
    (state) => state.setCurrentFlowId,
--- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx
@ -2,7 +2,6 @@ import ForwardedIconComponent from "../../../../../../components/genericIconComp
 import { Button } from "../../../../../../components/ui/button";
 import { API_PAGE_PARAGRAPH } from "../../../../../../constants/constants";
 import SecretKeyModal from "../../../../../../modals/secretKeyModal";
-import { cn } from "../../../../../../utils/utils";

 type ApiKeyHeaderComponentProps = {
  selectedRows: string[];
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts
@ -1,7 +1,6 @@
-import { reject } from "lodash";
+import axios from "axios";
 import { PROFILE_PICTURES_GET_ERROR_ALERT } from "../../../../../../../../../constants/alerts_constants";
 import { getProfilePictures } from "../../../../../../../../../controllers/API";
-import axios from "axios";

 const useGetProfilePictures = (setErrorData) => {
  const handleGetProfilePictures = async () => {
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx
@ -1,4 +1,5 @@
 import * as Form from "@radix-ui/react-form";
+import { useEffect, useState } from "react";
 import { Button } from "../../../../../../components/ui/button";
 import {
  Card,
@ -10,8 +11,6 @@ import {
 } from "../../../../../../components/ui/card";
 import { gradients } from "../../../../../../utils/styleUtils";
 import ProfilePictureChooserComponent from "./components/profilePictureChooserComponent";
-import { useEffect, useState } from "react";
-import { GenericAbortSignal } from "axios";

 type ProfilePictureFormComponentProps = {
  profilePicture: string;
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
@ -9,15 +9,15 @@ import {
  inputHandlerEventType,
  patchUserInputStateType,
 } from "../../../../types/components";
-import usePatchProfilePicture from "../hooks/use-patch-profile-picture";
 import usePatchPassword from "../hooks/use-patch-password";
+import usePatchProfilePicture from "../hooks/use-patch-profile-picture";
 import useSaveKey from "../hooks/use-save-key";
 import useScrollToElement from "../hooks/use-scroll-to-element";
 import GeneralPageHeaderComponent from "./components/GeneralPageHeader";
 import PasswordFormComponent from "./components/PasswordForm";
 import ProfilePictureFormComponent from "./components/ProfilePictureForm";
-import StoreApiKeyFormComponent from "./components/StoreApiKeyForm";
 import useGetProfilePictures from "./components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures";
+import StoreApiKeyFormComponent from "./components/StoreApiKeyForm";

 export default function GeneralPage() {
  const setCurrentFlowId = useFlowsManagerStore(
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@ -11,7 +11,6 @@ import { Badge } from "../../../../components/ui/badge";
 import { deleteGlobalVariable } from "../../../../controllers/API";
 import useAlertStore from "../../../../stores/alertStore";
 import { useGlobalVariablesStore } from "../../../../stores/globalVariablesStore/globalVariables";
-import { cn } from "../../../../utils/utils";

 export default function GlobalVariablesPage() {
  const globalVariablesEntries = useGlobalVariablesStore(
--- a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx
@ -107,7 +107,9 @@ export default function EditShortcutButton({
    if (oldKey === null) {
      return `${key.length > 0 ? toTitleCase(key) : toTitleCase(key)}`;
    }
-    return `${oldKey.length > 0 ? toTitleCase(oldKey) : oldKey.toUpperCase()} + ${key.length > 0 ? toTitleCase(key) : key.toUpperCase()}`;
+    return `${
+      oldKey.length > 0 ? toTitleCase(oldKey) : oldKey.toUpperCase()
+    } + ${key.length > 0 ? toTitleCase(key) : key.toUpperCase()}`;
  }

  function checkForKeys(keys: string, keyToCompare: string): boolean {
--- a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
@ -1,4 +1,3 @@
-import { ColDef, ColGroupDef, SelectionChangedEvent } from "ag-grid-community";
 import { useEffect, useState } from "react";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
--- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/components/headerMessages/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/components/headerMessages/index.tsx
@ -1,6 +1,4 @@
 import ForwardedIconComponent from "../../../../../../components/genericIconComponent";
-import { Button } from "../../../../../../components/ui/button";
-import { cn } from "../../../../../../utils/utils";

 type HeaderMessagesComponentProps = {
  selectedRows: number[];
--- a/src/frontend/src/stores/foldersStore.tsx
+++ b/src/frontend/src/stores/foldersStore.tsx
@ -7,7 +7,6 @@ import {
 } from "../pages/MainPage/services";
 import { FoldersStoreType } from "../types/zustand/folders";
 import useFlowsManagerStore from "./flowsManagerStore";
-import { uploadFlowsToDatabase } from "../controllers/API";

 export const useFolderStore = create<FoldersStoreType>((set, get) => ({
  folders: [],
--- a/src/frontend/src/stores/shortcuts.ts
+++ b/src/frontend/src/stores/shortcuts.ts
@ -23,7 +23,7 @@ export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
  group: "mod+g",
  cut: "mod+x",
  paste: "mod+v",
-  api: "mod+r",
+  api: "mod+shift+r",
  update: "mod+u",
  download: "mod+j",
  freeze: "mod+f",
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@ -491,7 +491,7 @@ export type ChatInputType = {
  isDragging: boolean;
  files: FilePreviewType[];
  setFiles: (
-    files: FilePreviewType[] | ((prev: FilePreviewType[]) => FilePreviewType[])
+    files: FilePreviewType[] | ((prev: FilePreviewType[]) => FilePreviewType[]),
  ) => void;
  chatValue: string;
  inputRef: {
@ -547,6 +547,7 @@ export type nodeToolbarPropsType = {
  onCloseAdvancedModal?: (close: boolean) => void;
  selected: boolean;
  setShowState: (show: boolean | SetStateAction<boolean>) => void;
+  updateNode: () => void;
 };

 export type parsedDataType = {
@ -593,7 +594,7 @@ export type chatMessagePropsType = {
  updateChat: (
    chat: ChatMessageType,
    message: string,
-    stream_url?: string
+    stream_url?: string,
  ) => void;
 };

@ -685,12 +686,12 @@ export type codeTabsPropsType = {
      value: string,
      node: NodeType,
      template: TemplateVariableType,
-      tweak: tweakType
+      tweak: tweakType,
    ) => string;
    buildTweakObject?: (
      tw: string,
      changes: string | string[] | boolean | number | Object[] | Object,
-      template: TemplateVariableType
+      template: TemplateVariableType,
    ) => Promise<string | void>;
  };
  activeTweaks?: boolean;
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@ -1,5 +1,6 @@
 import {
  AlertCircle,
+  AlertTriangle,
  ArrowBigUp,
  ArrowLeft,
  ArrowUpToLine,
@ -116,7 +117,6 @@ import {
  Settings,
  Settings2,
  Share,
-  AlertTriangle,
  Share2,
  Shield,
  Sliders,
@ -146,11 +146,10 @@ import {
  Variable,
  Wand2,
  Workflow,
+  Wrench,
  X,
  XCircle,
  Zap,
-  PlaySquare,
-  Wrench,
 } from "lucide-react";
 import { FaApple, FaDiscord, FaGithub } from "react-icons/fa";
 import { AWSIcon } from "../icons/AWS";
@ -177,6 +176,7 @@ import {
 import { GroqIcon } from "../icons/Groq";
 import { HuggingFaceIcon } from "../icons/HuggingFace";
 import { IFixIcon } from "../icons/IFixIt";
+import { LangChainIcon } from "../icons/LangChain";
 import { MetaIcon } from "../icons/Meta";
 import { MidjourneyIcon } from "../icons/Midjorney";
 import { MongoDBIcon } from "../icons/MongoDB";
@ -325,6 +325,7 @@ export const nodeIconsLucide: iconsType = {
  ChatOllamaModel: OllamaIcon,
  Faiss: MetaIcon,
  FaissSearch: MetaIcon,
+  LangChain: LangChainIcon,
  AzureOpenAiModel: AzureIcon,
  Redis: RedisIcon,
  RedisSearch: RedisIcon,
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@ -1,6 +1,8 @@
 import { ColDef, ColGroupDef } from "ag-grid-community";
 import clsx, { ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
+import TableAutoCellRender from "../components/tableComponent/components/tableAutoCellRender";
+import { MODAL_CLASSES } from "../constants/constants";
 import { APIDataType, TemplateVariableType } from "../types/api";
 import {
  groupedObjType,
@ -9,8 +11,6 @@ import {
 } from "../types/components";
 import { NodeType } from "../types/flow";
 import { FlowState } from "../types/tabs";
-import TableAutoCellRender from "../components/tableComponent/components/tableAutoCellRender";
-import { MODAL_CLASSES } from "../constants/constants";

 export function classNames(...classes: Array<string>): string {
  return classes.filter(Boolean).join(" ");
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@ -236,6 +236,10 @@ module.exports = {
        ".text-align-last-right": {
          "text-align-last": "right",
        },
+        ":focus-visible": {
+          outline: "none  !important",
+          outlineOffset: "0px !important",
+        },
      });
    }),
    require("@tailwindcss/typography"),
--- a/src/frontend/tests/end-to-end/assets/ChatTest.json
+++ b/src/frontend/tests/end-to-end/assets/ChatTest.json
@ -44,9 +44,7 @@
                "name": "input_value",
                "display_name": "Message",
                "advanced": false,
-                "input_types": [
-                  "Text"
-                ],
+                "input_types": ["Text"],
                "dynamic": false,
                "info": "",
                "load_from_db": false,
@ -70,9 +68,7 @@
                "info": "In case of Message being a Record, this template will be used to convert it to text.",
                "load_from_db": false,
                "title_case": false,
-                "input_types": [
-                  "Text"
-                ]
+                "input_types": ["Text"]
              },
              "return_record": {
                "type": "bool",
@ -104,10 +100,7 @@
                "fileTypes": [],
                "file_path": "",
                "password": false,
-                "options": [
-                  "Machine",
-                  "User"
-                ],
+                "options": ["Machine", "User"],
                "name": "sender",
                "display_name": "Sender Type",
                "advanced": true,
@ -115,9 +108,7 @@
                "info": "",
                "load_from_db": false,
                "title_case": false,
-                "input_types": [
-                  "Text"
-                ]
+                "input_types": ["Text"]
              },
              "sender_name": {
                "type": "str",
@ -137,9 +128,7 @@
                "info": "",
                "load_from_db": false,
                "title_case": false,
-                "input_types": [
-                  "Text"
-                ]
+                "input_types": ["Text"]
              },
              "session_id": {
                "type": "str",
@ -158,20 +147,13 @@
                "info": "If provided, the message will be stored in the memory.",
                "load_from_db": false,
                "title_case": false,
-                "input_types": [
-                  "Text"
-                ]
+                "input_types": ["Text"]
              },
              "_type": "CustomComponent"
            },
            "description": "Display a chat message in the Playground.",
            "icon": "ChatOutput",
-            "base_classes": [
-              "object",
-              "Record",
-              "str",
-              "Text"
-            ],
+            "base_classes": ["object", "Record", "str", "Text"],
            "display_name": "Chat Output",
            "documentation": "",
            "custom_fields": {
@ -182,10 +164,7 @@
              "return_record": null,
              "record_template": null
            },
-            "output_types": [
-              "Text",
-              "Record"
-            ],
+            "output_types": ["Text", "Record"],
            "field_formatters": {},
            "frozen": false,
            "field_order": [],
@ -280,10 +259,7 @@
                "fileTypes": [],
                "file_path": "",
                "password": false,
-                "options": [
-                  "Machine",
-                  "User"
-                ],
+                "options": ["Machine", "User"],
                "name": "sender",
                "display_name": "Sender Type",
                "advanced": true,
@ -291,9 +267,7 @@
                "info": "",
                "load_from_db": false,
                "title_case": false,
-                "input_types": [
-                  "Text"
-                ]
+                "input_types": ["Text"]
              },
              "sender_name": {
                "type": "str",
@ -313,9 +287,7 @@
                "info": "",
                "load_from_db": false,
                "title_case": false,
-                "input_types": [
-                  "Text"
-                ]
+                "input_types": ["Text"]
              },
              "session_id": {
                "type": "str",
@ -334,20 +306,13 @@
                "info": "If provided, the message will be stored in the memory.",
                "load_from_db": false,
                "title_case": false,
-                "input_types": [
-                  "Text"
-                ]
+                "input_types": ["Text"]
              },
              "_type": "CustomComponent"
            },
            "description": "Get chat inputs from the Playground.",
            "icon": "ChatInput",
-            "base_classes": [
-              "object",
-              "Record",
-              "str",
-              "Text"
-            ],
+            "base_classes": ["object", "Record", "str", "Text"],
            "display_name": "Chat Input",
            "documentation": "",
            "custom_fields": {
@ -357,10 +322,7 @@
              "session_id": null,
              "return_record": null
            },
-            "output_types": [
-              "Text",
-              "Record"
-            ],
+            "output_types": ["Text", "Record"],
            "field_formatters": {},
            "frozen": false,
            "field_order": [],
@ -383,18 +345,11 @@
          "targetHandle": {
            "fieldName": "input_value",
            "id": "ChatOutput-xPeM1",
-            "inputTypes": [
-              "Text"
-            ],
+            "inputTypes": ["Text"],
            "type": "str"
          },
          "sourceHandle": {
-            "baseClasses": [
-              "object",
-              "Record",
-              "str",
-              "Text"
-            ],
+            "baseClasses": ["object", "Record", "str", "Text"],
            "dataType": "ChatInput",
            "id": "ChatInput-XYvUc"
          }
@ -416,4 +371,4 @@
  "name": "ChatTest",
  "last_tested_version": "1.0.0a14",
  "is_component": false
-}
+}