From 799f044aaf04f01aa290075da240d4b7e8b3b308 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Fri, 17 Feb 2023 16:28:40 -0300 Subject: [PATCH] Colors fixed --- .../src/CustomNodes/ChatInputNode/index.tsx | 11 +-- .../src/CustomNodes/ChatOutputNode/index.tsx | 13 ++-- .../components/parameterComponent/index.tsx | 70 +++++++++++++------ .../src/CustomNodes/GenericNode/index.tsx | 17 ++--- .../src/components/chatComponent/index.tsx | 11 +-- .../src/components/toggleComponent/index.tsx | 3 +- .../extraSidebarComponent/index.tsx | 61 +++++++++------- space_flow/src/utils.ts | 17 +++-- 8 files changed, 123 insertions(+), 80 deletions(-) diff --git a/space_flow/src/CustomNodes/ChatInputNode/index.tsx b/space_flow/src/CustomNodes/ChatInputNode/index.tsx index 3eaae790c..be4266db3 100644 --- a/space_flow/src/CustomNodes/ChatInputNode/index.tsx +++ b/space_flow/src/CustomNodes/ChatInputNode/index.tsx @@ -1,4 +1,4 @@ -import { ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline"; +import { Bars3CenterLeftIcon, ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline"; import Input from "../../components/inputComponent"; import { isValidConnection, nodeColors, snakeToNormalCase } from "../../utils"; import { Handle, Position } from "reactflow"; @@ -6,7 +6,7 @@ import Tooltip from "../../components/TooltipComponent"; export default function ChatInputNode({ data }) { return ( -
+
isValidConnection(data,connection)} - className="-mr-1 bg-transparent border-solid border-l-8 border-l-blue-600 border-y-transparent border-y-8 border-r-0 rounded-none" + className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none" + style={{borderLeftColor: nodeColors['chat']}} > -
- +
+ Input
diff --git a/space_flow/src/CustomNodes/ChatOutputNode/index.tsx b/space_flow/src/CustomNodes/ChatOutputNode/index.tsx index cca059990..3e8e5994f 100644 --- a/space_flow/src/CustomNodes/ChatOutputNode/index.tsx +++ b/space_flow/src/CustomNodes/ChatOutputNode/index.tsx @@ -1,25 +1,26 @@ -import { ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline"; +import { Bars3CenterLeftIcon, ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline"; import { Handle, Position } from "reactflow"; import Input from "../../components/inputComponent"; -import { isValidConnection, snakeToNormalCase } from "../../utils"; +import { isValidConnection, nodeColors, snakeToNormalCase } from "../../utils"; import Tooltip from "../../components/TooltipComponent"; export default function ChatOutputNode({ data }) { return ( -
+
isValidConnection(data,connection)} position={Position.Left} id={"str|output|"+data.id} - className="ml-1 bg-transparent border-solid border-l-8 border-l-white border-y-transparent border-y-8 border-r-0 rounded-none" + className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none" + style={{borderLeftColor: nodeColors['chat']}} > -
+
Output - +
); diff --git a/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index b1f1deee5..22d728a59 100644 --- a/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -6,6 +6,8 @@ import { snakeToNormalCase, } from "../../../../utils"; import { useEffect, useRef, useState } from "react"; +import Input from "../../../../components/inputComponent"; +import ToggleComponent from "../../../../components/toggleComponent"; export default function ParameterComponent({ left, @@ -14,41 +16,69 @@ export default function ParameterComponent({ tooltipTitle, title, color, + type, + name = "", }) { const ref = useRef(null); const updateNodeInternals = useUpdateNodeInternals(); const [position, setPosition] = useState(0); useEffect(() => { if (ref.current && ref.current.offsetTop && ref.current.clientHeight) { - setPosition(ref.current.offsetTop + (ref.current.clientHeight / 2)); + setPosition(ref.current.offsetTop + ref.current.clientHeight / 2); updateNodeInternals(data.id); } }, [data.id, ref, updateNodeInternals]); useEffect(() => { updateNodeInternals(data.id); - }, [data.id, position, updateNodeInternals]) + }, [data.id, position, updateNodeInternals]); + + const [enabled, setEnabled] = useState(data.node.template[name]?.value ?? false); return ( -
- <> -
{title}
- - - isValidConnection(data, connection) - } - className={(left ? "-ml-0.5 " : "-mr-0.5 ") +"w-3 h-3 rounded-full border-2 bg-white"} - style={{ - borderColor: color, - top: position, +
+ <> +
{title}
+ + + isValidConnection(data, connection) + } + className={ + (left ? "-ml-0.5 " : "-mr-0.5 ") + + "w-3 h-3 rounded-full border-2 bg-white" + } + style={{ + borderColor: color, + top: position, + }} + > + + {left === true && type === "str" ? ( +
+ { + data.node.template[name].value = t; }} - > - - + /> +
+ ) : left === true && type === "bool" ? ( +
+ { + data.node.template[name].value = t; + setEnabled(t); + }} + /> +
+ ) : ( + <> + )} +
); } diff --git a/space_flow/src/CustomNodes/GenericNode/index.tsx b/space_flow/src/CustomNodes/GenericNode/index.tsx index f532b187a..fa2c49975 100644 --- a/space_flow/src/CustomNodes/GenericNode/index.tsx +++ b/space_flow/src/CustomNodes/GenericNode/index.tsx @@ -1,19 +1,11 @@ import { - ArrowUpRightIcon, TrashIcon, - PlayIcon, } from "@heroicons/react/24/outline"; -import { Handle, Position } from "reactflow"; -import Dropdown from "../../components/dropdownComponent"; -import Input from "../../components/inputComponent"; import { - isValidConnection, nodeColors, nodeIcons, snakeToNormalCase, } from "../../utils"; -import Tooltip from "../../components/TooltipComponent"; -import { useEffect, useRef, useState } from "react"; import ParameterComponent from "./components/parameterComponent"; export default function GenericNode({ data }) { @@ -24,8 +16,8 @@ export default function GenericNode({ data }) {
{data.name}
@@ -34,7 +26,7 @@ export default function GenericNode({ data }) {
-
+
{data.node.description}
@@ -61,6 +53,7 @@ export default function GenericNode({ data }) { snakeToNormalCase(t) + (data.node.template[t].required ? " (required)" : "") } + name={t} tooltipTitle={ "Type: " + data.node.template[t].type + @@ -69,6 +62,7 @@ export default function GenericNode({ data }) { } id={data.node.template[t].type + "|" + t + "|" + data.id} left={true} + type={data.node.template[t].type} /> ) : ( <> @@ -82,6 +76,7 @@ export default function GenericNode({ data }) { title={data.name + " | " + data.node.base_class} tooltipTitle={"Type: str"} id={data.name + "|" + data.node.base_class + "|" + data.id} + type={'str'} left={false} /> diff --git a/space_flow/src/components/chatComponent/index.tsx b/space_flow/src/components/chatComponent/index.tsx index e247f10fe..c6d90cc51 100644 --- a/space_flow/src/components/chatComponent/index.tsx +++ b/space_flow/src/components/chatComponent/index.tsx @@ -1,5 +1,6 @@ import { Transition } from "@headlessui/react"; import { + Bars3CenterLeftIcon, ChatBubbleBottomCenterTextIcon, PaperAirplaneIcon, XMarkIcon, @@ -7,6 +8,7 @@ import { import { useContext, useEffect, useRef, useState } from "react"; import { sendAll } from "../../controllers/NodesServices"; import { alertContext } from "../../contexts/alertContext"; +import { nodeColors } from "../../utils"; const _ = require("lodash"); @@ -26,7 +28,8 @@ export default function Chat({ reactFlowInstance }) { ref.current.scrollIntoView({behavior: 'smooth'}); }, [chatHistory]) function validateNodes(){ - if(reactFlowInstance.getNodes().some((n) => (n.data.node && Object.keys(n.data.node.template).some((t: any) => (n.data.node.template[t].required && !reactFlowInstance.getEdges().some((e) => (e.sourceHandle.split('|')[1] === t && e.sourceHandle.split('|')[2] === n.id))))))){ + console.log(reactFlowInstance.getNodes()); + if(reactFlowInstance.getNodes().some((n) => (n.data.node && Object.keys(n.data.node.template).some((t: any) => ((n.data.node.template[t].required && n.data.node.template[t].value === "") && (n.data.node.template[t].required && !reactFlowInstance.getEdges().some((e) => (e.sourceHandle.split('|')[1] === t && e.sourceHandle.split('|')[2] === n.id)))))))){ return false; } return true; @@ -55,7 +58,7 @@ export default function Chat({ reactFlowInstance }) {
- + Chat
diff --git a/space_flow/src/components/toggleComponent/index.tsx b/space_flow/src/components/toggleComponent/index.tsx index 3770afd44..0fbc703b2 100644 --- a/space_flow/src/components/toggleComponent/index.tsx +++ b/space_flow/src/components/toggleComponent/index.tsx @@ -1,10 +1,11 @@ import { Switch } from "@headlessui/react"; import { classNames } from "../../utils"; +import { useState } from "react"; export default function ToggleComponent({enabled, setEnabled}){ return ( {setEnabled(x);}} className={classNames( enabled ? 'bg-indigo-600' : 'bg-gray-200', 'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2' diff --git a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 302e89d3b..cbf1c1e3c 100644 --- a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -14,7 +14,7 @@ export default function ExtraSidebar() { }); console.log(acc); return acc; - }, {str: 'elements', bool: 'elements'}); + }, {str: 'advanced', bool: 'advanced', chatOutput: 'chat', chatInput: 'chat'}); useEffect(() => { getAll().then((d) => { @@ -62,36 +62,17 @@ export default function ExtraSidebar() { ))}
onDragStart(event, { - type: 'elements', - name: 'str', - types, - }) - } - > -
- String - -
-
-
-
-
- onDragStart(event, { - type: 'elements', + type: 'chat', name: 'chatInput', types, }) @@ -107,10 +88,10 @@ export default function ExtraSidebar() {
onDragStart(event, { - type: 'elements', + type: 'chat', name: 'chatOutput', types, }) @@ -122,14 +103,39 @@ export default function ExtraSidebar() {
+
+ + +
onDragStart(event, { - type: 'elements', + type: 'advanced', + name: 'str', + types, + }) + } + > +
+ String + +
+
+
+
+
+ onDragStart(event, { + type: 'advanced', name: 'bool', types, }) @@ -143,6 +149,7 @@ export default function ExtraSidebar() {
+
); } diff --git a/space_flow/src/utils.ts b/space_flow/src/utils.ts index 8639d1f28..98aa35db7 100644 --- a/space_flow/src/utils.ts +++ b/space_flow/src/utils.ts @@ -6,6 +6,7 @@ import { CommandLineIcon, WrenchScrewdriverIcon, ComputerDesktopIcon, + Bars3CenterLeftIcon, } from "@heroicons/react/24/outline"; import { Edge, Node } from "reactflow"; @@ -96,13 +97,14 @@ export const borderLColors = { } */ export const nodeColors = { - prompts: "#7C7C7C", - llms: "#35ADAE", - chains: "#FFDC35", + prompts: "#4367BF", + llms: "#6344BE", + chains: "#FE7500", agents: "#903BBE", tools: "#FF3434", memories: "#FF9135", - elements: "#6344BE", + advanced: "#000000", + chat: "#2563EB", }; export const nodeNames = { @@ -112,7 +114,9 @@ export const nodeNames = { agents: "Agents", tools: "Tools", memories: "Memories", - elements: "Elements", + advanced: "Advanced", + chat: "Chat", + }; export const nodeIcons = { @@ -122,7 +126,8 @@ export const nodeIcons = { llms: LightBulbIcon, prompts: CommandLineIcon, tools: WrenchScrewdriverIcon, - elements: ComputerDesktopIcon, + advanced: ComputerDesktopIcon, + chat: Bars3CenterLeftIcon, }; export const bgColors = {