refactor(web): move askgh login wall into useCreateNewChatThread hook

Centralizes the login wall logic in the hook so all chat creation entry
points are guarded automatically. This adds the login wall to the
general /chat landing page and removes the duplicate manual logic from
the askgh landing page.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: msukkari

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

@@ -10,21 +10,14 @@ import { NotConfiguredErrorBanner } from "@/features/chat/components/notConfigur
 import { LanguageModelInfo, RepoSearchScope } from "@/features/chat/types";
 import { useCreateNewChatThread } from "@/features/chat/useCreateNewChatThread";
 import { getRepoImageSrc } from '@/lib/utils';
-import type { IdentityProviderMetadata } from "@/lib/identityProviders";
-import { Descendant, Transforms } from "slate";
-import { useSlate } from "slate-react";
-import { useCallback, useEffect, useMemo, useState, useRef } from "react";
-import { captureEvent } from "@/hooks/useCaptureEvent";
-
-const PENDING_MESSAGE_KEY = "askgh_pending_message";
+import { useMemo, useState } from "react";
 
 interface LandingPageProps {
     languageModels: LanguageModelInfo[];
     repoName: string;
     repoDisplayName?: string;
     imageUrl?: string | null;
     repoId: number;
-    providers: IdentityProviderMetadata[];
     isAuthenticated: boolean;
 }
 
