diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 91d41800a..d63a91ea2 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -22,10 +22,13 @@ import { getRandomKeyByssmm, groupByFamily, isValidConnection, - nodeIconsLucide, } from "../../../../utils"; import { cleanEdges } from "../../../../utils/reactflowUtils"; -import { nodeColors, nodeNames } from "../../../../utils/styleUtils"; +import { + nodeColors, + nodeIconsLucide, + nodeNames, +} from "../../../../utils/styleUtils"; export default function ParameterComponent({ left, diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 18b42c670..f53c0bb97 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -10,8 +10,8 @@ import { typesContext } from "../../contexts/typesContext"; import NodeModal from "../../modals/NodeModal"; import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent"; import { NodeDataType } from "../../types/flow"; -import { classNames, nodeIconsLucide, toTitleCase } from "../../utils"; -import { nodeColors } from "../../utils/styleUtils"; +import { classNames, toTitleCase } from "../../utils"; +import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils"; import ParameterComponent from "./components/parameterComponent"; export default function GenericNode({ diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx index c84858c6d..2446f1148 100644 --- a/src/frontend/src/modals/NodeModal/index.tsx +++ b/src/frontend/src/modals/NodeModal/index.tsx @@ -5,8 +5,8 @@ import { limitScrollFieldsModal } from "../../constants"; import { PopUpContext } from "../../contexts/popUpContext"; import { typesContext } from "../../contexts/typesContext"; import { NodeDataType } from "../../types/flow"; -import { classNames, nodeIconsLucide, toTitleCase } from "../../utils"; -import { nodeColors } from "../../utils/styleUtils"; +import { classNames, toTitleCase } from "../../utils"; +import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils"; import ModalField from "./components/ModalField"; export default function NodeModal({ data }: { data: NodeDataType }) { diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 68a3f7b94..883777f29 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -9,8 +9,12 @@ import { typesContext } from "../../../../contexts/typesContext"; import ApiModal from "../../../../modals/ApiModal"; import ExportModal from "../../../../modals/exportModal"; import { APIClassType, APIObjectType } from "../../../../types/api"; -import { classNames, nodeIconsLucide } from "../../../../utils"; -import { nodeColors, nodeNames } from "../../../../utils/styleUtils"; +import { classNames } from "../../../../utils"; +import { + nodeColors, + nodeIconsLucide, + nodeNames, +} from "../../../../utils/styleUtils"; import DisclosureComponent from "../DisclosureComponent"; export default function ExtraSidebar() { diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts index 53efccd74..de42e7819 100644 --- a/src/frontend/src/utils.ts +++ b/src/frontend/src/utils.ts @@ -1,52 +1,8 @@ import clsx, { ClassValue } from "clsx"; import _ from "lodash"; -import { - Compass, - Cpu, - FileSearch, - Fingerprint, - Gift, - Hammer, - HelpCircle, - Laptop2, - Layers, - Lightbulb, - Link, - MessageCircle, - Paperclip, - Rocket, - Scissors, - TerminalSquare, - Wand2, - Wrench, -} from "lucide-react"; -import { ComponentType, SVGProps } from "react"; -import { Connection, Edge, Node, ReactFlowInstance } from "reactflow"; +import { Connection, ReactFlowInstance } from "reactflow"; import { twMerge } from "tailwind-merge"; import { ADJECTIVES, DESCRIPTIONS, NOUNS } from "./flow_constants"; -import { AirbyteIcon } from "./icons/Airbyte"; -import { AnthropicIcon } from "./icons/Anthropic"; -import { BingIcon } from "./icons/Bing"; -import { ChromaIcon } from "./icons/ChromaIcon"; -import { CohereIcon } from "./icons/Cohere"; -import { EvernoteIcon } from "./icons/Evernote"; -import { FBIcon } from "./icons/FacebookMessenger"; -import { GitBookIcon } from "./icons/GitBook"; -import { GoogleIcon } from "./icons/Google"; -import { HuggingFaceIcon } from "./icons/HuggingFace"; -import { IFixIcon } from "./icons/IFixIt"; -import { MetaIcon } from "./icons/Meta"; -import { MidjourneyIcon } from "./icons/Midjorney"; -import { MongoDBIcon } from "./icons/MongoDB"; -import { NotionIcon } from "./icons/Notion"; -import { OpenAiIcon } from "./icons/OpenAi"; -import { PineconeIcon } from "./icons/Pinecone"; -import { QDrantIcon } from "./icons/QDrant"; -import { SearxIcon } from "./icons/Searx"; -import { SlackIcon } from "./icons/Slack"; -import { VertexAIIcon } from "./icons/VertexAI"; -import { HackerNewsIcon } from "./icons/hackerNews"; -import { SupabaseIcon } from "./icons/supabase"; import { APITemplateType } from "./types/api"; import { IVarHighlightType } from "./types/components"; import { FlowType, NodeType } from "./types/flow"; @@ -55,163 +11,6 @@ export function classNames(...classes: Array) { return classes.filter(Boolean).join(" "); } -export const nodeIconsLucide: { - [char: string]: React.ForwardRefExoticComponent< - ComponentType> - >; -} = { - Chroma: ChromaIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - AirbyteJSONLoader: AirbyteIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - Anthropic: AnthropicIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - ChatAnthropic: AnthropicIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - BingSearchAPIWrapper: BingIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - BingSearchRun: BingIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - Cohere: CohereIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - CohereEmbeddings: CohereIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - EverNoteLoader: EvernoteIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - FacebookChatLoader: FBIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - GitbookLoader: GitBookIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - GoogleSearchAPIWrapper: GoogleIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - GoogleSearchResults: GoogleIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - GoogleSearchRun: GoogleIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - HNLoader: HackerNewsIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - HuggingFaceHub: HuggingFaceIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - HuggingFaceEmbeddings: HuggingFaceIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - IFixitLoader: IFixIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - Meta: MetaIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - Midjorney: MidjourneyIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - MongoDBAtlasVectorSearch: MongoDBIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - NotionDirectoryLoader: NotionIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - ChatOpenAI: OpenAiIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - OpenAI: OpenAiIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - OpenAIEmbeddings: OpenAiIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - Pinecone: PineconeIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - Qdrant: QDrantIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - Searx: SearxIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - SlackDirectoryLoader: SlackIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - SupabaseVectorStore: SupabaseIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - VertexAI: VertexAIIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - ChatVertexAI: VertexAIIcon as React.ForwardRefExoticComponent< - ComponentType> - >, - agents: Rocket as React.ForwardRefExoticComponent< - ComponentType> - >, - chains: Link as React.ForwardRefExoticComponent< - ComponentType> - >, - memories: Cpu as React.ForwardRefExoticComponent< - ComponentType> - >, - llms: Lightbulb as React.ForwardRefExoticComponent< - ComponentType> - >, - prompts: TerminalSquare as React.ForwardRefExoticComponent< - ComponentType> - >, - tools: Wrench as React.ForwardRefExoticComponent< - ComponentType> - >, - advanced: Laptop2 as React.ForwardRefExoticComponent< - ComponentType> - >, - chat: MessageCircle as React.ForwardRefExoticComponent< - ComponentType> - >, - embeddings: Fingerprint as React.ForwardRefExoticComponent< - ComponentType> - >, - documentloaders: Paperclip as React.ForwardRefExoticComponent< - ComponentType> - >, - vectorstores: Layers as React.ForwardRefExoticComponent< - ComponentType> - >, - toolkits: Hammer as React.ForwardRefExoticComponent< - ComponentType> - >, - textsplitters: Scissors as React.ForwardRefExoticComponent< - ComponentType> - >, - wrappers: Gift as React.ForwardRefExoticComponent< - ComponentType> - >, - utilities: Wand2 as React.ForwardRefExoticComponent< - ComponentType> - >, - output_parsers: Compass as React.ForwardRefExoticComponent< - ComponentType> - >, - retrievers: FileSearch as React.ForwardRefExoticComponent< - ComponentType> - >, - unknown: HelpCircle as React.ForwardRefExoticComponent< - ComponentType> - >, -}; - export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } @@ -275,12 +74,6 @@ export function roundNumber(x: number, decimals: number) { return Math.round(x * Math.pow(10, decimals)) / Math.pow(10, decimals); } -export function getConnectedNodes(edge: Edge, nodes: Array): Array { - const sourceId = edge.source; - const targetId = edge.target; - return nodes.filter((node) => node.id === targetId || node.id === sourceId); -} - export function isValidConnection( { source, target, sourceHandle, targetHandle }: Connection, reactFlowInstance: ReactFlowInstance diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts index 2e96d48cd..47aa1c5ce 100644 --- a/src/frontend/src/utils/styleUtils.ts +++ b/src/frontend/src/utils/styleUtils.ts @@ -1,3 +1,49 @@ +import { + Compass, + Cpu, + FileSearch, + Fingerprint, + Gift, + Hammer, + HelpCircle, + Laptop2, + Layers, + Lightbulb, + Link, + MessageCircle, + Paperclip, + Rocket, + Scissors, + SlackIcon, + TerminalSquare, + Wand2, + Wrench, +} from "lucide-react"; +import { ComponentType, SVGProps } from "react"; +import { Edge, Node } from "reactflow"; +import { AirbyteIcon } from "../icons/Airbyte"; +import { AnthropicIcon } from "../icons/Anthropic"; +import { BingIcon } from "../icons/Bing"; +import { ChromaIcon } from "../icons/ChromaIcon"; +import { CohereIcon } from "../icons/Cohere"; +import { EvernoteIcon } from "../icons/Evernote"; +import { FBIcon } from "../icons/FacebookMessenger"; +import { GitBookIcon } from "../icons/GitBook"; +import { GoogleIcon } from "../icons/Google"; +import { HuggingFaceIcon } from "../icons/HuggingFace"; +import { IFixIcon } from "../icons/IFixIt"; +import { MetaIcon } from "../icons/Meta"; +import { MidjourneyIcon } from "../icons/Midjorney"; +import { MongoDBIcon } from "../icons/MongoDB"; +import { NotionIcon } from "../icons/Notion"; +import { OpenAiIcon } from "../icons/OpenAi"; +import { PineconeIcon } from "../icons/Pinecone"; +import { QDrantIcon } from "../icons/QDrant"; +import { SearxIcon } from "../icons/Searx"; +import { VertexAIIcon } from "../icons/VertexAI"; +import { HackerNewsIcon } from "../icons/hackerNews"; +import { SupabaseIcon } from "../icons/supabase"; + export const gradients = [ "bg-gradient-to-br from-gray-800 via-rose-700 to-violet-900", "bg-gradient-to-br from-green-200 via-green-300 to-blue-500", @@ -75,3 +121,166 @@ export const nodeNames: { [char: string]: string } = { output_parsers: "Output Parsers", unknown: "Unknown", }; + +export const nodeIconsLucide: { + [char: string]: React.ForwardRefExoticComponent< + ComponentType> + >; +} = { + Chroma: ChromaIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + AirbyteJSONLoader: AirbyteIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + Anthropic: AnthropicIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + ChatAnthropic: AnthropicIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + BingSearchAPIWrapper: BingIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + BingSearchRun: BingIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + Cohere: CohereIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + CohereEmbeddings: CohereIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + EverNoteLoader: EvernoteIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + FacebookChatLoader: FBIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + GitbookLoader: GitBookIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + GoogleSearchAPIWrapper: GoogleIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + GoogleSearchResults: GoogleIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + GoogleSearchRun: GoogleIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + HNLoader: HackerNewsIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + HuggingFaceHub: HuggingFaceIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + HuggingFaceEmbeddings: HuggingFaceIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + IFixitLoader: IFixIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + Meta: MetaIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + Midjorney: MidjourneyIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + MongoDBAtlasVectorSearch: MongoDBIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + NotionDirectoryLoader: NotionIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + ChatOpenAI: OpenAiIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + OpenAI: OpenAiIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + OpenAIEmbeddings: OpenAiIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + Pinecone: PineconeIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + Qdrant: QDrantIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + Searx: SearxIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + SlackDirectoryLoader: SlackIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + SupabaseVectorStore: SupabaseIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + VertexAI: VertexAIIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + ChatVertexAI: VertexAIIcon as React.ForwardRefExoticComponent< + ComponentType> + >, + agents: Rocket as React.ForwardRefExoticComponent< + ComponentType> + >, + chains: Link as React.ForwardRefExoticComponent< + ComponentType> + >, + memories: Cpu as React.ForwardRefExoticComponent< + ComponentType> + >, + llms: Lightbulb as React.ForwardRefExoticComponent< + ComponentType> + >, + prompts: TerminalSquare as React.ForwardRefExoticComponent< + ComponentType> + >, + tools: Wrench as React.ForwardRefExoticComponent< + ComponentType> + >, + advanced: Laptop2 as React.ForwardRefExoticComponent< + ComponentType> + >, + chat: MessageCircle as React.ForwardRefExoticComponent< + ComponentType> + >, + embeddings: Fingerprint as React.ForwardRefExoticComponent< + ComponentType> + >, + documentloaders: Paperclip as React.ForwardRefExoticComponent< + ComponentType> + >, + vectorstores: Layers as React.ForwardRefExoticComponent< + ComponentType> + >, + toolkits: Hammer as React.ForwardRefExoticComponent< + ComponentType> + >, + textsplitters: Scissors as React.ForwardRefExoticComponent< + ComponentType> + >, + wrappers: Gift as React.ForwardRefExoticComponent< + ComponentType> + >, + utilities: Wand2 as React.ForwardRefExoticComponent< + ComponentType> + >, + output_parsers: Compass as React.ForwardRefExoticComponent< + ComponentType> + >, + retrievers: FileSearch as React.ForwardRefExoticComponent< + ComponentType> + >, + unknown: HelpCircle as React.ForwardRefExoticComponent< + ComponentType> + >, +}; + +export function getConnectedNodes(edge: Edge, nodes: Array): Array { + const sourceId = edge.source; + const targetId = edge.target; + return nodes.filter((node) => node.id === targetId || node.id === sourceId); +}