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

Merge branch 'clean' into dev

Browse source
This commit is contained in:
anovazzi1 2023-03-05 14:47:11 -03:00
commit 334597f8a5
15 changed files with 170 additions and 280 deletions
Download patch file Download diff file Expand all files Collapse all files

72
langflow/frontend/src/App.tsx
View file

@ -8,7 +8,6 @@ import SuccessAlert from "./alerts/success";
import ExtraSidebar from "./components/ExtraSidebarComponent";
import { alertContext } from "./contexts/alertContext";
import { locationContext } from "./contexts/locationContext";
import Sidebar from "./components/SidebarComponent";
import Header from "./components/HeaderComponent";
import TabsManagerComponent from "./pages/FlowPage/components/tabsManagerComponent";
@ -36,38 +35,45 @@ export default function App() {
setSuccessOpen,
} = useContext(alertContext);
const [alertsList, setAlertsList] = useState<Array<{type:string,data:{title:string,list?:Array<string>,link?:string},id:string}>>([]);
// Initialize state variable for the list of alerts
const [alertsList, setAlertsList] = useState<Array<{type:string,data:{title:string,list?:Array<string>,link?:string},id:string}>>([]);
useEffect(() => {
if (errorOpen && errorData) {
setErrorOpen(false);
setAlertsList((old) => {
let newAlertsList = [
...old,
{ type: "error", data: _.cloneDeep(errorData), id: _.uniqueId() },
];
return newAlertsList;
});
} else if (noticeOpen && noticeData) {
setNoticeOpen(false);
setAlertsList((old) => {
let newAlertsList = [
...old,
{ type: "notice", data: _.cloneDeep(noticeData), id: _.uniqueId() },
];
return newAlertsList;
});
} else if (successOpen && successData) {
setSuccessOpen(false);
setAlertsList((old) => {
let newAlertsList = [
...old,
{ type: "success", data: _.cloneDeep(successData), id: _.uniqueId() },
];
return newAlertsList;
});
}
}, [_, errorData, errorOpen, noticeData, noticeOpen, setErrorOpen, setNoticeOpen, setSuccessOpen, successData, successOpen]);
// Use effect hook to update alertsList when a new alert is added
useEffect(() => {
// If there is an error alert open with data, add it to the alertsList
if (errorOpen && errorData) {
setErrorOpen(false);
setAlertsList((old) => {
let newAlertsList = [
...old,
{ type: "error", data: _.cloneDeep(errorData), id: _.uniqueId() },
];
return newAlertsList;
});
}
// If there is a notice alert open with data, add it to the alertsList
else if (noticeOpen && noticeData) {
setNoticeOpen(false);
setAlertsList((old) => {
let newAlertsList = [
...old,
{ type: "notice", data: _.cloneDeep(noticeData), id: _.uniqueId() },
];
return newAlertsList;
});
}
// If there is a success alert open with data, add it to the alertsList
else if (successOpen && successData) {
setSuccessOpen(false);
setAlertsList((old) => {
let newAlertsList = [
...old,
{ type: "success", data: _.cloneDeep(successData), id: _.uniqueId() },
];
return newAlertsList;
});
}
}, [_, errorData, errorOpen, noticeData, noticeOpen, setErrorOpen, setNoticeOpen, setSuccessOpen, successData, successOpen]);
const removeAlert = (id: string) => {
setAlertsList((prevAlertsList) =>
@ -82,9 +88,7 @@ export default function App() {
<Header></Header>
</div>
<div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
<Sidebar />
<ExtraSidebar />
{/* Main area */}
<main className="min-w-0 flex-1 border-t border-gray-200 dark:border-gray-700 flex">
{/* Primary column */}

6
langflow/frontend/src/components/ExtraSidebarComponent/index.tsx
View file

@ -25,12 +25,6 @@ export default function ExtraSidebar() {
<span className="text-gray-900 dark:text-white text-lg ml-2 font-semibold">
{extraNavigation.title}
</span>
<button
className="text-gray-400 flex-shrink-0 inline-flex items-center justify-center rounded-lg"
onClick={() => setIsStackedOpen(false)}
>
<ChevronLeftIcon className="h-6 w-6"></ChevronLeftIcon>
</button>
</div>
<div className="flex flex-grow flex-col w-full">
{extraNavigation.options ? (

20
langflow/frontend/src/components/HeaderComponent/index.tsx
View file

@ -4,7 +4,6 @@ import {
MoonIcon,
SunIcon,
} from '@heroicons/react/24/outline'
import Breadcrumb from '../breadcrumbComponent'
import { alertContext } from '../../contexts/alertContext'
import { useLayer } from 'react-laag'
import AlertDropdown from '../../alerts/alertDropDown'
@ -25,25 +24,8 @@ export default function Header(){
const {dark, setDark} = useContext(darkContext);
return (
<header className="relative flex h-16 w-full shrink-0 items-center bg-white dark:bg-gray-800">
{/* Logo area */}
<div className="static shrink-0">
<a
href="/"
className="flex h-16 items-center justify-center bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-600 w-20"
>
<img
className="h-8 w-auto"
src="https://tailwindui.com/img/logos/mark.svg?color=white"
alt="Your Company"
/>
</a>
</div>
{/* Desktop nav area */}
<div className="flex min-w-0 flex-1 items-center justify-between">
<div className="min-w-0 flex-1 ml-5">
<Breadcrumb />
</div>
<div className="flex min-w-0 flex-1 flex-row-reverse items-center justify-between">
<div className="ml-10 flex shrink-0 items-center space-x-10 pr-4">
<div className="flex items-center space-x-8">
<span className="inline-flex gap-6">

66
langflow/frontend/src/components/SidebarComponent/index.tsx
View file

@ -1,66 +0,0 @@
import SidebarButton from "./sidebarButton";
import { BsPlusSquare } from "react-icons/bs";
import { classNames } from "../../utils";
import { ChevronRightIcon } from "@heroicons/react/24/outline";
import { useContext } from "react";
import { sidebarNavigation } from "../../entities/sidebarNav";
import { locationContext } from "../../contexts/locationContext";
export default function Sidebar() {
let { showSideBar, isStackedOpen, setIsStackedOpen } =
useContext(locationContext);
let current = false;
return (
<div
className={
(showSideBar ? "w-20" : "w-0") +
" h-full overflow-hidden flex-col transition-all duration-500"
}
>
<div className="w-20 h-full">
<nav
aria-label="Sidebar"
className="h-full overflow-y-auto bg-gray-800 dark:bg-gray-900"
>
<div className="flex flex-col h-full justify-between">
<div className="relative flex w-20 flex-col space-y-3 p-3">
{sidebarNavigation.map((item, index) => (
<SidebarButton item={item} key={index}></SidebarButton>
))}
</div>
<div className="relative flex w-20 flex-col items-center space-y-3 align-items: center;">
<button
key="New Project"
onClick={() => {
}}
className={classNames(
current
? "bg-gray-900 text-white"
: "text-gray-400 hover:bg-gray-700",
"flex-shrink-0 inline-flex items-center justify-center h-14 w-14 rounded-lg"
)}
>
<span className="sr-only">"New Project"</span>
<BsPlusSquare className="h-8 w-8" aria-hidden="true" />
</button>
<div
className={` ${
isStackedOpen ? "h-0" : "h-12"
} overflow-hidden transition-all duration-500`}
>
<div className="h-10">
<button
className="text-gray-400 flex-shrink-0 inline-flex items-center justify-center rounded-lg"
onClick={() => setIsStackedOpen(true)}
>
<ChevronRightIcon className="h-6 w-6"></ChevronRightIcon>
</button>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
);
}

24
langflow/frontend/src/components/SidebarComponent/sidebarButton/index.tsx
View file

@ -1,24 +0,0 @@
import { classNames } from "../../../utils"
import { Link } from "react-router-dom"
import { useContext } from "react"
import { locationContext } from "../../../contexts/locationContext";
import { sidebarNavigationItemType } from "../../../types/entities";
export default function SidebarButton({item}:{item:sidebarNavigationItemType}){
let {current}= useContext(locationContext);
return (
<>
<Link
key={item.name}
to={item.href}
className={classNames(
item.href.split("/")[1]=== current[3]? 'bg-gray-900 text-white' : 'text-gray-400 hover:bg-gray-700',
'flex-shrink-0 inline-flex items-center justify-center h-14 w-14 rounded-lg'
)}
>
<span className="sr-only">{item.name}</span>
<item.icon className="h-6 w-6" aria-hidden="true" />
</Link>
</>
)
}

55
langflow/frontend/src/components/breadcrumbComponent/index.tsx
View file

@ -1,55 +0,0 @@
import { ChevronRightIcon, HomeIcon } from '@heroicons/react/20/solid'
import { useContext } from 'react';
import { Link } from 'react-router-dom'
import { locationContext } from '../../contexts/locationContext';
const breadcrumbNameMap: { [key: string]: string } = {
'/settings': 'Settings',
'/settings/general': 'General',
'/settings/general/main': 'Main',
'/table': 'Table',
};
function getPages(atual:string[]){
let pages = [];
for(let i = 2; i <= atual.length; i++){
let to = '/' + atual.slice(1,i).join('/');
pages.push({ name: breadcrumbNameMap[to], href: to })
}
return (pages);
}
export default function Breadcrumb(){
let {current} = useContext(locationContext);
return (
<div>
<nav className="flex ml-2" aria-label="Breadcrumb">
<ol className="flex items-center space-x-4">
<li>
<div>
<Link to='/' className="text-gray-400 hover:text-gray-500">
<HomeIcon className="h-5 w-5 flex-shrink-0" aria-hidden="true" />
<span className="sr-only">Home</span>
</Link>
</div>
</li>
{getPages(current).map((page) => (
<li key={page.href}>
<div className="flex items-center">
<ChevronRightIcon className="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
<a
href={page.href}
className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
>
{page.name}
</a>
</div>
</li>
))}
</ol>
</nav>
</div>
)
}

8
langflow/frontend/src/components/chatComponent/index.tsx
View file

@ -105,14 +105,14 @@ export default function Chat({flow, reactFlowInstance }:ChatType) {
{chatHistory.map((c, i) => (
<div key={i}>
{!c.isSend ? (
<div className="w-full text-end">
<div style={{backgroundColor: nodeColors['chat']}} className="text-start inline-block text-white rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tr-none">
<div className="w-full text-start">
<div style={{backgroundColor: nodeColors['chat']}} className="text-start inline-block text-white rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tl-none">
{c.message}
</div>
</div>
) : (
<div className="w-full text-start">
<div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-gray-700 bg-gray-200 font-normal rounded-tl-none">
<div className="w-full text-end">
<div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-gray-700 bg-gray-200 font-normal rounded-tr-none">
{c.message}
</div>
</div>

90
langflow/frontend/src/contexts/alertContext.tsx
View file

@ -73,52 +73,68 @@ export function AlertProvider({ children }:{children:ReactNode}) {
return newNotificationList;
});
};
function setErrorData(newState: { title: string; list?: Array<string> }) {
setErrorDataState(newState);
setErrorOpen(true);
if (newState.title) {
setNotificationCenter(true);
pushNotificationList({
type: "error",
title: newState.title,
list: newState.list,
id: _.uniqueId(),
});
}
/**
* Sets the error data state, opens the error dialog and pushes the new error notification to the notification list
* @param newState An object containing the new error data, including title and optional list of error messages
*/
function setErrorData(newState: { title: string; list?: Array<string> }) {
setErrorDataState(newState);
setErrorOpen(true);
if (newState.title) {
setNotificationCenter(true);
pushNotificationList({
type: "error",
title: newState.title,
list: newState.list,
id: _.uniqueId(),
});
}
function setNoticeData(newState: { title: string; link?: string }) {
setNoticeDataState(newState);
setNoticeOpen(true);
if (newState.title) {
setNotificationCenter(true);
pushNotificationList({
type: "notice",
title: newState.title,
link: newState.link,
id: _.uniqueId(),
});
}
}
/**
* Sets the state of the notice data and opens the notice modal, also adds a new notice to the notification center if the title is defined.
* @param newState An object containing the title of the notice and optionally a link.
*/
function setNoticeData(newState: { title: string; link?: string }) {
setNoticeDataState(newState);
setNoticeOpen(true);
if (newState.title) {
// Add new notice to notification center
setNotificationCenter(true);
pushNotificationList({
type: "notice",
title: newState.title,
link: newState.link,
id: _.uniqueId(),
});
}
function setSuccessData(newState: { title: string }) {
setSuccessDataState(newState);
setSuccessOpen(true);
if (newState.title) {
setNotificationCenter(true);
pushNotificationList({
type: "success",
title: newState.title,
id: _.uniqueId(),
});
}
}
/**
* Update the success data state and show a success alert notification.
* @param newState - A state object with a "title" property to set in the success data state.
*/
function setSuccessData(newState: { title: string }) {
setSuccessDataState(newState); // update the success data state with the provided new state
setSuccessOpen(true); // open the success alert
// If the new state has a "title" property, add a new success notification to the list
if (newState.title) {
setNotificationCenter(true); // show the notification center
pushNotificationList({ // add the new notification to the list
type: "success",
title: newState.title,
id: _.uniqueId(),
});
}
}
function clearNotificationList() {
setNotificationList([]);
}
function removeFromNotificationList(index: string) {
// set the notification list to a new array that filters out the alert with the matching id
setNotificationList((prevAlertsList) =>
prevAlertsList.filter((alert) => alert.id !== index)
prevAlertsList.filter((alert) => alert.id !== index)
);
}
}
return (
<alertContext.Provider
value={{

47
langflow/frontend/src/contexts/tabsContext.tsx
View file

@ -1,10 +1,8 @@
import { createContext, useEffect, useState, useRef, ReactNode } from "react";
import {FlowType} from "../types/flow"
import { FlowType } from "../types/flow";
import { TabsContextType } from "../types/tabs";
const TabsContextInitialValue:TabsContextType = {
const TabsContextInitialValue: TabsContextType = {
tabIndex: 0,
setTabIndex: (index: number) => {},
flows: [],
@ -20,7 +18,7 @@ export const TabsContext = createContext<TabsContextType>(
TabsContextInitialValue
);
export function TabsProvider({ children }:{children:ReactNode}) {
export function TabsProvider({ children }: { children: ReactNode }) {
const [tabIndex, setTabIndex] = useState(0);
const [flows, setFlows] = useState<Array<FlowType>>([]);
const [id, setId] = useState(0);
@ -31,6 +29,7 @@ export function TabsProvider({ children }:{children:ReactNode}) {
return newNodeId.current;
}
useEffect(() => {
//save tabs locally
if (flows.length !== 0)
window.localStorage.setItem(
"tabsData",
@ -39,6 +38,7 @@ export function TabsProvider({ children }:{children:ReactNode}) {
}, [flows, id, tabIndex, newNodeId]);
useEffect(() => {
//get tabs locally saved
let cookie = window.localStorage.getItem("tabsData");
if (cookie) {
let cookieObject = JSON.parse(cookie);
@ -49,27 +49,47 @@ export function TabsProvider({ children }:{children:ReactNode}) {
}
}, []);
/**
* Downloads the current flow as a JSON file
*/
function downloadFlow() {
// create a data URI with the current flow data
const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
JSON.stringify(flows[tabIndex])
)}`;
// create a link element and set its properties
const link = document.createElement("a");
link.href = jsonString;
link.download = `${flows[tabIndex].name}.json`;
// simulate a click on the link element to trigger the download
link.click();
}
/**
* Creates a file input and listens to a change event to upload a JSON flow file.
* If the file type is application/json, the file is read and parsed into a JSON object.
* The resulting JSON object is passed to the addFlow function.
*/
function uploadFlow() {
// create a file input
const input = document.createElement("input");
input.type = "file";
// add a change event listener to the file input
input.onchange = (e: Event) => {
// check if the file type is application/json
if ((e.target as HTMLInputElement).files[0].type === "application/json") {
// get the file from the file input
const file = (e.target as HTMLInputElement).files[0];
// read the file as text
file.text().then((text) => {
// parse the text into a JSON object
addFlow(JSON.parse(text));
});
}
};
// trigger the file input click event to open the file dialog
input.click();
}
/**
@ -94,21 +114,38 @@ export function TabsProvider({ children }:{children:ReactNode}) {
return newFlows;
});
}
/**
* Add a new flow to the list of flows.
* @param flow Optional flow to add.
*/
function addFlow(flow?: FlowType) {
// Get data from the flow or set it to null if there's no flow provided.
const data = flow?.data ? flow.data : null;
// Create a new flow with a default name if no flow is provided.
let newFlow: FlowType = {
name: flow ? flow.name : "flow" + id,
id: id.toString(),
data,
chat: flow ? flow.chat : [],
};
// Increment the ID counter.
setId((old) => old + 1);
// Add the new flow to the list of flows.
setFlows((prevState) => {
const newFlows = [...prevState, newFlow];
return newFlows;
});
// Set the tab index to the new flow.
setTabIndex(flows.length);
}
/**
* Updates an existing flow with new data
* @param newFlow - The new flow object containing the updated data
*/
function updateFlow(newFlow: FlowType) {
setFlows((prevState) => {
const newFlows = [...prevState];

4
langflow/frontend/src/entities/apiEnum.ts
View file

@ -1,4 +0,0 @@
export enum apiEnum
{
PromptTemplate="PromptTemplate"
}

13
langflow/frontend/src/entities/sidebarNav.ts
View file

@ -1,13 +0,0 @@
import {
HomeIcon,
} from '@heroicons/react/24/outline'
export const sidebarNavigation = [
{ name: 'Home', href: '/', icon: HomeIcon, current: true },
// { name: 'Table', href: '/table/', icon: TableCellsIcon, current: false },
// //{ name: 'Train', href: '#', icon: BoltIcon, current: false },
// //{ name: 'Model Details', href: '#', icon: LightBulbIcon, current: false },
// //{ name: 'Deploy', href: '#', icon: RocketLaunchIcon, current: false },
// { name: 'Settings', href: '/settings/', icon: Cog6ToothIcon, current: false },
]

11
langflow/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -16,19 +16,26 @@ export default function ExtraSidebar() {
useEffect(() => {
async function getTypes():Promise<void>{
// Define an object with initial values for the types.
const initialValue:{[char: string]: string} = {
str: "advanced",
bool: "advanced",
chatOutput: "chat",
chatInput: "chat",
}
// Make an asynchronous API call to retrieve all data.
let result = await getAll();
// Update the state of the component with the retrieved data.
setData(result.data);
// Set the types by reducing over the keys of the result data and updating the accumulator.
setTypes(
Object.keys(result.data).reduce(
(acc, curr) => {
Object.keys(result.data[curr]).forEach((c:keyof APIKindType) => {
acc[c] = curr;
// Add the base classes to the accumulator as well.
result.data[curr][c].base_classes?.forEach((b) => {
acc[b] = curr;
});
@ -39,11 +46,13 @@ export default function ExtraSidebar() {
)
);
}
// Call the getTypes function.
getTypes();
}, [setTypes]);
function onDragStart(event: React.DragEvent<any>, data:{type:string,node?:APIClassType}) {
//start drag event
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("json", JSON.stringify(data));
}

4
langflow/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
View file

@ -58,10 +58,6 @@ export default function TabComponent({ selected, flow, onClick }:{flow:FlowType,
>
{flow.name}
</span>
{/* <ArrowDownTrayIcon
onClick={() => downloadFlow()}
className="w-4 h-4 hover:text-blue-500 cursor-pointer"
/> */}
</div>
)}
<button

1
langflow/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
View file

@ -7,6 +7,7 @@ import FlowPage from "../..";
export default function TabsManagerComponent() {
const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext);
useEffect(() => {
//create the first flow
if (flows.length === 0) {
addFlow();
}

29
langflow/frontend/src/pages/FlowPage/index.tsx
View file

@ -48,7 +48,6 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
const { setErrorData } = useContext(alertContext);
const [nodes, setNodes, onNodesChange] = useNodesState(
flow.data?.nodes ?? []
);
@ -64,19 +63,18 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [nodes, edges]);
//update flow when tabs change
useEffect(() => {
console.log('oi')
setNodes(flow?.data?.nodes ?? []);
setEdges(flow?.data?.edges ?? []);
if (reactFlowInstance) {
setViewport(flow?.data?.viewport ?? { x: 1, y: 0, zoom: 1 });
}
}, [flow, reactFlowInstance, setEdges, setNodes, setViewport]);
//set extra sidebar
useEffect(() => {
setExtraComponent(<ExtraSidebar />);
setExtraNavigation({ title: "Nodes" });
setExtraNavigation({ title: "Componets" });
}, [setExtraComponent, setExtraNavigation]);
const onEdgesChangeMod = useCallback(
@ -111,24 +109,34 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
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:
@ -146,16 +154,21 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
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]
);
return (
<div className="w-full h-full" ref={reactFlowWrapper}>