File size: 2,232 Bytes
f658021
 
 
 
 
 
 
67fda5f
f658021
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67fda5f
f658021
 
 
 
 
 
 
 
 
67fda5f
f658021
2dd820e
f658021
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import { ReactNode, useState } from "react"
import { RxReload, RxPencil2 } from "react-icons/rx"

import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { cn } from "@/lib/utils"
import { Textarea } from "@/components/ui/textarea"


export function EditModal({
    existingPrompt,
    isEnabled,
    className,
    children,
    onSave,
  }: {
    existingPrompt: string;
    isEnabled: boolean;
    className?: string;
    children?: ReactNode;
    onSave: (newPrompt: string) => void;
  }) {
  const [draftPrompt, setDraftPrompt] = useState(existingPrompt)
  const [isOpen, setOpen] = useState(false)

  const handleSubmit = () => {
    if (draftPrompt) {
      onSave(draftPrompt)
      setOpen(false)
    }
  }

  return (
    <Dialog open={isOpen} onOpenChange={() => isEnabled ? setOpen(true) : undefined}>
      <DialogTrigger asChild>
        {children}
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Edit Prompt</DialogTitle>
          <DialogDescription className="w-full text-center text-lg font-bold text-stone-800">
            Edit Prompt
          </DialogDescription>
        </DialogHeader>
          <div className="flex flex-row flex-grow w-full">
            <Textarea
              placeholder="Story"
              rows={10}
              className="w-full bg-neutral-300 text-neutral-800 dark:bg-neutral-300 dark:text-neutral-800 rounded-r-none"
              // disabled={atLeastOnePanelIsBusy}
              onChange={(e) => {
                setDraftPrompt(e.target.value)
              }}
              onKeyDown={({ key }) => {
                if (key === 'Enter') {
                  handleSubmit()
                }
              }}
              value={draftPrompt}
            />
          </div>
        <DialogFooter>
          <Button
            type="submit"
            onClick={() => handleSubmit()}
            disabled={!draftPrompt.length}
            >Save</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}