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

prettier

Browse source
This commit is contained in:
Gabriel Almeida 2023-04-28 14:46:05 -03:00
commit 2bc1fdd32e
12 changed files with 454 additions and 399 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/frontend/src/components/chatComponent/index.tsx
View file

@ -1,8 +1,4 @@
import {
useEffect,
useRef,
useState,
} from "react";
import { useEffect, useRef, useState } from "react";
import { ChatMessageType, ChatType } from "../../types/chat";
import ChatTrigger from "./chatTrigger";
@ -11,23 +7,26 @@ import ChatModal from "../../modals/chatModal";
const _ = require("lodash");
export default function Chat({ flow }: ChatType) {
const [open, setOpen] = useState(false);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
event.preventDefault()
if ((event.key === "K"||event.key==="k") && (event.metaKey||event.ctrlKey)) {
setOpen(oldState=>!oldState);
}
};
document.addEventListener("keydown", handleKeyDown);
return () => {
document.removeEventListener("keydown", handleKeyDown);
};
}, []);
return (
<>
<ChatModal key={flow.id} flow={flow} open={open} setOpen={setOpen} />
<ChatTrigger open={open} setOpen={setOpen} flow={flow} />
</>
);
const [open, setOpen] = useState(false);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
// event.preventDefault()
if (
(event.key === "K" || event.key === "k") &&
(event.metaKey || event.ctrlKey)
) {
setOpen((oldState) => !oldState);
}
};
document.addEventListener("keydown", handleKeyDown);
return () => {
document.removeEventListener("keydown", handleKeyDown);
};
}, []);
return (
<>
<ChatModal key={flow.id} flow={flow} open={open} setOpen={setOpen} />
<ChatTrigger open={open} setOpen={setOpen} flow={flow} />
</>
);
}

61
src/frontend/src/controllers/API/index.ts
View file

