Merge branch 'dev' into python_custom_node_component
This commit is contained in:
Lucas Oliveira
commit
d283ce5600
9 changed files with 1316 additions and 2533 deletions
3443
src/frontend/package-lock.json
generated
3443
src/frontend/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,4 +1,5 @@
|
|||
import { useContext, useState } from "react";
|
||||
import { cloneDeep } from "lodash";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||
import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
|
||||
import AccordionComponent from "../../components/AccordionComponent";
|
||||
|
|
@ -54,9 +55,16 @@ export default function CodeTabsComponent({
|
|||
};
|
||||
}) {
|
||||
const [isCopied, setIsCopied] = useState<Boolean>(false);
|
||||
const [data, setData] = useState(flow ? flow["data"]["nodes"] : null);
|
||||
const [openAccordion, setOpenAccordion] = useState([]);
|
||||
const { dark } = useContext(darkContext);
|
||||
|
||||
useEffect(() => {
|
||||
if (flow && flow["data"]["nodes"]) {
|
||||
setData(flow["data"]["nodes"]);
|
||||
}
|
||||
}, [flow]);
|
||||
|
||||
const copyToClipboard = () => {
|
||||
if (!navigator.clipboard || !navigator.clipboard.writeText) {
|
||||
return;
|
||||
|
|
@ -185,7 +193,7 @@ export default function CodeTabsComponent({
|
|||
: "overflow-hidden"
|
||||
)}
|
||||
>
|
||||
{flow["data"]["nodes"].map((t: any, index) => (
|
||||
{data.map((t: any, index) => (
|
||||
<div className="px-3" key={index}>
|
||||
{tweaks.tweaksList.current.includes(t["data"]["id"]) && (
|
||||
<AccordionComponent
|
||||
|
|
@ -254,8 +262,17 @@ export default function CodeTabsComponent({
|
|||
n
|
||||
].value
|
||||
}
|
||||
onChange={(k) => {}}
|
||||
onAddInput={(k) => {
|
||||
onChange={(k) => {
|
||||
setData((old) => {
|
||||
let newInputList =
|
||||
cloneDeep(old);
|
||||
newInputList[
|
||||
index
|
||||
].data.node.template[
|
||||
n
|
||||
].value = k;
|
||||
return newInputList;
|
||||
});
|
||||
tweaks.buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
|
|
@ -275,16 +292,29 @@ export default function CodeTabsComponent({
|
|||
<TextAreaComponent
|
||||
disabled={false}
|
||||
editNode={true}
|
||||
value={tweaks.getValue(
|
||||
value={
|
||||
!t.data.node.template[
|
||||
n
|
||||
].value ||
|
||||
t.data.node.template[
|
||||
n
|
||||
].value,
|
||||
t.data,
|
||||
t.data.node.template[
|
||||
n
|
||||
]
|
||||
)}
|
||||
].value === ""
|
||||
? ""
|
||||
: t.data.node
|
||||
.template[n]
|
||||
.value
|
||||
}
|
||||
onChange={(k) => {
|
||||
setData((old) => {
|
||||
let newInputList =
|
||||
cloneDeep(old);
|
||||
newInputList[
|
||||
index
|
||||
].data.node.template[
|
||||
n
|
||||
].value = k;
|
||||
return newInputList;
|
||||
});
|
||||
tweaks.buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
|
|
@ -303,13 +333,27 @@ export default function CodeTabsComponent({
|
|||
t.data.node.template[n]
|
||||
.password ?? false
|
||||
}
|
||||
value={tweaks.getValue(
|
||||
value={
|
||||
!t.data.node.template[n]
|
||||
.value ||
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)}
|
||||
.value === ""
|
||||
? ""
|
||||
: t.data.node.template[
|
||||
n
|
||||
].value
|
||||
}
|
||||
onChange={(k) => {
|
||||
setData((old) => {
|
||||
let newInputList =
|
||||
cloneDeep(old);
|
||||
newInputList[
|
||||
index
|
||||
].data.node.template[
|
||||
n
|
||||
].value = k;
|
||||
return newInputList;
|
||||
});
|
||||
tweaks.buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
|
|
@ -329,9 +373,16 @@ export default function CodeTabsComponent({
|
|||
.value
|
||||
}
|
||||
setEnabled={(e) => {
|
||||
t.data.node.template[
|
||||
n
|
||||
].value = e;
|
||||
setData((old) => {
|
||||
let newInputList =
|
||||
cloneDeep(old);
|
||||
newInputList[
|
||||
index
|
||||
].data.node.template[
|
||||
n
|
||||
].value = e;
|
||||
return newInputList;
|
||||
});
|
||||
tweaks.buildTweakObject(
|
||||
t["data"]["id"],
|
||||
e,
|
||||
|
|
@ -346,12 +397,13 @@ export default function CodeTabsComponent({
|
|||
"file" ? (
|
||||
<ShadTooltip
|
||||
content={tweaks.buildContent(
|
||||
tweaks.getValue(
|
||||
!t.data.node.template[n]
|
||||
.value ||
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)
|
||||
.value === ""
|
||||
? ""
|
||||
: t.data.node.template[n]
|
||||
.value
|
||||
)}
|
||||
>
|
||||
<div className="mx-auto">
|
||||
|
|
@ -383,13 +435,26 @@ export default function CodeTabsComponent({
|
|||
<FloatComponent
|
||||
disabled={false}
|
||||
editNode={true}
|
||||
value={tweaks.getValue(
|
||||
value={
|
||||
!t.data.node.template[n]
|
||||
.value ||
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)}
|
||||
.value === ""
|
||||
? ""
|
||||
: t.data.node.template[n]
|
||||
.value
|
||||
}
|
||||
onChange={(k) => {
|
||||
setData((old) => {
|
||||
let newInputList =
|
||||
cloneDeep(old);
|
||||
newInputList[
|
||||
index
|
||||
].data.node.template[
|
||||
n
|
||||
].value = k;
|
||||
return newInputList;
|
||||
});
|
||||
tweaks.buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
|
|
@ -411,18 +476,31 @@ export default function CodeTabsComponent({
|
|||
.options
|
||||
}
|
||||
onSelect={(k) => {
|
||||
setData((old) => {
|
||||
let newInputList =
|
||||
cloneDeep(old);
|
||||
newInputList[
|
||||
index
|
||||
].data.node.template[
|
||||
n
|
||||
].value = k;
|
||||
return newInputList;
|
||||
});
|
||||
tweaks.buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
t.data.node.template[n]
|
||||
);
|
||||
}}
|
||||
value={tweaks.getValue(
|
||||
value={
|
||||
!t.data.node.template[n]
|
||||
.value ||
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)}
|
||||
.value === ""
|
||||
? ""
|
||||
: t.data.node.template[n]
|
||||
.value
|
||||
}
|
||||
></Dropdown>
|
||||
</div>
|
||||
) : t.data.node.template[n].type ===
|
||||
|
|
@ -431,13 +509,26 @@ export default function CodeTabsComponent({
|
|||
<IntComponent
|
||||
disabled={false}
|
||||
editNode={true}
|
||||
value={tweaks.getValue(
|
||||
value={
|
||||
!t.data.node.template[n]
|
||||
.value ||
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)}
|
||||
.value === ""
|
||||
? ""
|
||||
: t.data.node.template[n]
|
||||
.value
|
||||
}
|
||||
onChange={(k) => {
|
||||
setData((old) => {
|
||||
let newInputList =
|
||||
cloneDeep(old);
|
||||
newInputList[
|
||||
index
|
||||
].data.node.template[
|
||||
n
|
||||
].value = k;
|
||||
return newInputList;
|
||||
});
|
||||
tweaks.buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
|
|
@ -450,25 +541,40 @@ export default function CodeTabsComponent({
|
|||
"prompt" ? (
|
||||
<ShadTooltip
|
||||
content={tweaks.buildContent(
|
||||
tweaks.getValue(
|
||||
!t.data.node.template[n]
|
||||
.value ||
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)
|
||||
.value === ""
|
||||
? ""
|
||||
: t.data.node.template[n]
|
||||
.value
|
||||
)}
|
||||
>
|
||||
<div className="mx-auto">
|
||||
<PromptAreaComponent
|
||||
editNode={true}
|
||||
disabled={false}
|
||||
value={tweaks.getValue(
|
||||
value={
|
||||
!t.data.node.template[n]
|
||||
.value ||
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)}
|
||||
.value === ""
|
||||
? ""
|
||||
: t.data.node.template[
|
||||
n
|
||||
].value
|
||||
}
|
||||
onChange={(k) => {
|
||||
setData((old) => {
|
||||
let newInputList =
|
||||
cloneDeep(old);
|
||||
newInputList[
|
||||
index
|
||||
].data.node.template[
|
||||
n
|
||||
].value = k;
|
||||
return newInputList;
|
||||
});
|
||||
tweaks.buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
|
|
@ -494,13 +600,27 @@ export default function CodeTabsComponent({
|
|||
<CodeAreaComponent
|
||||
disabled={false}
|
||||
editNode={true}
|
||||
value={tweaks.getValue(
|
||||
value={
|
||||
!t.data.node.template[n]
|
||||
.value ||
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)}
|
||||
.value === ""
|
||||
? ""
|
||||
: t.data.node.template[
|
||||
n
|
||||
].value
|
||||
}
|
||||
onChange={(k) => {
|
||||
setData((old) => {
|
||||
let newInputList =
|
||||
cloneDeep(old);
|
||||
newInputList[
|
||||
index
|
||||
].data.node.template[
|
||||
n
|
||||
].value = k;
|
||||
return newInputList;
|
||||
});
|
||||
tweaks.buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import { useContext, useEffect, useState } from "react";
|
||||
import { useEffect } from "react";
|
||||
import { InputListComponentType } from "../../types/components";
|
||||
|
||||
import _ from "lodash";
|
||||
import { PopUpContext } from "../../contexts/popUpContext";
|
||||
import IconComponent from "../genericIconComponent";
|
||||
|
||||
export default function InputListComponent({
|
||||
|
|
@ -10,23 +9,12 @@ export default function InputListComponent({
|
|||
onChange,
|
||||
disabled,
|
||||
editNode = false,
|
||||
onAddInput,
|
||||
}: InputListComponentType) {
|
||||
const [inputList, setInputList] = useState(value ?? [""]);
|
||||
const { closeEdit } = useContext(PopUpContext);
|
||||
|
||||
useEffect(() => {
|
||||
if (value) {
|
||||
setInputList(value);
|
||||
}
|
||||
}, [closeEdit]);
|
||||
|
||||
useEffect(() => {
|
||||
if (disabled) {
|
||||
setInputList([""]);
|
||||
onChange([""]);
|
||||
}
|
||||
}, [disabled, onChange]);
|
||||
}, [disabled]);
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
@ -35,7 +23,7 @@ export default function InputListComponent({
|
|||
"flex flex-col gap-3"
|
||||
}
|
||||
>
|
||||
{inputList.map((i, idx) => {
|
||||
{value.map((i, idx) => {
|
||||
return (
|
||||
<div key={idx} className="flex w-full gap-3">
|
||||
<input
|
||||
|
|
@ -49,23 +37,17 @@ export default function InputListComponent({
|
|||
}
|
||||
placeholder="Type something..."
|
||||
onChange={(e) => {
|
||||
setInputList((old) => {
|
||||
let newInputList = _.cloneDeep(inputList);
|
||||
newInputList[idx] = e.target.value;
|
||||
return newInputList;
|
||||
});
|
||||
onChange(inputList);
|
||||
let newInputList = _.cloneDeep(value);
|
||||
newInputList[idx] = e.target.value;
|
||||
onChange(newInputList);
|
||||
}}
|
||||
/>
|
||||
{idx === inputList.length - 1 ? (
|
||||
{idx === value.length - 1 ? (
|
||||
<button
|
||||
onClick={() => {
|
||||
setInputList((old) => {
|
||||
let newInputList = _.cloneDeep(old);
|
||||
newInputList.push("");
|
||||
return newInputList;
|
||||
});
|
||||
onChange(inputList);
|
||||
let newInputList = _.cloneDeep(value);
|
||||
newInputList.push("");
|
||||
onChange(newInputList);
|
||||
}}
|
||||
>
|
||||
<IconComponent
|
||||
|
|
@ -76,12 +58,9 @@ export default function InputListComponent({
|
|||
) : (
|
||||
<button
|
||||
onClick={() => {
|
||||
setInputList((old) => {
|
||||
let newInputList = _.cloneDeep(old);
|
||||
newInputList.splice(idx, 1);
|
||||
return newInputList;
|
||||
});
|
||||
onChange(inputList);
|
||||
let newInputList = _.cloneDeep(value);
|
||||
newInputList.splice(idx, 1);
|
||||
onChange(newInputList);
|
||||
}}
|
||||
>
|
||||
<IconComponent
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ export default function ToggleShadComponent({
|
|||
scaleX = 1;
|
||||
scaleY = 1;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={disabled ? "pointer-events-none cursor-not-allowed " : ""}>
|
||||
<Switch
|
||||
|
|
|
|||
|
|
@ -22,11 +22,10 @@ import {
|
|||
TableRow,
|
||||
} from "../../components/ui/table";
|
||||
import { limitScrollFieldsModal } from "../../constants/constants";
|
||||
import { PopUpContext } from "../../contexts/popUpContext";
|
||||
import { TabsContext } from "../../contexts/tabsContext";
|
||||
import { typesContext } from "../../contexts/typesContext";
|
||||
import { NodeDataType } from "../../types/flow";
|
||||
import { classNames, getRandomKeyByssmm } from "../../utils/utils";
|
||||
import { classNames } from "../../utils/utils";
|
||||
import BaseModal from "../baseModal";
|
||||
|
||||
const EditNodeModal = forwardRef(
|
||||
|
|
@ -48,7 +47,6 @@ const EditNodeModal = forwardRef(
|
|||
const [myData, setMyData] = useState(data);
|
||||
const { setTabsState, tabId } = useContext(TabsContext);
|
||||
const { reactFlowInstance } = useContext(typesContext);
|
||||
const { setCloseEdit } = useContext(PopUpContext);
|
||||
|
||||
let disabled =
|
||||
reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ??
|
||||
|
|
@ -72,7 +70,6 @@ const EditNodeModal = forwardRef(
|
|||
|
||||
useEffect(() => {
|
||||
setMyData(data); // reset data to what it is on node when opening modal
|
||||
setCloseEdit(getRandomKeyByssmm().toString());
|
||||
}, [modalOpen]);
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -78,69 +78,75 @@ export default function ChatMessage({
|
|||
<div className="w-full dark:text-white">
|
||||
<div className="w-full">
|
||||
{useMemo(
|
||||
() => (
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm, remarkMath]}
|
||||
rehypePlugins={[rehypeMathjax]}
|
||||
className="markdown prose inline-block break-words text-primary dark:prose-invert
|
||||
() =>
|
||||
chat.message.toString() === "" && lockChat ? (
|
||||
<IconComponent
|
||||
name="MoreHorizontal"
|
||||
className="h-8 w-8 animate-pulse"
|
||||
/>
|
||||
) : (
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm, remarkMath]}
|
||||
rehypePlugins={[rehypeMathjax]}
|
||||
className="markdown prose inline-block break-words text-primary dark:prose-invert
|
||||
sm:w-[30vw] sm:max-w-[30vw] lg:w-[40vw] lg:max-w-[40vw]"
|
||||
components={{
|
||||
pre({ node, ...props }) {
|
||||
return <>{props.children}</>;
|
||||
},
|
||||
code: ({
|
||||
node,
|
||||
inline,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}) => {
|
||||
if (children.length) {
|
||||
if (children[0] === "▍") {
|
||||
return (
|
||||
<span className="form-modal-markdown-span">
|
||||
▍
|
||||
</span>
|
||||
components={{
|
||||
pre({ node, ...props }) {
|
||||
return <>{props.children}</>;
|
||||
},
|
||||
code: ({
|
||||
node,
|
||||
inline,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}) => {
|
||||
if (children.length) {
|
||||
if (children[0] === "▍") {
|
||||
return (
|
||||
<span className="form-modal-markdown-span">
|
||||
▍
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
children[0] = (children[0] as string).replace(
|
||||
"`▍`",
|
||||
"▍"
|
||||
);
|
||||
}
|
||||
|
||||
children[0] = (children[0] as string).replace(
|
||||
"`▍`",
|
||||
"▍"
|
||||
const match = /language-(\w+)/.exec(
|
||||
className || ""
|
||||
);
|
||||
}
|
||||
|
||||
const match = /language-(\w+)/.exec(
|
||||
className || ""
|
||||
);
|
||||
|
||||
return !inline ? (
|
||||
<CodeTabsComponent
|
||||
isMessage
|
||||
tabs={[
|
||||
{
|
||||
name: (match && match[1]) || "",
|
||||
mode: (match && match[1]) || "",
|
||||
image:
|
||||
"https://curl.se/logo/curl-symbol-transparent.png",
|
||||
language: (match && match[1]) || "",
|
||||
code: String(children).replace(/\n$/, ""),
|
||||
},
|
||||
]}
|
||||
activeTab={"0"}
|
||||
setActiveTab={() => {}}
|
||||
/>
|
||||
) : (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
},
|
||||
}}
|
||||
>
|
||||
{chat.message.toString()}
|
||||
</ReactMarkdown>
|
||||
),
|
||||
return !inline ? (
|
||||
<CodeTabsComponent
|
||||
isMessage
|
||||
tabs={[
|
||||
{
|
||||
name: (match && match[1]) || "",
|
||||
mode: (match && match[1]) || "",
|
||||
image:
|
||||
"https://curl.se/logo/curl-symbol-transparent.png",
|
||||
language: (match && match[1]) || "",
|
||||
code: String(children).replace(/\n$/, ""),
|
||||
},
|
||||
]}
|
||||
activeTab={"0"}
|
||||
setActiveTab={() => {}}
|
||||
/>
|
||||
) : (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
},
|
||||
}}
|
||||
>
|
||||
{chat.message.toString()}
|
||||
</ReactMarkdown>
|
||||
),
|
||||
[chat.message, chat.message.toString()]
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,6 @@ export type InputListComponentType = {
|
|||
onChange: (value: string[]) => void;
|
||||
disabled: boolean;
|
||||
editNode?: boolean;
|
||||
onAddInput?: (value?: string[]) => void;
|
||||
};
|
||||
|
||||
export type TextAreaComponentType = {
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ import {
|
|||
MessageSquare,
|
||||
MessagesSquare,
|
||||
MoonIcon,
|
||||
MoreHorizontal,
|
||||
Paperclip,
|
||||
Plus,
|
||||
Redo,
|
||||
|
|
@ -274,6 +275,7 @@ export const nodeIconsLucide = {
|
|||
Copy,
|
||||
Upload,
|
||||
MessageSquare,
|
||||
MoreHorizontal,
|
||||
};
|
||||
export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
|
||||
const sourceId = edge.source;
|
||||
|
|
|
|||
|
|
@ -367,7 +367,7 @@ export function buildTweakObject(tweak) {
|
|||
});
|
||||
});
|
||||
|
||||
const tweakString = JSON.stringify(tweak, null, 2);
|
||||
const tweakString = JSON.stringify(tweak.at(-1), null, 2);
|
||||
return tweakString;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue