From e020e2312442515fe85a3f7723e3071c7edc928e Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Mon, 10 Jul 2023 16:20:18 -0300 Subject: [PATCH 01/22] Fixed tooltip not being at the top of all nodes --- src/frontend/src/components/ui/tooltip.tsx | 20 +- .../modals/chatModal/chatMessage/index.tsx | 156 ------- src/frontend/src/modals/chatModal/index.tsx | 423 ------------------ 3 files changed, 11 insertions(+), 588 deletions(-) delete mode 100644 src/frontend/src/modals/chatModal/chatMessage/index.tsx delete mode 100644 src/frontend/src/modals/chatModal/index.tsx diff --git a/src/frontend/src/components/ui/tooltip.tsx b/src/frontend/src/components/ui/tooltip.tsx index dc847052e..6bb983652 100644 --- a/src/frontend/src/components/ui/tooltip.tsx +++ b/src/frontend/src/components/ui/tooltip.tsx @@ -14,15 +14,17 @@ const TooltipContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( - + + + )); TooltipContent.displayName = TooltipPrimitive.Content.displayName; diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx deleted file mode 100644 index 2411f2103..000000000 --- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx +++ /dev/null @@ -1,156 +0,0 @@ -import Convert from "ansi-to-html"; -import { MessageCircle, User2 } from "lucide-react"; -import { useEffect, useRef, useState } from "react"; -import ReactMarkdown from "react-markdown"; -import rehypeMathjax from "rehype-mathjax"; -import remarkGfm from "remark-gfm"; -import remarkMath from "remark-math"; -import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg"; -import AiIconStill from "../../../assets/froze-flow.png"; -import SanitizedHTMLWrapper from "../../../components/SanitizedHTMLWrapper"; -import { ChatMessageType } from "../../../types/chat"; -import { classNames } from "../../../utils"; -import { CodeBlock } from "../../formModal/chatMessage/codeBlock"; -import FileCard from "../../formModal/fileComponent"; -export default function ChatMessage({ - chat, - lockChat, - lastMessage, -}: { - chat: ChatMessageType; - lockChat: boolean; - lastMessage: boolean; -}) { - const convert = new Convert({ newline: true }); - const [message, setMessage] = useState(""); - const imgRef = useRef(null); - useEffect(() => { - setMessage(chat.message); - }, [chat.message]); - const [hidden, setHidden] = useState(true); - return ( -
-
- {!chat.isSend && ( -
- - -
- )} - {chat.isSend && } -
- {!chat.isSend ? ( -
-
- {hidden && chat.thought && chat.thought !== "" && ( -
setHidden((prev) => !prev)} - className="chat-message-modal-icon-div" - > - -
- )} - {chat.thought && chat.thought !== "" && !hidden && ( - setHidden((prev) => !prev)} - /> - )} - {chat.thought && chat.thought !== "" && !hidden &&

} -
-
-
- - ▍ - - ); - } - - children[0] = (children[0] as string).replace( - "`▍`", - "▍" - ); - } - - const match = /language-(\w+)/.exec(className || ""); - - return !inline ? ( - - ) : ( - - {children} - - ); - }, - }} - > - {message} - -
- {chat.files && ( -
- {chat.files.map((file, index) => { - return ( -
- -
- ); - })} -
- )} -
-
-
-
- ) : ( -
-
- {message.split("\n").map((line, index) => ( - - {line} -
- - ))} -
-
- )} -
- ); -} diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx deleted file mode 100644 index 90baca4df..000000000 --- a/src/frontend/src/modals/chatModal/index.tsx +++ /dev/null @@ -1,423 +0,0 @@ -import { Dialog, Transition } from "@headlessui/react"; -import { Eraser, MessagesSquare, X } from "lucide-react"; -import { Fragment, useContext, useEffect, useRef, useState } from "react"; -import { alertContext } from "../../contexts/alertContext"; -import { typesContext } from "../../contexts/typesContext"; -import { sendAllProps } from "../../types/api"; -import { ChatMessageType } from "../../types/chat"; -import { FlowType } from "../../types/flow"; -import { validateNodes } from "../../utils"; -import ChatInput from "./chatInput"; -import ChatMessage from "./chatMessage"; - -import _ from "lodash"; -import { getHealth } from "../../controllers/API"; - -export default function ChatModal({ - flow, - open, - setOpen, -}: { - open: boolean; - setOpen: Function; - flow: FlowType; -}) { - const [chatValue, setChatValue] = useState(""); - const [chatHistory, setChatHistory] = useState([]); - const { reactFlowInstance } = useContext(typesContext); - const { setErrorData } = useContext(alertContext); - const ws = useRef(null); - const [lockChat, setLockChat] = useState(false); - const isOpen = useRef(open); - const messagesRef = useRef(null); - const id = useRef(flow.id); - - useEffect(() => { - if (messagesRef.current) { - messagesRef.current.scrollTop = messagesRef.current.scrollHeight; - } - }, [chatHistory]); - - useEffect(() => { - isOpen.current = open; - }, [open]); - useEffect(() => { - id.current = flow.id; - }, [flow.id]); - - var isStream = false; - - const addChatHistory = ( - message: string, - isSend: boolean, - thought?: string, - files?: Array - ) => { - setChatHistory((old) => { - let newChat = _.cloneDeep(old); - if (files) { - newChat.push({ message, isSend, files, thought }); - } else if (thought) { - newChat.push({ message, isSend, thought }); - } else { - newChat.push({ message, isSend }); - } - return newChat; - }); - }; - - //add proper type signature for function - - function updateLastMessage({ - str, - thought, - end = false, - files, - }: { - str?: string; - thought?: string; - // end param default is false - end?: boolean; - files?: Array; - }) { - setChatHistory((old) => { - let newChat = [...old]; - if (str) { - if (end) { - newChat[newChat.length - 1].message = str; - } else { - newChat[newChat.length - 1].message += str; - } - } - if (thought) { - if (end) { - newChat[newChat.length - 1].thought = thought; - } else { - newChat[newChat.length - 1].thought += thought; - } - } - if (files) { - newChat[newChat.length - 1].files = files; - } - return newChat; - }); - } - - function handleOnClose(event: CloseEvent) { - if (isOpen.current) { - setErrorData({ title: event.reason }); - setTimeout(() => { - connectWS(); - setLockChat(false); - }, 1000); - } - } - - function getWebSocketUrl(chatId, isDevelopment = false) { - const isSecureProtocol = window.location.protocol === "https:"; - const webSocketProtocol = isSecureProtocol ? "wss" : "ws"; - const host = isDevelopment ? "localhost:7860" : window.location.host; - const chatEndpoint = `/api/v1/chat/${chatId}`; - - return `${ - isDevelopment ? "ws" : webSocketProtocol - }://${host}${chatEndpoint}`; - } - - function handleWsMessage(data: any) { - if (Array.isArray(data)) { - //set chat history - setChatHistory((_) => { - let newChatHistory: ChatMessageType[] = []; - data.forEach( - (chatItem: { - intermediate_steps?: "string"; - is_bot: boolean; - message: string; - type: string; - files?: Array; - }) => { - if (chatItem.message) { - newChatHistory.push( - chatItem.files - ? { - isSend: !chatItem.is_bot, - message: chatItem.message, - thought: chatItem.intermediate_steps, - files: chatItem.files, - } - : { - isSend: !chatItem.is_bot, - message: chatItem.message, - thought: chatItem.intermediate_steps, - } - ); - } - } - ); - return newChatHistory; - }); - } - if (data.type === "start") { - addChatHistory("", false); - isStream = true; - } - if (data.type === "end") { - if (data.message) { - updateLastMessage({ str: data.message, end: true }); - } - if (data.intermediate_steps) { - updateLastMessage({ - str: data.message, - thought: data.intermediate_steps, - end: true, - }); - } - if (data.files) { - updateLastMessage({ - end: true, - files: data.files, - }); - } - - setLockChat(false); - isStream = false; - } - if (data.type === "stream" && isStream) { - updateLastMessage({ - str: data.message, - thought: data.intermediate_steps, - }); - } - } - - function connectWS() { - try { - const urlWs = getWebSocketUrl( - id.current, - process.env.NODE_ENV === "development" - ); - const newWs = new WebSocket(urlWs); - newWs.onopen = () => { - console.log("WebSocket connection established!"); - }; - newWs.onmessage = (event) => { - const data = JSON.parse(event.data); - console.log("Received data:", data); - handleWsMessage(data); - //get chat history - }; - newWs.onclose = (event) => { - handleOnClose(event); - }; - newWs.onerror = (ev) => { - getHealth() - .then((res) => { - if (res.status === 200) { - connectWS(); - } - }) - .catch((err) => { - setErrorData({ - // message when the backend failed - title: "The backend is not responding. Please try again later.", - // possible solution list - list: [ - "Check your internet connection.", - "Check if the backend is running.", - ], - }); - }); - }; - ws.current = newWs; - } catch (error) { - connectWS(); - console.log(error); - } - } - - useEffect(() => { - connectWS(); - return () => { - console.log("unmount"); - console.log(ws); - if (ws.current) { - ws.current.close(); - } - }; - }, []); - - useEffect(() => { - if ( - ws.current && - (ws.current.readyState === ws.current.CLOSED || - ws.current.readyState === ws.current.CLOSING) - ) { - connectWS(); - setLockChat(false); - } - }, [lockChat]); - - async function sendAll(data: sendAllProps) { - try { - if (ws) { - ws.current.send(JSON.stringify(data)); - } - } catch (error) { - setErrorData({ - title: "There was an error sending the message", - list: [error.message], - }); - setChatValue(data.message); - connectWS(); - } - } - - useEffect(() => { - if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" }); - }, [chatHistory]); - - const ref = useRef(null); - - useEffect(() => { - if (open && ref.current) { - ref.current.focus(); - } - }, [open]); - - function sendMessage() { - if (chatValue !== "") { - let nodeValidationErrors = validateNodes(reactFlowInstance); - if (nodeValidationErrors.length === 0) { - setLockChat(true); - let message = chatValue; - setChatValue(""); - addChatHistory(message, true); - sendAll({ - ...reactFlowInstance.toObject(), - message, - chatHistory, - name: flow.name, - description: flow.description, - }); - } else { - setErrorData({ - title: "Oops! Looks like you missed some required information:", - list: nodeValidationErrors, - }); - } - } else { - setErrorData({ - title: "Error sending message", - list: ["The message cannot be empty."], - }); - } - } - function clearChat() { - setChatHistory([]); - ws.current.send(JSON.stringify({ clear_history: true })); - if (lockChat) setLockChat(false); - } - - function setModalOpen(x: boolean) { - setOpen(x); - } - return ( - - - -
- - -
-
- - -
- - -
-
- {chatHistory.length > 0 ? ( - chatHistory.map((c, i) => ( - - )) - ) : ( -
- - πŸ‘‹{" "} - - Langflow Chat - - -
-
- - Start a conversation and click the agent’s thoughts{" "} - - - {" "} - to inspect the chaining process. - -
-
- )} -
-
-
-
- -
-
- - -
-
-
- - ); -} From 7bfe0c88c13f00e7cf37d0f079d2dd69f72bdde1 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Mon, 10 Jul 2023 16:42:41 -0300 Subject: [PATCH 02/22] Fixed and added conditions to flows without chat --- .../src/modals/formModal/chatInput/index.tsx | 5 +- src/frontend/src/modals/formModal/index.tsx | 63 +++++++++---------- 2 files changed, 31 insertions(+), 37 deletions(-) diff --git a/src/frontend/src/modals/formModal/chatInput/index.tsx b/src/frontend/src/modals/formModal/chatInput/index.tsx index 02b462396..975a152f5 100644 --- a/src/frontend/src/modals/formModal/chatInput/index.tsx +++ b/src/frontend/src/modals/formModal/chatInput/index.tsx @@ -8,6 +8,7 @@ export default function ChatInput({ sendMessage, setChatValue, inputRef, + noInput, }) { useEffect(() => { if (!lockChat && inputRef.current) { @@ -32,7 +33,7 @@ export default function ChatInput({ }} rows={1} ref={inputRef} - disabled={lockChat} + disabled={lockChat || noInput} style={{ resize: "none", bottom: `${inputRef?.current?.scrollHeight}px`, @@ -48,7 +49,7 @@ export default function ChatInput({ setChatValue(e.target.value); }} className={classNames( - lockChat + lockChat || noInput ? " form-modal-lock-true bg-input " : " form-modal-lock-false", "form-modal-lockchat" diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx index 7a5dae1a6..d49123024 100644 --- a/src/frontend/src/modals/formModal/index.tsx +++ b/src/frontend/src/modals/formModal/index.tsx @@ -333,41 +333,35 @@ export default function FormModal({ }, [open]); function sendMessage() { - if (chatValue !== "") { - let nodeValidationErrors = validateNodes(reactFlowInstance); - if (nodeValidationErrors.length === 0) { - setLockChat(true); - let inputs = tabsState[id.current].formKeysData.input_keys; - setChatValue(""); - const message = inputs; - addChatHistory( - message, - true, - chatKey, - tabsState[flow.id].formKeysData.template - ); - sendAll({ - ...reactFlowInstance.toObject(), - inputs: inputs, - chatHistory, - name: flow.name, - description: flow.description, - }); - setTabsState((old) => { - let newTabsState = _.cloneDeep(old); - newTabsState[id.current].formKeysData.input_keys[chatKey] = ""; - return newTabsState; - }); - } else { - setErrorData({ - title: "Oops! Looks like you missed some required information:", - list: nodeValidationErrors, - }); - } + let nodeValidationErrors = validateNodes(reactFlowInstance); + if (nodeValidationErrors.length === 0) { + setLockChat(true); + let inputs = tabsState[id.current].formKeysData.input_keys; + setChatValue(""); + const message = inputs; + addChatHistory( + message, + true, + chatKey, + tabsState[flow.id].formKeysData.template + ); + sendAll({ + ...reactFlowInstance.toObject(), + inputs: inputs, + chatHistory, + name: flow.name, + description: flow.description, + }); + setTabsState((old) => { + if (!chatKey) return old; + let newTabsState = _.cloneDeep(old); + newTabsState[id.current].formKeysData.input_keys[chatKey] = ""; + return newTabsState; + }); } else { setErrorData({ - title: "Error sending message", - list: ["The message cannot be empty."], + title: "Oops! Looks like you missed some required information:", + list: nodeValidationErrors, }); } } @@ -549,13 +543,12 @@ export default function FormModal({
{ setChatValue(value); setTabsState((old) => { - // chatKey is undefined when there are no chat input keys - if (!chatKey) return old; let newTabsState = _.cloneDeep(old); newTabsState[id.current].formKeysData.input_keys[ chatKey From 965d6cf5bca2c42a78f36d35c84042d18b5cc6de Mon Sep 17 00:00:00 2001 From: Igor Carvalho Date: Mon, 10 Jul 2023 17:50:17 -0300 Subject: [PATCH 03/22] style(index.css): Remove unnecessary dark classes --- src/frontend/src/index.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css index de0839761..782aef44e 100644 --- a/src/frontend/src/index.css +++ b/src/frontend/src/index.css @@ -915,13 +915,13 @@ The cursor: default; property value restores the browser's default cursor style } .form-modal-lock-true { - @apply bg-input text-black dark:bg-gray-700 dark:text-gray-300 + @apply bg-input text-black } .form-modal-lock-false { - @apply bg-white text-black dark:bg-gray-900 dark:text-gray-300 + @apply bg-white text-black } .form-modal-lockchat { - @apply form-input block w-full rounded-md border-gray-300 p-4 pr-16 custom-scroll dark:border-gray-600 sm:text-sm + @apply form-input block w-full rounded-md border-gray-300 p-4 pr-16 custom-scroll sm:text-sm } .form-modal-send-icon-position { @apply absolute bottom-2 right-4 @@ -966,7 +966,7 @@ The cursor: default; property value restores the browser's default cursor style @apply absolute -left-6 -top-3 cursor-pointer } .form-modal-chat-icon { - @apply h-4 w-4 animate-bounce dark:text-white + @apply h-4 w-4 animate-bounce } .form-modal-chat-thought-border { @apply rounded-md border border-ring/60 @@ -1035,10 +1035,10 @@ The cursor: default; property value restores the browser's default cursor style @apply flex-max-width h-full flex-col items-center justify-center text-center align-middle } .langflow-chat-span { - @apply text-lg text-gray-600 dark:text-gray-300 + @apply text-lg text-gray-600 } .langflow-chat-desc { - @apply w-2/4 rounded-md border border-gray-200 bg-muted px-6 py-8 dark:border-gray-700 dark:bg-gray-900 + @apply w-2/4 rounded-md border border-gray-200 bg-muted px-6 py-8 } .langflow-chat-desc-span { @apply text-base text-gray-500 From 2cb845296803d7322b52c89e5d10a907c260c120 Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Mon, 10 Jul 2023 17:48:21 -0300 Subject: [PATCH 04/22] =?UTF-8?q?=F0=9F=90=9B=20fix(types.py):=20refactor?= =?UTF-8?q?=20=5Fbuilt=5Fobject=5Frepr=20method=20in=20PromptVertex=20to?= =?UTF-8?q?=20improve=20readability=20and=20handle=20edge=20cases?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/backend/langflow/graph/vertex/types.py | 34 ++++++++++++---------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/src/backend/langflow/graph/vertex/types.py b/src/backend/langflow/graph/vertex/types.py index 17481b8a0..effd00071 100644 --- a/src/backend/langflow/graph/vertex/types.py +++ b/src/backend/langflow/graph/vertex/types.py @@ -213,23 +213,27 @@ class PromptVertex(Vertex): def _built_object_repr(self): if ( - self.artifacts - and self._built_object is not None - and hasattr(self._built_object, "format") + not self.artifacts + or self._built_object is None + or not hasattr(self._built_object, "format") ): - # We'll build the prompt with the artifacts - # to show the user what the prompt looks like - # with the variables filled in - artifacts = self.artifacts.copy() - # Remove the handle_keys from the artifacts - # so the prompt format doesn't break - artifacts.pop("handle_keys", None) - try: - return self._built_object.format(**artifacts) - except KeyError: - return super()._built_object_repr() - else: return super()._built_object_repr() + # We'll build the prompt with the artifacts + # to show the user what the prompt looks like + # with the variables filled in + artifacts = self.artifacts.copy() + # Remove the handle_keys from the artifacts + # so the prompt format doesn't break + artifacts.pop("handle_keys", None) + try: + template = self._built_object.format(**artifacts) + return ( + template + if isinstance(template, str) + else f"{self.vertex_type}({template})" + ) + except KeyError: + return str(self._built_object) class OutputParserVertex(Vertex): From 00c1734fb8660b413f310b45e7e624128d942f47 Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Mon, 10 Jul 2023 17:48:48 -0300 Subject: [PATCH 05/22] =?UTF-8?q?=F0=9F=90=9B=20fix(chat.py):=20fix=20the?= =?UTF-8?q?=20issue=20where=20the=20params=20variable=20is=20not=20convert?= =?UTF-8?q?ed=20to=20a=20string=20before=20slicing=20it=20in=20the=20log?= =?UTF-8?q?=20message=20to=20avoid=20TypeError?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/backend/langflow/api/v1/chat.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/backend/langflow/api/v1/chat.py b/src/backend/langflow/api/v1/chat.py index f6f0eceb1..937eb2cf6 100644 --- a/src/backend/langflow/api/v1/chat.py +++ b/src/backend/langflow/api/v1/chat.py @@ -126,7 +126,7 @@ async def stream_build(flow_id: str): params = vertex._built_object_repr() valid = True logger.debug( - f"Building node {params[:50]}{'...' if len(params) > 50 else ''}" + f"Building node {str(params)[:50]}{'...' if len(str(params)) > 50 else ''}" ) if vertex.artifacts: # The artifacts will be prompt variables From cd9fc3a2e47df95f6962398ab73c9aa1c12b7655 Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Mon, 10 Jul 2023 17:49:20 -0300 Subject: [PATCH 06/22] =?UTF-8?q?=F0=9F=90=9B=20fix(loading.py):=20fix=20c?= =?UTF-8?q?onditional=20statement=20for=20instantiating=20prompt=20objects?= =?UTF-8?q?=20based=20on=20node=5Ftype=20=E2=9C=A8=20feat(loading.py):=20i?= =?UTF-8?q?mprove=20formatting=20of=20input=20variables=20for=20prompt=20o?= =?UTF-8?q?bjects?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../langflow/interface/initialize/loading.py | 32 +++++++++++-------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/src/backend/langflow/interface/initialize/loading.py b/src/backend/langflow/interface/initialize/loading.py index 5418f6906..ed80b0adb 100644 --- a/src/backend/langflow/interface/initialize/loading.py +++ b/src/backend/langflow/interface/initialize/loading.py @@ -1,3 +1,4 @@ +import contextlib import json from typing import Any, Callable, Dict, List, Sequence, Type @@ -196,7 +197,7 @@ def instantiate_prompt(node_type, class_object, params: Dict): if "tools" not in params: params["tools"] = [] return ZeroShotAgent.create_prompt(**params) - if "MessagePromptTemplate" in node_type: + elif "MessagePromptTemplate" in node_type: # Then we only need the template from_template_params = { "template": params.pop("prompt", params.pop("template", "")) @@ -204,12 +205,12 @@ def instantiate_prompt(node_type, class_object, params: Dict): if not from_template_params.get("template"): raise ValueError("Prompt template is required") - return class_object.from_template(**from_template_params) + prompt = class_object.from_template(**from_template_params) - if node_type == "ChatPromptTemplate": - return class_object.from_messages(**params) - - prompt = class_object(**params) + elif node_type == "ChatPromptTemplate": + prompt = class_object.from_messages(**params) + else: + prompt = class_object(**params) format_kwargs: Dict[str, Any] = {} for input_variable in prompt.input_variables: @@ -221,18 +222,23 @@ def instantiate_prompt(node_type, class_object, params: Dict): variable, "get_format_instructions" ): format_kwargs[input_variable] = variable.get_format_instructions() - # check if is a list of Document elif isinstance(variable, List) and all( isinstance(item, Document) for item in variable ): # Format document to contain page_content and metadata # as one string separated by a newline - format_kwargs[input_variable] = "\n".join( - [ - f"Document:{item.page_content}\nMetadata:{item.metadata}" - for item in variable - ] - ) + if len(variable) > 1: + content = "\n".join( + [item.page_content for item in variable if item.page_content] + ) + else: + content = variable[0].page_content + # content could be a json list of strings + with contextlib.suppress(json.JSONDecodeError): + content = json.loads(content) + if isinstance(content, list): + content = ",".join([str(item) for item in content]) + format_kwargs[input_variable] = content # handle_keys will be a list but it does not exist yet # so we need to create it From 86bdec36e6323b428c74946e5950cfa27a7e8f74 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 10 Jul 2023 18:10:11 -0300 Subject: [PATCH 07/22] new function to clean invalid edges of a flow --- .../src/types/utils/reactflowUtils.ts | 10 ++++ src/frontend/src/util/reactflowUtils.ts | 47 +++++++++++++++++++ 2 files changed, 57 insertions(+) create mode 100644 src/frontend/src/types/utils/reactflowUtils.ts create mode 100644 src/frontend/src/util/reactflowUtils.ts diff --git a/src/frontend/src/types/utils/reactflowUtils.ts b/src/frontend/src/types/utils/reactflowUtils.ts new file mode 100644 index 000000000..ecbbda4e4 --- /dev/null +++ b/src/frontend/src/types/utils/reactflowUtils.ts @@ -0,0 +1,10 @@ +import { Edge } from "reactflow"; +import { NodeType } from "../flow"; + +export type cleanEdgesType = { + flow: { + edges: Edge[]; + nodes: NodeType[]; + }; + updateEdge: (edge: Edge[]) => void; +}; diff --git a/src/frontend/src/util/reactflowUtils.ts b/src/frontend/src/util/reactflowUtils.ts new file mode 100644 index 000000000..c6059b39a --- /dev/null +++ b/src/frontend/src/util/reactflowUtils.ts @@ -0,0 +1,47 @@ +import _ from "lodash"; +import { cleanEdgesType } from "./../types/utils/reactflowUtils"; + +export function cleanEdges({ + flow: { edges, nodes }, + updateEdge, +}: cleanEdgesType) { + let newEdges = _.cloneDeep(edges); + console.log("cleanEdges", newEdges); + edges.forEach((edge) => { + // check if the source and target node still exists + const sourceNode = nodes.find((node) => node.id === edge.source); + const targetNode = nodes.find((node) => node.id === edge.target); + if (!sourceNode || !targetNode) { + newEdges = newEdges.filter((e) => e.id !== edge.id); + } + // check if the source and target handle still exists + if (sourceNode && targetNode) { + const sourceHandle = edge.sourceHandle; //right + const targetHandle = edge.targetHandle; //left + if (targetHandle) { + const field = targetHandle.split("|")[1]; + const id = + (targetNode.data.node.template[field].input_types?.join(";") ?? + targetNode.data.node.template[field].type) + + "|" + + field + + "|" + + targetNode.data.id; + if (id !== targetHandle) { + newEdges = newEdges.filter((e) => e.id !== edge.id); + } + } + if (sourceHandle) { + const id = [ + sourceNode.data.type, + sourceNode.data.id, + ...sourceNode.data.node.base_classes, + ].join("|"); + if (id !== sourceHandle) { + newEdges = newEdges.filter((e) => e.id !== edge.id); + } + } + } + }); + updateEdge(newEdges); +} From 9df88167c2c5fd529a8053ee12e4a6e1f8be57f9 Mon Sep 17 00:00:00 2001 From: Igor Carvalho Date: Mon, 10 Jul 2023 18:42:32 -0300 Subject: [PATCH 08/22] style(index.css): Change tailwind default colors to langflow colors and add user and bot color icons --- src/frontend/src/index.css | 29 ++++++++++++++++------------- src/frontend/tailwind.config.js | 4 +++- 2 files changed, 19 insertions(+), 14 deletions(-) diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css index 782aef44e..a16aec367 100644 --- a/src/frontend/src/index.css +++ b/src/frontend/src/index.css @@ -6,8 +6,8 @@ /* TODO: Confirm that all colors here are found in tailwind config */ @layer base { - -:root { + + :root { --background: 0 0% 100%; /* hsl(0 0% 100%) */ --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */ --muted: 210 40% 98%; /* hsl(210 40% 98%) */ @@ -28,21 +28,24 @@ --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */ --radius: 0.5rem; --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */ - + --round-btn-shadow: #00000063; - + --error-background: #fef2f2; --error-foreground: #991b1b; - + --success-background: #f0fdf4; --success-foreground: #14532d; --info-background: #f0f4fd; --info-foreground: #141653; - + --high-indigo: #4338ca; --medium-indigo: #6366f1; + --chat-bot-icon: #afe6ef; + --chat-user-icon: #aface9; + /* Colors that are shared in dark and light mode */ --blur-shared: #151923de; --build-trigger: #dc735b; @@ -921,7 +924,7 @@ The cursor: default; property value restores the browser's default cursor style @apply bg-white text-black } .form-modal-lockchat { - @apply form-input block w-full rounded-md border-gray-300 p-4 pr-16 custom-scroll sm:text-sm + @apply form-input block w-full rounded-md border-border p-4 pr-16 custom-scroll sm:text-sm } .form-modal-send-icon-position { @apply absolute bottom-2 right-4 @@ -948,10 +951,10 @@ The cursor: default; property value restores the browser's default cursor style @apply relative flex h-8 w-8 items-center justify-center overflow-hidden rounded-md p-5 text-2xl } .form-modal-chat-bot-icon { - @apply form-modal-chat-img-box bg-[#afe6ef] + @apply form-modal-chat-img-box bg-chat-bot-icon } .form-modal-chat-user-icon { - @apply form-modal-chat-img-box bg-[#aface9] + @apply form-modal-chat-img-box bg-chat-user-icon } .form-modal-chat-icon-img { @apply absolute scale-[60%] @@ -1035,13 +1038,13 @@ The cursor: default; property value restores the browser's default cursor style @apply flex-max-width h-full flex-col items-center justify-center text-center align-middle } .langflow-chat-span { - @apply text-lg text-gray-600 + @apply text-lg text-foreground } .langflow-chat-desc { - @apply w-2/4 rounded-md border border-gray-200 bg-muted px-6 py-8 + @apply w-2/4 rounded-md border border-border bg-muted px-6 py-8 } .langflow-chat-desc-span { - @apply text-base text-gray-500 + @apply text-base text-muted-foreground } .langflow-chat-input-div { @apply flex-max-width flex-col items-center justify-between px-8 pb-6 @@ -1054,4 +1057,4 @@ The cursor: default; property value restores the browser's default cursor style @apply max-w-[30vw] max-h-[20vh] overflow-auto } -} \ No newline at end of file +} diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js index b3d296560..fe121a030 100644 --- a/src/frontend/tailwind.config.js +++ b/src/frontend/tailwind.config.js @@ -82,6 +82,8 @@ module.exports = { "status-yellow": "var(--status-yellow)", "success-background": "var(--success-background)", "success-foreground": "var(--success-foreground)", + "chat-bot-icon": "var(--chat-bot-icon)", + "chat-user-icon": "var(--chat-user-icon)", white: "var(--white)", border: "hsl(var(--border))", @@ -224,4 +226,4 @@ module.exports = { require("@tailwindcss/typography"), require("daisyui"), ], -}; +}; \ No newline at end of file From 7b2db830335bdab0a429ba851f9bd369b8161610 Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Mon, 10 Jul 2023 18:42:30 -0300 Subject: [PATCH 09/22] =?UTF-8?q?=F0=9F=90=9B=20fix(tools.py):=20add=20"Ba?= =?UTF-8?q?seTool"=20as=20a=20base=20class=20for=20PythonFunctionToolNode?= =?UTF-8?q?=20to=20fix=20inheritance=20issue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/backend/langflow/template/frontend_node/tools.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/backend/langflow/template/frontend_node/tools.py b/src/backend/langflow/template/frontend_node/tools.py index 6b6903fdc..ece765ed7 100644 --- a/src/backend/langflow/template/frontend_node/tools.py +++ b/src/backend/langflow/template/frontend_node/tools.py @@ -109,7 +109,7 @@ class PythonFunctionToolNode(FrontendNode): ], ) description: str = "Python function to be executed." - base_classes: list[str] = ["Tool"] + base_classes: list[str] = ["BaseTool", "Tool"] def to_dict(self): return super().to_dict() From af41be13a6ef4734a6c424c035c7baab98b8639f Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 10 Jul 2023 18:46:22 -0300 Subject: [PATCH 10/22] update template bug --- .../GenericNode/components/parameterComponent/index.tsx | 1 + src/frontend/src/util/reactflowUtils.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 3d931fbe2..8614a0685 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -302,6 +302,7 @@ export default function ParameterComponent({ field_name={name} setNodeClass={(nodeClass) => { data.node = nodeClass; + // cleanEdges({ flow: { edges: reactFlowInstance.getEdges(), nodes: reactFlowInstance.getNodes() }, updateEdge: (edge) => reactFlowInstance.setEdges(edge) }); }} nodeClass={data.node} disabled={disabled} diff --git a/src/frontend/src/util/reactflowUtils.ts b/src/frontend/src/util/reactflowUtils.ts index c6059b39a..e7d2dc381 100644 --- a/src/frontend/src/util/reactflowUtils.ts +++ b/src/frontend/src/util/reactflowUtils.ts @@ -6,7 +6,6 @@ export function cleanEdges({ updateEdge, }: cleanEdgesType) { let newEdges = _.cloneDeep(edges); - console.log("cleanEdges", newEdges); edges.forEach((edge) => { // check if the source and target node still exists const sourceNode = nodes.find((node) => node.id === edge.source); @@ -43,5 +42,6 @@ export function cleanEdges({ } } }); + console.log("cleanEdges", newEdges); updateEdge(newEdges); } From 20644a83bcdf1b26a757ad010e425b22726bc58c Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Mon, 10 Jul 2023 19:24:02 -0300 Subject: [PATCH 11/22] Added placeholder message when a chat key does not exist --- src/frontend/src/index.css | 8 ++++++- .../src/modals/formModal/chatInput/index.tsx | 23 +++++++++++++++---- 2 files changed, 25 insertions(+), 6 deletions(-) diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css index de0839761..407db8fb5 100644 --- a/src/frontend/src/index.css +++ b/src/frontend/src/index.css @@ -917,11 +917,14 @@ The cursor: default; property value restores the browser's default cursor style .form-modal-lock-true { @apply bg-input text-black dark:bg-gray-700 dark:text-gray-300 } + .form-modal-no-input { + @apply bg-input text-center text-black dark:bg-gray-700 dark:text-gray-300 + } .form-modal-lock-false { @apply bg-white text-black dark:bg-gray-900 dark:text-gray-300 } .form-modal-lockchat { - @apply form-input block w-full rounded-md border-gray-300 p-4 pr-16 custom-scroll dark:border-gray-600 sm:text-sm + @apply form-input focus:ring-ring focus:border-ring block w-full rounded-md border-gray-300 p-4 pr-16 custom-scroll dark:border-gray-600 sm:text-sm } .form-modal-send-icon-position { @apply absolute bottom-2 right-4 @@ -935,6 +938,9 @@ The cursor: default; property value restores the browser's default cursor style .form-modal-send-icon { @apply mr-2 h-5 w-5 rotate-[44deg] } + .form-modal-play-icon { + @apply h-5 w-5 mx-1 + } .form-modal-chat-position { @apply flex-max-width px-2 py-6 pl-4 pr-9 } diff --git a/src/frontend/src/modals/formModal/chatInput/index.tsx b/src/frontend/src/modals/formModal/chatInput/index.tsx index 975a152f5..fa9637e1b 100644 --- a/src/frontend/src/modals/formModal/chatInput/index.tsx +++ b/src/frontend/src/modals/formModal/chatInput/index.tsx @@ -1,4 +1,4 @@ -import { Lock, LucideSend } from "lucide-react"; +import { Lock, LucideSend, Sparkles } from "lucide-react"; import { useEffect } from "react"; import { classNames } from "../../../utils"; @@ -49,24 +49,37 @@ export default function ChatInput({ setChatValue(e.target.value); }} className={classNames( - lockChat || noInput - ? " form-modal-lock-true bg-input " + lockChat + ? " form-modal-lock-true bg-input" + : noInput + ? "form-modal-no-input bg-input" : " form-modal-lock-false", + "form-modal-lockchat" )} - placeholder={"Send a message..."} + placeholder={ + noInput + ? "No chat input variables found. Click to run your flow." + : "Send a message..." + } />
) : (
- - - {promptOpen - ? template?.split("\n")?.map((line, index) => { - const regex = /{([^}]+)}/g; - let match; - let parts = []; - let lastIndex = 0; - while ((match = regex.exec(line)) !== null) { - // Push text up to the match - if (match.index !== lastIndex) { - parts.push(line.substring(lastIndex, match.index)); - } - // Push div with matched text - if (chat.message[match[1]]) { - parts.push( - - {chat.message[match[1]]} - - ); - } + {template && ( + <> + + + {promptOpen + ? template?.split("\n")?.map((line, index) => { + const regex = /{([^}]+)}/g; + let match; + let parts = []; + let lastIndex = 0; + while ((match = regex.exec(line)) !== null) { + // Push text up to the match + if (match.index !== lastIndex) { + parts.push(line.substring(lastIndex, match.index)); + } + // Push div with matched text + if (chat.message[match[1]]) { + parts.push( + + {chat.message[match[1]]} + + ); + } - // Update last index - lastIndex = regex.lastIndex; - } - // Push text after the last match - if (lastIndex !== line.length) { - parts.push(line.substring(lastIndex)); - } - return

{parts}

; - }) - : chat.message[chat.chatKey]} - + // Update last index + lastIndex = regex.lastIndex; + } + // Push text after the last match + if (lastIndex !== line.length) { + parts.push(line.substring(lastIndex)); + } + return

{parts}

; + }) + : chat.message[chat.chatKey]} + + + )} + {chat.message[chat.chatKey]}
)}
From d0be10505550565c7646d7304e4ba2edd8bdbd4f Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Mon, 10 Jul 2023 19:48:04 -0300 Subject: [PATCH 15/22] Fixed code area saving when not supposed to --- src/frontend/src/modals/codeAreaModal/index.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index fc012f6b7..21ef182c3 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/src/frontend/src/modals/codeAreaModal/index.tsx @@ -5,7 +5,7 @@ import "ace-builds/src-noconflict/mode-python"; import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/theme-twilight"; import { TerminalSquare } from "lucide-react"; -import { useContext, useEffect, useRef, useState } from "react"; +import { useContext, useRef, useState } from "react"; import AceEditor from "react-ace"; import { Button } from "../../components/ui/button"; import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants"; @@ -37,9 +37,6 @@ export default function CodeAreaModal({ detail: { error: string; traceback: string }; }>(null); const ref = useRef(); - useEffect(() => { - setValue(code); - }, [code, setValue]); function setModalOpen(x: boolean) { if (x === false) { From 3285aa5cc3eac9a9098c315ce6048d136bd7910b Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Mon, 10 Jul 2023 20:19:38 -0300 Subject: [PATCH 16/22] Fixed scroll glitch on code block --- .../formModal/chatMessage/codeBlock/index.tsx | 8 +- .../modals/formModal/chatMessage/index.tsx | 91 +++++++++++-------- 2 files changed, 56 insertions(+), 43 deletions(-) diff --git a/src/frontend/src/modals/formModal/chatMessage/codeBlock/index.tsx b/src/frontend/src/modals/formModal/chatMessage/codeBlock/index.tsx index c78974a3c..884215ebb 100644 --- a/src/frontend/src/modals/formModal/chatMessage/codeBlock/index.tsx +++ b/src/frontend/src/modals/formModal/chatMessage/codeBlock/index.tsx @@ -1,5 +1,5 @@ import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react"; -import { FC, memo, useState } from "react"; +import { useState } from "react"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism"; import { programmingLanguages } from "../../../../utils"; @@ -9,7 +9,7 @@ interface Props { value: string; } -export const CodeBlock: FC = memo(({ language, value }) => { +export function CodeBlock({ language, value }) { const [isCopied, setIsCopied] = useState(false); const copyToClipboard = () => { @@ -63,7 +63,7 @@ export const CodeBlock: FC = memo(({ language, value }) => { = memo(({ language, value }) => { ); -}); +} CodeBlock.displayName = "CodeBlock"; diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx index 93ef22bc2..4e941e278 100644 --- a/src/frontend/src/modals/formModal/chatMessage/index.tsx +++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx @@ -1,6 +1,6 @@ import Convert from "ansi-to-html"; import { ChevronDown } from "lucide-react"; -import { useState } from "react"; +import { useMemo, useState } from "react"; import ReactMarkdown from "react-markdown"; import rehypeMathjax from "rehype-mathjax"; import remarkGfm from "remark-gfm"; @@ -75,47 +75,60 @@ export default function ChatMessage({
- - ▍ - + components={{ + code: ({ + node, + inline, + className, + children, + ...props + }) => { + if (children.length) { + if (children[0] === "▍") { + return ( + + ▍ + + ); + } + + children[0] = (children[0] as string).replace( + "`▍`", + "▍" + ); + } + + const match = /language-(\w+)/.exec( + className || "" ); - } - children[0] = (children[0] as string).replace( - "`▍`", - "▍" - ); - } - - const match = /language-(\w+)/.exec(className || ""); - - return !inline ? ( - - ) : ( - - {children} - - ); - }, - }} - > - {chat.message.toString()} - + return !inline ? ( + + ) : ( + + {children} + + ); + }, + }} + > + {chat.message.toString()} + + ), + [chat.message.toString()] + )}
{chat.files && (
From 657c64b5b96e7072bb464d46c80b609f92940849 Mon Sep 17 00:00:00 2001 From: Igor Carvalho Date: Mon, 10 Jul 2023 20:35:15 -0300 Subject: [PATCH 17/22] style(codeAreaComponent && promptAreaComponent): Change disabled inputs border and placeholder color --- src/frontend/src/components/codeAreaComponent/index.tsx | 2 +- src/frontend/src/components/promptComponent/index.tsx | 4 ++-- src/frontend/src/index.css | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx index 749df592c..966d8f26d 100644 --- a/src/frontend/src/components/codeAreaComponent/index.tsx +++ b/src/frontend/src/components/codeAreaComponent/index.tsx @@ -48,7 +48,7 @@ export default function CodeAreaComponent({ className={ editNode ? "input-edit-node input-dialog" - : (disabled ? " input-disable " : "") + + : (disabled ? " input-disable input-ring " : "") + " input-primary text-muted-foreground " } > diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx index 6a878e5a6..84041837b 100644 --- a/src/frontend/src/components/promptComponent/index.tsx +++ b/src/frontend/src/components/promptComponent/index.tsx @@ -69,8 +69,8 @@ export default function PromptAreaComponent({ className={ editNode ? "input-edit-node input-dialog" - : (disabled ? " input-disable " : "") + - " input-primary text-muted-foreground" + : (disabled ? " input-disable text-ring " : "") + + " input-primary text-muted-foreground " } > {myValue !== "" ? myValue : "Type your prompt here"} diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css index 9925f19f2..5af8ff70a 100644 --- a/src/frontend/src/index.css +++ b/src/frontend/src/index.css @@ -216,7 +216,7 @@ The cursor: default; property value restores the browser's default cursor style @apply input-primary pr-7 mx-2 } .input-disable{ - @apply bg-input text-muted-foreground + @apply bg-border placeholder:text-ring border-transparent } .input-dialog{ @apply text-ring cursor-pointer bg-transparent From c77674b17142baf193116ad245c7ed7a4df540a6 Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Mon, 10 Jul 2023 21:32:43 -0300 Subject: [PATCH 18/22] =?UTF-8?q?=F0=9F=90=9B=20fix(chains.py):=20hide=20t?= =?UTF-8?q?he=20"verbose"=20field=20in=20the=20frontend=20node=20template?= =?UTF-8?q?=20to=20improve=20user=20experience?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/backend/langflow/template/frontend_node/chains.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/backend/langflow/template/frontend_node/chains.py b/src/backend/langflow/template/frontend_node/chains.py index ce8c1c62c..b678dec3b 100644 --- a/src/backend/langflow/template/frontend_node/chains.py +++ b/src/backend/langflow/template/frontend_node/chains.py @@ -81,7 +81,7 @@ class ChainFrontendNode(FrontendNode): field.advanced = False if field.name == "verbose": field.required = False - field.show = True + field.show = False field.advanced = True if field.name == "llm": field.required = True From 4e8ee49c966c3e23bdba8638eb2718ccb7813720 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Mon, 10 Jul 2023 22:32:57 -0300 Subject: [PATCH 19/22] Codacy fixes --- .../GenericNode/components/parameterComponent/index.tsx | 2 +- .../src/components/ShadTooltipComponent/index.tsx | 4 ++-- src/frontend/src/components/chatComponent/index.tsx | 2 +- src/frontend/src/components/promptComponent/index.tsx | 2 +- src/frontend/src/modals/codeAreaModal/index.tsx | 8 +------- src/frontend/src/modals/formModal/chatMessage/index.tsx | 4 ++-- src/frontend/src/modals/formModal/index.tsx | 4 ++-- src/frontend/src/modals/genericModal/index.tsx | 6 ++---- .../src/pages/FlowPage/components/PageComponent/index.tsx | 4 ++-- src/frontend/src/types/components/index.ts | 2 +- 10 files changed, 15 insertions(+), 23 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 3d36b4e26..9323cc644 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -177,7 +177,7 @@ export default function ParameterComponent({ <> ) : ( {children} diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx index 84041837b..4f9a56ad0 100644 --- a/src/frontend/src/components/promptComponent/index.tsx +++ b/src/frontend/src/components/promptComponent/index.tsx @@ -44,7 +44,7 @@ export default function PromptAreaComponent({ }) .catch((error) => {}); } - }, [reactFlowInstance, field_name, myValue, nodeClass, setNodeClass]); + }, [reactFlowInstance, field_name, myValue, nodeClass, setNodeClass, value]); return (
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index 21ef182c3..3cafcdc33 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/src/frontend/src/modals/codeAreaModal/index.tsx @@ -27,9 +27,7 @@ export default function CodeAreaModal({ nodeClass: APIClassType; setNodeClass: (Class: APIClassType) => void; }) { - const [open, setOpen] = useState(true); const [code, setCode] = useState(value); - const [loading, setLoading] = useState(false); const { dark } = useContext(darkContext); const { closePopUp, setCloseEdit } = useContext(PopUpContext); const { setErrorData, setSuccessData } = useContext(alertContext); @@ -46,10 +44,8 @@ export default function CodeAreaModal({ } function handleClick() { - setLoading(true); postValidateCode(code) .then((apiReturn) => { - setLoading(false); if (apiReturn.data) { let importsErrors = apiReturn.data.imports.errors; let funcErrors = apiReturn.data.function.errors; @@ -58,7 +54,6 @@ export default function CodeAreaModal({ title: "Code is ready to run", }); setValue(code); - setOpen((old) => !old); setModalOpen(false); } else { if (funcErrors.length !== 0) { @@ -81,7 +76,6 @@ export default function CodeAreaModal({ } }) .catch((_) => { - setLoading(false); setErrorData({ title: "There is something wrong with this code, please review it", }); @@ -89,7 +83,7 @@ export default function CodeAreaModal({ } return ( - + Edit Code diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx index 4e941e278..8b5453607 100644 --- a/src/frontend/src/modals/formModal/chatMessage/index.tsx +++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx @@ -24,7 +24,7 @@ export default function ChatMessage({ }) { const convert = new Convert({ newline: true }); const [hidden, setHidden] = useState(true); - const [template, setTemplate] = useState(chat.template); + const template = chat.template; const [promptOpen, setPromptOpen] = useState(false); return (
), - [chat.message.toString()] + [chat.message, chat.message.toString()] )}
{chat.files && ( diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx index d49123024..d0a73f941 100644 --- a/src/frontend/src/modals/formModal/index.tsx +++ b/src/frontend/src/modals/formModal/index.tsx @@ -292,7 +292,7 @@ export default function FormModal({ ws.current.close(); } }; - }, []); + }, [connectWS]); useEffect(() => { if ( @@ -303,7 +303,7 @@ export default function FormModal({ connectWS(); setLockChat(false); } - }, [lockChat]); + }, [lockChat, connectWS]); async function sendAll(data: sendAllProps) { try { diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx index e3ccfce38..923549e28 100644 --- a/src/frontend/src/modals/genericModal/index.tsx +++ b/src/frontend/src/modals/genericModal/index.tsx @@ -57,7 +57,6 @@ export default function GenericModal({ const [myModalType] = useState(type); const [inputValue, setInputValue] = useState(value); const [isEdit, setIsEdit] = useState(true); - const [wordsHighlightInvalid, setWordsHighlightInvalid] = useState([]); const [wordsHighlight, setWordsHighlight] = useState([]); const { dark } = useContext(darkContext); const { setErrorData, setSuccessData, setNoticeData } = @@ -102,15 +101,14 @@ export default function GenericModal({ (word) => !invalid_chars.includes(word) ); - setWordsHighlightInvalid(invalid_chars); setWordsHighlight(filteredWordsHighlight); } useEffect(() => { - if (type == TypeModal.PROMPT && inputValue && inputValue != "") { + if (type === TypeModal.PROMPT && inputValue && inputValue != "") { checkVariables(inputValue); } - }, []); + }, [inputValue, type]); const coloredContent = (inputValue || "") .replace(/ { @@ -322,7 +322,7 @@ export default function Page({ flow }: { flow: FlowType }) { setEdges((els) => updateEdge(oldEdge, newConnection, els)); } }, - [] + [reactFlowInstance, setEdges] ); const onEdgeUpdateEnd = useCallback((_, edge) => { diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 56269627e..4ce9e526f 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -147,7 +147,7 @@ export type ShadToolTipType = { asChild?: boolean; children?: ReactElement; delayDuration?: number; - style?: string; + styleClasses?: string; }; export type TextHighlightType = { From c0aa19c47eec4223acf94cc4ec4c60f001a03099 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 10 Jul 2023 22:34:10 -0300 Subject: [PATCH 20/22] removed console.log --- src/frontend/src/util/reactflowUtils.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/frontend/src/util/reactflowUtils.ts b/src/frontend/src/util/reactflowUtils.ts index 5a7754ec8..da04cc75c 100644 --- a/src/frontend/src/util/reactflowUtils.ts +++ b/src/frontend/src/util/reactflowUtils.ts @@ -5,7 +5,6 @@ export function cleanEdges({ flow: { edges, nodes }, updateEdge, }: cleanEdgesType) { - console.log(nodes, "nodes"); let newEdges = _.cloneDeep(edges); edges.forEach((edge) => { // check if the source and target node still exists @@ -43,6 +42,5 @@ export function cleanEdges({ } } }); - console.log("clean end", newEdges); updateEdge(newEdges); } From 9726b5cce570b7a543b8c9b0724da2542c36ee96 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Mon, 10 Jul 2023 22:38:44 -0300 Subject: [PATCH 21/22] Deleted unused code --- .../src/modals/codeAreaModal/index.tsx | 23 +------------------ 1 file changed, 1 insertion(+), 22 deletions(-) diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index 3cafcdc33..b38bef5f2 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/src/frontend/src/modals/codeAreaModal/index.tsx @@ -5,7 +5,7 @@ import "ace-builds/src-noconflict/mode-python"; import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/theme-twilight"; import { TerminalSquare } from "lucide-react"; -import { useContext, useRef, useState } from "react"; +import { useContext, useState } from "react"; import AceEditor from "react-ace"; import { Button } from "../../components/ui/button"; import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants"; @@ -31,10 +31,6 @@ export default function CodeAreaModal({ const { dark } = useContext(darkContext); const { closePopUp, setCloseEdit } = useContext(PopUpContext); const { setErrorData, setSuccessData } = useContext(alertContext); - const [error, setError] = useState<{ - detail: { error: string; traceback: string }; - }>(null); - const ref = useRef(); function setModalOpen(x: boolean) { if (x === false) { @@ -113,23 +109,6 @@ export default function CodeAreaModal({ className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600" />
-
-
-

- {error?.detail?.error} -

-
- 
-                  {error?.detail?.traceback}
-
-
-
-