diff --git a/webview-ui/src/App.tsx b/webview-ui/src/App.tsx index 62490a11158..6cd0ee3c842 100644 --- a/webview-ui/src/App.tsx +++ b/webview-ui/src/App.tsx @@ -1,7 +1,6 @@ import React, { useCallback, useEffect, useRef, useState, useMemo } from "react" import { useEvent } from "react-use" import { QueryClient, QueryClientProvider } from "@tanstack/react-query" -import posthog from "posthog-js" import { ExtensionMessage } from "@roo/ExtensionMessage" import TranslationProvider from "./i18n/TranslationContext" @@ -15,8 +14,7 @@ import { ExtensionStateContextProvider, useExtensionState } from "./context/Exte import ChatView, { ChatViewRef } from "./components/chat/ChatView" import HistoryView from "./components/history/HistoryView" import SettingsView, { SettingsViewRef } from "./components/settings/SettingsView" -import WelcomeView from "./components/welcome/WelcomeView" -import WelcomeViewProvider from "./components/welcome/WelcomeViewProvider" +import WelcomeView from "./components/welcome/WelcomeViewProvider" import { MarketplaceView } from "./components/marketplace/MarketplaceView" import { HumanRelayDialog } from "./components/human-relay/HumanRelayDialog" import { CheckpointRestoreDialog } from "./components/chat/CheckpointRestoreDialog" @@ -79,21 +77,6 @@ const App = () => { mdmCompliant, } = useExtensionState() - const [useProviderSignupView, setUseProviderSignupView] = useState(false) - - // Check PostHog feature flag for provider signup view - // Wait for telemetry to be initialized before checking feature flags - useEffect(() => { - if (!didHydrateState || telemetrySetting === "disabled") { - return - } - - posthog.onFeatureFlags(function () { - // Feature flag for new provider-focused welcome view - setUseProviderSignupView(posthog?.getFeatureFlag("welcome-provider-signup") === "test") - }) - }, [didHydrateState, telemetrySetting]) - // Create a persistent state manager const marketplaceStateManager = useMemo(() => new MarketplaceViewStateManager(), []) @@ -260,11 +243,7 @@ const App = () => { // Do not conditionally load ChatView, it's expensive and there's state we // don't want to lose (user input, disableInput, askResponse promise, etc.) return showWelcome ? ( - useProviderSignupView ? ( - - ) : ( - - ) + ) : ( <> {tab === "history" && switchTab("chat")} />} diff --git a/webview-ui/src/__tests__/App.spec.tsx b/webview-ui/src/__tests__/App.spec.tsx index e62f13f938e..0a64e23c9cd 100644 --- a/webview-ui/src/__tests__/App.spec.tsx +++ b/webview-ui/src/__tests__/App.spec.tsx @@ -2,18 +2,9 @@ import React from "react" import { render, screen, act, cleanup } from "@/utils/test-utils" -import posthog from "posthog-js" import AppWithProviders from "../App" -// Mock posthog -vi.mock("posthog-js", () => ({ - default: { - onFeatureFlags: vi.fn(), - getFeatureFlag: vi.fn(), - }, -})) - vi.mock("@src/utils/vscode", () => ({ vscode: { postMessage: vi.fn(), @@ -312,54 +303,4 @@ describe("App", () => { expect(chatView.getAttribute("data-hidden")).toBe("false") expect(screen.queryByTestId("marketplace-view")).not.toBeInTheDocument() }) - - describe("PostHog feature flag initialization", () => { - it("waits for state hydration before checking feature flags", () => { - mockUseExtensionState.mockReturnValue({ - didHydrateState: false, - showWelcome: false, - shouldShowAnnouncement: false, - experiments: {}, - language: "en", - telemetrySetting: "enabled", - }) - - render() - - // PostHog feature flag check should not be called before hydration - expect(posthog.onFeatureFlags).not.toHaveBeenCalled() - }) - - it("checks feature flags after state hydration when telemetry is enabled", () => { - mockUseExtensionState.mockReturnValue({ - didHydrateState: true, - showWelcome: false, - shouldShowAnnouncement: false, - experiments: {}, - language: "en", - telemetrySetting: "enabled", - }) - - render() - - // PostHog feature flag check should be called after hydration - expect(posthog.onFeatureFlags).toHaveBeenCalled() - }) - - it("does not check feature flags when telemetry is disabled", () => { - mockUseExtensionState.mockReturnValue({ - didHydrateState: true, - showWelcome: false, - shouldShowAnnouncement: false, - experiments: {}, - language: "en", - telemetrySetting: "disabled", - }) - - render() - - // PostHog feature flag check should not be called when telemetry is disabled - expect(posthog.onFeatureFlags).not.toHaveBeenCalled() - }) - }) }) diff --git a/webview-ui/src/components/welcome/WelcomeView.tsx b/webview-ui/src/components/welcome/WelcomeView.tsx deleted file mode 100644 index 76bd64459c1..00000000000 --- a/webview-ui/src/components/welcome/WelcomeView.tsx +++ /dev/null @@ -1,212 +0,0 @@ -import { useCallback, useState, useEffect } from "react" -import knuthShuffle from "knuth-shuffle-seeded" -import { Trans } from "react-i18next" -import { VSCodeLink } from "@vscode/webview-ui-toolkit/react" -import posthog from "posthog-js" - -import type { ProviderSettings } from "@roo-code/types" -import { TelemetryEventName } from "@roo-code/types" - -import { useExtensionState } from "@src/context/ExtensionStateContext" -import { validateApiConfiguration } from "@src/utils/validate" -import { vscode } from "@src/utils/vscode" -import { useAppTranslation } from "@src/i18n/TranslationContext" -import { getRequestyAuthUrl, getOpenRouterAuthUrl } from "@src/oauth/urls" -import { telemetryClient } from "@src/utils/TelemetryClient" -import { Button } from "@src/components/ui" - -import ApiOptions from "../settings/ApiOptions" -import { Tab, TabContent } from "../common/Tab" - -import RooHero from "./RooHero" - -const WelcomeView = () => { - const { apiConfiguration, currentApiConfigName, setApiConfiguration, uriScheme, machineId } = useExtensionState() - const { t } = useAppTranslation() - const [errorMessage, setErrorMessage] = useState(undefined) - const [showRooProvider, setShowRooProvider] = useState(false) - - // Check PostHog feature flag for Roo provider - useEffect(() => { - posthog.onFeatureFlags(function () { - setShowRooProvider(posthog?.getFeatureFlag("roo-provider-featured") === "test") - }) - }, []) - - // Memoize the setApiConfigurationField function to pass to ApiOptions - const setApiConfigurationFieldForApiOptions = useCallback( - (field: K, value: ProviderSettings[K]) => { - setApiConfiguration({ [field]: value }) - }, - [setApiConfiguration], // setApiConfiguration from context is stable - ) - - const handleSubmit = useCallback(() => { - const error = apiConfiguration ? validateApiConfiguration(apiConfiguration) : undefined - - if (error) { - setErrorMessage(error) - return - } - - setErrorMessage(undefined) - vscode.postMessage({ type: "upsertApiConfiguration", text: currentApiConfigName, apiConfiguration }) - }, [apiConfiguration, currentApiConfigName]) - - // Using a lazy initializer so it reads once at mount - const [imagesBaseUri] = useState(() => { - const w = window as any - return w.IMAGES_BASE_URI || "" - }) - - return ( - - - -

