Load repos in server component. Various other nit fixes and improvements

Author: brendan-kellam

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

@@ -6,20 +6,21 @@ import { useQuery } from '@tanstack/react-query';
 import { Loader2 } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { LanguageModelInfo, SBChatMessage, SET_CHAT_STATE_QUERY_PARAM, SetChatStatePayload } from '@/features/chat/types';
+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';
 
 interface ChatThreadPanelProps {
-    languageModels: LanguageModelInfo[];
+    chatBoxToolbarProps: ChatBoxToolbarProps;
     order: number;
 }
 
 export const ChatThreadPanel = ({
-    languageModels,
+    chatBoxToolbarProps,
     order,
 }: ChatThreadPanelProps) => {
     // @note: we are guaranteed to have a chatId because this component will only be
@@ -82,7 +83,7 @@ export const ChatThreadPanel = ({
                         id={chatId}
                         initialMessages={messages}
                         inputMessage={inputMessage}
-                        languageModels={languageModels}
+                        chatBoxToolbarProps={chatBoxToolbarProps}
                     />
                 )}
             </div>

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

@@ -1,12 +1,29 @@
-import { ChatThreadPanel } from './components/chatThreadPanel';
+import { getRepos } from '@/actions';
 import { getConfiguredLanguageModelsInfo } from '@/features/chat/actions';
+import { ServiceErrorException } from '@/lib/serviceError';
+import { isServiceError } from '@/lib/utils';
+import { ChatThreadPanel } from './components/chatThreadPanel';
 
-export default async function Page() {
+interface PageProps {
+    params: {
+        domain: string;
+    };
+}
+
+export default async function Page({ params }: PageProps) {
     const languageModels = await getConfiguredLanguageModelsInfo();
+    const repos = await getRepos(params.domain);
+
+    if (isServiceError(repos)) {
+        throw new ServiceErrorException(repos);
+    }
 
     return (
         <ChatThreadPanel
-            languageModels={languageModels}
+            chatBoxToolbarProps={{
+                languageModels,
+                repos,
+            }}
             order={2}
         />
     )

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

@@ -1,30 +1,37 @@
 'use client';
 
-import { getChatInfo, updateChatName } from "@/features/chat/actions";
-import { useChatId } from "../useChatId";
-import { useQuery } from "@tanstack/react-query";
-import { useDomain } from "@/hooks/useDomain";
-import { isServiceError, unwrapServiceError } from "@/lib/utils";
+import { useToast } from "@/components/hooks/use-toast";
 import { Badge } from "@/components/ui/badge";
-import { LockIcon } from "lucide-react";
-import { RenameChatDialog } from "./renameChatDialog";
-import { useCallback, useMemo, useState } from "react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { useToast } from "@/components/hooks/use-toast";
-import { useSession } from "next-auth/react";
+import { updateChatName } from "@/features/chat/actions";
+import { useDomain } from "@/hooks/useDomain";
+import { isServiceError } from "@/lib/utils";
 import { GlobeIcon } from "@radix-ui/react-icons";
+import { LockIcon } from "lucide-react";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { useCallback, useMemo, useState } from "react";
+import { useChatId } from "../useChatId";
+import { RenameChatDialog } from "./renameChatDialog";
+
+interface ChatNameProps {
+    chatHistory: {
+        id: string;
+        createdAt: Date;
+        name: string | null;
+    }[];
+}
 
-export const ChatName = () => {
+export const ChatName = ({ chatHistory }: ChatNameProps) => {
     const chatId = useChatId();
-    const domain = useDomain();
     const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
     const { toast } = useToast();
+    const domain = useDomain();
+    const router = useRouter();
 
-    const { data: chatInfo, isPending, isError, refetch } = useQuery({
-        queryKey: ['chat', 'info', chatId, domain],
-        queryFn: () => unwrapServiceError(getChatInfo({ chatId: chatId! }, domain)),
-        enabled: !!chatId,
-    });
+    const name = useMemo(() => {
+        return chatHistory.find((chat) => chat.id === chatId)?.name ?? null;
+    }, [chatHistory, chatId]);
 
     const onRenameChat = useCallback(async (name: string) => {
         if (!chatId) {
@@ -44,9 +51,9 @@ export const ChatName = () => {
             toast({
                 description: `✅ Chat renamed successfully`
             });
-            refetch();
+            router.refresh();
         }
-    }, [chatId, domain]);
+    }, [chatId, domain, toast]);
 
     const { status: authStatus } = useSession();
 
@@ -58,7 +65,7 @@ export const ChatName = () => {
         return authStatus === 'authenticated' ? 'private' : 'public';
     }, [authStatus]);
 
-    if (isPending || isError) {
+    if (!chatId) {
         return null;
     }
 
@@ -73,7 +80,7 @@ export const ChatName = () => {
                                 setIsRenameDialogOpen(true);
                             }}
                         >
-                            {chatInfo.name ?? 'Untitled chat'}
+                            {name ?? 'Untitled chat'}
                         </p>
                     </TooltipTrigger>
                     <TooltipContent>
@@ -104,7 +111,7 @@ export const ChatName = () => {
                 isOpen={isRenameDialogOpen}
                 onOpenChange={setIsRenameDialogOpen}
                 onRename={onRenameChat}
-                currentName={chatInfo.name ?? ""}
+                currentName={name ?? ""}
             />
         </>
     )

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

@@ -9,10 +9,9 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { getRecentChats, updateChatName, deleteChat } from "@/features/chat/actions";
+import { deleteChat, updateChatName } from "@/features/chat/actions";
 import { useDomain } from "@/hooks/useDomain";
-import { cn, isServiceError, unwrapServiceError } from "@/lib/utils";
-import { useQuery } from "@tanstack/react-query";
+import { cn, isServiceError } from "@/lib/utils";
 import { CirclePlusIcon, EllipsisIcon, PencilIcon, TrashIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useCallback, useRef, useState } from "react";
@@ -29,10 +28,16 @@ import { useSession } from "next-auth/react";
 
 interface ChatSidePanelProps {
     order: number;
+    chatHistory: {
+        id: string;
+        name: string | null;
+        createdAt: Date;
+    }[];
 }
 
 export const ChatSidePanel = ({
     order,
+    chatHistory,
 }: ChatSidePanelProps) => {
     const domain = useDomain();
     const [isCollapsed, setIsCollapsed] = useState(false);
@@ -58,12 +63,6 @@ export const ChatSidePanel = ({
         description: "Toggle side panel",
     });
 
-    const { data: recentChats, isPending, isError, refetch: refetchRecentChats } = useQuery({
-        queryKey: ['chat', 'recents', domain],
-        queryFn: () => unwrapServiceError(getRecentChats(domain)),
-        enabled: authStatus === 'authenticated',
-    });
-
     const onRenameChat = useCallback(async (name: string, chatId: string) => {
         if (!chatId) {
             return;
@@ -82,9 +81,9 @@ export const ChatSidePanel = ({
             toast({
                 description: `✅ Chat renamed successfully`
             });
-            refetchRecentChats();
+            router.refresh();
         }
-    }, [chatId, refetchRecentChats]);
+    }, [chatId, router, toast, domain]);
 
     const onDeleteChat = useCallback(async (chatIdToDelete: string) => {
         if (!chatIdToDelete) {
@@ -107,9 +106,9 @@ export const ChatSidePanel = ({
                 router.push(`/${domain}/chat`);
             }
 
-            refetchRecentChats();
+            router.refresh();
         }
-    }, [chatId, refetchRecentChats, router, toast, domain]);
+    }, [chatId, router, toast, domain]);
 
     return (
         <>
@@ -154,15 +153,11 @@ export const ChatSidePanel = ({
                                         </Link> to access your chat history.
                                     </p>
                                 </div>
-                            ) : isPending ? (
-                                <ChatHistorySkeleton />
-                            ) : isError ? (
-                                <p>Error loading recent chats</p>
-                            ) : recentChats.length === 0 ? (
+                            ) : chatHistory.length === 0 ? (
                                 <div className="mx-auto w-full h-52 border border-dashed border-muted-foreground rounded-md flex items-center justify-center p-6">
                                     <p className="text-sm text-muted-foreground text-center">Recent chats will appear here.</p>
                                 </div>
-                            ) : recentChats.map((chat) => (
+                            ) : chatHistory.map((chat) => (
                                 <div
                                     key={chat.id}
                                     className={cn("group flex flex-row items-center justify-between hover:bg-muted rounded-md px-2 py-1.5 cursor-pointer",
@@ -254,7 +249,7 @@ export const ChatSidePanel = ({
                         onRenameChat(name, chatIdToRename);
                     }
                 }}
-                currentName={recentChats?.find((chat) => chat.id === chatIdToRename)?.name ?? ""}
+                currentName={chatHistory?.find((chat) => chat.id === chatIdToRename)?.name ?? ""}
             />
             <DeleteChatDialog
                 isOpen={isDeleteDialogOpen}

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

@@ -2,19 +2,20 @@
 
 import { ResizablePanel } from "@/components/ui/resizable";
 import { ChatBox } from "@/features/chat/components/chatBox";
-import { ChatBoxTools } from "@/features/chat/components/chatBox/chatBoxTools";
+import { ChatBoxToolbar, ChatBoxToolbarProps } from "@/features/chat/components/chatBox/chatBoxToolbar";
 import { CustomSlateEditor } from "@/features/chat/customSlateEditor";
-import { LanguageModelInfo } from "@/features/chat/types";
 import { useCreateNewChatThread } from "@/features/chat/useCreateNewChatThread";
 import { useCallback } from "react";
 import { Descendant } from "slate";
 
 interface NewChatPanelProps {
-    languageModels: LanguageModelInfo[];
+    chatBoxToolbarProps: ChatBoxToolbarProps;
+    order: number;
 }
 
 export const NewChatPanel = ({
-    languageModels,
+    chatBoxToolbarProps,
+    order,
 }: NewChatPanelProps) => {
     const { createNewChatThread, isLoading } = useCreateNewChatThread();
 
@@ -25,7 +26,7 @@ export const NewChatPanel = ({
 
     return (
         <ResizablePanel
-            order={2}
+            order={order}
             id="new-chat-panel"
             defaultSize={85}
         >
@@ -40,8 +41,8 @@ export const NewChatPanel = ({
                             isRedirecting={isLoading}
                         />
                         <div className="w-full flex flex-row items-center bg-accent rounded-b-md px-2">
-                            <ChatBoxTools
-                                languageModels={languageModels}
+                            <ChatBoxToolbar
+                                {...chatBoxToolbarProps}
                             />
                         </div>
                     </CustomSlateEditor>

packages/web/src/app/[domain]/chat/layout.tsx

@@ -1,19 +1,26 @@
-'use client';
-
 import { AnimatedResizableHandle } from '@/components/ui/animatedResizableHandle';
 import { ResizablePanelGroup } from '@/components/ui/resizable';
 import { ChatSidePanel } from './components/chatSidePanel';
 import { TopBar } from '../components/topBar';
 import { ChatName } from './components/chatName';
 import { NavigationGuardProvider } from 'next-navigation-guard';
-import { useDomain } from '@/hooks/useDomain';
+import { getRecentChats } from '@/features/chat/actions';
+import { ServiceErrorException } from '@/lib/serviceError';
+import { isServiceError } from '@/lib/utils';
 
 interface LayoutProps {
     children: React.ReactNode;
+    params: {
+        domain: string;
+    };
 }
 
-export default function Layout({ children }: LayoutProps) {
-    const domain = useDomain();
+export default async function Layout({ children, params: { domain } }: LayoutProps) {
+    const chatHistory = await getRecentChats(domain);
+
+    if (isServiceError(chatHistory)) {
+        throw new ServiceErrorException(chatHistory);
+    }
 
     return (
         // @note: we use a navigation guard here since we don't support resuming streams yet.
@@ -23,13 +30,20 @@ export default function Layout({ children }: LayoutProps) {
                 <TopBar
                     domain={domain}
                 >
-                    <ChatName />
+                    {/*
+                        @note: since this layout is not scoped to the [id] route,
+                        we cannot get the chat id in this server component. Workaround
+                        here is to pass the chat history to the chat name component
+                        and let it use that to get the chat name.
+                     */}
+                    <ChatName chatHistory={chatHistory} />
                 </TopBar>
                 <ResizablePanelGroup
                     direction="horizontal"
                 >
                     <ChatSidePanel
                         order={1}
+                        chatHistory={chatHistory}
                     />
                     <AnimatedResizableHandle />
                     {children}

packages/web/src/app/[domain]/chat/page.tsx

@@ -1,13 +1,30 @@
-import { NewChatPanel } from "./components/newChatPanel";
+import { getRepos } from "@/actions";
 import { getConfiguredLanguageModelsInfo } from "@/features/chat/actions";
+import { ServiceErrorException } from "@/lib/serviceError";
+import { isServiceError } from "@/lib/utils";
+import { NewChatPanel } from "./components/newChatPanel";
 
-export default async function Page() {
+interface PageProps {
+    params: {
+        domain: string;
+    };
+}
 
+export default async function Page({ params }: PageProps) {
     const languageModels = await getConfiguredLanguageModelsInfo();
+    const repos = await getRepos(params.domain);
+
+    if (isServiceError(repos)) {
+        throw new ServiceErrorException(repos);
+    }
 
     return (
         <NewChatPanel
-            languageModels={languageModels}
+            chatBoxToolbarProps={{
+                languageModels,
+                repos,
+            }}
+            order={2}
         />
     )
 }