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

format

Browse source
This commit is contained in:
ogabrielluiz 2024-06-10 15:16:49 -03:00
commit 1726561f39
159 changed files with 582 additions and 588 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/backend/base/langflow/api/v1/files.py
View file

@ -110,7 +110,7 @@ async def download_profile_picture(
extension = file_name.split(".")[-1] extension = file_name.split(".")[-1]
config_dir = get_storage_service().settings_service.settings.config_dir config_dir = get_storage_service().settings_service.settings.config_dir
config_path = Path(config_dir) config_path = Path(config_dir)
folder_path = config_path / 'profile_pictures' / folder_name folder_path = config_path / "profile_pictures" / folder_name
content_type = build_content_type_from_extension(extension) content_type = build_content_type_from_extension(extension)
file_content = await storage_service.get_file(flow_id=folder_path, file_name=file_name) file_content = await storage_service.get_file(flow_id=folder_path, file_name=file_name)
return StreamingResponse(BytesIO(file_content), media_type=content_type) return StreamingResponse(BytesIO(file_content), media_type=content_type)
@ -140,7 +140,6 @@ async def list_profile_pictures(storage_service: StorageService = Depends(get_st
raise HTTPException(status_code=500, detail=str(e)) raise HTTPException(status_code=500, detail=str(e))
@router.get("/list/{flow_id}") @router.get("/list/{flow_id}")
async def list_files( async def list_files(
flow_id: UUID = Depends(get_flow_id), storage_service: StorageService = Depends(get_storage_service) flow_id: UUID = Depends(get_flow_id), storage_service: StorageService = Depends(get_storage_service)

6
src/frontend/src/App.tsx
View file

@ -29,10 +29,10 @@ export default function App() {
useTrackLastVisitedPath(); useTrackLastVisitedPath();
const removeFromTempNotificationList = useAlertStore( const removeFromTempNotificationList = useAlertStore(
(state) => state.removeFromTempNotificationList, (state) => state.removeFromTempNotificationList
); );
const tempNotificationList = useAlertStore( const tempNotificationList = useAlertStore(
(state) => state.tempNotificationList, (state) => state.tempNotificationList
); );
const [fetchError, setFetchError] = useState(false); const [fetchError, setFetchError] = useState(false);
const isLoading = useFlowsManagerStore((state) => state.isLoading); const isLoading = useFlowsManagerStore((state) => state.isLoading);
@ -50,7 +50,7 @@ export default function App() {
const refreshVersion = useDarkStore((state) => state.refreshVersion); const refreshVersion = useDarkStore((state) => state.refreshVersion);
const refreshStars = useDarkStore((state) => state.refreshStars); const refreshStars = useDarkStore((state) => state.refreshStars);
const setGlobalVariables = useGlobalVariablesStore( const setGlobalVariables = useGlobalVariablesStore(
(state) => state.setGlobalVariables, (state) => state.setGlobalVariables
); );
const checkHasStore = useStoreStore((state) => state.checkHasStore); const checkHasStore = useStoreStore((state) => state.checkHasStore);
const navigate = useNavigate(); const navigate = useNavigate();

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

@ -98,7 +98,7 @@ export default function ParameterComponent({
debouncedHandleUpdateValues, debouncedHandleUpdateValues,
setNode, setNode,
renderTooltips, renderTooltips,
setIsLoading, setIsLoading
); );
const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass( const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass(
@ -107,7 +107,7 @@ export default function ParameterComponent({
takeSnapshot, takeSnapshot,
setNode, setNode,
updateNodeInternals, updateNodeInternals,
renderTooltips, renderTooltips
); );
const { handleRefreshButtonPress: handleRefreshButtonPressHook } = const { handleRefreshButtonPress: handleRefreshButtonPressHook } =
@ -116,7 +116,7 @@ export default function ParameterComponent({
let disabled = let disabled =
edges.some( edges.some(
(edge) => (edge) =>
edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id), edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id)
) ?? false; ) ?? false;
const handleRefreshButtonPress = async (name, data) => { const handleRefreshButtonPress = async (name, data) => {
@ -129,12 +129,12 @@ export default function ParameterComponent({
handleUpdateValues, handleUpdateValues,
setNode, setNode,
renderTooltips, renderTooltips,
setIsLoading, setIsLoading
); );
const handleOnNewValue = async ( const handleOnNewValue = async (
newValue: string | string[] | boolean | Object[], newValue: string | string[] | boolean | Object[],
skipSnapshot: boolean | undefined = false, skipSnapshot: boolean | undefined = false
): Promise<void> => { ): Promise<void> => {
handleOnNewValueHook(newValue, skipSnapshot); handleOnNewValueHook(newValue, skipSnapshot);
}; };
@ -216,7 +216,7 @@ export default function ParameterComponent({
className={classNames( className={classNames(
left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ", left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ",
"h-3 w-3 rounded-full border-2 bg-background", "h-3 w-3 rounded-full border-2 bg-background",
!showNode ? "mt-0" : "", !showNode ? "mt-0" : ""
)} )}
style={{ style={{
borderColor: color ?? nodeColors.unknown, borderColor: color ?? nodeColors.unknown,
@ -286,7 +286,7 @@ export default function ParameterComponent({
"h-5 w-5 rounded-md", "h-5 w-5 rounded-md",
displayOutputPreview && !unknownOutput displayOutputPreview && !unknownOutput
? " hover:bg-secondary-foreground/5 hover:text-medium-indigo" ? " hover:bg-secondary-foreground/5 hover:text-medium-indigo"
: " cursor-not-allowed text-muted-foreground", : " cursor-not-allowed text-muted-foreground"
)} )}
name={"ScanEye"} name={"ScanEye"}
/> />
@ -336,7 +336,7 @@ export default function ParameterComponent({
} }
className={classNames( className={classNames(
left ? "-ml-0.5" : "-mr-0.5", left ? "-ml-0.5" : "-mr-0.5",
"h-3 w-3 rounded-full border-2 bg-background", "h-3 w-3 rounded-full border-2 bg-background"
)} )}
style={{ borderColor: color ?? nodeColors.unknown }} style={{ borderColor: color ?? nodeColors.unknown }}
onClick={() => setFilterEdge(groupedEdge.current)} onClick={() => setFilterEdge(groupedEdge.current)}

2
src/frontend/src/CustomNodes/GenericNode/components/tooltipRenderComponent/index.tsx
View file

@ -24,7 +24,7 @@ const TooltipRenderComponent = ({ item, index, left }) => {
<span <span
key={index} key={index}
className={classNames( className={classNames(
index > 0 ? "mt-2 flex items-center" : "mt-3 flex items-center", index > 0 ? "mt-2 flex items-center" : "mt-3 flex items-center"
)} )}
> >
<div <div

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

@ -13,19 +13,21 @@ import {
TOOLTIP_OUTDATED_NODE, TOOLTIP_OUTDATED_NODE,
} from "../../constants/constants"; } from "../../constants/constants";
import { BuildStatus } from "../../constants/enums"; import { BuildStatus } from "../../constants/enums";
import { countHandlesFn } from "../helpers/count-handles"; import { postCustomComponent } from "../../controllers/API";
import { getSpecificClassFromBuildStatus } from "../helpers/get-class-from-build-status";
import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent"; import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
import useAlertStore from "../../stores/alertStore"; import useAlertStore from "../../stores/alertStore";
import { useDarkStore } from "../../stores/darkStore"; import { useDarkStore } from "../../stores/darkStore";
import useFlowStore from "../../stores/flowStore"; import useFlowStore from "../../stores/flowStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore"; import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { useShortcutsStore } from "../../stores/shortcuts";
import { useTypesStore } from "../../stores/typesStore"; import { useTypesStore } from "../../stores/typesStore";
import { VertexBuildTypeAPI } from "../../types/api"; import { VertexBuildTypeAPI } from "../../types/api";
import { NodeDataType } from "../../types/flow"; import { NodeDataType } from "../../types/flow";
import { handleKeyDown, scapedJSONStringfy } from "../../utils/reactflowUtils"; import { handleKeyDown, scapedJSONStringfy } from "../../utils/reactflowUtils";
import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils"; import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
import { classNames, cn } from "../../utils/utils"; import { classNames, cn } from "../../utils/utils";
import { countHandlesFn } from "../helpers/count-handles";
import { getSpecificClassFromBuildStatus } from "../helpers/get-class-from-build-status";
import useCheckCodeValidity from "../hooks/use-check-code-validity"; import useCheckCodeValidity from "../hooks/use-check-code-validity";
import useIconNodeRender from "../hooks/use-icon-render"; import useIconNodeRender from "../hooks/use-icon-render";
import useIconStatus from "../hooks/use-icons-status"; import useIconStatus from "../hooks/use-icons-status";
@ -35,8 +37,6 @@ import useValidationStatusString from "../hooks/use-validation-status-string";
import getFieldTitle from "../utils/get-field-title"; import getFieldTitle from "../utils/get-field-title";
import sortFields from "../utils/sort-fields"; import sortFields from "../utils/sort-fields";
import ParameterComponent from "./components/parameterComponent"; import ParameterComponent from "./components/parameterComponent";
import { postCustomComponent } from "../../controllers/API";
import { useShortcutsStore } from "../../stores/shortcuts";
export default function GenericNode({ export default function GenericNode({
data, data,
@ -58,10 +58,10 @@ export default function GenericNode({
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);
const isDark = useDarkStore((state) => state.dark); const isDark = useDarkStore((state) => state.dark);
const buildStatus = useFlowStore( const buildStatus = useFlowStore(
(state) => state.flowBuildStatus[data.id]?.status, (state) => state.flowBuildStatus[data.id]?.status
); );
const lastRunTime = useFlowStore( const lastRunTime = useFlowStore(
(state) => state.flowBuildStatus[data.id]?.timestamp, (state) => state.flowBuildStatus[data.id]?.timestamp
); );
const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot); const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
@ -69,7 +69,7 @@ export default function GenericNode({
const [nodeName, setNodeName] = useState(data.node!.display_name); const [nodeName, setNodeName] = useState(data.node!.display_name);
const [inputDescription, setInputDescription] = useState(false); const [inputDescription, setInputDescription] = useState(false);
const [nodeDescription, setNodeDescription] = useState( const [nodeDescription, setNodeDescription] = useState(
data.node?.description!, data.node?.description!
); );
const [isOutdated, setIsOutdated] = useState(false); const [isOutdated, setIsOutdated] = useState(false);
const [validationStatus, setValidationStatus] = const [validationStatus, setValidationStatus] =
@ -87,7 +87,7 @@ export default function GenericNode({
data.node!, data.node!,
setNode, setNode,
setIsOutdated, setIsOutdated,
updateNodeInternals, updateNodeInternals
); );
const name = nodeIconsLucide[data.type] ? data.type : types[data.type]; const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
@ -118,12 +118,12 @@ export default function GenericNode({
selected: boolean, selected: boolean,
showNode: boolean, showNode: boolean,
buildStatus: BuildStatus | undefined, buildStatus: BuildStatus | undefined,
validationStatus: VertexBuildTypeAPI | null, validationStatus: VertexBuildTypeAPI | null
) => { ) => {
const specificClassFromBuildStatus = getSpecificClassFromBuildStatus( const specificClassFromBuildStatus = getSpecificClassFromBuildStatus(
buildStatus, buildStatus,
validationStatus, validationStatus,
isDark, isDark
); );
const baseBorderClass = getBaseBorderClass(selected); const baseBorderClass = getBaseBorderClass(selected);
@ -132,7 +132,7 @@ export default function GenericNode({
baseBorderClass, baseBorderClass,
nodeSizeClass, nodeSizeClass,
"generic-node-div group/node", "generic-node-div group/node",
specificClassFromBuildStatus, specificClassFromBuildStatus
); );
return names; return names;
}; };
@ -175,7 +175,7 @@ export default function GenericNode({
showNode, showNode,
isEmoji, isEmoji,
nodeIconFragment, nodeIconFragment,
checkNodeIconFragment, checkNodeIconFragment
); );
function countHandles(): void { function countHandles(): void {
@ -288,7 +288,7 @@ export default function GenericNode({
selected, selected,
showNode, showNode,
buildStatus, buildStatus,
validationStatus, validationStatus
)} )}
> >
{data.node?.beta && showNode && ( {data.node?.beta && showNode && (
@ -419,7 +419,7 @@ export default function GenericNode({
} }
title={getFieldTitle( title={getFieldTitle(
data.node?.template!, data.node?.template!,
templateField, templateField
)} )}
info={data.node?.template[templateField].info} info={data.node?.template[templateField].info}
name={templateField} name={templateField}
@ -447,7 +447,7 @@ export default function GenericNode({
proxy={data.node?.template[templateField].proxy} proxy={data.node?.template[templateField].proxy}
showNode={showNode} showNode={showNode}
/> />
), )
)} )}
<ParameterComponent <ParameterComponent
key={scapedJSONStringfy({ key={scapedJSONStringfy({
@ -610,7 +610,7 @@ export default function GenericNode({
!data.node?.description) && !data.node?.description) &&
nameEditable nameEditable
? "font-light italic" ? "font-light italic"
: "", : ""
)} )}
onClick={(e) => { onClick={(e) => {
setInputDescription(true); setInputDescription(true);
@ -672,13 +672,13 @@ export default function GenericNode({
} }
title={getFieldTitle( title={getFieldTitle(
data.node?.template!, data.node?.template!,
templateField, templateField
)} )}
info={data.node?.template[templateField].info} info={data.node?.template[templateField].info}
name={templateField} name={templateField}
tooltipTitle={ tooltipTitle={
data.node?.template[templateField].input_types?.join( data.node?.template[templateField].input_types?.join(
"\n", "\n"
) ?? data.node?.template[templateField].type ) ?? data.node?.template[templateField].type
} }
required={data.node!.template[templateField].required} required={data.node!.template[templateField].required}
@ -705,7 +705,7 @@ export default function GenericNode({
<div <div
className={classNames( className={classNames(
Object.keys(data.node!.template).length < 1 ? "hidden" : "", Object.keys(data.node!.template).length < 1 ? "hidden" : "",
"flex-max-width justify-center", "flex-max-width justify-center"
)} )}
> >
{" "} {" "}

2
src/frontend/src/CustomNodes/helpers/get-class-from-build-status.ts
View file

@ -4,7 +4,7 @@ import { VertexBuildTypeAPI } from "../../types/api";
export const getSpecificClassFromBuildStatus = ( export const getSpecificClassFromBuildStatus = (
buildStatus: BuildStatus | undefined, buildStatus: BuildStatus | undefined,
validationStatus: VertexBuildTypeAPI | null, validationStatus: VertexBuildTypeAPI | null,
isDark: boolean, isDark: boolean
) => { ) => {
let isInvalid = validationStatus && !validationStatus.valid; let isInvalid = validationStatus && !validationStatus.valid;

2
src/frontend/src/CustomNodes/hooks/use-check-code-validity.tsx
View file

@ -6,7 +6,7 @@ const useCheckCodeValidity = (
data: NodeDataType, data: NodeDataType,
templates: { [key: string]: any }, templates: { [key: string]: any },
setIsOutdated: (value: boolean) => void, setIsOutdated: (value: boolean) => void,
types, types
) => { ) => {
useEffect(() => { useEffect(() => {
// This one should run only once // This one should run only once

2
src/frontend/src/CustomNodes/hooks/use-fetch-data-on-mount.tsx
View file

@ -9,7 +9,7 @@ const useFetchDataOnMount = (
handleUpdateValues, handleUpdateValues,
setNode, setNode,
renderTooltips, renderTooltips,
setIsLoading, setIsLoading
) => { ) => {
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);

2
src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx
View file

@ -10,7 +10,7 @@ const useHandleOnNewValue = (
debouncedHandleUpdateValues, debouncedHandleUpdateValues,
setNode, setNode,
renderTooltips, renderTooltips,
setIsLoading, setIsLoading
) => { ) => {
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);

2
src/frontend/src/CustomNodes/hooks/use-handle-node-class.tsx
View file

@ -6,7 +6,7 @@ const useHandleNodeClass = (
takeSnapshot, takeSnapshot,
setNode, setNode,
updateNodeInternals, updateNodeInternals,
renderTooltips, renderTooltips
) => { ) => {
const handleNodeClass = (newNodeClass, code) => { const handleNodeClass = (newNodeClass, code) => {
if (!data.node) return; if (!data.node) return;

4
src/frontend/src/CustomNodes/hooks/use-icon-render.tsx
View file

@ -12,8 +12,8 @@ const useIconNodeRender = (
checkNodeIconFragment: ( checkNodeIconFragment: (
iconColor: string, iconColor: string,
iconName: string, iconName: string,
iconClassName: string, iconClassName: string
) => JSX.Element, ) => JSX.Element
) => { ) => {
const iconNodeRender = useCallback(() => { const iconNodeRender = useCallback(() => {
const iconElement = data?.node?.icon; const iconElement = data?.node?.icon;

2
src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
View file

@ -7,7 +7,7 @@ import { VertexBuildTypeAPI } from "../../types/api";
const useIconStatus = ( const useIconStatus = (
buildStatus: BuildStatus | undefined, buildStatus: BuildStatus | undefined,
validationStatus: VertexBuildTypeAPI | null, validationStatus: VertexBuildTypeAPI | null
) => { ) => {
const renderIconStatus = () => { const renderIconStatus = () => {
if (buildStatus === BuildStatus.BUILDING) { if (buildStatus === BuildStatus.BUILDING) {

4
src/frontend/src/CustomNodes/hooks/use-update-node-code.tsx
View file

@ -7,7 +7,7 @@ const useUpdateNodeCode = (
dataNode: APIClassType, // Define YourNodeType according to your data structure dataNode: APIClassType, // Define YourNodeType according to your data structure
setNode: (id: string, callback: (oldNode) => any) => void, setNode: (id: string, callback: (oldNode) => any) => void,
setIsOutdated: (value: boolean) => void, setIsOutdated: (value: boolean) => void,
updateNodeInternals: (id: string) => void, updateNodeInternals: (id: string) => void
) => { ) => {
const updateNodeCode = useCallback( const updateNodeCode = useCallback(
(newNodeClass: APIClassType, code: string, name: string) => { (newNodeClass: APIClassType, code: string, name: string) => {
@ -30,7 +30,7 @@ const useUpdateNodeCode = (
updateNodeInternals(dataId); updateNodeInternals(dataId);
}, },
[dataId, dataNode, setNode, setIsOutdated, updateNodeInternals], [dataId, dataNode, setNode, setIsOutdated, updateNodeInternals]
); );
return updateNodeCode; return updateNodeCode;

2
src/frontend/src/CustomNodes/utils/get-field-title.tsx
View file

@ -2,7 +2,7 @@ import { APITemplateType } from "../../types/api";
export default function getFieldTitle( export default function getFieldTitle(
template: APITemplateType, template: APITemplateType,
templateField: string, templateField: string
): string { ): string {
return template[templateField].display_name return template[templateField].display_name
? template[templateField].display_name! ? template[templateField].display_name!

6
src/frontend/src/alerts/alertDropDown/index.tsx
View file

@ -16,13 +16,13 @@ export default function AlertDropdown({
}: AlertDropdownType): JSX.Element { }: AlertDropdownType): JSX.Element {
const notificationList = useAlertStore((state) => state.notificationList); const notificationList = useAlertStore((state) => state.notificationList);
const clearNotificationList = useAlertStore( const clearNotificationList = useAlertStore(
(state) => state.clearNotificationList, (state) => state.clearNotificationList
); );
const removeFromNotificationList = useAlertStore( const removeFromNotificationList = useAlertStore(
(state) => state.removeFromNotificationList, (state) => state.removeFromNotificationList
); );
const setNotificationCenter = useAlertStore( const setNotificationCenter = useAlertStore(
(state) => state.setNotificationCenter, (state) => state.setNotificationCenter
); );
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);

14
src/frontend/src/components/ImageViewer/index.tsx
View file

@ -31,14 +31,14 @@ export default function ImageViewer({ image }) {
const fullPageButton = document.getElementById("full-page-button"); const fullPageButton = document.getElementById("full-page-button");
zoomInButton!.addEventListener("click", () => zoomInButton!.addEventListener("click", () =>
viewer.viewport.zoomBy(1.2), viewer.viewport.zoomBy(1.2)
); );
zoomOutButton!.addEventListener("click", () => zoomOutButton!.addEventListener("click", () =>
viewer.viewport.zoomBy(0.8), viewer.viewport.zoomBy(0.8)
); );
homeButton!.addEventListener("click", () => viewer.viewport.goHome()); homeButton!.addEventListener("click", () => viewer.viewport.goHome());
fullPageButton!.addEventListener("click", () => fullPageButton!.addEventListener("click", () =>
viewer.setFullScreen(true), viewer.setFullScreen(true)
); );
// Optionally, you can set additional viewer options here // Optionally, you can set additional viewer options here
@ -47,16 +47,16 @@ export default function ImageViewer({ image }) {
return () => { return () => {
viewer.destroy(); viewer.destroy();
zoomInButton!.removeEventListener("click", () => zoomInButton!.removeEventListener("click", () =>
viewer.viewport.zoomBy(1.2), viewer.viewport.zoomBy(1.2)
); );
zoomOutButton!.removeEventListener("click", () => zoomOutButton!.removeEventListener("click", () =>
viewer.viewport.zoomBy(0.8), viewer.viewport.zoomBy(0.8)
); );
homeButton!.removeEventListener("click", () => homeButton!.removeEventListener("click", () =>
viewer.viewport.goHome(), viewer.viewport.goHome()
); );
fullPageButton!.removeEventListener("click", () => fullPageButton!.removeEventListener("click", () =>
viewer.setFullScreen(true), viewer.setFullScreen(true)
); );
}; };
} }

2
src/frontend/src/components/accordionComponent/composite/folderAccordionComponent/index.tsx
View file

@ -15,7 +15,7 @@ export default function FolderAccordionComponent({
options, options,
}: AccordionComponentType): JSX.Element { }: AccordionComponentType): JSX.Element {
const [value, setValue] = useState( const [value, setValue] = useState(
open.length === 0 ? "" : getOpenAccordion(), open.length === 0 ? "" : getOpenAccordion()
); );
function getOpenAccordion(): string { function getOpenAccordion(): string {

4
src/frontend/src/components/accordionComponent/index.tsx
View file

@ -17,7 +17,7 @@ export default function AccordionComponent({
sideBar, sideBar,
}: AccordionComponentType): JSX.Element { }: AccordionComponentType): JSX.Element {
const [value, setValue] = useState( const [value, setValue] = useState(
open.length === 0 ? "" : getOpenAccordion(), open.length === 0 ? "" : getOpenAccordion()
); );
function getOpenAccordion(): string { function getOpenAccordion(): string {
@ -52,7 +52,7 @@ export default function AccordionComponent({
disabled={disabled} disabled={disabled}
className={cn( className={cn(
sideBar ? "w-full bg-muted px-[0.75rem] py-[0.5rem]" : "ml-3", sideBar ? "w-full bg-muted px-[0.75rem] py-[0.5rem]" : "ml-3",
disabled ? "cursor-not-allowed" : "cursor-pointer", disabled ? "cursor-not-allowed" : "cursor-pointer"
)} )}
> >
{trigger} {trigger}

6
src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
View file

@ -23,19 +23,19 @@ export default function AddNewVariableButton({ children }): JSX.Element {
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);
const componentFields = useTypesStore((state) => state.ComponentFields); const componentFields = useTypesStore((state) => state.ComponentFields);
const unavaliableFields = new Set( const unavaliableFields = new Set(
Object.keys(useGlobalVariablesStore((state) => state.unavaliableFields)), Object.keys(useGlobalVariablesStore((state) => state.unavaliableFields))
); );
const availableFields = () => { const availableFields = () => {
const fields = Array.from(componentFields).filter( const fields = Array.from(componentFields).filter(
(field) => !unavaliableFields.has(field), (field) => !unavaliableFields.has(field)
); );
return sortByName(fields); return sortByName(fields);
}; };
const addGlobalVariable = useGlobalVariablesStore( const addGlobalVariable = useGlobalVariablesStore(
(state) => state.addGlobalVariable, (state) => state.addGlobalVariable
); );
function handleSaveVariable() { function handleSaveVariable() {

4
src/frontend/src/components/cardComponent/components/dragCardComponent/index.tsx
View file

@ -10,7 +10,7 @@ export default function DragCardComponent({ data }: { data: storeComponent }) {
draggable draggable
//TODO check color schema //TODO check color schema
className={cn( className={cn(
"group relative flex flex-col justify-between overflow-hidden transition-all hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#ffffff10]", "group relative flex flex-col justify-between overflow-hidden transition-all hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#ffffff10]"
)} )}
> >
<div> <div>
@ -22,7 +22,7 @@ export default function DragCardComponent({ data }: { data: storeComponent }) {
"visible flex-shrink-0", "visible flex-shrink-0",
data.is_component data.is_component
? "mx-0.5 h-6 w-6 text-component-icon" ? "mx-0.5 h-6 w-6 text-component-icon"
: "h-7 w-7 flex-shrink-0 text-flow-icon", : "h-7 w-7 flex-shrink-0 text-flow-icon"
)} )}
name={data.is_component ? "ToyBrick" : "Group"} name={data.is_component ? "ToyBrick" : "Group"}
/> />

18
src/frontend/src/components/cardComponent/index.tsx
View file

@ -60,11 +60,11 @@ export default function CollectionCardComponent({
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [loadingLike, setLoadingLike] = useState(false); const [loadingLike, setLoadingLike] = useState(false);
const [liked_by_user, setLiked_by_user] = useState( const [liked_by_user, setLiked_by_user] = useState(
data?.liked_by_user ?? false, data?.liked_by_user ?? false
); );
const [likes_count, setLikes_count] = useState(data?.liked_by_count ?? 0); const [likes_count, setLikes_count] = useState(data?.liked_by_count ?? 0);
const [downloads_count, setDownloads_count] = useState( const [downloads_count, setDownloads_count] = useState(
data?.downloads_count ?? 0, data?.downloads_count ?? 0
); );
const currentFlow = useFlowsManagerStore((state) => state.currentFlow); const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow); const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
@ -75,12 +75,12 @@ export default function CollectionCardComponent({
const [openPlayground, setOpenPlayground] = useState(false); const [openPlayground, setOpenPlayground] = useState(false);
const [openDelete, setOpenDelete] = useState(false); const [openDelete, setOpenDelete] = useState(false);
const setCurrentFlowId = useFlowsManagerStore( const setCurrentFlowId = useFlowsManagerStore(
(state) => state.setCurrentFlowId, (state) => state.setCurrentFlowId
); );
const [loadingPlayground, setLoadingPlayground] = useState(false); const [loadingPlayground, setLoadingPlayground] = useState(false);
const selectedFlowsComponentsCards = useFlowsManagerStore( const selectedFlowsComponentsCards = useFlowsManagerStore(
(state) => state.selectedFlowsComponentsCards, (state) => state.selectedFlowsComponentsCards
); );
const name = data.is_component ? "Component" : "Flow"; const name = data.is_component ? "Component" : "Flow";
@ -220,7 +220,7 @@ export default function CollectionCardComponent({
"group relative flex h-[11rem] flex-col justify-between overflow-hidden hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#5f5f5f0e]", "group relative flex h-[11rem] flex-col justify-between overflow-hidden hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#5f5f5f0e]",
disabled ? "pointer-events-none opacity-50" : "", disabled ? "pointer-events-none opacity-50" : "",
onClick ? "cursor-pointer" : "", onClick ? "cursor-pointer" : "",
isSelectedCard ? "border border-selected" : "", isSelectedCard ? "border border-selected" : ""
)} )}
onClick={onClick} onClick={onClick}
> >
@ -233,7 +233,7 @@ export default function CollectionCardComponent({
"visible flex-shrink-0", "visible flex-shrink-0",
data.is_component data.is_component
? "mx-0.5 h-6 w-6 text-component-icon" ? "mx-0.5 h-6 w-6 text-component-icon"
: "h-7 w-7 flex-shrink-0 text-flow-icon", : "h-7 w-7 flex-shrink-0 text-flow-icon"
)} )}
name={data.is_component ? "ToyBrick" : "Group"} name={data.is_component ? "ToyBrick" : "Group"}
/> />
@ -428,7 +428,7 @@ export default function CollectionCardComponent({
name="Trash2" name="Trash2"
className={cn( className={cn(
"h-5 w-5", "h-5 w-5",
!authorized ? " text-ring" : "", !authorized ? " text-ring" : ""
)} )}
/> />
</Button> </Button>
@ -463,7 +463,7 @@ export default function CollectionCardComponent({
liked_by_user liked_by_user
? "fill-destructive stroke-destructive" ? "fill-destructive stroke-destructive"
: "", : "",
!authorized ? " text-ring" : "", !authorized ? " text-ring" : ""
)} )}
/> />
</Button> </Button>
@ -501,7 +501,7 @@ export default function CollectionCardComponent({
} }
className={cn( className={cn(
loading ? "h-5 w-5 animate-spin" : "h-5 w-5", loading ? "h-5 w-5 animate-spin" : "h-5 w-5",
!authorized ? " text-ring" : "", !authorized ? " text-ring" : ""
)} )}
/> />
</Button> </Button>

2
src/frontend/src/components/cardsWrapComponent/index.tsx
View file

@ -65,7 +65,7 @@ export default function CardsWrapComponent({
"h-full w-full", "h-full w-full",
isDragging isDragging
? "mb-36 flex flex-col items-center justify-center gap-4 text-2xl font-light" ? "mb-36 flex flex-col items-center justify-center gap-4 text-2xl font-light"
: "", : ""
)} )}
> >
{isDragging ? ( {isDragging ? (

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

@ -1,6 +1,6 @@
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import { useMemo, useRef, useState } from "react";
import { useHotkeys } from "react-hotkeys-hook"; import { useHotkeys } from "react-hotkeys-hook";
import { useEffect, useMemo, useRef, useState } from "react";
import IOModal from "../../modals/IOModal"; import IOModal from "../../modals/IOModal";
import ApiModal from "../../modals/apiModal/views"; import ApiModal from "../../modals/apiModal/views";
import ShareModal from "../../modals/shareModal"; import ShareModal from "../../modals/shareModal";
@ -65,7 +65,7 @@ export default function FlowToolbar(): JSX.Element {
"relative inline-flex h-full w-full items-center justify-center gap-[4px] bg-muted px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-background hover:bg-hover ", "relative inline-flex h-full w-full items-center justify-center gap-[4px] bg-muted px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-background hover:bg-hover ",
!hasApiKey || !validApiKey || !hasStore !hasApiKey || !validApiKey || !hasStore
? " button-disable text-muted-foreground " ? " button-disable text-muted-foreground "
: "", : ""
)} )}
> >
<ForwardedIconComponent <ForwardedIconComponent
@ -74,7 +74,7 @@ export default function FlowToolbar(): JSX.Element {
"-m-0.5 -ml-1 h-6 w-6", "-m-0.5 -ml-1 h-6 w-6",
!hasApiKey || !validApiKey || !hasStore !hasApiKey || !validApiKey || !hasStore
? "extra-side-bar-save-disable" ? "extra-side-bar-save-disable"
: "", : ""
)} )}
/> />
Share Share
@ -88,7 +88,7 @@ export default function FlowToolbar(): JSX.Element {
hasStore, hasStore,
openShareModal, openShareModal,
setOpenShareModal, setOpenShareModal,
], ]
); );
return ( return (
@ -144,7 +144,7 @@ export default function FlowToolbar(): JSX.Element {
> >
<div <div
className={classNames( className={classNames(
"relative inline-flex w-full items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-hover", "relative inline-flex w-full items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-hover"
)} )}
> >
<ForwardedIconComponent <ForwardedIconComponent

2
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -18,7 +18,7 @@ export default function CodeAreaComponent({
setOpen, setOpen,
}: CodeAreaComponentType) { }: CodeAreaComponentType) {
const [myValue, setMyValue] = useState( const [myValue, setMyValue] = useState(
typeof value == "string" ? value : JSON.stringify(value), typeof value == "string" ? value : JSON.stringify(value)
); );
useEffect(() => { useEffect(() => {
if (disabled && myValue !== "") { if (disabled && myValue !== "") {

45
src/frontend/src/components/codeTabsComponent/index.tsx
View file

@ -26,7 +26,6 @@ import {
TabsTrigger, TabsTrigger,
} from "../../components/ui/tabs"; } from "../../components/ui/tabs";
import { LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants"; import { LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants";
import ExportModal from "../../modals/exportModal";
import { Case } from "../../shared/components/caseComponent"; import { Case } from "../../shared/components/caseComponent";
import { useDarkStore } from "../../stores/darkStore"; import { useDarkStore } from "../../stores/darkStore";
import useFlowStore from "../../stores/flowStore"; import useFlowStore from "../../stores/flowStore";
@ -43,9 +42,9 @@ import IconComponent from "../genericIconComponent";
import InputComponent from "../inputComponent"; import InputComponent from "../inputComponent";
import KeypairListComponent from "../keypairListComponent"; import KeypairListComponent from "../keypairListComponent";
import ShadTooltip from "../shadTooltipComponent"; import ShadTooltip from "../shadTooltipComponent";
import { Button } from "../ui/button";
import { Label } from "../ui/label"; import { Label } from "../ui/label";
import { Switch } from "../ui/switch"; import { Switch } from "../ui/switch";
import { Button } from "../ui/button";
export default function CodeTabsComponent({ export default function CodeTabsComponent({
flow, flow,
@ -139,7 +138,7 @@ export default function CodeTabsComponent({
<Label <Label
className={cn( className={cn(
"relative right-1 top-[4px] text-xs font-medium text-muted-foreground", "relative right-1 top-[4px] text-xs font-medium text-muted-foreground",
activeTweaks ? "text-primary" : "", activeTweaks ? "text-primary" : ""
)} )}
htmlFor="tweaks-switch" htmlFor="tweaks-switch"
> >
@ -194,7 +193,7 @@ export default function CodeTabsComponent({
<div className="api-modal-according-display"> <div className="api-modal-according-display">
<div <div
className={classNames( className={classNames(
"h-[70vh] w-full overflow-y-auto overflow-x-hidden rounded-lg bg-muted custom-scroll", "h-[70vh] w-full overflow-y-auto overflow-x-hidden rounded-lg bg-muted custom-scroll"
)} )}
> >
{data?.map((node: any, i) => ( {data?.map((node: any, i) => (
@ -233,8 +232,8 @@ export default function CodeTabsComponent({
.show && .show &&
LANGFLOW_SUPPORTED_TYPES.has( LANGFLOW_SUPPORTED_TYPES.has(
node.data.node.template[templateField] node.data.node.template[templateField]
.type, .type
), )
) )
.map((templateField, indx) => { .map((templateField, indx) => {
return ( return (
@ -292,7 +291,7 @@ export default function CodeTabsComponent({
target, target,
node.data.node.template[ node.data.node.template[
templateField templateField
], ]
); );
}} }}
/> />
@ -338,7 +337,7 @@ export default function CodeTabsComponent({
target, target,
node.data.node.template[ node.data.node.template[
templateField templateField
], ]
); );
}} }}
/> />
@ -391,7 +390,7 @@ export default function CodeTabsComponent({
target, target,
node.data.node.template[ node.data.node.template[
templateField templateField
], ]
); );
}} }}
/> />
@ -428,7 +427,7 @@ export default function CodeTabsComponent({
e, e,
node.data.node.template[ node.data.node.template[
templateField templateField
], ]
); );
}} }}
size="small" size="small"
@ -459,7 +458,7 @@ export default function CodeTabsComponent({
].fileTypes ].fileTypes
} }
onFileChange={( onFileChange={(
value: any, value: any
) => { ) => {
node.data.node.template[ node.data.node.template[
templateField templateField
@ -512,7 +511,7 @@ export default function CodeTabsComponent({
target, target,
node.data.node.template[ node.data.node.template[
templateField templateField
], ]
); );
}} }}
/> />
@ -552,7 +551,7 @@ export default function CodeTabsComponent({
target, target,
node.data.node.template[ node.data.node.template[
templateField templateField
], ]
); );
}} }}
value={ value={
@ -614,7 +613,7 @@ export default function CodeTabsComponent({
target, target,
node.data.node.template[ node.data.node.template[
templateField templateField
], ]
); );
}} }}
/> />
@ -660,7 +659,7 @@ export default function CodeTabsComponent({
target, target,
node.data.node.template[ node.data.node.template[
templateField templateField
], ]
); );
}} }}
/> />
@ -706,7 +705,7 @@ export default function CodeTabsComponent({
target, target,
node.data.node.template[ node.data.node.template[
templateField templateField
], ]
); );
}} }}
/> />
@ -738,8 +737,8 @@ export default function CodeTabsComponent({
].value, ].value,
type( type(
node, node,
templateField, templateField
), )
) )
} }
duplicateKey={ duplicateKey={
@ -748,15 +747,15 @@ export default function CodeTabsComponent({
onChange={(target) => { onChange={(target) => {
const valueToNumbers = const valueToNumbers =
convertValuesToNumbers( convertValuesToNumbers(
target, target
); );
node.data.node!.template[ node.data.node!.template[
templateField templateField
].value = valueToNumbers; ].value = valueToNumbers;
setErrorDuplicateKey( setErrorDuplicateKey(
hasDuplicateKeys( hasDuplicateKeys(
valueToNumbers, valueToNumbers
), )
); );
setData((old) => { setData((old) => {
let newInputList = let newInputList =
@ -773,7 +772,7 @@ export default function CodeTabsComponent({
target, target,
node.data.node.template[ node.data.node.template[
templateField templateField
], ]
); );
}} }}
isList={ isList={
@ -821,7 +820,7 @@ export default function CodeTabsComponent({
target, target,
node.data.node.template[ node.data.node.template[
templateField templateField
], ]
); );
}} }}
/> />

2
src/frontend/src/components/dictComponent/index.tsx
View file

@ -29,7 +29,7 @@ export default function DictComponent({
<div <div
className={classNames( className={classNames(
value.length > 1 && editNode ? "my-1" : "", value.length > 1 && editNode ? "my-1" : "",
"flex flex-col gap-3", "flex flex-col gap-3"
)} )}
> >
{ {

4
src/frontend/src/components/dropdownComponent/index.tsx
View file

@ -58,7 +58,7 @@ export default function Dropdown({
? "dropdown-component-outline" ? "dropdown-component-outline"
: "dropdown-component-false-outline", : "dropdown-component-false-outline",
"w-full justify-between font-normal", "w-full justify-between font-normal",
editNode ? "input-edit-node" : "py-2", editNode ? "input-edit-node" : "py-2"
)} )}
> >
<span data-testid={`value-dropdown-` + id}> <span data-testid={`value-dropdown-` + id}>
@ -106,7 +106,7 @@ export default function Dropdown({
name="Check" name="Check"
className={cn( className={cn(
"ml-auto h-4 w-4 text-primary", "ml-auto h-4 w-4 text-primary",
value === option ? "opacity-100" : "opacity-0", value === option ? "opacity-100" : "opacity-0"
)} )}
/> />
</CommandItem> </CommandItem>

2
src/frontend/src/components/editFlowSettingsComponent/index.tsx
View file

@ -99,7 +99,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
<span <span
className={cn( className={cn(
"font-normal text-muted-foreground word-break-break-word", "font-normal text-muted-foreground word-break-break-word",
description === "" ? "font-light italic" : "", description === "" ? "font-light italic" : ""
)} )}
> >
{description === "" ? "No description" : description} {description === "" ? "No description" : description}

6
src/frontend/src/components/genericIconComponent/index.tsx
View file

@ -18,7 +18,7 @@ export const ForwardedIconComponent = memo(
strokeWidth, strokeWidth,
id = "", id = "",
}: IconComponentProps, }: IconComponentProps,
ref, ref
) => { ) => {
const [showFallback, setShowFallback] = useState(false); const [showFallback, setShowFallback] = useState(false);
@ -65,8 +65,8 @@ export const ForwardedIconComponent = memo(
/> />
</Suspense> </Suspense>
); );
}, }
), )
); );
export default ForwardedIconComponent; export default ForwardedIconComponent;

2
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file

@ -16,11 +16,11 @@ import FlowSettingsModal from "../../../../modals/flowSettingsModal";
import useAlertStore from "../../../../stores/alertStore"; import useAlertStore from "../../../../stores/alertStore";
import useFlowStore from "../../../../stores/flowStore"; import useFlowStore from "../../../../stores/flowStore";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore"; import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { useShortcutsStore } from "../../../../stores/shortcuts";
import { cn } from "../../../../utils/utils"; import { cn } from "../../../../utils/utils";
import IconComponent from "../../../genericIconComponent"; import IconComponent from "../../../genericIconComponent";
import ShadTooltip from "../../../shadTooltipComponent"; import ShadTooltip from "../../../shadTooltipComponent";
import { Button } from "../../../ui/button"; import { Button } from "../../../ui/button";
import { useShortcutsStore } from "../../../../stores/shortcuts";
export const MenuBar = ({}: {}): JSX.Element => { export const MenuBar = ({}: {}): JSX.Element => {
const shortcuts = useShortcutsStore((state) => state.shortcuts); const shortcuts = useShortcutsStore((state) => state.shortcuts);

19
src/frontend/src/components/headerComponent/index.tsx
View file

@ -1,9 +1,9 @@
import { useContext } from "react"; import { useContext } from "react";
import profileCircle from "../../assets/profile-circle.png";
import { FaDiscord, FaGithub } from "react-icons/fa"; import { FaDiscord, FaGithub } from "react-icons/fa";
import { RiTwitterXFill } from "react-icons/ri"; import { RiTwitterXFill } from "react-icons/ri";
import { Link, useLocation, useNavigate, useParams } from "react-router-dom"; import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
import AlertDropdown from "../../alerts/alertDropDown"; import AlertDropdown from "../../alerts/alertDropDown";
import profileCircle from "../../assets/profile-circle.png";
import { import {
BACKEND_URL, BACKEND_URL,
BASE_URL_API, BASE_URL_API,
@ -18,7 +18,6 @@ import useFlowStore from "../../stores/flowStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore"; import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { useLocationStore } from "../../stores/locationStore"; import { useLocationStore } from "../../stores/locationStore";
import { useStoreStore } from "../../stores/storeStore"; import { useStoreStore } from "../../stores/storeStore";
import { gradients } from "../../utils/styleUtils";
import IconComponent from "../genericIconComponent"; import IconComponent from "../genericIconComponent";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import { import {
@ -59,7 +58,7 @@ export default function Header(): JSX.Element {
const lastFlowVisitedIndex = routeHistory const lastFlowVisitedIndex = routeHistory
.reverse() .reverse()
.findIndex( .findIndex(
(path) => path.includes("/flow/") && path !== location.pathname, (path) => path.includes("/flow/") && path !== location.pathname
); );
const lastFlowVisited = routeHistory[lastFlowVisitedIndex]; const lastFlowVisited = routeHistory[lastFlowVisitedIndex];
@ -200,9 +199,10 @@ export default function Header(): JSX.Element {
src={ src={
`${BACKEND_URL.slice( `${BACKEND_URL.slice(
0, 0,
BACKEND_URL.length - 1, BACKEND_URL.length - 1
)}${BASE_URL_API}files/profile_pictures/${userData?.profile_image ?? "Space/046-rocket.png"}` ?? )}${BASE_URL_API}files/profile_pictures/${
profileCircle userData?.profile_image ?? "Space/046-rocket.png"
}` ?? profileCircle
} }
className="h-7 w-7 focus-visible:outline-0 " className="h-7 w-7 focus-visible:outline-0 "
/> />
@ -217,9 +217,10 @@ export default function Header(): JSX.Element {
src={ src={
`${BACKEND_URL.slice( `${BACKEND_URL.slice(
0, 0,
BACKEND_URL.length - 1, BACKEND_URL.length - 1
)}${BASE_URL_API}files/profile_pictures/${userData?.profile_image}` ?? )}${BASE_URL_API}files/profile_pictures/${
profileCircle userData?.profile_image
}` ?? profileCircle
} }
className="h-5 w-5 focus-visible:outline-0 " className="h-5 w-5 focus-visible:outline-0 "
/> />

4
src/frontend/src/components/horizontalScrollFadeComponent/index.tsx
View file

@ -32,11 +32,11 @@ export default function HorizontalScrollFadeComponent({
fadeContainerRef.current.classList.toggle( fadeContainerRef.current.classList.toggle(
"fade-left", "fade-left",
isScrollable && !atStart, isScrollable && !atStart
); );
fadeContainerRef.current.classList.toggle( fadeContainerRef.current.classList.toggle(
"fade-right", "fade-right",
isScrollable && !atEnd, isScrollable && !atEnd
); );
}; };

16
src/frontend/src/components/inputComponent/components/popover/index.tsx
View file

@ -75,9 +75,9 @@ const CustomInputPopover = ({
(selectedOption !== "" || !onChange) && setSelectedOption (selectedOption !== "" || !onChange) && setSelectedOption
? selectedOption ? selectedOption
: (selectedOptions?.length !== 0 || !onChange) && : (selectedOptions?.length !== 0 || !onChange) &&
setSelectedOptions setSelectedOptions
? selectedOptions?.join(", ") ? selectedOptions?.join(", ")
: value : value
} }
autoFocus={autoFocus} autoFocus={autoFocus}
disabled={disabled} disabled={disabled}
@ -103,7 +103,7 @@ const CustomInputPopover = ({
(password && !(setSelectedOption || setSelectedOptions)) (password && !(setSelectedOption || setSelectedOptions))
? "pr-8" ? "pr-8"
: "", : "",
className!, className!
)} )}
placeholder={password && editNode ? "Key" : placeholder} placeholder={password && editNode ? "Key" : placeholder}
onChange={handleInputChange} onChange={handleInputChange}
@ -141,15 +141,15 @@ const CustomInputPopover = ({
onSelect={(currentValue) => { onSelect={(currentValue) => {
setSelectedOption && setSelectedOption &&
setSelectedOption( setSelectedOption(
currentValue === selectedOption ? "" : currentValue, currentValue === selectedOption ? "" : currentValue
); );
setSelectedOptions && setSelectedOptions &&
setSelectedOptions( setSelectedOptions(
selectedOptions?.includes(currentValue) selectedOptions?.includes(currentValue)
? selectedOptions.filter( ? selectedOptions.filter(
(item) => item !== currentValue, (item) => item !== currentValue
) )
: [...selectedOptions, currentValue], : [...selectedOptions, currentValue]
); );
!setSelectedOptions && setShowOptions(false); !setSelectedOptions && setShowOptions(false);
}} }}
@ -162,7 +162,7 @@ const CustomInputPopover = ({
selectedOption === option || selectedOption === option ||
selectedOptions?.includes(option) selectedOptions?.includes(option)
? "opacity-100" ? "opacity-100"
: "opacity-0", : "opacity-0"
)} )}
> >
<div className="absolute opacity-100 transition-all group-hover:opacity-0"> <div className="absolute opacity-100 transition-all group-hover:opacity-0">

24
src/frontend/src/components/inputComponent/components/popoverObject/index.tsx
View file

@ -60,14 +60,14 @@ const CustomInputPopoverObject = ({
? options.find((option) => option.id === selectedOption)?.name || ? options.find((option) => option.id === selectedOption)?.name ||
"" ""
: (selectedOptions?.length !== 0 || !onChange) && : (selectedOptions?.length !== 0 || !onChange) &&
setSelectedOptions setSelectedOptions
? selectedOptions ? selectedOptions
.map( .map(
(optionId) => (optionId) =>
options.find((option) => option.id === optionId)?.name, options.find((option) => option.id === optionId)?.name
) )
.join(", ") .join(", ")
: value : value
} }
autoFocus={autoFocus} autoFocus={autoFocus}
disabled={disabled} disabled={disabled}
@ -115,15 +115,15 @@ const CustomInputPopoverObject = ({
onSelect={(currentValue) => { onSelect={(currentValue) => {
setSelectedOption && setSelectedOption &&
setSelectedOption( setSelectedOption(
currentValue === selectedOption ? "" : currentValue, currentValue === selectedOption ? "" : currentValue
); );
setSelectedOptions && setSelectedOptions &&
setSelectedOptions( setSelectedOptions(
selectedOptions?.includes(currentValue) selectedOptions?.includes(currentValue)
? selectedOptions.filter( ? selectedOptions.filter(
(item) => item !== currentValue, (item) => item !== currentValue
) )
: [...selectedOptions, currentValue], : [...selectedOptions, currentValue]
); );
!setSelectedOptions && setShowOptions(false); !setSelectedOptions && setShowOptions(false);
}} }}
@ -136,7 +136,7 @@ const CustomInputPopoverObject = ({
selectedOption === option.id || selectedOption === option.id ||
selectedOptions?.includes(option.id) selectedOptions?.includes(option.id)
? "opacity-100" ? "opacity-100"
: "opacity-0", : "opacity-0"
)} )}
> >
<div className="absolute opacity-100 transition-all group-hover:opacity-0"> <div className="absolute opacity-100 transition-all group-hover:opacity-0">

12
src/frontend/src/components/inputComponent/index.tsx
View file

@ -71,7 +71,7 @@ export default function InputComponent({
editNode ? " input-edit-node " : "", editNode ? " input-edit-node " : "",
password && editNode ? "pr-8" : "", password && editNode ? "pr-8" : "",
password && !editNode ? "pr-10" : "", password && !editNode ? "pr-10" : "",
className!, className!
)} )}
placeholder={password && editNode ? "Key" : placeholder} placeholder={password && editNode ? "Key" : placeholder}
onChange={(e) => { onChange={(e) => {
@ -154,7 +154,7 @@ export default function InputComponent({
<span <span
className={cn( className={cn(
password && selectedOption === "" ? "right-8" : "right-0", password && selectedOption === "" ? "right-8" : "right-0",
"absolute inset-y-0 flex items-center pr-2.5", "absolute inset-y-0 flex items-center pr-2.5"
)} )}
> >
<button <button
@ -167,7 +167,7 @@ export default function InputComponent({
selectedOption !== "" selectedOption !== ""
? "text-medium-indigo" ? "text-medium-indigo"
: "text-muted-foreground", : "text-muted-foreground",
"hover:text-accent-foreground", "hover:text-accent-foreground"
)} )}
> >
<ForwardedIconComponent <ForwardedIconComponent
@ -187,7 +187,7 @@ export default function InputComponent({
"mb-px", "mb-px",
editNode editNode
? "input-component-true-button" ? "input-component-true-button"
: "input-component-false-button", : "input-component-false-button"
)} )}
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
@ -204,7 +204,7 @@ export default function InputComponent({
className={classNames( className={classNames(
editNode editNode
? "input-component-true-svg" ? "input-component-true-svg"
: "input-component-false-svg", : "input-component-false-svg"
)} )}
> >
<path <path
@ -223,7 +223,7 @@ export default function InputComponent({
className={classNames( className={classNames(
editNode editNode
? "input-component-true-svg" ? "input-component-true-svg"
: "input-component-false-svg", : "input-component-false-svg"
)} )}
> >
<path <path

4
src/frontend/src/components/inputFileComponent/index.tsx
View file

@ -103,8 +103,8 @@ export default function InputFileComponent({
editNode editNode
? "input-edit-node input-dialog text-muted-foreground" ? "input-edit-node input-dialog text-muted-foreground"
: disabled : disabled
? "input-disable input-dialog primary-input" ? "input-disable input-dialog primary-input"
: "input-dialog primary-input text-muted-foreground" : "input-dialog primary-input text-muted-foreground"
} }
> >
{myValue !== "" ? myValue : "No file"} {myValue !== "" ? myValue : "No file"}

8
src/frontend/src/components/inputGlobalComponent/index.tsx
View file

@ -19,15 +19,15 @@ export default function InputGlobalComponent({
editNode = false, editNode = false,
}: InputGlobalComponentType): JSX.Element { }: InputGlobalComponentType): JSX.Element {
const globalVariablesEntries = useGlobalVariablesStore( const globalVariablesEntries = useGlobalVariablesStore(
(state) => state.globalVariablesEntries, (state) => state.globalVariablesEntries
); );
const getVariableId = useGlobalVariablesStore((state) => state.getVariableId); const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
const unavaliableFields = useGlobalVariablesStore( const unavaliableFields = useGlobalVariablesStore(
(state) => state.unavaliableFields, (state) => state.unavaliableFields
); );
const removeGlobalVariable = useGlobalVariablesStore( const removeGlobalVariable = useGlobalVariablesStore(
(state) => state.removeGlobalVariable, (state) => state.removeGlobalVariable
); );
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);
@ -121,7 +121,7 @@ export default function InputGlobalComponent({
<ForwardedIconComponent <ForwardedIconComponent
name="Trash2" name="Trash2"
className={cn( className={cn(
"h-4 w-4 text-primary opacity-0 hover:text-status-red group-hover:opacity-100", "h-4 w-4 text-primary opacity-0 hover:text-status-red group-hover:opacity-100"
)} )}
aria-hidden="true" aria-hidden="true"
/> />

2
src/frontend/src/components/inputListComponent/index.tsx
View file

@ -31,7 +31,7 @@ export default function InputListComponent({
<div <div
className={classNames( className={classNames(
value.length > 1 && editNode ? "my-1" : "", value.length > 1 && editNode ? "my-1" : "",
"flex flex-col gap-3", "flex flex-col gap-3"
)} )}
> >
{value.map((singleValue, idx) => { {value.map((singleValue, idx) => {

2
src/frontend/src/components/sidebarComponent/components/sideBarButtons/index.tsx
View file

@ -27,7 +27,7 @@ const SideBarButtonsComponent = ({
pathname === item.href pathname === item.href
? "border border-border bg-muted hover:bg-muted" ? "border border-border bg-muted hover:bg-muted"
: "border border-transparent hover:border-border hover:bg-transparent", : "border border-transparent hover:border-border hover:bg-transparent",
"flex w-full shrink-0 justify-start gap-4", "flex w-full shrink-0 justify-start gap-4"
)} )}
> >
{item.icon} {item.icon}

18
src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx
View file

@ -31,7 +31,7 @@ const SideBarFoldersButtonsComponent = ({
const [foldersNames, setFoldersNames] = useState({}); const [foldersNames, setFoldersNames] = useState({});
const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot); const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
const [editFolders, setEditFolderName] = useState( const [editFolders, setEditFolderName] = useState(
folders.map((obj) => ({ name: obj.name, edit: false })), folders.map((obj) => ({ name: obj.name, edit: false }))
); );
const uploadFolder = useFolderStore((state) => state.uploadFolder); const uploadFolder = useFolderStore((state) => state.uploadFolder);
const currentFolder = pathname.split("/"); const currentFolder = pathname.split("/");
@ -58,7 +58,7 @@ const SideBarFoldersButtonsComponent = ({
const { dragOver, dragEnter, dragLeave, onDrop } = useFileDrop( const { dragOver, dragEnter, dragLeave, onDrop } = useFileDrop(
folderId, folderId,
handleFolderChange, handleFolderChange
); );
const handleUploadFlowsToFolder = () => { const handleUploadFlowsToFolder = () => {
@ -86,7 +86,7 @@ const SideBarFoldersButtonsComponent = ({
addFolder({ name: "New Folder", parent_id: null, description: "" }).then( addFolder({ name: "New Folder", parent_id: null, description: "" }).then(
(res) => { (res) => {
getFoldersApi(true); getFoldersApi(true);
}, }
); );
} }
@ -132,7 +132,7 @@ const SideBarFoldersButtonsComponent = ({
<> <>
{folders.map((item, index) => { {folders.map((item, index) => {
const editFolderName = editFolders?.filter( const editFolderName = editFolders?.filter(
(folder) => folder.name === item.name, (folder) => folder.name === item.name
)[0]; )[0];
return ( return (
<div <div
@ -148,7 +148,7 @@ const SideBarFoldersButtonsComponent = ({
? "border border-border bg-muted hover:bg-muted" ? "border border-border bg-muted hover:bg-muted"
: "border hover:bg-transparent lg:border-transparent lg:hover:border-border", : "border hover:bg-transparent lg:border-transparent lg:hover:border-border",
"group flex w-full shrink-0 cursor-pointer gap-2 opacity-100 lg:min-w-full", "group flex w-full shrink-0 cursor-pointer gap-2 opacity-100 lg:min-w-full",
folderIdDragging === item.id! ? "bg-border" : "", folderIdDragging === item.id! ? "bg-border" : ""
)} )}
onClick={() => handleChangeFolder!(item.id!)} onClick={() => handleChangeFolder!(item.id!)}
> >
@ -218,7 +218,7 @@ const SideBarFoldersButtonsComponent = ({
folders.map((obj) => ({ folders.map((obj) => ({
name: obj.name, name: obj.name,
edit: false, edit: false,
})), }))
); );
} }
if (e.key === "Enter") { if (e.key === "Enter") {
@ -251,10 +251,10 @@ const SideBarFoldersButtonsComponent = ({
}; };
const updatedFolder = await updateFolder( const updatedFolder = await updateFolder(
body, body,
item.id!, item.id!
); );
const updateFolders = folders.filter( const updateFolders = folders.filter(
(f) => f.name !== item.name, (f) => f.name !== item.name
); );
setFolders([...updateFolders, updatedFolder]); setFolders([...updateFolders, updatedFolder]);
setFoldersNames({}); setFoldersNames({});
@ -262,7 +262,7 @@ const SideBarFoldersButtonsComponent = ({
folders.map((obj) => ({ folders.map((obj) => ({
name: obj.name, name: obj.name,
edit: false, edit: false,
})), }))
); );
} else { } else {
setFoldersNames((old) => ({ setFoldersNames((old) => ({

10
src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx
View file

@ -12,7 +12,7 @@ import { addVersionToDuplicates } from "../../../utils/reactflowUtils";
const useFileDrop = (folderId, folderChangeCallback) => { const useFileDrop = (folderId, folderChangeCallback) => {
const setFolderDragging = useFolderStore((state) => state.setFolderDragging); const setFolderDragging = useFolderStore((state) => state.setFolderDragging);
const setFolderIdDragging = useFolderStore( const setFolderIdDragging = useFolderStore(
(state) => state.setFolderIdDragging, (state) => state.setFolderIdDragging
); );
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);
@ -45,7 +45,7 @@ const useFileDrop = (folderId, folderChangeCallback) => {
| React.DragEvent<HTMLDivElement> | React.DragEvent<HTMLDivElement>
| React.DragEvent<HTMLButtonElement> | React.DragEvent<HTMLButtonElement>
| React.DragEvent<HTMLAnchorElement>, | React.DragEvent<HTMLAnchorElement>,
folderId: string, folderId: string
) => { ) => {
e.preventDefault(); e.preventDefault();
@ -60,7 +60,7 @@ const useFileDrop = (folderId, folderChangeCallback) => {
| React.DragEvent<HTMLDivElement> | React.DragEvent<HTMLDivElement>
| React.DragEvent<HTMLButtonElement> | React.DragEvent<HTMLButtonElement>
| React.DragEvent<HTMLAnchorElement>, | React.DragEvent<HTMLAnchorElement>,
folderId: string, folderId: string
) => { ) => {
if (e.dataTransfer.types.some((types) => types === "Files")) { if (e.dataTransfer.types.some((types) => types === "Files")) {
setFolderDragging(true); setFolderDragging(true);
@ -73,7 +73,7 @@ const useFileDrop = (folderId, folderChangeCallback) => {
e: e:
| React.DragEvent<HTMLDivElement> | React.DragEvent<HTMLDivElement>
| React.DragEvent<HTMLButtonElement> | React.DragEvent<HTMLButtonElement>
| React.DragEvent<HTMLAnchorElement>, | React.DragEvent<HTMLAnchorElement>
) => { ) => {
e.preventDefault(); e.preventDefault();
if (e.target === e.currentTarget) { if (e.target === e.currentTarget) {
@ -87,7 +87,7 @@ const useFileDrop = (folderId, folderChangeCallback) => {
| React.DragEvent<HTMLDivElement> | React.DragEvent<HTMLDivElement>
| React.DragEvent<HTMLButtonElement> | React.DragEvent<HTMLButtonElement>
| React.DragEvent<HTMLAnchorElement>, | React.DragEvent<HTMLAnchorElement>,
folderId: string, folderId: string
) => { ) => {
if (e?.dataTransfer?.getData("flow")) { if (e?.dataTransfer?.getData("flow")) {
const data = JSON.parse(e?.dataTransfer?.getData("flow")); const data = JSON.parse(e?.dataTransfer?.getData("flow"));

4
src/frontend/src/components/tableComponent/components/TableOptions/index.tsx
View file

@ -33,7 +33,7 @@ export default function TableOptions({
name="RotateCcw" name="RotateCcw"
strokeWidth={2} strokeWidth={2}
className={cn( className={cn(
"h-5 w-5 text-primary transition-all hover:text-accent-foreground", "h-5 w-5 text-primary transition-all hover:text-accent-foreground"
)} )}
/> />
</Button> </Button>
@ -85,7 +85,7 @@ export default function TableOptions({
name="Trash2" name="Trash2"
className={cn( className={cn(
"h-5 w-5 text-primary transition-all", "h-5 w-5 text-primary transition-all",
!hasSelection ? "" : "hover:text-status-red ", !hasSelection ? "" : "hover:text-status-red "
)} )}
/> />
</Button> </Button>

3
src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx
View file

@ -1,6 +1,5 @@
import { CustomCellRendererProps } from "ag-grid-react"; import { CustomCellRendererProps } from "ag-grid-react";
import { cn, isTimeStampString } from "../../../../utils/utils"; import { cn, isTimeStampString } from "../../../../utils/utils";
import ArrayReader from "../../../arrayReaderComponent";
import DateReader from "../../../dateReaderComponent"; import DateReader from "../../../dateReaderComponent";
import NumberReader from "../../../numberReader"; import NumberReader from "../../../numberReader";
import ObjectRender from "../../../objectRender"; import ObjectRender from "../../../objectRender";
@ -31,7 +30,7 @@ export default function TableAutoCellRender({
variant="outline" variant="outline"
size="sq" size="sq"
className={cn( className={cn(
"min-w-min bg-success-background text-success-foreground hover:bg-success-background", "min-w-min bg-success-background text-success-foreground hover:bg-success-background"
)} )}
> >
{value} {value}

6
src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx
View file

@ -63,8 +63,8 @@ export default function TableNodeCellRender({
...id, ...id,
proxy: templateData.proxy, proxy: templateData.proxy,
} }
: id, : id
), )
) ?? false; ) ?? false;
function getCellType() { function getCellType() {
switch (templateData.type) { switch (templateData.type) {
@ -135,7 +135,7 @@ export default function TableNodeCellRender({
<div <div
className={classNames( className={classNames(
"max-h-48 w-full overflow-auto custom-scroll", "max-h-48 w-full overflow-auto custom-scroll",
templateValue?.length > 1 ? "my-3" : "", templateValue?.length > 1 ? "my-3" : ""
)} )}
> >
<KeypairListComponent <KeypairListComponent

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

@ -12,7 +12,6 @@ import { cn, toTitleCase } from "../../utils/utils";
import ForwardedIconComponent from "../genericIconComponent"; import ForwardedIconComponent from "../genericIconComponent";
import { Alert, AlertDescription, AlertTitle } from "../ui/alert"; import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
import TableOptions from "./components/TableOptions"; import TableOptions from "./components/TableOptions";
import { useParams } from "react-router-dom";
import resetGrid from "./utils/reset-grid-columns"; import resetGrid from "./utils/reset-grid-columns";
interface TableComponentProps extends AgGridReactProps { interface TableComponentProps extends AgGridReactProps {
@ -35,7 +34,7 @@ const TableComponent = forwardRef<
alertDescription = DEFAULT_TABLE_ALERT_MSG, alertDescription = DEFAULT_TABLE_ALERT_MSG,
...props ...props
}, },
ref, ref
) => { ) => {
let colDef = props.columnDefs.map((col, index) => { let colDef = props.columnDefs.map((col, index) => {
let newCol = { let newCol = {
@ -98,7 +97,7 @@ const TableComponent = forwardRef<
const onColumnMoved = (params) => { const onColumnMoved = (params) => {
const updatedColumnDefs = makeLastColumnNonResizable( const updatedColumnDefs = makeLastColumnNonResizable(
params.columnApi.getAllGridColumns().map((col) => col.getColDef()), params.columnApi.getAllGridColumns().map((col) => col.getColDef())
); );
params.api.setGridOption("columnDefs", updatedColumnDefs); params.api.setGridOption("columnDefs", updatedColumnDefs);
if (props.onColumnMoved) props.onColumnMoved(params); if (props.onColumnMoved) props.onColumnMoved(params);
@ -123,7 +122,7 @@ const TableComponent = forwardRef<
className={cn( className={cn(
dark ? "ag-theme-quartz-dark" : "ag-theme-quartz", dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
"ag-theme-shadcn flex h-full flex-col", "ag-theme-shadcn flex h-full flex-col",
"relative", "relative"
)} // applying the grid theme )} // applying the grid theme
> >
<AgGridReact <AgGridReact
@ -161,7 +160,7 @@ const TableComponent = forwardRef<
/> />
</div> </div>
); );
}, }
); );
export default TableComponent; export default TableComponent;

2
src/frontend/src/components/tagsSelectorComponent/index.tsx
View file

@ -48,7 +48,7 @@ export function TagsSelector({
className={cn( className={cn(
selectedTags.some((category) => category === tag.name) selectedTags.some((category) => category === tag.name)
? "min-w-min bg-beta-foreground text-background hover:bg-beta-foreground" ? "min-w-min bg-beta-foreground text-background hover:bg-beta-foreground"
: "", : ""
)} )}
> >
{tag.name} {tag.name}

6
src/frontend/src/components/ui/accordion.tsx
View file

@ -34,7 +34,7 @@ const AccordionTrigger = React.forwardRef<
<div <div
className={cn( className={cn(
"flex flex-1 cursor-pointer items-center justify-between py-4 text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180", "flex flex-1 cursor-pointer items-center justify-between py-4 text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180",
className, className
)} )}
> >
{children} {children}
@ -46,7 +46,7 @@ const AccordionTrigger = React.forwardRef<
<ChevronDownIcon <ChevronDownIcon
className={cn( className={cn(
"h-4 w-4 font-bold transition-transform duration-200", "h-4 w-4 font-bold transition-transform duration-200",
disabled ? "text-muted-foreground" : "text-primary", disabled ? "text-muted-foreground" : "text-primary"
)} )}
/> />
</ShadTooltip> </ShadTooltip>
@ -64,7 +64,7 @@ const AccordionContent = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm", "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
className, className
)} )}
{...props} {...props}
> >

2
src/frontend/src/components/ui/alert.tsx
View file

@ -15,7 +15,7 @@ const alertVariants = cva(
defaultVariants: { defaultVariants: {
variant: "default", variant: "default",
}, },
}, }
); );
const Alert = React.forwardRef< const Alert = React.forwardRef<

6
src/frontend/src/components/ui/button.tsx
View file

@ -35,7 +35,7 @@ const buttonVariants = cva(
variant: "default", variant: "default",
size: "default", size: "default",
}, },
}, }
); );
export interface ButtonProps export interface ButtonProps
@ -65,7 +65,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
children, children,
...props ...props
}, },
ref, ref
) => { ) => {
const Comp = asChild ? Slot : "button"; const Comp = asChild ? Slot : "button";
let newChildren = children; let newChildren = children;
@ -97,7 +97,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
</Comp> </Comp>
</> </>
); );
}, }
); );
Button.displayName = "Button"; Button.displayName = "Button";

4
src/frontend/src/components/ui/card.tsx
View file

@ -9,7 +9,7 @@ const Card = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"flex flex-col justify-between rounded-lg border bg-muted text-card-foreground shadow-sm transition-all", "flex flex-col justify-between rounded-lg border bg-muted text-card-foreground shadow-sm transition-all",
className, className
)} )}
{...props} {...props}
/> />
@ -36,7 +36,7 @@ const CardTitle = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"text-base font-semibold leading-tight tracking-tight", "text-base font-semibold leading-tight tracking-tight",
className, className
)} )}
{...props} {...props}
/> />

4
src/frontend/src/components/ui/checkbox.tsx
View file

@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className, className
)} )}
{...props} {...props}
> >
@ -37,7 +37,7 @@ const CheckBoxDiv = ({
className={cn( className={cn(
className, className,
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
checked ? "bg-primary text-primary-foreground" : "", checked ? "bg-primary text-primary-foreground" : ""
)} )}
> >
{checked && ( {checked && (

4
src/frontend/src/components/ui/custom-accordion.tsx
View file

@ -24,7 +24,7 @@ const AccordionTrigger = React.forwardRef<
<div <div
className={cn( className={cn(
" flex flex-1 cursor-pointer items-center justify-between border-[1px] py-2 text-sm font-medium data-[state=closed]:rounded-md data-[state=open]:rounded-t-md data-[state=open]:border-b-0 data-[state=open]:bg-muted [&[data-state=open]>svg]:rotate-180", " flex flex-1 cursor-pointer items-center justify-between border-[1px] py-2 text-sm font-medium data-[state=closed]:rounded-md data-[state=open]:rounded-t-md data-[state=open]:border-b-0 data-[state=open]:bg-muted [&[data-state=open]>svg]:rotate-180",
className, className
)} )}
> >
{children} {children}
@ -43,7 +43,7 @@ const AccordionContent = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden border-[1px] text-sm data-[state=open]:rounded-b-md data-[state=open]:border-t-0 data-[state=open]:bg-muted", "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden border-[1px] text-sm data-[state=open]:rounded-b-md data-[state=open]:border-t-0 data-[state=open]:bg-muted",
className, className
)} )}
{...props} {...props}
> >

8
src/frontend/src/components/ui/form.tsx
View file

@ -16,18 +16,18 @@ const Form = FormProvider;
type FormFieldContextValue< type FormFieldContextValue<
TFieldValues extends FieldValues = FieldValues, TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = { > = {
name: TName; name: TName;
}; };
const FormFieldContext = React.createContext<FormFieldContextValue>( const FormFieldContext = React.createContext<FormFieldContextValue>(
{} as FormFieldContextValue, {} as FormFieldContextValue
); );
const FormField = < const FormField = <
TFieldValues extends FieldValues = FieldValues, TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({ >({
...props ...props
}: ControllerProps<TFieldValues, TName>) => { }: ControllerProps<TFieldValues, TName>) => {
@ -66,7 +66,7 @@ type FormItemContextValue = {
}; };
const FormItemContext = React.createContext<FormItemContextValue>( const FormItemContext = React.createContext<FormItemContextValue>(
{} as FormItemContextValue, {} as FormItemContextValue
); );
const FormItem = React.forwardRef< const FormItem = React.forwardRef<

6
src/frontend/src/components/ui/select-custom.tsx
View file

@ -36,7 +36,7 @@ const SelectContent = React.forwardRef<
"relative z-50 min-w-[14rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "relative z-50 min-w-[14rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" && position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className, className
)} )}
position={position} position={position}
{...props} {...props}
@ -45,7 +45,7 @@ const SelectContent = React.forwardRef<
className={cn( className={cn(
"p-1", "p-1",
position === "popper" && position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]", "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
)} )}
> >
{children} {children}
@ -75,7 +75,7 @@ const SelectItem = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-3 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-3 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className, className
)} )}
{...props} {...props}
> >

2
src/frontend/src/components/ui/toggle.tsx
View file

@ -25,7 +25,7 @@ const toggleVariants = cva(
variant: "default", variant: "default",
size: "default", size: "default",
}, },
}, }
); );
const Toggle = React.forwardRef< const Toggle = React.forwardRef<

4
src/frontend/src/components/ui/tooltip.tsx
View file

@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"z-45 overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1", "z-45 overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
className, className
)} )}
{...props} {...props}
/> />
@ -37,7 +37,7 @@ const TooltipContentWithoutPortal = React.forwardRef<
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"z-45 overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1", "z-45 overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
className, className
)} )}
{...props} {...props}
/> />

12
src/frontend/src/controllers/API/api.tsx
View file

@ -1,4 +1,4 @@
import axios, { Axios, AxiosError, AxiosInstance } from "axios"; import axios, { AxiosError, AxiosInstance } from "axios";
import { useContext, useEffect } from "react"; import { useContext, useEffect } from "react";
import { Cookies } from "react-cookie"; import { Cookies } from "react-cookie";
import { renewAccessToken } from "."; import { renewAccessToken } from ".";
@ -48,7 +48,7 @@ function ApiInterceptor() {
} }
await clearBuildVerticesState(error); await clearBuildVerticesState(error);
return Promise.reject(error); return Promise.reject(error);
}, }
); );
const isAuthorizedURL = (url) => { const isAuthorizedURL = (url) => {
@ -65,10 +65,10 @@ function ApiInterceptor() {
const parsedURL = new URL(url); const parsedURL = new URL(url);
const isDomainAllowed = authorizedDomains.some( const isDomainAllowed = authorizedDomains.some(
(domain) => parsedURL.origin === new URL(domain).origin, (domain) => parsedURL.origin === new URL(domain).origin
); );
const isEndpointAllowed = authorizedEndpoints.some((endpoint) => const isEndpointAllowed = authorizedEndpoints.some((endpoint) =>
parsedURL.pathname.includes(endpoint), parsedURL.pathname.includes(endpoint)
); );
return isDomainAllowed || isEndpointAllowed; return isDomainAllowed || isEndpointAllowed;
@ -101,7 +101,7 @@ function ApiInterceptor() {
}, },
(error) => { (error) => {
return Promise.reject(error); return Promise.reject(error);
}, }
); );
return () => { return () => {
@ -133,7 +133,7 @@ function ApiInterceptor() {
if (error?.config?.headers) { if (error?.config?.headers) {
delete error.config.headers["Authorization"]; delete error.config.headers["Authorization"];
error.config.headers["Authorization"] = `Bearer ${cookies.get( error.config.headers["Authorization"] = `Bearer ${cookies.get(
"access_token_lf", "access_token_lf"
)}`; )}`;
const response = await axios.request(error.config); const response = await axios.request(error.config);
return response; return response;

2
src/frontend/src/controllers/API/helpers/check-duplicate-requests.ts
View file

@ -8,7 +8,7 @@ export function checkDuplicateRequestAndStoreRequest(config) {
const currentTime = Date.now(); const currentTime = Date.now();
const isContained = AUTHORIZED_DUPLICATE_REQUESTS.some((request) => const isContained = AUTHORIZED_DUPLICATE_REQUESTS.some((request) =>
config?.url!.includes(request), config?.url!.includes(request)
); );
if ( if (

2
src/frontend/src/icons/Groq/index.tsx
View file

@ -4,5 +4,5 @@ import SvgGroqLogo from "./GroqLogo";
export const GroqIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>( export const GroqIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
(props, ref) => { (props, ref) => {
return <SvgGroqLogo ref={ref} {...props} />; return <SvgGroqLogo ref={ref} {...props} />;
}, }
); );

28
src/frontend/src/icons/LangChain/LangChainIcon.jsx
View file

@ -1,10 +1,24 @@
const SvgLangChainIcon = (props) => ( const SvgLangChainIcon = (props) => (
<svg viewBox="0 0 81 41" fill="none" height="200" width="400" xmlns="http://www.w3.org/2000/svg" {...props}> <svg
<path d="M61.514 11.157a3.94 3.94 0 0 0-2.806 1.158l-3.018 3.01a3.95 3.95 0 0 0-1.147 3.095l.019.191a3.9 3.9 0 0 0 1.128 2.314 3.6 3.6 0 0 0 1.496.9q.046.263.047.53c0 .797-.31 1.546-.874 2.107l-.186.186c-1.008-.344-1.848-.847-2.607-1.604a6.9 6.9 0 0 1-1.927-3.67l-.034-.193-.153.124a4 4 0 0 0-.294.265l-3.018 3.01a3.957 3.957 0 0 0 2.807 6.757 3.96 3.96 0 0 0 2.806-1.158l3.019-3.01a3.96 3.96 0 0 0 0-5.599 3.9 3.9 0 0 0-1.462-.92 3.25 3.25 0 0 1 .924-2.855 6.9 6.9 0 0 1 2.664 1.656 6.9 6.9 0 0 1 1.926 3.67l.035.193.153-.124q.155-.125.296-.267l3.018-3.01a3.956 3.956 0 0 0-2.808-6.756z" fill="CurrentColor"/> viewBox="0 0 81 41"
<path d="M59.897.149h-39.49C9.153.149 0 9.279 0 20.5c0 11.222 9.154 20.351 20.406 20.351h39.49c11.253 0 20.407-9.13 20.407-20.35C80.303 9.277 71.149.148 59.897.148M40.419 32.056c-.651.134-1.384.158-1.882-.36-.183.42-.612.199-.943.144-.03.085-.057.16-.085.246-1.1.073-1.925-1.046-2.449-1.89-1.04-.562-2.222-.904-3.285-1.492-.062.968.15 2.17-.774 2.794-.047 1.862 2.824.22 3.088 1.608-.204.022-.43-.033-.594.124-.749.726-1.608-.55-2.471-.023-1.16.582-1.276 1.059-2.71 1.179-.08-.12-.047-.2.02-.273.404-.468.433-1.02 1.122-1.22-.71-.111-1.303.28-1.901.59-.778.317-.772-.717-1.968.054-.132-.108-.069-.206.007-.289.304-.37.704-.425 1.155-.405-2.219-1.233-3.263 1.508-4.288.145-.308.081-.424.358-.618.553-.167-.183-.04-.405-.033-.62-.2-.094-.453-.139-.394-.459-.391-.132-.665.1-.957.32-.263-.203.178-.5.26-.712.234-.407.769-.084 1.04-.377.772-.437 1.847.273 2.729.153.68.085 1.52-.61 1.179-1.305-.726-.926-.598-2.137-.614-3.244-.09-.645-1.643-1.467-2.092-2.163-.555-.627-.987-1.353-1.42-2.068-1.561-3.014-1.07-6.886-3.037-9.685-.89.49-2.048.259-2.816-.399-.414.377-.432.87-.465 1.392-.994-.99-.87-2.863-.075-3.966a5.3 5.3 0 0 1 1.144-1.11c.098-.07.131-.14.129-.25.786-3.524 6.144-2.845 7.838-.348 1.229 1.537 1.6 3.57 2.994 4.997 1.875 2.047 4.012 3.85 5.742 6.03 1.637 1.992 2.806 4.328 3.826 6.683.416.782.42 1.74 1.037 2.408.304.403 1.79 1.5 1.467 1.888.186.403 1.573.959 1.092 1.35zm26.026-12.024-3.018 3.01a6.96 6.96 0 0 1-2.875 1.728l-.056.016-.02.053a6.9 6.9 0 0 1-1.585 2.446l-3.019 3.01a6.94 6.94 0 0 1-4.932 2.035 6.94 6.94 0 0 1-4.932-2.035 6.95 6.95 0 0 1 0-9.838l3.018-3.01a6.9 6.9 0 0 1 2.871-1.721l.055-.017.02-.053a6.9 6.9 0 0 1 1.59-2.454l3.019-3.01a6.94 6.94 0 0 1 4.932-2.035c1.865 0 3.616.723 4.932 2.035a6.9 6.9 0 0 1 2.04 4.92c0 1.86-.724 3.607-2.04 4.918z" fill="CurrentColor"/> fill="none"
<path d="M28.142 28.413c-.265 1.03-.35 2.782-1.694 2.832-.11.595.413.819.89.627.472-.215.696.171.855.556.729.106 1.806-.242 1.847-1.103-1.088-.625-1.424-1.813-1.896-2.914z" fill="CurrentColor"/> height="200"
</svg> width="400"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M61.514 11.157a3.94 3.94 0 0 0-2.806 1.158l-3.018 3.01a3.95 3.95 0 0 0-1.147 3.095l.019.191a3.9 3.9 0 0 0 1.128 2.314 3.6 3.6 0 0 0 1.496.9q.046.263.047.53c0 .797-.31 1.546-.874 2.107l-.186.186c-1.008-.344-1.848-.847-2.607-1.604a6.9 6.9 0 0 1-1.927-3.67l-.034-.193-.153.124a4 4 0 0 0-.294.265l-3.018 3.01a3.957 3.957 0 0 0 2.807 6.757 3.96 3.96 0 0 0 2.806-1.158l3.019-3.01a3.96 3.96 0 0 0 0-5.599 3.9 3.9 0 0 0-1.462-.92 3.25 3.25 0 0 1 .924-2.855 6.9 6.9 0 0 1 2.664 1.656 6.9 6.9 0 0 1 1.926 3.67l.035.193.153-.124q.155-.125.296-.267l3.018-3.01a3.956 3.956 0 0 0-2.808-6.756z"
fill="CurrentColor"
/>
<path
d="M59.897.149h-39.49C9.153.149 0 9.279 0 20.5c0 11.222 9.154 20.351 20.406 20.351h39.49c11.253 0 20.407-9.13 20.407-20.35C80.303 9.277 71.149.148 59.897.148M40.419 32.056c-.651.134-1.384.158-1.882-.36-.183.42-.612.199-.943.144-.03.085-.057.16-.085.246-1.1.073-1.925-1.046-2.449-1.89-1.04-.562-2.222-.904-3.285-1.492-.062.968.15 2.17-.774 2.794-.047 1.862 2.824.22 3.088 1.608-.204.022-.43-.033-.594.124-.749.726-1.608-.55-2.471-.023-1.16.582-1.276 1.059-2.71 1.179-.08-.12-.047-.2.02-.273.404-.468.433-1.02 1.122-1.22-.71-.111-1.303.28-1.901.59-.778.317-.772-.717-1.968.054-.132-.108-.069-.206.007-.289.304-.37.704-.425 1.155-.405-2.219-1.233-3.263 1.508-4.288.145-.308.081-.424.358-.618.553-.167-.183-.04-.405-.033-.62-.2-.094-.453-.139-.394-.459-.391-.132-.665.1-.957.32-.263-.203.178-.5.26-.712.234-.407.769-.084 1.04-.377.772-.437 1.847.273 2.729.153.68.085 1.52-.61 1.179-1.305-.726-.926-.598-2.137-.614-3.244-.09-.645-1.643-1.467-2.092-2.163-.555-.627-.987-1.353-1.42-2.068-1.561-3.014-1.07-6.886-3.037-9.685-.89.49-2.048.259-2.816-.399-.414.377-.432.87-.465 1.392-.994-.99-.87-2.863-.075-3.966a5.3 5.3 0 0 1 1.144-1.11c.098-.07.131-.14.129-.25.786-3.524 6.144-2.845 7.838-.348 1.229 1.537 1.6 3.57 2.994 4.997 1.875 2.047 4.012 3.85 5.742 6.03 1.637 1.992 2.806 4.328 3.826 6.683.416.782.42 1.74 1.037 2.408.304.403 1.79 1.5 1.467 1.888.186.403 1.573.959 1.092 1.35zm26.026-12.024-3.018 3.01a6.96 6.96 0 0 1-2.875 1.728l-.056.016-.02.053a6.9 6.9 0 0 1-1.585 2.446l-3.019 3.01a6.94 6.94 0 0 1-4.932 2.035 6.94 6.94 0 0 1-4.932-2.035 6.95 6.95 0 0 1 0-9.838l3.018-3.01a6.9 6.9 0 0 1 2.871-1.721l.055-.017.02-.053a6.9 6.9 0 0 1 1.59-2.454l3.019-3.01a6.94 6.94 0 0 1 4.932-2.035c1.865 0 3.616.723 4.932 2.035a6.9 6.9 0 0 1 2.04 4.92c0 1.86-.724 3.607-2.04 4.918z"
fill="CurrentColor"
/>
<path
d="M28.142 28.413c-.265 1.03-.35 2.782-1.694 2.832-.11.595.413.819.89.627.472-.215.696.171.855.556.729.106 1.806-.242 1.847-1.103-1.088-.625-1.424-1.813-1.896-2.914z"
fill="CurrentColor"
/>
</svg>
); );
export default SvgLangChainIcon; export default SvgLangChainIcon;

2
src/frontend/src/icons/Streamlit/index.tsx
View file

@ -4,5 +4,5 @@ import SvgStreamlit from "./SvgStreamlit";
export const Streamlit = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>( export const Streamlit = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
(props, ref) => { (props, ref) => {
return <SvgStreamlit className="icon" ref={ref} {...props} />; return <SvgStreamlit className="icon" ref={ref} {...props} />;
}, }
); );

5
src/frontend/src/index.tsx
View file

@ -8,15 +8,14 @@ import "./style/index.css";
// @ts-ignore // @ts-ignore
import "./style/applies.css"; import "./style/applies.css";
// @ts-ignore // @ts-ignore
import { StrictMode } from "react";
import "./style/classes.css"; import "./style/classes.css";
const root = ReactDOM.createRoot( const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement, document.getElementById("root") as HTMLElement
); );
root.render( root.render(
<ContextWrapper> <ContextWrapper>
<App /> <App />
</ContextWrapper>, </ContextWrapper>
); );
reportWebVitals(); reportWebVitals();

4
src/frontend/src/modals/BundleModal/hooks/submit-folder.tsx
View file

@ -27,7 +27,7 @@ const useFolderSubmit = (setOpen, folderToEdit) => {
getFoldersApi(true); getFoldersApi(true);
setOpen(false); setOpen(false);
} }
}, }
); );
} else { } else {
addFolder(data).then( addFolder(data).then(
@ -42,7 +42,7 @@ const useFolderSubmit = (setOpen, folderToEdit) => {
setErrorData({ setErrorData({
title: `Error creating folder.`, title: `Error creating folder.`,
}); });
}, }
); );
} }
}; };

2
src/frontend/src/modals/IOModal/components/IOFieldView/components/csvSelect/index.tsx
View file

@ -29,7 +29,7 @@ export default function CsvSelect({ node, handleChangeSelect }): JSX.Element {
<SelectItem key={separator} value={separator}> <SelectItem key={separator} value={separator}>
{separator} {separator}
</SelectItem> </SelectItem>
), )
)} )}
</SelectGroup> </SelectGroup>
</SelectContent> </SelectContent>

2
src/frontend/src/modals/IOModal/components/SessionView/hooks/index.tsx
View file

@ -10,7 +10,7 @@ const useRemoveSession = (setSuccessData, setErrorData) => {
await deleteMessagesFn( await deleteMessagesFn(
messages messages
.filter((msg) => msg.session_id === session_id) .filter((msg) => msg.session_id === session_id)
.map((msg) => msg.index), .map((msg) => msg.index)
); );
deleteSession(session_id); deleteSession(session_id);
setSuccessData({ setSuccessData({

18
src/frontend/src/modals/IOModal/components/SessionView/index.tsx
View file

@ -1,20 +1,10 @@
import { import { CellEditRequestEvent, SelectionChangedEvent } from "ag-grid-community";
CellEditRequestEvent,
ColDef,
ColGroupDef,
SelectionChangedEvent,
} from "ag-grid-community";
import { useState } from "react"; import { useState } from "react";
import TableComponent from "../../../../components/tableComponent"; import TableComponent from "../../../../components/tableComponent";
import { Card, CardContent } from "../../../../components/ui/card"; import useRemoveMessages from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages";
import useUpdateMessage from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage";
import useAlertStore from "../../../../stores/alertStore"; import useAlertStore from "../../../../stores/alertStore";
import { useMessagesStore } from "../../../../stores/messagesStore"; import { useMessagesStore } from "../../../../stores/messagesStore";
import useUpdateMessage from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage";
import useRemoveMessages from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages";
import HeaderMessagesComponent from "../../../../pages/SettingsPage/pages/messagesPage/components/headerMessages";
import { Button } from "../../../../components/ui/button";
import ForwardedIconComponent from "../../../../components/genericIconComponent";
import { cn } from "../../../../utils/utils";
export default function SessionView({ rows }: { rows: Array<any> }) { export default function SessionView({ rows }: { rows: Array<any> }) {
const columns = useMessagesStore((state) => state.columns); const columns = useMessagesStore((state) => state.columns);
@ -27,7 +17,7 @@ export default function SessionView({ rows }: { rows: Array<any> }) {
setSelectedRows, setSelectedRows,
setSuccessData, setSuccessData,
setErrorData, setErrorData,
selectedRows, selectedRows
); );
const { handleUpdate } = useUpdateMessage(setSuccessData, setErrorData); const { handleUpdate } = useUpdateMessage(setSuccessData, setErrorData);

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

@ -28,8 +28,8 @@ const ButtonSendWrapper = ({
noInput noInput
? "bg-high-indigo text-background" ? "bg-high-indigo text-background"
: chatValue === "" : chatValue === ""
? "text-primary" ? "text-primary"
: "bg-chat-send text-background", : "bg-chat-send text-background"
)} )}
disabled={lockChat || saveLoading} disabled={lockChat || saveLoading}
onClick={(): void => send()} onClick={(): void => send()}

6
src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx
View file

@ -18,7 +18,7 @@ const TextAreaWrapper = ({
}) => { }) => {
const getPlaceholderText = ( const getPlaceholderText = (
isDragging: boolean, isDragging: boolean,
noInput: boolean, noInput: boolean
): string => { ): string => {
if (isDragging) { if (isDragging) {
return "Drop here"; return "Drop here";
@ -33,8 +33,8 @@ const TextAreaWrapper = ({
lockChat || saveLoading lockChat || saveLoading
? "form-modal-lock-true bg-input" ? "form-modal-lock-true bg-input"
: noInput : noInput
? "form-modal-no-input bg-input" ? "form-modal-no-input bg-input"
: "form-modal-lock-false bg-background"; : "form-modal-lock-false bg-background";
const fileClass = const fileClass =
files.length > 0 files.length > 0

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

@ -18,7 +18,9 @@ const UploadFileButton = ({
/> />
<Button <Button
disabled={lockChat} disabled={lockChat}
className={`font-bold text-white transition-all ${lockChat ? "cursor-not-allowed" : "hover:text-muted-foreground"}`} className={`font-bold text-white transition-all ${
lockChat ? "cursor-not-allowed" : "hover:text-muted-foreground"
}`}
onClick={handleButtonClick} onClick={handleButtonClick}
variant="none" variant="none"
size="none" size="none"

3
src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx
View file

@ -1,6 +1,5 @@
import ShortUniqueId from "short-unique-id"; import ShortUniqueId from "short-unique-id";
import useFileUpload from "./use-file-upload"; import useFileUpload from "./use-file-upload";
import useAlertStore from "../../../../../../stores/alertStore";
const fsErrorText = const fsErrorText =
"Please ensure your file has one of the following extensions:"; "Please ensure your file has one of the following extensions:";
@ -10,7 +9,7 @@ const useDragAndDrop = (
setIsDragging, setIsDragging,
setFiles, setFiles,
currentFlowId, currentFlowId,
setErrorData, setErrorData
) => { ) => {
const dragOver = (e) => { const dragOver = (e) => {
e.preventDefault(); e.preventDefault();

4
src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-handle-file-change.tsx
View file

@ -1,6 +1,6 @@
import ShortUniqueId from "short-unique-id"; import ShortUniqueId from "short-unique-id";
import useFileUpload from "./use-file-upload";
import useAlertStore from "../../../../../../stores/alertStore"; import useAlertStore from "../../../../../../stores/alertStore";
import useFileUpload from "./use-file-upload";
const fsErrorText = const fsErrorText =
"Please ensure your file has one of the following extensions:"; "Please ensure your file has one of the following extensions:";
@ -9,7 +9,7 @@ const snErrorTxt = "png, jpg, jpeg";
export const useHandleFileChange = (setFiles, currentFlowId) => { export const useHandleFileChange = (setFiles, currentFlowId) => {
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);
const handleFileChange = async ( const handleFileChange = async (
event: React.ChangeEvent<HTMLInputElement>, event: React.ChangeEvent<HTMLInputElement>
) => { ) => {
const fileInput = event.target; const fileInput = event.target;
const file = fileInput.files?.[0]; const file = fileInput.files?.[0];

2
src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx
View file

@ -1,7 +1,7 @@
import { useEffect } from "react"; import { useEffect } from "react";
import ShortUniqueId from "short-unique-id"; import ShortUniqueId from "short-unique-id";
import useFileUpload from "./use-file-upload";
import useAlertStore from "../../../../../../stores/alertStore"; import useAlertStore from "../../../../../../stores/alertStore";
import useFileUpload from "./use-file-upload";
const fsErrorText = const fsErrorText =
"Please ensure your file has one of the following extensions:"; "Please ensure your file has one of the following extensions:";

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

@ -94,7 +94,9 @@ export default function ChatInput({
</div> </div>
<div <div
className={`absolute bottom-2 left-4 ${lockChat || saveLoading ? "cursor-not-allowed" : ""}`} className={`absolute bottom-2 left-4 ${
lockChat || saveLoading ? "cursor-not-allowed" : ""
}`}
> >
<UploadFileButton <UploadFileButton
lockChat={lockChat || saveLoading} lockChat={lockChat || saveLoading}
@ -114,7 +116,7 @@ export default function ChatInput({
key={file.id} key={file.id}
onDelete={() => { onDelete={() => {
setFiles((prev: FilePreviewType[]) => setFiles((prev: FilePreviewType[]) =>
prev.filter((f) => f.id !== file.id), prev.filter((f) => f.id !== file.id)
); );
// TODO: delete file on backend // TODO: delete file on backend
}} }}

2
src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/fileCardWrapper/index.tsx
View file

@ -1,7 +1,7 @@
import { useState } from "react"; import { useState } from "react";
import ForwardedIconComponent from "../../../../../../../components/genericIconComponent"; import ForwardedIconComponent from "../../../../../../../components/genericIconComponent";
import formatFileName from "../../../filePreviewChat/utils/format-file-name";
import FileCard from "../../../fileComponent"; import FileCard from "../../../fileComponent";
import formatFileName from "../../../filePreviewChat/utils/format-file-name";
export default function FileCardWrapper({ export default function FileCardWrapper({
index, index,

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

@ -7,16 +7,12 @@ import remarkMath from "remark-math";
import MaleTechnology from "../../../../../assets/male-technologist.png"; import MaleTechnology from "../../../../../assets/male-technologist.png";
import Robot from "../../../../../assets/robot.png"; import Robot from "../../../../../assets/robot.png";
import CodeTabsComponent from "../../../../../components/codeTabsComponent"; import CodeTabsComponent from "../../../../../components/codeTabsComponent";
import IconComponent, { import IconComponent from "../../../../../components/genericIconComponent";
ForwardedIconComponent,
} from "../../../../../components/genericIconComponent";
import SanitizedHTMLWrapper from "../../../../../components/sanitizedHTMLWrapper"; import SanitizedHTMLWrapper from "../../../../../components/sanitizedHTMLWrapper";
import useAlertStore from "../../../../../stores/alertStore"; import useAlertStore from "../../../../../stores/alertStore";
import useFlowStore from "../../../../../stores/flowStore"; import useFlowStore from "../../../../../stores/flowStore";
import { chatMessagePropsType } from "../../../../../types/components"; import { chatMessagePropsType } from "../../../../../types/components";
import { classNames, cn } from "../../../../../utils/utils"; import { classNames, cn } from "../../../../../utils/utils";
import FileCard from "../fileComponent";
import formatFileName from "../filePreviewChat/utils/format-file-name";
import FileCardWrapper from "./components/fileCardWrapper"; import FileCardWrapper from "./components/fileCardWrapper";
export default function ChatMessage({ export default function ChatMessage({
@ -119,19 +115,19 @@ export default function ChatMessage({
<div <div
className={classNames( className={classNames(
"form-modal-chat-position", "form-modal-chat-position",
chat.isSend ? "" : " ", chat.isSend ? "" : " "
)} )}
> >
<div <div
className={classNames( className={classNames(
"mr-3 mt-1 flex w-24 flex-col items-center gap-1 overflow-hidden px-3 pb-3", "mr-3 mt-1 flex w-24 flex-col items-center gap-1 overflow-hidden px-3 pb-3"
)} )}
> >
<div className="flex flex-col items-center gap-1"> <div className="flex flex-col items-center gap-1">
<div <div
className={cn( className={cn(
"relative flex h-8 w-8 items-center justify-center overflow-hidden rounded-md p-5 text-2xl", "relative flex h-8 w-8 items-center justify-center overflow-hidden rounded-md p-5 text-2xl",
!chat.isSend ? "bg-chat-bot-icon" : "bg-chat-user-icon", !chat.isSend ? "bg-chat-bot-icon" : "bg-chat-user-icon"
)} )}
> >
<img <img
@ -215,12 +211,12 @@ dark:prose-invert"
children[0] = (children[0] as string).replace( children[0] = (children[0] as string).replace(
"`▍`", "`▍`",
"▍", "▍"
); );
} }
const match = /language-(\w+)/.exec( const match = /language-(\w+)/.exec(
className || "", className || ""
); );
return !inline ? ( return !inline ? (
@ -235,7 +231,7 @@ dark:prose-invert"
language: (match && match[1]) || "", language: (match && match[1]) || "",
code: String(children).replace( code: String(children).replace(
/\n$/, /\n$/,
"", ""
), ),
}, },
]} ]}
@ -253,7 +249,7 @@ dark:prose-invert"
{chatMessage} {chatMessage}
</Markdown> </Markdown>
), ),
[chat.message, chatMessage], [chat.message, chatMessage]
)} )}
</div> </div>
</div> </div>
@ -296,7 +292,7 @@ dark:prose-invert"
parts.push( parts.push(
<span className="chat-message-highlight"> <span className="chat-message-highlight">
{chat.message[match[1]]} {chat.message[match[1]]}
</span>, </span>
); );
} }

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

@ -29,7 +29,7 @@ export default function FileCard({
const imgSrc = `${BACKEND_URL.slice( const imgSrc = `${BACKEND_URL.slice(
0, 0,
BACKEND_URL.length - 1, BACKEND_URL.length - 1
)}${BASE_URL_API}files/images/${content}`; )}${BASE_URL_API}files/images/${content}`;
console.log(imgSrc); console.log(imgSrc);

4
src/frontend/src/modals/IOModal/components/chatView/fileComponent/utils/get-classes.tsx
View file

@ -1,5 +1,7 @@
export default function getClasses(isHovered: boolean): string { export default function getClasses(isHovered: boolean): string {
return `relative ${false ? "h-20 w-20" : "h-20 w-80"} cursor-pointer rounded-lg border border-ring bg-muted shadow transition duration-300 hover:drop-shadow-lg ${ return `relative ${
false ? "h-20 w-20" : "h-20 w-80"
} cursor-pointer rounded-lg border border-ring bg-muted shadow transition duration-300 hover:drop-shadow-lg ${
isHovered ? "shadow-md" : "" isHovered ? "shadow-md" : ""
}`; }`;
} }

5
src/frontend/src/modals/IOModal/components/chatView/fileComponent/utils/handle-download.tsx
View file

@ -18,7 +18,10 @@ export default async function handleDownload({
isDownloading = true; isDownloading = true;
const response = await fetch( const response = await fetch(
`${BACKEND_URL.slice(0, BACKEND_URL.length - 1)}${BASE_URL_API}files/download/${content}`, `${BACKEND_URL.slice(
0,
BACKEND_URL.length - 1
)}${BASE_URL_API}files/download/${content}`
); );
if (!response.ok) { if (!response.ok) {
throw new Error("Network response was not ok"); throw new Error("Network response was not ok");

2
src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/utils/format-file-name.tsx
View file

@ -1,6 +1,6 @@
export default function formatFileName( export default function formatFileName(
name: string, name: string,
numberToTruncate: number = 25, numberToTruncate: number = 25
): string { ): string {
if (name[numberToTruncate] === undefined) { if (name[numberToTruncate] === undefined) {
return name; return name;

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

@ -131,7 +131,7 @@ export default function ChatView({
function updateChat( function updateChat(
chat: ChatMessageType, chat: ChatMessageType,
message: string, message: string,
stream_url?: string, stream_url?: string
) { ) {
// if (message === "") return; // if (message === "") return;
chat.message = message; chat.message = message;
@ -161,7 +161,7 @@ export default function ChatView({
setIsDragging, setIsDragging,
setFiles, setFiles,
currentFlowId, currentFlowId,
setErrorData, setErrorData
); );
return ( return (

38
src/frontend/src/modals/IOModal/index.tsx
View file

@ -36,25 +36,25 @@ export default function IOModal({
const allNodes = useFlowStore((state) => state.nodes); const allNodes = useFlowStore((state) => state.nodes);
const setMessages = useMessagesStore((state) => state.setMessages); const setMessages = useMessagesStore((state) => state.setMessages);
const inputs = useFlowStore((state) => state.inputs).filter( const inputs = useFlowStore((state) => state.inputs).filter(
(input) => input.type !== "ChatInput", (input) => input.type !== "ChatInput"
); );
const chatInput = useFlowStore((state) => state.inputs).find( const chatInput = useFlowStore((state) => state.inputs).find(
(input) => input.type === "ChatInput", (input) => input.type === "ChatInput"
); );
const outputs = useFlowStore((state) => state.outputs).filter( const outputs = useFlowStore((state) => state.outputs).filter(
(output) => output.type !== "ChatOutput", (output) => output.type !== "ChatOutput"
); );
const chatOutput = useFlowStore((state) => state.outputs).find( const chatOutput = useFlowStore((state) => state.outputs).find(
(output) => output.type === "ChatOutput", (output) => output.type === "ChatOutput"
); );
const nodes = useFlowStore((state) => state.nodes).filter( const nodes = useFlowStore((state) => state.nodes).filter(
(node) => (node) =>
inputs.some((input) => input.id === node.id) || inputs.some((input) => input.id === node.id) ||
outputs.some((output) => output.id === node.id), outputs.some((output) => output.id === node.id)
); );
const haveChat = chatInput || chatOutput; const haveChat = chatInput || chatOutput;
const [selectedTab, setSelectedTab] = useState( const [selectedTab, setSelectedTab] = useState(
inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0, inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0
); );
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);
const setSuccessData = useAlertStore((state) => state.setSuccessData); const setSuccessData = useAlertStore((state) => state.setSuccessData);
@ -127,7 +127,7 @@ export default function IOModal({
const { handleRemoveSession } = useRemoveSession( const { handleRemoveSession } = useRemoveSession(
setSuccessData, setSuccessData,
setErrorData, setErrorData
); );
useEffect(() => { useEffect(() => {
@ -188,7 +188,7 @@ export default function IOModal({
<div className="flex-max-width h-full"> <div className="flex-max-width h-full">
<div <div
className={cn( className={cn(
"mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300", "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300"
)} )}
> >
<Tabs <Tabs
@ -217,11 +217,11 @@ export default function IOModal({
<TabsContent value={"1"} className="api-modal-tabs-content"> <TabsContent value={"1"} className="api-modal-tabs-content">
{nodes {nodes
.filter((node) => .filter((node) =>
inputs.some((input) => input.id === node.id), inputs.some((input) => input.id === node.id)
) )
.map((node, index) => { .map((node, index) => {
const input = inputs.find( const input = inputs.find(
(input) => input.id === node.id, (input) => input.id === node.id
)!; )!;
return ( return (
<div <div
@ -282,11 +282,11 @@ export default function IOModal({
<TabsContent value={"2"} className="api-modal-tabs-content"> <TabsContent value={"2"} className="api-modal-tabs-content">
{nodes {nodes
.filter((node) => .filter((node) =>
outputs.some((output) => output.id === node.id), outputs.some((output) => output.id === node.id)
) )
.map((node, index) => { .map((node, index) => {
const output = outputs.find( const output = outputs.find(
(output) => output.id === node.id, (output) => output.id === node.id
)!; )!;
return ( return (
<div <div
@ -418,7 +418,7 @@ export default function IOModal({
<div <div
className={cn( className={cn(
"flex h-full w-full flex-col items-start gap-4 pt-4", "flex h-full w-full flex-col items-start gap-4 pt-4",
!selectedViewField ? "hidden" : "", !selectedViewField ? "hidden" : ""
)} )}
> >
<div className="font-xl flex items-center justify-center gap-3 font-semibold"> <div className="font-xl flex items-center justify-center gap-3 font-semibold">
@ -437,7 +437,7 @@ export default function IOModal({
</div> </div>
<div className="h-full w-full"> <div className="h-full w-full">
{inputs.some( {inputs.some(
(input) => input.id === selectedViewField.id, (input) => input.id === selectedViewField.id
) && ( ) && (
<IOFieldView <IOFieldView
type={InputOutput.INPUT} type={InputOutput.INPUT}
@ -447,7 +447,7 @@ export default function IOModal({
/> />
)} )}
{outputs.some( {outputs.some(
(output) => output.id === selectedViewField.id, (output) => output.id === selectedViewField.id
) && ( ) && (
<IOFieldView <IOFieldView
type={InputOutput.OUTPUT} type={InputOutput.OUTPUT}
@ -457,12 +457,12 @@ export default function IOModal({
/> />
)} )}
{sessions.some( {sessions.some(
(session) => session === selectedViewField.id, (session) => session === selectedViewField.id
) && ( ) && (
<SessionView <SessionView
rows={messages.filter( rows={messages.filter(
(message) => (message) =>
message.session_id === selectedViewField.id, message.session_id === selectedViewField.id
)} )}
/> />
)} )}
@ -472,7 +472,7 @@ export default function IOModal({
<div <div
className={cn( className={cn(
"flex h-full w-full", "flex h-full w-full",
selectedViewField ? "hidden" : "", selectedViewField ? "hidden" : ""
)} )}
> >
{haveChat ? ( {haveChat ? (
@ -504,7 +504,7 @@ export default function IOModal({
"h-4 w-4", "h-4 w-4",
isBuilding isBuilding
? "animate-spin" ? "animate-spin"
: "fill-current text-medium-indigo", : "fill-current text-medium-indigo"
)} )}
/> />
), ),

2
src/frontend/src/modals/apiModal/utils/check-can-build-tweak-object.ts
View file

@ -6,7 +6,7 @@ export const checkCanBuildTweakObject = (element, templateField) => {
templateField.charAt(0) !== "_" && templateField.charAt(0) !== "_" &&
element.data.node.template[templateField].show && element.data.node.template[templateField].show &&
LANGFLOW_SUPPORTED_TYPES.has( LANGFLOW_SUPPORTED_TYPES.has(
element.data.node.template[templateField].type, element.data.node.template[templateField].type
) && ) &&
templateField !== "code" templateField !== "code"
); );

2
src/frontend/src/modals/apiModal/utils/get-changes-types.ts
View file

@ -3,7 +3,7 @@ import { convertArrayToObj } from "../../../utils/reactflowUtils";
export const getChangesType = ( export const getChangesType = (
changes: string | string[] | boolean | number | Object[] | Object, changes: string | string[] | boolean | number | Object[] | Object,
template: TemplateVariableType, template: TemplateVariableType
) => { ) => {
if (typeof changes === "string" && template.type === "float") { if (typeof changes === "string" && template.type === "float") {
changes = parseFloat(changes); changes = parseFloat(changes);

6
src/frontend/src/modals/apiModal/utils/get-curl-code.tsx
View file

@ -8,14 +8,14 @@ export function getCurlRunCode(
flowId: string, flowId: string,
isAuth: boolean, isAuth: boolean,
tweaksBuildedObject, tweaksBuildedObject,
endpointName?: string, endpointName?: string
): string { ): string {
const tweaksObject = tweaksBuildedObject[0]; const tweaksObject = tweaksBuildedObject[0];
// show the endpoint name in the curl command if it exists // show the endpoint name in the curl command if it exists
return `curl -X POST \\ return `curl -X POST \\
"${window.location.protocol}//${window.location.host}/api/v1/run/${ "${window.location.protocol}//${window.location.host}/api/v1/run/${
endpointName || flowId endpointName || flowId
}?stream=false" \\ }?stream=false" \\
-H 'Content-Type: application/json'\\${ -H 'Content-Type: application/json'\\${
!isAuth ? `\n -H 'x-api-key: <your api key>'\\` : "" !isAuth ? `\n -H 'x-api-key: <your api key>'\\` : ""
} }

4
src/frontend/src/modals/apiModal/utils/get-nodes-with-default-value.ts
View file

@ -13,8 +13,8 @@ export const getNodesWithDefaultValue = (flow) => {
templateField.charAt(0) !== "_" && templateField.charAt(0) !== "_" &&
node.data.node.template[templateField].show && node.data.node.template[templateField].show &&
LANGFLOW_SUPPORTED_TYPES.has( LANGFLOW_SUPPORTED_TYPES.has(
node.data.node.template[templateField].type, node.data.node.template[templateField].type
), )
) )
.map((n, i) => { .map((n, i) => {
arrNodesWithValues.push(node["id"]); arrNodesWithValues.push(node["id"]);

2
src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx
View file

@ -9,7 +9,7 @@ export default function getPythonApiCode(
flowId: string, flowId: string,
isAuth: boolean, isAuth: boolean,
tweaksBuildedObject, tweaksBuildedObject,
endpointName?: string, endpointName?: string
): string { ): string {
const tweaksObject = tweaksBuildedObject[0]; const tweaksObject = tweaksBuildedObject[0];
return `import argparse return `import argparse

2
src/frontend/src/modals/apiModal/utils/get-python-code.tsx
View file

@ -6,7 +6,7 @@
*/ */
export default function getPythonCode( export default function getPythonCode(
flowName: string, flowName: string,
tweaksBuildedObject, tweaksBuildedObject
): string { ): string {
const tweaksObject = tweaksBuildedObject[0]; const tweaksObject = tweaksBuildedObject[0];

2
src/frontend/src/modals/apiModal/utils/get-value.ts
View file

@ -5,7 +5,7 @@ export const getValue = (
value: string, value: string,
node: NodeType, node: NodeType,
template: TemplateVariableType, template: TemplateVariableType,
tweak: Object[], tweak: Object[]
) => { ) => {
let returnValue = value ?? ""; let returnValue = value ?? "";

2
src/frontend/src/modals/apiModal/utils/get-widget-code.tsx
View file

@ -6,7 +6,7 @@
export default function getWidgetCode( export default function getWidgetCode(
flowId: string, flowId: string,
flowName: string, flowName: string,
isAuth: boolean, isAuth: boolean
): string { ): string {
return `<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@1.0_alpha/dist/build/static/js/bundle.min.js"></script> return `<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@1.0_alpha/dist/build/static/js/bundle.min.js"></script>

2
src/frontend/src/modals/apiModal/utils/tabs-array.tsx
View file

@ -1,7 +1,7 @@
export function createTabsArray( export function createTabsArray(
codes, codes,
includeWebhookCurl = false, includeWebhookCurl = false,
includeTweaks = false, includeTweaks = false
) { ) {
const tabs = [ const tabs = [
{ {

18
src/frontend/src/modals/apiModal/views/index.tsx
View file

@ -39,7 +39,7 @@ const ApiModal = forwardRef(
open?: boolean; open?: boolean;
setOpen?: (a: boolean | ((o?: boolean) => boolean)) => void; setOpen?: (a: boolean | ((o?: boolean) => boolean)) => void;
}, },
ref, ref
) => { ) => {
const tweak = useTweaksStore((state) => state.tweak); const tweak = useTweaksStore((state) => state.tweak);
const addTweaks = useTweaksStore((state) => state.setTweak); const addTweaks = useTweaksStore((state) => state.setTweak);
@ -57,18 +57,18 @@ const ApiModal = forwardRef(
flow?.id, flow?.id,
autoLogin, autoLogin,
tweak, tweak,
flow?.endpoint_name, flow?.endpoint_name
); );
const curl_run_code = getCurlRunCode( const curl_run_code = getCurlRunCode(
flow?.id, flow?.id,
autoLogin, autoLogin,
tweak, tweak,
flow?.endpoint_name, flow?.endpoint_name
); );
const curl_webhook_code = getCurlWebhookCode( const curl_webhook_code = getCurlWebhookCode(
flow?.id, flow?.id,
autoLogin, autoLogin,
flow?.endpoint_name, flow?.endpoint_name
); );
const pythonCode = getPythonCode(flow?.name, tweak); const pythonCode = getPythonCode(flow?.name, tweak);
const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin); const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
@ -83,7 +83,7 @@ const ApiModal = forwardRef(
pythonCode, pythonCode,
]; ];
const [tabs, setTabs] = useState( const [tabs, setTabs] = useState(
createTabsArray(codesArray, includeWebhook), createTabsArray(codesArray, includeWebhook)
); );
const canShowTweaks = const canShowTweaks =
@ -132,7 +132,7 @@ const ApiModal = forwardRef(
buildTweakObject( buildTweakObject(
nodeId, nodeId,
element.data.node.template[templateField].value, element.data.node.template[templateField].value,
element.data.node.template[templateField], element.data.node.template[templateField]
); );
} }
}); });
@ -149,7 +149,7 @@ const ApiModal = forwardRef(
async function buildTweakObject( async function buildTweakObject(
tw: string, tw: string,
changes: string | string[] | boolean | number | Object[] | Object, changes: string | string[] | boolean | number | Object[] | Object,
template: TemplateVariableType, template: TemplateVariableType
) { ) {
changes = getChangesType(changes, template); changes = getChangesType(changes, template);
@ -191,7 +191,7 @@ const ApiModal = forwardRef(
flow?.id, flow?.id,
autoLogin, autoLogin,
cloneTweak, cloneTweak,
flow?.endpoint_name, flow?.endpoint_name
); );
const pythonCode = getPythonCode(flow?.name, cloneTweak); const pythonCode = getPythonCode(flow?.name, cloneTweak);
const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin); const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
@ -235,7 +235,7 @@ const ApiModal = forwardRef(
</BaseModal.Content> </BaseModal.Content>
</BaseModal> </BaseModal>
); );
}, }
); );
export default ApiModal; export default ApiModal;

10
src/frontend/src/modals/baseModal/index.tsx
View file

@ -103,7 +103,7 @@ interface BaseModalProps {
React.ReactElement<ContentProps>, React.ReactElement<ContentProps>,
React.ReactElement<HeaderProps>, React.ReactElement<HeaderProps>,
React.ReactElement<TriggerProps>?, React.ReactElement<TriggerProps>?,
React.ReactElement<FooterProps>?, React.ReactElement<FooterProps>?
]; ];
open?: boolean; open?: boolean;
setOpen?: (open: boolean) => void; setOpen?: (open: boolean) => void;
@ -139,16 +139,16 @@ function BaseModal({
onSubmit, onSubmit,
}: BaseModalProps) { }: BaseModalProps) {
const headerChild = React.Children.toArray(children).find( const headerChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Header, (child) => (child as React.ReactElement).type === Header
); );
const triggerChild = React.Children.toArray(children).find( const triggerChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Trigger, (child) => (child as React.ReactElement).type === Trigger
); );
const ContentChild = React.Children.toArray(children).find( const ContentChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Content, (child) => (child as React.ReactElement).type === Content
); );
const ContentFooter = React.Children.toArray(children).find( const ContentFooter = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Footer, (child) => (child as React.ReactElement).type === Footer
); );
let { minWidth, height } = switchCaseModalSize(size); let { minWidth, height } = switchCaseModalSize(size);

5
src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx
View file

@ -2,13 +2,12 @@ import { ColDef, ValueGetterParams } from "ag-grid-community";
import { useMemo } from "react"; import { useMemo } from "react";
import TableNodeCellRender from "../../../components/tableComponent/components/tableNodeCellRender"; import TableNodeCellRender from "../../../components/tableComponent/components/tableNodeCellRender";
import TableToggleCellRender from "../../../components/tableComponent/components/tableToggleCellRender"; import TableToggleCellRender from "../../../components/tableComponent/components/tableToggleCellRender";
import TableTooltipRender from "../../../components/tableComponent/components/tableTooltipRender";
const useColumnDefs = ( const useColumnDefs = (
myData: any, myData: any,
handleOnNewValue: (newValue: any, name: string) => void, handleOnNewValue: (newValue: any, name: string) => void,
changeAdvanced: (n: string) => void, changeAdvanced: (n: string) => void,
open: boolean, open: boolean
) => { ) => {
const columnDefs: ColDef[] = useMemo( const columnDefs: ColDef[] = useMemo(
() => [ () => [
@ -78,7 +77,7 @@ const useColumnDefs = (
cellClass: "no-border", cellClass: "no-border",
}, },
], ],
[open, myData], [open, myData]
); );
return columnDefs; return columnDefs;

6
src/frontend/src/modals/editNodeModal/index.tsx
View file

@ -25,7 +25,7 @@ const EditNodeModal = forwardRef(
// setOpenWDoubleClick: (open: boolean) => void; // setOpenWDoubleClick: (open: boolean) => void;
data: NodeDataType; data: NodeDataType;
}, },
ref, ref
) => { ) => {
const myData = useRef(data); const myData = useRef(data);
@ -48,7 +48,7 @@ const EditNodeModal = forwardRef(
data, data,
handleOnNewValue, handleOnNewValue,
changeAdvanced, changeAdvanced,
open, open
); );
const [gridApi, setGridApi] = useState<GridApi | null>(null); const [gridApi, setGridApi] = useState<GridApi | null>(null);
@ -121,7 +121,7 @@ const EditNodeModal = forwardRef(
<BaseModal.Footer submit={{ label: "Save Changes" }} /> <BaseModal.Footer submit={{ label: "Save Changes" }} />
</BaseModal> </BaseModal>
); );
}, }
); );
export default EditNodeModal; export default EditNodeModal;

6
src/frontend/src/modals/exportModal/index.tsx
View file

@ -45,7 +45,7 @@ const ExportModal = forwardRef(
is_component: false, is_component: false,
}, },
name!, name!,
description, description
); );
setNoticeData({ setNoticeData({
title: API_WARNING_NOTICE_ALERT, title: API_WARNING_NOTICE_ALERT,
@ -61,7 +61,7 @@ const ExportModal = forwardRef(
is_component: false, is_component: false,
}), }),
name!, name!,
description, description
); );
setOpen(false); setOpen(false);
}} }}
@ -102,6 +102,6 @@ const ExportModal = forwardRef(
<BaseModal.Footer submit={{ label: "Download Flow" }} /> <BaseModal.Footer submit={{ label: "Download Flow" }} />
</BaseModal> </BaseModal>
); );
}, }
); );
export default ExportModal; export default ExportModal;

4
src/frontend/src/modals/flowLogsModal/index.tsx
View file

@ -37,7 +37,7 @@ export default function FlowLogsModal({
const { columns, rows } = data; const { columns, rows } = data;
setColumns(columns.map((col) => ({ ...col, editable: true }))); setColumns(columns.map((col) => ({ ...col, editable: true })));
setRows(rows); setRows(rows);
}, }
); );
} }
@ -47,7 +47,7 @@ export default function FlowLogsModal({
.some((template) => template["stream"] && template["stream"].value); .some((template) => template["stream"] && template["stream"].value);
console.log( console.log(
haStream, haStream,
nodes.map((nodes) => (nodes.data as NodeDataType).node!.template), nodes.map((nodes) => (nodes.data as NodeDataType).node!.template)
); );
if (haStream) { if (haStream) {
setNoticeData({ setNoticeData({

4
src/frontend/src/modals/foldersModal/hooks/submit-folder.tsx
View file

@ -33,7 +33,7 @@ const useFolderSubmit = (setOpen, folderToEdit) => {
getFoldersApi(true); getFoldersApi(true);
setOpen(false); setOpen(false);
} }
}, }
); );
} else { } else {
addFolder(data).then( addFolder(data).then(
@ -49,7 +49,7 @@ const useFolderSubmit = (setOpen, folderToEdit) => {
setErrorData({ setErrorData({
title: `Error creating folder.`, title: `Error creating folder.`,
}); });
}, }
); );
} }
}; };

6
src/frontend/src/modals/genericModal/index.tsx
View file

@ -83,7 +83,7 @@ export default function GenericModal({
} }
const filteredWordsHighlight = matches.filter( const filteredWordsHighlight = matches.filter(
(word) => !invalid_chars.includes(word), (word) => !invalid_chars.includes(word)
); );
setWordsHighlight(filteredWordsHighlight); setWordsHighlight(filteredWordsHighlight);
@ -134,7 +134,7 @@ export default function GenericModal({
// to the first key of the custom_fields object // to the first key of the custom_fields object
if (field_name === "") { if (field_name === "") {
field_name = Array.isArray( field_name = Array.isArray(
apiReturn.data?.frontend_node?.custom_fields?.[""], apiReturn.data?.frontend_node?.custom_fields?.[""]
) )
? apiReturn.data?.frontend_node?.custom_fields?.[""][0] ?? "" ? apiReturn.data?.frontend_node?.custom_fields?.[""][0] ?? ""
: apiReturn.data?.frontend_node?.custom_fields?.[""] ?? ""; : apiReturn.data?.frontend_node?.custom_fields?.[""] ?? "";
@ -209,7 +209,7 @@ export default function GenericModal({
<div <div
className={classNames( className={classNames(
!isEdit ? "rounded-lg border" : "", !isEdit ? "rounded-lg border" : "",
"flex h-full max-h-[85%] w-full", "flex h-full max-h-[85%] w-full"
)} )}
> >
{type === TypeModal.PROMPT && isEdit && !readonly ? ( {type === TypeModal.PROMPT && isEdit && !readonly ? (

2
src/frontend/src/modals/newFlowModal/index.tsx
View file

@ -32,7 +32,7 @@ export default function NewFlowModal({
key={0} key={0}
flow={ flow={
examples.find( examples.find(
(e) => e.name == "Basic Prompting (Hello, World)", (e) => e.name == "Basic Prompting (Hello, World)"
)! )!
} }
/> />

6
src/frontend/src/modals/shareModal/index.tsx
View file

@ -131,14 +131,14 @@ export default function ShareModal({
title: "Error sharing " + is_component ? "component" : "flow", title: "Error sharing " + is_component ? "component" : "flow",
list: [err["response"]["data"]["detail"]], list: [err["response"]["data"]["detail"]],
}); });
}, }
); );
else else
updateFlowStore( updateFlowStore(
flow!, flow!,
getTagsIds(selectedTags, tags), getTagsIds(selectedTags, tags),
sharePublic, sharePublic,
unavaliableNames.find((e) => e.name === name)!.id, unavaliableNames.find((e) => e.name === name)!.id
).then(successShare, (err) => { ).then(successShare, (err) => {
setErrorData({ setErrorData({
title: "Error sharing " + is_component ? "component" : "flow", title: "Error sharing " + is_component ? "component" : "flow",
@ -205,7 +205,7 @@ export default function ShareModal({
setOpen={internalSetOpen} setOpen={internalSetOpen}
onSubmit={() => { onSubmit={() => {
const isNameAvailable = !unavaliableNames.some( const isNameAvailable = !unavaliableNames.some(
(element) => element.name === name, (element) => element.name === name
); );
if (isNameAvailable) { if (isNameAvailable) {

Some files were not shown because too many files have changed in this diff Show more