From f596d1cf551630fd31a15d2b8f8c7e62fb031f0b Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 6 Mar 2023 16:54:08 -0300 Subject: [PATCH 1/9] ui change when node selected --- langflow/frontend/src/CustomNodes/GenericNode/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/langflow/frontend/src/CustomNodes/GenericNode/index.tsx b/langflow/frontend/src/CustomNodes/GenericNode/index.tsx index 093a7bd6f..8e0773681 100644 --- a/langflow/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/langflow/frontend/src/CustomNodes/GenericNode/index.tsx @@ -2,6 +2,7 @@ import { TrashIcon, } from "@heroicons/react/24/outline"; import { + classNames, nodeColors, nodeIcons, snakeToNormalCase, @@ -11,13 +12,13 @@ import { typesContext } from "../../contexts/typesContext"; import { useContext } from "react"; import { NodeDataType} from "../../types/flow"; -export default function GenericNode({ data}:{data:NodeDataType}) { +export default function GenericNode({ data, selected}:{data:NodeDataType,selected:boolean}) { const {types, deleteNode} = useContext(typesContext); const Icon = nodeIcons[types[data.type]]; return ( -
+
Date: Mon, 6 Mar 2023 17:41:48 -0300 Subject: [PATCH 2/9] removed chat and advanced components from side bar and flow declarations --- .../src/CustomNodes/BooleanNode/index.tsx | 45 --- .../src/CustomNodes/ChatInputNode/index.tsx | 55 --- .../src/CustomNodes/ChatOutputNode/index.tsx | 33 -- .../src/CustomNodes/InputNode/index.tsx | 71 ---- .../ExtraSidebarComponent/index.tsx | 4 +- .../src/components/HeaderComponent/index.tsx | 1 + .../src/components/chatComponent/index.tsx | 354 +++++++++--------- .../extraSidebarComponent/index.tsx | 74 +--- .../frontend/src/pages/FlowPage/index.tsx | 19 +- 9 files changed, 194 insertions(+), 462 deletions(-) delete mode 100644 langflow/frontend/src/CustomNodes/BooleanNode/index.tsx delete mode 100644 langflow/frontend/src/CustomNodes/ChatInputNode/index.tsx delete mode 100644 langflow/frontend/src/CustomNodes/ChatOutputNode/index.tsx delete mode 100644 langflow/frontend/src/CustomNodes/InputNode/index.tsx diff --git a/langflow/frontend/src/CustomNodes/BooleanNode/index.tsx b/langflow/frontend/src/CustomNodes/BooleanNode/index.tsx deleted file mode 100644 index c22a9b972..000000000 --- a/langflow/frontend/src/CustomNodes/BooleanNode/index.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { CheckCircleIcon, TrashIcon } from "@heroicons/react/24/outline"; -import { Handle, Position } from "reactflow"; -import { isValidConnection, nodeColors } from "../../utils"; -import ToggleComponent from "../../components/toggleComponent"; -import { useContext, useState } from "react"; -import { typesContext } from "../../contexts/typesContext"; -import { NodeDataType } from "../../types/flow"; - -export default function BooleanNode({ data }:{data:NodeDataType}) { - const [enabled, setEnabled] = useState(false); - const {types, deleteNode, reactFlowInstance} = useContext(typesContext); - return ( -
-
-
- - Boolean -
- -
-
- {setEnabled(x); data.value = x}} /> -
- isValidConnection(connection,reactFlowInstance)} - className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"} - style={{ - borderColor: nodeColors[types[data.type]], - }} - > -
- ); -} diff --git a/langflow/frontend/src/CustomNodes/ChatInputNode/index.tsx b/langflow/frontend/src/CustomNodes/ChatInputNode/index.tsx deleted file mode 100644 index d579a2c07..000000000 --- a/langflow/frontend/src/CustomNodes/ChatInputNode/index.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { - Bars3CenterLeftIcon, -} from "@heroicons/react/24/outline"; -import { isValidConnection, nodeColors } from "../../utils"; -import { Handle, Position } from "reactflow"; -import Tooltip from "../../components/TooltipComponent"; -import { typesContext } from "../../contexts/typesContext"; -import { useContext } from "react"; -import { NodeDataType } from "../../types/flow"; - -export default function ChatInputNode({ data }:{data:NodeDataType}) { - const { types,reactFlowInstance } = useContext(typesContext); - return ( -
- - - isValidConnection(connection,reactFlowInstance) - } - position={Position.Left} - id={"str|Prefix|" + data.id} - className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"} - style={{ - borderColor: nodeColors[types[data.type]], - }} - > - - - - isValidConnection(connection,reactFlowInstance) - } - position={Position.Right} - id={"str|str|" + data.id} - className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"} - style={{ - borderColor: nodeColors[types[data.type]], - }} - > - -
- - Input -
-
- ); -} diff --git a/langflow/frontend/src/CustomNodes/ChatOutputNode/index.tsx b/langflow/frontend/src/CustomNodes/ChatOutputNode/index.tsx deleted file mode 100644 index ef3a435ca..000000000 --- a/langflow/frontend/src/CustomNodes/ChatOutputNode/index.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Bars3CenterLeftIcon } from "@heroicons/react/24/outline"; -import { Handle, Position } from "reactflow"; -import { isValidConnection, nodeColors } from "../../utils"; -import Tooltip from "../../components/TooltipComponent"; -import { useContext } from "react"; -import { typesContext } from "../../contexts/typesContext"; -import { NodeDataType } from "../../types/flow"; - -export default function ChatOutputNode({ data }:{data:NodeDataType}) { - const {types,reactFlowInstance} = useContext(typesContext); - return ( -
- - isValidConnection(connection,reactFlowInstance)} - position={Position.Left} - id={"str|output|"+data.id} - className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800" - } - style={{ - borderColor: nodeColors[types[data.type]], - }} - > - - -
- Output - -
-
- ); -} diff --git a/langflow/frontend/src/CustomNodes/InputNode/index.tsx b/langflow/frontend/src/CustomNodes/InputNode/index.tsx deleted file mode 100644 index 60afbc6b6..000000000 --- a/langflow/frontend/src/CustomNodes/InputNode/index.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { Bars3CenterLeftIcon, TrashIcon } from "@heroicons/react/24/outline"; -import InputComponent from "../../components/inputComponent"; -import { - isValidConnection, - nodeColors, -} from "../../utils"; -import { Handle, Position } from "reactflow"; -import { useContext } from "react"; -import Tooltip from "../../components/TooltipComponent"; -import { typesContext } from "../../contexts/typesContext"; -import { NodeDataType } from "../../types/flow"; - -export default function InputNode({ data }:{data:NodeDataType}) { - console.log(data) - const {types, deleteNode,reactFlowInstance} = useContext(typesContext); - return ( -
- - - isValidConnection(connection,reactFlowInstance) - } - className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"} - style={{ - borderColor: nodeColors[types[data.type]], - }} - > - - -
-
- - String -
- -
-
- - { - data.value = e; - }} - /> -
- isValidConnection(connection,reactFlowInstance)} - className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"} - style={{ - borderColor: nodeColors[types[data.type]], - }} - > -
- ); -} diff --git a/langflow/frontend/src/components/ExtraSidebarComponent/index.tsx b/langflow/frontend/src/components/ExtraSidebarComponent/index.tsx index 7a112fd29..0dc42bfb4 100644 --- a/langflow/frontend/src/components/ExtraSidebarComponent/index.tsx +++ b/langflow/frontend/src/components/ExtraSidebarComponent/index.tsx @@ -21,8 +21,8 @@ export default function ExtraSidebar() { } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`} >
-
- +
+ {extraNavigation.title}
diff --git a/langflow/frontend/src/components/HeaderComponent/index.tsx b/langflow/frontend/src/components/HeaderComponent/index.tsx index 40611e9c4..2bd902426 100644 --- a/langflow/frontend/src/components/HeaderComponent/index.tsx +++ b/langflow/frontend/src/components/HeaderComponent/index.tsx @@ -15,6 +15,7 @@ export default function Header(){ const {layerProps,renderLayer, triggerProps} = useLayer({ isOpen, placement: "left-start", + auto:true, onOutsideClick:()=>setIsOpen(false), preferX: "left", triggerOffset: 10, diff --git a/langflow/frontend/src/components/chatComponent/index.tsx b/langflow/frontend/src/components/chatComponent/index.tsx index 99c7c1d20..ec4475112 100644 --- a/langflow/frontend/src/components/chatComponent/index.tsx +++ b/langflow/frontend/src/components/chatComponent/index.tsx @@ -1,8 +1,8 @@ import { Transition } from "@headlessui/react"; import { - Bars3CenterLeftIcon, - PaperAirplaneIcon, - XMarkIcon, + Bars3CenterLeftIcon, + PaperAirplaneIcon, + XMarkIcon, } from "@heroicons/react/24/outline"; import { useContext, useEffect, useRef, useState } from "react"; import { sendAll } from "../../controllers/NodesServices"; @@ -13,170 +13,190 @@ import { ChatType } from "../../types/chat"; const _ = require("lodash"); -export default function Chat({flow, reactFlowInstance }:ChatType) { - const {updateFlow} = useContext(TabsContext) - const [saveChat,setSaveChat] = useState(false) - const [open, setOpen] = useState(true); - const [chatValue, setChatValue] = useState(""); - const [chatHistory, setChatHistory] = useState(flow.chat); - const {setErrorData} = useContext(alertContext); - const addChatHistory = (message:string, isSend:boolean) => { - setChatHistory((old) => { - let newChat = _.cloneDeep(old); - newChat.push({ message, isSend }); - return newChat; - }); - setSaveChat(chat=>!chat) - }; - useEffect(()=>{ - updateFlow({..._.cloneDeep(flow),chat:chatHistory}) - // eslint-disable-next-line react-hooks/exhaustive-deps - },[saveChat]) - useEffect(()=>{ - setChatHistory(flow.chat) - },[flow]) - useEffect(()=>{ - if(ref.current) - 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 && 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; - } - function validateChatNodes(){ - if(!reactFlowInstance.getNodes().some((n)=> (n.type === 'chatOutputNode'))){ - return false; - } - return true; - } - const ref = useRef(null); +export default function Chat({ flow, reactFlowInstance }: ChatType) { + const { updateFlow } = useContext(TabsContext); + const [saveChat, setSaveChat] = useState(false); + const [open, setOpen] = useState(true); + const [chatValue, setChatValue] = useState(""); + const [chatHistory, setChatHistory] = useState(flow.chat); + const { setErrorData } = useContext(alertContext); + const addChatHistory = (message: string, isSend: boolean) => { + setChatHistory((old) => { + let newChat = _.cloneDeep(old); + newChat.push({ message, isSend }); + return newChat; + }); + setSaveChat((chat) => !chat); + }; + useEffect(() => { + updateFlow({ ..._.cloneDeep(flow), chat: chatHistory }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [saveChat]); + useEffect(() => { + setChatHistory(flow.chat); + }, [flow]); + useEffect(() => { + if (ref.current) 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 && + 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; + } + const ref = useRef(null); - function sendMessage(){ - if(chatValue !== ""){ - if(validateNodes()){ - if(validateChatNodes()){ - let message = chatValue; - setChatValue(""); - addChatHistory(message, true); - console.log({...reactFlowInstance.toObject(),message,chatHistory}) - sendAll({...reactFlowInstance.toObject(),message,chatHistory}).then((r) => {addChatHistory(r.data.result, false);}); - } else { - setErrorData({title: 'Error sending message', list:['Chat nodes are missing.']}) - } - - } else { - setErrorData({title: 'Error sending message', list:['There are required fields not filled yet.']}) - } - } else { - setErrorData({title: 'Error sending message', list:['The message cannot be empty.']}) - } - } + function sendMessage() { + if (chatValue !== "") { + if (validateNodes()) { + let message = chatValue; + setChatValue(""); + addChatHistory(message, true); + console.log({ ...reactFlowInstance.toObject(), message, chatHistory }); + sendAll({ ...reactFlowInstance.toObject(), message, chatHistory }).then( + (r) => { + addChatHistory(r.data.result, false); + } + ); + } else { + setErrorData({ + title: "Error sending message", + list: ["There are required fields not filled yet."], + }); + } + } else { + setErrorData({ + title: "Error sending message", + list: ["The message cannot be empty."], + }); + } + } - return ( - <> - -
-
-
-
- - Chat -
- -
-
- {chatHistory.map((c, i) => ( -
- {!c.isSend ? ( -
-
- {c.message} -
-
- ) : ( -
-
- {c.message} -
-
- )} -
- ))} -
-
-
-
- { - if(event.key==='Enter'){ - sendMessage() - } - }} - type="text" - value={chatValue} - onChange={(e) => { - setChatValue(e.target.value); - }} - className="form-input block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white pr-10 sm:text-sm" - placeholder="Send a message..." - /> -
- -
-
-
-
-
- - -
-
- -
-
- - - ); + return ( + <> + +
+
+
{ + setOpen(false); + }} className="flex justify-between cursor-pointer items-center px-5 py-2 border-b dark:border-b-gray-700"> +
+ + Chat +
+
+
+ {chatHistory.map((c, i) => ( +
+ {!c.isSend ? ( +
+
+ {c.message} +
+
+ ) : ( +
+
+ {c.message} +
+
+ )} +
+ ))} +
+
+
+
+ { + if (event.key === "Enter") { + sendMessage(); + } + }} + type="text" + value={chatValue} + onChange={(e) => { + setChatValue(e.target.value); + }} + className="form-input block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white pr-10 sm:text-sm" + placeholder="Send a message..." + /> +
+ +
+
+
+
+
+ + +
+
+ +
+
+ + + ); } diff --git a/langflow/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/langflow/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index a0569e2e5..58400ebba 100644 --- a/langflow/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/langflow/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -16,12 +16,6 @@ export default function ExtraSidebar() { useEffect(() => { async function getTypes():Promise{ - // Define an object with initial values for the types. - const initialValue:{[char: string]: string} = { - str: "advanced", - bool: "advanced", - chatOutput: "chat", - } // Make an asynchronous API call to retrieve all data. let result = await getAll(); @@ -41,8 +35,7 @@ export default function ExtraSidebar() { }); }); return acc; - }, - initialValue + },{} ) ); } @@ -58,7 +51,7 @@ export default function ExtraSidebar() { } return ( -
+
{Object.keys(data).map((d:keyof APIObjectType, i) => ( ))} - -
-
-
- onDragStart(event, { - type: "chatOutput", - }) - } - > -
- Chat Output - -
-
-
-
- - -
-
-
- onDragStart(event, { - type: "str", - }) - } - > -
- String - -
-
-
-
-
- onDragStart(event, { - type: "bool", - }) - } - > -
- Boolean - -
-
-
-
-
); } diff --git a/langflow/frontend/src/pages/FlowPage/index.tsx b/langflow/frontend/src/pages/FlowPage/index.tsx index 15a4adee8..d6cbbaa68 100644 --- a/langflow/frontend/src/pages/FlowPage/index.tsx +++ b/langflow/frontend/src/pages/FlowPage/index.tsx @@ -14,10 +14,6 @@ import { locationContext } from "../../contexts/locationContext"; import ExtraSidebar from "./components/extraSidebarComponent"; import Chat from "../../components/chatComponent"; import GenericNode from "../../CustomNodes/GenericNode"; -import ChatInputNode from "../../CustomNodes/ChatInputNode"; -import ChatOutputNode from "../../CustomNodes/ChatOutputNode"; -import InputNode from "../../CustomNodes/InputNode"; -import BooleanNode from "../../CustomNodes/BooleanNode"; import { alertContext } from "../../contexts/alertContext"; import { TabsContext } from "../../contexts/tabsContext"; import { typesContext } from "../../contexts/typesContext"; @@ -31,10 +27,6 @@ import { APIClassType } from "../../types/api"; const nodeTypes = { genericNode: GenericNode, - inputNode: InputNode, - chatInputNode: ChatInputNode, - chatOutputNode: ChatOutputNode, - booleanNode: BooleanNode, }; var _ = require("lodash"); @@ -74,7 +66,7 @@ export default function FlowPage({ flow }:{flow:FlowType}) { //set extra sidebar useEffect(() => { setExtraComponent(); - setExtraNavigation({ title: "Componets" }); + setExtraNavigation({ title: "Components" }); }, [setExtraComponent, setExtraNavigation]); const onEdgesChangeMod = useCallback( @@ -139,14 +131,7 @@ export default function FlowPage({ flow }:{flow:FlowType}) { // Create a new node object const newNode:NodeType = { id: newId, - type: - data.type === "str" - ? "inputNode" - : data.type === "chatOutput" - ? "chatOutputNode" - : data.type === "bool" - ? "booleanNode" - : "genericNode", + type: "genericNode", position, data: { ...data, From 84e87828cdd888c3cdd6c0cd78dda70aede974c7 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 6 Mar 2023 17:54:40 -0300 Subject: [PATCH 3/9] removed connection of to string and boolean --- .../components/parameterComponent/index.tsx | 204 +++++++++--------- 1 file changed, 107 insertions(+), 97 deletions(-) diff --git a/langflow/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/langflow/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 1fd43647f..f3b8b8a96 100644 --- a/langflow/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/langflow/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -1,8 +1,6 @@ import { Handle, Position, useUpdateNodeInternals } from "reactflow"; import Tooltip from "../../../../components/TooltipComponent"; -import { - isValidConnection, -} from "../../../../utils"; +import { classNames, isValidConnection } from "../../../../utils"; import { useContext, useEffect, useRef, useState } from "react"; import InputComponent from "../../../../components/inputComponent"; import ToggleComponent from "../../../../components/toggleComponent"; @@ -12,101 +10,113 @@ import { typesContext } from "../../../../contexts/typesContext"; import { ParameterComponentType } from "../../../../types/components"; export default function ParameterComponent({ - left, - id, - data, - tooltipTitle, - title, - color, - type, - name = "", - required = false, -}:ParameterComponentType) { - 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); - updateNodeInternals(data.id); - } - }, [data.id, ref, updateNodeInternals]); + left, + id, + data, + tooltipTitle, + title, + color, + type, + name = "", + required = false, +}: ParameterComponentType) { + 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); + updateNodeInternals(data.id); + } + }, [data.id, ref, updateNodeInternals]); - useEffect(() => { - updateNodeInternals(data.id); - }, [data.id, position, updateNodeInternals]); + useEffect(() => { + updateNodeInternals(data.id); + }, [data.id, position, updateNodeInternals]); - const [enabled, setEnabled] = useState(data.node.template[name]?.value ?? false); - const {reactFlowInstance} = useContext(typesContext); - let disabled = reactFlowInstance?.getEdges().some((e) => (e.targetHandle === id)) ?? false; + const [enabled, setEnabled] = useState( + data.node.template[name]?.value ?? false + ); + const { reactFlowInstance } = useContext(typesContext); + let disabled = + reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false; - return ( -
- <> -
{title}{required ? " *" : ""}
- - - isValidConnection(connection,reactFlowInstance) - } - className={ - (left ? "-ml-0.5 " : "-mr-0.5 ") + - "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800" - } - style={{ - borderColor: color, - top: position, - }} - > - - {left === true && type === "str" ? ( -
- {data.node.template[name].list ? - { - data.node.template[name].value = t; - }} - /> - : - data.node.template[name].multiline ? ( - { - data.node.template[name].value = t; - }} - /> - ) : - { - data.node.template[name].value = t; - }} - /> - } - -
- ) : left === true && type === "bool" ? ( -
- { - data.node.template[name].value = t; - setEnabled(t); - }} - /> -
- ) : ( - <> - )} - -
- ); + return ( +
+ <> +
+ {title} + {required ? " *" : ""} +
+ + + isValidConnection(connection, reactFlowInstance) + } + className={classNames( + (left ? "-ml-0.5 " : "-mr-0.5 "), + "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800",left && (type==="str" || type==="bool")?"hidden":"" + )} + style={{ + borderColor: color, + top: position, + }} + > + + {left === true && type === "str" ? ( +
+ {data.node.template[name].list ? ( + { + data.node.template[name].value = t; + }} + /> + ) : data.node.template[name].multiline ? ( + { + data.node.template[name].value = t; + }} + /> + ) : ( + { + data.node.template[name].value = t; + }} + /> + )} +
+ ) : left === true && type === "bool" ? ( +
+ { + data.node.template[name].value = t; + setEnabled(t); + }} + /> +
+ ) : ( + <> + )} + +
+ ); } From c88eb2dac902d837e06d4701acf94bfd302bb607 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 6 Mar 2023 18:17:36 -0300 Subject: [PATCH 4/9] create float component --- .../components/parameterComponent/index.tsx | 16 ++++++++++-- .../src/components/floatComponent/index.tsx | 26 +++++++++++++++++++ .../frontend/src/types/components/index.ts | 24 +++++++++++++---- langflow/frontend/tailwind.config.js | 10 +++++++ 4 files changed, 69 insertions(+), 7 deletions(-) create mode 100644 langflow/frontend/src/components/floatComponent/index.tsx diff --git a/langflow/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/langflow/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index f3b8b8a96..3d43557d9 100644 --- a/langflow/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/langflow/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -8,6 +8,7 @@ import InputListComponent from "../../../../components/inputListComponent"; import TextAreaComponent from "../../../../components/textAreaComponent"; import { typesContext } from "../../../../contexts/typesContext"; import { ParameterComponentType } from "../../../../types/components"; +import FloatComponent from "../../../../components/floatComponent"; export default function ParameterComponent({ left, @@ -60,8 +61,11 @@ export default function ParameterComponent({ isValidConnection(connection, reactFlowInstance) } className={classNames( - (left ? "-ml-0.5 " : "-mr-0.5 "), - "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800",left && (type==="str" || type==="bool")?"hidden":"" + left ? "-ml-0.5 " : "-mr-0.5 ", + "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800", + left && (type === "str" || type === "bool" || type === "float") + ? "hidden" + : "" )} style={{ borderColor: color, @@ -113,6 +117,14 @@ export default function ParameterComponent({ }} />
+ ) : left === true && type === "float" ? ( + { + data.node.template[name].value = t; + }} + /> ) : ( <> )} diff --git a/langflow/frontend/src/components/floatComponent/index.tsx b/langflow/frontend/src/components/floatComponent/index.tsx new file mode 100644 index 000000000..adce64ba5 --- /dev/null +++ b/langflow/frontend/src/components/floatComponent/index.tsx @@ -0,0 +1,26 @@ +import { useEffect, useState } from "react"; +import { FloatComponentType } from "../../types/components"; + +export default function FloatComponent({value, onChange, disabled}: FloatComponentType){ + const [myValue, setMyValue] = useState(value ?? ""); + useEffect(()=> { + if(disabled){ + setMyValue(""); + onChange(""); + } + }, [disabled, onChange]) + return ( +
+ { + setMyValue(e.target.value); + onChange(e.target.value); + }} + /> +
+ ); +} \ No newline at end of file diff --git a/langflow/frontend/src/types/components/index.ts b/langflow/frontend/src/types/components/index.ts index 63ee9de73..5f02e9c5e 100644 --- a/langflow/frontend/src/types/components/index.ts +++ b/langflow/frontend/src/types/components/index.ts @@ -1,4 +1,4 @@ -import { ForwardRefExoticComponent, ReactElement, ReactNode } from 'react'; +import { ForwardRefExoticComponent, ReactElement, ReactNode } from "react"; import { NodeDataType } from "../flow/index"; export type InputComponentType = { value: string; @@ -27,9 +27,17 @@ export type ParameterComponentType = { name?: string; tooltipTitle: string; }; -export type InputListComponentType = {value:string[],onChange:(value:string[])=>void,disabled:boolean} +export type InputListComponentType = { + value: string[]; + onChange: (value: string[]) => void; + disabled: boolean; +}; -export type TextAreaComponentType = {disabled:boolean,onChange:(value:string[]|string)=>void,value:string[]|string} +export type TextAreaComponentType = { + disabled: boolean; + onChange: (value: string[] | string) => void; + value: string[] | string; +}; export type DisclosureComponentType = { children: ReactNode; @@ -39,6 +47,12 @@ export type DisclosureComponentType = { buttons?: { Icon: ReactElement; title: string; - onClick:(event?:React.MouseEvent)=>void; + onClick: (event?: React.MouseEvent) => void; }[]; - }}; \ No newline at end of file + }; +}; +export type FloatComponentType = { + value: string; + disabled?: boolean; + onChange: (value: string) => void; +}; diff --git a/langflow/frontend/tailwind.config.js b/langflow/frontend/tailwind.config.js index 5cf6f2599..02a58f432 100644 --- a/langflow/frontend/tailwind.config.js +++ b/langflow/frontend/tailwind.config.js @@ -22,6 +22,16 @@ module.exports = { '&::-webkit-scrollbar': { display: 'none' } + }, + '.arrow-hide':{ + '&::-webkit-inner-spin-button':{ + '-webkit-appearance': 'none', + 'margin': 0 + }, + '&::-webkit-outer-spin-button':{ + '-webkit-appearance': 'none', + 'margin': 0 + }, } } ) From fc6fee3d21989bc9c82676347e84d96c7545107d Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 6 Mar 2023 19:51:00 -0300 Subject: [PATCH 5/9] notifications on tabs bar' --- .../components/singleAlertComponent/index.tsx | 6 +- .../src/alerts/alertDropDown/index.tsx | 30 ++--- .../src/components/HeaderComponent/index.tsx | 3 +- langflow/frontend/src/contexts/index.tsx | 34 ++--- .../components/tabComponent/index.tsx | 2 +- .../components/tabsManagerComponent/index.tsx | 116 ++++++++++++------ langflow/frontend/src/types/alerts/index.ts | 2 - 7 files changed, 109 insertions(+), 84 deletions(-) diff --git a/langflow/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/langflow/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx index b627c5fa5..61965929d 100644 --- a/langflow/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx +++ b/langflow/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx @@ -22,7 +22,7 @@ export default function SingleAlert({ dropItem, removeAlert}:SingleAlertComponen leaveTo={"transform translate-x-[-100%]"} > {type === "error"? -
+
:(type === "notice" ? -
+
: -
+
-
-
+
+
Notifications -
+
-
+
{notificationList.length !== 0 ? notificationList.map((alertItem, index) => ( - + )) :
@@ -59,6 +50,5 @@ export default function AlertDropdown({closeFunction, open}: AlertDropdownType) }
- ); } diff --git a/langflow/frontend/src/components/HeaderComponent/index.tsx b/langflow/frontend/src/components/HeaderComponent/index.tsx index 2bd902426..80d80d24f 100644 --- a/langflow/frontend/src/components/HeaderComponent/index.tsx +++ b/langflow/frontend/src/components/HeaderComponent/index.tsx @@ -20,6 +20,7 @@ export default function Header(){ preferX: "left", triggerOffset: 10, containerOffset: 12, + overflowContainer:false, arrowOffset: 4, }) const {dark, setDark} = useContext(darkContext); @@ -42,7 +43,7 @@ export default function Header(){ {notificationCenter&&
}
diff --git a/langflow/frontend/src/contexts/index.tsx b/langflow/frontend/src/contexts/index.tsx index 3e28d3e37..6bb581f44 100644 --- a/langflow/frontend/src/contexts/index.tsx +++ b/langflow/frontend/src/contexts/index.tsx @@ -6,21 +6,21 @@ import PopUpProvider from "./popUpContext"; import { TabsProvider } from "./tabsContext"; import { TypesProvider } from "./typesContext"; -export default function ContextWrapper({ children }:{children:ReactNode}) { - //element to wrap all context - return ( - <> - - - - - - {children} - - - - - - - ); +export default function ContextWrapper({ children }: { children: ReactNode }) { + //element to wrap all context + return ( + <> + + + + + + {children} + + + + + + + ); } diff --git a/langflow/frontend/src/pages/FlowPage/components/tabComponent/index.tsx b/langflow/frontend/src/pages/FlowPage/components/tabComponent/index.tsx index aa24490d2..25495dedf 100644 --- a/langflow/frontend/src/pages/FlowPage/components/tabComponent/index.tsx +++ b/langflow/frontend/src/pages/FlowPage/components/tabComponent/index.tsx @@ -29,7 +29,7 @@ export default function TabComponent({ selected, flow, onClick }:{flow:FlowType,
) : ( -
+
{isRename ? ( { - //create the first flow - if (flows.length === 0) { - addFlow(); - } - }, [addFlow, flows.length]); + const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext); + const { openPopUp } = useContext(PopUpContext); + const AlertWidth = 224 + const { dark, setDark } = useContext(darkContext); + const [isOpen, setIsOpen] = useState(false); + const {notificationCenter, setNotificationCenter} = useContext(alertContext) + useEffect(() => { + //create the first flow + if (flows.length === 0) { + addFlow(); + } + }, [addFlow, flows.length]); - return ( -
-
- {flows.map((flow, index) => { - return ( - setTabIndex(index)} - selected={index === tabIndex} - key={index} - flow={flow} - /> - ); - })} - { - addFlow(); - }} - selected={false} - flow={null} - /> -
-
- - {flows[tabIndex] ? ( - - ) : ( - <> - )} - -
-
- ); + return ( +
+
+ {flows.map((flow, index) => { + return ( + setTabIndex(index)} + selected={index === tabIndex} + key={index} + flow={flow} + /> + ); + })} + { + addFlow(); + }} + selected={false} + flow={null} + /> +
+ + +
+
+
+ + {flows[tabIndex] ? ( + + ) : ( + <> + )} + +
+
+ ); } diff --git a/langflow/frontend/src/types/alerts/index.ts b/langflow/frontend/src/types/alerts/index.ts index 08dd3ffef..50d8887b0 100644 --- a/langflow/frontend/src/types/alerts/index.ts +++ b/langflow/frontend/src/types/alerts/index.ts @@ -3,8 +3,6 @@ export type NoticeAlertType = {title:string,link:string,id:string,removeAlert:(i export type SuccessAlertType = {title:string,id:string, removeAlert:(id:string)=>void} export type SingleAlertComponentType = {dropItem:AlertItemType,removeAlert:(index:string)=>void} export type AlertDropdownType = { - closeFunction: () => void; - open?: boolean; }; export type AlertItemType = { type: "notice" | "error" | "success"; From 53c70eb6d01ee559eaf2677495305b2772366634 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 6 Mar 2023 19:56:29 -0300 Subject: [PATCH 6/9] removed header --- langflow/frontend/src/App.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/langflow/frontend/src/App.tsx b/langflow/frontend/src/App.tsx index e34d24ac0..eaccbd36a 100644 --- a/langflow/frontend/src/App.tsx +++ b/langflow/frontend/src/App.tsx @@ -85,7 +85,6 @@ useEffect(() => { //need parent component with width and height
-
From 8e10659b25df18c9d805d3e11b7ba0b4b58d869c Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 6 Mar 2023 20:51:52 -0300 Subject: [PATCH 7/9] chat lock ready --- langflow/frontend/src/App.tsx | 1 - .../src/alerts/alertDropDown/index.tsx | 4 +- .../src/components/HeaderComponent/index.tsx | 53 ----------------- .../src/components/chatComponent/index.tsx | 57 +++++++++++++------ .../components/tabsManagerComponent/index.tsx | 1 - langflow/frontend/src/types/alerts/index.ts | 3 +- 6 files changed, 43 insertions(+), 76 deletions(-) delete mode 100644 langflow/frontend/src/components/HeaderComponent/index.tsx diff --git a/langflow/frontend/src/App.tsx b/langflow/frontend/src/App.tsx index eaccbd36a..ec204466e 100644 --- a/langflow/frontend/src/App.tsx +++ b/langflow/frontend/src/App.tsx @@ -8,7 +8,6 @@ import SuccessAlert from "./alerts/success"; import ExtraSidebar from "./components/ExtraSidebarComponent"; import { alertContext } from "./contexts/alertContext"; import { locationContext } from "./contexts/locationContext"; -import Header from "./components/HeaderComponent"; import TabsManagerComponent from "./pages/FlowPage/components/tabsManagerComponent"; export default function App() { diff --git a/langflow/frontend/src/alerts/alertDropDown/index.tsx b/langflow/frontend/src/alerts/alertDropDown/index.tsx index 1d6d883f7..3c97bf034 100644 --- a/langflow/frontend/src/alerts/alertDropDown/index.tsx +++ b/langflow/frontend/src/alerts/alertDropDown/index.tsx @@ -25,13 +25,13 @@ export default function AlertDropdown({}: AlertDropdownType) { Notifications
- {renderLayer(
)} - -
-
-
- - ) -} \ No newline at end of file diff --git a/langflow/frontend/src/components/chatComponent/index.tsx b/langflow/frontend/src/components/chatComponent/index.tsx index ec4475112..613c5afad 100644 --- a/langflow/frontend/src/components/chatComponent/index.tsx +++ b/langflow/frontend/src/components/chatComponent/index.tsx @@ -1,13 +1,14 @@ import { Transition } from "@headlessui/react"; import { Bars3CenterLeftIcon, + LockClosedIcon, PaperAirplaneIcon, XMarkIcon, } from "@heroicons/react/24/outline"; import { useContext, useEffect, useRef, useState } from "react"; import { sendAll } from "../../controllers/NodesServices"; import { alertContext } from "../../contexts/alertContext"; -import { nodeColors } from "../../utils"; +import { classNames, nodeColors } from "../../utils"; import { TabsContext } from "../../contexts/tabsContext"; import { ChatType } from "../../types/chat"; @@ -16,6 +17,7 @@ const _ = require("lodash"); export default function Chat({ flow, reactFlowInstance }: ChatType) { const { updateFlow } = useContext(TabsContext); const [saveChat, setSaveChat] = useState(false); + const [lockChat, setLockChat] = useState(false); const [open, setOpen] = useState(true); const [chatValue, setChatValue] = useState(""); const [chatHistory, setChatHistory] = useState(flow.chat); @@ -69,15 +71,22 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) { function sendMessage() { if (chatValue !== "") { if (validateNodes()) { + setLockChat(true); let message = chatValue; setChatValue(""); addChatHistory(message, true); console.log({ ...reactFlowInstance.toObject(), message, chatHistory }); - sendAll({ ...reactFlowInstance.toObject(), message, chatHistory }).then( - (r) => { + + sendAll({ ...reactFlowInstance.toObject(), message, chatHistory }) + .then((r) => { + console.log(r.data); addChatHistory(r.data.result, false); - } - ); + setLockChat(false); + }) + .catch((error) => { + setErrorData({ title: error.message ?? "unknow error" }); + setLockChat(false); + }); } else { setErrorData({ title: "Error sending message", @@ -106,9 +115,12 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) { >
-
{ - setOpen(false); - }} className="flex justify-between cursor-pointer items-center px-5 py-2 border-b dark:border-b-gray-700"> +
{ + setOpen(false); + }} + className="flex justify-between cursor-pointer items-center px-5 py-2 border-b dark:border-b-gray-700" + >
{ - if (event.key === "Enter") { + if (event.key === "Enter" && !lockChat) { sendMessage(); } }} type="text" + disabled={lockChat} value={chatValue} onChange={(e) => { setChatValue(e.target.value); }} - className="form-input block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white pr-10 sm:text-sm" + className={classNames( + lockChat ? "bg-gray-500" : "dark:bg-gray-700", + "form-input block w-full rounded-md border-gray-300 dark:border-gray-600 dark:text-white pr-10 sm:text-sm" + )} placeholder="Send a message..." />
-
@@ -180,7 +203,7 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) { leaveTo="translate-y-96" >
-
+
@@ -167,16 +184,16 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) { setChatValue(e.target.value); }} className={classNames( - lockChat ? "bg-gray-500" : "dark:bg-gray-700", + lockChat ? "bg-gray-500 text-white" : "dark:bg-gray-700", "form-input block w-full rounded-md border-gray-300 dark:border-gray-600 dark:text-white pr-10 sm:text-sm" )} - placeholder="Send a message..." + placeholder={lockChat?"please wait for the response":"Send a message..."} />
-
+
+
{alertsList.map((alert) => (
{alert.type === "error" ? ( @@ -125,6 +126,7 @@ useEffect(() => {
))}
+ Created by Logspace
); } diff --git a/langflow/frontend/src/alerts/alertDropDown/index.tsx b/langflow/frontend/src/alerts/alertDropDown/index.tsx index 3c97bf034..a20fc6c31 100644 --- a/langflow/frontend/src/alerts/alertDropDown/index.tsx +++ b/langflow/frontend/src/alerts/alertDropDown/index.tsx @@ -20,21 +20,21 @@ export default function AlertDropdown({}: AlertDropdownType) { return ( -
+
Notifications -
+
diff --git a/langflow/frontend/src/components/ExtraSidebarComponent/index.tsx b/langflow/frontend/src/components/ExtraSidebarComponent/index.tsx index 0dc42bfb4..f5acd5a23 100644 --- a/langflow/frontend/src/components/ExtraSidebarComponent/index.tsx +++ b/langflow/frontend/src/components/ExtraSidebarComponent/index.tsx @@ -17,12 +17,12 @@ export default function ExtraSidebar() { <>