Add announcement for Sonic model (#7244)

Author: mrubens

src/core/webview/ClineProvider.ts

@@ -120,7 +120,7 @@ export class ClineProvider
 
 	public isViewLaunched = false
 	public settingsImportedAt?: number
-	public readonly latestAnnouncementId = "jul-29-2025-3-25-0" // Update for v3.25.0 announcement
+	public readonly latestAnnouncementId = "aug-20-2025-stealth-model" // Update for stealth model announcement
 	public readonly providerSettingsManager: ProviderSettingsManager
 	public readonly customModesManager: CustomModesManager
 

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

@@ -3,9 +3,11 @@ import { Trans } from "react-i18next"
 import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 
 import { Package } from "@roo/package"
-
 import { useAppTranslation } from "@src/i18n/TranslationContext"
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@src/components/ui"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
+import { vscode } from "@src/utils/vscode"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@src/components/ui"
+import { Button } from "@src/components/ui"
 
 interface AnnouncementProps {
 	hideAnnouncement: () => void
@@ -23,6 +25,7 @@ interface AnnouncementProps {
 const Announcement = ({ hideAnnouncement }: AnnouncementProps) => {
 	const { t } = useAppTranslation()
 	const [open, setOpen] = useState(true)
+	const { cloudIsAuthenticated } = useExtensionState()
 
 	return (
 		<Dialog
@@ -37,98 +40,64 @@ const Announcement = ({ hideAnnouncement }: AnnouncementProps) => {
 			<DialogContent className="max-w-96">
 				<DialogHeader>
 					<DialogTitle>{t("chat:announcement.title", { version: Package.version })}</DialogTitle>
-					<DialogDescription>
-						{t("chat:announcement.description", { version: Package.version })}
-					</DialogDescription>
 				</DialogHeader>
 				<div>
-					<h3>{t("chat:announcement.whatsNew")}</h3>
 					<ul className="space-y-2">
 						<li>
 							•{" "}
 							<Trans
-								i18nKey="chat:announcement.feature1"
-								components={{
-									bold: <b />,
-									code: <code />,
-									settingsLink: (
-										<VSCodeLink
-											href="#"
-											onClick={(e) => {
-												e.preventDefault()
-												setOpen(false)
-												hideAnnouncement()
-												window.postMessage(
-													{
-														type: "action",
-														action: "settingsButtonClicked",
-														values: { section: "codebaseIndexing" },
-													},
-													"*",
-												)
-											}}
-										/>
-									),
-								}}
-							/>
-						</li>
-						<li>
-							•{" "}
-							<Trans
-								i18nKey="chat:announcement.feature2"
-								components={{
-									bold: <b />,
-									code: <code />,
-								}}
-							/>
-						</li>
-						<li>
-							•{" "}
-							<Trans
-								i18nKey="chat:announcement.feature3"
+								i18nKey="chat:announcement.stealthModel.feature"
 								components={{
 									bold: <b />,
-									code: <code />,
 								}}
 							/>
 						</li>
 					</ul>
-					<Trans
-						i18nKey="chat:announcement.detailsDiscussLinks"
-						components={{ discordLink: <DiscordLink />, redditLink: <RedditLink /> }}
-					/>
+
+					<p className="text-xs text-muted-foreground mt-2">{t("chat:announcement.stealthModel.note")}</p>
+
+					<div className="mt-4">
+						{!cloudIsAuthenticated ? (
+							<Button
+								onClick={() => {
+									vscode.postMessage({ type: "rooCloudSignIn" })
+								}}
+								className="w-full">
+								{t("chat:announcement.stealthModel.connectButton")}
+							</Button>
+						) : (
+							<div className="text-sm w-full">
+								<Trans
+									i18nKey="chat:announcement.stealthModel.selectModel"
+									components={{
+										code: <code className="px-1 py-0.5 bg-gray-100 dark:bg-gray-800 rounded" />,
+										settingsLink: (
+											<VSCodeLink
+												href="#"
+												onClick={(e) => {
+													e.preventDefault()
+													setOpen(false)
+													hideAnnouncement()
+													window.postMessage(
+														{
+															type: "action",
+															action: "settingsButtonClicked",
+															values: { section: "provider" },
+														},
+														"*",
+													)
+												}}
+											/>
+										),
+									}}
+								/>
+							</div>
+						)}
+					</div>
 				</div>
 			</DialogContent>
 		</Dialog>
 	)
 }
 
-const DiscordLink = () => (
-	<VSCodeLink
-		href="https://discord.gg/roocode"
-		onClick={(e) => {
-			e.preventDefault()
-			window.postMessage(
-				{ type: "action", action: "openExternal", data: { url: "https://discord.gg/roocode" } },
-				"*",
-			)
-		}}>
-		Discord
-	</VSCodeLink>
-)
-
-const RedditLink = () => (
-	<VSCodeLink
-		href="https://reddit.com/r/RooCode"
-		onClick={(e) => {
-			e.preventDefault()
-			window.postMessage(
-				{ type: "action", action: "openExternal", data: { url: "https://reddit.com/r/RooCode" } },
-				"*",
-			)
-		}}>
-		Reddit
-	</VSCodeLink>
-)
-
 export default memo(Announcement)

webview-ui/src/components/chat/__tests__/Announcement.spec.tsx

@@ -11,37 +11,79 @@ vi.mock("@src/components/ui", () => ({
 	DialogDescription: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 	DialogHeader: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 	DialogTitle: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+	DialogFooter: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+	Button: ({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) => (
+		<button onClick={onClick}>{children}</button>
+	),
 }))
 
-// Mock the useAppTranslation hook
+// Mock the useAppTranslation hook and Trans component
 vi.mock("@src/i18n/TranslationContext", () => ({
 	useAppTranslation: () => ({
 		t: (key: string, options?: { version: string }) => {
 			if (key === "chat:announcement.title") {
 				return `🎉 Roo Code ${options?.version} Released`
 			}
-			if (key === "chat:announcement.description") {
-				return `Roo Code ${options?.version} brings powerful new features and improvements based on your feedback.`
+			if (key === "chat:announcement.stealthModel.feature") {
+				return "Stealth reasoning model with advanced capabilities"
+			}
+			if (key === "chat:announcement.stealthModel.note") {
+				return "Note: This is an experimental feature"
+			}
+			if (key === "chat:announcement.stealthModel.connectButton") {
+				return "Connect to Roo Code Cloud"
 			}
 			// Return key for other translations not relevant to this test
 			return key
 		},
 	}),
 }))
 
+// Mock react-i18next Trans component
+vi.mock("react-i18next", () => ({
+	Trans: ({ i18nKey, children }: { i18nKey?: string; children: React.ReactNode }) => {
+		if (i18nKey === "chat:announcement.stealthModel.feature") {
+			return <>Stealth reasoning model with advanced capabilities</>
+		}
+		if (i18nKey === "chat:announcement.stealthModel.selectModel") {
+			return <>Please select the roo/sonic model in settings</>
+		}
+		return <>{children}</>
+	},
+}))
+
+// Mock VSCodeLink
+vi.mock("@vscode/webview-ui-toolkit/react", () => ({
+	VSCodeLink: ({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) => (
+		<a onClick={onClick}>{children}</a>
+	),
+}))
+
+// Mock the useExtensionState hook
+vi.mock("@src/context/ExtensionStateContext", () => ({
+	useExtensionState: () => ({
+		apiConfiguration: null,
+		cloudIsAuthenticated: false,
+	}),
+}))
+
 describe("Announcement", () => {
 	const mockHideAnnouncement = vi.fn()
 	const expectedVersion = Package.version
 
 	it("renders the announcement with the version number from package.json", () => {
 		render(<Announcement hideAnnouncement={mockHideAnnouncement} />)
 
-		// Check if the mocked version number is present in the title and description
+		// Check if the mocked version number is present in the title
 		expect(screen.getByText(`🎉 Roo Code ${expectedVersion} Released`)).toBeInTheDocument()
-		expect(
-			screen.getByText(
-				`Roo Code ${expectedVersion} brings powerful new features and improvements based on your feedback.`,
-			),
-		).toBeInTheDocument()
+
+		// Check if the stealth model feature is displayed (using partial match due to bullet point)
+		expect(screen.getByText(/Stealth reasoning model with advanced capabilities/)).toBeInTheDocument()
+
+		// Check if the note is displayed
+		expect(screen.getByText("Note: This is an experimental feature")).toBeInTheDocument()
+
+		// Check if the connect button is displayed (since cloudIsAuthenticated is false in the mock)
+		expect(screen.getByText("Connect to Roo Code Cloud")).toBeInTheDocument()
 	})
 })

webview-ui/src/i18n/locales/ca/chat.json

@@ -274,13 +274,12 @@
 	},
 	"announcement": {
 		"title": "🎉 Roo Code {{version}} Released",
-		"description": "Roo Code {{version}} brings powerful new features and significant improvements to enhance your development workflow.",
-		"whatsNew": "What's New",
-		"feature1": "<bold>Message Queueing</bold>: Queue multiple messages while Roo is working, allowing you to continue planning your workflow without interruption.",
-		"feature2": "<bold>Custom Slash Commands</bold>: Create personalized slash commands for quick access to frequently used prompts and workflows, with full UI management.",
-		"feature3": "<bold>Enhanced Gemini Tools</bold>: New URL context and Google Search grounding capabilities provide Gemini models with real-time web information and enhanced research abilities.",
-		"hideButton": "Hide announcement",
-		"detailsDiscussLinks": "Get more details and discuss in <discordLink>Discord</discordLink> and <redditLink>Reddit</redditLink> 🚀"
+		"stealthModel": {
+			"feature": "<bold>Limited-time FREE stealth model</bold> - A blazing fast reasoning model that excels at agentic coding with a 262k context window, available through Roo Code Cloud.",
+			"note": "(Note: prompts and completions are logged by the model creator to improve the model)",
+			"connectButton": "Connect to Roo Code Cloud",
+			"selectModel": "Select <code>roo/sonic</code> from the Roo Code Cloud provider in<br/><settingsLink>Settings</settingsLink> to get started"
+		}
 	},
 	"reasoning": {
 		"thinking": "Thinking",