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

refactor: Add more types

Browse source
This commit is contained in:
Igor Carvalho 2023-07-26 22:59:55 -03:00
commit 7804ca9eaf
20 changed files with 138 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -143,10 +143,9 @@
} }
}, },
"node_modules/@babel/compat-data": { "node_modules/@babel/compat-data": {
"version": "7.22.6", "version": "7.22.9",
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.6.tgz", "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.6.tgz",
"integrity": "sha512-29tfsWTq2Ftu7MXmimyC0C5FDZv5DYxOZkh3XD3+QW4V/BYuv/LyEsjj3c0hqedEaDt6DBfDvexMKU8YevdqFg==", "integrity": "sha512-29tfsWTq2Ftu7MXmimyC0C5FDZv5DYxOZkh3XD3+QW4V/BYuv/LyEsjj3c0hqedEaDt6DBfDvexMKU8YevdqFg==",
"version": "7.22.9",
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=6.9.0" "node": ">=6.9.0"
@ -2614,6 +2613,15 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/axios": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/@types/axios/-/axios-0.14.0.tgz",
"integrity": "sha512-KqQnQbdYE54D7oa/UmYVMZKq7CO4l8DEENzOKc4aBRwxCXSlJXGz83flFx5L7AWrOQnmuN3kVsRdt+GZPPjiVQ==",
"deprecated": "This is a stub types definition for axios (https://github.com/mzabriskie/axios). axios provides its own type definitions, so you don't need @types/axios installed!",
"dependencies": {
"axios": "*"
}
},
"node_modules/@types/cacheable-request": { "node_modules/@types/cacheable-request": {
"version": "6.0.3", "version": "6.0.3",
"dev": true, "dev": true,

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

@ -28,6 +28,7 @@ import {
getRandomKeyByssmm, getRandomKeyByssmm,
groupByFamily, groupByFamily,
} from "../../../../utils/utils"; } from "../../../../utils/utils";
import { NodeDataType } from "../../../../types/flow";
export default function ParameterComponent({ export default function ParameterComponent({
left, left,
@ -43,7 +44,7 @@ export default function ParameterComponent({
optionalHandle = null, optionalHandle = null,
info = "", info = "",
}: ParameterComponentType): JSX.Element { }: ParameterComponentType): JSX.Element {
const ref = useRef(null); const ref = useRef<HTMLDivElement>(null);
const refHtml = useRef(null); const refHtml = useRef(null);
const refNumberComponents = useRef(0); const refNumberComponents = useRef(0);
const infoHtml = useRef(null); const infoHtml = useRef(null);
@ -69,7 +70,7 @@ export default function ParameterComponent({
const { data: myData } = useContext(typesContext); const { data: myData } = useContext(typesContext);
const handleOnNewValue = (newValue: any) => { const handleOnNewValue = (newValue: string | string[] | boolean): void => {
let newData = cloneDeep(data); let newData = cloneDeep(data);
newData.node.template[name].value = newValue; newData.node.template[name].value = newValue;
setData(newData); setData(newData);
@ -220,9 +221,9 @@ export default function ParameterComponent({
{left === true && {left === true &&
type === "str" && type === "str" &&
!data.node.template[name].options ? ( !data.node?.template[name].options ? (
<div className="mt-2 w-full"> <div className="mt-2 w-full">
{data.node.template[name].list ? ( {data.node?.template[name].list ? (
<InputListComponent <InputListComponent
disabled={disabled} disabled={disabled}
value={ value={
@ -233,7 +234,7 @@ export default function ParameterComponent({
} }
onChange={handleOnNewValue} onChange={handleOnNewValue}
/> />
) : data.node.template[name].multiline ? ( ) : data.node?.template[name].multiline ? (
<TextAreaComponent <TextAreaComponent
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
@ -242,8 +243,8 @@ export default function ParameterComponent({
) : ( ) : (
<InputComponent <InputComponent
disabled={disabled} disabled={disabled}
password={data.node.template[name].password ?? false} password={data.node?.template[name].password ?? false}
value={data.node.template[name].value ?? ""} value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue} onChange={handleOnNewValue}
/> />
)} )}
@ -252,7 +253,7 @@ export default function ParameterComponent({
<div className="mt-2 w-full"> <div className="mt-2 w-full">
<ToggleShadComponent <ToggleShadComponent
disabled={disabled} disabled={disabled}
enabled={data.node.template[name].value} enabled={data.node?.template[name].value}
setEnabled={(t) => { setEnabled={(t) => {
handleOnNewValue(t); handleOnNewValue(t);
}} }}
@ -263,13 +264,13 @@ export default function ParameterComponent({
<div className="mt-2 w-full"> <div className="mt-2 w-full">
<FloatComponent <FloatComponent
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue} onChange={handleOnNewValue}
/> />
</div> </div>
) : left === true && ) : left === true &&
type === "str" && type === "str" &&
data.node.template[name].options ? ( data.node?.template[name].options ? (
<div className="mt-2 w-full"> <div className="mt-2 w-full">
<Dropdown <Dropdown
options={data.node.template[name].options} options={data.node.template[name].options}
@ -285,7 +286,7 @@ export default function ParameterComponent({
}} }}
nodeClass={data.node} nodeClass={data.node}
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue} onChange={handleOnNewValue}
/> />
</div> </div>
@ -293,10 +294,10 @@ export default function ParameterComponent({
<div className="mt-2 w-full"> <div className="mt-2 w-full">
<InputFileComponent <InputFileComponent
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue} onChange={handleOnNewValue}
fileTypes={data.node.template[name].fileTypes} fileTypes={data.node?.template[name].fileTypes}
suffixes={data.node.template[name].suffixes} suffixes={data.node?.template[name].suffixes}
onFileChange={(t: string) => { onFileChange={(t: string) => {
data.node.template[name].file_path = t; data.node.template[name].file_path = t;
save(); save();
@ -307,7 +308,7 @@ export default function ParameterComponent({
<div className="mt-2 w-full"> <div className="mt-2 w-full">
<IntComponent <IntComponent
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue} onChange={handleOnNewValue}
/> />
</div> </div>
@ -320,7 +321,7 @@ export default function ParameterComponent({
}} }}
nodeClass={data.node} nodeClass={data.node}
disabled={disabled} disabled={disabled}
value={data.node.template[name].value ?? ""} value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue} onChange={handleOnNewValue}
/> />
</div> </div>

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

@ -104,9 +104,9 @@ export default function GenericNode({
iconColor={`${nodeColors[types[data.type]]}`} iconColor={`${nodeColors[types[data.type]]}`}
/> />
<div className="generic-node-tooltip-div"> <div className="generic-node-tooltip-div">
<ShadTooltip content={data.node.display_name}> <ShadTooltip content={data.node?.display_name}>
<div className="generic-node-tooltip-div text-primary"> <div className="generic-node-tooltip-div text-primary">
{data.node.display_name} {data.node?.display_name}
</div> </div>
</ShadTooltip> </ShadTooltip>
</div> </div>
@ -171,7 +171,7 @@ export default function GenericNode({
</div> </div>
<div className="generic-node-desc"> <div className="generic-node-desc">
<div className="generic-node-desc-text">{data.node.description}</div> <div className="generic-node-desc-text">{data.node?.description}</div>
<> <>
{Object.keys(data.node.template) {Object.keys(data.node.template)
@ -184,35 +184,35 @@ export default function GenericNode({
data={data} data={data}
setData={setData} setData={setData}
color={ color={
nodeColors[types[data.node.template[t].type]] ?? nodeColors[types[data.node?.template[t].type]] ??
nodeColors[data.node.template[t].type] ?? nodeColors[data.node?.template[t].type] ??
nodeColors.unknown nodeColors.unknown
} }
title={ title={
data.node.template[t].display_name data.node?.template[t].display_name
? data.node.template[t].display_name ? data.node.template[t].display_name
: data.node.template[t].name : data.node?.template[t].name
? toTitleCase(data.node.template[t].name) ? toTitleCase(data.node.template[t].name)
: toTitleCase(t) : toTitleCase(t)
} }
info={data.node.template[t].info} info={data.node?.template[t].info}
name={t} name={t}
tooltipTitle={ tooltipTitle={
data.node.template[t].input_types?.join("\n") ?? data.node?.template[t].input_types?.join("\n") ??
data.node.template[t].type data.node?.template[t].type
} }
required={data.node.template[t].required} required={data.node?.template[t].required}
id={ id={
(data.node.template[t].input_types?.join(";") ?? (data.node?.template[t].input_types?.join(";") ??
data.node.template[t].type) + data.node?.template[t].type) +
"|" + "|" +
t + t +
"|" + "|" +
data.id data.id
} }
left={true} left={true}
type={data.node.template[t].type} type={data.node?.template[t].type}
optionalHandle={data.node.template[t].input_types} optionalHandle={data.node?.template[t].input_types}
/> />
) : ( ) : (
<></> <></>
@ -232,13 +232,13 @@ export default function GenericNode({
setData={setData} setData={setData}
color={nodeColors[types[data.type]] ?? nodeColors.unknown} color={nodeColors[types[data.type]] ?? nodeColors.unknown}
title={ title={
data.node.output_types && data.node.output_types.length > 0 data.node?.output_types && data.node.output_types.length > 0
? data.node.output_types.join("|") ? data.node.output_types.join("|")
: data.type : data.type
} }
tooltipTitle={data.node.base_classes.join("\n")} tooltipTitle={data.node?.base_classes.join("\n")}
id={[data.type, data.id, ...data.node.base_classes].join("|")} id={[data.type, data.id, ...data.node.base_classes].join("|")}
type={data.node.base_classes.join("|")} type={data.node?.base_classes.join("|")}
left={false} left={false}
/> />
</> </>

1
src/frontend/src/components/CrashErrorComponent/index.tsx
View file

@ -2,6 +2,7 @@ export default function CrashErrorComponent({
error, error,
resetErrorBoundary, resetErrorBoundary,
}): JSX.Element { }): JSX.Element {
console.log({error, resetErrorBoundary})
return ( return (
<div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-foreground bg-opacity-50"> <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-foreground bg-opacity-50">
<div className="flex h-1/3 min-h-fit max-w-4xl flex-col justify-evenly rounded-lg bg-background p-8 text-start shadow-lg"> <div className="flex h-1/3 min-h-fit max-w-4xl flex-col justify-evenly rounded-lg bg-background p-8 text-start shadow-lg">

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

@ -28,12 +28,12 @@ export const EditFlowSettings: React.FC<InputProps> = ({
}; };
const [desc, setDesc] = useState( const [desc, setDesc] = useState(
flows.find((f) => f.id === tabId).description flows.find((f) => f.id === tabId)?.description
); );
const handleDescriptionChange = (event: ChangeEvent<HTMLTextAreaElement>) => { const handleDescriptionChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
flows.find((f) => f.id === tabId).description = event.target.value; flows.find((f) => f.id === tabId).description = event.target.value;
setDesc(flows.find((f) => f.id === tabId).description); setDesc(flows.find((f) => f.id === tabId)?.description);
setDescription(event.target.value); setDescription(event.target.value);
}; };

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

@ -10,18 +10,14 @@ import {
CardHeader, CardHeader,
CardTitle, CardTitle,
} from "../ui/card"; } from "../ui/card";
import { cardComponentPropsType } from "../../types/components";
export const CardComponent = ({ export const CardComponent = ({
flow, flow,
id, id,
onDelete, onDelete,
button, button,
}: { }: cardComponentPropsType): JSX.Element => {
flow: FlowType;
id: string;
onDelete?: () => void;
button?: JSX.Element;
}): JSX.Element => {
const { removeFlow } = useContext(TabsContext); const { removeFlow } = useContext(TabsContext);
return ( return (

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

@ -103,7 +103,7 @@ export default function CodeTabsComponent({
function openAccordions() { function openAccordions() {
let accordionsToOpen = []; let accordionsToOpen = [];
tweaks.tweak.current.forEach((el) => { tweaks?.tweak.current.forEach((el) => {
Object.keys(el).forEach((key) => { Object.keys(el).forEach((key) => {
if (Object.keys(el[key]).length > 0) { if (Object.keys(el[key]).length > 0) {
accordionsToOpen.push(key); accordionsToOpen.push(key);
@ -193,9 +193,9 @@ export default function CodeTabsComponent({
: "overflow-hidden" : "overflow-hidden"
)} )}
> >
{data.map((t: any, index) => ( {data?.map((t: any, index) => (
<div className="px-3" key={index}> <div className="px-3" key={index}>
{tweaks.tweaksList.current.includes(t["data"]["id"]) && ( {tweaks?.tweaksList.current.includes(t["data"]["id"]) && (
<AccordionComponent <AccordionComponent
trigger={t["data"]["id"]} trigger={t["data"]["id"]}
open={openAccordion} open={openAccordion}
@ -647,7 +647,7 @@ export default function CodeTabsComponent({
</AccordionComponent> </AccordionComponent>
)} )}
{tweaks.tweaksList.current.length === 0 && ( {tweaks?.tweaksList.current.length === 0 && (
<> <>
<div className="pt-3"> <div className="pt-3">
No tweaks are available for this flow. No tweaks are available for this flow.

2
src/frontend/src/components/ui/rename-label.tsx
View file

@ -23,7 +23,7 @@ export default function RenameLabel(props) {
}); });
if (inputRef.current) { if (inputRef.current) {
setTimeout(() => { setTimeout(() => {
inputRef.current.focus(); inputRef.current?.focus();
}, 100); }, 100);
} }
} }

30
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -53,7 +53,7 @@ const EditNodeModal = forwardRef(
reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ?? reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ??
false; false;
function changeAdvanced(n) { function changeAdvanced(n: string): void {
setMyData((old) => { setMyData((old) => {
let newData = cloneDeep(old); let newData = cloneDeep(old);
newData.node.template[n].advanced = !newData.node.template[n].advanced; newData.node.template[n].advanced = !newData.node.template[n].advanced;
@ -61,7 +61,7 @@ const EditNodeModal = forwardRef(
}); });
} }
const handleOnNewValue = (newValue: any, name) => { const handleOnNewValue = (newValue: string | string[] | boolean, name: string) => {
setMyData((old) => { setMyData((old) => {
let newData = cloneDeep(old); let newData = cloneDeep(old);
newData.node.template[name].value = newValue; newData.node.template[name].value = newValue;
@ -115,7 +115,7 @@ const EditNodeModal = forwardRef(
.filter( .filter(
(t) => (t) =>
t.charAt(0) !== "_" && t.charAt(0) !== "_" &&
myData.node.template[t].show && myData.node?.template[t].show &&
(myData.node.template[t].type === "str" || (myData.node.template[t].type === "str" ||
myData.node.template[t].type === "bool" || myData.node.template[t].type === "bool" ||
myData.node.template[t].type === "float" || myData.node.template[t].type === "float" ||
@ -127,12 +127,12 @@ const EditNodeModal = forwardRef(
.map((n, i) => ( .map((n, i) => (
<TableRow key={i} className="h-10"> <TableRow key={i} className="h-10">
<TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3"> <TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3">
{myData.node.template[n].name {myData.node?.template[n].name
? myData.node.template[n].name ? myData.node.template[n].name
: myData.node.template[n].display_name} : myData.node?.template[n].display_name}
</TableCell> </TableCell>
<TableCell className="w-[300px] p-0 text-center text-xs text-foreground "> <TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
{myData.node.template[n].type === "str" && {myData.node?.template[n].type === "str" &&
!myData.node.template[n].options ? ( !myData.node.template[n].options ? (
<div className="mx-auto"> <div className="mx-auto">
{myData.node.template[n].list ? ( {myData.node.template[n].list ? (
@ -177,7 +177,7 @@ const EditNodeModal = forwardRef(
/> />
)} )}
</div> </div>
) : myData.node.template[n].type === "bool" ? ( ) : myData.node?.template[n].type === "bool" ? (
<div className="ml-auto"> <div className="ml-auto">
{" "} {" "}
<ToggleShadComponent <ToggleShadComponent
@ -189,7 +189,7 @@ const EditNodeModal = forwardRef(
size="small" size="small"
/> />
</div> </div>
) : myData.node.template[n].type === "float" ? ( ) : myData.node?.template[n].type === "float" ? (
<div className="mx-auto"> <div className="mx-auto">
<FloatComponent <FloatComponent
disabled={disabled} disabled={disabled}
@ -200,7 +200,7 @@ const EditNodeModal = forwardRef(
}} }}
/> />
</div> </div>
) : myData.node.template[n].type === "str" && ) : myData.node?.template[n].type === "str" &&
myData.node.template[n].options ? ( myData.node.template[n].options ? (
<div className="mx-auto"> <div className="mx-auto">
<Dropdown <Dropdown
@ -214,7 +214,7 @@ const EditNodeModal = forwardRef(
} }
></Dropdown> ></Dropdown>
</div> </div>
) : myData.node.template[n].type === "int" ? ( ) : myData.node?.template[n].type === "int" ? (
<div className="mx-auto"> <div className="mx-auto">
<IntComponent <IntComponent
disabled={disabled} disabled={disabled}
@ -225,7 +225,7 @@ const EditNodeModal = forwardRef(
}} }}
/> />
</div> </div>
) : myData.node.template[n].type === "file" ? ( ) : myData.node?.template[n].type === "file" ? (
<div className="mx-auto"> <div className="mx-auto">
<InputFileComponent <InputFileComponent
editNode={true} editNode={true}
@ -243,7 +243,7 @@ const EditNodeModal = forwardRef(
}} }}
></InputFileComponent> ></InputFileComponent>
</div> </div>
) : myData.node.template[n].type === "prompt" ? ( ) : myData.node?.template[n].type === "prompt" ? (
<div className="mx-auto"> <div className="mx-auto">
<PromptAreaComponent <PromptAreaComponent
field_name={n} field_name={n}
@ -259,7 +259,7 @@ const EditNodeModal = forwardRef(
}} }}
/> />
</div> </div>
) : myData.node.template[n].type === "code" ? ( ) : myData.node?.template[n].type === "code" ? (
<div className="mx-auto"> <div className="mx-auto">
<CodeAreaComponent <CodeAreaComponent
disabled={disabled} disabled={disabled}
@ -270,7 +270,7 @@ const EditNodeModal = forwardRef(
}} }}
/> />
</div> </div>
) : myData.node.template[n].type === "Any" ? ( ) : myData.node?.template[n].type === "Any" ? (
"-" "-"
) : ( ) : (
<div className="hidden"></div> <div className="hidden"></div>
@ -279,7 +279,7 @@ const EditNodeModal = forwardRef(
<TableCell className="p-0 text-right"> <TableCell className="p-0 text-right">
<div className="items-center text-center"> <div className="items-center text-center">
<ToggleShadComponent <ToggleShadComponent
enabled={!myData.node.template[n].advanced} enabled={!myData.node?.template[n].advanced}
setEnabled={(e) => changeAdvanced(n)} setEnabled={(e) => changeAdvanced(n)}
disabled={disabled} disabled={disabled}
size="small" size="small"

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

@ -9,7 +9,7 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "../../components/ui/dialog"; } from "../../components/ui/dialog";
import { headerConstType } from "../../types/components"; import { modalHeaderType } from "../../types/components";
type ContentProps = { children: ReactNode }; type ContentProps = { children: ReactNode };
type HeaderProps = { children: ReactNode; description: string }; type HeaderProps = { children: ReactNode; description: string };
@ -23,10 +23,10 @@ const Trigger: React.FC<ContentProps> = ({ children }) => {
return <>{children}</>; return <>{children}</>;
}; };
const Header: React.FC<{ children: ReactNode; description: string }> = ({ const Header: React.FC<{ children: ReactNode; description: string | null }> = ({
children, children,
description, description,
}: headerConstType): JSX.Element => { }: modalHeaderType): JSX.Element => {
return ( return (
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center">{children}</DialogTitle> <DialogTitle className="flex items-center">{children}</DialogTitle>

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

@ -12,9 +12,9 @@ const ExportModal = forwardRef((props: { children: ReactNode }, ref): JSX.Elemen
const { flows, tabId, updateFlow, downloadFlow, saveFlow } = const { flows, tabId, updateFlow, downloadFlow, saveFlow } =
useContext(TabsContext); useContext(TabsContext);
const [checked, setChecked] = useState(false); const [checked, setChecked] = useState(false);
const [name, setName] = useState(flows.find((f) => f.id === tabId).name); const [name, setName] = useState(flows.find((f) => f.id === tabId)?.name);
const [description, setDescription] = useState( const [description, setDescription] = useState(
flows.find((f) => f.id === tabId).description flows.find((f) => f.id === tabId)?.description
); );
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
return ( return (

18
src/frontend/src/modals/formModal/index.tsx
View file

@ -46,7 +46,7 @@ export default function FormModal({
const handleKeys = formKeysData.handle_keys; const handleKeys = formKeysData.handle_keys;
const keyToUse = Object.keys(inputKeys).find( const keyToUse = Object.keys(inputKeys).find(
(k) => !handleKeys.some((j) => j === k) && inputKeys[k] === "" (k) => !handleKeys?.some((j) => j === k) && inputKeys[k] === ""
); );
return inputKeys[keyToUse]; return inputKeys[keyToUse];
@ -311,7 +311,7 @@ export default function FormModal({
async function sendAll(data: sendAllProps): Promise<void> { async function sendAll(data: sendAllProps): Promise<void> {
try { try {
if (ws) { if (ws) {
ws.current.send(JSON.stringify(data)); ws.current?.send(JSON.stringify(data));
} }
} catch (error) { } catch (error) {
setErrorData({ setErrorData({
@ -349,7 +349,7 @@ export default function FormModal({
tabsState[flow.id].formKeysData.template tabsState[flow.id].formKeysData.template
); );
sendAll({ sendAll({
...reactFlowInstance.toObject(), ...reactFlowInstance?.toObject(),
inputs: inputs, inputs: inputs,
chatHistory, chatHistory,
name: flow.name, name: flow.name,
@ -370,7 +370,7 @@ export default function FormModal({
} }
function clearChat(): void { function clearChat(): void {
setChatHistory([]); setChatHistory([]);
ws.current.send(JSON.stringify({ clear_history: true })); ws.current?.send(JSON.stringify({ clear_history: true }));
if (lockChat) setLockChat(false); if (lockChat) setLockChat(false);
} }
@ -451,7 +451,7 @@ export default function FormModal({
size="small" size="small"
disabled={tabsState[ disabled={tabsState[
id.current id.current
].formKeysData.handle_keys.some((t) => t === i)} ].formKeysData.handle_keys?.some((t) => t === i)}
/> />
</div> </div>
</div> </div>
@ -460,7 +460,7 @@ export default function FormModal({
keyValue={i} keyValue={i}
> >
<div className="file-component-tab-column"> <div className="file-component-tab-column">
{tabsState[id.current].formKeysData.handle_keys.some( {tabsState[id.current].formKeysData.handle_keys?.some(
(t) => t === i (t) => t === i
) && ( ) && (
<div className="font-normal text-muted-foreground "> <div className="font-normal text-muted-foreground ">
@ -489,7 +489,7 @@ export default function FormModal({
</div> </div>
) )
)} )}
{tabsState[id.current].formKeysData.memory_keys.map((i, k) => ( {tabsState[id.current].formKeysData.memory_keys?.map((i, k) => (
<div className="file-component-accordion-div" key={k}> <div className="file-component-accordion-div" key={k}>
<AccordionComponent <AccordionComponent
trigger={ trigger={
@ -512,7 +512,7 @@ export default function FormModal({
size="small" size="small"
disabled={tabsState[ disabled={tabsState[
id.current id.current
].formKeysData.handle_keys.some((t) => t === i)} ].formKeysData.handle_keys?.some((t) => t === i)}
/> />
</div> </div>
</div> </div>
@ -521,7 +521,7 @@ export default function FormModal({
keyValue={i} keyValue={i}
> >
<div className="file-component-tab-column"> <div className="file-component-tab-column">
{tabsState[id.current].formKeysData.handle_keys.some( {tabsState[id.current].formKeysData.handle_keys?.some(
(t) => t === i (t) => t === i
) && ( ) && (
<div className="font-normal text-muted-foreground "> <div className="font-normal text-muted-foreground ">

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

@ -120,7 +120,7 @@ export default function GenericModal({
: "code-nohighlight"; : "code-nohighlight";
} }
function validatePrompt(closeModal: boolean) { function validatePrompt(closeModal: boolean): void {
postValidatePrompt(field_name, inputValue, nodeClass) postValidatePrompt(field_name, inputValue, nodeClass)
.then((apiReturn) => { .then((apiReturn) => {
if (apiReturn.data) { if (apiReturn.data) {

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

@ -6,6 +6,7 @@ import ReactFlow, {
Controls, Controls,
Edge, Edge,
EdgeChange, EdgeChange,
Node,
NodeChange, NodeChange,
NodeDragHandler, NodeDragHandler,
OnEdgesDelete, OnEdgesDelete,
@ -78,7 +79,7 @@ export default function Page({ flow }: { flow: FlowType }): JSX.Element {
lastCopiedSelection lastCopiedSelection
) { ) {
event.preventDefault(); event.preventDefault();
let bounds = reactFlowWrapper.current.getBoundingClientRect(); let bounds = reactFlowWrapper.current?.getBoundingClientRect();
paste(lastCopiedSelection, { paste(lastCopiedSelection, {
x: position.x - bounds.left, x: position.x - bounds.left,
y: position.y - bounds.top, y: position.y - bounds.top,
@ -185,10 +186,10 @@ export default function Page({ flow }: { flow: FlowType }): JSX.Element {
...params, ...params,
style: { stroke: "#555" }, style: { stroke: "#555" },
className: className:
(params.targetHandle.split("|")[0] === "Text" (params.targetHandle?.split("|")[0] === "Text"
? "stroke-foreground " ? "stroke-foreground "
: "stroke-foreground ") + " stroke-connection", : "stroke-foreground ") + " stroke-connection",
animated: params.targetHandle.split("|")[0] === "Text", animated: params.targetHandle?.split("|")[0] === "Text",
}, },
eds eds
) )
@ -234,7 +235,7 @@ export default function Page({ flow }: { flow: FlowType }): JSX.Element {
// Get the current bounds of the ReactFlow wrapper element // Get the current bounds of the ReactFlow wrapper element
const reactflowBounds = const reactflowBounds =
reactFlowWrapper.current.getBoundingClientRect(); reactFlowWrapper.current?.getBoundingClientRect();
// Extract the data from the drag event and parse it as a JSON object // Extract the data from the drag event and parse it as a JSON object
let data: { type: string; node?: APIClassType } = JSON.parse( let data: { type: string; node?: APIClassType } = JSON.parse(
@ -243,7 +244,7 @@ export default function Page({ flow }: { flow: FlowType }): JSX.Element {
// If data type is not "chatInput" or if there are no "chatInputNode" nodes present in the ReactFlow instance, create a new node // If data type is not "chatInput" or if there are no "chatInputNode" nodes present in the ReactFlow instance, create a new node
// Calculate the position where the node should be created // Calculate the position where the node should be created
const position = reactFlowInstance.project({ const position = reactFlowInstance?.project({
x: event.clientX - reactflowBounds.left, x: event.clientX - reactflowBounds.left,
y: event.clientY - reactflowBounds.top, y: event.clientY - reactflowBounds.top,
}); });

14
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -12,7 +12,7 @@ export default function NodeToolbarComponent({ data, setData, deleteNode }: node
Object.keys(data.node.template).filter( Object.keys(data.node.template).filter(
(t) => (t) =>
t.charAt(0) !== "_" && t.charAt(0) !== "_" &&
data.node.template[t].show && data.node?.template[t].show &&
(data.node.template[t].type === "str" || (data.node.template[t].type === "str" ||
data.node.template[t].type === "bool" || data.node.template[t].type === "bool" ||
data.node.template[t].type === "float" || data.node.template[t].type === "float" ||
@ -56,8 +56,8 @@ export default function NodeToolbarComponent({ data, setData, deleteNode }: node
{ {
x: 50, x: 50,
y: 10, y: 10,
paneX: reactFlowInstance.getNode(data.id).position.x, paneX: reactFlowInstance.getNode(data.id)?.position.x,
paneY: reactFlowInstance.getNode(data.id).position.y, paneY: reactFlowInstance.getNode(data.id)?.position.y,
} }
); );
}} }}
@ -68,23 +68,23 @@ export default function NodeToolbarComponent({ data, setData, deleteNode }: node
<ShadTooltip <ShadTooltip
content={ content={
data.node.documentation === "" ? "Coming Soon" : "Documentation" data.node?.documentation === "" ? "Coming Soon" : "Documentation"
} }
side="top" side="top"
> >
<a <a
className={classNames( className={classNames(
"relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" + "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
(data.node.documentation === "" (data.node?.documentation === ""
? " text-muted-foreground" ? " text-muted-foreground"
: " text-foreground") : " text-foreground")
)} )}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
href={data.node.documentation} href={data.node?.documentation}
// deactivate link if no documentation is provided // deactivate link if no documentation is provided
onClick={(event) => { onClick={(event) => {
if (data.node.documentation === "") { if (data.node?.documentation === "") {
event.preventDefault(); event.preventDefault();
} }
}} }}

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

@ -1,12 +1,12 @@
export type ErrorAlertType = { export type ErrorAlertType = {
title: string; title: string;
list: Array<string>; list: Array<string> | undefined;
id: string; id: string;
removeAlert: (id: string) => void; removeAlert: (id: string) => void;
}; };
export type NoticeAlertType = { export type NoticeAlertType = {
title: string; title: string;
link: string; link: string | undefined;
id: string; id: string;
removeAlert: (id: string) => void; removeAlert: (id: string) => void;
}; };

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

@ -3,6 +3,7 @@ import { APIClassType, APITemplateType } from "../api";
import { FlowStyleType, FlowType, NodeDataType } from "../flow/index"; import { FlowStyleType, FlowType, NodeDataType } from "../flow/index";
import { typesContextType } from "../typesContext"; import { typesContextType } from "../typesContext";
import { ChatMessageType } from "../chat"; import { ChatMessageType } from "../chat";
import { ReactFlowJsonObject } from "reactflow";
export type InputComponentType = { export type InputComponentType = {
value: string; value: string;
@ -16,7 +17,7 @@ export type InputComponentType = {
export type ToggleComponentType = { export type ToggleComponentType = {
enabled: boolean; enabled: boolean;
setEnabled: (state: boolean) => void; setEnabled: (state: boolean) => void;
disabled: boolean; disabled: boolean | undefined;
size: "small" | "medium" | "large"; size: "small" | "medium" | "large";
}; };
export type DropDownComponentType = { export type DropDownComponentType = {
@ -34,12 +35,12 @@ export type ParameterComponentType = {
id: string; id: string;
color: string; color: string;
left: boolean; left: boolean;
type: string; type: string | undefined;
required?: boolean; required?: boolean;
name?: string; name?: string;
tooltipTitle: string; tooltipTitle: string | undefined;
dataContext?: typesContextType; dataContext?: typesContextType;
optionalHandle?: Array<String>; optionalHandle?: Array<String> | null;
info?: string; info?: string;
}; };
export type InputListComponentType = { export type InputListComponentType = {
@ -238,7 +239,7 @@ export type chatTriggerPropType = {
}; };
export type headerFlowsType = { export type headerFlowsType = {
data: object; data: ReactFlowJsonObject;
description: string; description: string;
id: string; id: string;
name: string; name: string;
@ -288,7 +289,7 @@ export type fileCardPropsType = {
export type nodeToolbarPropsType = { export type nodeToolbarPropsType = {
data: NodeDataType; data: NodeDataType;
deleteNode: (idx: string) => void; deleteNode: (idx: string) => void;
setData: (newState: {}) => void; setData: (newState: NodeDataType) => void;
}; };
export type parsedDataType = { export type parsedDataType = {
@ -309,16 +310,16 @@ export type iconsType = {
[key: string]: React.ElementType; [key: string]: React.ElementType;
}; };
export type headerConstType = { export type modalHeaderType = {
children: ReactNode; children: ReactNode;
description: string; description: string | null;
}; };
export type codeAreaModalPropsType = { export type codeAreaModalPropsType = {
setValue: (value: string) => void; setValue: (value: string) => void;
value: string; value: string;
nodeClass: APIClassType; nodeClass: APIClassType | undefined;
setNodeClass: (Class: APIClassType) => void; setNodeClass: (Class: APIClassType) => void | undefined;
children: ReactNode; children: ReactNode;
}; };
@ -361,3 +362,14 @@ export type FlowSettingsPropsType = {
open: boolean; open: boolean;
setOpen: (open: boolean) => void; setOpen: (open: boolean) => void;
}; };
export type groupDataType = {
[char: string]: string;
}
export type cardComponentPropsType = {
flow: FlowType;
id: string;
onDelete?: () => void;
button?: JSX.Element;
};

22
src/frontend/src/utils/reactflowUtils.ts
View file

@ -24,8 +24,8 @@ export function cleanEdges({
if (targetHandle) { if (targetHandle) {
const field = targetHandle.split("|")[1]; const field = targetHandle.split("|")[1];
const id = const id =
(targetNode.data.node.template[field]?.input_types?.join(";") ?? (targetNode.data.node?.template[field]?.input_types?.join(";") ??
targetNode.data.node.template[field]?.type) + targetNode.data.node?.template[field]?.type) +
"|" + "|" +
field + field +
"|" + "|" +
@ -38,7 +38,7 @@ export function cleanEdges({
const id = [ const id = [
sourceNode.data.type, sourceNode.data.type,
sourceNode.data.id, sourceNode.data.id,
...sourceNode.data.node.base_classes, ...sourceNode.data.node?.base_classes,
].join("|"); ].join("|");
if (id !== sourceHandle) { if (id !== sourceHandle) {
newEdges = newEdges.filter((e) => e.id !== edge.id); newEdges = newEdges.filter((e) => e.id !== edge.id);
@ -55,19 +55,19 @@ export function isValidConnection(
) { ) {
if ( if (
targetHandle targetHandle
.split("|")[0] ?.split("|")[0]
.split(";") .split(";")
.some((n) => n === sourceHandle.split("|")[0]) || .some((n) => n === sourceHandle?.split("|")[0]) ||
sourceHandle sourceHandle
.split("|") ?.split("|")
.slice(2) .slice(2)
.some((t) => .some((t) =>
targetHandle targetHandle
.split("|")[0] ?.split("|")[0]
.split(";") .split(";")
.some((n) => n === t) .some((n) => n === t)
) || ) ||
targetHandle.split("|")[0] === "str" targetHandle?.split("|")[0] === "str"
) { ) {
let targetNode = reactFlowInstance?.getNode(target)?.data?.node; let targetNode = reactFlowInstance?.getNode(target)?.data?.node;
if (!targetNode) { if (!targetNode) {
@ -79,11 +79,11 @@ export function isValidConnection(
return true; return true;
} }
} else if ( } else if (
(!targetNode.template[targetHandle.split("|")[1]].list && (!targetNode.template[targetHandle?.split("|")[1]].list &&
!reactFlowInstance !reactFlowInstance
.getEdges() .getEdges()
.find((e) => e.targetHandle === targetHandle)) || .find((e) => e.targetHandle === targetHandle)) ||
targetNode.template[targetHandle.split("|")[1]].list targetNode.template[targetHandle?.split("|")[1]].list
) { ) {
return true; return true;
} }
@ -195,7 +195,7 @@ export function validateNode(
.getEdges() .getEdges()
.some( .some(
(e) => (e) =>
e.targetHandle.split("|")[1] === t && e.targetHandle?.split("|")[1] === t &&
e.targetHandle.split("|")[2] === n.id e.targetHandle.split("|")[2] === n.id
) )
? [ ? [

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

@ -3,13 +3,14 @@ import { twMerge } from "tailwind-merge";
import { ADJECTIVES, DESCRIPTIONS, NOUNS } from "../flow_constants"; import { ADJECTIVES, DESCRIPTIONS, NOUNS } from "../flow_constants";
import { import {
IVarHighlightType, IVarHighlightType,
groupDataType,
groupedObjType, groupedObjType,
tweakType, tweakType,
} from "../types/components"; } from "../types/components";
import { FlowType } from "../types/flow"; import { FlowType } from "../types/flow";
import { TabsState } from "../types/tabs"; import { TabsState } from "../types/tabs";
import { buildTweaks } from "./reactflowUtils"; import { buildTweaks } from "./reactflowUtils";
import { APIClassType } from "../types/api"; import { APIClassType, APIObjectType, APITemplateType } from "../types/api";
export function classNames(...classes: Array<string>): string { export function classNames(...classes: Array<string>): string {
return classes.filter(Boolean).join(" "); return classes.filter(Boolean).join(" ");
@ -93,7 +94,7 @@ export function checkUpperWords(str: string): string {
export const isWrappedWithClass = (event: any, className: string | undefined) => export const isWrappedWithClass = (event: any, className: string | undefined) =>
event.target.closest(`.${className}`); event.target.closest(`.${className}`);
export function groupByFamily(data: APIClassType, baseClasses: string, left: boolean, type: string): groupedObjType[] { export function groupByFamily(data: groupDataType, baseClasses: string, left: boolean, type: string): groupedObjType[] {
let parentOutput: string; let parentOutput: string;
let arrOfParent: string[] = []; let arrOfParent: string[] = [];
let arrOfType: { family: string; type: string; component: string }[] = []; let arrOfType: { family: string; type: string; component: string }[] = [];
@ -198,7 +199,7 @@ export function groupByFamily(data: APIClassType, baseClasses: string, left: boo
groupedArray.forEach((object, index, self) => { groupedArray.forEach((object, index, self) => {
const findObj = arrOfLength.find((x) => x.type === object.family); const findObj = arrOfLength.find((x) => x.type === object.family);
if (object.component.length === findObj.length) { if (object.component.length === findObj?.length) {
self[index]["type"] = ""; self[index]["type"] = "";
} else { } else {
self[index]["type"] = object.component.join(", "); self[index]["type"] = object.component.join(", ");
@ -209,7 +210,6 @@ export function groupByFamily(data: APIClassType, baseClasses: string, left: boo
} }
export function buildInputs(tabsState: TabsState, id: string): string { export function buildInputs(tabsState: TabsState, id: string): string {
console.log(tabsState)
return tabsState && return tabsState &&
tabsState[id] && tabsState[id] &&
tabsState[id].formKeysData && tabsState[id].formKeysData &&
@ -352,7 +352,6 @@ export function getCurlCode(
tweak?: any[], tweak?: any[],
tabsState?: TabsState tabsState?: TabsState
): string { ): string {
console.log(tweak)
const flowId = flow.id; const flowId = flow.id;
const tweaks = buildTweaks(flow); const tweaks = buildTweaks(flow);
const inputs = buildInputs(tabsState, flow.id); const inputs = buildInputs(tabsState, flow.id);

2
src/frontend/tsconfig.json
View file

@ -6,7 +6,7 @@
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": true, "esModuleInterop": true,
"allowSyntheticDefaultImports": true, "allowSyntheticDefaultImports": true,
"strict": true, "strict": false,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,
"module": "esnext", "module": "esnext",