fix(ux): have user message display a short path for pasted images (#17613)

packages/cli/src/ui/components/messages/UserMessage.test.tsx

@@ -44,4 +44,16 @@ describe('UserMessage', () => {
 
     expect(output).toMatchSnapshot();
   });
+
+  it('transforms image paths in user message', () => {
+    const message = 'Check out this image: @/path/to/my-image.png';
+    const { lastFrame } = renderWithProviders(
+      <UserMessage text={message} width={80} />,
+      { width: 80 },
+    );
+    const output = lastFrame();
+
+    expect(output).toContain('[Image my-image.png]');
+    expect(output).toMatchSnapshot();
+  });
 });

packages/cli/src/ui/components/messages/UserMessage.tsx

@@ -5,10 +5,15 @@
  */
 
 import type React from 'react';
+import { useMemo } from 'react';
 import { Text, Box } from 'ink';
 import { theme } from '../../semantic-colors.js';
 import { SCREEN_READER_USER_PREFIX } from '../../textConstants.js';
 import { isSlashCommand as checkIsSlashCommand } from '../../utils/commandUtils.js';
+import {
+  calculateTransformationsForLine,
+  calculateTransformedLine,
+} from '../shared/text-buffer.js';
 import { HalfLinePaddedBox } from '../shared/HalfLinePaddedBox.js';
 import { DEFAULT_BACKGROUND_OPACITY } from '../../constants.js';
 import { useConfig } from '../../contexts/ConfigContext.js';
@@ -27,6 +32,24 @@ export const UserMessage: React.FC<UserMessageProps> = ({ text, width }) => {
 
   const textColor = isSlashCommand ? theme.text.accent : theme.text.secondary;
 
+  const displayText = useMemo(() => {
+    if (!text) return text;
+    return text
+      .split('\n')
+      .map((line) => {
+        const transformations = calculateTransformationsForLine(line);
+        // We pass a cursor position of [-1, -1] so that no transformations are expanded (e.g. images remain collapsed)
+        const { transformedLine } = calculateTransformedLine(
+          line,
+          0, // line index doesn't matter since cursor is [-1, -1]
+          [-1, -1],
+          transformations,
+        );
+        return transformedLine;
+      })
+      .join('\n');
+  }, [text]);
+
   return (
     <HalfLinePaddedBox
       backgroundBaseColor={theme.border.default}
@@ -51,7 +74,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({ text, width }) => {
         </Box>
         <Box flexGrow={1}>
           <Text wrap="wrap" color={textColor}>
-            {text}
+            {displayText}
           </Text>
         </Box>
       </Box>

packages/cli/src/ui/components/messages/__snapshots__/UserMessage.test.tsx.snap

@@ -18,3 +18,9 @@ exports[`UserMessage > renders slash command message 1`] = `
  > /help
 ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄"
 `;
+
+exports[`UserMessage > transforms image paths in user message 1`] = `
+"▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
+ > Check out this image: [Image my-image.png]
+▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄"
+`;