Makes upsell dialog visibility available outside the component to fix an issue where <RooTips /> would be incorrectly hidden.

Author: brunobergher

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

@@ -40,7 +40,6 @@ import RooTips from "@src/components/welcome/RooTips"
 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"
@@ -55,9 +54,12 @@ import SystemPromptWarning from "./SystemPromptWarning"
 import ProfileViolationWarning from "./ProfileViolationWarning"
 import { CheckpointWarning } from "./CheckpointWarning"
 import { QueuedMessages } from "./QueuedMessages"
+import { Cloud } from "lucide-react"
+
+import { CloudUpsellDialog } from "@src/components/cloud/CloudUpsellDialog"
 import DismissibleUpsell from "../common/DismissibleUpsell"
 import { useCloudUpsell } from "@src/hooks/useCloudUpsell"
-import { Cloud } from "lucide-react"
+import { useUpsellVisibility, UPSELL_IDS } from "@/hooks/useUpsellVisibility"
 
 export interface ChatViewProps {
 	isHidden: boolean
@@ -1772,6 +1774,8 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 
 	const areButtonsVisible = showScrollToBottom || primaryButtonText || secondaryButtonText || isStreaming
 
+	const isCloudUpsellVisible = useUpsellVisibility(UPSELL_IDS.TASK_LIST)
+
 	return (
 		<div
 			data-testid="chat-view"
@@ -1842,12 +1846,12 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 						<RooHero />
 
 						<div className="mb-2.5">
-							{cloudIsAuthenticated || taskHistory.length < 4 ? (
+							{cloudIsAuthenticated || (tasks.length === 0 && !isCloudUpsellVisible) ? (
 								<RooTips />
 							) : (
 								<>
 									<DismissibleUpsell
-										upsellId="taskList"
+										upsellId={UPSELL_IDS.TASK_LIST}
 										icon={<Cloud className="size-4 mt-0.5 shrink-0" />}
 										onClick={() => openUpsell()}
 										dismissOnClick={false}

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

@@ -2,7 +2,6 @@ import { memo, useEffect, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { useCloudUpsell } from "@src/hooks/useCloudUpsell"
 import { CloudUpsellDialog } from "@src/components/cloud/CloudUpsellDialog"
-import DismissibleUpsell from "@src/components/common/DismissibleUpsell"
 import { FoldVertical, ChevronUp, ChevronDown } from "lucide-react"
 import prettyBytes from "pretty-bytes"
 
@@ -24,6 +23,9 @@ import { ContextWindowProgress } from "./ContextWindowProgress"
 import { Mention } from "./Mention"
 import { TodoListDisplay } from "./TodoListDisplay"
 
+import DismissibleUpsell from "@src/components/common/DismissibleUpsell"
+import { UPSELL_IDS } from "@/constants/upsellIds"
+
 export interface TaskHeaderProps {
 	task: ClineMessage
 	tokensIn: number
@@ -103,7 +105,7 @@ const TaskHeader = ({
 		<div className="pt-2 pb-0 px-3">
 			{showLongRunningTaskMessage && !isTaskComplete && (
 				<DismissibleUpsell
-					upsellId="longRunningTask"
+					upsellId={UPSELL_IDS.LONG_RUNNING_TASK}
 					onClick={() => openUpsell()}
 					dismissOnClick={false}
 					variant="banner">

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

@@ -1,6 +1,6 @@
-import { memo, ReactNode, useEffect, useState, useRef } from "react"
-import { vscode } from "@src/utils/vscode"
+import { memo, ReactNode } from "react"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
+import { DismissedUpsellsProvider, useDismissedUpsells } from "@src/context/DismissedUpsellsContext"
 
 interface DismissibleUpsellProps {
 	/** Required unique identifier for this upsell */
@@ -32,7 +32,8 @@ const DismissIcon = () => (
 	</svg>
 )
 
-const DismissibleUpsell = memo(
+// Internal component that uses the context
+const DismissibleUpsellInternal = memo(
 	({
 		upsellId,
 		className,
@@ -44,55 +45,21 @@ const DismissibleUpsell = memo(
 		dismissOnClick = false,
 	}: DismissibleUpsellProps) => {
 		const { t } = useAppTranslation()
-		const [isVisible, setIsVisible] = useState(false)
-		const isMountedRef = useRef(true)
+		const { isUpsellVisible, dismissUpsell, isLoading } = useDismissedUpsells()
 
-		useEffect(() => {
-			// Track mounted state
-			isMountedRef.current = true
+		// Check if this upsell is visible
+		const isVisible = isUpsellVisible(upsellId)
 
-			// Request the current list of dismissed upsells from the extension
-			vscode.postMessage({ type: "getDismissedUpsells" })
-
-			// Listen for the response
-			const handleMessage = (event: MessageEvent) => {
-				// Only update state if component is still mounted
-				if (!isMountedRef.current) return
-
-				const message = event.data
-				// Add null/undefined check for message
-				if (message && message.type === "dismissedUpsells" && Array.isArray(message.list)) {
-					// Check if this upsell has been dismissed
-					if (!message.list.includes(upsellId)) {
-						setIsVisible(true)
-					}
-				}
-			}
-
-			window.addEventListener("message", handleMessage)
-			return () => {
-				isMountedRef.current = false
-				window.removeEventListener("message", handleMessage)
-			}
-		}, [upsellId])
-
-		const handleDismiss = async () => {
-			// First notify the extension to persist the dismissal
-			// This ensures the message is sent even if the component unmounts quickly
-			vscode.postMessage({
-				type: "dismissUpsell",
-				upsellId: upsellId,
-			})
-
-			// Then hide the upsell
-			setIsVisible(false)
+		const handleDismiss = () => {
+			// Dismiss the upsell through the context
+			dismissUpsell(upsellId)
 
 			// Call the optional callback
 			onDismiss?.()
 		}
 
-		// Don't render if not visible
-		if (!isVisible) {
+		// Don't render if not visible or still loading
+		if (!isVisible || isLoading) {
 			return null
 		}
 
@@ -107,6 +74,7 @@ const DismissibleUpsell = memo(
 				button: "text-vscode-notifications-foreground",
 			},
 		}
+
 		// Build container classes based on variant and presence of click handler
 		const containerClasses = [
 			"relative flex items-start justify-between gap-2",
@@ -158,6 +126,17 @@ const DismissibleUpsell = memo(
 	},
 )
 
+DismissibleUpsellInternal.displayName = "DismissibleUpsellInternal"
+
+// Wrapper component that provides the context
+const DismissibleUpsell = memo((props: DismissibleUpsellProps) => {
+	return (
+		<DismissedUpsellsProvider>
+			<DismissibleUpsellInternal {...props} />
+		</DismissedUpsellsProvider>
+	)
+})
+
 DismissibleUpsell.displayName = "DismissibleUpsell"
 
 export default DismissibleUpsell