From b3b478d6d1739f83ea01452e80105faa8a7eac43 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Thu, 7 Dec 2023 13:21:10 -0500 Subject: [PATCH] add hover card to show full prompt --- frontend/package.json | 1 + .../src/components/history/HistoryDisplay.tsx | 109 ++++++++++-------- frontend/src/components/ui/hover-card.tsx | 27 +++++ frontend/yarn.lock | 16 +++ 4 files changed, 103 insertions(+), 50 deletions(-) create mode 100644 frontend/src/components/ui/hover-card.tsx 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/components/history/HistoryDisplay.tsx b/frontend/src/components/history/HistoryDisplay.tsx index c13de1e..8f0a06b 100644 --- a/frontend/src/components/history/HistoryDisplay.tsx +++ b/frontend/src/components/history/HistoryDisplay.tsx @@ -1,7 +1,11 @@ -import { ScrollArea } from "@/components/ui/scroll-area"; -import { History, HistoryItemType } from "./history_types"; +import { History } 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) { - switch (itemType) { - case "ai_create": - return "Create"; - case "ai_edit": - return "Edit"; - default: - // TODO: Error out since this is exhaustive - return "Unknown"; - } -} +// function displayHistoryItemType(itemType: HistoryItemType) { +// switch (itemType) { +// case "ai_create": +// return "Create"; +// case "ai_edit": +// return "Edit"; +// default: +// // TODO: Error out since this is exhaustive +// return "Unknown"; +// } +// } export default function HistoryDisplay({ history, @@ -31,45 +35,50 @@ 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"} + + + + ))} + ); } 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"