From 1a948afe12e04b70b911d608b11c4c7ca6da8acf Mon Sep 17 00:00:00 2001
From: Jeremy <git@jrmyphlmn.com>
Date: Tue, 29 Apr 2025 17:47:01 -0700
Subject: [PATCH] fix: conditionally render attachments component (#967)

---
 components/message.tsx | 29 +++++++++++++++--------------
 package.json           |  2 +-
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/components/message.tsx b/components/message.tsx
index 6b49e89..1bd6032 100644
--- a/components/message.tsx
+++ b/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 && (
-              <div
-                data-testid={`message-attachments`}
-                className="flex flex-row justify-end gap-2"
-              >
-                {message.experimental_attachments.map((attachment) => (
-                  <PreviewAttachment
-                    key={attachment.url}
-                    attachment={attachment}
-                  />
-                ))}
-              </div>
-            )}
+            {message.experimental_attachments &&
+              message.experimental_attachments.length > 0 && (
+                <div
+                  data-testid={`message-attachments`}
+                  className="flex flex-row justify-end gap-2"
+                >
+                  {message.experimental_attachments.map((attachment) => (
+                    <PreviewAttachment
+                      key={attachment.url}
+                      attachment={attachment}
+                    />
+                  ))}
+                </div>
+              )}
 
             {message.parts?.map((part, index) => {
               const { type } = part;
diff --git a/package.json b/package.json
index 1f66d1c..d0a9fd2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ai-chatbot",
-  "version": "3.0.12",
+  "version": "3.0.13",
   "private": true,
   "scripts": {
     "dev": "next dev --turbo",