feat(ask_sb): Add onboarding tutorial (#408)

Author: brendan-kellam

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add ability to include/exclude connection in search context. [#399](https://github.com/sourcebot-dev/sourcebot/pull/399)
 - Search context refactor to search scope and demo card UI changes. [#405](https://github.com/sourcebot-dev/sourcebot/pull/405)
 - Add GitHub star toast. [#409](https://github.com/sourcebot-dev/sourcebot/pull/409)
+- Added a onboarding modal when first visiting the homepage when `ask` mode is selected. [#408](https://github.com/sourcebot-dev/sourcebot/pull/408)
 
 ### Fixed
 - Fixed multiple writes race condition on config file watcher. [#398](https://github.com/sourcebot-dev/sourcebot/pull/398)

packages/web/public/ask_sb_tutorial_at_mentions.png

@@ -25,7 +25,7 @@ import { auth } from "./auth";
 import { getConnection } from "./data/connection";
 import { IS_BILLING_ENABLED } from "./ee/features/billing/stripe";
 import InviteUserEmail from "./emails/inviteUserEmail";
-import { MOBILE_UNSUPPORTED_SPLASH_SCREEN_DISMISSED_COOKIE_NAME, SEARCH_MODE_COOKIE_NAME, SINGLE_TENANT_ORG_DOMAIN, SOURCEBOT_GUEST_USER_ID, SOURCEBOT_SUPPORT_EMAIL } from "./lib/constants";
+import { AGENTIC_SEARCH_TUTORIAL_DISMISSED_COOKIE_NAME, MOBILE_UNSUPPORTED_SPLASH_SCREEN_DISMISSED_COOKIE_NAME, SEARCH_MODE_COOKIE_NAME, SINGLE_TENANT_ORG_DOMAIN, SOURCEBOT_GUEST_USER_ID, SOURCEBOT_SUPPORT_EMAIL } from "./lib/constants";
 import { orgDomainSchema, orgNameSchema, repositoryQuerySchema } from "./lib/schemas";
 import { TenancyMode, ApiKeyPayload } from "./lib/types";
 import { decrementOrgSeatCount, getSubscriptionForOrg } from "./ee/features/billing/serverUtils";
@@ -2015,6 +2015,13 @@ export async function setSearchModeCookie(searchMode: "precise" | "agentic") {
     });
 }
 
+export async function setAgenticSearchTutorialDismissedCookie(dismissed: boolean) {
+    const cookieStore = await cookies();
+    cookieStore.set(AGENTIC_SEARCH_TUTORIAL_DISMISSED_COOKIE_NAME, dismissed ? "true" : "false", {
+        httpOnly: false, // Allow client-side access
+    });
+}
+
 ////// Helpers ///////
 
 const parseConnectionConfig = (config: string) => {

packages/web/public/ask_sb_tutorial_citations.png

@@ -6,11 +6,13 @@ import { ChatBoxToolbar } from "@/features/chat/components/chatBox/chatBoxToolba
 import { LanguageModelInfo, SearchScope } from "@/features/chat/types";
 import { useCreateNewChatThread } from "@/features/chat/useCreateNewChatThread";
 import { RepositoryQuery, SearchContextQuery } from "@/lib/types";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { SearchModeSelector, SearchModeSelectorProps } from "./toolbar";
 import { useLocalStorage } from "usehooks-ts";
 import { DemoExamples } from "@/types";
 import { AskSourcebotDemoCards } from "./askSourcebotDemoCards";
+import { AgenticSearchTutorialDialog } from "./agenticSearchTutorialDialog";
+import { setAgenticSearchTutorialDismissedCookie } from "@/actions";
 
 interface AgenticSearchProps {
     searchModeSelectorProps: SearchModeSelectorProps;
@@ -23,6 +25,7 @@ interface AgenticSearchProps {
         name: string | null;
     }[];
     demoExamples: DemoExamples | undefined;
+    isTutorialDismissed: boolean;
 }
 
 export const AgenticSearch = ({
@@ -31,11 +34,18 @@ export const AgenticSearch = ({
     repos,
     searchContexts,
     demoExamples,
+    isTutorialDismissed,
 }: AgenticSearchProps) => {
     const { createNewChatThread, isLoading } = useCreateNewChatThread();
     const [selectedSearchScopes, setSelectedSearchScopes] = useLocalStorage<SearchScope[]>("selectedSearchScopes", [], { initializeWithValue: false });
     const [isContextSelectorOpen, setIsContextSelectorOpen] = useState(false);
 
+    const [isTutorialOpen, setIsTutorialOpen] = useState(!isTutorialDismissed);
+    const onTutorialDismissed = useCallback(() => {
+        setIsTutorialOpen(false);
+        setAgenticSearchTutorialDismissedCookie(true);
+    }, []);
+
     return (
         <div className="flex flex-col items-center w-full">
             <div className="mt-4 w-full border rounded-md shadow-sm max-w-[800px]">
@@ -75,6 +85,12 @@ export const AgenticSearch = ({
                     demoExamples={demoExamples}
                 />
             )}
+
+            {isTutorialOpen && (
+                <AgenticSearchTutorialDialog
+                    onClose={onTutorialDismissed}
+                />
+            )}
         </div >
     )
 }