Add basic chat history component to homepag

Author: brendan-kellam

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

@@ -7,6 +7,7 @@ import { NavigationGuardProvider } from 'next-navigation-guard';
 import { getRecentChats } from '@/features/chat/actions';
 import { ServiceErrorException } from '@/lib/serviceError';
 import { isServiceError } from '@/lib/utils';
+import { auth } from '@/auth';
 
 interface LayoutProps {
     children: React.ReactNode;
@@ -16,7 +17,8 @@ interface LayoutProps {
 }
 
 export default async function Layout({ children, params: { domain } }: LayoutProps) {
-    const chatHistory = await getRecentChats(domain);
+    const session = await auth();
+    const chatHistory = session ? await getRecentChats(domain) : [];
 
     if (isServiceError(chatHistory)) {
         throw new ServiceErrorException(chatHistory);

packages/web/src/app/[domain]/components/homepage/agenticSearch.tsx

@@ -10,6 +10,9 @@ import { SearchModeSelector, SearchModeSelectorProps } from "./toolbar";
 import { ReactEditor, useSlate } from "slate-react";
 import { resetEditor } from "@/features/chat/utils";
 import { ChatBoxToolbar, ChatBoxToolbarProps } from "@/features/chat/components/chatBox/chatBoxToolbar";
+import { getDisplayTime } from "@/lib/utils";
+import { useDomain } from "@/hooks/useDomain";
+import Link from "next/link";
 
 // @todo: we should probably rename this to a different type since it sort-of clashes
 // with the Suggestion system we have built into the chat box.
@@ -68,22 +71,31 @@ const suggestions: Record<SuggestionType, {
     ],
 }
 
+const MAX_RECENT_CHAT_HISTORY_COUNT = 10;
+
 
 interface AgenticSearchProps {
     searchModeSelectorProps: SearchModeSelectorProps;
     chatBoxToolbarProps: Omit<ChatBoxToolbarProps, "selectedRepos" | "onSelectedReposChange">;
+    chatHistory: {
+        id: string;
+        createdAt: Date;
+        name: string | null;
+    }[];
 }
 
 export const AgenticSearch = ({
     searchModeSelectorProps,
     chatBoxToolbarProps,
+    chatHistory,
 }: AgenticSearchProps) => {
     const [selectedSuggestionType, _setSelectedSuggestionType] = useState<SuggestionType | undefined>(undefined);
     const { createNewChatThread, isLoading } = useCreateNewChatThread();
     const dropdownRef = useRef<HTMLDivElement>(null);
     const editor = useSlate();
     const [selectedRepos, setSelectedRepos] = useState<string[]>([]);
-    
+    const domain = useDomain();
+
     const setSelectedSuggestionType = useCallback((type: SuggestionType | undefined) => {
         _setSelectedSuggestionType(type);
         if (type) {
@@ -172,6 +184,40 @@ export const AgenticSearch = ({
                     ))}
                 </div>
             </div>
+            {chatHistory.length > 0 && (
+                <div className="flex flex-col items-center w-[80%]">
+                    <Separator className="my-6" />
+                    <span className="font-semibold mb-2">Recent conversations</span>
+                    <div
+                        className="flex flex-col gap-1 w-full"
+                    >
+                        {chatHistory
+                            .slice(0, MAX_RECENT_CHAT_HISTORY_COUNT)
+                            .map((chat) => (
+                                <Link
+                                    key={chat.id}
+                                    className="flex flex-row items-center justify-between gap-1 w-full rounded-md hover:bg-muted px-2 py-0.5 cursor-pointer group"
+                                    href={`/${domain}/chat/${chat.id}`}
+                                >
+                                    <span className="text-sm text-muted-foreground group-hover:text-foreground">
+                                        {chat.name ?? "Untitled Chat"}
+                                    </span>
+                                    <span className="text-sm text-muted-foreground group-hover:text-foreground">
+                                        {getDisplayTime(chat.createdAt)}
+                                    </span>
+                                </Link>
+                            ))}
+                    </div>
+                    {chatHistory.length > MAX_RECENT_CHAT_HISTORY_COUNT && (
+                        <Link
+                            href={`/${domain}/chat`}
+                            className="text-sm text-link hover:underline mt-6"
+                        >
+                            View all
+                        </Link>
+                    )}
+                </div>
+            )}
         </div>
     )
 }

packages/web/src/app/[domain]/components/homepage/index.tsx

@@ -13,12 +13,18 @@ import { CustomSlateEditor } from "@/features/chat/customSlateEditor";
 interface HomepageProps {
     initialRepos: RepositoryQuery[];
     languageModels: LanguageModelInfo[];
+    chatHistory: {
+        id: string;
+        createdAt: Date;
+        name: string | null;
+    }[];
 }
 
 
 export const Homepage = ({
     initialRepos,
     languageModels,
+    chatHistory,
 }: HomepageProps) => {
     const [searchMode, setSearchMode] = useLocalStorage<SearchMode>("search-mode", "precise", { initializeWithValue: false });
     const isAgenticSearchEnabled = languageModels.length > 0;
@@ -70,6 +76,7 @@ export const Homepage = ({
                             repos: initialRepos,
                             languageModels,
                         }}
+                        chatHistory={chatHistory}
                     />
                 </CustomSlateEditor>
             )}

packages/web/src/app/[domain]/components/homepage/repositorySnapshot.tsx

@@ -71,7 +71,7 @@ export function RepositorySnapshot({
                 {`Search ${indexedRepos.length} `}
                 <Link
                     href={`${domain}/repos`}
-                    className="text-link"
+                    className="text-link hover:underline"
                 >
                     {indexedRepos.length > 1 ? 'repositories' : 'repository'}
                 </Link>

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

@@ -1,21 +1,34 @@
 import { getRepos } from "@/actions";
 import { Footer } from "@/app/components/footer";
 import { getOrgFromDomain } from "@/data/org";
-import { getConfiguredLanguageModelsInfo } from "@/features/chat/actions";
+import { getConfiguredLanguageModelsInfo, getRecentChats } from "@/features/chat/actions";
 import { isServiceError } from "@/lib/utils";
 import { Homepage } from "./components/homepage";
 import { NavigationMenu } from "./components/navigationMenu";
 import { PageNotFound } from "./components/pageNotFound";
 import { UpgradeToast } from "./components/upgradeToast";
+import { ServiceErrorException } from "@/lib/serviceError";
+import { auth } from "@/auth";
 
 export default async function Home({ params: { domain } }: { params: { domain: string } }) {
     const org = await getOrgFromDomain(domain);
     if (!org) {
         return <PageNotFound />
     }
 
-    const repos = await getRepos(domain);
+    const session = await auth();
+
     const models = await getConfiguredLanguageModelsInfo();
+    const repos = await getRepos(domain);
+    const chatHistory = session ? await getRecentChats(domain) : [];
+
+    if (isServiceError(repos)) {
+        throw new ServiceErrorException(repos);
+    }
+
+    if (isServiceError(chatHistory)) {
+        throw new ServiceErrorException(chatHistory);
+    }
 
     return (
         <div className="flex flex-col items-center overflow-hidden min-h-screen">
@@ -25,8 +38,9 @@ export default async function Home({ params: { domain } }: { params: { domain: s
             <UpgradeToast />
 
             <Homepage
-                initialRepos={isServiceError(repos) ? [] : repos}
+                initialRepos={repos}
                 languageModels={models}
+                chatHistory={chatHistory}
             />
             <Footer />
         </div>

packages/web/src/features/chat/components/chatBox/chatBoxToolbar.tsx

@@ -7,7 +7,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { LanguageModelInfo } from "@/features/chat/types";
 import { RepositoryQuery } from "@/lib/types";
 import { AtSignIcon } from "lucide-react";
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { ReactEditor, useSlate } from "slate-react";
 import { useSelectedLanguageModel } from "../../useSelectedLanguageModel";
@@ -45,6 +45,13 @@ export const ChatBoxToolbar = ({
 
     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]);
+
     return (
         <>
             <Tooltip>

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

@@ -4,9 +4,13 @@ import { useLocalStorage } from "usehooks-ts";
 import { LanguageModelInfo } from "./types";
 
 export const useSelectedLanguageModel = () => {
-    const [selectedLanguageModel, setSelectedLanguageModel] = useLocalStorage<LanguageModelInfo | undefined>("selectedLanguageModel", undefined, {
-        initializeWithValue: false,
-    });
+    const [selectedLanguageModel, setSelectedLanguageModel] = useLocalStorage<LanguageModelInfo | undefined>(
+        "selectedLanguageModel",
+        undefined,
+        {
+            initializeWithValue: false,
+        }
+    );
 
     return {
         selectedLanguageModel,