Push route on new chat (#499)

components/custom/app-sidebar.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import { type User } from 'next-auth';
 
 import { PlusIcon } from '@/components/custom/icons';
@@ -20,6 +21,7 @@ import {
 import { BetterTooltip } from '@/components/ui/tooltip';
 
 export function AppSidebar({ user }: { user: User | undefined }) {
+  const router = useRouter();
   const { setOpenMobile } = useSidebar();
 
   return (
@@ -27,18 +29,29 @@ export function AppSidebar({ user }: { user: User | undefined }) {
       <SidebarHeader>
         <SidebarMenu>
           <div className="flex flex-row justify-between items-center">
-            <Link
-              href="/"
-              onClick={() => setOpenMobile(false)}
+            <div
+              onClick={() => {
+                setOpenMobile(false);
+                router.push('/');
+                router.refresh();
+              }}
               className="flex flex-row gap-3 items-center"
             >
-              <span className="text-lg font-semibold px-2">Chatbot</span>
-            </Link>
+              <span className="text-lg font-semibold px-2 hover:bg-muted rounded-md cursor-pointer">
+                Chatbot
+              </span>
+            </div>
             <BetterTooltip content="New Chat" align="start">
-              <Button variant="ghost" className="p-2 h-fit" asChild>
-                <Link href="/" onClick={() => setOpenMobile(false)}>
-                  <PlusIcon />
-                </Link>
+              <Button
+                variant="ghost"
+                className="p-2 h-fit"
+                onClick={() => {
+                  setOpenMobile(false);
+                  router.push('/');
+                  router.refresh();
+                }}
+              >
+                <PlusIcon />
               </Button>
             </BetterTooltip>
           </div>

components/custom/chat-header.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import { useWindowSize } from 'usehooks-ts';
 
 import { ModelSelector } from '@/components/custom/model-selector';
@@ -12,6 +13,7 @@ import { PlusIcon, VercelIcon } from './icons';
 import { useSidebar } from '../ui/sidebar';
 
 export function ChatHeader({ selectedModelId }: { selectedModelId: string }) {
+  const router = useRouter();
   const { open } = useSidebar();
 
   const { width: windowWidth } = useWindowSize();
@@ -24,12 +26,13 @@ export function ChatHeader({ selectedModelId }: { selectedModelId: string }) {
           <Button
             variant="outline"
             className="order-2 md:order-1 md:px-2 px-2 md:h-fit ml-auto md:ml-0"
-            asChild
+            onClick={() => {
+              router.push('/');
+              router.refresh();
+            }}
           >
-            <Link href="/">
-              <PlusIcon />
-              <span className="md:sr-only">New Chat</span>
-            </Link>
+            <PlusIcon />
+            <span className="md:sr-only">New Chat</span>
           </Button>
         </BetterTooltip>
       )}