Message rendering (#6868)

Co-authored-by: luowei <glpat-EjySCyNjWiLqAED-YmwM>
Co-authored-by: crazywoola <427733928@qq.com>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>

web/app/components/base/image-uploader/audio-preview.tsx

@@ -0,0 +1,38 @@
+import type { FC } from 'react'
+import { createPortal } from 'react-dom'
+import { RiCloseLine } from '@remixicon/react'
+
+type AudioPreviewProps = {
+  url: string
+  title: string
+  onCancel: () => void
+}
+const AudioPreview: FC<AudioPreviewProps> = ({
+  url,
+  title,
+  onCancel,
+}) => {
+  return createPortal(
+    <div className='fixed inset-0 p-8 flex items-center justify-center bg-black/80 z-[1000]' onClick={e => e.stopPropagation()}>
+      <div>
+        <audio controls title={title} autoPlay={false} preload="metadata">
+          <source
+            type="audio/mpeg"
+            src={url}
+            className='max-w-full max-h-full'
+          />
+        </audio>
+      </div>
+      <div
+        className='absolute top-6 right-6 flex items-center justify-center w-8 h-8 bg-white/[0.08] rounded-lg backdrop-blur-[2px] cursor-pointer'
+        onClick={onCancel}
+      >
+        <RiCloseLine className='w-4 h-4 text-gray-500'/>
+      </div>
+    </div>
+    ,
+    document.body,
+  )
+}
+
+export default AudioPreview

web/app/components/base/image-uploader/image-preview.tsx

@@ -1,19 +1,43 @@
 import type { FC } from 'react'
+import { useRef } from 'react'
+import { t } from 'i18next'
 import { createPortal } from 'react-dom'
-import { RiCloseLine } from '@remixicon/react'
+import { RiCloseLine, RiExternalLinkLine } from '@remixicon/react'
+import Tooltip from '@/app/components/base/tooltip'
+import { randomString } from '@/utils'
 
 type ImagePreviewProps = {
   url: string
+  title: string
   onCancel: () => void
 }
 const ImagePreview: FC<ImagePreviewProps> = ({
   url,
+  title,
   onCancel,
 }) => {
+  const selector = useRef(`copy-tooltip-${randomString(4)}`)
+
+  const openInNewTab = () => {
+    // Open in a new window, considering the case when the page is inside an iframe
+    if (url.startsWith('http')) {
+      window.open(url, '_blank')
+    }
+    else if (url.startsWith('data:image')) {
+      // Base64 image
+      const win = window.open()
+      win?.document.write(`<img src="${url}" alt="${title}" />`)
+    }
+    else {
+      console.error('Unable to open image', url)
+    }
+  }
+
   return createPortal(
     <div className='fixed inset-0 p-8 flex items-center justify-center bg-black/80 z-[1000]' onClick={e => e.stopPropagation()}>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
-        alt='preview image'
+        alt={title}
         src={url}
         className='max-w-full max-h-full'
       />
@@ -23,6 +47,18 @@ const ImagePreview: FC<ImagePreviewProps> = ({
       >
         <RiCloseLine className='w-4 h-4 text-white' />
       </div>
+      <Tooltip
+        selector={selector.current}
+        content={(t('common.operation.openInNewTab') ?? 'Open in new tab')}
+        className='z-10'
+      >
+        <div
+          className='absolute top-6 right-16 flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer'
+          onClick={openInNewTab}
+        >
+          <RiExternalLinkLine className='w-4 h-4 text-white' />
+        </div>
+      </Tooltip>
     </div>,
     document.body,
   )

web/app/components/base/image-uploader/video-preview.tsx

@@ -0,0 +1,38 @@
+import type { FC } from 'react'
+import { createPortal } from 'react-dom'
+import { RiCloseLine } from '@remixicon/react'
+
+type VideoPreviewProps = {
+  url: string
+  title: string
+  onCancel: () => void
+}
+const VideoPreview: FC<VideoPreviewProps> = ({
+  url,
+  title,
+  onCancel,
+}) => {
+  return createPortal(
+    <div className='fixed inset-0 p-8 flex items-center justify-center bg-black/80 z-[1000]' onClick={e => e.stopPropagation()}>
+      <div>
+        <video controls title={title} autoPlay={false} preload="metadata">
+          <source
+            type="video/mp4"
+            src={url}
+            className='max-w-full max-h-full'
+          />
+        </video>
+      </div>
+      <div
+        className='absolute top-6 right-6 flex items-center justify-center w-8 h-8 bg-white/[0.08] rounded-lg backdrop-blur-[2px] cursor-pointer'
+        onClick={onCancel}
+      >
+        <RiCloseLine className='w-4 h-4 text-gray-500'/>
+      </div>
+    </div>
+    ,
+    document.body,
+  )
+}
+
+export default VideoPreview