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

Merge branch 'release' into bugfix-duplicate

Browse source
This commit is contained in:
Gabriel Luiz Freitas Almeida 2023-06-27 13:15:49 -03:00 • committed by GitHub
commit ae5f04a1b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 624 additions and 392 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -25,6 +25,7 @@ import { nodeColors } from "../../../../utils";
import ShadTooltip from "../../../../components/ShadTooltipComponent";
import { PopUpContext } from "../../../../contexts/popUpContext";
import ToggleShadComponent from "../../../../components/toggleShadComponent";
import { Info } from "lucide-react";
export default function ParameterComponent({
left,
@ -36,9 +37,11 @@ export default function ParameterComponent({
type,
name = "",
required = false,
info = "",
}: ParameterComponentType) {
const ref = useRef(null);
const refHtml = useRef(null);
const infoHtml = useRef(null);
const updateNodeInternals = useUpdateNodeInternals();
const [position, setPosition] = useState(0);
const { closePopUp } = useContext(PopUpContext);
@ -79,6 +82,18 @@ export default function ParameterComponent({
});
};
useEffect(() => {
infoHtml.current = (
<div className="h-full w-full break-words">
{info.split("\n").map((line, i) => (
<p key={i} className="block">
{line}
</p>
))}
</div>
);
}, [info]);
useEffect(() => {
const groupedObj = groupByFamily(myData, tooltipTitle);
@ -126,8 +141,25 @@ export default function ParameterComponent({
className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
>
<>
<div className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
<div
className={
"text-sm truncate w-full" +
(left ? "" : " text-end") +
(info !== "" ? " flex items-center" : "")
}
>
{title}
<div className="">
{info !== "" && (
<ShadTooltip
open={true}
delayDuration={500}
content={infoHtml.current}
>
<Info className="ml-2 relative bottom-0.5 w-3 h-3" />
</ShadTooltip>
)}
</div>
<span className="text-red-600">{required ? " *" : ""}</span>
</div>
{left &&

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

@ -6,16 +6,7 @@ import {
} from "../../utils";
import ParameterComponent from "./components/parameterComponent";
import { typesContext } from "../../contexts/typesContext";
import {
useContext,
useState,
useEffect,
useRef,
ForwardRefExoticComponent,
ComponentType,
SVGProps,
ReactNode,
} from "react";
import { useContext, useState, useEffect, useRef } from "react";
import { NodeDataType } from "../../types/flow";
import { alertContext } from "../../contexts/alertContext";
import { PopUpContext } from "../../contexts/popUpContext";
@ -23,10 +14,9 @@ import NodeModal from "../../modals/NodeModal";
import Tooltip from "../../components/TooltipComponent";
import { NodeToolbar } from "reactflow";
import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
import { FileText, Info } from "lucide-react";
import ShadTooltip from "../../components/ShadTooltipComponent";
import { useSSE } from "../../contexts/SSEContext";
import { ReactElement } from "react-markdown/lib/react-markdown";
export default function GenericNode({
data,
@ -46,6 +36,7 @@ export default function GenericNode({
const [validationStatus, setValidationStatus] = useState(null);
// State for outline color
const { sseData, isBuilding } = useSSE();
const refHtml = useRef(null);
// useEffect(() => {
// if (reactFlowInstance) {
@ -79,6 +70,22 @@ export default function GenericNode({
useEffect(() => {}, [closePopUp, data.node.template]);
useEffect(() => {
refHtml.current = (
<div className="flex">
<span>{`${data.node.display_name} Documentation`}</span>
<span
className="self-center"
style={{
color: nodeColors[types[data.type]] ?? nodeColors.unknown,
}}
>
<FileText className="h-4 w-4 ml-2" />
</span>
</div>
);
}, []);
return (
<>
<NodeToolbar>
@ -103,7 +110,7 @@ export default function GenericNode({
color: nodeColors[types[data.type]] ?? nodeColors.unknown,
}}
/>
<div className="ml-2 truncate">
<div className="ml-2 truncate flex">
<ShadTooltip
delayDuration={1500}
content={data.node.display_name}
@ -112,6 +119,29 @@ export default function GenericNode({
{data.node.display_name}
</div>
</ShadTooltip>
<div className="">
{data.node.documentation !== "" && (
<ShadTooltip
open={true}
delayDuration={1000}
content={refHtml.current}
>
<a
href={data.node.documentation}
target="_blank"
rel="noopener noreferrer"
>
<Info
style={{
color:
nodeColors[types[data.type]] ?? nodeColors.unknown,
}}
className="ml-2 self-center w-4 h-4"
/>
</a>
</ShadTooltip>
)}
</div>
</div>
</div>
<div className="flex gap-3">
@ -214,6 +244,7 @@ export default function GenericNode({
? toTitleCase(data.node.template[t].name)
: toTitleCase(t)
}
info={data.node.template[t].info}
name={t}
tooltipTitle={data.node.template[t].type}
required={data.node.template[t].required}

10
src/frontend/src/contexts/tabsContext.tsx
View file

@ -198,10 +198,13 @@ export function TabsProvider({ children }: { children: ReactNode }) {
edge.style = { stroke: "#555555" };
});
}
function updateDisplay_name(node: NodeType, template: APIClassType) {
node.data.node.display_name = template["display_name"]
? template["display_name"]
: node.data.type;
node.data.node.display_name = template["display_name"] || node.data.type;
}
function updateNodeDocumentation(node: NodeType, template: APIClassType) {
node.data.node.documentation = template["documentation"];
}
function processFlowNodes(flow) {
@ -218,6 +221,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
updateNodeEdges(flow, node, template);
updateNodeDescription(node, template);
updateNodeTemplate(node, template);
updateNodeDocumentation(node, template);
}
});
}

6
src/frontend/src/icons/Midjorney/index.tsx
View file

@ -1,9 +1,9 @@
import React, { forwardRef } from "react";
import { ReactComponent as MidjorneySVG } from "./Midjourney_Emblem.svg";
import { ReactComponent as MidjourneySVG } from "./Midjourney_Emblem.svg";
export const MidjorneyIcon = forwardRef<
export const MidjourneyIcon = forwardRef<
SVGSVGElement,
React.PropsWithChildren<{}>
>((props, ref) => {
return <MidjorneySVG ref={ref} {...props} />;
return <MidjourneySVG ref={ref} {...props} />;
});

1
src/frontend/src/types/api/index.ts
View file

@ -12,6 +12,7 @@ export type APIClassType = {
description: string;
template: APITemplateType;
display_name: string;
documentation: string;
[key: string]: Array<string> | string | APITemplateType;
};
export type TemplateVariableType = {

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

@ -1,10 +1,4 @@
import {
ComponentType,
ForwardRefExoticComponent,
ReactElement,
ReactNode,
SVGProps,
} from "react";
import { ReactElement, ReactNode } from "react";
import { NodeDataType } from "../flow/index";
import { typesContextType } from "../typesContext";
export type InputComponentType = {
@ -41,6 +35,7 @@ export type ParameterComponentType = {
name?: string;
tooltipTitle: string;
dataContext?: typesContextType;
info?: string;
};
export type InputListComponentType = {
value: string[];

17
src/frontend/src/utils.ts
View file

@ -33,7 +33,7 @@ import { HackerNewsIcon } from "./icons/hackerNews";
import { HugginFaceIcon } from "./icons/HuggingFace";
import { IFixIcon } from "./icons/IFixIt";
import { MetaIcon } from "./icons/Meta";
import { MidjorneyIcon } from "./icons/Midjorney";
import { MidjourneyIcon } from "./icons/Midjorney";
import { NotionIcon } from "./icons/Notion";
import { OpenAiIcon } from "./icons/OpenAi";
import { QDrantIcon } from "./icons/QDrant";
@ -45,7 +45,6 @@ import { twMerge } from "tailwind-merge";
import { ADJECTIVES, DESCRIPTIONS, NOUNS } from "./constants";
import { ComponentType, SVGProps } from "react";
import {
Boxes,
Cpu,
Fingerprint,
Gift,
@ -53,7 +52,6 @@ import {
HelpCircle,
Laptop2,
Layers,
LayoutDashboard,
Lightbulb,
Link,
MessageCircle,
@ -189,7 +187,7 @@ export const nodeIcons: {
HuggingFaceEmbeddings: HugginFaceIcon,
IFixitLoader: IFixIcon,
Meta: MetaIcon,
Midjorney: MidjorneyIcon,
Midjourney: MidjourneyIcon,
NotionDirectoryLoader: NotionIcon,
ChatOpenAI: OpenAiIcon,
OpenAI: OpenAiIcon,
@ -287,7 +285,10 @@ export const nodeIconsLucide: {
Meta: MetaIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
Midjorney: MidjorneyIcon as React.ForwardRefExoticComponent<
Midjorney: MidjourneyIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
MongoDBAtlasVectorSearch: MongoDBIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
NotionDirectoryLoader: NotionIcon as React.ForwardRefExoticComponent<
@ -302,6 +303,9 @@ export const nodeIconsLucide: {
OpenAIEmbeddings: OpenAiIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
Pinecone: PineconeIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
Qdrant: QDrantIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
@ -311,6 +315,9 @@ export const nodeIconsLucide: {
SlackDirectoryLoader: SlackIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
SupabaseVectorStore: SupabaseIcon as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,
agents: Rocket as React.ForwardRefExoticComponent<
ComponentType<SVGProps<SVGSVGElement>>
>,