claude-code/src/components/messages/UserImageMessage.tsx

import * as React from 'react';
import { pathToFileURL } from 'url';
import { Box, Link, supportsHyperlinks, Text } from '@anthropic/ink';
import { getStoredImagePath } from '../../utils/imageStore.js';
import { MessageResponse } from '../MessageResponse.js';

type Props = {
  imageId?: number;
  addMargin?: boolean;
};

/**
 * Renders an image attachment in user messages.
 * Shows as a clickable link if the image is stored and terminal supports hyperlinks.
 * Uses MessageResponse styling to appear connected to the message above,
 * unless addMargin is true (image starts a new user turn without text).
 */
export function UserImageMessage({ imageId, addMargin }: Props): React.ReactNode {
  const label = imageId ? `[Image #${imageId}]` : '[Image]';
  const imagePath = imageId ? getStoredImagePath(imageId) : null;

  const content =
    imagePath && supportsHyperlinks() ? (
      <Link url={pathToFileURL(imagePath).href}>
        <Text>{label}</Text>
      </Link>
    ) : (
      <Text>{label}</Text>
    );

  // When this image starts a new user turn (no text before it),
  // show with margin instead of the connected line style
  if (addMargin) {
    return <Box marginTop={1}>{content}</Box>;
  }

  return <MessageResponse>{content}</MessageResponse>;
}