{t("welcome:greeting")}

- -
-

- -

-

- -

-
- -
-

{t("welcome:startRouter")}

- -
- {/* Define the providers */} - {(() => { - // Provider card configuration - const baseProviders = [ - { - slug: "requesty", - name: "Requesty", - description: t("welcome:routers.requesty.description"), - incentive: t("welcome:routers.requesty.incentive"), - authUrl: getRequestyAuthUrl(uriScheme), - }, - { - slug: "openrouter", - name: "OpenRouter", - description: t("welcome:routers.openrouter.description"), - authUrl: getOpenRouterAuthUrl(uriScheme), - }, - ] - - // Conditionally add Roo provider based on feature flag - const providers = showRooProvider - ? [ - ...baseProviders, - { - slug: "roo", - name: "Roo Code Cloud", - description: t("welcome:routers.roo.description"), - incentive: t("welcome:routers.roo.incentive"), - authUrl: "#", // Placeholder since onClick handler will prevent default - }, - ] - : baseProviders - - // Shuffle providers based on machine ID (will be consistent for the same machine) - const orderedProviders = [...providers] - knuthShuffle(orderedProviders, (machineId as any) || Date.now()) - - // Render the provider cards - return orderedProviders.map((provider, index) => ( - { - // Track telemetry for featured provider click - telemetryClient.capture(TelemetryEventName.FEATURED_PROVIDER_CLICKED, { - provider: provider.slug, - }) - - // Special handling for Roo provider - if (provider.slug === "roo") { - e.preventDefault() - - // Set the Roo provider configuration - const rooConfig: ProviderSettings = { - apiProvider: "roo", - } - - // Save the Roo provider configuration - vscode.postMessage({ - type: "upsertApiConfiguration", - text: currentApiConfigName, - apiConfiguration: rooConfig, - }) - - // Then trigger cloud sign-in - vscode.postMessage({ type: "rooCloudSignIn" }) - } - // For other providers, let the default link behavior work - }}> - {provider.incentive && ( -
- {provider.incentive} -
- )} -
- {provider.name} -
-
-
- {provider.name} -
-
- {provider.description} -
-
- - )) - })()} -
- -

{t("welcome:startCustom")}

- -
- -
-
-
- { - e.preventDefault() - vscode.postMessage({ type: "importSettings" }) - }} - className="text-sm"> - {t("welcome:importSettings")} - -
- - {errorMessage &&
{errorMessage}
} -
-
- - ) -} - -export default WelcomeView