Tweak styles of header and history (#487)
This commit is contained in:
Jeremy
GitHub
parent
cab9fddecc
commit
94f563f179
7 changed files with 65 additions and 64 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,29 @@
|
|||
'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 />
|
||||
{(!open || windowWidth < 768) && (
|
||||
<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"
|
||||
variant="outline"
|
||||
className="order-2 md:order-1 md:px-2 px-2 md:h-fit ml-auto md:ml-0"
|
||||
asChild
|
||||
>
|
||||
<Link href="/">
|
||||
|
|
@ -23,10 +32,23 @@ export function ChatHeader({ selectedModelId }: { selectedModelId: string }) {
|
|||
</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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 />}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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]">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<InfoIcon />
|
||||
<div className="text-zinc-500 w-full flex flex-row justify-center items-center text-sm gap-2">
|
||||
<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>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton>
|
||||
<InfoIcon />
|
||||
<span>No previous chats</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
<div className="text-zinc-500 w-full flex flex-row justify-center items-center text-sm gap-2">
|
||||
<div>
|
||||
Your conversations will appear here once you start chatting!
|
||||
</div>
|
||||
</div>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue