jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix(dropdownComponent): add condition to check if options object is empty before rendering dropdown component

Browse source 
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
This commit is contained in:
cristhianzl 2023-12-28 10:57:02 -03:00
commit 58eebab84b
5 changed files with 195 additions and 184 deletions
Download patch file Download diff file Expand all files Collapse all files

208
src/frontend/src/components/dropdownComponent/index.tsx
View file

@ -23,107 +23,119 @@ export default function Dropdown({
return ( return (
<> <>
<Listbox {Object.keys(options)?.length > 0 ? (
value={internalValue} <>
onChange={(value) => { <Listbox
setInternalValue(value); value={internalValue}
onSelect(value); onChange={(value) => {
}} setInternalValue(value);
> onSelect(value);
{({ open }) => ( }}
<> >
<div className={"relative mt-1"}> {({ open }) => (
<Listbox.Button <>
data-test={`${id ?? ""}`} <div className={"relative mt-1"}>
className={ <Listbox.Button
editNode data-test={`${id ?? ""}`}
? "dropdown-component-outline" className={
: "dropdown-component-false-outline" editNode
} ? "dropdown-component-outline"
> : "dropdown-component-false-outline"
<span }
className="dropdown-component-display" >
data-testid={`${id ?? ""}-display`} <span
> className="dropdown-component-display"
{internalValue} data-testid={`${id ?? ""}-display`}
</span>
<span className={"dropdown-component-arrow"}>
<IconComponent
name="ChevronsUpDown"
className="dropdown-component-arrow-color"
aria-hidden="true"
/>
</span>
</Listbox.Button>
<Transition
show={open}
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options
className={classNames(
editNode
? "dropdown-component-true-options nowheel custom-scroll"
: "dropdown-component-false-options nowheel custom-scroll",
apiModal ? "mb-2 w-[250px]" : "absolute w-full"
)}
>
{options.map((option, id) => (
<Listbox.Option
key={id}
className={({ active }) =>
classNames(
active ? " bg-accent" : "",
editNode
? "dropdown-component-false-option"
: "dropdown-component-true-option"
)
}
value={option}
> >
{({ selected, active }) => ( {internalValue}
<> </span>
<span <span className={"dropdown-component-arrow"}>
className={classNames( <IconComponent
selected ? "font-semibold" : "font-normal", name="ChevronsUpDown"
"block truncate " className="dropdown-component-arrow-color"
)} aria-hidden="true"
data-testid={`${option}-${id ?? ""}-option`} />
> </span>
{option} </Listbox.Button>
</span>
{selected ? ( <Transition
<span show={open}
className={classNames( as={Fragment}
active ? "text-background " : "", leave="transition ease-in duration-100"
"dropdown-component-choosal" leaveFrom="opacity-100"
)} leaveTo="opacity-0"
> >
<IconComponent <Listbox.Options
name="Check" className={classNames(
className={ editNode
active ? "dropdown-component-true-options nowheel custom-scroll"
? "dropdown-component-check-icon" : "dropdown-component-false-options nowheel custom-scroll",
: "dropdown-component-check-icon" apiModal ? "mb-2 w-[250px]" : "absolute w-full"
}
aria-hidden="true"
/>
</span>
) : null}
</>
)} )}
</Listbox.Option> >
))} {options?.map((option, id) => (
</Listbox.Options> <Listbox.Option
</Transition> key={id}
</div> className={({ active }) =>
</> classNames(
)} active ? " bg-accent" : "",
</Listbox> editNode
? "dropdown-component-false-option"
: "dropdown-component-true-option"
)
}
value={option}
>
{({ selected, active }) => (
<>
<span
className={classNames(
selected ? "font-semibold" : "font-normal",
"block truncate "
)}
data-testid={`${option}-${id ?? ""}-option`}
>
{option}
</span>
{selected ? (
<span
className={classNames(
active ? "text-background " : "",
"dropdown-component-choosal"
)}
>
<IconComponent
name="Check"
className={
active
? "dropdown-component-check-icon"
: "dropdown-component-check-icon"
}
aria-hidden="true"
/>
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
</>
) : (
<>
<div>
<span className="text-sm italic">
No parameters are available for display.
</span>
</div>
</>
)}
</> </>
); );
} }

9
src/frontend/src/modals/formModal/chatInput/index.tsx
View file

@ -46,7 +46,14 @@ export default function ChatInput({
: "hidden" : "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 => { onChange={(event): void => {
setChatValue(event.target.value); setChatValue(event.target.value);
}} }}

132
src/frontend/src/modals/formModal/chatMessage/index.tsx
View file

@ -1,5 +1,5 @@
import Convert from "ansi-to-html"; import Convert from "ansi-to-html";
import { useMemo, useState } from "react"; import { useState } from "react";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import rehypeMathjax from "rehype-mathjax"; import rehypeMathjax from "rehype-mathjax";
import remarkGfm from "remark-gfm"; import remarkGfm from "remark-gfm";
@ -74,77 +74,71 @@ export default function ChatMessage({
<div className="w-full"> <div className="w-full">
<div className="w-full dark:text-white"> <div className="w-full dark:text-white">
<div className="w-full"> <div className="w-full">
{useMemo( {chat.message.toString() === "" && lockChat ? (
() => <IconComponent
chat.message.toString() === "" && lockChat ? ( name="MoreHorizontal"
<IconComponent className="h-8 w-8 animate-pulse"
name="MoreHorizontal" />
className="h-8 w-8 animate-pulse" ) : (
/> <ReactMarkdown
) : ( remarkPlugins={[remarkGfm, remarkMath]}
<ReactMarkdown rehypePlugins={[rehypeMathjax]}
remarkPlugins={[remarkGfm, remarkMath]} className="markdown prose min-w-full text-primary word-break-break-word
rehypePlugins={[rehypeMathjax]}
className="markdown prose min-w-full text-primary word-break-break-word
dark:prose-invert" dark:prose-invert"
components={{ components={{
pre({ node, ...props }) { pre({ node, ...props }) {
return <>{props.children}</>; return <>{props.children}</>;
}, },
code: ({ code: ({
node, node,
inline, inline,
className, className,
children, children,
...props ...props
}) => { }) => {
if (children.length) { if (children.length) {
if (children[0] === "▍") { if (children[0] === "▍") {
return ( return (
<span className="form-modal-markdown-span"> <span className="form-modal-markdown-span">
▍ ▍
</span> </span>
);
}
children[0] = (children[0] as string).replace(
"`▍`",
"▍"
);
}
const match = /language-(\w+)/.exec(
className || ""
); );
}
return !inline ? ( children[0] = (children[0] as string).replace(
<CodeTabsComponent "`▍`",
isMessage "▍"
tabs={[ );
{ }
name: (match && match[1]) || "",
mode: (match && match[1]) || "", const match = /language-(\w+)/.exec(className || "");
image:
"https://curl.se/logo/curl-symbol-transparent.png", return !inline ? (
language: (match && match[1]) || "", <CodeTabsComponent
code: String(children).replace(/\n$/, ""), isMessage
}, tabs={[
]} {
activeTab={"0"} name: (match && match[1]) || "",
setActiveTab={() => {}} mode: (match && match[1]) || "",
/> image:
) : ( "https://curl.se/logo/curl-symbol-transparent.png",
<code className={className} {...props}> language: (match && match[1]) || "",
{children} code: String(children).replace(/\n$/, ""),
</code> },
); ]}
}, activeTab={"0"}
}} setActiveTab={() => {}}
> />
{chat.message.toString()} ) : (
</ReactMarkdown> <code className={className} {...props}>
), {children}
[chat.message, chat.message.toString()] </code>
);
},
}}
>
{chat.message.toString()}
</ReactMarkdown>
)} )}
</div> </div>
{chat.files && ( {chat.files && (

7
src/frontend/src/modals/formModal/index.tsx
View file

@ -146,13 +146,14 @@ export default function FormModal({
newChat[newChat.length - 1].message + str; newChat[newChat.length - 1].message + str;
} }
} }
if (thought) {
if (thought && newChat[newChat.length - 1]?.thought) {
newChat[newChat.length - 1].thought = thought; newChat[newChat.length - 1].thought = thought;
} }
if (files) { if (files && newChat[newChat.length - 1]?.files) {
newChat[newChat.length - 1].files = files; newChat[newChat.length - 1].files = files;
} }
if (prompt) { if (prompt && newChat[newChat.length - 2]?.template) {
newChat[newChat.length - 2].template = prompt; newChat[newChat.length - 2].template = prompt;
} }
return newChat; return newChat;

23
src/frontend/src/modals/genericModal/index.tsx
View file

@ -122,24 +122,21 @@ export default function GenericModal({
} }
if (apiReturn.data) { if (apiReturn.data) {
let inputVariables = apiReturn.data.input_variables ?? []; 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) { if (!inputVariables || inputVariables.length === 0) {
setIsEdit(true);
setNoticeData({ setNoticeData({
title: "Your template does not have any variables.", title: "Your template does not have any variables.",
}); });
setModalOpen(false);
} else { } else {
if ( setSuccessData({
JSON.stringify(apiReturn.data?.frontend_node) !== title: "Prompt is ready",
JSON.stringify({}) });
) {
setNodeClass!(apiReturn.data?.frontend_node, inputValue);
setModalOpen(closeModal);
setIsEdit(false);
setSuccessData({
title: "Prompt is ready",
});
}
} }
} else { } else {
setIsEdit(true); setIsEdit(true);