Add New Icons to New Components (#1509)

add new icons to new components

src/backend/langflow/components/experimental/ClearMessageHistory.py

@@ -5,6 +5,7 @@
 class ClearMessageHistoryComponent(CustomComponent):
  display_name = "Clear Message History"
  description = "A component to clear the message history."
+ icon="ClearMessageHistory"
  beta: bool = True
 
  def build_config(self):

src/backend/langflow/components/experimental/ListFlows.py

@@ -7,6 +7,7 @@
 class ListFlowsComponent(CustomComponent):
  display_name = "List Flows"
  description = "A component to list all available flows."
+ icon = "ListFlows"
  beta: bool = True
 
  def build_config(self):

src/backend/langflow/components/experimental/Notify.py

@@ -7,6 +7,7 @@
 class NotifyComponent(CustomComponent):
  display_name = "Notify"
  description = "A component to generate a notification to Get Notified component."
+ icon = "Notify"
  beta: bool = True
 
  def build_config(self):

src/backend/langflow/components/helpers/PythonFunction.py

@@ -8,7 +8,7 @@
 class PythonFunctionComponent(CustomComponent):
  display_name = "Python Function"
  description = "Define a Python function."
-
+ icon = "Python"
  def build_config(self):
  return {
  "function_code": {

src/backend/langflow/components/inputs/ChatInput.py

@@ -8,6 +8,7 @@
 class ChatInput(ChatComponent):
  display_name = "Chat Input"
  description = "Used to get user input from the chat."
+ icon = "ChatInput"
 
  def build(
  self,

src/backend/langflow/components/outputs/ChatOutput.py

@@ -8,7 +8,7 @@
 class ChatOutput(ChatComponent):
  display_name = "Chat Output"
  description = "Used to send a message to the chat."
-
+ icon = "ChatOutput"
  def build(
  self,
  sender: Optional[str] = "Machine",

src/frontend/src/icons/BotMessageSquare/BotMessageSquare.jsx

@@ -0,0 +1,23 @@
+const SvgBotMessageSquare = (props) => (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ class="lucide lucide-bot-message-square"
+ {...props}
+ >
+ <path d="M12 6V2H8" />
+ <path d="m8 18-4 4V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2Z" />
+ <path d="M2 12h2" />
+ <path d="M9 11v2" />
+ <path d="M15 11v2" />
+ <path d="M20 12h2" />
+ </svg>
+);
+export default SvgBotMessageSquare;

src/frontend/src/icons/BotMessageSquare/index.tsx

@@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import SvgChroma from "./BotMessageSquare";
+
+export const BotMessageSquareIcon = forwardRef<
+ SVGSVGElement,
+ React.PropsWithChildren<{}>
+>((props, ref) => {
+ return <SvgChroma ref={ref} {...props} />;
+});

src/frontend/src/icons/Python/Python.jsx

@@ -0,0 +1,158 @@
+export const SvgPython = (props) => (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={1000}
+ height={1000}
+ viewBox="0 0 750 750"
+ {...props}
+ >
+ <defs>
+ <clipPath id="a">
+ <path d="M45 42h493v494H45Zm0 0" />
+ </clipPath>
+ <clipPath id="b">
+ <path d="M375.207 42.145c-168.414 0-157.902 73.035-157.902 73.035l.207 75.664h160.703v22.699H153.64S45.906 201.313 45.906 371.262c0 169.906 94.055 163.894 94.055 163.894h56.137v-78.86s-3.028-94.054 92.562-94.054h159.375s89.555 1.453 89.555-86.547V130.188s13.601-88.043-162.383-88.043Zm-88.621 50.87c15.984 0 28.918 12.938 28.918 28.922 0 15.981-12.934 28.918-28.918 28.918-.95 0-1.895-.042-2.836-.136a28.448 28.448 0 0 1-5.563-1.098c-.906-.277-1.8-.594-2.675-.957-.875-.36-1.73-.766-2.567-1.21a29.522 29.522 0 0 1-2.437-1.458 29.114 29.114 0 0 1-6.29-5.703 28.46 28.46 0 0 1-1.69-2.281 27.818 27.818 0 0 1-1.458-2.434 29.596 29.596 0 0 1-1.215-2.566 28.942 28.942 0 0 1-2.055-8.238c-.09-.946-.136-1.891-.132-2.837 0-15.984 12.934-28.921 28.918-28.921Zm0 0" />
+ </clipPath>
+ <clipPath id="d">
+ <path d="M217 209h493v494H217Zm0 0" />
+ </clipPath>
+ <clipPath id="e">
+ <path d="M379.977 702.059c168.414 0 157.902-73.036 157.902-73.036l-.207-75.664h-160.7V530.66h224.551s107.758 12.23 107.758-157.7c0-169.925-94.054-163.894-94.054-163.894H559.09v78.84s3.023 94.051-92.563 94.051H307.152s-89.558-1.45-89.558 86.55v145.509s-13.598 88.043 162.383 88.043Zm88.62-50.875a28.573 28.573 0 0 1-5.644-.547 29.24 29.24 0 0 1-2.754-.688 28.56 28.56 0 0 1-5.242-2.168 29.024 29.024 0 0 1-4.715-3.148 29.42 29.42 0 0 1-2.105-1.906 29.448 29.448 0 0 1-1.907-2.102 29.882 29.882 0 0 1-1.687-2.281 28.516 28.516 0 0 1-2.672-5.004 27.907 27.907 0 0 1-.953-2.676 27.808 27.808 0 0 1-.688-2.754 28.29 28.29 0 0 1-.414-2.808 28.598 28.598 0 0 1-.136-2.836c0-15.961 12.937-28.899 28.918-28.899 15.984 0 28.922 12.914 28.922 28.899 0 16.004-12.938 28.918-28.922 28.918Zm0 0" />
+ </clipPath>
+ <linearGradient
+ id="c"
+ x1={16.152}
+ x2={40.334}
+ y1={15.849}
+ y2={40.112}
+ gradientTransform="matrix(20.73047 0 0 20.73046 -285.782 -289.543)"
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop offset={0} stopColor="#387EB8" />
+ <stop offset={0.125} stopColor="#387EB8" />
+ <stop offset={0.141} stopColor="#387EB7" />
+ <stop offset={0.156} stopColor="#387DB7" />
+ <stop offset={0.172} stopColor="#387DB6" />
+ <stop offset={0.188} stopColor="#387CB5" />
+ <stop offset={0.203} stopColor="#387CB4" />
+ <stop offset={0.219} stopColor="#387BB3" />
+ <stop offset={0.234} stopColor="#387BB2" />
+ <stop offset={0.25} stopColor="#387AB1" />
+ <stop offset={0.266} stopColor="#387AB1" />
+ <stop offset={0.281} stopColor="#3879B0" />
+ <stop offset={0.297} stopColor="#3879AF" />
+ <stop offset={0.313} stopColor="#3878AE" />
+ <stop offset={0.328} stopColor="#3778AD" />
+ <stop offset={0.344} stopColor="#3777AC" />
+ <stop offset={0.359} stopColor="#3777AB" />
+ <stop offset={0.375} stopColor="#3776AA" />
+ <stop offset={0.391} stopColor="#3776AA" />
+ <stop offset={0.406} stopColor="#3775A9" />
+ <stop offset={0.422} stopColor="#3775A8" />
+ <stop offset={0.438} stopColor="#3774A7" />
+ <stop offset={0.453} stopColor="#3774A6" />
+ <stop offset={0.469} stopColor="#3773A5" />
+ <stop offset={0.484} stopColor="#3773A4" />
+ <stop offset={0.498} stopColor="#3772A4" />
+ <stop offset={0.5} stopColor="#3772A3" />
+ <stop offset={0.502} stopColor="#3772A3" />
+ <stop offset={0.516} stopColor="#3771A2" />
+ <stop offset={0.531} stopColor="#3771A2" />
+ <stop offset={0.547} stopColor="#3771A1" />
+ <stop offset={0.563} stopColor="#3770A0" />
+ <stop offset={0.578} stopColor="#37709F" />
+ <stop offset={0.594} stopColor="#376F9E" />
+ <stop offset={0.609} stopColor="#376F9E" />
+ <stop offset={0.625} stopColor="#376E9D" />
+ <stop offset={0.641} stopColor="#376E9C" />
+ <stop offset={0.656} stopColor="#366D9B" />
+ <stop offset={0.672} stopColor="#366D9A" />
+ <stop offset={0.688} stopColor="#366C99" />
+ <stop offset={0.703} stopColor="#366C98" />
+ <stop offset={0.719} stopColor="#366B97" />
+ <stop offset={0.734} stopColor="#366B97" />
+ <stop offset={0.75} stopColor="#366A96" />
+ <stop offset={0.766} stopColor="#366A95" />
+ <stop offset={0.781} stopColor="#366994" />
+ <stop offset={0.813} stopColor="#366994" />
+ <stop offset={0.875} stopColor="#366994" />
+ <stop offset={1} stopColor="#366994" />
+ </linearGradient>
+ <linearGradient
+ id="f"
+ x1={23.548}
+ x2={48.282}
+ y1={23.842}
+ y2={47.538}
+ gradientTransform="matrix(20.73047 0 0 20.73046 -285.782 -289.543)"
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop offset={0} stopColor="#FFE052" />
+ <stop offset={0.125} stopColor="#FFE052" />
+ <stop offset={0.188} stopColor="#FFE052" />
+ <stop offset={0.219} stopColor="#FFE052" />
+ <stop offset={0.234} stopColor="#FFDF51" />
+ <stop offset={0.25} stopColor="#FFDF51" />
+ <stop offset={0.266} stopColor="#FFDE50" />
+ <stop offset={0.281} stopColor="#FFDD4F" />
+ <stop offset={0.297} stopColor="#FFDD4E" />
+ <stop offset={0.313} stopColor="#FFDC4E" />
+ <stop offset={0.328} stopColor="#FFDB4D" />
+ <stop offset={0.344} stopColor="#FFDB4C" />
+ <stop offset={0.359} stopColor="#FFDA4B" />
+ <stop offset={0.375} stopColor="#FFD94B" />
+ <stop offset={0.391} stopColor="#FFD94A" />
+ <stop offset={0.406} stopColor="#FFD849" />
+ <stop offset={0.422} stopColor="#FFD748" />
+ <stop offset={0.438} stopColor="#FFD748" />
+ <stop offset={0.453} stopColor="#FFD647" />
+ <stop offset={0.469} stopColor="#FFD546" />
+ <stop offset={0.484} stopColor="#FFD545" />
+ <stop offset={0.486} stopColor="#FFD445" />
+ <stop offset={0.5} stopColor="#FFD444" />
+ <stop offset={0.514} stopColor="#FFD444" />
+ <stop offset={0.516} stopColor="#FFD343" />
+ <stop offset={0.531} stopColor="#FFD343" />
+ <stop offset={0.547} stopColor="#FFD242" />
+ <stop offset={0.563} stopColor="#FFD242" />
+ <stop offset={0.578} stopColor="#FFD141" />
+ <stop offset={0.594} stopColor="#FFD040" />
+ <stop offset={0.609} stopColor="#FFD03F" />
+ <stop offset={0.625} stopColor="#FFCF3F" />
+ <stop offset={0.641} stopColor="#FFCE3E" />
+ <stop offset={0.656} stopColor="#FFCE3D" />
+ <stop offset={0.672} stopColor="#FFCD3C" />
+ <stop offset={0.688} stopColor="#FFCC3C" />
+ <stop offset={0.703} stopColor="#FFCC3B" />
+ <stop offset={0.719} stopColor="#FFCB3A" />
+ <stop offset={0.734} stopColor="#FFCA39" />
+ <stop offset={0.75} stopColor="#FFCA39" />
+ <stop offset={0.766} stopColor="#FFC938" />
+ <stop offset={0.781} stopColor="#FFC837" />
+ <stop offset={0.797} stopColor="#FFC836" />
+ <stop offset={0.813} stopColor="#FFC736" />
+ <stop offset={0.828} stopColor="#FFC635" />
+ <stop offset={0.844} stopColor="#FFC634" />
+ <stop offset={0.859} stopColor="#FFC533" />
+ <stop offset={0.875} stopColor="#FFC433" />
+ <stop offset={0.891} stopColor="#FFC432" />
+ <stop offset={0.906} stopColor="#FFC331" />
+ <stop offset={0.938} stopColor="#FFC331" />
+ <stop offset={1} stopColor="#FFC331" />
+ </linearGradient>
+ </defs>
+ <path fill="#fff" d="M-75-75h900v900H-75z" />
+ <path fill="#fff" d="M-75-75h900v900H-75z" />
+ <g clipPath="url(#a)">
+ <g clipPath="url(#b)">
+ <path fill="url(#c)" d="M45.906 42.145v499.023h505.285V42.145Zm0 0" />
+ </g>
+ </g>
+ <g clipPath="url(#d)">
+ <g clipPath="url(#e)">
+ <path fill="url(#f)" d="M203.996 203.035V702.06h505.285V203.035Zm0 0" />
+ </g>
+ </g>
+ </svg>
+);
+export default SvgPython;

src/frontend/src/icons/Python/index.tsx

@@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import SvgPython from "./Python";
+
+export const PythonIcon = forwardRef<
+ SVGSVGElement,
+ React.PropsWithChildren<{}>
+>((props, ref) => {
+ return <SvgPython ref={ref} {...props} />;
+});

src/frontend/src/icons/QianFanChat/QianFanChat.jsx

@@ -0,0 +1,23 @@
+export const SvgQianFanChat = (props) => (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={1000}
+ height={1000}
+ viewBox="0 0 750 750"
+ {...props}
+ >
+ <path
+ fill="#00d263"
+ d="M602.984 155.953c.024-.02.059-.043.086-.07L379.008 26.43l-37.793 21.71a86.37 86.37 0 0 0-5.809 3.028L95.051 189.543l106.808 61.68a26.254 26.254 0 0 0 26.223.015l53.691-30.91 69.95-40.273a53.06 53.06 0 0 1 52.933 0l55.02 31.675 67.738 38.997a26.257 26.257 0 0 0 26.184.011l107.093-61.566Zm0 0"
+ />
+ <path
+ fill="#ff502e"
+ d="M586.313 303.273a26.254 26.254 0 0 0-13.145 22.747V467.78c0 18.887-10.11 36.336-26.5 45.778l-125.336 72.16a26.24 26.24 0 0 0-13.156 22.75v123.054l242.152-139.41c.34-.191.649-.406.98-.605l41.848-24.098V241.754Zm0 0"
+ />
+ <path
+ fill="#0062ff"
+ d="m331.3 585.71-121.59-70c-16.398-9.44-26.5-26.89-26.5-45.776V328.09a26.253 26.253 0 0 0-13.151-22.746L63.266 243.848l-.047-.203v.175l.004 276.547v48.934l37.5 21.629a84.188 84.188 0 0 0 5.25 3.304l238.476 137.297v-123.07a26.25 26.25 0 0 0-13.148-22.75"
+ />
+ </svg>
+);
+export default SvgQianFanChat;

src/frontend/src/icons/QianFanChat/index.tsx

@@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import SvgQianFanChat from "./QianFanChat";
+
+export const QianFanChatIcon = forwardRef<
+ SVGSVGElement,
+ React.PropsWithChildren<{}>
+>((props, ref) => {
+ return <SvgQianFanChat ref={ref} {...props} />;
+});

src/frontend/src/utils/styleUtils.ts

@@ -42,8 +42,8 @@ import {
  Eye,
  EyeOff,
  File,
+ FileClock,
  FileDown,
- SquarePen,
  FileSearch,
  FileSearch2,
  FileSliders,
@@ -109,6 +109,7 @@ import {
  Snowflake,
  Sparkles,
  Square,
+ SquarePen,
  Store,
  SunIcon,
  TerminalIcon,
@@ -133,12 +134,13 @@ import {
  XCircle,
  Zap,
 } from "lucide-react";
-import { FaApple, FaGithub, FaRobot } from "react-icons/fa";
+import { FaApple, FaGithub } from "react-icons/fa";
 import { AWSIcon } from "../icons/AWS";
 import { AirbyteIcon } from "../icons/Airbyte";
 import { AnthropicIcon } from "../icons/Anthropic";
 import { AzureIcon } from "../icons/Azure";
 import { BingIcon } from "../icons/Bing";
+import { BotMessageSquareIcon } from "../icons/BotMessageSquare";
 import { ChromaIcon } from "../icons/ChromaIcon";
 import { CohereIcon } from "../icons/Cohere";
 import { ElasticsearchIcon } from "../icons/ElasticsearchStore";
@@ -161,7 +163,9 @@ import { OllamaIcon } from "../icons/Ollama";
 import { OpenAiIcon } from "../icons/OpenAi";
 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 { SearxIcon } from "../icons/Searx";
 import { ShareIcon } from "../icons/Share";
@@ -274,6 +278,12 @@ export const nodeNames: { [char: string]: string } = {
 };
 
 export const nodeIconsLucide: iconsType = {
+ Notify: Bell,
+ ListFlows: Group,
+ ClearMessageHistory: FileClock,
+ Python: PythonIcon,
+ ChatOutput: BotMessageSquareIcon,
+ ChatInput: MessagesSquare,
  inputs: Download,
  outputs: Upload,
  data: Database,
@@ -290,7 +300,7 @@ export const nodeIconsLucide: iconsType = {
  Redis: RedisIcon,
  RedisSearch: RedisIcon,
  PostgresChatMessageHistory: PostgresIcon,
- BaiduQianfan: FaRobot,
+ BaiduQianfan: QianFanChatIcon,
  Play,
  Vectara: VectaraIcon,
  ArrowUpToLine: ArrowUpToLine,