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

Formated code

Browse source
This commit is contained in:
igorrCarvalho 2023-09-18 19:52:27 -03:00
commit 1796d1aca0
7 changed files with 403 additions and 357 deletions
Download patch file Download diff file Expand all files Collapse all files

440
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -1,4 +1,4 @@
import { cloneDeep, divide } from "lodash"; import { cloneDeep } from "lodash";
import React, { import React, {
ReactNode, ReactNode,
useContext, useContext,
@ -32,7 +32,7 @@ import {
} from "../../../../utils/styleUtils"; } from "../../../../utils/styleUtils";
import { classNames, groupByFamily } from "../../../../utils/utils"; import { classNames, groupByFamily } from "../../../../utils/utils";
export default function ParameterComponent({ export default function ParameterComponent({
left, left,
id, id,
data, data,
@ -121,17 +121,18 @@ export default function ParameterComponent({
return ( return (
<> <>
{index === 0 && ( {index === 0 && (
<span> <span>
{left ? "Components to connect into:" : "Components to connect to:"} {left
</span> ? "Components to connect into:"
) : "Components to connect to:"}
} </span>
)}
<span <span
key={index} key={index}
className={classNames( className={classNames(
index > 0 ? "mt-2 flex items-center" : "mt-3 flex items-center" index > 0 ? "mt-2 flex items-center" : "mt-3 flex items-center"
)} )}
> >
<div <div
className="h-5 w-5" className="h-5 w-5"
style={{ style={{
@ -147,8 +148,7 @@ export default function ParameterComponent({
/> />
</div> </div>
<span className="ps-2 text-xs text-foreground"> <span className="ps-2 text-xs text-foreground">
{nodeNames[item.family] ?? "Other"} {nodeNames[item.family] ?? "Other"}{" "}
{" "}
<span className="text-xs"> <span className="text-xs">
{" "} {" "}
{item.type === "" ? "" : " - "} {item.type === "" ? "" : " - "}
@ -179,220 +179,218 @@ export default function ParameterComponent({
renderTooltips(); renderTooltips();
}, [tooltipTitle, flow]); }, [tooltipTitle, flow]);
return ( return !showNode ? (
!showNode ? ( left &&
left && (type === "str" ||
(type === "str" || type === "bool" ||
type === "bool" || type === "float" ||
type === "float" || type === "code" ||
type === "code" || type === "prompt" ||
type === "prompt" || type === "file" ||
type === "file" || type === "int") &&
type === "int") && !optionalHandle ? (
!optionalHandle ? ( <></>
<></>
) : (
<ShadTooltip
styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
delayDuration={0}
content={refHtml.current}
side={left ? "left" : "right"}
>
<Handle
type={left ? "target" : "source"}
position={left ? Position.Left : Position.Right}
id={id}
isValidConnection={(connection) =>
isValidConnection(connection, reactFlowInstance!)
}
className={classNames(
left ? "-ml-0.5 my-12 " : " -mr-0.5 my-12 ",
"h-3 w-3 rounded-full border-2 bg-background"
)}
style={{
borderColor: color,
top: position,
}}
></Handle>
</ShadTooltip>
)
) : ( ) : (
<div <ShadTooltip
ref={ref} styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
className="mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2" delayDuration={0}
content={refHtml.current}
side={left ? "left" : "right"}
> >
<> <Handle
<div type={left ? "target" : "source"}
className={ position={left ? Position.Left : Position.Right}
"w-full truncate text-sm" + id={id}
(left ? "" : " text-end") + isValidConnection={(connection) =>
(info !== "" ? " flex items-center" : "") isValidConnection(connection, reactFlowInstance!)
} }
> className={classNames(
{title} left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ",
<span className="text-status-red">{required ? " *" : ""}</span> "h-3 w-3 rounded-full border-2 bg-background"
<div className="">
{info !== "" && (
<ShadTooltip content={infoHtml.current}>
{/* put div to avoid bug that does not display tooltip */}
<div>
<IconComponent
name="Info"
className="relative bottom-0.5 ml-2 h-3 w-4"
/>
</div>
</ShadTooltip>
)}
</div>
</div>
{left &&
(type === "str" ||
type === "bool" ||
type === "float" ||
type === "code" ||
type === "prompt" ||
type === "file" ||
type === "int") &&
!optionalHandle ? (
<></>
) : (
<ShadTooltip
styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
delayDuration={0}
content={refHtml.current}
side={left ? "left" : "right"}
>
<Handle
type={left ? "target" : "source"}
position={left ? Position.Left : Position.Right}
id={id}
isValidConnection={(connection) =>
isValidConnection(connection, reactFlowInstance!)
}
className={classNames(
left ? "-ml-0.5 " : "-mr-0.5 ",
"h-3 w-3 rounded-full border-2 bg-background"
)}
style={{
borderColor: color,
top: position,
}}
></Handle>
</ShadTooltip>
)} )}
style={{
{left === true && borderColor: color,
type === "str" && top: position,
!data.node?.template[name].options ? ( }}
<div className="mt-2 w-full"> ></Handle>
{data.node?.template[name].list ? ( </ShadTooltip>
<InputListComponent
disabled={disabled}
value={
!data.node.template[name].value ||
data.node.template[name].value === ""
? [""]
: data.node.template[name].value
}
onChange={handleOnNewValue}
/>
) : data.node?.template[name].multiline ? (
<TextAreaComponent
disabled={disabled}
value={data.node.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
) : (
<InputComponent
disabled={disabled}
password={data.node?.template[name].password ?? false}
value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
)}
</div>
) : left === true && type === "bool" ? (
<div className="mt-2 w-full">
<ToggleShadComponent
disabled={disabled}
enabled={data.node?.template[name].value ?? false}
setEnabled={(isEnabled) => {
handleOnNewValue(isEnabled);
}}
size="large"
/>
</div>
) : left === true && type === "float" ? (
<div className="mt-2 w-full">
<FloatComponent
disabled={disabled}
value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
</div>
) : left === true &&
type === "str" &&
data.node?.template[name].options ? (
<div className="mt-2 w-full">
<Dropdown
options={data.node.template[name].options}
onSelect={handleOnNewValue}
value={data.node.template[name].value ?? "Choose an option"}
></Dropdown>
</div>
) : left === true && type === "code" ? (
<div className="mt-2 w-full">
<CodeAreaComponent
dynamic={data.node?.template[name].dynamic ?? false}
setNodeClass={(nodeClass) => {
data.node = nodeClass;
}}
nodeClass={data.node}
disabled={disabled}
value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
</div>
) : left === true && type === "file" ? (
<div className="mt-2 w-full">
<InputFileComponent
disabled={disabled}
value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue}
fileTypes={data.node?.template[name].fileTypes}
suffixes={data.node?.template[name].suffixes}
onFileChange={(filePath: string) => {
data.node!.template[name].file_path = filePath;
save();
}}
></InputFileComponent>
</div>
) : left === true && type === "int" ? (
<div className="mt-2 w-full">
<IntComponent
disabled={disabled}
value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
</div>
) : left === true && type === "prompt" ? (
<div className="mt-2 w-full">
<PromptAreaComponent
field_name={name}
setNodeClass={(nodeClass) => {
data.node = nodeClass;
}}
nodeClass={data.node}
disabled={disabled}
value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
</div>
) : (
<></>
)}
</>
</div>
) )
) : (
<div
ref={ref}
className="mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2"
>
<>
<div
className={
"w-full truncate text-sm" +
(left ? "" : " text-end") +
(info !== "" ? " flex items-center" : "")
}
>
{title}
<span className="text-status-red">{required ? " *" : ""}</span>
<div className="">
{info !== "" && (
<ShadTooltip content={infoHtml.current}>
{/* put div to avoid bug that does not display tooltip */}
<div>
<IconComponent
name="Info"
className="relative bottom-0.5 ml-2 h-3 w-4"
/>
</div>
</ShadTooltip>
)}
</div>
</div>
{left &&
(type === "str" ||
type === "bool" ||
type === "float" ||
type === "code" ||
type === "prompt" ||
type === "file" ||
type === "int") &&
!optionalHandle ? (
<></>
) : (
<ShadTooltip
styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
delayDuration={0}
content={refHtml.current}
side={left ? "left" : "right"}
>
<Handle
type={left ? "target" : "source"}
position={left ? Position.Left : Position.Right}
id={id}
isValidConnection={(connection) =>
isValidConnection(connection, reactFlowInstance!)
}
className={classNames(
left ? "-ml-0.5 " : "-mr-0.5 ",
"h-3 w-3 rounded-full border-2 bg-background"
)}
style={{
borderColor: color,
top: position,
}}
></Handle>
</ShadTooltip>
)}
{left === true &&
type === "str" &&
!data.node?.template[name].options ? (
<div className="mt-2 w-full">
{data.node?.template[name].list ? (
<InputListComponent
disabled={disabled}
value={
!data.node.template[name].value ||
data.node.template[name].value === ""
? [""]
: data.node.template[name].value
}
onChange={handleOnNewValue}
/>
) : data.node?.template[name].multiline ? (
<TextAreaComponent
disabled={disabled}
value={data.node.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
) : (
<InputComponent
disabled={disabled}
password={data.node?.template[name].password ?? false}
value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
)}
</div>
) : left === true && type === "bool" ? (
<div className="mt-2 w-full">
<ToggleShadComponent
disabled={disabled}
enabled={data.node?.template[name].value ?? false}
setEnabled={(isEnabled) => {
handleOnNewValue(isEnabled);
}}
size="large"
/>
</div>
) : left === true && type === "float" ? (
<div className="mt-2 w-full">
<FloatComponent
disabled={disabled}
value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
</div>
) : left === true &&
type === "str" &&
data.node?.template[name].options ? (
<div className="mt-2 w-full">
<Dropdown
options={data.node.template[name].options}
onSelect={handleOnNewValue}
value={data.node.template[name].value ?? "Choose an option"}
></Dropdown>
</div>
) : left === true && type === "code" ? (
<div className="mt-2 w-full">
<CodeAreaComponent
dynamic={data.node?.template[name].dynamic ?? false}
setNodeClass={(nodeClass) => {
data.node = nodeClass;
}}
nodeClass={data.node}
disabled={disabled}
value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
</div>
) : left === true && type === "file" ? (
<div className="mt-2 w-full">
<InputFileComponent
disabled={disabled}
value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue}
fileTypes={data.node?.template[name].fileTypes}
suffixes={data.node?.template[name].suffixes}
onFileChange={(filePath: string) => {
data.node!.template[name].file_path = filePath;
save();
}}
></InputFileComponent>
</div>
) : left === true && type === "int" ? (
<div className="mt-2 w-full">
<IntComponent
disabled={disabled}
value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
</div>
) : left === true && type === "prompt" ? (
<div className="mt-2 w-full">
<PromptAreaComponent
field_name={name}
setNodeClass={(nodeClass) => {
data.node = nodeClass;
}}
nodeClass={data.node}
disabled={disabled}
value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
</div>
) : (
<></>
)}
</>
</div>
); );
} }

233
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -35,10 +35,11 @@ export default function GenericNode({
function countHandles(): void { function countHandles(): void {
numberOfInputs = Object.keys(data.node!.template) numberOfInputs = Object.keys(data.node!.template)
.filter((templateField) => templateField.charAt(0) !== "_").map((templateCamp) => { .filter((templateField) => templateField.charAt(0) !== "_")
.map((templateCamp) => {
const { template } = data.node!; const { template } = data.node!;
if (template[templateCamp].input_types) return true if (template[templateCamp].input_types) return true;
if (!template[templateCamp].show) return false if (!template[templateCamp].show) return false;
switch (template[templateCamp].type) { switch (template[templateCamp].type) {
case "str": case "str":
return false; return false;
@ -55,15 +56,15 @@ export default function GenericNode({
case "int": case "int":
return false; return false;
default: default:
return true return true;
} }
}) });
setHandles(numberOfInputs) setHandles(numberOfInputs);
}; }
useEffect(() => { useEffect(() => {
countHandles(); countHandles();
}, []) }, []);
// State for outline color // State for outline color
const { sseData, isBuilding } = useSSE(); const { sseData, isBuilding } = useSSE();
@ -91,10 +92,9 @@ export default function GenericNode({
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
updateNodeInternals(data.id) updateNodeInternals(data.id);
}, 400) }, 300);
}, [showNode]);
}, [showNode])
// New useEffect to watch for changes in sseData and update validation status // New useEffect to watch for changes in sseData and update validation status
useEffect(() => { useEffect(() => {
@ -124,8 +124,10 @@ export default function GenericNode({
className={classNames( className={classNames(
selected ? "border border-ring" : "border", selected ? "border border-ring" : "border",
" transition-transform ", " transition-transform ",
showNode ? " rounded-lg transform w-96 duration-500 ease-in-out scale-100 " : " rounded-full transform transform-width duration-500 w-26 h-26 scale-90 ", showNode
"generic-node-div", ? " w-96 scale-100 transform rounded-lg duration-500 ease-in-out "
: " transform-width w-26 h-26 scale-90 transform rounded-full duration-500 ",
"generic-node-div"
)} )}
> >
{data.node?.beta && showNode && ( {data.node?.beta && showNode && (
@ -134,11 +136,26 @@ export default function GenericNode({
</div> </div>
)} )}
<div> <div>
<div className={"generic-node-div-title " + (!showNode ? " relative rounded-full w-24 h-24 " : " justify-between rounded-t-lg ")}> <div
<div className={"generic-node-title-arrangement rounded-full" + (!showNode && "justify-center")}> className={
"generic-node-div-title " +
(!showNode
? " relative h-24 w-24 rounded-full "
: " justify-between rounded-t-lg ")
}
>
<div
className={
"generic-node-title-arrangement rounded-full" +
(!showNode && "justify-center")
}
>
<IconComponent <IconComponent
name={name} name={name}
className={"generic-node-icon " + (!showNode && "absolute inset-x-6 h-12 w-12")} className={
"generic-node-icon " +
(!showNode && "absolute inset-x-6 h-12 w-12")
}
iconColor={`${nodeColors[types[data.type]]}`} iconColor={`${nodeColors[types[data.type]]}`}
/> />
{showNode && ( {showNode && (
@ -155,84 +172,97 @@ export default function GenericNode({
{!showNode && ( {!showNode && (
<> <>
{Object.keys(data.node!.template) {Object.keys(data.node!.template)
.filter((templateField) => templateField.charAt(0) !== "_") .filter((templateField) => templateField.charAt(0) !== "_")
.map((templateField: string, idx) => ( .map(
data.node!.template[templateField].show && (templateField: string, idx) =>
!data.node!.template[templateField].advanced && ( data.node!.template[templateField].show &&
<ParameterComponent !data.node!.template[templateField].advanced && (
key={ <ParameterComponent
(data.node!.template[templateField].input_types?.join( key={
";" (data.node!.template[
) ?? data.node!.template[templateField].type) + templateField
"|" + ].input_types?.join(";") ??
templateField + data.node!.template[templateField].type) +
"|" + "|" +
data.id templateField +
} "|" +
data={data} data.id
setData={setData} }
color={ data={data}
nodeColors[ setData={setData}
types[data.node?.template[templateField].type!] color={
] ?? nodeColors[
nodeColors[data.node?.template[templateField].type!] ?? types[data.node?.template[templateField].type!]
nodeColors.unknown ] ??
} nodeColors[
title={ data.node?.template[templateField].type!
data.node?.template[templateField].display_name ] ??
? data.node.template[templateField].display_name nodeColors.unknown
: data.node?.template[templateField].name }
? toTitleCase(data.node.template[templateField].name) title={
: toTitleCase(templateField) data.node?.template[templateField].display_name
} ? data.node.template[templateField].display_name
info={data.node?.template[templateField].info} : data.node?.template[templateField].name
name={templateField} ? toTitleCase(
tooltipTitle={ data.node.template[templateField].name
data.node?.template[templateField].input_types?.join( )
"\n" : toTitleCase(templateField)
) ?? data.node?.template[templateField].type }
} info={data.node?.template[templateField].info}
required={data.node?.template[templateField].required} name={templateField}
id={ tooltipTitle={
(data.node?.template[templateField].input_types?.join( data.node?.template[
";" templateField
) ?? data.node?.template[templateField].type) + ].input_types?.join("\n") ??
"|" + data.node?.template[templateField].type
templateField + }
"|" + required={
data.id data.node?.template[templateField].required
} }
left={true} id={
type={data.node?.template[templateField].type} (data.node?.template[
optionalHandle={ templateField
data.node?.template[templateField].input_types ].input_types?.join(";") ??
} data.node?.template[templateField].type) +
showNode={showNode} "|" +
/> templateField +
)))} "|" +
<ParameterComponent data.id
key={[data.type, data.id, ...data.node!.base_classes].join("|")} }
data={data} left={true}
setData={setData} type={data.node?.template[templateField].type}
color={nodeColors[types[data.type]] ?? nodeColors.unknown} optionalHandle={
title={ data.node?.template[templateField].input_types
data.node?.output_types && data.node.output_types.length > 0 }
? data.node.output_types.join("|") showNode={showNode}
: data.type />
} )
tooltipTitle={data.node?.base_classes.join("\n")} )}
id={[data.type, data.id, ...data.node!.base_classes].join("|")} <ParameterComponent
type={data.node?.base_classes.join("|")} key={[data.type, data.id, ...data.node!.base_classes].join(
left={false} "|"
showNode={showNode} )}
/> data={data}
setData={setData}
color={nodeColors[types[data.type]] ?? nodeColors.unknown}
title={
data.node?.output_types &&
data.node.output_types.length > 0
? data.node.output_types.join("|")
: data.type
}
tooltipTitle={data.node?.base_classes.join("\n")}
id={[data.type, data.id, ...data.node!.base_classes].join(
"|"
)}
type={data.node?.base_classes.join("|")}
left={false}
showNode={showNode}
/>
</> </>
)} )}
</div> </div>
{showNode && ( {showNode && (
<div className="round-button-div"> <div className="round-button-div">
<div> <div>
@ -296,9 +326,18 @@ export default function GenericNode({
</div> </div>
{showNode && ( {showNode && (
<div className={(showNode ? "generic-node-desc " + (data.node?.description !== "" && showNode ? "py-5" : "pb-5") : "")}> <div
className={
showNode
? "generic-node-desc " +
(data.node?.description !== "" && showNode ? "py-5" : "pb-5")
: ""
}
>
{data.node?.description !== "" && showNode && ( {data.node?.description !== "" && showNode && (
<div className="generic-node-desc-text">{data.node?.description}</div> <div className="generic-node-desc-text">
{data.node?.description}
</div>
)} )}
<> <>
@ -324,14 +363,18 @@ export default function GenericNode({
nodeColors[ nodeColors[
types[data.node?.template[templateField].type!] types[data.node?.template[templateField].type!]
] ?? ] ??
nodeColors[data.node?.template[templateField].type!] ?? nodeColors[
data.node?.template[templateField].type!
] ??
nodeColors.unknown nodeColors.unknown
} }
title={ title={
data.node?.template[templateField].display_name data.node?.template[templateField].display_name
? data.node.template[templateField].display_name ? data.node.template[templateField].display_name
: data.node?.template[templateField].name : data.node?.template[templateField].name
? toTitleCase(data.node.template[templateField].name) ? toTitleCase(
data.node.template[templateField].name
)
: toTitleCase(templateField) : toTitleCase(templateField)
} }
info={data.node?.template[templateField].info} info={data.node?.template[templateField].info}

65
src/frontend/src/icons/GradientSparkles/index.tsx
View file

@ -1,38 +1,39 @@
import { forwardRef } from "react"; import { forwardRef } from "react";
export const GradientSparkles = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>( export const GradientSparkles = forwardRef<
(props, ref) => { SVGSVGElement,
return ( React.PropsWithChildren<{}>
<> >((props, ref) => {
<svg width="0" height="0" style={{ position: "absolute" }}> return (
<defs> <>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <svg width="0" height="0" style={{ position: "absolute" }}>
<stop className="gradient-start" offset="0%" /> <defs>
<stop className="gradient-end" offset="100%" /> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
</linearGradient> <stop className="gradient-start" offset="0%" />
</defs> <stop className="gradient-end" offset="100%" />
</svg> </linearGradient>
{/* this svg comes from the source code of lucide, </defs>
</svg>
{/* this svg comes from the source code of lucide,
we do not use the import because it crashes the ui (why? no one knows...). we do not use the import because it crashes the ui (why? no one knows...).
source code from the used svg: source code from the used svg:
https://github.com/lucide-icons/lucide/blob/a4076db69b52ff0debc383f76d4d671c3bad5345/icons/infinity.svg?short_path=f79de91 https://github.com/lucide-icons/lucide/blob/a4076db69b52ff0debc383f76d4d671c3bad5345/icons/infinity.svg?short_path=f79de91
*/} */}
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="24" width="24"
height="24" height="24"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
stroke-width="2" stroke-width="2"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke="url(#grad1)" stroke="url(#grad1)"
ref={ref} {...props} ref={ref}
> {...props}
<path d="M12 12c-2-2.67-4-4-6-4a4 4 0 1 0 0 8c2 0 4-1.33 6-4Zm0 0c2 2.67 4 4 6 4a4 4 0 0 0 0-8c-2 0-4 1.33-6 4Z" /> >
</svg> <path d="M12 12c-2-2.67-4-4-6-4a4 4 0 1 0 0 8c2 0 4-1.33 6-4Zm0 0c2 2.67 4 4 6 4a4 4 0 0 0 0-8c-2 0-4 1.33-6 4Z" />
</> </svg>
); </>
} );
); });

2
src/frontend/src/pages/AdminPage/index.tsx
View file

@ -190,7 +190,7 @@ export default function AdminPage() {
setSuccessData({ setSuccessData({
title: "Success! New user added!", title: "Success! New user added!",
}); });
}) });
}) })
.catch((error) => { .catch((error) => {
setErrorData({ setErrorData({

12
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -119,7 +119,8 @@ export default function NodeToolbarComponent({
> >
<div <div
className={classNames( className={classNames(
"relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" + (!canMinimize() && " rounded-r-md ") + "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
(!canMinimize() && " rounded-r-md ") +
(nodeLength == 0 (nodeLength == 0
? " text-muted-foreground" ? " text-muted-foreground"
: " text-foreground") : " text-foreground")
@ -136,11 +137,14 @@ export default function NodeToolbarComponent({
<button <button
className="relative inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" className="relative inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
onClick={(event) => { onClick={(event) => {
setShowNode(prev => !prev); setShowNode((prev) => !prev);
updateNodeInternals(data.id) updateNodeInternals(data.id);
}} }}
> >
<IconComponent name={showNode ? "Minus" : "Square"} className="h-4 w-4" /> <IconComponent
name={showNode ? "Minus" : "Square"}
className="h-4 w-4"
/>
</button> </button>
</ShadTooltip> </ShadTooltip>
)} )}

2
src/frontend/src/types/components/index.ts
View file

@ -174,7 +174,7 @@ export type IconComponentProps = {
name: string; name: string;
className?: string; className?: string;
iconColor?: string; iconColor?: string;
onClick?: () => void onClick?: () => void;
}; };
export type InputProps = { export type InputProps = {

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

@ -48,6 +48,7 @@ import {
MessageCircle, MessageCircle,
MessageSquare, MessageSquare,
MessagesSquare, MessagesSquare,
Minus,
MoonIcon, MoonIcon,
MoreHorizontal, MoreHorizontal,
Paperclip, Paperclip,
@ -61,6 +62,7 @@ import {
Settings2, Settings2,
Shield, Shield,
Sparkles, Sparkles,
Square,
SunIcon, SunIcon,
TerminalSquare, TerminalSquare,
Trash2, Trash2,
@ -78,8 +80,6 @@ import {
X, X,
XCircle, XCircle,
Zap, Zap,
Minus,
Square,
} from "lucide-react"; } from "lucide-react";
import { FaApple, FaGithub } from "react-icons/fa"; import { FaApple, FaGithub } from "react-icons/fa";
import { AirbyteIcon } from "../icons/Airbyte"; import { AirbyteIcon } from "../icons/Airbyte";
@ -91,7 +91,7 @@ import { EvernoteIcon } from "../icons/Evernote";
import { FBIcon } from "../icons/FacebookMessenger"; import { FBIcon } from "../icons/FacebookMessenger";
import { GitBookIcon } from "../icons/GitBook"; import { GitBookIcon } from "../icons/GitBook";
import { GoogleIcon } from "../icons/Google"; import { GoogleIcon } from "../icons/Google";
import {GradientSparkles} from "../icons/GradientSparkles"; import { GradientSparkles } from "../icons/GradientSparkles";
import { HuggingFaceIcon } from "../icons/HuggingFace"; import { HuggingFaceIcon } from "../icons/HuggingFace";
import { IFixIcon } from "../icons/IFixIt"; import { IFixIcon } from "../icons/IFixIt";
import { MetaIcon } from "../icons/Meta"; import { MetaIcon } from "../icons/Meta";