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

Merge branch 'SessionManagment' of personal:langflow-ai/langflow into SessionManagment

Browse source
This commit is contained in:
anovazzi1 2024-06-03 22:17:15 -03:00
commit fb27528a00
13 changed files with 212 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/frontend/package-lock.json generated
View file

@ -26,6 +26,7 @@
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toggle": "^1.0.3",
"@radix-ui/react-tooltip": "^1.0.6",
"@tabler/icons-react": "^2.32.0",
"@tailwindcss/forms": "^0.5.6",
@ -2761,6 +2762,31 @@
}
}
},
"node_modules/@radix-ui/react-toggle": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz",
"integrity": "sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.1",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-use-controllable-state": "1.0.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-tooltip": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz",

1
src/frontend/package.json
View file

@ -21,6 +21,7 @@
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toggle": "^1.0.3",
"@radix-ui/react-tooltip": "^1.0.6",
"@tabler/icons-react": "^2.32.0",
"@tailwindcss/forms": "^0.5.6",

3
src/frontend/src/components/tableComponent/components/tableToolbar.tsx/index.tsx Normal file
View file

@ -0,0 +1,3 @@
export default function TableToolbar({ children }): JSX.Element {
return <div className="align-center flex transition-all">{children}</div>;
}

104
src/frontend/src/components/tableComponent/index.tsx
View file

