diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index a5e3581..802e960 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -126,7 +126,10 @@ function App() {
setAppState(AppState.CODE_READY);
};
- function doGenerateCode(params: CodeGenerationParams) {
+ function doGenerateCode(
+ params: CodeGenerationParams,
+ parentVersion?: number
+ ) {
setExecutionConsole([]);
setAppState(AppState.CODING);
@@ -143,6 +146,7 @@ function App() {
setAppHistory([
{
type: "ai_create",
+ parent: null,
code,
inputs: { image_url: referenceImages[0] },
},
@@ -150,10 +154,20 @@ function App() {
setCurrentVersion(0);
} else {
setAppHistory((prev) => {
+ // Validate parent version
+ if (!parentVersion) {
+ toast.error(
+ "No parent version set. Contact support or open a Github issue."
+ );
+ return prev;
+ }
+
const newHistory: History = [
...prev,
{
type: "ai_edit",
+ // TODO: It should never be null
+ parent: parentVersion,
code,
inputs: {
prompt: updateInstruction,
@@ -202,18 +216,24 @@ function App() {
if (shouldIncludeResultImage) {
const resultImage = await takeScreenshot();
- doGenerateCode({
- generationType: "update",
- image: referenceImages[0],
- resultImage: resultImage,
- history: updatedHistory,
- });
+ doGenerateCode(
+ {
+ generationType: "update",
+ image: referenceImages[0],
+ resultImage: resultImage,
+ history: updatedHistory,
+ },
+ currentVersion
+ );
} else {
- doGenerateCode({
- generationType: "update",
- image: referenceImages[0],
- history: updatedHistory,
- });
+ doGenerateCode(
+ {
+ generationType: "update",
+ image: referenceImages[0],
+ history: updatedHistory,
+ },
+ currentVersion
+ );
}
setGeneratedCode("");
diff --git a/frontend/src/components/history/HistoryDisplay.tsx b/frontend/src/components/history/HistoryDisplay.tsx
index 43b4614..f28a300 100644
--- a/frontend/src/components/history/HistoryDisplay.tsx
+++ b/frontend/src/components/history/HistoryDisplay.tsx
@@ -52,7 +52,12 @@ export default function HistoryDisplay({
: revertToVersion(index)
}
>
- {displayHistoryItemType(item.type)}
+
+
{displayHistoryItemType(item.type)}
+ {item.parent && item.parent !== index - 1 && (
+ (parent: v{item.parent + 1})
+ )}
+
v{index + 1}
))}
diff --git a/frontend/src/components/history/utils.test.ts b/frontend/src/components/history/utils.test.ts
index 3eb5039..2f0a34e 100644
--- a/frontend/src/components/history/utils.test.ts
+++ b/frontend/src/components/history/utils.test.ts
@@ -4,6 +4,7 @@ import { extractHistoryTree } from "./utils";
const data = [
{
type: "ai_create" as const,
+ parent: null,
code: "1. create",
inputs: {
image_url: "",
@@ -11,6 +12,7 @@ const data = [
},
{
type: "ai_edit" as const,
+ parent: 0,
code: "2. edit with better icons",
inputs: {
prompt: "use better icons",
@@ -18,6 +20,7 @@ const data = [
},
{
type: "ai_edit" as const,
+ parent: 1,
code: "3. edit with better icons and red text",
inputs: {
prompt: "make text red",
diff --git a/frontend/src/history_types.ts b/frontend/src/history_types.ts
index ab19825..a832329 100644
--- a/frontend/src/history_types.ts
+++ b/frontend/src/history_types.ts
@@ -3,11 +3,13 @@ export type HistoryItemType = "ai_create" | "ai_edit";
export type HistoryItem =
| {
type: "ai_create";
+ parent: null | number;
code: string;
inputs: AiCreateInputs;
}
| {
type: "ai_edit";
+ parent: null | number;
code: string;
inputs: AiEditInputs;
};