@ -1,40 +1,43 @@
import { PromptTypeAPI, errorsTypeAPI } from './../../types/api/index';
import { APIObjectType, sendAllProps } from '../../types/api/index';
import { PromptTypeAPI, errorsTypeAPI } from "./../../types/api/index";
import { APIObjectType, sendAllProps } from "../../types/api/index";
import axios, { AxiosResponse } from "axios";
import { FlowType } from '../../types/flow';
import { FlowType } from "../../types/flow";
export async function getAll():Promise<AxiosResponse<APIObjectType>> {
return await axios.get(`/all`);
export async function getAll(): Promise<AxiosResponse<APIObjectType>> {
return await axios.get(`/all`);
}
export async function sendAll(data:sendAllProps) {
return await axios.post(`/predict`, data);
export async function sendAll(data: sendAllProps) {
return await axios.post(`/predict`, data);
}
export async function checkCode(code:string):Promise<AxiosResponse<errorsTypeAPI>>{
return await axios.post('/validate/code',{code})
export async function checkCode(
code: string
): Promise<AxiosResponse<errorsTypeAPI>> {
return await axios.post("/validate/code", { code });
}
export async function checkPrompt(template:string):Promise<AxiosResponse<PromptTypeAPI>>{
return await axios.post('/validate/prompt',{template})
export async function checkPrompt(
template: string
): Promise<AxiosResponse<PromptTypeAPI>> {
return await axios.post("/validate/prompt", { template });
}
export async function getExamples(): Promise<FlowType[]> {
const url = 'https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples';
const response = await axios.get(url);
const jsonFiles = response.data.filter((file: any) => {
return file.name.endsWith('.json');
});
const contentsPromises = jsonFiles.map(async (file: any) => {
const contentResponse = await axios.get(file.download_url);
return contentResponse.data;
});
const contents = await Promise.all(contentsPromises);
return contents;
}
const url =
"https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples";
const response = await axios.get(url);
const jsonFiles = response.data.filter((file: any) => {
return file.name.endsWith(".json");
});
const contentsPromises = jsonFiles.map(async (file: any) => {
const contentResponse = await axios.get(file.download_url);
return contentResponse.data;
});
const contents = await Promise.all(contentsPromises);
return contents;
}

375
src/frontend/src/pages/FlowPage/index.tsx
View file

@ -1,15 +1,15 @@
import { useCallback, useContext, useEffect, useRef } from "react";
import ReactFlow, {
Background,
Controls,
addEdge,
useEdgesState,
useNodesState,
useReactFlow,
updateEdge,
EdgeChange,
Connection,
Edge,
Background,
Controls,
addEdge,
useEdgesState,
useNodesState,
useReactFlow,
updateEdge,
EdgeChange,
Connection,
Edge,
} from "reactflow";
import { locationContext } from "../../contexts/locationContext";
import ExtraSidebar from "./components/extraSidebarComponent";
@ -24,193 +24,198 @@ import { APIClassType } from "../../types/api";
import { isValidConnection } from "../../utils";
const nodeTypes = {
genericNode: GenericNode,
genericNode: GenericNode,
};
var _ = require("lodash");
export default function FlowPage({ flow }:{flow:FlowType}) {
let { updateFlow, incrementNodeId} =
useContext(TabsContext);
const { types, reactFlowInstance, setReactFlowInstance } =
useContext(typesContext);
const reactFlowWrapper = useRef(null);
export default function FlowPage({ flow }: { flow: FlowType }) {
let { updateFlow, incrementNodeId } = useContext(TabsContext);
const { types, reactFlowInstance, setReactFlowInstance } =
useContext(typesContext);
const reactFlowWrapper = useRef(null);
const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
const { setErrorData } = useContext(alertContext);
const [nodes, setNodes, onNodesChange] = useNodesState(
flow.data?.nodes ?? []
);
const [edges, setEdges, onEdgesChange] = useEdgesState(
flow.data?.edges ?? []
);
const { setViewport } = useReactFlow();
const edgeUpdateSuccessful = useRef(true)
const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
const { setErrorData } = useContext(alertContext);
const [nodes, setNodes, onNodesChange] = useNodesState(
flow.data?.nodes ?? []
);
const [edges, setEdges, onEdgesChange] = useEdgesState(
flow.data?.edges ?? []
);
const { setViewport } = useReactFlow();
const edgeUpdateSuccessful = useRef(true);
useEffect(() => {
if (reactFlowInstance && flow) {
flow.data = reactFlowInstance.toObject();
updateFlow(flow);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [nodes, edges]);
//update flow when tabs change
useEffect(() => {
setNodes(flow?.data?.nodes ?? []);
setEdges(flow?.data?.edges ?? []);
if (reactFlowInstance) {
setViewport(flow?.data?.viewport ?? { x: 1, y: 0, zoom: 0.5 });
}
}, [flow, reactFlowInstance, setEdges, setNodes, setViewport]);
//set extra sidebar
useEffect(() => {
setExtraComponent(<ExtraSidebar />);
setExtraNavigation({ title: "Components" });
}, [setExtraComponent, setExtraNavigation]);
useEffect(() => {
if (reactFlowInstance && flow) {
flow.data = reactFlowInstance.toObject();
updateFlow(flow);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [nodes, edges]);
//update flow when tabs change
useEffect(() => {
setNodes(flow?.data?.nodes ?? []);
setEdges(flow?.data?.edges ?? []);
if (reactFlowInstance) {
setViewport(flow?.data?.viewport ?? { x: 1, y: 0, zoom: 0.5 });
}
}, [flow, reactFlowInstance, setEdges, setNodes, setViewport]);
//set extra sidebar
useEffect(() => {
setExtraComponent(<ExtraSidebar />);
setExtraNavigation({ title: "Components" });
}, [setExtraComponent, setExtraNavigation]);
const onEdgesChangeMod = useCallback(
(s:EdgeChange[]) => {
onEdgesChange(s);
setNodes((x) => {
let newX = _.cloneDeep(x);
return newX;
});
},
[onEdgesChange, setNodes]
);
const onEdgesChangeMod = useCallback(
(s: EdgeChange[]) => {
onEdgesChange(s);
setNodes((x) => {
let newX = _.cloneDeep(x);
return newX;
});
},
[onEdgesChange, setNodes]
);
const onConnect = useCallback(
(params:Connection) => {
setEdges((eds) =>
addEdge({ ...params, className: "animate-pulse" }, eds)
);
setNodes((x) => {
let newX = _.cloneDeep(x);
return newX;
});
},
[setEdges, setNodes]
);
const onConnect = useCallback(
(params: Connection) => {
setEdges((eds) =>
addEdge({ ...params, className: "animate-pulse" }, eds)
);
setNodes((x) => {
let newX = _.cloneDeep(x);
return newX;
});
},
[setEdges, setNodes]
);
const onDragOver = useCallback((event:React.DragEvent) => {
event.preventDefault();
event.dataTransfer.dropEffect = "move";
}, []);
const onDragOver = useCallback((event: React.DragEvent) => {
event.preventDefault();
event.dataTransfer.dropEffect = "move";
}, []);
const onDrop = useCallback(
(event:React.DragEvent) => {
event.preventDefault();
// Helper function to generate a unique node ID
function getId() {
return `dndnode_` + incrementNodeId();
}
// Get the current bounds of the ReactFlow wrapper element
const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
// Extract the data from the drag event and parse it as a JSON object
let data:{type:string,node?:APIClassType} = JSON.parse(event.dataTransfer.getData("json"));
// If data type is not "chatInput" or if there are no "chatInputNode" nodes present in the ReactFlow instance, create a new node
if (
data.type !== "chatInput" ||
(data.type === "chatInput" &&
!reactFlowInstance.getNodes().some((n) => n.type === "chatInputNode"))
) {
// Calculate the position where the node should be created
const position = reactFlowInstance.project({
x: event.clientX - reactflowBounds.left,
y: event.clientY - reactflowBounds.top,
});
// Generate a unique node ID
let newId = getId();
// Create a new node object
const newNode:NodeType = {
id: newId,
type: "genericNode",
position,
data: {
...data,
id: newId,
value: null,
},
};
// Add the new node to the list of nodes in state
setNodes((nds) => nds.concat(newNode));
} else {
// If a chat input node already exists, set an error message
setErrorData({
title: "Error creating node",
list: ["There can't be more than one chat input."],
});
}
},
// Specify dependencies for useCallback
[incrementNodeId, reactFlowInstance, setErrorData, setNodes]
);
const onDrop = useCallback(
(event: React.DragEvent) => {
event.preventDefault();
const onDelete = (mynodes) => {
setEdges(edges.filter((ns) => !nodes.some((n) => ns.source === n.id || ns.target === n.id)));
}
// Helper function to generate a unique node ID
function getId() {
return `dndnode_` + incrementNodeId();
}
const onEdgeUpdateStart = useCallback(() => {
edgeUpdateSuccessful.current = false;
}, []);
// Get the current bounds of the ReactFlow wrapper element
const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
const onEdgeUpdate = useCallback((oldEdge:Edge, newConnection:Connection) => {
if(isValidConnection(newConnection,reactFlowInstance)){
edgeUpdateSuccessful.current = true;
setEdges((els) => updateEdge(oldEdge, newConnection, els));
}
}, []);
// Extract the data from the drag event and parse it as a JSON object
let data: { type: string; node?: APIClassType } = JSON.parse(
event.dataTransfer.getData("json")
);
const onEdgeUpdateEnd = useCallback((_, edge) => {
if (!edgeUpdateSuccessful.current) {
setEdges((eds) => eds.filter((e) => e.id !== edge.id));
}
edgeUpdateSuccessful.current = true;
}, []);
return (
<div className="w-full h-full" ref={reactFlowWrapper}>
{Object.keys(types).length > 0 ? (
<>
<ReactFlow
nodes={nodes}
onMove={() =>
updateFlow({ ...flow, data: reactFlowInstance.toObject() })
}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChangeMod}
onConnect={onConnect}
onLoad={setReactFlowInstance}
onInit={setReactFlowInstance}
nodeTypes={nodeTypes}
onEdgeUpdate={onEdgeUpdate}
onEdgeUpdateStart={onEdgeUpdateStart}
onEdgeUpdateEnd={onEdgeUpdateEnd}
connectionLineComponent={ConnectionLineComponent}
onDragOver={onDragOver}
onDrop={onDrop}
onNodesDelete={onDelete}
>
<Background className="dark:bg-gray-900"/>
<Controls className="[&>button]:text-black [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600">
</Controls>
</ReactFlow>
<Chat flow={flow} reactFlowInstance={reactFlowInstance} />
</>
) : (
<></>
)}
</div>
);
// If data type is not "chatInput" or if there are no "chatInputNode" nodes present in the ReactFlow instance, create a new node
if (
data.type !== "chatInput" ||
(data.type === "chatInput" &&
!reactFlowInstance.getNodes().some((n) => n.type === "chatInputNode"))
) {
// Calculate the position where the node should be created
const position = reactFlowInstance.project({
x: event.clientX - reactflowBounds.left,
y: event.clientY - reactflowBounds.top,
});
// Generate a unique node ID
let newId = getId();
// Create a new node object
const newNode: NodeType = {
id: newId,
type: "genericNode",
position,
data: {
...data,
id: newId,
value: null,
},
};
// Add the new node to the list of nodes in state
setNodes((nds) => nds.concat(newNode));
} else {
// If a chat input node already exists, set an error message
setErrorData({
title: "Error creating node",
list: ["There can't be more than one chat input."],
});
}
},
// Specify dependencies for useCallback
[incrementNodeId, reactFlowInstance, setErrorData, setNodes]
);
const onDelete = (mynodes) => {
setEdges(
edges.filter(
(ns) => !nodes.some((n) => ns.source === n.id || ns.target === n.id)
)
);
};
const onEdgeUpdateStart = useCallback(() => {
edgeUpdateSuccessful.current = false;
}, []);
const onEdgeUpdate = useCallback(
(oldEdge: Edge, newConnection: Connection) => {
if (isValidConnection(newConnection, reactFlowInstance)) {
edgeUpdateSuccessful.current = true;
setEdges((els) => updateEdge(oldEdge, newConnection, els));
}
},
[]
);
const onEdgeUpdateEnd = useCallback((_, edge) => {
if (!edgeUpdateSuccessful.current) {
setEdges((eds) => eds.filter((e) => e.id !== edge.id));
}
edgeUpdateSuccessful.current = true;
}, []);
return (
<div className="w-full h-full" ref={reactFlowWrapper}>
{Object.keys(types).length > 0 ? (
<>
<ReactFlow
nodes={nodes}
onMove={() =>
updateFlow({ ...flow, data: reactFlowInstance.toObject() })
}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChangeMod}
onConnect={onConnect}
onLoad={setReactFlowInstance}
onInit={setReactFlowInstance}
nodeTypes={nodeTypes}
onEdgeUpdate={onEdgeUpdate}
onEdgeUpdateStart={onEdgeUpdateStart}
onEdgeUpdateEnd={onEdgeUpdateEnd}
connectionLineComponent={ConnectionLineComponent}
onDragOver={onDragOver}
onDrop={onDrop}
onNodesDelete={onDelete}
>
<Background className="dark:bg-gray-900" />
<Controls className="[&>button]:text-black [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600"></Controls>
</ReactFlow>
<Chat flow={flow} reactFlowInstance={reactFlowInstance} />
</>
) : (
<></>
)}
</div>
);
}

4
src/frontend/src/reportWebVitals.ts
View file

@ -1,8 +1,8 @@
import { ReportHandler } from 'web-vitals';
import { ReportHandler } from "web-vitals";
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);

9
src/frontend/src/svg.d.ts vendored
View file

@ -1,5 +1,4 @@
declare module '*.svg' {
const content: any;
export default content;
}
declare module "*.svg" {
const content: any;
export default content;
}

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

@ -1,20 +1,40 @@
import { Node,Edge,Viewport } from "reactflow"
import { Node, Edge, Viewport } from "reactflow";
//kind and class are just representative names to represent the actual structure of the object received by the API
export type APIObjectType = {kind:APIKindType,[key:string]:APIKindType}
export type APIKindType= {class:APIClassType,[key:string]:APIClassType}
export type APITemplateType = {variable:TemplateVariableType,[key:string]:TemplateVariableType}
export type APIClassType ={base_classes:Array<string>,description:string,template:APITemplateType,[key:string]:Array<string>|string|APITemplateType}
export type TemplateVariableType = {type:string,required:boolean,placeholder?:string,list:boolean,show:boolean,multiline?:boolean,value?:any,[key:string]:any}
export type sendAllProps={
nodes: Node[];
edges: Edge[];
name:string,
description:string;
viewport: Viewport;
message:string;
chatHistory:{message:string,isSend:boolean}[],
export type APIObjectType = { kind: APIKindType; [key: string]: APIKindType };
export type APIKindType = { class: APIClassType; [key: string]: APIClassType };
export type APITemplateType = {
variable: TemplateVariableType;
[key: string]: TemplateVariableType;
};
export type errorsTypeAPI={function:{errors:Array<string>},imports:{errors:Array<string>}}
export type PromptTypeAPI = {input_variables:Array<string>}
export type APIClassType = {
base_classes: Array<string>;
description: string;
template: APITemplateType;
[key: string]: Array<string> | string | APITemplateType;
};
export type TemplateVariableType = {
type: string;
required: boolean;
placeholder?: string;
list: boolean;
show: boolean;
multiline?: boolean;
value?: any;
[key: string]: any;
};
export type sendAllProps = {
nodes: Node[];
edges: Edge[];
name: string;
description: string;
viewport: Viewport;
message: string;
chatHistory: { message: string; isSend: boolean }[];
};
export type errorsTypeAPI = {
function: { errors: Array<string> };
imports: { errors: Array<string> };
};
export type PromptTypeAPI = { input_variables: Array<string> };

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

@ -1,81 +1,85 @@
import { ForwardRefExoticComponent, ReactElement, ReactNode } from "react";
import { NodeDataType } from "../flow/index";
export type InputComponentType = {
value: string;
disabled?: boolean;
onChange: (value: string) => void;
password: boolean;
value: string;
disabled?: boolean;
onChange: (value: string) => void;
password: boolean;
};
export type ToggleComponentType = {
enabled: boolean;
setEnabled: (state: boolean) => void;
disabled: boolean;
enabled: boolean;
setEnabled: (state: boolean) => void;
disabled: boolean;
};
export type DropDownComponentType = {
value: string;
options: string[];
onSelect: (value: string) => void;
value: string;
options: string[];
onSelect: (value: string) => void;
};
export type ParameterComponentType = {
data: NodeDataType;
title: string;
id: string;
color: string;
left: boolean;
type: string;
required?: boolean;
name?: string;
tooltipTitle: string;
data: NodeDataType;
title: string;
id: string;
color: string;
left: boolean;
type: string;
required?: boolean;
name?: string;
tooltipTitle: string;
};
export type InputListComponentType = {
value: string[];
onChange: (value: string[]) => void;
disabled: boolean;
value: string[];
onChange: (value: string[]) => void;
disabled: boolean;
};
export type TextAreaComponentType = {
disabled: boolean;
onChange: (value: string[] | string) => void;
value: string;
disabled: boolean;
onChange: (value: string[] | string) => void;
value: string;
};
export type FileComponentType = {
disabled: boolean;
onChange: (value: string[] | string) => void;
value: string;
suffixes:Array<string>;
fileTypes:Array<string>;
onFileChange:(value: string) => void;
disabled: boolean;
onChange: (value: string[] | string) => void;
value: string;
suffixes: Array<string>;
fileTypes: Array<string>;
onFileChange: (value: string) => void;
};
export type DisclosureComponentType = {
children: ReactNode;
button: {
title: string;
Icon: ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
buttons?: {
Icon: ReactElement;
title: string;
onClick: (event?: React.MouseEvent) => void;
}[];
};
children: ReactNode;
button: {
title: string;
Icon: ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
buttons?: {
Icon: ReactElement;
title: string;
onClick: (event?: React.MouseEvent) => void;
}[];
};
};
export type FloatComponentType = {
value: string;
disabled?: boolean;
onChange: (value: string) => void;
value: string;
disabled?: boolean;
onChange: (value: string) => void;
};
export type TooltipComponentType={children:ReactElement,title:string,placement?:
| 'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top';}
export type TooltipComponentType = {
children: ReactElement;
title: string;
placement?:
| "bottom-end"
| "bottom-start"
| "bottom"
| "left-end"
| "left-start"
| "left"
| "right-end"
| "right-start"
| "right"
| "top-end"
| "top-start"
| "top";
};

7
src/frontend/src/types/entities/index.ts
View file

@ -1,3 +1,8 @@
import { HomeIcon } from "@heroicons/react/24/outline";
export type sidebarNavigationItemType = { name: string, href: string, icon: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>, current: boolean }
export type sidebarNavigationItemType = {
name: string;
href: string;
icon: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
current: boolean;
};

26
src/frontend/src/types/flow/index.ts
View file

@ -1,12 +1,22 @@
import { ChatMessageType } from './../chat/index';
import { APIClassType } from '../api/index';
import { ChatMessageType } from "./../chat/index";
import { APIClassType } from "../api/index";
import { ReactFlowJsonObject, XYPosition } from "reactflow";
export type FlowType = {
name: string;
id: string;
data: ReactFlowJsonObject;
description:string;
name: string;
id: string;
data: ReactFlowJsonObject;
description: string;
};
export type NodeType = {
id: string;
type?: string;
position: XYPosition;
data: NodeDataType;
};
export type NodeDataType = {
type: string;
node?: APIClassType;
id: string;
value: any;
};
export type NodeType = {id:string,type:string,position:XYPosition,data:NodeDataType}
export type NodeDataType = {type:string,node?:APIClassType,id:string,value:any}

24
src/frontend/src/types/tabs/index.ts
View file

@ -1,15 +1,15 @@
import { FlowType } from "../flow";
export type TabsContextType = {
save:()=>void;
tabIndex: number;
setTabIndex: (index: number) => void;
flows: Array<FlowType>;
removeFlow: (id: string) => void;
addFlow: (flowData?: FlowType) => void;
updateFlow: (newFlow: FlowType) => void;
incrementNodeId: () => number;
downloadFlow: (flow:FlowType) => void;
uploadFlow: () => void;
hardReset:()=>void;
};
save: () => void;
tabIndex: number;
setTabIndex: (index: number) => void;
flows: Array<FlowType>;
removeFlow: (id: string) => void;
addFlow: (flowData?: FlowType) => void;
updateFlow: (newFlow: FlowType) => void;
incrementNodeId: () => number;
downloadFlow: (flow: FlowType) => void;
uploadFlow: () => void;
hardReset: () => void;
};

14
src/frontend/src/types/typesContext/index.ts
View file

@ -1,11 +1,11 @@
import { ReactFlowInstance } from "reactflow";
const types:{[char: string]: string}={}
const types: { [char: string]: string } = {};
export type typesContextType = {
reactFlowInstance: ReactFlowInstance|null;
setReactFlowInstance: any;
deleteNode: (idx: string) => void;
types: typeof types;
setTypes: (newState: {}) => void;
};
reactFlowInstance: ReactFlowInstance | null;
setReactFlowInstance: any;
deleteNode: (idx: string) => void;
types: typeof types;
setTypes: (newState: {}) => void;
};

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

@ -14,13 +14,13 @@ import {
FingerPrintIcon,
ScissorsIcon,
CircleStackIcon,
Squares2X2Icon
Squares2X2Icon,
} from "@heroicons/react/24/outline";
import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
import { FlowType } from "./types/flow";
var _ = require('lodash')
var _ = require("lodash");
export function classNames(...classes:Array<string>) {
export function classNames(...classes: Array<string>) {
return classes.filter(Boolean).join(" ");
}
@ -70,7 +70,7 @@ export const borderLColors = {
gray: "border-l-gray-500",
};
export const nodeColors: {[char: string]: string} = {
export const nodeColors: { [char: string]: string } = {
prompts: "#4367BF",
llms: "#6344BE",
chains: "#FE7500",
@ -79,18 +79,18 @@ export const nodeColors: {[char: string]: string} = {
memories: "#F5B85A",
advanced: "#000000",
chat: "#198BF6",
thought:"#272541",
embeddings:"#42BAA7",
documentloaders:"#7AAE42",
thought: "#272541",
embeddings: "#42BAA7",
documentloaders: "#7AAE42",
vectorstores: "#AA8742",
textsplitters: "#B47CB5",
toolkits:"#DB2C2C",
wrappers:"#E6277A",
utilities:"#31A3CC",
unknown:"#9CA3AF"
toolkits: "#DB2C2C",
wrappers: "#E6277A",
utilities: "#31A3CC",
unknown: "#9CA3AF",
};
export const nodeNames:{[char: string]: string} = {
export const nodeNames: { [char: string]: string } = {
prompts: "Prompts",
llms: "LLMs",
chains: "Chains",
@ -102,14 +102,18 @@ export const nodeNames:{[char: string]: string} = {
embeddings: "Embeddings",
documentloaders: "Document Loaders",
vectorstores: "Vector Stores",
toolkits:"Toolkits",
wrappers:"Wrappers",
toolkits: "Toolkits",
wrappers: "Wrappers",
textsplitters: "Text Splitters",
utilities:"Utilities",
unknown:"Unknown"
utilities: "Utilities",
unknown: "Unknown",
};
export const nodeIcons:{[char: string]: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>} = {
export const nodeIcons: {
[char: string]: React.ForwardRefExoticComponent<
React.SVGProps<SVGSVGElement>
>;
} = {
agents: RocketLaunchIcon,
chains: LinkIcon,
memories: CpuChipIcon,
@ -118,14 +122,14 @@ export const nodeIcons:{[char: string]: React.ForwardRefExoticComponent<React.SV
tools: WrenchIcon,
advanced: ComputerDesktopIcon,
chat: Bars3CenterLeftIcon,
embeddings:FingerPrintIcon,
documentloaders:PaperClipIcon,
embeddings: FingerPrintIcon,
documentloaders: PaperClipIcon,
vectorstores: CircleStackIcon,
toolkits:WrenchScrewdriverIcon,
textsplitters:ScissorsIcon,
wrappers:GiftIcon,
utilities:Squares2X2Icon,
unknown:QuestionMarkCircleIcon
toolkits: WrenchScrewdriverIcon,
textsplitters: ScissorsIcon,
wrappers: GiftIcon,
utilities: Squares2X2Icon,
unknown: QuestionMarkCircleIcon,
};
export const bgColors = {
@ -218,7 +222,7 @@ export const taskTypeMap: { [key: string]: string } = {
MULTICLASS_CLASSIFICATION: "Multiclass Classification",
};
const charWidths:{[char: string]: number} = {
const charWidths: { [char: string]: number } = {
" ": 0.2,
"!": 0.2,
'"': 0.3,
@ -260,7 +264,7 @@ for (let i = 97; i <= 122; i++) {
charWidths[String.fromCharCode(i)] = 0.5;
}
export function measureTextWidth(text: string, fontSize:number) {
export function measureTextWidth(text: string, fontSize: number) {
let wordWidth = 0;
for (let j = 0; j < text.length; j++) {
let char = text[j];
@ -270,7 +274,11 @@ export function measureTextWidth(text: string, fontSize:number) {
return wordWidth;
}
export function measureTextHeight(text: string, width:number, fontSize:number) {
export function measureTextHeight(
text: string,
width: number,
fontSize: number
) {
const charHeight = fontSize;
const lineHeight = charHeight * 1.5;
const words = text.split(" ");
@ -319,19 +327,19 @@ export function snakeToNormalCase(str: string) {
.join(" ");
}
export function normalCaseToSnakeCase(str:string){
export function normalCaseToSnakeCase(str: string) {
return str
.split(" ")
.map((word, index) => {
if (index === 0) {
return word[0].toUpperCase() + word.slice(1).toLowerCase();
}
return word.toLowerCase();
})
.join("_");
.split(" ")
.map((word, index) => {
if (index === 0) {
return word[0].toUpperCase() + word.slice(1).toLowerCase();
}
return word.toLowerCase();
})
.join("_");
}
export function roundNumber(x:number, decimals:number) {
export function roundNumber(x: number, decimals: number) {
return Math.round(x * Math.pow(10, decimals)) / Math.pow(10, decimals);
}
@ -345,12 +353,15 @@ export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
}
export function isValidConnection(
{ source, target, sourceHandle, targetHandle }:Connection,
reactFlowInstance:ReactFlowInstance
{ source, target, sourceHandle, targetHandle }: Connection,
reactFlowInstance: ReactFlowInstance
) {
if (
sourceHandle.split('|')[0] === targetHandle.split("|")[0] ||
sourceHandle.split('|').slice(2).some((t) => t === targetHandle.split("|")[0]) ||
sourceHandle.split("|")[0] === targetHandle.split("|")[0] ||
sourceHandle
.split("|")
.slice(2)
.some((t) => t === targetHandle.split("|")[0]) ||
targetHandle.split("|")[0] === "str"
) {
let targetNode = reactFlowInstance.getNode(target).data.node;
@ -375,16 +386,15 @@ export function isValidConnection(
return false;
}
export function removeApiKeys(flow:FlowType):FlowType{
let cleanFLow = _.cloneDeep(flow)
cleanFLow.data.nodes.forEach(node=>{
for(const key in node.data.node.template)
{
if(key.includes('api')){
console.log(node.data.node.template[key])
node.data.node.template[key].value = ''
export function removeApiKeys(flow: FlowType): FlowType {
let cleanFLow = _.cloneDeep(flow);
cleanFLow.data.nodes.forEach((node) => {
for (const key in node.data.node.template) {
if (key.includes("api")) {
console.log(node.data.node.template[key]);
node.data.node.template[key].value = "";
}
}
})
return cleanFLow
}
});
return cleanFLow;
}