Changing to ShadUI, Edge Tooltips and Advanced Dialog

2023-06-08 12:05:32 -03:00 · 2023-06-08 12:05:32 -03:00 · c9b68f6f7a
commit c9b68f6f7a
parent 5ab186bd88
96 changed files with 3741 additions and 3686 deletions
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@ -13,6 +13,7 @@
        "@radix-ui/react-label": "^2.0.2",
        "@radix-ui/react-slot": "^1.0.2",
        "@radix-ui/react-switch": "^1.0.3",
+        "@radix-ui/react-tooltip": "^1.0.6",
        "@tabler/icons-react": "^2.18.0",
        "@tailwindcss/forms": "^0.5.3",
        "@tailwindcss/line-clamp": "^0.4.4",
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@ -172,7 +172,7 @@ export default function App() {
        className="absolute left-7 bottom-2 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-gray-800 px-2 text-center font-sans text-xs tracking-wide text-gray-300 transition-all duration-500 ease-in-out hover:h-12 dark:bg-gray-100 dark:text-gray-800"
      >
        {version && <div className="mt-1">⛓️ LangFlow v{version}</div>}
-        <div className="mt-2">Created by Logspace</div>
+        <div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div>
      </a>
    </div>
  );
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@ -1,6 +1,11 @@
 import { Handle, Position, useUpdateNodeInternals } from "reactflow";
 import Tooltip from "../../../../components/TooltipComponent";
-import { classNames, isValidConnection } from "../../../../utils";
+import {
+  classNames,
+  groupByFamily,
+  isValidConnection,
+  toFirstUpperCase,
+} from "../../../../utils";
 import { useContext, useEffect, useRef, useState } from "react";
 import InputComponent from "../../../../components/inputComponent";
 import ToggleComponent from "../../../../components/toggleComponent";
@ -15,6 +20,10 @@ import InputFileComponent from "../../../../components/inputFileComponent";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import IntComponent from "../../../../components/intComponent";
 import PromptAreaComponent from "../../../../components/promptComponent";
