Home page CTA

Author: brunobergher

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

@@ -189,7 +189,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 								onClick={() => openUpsell()}
 								dismissOnClick={false}
 								variant="banner">
-								{t("chat:cloud.upsell.autoApprovePowerUser")}
+								{t("cloud:upsell.autoApprovePowerUser")}
 							</DismissibleUpsell>
 						</>
 					)}

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

@@ -3,10 +3,10 @@ import { useDeepCompareEffect, useEvent, useMount } from "react-use"
 import debounce from "debounce"
 import { Virtuoso, type VirtuosoHandle } from "react-virtuoso"
 import removeMd from "remove-markdown"
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import useSound from "use-sound"
 import { LRUCache } from "lru-cache"
-import { useTranslation } from "react-i18next"
+import { Trans, useTranslation } from "react-i18next"
 
 import { useDebounceEffect } from "@src/utils/useDebounceEffect"
 import { appendImages } from "@src/utils/imageUtils"
@@ -37,10 +37,10 @@ import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { useSelectedModel } from "@src/components/ui/hooks/useSelectedModel"
 import RooHero from "@src/components/welcome/RooHero"
 import RooTips from "@src/components/welcome/RooTips"
-import RooCloudCTA from "@src/components/welcome/RooCloudCTA"
 import { StandardTooltip } from "@src/components/ui"
 import { useAutoApprovalState } from "@src/hooks/useAutoApprovalState"
 import { useAutoApprovalToggles } from "@src/hooks/useAutoApprovalToggles"
+import { CloudUpsellDialog } from "@src/components/cloud/CloudUpsellDialog"
 
 import TelemetryBanner from "../common/TelemetryBanner"
 import VersionIndicator from "../common/VersionIndicator"
@@ -56,6 +56,9 @@ import SystemPromptWarning from "./SystemPromptWarning"
 import ProfileViolationWarning from "./ProfileViolationWarning"
 import { CheckpointWarning } from "./CheckpointWarning"
 import { QueuedMessages } from "./QueuedMessages"
+import DismissibleUpsell from "../common/DismissibleUpsell"
+import { useCloudUpsell } from "@src/hooks/useCloudUpsell"
+import { Cloud } from "lucide-react"
 
 export interface ChatViewProps {
 	isHidden: boolean
@@ -208,6 +211,15 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		clineAskRef.current = clineAsk
 	}, [clineAsk])
 
+	const {
+		isOpen: isUpsellOpen,
+		openUpsell,
+		closeUpsell,
+		handleConnect,
+	} = useCloudUpsell({
+		autoOpenOnAuth: false,
+	})
+
 	// Keep inputValueRef in sync with inputValue state
 	useEffect(() => {
 		inputValueRef.current = inputValue
@@ -1831,7 +1843,25 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 						{telemetrySetting === "unset" && <TelemetryBanner />}
 
 						<div className="mb-2.5">
-							{cloudIsAuthenticated || taskHistory.length < 4 ? <RooTips /> : <RooCloudCTA />}
+							{cloudIsAuthenticated || taskHistory.length < 4 ? (
+								<RooTips />
+							) : (
+								<>
+									<DismissibleUpsell
+										upsellId="taskList"
+										icon={<Cloud className="size-4 mt-0.5 shrink-0" />}
+										onClick={() => openUpsell()}
+										dismissOnClick={false}
+										className="bg-vscode-editor-background p-4 !text-base">
+										<Trans
+											i18nKey="cloud:upsell.taskList"
+											components={{
+												learnMoreLink: <VSCodeLink href="#" />,
+											}}
+										/>
+									</DismissibleUpsell>
+								</>
+							)}
 						</div>
 						{/* Show the task history preview if expanded and tasks exist */}
 						{taskHistory.length > 0 && isExpanded && <HistoryPreview />}
@@ -2013,6 +2043,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 			)}
 
 			<div id="roo-portal" />
+			<CloudUpsellDialog open={isUpsellOpen} onOpenChange={closeUpsell} onConnect={handleConnect} />
 		</div>
 	)
 }

webview-ui/src/components/common/DismissibleUpsell.tsx

@@ -7,6 +7,8 @@ interface DismissibleUpsellProps {
 	upsellId: string
 	/** Optional CSS class name for styling */
 	className?: string
+	/** Optional Icon component */
+	icon?: ReactNode
 	/** Content to display inside the upsell */
 	children: ReactNode
 	/** Visual variant of the upsell */
@@ -34,6 +36,7 @@ const DismissibleUpsell = memo(
 	({
 		upsellId,
 		className,
+		icon,
 		children,
 		variant = "default",
 		onDismiss,
@@ -105,7 +108,7 @@ const DismissibleUpsell = memo(
 		}
 		// Build container classes based on variant and presence of click handler
 		const containerClasses = [
-			"relative flex items-start justify-between gap-1",
+			"relative flex items-start justify-between gap-2",
 			"text-sm",
 			variants[variant].container,
 			onClick && "cursor-pointer hover:opacity-90 transition-opacity duration-200",
@@ -137,6 +140,7 @@ const DismissibleUpsell = memo(
 						handleDismiss()
 					}
 				}}>
+				{icon && icon}
 				<div>{children}</div>
 				<button
 					className={buttonClasses}

webview-ui/src/components/welcome/RooCloudCTA.tsx

@@ -354,11 +354,6 @@
 	"versionIndicator": {
 		"ariaLabel": "Version {{version}} - Click to view release notes"
 	},
-	"rooCloudCTA": {
-		"title": "Roo Code Cloud is evolving!",
-		"description": "Run Roomote agents in the cloud, access your tasks from anywhere, collaborate with others, and more.",
-		"joinWaitlist": "Sign up to get the latest updates."
-	},
 	"command": {
 		"triggerDescription": "Trigger the {{name}} command"
 	},

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

@@ -20,6 +20,7 @@
 	"startOver": "Start over",
 	"upsell": {
 		"autoApprovePowerUser": "Giving Roo some independence? Control it from anywhere with Roo Code Cloud. Click to learn more.",
-		"longRunningTask": "This might take a while. Continue from anywhere with Cloud."
+		"longRunningTask": "This might take a while. Continue from anywhere with Cloud.",
+		"taskList": "Roo Code Cloud is here: follow and control your tasks from anywhere. <learnMoreLink>Learn more</learnMoreLink>."
 	}
 }