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

Fixed bug when opening io view modal

Browse source
This commit is contained in:
Lucas Oliveira 2024-02-23 22:09:46 +01:00
commit 7a894279b6
2 changed files with 131 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

245
src/frontend/src/components/IOview/index.tsx
View file

@ -1,4 +1,4 @@
import { useState } from "react"; import { useEffect, useState } from "react";
import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants"; import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
import BaseModal from "../../modals/baseModal"; import BaseModal from "../../modals/baseModal";
import useFlowStore from "../../stores/flowStore"; import useFlowStore from "../../stores/flowStore";
@ -35,6 +35,11 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
{ type: string; id: string } | undefined { type: string; id: string } | undefined
>(undefined); >(undefined);
useEffect(() => {
setSelectedViewField(undefined);
setSelectedTab(inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0);
}, [inputs.length, outputs.length]);
return ( return (
<BaseModal <BaseModal
size={haveChat ? "large" : "small"} size={haveChat ? "large" : "small"}
@ -55,123 +60,133 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
</BaseModal.Header> </BaseModal.Header>
<BaseModal.Content> <BaseModal.Content>
<div className="flex-max-width mt-2 h-[80vh]"> <div className="flex-max-width mt-2 h-[80vh]">
<div {selectedTab !== 0 && (
className={cn( <div
"mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide", className={cn(
haveChat ? "w-2/6" : "w-full" "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start overflow-auto scrollbar-hide",
)} haveChat ? "w-2/6" : "w-full"
>
<div className="flex w-full items-center justify-between py-2">
<div className="flex items-start gap-4">
<Button
onClick={() => setSelectedTab(1)}
variant={selectedTab === 1 ? "primary" : "secondary"}
>
<IconComponent
name="FormInput"
className=" file-component-variable"
/>
<span className="file-component-variables-span text-md">
Inputs
</span>
</Button>
<Button
onClick={() => setSelectedTab(2)}
variant={selectedTab === 2 ? "primary" : "secondary"}
>
<IconComponent
name="ChevronRightSquare"
className=" file-component-variable"
/>
<span className="file-component-variables-span text-md">
Outputs
</span>
</Button>
</div>
{selectedViewField && haveChat && (
<Button
onClick={() => setSelectedViewField(undefined)}
variant="outline"
key={"chat"}
className="self-end px-2.5"
>
<IconComponent name="MessageSquareMore" className="h-5 w-5" />
</Button>
)} )}
</div> >
<div className="mx-2 mb-2 mt-4 flex items-center gap-2 font-semibold"> <div className="flex w-full items-center justify-between py-2">
{selectedTab === 1 && ( <div className="flex items-start gap-4">
<> {inputs.length > 0 && (
<IconComponent name={"FormInput"} /> <Button
Text Inputs onClick={() => setSelectedTab(1)}
</> variant={selectedTab === 1 ? "primary" : "secondary"}
)}
{selectedTab === 2 && (
<>
<IconComponent name={"ChevronRightSquare"} />
Prompt Outputs
</>
)}
</div>
{nodes
.filter((node) =>
selectedTab === 1
? inputs.some((input) => input.id === node.id)
: outputs.some((output) => output.id === node.id)
)
.map((node, index) => {
const input =
selectedTab === 1
? inputs.find((input) => input.id === node.id)!
: outputs.find((output) => output.id === node.id)!;
return (
<div className="file-component-accordion-div" key={index}>
<AccordionComponent
trigger={
<div className="file-component-badge-div">
<Badge variant="gray" size="md">
{input.id}
</Badge>
{haveChat && (
<div
className="-mb-1 pr-4"
onClick={(event) => {
event.stopPropagation();
setSelectedViewField(input);
}}
>
<IconComponent
className="h-4 w-4"
name="ExternalLink"
></IconComponent>
</div>
)}
</div>
}
key={index}
keyValue={input.id}
> >
<div className="file-component-tab-column"> <IconComponent
<div className=""> name="FormInput"
{input && className=" file-component-variable"
(selectedTab === 1 ? ( />
<IOInputField <span className="file-component-variables-span text-md">
inputType={input.type} Inputs
inputId={input.id} </span>
/> </Button>
) : ( )}
<IOOutputView {outputs.length > 0 && (
outputType={input.type} <Button
outputId={input.id} onClick={() => setSelectedTab(2)}
/> variant={selectedTab === 2 ? "primary" : "secondary"}
))} >
<IconComponent
name="ChevronRightSquare"
className=" file-component-variable"
/>
<span className="file-component-variables-span text-md">
Outputs
</span>
</Button>
)}
</div>
{selectedViewField && haveChat && (
<Button
onClick={() => setSelectedViewField(undefined)}
variant="outline"
key={"chat"}
className="self-end px-2.5"
>
<IconComponent
name="MessageSquareMore"
className="h-5 w-5"
/>
</Button>
)}
</div>
<div className="mx-2 mb-2 mt-4 flex items-center gap-2 font-semibold">
{selectedTab === 1 && (
<>
<IconComponent name={"FormInput"} />
Text Inputs
</>
)}
{selectedTab === 2 && (
<>
<IconComponent name={"ChevronRightSquare"} />
Prompt Outputs
</>
)}
</div>
{nodes
.filter((node) =>
selectedTab === 1
? inputs.some((input) => input.id === node.id)
: outputs.some((output) => output.id === node.id)
)
.map((node, index) => {
const input =
selectedTab === 1
? inputs.find((input) => input.id === node.id)!
: outputs.find((output) => output.id === node.id)!;
return (
<div className="file-component-accordion-div" key={index}>
<AccordionComponent
trigger={
<div className="file-component-badge-div">
<Badge variant="gray" size="md">
{input.id}
</Badge>
{haveChat && (
<div
className="-mb-1 pr-4"
onClick={(event) => {
event.stopPropagation();
setSelectedViewField(input);
}}
>
<IconComponent
className="h-4 w-4"
name="ExternalLink"
></IconComponent>
</div>
)}
</div>
}
key={index}
keyValue={input.id}
>
<div className="file-component-tab-column">
<div className="">
{input &&
(selectedTab === 1 ? (
<IOInputField
inputType={input.type}
inputId={input.id}
/>
) : (
<IOOutputView
outputType={input.type}
outputId={input.id}
/>
))}
</div>
</div> </div>
</div> </AccordionComponent>
</AccordionComponent> </div>
</div> );
); })}
})} </div>
</div> )}
{haveChat ? ( {haveChat ? (
selectedViewField ? ( selectedViewField ? (
inputs.some((input) => input.id === selectedViewField.id) ? ( inputs.some((input) => input.id === selectedViewField.id) ? (

2
src/frontend/src/constants/constants.ts
View file

@ -681,4 +681,4 @@ export const LANGFLOW_SUPPORTED_TYPES = new Set([
export const priorityFields = new Set(["code", "template"]); export const priorityFields = new Set(["code", "template"]);
export const INPUT_TYPES = new Set(["ChatInput", "TextInput"]); export const INPUT_TYPES = new Set(["ChatInput", "TextInput"]);
export const OUTPUT_TYPES = new Set(["ChatOutput", "PromptTemplate"]); export const OUTPUT_TYPES = new Set(["ChatOutput"]);