feat(magic-web): support excel & pdf preview

Author: Merlin218

frontend/magic-web/src/assets/locales/create.ts

@@ -19,7 +19,9 @@ export function createI18nNext(defaultLang?: string) {
 			resourcesToBackend(async (lng: string, namespace: string) => {
 				if (namespace === "magicFlow") {
 					return import(
-						`../../../node_modules/@dtyq/magic-flow/dist/common/locales/${normalizeLocale(lng)}/${namespace}.json`
+						`../../../node_modules/@dtyq/magic-flow/dist/common/locales/${normalizeLocale(
+							lng,
+						)}/${namespace}.json`
 					)
 				}
 				return import(`./${normalizeLocale(lng)}/${namespace}.json`)
@@ -30,7 +32,15 @@ export function createI18nNext(defaultLang?: string) {
 		init: () => {
 			return instance.init({
 				defaultNS: ["translation", "common", "interface"],
-				ns: ["translation", "common", "interface", "message", "flow", "magicFlow"],
+				ns: [
+					"translation",
+					"common",
+					"interface",
+					"message",
+					"flow",
+					"magicFlow",
+					"component",
+				],
 				// the translations
 				// (tip move them in a JSON file and import them,
 				// or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)

frontend/magic-web/src/assets/locales/en_US/component.json

@@ -0,0 +1,46 @@
+{
+  "magicPdfRender": {
+    "toolbar": {
+      "prevPage": "Previous Page (←)",
+      "nextPage": "Next Page (→)",
+      "zoomOut": "Zoom Out (-)",
+      "zoomIn": "Zoom In (+)",
+      "rotateLeft": "Rotate Left",
+      "rotateRight": "Rotate Right",
+      "reload": "Reload",
+      "download": "Download",
+      "fullscreen": "Fullscreen (F11)",
+      "moreActions": "More Actions"
+    },
+    "pageInfo": {
+      "currentPage": "Page {{current}}",
+      "totalPages": "of {{total}}",
+      "pageNumber": "Page",
+      "scale": "Scale"
+    },
+    "status": {
+      "loading": "Loading...",
+      "loadingProgress": "Loading Progress",
+      "noFile": "Please select a PDF file to preview",
+      "loadFailed": "Failed to load, please try again",
+      "pageLoadFailed": "Page failed to load",
+      "downloadUnavailable": "Unable to download this document",
+      "retry": "Retry"
+    },
+    "placeholders": {
+      "pageNumber": "Page {{number}}",
+      "scrollToLoad": "Scroll here to load"
+    },
+    "dropdown": {
+      "pageNav": "Page:",
+      "zoom": "Zoom:",
+      "zoomOut": "Zoom Out",
+      "zoomIn": "Zoom In",
+      "rotateLeft": "Rotate Left",
+      "rotateRight": "Rotate Right",
+      "reload": "Reload",
+      "download": "Download",
+      "fullscreen": "Fullscreen"
+    }
+  }
+} 

frontend/magic-web/src/assets/locales/en_US/interface.json

@@ -358,6 +358,7 @@
 		"filePreview": {
 			"notFoundFile": "The file was not found",
 			"notSupport": "Preview is not supported yet",
+			"notSupportFileType": "This file type is not supported yet",
 			"title": "File preview"
 		},
 		"floatButton": {

frontend/magic-web/src/assets/locales/zh_CN/component.json

@@ -0,0 +1,46 @@
+{
+  "magicPdfRender": {
+    "toolbar": {
+      "prevPage": "上一页 (←)",
+      "nextPage": "下一页 (→)",
+      "zoomOut": "缩小 (-)",
+      "zoomIn": "放大 (+)",
+      "rotateLeft": "逆时针旋转",
+      "rotateRight": "顺时针旋转",
+      "reload": "重新加载",
+      "download": "下载",
+      "fullscreen": "全屏 (F11)",
+      "moreActions": "更多操作"
+    },
+    "pageInfo": {
+      "currentPage": "第 {{current}} 页",
+      "totalPages": "共 {{total}} 页",
+      "pageNumber": "页码",
+      "scale": "缩放"
+    },
+    "status": {
+      "loading": "正在加载...",
+      "loadingProgress": "加载进度",
+      "noFile": "请选择要预览的 PDF 文件",
+      "loadFailed": "加载失败，请重试",
+      "pageLoadFailed": "页面加载失败",
+      "downloadUnavailable": "无法下载该文档",
+      "retry": "重试"
+    },
+    "placeholders": {
+      "pageNumber": "页面 {{number}}",
+      "scrollToLoad": "滚动到此处加载"
+    },
+    "dropdown": {
+      "pageNav": "页面:",
+      "zoom": "缩放:",
+      "zoomOut": "缩小",
+      "zoomIn": "放大",
+      "rotateLeft": "逆时针旋转",
+      "rotateRight": "顺时针旋转",
+      "reload": "重新加载",
+      "download": "下载",
+      "fullscreen": "全屏"
+    }
+  }
+} 

frontend/magic-web/src/assets/locales/zh_CN/interface.json

@@ -358,6 +358,7 @@
 		"filePreview": {
 			"notFoundFile": "未找到该文件",
 			"notSupport": "暂不支持预览",
+			"notSupportFileType": "暂不支持该文件类型",
 			"title": "文件预览"
 		},
 		"floatButton": {

frontend/magic-web/src/const/file.ts

@@ -16,6 +16,11 @@ export const DRIVE_SPACE_KEY_MAP = {
 	[DriveSpaceType.Shared]: DriveSpaceKey.Shared,
 }
 
+/**
+ * 可预览文件扩展名
+ */
+export const PREVIEW_EXTENSIONS = ["pdf", "xls", "xlsx"]
+
 /** 图片扩展名 */
 export const IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "svg", "gif", "webp", "svg", "svg+xml"]
 /** 视频扩展名 */

frontend/magic-web/src/opensource/components/base/MagicImagePreview/components/ImageWrapper/index.tsx

@@ -1,17 +1,21 @@
 import { useMessageRenderContext } from "@/opensource/components/business/MessageRenderProvider/hooks"
-import { useBoolean, useMemoizedFn } from "ahooks"
+import { useBoolean, useMemoizedFn, useUpdateEffect } from "ahooks"
 import type React from "react"
 import { useState, memo, useMemo, useRef, useEffect } from "react"
 import { isString } from "lodash-es"
 import { useTranslation } from "react-i18next"
-import { Skeleton } from "antd"
+import { Skeleton, Tooltip } from "antd"
+import MessageFilePreviewService from "@/opensource/services/chat/message/MessageImagePreview"
+import MessageFilePreviewStore from "@/opensource/stores/chatNew/messagePreview/ImagePreviewStore"
 import useChatFileUrls from "@/opensource/hooks/chat/useChatFileUrls"
 import conversationStore from "@/opensource/stores/chatNew/conversation"
 import { observer } from "mobx-react-lite"
-import type { PreviewFileInfo } from "@/opensource/services/chat/message/MessageFilePreview"
-import NetworkErrorContent from "@/opensource/pages/chatNew/components/ChatMessageList/components/MessageFactory/components/NetworkErrorContent"
+import type { ImagePreviewInfo } from "@/types/chat/preview"
 import useImageSize from "../../hooks/useImageSize"
 import { useStyles } from "./styles"
+import { IconPhotoX } from "@tabler/icons-react"
+import MagicButton from "@/opensource/components/base/MagicButton"
+import MagicIcon from "@/opensource/components/base/MagicIcon"
 
 type HTMLImageElementProps = JSX.IntrinsicElements["img"]
 
@@ -38,6 +42,10 @@ interface ImageWrapperProps extends HTMLImageElementProps {
 	fileSize?: number
 	/** 图片加载中的占位符 */
 	loader?: (cls?: string) => React.ReactNode
+	/** 是否正在加载 */
+	isLoading?: boolean
+	/** 是否 Error */
+	isError?: boolean
 }
 
 const ImageWrapper = observer((props: ImageWrapperProps) => {
@@ -58,13 +66,15 @@ const ImageWrapper = observer((props: ImageWrapperProps) => {
 		imgExtension,
 		fileSize,
 		loader,
+		isLoading: loading = false,
+		isError: isError = false,
 		...rest
 	} = props
 	const { t } = useTranslation("interface")
 	const { styles, cx } = useStyles()
 	const { hiddenDetail } = useMessageRenderContext()
 	const imageRef = useRef<HTMLImageElement>(null)
-	const [fileInfo, setFileInfo] = useState<PreviewFileInfo>()
+	const [fileInfo, setFileInfo] = useState<ImagePreviewInfo>()
 	const isLongImage = useImageSize(fileInfo?.url)
 
 	const [error, { setTrue, setFalse }] = useBoolean(false)
@@ -134,6 +144,14 @@ const ImageWrapper = observer((props: ImageWrapperProps) => {
 		useHDImage,
 	])
 
+	useUpdateEffect(() => {
+		const { previewInfo, open } = MessageFilePreviewStore
+		// 如果预览弹窗开启状态, 并且旧文件 id 和当前预览文件 id 相同, 并且使用高清图, 重新设置预览信息
+		if (open && previewInfo?.fileId === fileInfo?.oldFileId && fileInfo?.useHDImage) {
+			MessageFilePreviewService.setPreviewInfo(fileInfo)
+		}
+	}, [fileInfo, MessageFilePreviewStore.previewInfo])
+
 	const handleReloadImage = useMemoizedFn(() => {
 		reload?.()
 		setFalse()
@@ -163,15 +181,14 @@ const ImageWrapper = observer((props: ImageWrapperProps) => {
 				>
 					<div
 						className={styles.image}
-						data-file-info={fileInfoBase64}
 						// eslint-disable-next-line react/no-danger
 						dangerouslySetInnerHTML={{ __html: fileInfo?.url }}
 					/>
 				</button>
 			)
 		}
 
-		if (isLoading || !fileInfo?.url) {
+		if (loading || isLoading || !fileInfo?.url) {
 			return loader ? (
 				loader?.(className)
 			) : (
@@ -213,6 +230,7 @@ const ImageWrapper = observer((props: ImageWrapperProps) => {
 		isLoading,
 		isLongImage,
 		loader,
+		loading,
 		onError,
 		onLoad,
 		rest,
@@ -228,12 +246,19 @@ const ImageWrapper = observer((props: ImageWrapperProps) => {
 		return t("chat.message.placeholder.image")
 	}
 
-	if (error) {
+	if (isError || error) {
 		return (
-			<NetworkErrorContent
-				className={cx(styles.networkError, containerClassName)}
-				onReload={handleReloadImage}
-			/>
+			<Tooltip title={t("chat.message.networkError.reload")}>
+				<div className={styles.imageLoadError} onClick={handleReloadImage}>
+					<MagicIcon component={IconPhotoX} size={16} />
+					{t("chat.message.imageLoadFailed")}
+					<MagicButton
+						className="reload-button"
+						size="small"
+						onClick={handleReloadImage}
+					/>
+				</div>
+			</Tooltip>
 		)
 	}