also use appHistory

frontend/src/App.tsx

@@ -48,16 +48,21 @@ function App() {
   const [appState, setAppState] = useState<AppState>(AppState.INITIAL);
 
   const {
+    // Inputs
     inputMode,
     setInputMode,
     isImportedFromCode,
     setIsImportedFromCode,
     referenceImages,
     setReferenceImages,
+
+    // Outputs
     generatedCode,
     setGeneratedCode,
     currentVersion,
     setCurrentVersion,
+    appHistory,
+    setAppHistory,
   } = useProjectStore();
 
   const [executionConsole, setExecutionConsole] = useState<string[]>([]);
@@ -88,9 +93,6 @@ function App() {
   const selectedCodeGenerationModel =
     settings.codeGenerationModel || CodeGenerationModel.GPT_4_VISION;
 
-  // App history
-  const [appHistory, setAppHistory] = useState<History>([]);
-
   const [shouldIncludeResultImage, setShouldIncludeResultImage] =
     useState<boolean>(false);
 

frontend/src/store/project-store.ts

@@ -22,8 +22,10 @@ interface ProjectStore {
   currentVersion: number | null;
   setCurrentVersion: (version: number | null) => void;
 
-  appHistory: History[];
-  setAppHistory: (history: History[]) => void;
+  appHistory: History;
+  setAppHistory: (
+    updater: History | ((currentHistory: History) => History)
+  ) => void;
 }
 
 export const useProjectStore = create<ProjectStore>((set) => ({
@@ -45,5 +47,9 @@ export const useProjectStore = create<ProjectStore>((set) => ({
   currentVersion: null,
   setCurrentVersion: (version) => set({ currentVersion: version }),
   appHistory: [],
-  setAppHistory: (history) => set({ appHistory: history }),
+  setAppHistory: (updater) =>
+    set((state) => ({
+      appHistory:
+        typeof updater === "function" ? updater(state.appHistory) : updater,
+    })),
 }));