diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 3608ccca3cc..73b5e359ed4 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -13,6 +13,7 @@ "@headlessui/react": "^1.7.10", "@heroicons/react": "^2.0.15", "@mui/material": "^5.11.9", + "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-slot": "^1.0.2", @@ -1295,6 +1296,36 @@ "@babel/runtime": "^7.13.10" } }, + "node_modules/@radix-ui/react-checkbox": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz", + "integrity": "sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-previous": "1.0.1", + "@radix-ui/react-use-size": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-compose-refs": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", diff --git a/src/frontend/package.json b/src/frontend/package.json index 2b330e2e759..c15cb7d2e53 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -8,6 +8,7 @@ "@headlessui/react": "^1.7.10", "@heroicons/react": "^2.0.15", "@mui/material": "^5.11.9", + "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-slot": "^1.0.2", diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx index 83f1afcccd3..b9a32eca6dc 100644 --- a/src/frontend/src/components/codeAreaComponent/index.tsx +++ b/src/frontend/src/components/codeAreaComponent/index.tsx @@ -39,7 +39,7 @@ export default function CodeAreaComponent({ ); }} className={ - editNode ? "placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" : + editNode ? "h-7 truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200" : "") } diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx index 80f627fcd1d..8794cae5383 100644 --- a/src/frontend/src/components/intComponent/index.tsx +++ b/src/frontend/src/components/intComponent/index.tsx @@ -12,8 +12,6 @@ export default function IntComponent({ }: FloatComponentType) { const [myValue, setMyValue] = useState(value ?? ""); const { setDisableCopyPaste } = useContext(TabsContext); - - console.log(editNode); useEffect(() => { if (disabled) { diff --git a/src/frontend/src/components/ui/checkbox.tsx b/src/frontend/src/components/ui/checkbox.tsx new file mode 100644 index 00000000000..c8b0eb960ce --- /dev/null +++ b/src/frontend/src/components/ui/checkbox.tsx @@ -0,0 +1,30 @@ +"use client" + +import * as React from "react" +import * as CheckboxPrimitive from "@radix-ui/react-checkbox" +import { Check } from "lucide-react" +import { cn } from "../../utils" + + +const Checkbox = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + +)) +Checkbox.displayName = CheckboxPrimitive.Root.displayName + +export { Checkbox } diff --git a/src/frontend/src/components/ui/input.tsx b/src/frontend/src/components/ui/input.tsx new file mode 100644 index 00000000000..20c529a7941 --- /dev/null +++ b/src/frontend/src/components/ui/input.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import { cn } from "../../utils" + + +export interface InputProps + extends React.InputHTMLAttributes {} + +const Input = React.forwardRef( + ({ className, type, ...props }, ref) => { + return ( + + ) + } +) +Input.displayName = "Input" + +export { Input } diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css index 8809ecc3aeb..962e3c02554 100644 --- a/src/frontend/src/index.css +++ b/src/frontend/src/index.css @@ -98,4 +98,4 @@ code { The cursor: default; property value restores the browser's default cursor style for the targeted element. By applying this style, the element will no longer have a custom cursor appearance such as "grab" or any other custom cursor defined elsewhere in the application. Instead, it will revert to the default cursor style determined by the browser, typically an arrow-shaped cursor. */ .react-flow__pane { cursor: default; -} \ No newline at end of file +} diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index daeafe6bb95..47f0c854df8 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -1,4 +1,3 @@ -import { Dialog, Transition } from "@headlessui/react"; import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react"; import { XMarkIcon, @@ -15,13 +14,22 @@ import "ace-builds/src-noconflict/ext-language_tools"; import { darkContext } from "../../contexts/darkContext"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "../../components/ui/dialog"; +import { Button } from "../../components/ui/button"; export default function ApiModal({ flowName }) { const [open, setOpen] = useState(true); const { dark } = useContext(darkContext); const { closePopUp } = useContext(PopUpContext); const [activeTab, setActiveTab] = useState(0); - const ref = useRef(); const [isCopied, setIsCopied] = useState(false); const copyToClipboard = () => { @@ -40,9 +48,7 @@ export default function ApiModal({ flowName }) { function setModalOpen(x: boolean) { setOpen(x); if (x === false) { - setTimeout(() => { closePopUp(); - }, 300); } } @@ -82,71 +88,34 @@ flow("Hey, have you heard of LangFlow?")`; }, ]; return ( - - - -
- - -
-
- - -
- -
-
-
-
-
-
- - Code - -
-
-
+ + + + + + + + + + Code + + + + Export your flow to use it with this code. + + + + +
{tabs.map((tab, index) => ( - ))}
-
-
- - Export your flow to use it with this code. - +
+
+
+
-
-
- - -
-
-
- + + + ); } diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index 2a14fabe6d1..c5d9573cb74 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/src/frontend/src/modals/codeAreaModal/index.tsx @@ -1,4 +1,3 @@ -import { Dialog, Transition } from "@headlessui/react"; import { XMarkIcon, CommandLineIcon } from "@heroicons/react/24/outline"; import { Fragment, useContext, useRef, useState } from "react"; import { PopUpContext } from "../../contexts/popUpContext"; @@ -12,6 +11,17 @@ import { darkContext } from "../../contexts/darkContext"; import { checkCode } from "../../controllers/API"; import { alertContext } from "../../contexts/alertContext"; import { TabsContext } from "../../contexts/tabsContext"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "../../components/ui/dialog"; +import { Button } from "../../components/ui/button"; + export default function CodeAreaModal({ value, setValue, @@ -34,70 +44,31 @@ export default function CodeAreaModal({ } } return ( - - - -
- -
-
- - -
- -
-
-
-
-
-
- - Edit Code - -
-
-
-
-
- + + + + + + + Edit Code + + + + Make configurations changes to your nodes. Click save when you're done. + + + + + +
+ { setCode(value); }} - className="h-full w-full rounded-lg" + className="w-full rounded-lg h-[300px] custom-scroll" /> -
+
-
-
- -
-
- - -
-
-
- + + + + + + + + + ); } diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx index 8aff1258636..7628fb3272a 100644 --- a/src/frontend/src/modals/exportModal/index.tsx +++ b/src/frontend/src/modals/exportModal/index.tsx @@ -1,4 +1,3 @@ -import { Dialog, Transition } from "@headlessui/react"; import { XMarkIcon, ArrowDownTrayIcon, @@ -10,6 +9,20 @@ import { alertContext } from "../../contexts/alertContext"; import { PopUpContext } from "../../contexts/popUpContext"; import { TabsContext } from "../../contexts/tabsContext"; import { removeApiKeys } from "../../utils"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "../../components/ui/dialog"; +import { Button } from "../../components/ui/button"; +import { Label } from "@radix-ui/react-label"; +import { Checkbox } from "../../components/ui/checkbox"; +import { Textarea } from "../../components/ui/textarea"; +import { Input } from "../../components/ui/input"; export default function ExportModal() { const [open, setOpen] = useState(true); @@ -28,105 +41,55 @@ export default function ExportModal() { const [checked, setChecked] = useState(true); const [name, setName] = useState(flows[tabIndex].name); return ( - - - -
- -
-
- - -
- -
-
-
-
-
-
- - Export - -
-
-
-
- - { - if (event.target.value != "") { - let newFlow = flows[tabIndex]; - newFlow.name = event.target.value; - setName(event.target.value); - updateFlow(newFlow); - } else { - setName(event.target.value); - } - }} - type="text" - name="name" - value={name ?? null} - placeholder="File name" - id="name" - className="focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500 text-gray-900 dark:text-gray-100" - /> -
-
- - -
+ className="max-h-[100px] mt-2" + rows={3} /> -
- -
-
- -
-
-
- - -
-
-
- + + type="submit">Download Flow + + + + + + + + ); }