@@ -34,14 +27,10 @@ export const LandingPage = ({
     repoDisplayName,
     imageUrl,
     repoId,
-    providers,
     isAuthenticated,
 }: LandingPageProps) => {
-    const editor = useSlate();
-    const { createNewChatThread, isLoading } = useCreateNewChatThread();
+    const { createNewChatThread, isLoading, loginWall } = useCreateNewChatThread({ isAuthenticated });
     const [isContextSelectorOpen, setIsContextSelectorOpen] = useState(false);
-    const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
-    const hasRestoredPendingMessage = useRef(false);
     const isChatBoxDisabled = languageModels.length === 0;
 
     const selectedSearchScopes = useMemo(() => [
@@ -53,45 +42,6 @@ export const LandingPage = ({
         } satisfies RepoSearchScope,
     ], [repoDisplayName, repoName]);
 
-    // Intercept submit to check auth status
-    const handleSubmit = useCallback((children: Descendant[]) => {
-        if (!isAuthenticated) {
-            captureEvent('wa_askgh_login_wall_prompted', {});
-            // Store message in sessionStorage to survive OAuth redirect
-            sessionStorage.setItem(PENDING_MESSAGE_KEY, JSON.stringify(children));
-            setIsLoginModalOpen(true);
-            return;
-        }
-        createNewChatThread(children, selectedSearchScopes);
-    }, [isAuthenticated, createNewChatThread, selectedSearchScopes]);
-
-    // Restore pending message to editor and auto-submit after login
-    useEffect(() => {
-        if (isAuthenticated && !hasRestoredPendingMessage.current) {
-            const stored = sessionStorage.getItem(PENDING_MESSAGE_KEY);
-            if (stored) {
-                hasRestoredPendingMessage.current = true;
-                sessionStorage.removeItem(PENDING_MESSAGE_KEY);
-                try {
-                    const message = JSON.parse(stored) as Descendant[];
-
-                    // Restore the message content to the editor by replacing all nodes
-                    // Remove all existing nodes
-                    while (editor.children.length > 0) {
-                        Transforms.removeNodes(editor, { at: [0] });
-                    }
-                    // Insert the restored content at the beginning
-                    Transforms.insertNodes(editor, message, { at: [0] });
-
-                    // Allow the UI to render the restored text before auto-submitting
-                    createNewChatThread(message, selectedSearchScopes);
-                } catch (error) {
-                    console.error('Failed to restore pending message:', error);
-                }
-            }
-        }
-    }, [isAuthenticated, editor, createNewChatThread, selectedSearchScopes]);
-
     const imageSrc = imageUrl ? getRepoImageSrc(imageUrl, repoId) : undefined;
     const displayName = repoDisplayName ?? repoName;
 
@@ -119,7 +69,9 @@ export const LandingPage = ({
                 <div className="w-full max-w-[800px]">
                     <div className="border rounded-md w-full shadow-sm">
                         <ChatBox
-                            onSubmit={handleSubmit}
+                            onSubmit={(children) => {
+                                createNewChatThread(children, selectedSearchScopes);
+                            }}
                             className="min-h-[50px]"
                             isRedirecting={isLoading}
                             languageModels={languageModels}
@@ -155,11 +107,11 @@ export const LandingPage = ({
             </div>
 
             <LoginModal
-                isOpen={isLoginModalOpen}
-                onOpenChange={setIsLoginModalOpen}
-                providers={providers}
+                isOpen={loginWall.isOpen}
+                onOpenChange={loginWall.onOpenChange}
+                providers={loginWall.providers}
                 callbackUrl={typeof window !== 'undefined' ? window.location.href : ''}
             />
         </div>
     )
-}
+}

packages/web/src/app/[domain]/askgh/[owner]/[repo]/page.tsx

@@ -8,7 +8,6 @@ import { CustomSlateEditor } from "@/features/chat/customSlateEditor";
 import { RepoIndexedGuard } from "./components/repoIndexedGuard";
 import { LandingPage } from "./components/landingPage";
 import { getConfiguredLanguageModelsInfo } from "@/features/chat/actions";
-import { getIdentityProviderMetadata } from "@/lib/identityProviders";
 import { auth } from "@/auth";
 
 interface PageProps {
@@ -48,7 +47,6 @@ export default async function GitHubRepoPage(props: PageProps) {
 
     const repoInfo = await unwrapServiceError(getRepoInfo(repoId));
     const languageModels = await unwrapServiceError(getConfiguredLanguageModelsInfo());
-    const providers = getIdentityProviderMetadata();
 
     return (
         <RepoIndexedGuard initialRepoInfo={repoInfo}>
@@ -59,7 +57,6 @@ export default async function GitHubRepoPage(props: PageProps) {
                     repoDisplayName={repoInfo.displayName ?? undefined}
                     imageUrl={repoInfo.imageUrl ?? undefined}
                     repoId={repoInfo.id}
-                    providers={providers}
                     isAuthenticated={!!session?.user}
                 />
             </CustomSlateEditor>

packages/web/src/app/[domain]/chat/components/landingPageChatBox.tsx

@@ -10,19 +10,22 @@ import { useState } from "react";
 import { useLocalStorage } from "usehooks-ts";
 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;
 }
 
 export const LandingPageChatBox = ({
     languageModels,
     repos,
     searchContexts,
+    isAuthenticated,
 }: LandingPageChatBox) => {
-    const { createNewChatThread, isLoading } = useCreateNewChatThread();
+    const { createNewChatThread, isLoading, loginWall } = useCreateNewChatThread({ isAuthenticated });
     const [selectedSearchScopes, setSelectedSearchScopes] = useLocalStorage<SearchScope[]>("selectedSearchScopes", [], { initializeWithValue: false });
     const [isContextSelectorOpen, setIsContextSelectorOpen] = useState(false);
     const isChatBoxDisabled = languageModels.length === 0;
@@ -65,6 +68,13 @@ 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/[domain]/chat/page.tsx

@@ -103,6 +103,7 @@ export default async function Page(props: PageProps) {
                             languageModels={languageModels}
                             repos={allRepos}
                             searchContexts={searchContexts}
+                            isAuthenticated={!!session}
                         />
                     </CustomSlateEditor>
 

packages/web/src/features/chat/useCreateNewChatThread.ts

@@ -1,28 +1,39 @@
 'use client';
 
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Descendant } from "slate";
 import { createUIMessage, getAllMentionElements } from "./utils";
 import { slateContentToString } from "./utils";
 import { useToast } from "@/components/hooks/use-toast";
 import { useRouter } from "next/navigation";
-import { createChat } from "./actions";
+import { createChat, getAskGhLoginWallData } from "./actions";
 import { isServiceError } from "@/lib/utils";
 import { createPathWithQueryParams } from "@/lib/utils";
 import { SearchScope, SET_CHAT_STATE_SESSION_STORAGE_KEY, SetChatStatePayload } from "./types";
 import { useSessionStorage } from "usehooks-ts";
 import { SINGLE_TENANT_ORG_DOMAIN } from "@/lib/constants";
+import type { IdentityProviderMetadata } from "@/lib/identityProviders";
+import useCaptureEvent from "@/hooks/useCaptureEvent";
 
-export const useCreateNewChatThread = () => {
+const PENDING_NEW_CHAT_KEY = "askgh_pending_new_chat";
+
+interface UseCreateNewChatThreadOptions {
+    isAuthenticated?: boolean;
+}
+
+export const useCreateNewChatThread = ({ isAuthenticated = false }: UseCreateNewChatThreadOptions = {}) => {
     const [isLoading, setIsLoading] = useState(false);
     const { toast } = useToast();
     const router = useRouter();
     const [, setChatState] = useSessionStorage<SetChatStatePayload | null>(SET_CHAT_STATE_SESSION_STORAGE_KEY, null);
+    const [loginWallState, setLoginWallState] = useState<{ isOpen: boolean; providers: IdentityProviderMetadata[] }>({ isOpen: false, providers: [] });
+    const hasRestoredPendingMessage = useRef(false);
+    const captureEvent = useCaptureEvent();
 
-    const createNewChatThread = useCallback(async (children: Descendant[], selectedSearchScopes: SearchScope[]) => {
+    const doCreateChat = useCallback(async (children: Descendant[], selectedSearchScopes: SearchScope[]) => {
         const text = slateContentToString(children);
         const mentions = getAllMentionElements(children);
-        
+
         const inputMessage = createUIMessage(text, mentions.map((mention) => mention.data), selectedSearchScopes);
 
         setIsLoading(true);
@@ -46,8 +57,52 @@ export const useCreateNewChatThread = () => {
         router.refresh();
     }, [router, toast, setChatState]);
 
+    const createNewChatThread = useCallback(async (children: Descendant[], selectedSearchScopes: SearchScope[]) => {
+        if (!isAuthenticated) {
+            const result = await getAskGhLoginWallData();
+            if (!isServiceError(result) && result.isEnabled) {
+                captureEvent('wa_askgh_login_wall_prompted', {});
+                sessionStorage.setItem(PENDING_NEW_CHAT_KEY, JSON.stringify({ children, selectedSearchScopes }));
+                setLoginWallState({ isOpen: true, providers: result.providers });
+                return;
+            }
+        }
+
+        doCreateChat(children, selectedSearchScopes);
+    }, [isAuthenticated, captureEvent, doCreateChat]);
+
+    // Restore pending message after OAuth redirect
+    useEffect(() => {
+        if (!isAuthenticated || hasRestoredPendingMessage.current) {
+            return;
+        }
+
+        const stored = sessionStorage.getItem(PENDING_NEW_CHAT_KEY);
+        if (!stored) {
+            return;
+        }
+
+        hasRestoredPendingMessage.current = true;
+        sessionStorage.removeItem(PENDING_NEW_CHAT_KEY);
+
+        try {
+            const { children, selectedSearchScopes } = JSON.parse(stored) as {
+                children: Descendant[];
+                selectedSearchScopes: SearchScope[];
+            };
+            doCreateChat(children, selectedSearchScopes);
+        } catch (error) {
+            console.error('Failed to restore pending message:', error);
+        }
+    }, [isAuthenticated, doCreateChat]);
+
     return {
         createNewChatThread,
         isLoading,
+        loginWall: {
+            isOpen: loginWallState.isOpen,
+            providers: loginWallState.providers,
+            onOpenChange: (open: boolean) => setLoginWallState(prev => ({ ...prev, isOpen: open })),
+        },
     };
-}
+}