fix: pass down id to append

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
+      id,
+      body: {
+        id
+      }
     })
 
   return (