feat: implement sharing page

components/chat-list.tsx

@@ -17,7 +17,9 @@ export function ChatList({ messages }: ChatList) {
       {messages.map((message, index) => (
         <div key={index}>
           <ChatMessage message={message} />
-          {index < messages.length - 1 && <Separator className="my-8" />}
+          {index < messages.length - 1 && (
+            <Separator className="my-4 md:my-8" />
+          )}
         </div>
       ))}
     </div>

components/chat-panel.tsx

@@ -5,6 +5,7 @@ import { ExternalLink } from '@/components/external-link'
 import { PromptForm } from '@/components/prompt-form'
 import { ButtonScrollToBottom } from '@/components/button-scroll-to-bottom'
 import { IconRefresh, IconStop } from '@/components/ui/icons'
+import { FooterText } from '@/components/footer'
 
 export interface ChatPanelProps
   extends Pick<
@@ -70,14 +71,7 @@ export function ChatPanel({
             setInput={setInput}
             isLoading={isLoading}
           />
-          <p className="hidden px-2 text-center text-xs leading-normal text-muted-foreground sm:block">
-            Open source AI chatbot app built with{' '}
-            <ExternalLink href="https://nextjs.org">Next.js</ExternalLink> and{' '}
-            <ExternalLink href="https://vercel.com/storage/kv">
-              Vercel KV
-            </ExternalLink>
-            .
-          </p>
+          <FooterText className="hidden sm:block" />
         </div>
       </div>
     </div>

components/footer.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { ExternalLink } from '@/components/external-link'
+import { cn } from '@/lib/utils'
+
+export function FooterText({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      className={cn(
+        'px-2 text-center text-xs leading-normal text-muted-foreground',
+        className
+      )}
+      {...props}
+    >
+      Open source AI chatbot built with{' '}
+      <ExternalLink href="https://nextjs.org">Next.js</ExternalLink> and{' '}
+      <ExternalLink href="https://vercel.com/storage/kv">
+        Vercel KV
+      </ExternalLink>
+      .
+    </p>
+  )
+}

components/header.tsx

@@ -1,4 +1,4 @@
-import { Suspense } from 'react'
+import { Suspense, use } from 'react'
 
 import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/components/ui/button'
@@ -10,6 +10,7 @@ import { SidebarFooter } from '@/components/sidebar-footer'
 import { ThemeToggle } from '@/components/theme-toggle'
 import { ClearHistory } from '@/components/clear-history'
 import { clearChats } from '@/app/actions'
+import Link from 'next/link'
 
 export async function Header() {
   const user = await currentUser()
@@ -18,38 +19,53 @@ export async function Header() {
     <header className="sticky top-0 z-50 flex h-16 w-full shrink-0 items-center justify-between border-b bg-gradient-to-b from-background/10 via-background/50 to-background/80 px-4 backdrop-blur-xl">
       <div className="flex items-center">
         {/* @ts-ignore */}
-        <Sidebar user={user?.id}>
-          <Suspense fallback={<div className="flex-1 overflow-auto" />}>
-            {/* @ts-ignore */}
-            <SidebarList userId={user?.id} />
-          </Suspense>
-          <SidebarFooter>
-            <ThemeToggle />
-            <ClearHistory clearChats={clearChats} />
-          </SidebarFooter>
-        </Sidebar>
+        {user?.id ? (
+          <Sidebar>
+            <Suspense fallback={<div className="flex-1 overflow-auto" />}>
+              {/* @ts-ignore */}
+              <SidebarList userId={user?.id} />
+            </Suspense>
+            <SidebarFooter>
+              <ThemeToggle />
+              <ClearHistory clearChats={clearChats} />
+            </SidebarFooter>
+          </Sidebar>
+        ) : (
+          <Link href="https://vercel.com" target="_blank" rel="nofollow">
+            <IconVercel className="mr-2 h-6 w-6" />
+          </Link>
+        )}
         <div className="flex items-center">
           <IconSeparator className="h-6 w-6 text-muted-foreground/50" />
-          <UserButton
-            showName
-            appearance={{
-              elements: {
-                avatarBox: 'w-6 h-6 rounded-full overflow-hidden',
-                userButtonBox: 'flex-row-reverse',
-                userButtonOuterIdentifier: 'text-primary',
-                userButtonPopoverCard:
-                  'shadow-lg rounded-lg p-0 border border-border w-[200px] dark:bg-zinc-950 dark:text-zinc-50',
-                userButtonPopoverFooter:
-                  'p-4 border-t border-border [&>*]:dark:text-zinc-600',
-                userPreview: 'p-4 border-b border-border m-0',
-                userButtonPopoverActionButton: 'px-1 gap-1',
-                userButtonPopoverActionButtonText:
-                  'text-sm tracking-normal dark:text-zinc-400',
-                userButtonPopoverActionButtonIcon:
-                  'h-4 w-4 text-muted-foreground'
-              }
-            }}
-          />
+          {user?.id ? (
+            <UserButton
+              showName
+              appearance={{
+                elements: {
+                  avatarBox: 'w-6 h-6 rounded-full overflow-hidden',
+                  userButtonBox: 'flex-row-reverse',
+                  userButtonOuterIdentifier: 'text-primary',
+                  userButtonPopoverCard:
+                    'shadow-lg rounded-lg p-0 border border-border w-[200px] dark:bg-zinc-950 dark:text-zinc-50',
+                  userButtonPopoverFooter:
+                    'p-4 border-t border-border [&>*]:dark:text-zinc-600',
+                  userPreview: 'p-4 border-b border-border m-0',
+                  userButtonPopoverActionButton: 'px-1 gap-1',
+                  userButtonPopoverActionButtonText:
+                    'text-sm tracking-normal dark:text-zinc-400',
+                  userButtonPopoverActionButtonIcon:
+                    'h-4 w-4 text-muted-foreground'
+                }
+              }}
+            />
+          ) : (
+            <Link
+              href="/sign-in"
+              className={cn(buttonVariants({ variant: 'ghost' }))}
+            >
+              Sign in
+            </Link>
+          )}
         </div>
       </div>
       <div className="flex items-center justify-end space-x-2">

components/sidebar-item.tsx

@@ -27,7 +27,7 @@ export function SidebarItem({ chat, children }: SidebarItemProps) {
   return (
     <>
       <Link
-        href={chat.path || `/chat/${chat.id}`}
+        href={chat.path}
         className={cn(
           buttonVariants({ variant: 'ghost' }),
           'group w-full px-2',
@@ -50,7 +50,7 @@ export function SidebarItem({ chat, children }: SidebarItemProps) {
         >
           <span className="whitespace-nowrap">{chat.title}</span>
         </div>
-        {children}
+        {isActive && children}
       </Link>
     </>
   )

components/sidebar.tsx

@@ -13,7 +13,6 @@ import {
 import { IconSidebar } from '@/components/ui/icons'
 
 export interface SidebarProps {
-  userId?: string
   children?: React.ReactNode
 }