icons in styleUtils

This commit is contained in:
anovazzi1 2023-07-13 18:17:27 -03:00
commit 3dc89726a3
6 changed files with 225 additions and 216 deletions

View file

@ -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,

View file

@ -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({

View file

@ -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 }) {

View file

@ -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() {

View file

@ -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<string>) {
return classes.filter(Boolean).join(" ");
}
export const nodeIconsLucide: {
[char: string]: React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>;
} = {
Chroma: ChromaIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
AirbyteJSONLoader: AirbyteIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
Anthropic: AnthropicIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
ChatAnthropic: AnthropicIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
BingSearchAPIWrapper: BingIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
BingSearchRun: BingIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
Cohere: CohereIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
CohereEmbeddings: CohereIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
EverNoteLoader: EvernoteIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
FacebookChatLoader: FBIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
GitbookLoader: GitBookIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
GoogleSearchAPIWrapper: GoogleIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
GoogleSearchResults: GoogleIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
GoogleSearchRun: GoogleIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
HNLoader: HackerNewsIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
HuggingFaceHub: HuggingFaceIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
HuggingFaceEmbeddings: HuggingFaceIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
IFixitLoader: IFixIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
Meta: MetaIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
Midjorney: MidjourneyIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
MongoDBAtlasVectorSearch: MongoDBIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
NotionDirectoryLoader: NotionIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
ChatOpenAI: OpenAiIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
OpenAI: OpenAiIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
OpenAIEmbeddings: OpenAiIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
Pinecone: PineconeIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
Qdrant: QDrantIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
Searx: SearxIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
SlackDirectoryLoader: SlackIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
SupabaseVectorStore: SupabaseIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
VertexAI: VertexAIIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
ChatVertexAI: VertexAIIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
agents: Rocket as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
chains: Link as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
memories: Cpu as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
llms: Lightbulb as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
prompts: TerminalSquare as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
tools: Wrench as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
advanced: Laptop2 as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
chat: MessageCircle as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
embeddings: Fingerprint as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
documentloaders: Paperclip as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
vectorstores: Layers as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
toolkits: Hammer as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
textsplitters: Scissors as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
wrappers: Gift as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
utilities: Wand2 as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
output_parsers: Compass as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
retrievers: FileSearch as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
unknown: HelpCircle as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
};
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<Node>): Array<Node> {
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

View file

@ -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<SVGProps<SVGSVGElement>>
>;
} = {
Chroma: ChromaIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
AirbyteJSONLoader: AirbyteIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
Anthropic: AnthropicIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
ChatAnthropic: AnthropicIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
BingSearchAPIWrapper: BingIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
BingSearchRun: BingIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
Cohere: CohereIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
CohereEmbeddings: CohereIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
EverNoteLoader: EvernoteIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
FacebookChatLoader: FBIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
GitbookLoader: GitBookIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
GoogleSearchAPIWrapper: GoogleIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
GoogleSearchResults: GoogleIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
GoogleSearchRun: GoogleIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
HNLoader: HackerNewsIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
HuggingFaceHub: HuggingFaceIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
HuggingFaceEmbeddings: HuggingFaceIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
IFixitLoader: IFixIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
Meta: MetaIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
Midjorney: MidjourneyIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
MongoDBAtlasVectorSearch: MongoDBIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
NotionDirectoryLoader: NotionIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
ChatOpenAI: OpenAiIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
OpenAI: OpenAiIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
OpenAIEmbeddings: OpenAiIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
Pinecone: PineconeIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
Qdrant: QDrantIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
Searx: SearxIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
SlackDirectoryLoader: SlackIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
SupabaseVectorStore: SupabaseIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
VertexAI: VertexAIIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
ChatVertexAI: VertexAIIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
agents: Rocket as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
chains: Link as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
memories: Cpu as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
llms: Lightbulb as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
prompts: TerminalSquare as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
tools: Wrench as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
advanced: Laptop2 as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
chat: MessageCircle as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
embeddings: Fingerprint as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
documentloaders: Paperclip as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
vectorstores: Layers as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
toolkits: Hammer as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
textsplitters: Scissors as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
wrappers: Gift as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
utilities: Wand2 as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
output_parsers: Compass as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
retrievers: FileSearch as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
unknown: HelpCircle as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
};
export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
const sourceId = edge.source;
const targetId = edge.target;
return nodes.filter((node) => node.id === targetId || node.id === sourceId);
}