ji

frontend-web/src/components/workspace/artifacts/artifact-file-detail.tsx

@@ -49,9 +49,8 @@ import {
 } from "@/core/artifacts/hooks";
 import { resolveArtifactURL, urlOfArtifact } from "@/core/artifacts/utils";
 import { useI18n } from "@/core/i18n/hooks";
-import { downloadMarkdownAsDocx } from "@/core/scheduled-tasks/markdown-docx";
-import { installSkill } from "@/core/skills/api";
-import { streamdownPlugins } from "@/core/streamdown";
+import { downloadMarkdownAsDocx } from "@/core/scheduled-tasks/markdown-docx";
+import { streamdownPlugins } from "@/core/streamdown";
 import {
   checkCodeFile,
   getFileName,
@@ -79,7 +78,8 @@ import { useThread } from "../messages/context";
 import { Tooltip } from "../tooltip";
 
 import { useArtifacts } from "./context";
-import { SpreadsheetPreview } from "./spreadsheet-preview";
+import { SpreadsheetPreview } from "./spreadsheet-preview";
+import { SkillInstallDialog } from "./skill-install-dialog";
 
 const SANDBOX_RESUME_EVENT = "workspace:sandbox-resume-autoscroll";
 
@@ -232,7 +232,7 @@ export function ArtifactFileDetail({
 
   const [viewMode, setViewMode] = useState<"code" | "preview">("code");
   const [allowAutoViewSwitch, setAllowAutoViewSwitch] = useState(true);
-  const [isInstalling, setIsInstalling] = useState(false);
+  const [installDialogOpen, setInstallDialogOpen] = useState(false);
   const [showPreviewSwitchPulse, setShowPreviewSwitchPulse] = useState(false);
   const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
   const [showResumeAutoScroll, setShowResumeAutoScroll] = useState(false);
@@ -432,29 +432,7 @@ export function ArtifactFileDetail({
     }, 1600);
   }, [scrollArtifactToBottom]);
 
-  const handleInstallSkill = useCallback(async () => {
-    if (isInstalling) return;
-
-    setIsInstalling(true);
-    try {
-      const result = await installSkill({
-        thread_id: threadId,
-        path: filepath,
-      });
-      if (result.success) {
-        toast.success(result.message);
-      } else {
-        toast.error(result.message ?? "Failed to install skill");
-      }
-    } catch (error) {
-      console.error("Failed to install skill:", error);
-      toast.error("Failed to install skill");
-    } finally {
-      setIsInstalling(false);
-    }
-  }, [threadId, filepath, isInstalling]);
-
-  const handleSaveArtifact = useCallback(async () => {
+  const handleSaveArtifact = useCallback(async () => {
     if (!canEditArtifact || updateArtifact.isPending) {
       return;
     }
@@ -686,18 +664,17 @@ export function ArtifactFileDetail({
             )}
             {!useWriteFileStreaming && filepath.endsWith(".skill") && (
               <Tooltip content={t.toolCalls.skillInstallTooltip}>
-                <ArtifactAction
-                  icon={isInstalling ? LoaderIcon : PackageIcon}
-                  label={t.common.install}
-                  tooltip={t.common.install}
-                  disabled={
-                    isInstalling ||
-                    env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"
-                  }
-                  onClick={handleInstallSkill}
-                />
-              </Tooltip>
-            )}
+                <ArtifactAction
+                  icon={PackageIcon}
+                  label={t.common.install}
+                  tooltip={t.common.install}
+                  disabled={
+                    env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"
+                  }
+                  onClick={() => setInstallDialogOpen(true)}
+                />
+              </Tooltip>
+            )}
             {isCodeFile && (
               <ArtifactAction
                 icon={CopyIcon}
@@ -782,7 +759,7 @@ export function ArtifactFileDetail({
           </ArtifactActions>
         </div>
       </ArtifactHeader>
-      <ArtifactContent
+      <ArtifactContent
         ref={artifactContentRef}
         className="relative p-0"
         onWheelCapture={handlePauseAutoScroll}
@@ -859,10 +836,16 @@ export function ArtifactFileDetail({
               {t.common.loading}
             </div>
           ))}
-      </ArtifactContent>
-    </Artifact>
-  );
-}
+      </ArtifactContent>
+      <SkillInstallDialog
+        open={installDialogOpen}
+        onOpenChange={setInstallDialogOpen}
+        threadId={threadId}
+        filepath={filepath}
+      />
+    </Artifact>
+  );
+}
 
 function SandboxPreviewImage({
   src,