Attachment buttons: full name in tooltip. Fixes #946

src/apps/chat/components/composer/llmattachments/LLMAttachmentButton.tsx

@@ -271,6 +271,17 @@ function LLMAttachmentButton(props: {
   if (isInputLoading)
     return <InputLoadingPlaceholder label={draft.label} />;
 
+  // tooltip for truncated filenames (only show when menu is closed)
+  const displayedLabel = attachmentLabelText(draft);
+  const showFilenameTooltip = !props.menuShown && !isOutputLoading && displayedLabel !== draft.label;
+
+  // label element (reused with/without tooltip)
+  const labelElement = (
+    <Typography level='title-sm' sx={{ whiteSpace: 'nowrap' }}>
+      {isOutputLoading ? 'Converting... ' : displayedLabel}
+    </Typography>
+  );
+
   return (
     <Button
       size='sm'
@@ -294,10 +305,11 @@ function LLMAttachmentButton(props: {
       {/* Icons: Web Page Screenshot, Converter[s] */}
       {attachmentIcons(draft, props.menuShown, props.onViewImageRefPart)}
 
-      {/* Label */}
-      <Typography level='title-sm' sx={{ whiteSpace: 'nowrap' }}>
-        {isOutputLoading ? 'Converting... ' : attachmentLabelText(draft)}
-      </Typography>
+      {/* Label (with tooltip for truncated filenames) */}
+      {showFilenameTooltip
+        ? <TooltipOutlined title={<span style={{ wordBreak: 'break-all' }}>{draft.label}</span>}>{labelElement}</TooltipOutlined>
+        : labelElement
+      }
 
       {/* Is Converting icon */}
       {isOutputLoading && <CircularProgress color='success' size='sm' />}

src/apps/chat/components/message/fragments-attachment-doc/DocAttachmentFragmentButton.tsx

@@ -24,6 +24,15 @@ export const DocSelColor: ColorPaletteProp = 'primary';
 const DocUnselColor: ColorPaletteProp = 'primary';
 
 
+const _styles = {
+  label: {
+    whiteSpace: 'nowrap',
+    fontWeight: 'md',
+    minWidth: 48,
+  },
+} as const;
+
+
 export function buttonIconForFragment(part: DMessageAttachmentFragment['part']): React.ComponentType<any> {
   const pt = part.pt;
   switch (pt) {
@@ -146,10 +155,14 @@ export function DocAttachmentFragmentButton(props: {
   if (!isDocPart(fragment.part))
     return 'Unexpected: ' + fragment.part.pt;
 
-  const buttonText = ellipsizeMiddle(fragment.part.l1Title || fragment.title || 'Document', 28 /* totally arbitrary length */);
-
   const Icon = isSelected ? EditRoundedIcon : buttonIconForFragment(fragment.part);
 
+  const fullTitle = fragment.part.l1Title || fragment.title || 'Document';
+  const buttonText = ellipsizeMiddle(fullTitle, 28 /* totally arbitrary length */);
+  const showFilenameTooltip = fullTitle !== buttonText;
+
+  const labelContent = <Box sx={_styles.label}>{buttonText}</Box>;
+
   return (
     <Button
       size={props.contentScaling === 'md' ? 'md' : 'sm'}
@@ -171,9 +184,10 @@ export function DocAttachmentFragmentButton(props: {
         </Box>
       )}
       <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', paddingX: '0.5rem' }}>
-        <Box sx={{ whiteSpace: 'nowrap', fontWeight: 'md', minWidth: 48 }}>
-          {buttonText}
-        </Box>
+        {showFilenameTooltip
+          ? <TooltipOutlined title={<span style={{ wordBreak: 'break-all' }}>{fullTitle}</span>}>{labelContent}</TooltipOutlined>
+          : labelContent
+        }
         {/*<Box sx={{ fontSize: 'xs', fontWeight: 'sm' }}>*/}
         {/*  {fragment.caption}*/}
         {/*</Box>*/}