diff --git a/src/frontend/src/components/genericIconComponent/index.tsx b/src/frontend/src/components/genericIconComponent/index.tsx index 4b299ad3d..5a00d2460 100644 --- a/src/frontend/src/components/genericIconComponent/index.tsx +++ b/src/frontend/src/components/genericIconComponent/index.tsx @@ -1,12 +1,19 @@ -/* import React, { forwardRef } from "react"; +import { FC } from "react"; +import SvgGoogle from "../../icons/Google/Google"; +import SvgBing from "../../icons/Bing/Bing"; +import { IconComponentProps, SvgIconProps } from "../../types/components"; +import { svgIcons } from "../../utils"; -export default function IconComponent(icon, props, ref) { +export function IconFromSvg({ name }: SvgIconProps): JSX.Element { + const TargetSvg = svgIcons[name] return ( - forwardRef< - SVGSVGElement, - React.PropsWithChildren<{}> - >((props, ref) => { - return < ref={ref} {...props} />; - }) + ); -} */ \ No newline at end of file +} + +export default function IconComponent({ method, name }: IconComponentProps): JSX.Element { + switch (method) { + case 'SVG': + return + } +} diff --git a/src/frontend/src/icons/Anthropic/Anthropic.jsx b/src/frontend/src/icons/Anthropic/Anthropic.jsx new file mode 100644 index 000000000..6f68808b8 --- /dev/null +++ b/src/frontend/src/icons/Anthropic/Anthropic.jsx @@ -0,0 +1,18 @@ +import * as React from "react"; +const SvgAnthropic = (props) => ( + + + +); +export default SvgAnthropic; diff --git a/src/frontend/src/icons/Anthropic/AnthropicBox.jsx b/src/frontend/src/icons/Anthropic/AnthropicBox.jsx new file mode 100644 index 000000000..53080e5fe --- /dev/null +++ b/src/frontend/src/icons/Anthropic/AnthropicBox.jsx @@ -0,0 +1,19 @@ +import * as React from "react"; +const SvgAnthropicBox = (props) => ( + + + + + + +); +export default SvgAnthropicBox; diff --git a/src/frontend/src/icons/Anthropic/index.tsx b/src/frontend/src/icons/Anthropic/index.tsx index 4cdf8f910..9dd920c64 100644 --- a/src/frontend/src/icons/Anthropic/index.tsx +++ b/src/frontend/src/icons/Anthropic/index.tsx @@ -1,9 +1,9 @@ import React, { forwardRef } from "react"; -import { ReactComponent as AnthropicSVG } from "./anthropic_box.svg"; +import SvgAnthropicBox from "./AnthropicBox"; export const AnthropicIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { - return ; + return ; }); diff --git a/src/frontend/src/icons/Notion/index.tsx b/src/frontend/src/icons/Notion/index.tsx index 265a5c153..cf3e3f48b 100644 --- a/src/frontend/src/icons/Notion/index.tsx +++ b/src/frontend/src/icons/Notion/index.tsx @@ -1,9 +1,9 @@ import React, { forwardRef } from "react"; -import { ReactComponent as NotionSVG } from "./Notion-logo.svg"; +import SvgNotionLogo from "./NotionLogo"; export const NotionIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { - return ; + return ; }); diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx index f9b170197..fb80f657c 100644 --- a/src/frontend/src/pages/FlowPage/index.tsx +++ b/src/frontend/src/pages/FlowPage/index.tsx @@ -3,6 +3,7 @@ import { useParams } from "react-router-dom"; import { TabsContext } from "../../contexts/tabsContext"; import { getVersion } from "../../controllers/API"; import Page from "./components/PageComponent"; +import IconComponent from "../../components/genericIconComponent"; export default function FlowPage() { const { flows, tabId, setTabId } = useContext(TabsContext); diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 4ce9e526f..3b0416a6d 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -161,3 +161,12 @@ export type TextHighlightType = { export interface IVarHighlightType { name: string; } + +export type SvgIconProps = { + name: string; +} + +export type IconComponentProps = { + method: string; + name: string; +} diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts index 5ae191c67..5c441bce2 100644 --- a/src/frontend/src/utils.ts +++ b/src/frontend/src/utils.ts @@ -50,6 +50,36 @@ import { SupabaseIcon } from "./icons/supabase"; import { APITemplateType } from "./types/api"; import { IVarHighlightType } from "./types/components"; import { FlowType, NodeType } from "./types/flow"; +import SvgAirbyte from "./icons/Airbyte/Airbyte"; +import SvgAnthropicBox from "./icons/Anthropic/AnthropicBox"; +import SvgBing from "./icons/Bing/Bing"; +import SvgChroma from "./icons/ChromaIcon/Chroma"; +import SvgCohere from "./icons/Cohere/Cohere"; +import SvgEvernoteIcon from "./icons/Evernote/EvernoteIcon"; +import SvgFacebookMessengerLogo2020 from "./icons/FacebookMessenger/FacebookMessengerLogo2020"; +import SvgGitbookSvgrepoCom from "./icons/GitBook/GitbookSvgrepoCom"; +import SvgGoogle from "./icons/Google/Google"; +import SvgYCombinatorLogo from "./icons/hackerNews/YCombinatorLogo"; +import SvgHfLogo from "./icons/HuggingFace/HfLogo"; +import SvgIfixitSeeklogocom from "./icons/IFixIt/IfixitSeeklogoCom"; +import SvgMetaIcon from "./icons/Meta/MetaIcon"; +import SvgMidjourneyEmblem from "./icons/Midjorney/MidjourneyEmblem"; +import SvgMongodbIcon from "./icons/MongoDB/MongodbIcon"; +import SvgNotionLogo from "./icons/Notion/NotionLogo"; +import SvgOpenAi from "./icons/OpenAi/OpenAi"; +import SvgPineconeLogo from "./icons/Pinecone/PineconeLogo"; +import SvgPowerPoint from "./icons/PowerPoint/PowerPoint"; +import SvgQDrant from "./icons/QDrant/QDrant"; +import SvgReadthedocsioIcon from "./icons/ReadTheDocs/ReadthedocsioIcon"; +import SvgSearxLogo from "./icons/Searx/SearxLogo"; +import SvgSerper from "./icons/Serper/Serper"; +import SvgSlackIcon from "./icons/Slack/SlackIcon"; +import SvgSupabaseIcon from "./icons/supabase/SupabaseIcon"; +import SvgVertexAi from "./icons/VertexAI/VertexAi"; +import SvgWeaviate from "./icons/Weaviate/Weaviate"; +import SvgWikipedia from "./icons/Wikipedia/Wikipedia"; +import SvgWolfram from "./icons/Wolfram/Wolfram"; +import SvgWord from "./icons/Word/Word"; export function classNames(...classes: Array) { return classes.filter(Boolean).join(" "); @@ -62,6 +92,39 @@ export enum TypeModal { PROMPT = 2, } +export const svgIcons = { + Airbyte: SvgAirbyte, + Anthropic: SvgAnthropicBox, + Bing: SvgBing, + ChromaIcon: SvgChroma, + Cohere: SvgCohere, + Evernote: SvgEvernoteIcon, + FacebookMessenger: SvgFacebookMessengerLogo2020, + GitBook: SvgGitbookSvgrepoCom, + Google: SvgGoogle, + HackerNews: SvgYCombinatorLogo, + HuggingFace: SvgHfLogo, + IFixIt: SvgIfixitSeeklogocom, + Meta: SvgMetaIcon, + MidJorney: SvgMidjourneyEmblem, + MongoDB: SvgMongodbIcon, + Notion: SvgNotionLogo, + OpenAi: SvgOpenAi, + Pinecone: SvgPineconeLogo, + PowerPoint: SvgPowerPoint, + QDrant: SvgQDrant, + ReadTheDocs: SvgReadthedocsioIcon, + Searx: SvgSearxLogo, + Serper: SvgSerper, + Slack: SvgSlackIcon, + Supabase: SvgSupabaseIcon, + VertexAI: SvgVertexAi, + Weaviate: SvgWeaviate, + Wikipedia: SvgWikipedia, + Wolfram: SvgWolfram, + Word: SvgWord, +}; + export const textColors = { white: "text-white", red: "text-red-700",