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

Changed view to not show chat

Browse source
This commit is contained in:
Lucas Oliveira 2024-02-21 21:09:52 +01:00
commit 5b000e6078
4 changed files with 129 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,10 @@
import { ReactNode, useState } from "react"; import { ReactNode, useState } from "react";
import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
import BaseModal from "../../modals/baseModal";
import useFlowStore from "../../stores/flowStore"; import useFlowStore from "../../stores/flowStore";
import { NodeType } from "../../types/flow"; import { NodeType } from "../../types/flow";
import { isInputType, isOutputType } from "../../utils/reactflowUtils"; import { isInputType, isOutputType } from "../../utils/reactflowUtils";
import { cn } from "../../utils/utils";
import AccordionComponent from "../AccordionComponent"; import AccordionComponent from "../AccordionComponent";
import IOInputField from "../IOInputField"; import IOInputField from "../IOInputField";
import IOOutputView from "../IOOutputView"; import IOOutputView from "../IOOutputView";
@ -10,7 +13,7 @@ import NewChatView from "../newChatView";
import { Badge } from "../ui/badge"; import { Badge } from "../ui/badge";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
export default function IOView(): JSX.Element { export default function IOView({ children, open, setOpen }): JSX.Element {
const inputs = useFlowStore((state) => state.inputs); const inputs = useFlowStore((state) => state.inputs);
const outputs = useFlowStore((state) => state.outputs); const outputs = useFlowStore((state) => state.outputs);
const inputIds = inputs.map((obj) => obj.id); const inputIds = inputs.map((obj) => obj.id);
@ -39,7 +42,7 @@ export default function IOView(): JSX.Element {
function getCategories() { function getCategories() {
const categories: CategoriesType[] = []; const categories: CategoriesType[] = [];
if (inputs.length > 0) if (inputs.filter((input) => input.type !== "ChatInput").length > 0)
categories.push({ name: "Inputs", icon: "TextCursorInput" }); categories.push({ name: "Inputs", icon: "TextCursorInput" });
if (outputs.filter((output) => output.type !== "ChatOutput").length > 0) if (outputs.filter((output) => output.type !== "ChatOutput").length > 0)
categories.push({ name: "Outputs", icon: "TerminalSquare" }); categories.push({ name: "Outputs", icon: "TerminalSquare" });
@ -53,7 +56,7 @@ export default function IOView(): JSX.Element {
return <IOInputField inputId={id!} inputType={type} />; return <IOInputField inputId={id!} inputType={type} />;
if (isOutputType(type)) if (isOutputType(type))
return <IOOutputView outputId={id!} outputType={type} />; return <IOOutputView outputId={id!} outputType={type} />;
else return <div>no view selected</div>; else return undefined;
} }
function UpdateAccordion() { function UpdateAccordion() {
@ -61,96 +64,127 @@ export default function IOView(): JSX.Element {
} }
return ( return (
<div className="form-modal-iv-box"> <BaseModal size={handleSelectChange() ? "large" : "small"} open={open} setOpen={setOpen}>
<div className="mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide"> <BaseModal.Trigger>{children}</BaseModal.Trigger>
<div className="flex items-start gap-4 py-2"> {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}
{categories.map((category, index) => { <BaseModal.Header description={CHAT_FORM_DIALOG_SUBTITLE}>
return ( <div className="flex items-center">
//hide chat button if chat is alredy on the view <span className="pr-2">Chat</span>
<Button <IconComponent
onClick={() => setSelectedCategory(index)} name="prompts"
variant={index === selectedCategory ? "primary" : "secondary"} className="h-6 w-6 pl-1 text-foreground"
key={index} aria-hidden="true"
> />
<IconComponent
name={category.icon}
className=" file-component-variable"
/>
<span className="file-component-variables-span text-md">
{category.name}
</span>
</Button>
);
})}
{(outputs.map((output) => output.type).includes("ChatOutput") ||
inputs.map((output) => output.type).includes("chatInput")) &&
selectedView.type !== "ChatOutput" && (
<button
onClick={() => setSelectedView({ type: "ChatOutput" })}
className={
"cursor flex items-center rounded-md rounded-b-none px-1 hover:bg-muted-foreground"
}
key={"chat"}
>
<IconComponent
name="Variable"
className=" file-component-variable"
/>
<span className="file-component-variables-span text-md">
Chat
</span>
</button>
)}
</div> </div>
{UpdateAccordion() </BaseModal.Header>
.filter((input) => input.type !== "ChatInput") <BaseModal.Content>
.map((input, index) => { <div className="flex-max-width mt-2">
const node: NodeType = nodes.find((node) => node.id === input.id)!; <div
return ( className={cn(
<div className="file-component-accordion-div" key={index}> "mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide",
<AccordionComponent handleSelectChange() ? "w-2/6" : "w-full"
trigger={ )}
<div className="file-component-badge-div"> >
<Badge variant="gray" size="md"> <div className="flex items-start gap-4 py-2">
{input.id} {categories.map((category, index) => {
</Badge> return (
<div //hide chat button if chat is alredy on the view
className="-mb-1 pr-4" <Button
onClick={(event) => { onClick={() => setSelectedCategory(index)}
event.stopPropagation(); variant={
setSelectedView({ type: input.type, id: input.id }); index === selectedCategory ? "primary" : "secondary"
}} }
> key={index}
<IconComponent >
className="h-4 w-4" <IconComponent
name="ScreenShare" name={category.icon}
></IconComponent> className=" file-component-variable"
/>
<span className="file-component-variables-span text-md">
{category.name}
</span>
</Button>
);
})}
{(outputs.map((output) => output.type).includes("ChatOutput") ||
inputs.map((output) => output.type).includes("chatInput")) &&
selectedView.type !== "ChatOutput" && (
<button
onClick={() => setSelectedView({ type: "ChatOutput" })}
className={
"cursor flex items-center rounded-md rounded-b-none px-1 hover:bg-muted-foreground"
}
key={"chat"}
>
<IconComponent
name="Variable"
className=" file-component-variable"
/>
<span className="file-component-variables-span text-md">
Chat
</span>
</button>
)}
</div>
{UpdateAccordion()
.filter(
(input) =>
input.type !== "ChatInput" && input.type !== "ChatOutput"
)
.map((input, index) => {
const node: NodeType = nodes.find(
(node) => node.id === input.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>
<div
className="-mb-1 pr-4"
onClick={(event) => {
event.stopPropagation();
setSelectedView({
type: input.type,
id: input.id,
});
}}
>
<IconComponent
className="h-4 w-4"
name="ScreenShare"
></IconComponent>
</div>
</div>
}
key={index}
keyValue={input.id}
>
<div className="file-component-tab-column">
{node &&
(categories[selectedCategory].name === "Inputs" ? (
<IOInputField
inputType={input.type}
inputId={input.id}
/>
) : (
<IOOutputView
outputType={input.type}
outputId={input.id}
/>
))}
</div> </div>
</div> </AccordionComponent>
}
key={index}
keyValue={input.id}
>
<div className="file-component-tab-column">
{node &&
(categories[selectedCategory].name === "Inputs" ? (
<IOInputField
inputType={input.type}
inputId={input.id}
/>
) : (
<IOOutputView
outputType={input.type}
outputId={input.id}
/>
))}
</div> </div>
</AccordionComponent> );
</div> })}
); </div>
})} {handleSelectChange() && handleSelectChange()}
</div> </div>
{handleSelectChange()} </BaseModal.Content>
</div> </BaseModal>
); );
} }

28
src/frontend/src/components/chatComponent/index.tsx
View file

@ -1,12 +1,8 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
import BaseModal from "../../modals/baseModal";
import useFlowStore from "../../stores/flowStore"; import useFlowStore from "../../stores/flowStore";
import { ChatType } from "../../types/chat"; import { ChatType } from "../../types/chat";
import IOView from "../IOview"; import IOView from "../IOview";
import ChatTrigger from "../ViewTriggers/chat"; import ChatTrigger from "../ViewTriggers/chat";
import IconComponent from "../genericIconComponent";
import BuildTrigger from "./buildTrigger";
export default function Chat({ flow }: ChatType): JSX.Element { export default function Chat({ flow }: ChatType): JSX.Element {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
@ -38,27 +34,9 @@ export default function Chat({ flow }: ChatType): JSX.Element {
<div className="flex flex-col"> <div className="flex flex-col">
{/* <BuildTrigger open={open} flow={flow} /> */} {/* <BuildTrigger open={open} flow={flow} /> */}
{hasIO && ( {hasIO && (
<BaseModal open={open} setOpen={setOpen}> <IOView open={open} setOpen={setOpen}>
<BaseModal.Trigger asChild> <ChatTrigger />
<div onClick={() => setOpen(true)}> </IOView>
<ChatTrigger />
</div>
</BaseModal.Trigger>
{/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}
<BaseModal.Header description={CHAT_FORM_DIALOG_SUBTITLE}>
<div className="flex items-center">
<span className="pr-2">Chat</span>
<IconComponent
name="prompts"
className="h-6 w-6 pl-1 text-foreground"
aria-hidden="true"
/>
</div>
</BaseModal.Header>
<BaseModal.Content>
<IOView />
</BaseModal.Content>
</BaseModal>
)} )}
</div> </div>
</> </>

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

@ -439,7 +439,7 @@ export default function FormModal({
<DialogDescription>{CHAT_FORM_DIALOG_SUBTITLE}</DialogDescription> <DialogDescription>{CHAT_FORM_DIALOG_SUBTITLE}</DialogDescription>
</DialogHeader> </DialogHeader>
<div className="form-modal-iv-box "> <div className="flex-max-width mt-2 h-[80vh]">
<div className="form-modal-iv-size"> <div className="form-modal-iv-size">
<div className="file-component-arrangement"> <div className="file-component-arrangement">
<IconComponent <IconComponent

3
src/frontend/src/style/applies.css
View file

@ -926,9 +926,6 @@
.form-modal-initial-prompt-btn { .form-modal-initial-prompt-btn {
@apply mb-2 flex items-center gap-2 rounded-md border border-border bg-background px-4 py-2 text-sm font-semibold shadow-sm; @apply mb-2 flex items-center gap-2 rounded-md border border-border bg-background px-4 py-2 text-sm font-semibold shadow-sm;
} }
.form-modal-iv-box {
@apply flex-max-width mt-2 h-[80vh];
}
.form-modal-iv-size { .form-modal-iv-size {
@apply mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide; @apply mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide;
} }