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

15
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";
@ -14,9 +10,12 @@ 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);
// event.preventDefault()
if (
(event.key === "K" || event.key === "k") &&
(event.metaKey || event.ctrlKey)
) {
setOpen((oldState) => !oldState);
}
};
document.addEventListener("keydown", handleKeyDown);

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

@ -1,32 +1,35 @@
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>> {
export async function getAll(): Promise<AxiosResponse<APIObjectType>> {
return await axios.get(`/all`);
}
export async function sendAll(data:sendAllProps) {
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 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');
return file.name.endsWith(".json");
});
const contentsPromises = jsonFiles.map(async (file: any) => {
@ -37,4 +40,4 @@ export async function getExamples(): Promise<FlowType[]> {
const contents = await Promise.all(contentsPromises);
return contents;
}
}

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

@ -29,9 +29,8 @@ const nodeTypes = {
var _ = require("lodash");
export default function FlowPage({ flow }:{flow:FlowType}) {
let { updateFlow, incrementNodeId} =
useContext(TabsContext);
export default function FlowPage({ flow }: { flow: FlowType }) {
let { updateFlow, incrementNodeId } = useContext(TabsContext);
const { types, reactFlowInstance, setReactFlowInstance } =
useContext(typesContext);
const reactFlowWrapper = useRef(null);
@ -45,7 +44,7 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
flow.data?.edges ?? []
);
const { setViewport } = useReactFlow();
const edgeUpdateSuccessful = useRef(true)
const edgeUpdateSuccessful = useRef(true);
useEffect(() => {
if (reactFlowInstance && flow) {
@ -69,7 +68,7 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
}, [setExtraComponent, setExtraNavigation]);
const onEdgesChangeMod = useCallback(
(s:EdgeChange[]) => {
(s: EdgeChange[]) => {
onEdgesChange(s);
setNodes((x) => {
let newX = _.cloneDeep(x);
@ -80,7 +79,7 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
);
const onConnect = useCallback(
(params:Connection) => {
(params: Connection) => {
setEdges((eds) =>
addEdge({ ...params, className: "animate-pulse" }, eds)
);
@ -92,13 +91,13 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
[setEdges, setNodes]
);
const onDragOver = useCallback((event:React.DragEvent) => {
const onDragOver = useCallback((event: React.DragEvent) => {
event.preventDefault();
event.dataTransfer.dropEffect = "move";
}, []);
const onDrop = useCallback(
(event:React.DragEvent) => {
(event: React.DragEvent) => {
event.preventDefault();
// Helper function to generate a unique node ID
@ -110,7 +109,9 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
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"));
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 (
@ -128,7 +129,7 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
let newId = getId();
// Create a new node object
const newNode:NodeType = {
const newNode: NodeType = {
id: newId,
type: "genericNode",
position,
@ -153,22 +154,27 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
[incrementNodeId, reactFlowInstance, setErrorData, setNodes]
);
const onDelete = (mynodes) => {
setEdges(edges.filter((ns) => !nodes.some((n) => ns.source === n.id || ns.target === n.id)));
}
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)){
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) {
@ -202,9 +208,8 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
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>
<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} />
</>

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

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

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

46
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={
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;
name: string;
description: string;
viewport: Viewport;
message:string;
message: string;
chatHistory:{message:string,isSend:boolean}[],
chatHistory: { message: string; isSend: boolean }[];
};
export type errorsTypeAPI={function:{errors:Array<string>},imports:{errors:Array<string>}}
export type PromptTypeAPI = {input_variables:Array<string>}
export type errorsTypeAPI = {
function: { errors: Array<string> };
imports: { errors: Array<string> };
};
export type PromptTypeAPI = { input_variables: Array<string> };

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

@ -43,9 +43,9 @@ export type FileComponentType = {
disabled: boolean;
onChange: (value: string[] | string) => void;
value: string;
suffixes:Array<string>;
fileTypes:Array<string>;
onFileChange:(value: string) => void;
suffixes: Array<string>;
fileTypes: Array<string>;
onFileChange: (value: string) => void;
};
export type DisclosureComponentType = {
@ -66,16 +66,20 @@ export type FloatComponentType = {
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;
};

20
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;
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}

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

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

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

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

96
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,7 +327,7 @@ export function snakeToNormalCase(str: string) {
.join(" ");
}
export function normalCaseToSnakeCase(str:string){
export function normalCaseToSnakeCase(str: string) {
return str
.split(" ")
.map((word, index) => {
@ -331,7 +339,7 @@ export function normalCaseToSnakeCase(str:string){
.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;
}