Skip to content

Commit 4562518

Browse files
ctemehmetsunkur
cte
authored and
mehmetsunkur
committed
Use a shadcn dialog for the announcement (RooCodeInc#3604)
1 parent 2e883b7 commit 4562518

File tree

4 files changed

+86
-100
lines changed

4 files changed

+86
-100
lines changed

‎.changeset/nasty-keys-smile.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"roo-cline": patch
3+
---
4+
5+
Update announcement to use a @shadcn/ui dialog

‎scripts/generate-types.mts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ async function main() {
2020

2121
fs.writeFileSync("src/exports/types.ts", types.join("\n\n"))
2222

23-
await $`npx tsup src/exports/interface.ts --dts-only -d out`
23+
await $`npx tsup src/exports/interface.ts -d out`
2424
fs.copyFileSync("out/interface.d.ts", "src/exports/roo-code.d.ts")
2525

2626
await $`npx prettier --write src/exports/types.ts src/exports/roo-code.d.ts`

‎webview-ui/src/components/chat/Announcement.tsx‎

Lines changed: 77 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,94 @@
1-
import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
2-
import { memo } from "react"
3-
import { useAppTranslation } from "@/i18n/TranslationContext"
1+
import { useState, memo } from "react"
42
import { Trans } from "react-i18next"
3+
import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"
4+
5+
import { useAppTranslation } from "@src/i18n/TranslationContext"
6+
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@src/components/ui"
57

68
interface AnnouncementProps {
79
hideAnnouncement: () => void
810
}
9-
/*
10-
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.
11-
*/
12-
const Announcement = ({ hideAnnouncement }: AnnouncementProps) => {
13-
const { t } = useAppTranslation()
1411

15-
const discordLink = (
16-
<VSCodeLink
17-
href="https://discord.gg/roocode"
18-
onClick={(e) => {
19-
e.preventDefault()
20-
window.postMessage(
21-
{ type: "action", action: "openExternal", data: { url: "https://discord.gg/roocode" } },
22-
"*",
23-
)
24-
}}>
25-
Discord
26-
</VSCodeLink>
27-
)
12+
/**
13+
* You must update the `latestAnnouncementId` in ClineProvider for new
14+
* announcements to show to users. This new id will be compared with what's in
15+
* state for the 'last announcement shown', and if it's different then the
16+
* announcement will render. As soon as an announcement is shown, the id will be
17+
* updated in state. This ensures that announcements are not shown more than
18+
* once, even if the user doesn't close it themselves.
19+
*/
2820

29-
const redditLink = (
30-
<VSCodeLink
31-
href="https://reddit.com/r/RooCode"
32-
onClick={(e) => {
33-
e.preventDefault()
34-
window.postMessage(
35-
{ type: "action", action: "openExternal", data: { url: "https://reddit.com/r/RooCode" } },
36-
"*",
37-
)
38-
}}>
39-
Reddit
40-
</VSCodeLink>
41-
)
21+
const Announcement = ({ hideAnnouncement }: AnnouncementProps) => {
22+
const { t } = useAppTranslation()
23+
const [open, setOpen] = useState(true)
4224

4325
return (
44-
<div className="flex flex-col justify-center absolute top-0 bottom-0 left-0 right-0 z-50 p-10 bg-black/50">
45-
<div
46-
style={{
47-
backgroundColor: "var(--vscode-editor-background)",
48-
borderRadius: "3px",
49-
padding: "12px 16px",
50-
margin: "5px 15px 5px 15px",
51-
position: "relative",
52-
flexShrink: 0,
53-
}}>
54-
<VSCodeButton
55-
appearance="icon"
56-
onClick={hideAnnouncement}
57-
title={t("chat:announcement.hideButton")}
58-
style={{ position: "absolute", top: "8px", right: "8px" }}>
59-
<span className="codicon codicon-close"></span>
60-
</VSCodeButton>
61-
<h2 style={{ margin: "0 0 8px" }}>{t("chat:announcement.title")}</h2>
62-
63-
<p style={{ margin: "5px 0px" }}>{t("chat:announcement.description")}</p>
64-
65-
<h3 style={{ margin: "12px 0 5px", fontSize: "14px" }}>{t("chat:announcement.whatsNew")}</h3>
66-
<ul style={{ margin: "5px 0" }}>
67-
<li>
68-
•{" "}
69-
<Trans
70-
i18nKey="chat:announcement.feature1"
71-
components={{
72-
bold: <b />,
73-
code: <code />,
74-
}}
75-
/>
76-
</li>
77-
<li>
78-
•{" "}
79-
<Trans
80-
i18nKey="chat:announcement.feature2"
81-
components={{
82-
bold: <b />,
83-
code: <code />,
84-
}}
85-
/>
86-
</li>
87-
<li>
88-
•{" "}
89-
<Trans
90-
i18nKey="chat:announcement.feature3"
91-
components={{
92-
bold: <b />,
93-
code: <code />,
94-
}}
95-
/>
96-
</li>
97-
</ul>
26+
<Dialog
27+
open={open}
28+
onOpenChange={(open) => {
29+
setOpen(open)
9830

99-
<p style={{ margin: "10px 0px 0px" }}>
31+
if (!open) {
32+
hideAnnouncement()
33+
}
34+
}}>
35+
<DialogContent className="max-w-96">
36+
<DialogHeader>
37+
<DialogTitle>{t("chat:announcement.title")}</DialogTitle>
38+
<DialogDescription>{t("chat:announcement.description")}</DialogDescription>
39+
</DialogHeader>
40+
<div>
41+
<h3>{t("chat:announcement.whatsNew")}</h3>
42+
<ul className="space-y-2">
43+
<li>
44+
•{" "}
45+
<Trans i18nKey="chat:announcement.feature1" components={{ bold: <b />, code: <code /> }} />
46+
</li>
47+
<li>
48+
•{" "}
49+
<Trans i18nKey="chat:announcement.feature2" components={{ bold: <b />, code: <code /> }} />
50+
</li>
51+
<li>
52+
•{" "}
53+
<Trans i18nKey="chat:announcement.feature3" components={{ bold: <b />, code: <code /> }} />
54+
</li>
55+
</ul>
10056
<Trans
10157
i18nKey="chat:announcement.detailsDiscussLinks"
102-
components={{
103-
discordLink: discordLink,
104-
redditLink: redditLink,
105-
}}
58+
components={{ discordLink: <DiscordLink />, redditLink: <RedditLink /> }}
10659
/>
107-
</p>
108-
</div>
109-
</div>
60+
</div>
61+
</DialogContent>
62+
</Dialog>
11063
)
11164
}
11265

66+
const DiscordLink = () => (
67+
<VSCodeLink
68+
href="https://discord.gg/roocode"
69+
onClick={(e) => {
70+
e.preventDefault()
71+
window.postMessage(
72+
{ type: "action", action: "openExternal", data: { url: "https://discord.gg/roocode" } },
73+
"*",
74+
)
75+
}}>
76+
Discord
77+
</VSCodeLink>
78+
)
79+
80+
const RedditLink = () => (
81+
<VSCodeLink
82+
href="https://reddit.com/r/RooCode"
83+
onClick={(e) => {
84+
e.preventDefault()
85+
window.postMessage(
86+
{ type: "action", action: "openExternal", data: { url: "https://reddit.com/r/RooCode" } },
87+
"*",
88+
)
89+
}}>
90+
Reddit
91+
</VSCodeLink>
92+
)
93+
11394
export default memo(Announcement)

‎webview-ui/src/components/ui/dialog.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ function DialogContent({ className, children, ...props }: React.ComponentProps<t
4040
<DialogPrimitive.Content
4141
data-slot="dialog-content"
4242
className={cn(
43-
"bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
43+
"bg-vscode-editor-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
4444
className,
4545
)}
4646
{...props}>
@@ -78,7 +78,7 @@ function DialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog
7878
return (
7979
<DialogPrimitive.Title
8080
data-slot="dialog-title"
81-
className={cn("text-lg leading-none font-semibold", className)}
81+
className={cn("text-lg leading-none font-semibold my-0", className)}
8282
{...props}
8383
/>
8484
)
@@ -88,7 +88,7 @@ function DialogDescription({ className, ...props }: React.ComponentProps<typeof
8888
return (
8989
<DialogPrimitive.Description
9090
data-slot="dialog-description"
91-
className={cn("text-muted-foreground text-sm", className)}
91+
className={cn("text-muted-foreground text-sm my-0", className)}
9292
{...props}
9393
/>
9494
)

0 commit comments

Comments
 (0)