feat: implement sharing page

app/layout.tsx

@@ -48,7 +48,9 @@ export default function RootLayout({ children }: RootLayoutProps) {
             <div className="flex min-h-screen flex-col">
               {/* @ts-ignore */}
               <Header />
-              <main className="flex-1 bg-muted/50">{children}</main>
+              <main className="flex flex-1 flex-col bg-muted/50">
+                {children}
+              </main>
             </div>
             <TailwindIndicator />
           </Providers>

app/share/[id]/page.tsx

@@ -1,10 +1,11 @@
 import { type Metadata } from 'next'
-import { auth } from '@clerk/nextjs'
-
-import { Chat } from '@/components/chat'
-import { getChat, getSharedChat } from '@/app/actions'
 import { notFound } from 'next/navigation'
 
+import { formatDate } from '@/lib/utils'
+import { getSharedChat } from '@/app/actions'
+import { ChatList } from '@/components/chat-list'
+import { FooterText } from '@/components/footer'
+
 // export const runtime = 'edge'
 export const preferredRegion = 'home'
 
@@ -17,8 +18,8 @@ export interface SharePageProps {
 export async function generateMetadata({
   params
 }: SharePageProps): Promise<Metadata> {
-  const { user } = await auth()
-  const chat = await getChat(params.id, user?.id ?? '')
+  const chat = await getSharedChat(params.id)
+
   return {
     title: chat?.title.slice(0, 50) ?? 'Chat'
   }
@@ -31,5 +32,22 @@ export default async function SharePage({ params }: SharePageProps) {
     notFound()
   }
 
-  return <Chat id={chat.id} initialMessages={chat.messages} />
+  return (
+    <>
+      <div className="flex-1 space-y-6">
+        <div className="border-b bg-background px-4 py-6 md:px-6 md:py-8">
+          <div className="mx-auto max-w-2xl md:px-6">
+            <div className="space-y-1">
+              <h1 className="text-2xl font-bold">{chat.title}</h1>
+              <div className="text-sm text-muted-foreground">
+                {formatDate(chat.createdAt)} · {chat.messages.length} messages
+              </div>
+            </div>
+          </div>
+        </div>
+        <ChatList messages={chat.messages} />
+      </div>
+      <FooterText className="py-8" />
+    </>
+  )
 }

app/sign-in/[[...sign-in]]/page.tsx

@@ -4,6 +4,7 @@ import { cn } from '@/lib/utils'
 import { ExternalLink } from '@/components/external-link'
 import { buttonVariants } from '@/components/ui/button'
 import { IconSpinner } from '@/components/ui/icons'
+import { FooterText } from '@/components/footer'
 
 export default function SignInPage() {
   return (
@@ -27,14 +28,7 @@ export default function SignInPage() {
               }
             }}
           />
-          <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 />
         </ClerkLoaded>
       </div>
     </div>

app/sign-up/[[...sign-up]]/page.tsx

@@ -4,6 +4,7 @@ import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/components/ui/button'
 import { ExternalLink } from '@/components/external-link'
 import { IconSpinner } from '@/components/ui/icons'
+import { FooterText } from '@/components/footer'
 
 export default function Page() {
   return (
@@ -28,14 +29,7 @@ export default function Page() {
               }
             }}
           />
-          <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 />
         </ClerkLoaded>
       </div>
     </div>

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
 }
 

middleware.ts

@@ -1,7 +1,9 @@
 import { authMiddleware } from '@clerk/nextjs'
 
 // @see https://clerk.dev
-export default authMiddleware()
+export default authMiddleware({
+  publicRoutes: ['/share/:id']
+})
 
 export const config = {
   matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)']

tailwind.config.js

@@ -87,7 +87,7 @@ module.exports = {
       },
       animation: {
         'slide-from-left':
-          'slide-from-left 0.4s cubic-bezier(0.82, 0.085, 0.395, 0.895)',
+          'slide-from-left 0.3s cubic-bezier(0.82, 0.085, 0.395, 0.895)',
         'slide-to-left':
           'slide-to-left 0.25s cubic-bezier(0.82, 0.085, 0.395, 0.895)',
         'accordion-down': 'accordion-down 0.2s ease-out',