@ -1,7 +1,7 @@
import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
import { AgGridReact, AgGridReactProps } from "ag-grid-react";
import { ElementRef, forwardRef } from "react";
import { ElementRef, forwardRef, useRef } from "react";
import {
DEFAULT_TABLE_ALERT_MSG,
DEFAULT_TABLE_ALERT_TITLE,
@ -11,6 +11,9 @@ import "../../style/ag-theme-shadcn.css"; // Custom CSS applied to the grid
import { cn, toTitleCase } from "../../utils/utils";
import ForwardedIconComponent from "../genericIconComponent";
import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
import { Toggle } from "../ui/toggle";
import ShadTooltip from "../shadTooltipComponent";
import resetGrid from "./utils/reset-grid-columns";
interface TableComponentProps extends AgGridReactProps {
columnDefs: NonNullable<AgGridReactProps["columnDefs"]>;
@ -32,27 +35,45 @@ const TableComponent = forwardRef<
},
ref,
) => {
const gridRef = useRef(null);
const realRef = ref?.current ? ref : gridRef;
const dark = useDarkStore((state) => state.dark);
if (props.rowData.length === 0) {
return (
<div className="flex h-full w-full items-center justify-center rounded-md border">
<Alert variant={"default"} className="w-fit">
<ForwardedIconComponent
name="AlertCircle"
className="h-5 w-5 text-primary"
/>
<AlertTitle>{alertTitle}</AlertTitle>
<AlertDescription>{alertDescription}</AlertDescription>
</Alert>
</div>
);
}
const colDef = props.columnDefs.map((col, index) => {
const makeLastColumnNonResizable = (columnDefs) => {
columnDefs.forEach((colDef, index) => {
colDef.resizable = index !== columnDefs.length - 1;
});
return columnDefs;
};
const onGridReady = (params) => {
realRef.current = params;
const updatedColumnDefs = makeLastColumnNonResizable([
...props.columnDefs,
]);
params.api.setColumnDefs(updatedColumnDefs);
if (props.onGridReady) props.onGridReady(params);
};
const onColumnMoved = (params) => {
const updatedColumnDefs = makeLastColumnNonResizable(
params.columnApi.getAllGridColumns().map((col) => col.getColDef()),
);
params.api.setColumnDefs(updatedColumnDefs);
if (props.onColumnMoved) props.onColumnMoved(params);
};
let colDef = props.columnDefs.map((col, index) => {
let newCol = {
...col,
headerName: toTitleCase(col.headerName),
};
if (index === props.columnDefs.length - 1) {
newCol = {
...col,
resizable: false,
};
}
if (props.onSelectionChanged && index === 0) {
newCol = {
...newCol,
@ -73,12 +94,28 @@ const TableComponent = forwardRef<
}
return newCol;
});
let rowDef = props.rowData;
if (props.rowData.length === 0) {
return (
<div className="flex h-full w-full items-center justify-center rounded-md border">
<Alert variant={"default"} className="w-fit">
<ForwardedIconComponent
name="AlertCircle"
className="h-5 w-5 text-primary"
/>
<AlertTitle>{alertTitle}</AlertTitle>
<AlertDescription>{alertDescription}</AlertDescription>
</Alert>
</div>
);
}
return (
<div
className={cn(
dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
"ag-theme-shadcn flex h-full flex-col",
"relative",
)} // applying the grid theme
>
<AgGridReact
@ -88,8 +125,41 @@ const TableComponent = forwardRef<
minWidth: 100,
}}
columnDefs={colDef}
ref={ref}
rowData={rowDef}
ref={realRef}
pagination={true}
onGridReady={onGridReady}
onColumnMoved={onColumnMoved}
/>
{/*<div className="absolute left-2 bottom-1 cursor-pointer">
<div
className="flex h-10 items-center justify-center px-2 pl-3 rounded-md border border-ring/60 text-sm text-[#bccadc] ring-offset-background placeholder:text-muted-foreground hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
onClick={() => setShow(!show)}
>
<ForwardedIconComponent name="Settings"></ForwardedIconComponent>
<ForwardedIconComponent name={show ? "ChevronLeft" : "ChevronRight"} className="transition-all"></ForwardedIconComponent>
</div>
</div>*/}
<div
className={cn(
"absolute bottom-1 left-2 rounded-md border border-border transition-all",
)}
>
<ShadTooltip content={"Reset Columns"} styleClasses="z-50">
<Toggle
className="h-10 w-10"
onClick={() => {
resetGrid(realRef);
}}
>
<ForwardedIconComponent
name="RotateCcw"
strokeWidth={2}
className="h-8 w-8 text-[#bccadc]"
></ForwardedIconComponent>
</Toggle>
</ShadTooltip>
</div>
</div>
);
},

5
src/frontend/src/components/tableComponent/utils/reset-grid-columns.tsx Normal file
View file

@ -0,0 +1,5 @@
export default function resetGrid(ref) {
if (ref?.current && ref?.current.api) {
ref.current.api.resetColumnState();
}
}

45
src/frontend/src/components/ui/toggle.tsx Normal file
View file

@ -0,0 +1,45 @@
"use client";
import * as React from "react";
import * as TogglePrimitive from "@radix-ui/react-toggle";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../utils/utils";
const toggleVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-transparent",
outline:
"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
},
size: {
default: "h-10 px-3",
sm: "h-9 px-2.5",
lg: "h-11 px-5",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
},
);
const Toggle = React.forwardRef<
React.ElementRef<typeof TogglePrimitive.Root>,
React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
VariantProps<typeof toggleVariants>
>(({ className, variant, size, ...props }, ref) => (
<TogglePrimitive.Root
ref={ref}
className={cn(toggleVariants({ variant, size, className }))}
{...props}
/>
));
Toggle.displayName = TogglePrimitive.Root.displayName;
export { Toggle, toggleVariants };

4
src/frontend/src/modals/IOModal/components/chatView/index.tsx
View file