+import { nodeNames, nodeIcons } from "../../../../utils";
+import React from "react";
+import { nodeColors } from "../../../../utils";
+import ShadTooltip from "../../../../components/ShadTooltipComponent";

 export default function ParameterComponent({
  left,
@ -28,6 +37,7 @@ export default function ParameterComponent({
  required = false,
 }: ParameterComponentType) {
  const ref = useRef(null);
+  const refHtml = useRef(null);
  const updateNodeInternals = useUpdateNodeInternals();
  const [position, setPosition] = useState(0);
  useEffect(() => {
@ -48,6 +58,48 @@ export default function ParameterComponent({
  let disabled =
    reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
  const { save } = useContext(TabsContext);
+  const [myData, setMyData] = useState(useContext(typesContext).data);
+
+  useEffect(() => {
+    const groupedObj = groupByFamily(myData, tooltipTitle);
+
+    refHtml.current = groupedObj.map((item, i) => (
+      <span
+        key={item}
+        className={classNames(
+          i > 0 ? "items-center flex mt-3" : "items-center flex"
+        )}
+      >
+        <div
+          className="h-5 w-5"
+          style={{
+            color: nodeColors[item.family],
+          }}
+        >
+          {React.createElement(nodeIcons[item.family])}
+        </div>
+        <span className="ps-2 text-gray-950">
+          {nodeNames[item.family] ?? ""}{" "}
+          <span className={classNames(left ? "hidden" : "")}>
+            {" "}
+            -&nbsp;
+            {item.type.split(", ").length > 2
+              ? item.type.split(", ").map((el, i) => (
+                  <>
+                    <span key={el}>
+                      {i == item.type.split(", ").length - 1
+                        ? el
+                        : (el += `, `)}
+                    </span>
+                    {i % 2 == 0 && i > 0 && <br></br>}
+                  </>
+                ))
+              : item.type}
+          </span>
+        </span>
+      </span>
+    ));
+  }, [tooltipTitle]);

  return (
    <div
@ -69,7 +121,11 @@ export default function ParameterComponent({
          type === "int") ? (
          <></>
        ) : (
-          <Tooltip title={tooltipTitle + (required ? " (required)" : "")}>
+          <ShadTooltip
+            delayDuration={0}
+            content={refHtml.current}
+            side={left ? "left" : "right"}
+          >
            <Handle
              type={left ? "target" : "source"}
              position={left ? Position.Left : Position.Right}
@ -86,7 +142,7 @@ export default function ParameterComponent({
                top: position,
              }}
            ></Handle>
-          </Tooltip>
+          </ShadTooltip>
        )}

        {left === true &&
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@ -28,11 +28,11 @@ import NodeModal from "../../modals/NodeModal";
 import { useCallback } from "react";
 import { TabsContext } from "../../contexts/tabsContext";
 import { debounce } from "../../utils";
-import TooltipReact from "../../components/ReactTooltipComponent";
 import Tooltip from "../../components/TooltipComponent";
 import { NodeToolbar } from "reactflow";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";

+import ShadTooltip from "../../components/ShadTooltipComponent";
 export default function GenericNode({
  data,
  selected,
@ -102,39 +102,45 @@ export default function GenericNode({
  }

  return (
-    <>
-      <NodeToolbar>
-        <NodeToolbarComponent
-          data={data}
-          openPopUp={openPopUp}
-          deleteNode={deleteNode}
-        ></NodeToolbarComponent>
-      </NodeToolbar>

-      <div
-        className={classNames(
-          selected ? "border border-blue-500" : "border dark:border-gray-700",
-          "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-white dark:bg-gray-900"
-        )}
-      >
-        <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-gray-50 p-4 dark:border-b-gray-700 dark:bg-gray-800 dark:text-white ">
-          <div className="flex w-full items-center gap-2 truncate text-lg">
-            <Icon
-              className="h-10 w-10 rounded p-1"
-              style={{
-                color: nodeColors[types[data.type]] ?? nodeColors.unknown,
-              }}
-            />
-            <div className="ml-2 truncate">
-              <TooltipReact
-                delayShow={1000}
-                selector={`node-selector-${data.type}`}
-                htmlContent={data.type}
-                position="top"
-              >
-                <div className="ml-2 truncate">{data.type}</div>
-              </TooltipReact>
-            </div>
+    <>
+    <NodeToolbar>
+      <NodeToolbarComponent
+        data={data}
+        openPopUp={openPopUp}
+        deleteNode={deleteNode}
+      ></NodeToolbarComponent>
+    </NodeToolbar>
+    
+    <div
+      className={classNames(
+        selected ? "border border-blue-500" : "border dark:border-gray-700",
+        "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-white dark:bg-gray-900"
+      )}
+    >
+      <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-gray-50 p-4 dark:border-b-gray-700 dark:bg-gray-800 dark:text-white ">
+        <div className="flex w-full items-center gap-2 truncate text-lg">
+          <Icon
+            className="h-10 w-10 rounded p-1"
+            style={{
+              color: nodeColors[types[data.type]] ?? nodeColors.unknown,
+            }}
+          />
+          <div className="ml-2 truncate">
+            <ShadTooltip delayDuration={1500} content={data.type}>
+              <div className="ml-2 truncate">{data.type}</div>
+            </ShadTooltip>
+          </div>
+        </div>
+        <div className="flex gap-3">
+          <button
+            className="relative"
+            onClick={(event) => {
+              event.preventDefault();
+              openPopUp(<NodeModal data={data} />);
+            }}
+          >
+            </button>
          </div>
          <div className="flex gap-3">
            <div>
@ -216,29 +222,25 @@ export default function GenericNode({
                  {data.node.template[t].show &&
                  !data.node.template[t].advanced ? (
                    <ParameterComponent
-                      data={data}
-                      color={
-                        nodeColors[types[data.node.template[t].type]] ??
-                        nodeColors.unknown
-                      }
-                      title={
-                        data.node.template[t].display_name
-                          ? data.node.template[t].display_name
-                          : data.node.template[t].name
-                          ? toTitleCase(data.node.template[t].name)
-                          : toTitleCase(t)
-                      }
-                      name={t}
-                      tooltipTitle={
-                        "Type: " +
-                        data.node.template[t].type +
-                        (data.node.template[t].list ? " list" : "")
-                      }
-                      required={data.node.template[t].required}
-                      id={data.node.template[t].type + "|" + t + "|" + data.id}
-                      left={true}
-                      type={data.node.template[t].type}
-                    />
+                    data={data}
+                    color={
+                      nodeColors[types[data.node.template[t].type]] ??
+                      nodeColors.unknown
+                    }
+                    title={
+                      data.node.template[t].display_name
+                        ? data.node.template[t].display_name
+                        : data.node.template[t].name
+                        ? toTitleCase(data.node.template[t].name)
+                        : toTitleCase(t)
+                    }
+                    name={t}
+                    tooltipTitle={data.node.template[t].type}
+                    required={data.node.template[t].required}
+                    id={data.node.template[t].type + "|" + t + "|" + data.id}
+                    left={true}
+                    type={data.node.template[t].type}
+                  />
                  ) : (
                    <></>
                  )}
@ -255,15 +257,15 @@ export default function GenericNode({
            {/* <div className="px-5 py-2 mt-2 dark:text-white text-center">
                  Output
              </div> */}
-            <ParameterComponent
-              data={data}
-              color={nodeColors[types[data.type]] ?? nodeColors.unknown}
-              title={data.type}
-              tooltipTitle={`Type: ${data.node.base_classes.join(" | ")}`}
-              id={[data.type, data.id, ...data.node.base_classes].join("|")}
-              type={data.node.base_classes.join("|")}
-              left={false}
-            />
+          <ParameterComponent
+            data={data}
+            color={nodeColors[types[data.type]] ?? nodeColors.unknown}
+            title={data.type}
+            tooltipTitle={`${data.node.base_classes.join("\n")}`}
+            id={[data.type, data.id, ...data.node.base_classes].join("|")}
+            type={data.node.base_classes.join("|")}
+            left={false}
+          />
          </>
        </div>
      </div>
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@ -1,6 +1,6 @@
 import { Disclosure } from "@headlessui/react";
 import { ChevronLeftIcon } from "@heroicons/react/24/outline";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { Link } from "react-router-dom";
 import { classNames } from "../../utils";
 import { locationContext } from "../../contexts/locationContext";
@ -13,6 +13,7 @@ export default function ExtraSidebar() {
    extraNavigation,
    extraComponent,
  } = useContext(locationContext);
+
  return (
    <>
      <aside
@ -21,10 +22,8 @@ export default function ExtraSidebar() {
        } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`}
      >
        <div className="w-52 dark:bg-gray-800 border dark:border-gray-700  overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
-          <div className="flex pt-1 px-4 justify-between align-middle w-full">
-            <span className="text-gray-900 dark:text-white py-[2px] font-medium ">
-              {extraNavigation.title}
-            </span>
+          <div className="flex px-4 justify-between align-middle w-full">
+            <span className="text-gray-900 dark:text-white py-[2px] font-medium "></span>
          </div>
          <div className="flex flex-grow flex-col w-full">
            {extraNavigation.options ? (
--- a/src/frontend/src/components/ReactTooltipComponent/index.tsx
+++ b/src/frontend/src/components/ReactTooltipComponent/index.tsx
@ -37,13 +37,15 @@ const TooltipReact: FC<TooltipProps> = ({
        id={selector}
        content={content}
        className={classNames(
-          "!bg-white !text-xs !font-normal !text-gray-700 !shadow-md !opacity-100 z-20",
+          "!bg-white !text-xs !font-normal !text-gray-700 !shadow-md !opacity-100 z-[9999]",
          className
        )}
        place={position}
        clickable={clickable}
        isOpen={disabled ? false : undefined}
        delayShow={delayShow}
+        positionStrategy="absolute"
+        float={true}
      >
        {htmlContent && htmlContent}
      </ReactTooltip>
--- a/src/frontend/src/components/ShadTooltipComponent/index.tsx
+++ b/src/frontend/src/components/ShadTooltipComponent/index.tsx
@ -0,0 +1,25 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
+
+const ShadTooltip = (props) => {
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={props.delayDuration}>
+        <TooltipTrigger asChild>{props.children}</TooltipTrigger>
+        <TooltipContent
+          side={props.side}
+          avoidCollisions={false}
+          sticky="always"
+        >
+          {props.content}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+export default ShadTooltip;
--- a/src/frontend/src/components/ui/tooltip.tsx
+++ b/src/frontend/src/components/ui/tooltip.tsx
@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "../../utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
--- a/src/frontend/src/contexts/darkContext.tsx
+++ b/src/frontend/src/contexts/darkContext.tsx
@ -13,13 +13,16 @@ const initialValue = {
 export const darkContext = createContext<darkContextType>(initialValue);

 export function DarkProvider({ children }) {
-  const [dark, setDark] = useState(false);
+  const [dark, setDark] = useState(
+    JSON.parse(window.localStorage.getItem("isDark")) ?? false
+  );
  useEffect(() => {
    if (dark) {
      document.getElementById("body").classList.add("dark");
    } else {
      document.getElementById("body").classList.remove("dark");
    }
+    window.localStorage.setItem("isDark", dark.toString());
  }, [dark]);
  return (
    <darkContext.Provider
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@ -50,7 +50,7 @@ export const TabsContext = createContext<TabsContextType>(
 );

 export function TabsProvider({ children }: { children: ReactNode }) {
-  const { setNoticeData } = useContext(alertContext);
+  const { setErrorData, setNoticeData } = useContext(alertContext);
  const [tabIndex, setTabIndex] = useState(0);
  const [flows, setFlows] = useState<Array<FlowType>>([]);
  const [id, setId] = useState(uuidv4());
@ -99,25 +99,25 @@ export function TabsProvider({ children }: { children: ReactNode }) {
          edge.style = { stroke: "#555555" };
        });
        flow.data.nodes.forEach((node) => {
-          if (Object.keys(templates[node.data.type]["template"]).length > 0) {
-            node.data.node.base_classes =
-              templates[node.data.type]["base_classes"];
+          const template = templates[node.data.type];
+          if (!template) {
+            setErrorData({ title: `Unknown node type: ${node.data.type}` });
+            return;
+          }
+          if (Object.keys(template["template"]).length > 0) {
+            node.data.node.base_classes = template["base_classes"];
            flow.data.edges.forEach((edge) => {
              if (edge.source === node.id) {
                edge.sourceHandle = edge.sourceHandle
                  .split("|")
                  .slice(0, 2)
-                  .concat(templates[node.data.type]["base_classes"])
+                  .concat(template["base_classes"])
                  .join("|");
              }
            });
-            node.data.node.description =
-              templates[node.data.type]["description"];
+            node.data.node.description = template["description"];
            node.data.node.template = updateTemplate(
-              templates[node.data.type][
-                "template"
-              ] as unknown as APITemplateType,
-
+              template["template"] as unknown as APITemplateType,
              node.data.node.template as APITemplateType
            );
          }
@ -325,21 +325,25 @@ export function TabsProvider({ children }: { children: ReactNode }) {
        edge.animated = edge.targetHandle.split("|")[0] === "Text";
      });
      data.nodes.forEach((node) => {
-        if (Object.keys(templates[node.data.type]["template"]).length > 0) {
-          node.data.node.base_classes =
-            templates[node.data.type]["base_classes"];
+        const template = templates[node.data.type];
+        if (!template) {
+          setErrorData({ title: `Unknown node type: ${node.data.type}` });
+          return;
+        }
+        if (Object.keys(template["template"]).length > 0) {
+          node.data.node.base_classes = template["base_classes"];
          flow.data.edges.forEach((edge) => {
            if (edge.source === node.id) {
              edge.sourceHandle = edge.sourceHandle
                .split("|")
                .slice(0, 2)
-                .concat(templates[node.data.type]["base_classes"])
+                .concat(template["base_classes"])
                .join("|");
            }
          });
-          node.data.node.description = templates[node.data.type]["description"];
+          node.data.node.description = template["description"];
          node.data.node.template = updateTemplate(
-            templates[node.data.type]["template"] as unknown as APITemplateType,
+            template["template"] as unknown as APITemplateType,
            node.data.node.template as APITemplateType
          );
        }
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@ -14,13 +14,13 @@ export async function sendAll(data: sendAllProps) {
 export async function checkCode(
  code: string
 ): Promise<AxiosResponse<errorsTypeAPI>> {
-  return await axios.post("/validate/code", { code });
+  return await axios.post("api/v1/validate/code", { code });
 }

 export async function checkPrompt(
  template: string
 ): Promise<AxiosResponse<PromptTypeAPI>> {
-  return await axios.post("/validate/prompt", { template });
+  return await axios.post("api/v1/validate/prompt", { template });
 }

 export async function getExamples(): Promise<FlowType[]> {
--- a/src/frontend/src/icons/Anthropic/anthropic.svg
+++ b/src/frontend/src/icons/Anthropic/anthropic.svg
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="-170.333 113.047 600 67.4" width="600" height="67.4">
+  <defs>
+    <style type="text/css">
+	.st0{fill:#1F1F1E;}
+    </style>
+  </defs>
+  <path class="st0" d="M -23.533 126.747 L -1.633 126.747 L -1.633 179.347 L 12.367 179.347 L 12.367 126.747 L 34.267 126.747 L 34.267 114.147 L -23.533 114.147 L -23.533 126.747 Z M -48.133 159.747 L -77.433 114.147 L -93.233 114.147 L -93.233 179.247 L -79.733 179.247 L -79.733 133.647 L -50.433 179.347 L -34.633 179.347 L -34.633 114.247 L -48.133 114.247 L -48.133 159.747 Z M 90.067 140.147 L 59.367 140.147 L 59.367 114.147 L 45.367 114.147 L 45.367 179.247 L 59.367 179.247 L 59.367 152.647 L 90.067 152.647 L 90.067 179.247 L 104.067 179.247 L 104.067 114.147 L 90.067 114.147 L 90.067 140.147 Z M -144.333 114.147 L -170.333 179.247 L -155.833 179.247 L -150.533 165.547 L -123.333 165.547 L -118.033 179.247 L -103.533 179.247 L -129.533 114.147 L -144.333 114.147 Z M -145.833 153.547 L -136.933 130.647 L -128.033 153.547 L -145.833 153.547 Z M 219.667 113.047 C 200.867 113.047 187.567 127.047 187.567 146.847 C 187.567 166.447 200.867 180.447 219.667 180.447 C 238.367 180.447 251.567 166.447 251.567 146.847 C 251.567 127.047 238.367 113.047 219.667 113.047 Z M 219.667 167.447 C 208.667 167.447 201.967 159.647 201.967 146.847 C 201.967 133.947 208.667 126.047 219.667 126.047 C 230.567 126.047 237.167 133.847 237.167 146.847 C 237.167 159.547 230.567 167.447 219.667 167.447 Z M 414.767 157.447 C 412.367 163.747 407.467 167.447 400.867 167.447 C 389.867 167.447 383.167 159.647 383.167 146.847 C 383.167 133.947 389.867 126.047 400.867 126.047 C 407.467 126.047 412.267 129.647 414.767 136.047 L 429.567 136.047 C 425.967 122.047 415.067 113.047 400.867 113.047 C 382.067 113.047 368.767 127.047 368.767 146.847 C 368.767 166.447 382.067 180.447 400.867 180.447 C 415.067 180.447 425.967 171.347 429.667 157.447 L 414.767 157.447 Z M 325.867 114.147 L 351.867 179.247 L 366.067 179.247 L 340.067 114.147 L 325.867 114.147 Z M 296.367 114.147 L 264.567 114.147 L 264.567 179.247 L 278.567 179.247 L 278.567 155.647 L 296.467 155.647 C 311.267 155.647 320.267 147.847 320.267 134.847 C 320.267 121.947 311.167 114.147 296.367 114.147 Z M 295.767 143.147 L 278.567 143.147 L 278.567 126.747 L 295.767 126.747 C 302.667 126.747 306.267 129.547 306.267 134.947 C 306.267 140.347 302.667 143.147 295.767 143.147 Z M 176.867 134.047 C 176.867 121.747 167.867 114.247 153.067 114.247 L 121.267 114.247 L 121.267 179.347 L 135.267 179.347 L 135.267 153.847 L 150.767 153.847 L 164.767 179.347 L 180.167 179.347 L 164.667 151.947 C 172.367 148.847 176.867 142.647 176.867 134.047 Z M 135.167 126.747 L 152.367 126.747 C 159.267 126.747 162.867 129.247 162.867 134.047 C 162.867 138.747 159.267 141.347 152.367 141.347 L 135.167 141.347 L 135.167 126.747 Z"></path>
+</svg>
--- a/src/frontend/src/icons/Anthropic/anthropic_box.svg
+++ b/src/frontend/src/icons/Anthropic/anthropic_box.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-126.9 247.9 207.161 212.728" width="207.161" height="212.728">
+  <defs>
+    <style type="text/css">
+	.st0{fill:#1F1F1E;}
+</style>
+  </defs>
+  <path class="st0" d="M 19.9 260.5 L 41.8 260.5 L 41.8 313.1 L 55.8 313.1 L 55.8 260.5 L 77.7 260.5 L 77.7 247.9 L 19.9 247.9 L 19.9 260.5 Z M -4.7 293.5 L -34 247.9 L -49.8 247.9 L -49.8 313 L -36.3 313 L -36.3 267.4 L -7 313.1 L 8.8 313.1 L 8.8 248 L -4.7 248 L -4.7 293.5 Z M -100.9 247.9 L -126.9 313 L -112.4 313 L -107.1 299.3 L -79.9 299.3 L -74.6 313 L -60.1 313 L -86.1 247.9 L -100.9 247.9 Z M -102.4 287.3 L -93.5 264.4 L -84.6 287.3 L -102.4 287.3 Z"></path>
+  <path class="st0" d="M 38.246 437.628 C 35.846 443.928 30.946 447.628 24.346 447.628 C 13.346 447.628 6.646 439.828 6.646 427.028 C 6.646 414.128 13.346 406.228 24.346 406.228 C 30.946 406.228 35.746 409.828 38.246 416.228 L 53.046 416.228 C 49.446 402.228 38.546 393.228 24.346 393.228 C 5.546 393.228 -7.754 407.228 -7.754 427.028 C -7.754 446.628 5.546 460.628 24.346 460.628 C 38.546 460.628 49.446 451.528 53.146 437.628 L 38.246 437.628 Z M -50.654 394.328 L -24.654 459.428 L -10.454 459.428 L -36.454 394.328 L -50.654 394.328 Z M -80.154 394.328 L -111.954 394.328 L -111.954 459.428 L -97.954 459.428 L -97.954 435.828 L -80.054 435.828 C -65.254 435.828 -56.254 428.028 -56.254 415.028 C -56.254 402.128 -65.354 394.328 -80.154 394.328 Z M -80.754 423.328 L -97.954 423.328 L -97.954 406.928 L -80.754 406.928 C -73.854 406.928 -70.254 409.728 -70.254 415.128 C -70.254 420.528 -73.854 423.328 -80.754 423.328 Z"></path>
+  <path class="st0" d="M -81.239 347.704 L -111.939 347.704 L -111.939 321.704 L -125.939 321.704 L -125.939 386.804 L -111.939 386.804 L -111.939 360.204 L -81.239 360.204 L -81.239 386.804 L -67.239 386.804 L -67.239 321.704 L -81.239 321.704 L -81.239 347.704 Z M 48.361 320.604 C 29.561 320.604 16.261 334.604 16.261 354.404 C 16.261 374.004 29.561 388.004 48.361 388.004 C 67.061 388.004 80.261 374.004 80.261 354.404 C 80.261 334.604 67.061 320.604 48.361 320.604 Z M 48.361 375.004 C 37.361 375.004 30.661 367.204 30.661 354.404 C 30.661 341.504 37.361 333.604 48.361 333.604 C 59.261 333.604 65.861 341.404 65.861 354.404 C 65.861 367.104 59.261 375.004 48.361 375.004 Z M 5.561 341.604 C 5.561 329.304 -3.439 321.804 -18.239 321.804 L -50.039 321.804 L -50.039 386.904 L -36.039 386.904 L -36.039 361.404 L -20.539 361.404 L -6.539 386.904 L 8.861 386.904 L -6.639 359.504 C 1.061 356.404 5.561 350.204 5.561 341.604 Z M -36.139 334.304 L -18.939 334.304 C -12.039 334.304 -8.439 336.804 -8.439 341.604 C -8.439 346.304 -12.039 348.904 -18.939 348.904 L -36.139 348.904 L -36.139 334.304 Z"></path>
+</svg>
--- a/src/frontend/src/icons/Anthropic/index.tsx
+++ b/src/frontend/src/icons/Anthropic/index.tsx
@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as AnthropicSVG } from "./anthropic_box.svg";
+
+export const AnthropicIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <AnthropicSVG ref={ref} {...props} />;
+});
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@ -3,99 +3,162 @@
@tailwind utilities;

@layer base {
-	:root {
-	  --background: 0 0% 100%;
-	  --foreground: 222.2 47.4% 11.2%;
-   
-	  --muted: 210 40% 96.1%;
-	  --muted-foreground: 215.4 16.3% 46.9%;
-   
-	  --popover: 0 0% 100%;
-	  --popover-foreground: 222.2 47.4% 11.2%;
-   
-	  --card: 0 0% 100%;
-	  --card-foreground: 222.2 47.4% 11.2%;
-   
-	  --border: 214.3 31.8% 91.4%;
-	  --input: 214.3 31.8% 91.4%;
-   
-	  --primary: 222.2 47.4% 11.2%;
-	  --primary-foreground: 210 40% 98%;
-   
-	  --secondary: 210 40% 96.1%;
-	  --secondary-foreground: 222.2 47.4% 11.2%;
-   
-	  --accent: 210 40% 96.1%;
-	  --accent-foreground: 222.2 47.4% 11.2%;
-   
-	  --destructive: 0 100% 50%;
-	  --destructive-foreground: 210 40% 98%;
-   
-	  --ring: 215 20.2% 65.1%;
-   
-	  --radius: 0.5rem;
-	}
-   
-	.dark {
-	  --background: 224 71% 4%;
-	  --foreground: 213 31% 91%;
-   
-	  --muted: 223 47% 11%;
-	  --muted-foreground: 215.4 16.3% 56.9%;
-   
-	  --popover: 224 71% 4%;
-	  --popover-foreground: 215 20.2% 65.1%;
-   
-	  --card: 224 71% 4%;
-	  --card-foreground: 213 31% 91%;
-   
-	  --border: 216 34% 17%;
-	  --input: 216 34% 17%;
-   
-	  --primary: 210 40% 98%;
-	  --primary-foreground: 222.2 47.4% 1.2%;
-   
-	  --secondary: 222.2 47.4% 11.2%;
-	  --secondary-foreground: 210 40% 98%;
-   
-	  --accent: 216 34% 17%;
-	  --accent-foreground: 210 40% 98%;
-   
-	  --destructive: 0 63% 31%;
-	  --destructive-foreground: 210 40% 98%;
-   
-	  --ring: 216 34% 17%;
-   
-	  --radius: 0.5rem;
-	}
-  }
-   
-  @layer base {
-	* {
-	  @apply border-border;
-	}
-	body {
-	  @apply bg-background text-foreground;
-	  font-feature-settings: "rlig" 1, "calt" 1;
-	}
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 215 20.2% 65.1%;
+
+    --radius: 0.5rem;
  }

+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 216 34% 17%;
+
+    --radius: 0.5rem;
+  }
+}
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 47.4% 11.2%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 47.4% 11.2%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 100% 50%;
+  --destructive-foreground: 210 40% 98%;
+  --ring: 215 20.2% 65.1%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  -background: 224 71% 4%;
+  -foreground: 213 31% 91%;
+  -muted: 223 47% 11%;
+  -muted-foreground: 215.4 16.3% 56.9%;
+  -popover: 224 71% 4%;
+  -popover-foreground: 215 20.2% 65.1%;
+  -card: 224 71% 4%;
+  -card-foreground: 213 31% 91%;
+  -border: 216 34% 17%;
+  -input: 216 34% 17%;
+  -primary: 210 40% 98%;
+  -primary-foreground: 222.2 47.4% 1.2%;
+  -secondary: 222.2 47.4% 11.2%;
+  -secondary-foreground: 210 40% 98%;
+  -accent: 216 34% 17%;
+  -accent-foreground: 210 40% 98%;
+  -destructive: 0 63% 31%;
+  -destructive-foreground: 210 40% 98%;
+  -ring: 216 34% 17%;
+  -radius: 0.5rem;
+}
+
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
 body {
-	margin: 0;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-		"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-		sans-serif;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu",
+    "Cantarell",
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }

 code {
-	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-		monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
 }

 /* The style below sets the cursor property of the element with the class .react-flow__pane to the default cursor.
 The cursor: default; property value restores the browser's default cursor style for the targeted element. By applying this style, the element will no longer have a custom cursor appearance such as "grab" or any other custom cursor defined elsewhere in the application. Instead, it will revert to the default cursor style determined by the browser, typically an arrow-shaped cursor. */
 .react-flow__pane {
  cursor: default;
-}
+}
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@ -124,7 +124,7 @@ flow("Hey, have you heard of LangFlow?")`;
              </button>
            ))}
          </div>
-          <div className="overflow-hidden px-4 py-2 sm:p-4 sm:pb-0 sm:pt-2 w-full h-full rounded-lg shadow bg-white dark:bg-gray-800">
+          <div className="overflow-hidden px-4 sm:p-4 sm:pb-0 sm:pt-0 w-full h-full rounded-lg shadow bg-white dark:bg-gray-800">
            <div className="items-center mb-2">
              <div className="float-right">
                <button
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@ -16,9 +16,11 @@ import Convert from "ansi-to-html";
 export default function ChatMessage({
  chat,
  lockChat,
+  lastMessage,
 }: {
  chat: ChatMessageType;
  lockChat: boolean;
+  lastMessage: boolean;
 }) {
  const convert = new Convert({ newline: true });
  const [message, setMessage] = useState("");
@ -48,7 +50,7 @@ export default function ChatMessage({
                "absolute transition-opacity duration-500 scale-150 " +
                (lockChat ? "opacity-100" : "opacity-0")
              }
-              src={AiIcon}
+              src={lastMessage ? AiIcon : AiIconStill}
            />
            <img
              className={
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@ -33,8 +33,15 @@ export default function ChatModal({
  const ws = useRef<WebSocket | null>(null);
  const [lockChat, setLockChat] = useState(false);
  const isOpen = useRef(open);
+  const messagesRef = useRef(null);
  const id = useRef(flow.id);

+  useEffect(() => {
+    if (messagesRef.current) {
+      messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
+    }
+  }, [chatHistory]);
+
  useEffect(() => {
    isOpen.current = open;
  }, [open]);
@ -175,10 +182,10 @@ export default function ChatModal({
    try {
      const urlWs =
        process.env.NODE_ENV === "development"
-          ? `ws://localhost:7860/chat/${id.current}`
+          ? `ws://localhost:7860/api/v1/chat/${id.current}`
          : `${window.location.protocol === "https:" ? "wss" : "ws"}://${
              window.location.host
-            }/chat/${id.current}`;
+            }api/v1/chat/${id.current}`;
      const newWs = new WebSocket(urlWs);
      newWs.onopen = () => {
        console.log("WebSocket connection established!");
@ -208,19 +215,11 @@ export default function ChatModal({
        }
      };
      ws.current = newWs;
-    } catch {
+    } catch (error) {
      if (flow.id === "") {
        connectWS();
-      } else {
-        setErrorData({
-          title: "There was an error on web connection, please: ",
-          list: [
-            "Refresh the page",
-            "Use a new flow tab",
-            "Check if the backend is up",
-          ],
-        });
      }
+      console.log(error);
    }
  }

@ -229,7 +228,7 @@ export default function ChatModal({
    return () => {
      console.log("unmount");
      console.log(ws);
-      if (ws) {
+      if (ws.current) {
        ws.current.close();
      }
    };
@ -237,8 +236,9 @@ export default function ChatModal({

  useEffect(() => {
    if (
-      ws.current.readyState === ws.current.CLOSED ||
-      ws.current.readyState === ws.current.CLOSING
+      ws.current &&
+      (ws.current.readyState === ws.current.CLOSED ||
+        ws.current.readyState === ws.current.CLOSING)
    ) {
      connectWS();
      setLockChat(false);
@ -283,7 +283,9 @@ export default function ChatModal({
        errors.concat(
          template[t].required &&
            template[t].show &&
-            (!template[t].value || template[t].value === "") &&
+            (template[t].value === undefined ||
+              template[t].value === null ||
+              template[t].value === "") &&
            !reactFlowInstance
              .getEdges()
              .some(
@ -401,10 +403,18 @@ export default function ChatModal({
                    <HiX className="w-5 h-5" />
                  </button>
                </div>
-                <div className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide">
+                <div
+                  ref={messagesRef}
+                  className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide"
+                >
                  {chatHistory.length > 0 ? (
                    chatHistory.map((c, i) => (
-                      <ChatMessage lockChat={lockChat} chat={c} key={i} />
+                      <ChatMessage
+                        lockChat={lockChat}
+                        chat={c}
+                        lastMessage={chatHistory.length - 1 == i ? true : false}
+                        key={i}
+                      />
                    ))
                  ) : (
                    <div className="flex flex-col h-full text-center justify-center w-full items-center align-middle">
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@ -5,6 +5,7 @@ import { DisclosureComponentType } from "../../../../types/components";
 export default function DisclosureComponent({
  button: { title, Icon, buttons = [] },
  children,
+  openDisc,
 }: DisclosureComponentType) {
  return (
    <Disclosure as="div" key={title}>
@ -27,14 +28,14 @@ export default function DisclosureComponent({
                <div>
                  <ChevronRightIcon
                    className={`${
-                      open ? "rotate-90 transform" : ""
+                      open || openDisc ? "rotate-90 transform" : ""
                    } h-4 w-4 text-gray-800 dark:text-white`}
                  />
                </div>
              </div>
            </Disclosure.Button>
          </div>
-          <Disclosure.Panel as="div" className="-mt-px">
+          <Disclosure.Panel as="div" className="-mt-px" static={openDisc}>
            {children}
          </Disclosure.Panel>
        </>
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@ -1,13 +1,21 @@
 import { Bars2Icon } from "@heroicons/react/24/outline";
 import DisclosureComponent from "../DisclosureComponent";
-import { nodeColors, nodeIcons, nodeNames } from "../../../../utils";
-import { useContext, useEffect, useState } from "react";
+import {
+  classNames,
+  nodeColors,
+  nodeIcons,
+  nodeNames,
+} from "../../../../utils";
+import { useContext, useEffect, useState, useRef } from "react";
 import { typesContext } from "../../../../contexts/typesContext";
 import { APIClassType, APIObjectType } from "../../../../types/api";
-import TooltipReact from "../../../../components/ReactTooltipComponent";
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import ShadTooltip from "../../../../components/ShadTooltipComponent";

 export default function ExtraSidebar() {
  const { data } = useContext(typesContext);
+  const [dataFilter, setFilterData] = useState(data);
+  const [search, setSearch] = useState("");

  function onDragStart(
    event: React.DragEvent<any>,
@ -24,66 +32,102 @@ export default function ExtraSidebar() {
    event.dataTransfer.setData("json", JSON.stringify(data));
  }

+  function handleSearchInput(e: string) {
+    setFilterData((_) => {
+      let ret = {};
+      Object.keys(data).forEach((d: keyof APIObjectType, i) => {
+        ret[d] = {};
+        let keys = Object.keys(data[d]).filter((nd) =>
+          nd.toLowerCase().includes(e.toLowerCase())
+        );
+        keys.forEach((element) => {
+          ret[d][element] = data[d][element];
+        });
+      });
+      return ret;
+    });
+  }
+
  return (
-    <div className="mt-1 w-full">
-      {Object.keys(data)
-        .sort()
-        .map((d: keyof APIObjectType, i) => (
-          <DisclosureComponent
-            key={i}
-            button={{
-              title: nodeNames[d] ?? nodeNames.unknown,
-              Icon: nodeIcons[d] ?? nodeIcons.unknown,
-            }}
-          >
-            <div className="p-2 flex flex-col gap-2">
-              {Object.keys(data[d])
-                .sort()
-                .map((t: string, k) => (
-                  <TooltipReact
-                    selector={t}
-                    htmlContent={t}
-                    position="right"
-                    delayShow={1500}
-                    key={k}
-                  >
-                    <div key={k} data-tooltip-id={t}>
-                      <div
-                        draggable
-                        className={" cursor-grab border-l-8 rounded-l-md"}
-                        style={{
-                          borderLeftColor: nodeColors[d] ?? nodeColors.unknown,
-                        }}
-                        onDragStart={(event) =>
-                          onDragStart(event, {
-                            type: t,
-                            node: data[d][t],
-                          })
-                        }
-                        onDragEnd={() => {
-                          document.body.removeChild(
-                            document.getElementsByClassName(
-                              "cursor-grabbing"
-                            )[0]
-                          );
-                        }}
+    <>
+      <div className="relative mt-2 flex items-center mb-2 mx-2">
+        <input
+          type="text"
+          name="search"
+          id="search"
+          placeholder="Search nodes"
+          className="dark:text-white focus:outline-none block w-full rounded-md py-1.5 ps-3 pr-9 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6 dark:ring-0 dark:bg-[#2d3747] dark:focus:outline-none"
+          onChange={(e) => {
+            handleSearchInput(e.target.value);
+            setSearch(e.target.value);
+          }}
+        />
+        <div className="absolute inset-y-0 right-0 flex py-1.5 pr-3 items-center">
+          <MagnifyingGlassIcon className="h-5 w-5 dark:text-white"></MagnifyingGlassIcon>
+        </div>
+      </div>
+
+      <div className="mt-1 w-full">
+        {Object.keys(dataFilter)
+          .sort()
+          .map((d: keyof APIObjectType, i) =>
+            Object.keys(dataFilter[d]).length > 0 ? (
+              <DisclosureComponent
+                openDisc={search.length == 0 ? false : true}
+                key={i}
+                button={{
+                  title: nodeNames[d] ?? nodeNames.unknown,
+                  Icon: nodeIcons[d] ?? nodeIcons.unknown,
+                }}
+              >
+                <div className="p-2 flex flex-col gap-2">
+                  {Object.keys(dataFilter[d])
+                    .sort()
+                    .map((t: string, k) => (
+                      <ShadTooltip
+                        content={t}
+                        delayDuration={1500}
+                        side="right"
                      >
-                        <div className="flex w-full justify-between text-sm px-3 py-1 bg-white dark:bg-gray-800 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
-                          <span className="text-black dark:text-white w-36 pr-1 truncate text-xs">
-                            {t}
-                          </span>
-                          <Bars2Icon className="w-4 h-6  text-gray-400 dark:text-gray-600" />
+                        <div key={k} data-tooltip-id={t}>
+                          <div
+                            draggable
+                            className={" cursor-grab border-l-8 rounded-l-md"}
+                            style={{
+                              borderLeftColor:
+                                nodeColors[d] ?? nodeColors.unknown,
+                            }}
+                            onDragStart={(event) =>
+                              onDragStart(event, {
+                                type: t,
+                                node: data[d][t],
+                              })
+                            }
+                            onDragEnd={() => {
+                              document.body.removeChild(
+                                document.getElementsByClassName(
+                                  "cursor-grabbing"
+                                )[0]
+                              );
+                            }}
+                          >
+                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-white dark:bg-gray-800 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
+                              <span className="text-black dark:text-white w-36 pr-1 truncate text-xs">
+                                {t}
+                              </span>
+                              <Bars2Icon className="w-4 h-6  text-gray-400 dark:text-gray-600" />
+                            </div>
+                          </div>
                        </div>
-                      </div>
-                    </div>
-                  </TooltipReact>
-                ))}
-              {Object.keys(data[d]).length === 0 && (
-                <div className="text-gray-400 text-center">Coming soon</div>
-              )}
-            </div>
-          </DisclosureComponent>
-        ))}
-    </div>
+                      </ShadTooltip>
+                    ))}
+                </div>
+              </DisclosureComponent>
+            ) : (
+              <div key={i}></div>
+            )
+          )}
+      </div>
+    </>
  );
 }
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@ -77,7 +77,7 @@ const NodeToolbarComponent = (props) => {
                props.openPopUp(<NodeModal data={props.data} />);
              }}
            >
-              <div className=" absolute right-1 top-0 text-red-600">
+              <div className=" absolute right-1 top-[-2px] text-red-600">
                {Object.keys(props.data.node.template).some(
                  (t) =>
                    props.data.node.template[t].advanced &&
--- a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
@ -116,7 +116,7 @@ export default function TabsManagerComponent() {
          </button>
        </div>
      </div>
-      <div className="w-full h-full">
+      <div className="w-full h-full dark:bg-gray-800">
        <ReactFlowProvider>
          {flows[tabIndex] ? (
            <FlowPage flow={flows[tabIndex]}></FlowPage>
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@ -349,7 +349,9 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
            onSelectionChange={onSelectionChange}
            nodesDraggable={!disableCopyPaste}
            panOnDrag={!disableCopyPaste}
+            zoomOnDoubleClick={!disableCopyPaste}
            selectNodesOnDrag={false}
+            className="theme-attribution"
          >
            <Background className="dark:bg-gray-900" />
            <Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600"></Controls>
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@ -3,6 +3,7 @@ import {
  ReactElement,
  ReactFragment,
  ReactNode,
+  SVGProps,
 } from "react";
 import { NodeDataType } from "../flow/index";
 export type InputComponentType = {
@ -60,6 +61,7 @@ export type FileComponentType = {

 export type DisclosureComponentType = {
  children: ReactNode;
+  openDisc: boolean;
  button: {
    title: string;
    Icon: ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@ -21,6 +21,7 @@ import { FlowType, NodeType } from "./types/flow";
 import { APITemplateType, TemplateVariableType } from "./types/api";
 import _ from "lodash";
 import { ChromaIcon } from "./icons/ChromaIcon";
+import { AnthropicIcon } from "./icons/Anthropic";
 import { AirbyteIcon } from "./icons/Airbyte";
 import { AzIcon } from "./icons/AzLogo";
 import { BingIcon } from "./icons/Bing";
@ -159,6 +160,8 @@ export const nodeIcons: {
  AirbyteJSONLoader: AirbyteIcon,
  // SerpAPIWrapper: SerperIcon,
  // AZLyricsLoader: AzIcon,
+  Anthropic: AnthropicIcon,
+  ChatAnthropic: AnthropicIcon,
  BingSearchAPIWrapper: BingIcon,
  BingSearchRun: BingIcon,
  Cohere: CohereIcon,
@ -642,3 +645,58 @@ export function updateIds(newFlow, getNodeId) {
      e.targetHandle;
  });
 }
+
+export function groupByFamily(data, baseClasses) {
+  let arrOfParent: string[] = [];
+  let arrOfType: { family: string; type: string }[] = [];
+
+  Object.keys(data).map((d) => {
+    Object.keys(data[d]).map((n) => {
+      if (
+        data[d][n].base_classes.some((r) => baseClasses.split("\n").includes(r))
+      ) {
+        arrOfParent.push(d);
+      }
+    });
+  });
+
+  let uniq = arrOfParent.filter(
+    (item, index) => arrOfParent.indexOf(item) === index
+  );
+
+  Object.keys(data).map((d) => {
+    Object.keys(data[d]).map((n) => {
+      baseClasses.split("\n").forEach((tol) => {
+        data[d][n].base_classes.forEach((data) => {
+          if (tol == data) {
+            arrOfType.push({
+              family: d,
+              type: data,
+            });
+          }
+        });
+      });
+    });
+  });
+
+  let groupedBy = arrOfType.filter((object, index, self) => {
+    const foundIndex = self.findIndex(
+      (o) => o.family === object.family && o.type === object.type
+    );
+    return foundIndex === index;
+  });
+
+  let groupedObj = groupedBy.reduce((result, item) => {
+    const existingGroup = result.find((group) => group.family === item.family);
+
+    if (existingGroup) {
+      existingGroup.type += `, ${item.type}`;
+    } else {
+      result.push({ family: item.family, type: item.type });
+    }
+
+    return result;
+  }, []);
+
+  return groupedObj;
+}
--- a/src/frontend/tsconfig.json
+++ b/src/frontend/tsconfig.json
@ -19,7 +19,8 @@
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
-    "noImplicitAny": false
+    "noImplicitAny": false,
+    "baseUrl": "."
  },
  "include": [
    "src"
--- a/src/frontend/vite.config.ts
+++ b/src/frontend/vite.config.ts
@ -11,7 +11,7 @@ const apiRoutes = [
 ];

 // Use environment variable to determine the target.
-const target = process.env.VITE_PROXY_TARGET || "http://127.0.0.1:7860";
+const target = process.env.VITE_PROXY_TARGET || "http://127.0.0.1:7860/api/v1";

 const proxyTargets = apiRoutes.reduce((proxyObj, route) => {
  proxyObj[route] = {