fix: remove quick flash with already rendered icons (#7828)
* Fix rapid update with already rendered components * Added check to not re-render previously rendered icons * Removed all loaded icons in favor of lazy loaded icons * Fixed Share icon * Updated Lucide * Deleted Eager Icon Imports * Added AWS Inverted to Lazy Icon Imports * Added check if name contains a number to kebab case name * fixed freeze path shortcut * Added remaining icons to lazy icons mapping * Removed unused icon mapping, added eager loading react icons, added replacing "icon" with "" on get lucide name * removed unused import * Update hook to not be used inside function call * Updated package-lock
This commit is contained in:
Lucas Oliveira
GitHub
parent
7f5d7a5320
commit
ad3bc07733
10 changed files with 54 additions and 762 deletions
9
src/frontend/package-lock.json
generated
9
src/frontend/package-lock.json
generated
|
|
@ -52,7 +52,7 @@
|
|||
"framer-motion": "^11.2.10",
|
||||
"fuse.js": "^7.0.0",
|
||||
"lodash": "^4.17.21",
|
||||
"lucide-react": "^0.469.0",
|
||||
"lucide-react": "^0.503.0",
|
||||
"million": "^3.1.11",
|
||||
"moment": "^2.30.1",
|
||||
"moment-timezone": "^0.5.48",
|
||||
|
|
@ -9943,9 +9943,10 @@
|
|||
}
|
||||
},
|
||||
"node_modules/lucide-react": {
|
||||
"version": "0.469.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.469.0.tgz",
|
||||
"integrity": "sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw==",
|
||||
"version": "0.503.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.503.0.tgz",
|
||||
"integrity": "sha512-HGGkdlPWQ0vTF8jJ5TdIqhQXZi6uh3LnNgfZ8MHiuxFfX3RZeA79r2MW2tHAZKlAVfoNE8esm3p+O6VkIvpj6w==",
|
||||
"license": "ISC",
|
||||
"peerDependencies": {
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
"framer-motion": "^11.2.10",
|
||||
"fuse.js": "^7.0.0",
|
||||
"lodash": "^4.17.21",
|
||||
"lucide-react": "^0.469.0",
|
||||
"lucide-react": "^0.503.0",
|
||||
"million": "^3.1.11",
|
||||
"moment": "^2.30.1",
|
||||
"moment-timezone": "^0.5.48",
|
||||
|
|
@ -145,4 +145,4 @@
|
|||
"ua-parser-js": "^1.0.38",
|
||||
"vite": "^5.4.18"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,26 +27,32 @@ export const ForwardedIconComponent = memo(
|
|||
|
||||
useEffect(() => {
|
||||
// Reset states when icon name changes
|
||||
setIconError(false);
|
||||
setTargetIcon(null);
|
||||
if (!TargetIcon) {
|
||||
setIconError(false);
|
||||
setTargetIcon(null);
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
setShowFallback(true);
|
||||
}, 30);
|
||||
const timer = setTimeout(() => {
|
||||
setShowFallback(true);
|
||||
}, 30);
|
||||
|
||||
// Load the icon if we have a name
|
||||
if (name && typeof name === "string") {
|
||||
getNodeIcon(name)
|
||||
.then((component) => {
|
||||
setTargetIcon(component);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(`Error loading icon ${name}:`, error);
|
||||
setIconError(true);
|
||||
});
|
||||
// Load the icon if we have a name
|
||||
if (name && typeof name === "string") {
|
||||
getNodeIcon(name)
|
||||
.then((component) => {
|
||||
setTargetIcon(component);
|
||||
setShowFallback(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(`Error loading icon ${name}:`, error);
|
||||
setIconError(true);
|
||||
setShowFallback(false);
|
||||
});
|
||||
} else {
|
||||
setShowFallback(false);
|
||||
}
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [name]);
|
||||
|
||||
const style = {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
const SvgShare = (props) => (
|
||||
<svg width="1em" height="1em" {...props} xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="3 3 18 18" {...props} xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M11.995 19.5a7.232 7.232 0 0 0 2.898-.585 7.582 7.582 0 0 0 2.392-1.627 7.748 7.748 0 0 0 1.625-2.398c.393-.904.59-1.868.59-2.89a7.172 7.172 0 0 0-.59-2.89 7.708 7.708 0 0 0-4.026-4.024 7.231 7.231 0 0 0-2.898-.586 7.209 7.209 0 0 0-2.888.586c-.905.39-1.7.932-2.387 1.626A7.788 7.788 0 0 0 5.09 9.11 7.172 7.172 0 0 0 4.5 12c0 1.022.197 1.986.59 2.89a7.748 7.748 0 0 0 1.625 2.398 7.582 7.582 0 0 0 2.392 1.627c.904.39 1.867.585 2.888.585Zm-3.687-4.238a.423.423 0 0 1-.316-.149c-.093-.099-.14-.247-.14-.446 0-.966.14-1.812.419-2.537.279-.725.721-1.29 1.328-1.696.607-.406 1.406-.609 2.396-.609h.093V8.366c0-.142.051-.266.154-.372a.514.514 0 0 1 .385-.158c.105 0 .198.024.279.07.08.047.182.129.306.246l3.167 2.956c.068.068.118.14.149.214.03.074.046.148.046.223a.578.578 0 0 1-.046.223.668.668 0 0 1-.149.213l-3.167 2.984c-.21.198-.409.297-.594.297a.52.52 0 0 1-.53-.511v-1.487h-.093c-.736 0-1.354.115-1.853.344-.498.229-.93.675-1.295 1.338-.075.136-.16.223-.256.26a.78.78 0 0 1-.283.056Z"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -1,230 +0,0 @@
|
|||
import { AgentQLIcon } from "@/icons/AgentQL";
|
||||
import { AIMLIcon } from "@/icons/AIML";
|
||||
import { AirbyteIcon } from "@/icons/Airbyte";
|
||||
import { AnthropicIcon } from "@/icons/Anthropic";
|
||||
import { ApifyIcon, ApifyWhiteIcon } from "@/icons/Apify";
|
||||
import { ArizeIcon } from "@/icons/Arize";
|
||||
import { ArXivIcon } from "@/icons/ArXiv";
|
||||
import { AssemblyAIIcon } from "@/icons/AssemblyAI";
|
||||
import { AstraDBIcon } from "@/icons/AstraDB";
|
||||
import { AthenaIcon } from "@/icons/athena/index";
|
||||
import { AWSIcon } from "@/icons/AWS";
|
||||
import { AWSInvertedIcon } from "@/icons/AWSInverted";
|
||||
import { AzureIcon } from "@/icons/Azure";
|
||||
import { BingIcon } from "@/icons/Bing";
|
||||
import { BotMessageSquareIcon } from "@/icons/BotMessageSquare";
|
||||
import { BWPythonIcon } from "@/icons/BW python";
|
||||
import { CassandraIcon } from "@/icons/Cassandra";
|
||||
import { ChromaIcon } from "@/icons/ChromaIcon";
|
||||
import { ClickhouseIcon } from "@/icons/Clickhouse";
|
||||
import { CloudflareIcon } from "@/icons/Cloudflare";
|
||||
import { CohereIcon } from "@/icons/Cohere";
|
||||
import { ComposioIcon } from "@/icons/Composio";
|
||||
import { ConfluenceIcon } from "@/icons/Confluence";
|
||||
import { CouchbaseIcon } from "@/icons/Couchbase";
|
||||
import { CrewAiIcon } from "@/icons/CrewAI";
|
||||
import { DeepSeekIcon } from "@/icons/DeepSeek";
|
||||
import { DropboxIcon } from "@/icons/Dropbox";
|
||||
import { DuckDuckGoIcon } from "@/icons/DuckDuckGo";
|
||||
import { ElasticsearchIcon } from "@/icons/ElasticsearchStore";
|
||||
import { EvernoteIcon } from "@/icons/Evernote";
|
||||
import { ExaIcon } from "@/icons/Exa";
|
||||
import { FBIcon } from "@/icons/FacebookMessenger";
|
||||
import { FirecrawlIcon } from "@/icons/Firecrawl";
|
||||
import { freezeAllIcon } from "@/icons/freezeAll";
|
||||
import { GitBookIcon } from "@/icons/GitBook";
|
||||
import { GitLoaderIcon } from "@/icons/GitLoader";
|
||||
import { GleanIcon } from "@/icons/Glean";
|
||||
import { GlobeOkIcon } from "@/icons/globe-ok";
|
||||
import { GmailIcon } from "@/icons/gmail";
|
||||
import { GoogleIcon } from "@/icons/Google";
|
||||
import { GooglecalendarIcon } from "@/icons/googlecalendar";
|
||||
import { GoogleDriveIcon } from "@/icons/GoogleDrive";
|
||||
import { GoogleGenerativeAIIcon } from "@/icons/GoogleGenerativeAI";
|
||||
import {
|
||||
GradientInfinity,
|
||||
GradientSave,
|
||||
GradientUngroup,
|
||||
} from "@/icons/GradientSparkles";
|
||||
import { GridHorizontalIcon } from "@/icons/GridHorizontal";
|
||||
import { GroqIcon } from "@/icons/Groq";
|
||||
import { HackerNewsIcon } from "@/icons/hackerNews";
|
||||
import { HCDIcon } from "@/icons/HCD";
|
||||
import { HomeAssistantIcon } from "@/icons/HomeAssistant";
|
||||
import { HuggingFaceIcon } from "@/icons/HuggingFace";
|
||||
import { WatsonxAiIcon } from "@/icons/IBMWatsonx";
|
||||
import { IcosaIcon } from "@/icons/Icosa";
|
||||
import { IFixIcon } from "@/icons/IFixIt";
|
||||
import { JSIcon } from "@/icons/JSicon";
|
||||
import { LangChainIcon } from "@/icons/LangChain";
|
||||
import { LangwatchIcon } from "@/icons/Langwatch";
|
||||
import { LMStudioIcon } from "@/icons/LMStudio";
|
||||
import { MaritalkIcon } from "@/icons/Maritalk";
|
||||
import { Mem0 } from "@/icons/Mem0";
|
||||
import { MetaIcon } from "@/icons/Meta";
|
||||
import { MidjourneyIcon } from "@/icons/Midjorney";
|
||||
import { MilvusIcon } from "@/icons/Milvus";
|
||||
import { MistralIcon } from "@/icons/mistral";
|
||||
import { MongoDBIcon } from "@/icons/MongoDB";
|
||||
import { NeedleIcon } from "@/icons/Needle";
|
||||
import { NotDiamondIcon } from "@/icons/NotDiamond";
|
||||
import { NotionIcon } from "@/icons/Notion";
|
||||
import { NovitaIcon } from "@/icons/Novita";
|
||||
import { NvidiaIcon } from "@/icons/Nvidia";
|
||||
import { OlivyaIcon } from "@/icons/Olivya";
|
||||
import { OllamaIcon } from "@/icons/Ollama";
|
||||
import { OneDriveIcon } from "@/icons/OneDrive";
|
||||
import { OpenAiIcon } from "@/icons/OpenAi";
|
||||
import { OpenRouterIcon } from "@/icons/OpenRouter";
|
||||
import { OpenSearch } from "@/icons/OpenSearch";
|
||||
import { PerplexityIcon } from "@/icons/Perplexity";
|
||||
import { PineconeIcon } from "@/icons/Pinecone";
|
||||
import { PostgresIcon } from "@/icons/Postgres";
|
||||
import { PythonIcon } from "@/icons/Python";
|
||||
import { QDrantIcon } from "@/icons/QDrant";
|
||||
import { QianFanChatIcon } from "@/icons/QianFanChat";
|
||||
import { RedisIcon } from "@/icons/Redis";
|
||||
import { SambaNovaIcon } from "@/icons/SambaNova";
|
||||
import { ScrapeGraph } from "@/icons/ScrapeGraphAI";
|
||||
import { SearchAPIIcon } from "@/icons/SearchAPI";
|
||||
import { SearchHybridIcon } from "@/icons/SearchHybrid";
|
||||
import { SearchLexicalIcon } from "@/icons/SearchLexical";
|
||||
import { SearchVectorIcon } from "@/icons/SearchVector";
|
||||
import { SearxIcon } from "@/icons/Searx";
|
||||
import { SerperIcon } from "@/icons/Serper";
|
||||
import { SerpSearchIcon } from "@/icons/SerpSearch";
|
||||
import { ShareIcon } from "@/icons/Share";
|
||||
import { Share2Icon } from "@/icons/Share2";
|
||||
import { SlackIcon } from "@/icons/Slack";
|
||||
import { SpiderIcon } from "@/icons/Spider";
|
||||
import { Streamlit } from "@/icons/Streamlit";
|
||||
import { SupabaseIcon } from "@/icons/supabase";
|
||||
import { TavilyIcon } from "@/icons/Tavily";
|
||||
import { ThumbDownIconCustom, ThumbUpIconCustom } from "@/icons/thumbs";
|
||||
import { UnstructuredIcon } from "@/icons/Unstructured";
|
||||
import { UpstashSvgIcon } from "@/icons/Upstash";
|
||||
import { VectaraIcon } from "@/icons/VectaraIcon";
|
||||
import { VertexAIIcon } from "@/icons/VertexAI";
|
||||
import { WeaviateIcon } from "@/icons/Weaviate";
|
||||
import { WikipediaIcon } from "@/icons/Wikipedia";
|
||||
import { WolframIcon } from "@/icons/Wolfram";
|
||||
import { XAIIcon } from "@/icons/xAI";
|
||||
import { YouTubeSvgIcon as YouTubeIcon } from "@/icons/Youtube";
|
||||
import { ZepMemoryIcon } from "@/icons/ZepMemory";
|
||||
|
||||
// Export the eagerly loaded icons map
|
||||
export const eagerIconsMapping = {
|
||||
"AI/ML": AIMLIcon,
|
||||
AgentQL: AgentQLIcon,
|
||||
Airbyte: AirbyteIcon,
|
||||
Anthropic: AnthropicIcon,
|
||||
Apify: ApifyIcon,
|
||||
ApifyWhite: ApifyWhiteIcon,
|
||||
ArXiv: ArXivIcon,
|
||||
Arize: ArizeIcon,
|
||||
AssemblyAI: AssemblyAIIcon,
|
||||
AstraDB: AstraDBIcon,
|
||||
Athena: AthenaIcon,
|
||||
AWS: AWSIcon,
|
||||
AWSInverted: AWSInvertedIcon,
|
||||
Azure: AzureIcon,
|
||||
Bing: BingIcon,
|
||||
BotMessageSquare: BotMessageSquareIcon,
|
||||
BWPython: BWPythonIcon,
|
||||
Cassandra: CassandraIcon,
|
||||
Chroma: ChromaIcon,
|
||||
Clickhouse: ClickhouseIcon,
|
||||
Cloudflare: CloudflareIcon,
|
||||
Cohere: CohereIcon,
|
||||
Composio: ComposioIcon,
|
||||
Confluence: ConfluenceIcon,
|
||||
Couchbase: CouchbaseIcon,
|
||||
CrewAI: CrewAiIcon,
|
||||
DeepSeek: DeepSeekIcon,
|
||||
Dropbox: DropboxIcon,
|
||||
DuckDuckGo: DuckDuckGoIcon,
|
||||
ElasticsearchStore: ElasticsearchIcon,
|
||||
Evernote: EvernoteIcon,
|
||||
Exa: ExaIcon,
|
||||
FacebookMessenger: FBIcon,
|
||||
Firecrawl: FirecrawlIcon,
|
||||
FreezeAll: freezeAllIcon,
|
||||
GitBook: GitBookIcon,
|
||||
GitLoader: GitLoaderIcon,
|
||||
Glean: GleanIcon,
|
||||
GlobeOk: GlobeOkIcon,
|
||||
Google: GoogleIcon,
|
||||
GoogleDrive: GoogleDriveIcon,
|
||||
GoogleGenerativeAI: GoogleGenerativeAIIcon,
|
||||
Gmail: GmailIcon,
|
||||
Googlecalendar: GooglecalendarIcon,
|
||||
GradientInfinity: GradientInfinity,
|
||||
GradientSave: GradientSave,
|
||||
GradientUngroup: GradientUngroup,
|
||||
GridHorizontal: GridHorizontalIcon,
|
||||
Groq: GroqIcon,
|
||||
HackerNews: HackerNewsIcon,
|
||||
HCD: HCDIcon,
|
||||
HomeAssistant: HomeAssistantIcon,
|
||||
HuggingFace: HuggingFaceIcon,
|
||||
Icosa: IcosaIcon,
|
||||
IFixIt: IFixIcon,
|
||||
javascript: JSIcon,
|
||||
LangChain: LangChainIcon,
|
||||
Langwatch: LangwatchIcon,
|
||||
LMStudio: LMStudioIcon,
|
||||
Maritalk: MaritalkIcon,
|
||||
Mem0: Mem0,
|
||||
Meta: MetaIcon,
|
||||
Midjourney: MidjourneyIcon,
|
||||
Milvus: MilvusIcon,
|
||||
Mistral: MistralIcon,
|
||||
MongoDB: MongoDBIcon,
|
||||
Needle: NeedleIcon,
|
||||
NotDiamond: NotDiamondIcon,
|
||||
Notion: NotionIcon,
|
||||
Novita: NovitaIcon,
|
||||
NVIDIA: NvidiaIcon,
|
||||
Olivya: OlivyaIcon,
|
||||
Ollama: OllamaIcon,
|
||||
OneDrive: OneDriveIcon,
|
||||
OpenAI: OpenAiIcon,
|
||||
OpenRouter: OpenRouterIcon,
|
||||
OpenSearch: OpenSearch,
|
||||
Perplexity: PerplexityIcon,
|
||||
Pinecone: PineconeIcon,
|
||||
Postgres: PostgresIcon,
|
||||
Python: PythonIcon,
|
||||
QDrant: QDrantIcon,
|
||||
QianFanChat: QianFanChatIcon,
|
||||
Redis: RedisIcon,
|
||||
SambaNova: SambaNovaIcon,
|
||||
ScrapeGraph: ScrapeGraph,
|
||||
SearchAPI: SearchAPIIcon,
|
||||
SearchLexical: SearchLexicalIcon,
|
||||
SearchHybrid: SearchHybridIcon,
|
||||
SearchVector: SearchVectorIcon,
|
||||
Searx: SearxIcon,
|
||||
SerpSearch: SerpSearchIcon,
|
||||
Serper: SerperIcon,
|
||||
Share: ShareIcon,
|
||||
Share2: Share2Icon,
|
||||
Slack: SlackIcon,
|
||||
Spider: SpiderIcon,
|
||||
Streamlit: Streamlit,
|
||||
Supabase: SupabaseIcon,
|
||||
Tavily: TavilyIcon,
|
||||
ThumbDownCustom: ThumbDownIconCustom,
|
||||
ThumbUpCustom: ThumbUpIconCustom,
|
||||
Unstructured: UnstructuredIcon,
|
||||
Upstash: UpstashSvgIcon,
|
||||
Vectara: VectaraIcon,
|
||||
VertexAI: VertexAIIcon,
|
||||
WatsonxAI: WatsonxAiIcon,
|
||||
Weaviate: WeaviateIcon,
|
||||
Wikipedia: WikipediaIcon,
|
||||
Wolfram: WolframIcon,
|
||||
xAI: XAIIcon,
|
||||
YouTube: YouTubeIcon,
|
||||
ZepMemory: ZepMemoryIcon,
|
||||
};
|
||||
|
|
@ -25,9 +25,17 @@ export const lazyIconsMapping = {
|
|||
Athena: () =>
|
||||
import("@/icons/athena").then((mod) => ({ default: mod.AthenaIcon })),
|
||||
AWS: () => import("@/icons/AWS").then((mod) => ({ default: mod.AWSIcon })),
|
||||
AWSInverted: () =>
|
||||
import("@/icons/AWSInverted").then((mod) => ({
|
||||
default: mod.AWSInvertedIcon,
|
||||
})),
|
||||
Azure: () =>
|
||||
import("@/icons/Azure").then((mod) => ({ default: mod.AzureIcon })),
|
||||
Bing: () => import("@/icons/Bing").then((mod) => ({ default: mod.BingIcon })),
|
||||
BotMessageSquareIcon: () =>
|
||||
import("@/icons/BotMessageSquare").then((mod) => ({
|
||||
default: mod.BotMessageSquareIcon,
|
||||
})),
|
||||
BWPython: () =>
|
||||
import("@/icons/BW python").then((mod) => ({ default: mod.BWPythonIcon })),
|
||||
Cassandra: () =>
|
||||
|
|
@ -109,6 +117,10 @@ export const lazyIconsMapping = {
|
|||
import("@/icons/GradientSparkles").then((mod) => ({
|
||||
default: mod.GradientUngroup,
|
||||
})),
|
||||
GradientSave: () =>
|
||||
import("@/icons/GradientSparkles").then((mod) => ({
|
||||
default: mod.GradientSave,
|
||||
})),
|
||||
GridHorizontal: () =>
|
||||
import("@/icons/GridHorizontal").then((mod) => ({
|
||||
default: mod.GridHorizontalIcon,
|
||||
|
|
|
|||
|
|
@ -1,469 +0,0 @@
|
|||
import {
|
||||
AlertCircle,
|
||||
AlertTriangle,
|
||||
ArrowBigUp,
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
ArrowRightLeft,
|
||||
ArrowUpRight,
|
||||
ArrowUpToLine,
|
||||
AudioLines,
|
||||
Bell,
|
||||
Binary,
|
||||
Blocks,
|
||||
BookMarked,
|
||||
BookOpenText,
|
||||
BookmarkPlus,
|
||||
Bot,
|
||||
BotMessageSquare,
|
||||
Boxes,
|
||||
Braces,
|
||||
BrainCircuit,
|
||||
ChartNetwork,
|
||||
Check,
|
||||
CheckCheck,
|
||||
CheckCircle2,
|
||||
ChevronDown,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ChevronRightSquare,
|
||||
ChevronUp,
|
||||
ChevronsDownUp,
|
||||
ChevronsLeft,
|
||||
ChevronsRight,
|
||||
ChevronsUpDown,
|
||||
ChevronsUpDownIcon,
|
||||
Circle,
|
||||
CircleCheckBig,
|
||||
CircleDot,
|
||||
CircleOff,
|
||||
Clipboard,
|
||||
CloudDownload,
|
||||
Code,
|
||||
Code2,
|
||||
CodeXml,
|
||||
Cog,
|
||||
Columns2,
|
||||
Combine,
|
||||
Command,
|
||||
Compass,
|
||||
Copy,
|
||||
CopyPlus,
|
||||
CornerDownLeft,
|
||||
Cpu,
|
||||
Database,
|
||||
DatabaseZap,
|
||||
Delete,
|
||||
DollarSign,
|
||||
Dot,
|
||||
Download,
|
||||
DownloadCloud,
|
||||
Edit,
|
||||
Ellipsis,
|
||||
EllipsisVertical,
|
||||
Eraser,
|
||||
ExternalLink,
|
||||
Eye,
|
||||
EyeOff,
|
||||
File,
|
||||
FileChartColumn,
|
||||
FileClock,
|
||||
FileCode2,
|
||||
FileDown,
|
||||
FileJson,
|
||||
FilePen,
|
||||
FileQuestion,
|
||||
FileSearch,
|
||||
FileSearch2,
|
||||
FileSliders,
|
||||
FileText,
|
||||
FileType,
|
||||
FileType2,
|
||||
FileUp,
|
||||
Filter,
|
||||
FlaskConical,
|
||||
FolderIcon,
|
||||
FolderPlus,
|
||||
FolderPlusIcon,
|
||||
FolderSync,
|
||||
FolderUp,
|
||||
FormInput,
|
||||
Forward,
|
||||
Gift,
|
||||
GitBranchPlus,
|
||||
GitFork,
|
||||
GithubIcon,
|
||||
Globe,
|
||||
GripVertical,
|
||||
Group,
|
||||
Hammer,
|
||||
Heart,
|
||||
HelpCircle,
|
||||
Home,
|
||||
Image,
|
||||
Infinity,
|
||||
Info,
|
||||
InstagramIcon,
|
||||
Key,
|
||||
Keyboard,
|
||||
Laptop2,
|
||||
Layers,
|
||||
LayoutGrid,
|
||||
LayoutPanelTop,
|
||||
Link,
|
||||
Link2,
|
||||
List,
|
||||
ListChecks,
|
||||
ListFilter,
|
||||
ListOrdered,
|
||||
ListX,
|
||||
Loader2,
|
||||
Lock,
|
||||
LockOpen,
|
||||
LogIn,
|
||||
LogOut,
|
||||
LucideSend,
|
||||
Maximize2,
|
||||
Menu,
|
||||
MessageCircle,
|
||||
MessageSquare,
|
||||
MessageSquareMore,
|
||||
MessagesSquare,
|
||||
Mic,
|
||||
Mic2,
|
||||
MicOff,
|
||||
Minimize2,
|
||||
Minus,
|
||||
Monitor,
|
||||
Moon,
|
||||
MoonIcon,
|
||||
MoreHorizontal,
|
||||
Network,
|
||||
Newspaper,
|
||||
NotebookPen,
|
||||
OctagonAlert,
|
||||
OptionIcon,
|
||||
Package2,
|
||||
Palette,
|
||||
PanelLeftClose,
|
||||
PanelLeftOpen,
|
||||
PanelRightClose,
|
||||
PanelRightOpen,
|
||||
Paperclip,
|
||||
PaperclipIcon,
|
||||
Pen,
|
||||
Pencil,
|
||||
PencilLine,
|
||||
PencilRuler,
|
||||
PieChart,
|
||||
Pin,
|
||||
Plane,
|
||||
Play,
|
||||
Plus,
|
||||
PlusCircle,
|
||||
PlusSquare,
|
||||
PocketKnife,
|
||||
Radio,
|
||||
Redo,
|
||||
RefreshCcw,
|
||||
RefreshCcwDot,
|
||||
Repeat,
|
||||
Replace,
|
||||
RotateCcw,
|
||||
Save,
|
||||
SaveAll,
|
||||
Scan,
|
||||
ScanEye,
|
||||
Scissors,
|
||||
ScreenShare,
|
||||
Scroll,
|
||||
ScrollText,
|
||||
Search,
|
||||
Settings,
|
||||
Settings2,
|
||||
Share,
|
||||
Share2,
|
||||
Shield,
|
||||
Sigma,
|
||||
Sliders,
|
||||
SlidersHorizontal,
|
||||
Snowflake,
|
||||
Sparkles,
|
||||
Square,
|
||||
SquareArrowOutUpRight,
|
||||
SquareCode,
|
||||
SquarePen,
|
||||
SquarePlay,
|
||||
StickyNote,
|
||||
Store,
|
||||
Sun,
|
||||
SunIcon,
|
||||
Table,
|
||||
Tags,
|
||||
TerminalIcon,
|
||||
TerminalSquare,
|
||||
TextCursorInput,
|
||||
TextSearch,
|
||||
TextSearchIcon,
|
||||
ThumbsDown,
|
||||
ThumbsUp,
|
||||
ToyBrick,
|
||||
Trash2,
|
||||
Type,
|
||||
Undo,
|
||||
Ungroup,
|
||||
UnlinkIcon,
|
||||
Unplug,
|
||||
Upload,
|
||||
User,
|
||||
UserCog2,
|
||||
UserMinus2,
|
||||
UserPlus2,
|
||||
Users,
|
||||
Users2,
|
||||
Variable,
|
||||
Wand2,
|
||||
Workflow,
|
||||
Wrench,
|
||||
X,
|
||||
XCircle,
|
||||
Zap,
|
||||
ZoomIn,
|
||||
ZoomOut,
|
||||
} from "lucide-react";
|
||||
import { TwitterXIcon } from "./Twitter X";
|
||||
|
||||
// Create a map of eagerly loaded Lucide icons
|
||||
export const lucideIcons = {
|
||||
AlertCircle,
|
||||
AlertTriangle,
|
||||
ArrowBigUp,
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
ArrowRightLeft,
|
||||
ArrowUpRight,
|
||||
ArrowUpToLine,
|
||||
AudioLines,
|
||||
Bell,
|
||||
Binary,
|
||||
Blocks,
|
||||
BookMarked,
|
||||
BookOpenText,
|
||||
BookmarkPlus,
|
||||
Bot,
|
||||
BotMessageSquare,
|
||||
Boxes,
|
||||
Braces,
|
||||
BrainCircuit,
|
||||
ChartNetwork,
|
||||
Check,
|
||||
CheckCheck,
|
||||
CheckCircle2,
|
||||
ChevronDown,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ChevronRightSquare,
|
||||
ChevronUp,
|
||||
ChevronsDownUp,
|
||||
ChevronsLeft,
|
||||
ChevronsRight,
|
||||
ChevronsUpDown,
|
||||
ChevronsUpDownIcon,
|
||||
Circle,
|
||||
CircleCheckBig,
|
||||
CircleDot,
|
||||
CircleOff,
|
||||
Clipboard,
|
||||
CloudDownload,
|
||||
Code,
|
||||
Code2,
|
||||
CodeXml,
|
||||
Cog,
|
||||
Columns2,
|
||||
Combine,
|
||||
Command,
|
||||
Compass,
|
||||
Copy,
|
||||
CopyPlus,
|
||||
CornerDownLeft,
|
||||
Cpu,
|
||||
Database,
|
||||
DatabaseZap,
|
||||
Delete,
|
||||
DollarSign,
|
||||
Dot,
|
||||
Download,
|
||||
DownloadCloud,
|
||||
Edit,
|
||||
Ellipsis,
|
||||
EllipsisVertical,
|
||||
Eraser,
|
||||
ExternalLink,
|
||||
Eye,
|
||||
EyeOff,
|
||||
File,
|
||||
FileChartColumn,
|
||||
FileClock,
|
||||
FileCode2,
|
||||
FileDown,
|
||||
FileJson,
|
||||
FilePen,
|
||||
FileQuestion,
|
||||
FileSearch,
|
||||
FileSearch2,
|
||||
FileSliders,
|
||||
FileText,
|
||||
FileType,
|
||||
FileType2,
|
||||
FileUp,
|
||||
Filter,
|
||||
FlaskConical,
|
||||
FolderIcon,
|
||||
FolderPlus,
|
||||
FolderPlusIcon,
|
||||
FolderSync,
|
||||
FolderUp,
|
||||
FormInput,
|
||||
Forward,
|
||||
Gift,
|
||||
GitBranchPlus,
|
||||
GitFork,
|
||||
GithubIcon,
|
||||
Globe,
|
||||
GripVertical,
|
||||
Group,
|
||||
Hammer,
|
||||
Heart,
|
||||
HelpCircle,
|
||||
Home,
|
||||
Image,
|
||||
Infinity,
|
||||
Info,
|
||||
Key,
|
||||
Keyboard,
|
||||
Laptop2,
|
||||
Layers,
|
||||
LayoutGrid,
|
||||
LayoutPanelTop,
|
||||
Link,
|
||||
Link2,
|
||||
List,
|
||||
ListChecks,
|
||||
ListFilter,
|
||||
ListOrdered,
|
||||
ListX,
|
||||
Loader2,
|
||||
Lock,
|
||||
LockOpen,
|
||||
LogIn,
|
||||
LogOut,
|
||||
LucideSend,
|
||||
Maximize2,
|
||||
Menu,
|
||||
MessageCircle,
|
||||
MessageSquare,
|
||||
MessageSquareMore,
|
||||
MessagesSquare,
|
||||
Mic,
|
||||
Mic2,
|
||||
MicOff,
|
||||
Minimize2,
|
||||
Minus,
|
||||
Monitor,
|
||||
Moon,
|
||||
MoonIcon,
|
||||
MoreHorizontal,
|
||||
Network,
|
||||
Newspaper,
|
||||
NotebookPen,
|
||||
OctagonAlert,
|
||||
OptionIcon,
|
||||
Package2,
|
||||
Palette,
|
||||
PanelLeftClose,
|
||||
PanelLeftOpen,
|
||||
PanelRightClose,
|
||||
PanelRightOpen,
|
||||
Paperclip,
|
||||
PaperclipIcon,
|
||||
Pen,
|
||||
Pencil,
|
||||
PencilLine,
|
||||
PencilRuler,
|
||||
PieChart,
|
||||
Pin,
|
||||
Plane,
|
||||
Play,
|
||||
Plus,
|
||||
PlusCircle,
|
||||
PlusSquare,
|
||||
PocketKnife,
|
||||
Radio,
|
||||
Redo,
|
||||
RefreshCcw,
|
||||
RefreshCcwDot,
|
||||
Repeat,
|
||||
Replace,
|
||||
RotateCcw,
|
||||
Save,
|
||||
SaveAll,
|
||||
Scan,
|
||||
ScanEye,
|
||||
Scissors,
|
||||
ScreenShare,
|
||||
Scroll,
|
||||
ScrollText,
|
||||
Search,
|
||||
Settings,
|
||||
Settings2,
|
||||
Share,
|
||||
Share2,
|
||||
Shield,
|
||||
Sigma,
|
||||
Sliders,
|
||||
SlidersHorizontal,
|
||||
Snowflake,
|
||||
Sparkles,
|
||||
Square,
|
||||
SquareArrowOutUpRight,
|
||||
SquareCode,
|
||||
SquarePen,
|
||||
SquarePlay,
|
||||
StickyNote,
|
||||
Store,
|
||||
Sun,
|
||||
SunIcon,
|
||||
Table,
|
||||
Tags,
|
||||
TerminalIcon,
|
||||
TerminalSquare,
|
||||
TextCursorInput,
|
||||
TextSearch,
|
||||
TextSearchIcon,
|
||||
ThumbsDown,
|
||||
ThumbsUp,
|
||||
ToyBrick,
|
||||
Trash2,
|
||||
Type,
|
||||
Undo,
|
||||
Ungroup,
|
||||
UnlinkIcon,
|
||||
Unplug,
|
||||
Upload,
|
||||
User,
|
||||
UserCog2,
|
||||
UserMinus2,
|
||||
UserPlus2,
|
||||
Users,
|
||||
Users2,
|
||||
Variable,
|
||||
Wand2,
|
||||
Workflow,
|
||||
Wrench,
|
||||
X,
|
||||
XCircle,
|
||||
Zap,
|
||||
ZoomIn,
|
||||
ZoomOut,
|
||||
TwitterXIcon,
|
||||
};
|
||||
|
|
@ -477,7 +477,7 @@ const NodeToolbarComponent = memo(
|
|||
});
|
||||
}}
|
||||
shortcut={shortcuts.find((s) =>
|
||||
s.name.toLowerCase().startsWith("freeze path"),
|
||||
s.name.toLowerCase().startsWith("freeze"),
|
||||
)}
|
||||
className={cn("node-toolbar-buttons", frozen && "text-blue-500")}
|
||||
/>
|
||||
|
|
@ -684,8 +684,9 @@ const NodeToolbarComponent = memo(
|
|||
<SelectItem value="freezeAll">
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Freeze")
|
||||
?.shortcut!
|
||||
shortcuts.find((obj) =>
|
||||
obj.name.toLowerCase().startsWith("freeze"),
|
||||
)?.shortcut!
|
||||
}
|
||||
value={"Freeze"}
|
||||
icon={"FreezeAll"}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { iconExists } from "@/utils/styleUtils";
|
|||
export const useGetTemplateStyle = (
|
||||
flowData: FlowType,
|
||||
): { getIcon: () => Promise<string> } => {
|
||||
const types = useTypesStore((state) => state.types);
|
||||
const getIcon = async () => {
|
||||
if (
|
||||
flowData.is_component &&
|
||||
|
|
@ -13,7 +14,6 @@ export const useGetTemplateStyle = (
|
|||
const dataType = flowData.data?.nodes[0].data.type;
|
||||
const isGroup = !!flowData.data?.nodes[0].data.node?.flow;
|
||||
const icon = flowData.data?.nodes[0].data.node?.icon;
|
||||
const types = useTypesStore((state) => state.types);
|
||||
const name = (await iconExists(dataType)) ? dataType : types[dataType];
|
||||
const iconName = icon || (isGroup ? "group_components" : name);
|
||||
return iconName;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
import { ENABLE_DATASTAX_LANGFLOW } from "@/customization/feature-flags";
|
||||
import { BotMessageSquareIcon } from "@/icons/BotMessageSquare";
|
||||
import { GradientSave } from "@/icons/GradientSparkles";
|
||||
import { TwitterLogoIcon } from "@radix-ui/react-icons";
|
||||
import dynamicIconImports from "lucide-react/dynamicIconImports";
|
||||
import { lazy } from "react";
|
||||
import { FaApple, FaDiscord, FaGithub } from "react-icons/fa";
|
||||
import { lucideIcons } from "../icons/lucideIcons";
|
||||
|
||||
export const BG_NOISE =
|
||||
"url(data:image/png;base64,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)";
|
||||
|
|
@ -406,27 +404,12 @@ export const nodeIconToDisplayIconMap: Record<string, string> = {
|
|||
wrappers: "Gift",
|
||||
unknown: "HelpCircle",
|
||||
custom: "Edit",
|
||||
BotMessageSquareIcon: "BotMessageSquare",
|
||||
TextSearchIcon: "TextSearch",
|
||||
ChevronsUpDown: "ChevronsUpDown",
|
||||
SunIcon: "Sun",
|
||||
MoonIcon: "Moon",
|
||||
FolderIcon: "FolderIcon",
|
||||
GradientSave: "GradientSave",
|
||||
FolderPlusIcon: "FolderPlus",
|
||||
PaperclipIcon: "Paperclip",
|
||||
TerminalIcon: "TerminalIcon",
|
||||
OptionIcon: "Option",
|
||||
Option: "OptionIcon",
|
||||
GlobeOkIcon: "GlobeOk",
|
||||
ThumbDownIconCustom: "ThumbDownCustom",
|
||||
ThumbUpIconCustom: "ThumbUpCustom",
|
||||
ScrapeGraphAI: "ScrapeGraph",
|
||||
ScrapeGraphSmartScraperApi: "ScrapeGraph",
|
||||
ScrapeGraphMarkdownifyApi: "ScrapeGraph",
|
||||
Unlink: "UnlinkIcon",
|
||||
note: "StickyNote",
|
||||
TwitterXIcon: "TwitterXIcon",
|
||||
};
|
||||
|
||||
export const getLucideIconName = (name: string): string => {
|
||||
|
|
@ -437,40 +420,30 @@ export const getLucideIconName = (name: string): string => {
|
|||
Wand2: "wand-sparkles",
|
||||
};
|
||||
const kebabCaseName = name
|
||||
.replace(/Icon/g, "")
|
||||
.replace(/([a-z])([A-Z])/g, "$1-$2")
|
||||
.replace(/(\d)/g, "-$1")
|
||||
.replace(/\s+/g, "-")
|
||||
.toLowerCase();
|
||||
return map[name] || kebabCaseName;
|
||||
};
|
||||
|
||||
// Initialize icon mappings based on if we want to support lazy loading for cloud
|
||||
const iconMappingsPromise = ENABLE_DATASTAX_LANGFLOW
|
||||
? import("../icons/lazyIconImports").then((module) => module.lazyIconsMapping)
|
||||
: import("../icons/eagerIconImports").then(
|
||||
(module) => module.eagerIconsMapping,
|
||||
);
|
||||
const iconMappingsPromise = import("../icons/lazyIconImports").then(
|
||||
(module) => module.lazyIconsMapping,
|
||||
);
|
||||
|
||||
export const eagerLoadedIconsMap = {
|
||||
// Custom icons
|
||||
GradientSave: GradientSave,
|
||||
BotMessageSquareIcon: BotMessageSquareIcon,
|
||||
"sticky-note": lucideIcons.StickyNote,
|
||||
|
||||
// React icons
|
||||
FaApple: FaApple,
|
||||
FaDiscord: FaDiscord,
|
||||
FaGithub: FaGithub,
|
||||
TwitterLogoIcon: TwitterLogoIcon,
|
||||
|
||||
// All Lucide Icons
|
||||
...lucideIcons,
|
||||
};
|
||||
|
||||
// Function to get a lazy-loaded icon component
|
||||
export const getNodeIcon = async (name: string) => {
|
||||
const iconName = nodeIconToDisplayIconMap[name];
|
||||
|
||||
// Always check eagerly loaded icons first
|
||||
if (eagerLoadedIconsMap[iconName || name]) {
|
||||
return eagerLoadedIconsMap[iconName || name];
|
||||
}
|
||||
|
|
@ -478,9 +451,7 @@ export const getNodeIcon = async (name: string) => {
|
|||
const iconMappings = await iconMappingsPromise;
|
||||
|
||||
if (iconMappings[iconName || name]) {
|
||||
return ENABLE_DATASTAX_LANGFLOW
|
||||
? lazy(iconMappings[iconName || name])
|
||||
: iconMappings[iconName || name];
|
||||
return lazy(iconMappings[iconName || name]);
|
||||
}
|
||||
|
||||
const lucideIconName = getLucideIconName(iconName || name);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue