fux

components/dashboard/ChatDetail.tsx

@@ -283,20 +283,19 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
 
   // Send a message
   const sendMessage = async () => {
-    if (!chatId || !message.trim()) return;
+    if (!message.trim()) return;
     
-    // Optimistically add message to UI
+    // Create temporary message to show immediately
     const tempId = `temp-${Date.now()}`;
-    const tempMessage = {
+    const tempMessage: Message = {
       _id: tempId,
-      chatId,
+      sender: 'vendor',
-      sender: "vendor" as const,
       content: message.trim(),
       attachments: [],
-      read: false,
+      read: true,
       createdAt: new Date().toISOString(),
-      buyerId: chatData?.buyerId || "",
+      buyerId: chat?.buyerId || '',
-      vendorId: chatData?.vendorId || "",
+      vendorId: chat?.vendorId || '',
     };
     
     setMessages(prev => [...prev, tempMessage]);
@@ -309,7 +308,13 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
       // Use clientFetch instead of direct axios calls
       const response = await clientFetch(`/chats/${chatId}/message`, {
         method: 'POST',
-        body: JSON.stringify({ message: message.trim() }),
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ 
+          content: message.trim(),
+          attachments: []
+        }),
       });
       
       // Replace temp message with real one from server

lib/client-utils.ts

@@ -21,6 +21,12 @@ export async function clientFetch<T = any>(url: string, options: RequestInit = {
     if (!res.ok) {
       const errorData = await res.json().catch(() => ({}));
       const errorMessage = errorData.message || errorData.error || `Request failed: ${res.status} ${res.statusText}`;
+      console.error('API Error:', {
+        status: res.status,
+        url: fullUrl,
+        response: errorData,
+        method: options.method || 'GET'
+      });
       throw new Error(errorMessage);
     }