Fix multiple artifact in action list (#722)

skyvern-frontend/src/routes/tasks/detail/JSONArtifact.tsx

@@ -2,45 +2,58 @@ import { artifactApiClient } from "@/api/AxiosClient";
 import { ArtifactApiResponse } from "@/api/types";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Textarea } from "@/components/ui/textarea";
-import { useQuery } from "@tanstack/react-query";
+import { useQueries } from "@tanstack/react-query";
 import axios from "axios";
 
 type Props = {
-  artifact: ArtifactApiResponse;
+  artifacts: Array<ArtifactApiResponse>;
 };
 
-function JSONArtifact({ artifact }: Props) {
-  const { data, isFetching, isError, error } = useQuery<
-    Record<string, unknown>
-  >({
-    queryKey: ["artifact", artifact.artifact_id],
-    queryFn: async () => {
-      if (artifact.uri.startsWith("file://")) {
-        return artifactApiClient
-          .get(`/artifact/json`, {
-            params: {
-              path: artifact.uri.slice(7),
-            },
-          })
-          .then((response) => response.data);
-      }
-      if (artifact.uri.startsWith("s3://") && artifact.signed_url) {
-        return axios.get(artifact.signed_url).then((response) => response.data);
-      }
-    },
+function JSONArtifact({ artifacts }: Props) {
+  function fetchArtifact(artifact: ArtifactApiResponse) {
+    if (artifact.uri.startsWith("file://")) {
+      return artifactApiClient
+        .get(`/artifact/json`, {
+          params: {
+            path: artifact.uri.slice(7),
+          },
+        })
+        .then((response) => response.data);
+    }
+    if (artifact.uri.startsWith("s3://") && artifact.signed_url) {
+      return axios.get(artifact.signed_url).then((response) => response.data);
+    }
+  }
+
+  const results = useQueries({
+    queries:
+      artifacts?.map((artifact) => {
+        return {
+          queryKey: ["artifact", artifact.artifact_id],
+          queryFn: () => fetchArtifact(artifact),
+        };
+      }) ?? [],
   });
 
-  if (isFetching) {
+  if (results.some((result) => result.isLoading)) {
     return <Skeleton className="h-48 w-full" />;
   }
 
   return (
-    <Textarea
-      className="w-full"
-      rows={15}
-      value={isError ? JSON.stringify(error) : JSON.stringify(data, null, 2)}
-      readOnly
-    />
+    <>
+      <Textarea
+        className="w-full"
+        rows={15}
+        value={
+          results.some((result) => result.isError)
+            ? JSON.stringify(results.find((result) => result.isError)?.error)
+            : results
+                .map((result) => JSON.stringify(result.data, null, 2))
+                .join(",\n")
+        }
+        readOnly
+      />
+    </>
   );
 }
 

skyvern-frontend/src/routes/tasks/detail/StepArtifacts.tsx

@@ -53,15 +53,15 @@ function StepArtifacts({ id, stepProps }: Props) {
     (artifact) => artifact.artifact_type === ArtifactType.ActionScreenshot,
   );
 
-  const visibleElementsTree = artifacts?.find(
+  const visibleElementsTree = artifacts?.filter(
     (artifact) => artifact.artifact_type === ArtifactType.VisibleElementsTree,
   );
 
-  const llmRequest = artifacts?.find(
+  const llmRequest = artifacts?.filter(
     (artifact) => artifact.artifact_type === ArtifactType.LLMRequest,
   );
 
-  const visibleElementsTreeTrimmed = artifacts?.find(
+  const visibleElementsTreeTrimmed = artifacts?.filter(
     (artifact) =>
       artifact.artifact_type === ArtifactType.VisibleElementsTreeTrimmed,
   );
@@ -70,7 +70,7 @@ function StepArtifacts({ id, stepProps }: Props) {
     (artifact) => artifact.artifact_type === ArtifactType.LLMPrompt,
   );
 
-  const llmResponseParsed = artifacts?.find(
+  const llmResponseParsed = artifacts?.filter(
     (artifact) => artifact.artifact_type === ArtifactType.LLMResponseParsed,
   );
 
@@ -165,12 +165,12 @@ function StepArtifacts({ id, stepProps }: Props) {
       </TabsContent>
       <TabsContent value="element_tree_trimmed">
         {visibleElementsTreeTrimmed ? (
-          <JSONArtifact artifact={visibleElementsTreeTrimmed} />
+          <JSONArtifact artifacts={visibleElementsTreeTrimmed} />
         ) : null}
       </TabsContent>
       <TabsContent value="html_element_tree">
         {visibleElementsTree ? (
-          <JSONArtifact artifact={visibleElementsTree} />
+          <JSONArtifact artifacts={visibleElementsTree} />
         ) : null}
       </TabsContent>
       <TabsContent value="llm_prompt">
@@ -178,14 +178,14 @@ function StepArtifacts({ id, stepProps }: Props) {
       </TabsContent>
       <TabsContent value="llm_response_parsed">
         {llmResponseParsed ? (
-          <JSONArtifact artifact={llmResponseParsed} />
+          <JSONArtifact artifacts={llmResponseParsed} />
         ) : null}
       </TabsContent>
       <TabsContent value="html_raw">
         {htmlRaw ? <TextArtifact artifact={htmlRaw} /> : null}
       </TabsContent>
       <TabsContent value="llm_request">
-        {llmRequest ? <JSONArtifact artifact={llmRequest} /> : null}
+        {llmRequest ? <JSONArtifact artifacts={llmRequest} /> : null}
       </TabsContent>
     </Tabs>
   );