diff --git a/space_flow/package-lock.json b/space_flow/package-lock.json index 6cb2a5861..1360a4cfd 100644 --- a/space_flow/package-lock.json +++ b/space_flow/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@headlessui/react": "^1.7.10", "@heroicons/react": "^2.0.15", + "@tailwindcss/forms": "^0.5.3", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -3503,6 +3504,17 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@tailwindcss/forms": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz", + "integrity": "sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==", + "dependencies": { + "mini-svg-data-uri": "^1.2.3" + }, + "peerDependencies": { + "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1" + } + }, "node_modules/@testing-library/dom": { "version": "8.20.0", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz", @@ -12165,6 +12177,14 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/mini-svg-data-uri": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz", + "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==", + "bin": { + "mini-svg-data-uri": "cli.js" + } + }, "node_modules/minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", diff --git a/space_flow/package.json b/space_flow/package.json index 6c2b2e1eb..f030a0f1c 100644 --- a/space_flow/package.json +++ b/space_flow/package.json @@ -5,6 +5,7 @@ "dependencies": { "@headlessui/react": "^1.7.10", "@heroicons/react": "^2.0.15", + "@tailwindcss/forms": "^0.5.3", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", diff --git a/space_flow/src/CustomNodes/GenericNode/index.tsx b/space_flow/src/CustomNodes/GenericNode/index.tsx new file mode 100644 index 000000000..b27e98ffd --- /dev/null +++ b/space_flow/src/CustomNodes/GenericNode/index.tsx @@ -0,0 +1,77 @@ +import { + CommandLineIcon, + ArrowUpRightIcon, + TrashIcon, + PlayIcon, +} from "@heroicons/react/24/outline"; +import { Handle, Position } from "reactflow"; +import Dropdown from "../../components/dropdownComponent"; +import Input from "../../components/inputComponent"; +import { nodeColors, nodeIcons } from "../../utils"; + +export default function GenericNode({ data, onDelete, onRun }) { + const Icon = nodeIcons[data.type]; + return ( +
+ +
+
+ + {data.name} +
+ +
+ +
+
+ {data.description} +
+ {data.template.map((t) => ( +
+ {t.type === "dropdown" ? ( + {}} + /> + ) : t.type === "input" ? ( + {}} + /> + ) : ( + <> + )} +
+ ))} +
+
+ +
+ + +
+ +
+ ); +} diff --git a/space_flow/src/CustomNodes/PromptNode/index.tsx b/space_flow/src/CustomNodes/PromptNode/index.tsx index 08057833c..38131272d 100644 --- a/space_flow/src/CustomNodes/PromptNode/index.tsx +++ b/space_flow/src/CustomNodes/PromptNode/index.tsx @@ -2,6 +2,9 @@ import { Handle, Position } from "reactflow"; import { useContext } from "react"; import { PopUpContext } from "../../contexts/popUpContext"; import { Transition } from "@headlessui/react"; +import { ArrowUpRightIcon, CommandLineIcon, PlayIcon, TrashIcon } from "@heroicons/react/24/outline"; +import Dropdown from "../../components/dropdownComponent"; +import Input from "../../components/inputComponent"; export default function PromptNode({ data }) { const { openPopUp } = useContext(PopUpContext); @@ -17,19 +20,39 @@ export default function PromptNode({ data }) { leaveTo="transform opacity-0 scale-95" >
- openPopUp(
teste
) - } - className="prompt-node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center" + className="prompt-node relative bg-white h-96 w-96 rounded-lg solid border flex flex-col justify-center" > - - -
- {data.template} + +
+
+ + Prompt +
+
- + +
+
+ {data.template} +
+
+ {}} /> +
+
+ {}} /> +
+
+ +
+ + +
+
); diff --git a/space_flow/src/components/dropdownComponent/index.tsx b/space_flow/src/components/dropdownComponent/index.tsx new file mode 100644 index 000000000..720c8ea6a --- /dev/null +++ b/space_flow/src/components/dropdownComponent/index.tsx @@ -0,0 +1,81 @@ +import { Listbox, Transition } from "@headlessui/react"; +import { ChevronUpDownIcon, CheckIcon } from "@heroicons/react/24/outline"; +import { Fragment } from "react"; +import { classNames } from "../../utils"; + +export default function Dropdown({title, value, options, onSelect}) { + return ( + <> + + {({ open }) => ( + <> + + {title} + +
+ + {value} + + + + + + + {options.map((option, id) => ( + + classNames( + active ? "text-white bg-indigo-600" : "text-gray-900", + "relative cursor-default select-none py-2 pl-3 pr-9" + ) + } + value={option} + > + {({ selected, active }) => ( + <> + + {option} + + + {selected ? ( + + + ) : null} + + )} + + ))} + + +
+ + )} + + + ); +} diff --git a/space_flow/src/components/inputComponent/index.tsx b/space_flow/src/components/inputComponent/index.tsx new file mode 100644 index 000000000..98a8d91a3 --- /dev/null +++ b/space_flow/src/components/inputComponent/index.tsx @@ -0,0 +1,19 @@ +export default function Input({title, placeholder, onChange}){ + return ( + <> +
+ +
+ +
+
+ + ); +} \ No newline at end of file diff --git a/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx index 66f84e555..3b7b37e20 100644 --- a/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx +++ b/space_flow/src/pages/FlowPage/components/DisclosureComponent/index.tsx @@ -8,41 +8,45 @@ import { } from "@heroicons/react/24/outline"; import { Disclosure } from "@headlessui/react"; import { useState } from "react"; +import { borderLColors } from "../../../../utils"; export default function DisclosureComponent({ - button: { title, Icon, Modal = null, buttons = [] }, + button: { title, Icon, buttons = [] }, children, }) { return ( {({ open }) => ( <> -
-
- - - {title} - -
-
- {buttons.map((x, index)=>( - - ))} - - - +
+
+
+ + + {title} + +
+
+ {buttons.map((x, index)=>( + + ))} + + + +
{children} + )} ); diff --git a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index ba5d5c7ef..f72ad0d7d 100644 --- a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -1,7 +1,16 @@ -import { Bars2Icon, CommandLineIcon, CpuChipIcon, LightBulbIcon, LinkIcon, RocketLaunchIcon, ShieldCheckIcon, ViewColumnsIcon } from "@heroicons/react/24/outline"; +import { + Bars2Icon, + CommandLineIcon, + CpuChipIcon, + LightBulbIcon, + LinkIcon, + RocketLaunchIcon, + ShieldCheckIcon, +} from "@heroicons/react/24/outline"; import { llm_chain } from "../../../../data_assets/llm_chain"; import { prompt } from "../../../../data_assets/prompt"; import DisclosureComponent from "../DisclosureComponent"; +import { borderLColors, nodeColors } from "../../../../utils"; export function ExtraSidebar() { function onDragStart(event: React.DragEvent, nodeType) { @@ -31,68 +40,101 @@ export function ExtraSidebar() { return (
- -
onDragStart(event, "promptNode")} - > - Prompt - + +
+
onDragStart(event, "promptNode")}> +
+ Prompt + +
+
- -
onDragStart(event, "modelNode")} - > - Model - + +
+
onDragStart(event, "promptNode")}> +
+ Model + +
+
- -
onDragStart(event, "chainNode")} - > - Chain - -
- - -
onDragStart(event, "agentNode")} - > - Agent - + + +
+
onDragStart(event, "promptNode")}> +
+ Agent + +
+
-
onDragStart(event, "validatorNode")} - > - Validator - +
+
onDragStart(event, "promptNode")}> +
+ Validator + +
+
-
onDragStart(event, "memoryNode")} - > - Memory - +
+
onDragStart(event, "promptNode")}> +
+ Memory + +
+
+
+ + +
+
onDragStart(event, "promptNode")}> +
+ Chain + +
+
diff --git a/space_flow/src/utils.ts b/space_flow/src/utils.ts index df8367fe9..bebc01432 100644 --- a/space_flow/src/utils.ts +++ b/space_flow/src/utils.ts @@ -1,3 +1,5 @@ +import { RocketLaunchIcon, LinkIcon, CpuChipIcon, LightBulbIcon, CommandLineIcon, ShieldCheckIcon } from "@heroicons/react/24/outline"; + export function classNames(...classes) { return classes.filter(Boolean).join(" "); } @@ -22,8 +24,86 @@ export function classNames(...classes) { pink: "text-pink-700", rose: "text-rose-700", black: "text-black-700", - gray: "bg-gray-700", + gray: "text-gray-700", }; + + export const borderLColors = { + white: "border-l-white", + red: "border-l-red-500", + orange: "border-l-orange-500", + amber: "border-l-amber-500", + yellow: "border-l-yellow-500", + lime: "border-l-lime-500", + green: "border-l-green-500", + emerald: "border-l-emerald-500", + teal: "border-l-teal-500", + cyan: "border-l-cyan-500", + sky: "border-l-sky-500", + blue: "border-l-blue-500", + indigo: "border-l-indigo-500", + violet: "border-l-violet-500", + purple: "border-l-purple-500", + fuchsia: "border-l-fuchsia-500", + pink: "border-l-pink-500", + rose: "border-l-rose-500", + black: "border-l-black-500", + gray: "border-l-gray-500", + }; + + /* export const nodeColors = { + prompt: "#35ADAE", + model: "#4266BE", + chain: "#6344BE", + agent: "#903BBE", + validator: "#DB3392", + memory: "#FF3434", + } */ + + /* export const nodeColors = { + prompt: "#36D635", + model: "#4266BE", + chain: "#903BBE", + agent: "#FF3434", + validator: "#FEBB35", + memory: "#FFFF33", + } */ + + /* export const nodeColors = { + prompt: "#36D635", + model: "#35ADAE", + chain: "#903BBE", + agent: "#DB3392", + validator: "#FF9135", + memory: "#FFDC35", + } */ + + /* export const nodeColors = { + prompt: "#36D635", + model: "#35ADAE", + chain: "#903BBE", + agent: "#DB3392", + validator: "#FF3434", + memory: "#FF9135", + } */ + + export const nodeColors = { + prompt: "#7C7C7C", + model: "#35ADAE", + chain: "#FFDC35", + agent: "#903BBE", + validator: "#FF3434", + memory: "#FF9135", + } + + + export const nodeIcons = { + agent: RocketLaunchIcon, + chain: LinkIcon, + memory: CpuChipIcon, + model: LightBulbIcon, + prompt: CommandLineIcon, + validator: ShieldCheckIcon, + } export const bgColors = { white: "bg-white", diff --git a/space_flow/tailwind.config.js b/space_flow/tailwind.config.js index e863fd14d..16cbbff76 100644 --- a/space_flow/tailwind.config.js +++ b/space_flow/tailwind.config.js @@ -5,5 +5,10 @@ module.exports = { theme: { extend: {}, }, - plugins: [], + plugins: [ + // ... + require("@tailwindcss/forms")({ + strategy: 'class', // only generate classes + }), + ], }