fix(chat): preview inline images with shared lightbox

Author: Sg312

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content-images.test.tsx

@@ -116,6 +116,28 @@ describe('standard Markdown private chat images', () => {
       'https://example.com/chart.png'
     )
   })
+  it('opens the same authenticated image in the shared attachment preview with zoom and dismissal', async () => {
+    await render('![Button diagram](/tmp/manual.png)')
+    const preview = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Preview Button diagram"]'
+    )
+    const src = container.querySelector('img')?.getAttribute('src')
+    expect(preview).not.toBeNull()
+    expect(document.querySelector('[role="dialog"]')).toBeNull()
+    await act(async () => preview?.click())
+    const enlarged = document.querySelector<HTMLImageElement>('[role="dialog"] img')
+    expect(enlarged?.getAttribute('src')).toBe(src)
+    expect(enlarged?.getAttribute('alt')).toBe('Button diagram')
+    await act(async () =>
+      document.querySelector<HTMLButtonElement>('button[aria-label="Zoom in"]')?.click()
+    )
+    expect(enlarged?.style.zoom).toBe('1.25')
+    await act(async () =>
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+    )
+    expect(document.querySelector('[role="dialog"]')).toBeNull()
+    expect(container.querySelector('img')?.getAttribute('src')).toBe(src)
+  })
   it('never displays image syntax inside fenced or inline code', async () => {
     await render('`![Code](/tmp/x.png)`\n\n```markdown\n![Example](files/x.png)\n```')
     expect(container.querySelector('img')).toBeNull()

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx

@@ -21,7 +21,14 @@ import 'prismjs/components/prism-bash'
 import 'prismjs/components/prism-css'
 import 'prismjs/components/prism-markup'
 import '@sim/emcn/components/code/code.css'
-import { Checkbox, CopyCodeButton, cn, languages, highlight as prismHighlight } from '@sim/emcn'
+import {
+  Checkbox,
+  CopyCodeButton,
+  cn,
+  Lightbox,
+  languages,
+  highlight as prismHighlight,
+} from '@sim/emcn'
 import { extractTextContent } from '@/lib/core/utils/react-node-text'
 import {
   inlineChatImageUrl,
@@ -448,12 +455,20 @@ const MARKDOWN_COMPONENTS = {
   img({ src, alt }: ComponentPropsWithoutRef<'img'>) {
     if (typeof src !== 'string' || !src) return null
     return (
-      <img
-        src={src}
-        alt={alt ?? ''}
-        loading='lazy'
-        className='my-4 h-auto max-w-full rounded-lg border border-[var(--border)]'
-      />
+      <Lightbox src={src} alt={alt ?? ''}>
+        <button
+          type='button'
+          aria-label={alt ? `Preview ${alt}` : 'Preview image'}
+          className='my-4 block max-w-full cursor-zoom-in rounded-lg'
+        >
+          <img
+            src={src}
+            alt={alt ?? ''}
+            loading='lazy'
+            className='m-0 block h-auto max-h-[360px] w-auto max-w-full rounded-lg border border-[var(--border)] object-contain'
+          />
+        </button>
+      </Lightbox>
     )
   },
 }