add hover card to show full prompt

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",

frontend/src/components/history/HistoryDisplay.tsx

@@ -1,7 +1,11 @@
-import { ScrollArea } from "@/components/ui/scroll-area";
+import { History } from "./history_types";
-import { History, HistoryItemType } from "./history_types";
 import toast from "react-hot-toast";
 import classNames from "classnames";
+import {
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent,
+} from "../ui/hover-card";
 
 interface Props {
   history: History;
@@ -10,17 +14,17 @@ interface Props {
   shouldDisableReverts: boolean;
 }
 
-function displayHistoryItemType(itemType: HistoryItemType) {
+// function displayHistoryItemType(itemType: HistoryItemType) {
-  switch (itemType) {
+//   switch (itemType) {
-    case "ai_create":
+//     case "ai_create":
-      return "Create";
+//       return "Create";
-    case "ai_edit":
+//     case "ai_edit":
-      return "Edit";
+//       return "Edit";
-    default:
+//     default:
-      // TODO: Error out since this is exhaustive
+//       // TODO: Error out since this is exhaustive
-      return "Unknown";
+//       return "Unknown";
-  }
+//   }
-}
+// }
 
 export default function HistoryDisplay({
   history,
@@ -31,16 +35,17 @@ 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
+          <li key={index}>
-              key={index}
+            <HoverCard>
+              <HoverCardTrigger
                 className={classNames(
-                "flex items-center space-x-2 justify-between p-2",
+                  "flex items-center justify-between space-x-2 p-2",
                   "border-b cursor-pointer",
                   {
-                  " hover:bg-black hover:text-white": index !== currentVersion,
+                    " hover:bg-black hover:text-white":
+                      index !== currentVersion,
                     "bg-slate-500 text-white": index === currentVersion,
                   }
                 )}
@@ -52,24 +57,28 @@ export default function HistoryDisplay({
                     : revertToVersion(index)
                 }
               >
-              <div className="flex gap-x-1">
+                {" "}
-                <h2 className="text-sm">{displayHistoryItemType(item.type)}</h2>
+                <div className="flex gap-x-1 truncate">
-                {item.parentIndex !== null && item.parentIndex !== index - 1 ? (
+                  <h2 className="text-sm truncate">
+                    {item.type === "ai_edit" ? item.inputs.prompt : "Create"}
+                  </h2>
+                  {/* <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">
-                {item.type === "ai_edit"
-                  ? item.inputs.prompt
-                  : item.inputs.image_url}
-              </h2>
                 <h2 className="text-sm">v{index + 1}</h2>
+              </HoverCardTrigger>
+              <HoverCardContent>
+                {item.type === "ai_edit" ? item.inputs.prompt : "Create"}
+              </HoverCardContent>
+            </HoverCard>
           </li>
         ))}
       </ul>
-      </ScrollArea>
     </div>
   );
 }

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

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"