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

Make big view appear when chat not available

Browse source
This commit is contained in:
Lucas Oliveira 2024-03-20 14:05:30 +01:00
commit 725566d527
2 changed files with 44 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -105,7 +105,13 @@ export default function IOView({
return ( return (
<BaseModal <BaseModal
size={haveChat ? (selectedTab === 0 ? "large-thin" : "large") : "small"} size={
haveChat || selectedViewField
? selectedTab === 0
? "large-thin"
: "large"
: "small"
}
open={open} open={open}
setOpen={setOpen} setOpen={setOpen}
disable={disable} disable={disable}
@ -123,13 +129,13 @@ export default function IOView({
</div> </div>
</BaseModal.Header> </BaseModal.Header>
<BaseModal.Content> <BaseModal.Content>
<div className="flex h-full flex-col"> <div className="flex h-full flex-col overflow-hidden">
<div className="flex-max-width mt-2 h-full"> <div className="flex-max-width mt-2 h-full">
{selectedTab !== 0 && ( {selectedTab !== 0 && (
<div <div
className={cn( className={cn(
"mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start", "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300",
haveChat ? "w-2/6" : "w-full" haveChat || selectedViewField ? "w-2/6" : "w-full"
)} )}
> >
<Tabs <Tabs
@ -179,20 +185,18 @@ export default function IOView({
<Badge variant="gray" size="md"> <Badge variant="gray" size="md">
{node.data.node.display_name} {node.data.node.display_name}
</Badge> </Badge>
{haveChat && ( <div
<div className="-mb-1 pr-4"
className="-mb-1 pr-4" onClick={(event) => {
onClick={(event) => { event.stopPropagation();
event.stopPropagation(); setSelectedViewField(input);
setSelectedViewField(input); }}
}} >
> <IconComponent
<IconComponent className="h-4 w-4"
className="h-4 w-4" name="ExternalLink"
name="ExternalLink" ></IconComponent>
></IconComponent> </div>
</div>
)}
</div> </div>
} }
key={index} key={index}
@ -248,20 +252,18 @@ export default function IOView({
</Badge> </Badge>
</div> </div>
</ShadTooltip> </ShadTooltip>
{haveChat && ( <div
<div className="-mb-1 pr-4"
className="-mb-1 pr-4" onClick={(event) => {
onClick={(event) => { event.stopPropagation();
event.stopPropagation(); setSelectedViewField(output);
setSelectedViewField(output); }}
}} >
> <IconComponent
<IconComponent className="h-4 w-4"
className="h-4 w-4" name="ExternalLink"
name="ExternalLink" ></IconComponent>
></IconComponent> </div>
</div>
)}
</div> </div>
} }
key={index} key={index}
@ -287,12 +289,12 @@ export default function IOView({
</div> </div>
)} )}
{haveChat ? ( {haveChat || selectedViewField ? (
<div className="flex h-full min-w-96 flex-grow"> <div className="flex h-full min-w-96 flex-grow">
{selectedViewField && ( {selectedViewField && (
<div <div
className={cn( className={cn(
"flex h-full w-full flex-col items-start gap-4 p-4", "flex h-full w-full flex-col items-start gap-4 pt-4",
!selectedViewField ? "hidden" : "" !selectedViewField ? "hidden" : ""
)} )}
> >
@ -347,7 +349,7 @@ export default function IOView({
</BaseModal.Content> </BaseModal.Content>
<BaseModal.Footer> <BaseModal.Footer>
{!haveChat && ( {!haveChat && (
<div className="flex w-full justify-end pt-6"> <div className="flex w-full justify-end pt-2">
<Button <Button
variant={"outline"} variant={"outline"}
className="flex gap-2 px-3" className="flex gap-2 px-3"

9
src/frontend/src/modals/baseModal/index.tsx
View file

@ -10,6 +10,7 @@ import {
DialogTrigger, DialogTrigger,
} from "../../components/ui/dialog"; } from "../../components/ui/dialog";
import { modalHeaderType } from "../../types/components"; import { modalHeaderType } from "../../types/components";
import { cn } from "../../utils/utils";
type ContentProps = { children: ReactNode }; type ContentProps = { children: ReactNode };
type HeaderProps = { children: ReactNode; description: string }; type HeaderProps = { children: ReactNode; description: string };
@ -157,11 +158,15 @@ function BaseModal({
return ( return (
<Dialog open={open} onOpenChange={setOpen}> <Dialog open={open} onOpenChange={setOpen}>
{triggerChild} {triggerChild}
<DialogContent className={minWidth}> <DialogContent className={cn(minWidth, "duration-300")}>
<div className="truncate-doubleline word-break-break-word"> <div className="truncate-doubleline word-break-break-word">
{headerChild} {headerChild}
</div> </div>
<div className={`flex flex-col ${height!} w-full `}>{ContentChild}</div> <div
className={`flex flex-col ${height!} w-full transition-all duration-300`}
>
{ContentChild}
</div>
{ContentFooter && ( {ContentFooter && (
<div className="flex flex-row-reverse">{ContentFooter}</div> <div className="flex flex-row-reverse">{ContentFooter}</div>
)} )}