small tweaks here and there

brendan-kellam · brendan-kellam · commit 253b0554163b · 2025-07-22T02:24:39.000-07:00
diff --git a/packages/web/src/app/[domain]/chat/[id]/components/chatThreadPanel.tsx b/packages/web/src/app/[domain]/chat/[id]/components/chatThreadPanel.tsx
@@ -1,50 +1,34 @@
 'use client';
 
+import { ResizablePanel } from '@/components/ui/resizable';
+import { ChatBoxToolbarProps } from '@/features/chat/components/chatBox/chatBoxToolbar';
 import { ChatThread } from '@/features/chat/components/chatThread';
-import { useDomain } from '@/hooks/useDomain';
-import { useQuery } from '@tanstack/react-query';
-import { Loader2 } from 'lucide-react';
-import { useEffect, useState } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
 import { SBChatMessage, SET_CHAT_STATE_QUERY_PARAM, SetChatStatePayload } from '@/features/chat/types';
-import { loadChatMessages } from '@/features/chat/actions';
-import { unwrapServiceError } from '@/lib/utils';
-import { ResizablePanel } from '@/components/ui/resizable';
-import { useChatId } from '../../useChatId';
 import { CreateUIMessage } from 'ai';
-import { ChatBoxToolbarProps } from '@/features/chat/components/chatBox/chatBoxToolbar';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useChatId } from '../../useChatId';
 
 interface ChatThreadPanelProps {
     chatBoxToolbarProps: Omit<ChatBoxToolbarProps, "selectedRepos" | "onSelectedReposChange">;
     order: number;
+    messages: SBChatMessage[];
 }
 
 export const ChatThreadPanel = ({
     chatBoxToolbarProps,
     order,
+    messages,
 }: ChatThreadPanelProps) => {
     // @note: we are guaranteed to have a chatId because this component will only be
     // mounted when on a /chat/[id] route.
     const chatId = useChatId()!;
-    const domain = useDomain();
     const router = useRouter();
     const searchParams = useSearchParams();
     const [inputMessage, setInputMessage] = useState<CreateUIMessage<SBChatMessage> | undefined>(undefined);
     const [selectedRepos, setSelectedRepos] = useState<string[]>([]);
 
-    const { data: messages, isPending, isError } = useQuery({
-        queryKey: ['load-chat', chatId, domain],
-        queryFn: () => unwrapServiceError(loadChatMessages({ chatId }, domain)),
-    });
-
     useEffect(() => {
-        // @note: there was a bug when navigating from the home page to a chat thread with
-        // the setChatState query param would cause the `isPending` flag to never be set to false.
-        // The workaround was to only set the input message if the `loadChatMessages` query was not pending.
-        if (isPending) {
-            return;
-        }
-
         const setChatState = searchParams.get(SET_CHAT_STATE_QUERY_PARAM);
         if (!setChatState) {
             return;
@@ -62,7 +46,7 @@ export const ChatThreadPanel = ({
         const newSearchParams = new URLSearchParams(searchParams.toString());
         newSearchParams.delete(SET_CHAT_STATE_QUERY_PARAM);
         router.replace(`?${newSearchParams.toString()}`, { scroll: false });
-    }, [searchParams, router, isPending]);
+    }, [searchParams, router]);
 
     return (
         <ResizablePanel
@@ -71,25 +55,14 @@ export const ChatThreadPanel = ({
             defaultSize={85}
         >
             <div className="flex flex-col h-full w-full">
-                {isPending ? (
-                    <div className="flex-1 flex flex-col items-center gap-2 justify-center text-muted-foreground">
-                        <Loader2 className="w-4 h-4 animate-spin" />
-                        <p>Loading chat...</p>
-                    </div>
-                ) : isError ? (
-                    <div className="flex-1 flex items-center justify-center">
-                        <p>Error loading chat</p>
-                    </div>
-                ) : (
-                    <ChatThread
-                        id={chatId}
-                        initialMessages={messages}
-                        inputMessage={inputMessage}
-                        chatBoxToolbarProps={chatBoxToolbarProps}
-                        selectedRepos={selectedRepos}
-                        onSelectedReposChange={setSelectedRepos}
-                    />
-                )}
+                <ChatThread
+                    id={chatId}
+                    initialMessages={messages}
+                    inputMessage={inputMessage}
+                    chatBoxToolbarProps={chatBoxToolbarProps}
+                    selectedRepos={selectedRepos}
+                    onSelectedReposChange={setSelectedRepos}
+                />
             </div>
         </ResizablePanel>
     )
diff --git a/packages/web/src/app/[domain]/chat/[id]/page.tsx b/packages/web/src/app/[domain]/chat/[id]/page.tsx
@@ -1,29 +1,38 @@
 import { getRepos } from '@/actions';
-import { getConfiguredLanguageModelsInfo } from '@/features/chat/actions';
+import { getConfiguredLanguageModelsInfo, loadChatMessages } from '@/features/chat/actions';
 import { ServiceErrorException } from '@/lib/serviceError';
 import { isServiceError } from '@/lib/utils';
 import { ChatThreadPanel } from './components/chatThreadPanel';
 
 interface PageProps {
     params: {
         domain: string;
+        id: string;
     };
 }
 
 export default async function Page({ params }: PageProps) {
     const languageModels = await getConfiguredLanguageModelsInfo();
     const repos = await getRepos(params.domain);
+    const chatMessages = await loadChatMessages({ chatId: params.id }, params.domain);
 
     if (isServiceError(repos)) {
         throw new ServiceErrorException(repos);
     }
 
+    if (isServiceError(chatMessages)) {
+        throw new ServiceErrorException(chatMessages);
+    }
+
+   const indexedRepos = repos.filter((repo) => repo.indexedAt !== undefined);
+
     return (
         <ChatThreadPanel
             chatBoxToolbarProps={{
                 languageModels,
-                repos,
+                repos: indexedRepos,
             }}
+            messages={chatMessages}
             order={2}
         />
     )
diff --git a/packages/web/src/app/[domain]/chat/components/chatSidePanel.tsx b/packages/web/src/app/[domain]/chat/components/chatSidePanel.tsx
@@ -24,7 +24,6 @@ import { useChatId } from "../useChatId";
 import { RenameChatDialog } from "./renameChatDialog";
 import { DeleteChatDialog } from "./deleteChatDialog";
 import Link from "next/link";
-import { useSession } from "next-auth/react";
 
 interface ChatSidePanelProps {
     order: number;
@@ -33,11 +32,13 @@ interface ChatSidePanelProps {
         name: string | null;
         createdAt: Date;
     }[];
+    isAuthenticated: boolean;
 }
 
 export const ChatSidePanel = ({
     order,
     chatHistory,
+    isAuthenticated,
 }: ChatSidePanelProps) => {
     const domain = useDomain();
     const [isCollapsed, setIsCollapsed] = useState(false);
@@ -49,7 +50,6 @@ export const ChatSidePanel = ({
     const [chatIdToRename, setChatIdToRename] = useState<string | null>(null);
     const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
     const [chatIdToDelete, setChatIdToDelete] = useState<string | null>(null);
-    const { status: authStatus } = useSession();
 
     useHotkeys("mod+b", () => {
         if (isCollapsed) {
@@ -140,9 +140,7 @@ export const ChatSidePanel = ({
                     <ScrollArea className="flex flex-col h-full px-2.5">
                         <p className="text-sm font-medium mb-4">Recent Chats</p>
                         <div className="flex flex-col gap-1">
-                            {authStatus === 'loading' ? (
-                                <ChatHistorySkeleton />
-                            ) : authStatus === 'unauthenticated' ? (
+                            {!isAuthenticated ? (
                                 <div className="flex flex-col">
                                     <p className="text-sm text-muted-foreground mb-4">
                                         <Link
diff --git a/packages/web/src/app/[domain]/chat/components/newChatPanel.tsx b/packages/web/src/app/[domain]/chat/components/newChatPanel.tsx
@@ -40,6 +40,7 @@ export const NewChatPanel = ({
                             className="min-h-[80px]"
                             preferredSuggestionsBoxPlacement="bottom-start"
                             isRedirecting={isLoading}
+                            languageModels={chatBoxToolbarProps.languageModels}
                         />
                         <div className="w-full flex flex-row items-center bg-accent rounded-b-md px-2">
                             <ChatBoxToolbar
diff --git a/packages/web/src/app/[domain]/chat/layout.tsx b/packages/web/src/app/[domain]/chat/layout.tsx
@@ -46,6 +46,7 @@ export default async function Layout({ children, params: { domain } }: LayoutPro
                     <ChatSidePanel
                         order={1}
                         chatHistory={chatHistory}
+                        isAuthenticated={!!session}
                     />
                     <AnimatedResizableHandle />
                     {children}
diff --git a/packages/web/src/app/[domain]/chat/page.tsx b/packages/web/src/app/[domain]/chat/page.tsx
@@ -18,11 +18,13 @@ export default async function Page({ params }: PageProps) {
         throw new ServiceErrorException(repos);
     }
 
+    const indexedRepos = repos.filter((repo) => repo.indexedAt !== undefined);
+
     return (
         <NewChatPanel
             chatBoxToolbarProps={{
                 languageModels,
-                repos,
+                repos: indexedRepos,
             }}
             order={2}
         />
diff --git a/packages/web/src/app/[domain]/components/homepage/agenticSearch.tsx b/packages/web/src/app/[domain]/components/homepage/agenticSearch.tsx
@@ -128,6 +128,7 @@ export const AgenticSearch = ({
                     }}
                     className="min-h-[50px]"
                     isRedirecting={isLoading}
+                    languageModels={chatBoxToolbarProps.languageModels}
                 />
                 <Separator />
                 <div className="relative">
diff --git a/packages/web/src/app/[domain]/page.tsx b/packages/web/src/app/[domain]/page.tsx
@@ -30,6 +30,8 @@ export default async function Home({ params: { domain } }: { params: { domain: s
         throw new ServiceErrorException(chatHistory);
     }
 
+    const indexedRepos = repos.filter((repo) => repo.indexedAt !== undefined);
+
     return (
         <div className="flex flex-col items-center overflow-hidden min-h-screen">
             <NavigationMenu
@@ -38,7 +40,7 @@ export default async function Home({ params: { domain } }: { params: { domain: s
             <UpgradeToast />
 
             <Homepage
-                initialRepos={repos}
+                initialRepos={indexedRepos}
                 languageModels={models}
                 chatHistory={chatHistory}
             />
diff --git a/packages/web/src/features/chat/components/chatBox/chatBox.tsx b/packages/web/src/features/chat/components/chatBox/chatBox.tsx
@@ -3,7 +3,7 @@
 import { VscodeFileIcon } from "@/app/components/vscodeFileIcon";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { CustomEditor, MentionElement, RenderElementPropsFor } from "@/features/chat/types";
+import { CustomEditor, LanguageModelInfo, MentionElement, RenderElementPropsFor } from "@/features/chat/types";
 import { insertMention, slateContentToString } from "@/features/chat/utils";
 import { cn, IS_MAC } from "@/lib/utils";
 import { computePosition, flip, offset, shift, VirtualElement } from "@floating-ui/react";
@@ -25,6 +25,7 @@ interface ChatBoxProps {
     className?: string;
     isRedirecting?: boolean;
     isGenerating?: boolean;
+    languageModels: LanguageModelInfo[];
 }
 
 export const ChatBox = ({
@@ -34,6 +35,7 @@ export const ChatBox = ({
     className,
     isRedirecting,
     isGenerating,
+    languageModels,
 }: ChatBoxProps) => {
     const suggestionsBoxRef = useRef<HTMLDivElement>(null);
     const [index, setIndex] = useState(0);
@@ -45,7 +47,9 @@ export const ChatBox = ({
         // @todo: add selected repos.
         selectedRepos: [],
     });
-    const { selectedLanguageModel } = useSelectedLanguageModel();
+    const { selectedLanguageModel } = useSelectedLanguageModel({
+        initialLanguageModel: languageModels.length > 0 ? languageModels[0] : undefined,
+    });
 
     // Reset the index when the suggestion mode changes.
     useEffect(() => {
diff --git a/packages/web/src/features/chat/components/chatBox/chatBoxToolbar.tsx b/packages/web/src/features/chat/components/chatBox/chatBoxToolbar.tsx
@@ -43,14 +43,9 @@ export const ChatBoxToolbar = ({
         description: "Add context", 
     });
 
-    const { selectedLanguageModel, setSelectedLanguageModel } = useSelectedLanguageModel();
-
-    // Default to the first language model if one is not selected.
-    useEffect(() => {
-        if (!selectedLanguageModel && languageModels.length > 0) {
-            setSelectedLanguageModel(languageModels[0]);
-        }
-    }, [languageModels, selectedLanguageModel, setSelectedLanguageModel]);
+    const { selectedLanguageModel, setSelectedLanguageModel } = useSelectedLanguageModel({
+        initialLanguageModel: languageModels.length > 0 ? languageModels[0] : undefined,
+    });
 
     return (
         <>
diff --git a/packages/web/src/features/chat/components/chatThread/chatThread.tsx b/packages/web/src/features/chat/components/chatThread/chatThread.tsx
@@ -62,7 +62,9 @@ export const ChatThread = ({
         ) ?? []
     );
 
-    const { selectedLanguageModel } = useSelectedLanguageModel();
+    const { selectedLanguageModel } = useSelectedLanguageModel({
+        initialLanguageModel: chatBoxToolbarProps.languageModels.length > 0 ? chatBoxToolbarProps.languageModels[0] : undefined,
+    });
 
     const {
         messages,
@@ -307,6 +309,7 @@ export const ChatThread = ({
                         preferredSuggestionsBoxPlacement="top-start"
                         isGenerating={status === "streaming" || status === "submitted"}
                         onStop={stop}
+                        languageModels={chatBoxToolbarProps.languageModels}
                     />
                     <div className="w-full flex flex-row items-center bg-accent rounded-b-md px-2">
                         <ChatBoxToolbar
diff --git a/packages/web/src/features/chat/useSelectedLanguageModel.ts b/packages/web/src/features/chat/useSelectedLanguageModel.ts
@@ -3,10 +3,16 @@
 import { useLocalStorage } from "usehooks-ts";
 import { LanguageModelInfo } from "./types";
 
-export const useSelectedLanguageModel = () => {
+type Props = {
+    initialLanguageModel?: LanguageModelInfo;
+}
+
+export const useSelectedLanguageModel = ({
+    initialLanguageModel,
+}: Props = {}) => {
     const [selectedLanguageModel, setSelectedLanguageModel] = useLocalStorage<LanguageModelInfo | undefined>(
         "selectedLanguageModel",
-        undefined,
+        initialLanguageModel,
         {
             initializeWithValue: false,
         }
