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

Fixed generic modal to use baseModal and fixed inputVariables to show on footer

Browse source
This commit is contained in:
Lucas Oliveira 2023-07-11 21:33:13 -03:00
commit 9ec48cbd17
1 changed files with 122 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,15 +4,7 @@ import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper";
import ShadTooltip from "../../components/ShadTooltipComponent";
import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "../../components/ui/dialog";
import { DialogTitle } from "../../components/ui/dialog";
import { Textarea } from "../../components/ui/textarea";
import { PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
import { alertContext } from "../../contexts/alertContext";
@ -28,6 +20,7 @@ import {
regexHighlight,
varHighlightHTML,
} from "../../utils";
import BaseModal from "../baseModal";
export default function GenericModal({
field_name = "",
@ -162,133 +155,128 @@ export default function GenericModal({
}
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger>
<DialogContent className="min-w-[80vw] gap-2">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">{myModalTitle}</span>
<FileText
strokeWidth={1.5}
className="h-6 w-6 pl-1 text-primary "
aria-hidden="true"
/>
</DialogTitle>
<DialogDescription>
{(() => {
switch (myModalTitle) {
case "Edit Text":
return TEXT_DIALOG_SUBTITLE;
<BaseModal open={true} setOpen={setModalOpen}>
<BaseModal.Header
description={(() => {
switch (myModalTitle) {
case "Edit Text":
return TEXT_DIALOG_SUBTITLE;
case "Edit Prompt":
return PROMPT_DIALOG_SUBTITLE;
case "Edit Prompt":
return PROMPT_DIALOG_SUBTITLE;
default:
return null;
}
})()}
</DialogDescription>
</DialogHeader>
<div
className={classNames(
!isEdit ? "rounded-lg border" : "",
"mt-2 flex h-[55vh] w-full"
)}
>
{type === TypeModal.PROMPT && isEdit ? (
<Textarea
ref={ref}
className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
value={inputValue}
onBlur={() => {
setIsEdit(false);
}}
autoFocus
onChange={(e) => {
setInputValue(e.target.value);
checkVariables(e.target.value);
}}
placeholder="Type message here."
/>
) : type === TypeModal.PROMPT && !isEdit ? (
<TextAreaContentView />
) : type !== TypeModal.PROMPT ? (
<Textarea
ref={ref}
className="form-input h-full w-full rounded-lg focus-visible:ring-1"
value={inputValue}
onChange={(e) => {
setInputValue(e.target.value);
}}
placeholder="Type message here."
/>
) : (
<></>
)}
</div>
{type === TypeModal.PROMPT && (
<>
<div className="sm:6/6 mr-28 mt-3 max-h-20 overflow-y-auto custom-scroll">
<div className="flex flex-wrap items-center">
<Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
<span className="text-md font-semibold text-primary">
Input Variables:
</span>
{wordsHighlight.map((word, index) => (
<ShadTooltip
key={getRandomKeyByssmm() + index}
content={word.replace(/[{}]/g, "")}
asChild={false}
>
<Badge
key={index}
variant="gray"
size="md"
className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
>
<div className="relative bottom-[1px]">
<span>
{word.replace(/[{}]/g, "").length > 59
? word.replace(/[{}]/g, "").slice(0, 56) + "..."
: word.replace(/[{}]/g, "")}
</span>
</div>
</Badge>
</ShadTooltip>
))}
</div>
</div>
</>
)}
<DialogFooter>
<Button
className="mt-3"
onClick={() => {
switch (myModalType) {
case 1:
setValue(inputValue);
setModalOpen(false);
break;
case 2:
!inputValue || inputValue === ""
? setModalOpen(false)
: validatePrompt(false);
break;
default:
break;
}
}}
type="submit"
default:
return null;
}
})()}
>
<DialogTitle className="flex items-center">
<span className="pr-2">{myModalTitle}</span>
<FileText
strokeWidth={1.5}
className="h-6 w-6 pl-1 text-primary "
aria-hidden="true"
/>
</DialogTitle>
</BaseModal.Header>
<BaseModal.Content>
<div className="flex h-full flex-col">
<div
className={classNames(
!isEdit ? "rounded-lg border" : "",
"flex h-full w-full"
)}
>
{myButtonText}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
{type === TypeModal.PROMPT && isEdit ? (
<Textarea
ref={ref}
className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
value={inputValue}
onBlur={() => {
setIsEdit(false);
}}
autoFocus
onChange={(e) => {
setInputValue(e.target.value);
checkVariables(e.target.value);
}}
placeholder="Type message here."
/>
) : type === TypeModal.PROMPT && !isEdit ? (
<TextAreaContentView />
) : type !== TypeModal.PROMPT ? (
<Textarea
ref={ref}
className="form-input h-full w-full rounded-lg focus-visible:ring-1"
value={inputValue}
onChange={(e) => {
setInputValue(e.target.value);
}}
placeholder="Type message here."
/>
) : (
<></>
)}
</div>
<div className="mt-4 flex h-fit w-full items-end justify-between">
{type === TypeModal.PROMPT && (
<div className="mb-auto mr-2 max-h-20 flex-1 overflow-y-auto custom-scroll">
<div className="flex flex-wrap items-center">
<Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
<span className="text-md font-semibold text-primary">
Input Variables:
</span>
{wordsHighlight.map((word, index) => (
<ShadTooltip
key={getRandomKeyByssmm() + index}
content={word.replace(/[{}]/g, "")}
asChild={false}
>
<Badge
key={index}
variant="gray"
size="md"
className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
>
<div className="relative bottom-[1px]">
<span>
{word.replace(/[{}]/g, "").length > 59
? word.replace(/[{}]/g, "").slice(0, 56) + "..."
: word.replace(/[{}]/g, "")}
</span>
</div>
</Badge>
</ShadTooltip>
))}
</div>
</div>
)}
<Button
onClick={() => {
switch (myModalType) {
case 1:
setValue(inputValue);
setModalOpen(false);
break;
case 2:
!inputValue || inputValue === ""
? setModalOpen(false)
: validatePrompt(false);
break;
default:
break;
}
}}
type="submit"
>
{myButtonText}
</Button>
</div>
</div>
</BaseModal.Content>
</BaseModal>
);
}