From 1ff4ef514f49e8616dc6c4ba4ab16b4c4531e6de Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Mon, 17 Jul 2023 10:48:45 -0300 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=94=A7=20fix(AccordionComponent):=20a?= =?UTF-8?q?dd=20className=20"AccordionContent"=20to=20AccordionContent=20c?= =?UTF-8?q?omponent=20for=20styling=20purposes=20=F0=9F=94=A7=20fix(formMo?= =?UTF-8?q?dal):=20add=20className=20"AccordionContent"=20to=20AccordionCo?= =?UTF-8?q?ntent=20component=20for=20styling=20purposes=20=F0=9F=94=A7=20f?= =?UTF-8?q?ix(index.css):=20add=20styles=20for=20AccordionContent=20compon?= =?UTF-8?q?ent=20to=20handle=20animation=20for=20opening=20and=20closing?= =?UTF-8?q?=20=F0=9F=94=A7=20fix(tailwind.config.js):=20remove=20unused=20?= =?UTF-8?q?keyframes=20and=20animations=20related=20to=20accordion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/package-lock.json | 3 +- .../components/AccordionComponent/index.tsx | 2 +- src/frontend/src/index.css | 28 +++++++++++++++++ src/frontend/src/modals/formModal/index.tsx | 2 +- src/frontend/tailwind.config.js | 30 ++----------------- 5 files changed, 33 insertions(+), 32 deletions(-) diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 04abc4875..68c508e40 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -3577,7 +3577,7 @@ "version": "16.18.12", "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.12.tgz", "integrity": "sha512-vzLe5NaNMjIE3mcddFVGlAXN1LEWueUsMsOJWaT6wWMJGyljHAWHznqfnKUQWGzu7TLPrGvWdNAsvQYW+C0xtw==", - "dev": true + "devOptional": true }, "node_modules/@types/parse-json": { "version": "4.0.0", @@ -5623,7 +5623,6 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/AccordionComponent/index.tsx index 3cd836c1f..cb762cc0e 100644 --- a/src/frontend/src/components/AccordionComponent/index.tsx +++ b/src/frontend/src/components/AccordionComponent/index.tsx @@ -45,7 +45,7 @@ export default function AccordionComponent({ > {trigger} - {children} + {children} diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css index 15556b27c..12519851d 100644 --- a/src/frontend/src/index.css +++ b/src/frontend/src/index.css @@ -152,6 +152,34 @@ The cursor: default; property value restores the browser's default cursor style cursor: default; } +.AccordionContent { + overflow: hidden; +} +.AccordionContent[data-state='open'] { + animation: slideDown 300ms ease-out; +} +.AccordionContent[data-state='closed'] { + animation: slideUp 300ms ease-out; +} + +@keyframes slideDown { + from { + height: 0; + } + to { + height: var(--radix-accordion-content-height); + } +} + +@keyframes slideUp { + from { + height: var(--radix-accordion-content-height); + } + to { + height: 0; + } +} + @layer components { .round-buttons-position { diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx index 3f2b21551..0fa13d0d5 100644 --- a/src/frontend/src/modals/formModal/index.tsx +++ b/src/frontend/src/modals/formModal/index.tsx @@ -452,7 +452,7 @@ export default function FormModal({ - +
{tabsState[ id.current diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js index a3e0452c9..15cf93ff2 100644 --- a/src/frontend/tailwind.config.js +++ b/src/frontend/tailwind.config.js @@ -28,20 +28,7 @@ module.exports = { }, }, extend: { - keyframes: { - "accordion-down": { - from: { height: 0 }, - to: { height: "var(--radix-accordion-content-height)" }, - }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, - }, - }, - animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out", - }, + colors: { connection: "var(--connection)", "almost-dark-gray": "var(--almost-dark-gray)", @@ -129,20 +116,7 @@ module.exports = { fontFamily: { sans: ["var(--font-sans)", ...fontFamily.sans], }, - keyframes: { - slideDown: { - from: { height: 0 }, - to: { height: "100vh" }, - }, - slideUp: { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, - }, - }, - animation: { - "accordion-down": "slideDown 300ms ease-out", - "accordion-up": "slideUp 300ms ease-in", - }, + }, }, From 14a0669c992adead98719eccfc300175768de7ab Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Mon, 17 Jul 2023 13:27:04 -0300 Subject: [PATCH 2/4] Normailzed code modals --- .../components/codeTabsComponent/index.tsx | 524 +++++++++++++++++ src/frontend/src/index.css | 2 +- src/frontend/src/modals/ApiModal/index.tsx | 553 +----------------- .../modals/formModal/chatMessage/index.tsx | 20 +- 4 files changed, 565 insertions(+), 534 deletions(-) create mode 100644 src/frontend/src/components/codeTabsComponent/index.tsx diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx new file mode 100644 index 000000000..744e0e171 --- /dev/null +++ b/src/frontend/src/components/codeTabsComponent/index.tsx @@ -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(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 ( + { + setActiveTab(value); + if (value === "3") { + openAccordions(); + } + }} + > +
+ + {tabs.map((tab, index) => ( + + {tab.name} + + ))} + + {Number(activeTab) < 3 && ( +
+ + +
+ )} +
+ + {tabs.map((tab, index) => ( + + {index < 3 ? ( + + {tab.code} + + ) : index === 3 ? ( + <> +
+
+ {flow["data"]["nodes"].map((t: any, index) => ( +
+ {tweaksList.current.includes(t["data"]["id"]) && ( + +
+ + + + + PARAM + + + VALUE + + + + + {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 ( + + + {n} + + +
+ {t.data.node.template[n].type === + "str" && + !t.data.node.template[n].options ? ( +
+ {t.data.node.template[n] + .list ? ( + {}} + onAddInput={(k) => { + buildTweakObject( + t["data"]["id"], + k, + t.data.node.template[n] + ); + }} + /> + ) : t.data.node.template[n] + .multiline ? ( + +
+ { + buildTweakObject( + t["data"]["id"], + k, + t.data.node + .template[n] + ); + }} + /> +
+ + ) : ( + { + buildTweakObject( + t["data"]["id"], + k, + t.data.node.template[n] + ); + }} + /> + )} +
+ ) : t.data.node.template[n].type === + "bool" ? ( +
+ {" "} + { + t.data.node.template[ + n + ].value = e; + buildTweakObject( + t["data"]["id"], + e, + t.data.node.template[n] + ); + }} + size="small" + disabled={false} + /> +
+ ) : t.data.node.template[n].type === + "file" ? ( + +
+ {}} + fileTypes={ + t.data.node.template[n] + .fileTypes + } + suffixes={ + t.data.node.template[n] + .suffixes + } + onFileChange={( + k: any + ) => {}} + > +
+ + ) : t.data.node.template[n].type === + "float" ? ( +
+ { + buildTweakObject( + t["data"]["id"], + k, + t.data.node.template[n] + ); + }} + /> +
+ ) : t.data.node.template[n].type === + "str" && + t.data.node.template[n] + .options ? ( +
+ { + 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] + )} + > +
+ ) : t.data.node.template[n].type === + "int" ? ( +
+ { + buildTweakObject( + t["data"]["id"], + k, + t.data.node.template[n] + ); + }} + /> +
+ ) : t.data.node.template[n].type === + "prompt" ? ( + +
+ { + buildTweakObject( + t["data"]["id"], + k, + t.data.node.template[n] + ); + }} + /> +
+ + ) : t.data.node.template[n].type === + "code" ? ( + +
+ { + buildTweakObject( + t["data"]["id"], + k, + t.data.node.template[n] + ); + }} + /> +
+ + ) : t.data.node.template[n].type === + "Any" ? ( + "-" + ) : ( +
+ )} +
+ + + ); + })} + +
+
+ + )} + + {tweaksList.current.length === 0 && ( + <> +
+ No tweaks are available for this flow. +
+ + )} +
+ ))} +
+
+ + ) : null} + + ))} + + ); +} diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css index 15556b27c..c81038284 100644 --- a/src/frontend/src/index.css +++ b/src/frontend/src/index.css @@ -904,7 +904,7 @@ The cursor: default; property value restores the browser's default cursor style } .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 { @apply flex items-center justify-between px-2 diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index 1d530ca6d..c4571bf26 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -11,35 +11,8 @@ import { useState, } from "react"; // import "ace-builds/webpack-resolver"; -import { Check, Clipboard, Code2 } from "lucide-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 { Code2 } from "lucide-react"; +import CodeTabsComponent from "../../components/codeTabsComponent"; import { EXPORT_CODE_DIALOG, getCurlCode, @@ -48,7 +21,7 @@ import { } from "../../constants"; import { TabsContext } from "../../contexts/tabsContext"; import { FlowType } from "../../types/flow/index"; -import { buildTweaks, classNames } from "../../utils"; +import { buildTweaks } from "../../utils"; import BaseModal from "../baseModal"; const ApiModal = forwardRef( @@ -62,27 +35,11 @@ const ApiModal = forwardRef( }, ref ) => { - const [activeTab, setActiveTab] = useState("0"); const [open, setOpen] = useState(false); - const [isCopied, setIsCopied] = useState(false); - const [openAccordion, setOpenAccordion] = useState([]); + const [activeTab, setActiveTab] = useState("0"); const tweak = useRef([]); const tweaksList = useRef([]); 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 curl_code = getCurlCode(flow, tweak.current, tabsState); const pythonCode = getPythonCode(flow, tweak.current, tabsState); @@ -92,6 +49,7 @@ const ApiModal = forwardRef( name: "cURL", mode: "bash", image: "https://curl.se/logo/curl-symbol-transparent.png", + language: "sh", code: curl_code, }, { @@ -99,12 +57,14 @@ const ApiModal = forwardRef( mode: "python", image: "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w", + language: "py", code: pythonApiCode, }, { name: "Python Code", mode: "python", image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png", + language: "py", code: pythonCode, }, ]); @@ -133,6 +93,7 @@ const ApiModal = forwardRef( name: "cURL", mode: "bash", image: "https://curl.se/logo/curl-symbol-transparent.png", + language: "sh", code: curl_code, }, { @@ -140,11 +101,13 @@ const ApiModal = forwardRef( mode: "python", image: "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w", + language: "py", code: pythonApiCode, }, { name: "Python Code", mode: "python", + language: "py", image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png", code: pythonCode, }, @@ -152,6 +115,7 @@ const ApiModal = forwardRef( name: "Tweaks", mode: "python", image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png", + language: "py", code: pythonCode, }, ]); @@ -161,6 +125,7 @@ const ApiModal = forwardRef( name: "cURL", mode: "bash", image: "https://curl.se/logo/curl-symbol-transparent.png", + language: "sh", code: curl_code, }, { @@ -168,12 +133,14 @@ const ApiModal = forwardRef( mode: "python", image: "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w", + language: "py", code: pythonApiCode, }, { name: "Python Code", mode: "python", image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png", + language: "py", code: pythonCode, }, ]); @@ -206,7 +173,6 @@ const ApiModal = forwardRef( return self.indexOf(value) === index; }); } - function buildTweakObject(tw, changes, template) { if (template.type === "float") { changes = parseFloat(changes); @@ -286,22 +252,6 @@ const ApiModal = forwardRef( 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 ( {children} @@ -314,470 +264,19 @@ const ApiModal = forwardRef( /> - { - setActiveTab(value); - if (value === "3") { - openAccordions(); - } + -
- - {tabs.map((tab, index) => ( - - {tab.name} - - ))} - - {Number(activeTab) < 3 && ( -
- -
- )} -
- - {tabs.map((tab, index) => ( - - {index < 3 ? ( - - {tab.code} - - ) : index === 3 ? ( - <> -
-
- {flow["data"]["nodes"].map((t: any, index) => ( -
- {tweaksList.current.includes(t["data"]["id"]) && ( - -
- - - - - PARAM - - - VALUE - - - - - {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 ( - - - {n} - - -
- {t.data.node.template[n] - .type === "str" && - !t.data.node.template[n] - .options ? ( -
- {t.data.node.template[n] - .list ? ( - {}} - onAddInput={(k) => { - buildTweakObject( - t["data"]["id"], - k, - t.data.node - .template[n] - ); - }} - /> - ) : t.data.node.template[ - n - ].multiline ? ( - -
- { - buildTweakObject( - t["data"][ - "id" - ], - k, - t.data.node - .template[n] - ); - }} - /> -
- - ) : ( - { - buildTweakObject( - t["data"]["id"], - k, - t.data.node - .template[n] - ); - }} - /> - )} -
- ) : t.data.node.template[n] - .type === "bool" ? ( -
- {" "} - { - t.data.node.template[ - n - ].value = e; - buildTweakObject( - t["data"]["id"], - e, - t.data.node - .template[n] - ); - }} - size="small" - disabled={false} - /> -
- ) : t.data.node.template[n] - .type === "file" ? ( - -
- {}} - fileTypes={ - t.data.node - .template[n] - .fileTypes - } - suffixes={ - t.data.node - .template[n] - .suffixes - } - onFileChange={( - k: any - ) => {}} - > -
- - ) : t.data.node.template[n] - .type === "float" ? ( -
- { - buildTweakObject( - t["data"]["id"], - k, - t.data.node - .template[n] - ); - }} - /> -
- ) : t.data.node.template[n] - .type === "str" && - t.data.node.template[n] - .options ? ( -
- { - 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 - ] - )} - > -
- ) : t.data.node.template[n] - .type === "int" ? ( -
- { - buildTweakObject( - t["data"]["id"], - k, - t.data.node - .template[n] - ); - }} - /> -
- ) : t.data.node.template[n] - .type === "prompt" ? ( - -
- { - buildTweakObject( - t["data"]["id"], - k, - t.data.node - .template[n] - ); - }} - /> -
- - ) : t.data.node.template[n] - .type === "code" ? ( - -
- { - buildTweakObject( - t["data"]["id"], - k, - t.data.node - .template[n] - ); - }} - /> -
- - ) : t.data.node.template[n] - .type === "Any" ? ( - "-" - ) : ( -
- )} -
- - - ); - })} - -
-
- - )} - - {tweaksList.current.length === 0 && ( - <> -
- No tweaks are available for this flow. -
- - )} -
- ))} -
-
- - ) : null} - - ))} - + /> ); diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx index 953aed530..31b389efb 100644 --- a/src/frontend/src/modals/formModal/chatMessage/index.tsx +++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx @@ -8,11 +8,11 @@ import remarkMath from "remark-math"; import MaleTechnology from "../../../assets/male-technologist.png"; import Robot from "../../../assets/robot.png"; import SanitizedHTMLWrapper from "../../../components/SanitizedHTMLWrapper"; +import CodeTabsComponent from "../../../components/codeTabsComponent"; import { THOUGHTS_ICON } from "../../../constants"; import { ChatMessageType } from "../../../types/chat"; import { classNames } from "../../../utils"; import FileCard from "../fileComponent"; -import { CodeBlock } from "./codeBlock"; export default function ChatMessage({ chat, lockChat, @@ -110,11 +110,19 @@ export default function ChatMessage({ ); return !inline ? ( - {}} /> ) : ( From 8c49bcfaa5490435b948376acd3c9d99b7205b66 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Mon, 17 Jul 2023 17:06:59 -0300 Subject: [PATCH 3/4] Styling fixes on both applications of codeTabsComponent --- .../components/codeTabsComponent/index.tsx | 82 ++++++++++++------- src/frontend/src/components/ui/dialog.tsx | 2 +- src/frontend/src/components/ui/tabs.tsx | 2 +- src/frontend/src/index.css | 3 + src/frontend/src/modals/baseModal/index.tsx | 4 +- .../modals/formModal/chatMessage/index.tsx | 5 +- 6 files changed, 62 insertions(+), 36 deletions(-) diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx index 744e0e171..52d4720dc 100644 --- a/src/frontend/src/components/codeTabsComponent/index.tsx +++ b/src/frontend/src/components/codeTabsComponent/index.tsx @@ -1,5 +1,5 @@ import { Check, Clipboard, Download } from "lucide-react"; -import { useState } from "react"; +import { useContext, 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"; @@ -28,6 +28,7 @@ import { TabsList, TabsTrigger, } from "../../components/ui/tabs"; +import { darkContext } from "../../contexts/darkContext"; import { FlowType } from "../../types/flow/index"; import { classNames } from "../../utils"; @@ -36,16 +37,25 @@ export default function CodeTabsComponent({ tabs, activeTab, setActiveTab, - tweaks: { tweak, tweaksList, buildContent, getValue, buildTweakObject }, + isMessage, + tweaks, }: { flow?: FlowType; tabs: any; activeTab: string; setActiveTab: any; - tweaks?: any; + isMessage?: boolean; + tweaks?: { + tweak?: any; + tweaksList?: any; + buildContent?: any; + getValue?: any; + buildTweakObject?: any; + }; }) { const [isCopied, setIsCopied] = useState(false); const [openAccordion, setOpenAccordion] = useState([]); + const { dark } = useContext(darkContext); const copyToClipboard = () => { if (!navigator.clipboard || !navigator.clipboard.writeText) { @@ -85,7 +95,7 @@ export default function CodeTabsComponent({ function openAccordions() { let accordionsToOpen = []; - tweak.current.forEach((el) => { + tweaks.tweak.current.forEach((el) => { Object.keys(el).forEach((key) => { if (Object.keys(el[key]).length > 0) { accordionsToOpen.push(key); @@ -101,7 +111,11 @@ export default function CodeTabsComponent({ return ( { setActiveTab(value); if (value === "3") { @@ -112,7 +126,13 @@ export default function CodeTabsComponent({
{tabs.map((tab, index) => ( - + {tab.name} ))} @@ -163,7 +183,7 @@ export default function CodeTabsComponent({ > {flow["data"]["nodes"].map((t: any, index) => (
- {tweaksList.current.includes(t["data"]["id"]) && ( + {tweaks.tweaksList.current.includes(t["data"]["id"]) && ( {}} onAddInput={(k) => { - buildTweakObject( + tweaks.buildTweakObject( t["data"]["id"], k, t.data.node.template[n] @@ -243,7 +263,7 @@ export default function CodeTabsComponent({ ) : t.data.node.template[n] .multiline ? ( { - buildTweakObject( + tweaks.buildTweakObject( t["data"]["id"], k, t.data.node @@ -280,14 +300,14 @@ export default function CodeTabsComponent({ t.data.node.template[n] .password ?? false } - value={getValue( + value={tweaks.getValue( t.data.node.template[n] .value, t.data, t.data.node.template[n] )} onChange={(k) => { - buildTweakObject( + tweaks.buildTweakObject( t["data"]["id"], k, t.data.node.template[n] @@ -309,7 +329,7 @@ export default function CodeTabsComponent({ t.data.node.template[ n ].value = e; - buildTweakObject( + tweaks.buildTweakObject( t["data"]["id"], e, t.data.node.template[n] @@ -322,8 +342,8 @@ export default function CodeTabsComponent({ ) : t.data.node.template[n].type === "file" ? ( { - buildTweakObject( + tweaks.buildTweakObject( t["data"]["id"], k, t.data.node.template[n] @@ -388,13 +408,13 @@ export default function CodeTabsComponent({ .options } onSelect={(k) => { - buildTweakObject( + tweaks.buildTweakObject( t["data"]["id"], k, t.data.node.template[n] ); }} - value={getValue( + value={tweaks.getValue( t.data.node.template[n] .value, t.data, @@ -408,14 +428,14 @@ export default function CodeTabsComponent({ { - buildTweakObject( + tweaks.buildTweakObject( t["data"]["id"], k, t.data.node.template[n] @@ -426,8 +446,8 @@ export default function CodeTabsComponent({ ) : t.data.node.template[n].type === "prompt" ? ( { - buildTweakObject( + tweaks.buildTweakObject( t["data"]["id"], k, t.data.node.template[n] @@ -458,8 +478,8 @@ export default function CodeTabsComponent({ ) : t.data.node.template[n].type === "code" ? ( { - buildTweakObject( + tweaks.buildTweakObject( t["data"]["id"], k, t.data.node.template[n] @@ -504,7 +524,7 @@ export default function CodeTabsComponent({ )} - {tweaksList.current.length === 0 && ( + {tweaks.tweaksList.current.length === 0 && ( <>
No tweaks are available for this flow. diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx index 2ad709f48..2d9bf04d7 100644 --- a/src/frontend/src/components/ui/dialog.tsx +++ b/src/frontend/src/components/ui/dialog.tsx @@ -44,7 +44,7 @@ const DialogContent = React.forwardRef< {headerChild} -
{ContentChild}
+
+ {ContentChild} +
{ContentFooter}
 diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx index 31b389efb..a441fa783 100644 --- a/src/frontend/src/modals/formModal/chatMessage/index.tsx +++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx @@ -80,8 +80,8 @@ export default function ChatMessage({ Date: Mon, 17 Jul 2023 17:07:45 -0300 Subject: [PATCH 4/4] Formatting --- src/frontend/src/components/AccordionComponent/index.tsx | 4 +++- src/frontend/src/components/ui/accordion.tsx | 2 +- src/frontend/tailwind.config.js | 2 -- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/AccordionComponent/index.tsx index cb762cc0e..1a69082fe 100644 --- a/src/frontend/src/components/AccordionComponent/index.tsx +++ b/src/frontend/src/components/AccordionComponent/index.tsx @@ -45,7 +45,9 @@ export default function AccordionComponent({ > {trigger} - {children} + + {children} + diff --git a/src/frontend/src/components/ui/accordion.tsx b/src/frontend/src/components/ui/accordion.tsx index 4b5a12384..4ee52db10 100644 --- a/src/frontend/src/components/ui/accordion.tsx +++ b/src/frontend/src/components/ui/accordion.tsx @@ -46,7 +46,7 @@ const AccordionContent = React.forwardRef<