Dark mode, colors, prep for loading spinner

First animations

core/src/engine/noop.ts

@@ -8,7 +8,7 @@ export async function generate<D extends {} = {}>(
   _: unknown
 ): Promise<{ debug: D; message: string }> {
   await new Promise<void>((resolve) => {
-    setTimeout(() => resolve(), 750);
+    setTimeout(() => resolve(), 7500);
   });
   return {
     message:

web/src/app/ailly.ts

@@ -5,7 +5,7 @@ import { Ailly, types } from "@ailly/core";
 export async function generateOne(content: types.Content) {
   const settings = await Ailly.makePipelineSettings({
     root: "/ailly",
-    engine: "noop",
+    // engine: "noop",
   });
   const manager = await Ailly.GenerateManager.from(
     [content.path],

web/src/app/editor.module.css

@@ -11,4 +11,5 @@
   border: none;
   border-radius: var(--size-base);
   box-shadow: lightgrey 0 0 2px 4px;
+  margin-top: calc(var(--size-base) * 5);
 }

web/src/app/editor.tsx

@@ -3,34 +3,27 @@
 import { useAillyPageStore } from "./store";
 
 import styles from "./editor.module.css";
+import { ChangeEvent, useMemo } from "react";
 
+const INPUT_DELAY = 900;
 export const Editor = (store: ReturnType<typeof useAillyPageStore>) => {
-  const { state, actions } = store;
+  const { actions } = store;
+
+  const onChange = useMemo(() => {
+    let timer: ReturnType<typeof globalThis.setTimeout>;
+    return (e: ChangeEvent<HTMLTextAreaElement>) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => actions.prompt(e.target.value), INPUT_DELAY);
+    };
+  }, []);
 
   return (
-    <div>
-      <ol className={styles.prompt}>
-        {state.selections
-          .map((selections, block) =>
-            selections.map((opt) => (
-              <li key={`${block}-${opt}`}>
-                <blockquote>
-                  <p>{state.story[block].options[opt].content}</p>
-                </blockquote>
-              </li>
-            ))
-          )
-          .flat()}
-        <li>
-          <textarea
-            className={styles.instruction}
-            placeholder="What do we want to do today?"
-            onBlur={(e) => {
-              actions.prompt(e.target.value);
-            }}
-          />
-        </li>
-      </ol>
-    </div>
+    <section>
+      <textarea
+        className={styles.instruction}
+        placeholder="What do we want to do today?"
+        onChange={onChange}
+      />
+    </section>
   );
 };

web/src/app/globals.css

@@ -1,23 +1,54 @@
 @import url("https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova:wght@400;700&family=Inter:wght@400;700&family=JetBrains+Mono&display=swap");
 
 :root {
+  color-scheme: light;
   --font-family-base: Inter, sans-serif;
   --font-family-heading: "Ibarra Real Nova", serif;
   --font-family-monospace: "JetBrains Mono", monospace;
+  --font-size-base: 20px;
   --color-base: lightblue;
   --color-contrast: lightgreen;
+  --color-background: white;
+  --color-text: black;
   --size-base: 5px;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --color-base: darkblue;
+    --color-contrast: darkgreen;
+    --color-background: black;
+    --color-text: white;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
-  font-size: 20px;
+  font-size: var(--font-size-base);
   font-family: var(--font-family-base);
 }
 
 h1,
 h2 {
   font-family: var(--font-family-heading);
+  margin: 0;
+  padding: calc(var(--size-base) * 3) 0;
+}
+
+header {
+  background: var(--color-contrast);
+  border-bottom: 2px solid color-mix(in lch, var(--color-contrast) 85%, black);
+  margin-bottom: var(--size-base);
+}
+
+header nav ul {
+  list-style: none;
+  margin: 0;
 }
 
 code,

web/src/app/page.module.css

@@ -1,6 +1,17 @@
 .main {
   display: flex;
-  flex-direction: row;
-  width: 100%;
+  flex-direction: column;
   justify-content: space-around;
+  margin: 0 calc(var(--size-base) * 4);
+}
+
+.main section {
+  width: 100%;
+}
+
+@media (min-width: 500px) {
+  .main {
+    width: 500px;
+    margin: 0 auto;
+  }
 }

web/src/app/page.tsx

@@ -10,30 +10,9 @@ export default function Home() {
   const store = useAillyPageStore();
   return (
     <div className={styles.main}>
-      <div
-        style={{
-          position: "fixed",
-          left: 0,
-          bottom: 0,
-        }}
-      >
-        <pre>{`storyItem: ${store.state.storyItem}\nselections: ${JSON.stringify(
-          store.state.selections
-        )}`}</pre>
-      </div>
-      <aside style={{ flex: 1 }} />
-      <section style={{ flex: 2 }}>
-        <Storyboard {...store} />
-      </section>
-      <aside style={{ flex: 0.5 }} />
-      <section style={{ flex: 3 }}>
-        <Editor {...store}/>
-      </section>
-      <aside style={{ flex: 0.5 }} />
-      <section style={{ flex: 2 }}>
-        <Response {...store}/>
-      </section>
-      <aside style={{ flex: 1 }} />
+      <Response {...store} />
+      <Editor {...store} />
+      <Storyboard {...store} />
     </div>
   );
 }

web/src/app/response.module.css

@@ -1,23 +1,41 @@
-.button {
-  cursor: pointer;
-  --color-pct: 100%;
-  --color-button: color-mix(
-    in lch,
-    var(--color-contrast) var(--color-pct),
-    white
-  );
-  border-radius: var(--size-base);
-  padding: var(--size-base) calc(2 * var(--size-base));
-  background: var(--color-button);
-  border: var(--color-button) solid 1.5px;
-  box-shadow: var(--color-button) 1px 2px 5px 2px;
+.response {
+  min-height: 55px;
+  max-height: 235px;
+  overflow-y: scroll;
+  transition: max-height 1s ease-in, min-height 1s ease-in;
+
+  &.generating {
+    max-height: 35px;
+    min-height: 35px;
+  }
+}
+
+.spinner {
+  margin: 25px auto;
+  display: flex;
+  justify-content: center;
 }
 
-.button:hover,
-.button:focus {
-  --color-pct: 95%;
+.spinner:before {
+  content: " ";
+  display: block;
+  width: 25px;
+  height: 25px;
+  padding: 25px;
+  --border: 5px solid var(--color-base);
+  border: var(--border);
+  border-bottom: none;
+  border-radius: 50%;
+  rotate: 0deg;
+  animation: rotation 0.8s infinite;
 }
 
-.button:active {
-  --color-pct: 90%;
+@keyframes rotation {
+  from {
+    rotate: 0deg;
+  }
+
+  to {
+    rotate: 360deg;
+  }
 }

web/src/app/response.tsx

@@ -5,16 +5,17 @@ import { useAillyPageStore } from "./store";
 import styles from "./response.module.css";
 
 export const Response = (store: ReturnType<typeof useAillyPageStore>) => {
-  const { state } = store
+  const { state } = store;
 
   return (
-    <>
-      <div>
+    <section
+      className={`${styles.response} ${state.generating ? "generating" : ""}`}
+    >
+      {state.generating ? (
+        <div className={styles.spinner}></div>
+      ) : (
         <M>{state.response.content}</M>
-      </div>
-      <div>
-        <button className={styles.button}>Generate</button>
-      </div>
-    </>
+      )}
+    </section>
   );
 };

web/src/app/store.ts

@@ -9,6 +9,7 @@ export interface AillyPageState {
   selections: number[][];
   instruction: string;
   response: Response;
+  generating: boolean;
 }
 
 export interface StoryBook {
@@ -39,9 +40,11 @@ export type AillyStoreDispatch = Dispatch<{
 export function makeAillyStore(dispatch: MutableRefObject<AillyStoreDispatch>) {
   const story: StoryBook[] = [ROLES, TONES];
   let storyItem = -1;
+  let nextStoryItem = -1;
   let selections: number[][] = [];
   let instruction = "";
   let response = { content: "" };
+  let generating = true;
 
   const reducers = {
     updateState(state: AillyPageState): AillyPageState {
@@ -51,6 +54,7 @@ export function makeAillyStore(dispatch: MutableRefObject<AillyStoreDispatch>) {
         selections: [...selections.map((opts) => [...opts])],
         storyItem,
         response: { ...response },
+        generating,
       };
       return newState;
     },
@@ -66,12 +70,12 @@ export function makeAillyStore(dispatch: MutableRefObject<AillyStoreDispatch>) {
     },
     prompt(content: string) {
       instruction = content;
-      if (storyItem == -1) storyItem = 0;
+      if (storyItem == -1) nextStoryItem = 0;
       this.updateAndGenerate();
     },
     select(block: number, choice: number) {
       if (selections[block + 1] == undefined) {
-        storyItem = block + 1;
+        nextStoryItem = block + 1;
       }
       const newBlock =
         story[block].select == "multi"
@@ -97,8 +101,23 @@ export function makeAillyStore(dispatch: MutableRefObject<AillyStoreDispatch>) {
           view: {},
         },
       };
-      const genContent = await generateOne(content);
-      response.content = genContent.response ?? "";
+      generating = true;
+      this.update();
+      try {
+        const genContent = await generateOne(content);
+        const error = (genContent.meta?.debug as { error: {} } | undefined)
+          ?.error;
+        if (error) {
+          response.content = JSON.stringify(error);
+        } else {
+          response.content = genContent.response ?? "";
+        }
+      } finally {
+        generating = false;
+      }
+      this.update();
+      await pause(1200);
+      storyItem = nextStoryItem;
       this.update();
     },
   };
@@ -160,3 +179,7 @@ const TONES: StoryBook = {
   ],
   select: "single",
 };
+
+async function pause(ms: number): Promise<void> {
+  return new Promise((r) => setTimeout(r, ms));
+}

web/src/app/storyboard.module.css

@@ -23,6 +23,18 @@
   box-shadow: var(--color-base) 1px 2px 5px 2px;
   border: var(--color-base) solid 1.5px;
   padding: var(--size-base) calc(2 * var(--size-base));
+
+  animation: fadeIn 1s;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 100;
+  }
 }
 
 li:has(.option):not(:last-of-type) {
@@ -31,7 +43,7 @@ li:has(.option):not(:last-of-type) {
 
 .option:hover {
   cursor: pointer;
-  background: color-mix(in lch, var(--color-base) 85%, #fff);
+  background: color-mix(in lch, var(--color-base) 85%, var(--color-background));
 }
 
 .option:has(:checked) {