Merge branch 'main' into hosted
This commit is contained in:
Abi Raja
commit
5a114866f2
@ -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)
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -63,7 +63,7 @@ function App() {
|
||||
|
||||
// App history
|
||||
const [appHistory, setAppHistory] = useState<History>([]);
|
||||
// Tracks the currently viewed version from app history
|
||||
// Tracks the currently shown version from app history
|
||||
const [currentVersion, setCurrentVersion] = useState<number | null>(null);
|
||||
|
||||
const [shouldIncludeResultImage, setShouldIncludeResultImage] =
|
||||
|
||||
@ -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 : (
|
||||
<div className="flex flex-col h-screen">
|
||||
<h1 className="font-bold mb-2">Versions</h1>
|
||||
<ScrollArea className="flex-1 overflow-y-auto">
|
||||
<ul className="space-y-0 flex flex-col-reverse">
|
||||
{history.map((item, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={classNames(
|
||||
"flex items-center space-x-2 justify-between p-2",
|
||||
"border-b cursor-pointer",
|
||||
{
|
||||
" hover:bg-black hover:text-white": index !== currentVersion,
|
||||
"bg-slate-500 text-white": index === currentVersion,
|
||||
<ul className="space-y-0 flex flex-col-reverse">
|
||||
{history.map((item, index) => (
|
||||
<li key={index}>
|
||||
<HoverCard>
|
||||
<HoverCardTrigger
|
||||
className={classNames(
|
||||
"flex items-center justify-between space-x-2 p-2",
|
||||
"border-b cursor-pointer",
|
||||
{
|
||||
" hover:bg-black hover:text-white":
|
||||
index !== currentVersion,
|
||||
"bg-slate-500 text-white": index === currentVersion,
|
||||
}
|
||||
)}
|
||||
onClick={() =>
|
||||
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)
|
||||
}
|
||||
>
|
||||
<div className="flex gap-x-1">
|
||||
<h2 className="text-sm">{displayHistoryItemType(item.type)}</h2>
|
||||
{item.parentIndex !== null && item.parentIndex !== index - 1 ? (
|
||||
<h2 className="text-sm">
|
||||
(parent: v{(item.parentIndex || 0) + 1})
|
||||
>
|
||||
{" "}
|
||||
<div className="flex gap-x-1 truncate">
|
||||
<h2 className="text-sm truncate">
|
||||
{item.type === "ai_edit" ? item.inputs.prompt : "Create"}
|
||||
</h2>
|
||||
) : null}
|
||||
</div>
|
||||
<h2 className="text-sm">
|
||||
{item.type === "ai_edit"
|
||||
? item.inputs.prompt
|
||||
: item.inputs.image_url}
|
||||
</h2>
|
||||
<h2 className="text-sm">v{index + 1}</h2>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</ScrollArea>
|
||||
{/* <h2 className="text-sm">{displayHistoryItemType(item.type)}</h2> */}
|
||||
{item.parentIndex !== null &&
|
||||
item.parentIndex !== index - 1 ? (
|
||||
<h2 className="text-sm">
|
||||
(parent: v{(item.parentIndex || 0) + 1})
|
||||
</h2>
|
||||
) : null}
|
||||
</div>
|
||||
<h2 className="text-sm">v{index + 1}</h2>
|
||||
</HoverCardTrigger>
|
||||
<HoverCardContent>
|
||||
<div>
|
||||
{item.type === "ai_edit" ? item.inputs.prompt : "Create"}
|
||||
</div>
|
||||
<Badge>{displayHistoryItemType(item.type)}</Badge>
|
||||
</HoverCardContent>
|
||||
</HoverCard>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
27
frontend/src/components/ui/hover-card.tsx
Normal file
27
frontend/src/components/ui/hover-card.tsx
Normal file
@ -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<typeof HoverCardPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
|
||||
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
|
||||
<HoverCardPrimitive.Content
|
||||
ref={ref}
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
|
||||
|
||||
export { HoverCard, HoverCardTrigger, HoverCardContent }
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user