Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Abi Raja 2023-12-06 22:24:25 -05:00
parent eff532bcf5
commit f5ddb779b4
4 changed files with 24 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/App.tsx
View File

@ -151,6 +151,7 @@ function App() {
} else {
setAppHistory((prev) => {
const newHistory: History = [
...prev,
{
type: "ai_edit",
code,
@ -158,9 +159,8 @@ function App() {
prompt: updateInstruction,
},
},
...prev,
];
setCurrentVersion(0);
setCurrentVersion(newHistory.length - 1);
return newHistory;
});
}

4
frontend/src/components/history/HistoryDisplay.tsx
View File

@ -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>

16
frontend/src/components/history/utils.test.ts
View File

@ -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,16 +17,16 @@ 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>",
@ -34,5 +34,5 @@ test("should only include history from this point onward", () => {
"<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>"]);
});

24
frontend/src/components/history/utils.ts
View File

@ -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 extractedHistory = history.slice(0, version + 1);
const obj: string[] = [];
// 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;
}