Fixed generic modal to use baseModal and fixed inputVariables to show on footer
This commit is contained in:
Lucas Oliveira
parent
7979f3c02e
commit
9ec48cbd17
1 changed files with 122 additions and 134 deletions
|
|
@ -4,15 +4,7 @@ import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper";
|
||||||
import ShadTooltip from "../../components/ShadTooltipComponent";
|
import ShadTooltip from "../../components/ShadTooltipComponent";
|
||||||
import { Badge } from "../../components/ui/badge";
|
import { Badge } from "../../components/ui/badge";
|
||||||
import { Button } from "../../components/ui/button";
|
import { Button } from "../../components/ui/button";
|
||||||
import {
|
import { DialogTitle } from "../../components/ui/dialog";
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogDescription,
|
|
||||||
DialogFooter,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
DialogTrigger,
|
|
||||||
} from "../../components/ui/dialog";
|
|
||||||
import { Textarea } from "../../components/ui/textarea";
|
import { Textarea } from "../../components/ui/textarea";
|
||||||
import { PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
|
import { PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
|
||||||
import { alertContext } from "../../contexts/alertContext";
|
import { alertContext } from "../../contexts/alertContext";
|
||||||
|
|
@ -28,6 +20,7 @@ import {
|
||||||
regexHighlight,
|
regexHighlight,
|
||||||
varHighlightHTML,
|
varHighlightHTML,
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
|
import BaseModal from "../baseModal";
|
||||||
|
|
||||||
export default function GenericModal({
|
export default function GenericModal({
|
||||||
field_name = "",
|
field_name = "",
|
||||||
|
|
@ -162,133 +155,128 @@ export default function GenericModal({
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={true} onOpenChange={setModalOpen}>
|
<BaseModal open={true} setOpen={setModalOpen}>
|
||||||
<DialogTrigger></DialogTrigger>
|
<BaseModal.Header
|
||||||
<DialogContent className="min-w-[80vw] gap-2">
|
description={(() => {
|
||||||
<DialogHeader>
|
switch (myModalTitle) {
|
||||||
<DialogTitle className="flex items-center">
|
case "Edit Text":
|
||||||
<span className="pr-2">{myModalTitle}</span>
|
return TEXT_DIALOG_SUBTITLE;
|
||||||
<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;
|
|
||||||
|
|
||||||
case "Edit Prompt":
|
case "Edit Prompt":
|
||||||
return PROMPT_DIALOG_SUBTITLE;
|
return PROMPT_DIALOG_SUBTITLE;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
})()}
|
})()}
|
||||||
</DialogDescription>
|
>
|
||||||
</DialogHeader>
|
<DialogTitle className="flex items-center">
|
||||||
|
<span className="pr-2">{myModalTitle}</span>
|
||||||
<div
|
<FileText
|
||||||
className={classNames(
|
strokeWidth={1.5}
|
||||||
!isEdit ? "rounded-lg border" : "",
|
className="h-6 w-6 pl-1 text-primary "
|
||||||
"mt-2 flex h-[55vh] w-full"
|
aria-hidden="true"
|
||||||
)}
|
/>
|
||||||
>
|
</DialogTitle>
|
||||||
{type === TypeModal.PROMPT && isEdit ? (
|
</BaseModal.Header>
|
||||||
<Textarea
|
<BaseModal.Content>
|
||||||
ref={ref}
|
<div className="flex h-full flex-col">
|
||||||
className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
|
<div
|
||||||
value={inputValue}
|
className={classNames(
|
||||||
onBlur={() => {
|
!isEdit ? "rounded-lg border" : "",
|
||||||
setIsEdit(false);
|
"flex h-full w-full"
|
||||||
}}
|
)}
|
||||||
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"
|
|
||||||
>
|
>
|
||||||
{myButtonText}
|
{type === TypeModal.PROMPT && isEdit ? (
|
||||||
</Button>
|
<Textarea
|
||||||
</DialogFooter>
|
ref={ref}
|
||||||
</DialogContent>
|
className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
|
||||||
</Dialog>
|
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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue