make history forward chronology and have non-changing indices to refer to items

abi · abi · commit f5ddb779b46c · 2023-12-06T22:24:25.000-05:00
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -151,16 +151,16 @@ function App() {
         } else {
           setAppHistory((prev) => {
             const newHistory: History = [
+              ...prev,
               {
                 type: "ai_edit",
                 code,
                 inputs: {
                   prompt: updateInstruction,
                 },
               },
-              ...prev,
             ];
-            setCurrentVersion(0);
+            setCurrentVersion(newHistory.length - 1);
             return newHistory;
           });
         }
diff --git a/frontend/src/components/history/HistoryDisplay.tsx b/frontend/src/components/history/HistoryDisplay.tsx
@@ -32,7 +32,7 @@ export default function HistoryDisplay({
     <div className="flex flex-col h-screen">
       <h1 className="font-bold mb-2">History</h1>
       <ScrollArea className="flex-1 overflow-y-auto">
-        <ul className="space-y-0">
+        <ul className="space-y-0 flex flex-col-reverse">
           {history.map((item, index) => (
             <li
               key={index}
@@ -53,7 +53,7 @@ export default function HistoryDisplay({
               }
             >
               <h2 className="text-sm">{displayHistoryItemType(item.type)}</h2>
-              <h2 className="text-sm">v{history.length - index}</h2>
+              <h2 className="text-sm">v{index + 1}</h2>
             </li>
           ))}
         </ul>
diff --git a/frontend/src/components/history/utils.test.ts b/frontend/src/components/history/utils.test.ts
@@ -3,10 +3,10 @@ import { extractHistoryTree } from "./utils";
 
 const data = [
   {
-    type: "ai_edit" as const,
-    code: "<html>3. edit with better icons and red text</html>",
+    type: "ai_create" as const,
+    code: "<html>1. create</html>",
     inputs: {
-      prompt: "make text red",
+      image_url: "",
     },
   },
   {
@@ -17,22 +17,22 @@ const data = [
     },
   },
   {
-    type: "ai_create" as const,
-    code: "<html>1. create</html>",
+    type: "ai_edit" as const,
+    code: "<html>3. edit with better icons and red text</html>",
     inputs: {
-      image_url: "",
+      prompt: "make text red",
     },
   },
 ];
 
 test("should only include history from this point onward", () => {
-  expect(extractHistoryTree(data, 0)).toEqual([
+  expect(extractHistoryTree(data, 2)).toEqual([
     "<html>1. create</html>",
     "use better icons",
     "<html>2. edit with better icons</html>",
     "make text red",
     "<html>3. edit with better icons and red text</html>",
   ]);
 
-  expect(extractHistoryTree(data, 2)).toEqual(["<html>1. create</html>"]);
+  expect(extractHistoryTree(data, 0)).toEqual(["<html>1. create</html>"]);
 });
diff --git a/frontend/src/components/history/utils.ts b/frontend/src/components/history/utils.ts
@@ -4,21 +4,21 @@ export function extractHistoryTree(
   history: History,
   version: number
 ): string[] {
-  // History is in reverse chronological order
-
   // Get all history items up to the current version
-  const extractedHistory = history.slice(version);
-
-  const obj: string[] = [];
+  const extractedHistory = history.slice(0, version + 1);
 
-  // Reverse the history so that it is in chronological order for the server
-  extractedHistory.reverse().forEach((item) => {
-    // Don't include the image for ai_create since the server gets it passed and will include it directly
-    if (item.type !== "ai_create") {
-      obj.push(item.inputs.prompt);
+  // Convert the history into a flat array of strings that the backend expects
+  const flatHistory: string[] = [];
+  extractedHistory.forEach((item) => {
+    if (item.type === "ai_create") {
+      // Don't include the image for ai_create since the server
+      // gets it passed and will include it directly
+      flatHistory.push(item.code);
+    } else {
+      flatHistory.push(item.inputs.prompt);
+      flatHistory.push(item.code);
     }
-    obj.push(item.code);
   });
 
-  return obj;
+  return flatHistory;
 }
