feat: refactor chat sharing implementation

app/actions.ts

@@ -2,10 +2,9 @@
 
 import { revalidatePath } from 'next/cache'
 import { kv } from '@vercel/kv'
+import { currentUser } from '@clerk/nextjs'
 
 import { type Chat } from '@/lib/types'
-import { currentUser } from '@clerk/nextjs'
-import { nanoid } from '@/lib/utils'
 
 export async function getChats(userId?: string | null) {
   if (!userId) {
@@ -52,9 +51,11 @@ export async function removeChat({ id, path }: { id: string; path: string }) {
   }
 
   const uid = await kv.hget<string>(`chat:${id}`, 'userId')
+
   if (uid !== user.id) {
     throw new Error('Unauthorized')
   }
+
   await kv.del(`chat:${id}`)
   await kv.zrem(`user:chat:${user.id}`, `chat:${id}`)
 
@@ -85,6 +86,16 @@ export async function clearChats() {
   revalidatePath('/')
 }
 
+export async function getSharedChat(id: string) {
+  const chat = await kv.hgetall<Chat>(`chat:${id}`)
+
+  if (!chat || !chat.sharePath) {
+    return null
+  }
+
+  return chat
+}
+
 export async function shareChat(chat: Chat) {
   const user = await currentUser()
 
@@ -92,23 +103,12 @@ export async function shareChat(chat: Chat) {
     throw new Error('Unauthorized')
   }
 
-  const id = nanoid()
-  const createdAt = Date.now()
-
   const payload = {
-    id,
-    title: chat.title,
-    userId: user.id,
-    createdAt,
-    path: `/share/${id}`,
-    chat
+    ...chat,
+    sharePath: `/share/${chat.id}`
   }
 
-  await kv.hmset(`share:${id}`, payload)
-  await kv.zadd(`user:share:${user.id}`, {
-    score: createdAt,
-    member: `share:${id}`
-  })
+  await kv.hmset(`chat:${chat.id}`, payload)
 
   return payload
 }

app/layout.tsx

@@ -7,7 +7,7 @@ import '@/app/globals.css'
 import { fontMono, fontSans } from '@/lib/fonts'
 import { cn } from '@/lib/utils'
 import { TailwindIndicator } from '@/components/tailwind-indicator'
-import { ThemeProvider } from '@/components/theme-provider'
+import { Providers } from '@/components/providers'
 import { Header } from '@/components/header'
 
 export const metadata: Metadata = {
@@ -44,14 +44,14 @@ export default function RootLayout({ children }: RootLayoutProps) {
           )}
         >
           <Toaster />
-          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <Providers attribute="class" defaultTheme="system" enableSystem>
             <div className="flex min-h-screen flex-col">
               {/* @ts-ignore */}
               <Header />
               <main className="flex-1 bg-muted/50">{children}</main>
             </div>
             <TailwindIndicator />
-          </ThemeProvider>
+          </Providers>
         </body>
       </html>
     </ClerkProvider>

app/share/[id]/page.tsx

@@ -0,0 +1,35 @@
+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'
+
+// export const runtime = 'edge'
+export const preferredRegion = 'home'
+
+export interface SharePageProps {
+  params: {
+    id: string
+  }
+}
+
+export async function generateMetadata({
+  params
+}: SharePageProps): Promise<Metadata> {
+  const { user } = await auth()
+  const chat = await getChat(params.id, user?.id ?? '')
+  return {
+    title: chat?.title.slice(0, 50) ?? 'Chat'
+  }
+}
+
+export default async function SharePage({ params }: SharePageProps) {
+  const chat = await getSharedChat(params.id)
+
+  if (!chat || !chat?.sharePath) {
+    notFound()
+  }
+
+  return <Chat id={chat.id} initialMessages={chat.messages} />
+}