feat: simplify onboarding

Author: Patrick-Erichsen

gui/src/components/Layout.tsx

@@ -154,7 +154,7 @@ const Layout = () => {
       dispatch(
         setDialogMessage(
           <div className="flex-1">
-            <OnboardingCard isDialog showFreeTrialExceededAlert />
+            <OnboardingCard isDialog />
           </div>,
         ),
       );

gui/src/components/OnboardingCard/OnboardingCard.tsx

@@ -1,9 +1,8 @@
 import { OnboardingModes } from "core/protocol/core";
+import { useEffect } from "react";
 import { useAppSelector } from "../../redux/hooks";
 import { getLocalStorage, setLocalStorage } from "../../util/localStorage";
-import Alert from "../gui/Alert";
 import { ReusableCard } from "../ReusableCard";
-import { OnboardingCardLanding } from "./components/OnboardingCardLanding";
 import { OnboardingCardTabs } from "./components/OnboardingCardTabs";
 import { OnboardingLocalTab } from "./components/OnboardingLocalTab";
 import { OnboardingModelsAddOnTab } from "./components/OnboardingModelsAddOnTab";
@@ -17,20 +16,23 @@ export interface OnboardingCardState {
 
 interface OnboardingCardProps {
   isDialog?: boolean;
-  showFreeTrialExceededAlert?: boolean;
 }
 
-export function OnboardingCard({
-  isDialog,
-  showFreeTrialExceededAlert,
-}: OnboardingCardProps) {
+export function OnboardingCard({ isDialog }: OnboardingCardProps) {
   const { activeTab, close, setActiveTab } = useOnboardingCard();
   const config = useAppSelector((store) => store.config.config);
 
   if (getLocalStorage("onboardingStatus") === undefined) {
     setLocalStorage("onboardingStatus", "Started");
   }
 
+  // Default to MODELS_ADD_ON tab if no active tab is set
+  useEffect(() => {
+    if (!activeTab) {
+      setActiveTab(OnboardingModes.MODELS_ADD_ON);
+    }
+  }, [activeTab, setActiveTab]);
+
   function renderTabContent() {
     switch (activeTab) {
       case OnboardingModes.API_KEY:
@@ -40,51 +42,21 @@ export function OnboardingCard({
       case OnboardingModes.MODELS_ADD_ON:
         return <OnboardingModelsAddOnTab />;
       default:
-        return <OnboardingProvidersTab />;
+        return <OnboardingModelsAddOnTab />;
     }
   }
 
-  if (activeTab) {
-    return (
-      <ReusableCard
-        showCloseButton={!isDialog && !!config.modelsByRole.chat.length}
-        onClose={close}
-        testId="onboarding-card"
-      >
-        {showFreeTrialExceededAlert && (
-          <div className="mb-3 mt-4">
-            <Alert>
-              <h4 className="mb-1 mt-0 text-sm font-semibold">
-                Free trial completed
-              </h4>
-              <span className="text-xs">
-                To keep using Continue, select an option below to setup your
-                models
-              </span>
-            </Alert>
-          </div>
-        )}
-        <OnboardingCardTabs
-          activeTab={activeTab}
-          onTabClick={setActiveTab}
-          showFreeTrialExceededAlert
-        />
-        {renderTabContent()}
-      </ReusableCard>
-    );
-  }
+  // Always show tabs view, defaulting to Models Add-On
+  const currentTab = activeTab || OnboardingModes.MODELS_ADD_ON;
 
   return (
     <ReusableCard
       showCloseButton={!isDialog && !!config.modelsByRole.chat.length}
       onClose={close}
+      testId="onboarding-card"
     >
-      <div className="flex h-full w-full items-center justify-center">
-        <OnboardingCardLanding
-          onSelectConfigure={() => setActiveTab(OnboardingModes.API_KEY)}
-          isDialog={isDialog}
-        />
-      </div>
+      <OnboardingCardTabs activeTab={currentTab} onTabClick={setActiveTab} />
+      {renderTabContent()}
     </ReusableCard>
   );
 }

gui/src/components/OnboardingCard/components/OnboardingCardLanding.tsx

@@ -2,7 +2,6 @@ import { useContext } from "react";
 import { Button, SecondaryButton } from "../..";
 import { useAuth } from "../../../context/Auth";
 import { IdeMessengerContext } from "../../../context/IdeMessenger";
-import { useCreditStatus } from "../../../hooks/useCredits";
 import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
 import { selectCurrentOrg } from "../../../redux/slices/profilesSlice";
 import { selectFirstHubProfile } from "../../../redux/thunks/selectFirstHubProfile";
@@ -45,55 +44,22 @@ export function OnboardingCardLanding({
     onboardingCard.close(isDialog);
   }
 
-  function openApiKeysPage() {
-    ideMessenger.post("controlPlane/openUrl", {
-      path: "setup-models/api-keys",
-      orgSlug: currentOrg?.slug,
-    });
-    onboardingCard.close(isDialog);
-  }
-
-  const { creditStatus, outOfStarterCredits } = useCreditStatus();
-
   return (
     <div className="xs:px-0 flex w-full max-w-full flex-col items-center justify-center px-4 text-center">
       <div className="xs:flex hidden">
         <ContinueLogo height={75} />
       </div>
 
-      {outOfStarterCredits ? (
-        <>
-          <p className="xs:w-3/4 w-full text-sm">
-            You've used all your starter credits! Click below to purchase
-            credits or configure API keys
-          </p>
-          <SecondaryButton
-            onClick={openApiKeysPage}
-            className="mt-4 grid w-full grid-flow-col items-center gap-2"
-          >
-            Set up API keys
-          </SecondaryButton>
-          <Button
-            onClick={openBillingPage}
-            className="mt-4 grid w-full grid-flow-col items-center gap-2"
-          >
-            Purchase credits
-          </Button>
-        </>
-      ) : (
-        <>
-          <p className="mb-5 mt-0 w-full text-sm">
-            Log in to get up and running with starter credits
-          </p>
+      <p className="mb-5 mt-0 w-full text-sm">
+        Log in to Continue Hub to get started with AI-powered coding
+      </p>
 
-          <Button
-            onClick={onGetStarted}
-            className="mt-4 grid w-full grid-flow-col items-center gap-2"
-          >
-            Log in to Continue Hub
-          </Button>
-        </>
-      )}
+      <Button
+        onClick={onGetStarted}
+        className="mt-4 grid w-full grid-flow-col items-center gap-2"
+      >
+        Log in to Continue Hub
+      </Button>
 
       <SecondaryButton onClick={onSelectConfigure} className="w-full">
         Or, configure your own models

gui/src/components/OnboardingCard/components/OnboardingCardTabs.tsx

@@ -6,7 +6,6 @@ import OllamaLogo from "../../svg/OllamaLogo";
 interface OnboardingCardTabsProps {
   activeTab: OnboardingModes;
   onTabClick: (tabName: OnboardingModes) => void;
-  showFreeTrialExceededAlert?: boolean;
 }
 
 const renderTabButton = (
@@ -68,27 +67,13 @@ const renderTabButton = (
 export function OnboardingCardTabs({
   activeTab,
   onTabClick,
-  showFreeTrialExceededAlert,
 }: OnboardingCardTabsProps) {
-  /**
-   * When users initially install, we only render these tabs after they've
-   * declined the free trial, so we show the upgrade tab last since they've
-   * indicated they want don't want to use the Hub.
-   *
-   * If `showFreeTrialExceededAlert` is true, they've used the Hub, so show
-   * upgrade first.
-   */
-  const tabs = showFreeTrialExceededAlert
-    ? [
-        OnboardingModes.MODELS_ADD_ON,
-        OnboardingModes.API_KEY,
-        OnboardingModes.LOCAL,
-      ]
-    : [
-        OnboardingModes.API_KEY,
-        OnboardingModes.LOCAL,
-        OnboardingModes.MODELS_ADD_ON,
-      ];
+  // Show Models Add-On (Credits) first as the primary option
+  const tabs = [
+    OnboardingModes.MODELS_ADD_ON,
+    OnboardingModes.API_KEY,
+    OnboardingModes.LOCAL,
+  ];
   return (
     <div>
       <div className="hidden sm:block">

gui/src/components/OnboardingCard/hooks/useOnboardingCard.ts

@@ -43,7 +43,7 @@ export function useOnboardingCard(): UseOnboardingCard {
     dispatch(
       setOnboardingCard({
         show: true,
-        activeTab: tab ?? OnboardingModes.API_KEY,
+        activeTab: tab ?? OnboardingModes.MODELS_ADD_ON,
       }),
     );
   }