Normailzed code modals
This commit is contained in:
Lucas Oliveira
parent
207e76a09d
commit
14a0669c99
4 changed files with 565 additions and 534 deletions
524
src/frontend/src/components/codeTabsComponent/index.tsx
Normal file
524
src/frontend/src/components/codeTabsComponent/index.tsx
Normal file
|
|
@ -0,0 +1,524 @@
|
||||||
|
import { Check, Clipboard, Download } from "lucide-react";
|
||||||
|
import { 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";
|
||||||
|
import ShadTooltip from "../../components/ShadTooltipComponent";
|
||||||
|
import CodeAreaComponent from "../../components/codeAreaComponent";
|
||||||
|
import Dropdown from "../../components/dropdownComponent";
|
||||||
|
import FloatComponent from "../../components/floatComponent";
|
||||||
|
import InputComponent from "../../components/inputComponent";
|
||||||
|
import InputFileComponent from "../../components/inputFileComponent";
|
||||||
|
import InputListComponent from "../../components/inputListComponent";
|
||||||
|
import IntComponent from "../../components/intComponent";
|
||||||
|
import PromptAreaComponent from "../../components/promptComponent";
|
||||||
|
import TextAreaComponent from "../../components/textAreaComponent";
|
||||||
|
import ToggleShadComponent from "../../components/toggleShadComponent";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "../../components/ui/table";
|
||||||
|
import {
|
||||||
|
Tabs,
|
||||||
|
TabsContent,
|
||||||
|
TabsList,
|
||||||
|
TabsTrigger,
|
||||||
|
} from "../../components/ui/tabs";
|
||||||
|
import { FlowType } from "../../types/flow/index";
|
||||||
|
import { classNames } from "../../utils";
|
||||||
|
|
||||||
|
export default function CodeTabsComponent({
|
||||||
|
flow,
|
||||||
|
tabs,
|
||||||
|
activeTab,
|
||||||
|
setActiveTab,
|
||||||
|
tweaks: { tweak, tweaksList, buildContent, getValue, buildTweakObject },
|
||||||
|
}: {
|
||||||
|
flow?: FlowType;
|
||||||
|
tabs: any;
|
||||||
|
activeTab: string;
|
||||||
|
setActiveTab: any;
|
||||||
|
tweaks?: any;
|
||||||
|
}) {
|
||||||
|
const [isCopied, setIsCopied] = useState<Boolean>(false);
|
||||||
|
const [openAccordion, setOpenAccordion] = useState([]);
|
||||||
|
|
||||||
|
const copyToClipboard = () => {
|
||||||
|
if (!navigator.clipboard || !navigator.clipboard.writeText) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
navigator.clipboard.writeText(tabs[activeTab].code).then(() => {
|
||||||
|
setIsCopied(true);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setIsCopied(false);
|
||||||
|
}, 2000);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const downloadAsFile = () => {
|
||||||
|
const fileExtension = tabs[activeTab].language || ".txt";
|
||||||
|
const suggestedFileName = `${"generated-code."}${fileExtension}`;
|
||||||
|
const fileName = window.prompt("Enter the file name.", suggestedFileName);
|
||||||
|
|
||||||
|
if (!fileName) {
|
||||||
|
// user pressed cancel on prompt
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const blob = new Blob([tabs[activeTab].code], { type: "text/plain" });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.download = fileName;
|
||||||
|
link.href = url;
|
||||||
|
link.style.display = "none";
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
};
|
||||||
|
|
||||||
|
function openAccordions() {
|
||||||
|
let accordionsToOpen = [];
|
||||||
|
tweak.current.forEach((el) => {
|
||||||
|
Object.keys(el).forEach((key) => {
|
||||||
|
if (Object.keys(el[key]).length > 0) {
|
||||||
|
accordionsToOpen.push(key);
|
||||||
|
setOpenAccordion(accordionsToOpen);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (accordionsToOpen.length == 0) {
|
||||||
|
setOpenAccordion([]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<Tabs
|
||||||
|
value={activeTab}
|
||||||
|
className="api-modal-tabs"
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setActiveTab(value);
|
||||||
|
if (value === "3") {
|
||||||
|
openAccordions();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="api-modal-tablist-div">
|
||||||
|
<TabsList>
|
||||||
|
{tabs.map((tab, index) => (
|
||||||
|
<TabsTrigger key={index} value={index.toString()}>
|
||||||
|
{tab.name}
|
||||||
|
</TabsTrigger>
|
||||||
|
))}
|
||||||
|
</TabsList>
|
||||||
|
{Number(activeTab) < 3 && (
|
||||||
|
<div className="float-right mx-1 flex gap-2">
|
||||||
|
<button
|
||||||
|
className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
|
||||||
|
onClick={copyToClipboard}
|
||||||
|
>
|
||||||
|
{isCopied ? <Check size={18} /> : <Clipboard size={15} />}
|
||||||
|
{isCopied ? "Copied!" : "Copy code"}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
|
||||||
|
onClick={downloadAsFile}
|
||||||
|
>
|
||||||
|
<Download size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{tabs.map((tab, index) => (
|
||||||
|
<TabsContent
|
||||||
|
value={index.toString()}
|
||||||
|
className="api-modal-tabs-content"
|
||||||
|
key={index} // Remember to add a unique key prop
|
||||||
|
>
|
||||||
|
{index < 3 ? (
|
||||||
|
<SyntaxHighlighter
|
||||||
|
className="mt-0 h-full w-full overflow-auto custom-scroll"
|
||||||
|
language={tab.mode}
|
||||||
|
style={oneDark}
|
||||||
|
>
|
||||||
|
{tab.code}
|
||||||
|
</SyntaxHighlighter>
|
||||||
|
) : index === 3 ? (
|
||||||
|
<>
|
||||||
|
<div className="api-modal-according-display">
|
||||||
|
<div
|
||||||
|
className={classNames(
|
||||||
|
"h-[70vh] w-full rounded-lg bg-muted",
|
||||||
|
1 == 1
|
||||||
|
? "overflow-scroll overflow-x-hidden custom-scroll"
|
||||||
|
: "overflow-hidden"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{flow["data"]["nodes"].map((t: any, index) => (
|
||||||
|
<div className="px-3" key={index}>
|
||||||
|
{tweaksList.current.includes(t["data"]["id"]) && (
|
||||||
|
<AccordionComponent
|
||||||
|
trigger={t["data"]["id"]}
|
||||||
|
open={openAccordion}
|
||||||
|
>
|
||||||
|
<div className="api-modal-table-arrangement">
|
||||||
|
<Table className="table-fixed bg-muted outline-1">
|
||||||
|
<TableHeader className="h-10 border-input text-xs font-medium text-ring">
|
||||||
|
<TableRow className="dark:border-b-muted">
|
||||||
|
<TableHead className="h-7 text-center">
|
||||||
|
PARAM
|
||||||
|
</TableHead>
|
||||||
|
<TableHead className="h-7 p-0 text-center">
|
||||||
|
VALUE
|
||||||
|
</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody className="p-0">
|
||||||
|
{Object.keys(t["data"]["node"]["template"])
|
||||||
|
.filter(
|
||||||
|
(n) =>
|
||||||
|
n.charAt(0) !== "_" &&
|
||||||
|
t.data.node.template[n].show &&
|
||||||
|
(t.data.node.template[n].type === "str" ||
|
||||||
|
t.data.node.template[n].type ===
|
||||||
|
"bool" ||
|
||||||
|
t.data.node.template[n].type ===
|
||||||
|
"float" ||
|
||||||
|
t.data.node.template[n].type ===
|
||||||
|
"code" ||
|
||||||
|
t.data.node.template[n].type ===
|
||||||
|
"prompt" ||
|
||||||
|
t.data.node.template[n].type ===
|
||||||
|
"file" ||
|
||||||
|
t.data.node.template[n].type === "int")
|
||||||
|
)
|
||||||
|
.map((n, i) => {
|
||||||
|
//console.log(t.data.node.template[n]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TableRow
|
||||||
|
key={i}
|
||||||
|
className="h-10 dark:border-b-muted"
|
||||||
|
>
|
||||||
|
<TableCell className="p-0 text-center text-sm text-foreground">
|
||||||
|
{n}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="p-0 text-xs text-foreground">
|
||||||
|
<div className="m-auto w-[250px]">
|
||||||
|
{t.data.node.template[n].type ===
|
||||||
|
"str" &&
|
||||||
|
!t.data.node.template[n].options ? (
|
||||||
|
<div className="mx-auto">
|
||||||
|
{t.data.node.template[n]
|
||||||
|
.list ? (
|
||||||
|
<InputListComponent
|
||||||
|
editNode={true}
|
||||||
|
disabled={false}
|
||||||
|
value={
|
||||||
|
!t.data.node.template[n]
|
||||||
|
.value ||
|
||||||
|
t.data.node.template[n]
|
||||||
|
.value === ""
|
||||||
|
? [""]
|
||||||
|
: t.data.node.template[
|
||||||
|
n
|
||||||
|
].value
|
||||||
|
}
|
||||||
|
onChange={(k) => {}}
|
||||||
|
onAddInput={(k) => {
|
||||||
|
buildTweakObject(
|
||||||
|
t["data"]["id"],
|
||||||
|
k,
|
||||||
|
t.data.node.template[n]
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : t.data.node.template[n]
|
||||||
|
.multiline ? (
|
||||||
|
<ShadTooltip
|
||||||
|
content={buildContent(
|
||||||
|
t.data.node.template[n]
|
||||||
|
.value
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<TextAreaComponent
|
||||||
|
disabled={false}
|
||||||
|
editNode={true}
|
||||||
|
value={getValue(
|
||||||
|
t.data.node.template[
|
||||||
|
n
|
||||||
|
].value,
|
||||||
|
t.data,
|
||||||
|
t.data.node.template[
|
||||||
|
n
|
||||||
|
]
|
||||||
|
)}
|
||||||
|
onChange={(k) => {
|
||||||
|
buildTweakObject(
|
||||||
|
t["data"]["id"],
|
||||||
|
k,
|
||||||
|
t.data.node
|
||||||
|
.template[n]
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ShadTooltip>
|
||||||
|
) : (
|
||||||
|
<InputComponent
|
||||||
|
editNode={true}
|
||||||
|
disabled={false}
|
||||||
|
password={
|
||||||
|
t.data.node.template[n]
|
||||||
|
.password ?? false
|
||||||
|
}
|
||||||
|
value={getValue(
|
||||||
|
t.data.node.template[n]
|
||||||
|
.value,
|
||||||
|
t.data,
|
||||||
|
t.data.node.template[n]
|
||||||
|
)}
|
||||||
|
onChange={(k) => {
|
||||||
|
buildTweakObject(
|
||||||
|
t["data"]["id"],
|
||||||
|
k,
|
||||||
|
t.data.node.template[n]
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : t.data.node.template[n].type ===
|
||||||
|
"bool" ? (
|
||||||
|
<div className="ml-auto">
|
||||||
|
{" "}
|
||||||
|
<ToggleShadComponent
|
||||||
|
enabled={
|
||||||
|
t.data.node.template[n]
|
||||||
|
.value
|
||||||
|
}
|
||||||
|
setEnabled={(e) => {
|
||||||
|
t.data.node.template[
|
||||||
|
n
|
||||||
|
].value = e;
|
||||||
|
buildTweakObject(
|
||||||
|
t["data"]["id"],
|
||||||
|
e,
|
||||||
|
t.data.node.template[n]
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
size="small"
|
||||||
|
disabled={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : t.data.node.template[n].type ===
|
||||||
|
"file" ? (
|
||||||
|
<ShadTooltip
|
||||||
|
content={buildContent(
|
||||||
|
getValue(
|
||||||
|
t.data.node.template[n]
|
||||||
|
.value,
|
||||||
|
t.data,
|
||||||
|
t.data.node.template[n]
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="mx-auto">
|
||||||
|
<InputFileComponent
|
||||||
|
editNode={true}
|
||||||
|
disabled={false}
|
||||||
|
value={
|
||||||
|
t.data.node.template[n]
|
||||||
|
.value ?? ""
|
||||||
|
}
|
||||||
|
onChange={(k: any) => {}}
|
||||||
|
fileTypes={
|
||||||
|
t.data.node.template[n]
|
||||||
|
.fileTypes
|
||||||
|
}
|
||||||
|
suffixes={
|
||||||
|
t.data.node.template[n]
|
||||||
|
.suffixes
|
||||||
|
}
|
||||||
|
onFileChange={(
|
||||||
|
k: any
|
||||||
|
) => {}}
|
||||||
|
></InputFileComponent>
|
||||||
|
</div>
|
||||||
|
</ShadTooltip>
|
||||||
|
) : t.data.node.template[n].type ===
|
||||||
|
"float" ? (
|
||||||
|
<div className="mx-auto">
|
||||||
|
<FloatComponent
|
||||||
|
disabled={false}
|
||||||
|
editNode={true}
|
||||||
|
value={getValue(
|
||||||
|
t.data.node.template[n]
|
||||||
|
.value,
|
||||||
|
t.data,
|
||||||
|
t.data.node.template[n]
|
||||||
|
)}
|
||||||
|
onChange={(k) => {
|
||||||
|
buildTweakObject(
|
||||||
|
t["data"]["id"],
|
||||||
|
k,
|
||||||
|
t.data.node.template[n]
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : t.data.node.template[n].type ===
|
||||||
|
"str" &&
|
||||||
|
t.data.node.template[n]
|
||||||
|
.options ? (
|
||||||
|
<div className="mx-auto">
|
||||||
|
<Dropdown
|
||||||
|
editNode={true}
|
||||||
|
apiModal={true}
|
||||||
|
options={
|
||||||
|
t.data.node.template[n]
|
||||||
|
.options
|
||||||
|
}
|
||||||
|
onSelect={(k) => {
|
||||||
|
buildTweakObject(
|
||||||
|
t["data"]["id"],
|
||||||
|
k,
|
||||||
|
t.data.node.template[n]
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
value={getValue(
|
||||||
|
t.data.node.template[n]
|
||||||
|
.value,
|
||||||
|
t.data,
|
||||||
|
t.data.node.template[n]
|
||||||
|
)}
|
||||||
|
></Dropdown>
|
||||||
|
</div>
|
||||||
|
) : t.data.node.template[n].type ===
|
||||||
|
"int" ? (
|
||||||
|
<div className="mx-auto">
|
||||||
|
<IntComponent
|
||||||
|
disabled={false}
|
||||||
|
editNode={true}
|
||||||
|
value={getValue(
|
||||||
|
t.data.node.template[n]
|
||||||
|
.value,
|
||||||
|
t.data,
|
||||||
|
t.data.node.template[n]
|
||||||
|
)}
|
||||||
|
onChange={(k) => {
|
||||||
|
buildTweakObject(
|
||||||
|
t["data"]["id"],
|
||||||
|
k,
|
||||||
|
t.data.node.template[n]
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : t.data.node.template[n].type ===
|
||||||
|
"prompt" ? (
|
||||||
|
<ShadTooltip
|
||||||
|
content={buildContent(
|
||||||
|
getValue(
|
||||||
|
t.data.node.template[n]
|
||||||
|
.value,
|
||||||
|
t.data,
|
||||||
|
t.data.node.template[n]
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="mx-auto">
|
||||||
|
<PromptAreaComponent
|
||||||
|
editNode={true}
|
||||||
|
disabled={false}
|
||||||
|
value={getValue(
|
||||||
|
t.data.node.template[n]
|
||||||
|
.value,
|
||||||
|
t.data,
|
||||||
|
t.data.node.template[n]
|
||||||
|
)}
|
||||||
|
onChange={(k) => {
|
||||||
|
buildTweakObject(
|
||||||
|
t["data"]["id"],
|
||||||
|
k,
|
||||||
|
t.data.node.template[n]
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ShadTooltip>
|
||||||
|
) : t.data.node.template[n].type ===
|
||||||
|
"code" ? (
|
||||||
|
<ShadTooltip
|
||||||
|
content={buildContent(
|
||||||
|
getValue(
|
||||||
|
t.data.node.template[n]
|
||||||
|
.value,
|
||||||
|
t.data,
|
||||||
|
t.data.node.template[n]
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="mx-auto">
|
||||||
|
<CodeAreaComponent
|
||||||
|
disabled={false}
|
||||||
|
editNode={true}
|
||||||
|
value={getValue(
|
||||||
|
t.data.node.template[n]
|
||||||
|
.value,
|
||||||
|
t.data,
|
||||||
|
t.data.node.template[n]
|
||||||
|
)}
|
||||||
|
onChange={(k) => {
|
||||||
|
buildTweakObject(
|
||||||
|
t["data"]["id"],
|
||||||
|
k,
|
||||||
|
t.data.node.template[n]
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ShadTooltip>
|
||||||
|
) : t.data.node.template[n].type ===
|
||||||
|
"Any" ? (
|
||||||
|
"-"
|
||||||
|
) : (
|
||||||
|
<div className="hidden"></div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</AccordionComponent>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{tweaksList.current.length === 0 && (
|
||||||
|
<>
|
||||||
|
<div className="pt-3">
|
||||||
|
No tweaks are available for this flow.
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
</TabsContent>
|
||||||
|
))}
|
||||||
|
</Tabs>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -904,7 +904,7 @@ The cursor: default; property value restores the browser's default cursor style
|
||||||
}
|
}
|
||||||
|
|
||||||
.api-modal-tabs {
|
.api-modal-tabs {
|
||||||
@apply lg:w-full h-full overflow-hidden text-center bg-muted rounded-md border sm:w-[75vw]
|
@apply lg:w-full h-full flex flex-col overflow-hidden text-center bg-muted rounded-md border sm:w-[75vw]
|
||||||
}
|
}
|
||||||
.api-modal-tablist-div {
|
.api-modal-tablist-div {
|
||||||
@apply flex items-center justify-between px-2
|
@apply flex items-center justify-between px-2
|
||||||
|
|
|
||||||
|
|
@ -11,35 +11,8 @@ import {
|
||||||
useState,
|
useState,
|
||||||
} from "react";
|
} from "react";
|
||||||
// import "ace-builds/webpack-resolver";
|
// import "ace-builds/webpack-resolver";
|
||||||
import { Check, Clipboard, Code2 } from "lucide-react";
|
import { Code2 } from "lucide-react";
|
||||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
import CodeTabsComponent from "../../components/codeTabsComponent";
|
||||||
import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
|
|
||||||
import AccordionComponent from "../../components/AccordionComponent";
|
|
||||||
import ShadTooltip from "../../components/ShadTooltipComponent";
|
|
||||||
import CodeAreaComponent from "../../components/codeAreaComponent";
|
|
||||||
import Dropdown from "../../components/dropdownComponent";
|
|
||||||
import FloatComponent from "../../components/floatComponent";
|
|
||||||
import InputComponent from "../../components/inputComponent";
|
|
||||||
import InputFileComponent from "../../components/inputFileComponent";
|
|
||||||
import InputListComponent from "../../components/inputListComponent";
|
|
||||||
import IntComponent from "../../components/intComponent";
|
|
||||||
import PromptAreaComponent from "../../components/promptComponent";
|
|
||||||
import TextAreaComponent from "../../components/textAreaComponent";
|
|
||||||
import ToggleShadComponent from "../../components/toggleShadComponent";
|
|
||||||
import {
|
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableHead,
|
|
||||||
TableHeader,
|
|
||||||
TableRow,
|
|
||||||
} from "../../components/ui/table";
|
|
||||||
import {
|
|
||||||
Tabs,
|
|
||||||
TabsContent,
|
|
||||||
TabsList,
|
|
||||||
TabsTrigger,
|
|
||||||
} from "../../components/ui/tabs";
|
|
||||||
import {
|
import {
|
||||||
EXPORT_CODE_DIALOG,
|
EXPORT_CODE_DIALOG,
|
||||||
getCurlCode,
|
getCurlCode,
|
||||||
|
|
@ -48,7 +21,7 @@ import {
|
||||||
} from "../../constants";
|
} from "../../constants";
|
||||||
import { TabsContext } from "../../contexts/tabsContext";
|
import { TabsContext } from "../../contexts/tabsContext";
|
||||||
import { FlowType } from "../../types/flow/index";
|
import { FlowType } from "../../types/flow/index";
|
||||||
import { buildTweaks, classNames } from "../../utils";
|
import { buildTweaks } from "../../utils";
|
||||||
import BaseModal from "../baseModal";
|
import BaseModal from "../baseModal";
|
||||||
|
|
||||||
const ApiModal = forwardRef(
|
const ApiModal = forwardRef(
|
||||||
|
|
@ -62,27 +35,11 @@ const ApiModal = forwardRef(
|
||||||
},
|
},
|
||||||
ref
|
ref
|
||||||
) => {
|
) => {
|
||||||
const [activeTab, setActiveTab] = useState("0");
|
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const [isCopied, setIsCopied] = useState<Boolean>(false);
|
const [activeTab, setActiveTab] = useState("0");
|
||||||
const [openAccordion, setOpenAccordion] = useState([]);
|
|
||||||
const tweak = useRef([]);
|
const tweak = useRef([]);
|
||||||
const tweaksList = useRef([]);
|
const tweaksList = useRef([]);
|
||||||
const { setTweak, getTweak, tabsState } = useContext(TabsContext);
|
const { setTweak, getTweak, tabsState } = useContext(TabsContext);
|
||||||
|
|
||||||
const copyToClipboard = () => {
|
|
||||||
if (!navigator.clipboard || !navigator.clipboard.writeText) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
navigator.clipboard.writeText(tabs[activeTab].code).then(() => {
|
|
||||||
setIsCopied(true);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setIsCopied(false);
|
|
||||||
}, 2000);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const pythonApiCode = getPythonApiCode(flow, tweak.current, tabsState);
|
const pythonApiCode = getPythonApiCode(flow, tweak.current, tabsState);
|
||||||
const curl_code = getCurlCode(flow, tweak.current, tabsState);
|
const curl_code = getCurlCode(flow, tweak.current, tabsState);
|
||||||
const pythonCode = getPythonCode(flow, tweak.current, tabsState);
|
const pythonCode = getPythonCode(flow, tweak.current, tabsState);
|
||||||
|
|
@ -92,6 +49,7 @@ const ApiModal = forwardRef(
|
||||||
name: "cURL",
|
name: "cURL",
|
||||||
mode: "bash",
|
mode: "bash",
|
||||||
image: "https://curl.se/logo/curl-symbol-transparent.png",
|
image: "https://curl.se/logo/curl-symbol-transparent.png",
|
||||||
|
language: "sh",
|
||||||
code: curl_code,
|
code: curl_code,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -99,12 +57,14 @@ const ApiModal = forwardRef(
|
||||||
mode: "python",
|
mode: "python",
|
||||||
image:
|
image:
|
||||||
"https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
|
"https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
|
||||||
|
language: "py",
|
||||||
code: pythonApiCode,
|
code: pythonApiCode,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Python Code",
|
name: "Python Code",
|
||||||
mode: "python",
|
mode: "python",
|
||||||
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
|
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
|
||||||
|
language: "py",
|
||||||
code: pythonCode,
|
code: pythonCode,
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
@ -133,6 +93,7 @@ const ApiModal = forwardRef(
|
||||||
name: "cURL",
|
name: "cURL",
|
||||||
mode: "bash",
|
mode: "bash",
|
||||||
image: "https://curl.se/logo/curl-symbol-transparent.png",
|
image: "https://curl.se/logo/curl-symbol-transparent.png",
|
||||||
|
language: "sh",
|
||||||
code: curl_code,
|
code: curl_code,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -140,11 +101,13 @@ const ApiModal = forwardRef(
|
||||||
mode: "python",
|
mode: "python",
|
||||||
image:
|
image:
|
||||||
"https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
|
"https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
|
||||||
|
language: "py",
|
||||||
code: pythonApiCode,
|
code: pythonApiCode,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Python Code",
|
name: "Python Code",
|
||||||
mode: "python",
|
mode: "python",
|
||||||
|
language: "py",
|
||||||
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
|
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
|
||||||
code: pythonCode,
|
code: pythonCode,
|
||||||
},
|
},
|
||||||
|
|
@ -152,6 +115,7 @@ const ApiModal = forwardRef(
|
||||||
name: "Tweaks",
|
name: "Tweaks",
|
||||||
mode: "python",
|
mode: "python",
|
||||||
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
|
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
|
||||||
|
language: "py",
|
||||||
code: pythonCode,
|
code: pythonCode,
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
@ -161,6 +125,7 @@ const ApiModal = forwardRef(
|
||||||
name: "cURL",
|
name: "cURL",
|
||||||
mode: "bash",
|
mode: "bash",
|
||||||
image: "https://curl.se/logo/curl-symbol-transparent.png",
|
image: "https://curl.se/logo/curl-symbol-transparent.png",
|
||||||
|
language: "sh",
|
||||||
code: curl_code,
|
code: curl_code,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -168,12 +133,14 @@ const ApiModal = forwardRef(
|
||||||
mode: "python",
|
mode: "python",
|
||||||
image:
|
image:
|
||||||
"https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
|
"https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
|
||||||
|
language: "py",
|
||||||
code: pythonApiCode,
|
code: pythonApiCode,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Python Code",
|
name: "Python Code",
|
||||||
mode: "python",
|
mode: "python",
|
||||||
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
|
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
|
||||||
|
language: "py",
|
||||||
code: pythonCode,
|
code: pythonCode,
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
@ -206,7 +173,6 @@ const ApiModal = forwardRef(
|
||||||
return self.indexOf(value) === index;
|
return self.indexOf(value) === index;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function buildTweakObject(tw, changes, template) {
|
function buildTweakObject(tw, changes, template) {
|
||||||
if (template.type === "float") {
|
if (template.type === "float") {
|
||||||
changes = parseFloat(changes);
|
changes = parseFloat(changes);
|
||||||
|
|
@ -286,22 +252,6 @@ const ApiModal = forwardRef(
|
||||||
return returnValue;
|
return returnValue;
|
||||||
}
|
}
|
||||||
|
|
||||||
function openAccordions() {
|
|
||||||
let accordionsToOpen = [];
|
|
||||||
tweak.current.forEach((el) => {
|
|
||||||
Object.keys(el).forEach((key) => {
|
|
||||||
if (Object.keys(el[key]).length > 0) {
|
|
||||||
accordionsToOpen.push(key);
|
|
||||||
setOpenAccordion(accordionsToOpen);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
if (accordionsToOpen.length == 0) {
|
|
||||||
setOpenAccordion([]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BaseModal open={open} setOpen={setOpen}>
|
<BaseModal open={open} setOpen={setOpen}>
|
||||||
<BaseModal.Trigger>{children}</BaseModal.Trigger>
|
<BaseModal.Trigger>{children}</BaseModal.Trigger>
|
||||||
|
|
@ -314,470 +264,19 @@ const ApiModal = forwardRef(
|
||||||
/>
|
/>
|
||||||
</BaseModal.Header>
|
</BaseModal.Header>
|
||||||
<BaseModal.Content>
|
<BaseModal.Content>
|
||||||
<Tabs
|
<CodeTabsComponent
|
||||||
value={activeTab}
|
flow={flow}
|
||||||
className="api-modal-tabs"
|
tabs={tabs}
|
||||||
onValueChange={(value) => {
|
activeTab={activeTab}
|
||||||
setActiveTab(value);
|
setActiveTab={setActiveTab}
|
||||||
if (value === "3") {
|
tweaks={{
|
||||||
openAccordions();
|
tweak,
|
||||||
}
|
tweaksList,
|
||||||
}}
|
buildContent,
|
||||||
>
|
buildTweakObject,
|
||||||
<div className="api-modal-tablist-div">
|
getValue,
|
||||||
<TabsList>
|
|
||||||
{tabs.map((tab, index) => (
|
|
||||||
<TabsTrigger key={index} value={index.toString()}>
|
|
||||||
{tab.name}
|
|
||||||
</TabsTrigger>
|
|
||||||
))}
|
|
||||||
</TabsList>
|
|
||||||
{Number(activeTab) < 3 && (
|
|
||||||
<div className="float-right">
|
|
||||||
<button
|
|
||||||
className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
|
|
||||||
onClick={copyToClipboard}
|
|
||||||
>
|
|
||||||
{isCopied ? <Check size={18} /> : <Clipboard size={15} />}
|
|
||||||
{isCopied ? "Copied!" : "Copy code"}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{tabs.map((tab, index) => (
|
|
||||||
<TabsContent
|
|
||||||
value={index.toString()}
|
|
||||||
className="api-modal-tabs-content"
|
|
||||||
key={index} // Remember to add a unique key prop
|
|
||||||
>
|
|
||||||
{index < 3 ? (
|
|
||||||
<SyntaxHighlighter
|
|
||||||
className="h-[70vh] w-full overflow-auto custom-scroll"
|
|
||||||
language={tab.mode}
|
|
||||||
style={oneDark}
|
|
||||||
>
|
|
||||||
{tab.code}
|
|
||||||
</SyntaxHighlighter>
|
|
||||||
) : index === 3 ? (
|
|
||||||
<>
|
|
||||||
<div className="api-modal-according-display">
|
|
||||||
<div
|
|
||||||
className={classNames(
|
|
||||||
"h-[70vh] w-full rounded-lg bg-muted",
|
|
||||||
1 == 1
|
|
||||||
? "overflow-scroll overflow-x-hidden custom-scroll"
|
|
||||||
: "overflow-hidden"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{flow["data"]["nodes"].map((t: any, index) => (
|
|
||||||
<div className="px-3" key={index}>
|
|
||||||
{tweaksList.current.includes(t["data"]["id"]) && (
|
|
||||||
<AccordionComponent
|
|
||||||
trigger={t["data"]["id"]}
|
|
||||||
open={openAccordion}
|
|
||||||
>
|
|
||||||
<div className="api-modal-table-arrangement">
|
|
||||||
<Table className="table-fixed bg-muted outline-1">
|
|
||||||
<TableHeader className="h-10 border-input text-xs font-medium text-ring">
|
|
||||||
<TableRow className="dark:border-b-muted">
|
|
||||||
<TableHead className="h-7 text-center">
|
|
||||||
PARAM
|
|
||||||
</TableHead>
|
|
||||||
<TableHead className="h-7 p-0 text-center">
|
|
||||||
VALUE
|
|
||||||
</TableHead>
|
|
||||||
</TableRow>
|
|
||||||
</TableHeader>
|
|
||||||
<TableBody className="p-0">
|
|
||||||
{Object.keys(
|
|
||||||
t["data"]["node"]["template"]
|
|
||||||
)
|
|
||||||
.filter(
|
|
||||||
(n) =>
|
|
||||||
n.charAt(0) !== "_" &&
|
|
||||||
t.data.node.template[n].show &&
|
|
||||||
(t.data.node.template[n].type ===
|
|
||||||
"str" ||
|
|
||||||
t.data.node.template[n].type ===
|
|
||||||
"bool" ||
|
|
||||||
t.data.node.template[n].type ===
|
|
||||||
"float" ||
|
|
||||||
t.data.node.template[n].type ===
|
|
||||||
"code" ||
|
|
||||||
t.data.node.template[n].type ===
|
|
||||||
"prompt" ||
|
|
||||||
t.data.node.template[n].type ===
|
|
||||||
"file" ||
|
|
||||||
t.data.node.template[n].type ===
|
|
||||||
"int")
|
|
||||||
)
|
|
||||||
.map((n, i) => {
|
|
||||||
//console.log(t.data.node.template[n]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TableRow
|
|
||||||
key={i}
|
|
||||||
className="h-10 dark:border-b-muted"
|
|
||||||
>
|
|
||||||
<TableCell className="p-0 text-center text-sm text-foreground">
|
|
||||||
{n}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="p-0 text-xs text-foreground">
|
|
||||||
<div className="m-auto w-[250px]">
|
|
||||||
{t.data.node.template[n]
|
|
||||||
.type === "str" &&
|
|
||||||
!t.data.node.template[n]
|
|
||||||
.options ? (
|
|
||||||
<div className="mx-auto">
|
|
||||||
{t.data.node.template[n]
|
|
||||||
.list ? (
|
|
||||||
<InputListComponent
|
|
||||||
editNode={true}
|
|
||||||
disabled={false}
|
|
||||||
value={
|
|
||||||
!t.data.node
|
|
||||||
.template[n]
|
|
||||||
.value ||
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
.value === ""
|
|
||||||
? [""]
|
|
||||||
: t.data.node
|
|
||||||
.template[n]
|
|
||||||
.value
|
|
||||||
}
|
|
||||||
onChange={(k) => {}}
|
|
||||||
onAddInput={(k) => {
|
|
||||||
buildTweakObject(
|
|
||||||
t["data"]["id"],
|
|
||||||
k,
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
);
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
) : t.data.node.template[
|
|
||||||
n
|
|
||||||
].multiline ? (
|
|
||||||
<ShadTooltip
|
|
||||||
content={buildContent(
|
|
||||||
t.data.node
|
|
||||||
.template[n].value
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<TextAreaComponent
|
|
||||||
disabled={false}
|
|
||||||
editNode={true}
|
|
||||||
value={getValue(
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
.value,
|
|
||||||
t.data,
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
)}
|
|
||||||
onChange={(k) => {
|
|
||||||
buildTweakObject(
|
|
||||||
t["data"][
|
|
||||||
"id"
|
|
||||||
],
|
|
||||||
k,
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ShadTooltip>
|
|
||||||
) : (
|
|
||||||
<InputComponent
|
|
||||||
editNode={true}
|
|
||||||
disabled={false}
|
|
||||||
password={
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
.password ?? false
|
|
||||||
}
|
|
||||||
value={getValue(
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
.value,
|
|
||||||
t.data,
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
)}
|
|
||||||
onChange={(k) => {
|
|
||||||
buildTweakObject(
|
|
||||||
t["data"]["id"],
|
|
||||||
k,
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : t.data.node.template[n]
|
|
||||||
.type === "bool" ? (
|
|
||||||
<div className="ml-auto">
|
|
||||||
{" "}
|
|
||||||
<ToggleShadComponent
|
|
||||||
enabled={
|
|
||||||
t.data.node.template[
|
|
||||||
n
|
|
||||||
].value
|
|
||||||
}
|
|
||||||
setEnabled={(e) => {
|
|
||||||
t.data.node.template[
|
|
||||||
n
|
|
||||||
].value = e;
|
|
||||||
buildTweakObject(
|
|
||||||
t["data"]["id"],
|
|
||||||
e,
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
size="small"
|
|
||||||
disabled={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : t.data.node.template[n]
|
|
||||||
.type === "file" ? (
|
|
||||||
<ShadTooltip
|
|
||||||
content={buildContent(
|
|
||||||
getValue(
|
|
||||||
t.data.node.template[
|
|
||||||
n
|
|
||||||
].value,
|
|
||||||
t.data,
|
|
||||||
t.data.node.template[
|
|
||||||
n
|
|
||||||
]
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="mx-auto">
|
|
||||||
<InputFileComponent
|
|
||||||
editNode={true}
|
|
||||||
disabled={false}
|
|
||||||
value={
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
.value ?? ""
|
|
||||||
}
|
|
||||||
onChange={(
|
|
||||||
k: any
|
|
||||||
) => {}}
|
|
||||||
fileTypes={
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
.fileTypes
|
|
||||||
}
|
|
||||||
suffixes={
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
.suffixes
|
|
||||||
}
|
|
||||||
onFileChange={(
|
|
||||||
k: any
|
|
||||||
) => {}}
|
|
||||||
></InputFileComponent>
|
|
||||||
</div>
|
|
||||||
</ShadTooltip>
|
|
||||||
) : t.data.node.template[n]
|
|
||||||
.type === "float" ? (
|
|
||||||
<div className="mx-auto">
|
|
||||||
<FloatComponent
|
|
||||||
disabled={false}
|
|
||||||
editNode={true}
|
|
||||||
value={getValue(
|
|
||||||
t.data.node.template[
|
|
||||||
n
|
|
||||||
].value,
|
|
||||||
t.data,
|
|
||||||
t.data.node.template[
|
|
||||||
n
|
|
||||||
]
|
|
||||||
)}
|
|
||||||
onChange={(k) => {
|
|
||||||
buildTweakObject(
|
|
||||||
t["data"]["id"],
|
|
||||||
k,
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : t.data.node.template[n]
|
|
||||||
.type === "str" &&
|
|
||||||
t.data.node.template[n]
|
|
||||||
.options ? (
|
|
||||||
<div className="mx-auto">
|
|
||||||
<Dropdown
|
|
||||||
editNode={true}
|
|
||||||
apiModal={true}
|
|
||||||
options={
|
|
||||||
t.data.node.template[
|
|
||||||
n
|
|
||||||
].options
|
|
||||||
}
|
|
||||||
onSelect={(k) => {
|
|
||||||
buildTweakObject(
|
|
||||||
t["data"]["id"],
|
|
||||||
k,
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
value={getValue(
|
|
||||||
t.data.node.template[
|
|
||||||
n
|
|
||||||
].value,
|
|
||||||
t.data,
|
|
||||||
t.data.node.template[
|
|
||||||
n
|
|
||||||
]
|
|
||||||
)}
|
|
||||||
></Dropdown>
|
|
||||||
</div>
|
|
||||||
) : t.data.node.template[n]
|
|
||||||
.type === "int" ? (
|
|
||||||
<div className="mx-auto">
|
|
||||||
<IntComponent
|
|
||||||
disabled={false}
|
|
||||||
editNode={true}
|
|
||||||
value={getValue(
|
|
||||||
t.data.node.template[
|
|
||||||
n
|
|
||||||
].value,
|
|
||||||
t.data,
|
|
||||||
t.data.node.template[
|
|
||||||
n
|
|
||||||
]
|
|
||||||
)}
|
|
||||||
onChange={(k) => {
|
|
||||||
buildTweakObject(
|
|
||||||
t["data"]["id"],
|
|
||||||
k,
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : t.data.node.template[n]
|
|
||||||
.type === "prompt" ? (
|
|
||||||
<ShadTooltip
|
|
||||||
content={buildContent(
|
|
||||||
getValue(
|
|
||||||
t.data.node.template[
|
|
||||||
n
|
|
||||||
].value,
|
|
||||||
t.data,
|
|
||||||
t.data.node.template[
|
|
||||||
n
|
|
||||||
]
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="mx-auto">
|
|
||||||
<PromptAreaComponent
|
|
||||||
editNode={true}
|
|
||||||
disabled={false}
|
|
||||||
value={getValue(
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
.value,
|
|
||||||
t.data,
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
)}
|
|
||||||
onChange={(k) => {
|
|
||||||
buildTweakObject(
|
|
||||||
t["data"]["id"],
|
|
||||||
k,
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ShadTooltip>
|
|
||||||
) : t.data.node.template[n]
|
|
||||||
.type === "code" ? (
|
|
||||||
<ShadTooltip
|
|
||||||
content={buildContent(
|
|
||||||
getValue(
|
|
||||||
t.data.node.template[
|
|
||||||
n
|
|
||||||
].value,
|
|
||||||
t.data,
|
|
||||||
t.data.node.template[
|
|
||||||
n
|
|
||||||
]
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="mx-auto">
|
|
||||||
<CodeAreaComponent
|
|
||||||
disabled={false}
|
|
||||||
editNode={true}
|
|
||||||
value={getValue(
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
.value,
|
|
||||||
t.data,
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
)}
|
|
||||||
onChange={(k) => {
|
|
||||||
buildTweakObject(
|
|
||||||
t["data"]["id"],
|
|
||||||
k,
|
|
||||||
t.data.node
|
|
||||||
.template[n]
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ShadTooltip>
|
|
||||||
) : t.data.node.template[n]
|
|
||||||
.type === "Any" ? (
|
|
||||||
"-"
|
|
||||||
) : (
|
|
||||||
<div className="hidden"></div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
</AccordionComponent>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{tweaksList.current.length === 0 && (
|
|
||||||
<>
|
|
||||||
<div className="pt-3">
|
|
||||||
No tweaks are available for this flow.
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
) : null}
|
|
||||||
</TabsContent>
|
|
||||||
))}
|
|
||||||
</Tabs>
|
|
||||||
</BaseModal.Content>
|
</BaseModal.Content>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -8,11 +8,11 @@ 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 SanitizedHTMLWrapper from "../../../components/SanitizedHTMLWrapper";
|
import SanitizedHTMLWrapper from "../../../components/SanitizedHTMLWrapper";
|
||||||
|
import CodeTabsComponent from "../../../components/codeTabsComponent";
|
||||||
import { THOUGHTS_ICON } from "../../../constants";
|
import { THOUGHTS_ICON } from "../../../constants";
|
||||||
import { ChatMessageType } from "../../../types/chat";
|
import { ChatMessageType } from "../../../types/chat";
|
||||||
import { classNames } from "../../../utils";
|
import { classNames } from "../../../utils";
|
||||||
import FileCard from "../fileComponent";
|
import FileCard from "../fileComponent";
|
||||||
import { CodeBlock } from "./codeBlock";
|
|
||||||
export default function ChatMessage({
|
export default function ChatMessage({
|
||||||
chat,
|
chat,
|
||||||
lockChat,
|
lockChat,
|
||||||
|
|
@ -110,11 +110,19 @@ export default function ChatMessage({
|
||||||
);
|
);
|
||||||
|
|
||||||
return !inline ? (
|
return !inline ? (
|
||||||
<CodeBlock
|
<CodeTabsComponent
|
||||||
key={Math.random()}
|
tabs={[
|
||||||
language={(match && match[1]) || ""}
|
{
|
||||||
value={String(children).replace(/\n$/, "")}
|
name: (match && match[1]) || "",
|
||||||
{...props}
|
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}>
|
<code className={className} {...props}>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue