fix: pass down id to append

app/page.tsx

@@ -1,16 +1,19 @@
+import { nanoid } from '@/lib/utils'
 import { Chat } from '@/components/chat'
 import { Header } from '@/components/header'
 
 // export const runtime = 'edge'
 export const preferredRegion = 'home'
 
-export default async function IndexPage() {
+export default function IndexPage() {
+  const id = nanoid()
+
   return (
     <div className="flex min-h-screen flex-col">
       {/* @ts-ignore */}
       <Header />
       <main className="flex-1 bg-muted/50">
-        <Chat />
+        <Chat id={id} />
       </main>
     </div>
   )

components/chat-message-actions.tsx

@@ -20,7 +20,7 @@ export function ChatMessageActions({
   return (
     <div
       className={cn(
-        'flex w-full items-center justify-end transition-opacity group-hover:opacity-100 md:absolute md:-right-10 md:-top-2 md:opacity-0',
+        'flex items-center justify-end transition-opacity group-hover:opacity-100 md:absolute md:-right-10 md:-top-2 md:opacity-0',
         className
       )}
       {...props}

components/chat-panel.tsx

@@ -21,6 +21,7 @@ export interface ChatPanelProps
 }
 
 export function ChatPanel({
+  id,
   isLoading,
   stop,
   append,
@@ -58,8 +59,9 @@ export function ChatPanel({
         </div>
         <div className="space-y-4 border-t bg-background px-4 py-2 shadow-lg sm:rounded-t-xl sm:border md:py-4">
           <PromptForm
-            onSubmit={value => {
-              append({
+            onSubmit={async value => {
+              await append({
+                id,
                 content: value,
                 role: 'user'
               })

components/chat.tsx

@@ -16,7 +16,10 @@ export function Chat({ id, initialMessages, className }: ChatProps) {
   const { messages, append, reload, stop, isLoading, input, setInput } =
     useChat({
       initialMessages,
+      id,
+      body: {
         id
+      }
     })
 
   return (