[wip][v5] Ask upsell gating

packages/shared/src/entitlements.ts

@@ -25,6 +25,9 @@ const ACTIVE_ONLINE_LICENSE_STATUSES: LicenseStatus[] = [
     'past_due',
 ];
 
+// @WARNING: when adding a new entitlement to this list, make sure
+// lighthouse/lambda/entitlements.ts is also updated && deployed
+// prior to rolling a new Sourcebot version.
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const ALL_ENTITLEMENTS = [
     "search-contexts",
@@ -37,6 +40,7 @@ const ALL_ENTITLEMENTS = [
     "chat-sharing",
     "org-management",
     "oauth",
+    "ask"
 ] as const;
 export type Entitlement = (typeof ALL_ENTITLEMENTS)[number];
 

packages/web/src/app/(app)/@sidebar/components/defaultSidebar/nav.tsx

@@ -11,13 +11,17 @@ import { HomeView } from "@/hooks/useHomeView";
 import { NotificationDot } from "../../../components/notificationDot";
 import { useMemo } from "react";
 import Link from "next/link";
+import { useEntitlements } from "@/features/entitlements/useEntitlements";
+import { Entitlement } from "@sourcebot/shared";
+import { UpgradeBadge } from "../upsell/upgradeBadge";
 
 interface NavItem {
     title: string;
     href: string;
     icon: LucideIcon;
     key: string;
     requiresAuth?: boolean;
+    requiredEntitlement?: Entitlement;
 }
 
 interface NavProps {
@@ -26,8 +30,13 @@ interface NavProps {
     homeView: HomeView;
 }
 
-export function Nav({ isSettingsNotificationVisible, isSignedIn, homeView }: NavProps) {
+export function Nav({
+    isSettingsNotificationVisible,
+    isSignedIn,
+    homeView
+}: NavProps) {
     const pathname = usePathname();
+    const entitlements = useEntitlements();
 
     const baseItems = useMemo((): NavItem[] => {
 
@@ -42,7 +51,8 @@ export function Nav({ isSettingsNotificationVisible, isSignedIn, homeView }: Nav
             title: "Ask",
             href: "/chat",
             icon: MessageCircleIcon,
-            key: "chat"
+            key: "chat",
+            requiredEntitlement: "ask"
         }
 
         return [
@@ -101,6 +111,10 @@ export function Nav({ isSettingsNotificationVisible, isSignedIn, homeView }: Nav
             {baseItems.filter((item) => !item.requiresAuth || isSignedIn).map((item) => {
                 const showNotification =
                     (item.key === "settings" && isSettingsNotificationVisible);
+
+                const showUpgradeBadge =
+                    (item.requiredEntitlement && !entitlements.includes(item.requiredEntitlement));
+
                 return (
                     <SidebarMenuItem key={item.title}>
                         <SidebarMenuButton asChild isActive={isActive(item.href)} tooltip={item.title}>
@@ -109,6 +123,7 @@ export function Nav({ isSettingsNotificationVisible, isSignedIn, homeView }: Nav
                             >
                                 <item.icon />
                                 <span>{item.title}</span>
+                                {showUpgradeBadge && <UpgradeBadge />}
                                 {showNotification && <NotificationDot className="ml-1.5" />}
                             </Link>
                         </SidebarMenuButton>

packages/web/src/app/(app)/@sidebar/components/settingsSidebar/nav.tsx

@@ -9,6 +9,8 @@ import {
     SidebarMenuButton,
     SidebarMenuItem,
 } from "@/components/ui/sidebar";
+import { useEntitlements } from "@/features/entitlements/useEntitlements";
+import { Entitlement } from "@sourcebot/shared";
 import {
     ChartAreaIcon,
     KeyRoundIcon,
@@ -23,6 +25,7 @@ import {
 } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { UpgradeBadge } from "../upsell/upgradeBadge";
 
 const iconMap = {
     "link": LinkIcon,
@@ -44,6 +47,7 @@ export type NavItem = {
     title: React.ReactNode;
     icon?: NavIconName;
     isNotificationDotVisible?: boolean;
+    requiredEntitlement?: Entitlement;
 };
 
 export type NavGroup = {
@@ -57,6 +61,7 @@ interface NavProps {
 
 export function Nav({ groups }: NavProps) {
     const pathname = usePathname();
+    const entitlements = useEntitlements();
 
     return (
         <>
@@ -69,13 +74,18 @@ export function Nav({ groups }: NavProps) {
                                 const isActive = item.hrefRegex
                                     ? new RegExp(item.hrefRegex).test(pathname)
                                     : pathname === item.href;
+
+                                const showUpgradeBadge =
+                                    (item.requiredEntitlement && !entitlements.includes(item.requiredEntitlement));
+
                                 const Icon = item.icon ? iconMap[item.icon] : undefined;
                                 return (
                                     <SidebarMenuItem key={item.href}>
                                         <SidebarMenuButton asChild isActive={isActive}>
                                             <Link href={item.href}>
                                                 {Icon && <Icon />}
                                                 <span>{item.title}</span>
+                                                {showUpgradeBadge && <UpgradeBadge />}
                                                 {item.isNotificationDotVisible && <NotificationDot className="ml-1.5" />}
                                             </Link>
                                         </SidebarMenuButton>

packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx

@@ -31,7 +31,7 @@ import { useKeymapType } from "@/hooks/useKeymapType";
 import { KeymapType } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import {
-    ArrowLeftToLineIcon, ArrowRightToLineIcon, ArrowUpCircle, ChevronsUpDown, CodeIcon,
+    ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronsUpDown, CodeIcon,
     Laptop, LogIn, LogOut, Moon, SettingsIcon, Sun, UserIcon
 } from "lucide-react";
 import { Session } from "next-auth";
@@ -44,7 +44,7 @@ import { KeyboardShortcutHint } from "@/app/components/keyboardShortcutHint";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Separator } from "@/components/ui/separator";
 import { WhatsNewSidebarButton } from "./whatsNewSidebarButton";
-import { UpsellBadge } from "./upsellBadge";
+import { UpgradeButton } from "./upsell/upgradeButton";
 
 interface SidebarBaseProps {
     session: Session | null;
@@ -89,7 +89,7 @@ export function SidebarBase({ session, collapsible = "icon", headerContent, chil
                 {children}
             </SidebarContent>
             <SidebarFooter className="border-t border-sidebar-border">
-                {!isValidLicenseActive && isOwner && <UpsellBadge />}
+                {!isValidLicenseActive && isOwner && <UpgradeButton />}
                 {collapsible !== "none" && <CollapseSidebarButton />}
                 <WhatsNewSidebarButton />
                 {session ? (

packages/web/src/app/(app)/@sidebar/components/upsell/upgradeBadge.tsx

@@ -0,0 +1,11 @@
+import { Badge } from "@/components/ui/badge"
+
+export const UpgradeBadge = () => {
+    return (
+        <Badge
+            className="bg-purple-500/20 text-purple-400 border-purple-500/30 text-[10px] px-1.5 py-0 rounded-md leading-normal tracking-wide"
+        >
+            Upgrade
+        </Badge>
+    )
+}

packages/web/src/app/(app)/@sidebar/components/upsellBadge.tsx → packages/web/src/app/(app)/@sidebar/components/upsell/upgradeButton.tsx

@@ -6,7 +6,7 @@ import { UpsellDialog } from "./upsellDialog";
 import { useOffers } from "@/ee/features/lighthouse/useOffers";
 import { Skeleton } from "@/components/ui/skeleton";
 
-export const UpsellBadge = () => {
+export const UpgradeButton = () => {
     const [isDialogOpen, setIsDialogOpen] = useState(false);
 
     const { data: offers, isPending, isError } = useOffers();
@@ -21,14 +21,14 @@ export const UpsellBadge = () => {
         return null;
     }
 
-    const label = offers.trial.eligible ? "Try Enterprise" : "Free plan";
+    const label = offers.trial.eligible ? "Try Enterprise" : "Upgrade to Enterprise";
     return (
         <>
             <div className="group-data-[state=collapsed]:hidden px-2 pt-1">
                 <button
                     type="button"
                     onClick={() => setIsDialogOpen(true)}
-                    className="inline-flex items-center gap-1.5 rounded-full border border-border px-2.5 py-1 text-xs text-muted-foreground text-nowrap transition-colors hover:border-foreground hover:text-foreground"
+                    className="inline-flex font-semibold items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs text-muted-foreground text-nowrap transition-colors  bg-purple-500/20 text-purple-400 border-purple-500/30 hover:bg-purple-500/10"
                 >
                     <ArrowUpCircle className="h-3.5 w-3.5" />
                     {label}

packages/web/src/app/(app)/askgh/[owner]/[repo]/components/landingPage.tsx

@@ -5,7 +5,6 @@ import { SearchModeSelector } from "@/app/(app)/components/searchModeSelector";
 import { Separator } from "@/components/ui/separator";
 import { ChatBox } from "@/features/chat/components/chatBox";
 import { ChatBoxToolbar } from "@/features/chat/components/chatBox/chatBoxToolbar";
-import { LoginModal } from "@/app/components/loginModal";
 import { NotConfiguredErrorBanner } from "@/features/chat/components/notConfiguredErrorBanner";
 import { LanguageModelInfo, RepoSearchScope } from "@/features/chat/types";
 import { useCreateNewChatThread } from "@/features/chat/useCreateNewChatThread";
@@ -29,7 +28,7 @@ export const LandingPage = ({
     repoId,
     isAuthenticated,
 }: LandingPageProps) => {
-    const { createNewChatThread, isLoading, loginWall } = useCreateNewChatThread({ isAuthenticated });
+    const { createNewChatThread, isLoading } = useCreateNewChatThread();
     const [isContextSelectorOpen, setIsContextSelectorOpen] = useState(false);
     const isChatBoxDisabled = languageModels.length === 0;
 
@@ -77,6 +76,8 @@ export const LandingPage = ({
                             selectedSearchScopes={selectedSearchScopes}
                             searchContexts={[]}
                             isDisabled={isChatBoxDisabled}
+                            isAuthenticated={isAuthenticated}
+                            isLoginWallEnabled={true}
                         />
                         <Separator />
                         <div className="relative">
@@ -103,13 +104,6 @@ export const LandingPage = ({
                     )}
                 </div>
             </div>
-
-            <LoginModal
-                isOpen={loginWall.isOpen}
-                onOpenChange={loginWall.onOpenChange}
-                providers={loginWall.providers}
-                callbackUrl={typeof window !== 'undefined' ? window.location.href : ''}
-            />
         </div>
     )
 }

packages/web/src/app/(app)/chat/[id]/components/chatThreadPanel.tsx

@@ -16,6 +16,7 @@ interface ChatThreadPanelProps {
     messages: SBChatMessage[];
     isOwner: boolean;
     isAuthenticated: boolean;
+    isLoginWallEnabled: boolean;
     chatName?: string;
 }
 
@@ -26,6 +27,7 @@ export const ChatThreadPanel = ({
     messages,
     isOwner,
     isAuthenticated,
+    isLoginWallEnabled,
     chatName,
 }: ChatThreadPanelProps) => {
     // @note: we are guaranteed to have a chatId because this component will only be
@@ -74,6 +76,7 @@ export const ChatThreadPanel = ({
                 onSelectedSearchScopesChange={setSelectedSearchScopes}
                 isOwner={isOwner}
                 isAuthenticated={isAuthenticated}
+                isLoginWallEnabled={isLoginWallEnabled}
                 chatName={chatName}
             />
         </div>

packages/web/src/app/(app)/chat/[id]/page.tsx

@@ -160,6 +160,7 @@ export default async function Page(props: PageProps) {
                 messages={messages}
                 isOwner={isOwner}
                 isAuthenticated={!!session}
+                isLoginWallEnabled={env.EXPERIMENT_ASK_GH_ENABLED === 'true'}
                 chatName={name ?? undefined}
             />
         </div>

packages/web/src/app/(app)/chat/chatLandingPage.tsx

@@ -69,6 +69,7 @@ export async function ChatLandingPage() {
                             repos={allRepos}
                             searchContexts={searchContexts}
                             isAuthenticated={!!session}
+                            isLoginWallEnabled={env.EXPERIMENT_ASK_GH_ENABLED === 'true'}
                         />
                     </CustomSlateEditor>
 

packages/web/src/app/(app)/chat/components/landingPageChatBox.tsx

@@ -11,22 +11,23 @@ import { useLocalStorage } from "usehooks-ts";
 import { SELECTED_SEARCH_SCOPES_LOCAL_STORAGE_KEY } from "@/features/chat/constants";
 import { SearchModeSelector } from "../../components/searchModeSelector";
 import { NotConfiguredErrorBanner } from "@/features/chat/components/notConfiguredErrorBanner";
-import { LoginModal } from "@/app/components/loginModal";
 
 interface LandingPageChatBox {
     languageModels: LanguageModelInfo[];
     repos: RepositoryQuery[];
     searchContexts: SearchContextQuery[];
     isAuthenticated: boolean;
+    isLoginWallEnabled: boolean;
 }
 
 export const LandingPageChatBox = ({
     languageModels,
     repos,
     searchContexts,
     isAuthenticated,
+    isLoginWallEnabled,
 }: LandingPageChatBox) => {
-    const { createNewChatThread, isLoading, loginWall } = useCreateNewChatThread({ isAuthenticated });
+    const { createNewChatThread, isLoading } = useCreateNewChatThread();
     const [selectedSearchScopes, setSelectedSearchScopes] = useLocalStorage<SearchScope[]>(SELECTED_SEARCH_SCOPES_LOCAL_STORAGE_KEY, [], { initializeWithValue: false });
     const [isContextSelectorOpen, setIsContextSelectorOpen] = useState(false);
     const isChatBoxDisabled = languageModels.length === 0;
@@ -36,14 +37,16 @@ export const LandingPageChatBox = ({
             <div className="border rounded-md w-full shadow-sm">
                 <ChatBox
                     onSubmit={(children) => {
-                        createNewChatThread(children, selectedSearchScopes);
+                        createNewChatThread(children);
                     }}
                     className="min-h-[50px]"
                     isRedirecting={isLoading}
                     languageModels={languageModels}
                     selectedSearchScopes={selectedSearchScopes}
                     searchContexts={searchContexts}
                     isDisabled={isChatBoxDisabled}
+                    isAuthenticated={isAuthenticated}
+                    isLoginWallEnabled={isLoginWallEnabled}
                 />
                 <Separator />
                 <div className="relative">
@@ -68,13 +71,6 @@ export const LandingPageChatBox = ({
             {isChatBoxDisabled && (
                 <NotConfiguredErrorBanner className="mt-4" />
             )}
-
-            <LoginModal
-                isOpen={loginWall.isOpen}
-                onOpenChange={loginWall.onOpenChange}
-                providers={loginWall.providers}
-                callbackUrl={typeof window !== 'undefined' ? window.location.href : ''}
-            />
         </div >
     )
 }

packages/web/src/app/(app)/settings/layout.tsx

@@ -112,6 +112,7 @@ export const getSidebarNavGroups = async () =>
                         title: "Analytics",
                         href: `/settings/analytics`,
                         icon: "chart-area" as const,
+                        requiredEntitlement: 'analytics'
                     },
                     {
                         title: "License",