Remove showing image URL in new tab

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import type { SxProps } from '@mui/joy/styles/types';
-import { Box, Checkbox, Chip, CircularProgress, LinearProgress, Link, ListDivider, ListItem, ListItemDecorator, MenuItem, Radio, Typography } from '@mui/joy';
+import { Box, Checkbox, Chip, CircularProgress, LinearProgress, ListDivider, ListItem, ListItemDecorator, MenuItem, Radio, Typography } from '@mui/joy';
 import AttachmentIcon from '@mui/icons-material/Attachment';
 import ClearIcon from '@mui/icons-material/Clear';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
@@ -10,7 +10,6 @@ import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-import LaunchIcon from '@mui/icons-material/Launch';
 import ReadMoreIcon from '@mui/icons-material/ReadMore';
 import VerticalAlignBottomIcon from '@mui/icons-material/VerticalAlignBottom';
 import VisibilityIcon from '@mui/icons-material/Visibility';
@@ -19,7 +18,6 @@ import { CloseablePopup } from '~/common/components/CloseablePopup';
 import { DMessageAttachmentFragment, DMessageDocPart, DMessageImageRefPart, isDocPart, isImageRefPart } from '~/common/stores/chat/chat.fragments';
 import { LiveFileIcon } from '~/common/livefile/liveFile.icons';
 import { copyToClipboard } from '~/common/util/clipboardUtils';
-import { showImageDataURLInNewTab } from '~/common/util/imageUtils';
 import { useUIPreferencesStore } from '~/common/stores/store-ui';
 
 import type { AttachmentDraftId } from '~/common/attachment-drafts/attachment.types';
@@ -311,13 +309,23 @@ export function LLMAttachmentMenu(props: {
               <Typography level='body-sm' sx={indicatorGapSx}>
                 {draftInput.urlImage.mimeType} · {draftInput.urlImage.width} x {draftInput.urlImage.height} · {draftInput.urlImage.imgDataUrl?.length.toLocaleString()}
                 {' · '}
-                <Link onClick={(event) => {
-                  event.preventDefault();
-                  event.stopPropagation();
-                  void showImageDataURLInNewTab(draftInput?.urlImage?.imgDataUrl || '');
+                <Chip component='span' size='sm' color='primary' variant='outlined' startDecorator={<VisibilityIcon />} onClick={(event) => {
+                  if (draftInput?.urlImage?.imgDataUrl) {
+                    // Invoke the viewer but with a virtual 'temp' part description to see this preview image
+                    handleViewImageRefPart(event, {
+                      pt: 'image_ref',
+                      dataRef: {
+                        reftype: 'url',
+                        url: draftInput.urlImage.imgDataUrl,
+                      },
+                      altText: draft.label || 'URL Image Preview',
+                      width: draftInput.urlImage.width || undefined,
+                      height: draftInput.urlImage.height || undefined,
+                    });
+                  }
                 }}>
-                  open <LaunchIcon sx={{ mx: 0.5, fontSize: 16 }} />
-                </Link>
+                  view
+                </Chip>
               </Typography>
             )}
 

src/common/util/imageUtils.ts

@@ -8,7 +8,7 @@
 import { DEFAULT_ADRAFT_IMAGE_MIMETYPE, DEFAULT_ADRAFT_IMAGE_QUALITY } from '../attachment-drafts/attachment.pipeline';
 
 import { asyncCanvasToBlobWithValidation } from './canvasUtils';
-import { convert_Base64DataURL_To_Base64WithMimeType, convert_Base64WithMimeType_To_Blob, convert_Blob_To_Base64 } from './blobUtils';
+import { convert_Base64WithMimeType_To_Blob, convert_Blob_To_Base64 } from './blobUtils';
 
 // configuration
 const IMAGE_DIMENSIONS = {
@@ -26,27 +26,6 @@ export type CommonImageMimeTypes = 'image/png' | 'image/jpeg' | 'image/webp';
 export type LLMImageResizeMode = 'openai-low-res' | 'openai-high-res' | 'google' | 'anthropic' | 'thumbnail-128' | 'thumbnail-256';
 
 
-/**
- * Opens an image Data URL in a new tab
- */
-export async function showImageDataURLInNewTab(imageDataURL: string) {
-  try {
-    const { base64Data, mimeType } = convert_Base64DataURL_To_Base64WithMimeType(imageDataURL, 'showImageDataURLInNewTab');
-    const imageBlob = await convert_Base64WithMimeType_To_Blob(base64Data, mimeType, 'showImageDataURLInNewTab');
-    const blobURL = URL.createObjectURL(imageBlob);
-
-    if (showBlobObjectURLInNewTab(blobURL)) {
-      return blobURL;
-    } else {
-      URL.revokeObjectURL(blobURL);
-      return null;
-    }
-  } catch (error) {
-    console.warn('showImageDataURLInNewTab: Failed to convert image Data URL to Blob URL.', error);
-    return null;
-  }
-}
-
 /**
  * Opens a blob URL in a new tab
  * @returns true if window.open succeeded, false otherwise