From 58eebab84be3efdae20d68b1479753c69b8d16d5 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Thu, 28 Dec 2023 10:57:02 -0300 Subject: [PATCH] fix(dropdownComponent): add condition to check if options object is empty before rendering dropdown component fix(chatInput): add condition to check if chatValue is an empty object before displaying message fix(chatMessage): remove useMemo hook and fix condition to check if chat message is empty before displaying message fix(formModal): add conditions to check if thought and files exist before updating chat object fix(genericModal): add condition to check if inputVariables exist before displaying notice or success message --- .../components/dropdownComponent/index.tsx | 208 +++++++++--------- .../src/modals/formModal/chatInput/index.tsx | 9 +- .../modals/formModal/chatMessage/index.tsx | 132 ++++++----- src/frontend/src/modals/formModal/index.tsx | 7 +- .../src/modals/genericModal/index.tsx | 23 +- 5 files changed, 195 insertions(+), 184 deletions(-) diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx index b5e3f534e..db488aaac 100644 --- a/src/frontend/src/components/dropdownComponent/index.tsx +++ b/src/frontend/src/components/dropdownComponent/index.tsx @@ -23,107 +23,119 @@ export default function Dropdown({ return ( <> - { - setInternalValue(value); - onSelect(value); - }} - > - {({ open }) => ( - <> -
- - - {internalValue} - - - - - - - - {options.map((option, id) => ( - - classNames( - active ? " bg-accent" : "", - editNode - ? "dropdown-component-false-option" - : "dropdown-component-true-option" - ) - } - value={option} + {Object.keys(options)?.length > 0 ? ( + <> + { + setInternalValue(value); + onSelect(value); + }} + > + {({ open }) => ( + <> +
+ + - {({ selected, active }) => ( - <> - - {option} - + {internalValue} + + + + - {selected ? ( - - - ) : null} - + + - ))} - - -
- - )} - + > + {options?.map((option, id) => ( + + classNames( + active ? " bg-accent" : "", + editNode + ? "dropdown-component-false-option" + : "dropdown-component-true-option" + ) + } + value={option} + > + {({ selected, active }) => ( + <> + + {option} + + + {selected ? ( + + + ) : null} + + )} + + ))} + + +
+ + )} + + + ) : ( + <> +
+ + No parameters are available for display. + +
+ + )} ); } diff --git a/src/frontend/src/modals/formModal/chatInput/index.tsx b/src/frontend/src/modals/formModal/chatInput/index.tsx index 1d61b0df7..242ce6532 100644 --- a/src/frontend/src/modals/formModal/chatInput/index.tsx +++ b/src/frontend/src/modals/formModal/chatInput/index.tsx @@ -46,7 +46,14 @@ export default function ChatInput({ : "hidden" }`, }} - value={lockChat ? "Thinking..." : chatValue} + value={ + lockChat + ? "Thinking..." + : typeof chatValue === "object" && + Object.keys(chatValue)?.length === 0 + ? "No chat input variables found. Click to run your flow." + : chatValue + } onChange={(event): void => { setChatValue(event.target.value); }} diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx index 4a7f968f6..f9efd1f39 100644 --- a/src/frontend/src/modals/formModal/chatMessage/index.tsx +++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx @@ -1,5 +1,5 @@ import Convert from "ansi-to-html"; -import { useMemo, useState } from "react"; +import { useState } from "react"; import ReactMarkdown from "react-markdown"; import rehypeMathjax from "rehype-mathjax"; import remarkGfm from "remark-gfm"; @@ -74,77 +74,71 @@ export default function ChatMessage({
- {useMemo( - () => - chat.message.toString() === "" && lockChat ? ( - - ) : ( - + ) : ( + {props.children}; - }, - 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 || "" + components={{ + pre({ node, ...props }) { + return <>{props.children}; + }, + code: ({ + node, + inline, + className, + children, + ...props + }) => { + if (children.length) { + if (children[0] === "▍") { + return ( + + ▍ + ); + } - return !inline ? ( - {}} - /> - ) : ( - - {children} - - ); - }, - }} - > - {chat.message.toString()} - - ), - [chat.message, chat.message.toString()] + children[0] = (children[0] as string).replace( + "`▍`", + "▍" + ); + } + + const match = /language-(\w+)/.exec(className || ""); + + return !inline ? ( + {}} + /> + ) : ( + + {children} + + ); + }, + }} + > + {chat.message.toString()} + )}
{chat.files && ( diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx index c2c39c1e0..571cbca06 100644 --- a/src/frontend/src/modals/formModal/index.tsx +++ b/src/frontend/src/modals/formModal/index.tsx @@ -146,13 +146,14 @@ export default function FormModal({ newChat[newChat.length - 1].message + str; } } - if (thought) { + + if (thought && newChat[newChat.length - 1]?.thought) { newChat[newChat.length - 1].thought = thought; } - if (files) { + if (files && newChat[newChat.length - 1]?.files) { newChat[newChat.length - 1].files = files; } - if (prompt) { + if (prompt && newChat[newChat.length - 2]?.template) { newChat[newChat.length - 2].template = prompt; } return newChat; diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx index 355d0afcd..064ae87b4 100644 --- a/src/frontend/src/modals/genericModal/index.tsx +++ b/src/frontend/src/modals/genericModal/index.tsx @@ -122,24 +122,21 @@ export default function GenericModal({ } if (apiReturn.data) { let inputVariables = apiReturn.data.input_variables ?? []; + if ( + JSON.stringify(apiReturn.data?.frontend_node) !== JSON.stringify({}) + ) { + setNodeClass!(apiReturn.data?.frontend_node, inputValue); + setModalOpen(closeModal); + setIsEdit(false); + } if (!inputVariables || inputVariables.length === 0) { - setIsEdit(true); setNoticeData({ title: "Your template does not have any variables.", }); - setModalOpen(false); } else { - if ( - JSON.stringify(apiReturn.data?.frontend_node) !== - JSON.stringify({}) - ) { - setNodeClass!(apiReturn.data?.frontend_node, inputValue); - setModalOpen(closeModal); - setIsEdit(false); - setSuccessData({ - title: "Prompt is ready", - }); - } + setSuccessData({ + title: "Prompt is ready", + }); } } else { setIsEdit(true);