Tweak styles of header and history (#487)

components/custom/app-sidebar.tsx

@@ -57,33 +57,6 @@ export function AppSidebar({ user }: { user: User | undefined }) {
         </SidebarGroup>
       </SidebarContent>
       <SidebarFooter className="gap-0">
-        <SidebarGroup>
-          <SidebarGroupContent>
-            <Card className="p-4 flex flex-col gap-4 relative rounded-lg shadow-none border-none">
-              <a
-                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=[{%22type%22:%22postgres%22},{%22type%22:%22blob%22}]"
-                className="absolute inset-0 rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <span className="sr-only">Deploy</span>
-              </a>
-              <CardHeader className="p-0">
-                <CardTitle className="text-base">Deploy your own</CardTitle>
-                <CardDescription className="text-sm">
-                  Open Source Chatbot template built with Next.js and the AI SDK
-                  by Vercel.
-                </CardDescription>
-              </CardHeader>
-              <CardFooter className="p-0">
-                <Button size="sm" className="w-full h-8 py-0 justify-start">
-                  <VercelIcon size={16} />
-                  Deploy with Vercel
-                </Button>
-              </CardFooter>
-            </Card>
-          </SidebarGroupContent>
-        </SidebarGroup>
         {user && (
           <SidebarGroup>
             <SidebarGroupContent>

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">
+      {(!open || windowWidth < 768) && (
-        <Button
+        <BetterTooltip content="New Chat">
-          variant="ghost"
+          <Button
-          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"
+            variant="outline"
-          asChild
+            className="order-2 md:order-1 md:px-2 px-2 md:h-fit ml-auto md:ml-0"
-        >
+            asChild
-          <Link href="/">
+          >
-            <PlusIcon />
+            <Link href="/">
-            <span className="md:sr-only">New Chat</span>
+              <PlusIcon />
-          </Link>
+              <span className="md:sr-only">New Chat</span>
-        </Button>
+            </Link>
-      </BetterTooltip>
+          </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>
   );
 }

components/custom/chat.tsx

@@ -70,7 +70,7 @@ export function Chat({
         <ChatHeader selectedModelId={selectedModelId} />
         <div
           ref={messagesContainerRef}
-          className="flex flex-col min-w-0 gap-6 flex-1 overflow-y-scroll"
+          className="flex flex-col min-w-0 gap-6 flex-1 overflow-y-scroll pt-4"
         >
           {messages.length === 0 && <Overview />}
 

components/custom/icons.tsx

@@ -762,3 +762,18 @@ export const CopyIcon = ({ size = 16 }: { size?: number }) => (
     ></path>
   </svg>
 );
+
+export const ChevronDownIcon = ({ size = 16 }: { size?: number }) => (
+  <svg
+    height={size}
+    strokeLinejoin="round"
+    viewBox="0 0 16 16"
+    width={size}
+    style={{ color: 'currentcolor' }}
+  >
+    <path
+      d="M12.0607 6.74999L11.5303 7.28032L8.7071 10.1035C8.31657 10.4941 7.68341 10.4941 7.29288 10.1035L4.46966 7.28032L3.93933 6.74999L4.99999 5.68933L5.53032 6.21966L7.99999 8.68933L10.4697 6.21966L11 5.68933L12.0607 6.74999Z"
+      fill="currentColor"
+    ></path>
+  </svg>
+);

components/custom/model-selector.tsx

@@ -14,6 +14,8 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { cn } from '@/lib/utils';
 
+import { ChevronDownIcon } from './icons';
+
 export function ModelSelector({
   selectedModelId,
   className,
@@ -34,13 +36,13 @@ export function ModelSelector({
       <DropdownMenuTrigger
         asChild
         className={cn(
-          'px-2 w-fit data-[state=open]:bg-accent data-[state=open]:text-accent-foreground md:h-8 [&>svg]:!size-5 md:[&>svg]:!size-4',
+          'w-fit data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
           className
         )}
       >
-        <Button variant="ghost">
+        <Button variant="outline" className="md:px-2 md:h-[34px]">
           {selectModel?.label}
-          <ChevronDown className="text-muted-foreground" />
+          <ChevronDownIcon />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="min-w-[300px]">

components/custom/sidebar-history.tsx

@@ -32,7 +32,6 @@ import {
 import {
   SidebarGroup,
   SidebarGroupContent,
-  SidebarGroupLabel,
   SidebarMenu,
   SidebarMenuAction,
   SidebarMenuButton,
@@ -136,12 +135,8 @@ export function SidebarHistory({ user }: { user: User | undefined }) {
   if (!user) {
     return (
       <SidebarGroup>
-        <div className="px-2 py-1 text-xs text-sidebar-foreground/50">
-          Today
-        </div>
         <SidebarGroupContent>
-          <div className="text-zinc-500 h-dvh w-full flex flex-row justify-center items-center text-sm gap-2">
+          <div className="text-zinc-500 w-full flex flex-row justify-center items-center text-sm gap-2">
-            <InfoIcon />
             <div>Login to save and revisit previous chats!</div>
           </div>
         </SidebarGroupContent>
@@ -181,18 +176,12 @@ export function SidebarHistory({ user }: { user: User | undefined }) {
   if (history?.length === 0) {
     return (
       <SidebarGroup>
-        <div className="px-2 py-1 text-xs text-sidebar-foreground/50">
-          Today
-        </div>
         <SidebarGroupContent>
-          <SidebarMenu>
+          <div className="text-zinc-500 w-full flex flex-row justify-center items-center text-sm gap-2">
-            <SidebarMenuItem>
+            <div>
-              <SidebarMenuButton>
+              Your conversations will appear here once you start chatting!
-                <InfoIcon />
+            </div>
-                <span>No previous chats</span>
+          </div>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          </SidebarMenu>
         </SidebarGroupContent>
       </SidebarGroup>
     );

components/custom/sidebar-toggle.tsx

@@ -16,10 +16,10 @@ export function SidebarToggle({
     <BetterTooltip content="Toggle Sidebar" align="start">
       <Button
         onClick={toggleSidebar}
-        variant="ghost"
+        variant="outline"
         className="md:px-2 md:h-fit"
       >
-        <SidebarLeftIcon />
+        <SidebarLeftIcon size={16} />
       </Button>
     </BetterTooltip>
   );