feat: add file icon

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>
+            <CardTitle className="relative pl-8">
-            <CardDescription className="text-xs">
+              <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>

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} />;
+  }
+}