Fix empty message spacing for attachment-only user messages

Author: brandonkachen

cli/src/components/blocks/user-content-copy.tsx

@@ -37,7 +37,11 @@ export const UserContentWithCopyButton = memo(
 
     const hasContent = normalizedContent.length > 0
 
-    if (!showCopyButton || !hasContent) {
+    if (!hasContent) {
+      return null
+    }
+
+    if (!showCopyButton) {
       return (
         <text
           key={`message-content-${messageId}`}

cli/src/components/message-block.tsx

@@ -76,7 +76,6 @@ const MessageAttachments = memo(({
         flexDirection: 'row',
         gap: 1,
         flexWrap: 'wrap',
-        marginTop: 1,
       }}
     >
       {imageAttachments.map((attachment) => (
@@ -255,53 +254,55 @@ export const MessageBlock = memo(({
           </box>
         )}
 
-      {blocks ? (
-        <box
-          style={{
-            flexDirection: 'column',
-            gap: 0,
-            width: '100%',
-            paddingTop: 0,
-          }}
-        >
-          <BlocksRenderer
-            sourceBlocks={blocks}
+      <box style={{ flexDirection: 'column', gap: 1, width: '100%' }}>
+        {blocks ? (
+          <box
+            style={{
+              flexDirection: 'column',
+              gap: 0,
+              width: '100%',
+              paddingTop: 0,
+            }}
+          >
+            <BlocksRenderer
+              sourceBlocks={blocks}
+              messageId={messageId}
+              isLoading={isLoading}
+              isComplete={isComplete}
+              isUser={isUser}
+              textColor={resolvedTextColor}
+              availableWidth={availableWidth}
+              markdownPalette={markdownPalette}
+              onToggleCollapsed={onToggleCollapsed}
+              onBuildFast={onBuildFast}
+              onBuildMax={onBuildMax}
+              isLastMessage={isLastMessage}
+              contentToCopy={isUser ? content : undefined}
+            />
+          </box>
+        ) : (
+          <UserContentWithCopyButton
+            content={content}
             messageId={messageId}
             isLoading={isLoading}
             isComplete={isComplete}
             isUser={isUser}
             textColor={resolvedTextColor}
-            availableWidth={availableWidth}
-            markdownPalette={markdownPalette}
-            onToggleCollapsed={onToggleCollapsed}
-            onBuildFast={onBuildFast}
-            onBuildMax={onBuildMax}
-            isLastMessage={isLastMessage}
-            contentToCopy={isUser ? content : undefined}
-          />
-        </box>
-      ) : (
-        <UserContentWithCopyButton
-          content={content}
-          messageId={messageId}
-          isLoading={isLoading}
-          isComplete={isComplete}
-          isUser={isUser}
-          textColor={resolvedTextColor}
-          codeBlockWidth={markdownOptions.codeBlockWidth}
-          palette={markdownOptions.palette}
-          showCopyButton={isUser}
-        />
-      )}
-      {/* Show attachments for user messages */}
-      {isUser &&
-        ((attachments && attachments.length > 0) ||
-          (textAttachments && textAttachments.length > 0)) && (
-          <MessageAttachments
-            imageAttachments={attachments ?? []}
-            textAttachments={textAttachments ?? []}
+            codeBlockWidth={markdownOptions.codeBlockWidth}
+            palette={markdownOptions.palette}
+            showCopyButton={isUser}
           />
         )}
+        {/* Show attachments for user messages */}
+        {isUser &&
+          ((attachments && attachments.length > 0) ||
+            (textAttachments && textAttachments.length > 0)) && (
+            <MessageAttachments
+              imageAttachments={attachments ?? []}
+              textAttachments={textAttachments ?? []}
+            />
+          )}
+      </box>
 
       {/* Display runtime error banner for AI messages */}
       {isAi && userError && <UserErrorBanner error={userError} />}

cli/src/utils/pending-attachments.ts

@@ -1,7 +1,6 @@
 import { existsSync } from 'node:fs'
 import path from 'node:path'
 
-import { showClipboardMessage } from './clipboard'
 import { processImageFile, resolveFilePath, isImageFile } from './image-handler'
 import {
   useChatStore,
@@ -82,10 +81,9 @@ export async function addPendingImageFromFile(
     }),
   }))
 
-  // Exit image mode and show status message after successfully adding an image
+  // Exit image mode after successfully processing an image
   if (result.success) {
     exitImageModeIfActive()
-    showClipboardMessage(`🖼️ Attached ${filename}`, { durationMs: 5000 })
   }
 }