improve history UX

frontend/package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",

frontend/src/components/history/HistoryDisplay.tsx

@@ -1,13 +1,16 @@
 import { History } 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";
 import { renderHistory } from "./utils";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../ui/collapsible";
+import { Button } from "../ui/button";
+import { CaretSortIcon } from "@radix-ui/react-icons";
 
 interface Props {
   history: History;
@@ -30,16 +33,19 @@ export default function HistoryDisplay({
       <ul className="space-y-0 flex flex-col-reverse">
         {renderedHistory.map((item, index) => (
           <li key={index}>
-            <HoverCard>
-              <HoverCardTrigger
+            <Collapsible>
+              <div
                 className={classNames(
-                  "flex items-center justify-between space-x-2 p-2",
+                  "flex items-center justify-between space-x-2 w-full pr-2",
                   "border-b cursor-pointer",
                   {
                     " hover:bg-black hover:text-white": !item.isActive,
                     "bg-slate-500 text-white": item.isActive,
                   }
                 )}
+              >
+                <div
+                  className="flex justify-between truncate flex-1 p-2"
                   onClick={() =>
                     shouldDisableReverts
                       ? toast.error(
@@ -48,20 +54,30 @@ export default function HistoryDisplay({
                       : revertToVersion(index)
                   }
                 >
-                {" "}
                   <div className="flex gap-x-1 truncate">
                     <h2 className="text-sm truncate">{item.summary}</h2>
                     {item.parentVersion !== null && (
-                    <h2 className="text-sm">(parent: {item.parentVersion})</h2>
+                      <h2 className="text-sm">
+                        (parent: {item.parentVersion})
+                      </h2>
                     )}
                   </div>
                   <h2 className="text-sm">v{index + 1}</h2>
-              </HoverCardTrigger>
-              <HoverCardContent>
-                <div>{item.summary}</div>
+                </div>
+                <CollapsibleTrigger asChild>
+                  <Button variant="ghost" size="sm" className="h-6">
+                    <CaretSortIcon className="h-4 w-4" />
+                    <span className="sr-only">Toggle</span>
+                  </Button>
+                </CollapsibleTrigger>
+              </div>
+              <CollapsibleContent className="w-full bg-slate-300 p-2">
+                <div>Full prompt: {item.summary}</div>
+                <div className="flex justify-end">
                   <Badge>{item.type}</Badge>
-              </HoverCardContent>
-            </HoverCard>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
           </li>
         ))}
       </ul>

frontend/src/components/ui/collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

frontend/yarn.lock

@@ -804,7 +804,7 @@
     "@radix-ui/react-use-previous" "1.0.1"
     "@radix-ui/react-use-size" "1.0.1"
 
-"@radix-ui/react-collapsible@1.0.3":
+"@radix-ui/react-collapsible@1.0.3", "@radix-ui/react-collapsible@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz#df0e22e7a025439f13f62d4e4a9e92c4a0df5b81"
   integrity sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==