jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Add New Icons to New Components (#1509)

Browse source 
add new icons to new components
This commit is contained in:
Cristhian Zanforlin Lousa 2024-03-08 07:59:32 -03:00 • committed by GitHub
commit 553624c1be
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 292 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/backend/langflow/components/experimental/ClearMessageHistory.py
View file

@ -5,6 +5,7 @@ from langflow.memory import delete_messages, get_messages
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):

1
src/backend/langflow/components/experimental/ListFlows.py
View file

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

1
src/backend/langflow/components/experimental/Notify.py
View file

@ -7,6 +7,7 @@ from langflow.schema import Record
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):

2
src/backend/langflow/components/helpers/PythonFunction.py
View file

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

1
src/backend/langflow/components/inputs/ChatInput.py
View file

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

2
src/backend/langflow/components/outputs/ChatOutput.py
View file

@ -8,7 +8,7 @@ from langflow.schema import Record
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",

23
src/frontend/src/icons/BotMessageSquare/BotMessageSquare.jsx Normal file
View file

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

9
src/frontend/src/icons/BotMessageSquare/index.tsx Normal file
View file

@ -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} />;
});

158
src/frontend/src/icons/Python/Python.jsx Normal file
View file

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

41
src/frontend/src/icons/Python/Python.svg Normal file
View file

@ -0,0 +1,41 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width={800}
height={800}
fill="none"
viewBox="0 0 64 64"
{...props}
>
<path
fill="url(#a)"
d="M31.885 16c-8.124 0-7.617 3.523-7.617 3.523l.01 3.65h7.752v1.095H21.197S16 23.678 16 31.876c0 8.196 4.537 7.906 4.537 7.906h2.708v-3.804s-.146-4.537 4.465-4.537h7.688s4.32.07 4.32-4.175v-7.019S40.374 16 31.885 16zm-4.275 2.454a1.394 1.394 0 1 1 0 2.79 1.393 1.393 0 0 1-1.395-1.395c0-.771.624-1.395 1.395-1.395z"
/>
<path
fill="url(#b)"
d="M32.115 47.833c8.124 0 7.617-3.523 7.617-3.523l-.01-3.65H31.97v-1.095h10.832S48 40.155 48 31.958c0-8.197-4.537-7.906-4.537-7.906h-2.708v3.803s.146 4.537-4.465 4.537h-7.688s-4.32-.07-4.32 4.175v7.019s-.656 4.247 7.833 4.247zm4.275-2.454a1.393 1.393 0 0 1-1.395-1.395 1.394 1.394 0 1 1 1.395 1.395z"
/>
<defs>
<linearGradient
id="a"
x1={19.075}
x2={34.898}
y1={18.782}
y2={34.658}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#387EB8" />
<stop offset={1} stopColor="#366994" />
</linearGradient>
<linearGradient
id="b"
x1={28.809}
x2={45.803}
y1={28.882}
y2={45.163}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFE052" />
<stop offset={1} stopColor="#FFC331" />
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

9
src/frontend/src/icons/Python/index.tsx Normal file
View file

@ -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} />;
});

23
src/frontend/src/icons/QianFanChat/QianFanChat.jsx Normal file
View file

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

1
src/frontend/src/icons/QianFanChat/QianFanChat.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" zoomAndPan="magnify" viewBox="0 0 750 749.999995" height="1000" preserveAspectRatio="xMidYMid meet" version="1.0"><path fill="#00d263" d="M 602.984375 155.953125 C 603.007812 155.933594 603.042969 155.910156 603.070312 155.882812 L 379.007812 26.429688 L 341.214844 48.140625 C 339.253906 49.078125 337.308594 50.074219 335.40625 51.167969 L 95.050781 189.542969 L 201.859375 251.222656 C 209.964844 255.902344 219.964844 255.914062 228.082031 251.238281 L 281.773438 220.328125 L 351.722656 180.054688 C 368.105469 170.625 388.273438 170.625 404.65625 180.054688 L 459.675781 211.730469 L 527.414062 250.726562 C 535.515625 255.394531 545.484375 255.394531 553.597656 250.738281 L 660.691406 189.171875 Z M 602.984375 155.953125 " fill-opacity="1" fill-rule="nonzero"/><path fill="#ff502e" d="M 586.3125 303.273438 C 578.179688 307.960938 573.167969 316.632812 573.167969 326.019531 L 573.167969 467.78125 C 573.167969 486.667969 563.058594 504.117188 546.667969 513.558594 L 421.332031 585.71875 C 413.191406 590.402344 408.175781 599.074219 408.175781 608.46875 L 408.175781 731.523438 L 650.328125 592.113281 C 650.667969 591.921875 650.976562 591.707031 651.308594 591.507812 L 693.15625 567.410156 L 693.15625 241.753906 Z M 586.3125 303.273438 " fill-opacity="1" fill-rule="nonzero"/><path fill="#0062ff" d="M 331.300781 585.710938 L 209.710938 515.710938 C 193.3125 506.269531 183.210938 488.820312 183.210938 469.933594 L 183.210938 328.089844 C 183.210938 318.703125 178.195312 310.03125 170.058594 305.34375 L 63.265625 243.847656 L 63.21875 243.644531 L 63.21875 243.820312 L 63.222656 520.367188 L 63.222656 569.300781 L 100.722656 590.929688 C 102.425781 592.085938 104.175781 593.199219 105.972656 594.234375 L 344.449219 731.53125 L 344.449219 608.460938 C 344.449219 599.070312 339.4375 590.398438 331.300781 585.710938 " fill-opacity="1" fill-rule="nonzero"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

9
src/frontend/src/icons/QianFanChat/index.tsx Normal file
View file

@ -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} />;
});

16
src/frontend/src/utils/styleUtils.ts
View file

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