fix(web): render file-type icons for mp3/svg and fall back to a default file icon (#18230)

web/src/components/file-icon/index.tsx

@@ -15,7 +15,8 @@
  */
 
 import { getExtension } from '@/utils/document-util';
-import SvgIcon from '../svg-icon';
+import { File as LucideFile } from 'lucide-react';
+import SvgIcon, { hasSvgIcon } from '../svg-icon';
 
 import { useFetchDocumentThumbnailsByIds } from '@/hooks/use-document-request';
 import { useAuthenticatedImageUrl } from '@/components/image';
@@ -41,10 +42,14 @@ const FileIcon = ({ name, id }: IProps) => {
     }
   }, [id, setDocumentIds]);
 
+  const iconName = `file-icon/${fileExtension}`;
+
   return blobUrl ? (
     <img src={blobUrl} className={styles.thumbnailImg}></img>
+  ) : hasSvgIcon(iconName) ? (
+    <SvgIcon name={iconName} width={24}></SvgIcon>
   ) : (
-    <SvgIcon name={`file-icon/${fileExtension}`} width={24}></SvgIcon>
+    <LucideFile size={24}></LucideFile>
   );
 };
 

web/src/components/icon-font.tsx

@@ -17,8 +17,9 @@
 import { FileIconMap } from '@/constants/file';
 import { cn } from '@/lib/utils';
 import { getExtension } from '@/utils/document-util';
+import { File as LucideFile } from 'lucide-react';
 import { CSSProperties } from 'react';
-import SvgIcon from './svg-icon';
+import SvgIcon, { hasSvgIcon } from './svg-icon';
 
 type IconFontType = {
   name: string;
@@ -54,6 +55,9 @@ export function FileIcon({
 }: IconFontType & { type?: string }) {
   const isFolder = type === 'folder';
   const isSkills = type === 'skills';
+  const extension = getExtension(name);
+  const spriteIcon = FileIconMap[extension as keyof typeof FileIconMap];
+  const assetIcon = `file-icon/${extension}`;
   if (isSkills) {
     return (
       <span className={cn('size-4', className)}>
@@ -63,9 +67,15 @@ export function FileIcon({
   }
   return (
     <span className={cn('size-4', className)}>
-      <IconFont
-        name={isFolder ? 'file-sub' : FileIconMap[getExtension(name)]}
-      ></IconFont>
+      {isFolder ? (
+        <IconFont name="file-sub"></IconFont>
+      ) : spriteIcon ? (
+        <IconFont name={spriteIcon}></IconFont>
+      ) : hasSvgIcon(assetIcon) ? (
+        <SvgIcon name={assetIcon} width={16}></SvgIcon>
+      ) : (
+        <LucideFile className="size-4"></LucideFile>
+      )}
     </span>
   );
 }

web/src/components/svg-icon.tsx

@@ -23,23 +23,6 @@ import { IconFontFill } from './icon-font';
 import { RAGFlowAvatar } from './ragflow-avatar';
 import { useIsDarkTheme } from './theme-provider';
 
-// const importAll = (requireContext: __WebpackModuleApi.RequireContext) => {
-//   const list = requireContext.keys().map((key) => {
-//     const name = key.replace(/\.\/(.*)\.\w+$/, '$1');
-//     return { name, value: requireContext(key) };
-//   });
-//   return list;
-// };
-
-// let routeList: { name: string; value: string }[] = [];
-
-// try {
-//   routeList = importAll(require.context('@/assets/svg', true, /\.svg$/));
-// } catch (error) {
-//   console.warn(error);
-//   routeList = [];
-// }
-
 const svgModules = import.meta.glob('@/assets/svg/**/*.svg', {
   eager: true,
   query: '?url',
@@ -53,6 +36,9 @@ const routeList: { name: string; value: string }[] = Object.entries(
   return { name, value: module.default || module };
 });
 
+export const hasSvgIcon = (name: string) =>
+  routeList.some((item) => item.name === name);
+
 interface IProps extends IconComponentProps {
   name: string;
   width: string | number;