up

src/app/interface/bottom-bar/index.tsx

@@ -65,7 +65,7 @@ export function BottomBar() {
     let uploadUrl = ""
     try {
       uploadUrl = await uploadToHuggingFace(fileToUpload)
-      console.log("uploadUrl:", uploadUrl)
+      // console.log("uploadUrl:", uploadUrl)
     } catch (err) {
       console.error("Failed to upload the image to Hugging Face")
     }

src/app/interface/edit-modal/index.tsx

@@ -0,0 +1,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"
+
+
+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>
+        <Button variant="outline">
+          {children}
+        </Button>
+      </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">
+            <Input
+              placeholder="Story"
+              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>
+  )
+}

src/app/interface/panel/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useRef, useState, useTransition } from "react"
-import { RxReload } from "react-icons/rx"
+import { RxReload, RxPencil2 } from "react-icons/rx"
 
 import { RenderedScene } from "@/types"
 
@@ -11,6 +11,7 @@ import { useStore } from "@/app/store"
 import { cn } from "@/lib/utils"
 import { getInitialRenderedScene } from "@/lib/getInitialRenderedScene"
 import { Progress } from "@/app/interface/progress"
+import { EditModal } from "../edit-modal"
 
 export function Panel({
   page,
@@ -54,6 +55,8 @@ export function Panel({
   const panels = useStore(state => state.panels)
   const prompt = panels[panelIndex] || ""
 
+  const setPanelPrompt = useStore(state => state.setPanelPrompt)
+
   const captions = useStore(state => state.captions)
   const caption = captions[panelIndex] || ""
 
@@ -266,6 +269,12 @@ export function Panel({
     setRevision(revision + 1)
   }
 
+
+  const handleSavePrompt = (newPrompt: string) => {
+    console.log(`Asked to save a new prompt: ${newPrompt}`)
+    setPanelPrompt(newPrompt, panelIndex)
+  }
+
   if (prompt && !rendered.assetUrl) {
     return (
       <div className={cn(
@@ -341,7 +350,7 @@ export function Panel({
         // process.env.NEXT_PUBLIC_CAN_REDRAW === "true" ?
          <div
         className={cn(`relative -mt-14 ml-4`,)}>
-          <div className="flex flex-row">
+          <div className="flex flex-row space-x-2">
             <div
               onClick={rendered.status === "completed" ? handleReload : undefined}
               className={cn(
@@ -355,8 +364,29 @@ export function Panel({
               <RxReload
                 className="w-5 h-5"
               />
-              <span className="text-base">Redraw</span>
+              <span className="text-sm">Redraw</span>
             </div>
+            <EditModal
+              isEnabled={rendered.status === "completed"}
+              existingPrompt={prompt}
+              onSave={handleSavePrompt}
+            >
+              <div
+                className={cn(
+                  `bg-stone-100 rounded-lg`,
+                  `flex flex-row space-x-2 items-center`,
+                  `py-2 px-3 cursor-pointer`,
+                  `transition-all duration-200 ease-in-out`,
+                  rendered.status === "completed" ? "opacity-95" : "opacity-50",
+                  mouseOver && rendered.assetUrl ? `scale-95 hover:scale-100 hover:opacity-100`: `scale-0`
+                )}>
+                <RxPencil2
+                  className="w-5 h-5"
+                />
+                <span className="text-sm">Edit</span>
+              </div>
+                        
+            </EditModal>
           </div>
         </div> 
         //: null

src/app/store/index.ts

@@ -35,6 +35,7 @@ export const useStore = create<{
   setFont: (font: FontName) => void
   setPreset: (preset: Preset) => void
   setPanels: (panels: string[]) => void
+  setPanelPrompt: (newPrompt: string, index: number) => void
   setShowCaptions: (showCaptions: boolean) => void
   setLayout: (layout: LayoutName) => void
   setLayouts: (layouts: LayoutName[]) => void
@@ -116,6 +117,14 @@ export const useStore = create<{
     })
   },
   setPanels: (panels: string[]) => set({ panels }),
+  setPanelPrompt: (newPrompt, index) => {
+    const { panels } = get()
+    set({
+      panels: panels.map((p, i) => (
+        index === i ? newPrompt : p
+      ))
+    })
+  },
   setCaptions: (captions: string[]) => {
     set({
       captions,