@ -138,7 +138,7 @@ export default function ChatView({
function updateChat(
chat: ChatMessageType,
message: string,
stream_url?: string
stream_url?: string,
) {
// if (message === "") return;
chat.message = message;
@ -177,7 +177,7 @@ export default function ChatView({
name="Eraser"
className={classNames(
"h-5 w-5 transition-all duration-100",
lockChat ? "animate-pulse text-primary" : "text-primary"
lockChat ? "animate-pulse text-primary" : "text-primary",
)}
aria-hidden="true"
/>

2
src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx
View file

@ -5,7 +5,7 @@ const useRemoveMessages = (
setSelectedRows,
setSuccessData,
setErrorData,
selectedRows
selectedRows,
) => {
const deleteMessages = useMessagesStore((state) => state.removeMessages);

51
src/frontend/src/stores/flowStore.ts
View file

@ -79,7 +79,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
updateFlowPool: (
nodeId: string,
data: FlowPoolObjectType | ChatOutputType | chatInputType,
buildId?: string
buildId?: string,
) => {
let newFlowPool = cloneDeep({ ...get().flowPool });
if (!newFlowPool[nodeId]) {
@ -170,7 +170,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
flowsManager.autoSaveCurrentFlow(
newChange,
newEdges,
get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 },
);
}
},
@ -186,7 +186,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
flowsManager.autoSaveCurrentFlow(
get().nodes,
newChange,
get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 },
);
}
},
@ -204,7 +204,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
return newChange;
}
return node;
})
}),
);
},
getNode: (id: string) => {
@ -215,8 +215,8 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
get().nodes.filter((node) =>
typeof nodeId === "string"
? node.id !== nodeId
: !nodeId.includes(node.id)
)
: !nodeId.includes(node.id),
),
);
},
deleteEdge: (edgeId) => {
@ -224,8 +224,8 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
get().edges.filter((edge) =>
typeof edgeId === "string"
? edge.id !== edgeId
: !edgeId.includes(edge.id)
)
: !edgeId.includes(edge.id),
),
);
},
paste: (selection, position) => {
@ -291,7 +291,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
let source = idsMap[edge.source];
let target = idsMap[edge.target];
const sourceHandleObject: sourceHandleType = scapeJSONParse(
edge.sourceHandle!
edge.sourceHandle!,
);
let sourceHandle = scapedJSONStringfy({
...sourceHandleObject,
@ -301,7 +301,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
edge.data.sourceHandle = sourceHandleObject;
const targetHandleObject: targetHandleType = scapeJSONParse(
edge.targetHandle!
edge.targetHandle!,
);
let targetHandle = scapedJSONStringfy({
...targetHandleObject,
@ -322,7 +322,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
className: "stroke-gray-900 ",
selected: false,
},
newEdges.map((edge) => ({ ...edge, selected: false }))
newEdges.map((edge) => ({ ...edge, selected: false })),
);
});
get().setEdges(newEdges);
@ -341,10 +341,10 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
});
const newNodes = get().nodes.filter(
(node) => !nodesIdsSelected.includes(node.id)
(node) => !nodesIdsSelected.includes(node.id),
);
const newEdges = get().edges.filter(
(edge) => !edgesIdsSelected.includes(edge.id)
(edge) => !edgesIdsSelected.includes(edge.id),
);
set({ nodes: newNodes, edges: newEdges });
@ -402,7 +402,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
style: { stroke: "#555" },
className: "stroke-foreground stroke-connection",
},
oldEdges
oldEdges,
);
return newEdges;
@ -412,7 +412,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
.autoSaveCurrentFlow(
get().nodes,
newEdges,
get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 },
);
},
unselectAll: () => {
@ -443,7 +443,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
function validateSubgraph(nodes: string[]) {
const errorsObjs = validateNodes(
get().nodes.filter((node) => nodes.includes(node.id)),
get().edges
get().edges,
);
const errors = errorsObjs.map((obj) => obj.errors).flat();
@ -462,14 +462,14 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
function handleBuildUpdate(
vertexBuildData: VertexBuildTypeAPI,
status: BuildStatus,
runId: string
runId: string,
) {
console.log("handleBuildUpdate", vertexBuildData, status, runId);
if (vertexBuildData && vertexBuildData.inactivated_vertices) {
get().removeFromVerticesBuild(vertexBuildData.inactivated_vertices);
get().updateBuildStatus(
vertexBuildData.inactivated_vertices,
BuildStatus.INACTIVE
BuildStatus.INACTIVE,
);
}
@ -485,14 +485,15 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
// next_vertices_ids should be next_vertices_ids without the inactivated vertices
const next_vertices_ids = vertexBuildData.next_vertices_ids.filter(
(id) => !vertexBuildData.inactivated_vertices?.includes(id)
(id) => !vertexBuildData.inactivated_vertices?.includes(id),
);
const top_level_vertices = vertexBuildData.top_level_vertices.filter(
(vertex) => !vertexBuildData.inactivated_vertices?.includes(vertex.id)
(vertex) =>
!vertexBuildData.inactivated_vertices?.includes(vertex.id),
);
const nextVertices: VertexLayerElementType[] = zip(
next_vertices_ids,
top_level_vertices
top_level_vertices,
).map(([id, reference]) => ({ id: id!, reference }));
const newLayers = [
@ -514,7 +515,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
get().addDataToFlowPool(
{ ...vertexBuildData, buildId: runId },
vertexBuildData.id
vertexBuildData.id,
);
useFlowStore.getState().updateBuildStatus([vertexBuildData.id], status);
@ -523,7 +524,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
const newFlowBuildStatus = { ...get().flowBuildStatus };
// filter out the vertices that are not status
const verticesToUpdate = verticesIds?.filter(
(id) => newFlowBuildStatus[id]?.status !== BuildStatus.BUILT
(id) => newFlowBuildStatus[id]?.status !== BuildStatus.BUILT,
);
if (verticesToUpdate) {
@ -588,7 +589,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
verticesLayers: VertexLayerElementType[][];
runId: string;
verticesToRun: string[];
} | null
} | null,
) => {
set({ verticesBuild: vertices });
},
@ -613,7 +614,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
// that are going to be built
verticesIds: get().verticesBuild!.verticesIds.filter(
// keep the vertices that are not in the list of vertices to remove
(vertex) => !vertices.includes(vertex)
(vertex) => !vertices.includes(vertex),
),
},
});

