diff --git a/README.md b/README.md index d0d2360..e4739a4 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,7 @@ See the [Examples](#-examples) section below for more demos. ## 🌟 Recent Updates +- Dec 7 - 🔥 🔥 🔥 View a history of your edits, and branch off them - Nov 30 - Dark mode, output code in Ionic (thanks [@dialmedu](https://github.com/dialmedu)), set OpenAI base URL - Nov 28 - 🔥 🔥 🔥 Customize your stack: React or Bootstrap or TailwindCSS - Nov 23 - Send in a screenshot of the current replicated version (sometimes improves quality of subsequent generations) diff --git a/frontend/package.json b/frontend/package.json index f5154cb..44c8813 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -18,6 +18,7 @@ "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", + "@radix-ui/react-hover-card": "^1.0.7", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-popover": "^1.0.7", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index b31e743..9cca2c9 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -63,7 +63,7 @@ function App() { // App history const [appHistory, setAppHistory] = useState([]); - // Tracks the currently viewed version from app history + // Tracks the currently shown version from app history const [currentVersion, setCurrentVersion] = useState(null); const [shouldIncludeResultImage, setShouldIncludeResultImage] = diff --git a/frontend/src/components/history/HistoryDisplay.tsx b/frontend/src/components/history/HistoryDisplay.tsx index c13de1e..9f4d8fc 100644 --- a/frontend/src/components/history/HistoryDisplay.tsx +++ b/frontend/src/components/history/HistoryDisplay.tsx @@ -1,7 +1,12 @@ -import { ScrollArea } from "@/components/ui/scroll-area"; import { History, HistoryItemType } from "./history_types"; import toast from "react-hot-toast"; import classNames from "classnames"; +import { + HoverCard, + HoverCardTrigger, + HoverCardContent, +} from "../ui/hover-card"; +import { Badge } from "../ui/badge"; interface Props { history: History; @@ -16,9 +21,10 @@ function displayHistoryItemType(itemType: HistoryItemType) { return "Create"; case "ai_edit": return "Edit"; - default: - // TODO: Error out since this is exhaustive - return "Unknown"; + default: { + const exhaustiveCheck: never = itemType; + throw new Error(`Unhandled case: ${exhaustiveCheck}`); + } } } @@ -31,45 +37,53 @@ export default function HistoryDisplay({ return history.length === 0 ? null : (

Versions

- -
    - {history.map((item, index) => ( -
  • + {history.map((item, index) => ( +
  • + + + shouldDisableReverts + ? toast.error( + "Please wait for code generation to complete before viewing an older version." + ) + : revertToVersion(index) } - )} - onClick={() => - shouldDisableReverts - ? toast.error( - "Please wait for code generation to complete before viewing an older version." - ) - : revertToVersion(index) - } - > -
    -

    {displayHistoryItemType(item.type)}

    - {item.parentIndex !== null && item.parentIndex !== index - 1 ? ( -

    - (parent: v{(item.parentIndex || 0) + 1}) + > + {" "} +
    +

    + {item.type === "ai_edit" ? item.inputs.prompt : "Create"}

    - ) : null} -
    -

    - {item.type === "ai_edit" - ? item.inputs.prompt - : item.inputs.image_url} -

    -

    v{index + 1}

    -
    • - ))} -
- + {/*

{displayHistoryItemType(item.type)}

*/} + {item.parentIndex !== null && + item.parentIndex !== index - 1 ? ( +

+ (parent: v{(item.parentIndex || 0) + 1}) +

+ ) : null} +
+

v{index + 1}

+ + +
+ {item.type === "ai_edit" ? item.inputs.prompt : "Create"} +
+ {displayHistoryItemType(item.type)} + + + + ))} + ); } diff --git a/frontend/src/components/ui/hover-card.tsx b/frontend/src/components/ui/hover-card.tsx new file mode 100644 index 0000000..863ff01 --- /dev/null +++ b/frontend/src/components/ui/hover-card.tsx @@ -0,0 +1,27 @@ +import * as React from "react" +import * as HoverCardPrimitive from "@radix-ui/react-hover-card" + +import { cn } from "@/lib/utils" + +const HoverCard = HoverCardPrimitive.Root + +const HoverCardTrigger = HoverCardPrimitive.Trigger + +const HoverCardContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( + +)) +HoverCardContent.displayName = HoverCardPrimitive.Content.displayName + +export { HoverCard, HoverCardTrigger, HoverCardContent } diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 3062080..da1a8e8 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -901,6 +901,22 @@ "@radix-ui/react-primitive" "1.0.3" "@radix-ui/react-use-callback-ref" "1.0.1" +"@radix-ui/react-hover-card@^1.0.7": + version "1.0.7" + resolved "https://registry.yarnpkg.com/@radix-ui/react-hover-card/-/react-hover-card-1.0.7.tgz#684bca2504432566357e7157e087051aa3577948" + integrity sha512-OcUN2FU0YpmajD/qkph3XzMcK/NmSk9hGWnjV68p6QiZMgILugusgQwnLSDs3oFSJYGKf3Y49zgFedhGh04k9A== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/primitive" "1.0.1" + "@radix-ui/react-compose-refs" "1.0.1" + "@radix-ui/react-context" "1.0.1" + "@radix-ui/react-dismissable-layer" "1.0.5" + "@radix-ui/react-popper" "1.1.3" + "@radix-ui/react-portal" "1.0.4" + "@radix-ui/react-presence" "1.0.1" + "@radix-ui/react-primitive" "1.0.3" + "@radix-ui/react-use-controllable-state" "1.0.1" + "@radix-ui/react-icons@^1.3.0": version "1.3.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.0.tgz#c61af8f323d87682c5ca76b856d60c2312dbcb69"