feat: auto open artifact

frontend/src/components/workspace/artifacts/context.tsx

@@ -9,6 +9,7 @@ export interface ArtifactsContextType {
   selectedArtifact: string | null;
 
   open: boolean;
+  autoOpen: boolean;
   setOpen: (open: boolean) => void;
   deselect: () => void;
 
@@ -27,6 +28,7 @@ export function ArtifactsProvider({ children }: ArtifactsProviderProps) {
   const [artifacts, setArtifacts] = useState<string[]>([]);
   const [selectedArtifact, setSelectedArtifact] = useState<string | null>(null);
   const [open, setOpen] = useState(false);
+  const [autoOpen, setAutoOpen] = useState(true);
   const { setOpen: setSidebarOpen } = useSidebar();
 
   const select = (artifact: string) => {
@@ -43,7 +45,13 @@ export function ArtifactsProvider({ children }: ArtifactsProviderProps) {
     setArtifacts,
 
     open,
-    setOpen,
+    autoOpen,
+    setOpen: (isOpen: boolean) => {
+      if (!isOpen && autoOpen) {
+        setAutoOpen(false);
+      }
+      setOpen(isOpen);
+    },
 
     selectedArtifact,
     select,

frontend/src/components/workspace/messages/message-group.tsx

@@ -181,7 +181,7 @@ function ToolCall({
   result?: string | Record<string, unknown>;
 }) {
   const { t } = useI18n();
-  const { select, setOpen } = useArtifacts();
+  const { setOpen, autoOpen, selectedArtifact, select } = useArtifacts();
   if (name === "web_search") {
     let label: React.ReactNode = t.toolCalls.searchForRelatedInfo;
     if (typeof args.query === "string") {
@@ -265,6 +265,18 @@ function ToolCall({
       description = t.toolCalls.writeFile;
     }
     const path: string | undefined = (args as { path: string })?.path;
+    if (autoOpen && path) {
+      setTimeout(() => {
+        const url = new URL(
+          `write-file:${path}?message_id=${messageId}&tool_call_id=${id}`,
+        ).toString();
+        if (selectedArtifact === url) {
+          return;
+        }
+        select(url);
+        setOpen(true);
+      }, 100);
+    }
     return (
       <ChainOfThoughtStep
         key={id}