slightly hacky prompt management

components/PromptEntry.tsx

@@ -2,18 +2,20 @@ import { NextComponentType } from 'next'
 
 interface PromptEntryProps {
     prompt: string
+    index: number
     className: string
 }
 
 export default function PromptEntry({
     prompt,
+    index,
     className,
 }: PromptEntryProps) {  
 
     return (
       <>
         <p className={className}>
-            {prompt}
+            {prompt == "" ? index == 5 ? "UP NEXT: Anything you want" + prompt : "..." : index == 5 ? "UP NEXT: " + prompt : prompt}
         </p>
       </>
     )

components/PromptPanel.tsx

@@ -1,18 +1,20 @@
 import PromptEntry from './PromptEntry'
 
 import { PromptInput } from "../types";
-import {useRef} from 'react';
+import { useRef } from 'react';
 
 interface PromptPanelProps {
     prompts: PromptInput[];
     addPrompt: (prompt: string) => void;
-    changeUpNextPrompt: (prompt: string) => void;
+    changePrompt: (prompt: string, index: number) => void;
+    nextPrompt: () => void;
 }
 
 export default function PromptPanel({
     prompts,
     addPrompt,
-    changeUpNextPrompt,
+    changePrompt,
+    nextPrompt,
 }: PromptPanelProps) {
 
     const inputPrompt = useRef(null);
@@ -23,40 +25,52 @@ export default function PromptPanel({
                 <div className="pl-20">
                     <div className="h-[80vh] flex flex-col justify-around pt-[5vh] pr-5">
                         {prompts.slice(-6).map((prompt, index) => (
-                            <PromptEntry prompt={index == 5 ? "UP NEXT: " + prompt.prompt : prompt.prompt} className={promptEntryClassNames[index]} key={index} />
+                            <PromptEntry prompt={prompt.prompt} className={promptEntryClassNames[index]} index={index} />
                         ))}
                     </div>
 
                     <form onSubmit={(e) => {
                         e.preventDefault();
                         const prompt = e.currentTarget.prompt.value;
-                        changeUpNextPrompt(prompt);
+                        var promptLastIndex = prompts.length - 1;
+                        if (prompts[promptLastIndex - 1].prompt == "") {
+                            changePrompt(prompt, promptLastIndex - 1);
+                        } else {
+                            changePrompt(prompt, promptLastIndex);
+                        }
                         inputPrompt.current.value = '';
                     }}>
                         <input
-                            className="fixed z-90 bottom-20 w-1/2 h-12 pl-3 text-xl text-black rounded-lg border-sky-400 border-4 focus:outline-none focus:border-sky-500" 
+                            className="fixed z-90 bottom-20 w-1/2 h-12 pl-3 text-xl text-black rounded-lg border-sky-400 border-4 focus:outline-none focus:border-sky-500"
                             ref={inputPrompt}
                             type="text"
                             id="prompt"
                             name="prompt"
                             placeholder="What do you want to hear next?"
                             maxLength={150}
+                            minLength={2}
+                            required={true}
                             autoComplete="off"
                         />
                     </form>
+
+                    {/* Test button */}
+                    <button title="Add" className="fixed z-90 top-48 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg"
+                        onClick={() => nextPrompt()}
+                    >
+                    </button>
+
                 </div>
-            </main>
+            </main >
         </>
     )
 }
 
-// WIP manner of passing ideal font of each promptEntry based on where it is in the promptPanel. Could be done better with a map or something.
-// need not just order, but some context of where we are in time, and when that prompt will be primary (some global step state)
 const promptEntryClassNames = {
     0: "font-light text-sm text-gray-400 text-opacity-40",
     1: "font-normal text-m text-gray-300 text-opacity-60",
     2: "font-medium text-xl text-gray-200 text-opacity-80",
     3: "font-bold text-5xl text-white",  // This is the primary prompt
     4: "font-medium text-2xl text-gray-200 text-opacity-80", // This is prompt it is transitioning to
-    5: "font-normal text-m text-gray-300 text-opacity-60",
+    5: "font-normal text-m text-gray-300 text-opacity-60", // This is the UP NEXT prompt
 }

pages/index.tsx

@@ -15,8 +15,8 @@ const defaultPromptInputs = [
   { prompt: "Country singer and a techno DJ"},
   { prompt: "A typewriter in they style of K-Pop"},
   { prompt: "Boy band with a tropical beat "},
-  { prompt: "..."},
-  { prompt: "Anything you want"},
+  { prompt: ""},
+  { prompt: ""},
 ];
 
 const defaultInferenceResults = [
@@ -207,11 +207,19 @@ export default function Home() {
           addPrompt={(prompt: string) => {
             setPromptInputs([...promptInputs, { prompt: prompt }]);
           }}
-          changeUpNextPrompt={(prompt: string) => {
+          changePrompt={(prompt: string, index: number) => {
             const newPromptInputs = [...promptInputs];
-            newPromptInputs[newPromptInputs.length - 1].prompt = prompt;
+            newPromptInputs[index].prompt = prompt;
             setPromptInputs(newPromptInputs);
           }}
+          nextPrompt={() => {
+            // if there are no upcoming prompts, don't do anything
+            var promptLastIndex = promptInputs.length - 1;
+            if (promptInputs[promptLastIndex].prompt == "" && promptInputs[promptLastIndex-1].prompt == "") {
+              return;
+            }
+            setPromptInputs([...promptInputs, { prompt: "" }]);
+          }}
         />
 
         <Info />