guest sidebar footer

Author: brendan-kellam

packages/web/src/app/(app)/@sidebar/components/defaultSidebar/chatHistory.tsx

@@ -67,6 +67,8 @@ export function ChatHistory({ chatHistory, hasMore }: ChatHistoryProps) {
         captureEvent('wa_chat_deleted', { chatId: chatIdToDelete });
         if (pathname === `/chat/${chatIdToDelete}`) {
             router.push("/chat");
+        } else {
+            router.refresh();
         }
         return true;
     }, [pathname, router, toast]);

packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx

@@ -6,7 +6,13 @@ import {
     DropdownMenuContent,
     DropdownMenuGroup,
     DropdownMenuItem,
+    DropdownMenuPortal,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
     DropdownMenuSeparator,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import {
@@ -21,14 +27,19 @@ import {
     useSidebar,
 } from "@/components/ui/sidebar";
 import { UserAvatar } from "@/components/userAvatar";
+import { useKeymapType } from "@/hooks/useKeymapType";
+import { KeymapType } from "@/lib/types";
 import { cn } from "@/lib/utils";
-import { ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronsUpDown, LogOut, SettingsIcon } from "lucide-react";
+import {
+    ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronsUpDown, CodeIcon,
+    Laptop, LogIn, LogOut, Moon, SettingsIcon, Sun, UserIcon
+} from "lucide-react";
 import { Session } from "next-auth";
 import { signOut } from "next-auth/react";
+import { useTheme } from "next-themes";
 import Link from "next/link";
 import posthog from "posthog-js";
-import { ReactNode, useEffect, useRef, useState } from "react";
-import { AppearanceDropdownMenuGroup } from "../../components/appearanceDropdownMenuGroup";
+import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
 
 interface SidebarBaseProps {
     session: Session | null;
@@ -72,8 +83,10 @@ export function SidebarBase({ session, collapsible = "icon", headerContent, chil
             </SidebarContent>
             <SidebarFooter className="border-t border-sidebar-border">
                 {collapsible !== "none" && <CollapseSidebarButton />}
-                {session && (
+                {session ? (
                     <MeControlDropdownMenu session={session} />
+                ) : (
+                    <GuestDropdownMenu />
                 )}
             </SidebarFooter>
             {collapsible !== "none" && <SidebarRail />}
@@ -176,3 +189,106 @@ const MeControlDropdownMenu = ({
         </SidebarMenu>
     )
 }
+
+const GuestDropdownMenu = () => {
+    return (
+        <SidebarMenu>
+            <SidebarMenuItem>
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <SidebarMenuButton
+                            size="lg"
+                            className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                        >
+                            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted flex-shrink-0">
+                                <UserIcon className="h-4 w-4 text-muted-foreground" />
+                            </div>
+                            <div className="grid flex-1 text-left text-sm leading-tight">
+                                <span className="truncate font-semibold">Guest</span>
+                                <span className="truncate text-xs text-muted-foreground">Not signed in</span>
+                            </div>
+                            <ChevronsUpDown className="ml-auto size-4" />
+                        </SidebarMenuButton>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent className="w-64" side="top" align="start" sideOffset={4}>
+                        <AppearanceDropdownMenuGroup />
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem asChild>
+                            <a href="/login">
+                                <LogIn className="h-4 w-4 mr-2" />
+                                <span>Sign in</span>
+                            </a>
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </SidebarMenuItem>
+        </SidebarMenu>
+    );
+}
+
+
+const AppearanceDropdownMenuGroup = () => {
+    const { theme: _theme, setTheme } = useTheme();
+    const [keymapType, setKeymapType] = useKeymapType();
+
+    const theme = useMemo(() => {
+        return _theme ?? "light";
+    }, [_theme]);
+
+    const ThemeIcon = useMemo(() => {
+        switch (theme) {
+            case "light":
+                return <Sun className="h-4 w-4 mr-2" />;
+            case "dark":
+                return <Moon className="h-4 w-4 mr-2" />;
+            case "system":
+                return <Laptop className="h-4 w-4 mr-2" />;
+            default:
+                return <Laptop className="h-4 w-4 mr-2" />;
+        }
+    }, [theme]);
+
+    return (
+        <DropdownMenuGroup>
+            <DropdownMenuSub>
+                <DropdownMenuSubTrigger>
+                    {ThemeIcon}
+                    <span>Theme</span>
+                </DropdownMenuSubTrigger>
+                <DropdownMenuPortal>
+                    <DropdownMenuSubContent>
+                        <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
+                            <DropdownMenuRadioItem value="light">
+                                Light
+                            </DropdownMenuRadioItem>
+                            <DropdownMenuRadioItem value="dark">
+                                Dark
+                            </DropdownMenuRadioItem>
+                            <DropdownMenuRadioItem value="system">
+                                System
+                            </DropdownMenuRadioItem>
+                        </DropdownMenuRadioGroup>
+                    </DropdownMenuSubContent>
+                </DropdownMenuPortal>
+            </DropdownMenuSub>
+            <DropdownMenuSub>
+                <DropdownMenuSubTrigger>
+                    <CodeIcon className="h-4 w-4 mr-2" />
+                    <span>Code navigation</span>
+                </DropdownMenuSubTrigger>
+                <DropdownMenuPortal>
+                    <DropdownMenuSubContent>
+                        <DropdownMenuRadioGroup value={keymapType} onValueChange={(value) => setKeymapType(value as KeymapType)}>
+                            <DropdownMenuRadioItem value="default">
+                                Default
+                            </DropdownMenuRadioItem>
+                            <DropdownMenuRadioItem value="vim">
+                                Vim
+                            </DropdownMenuRadioItem>
+                        </DropdownMenuRadioGroup>
+                    </DropdownMenuSubContent>
+                </DropdownMenuPortal>
+            </DropdownMenuSub>
+        </DropdownMenuGroup>
+    )
+}

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

@@ -1,5 +1,5 @@
 import { getRepos, getSearchContexts } from '@/actions';
-import { getChatInfo, claimAnonymousChats, getSharedWithUsersForChat } from '@/features/chat/actions';
+import { getChatInfo, getSharedWithUsersForChat } from '@/features/chat/actions';
 import { getConfiguredLanguageModelsInfo } from "@/features/chat/utils.server";
 import { ServiceErrorException } from '@/lib/serviceError';
 import { isServiceError } from '@/lib/utils';
@@ -80,15 +80,6 @@ export default async function Page(props: PageProps) {
     const params = await props.params;
     const session = await auth();
 
-    // Claim any anonymous chats created by this user before they signed in.
-    // This must happen before getChatInfo so the chat ownership is updated.
-    if (session) {
-        const claimResult = await claimAnonymousChats();
-        if (isServiceError(claimResult)) {
-            throw new ServiceErrorException(claimResult);
-        }
-    }
-
     const languageModels = await getConfiguredLanguageModelsInfo();
     const repos = await getRepos();
     const searchContexts = await getSearchContexts();

packages/web/src/app/(app)/components/appearanceDropdownMenu.tsx

@@ -18,6 +18,8 @@ import { onCreateUser } from '@/lib/authUtils';
 import { getAuditService } from '@/ee/features/audit/factory';
 import { SINGLE_TENANT_ORG_ID } from './lib/constants';
 import { EncryptedPrismaAdapter, encryptAccountData } from '@/lib/encryptedPrismaAdapter';
+import { getAnonymousId } from '@/lib/anonymousId';
+import { captureEvent } from '@/lib/posthog';
 
 const auditService = getAuditService();
 const eeIdentityProviders = hasEntitlement("sso") ? await getEEIdentityProviders() : [];
@@ -187,6 +189,28 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
             }
 
             if (user.id) {
+                // Claim any anonymous chats created before sign-in.
+                const anonymousId = await getAnonymousId();
+                if (anonymousId) {
+                    const result = await __unsafePrisma.chat.updateMany({
+                        where: {
+                            orgId: SINGLE_TENANT_ORG_ID,
+                            anonymousCreatorId: anonymousId,
+                            createdById: null,
+                        },
+                        data: {
+                            createdById: user.id,
+                            anonymousCreatorId: null,
+                        },
+                    });
+
+                    if (result.count > 0) {
+                        await captureEvent('wa_anonymous_chats_claimed', {
+                            claimedCount: result.count,
+                        });
+                    }
+                }
+
                 await auditService.createAudit({
                     action: "user.signed_in",
                     actor: {