From 8bb4c35416ba1d48b0d919171fb2fa95802cea2b Mon Sep 17 00:00:00 2001
From: Henry Li <henry1943@163.com>
Date: Mon, 2 Feb 2026 09:49:44 +0800
Subject: [PATCH] feat: add file icon

---
 .../artifacts/artifact-file-list.tsx          | 15 +++++--
 .../src/core/utils/{files.ts => files.tsx}    | 41 +++++++++++++++++++
 2 files changed, 53 insertions(+), 3 deletions(-)
 rename frontend/src/core/utils/{files.ts => files.tsx} (76%)

diff --git a/frontend/src/components/workspace/artifacts/artifact-file-list.tsx b/frontend/src/components/workspace/artifacts/artifact-file-list.tsx
index 876881c..844545b 100644
--- a/frontend/src/components/workspace/artifacts/artifact-file-list.tsx
+++ b/frontend/src/components/workspace/artifacts/artifact-file-list.tsx
@@ -13,7 +13,11 @@ import {
 import { urlOfArtifact } from "@/core/artifacts/utils";
 import { useI18n } from "@/core/i18n/hooks";
 import { installSkill } from "@/core/skills/api";
-import { getFileExtensionDisplayName, getFileName } from "@/core/utils/files";
+import {
+  getFileExtensionDisplayName,
+  getFileIcon,
+  getFileName,
+} from "@/core/utils/files";
 import { cn } from "@/lib/utils";
 
 import { useArtifacts } from "./context";
@@ -76,8 +80,13 @@ export function ArtifactFileList({
           onClick={() => handleClick(file)}
         >
           <CardHeader className="pr-2 pl-1">
-            <CardTitle>{getFileName(file)}</CardTitle>
-            <CardDescription className="text-xs">
+            <CardTitle className="relative pl-8">
+              <div>{getFileName(file)}</div>
+              <div className="absolute top-2 -left-0.5">
+                {getFileIcon(file)}
+              </div>
+            </CardTitle>
+            <CardDescription className="pl-8 text-xs">
               {getFileExtensionDisplayName(file)} file
             </CardDescription>
             <CardAction>
diff --git a/frontend/src/core/utils/files.ts b/frontend/src/core/utils/files.tsx
similarity index 76%
rename from frontend/src/core/utils/files.ts
rename to frontend/src/core/utils/files.tsx
index 1a37984..8f9b52f 100644
--- a/frontend/src/core/utils/files.ts
+++ b/frontend/src/core/utils/files.tsx
@@ -1,3 +1,12 @@
+import {
+  BookOpenTextIcon,
+  CompassIcon,
+  FileCodeIcon,
+  FileCogIcon,
+  FilePlayIcon,
+  FileTextIcon,
+} from "lucide-react";
+
 const extensionMap: Record<string, string> = {
   // Text
   txt: "text",
@@ -181,3 +190,35 @@ export function getFileExtensionDisplayName(filepath: string) {
       return extension.toUpperCase();
   }
 }
+
+export function getFileIcon(filepath: string) {
+  const extension = getFileExtension(filepath);
+  const { isCodeFile } = checkCodeFile(filepath);
+  const className = "size-6";
+  switch (extension) {
+    case "skill":
+      return <FileCogIcon className={className} />;
+    case "html":
+      return <CompassIcon className={className} />;
+    case "md":
+      return <BookOpenTextIcon className={className} />;
+    case "mp3":
+    case "wav":
+    case "ogg":
+    case "aac":
+    case "m4a":
+    case "flac":
+    case "wma":
+    case "aiff":
+    case "ape":
+    case "mp4":
+    case "mov":
+    case "m4v":
+      return <FilePlayIcon className={className} />;
+    default:
+      if (isCodeFile) {
+        return <FileCodeIcon className={className} />;
+      }
+      return <FileTextIcon className={className} />;
+  }
+}