fix: conditionally render attachments component (#967)

components/message.tsx

@@ -18,7 +18,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
 import { MessageEditor } from './message-editor';
 import { DocumentPreview } from './document-preview';
 import { MessageReasoning } from './message-reasoning';
-import { UseChatHelpers } from '@ai-sdk/react';
+import type { UseChatHelpers } from '@ai-sdk/react';
 
 const PurePreviewMessage = ({
   chatId,
@@ -66,19 +66,20 @@ const PurePreviewMessage = ({
           )}
 
           <div className="flex flex-col gap-4 w-full">
-            {message.experimental_attachments && (
+            {message.experimental_attachments &&
-              <div
+              message.experimental_attachments.length > 0 && (
-                data-testid={`message-attachments`}
+                <div
-                className="flex flex-row justify-end gap-2"
+                  data-testid={`message-attachments`}
-              >
+                  className="flex flex-row justify-end gap-2"
-                {message.experimental_attachments.map((attachment) => (
+                >
-                  <PreviewAttachment
+                  {message.experimental_attachments.map((attachment) => (
-                    key={attachment.url}
+                    <PreviewAttachment
-                    attachment={attachment}
+                      key={attachment.url}
-                  />
+                      attachment={attachment}
-                ))}
+                    />
-              </div>
+                  ))}
-            )}
+                </div>
+              )}
 
             {message.parts?.map((part, index) => {
               const { type } = part;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-chatbot",
-  "version": "3.0.12",
+  "version": "3.0.13",
   "private": true,
   "scripts": {
     "dev": "next dev --turbo",