From 35fd4e68cdc7a7154c7cda28b28a562ef5013022 Mon Sep 17 00:00:00 2001 From: Chris Estreich Date: Wed, 14 May 2025 09:00:55 -0700 Subject: [PATCH] Use a shadcn dialog for the announcement (#3604) --- .changeset/nasty-keys-smile.md | 5 + scripts/generate-types.mts | 2 +- .../src/components/chat/Announcement.tsx | 173 ++++++++---------- webview-ui/src/components/ui/dialog.tsx | 6 +- 4 files changed, 86 insertions(+), 100 deletions(-) create mode 100644 .changeset/nasty-keys-smile.md diff --git a/.changeset/nasty-keys-smile.md b/.changeset/nasty-keys-smile.md new file mode 100644 index 0000000000..013e26c951 --- /dev/null +++ b/.changeset/nasty-keys-smile.md @@ -0,0 +1,5 @@ +--- +"roo-cline": patch +--- + +Update announcement to use a @shadcn/ui dialog diff --git a/scripts/generate-types.mts b/scripts/generate-types.mts index 9e54ee475d..789d098b90 100644 --- a/scripts/generate-types.mts +++ b/scripts/generate-types.mts @@ -20,7 +20,7 @@ async function main() { fs.writeFileSync("src/exports/types.ts", types.join("\n\n")) - await $`npx tsup src/exports/interface.ts --dts-only -d out` + await $`npx tsup src/exports/interface.ts -d out` fs.copyFileSync("out/interface.d.ts", "src/exports/roo-code.d.ts") await $`npx prettier --write src/exports/types.ts src/exports/roo-code.d.ts` diff --git a/webview-ui/src/components/chat/Announcement.tsx b/webview-ui/src/components/chat/Announcement.tsx index b3a79cde7c..0d93d9da0c 100644 --- a/webview-ui/src/components/chat/Announcement.tsx +++ b/webview-ui/src/components/chat/Announcement.tsx @@ -1,113 +1,94 @@ -import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react" -import { memo } from "react" -import { useAppTranslation } from "@/i18n/TranslationContext" +import { useState, memo } from "react" import { Trans } from "react-i18next" +import { VSCodeLink } from "@vscode/webview-ui-toolkit/react" + +import { useAppTranslation } from "@src/i18n/TranslationContext" +import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@src/components/ui" interface AnnouncementProps { hideAnnouncement: () => void } -/* -You must update the latestAnnouncementId in ClineProvider for new announcements to show to users. This new id will be compared with whats in state for the 'last announcement shown', and if it's different then the announcement will render. As soon as an announcement is shown, the id will be updated in state. This ensures that announcements are not shown more than once, even if the user doesn't close it themselves. -*/ + +/** + * You must update the `latestAnnouncementId` in ClineProvider for new + * announcements to show to users. This new id will be compared with what's in + * state for the 'last announcement shown', and if it's different then the + * announcement will render. As soon as an announcement is shown, the id will be + * updated in state. This ensures that announcements are not shown more than + * once, even if the user doesn't close it themselves. + */ + const Announcement = ({ hideAnnouncement }: AnnouncementProps) => { const { t } = useAppTranslation() - - const discordLink = ( - { - e.preventDefault() - window.postMessage( - { type: "action", action: "openExternal", data: { url: "https://discord.gg/roocode" } }, - "*", - ) - }}> - Discord - - ) - - const redditLink = ( - { - e.preventDefault() - window.postMessage( - { type: "action", action: "openExternal", data: { url: "https://reddit.com/r/RooCode" } }, - "*", - ) - }}> - Reddit - - ) + const [open, setOpen] = useState(true) return ( -
-
- - - -

{t("chat:announcement.title")}

+ { + setOpen(open) -

{t("chat:announcement.description")}

- -

{t("chat:announcement.whatsNew")}

-
    -
  • - •{" "} - , - code: , - }} - /> -
    • -
  • - •{" "} - , - code: , - }} - /> -
    • -
  • - •{" "} - , - code: , - }} - /> -
    • -
- -

+ if (!open) { + hideAnnouncement() + } + }}> + + + {t("chat:announcement.title")} + {t("chat:announcement.description")} + +

+

{t("chat:announcement.whatsNew")}

+
    +
  • + •{" "} + , code: }} /> +
    • +
  • + •{" "} + , code: }} /> +
    • +
  • + •{" "} + , code: }} /> +
    • +
, redditLink: }} /> -

-
-
+
+ + ) } +const DiscordLink = () => ( + { + e.preventDefault() + window.postMessage( + { type: "action", action: "openExternal", data: { url: "https://discord.gg/roocode" } }, + "*", + ) + }}> + Discord + +) + +const RedditLink = () => ( + { + e.preventDefault() + window.postMessage( + { type: "action", action: "openExternal", data: { url: "https://reddit.com/r/RooCode" } }, + "*", + ) + }}> + Reddit + +) + export default memo(Announcement) diff --git a/webview-ui/src/components/ui/dialog.tsx b/webview-ui/src/components/ui/dialog.tsx index ed3160f692..ae394f95ce 100644 --- a/webview-ui/src/components/ui/dialog.tsx +++ b/webview-ui/src/components/ui/dialog.tsx @@ -40,7 +40,7 @@ function DialogContent({ className, children, ...props }: React.ComponentProps @@ -78,7 +78,7 @@ function DialogTitle({ className, ...props }: React.ComponentProps ) @@ -88,7 +88,7 @@ function DialogDescription({ className, ...props }: React.ComponentProps )