Tweak styles of header and history (#487)

components/custom/chat-header.tsx

@@ -1,32 +1,54 @@
+'use client';
+
 import Link from 'next/link';
+import { useWindowSize } from 'usehooks-ts';
 
 import { ModelSelector } from '@/components/custom/model-selector';
 import { SidebarToggle } from '@/components/custom/sidebar-toggle';
 import { Button } from '@/components/ui/button';
 import { BetterTooltip } from '@/components/ui/tooltip';
 
-import { PlusIcon } from './icons';
+import { PlusIcon, VercelIcon } from './icons';
+import { useSidebar } from '../ui/sidebar';
 
 export function ChatHeader({ selectedModelId }: { selectedModelId: string }) {
+  const { open } = useSidebar();
+
+  const { width: windowWidth } = useWindowSize();
+
   return (
-    <header className="flex h-16 sticky top-0 bg-background md:h-12 items-center px-2 md:px-2 gap-2">
+    <header className="flex sticky top-0 bg-background py-1.5 items-center px-2 md:px-2 gap-2">
       <SidebarToggle />
-      <BetterTooltip content="New Chat">
-        <Button
-          variant="ghost"
-          className="w-auto md:size-8 [&>svg]:!size-5 md:[&>svg]:!size-4 pl-2 md:p-0 order-2 md:order-1 ml-auto md:ml-0 md:hidden group-data-[state=collapsed]/sidebar-wrapper:flex"
-          asChild
-        >
-          <Link href="/">
-            <PlusIcon />
-            <span className="md:sr-only">New Chat</span>
-          </Link>
-        </Button>
-      </BetterTooltip>
+      {(!open || windowWidth < 768) && (
+        <BetterTooltip content="New Chat">
+          <Button
+            variant="outline"
+            className="order-2 md:order-1 md:px-2 px-2 md:h-fit ml-auto md:ml-0"
+            asChild
+          >
+            <Link href="/">
+              <PlusIcon />
+              <span className="md:sr-only">New Chat</span>
+            </Link>
+          </Button>
+        </BetterTooltip>
+      )}
       <ModelSelector
         selectedModelId={selectedModelId}
         className="order-1 md:order-2"
       />
+      <Button
+        className="hidden md:flex py-1.5 px-2 h-fit md:h-[34px] order-4 md:ml-auto"
+        asChild
+      >
+        <Link
+          href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai-chatbot&env=AUTH_SECRET,OPENAI_API_KEY&envDescription=Learn%20more%20about%20how%20to%20get%20the%20API%20Keys%20for%20the%20application&envLink=https%3A%2F%2Fgithub.com%2Fvercel%2Fai-chatbot%2Fblob%2Fmain%2F.env.example&demo-title=AI%20Chatbot&demo-description=An%20Open-Source%20AI%20Chatbot%20Template%20Built%20With%20Next.js%20and%20the%20AI%20SDK%20by%20Vercel.&demo-url=https%3A%2F%2Fchat.vercel.ai&stores=%5B%7B%22type%22:%22postgres%22%7D,%7B%22type%22:%22blob%22%7D%5D"
+          target="_noblank"
+        >
+          <VercelIcon size={16} />
+          Deploy with Vercel
+        </Link>
+      </Button>
     </header>
   );
 }