4
src/frontend/src/style/classes.css
View file

@ -15,6 +15,10 @@ pre {
font-family: inherit;
}
.ag-paging-page-size {
display: none;
}
.react-flow__pane {
cursor: default;
}

14
src/frontend/src/types/zustand/flow/index.ts
View file

@ -78,7 +78,7 @@ export type FlowStoreType = {
state:
| FlowState
| undefined
| ((oldState: FlowState | undefined) => FlowState)
| ((oldState: FlowState | undefined) => FlowState),
) => void;
nodes: Node[];
edges: Edge[];
@ -86,11 +86,11 @@ export type FlowStoreType = {
onEdgesChange: OnEdgesChange;
setNodes: (
update: Node[] | ((oldState: Node[]) => Node[]),
skipSave?: boolean
skipSave?: boolean,
) => void;
setEdges: (
update: Edge[] | ((oldState: Edge[]) => Edge[]),
skipSave?: boolean
skipSave?: boolean,
) => void;
setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void;
getNode: (id: string) => Node | undefined;
@ -98,12 +98,12 @@ export type FlowStoreType = {
deleteEdge: (edgeId: string | Array<string>) => void;
paste: (
selection: { nodes: any; edges: any },
position: { x: number; y: number; paneX?: number; paneY?: number }
position: { x: number; y: number; paneX?: number; paneY?: number },
) => void;
lastCopiedSelection: { nodes: any; edges: any } | null;
setLastCopiedSelection: (
newSelection: { nodes: any; edges: any } | null,
isCrop?: boolean
isCrop?: boolean,
) => void;
cleanFlow: () => void;
setFilterEdge: (newState) => void;
@ -127,7 +127,7 @@ export type FlowStoreType = {
verticesLayers: VertexLayerElementType[][];
runId: string;
verticesToRun: string[];
} | null
} | null,
) => void;
addToVerticesBuild: (vertices: string[]) => void;
removeFromVerticesBuild: (vertices: string[]) => void;
@ -145,7 +145,7 @@ export type FlowStoreType = {
updateFlowPool: (
nodeId: string,
data: FlowPoolObjectType | ChatOutputType | chatInputType,
buildId?: string
buildId?: string,
) => void;
getNodePosition: (nodeId: string) => { x: number; y: number };
};

2
src/frontend/src/utils/storeUtils.ts
View file

@ -7,7 +7,7 @@ export default function cloneFLowWithParent(
flow: FlowType,
parent: string,
is_component: boolean,
keepId = false
keepId = false,
) {
let childFLow = cloneDeep(flow);
childFLow.parent = parent;

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

@ -143,6 +143,8 @@ import {
X,
XCircle,
Zap,
RotateCcw,
Settings,
} from "lucide-react";
import { FaApple, FaDiscord, FaGithub } from "react-icons/fa";
import { AWSIcon } from "../icons/AWS";
@ -526,4 +528,6 @@ export const nodeIconsLucide: iconsType = {
FolderPlusIcon,
FolderIcon,
Discord: FaDiscord,
RotateCcw,
Settings,
};