feat: support artifact preview

frontend/src/core/artifacts/hooks.ts

@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { loadArtifactContent } from "./loader";
+
+export function useArtifactContent({
+  filepath,
+  threadId,
+  enabled,
+}: {
+  filepath: string;
+  threadId: string;
+  enabled?: boolean;
+}) {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["artifact", filepath, threadId],
+    queryFn: () => loadArtifactContent({ filepath, threadId }),
+    enabled,
+  });
+  return { content: data, isLoading, error };
+}

frontend/src/core/artifacts/index.ts

@@ -0,0 +1 @@
+export * from "./loader";

frontend/src/core/artifacts/loader.ts

@@ -0,0 +1,14 @@
+import { urlOfArtifact } from "./utils";
+
+export async function loadArtifactContent({
+  filepath,
+  threadId,
+}: {
+  filepath: string;
+  threadId: string;
+}) {
+  const url = urlOfArtifact({ filepath, threadId });
+  const response = await fetch(url);
+  const text = await response.text();
+  return text;
+}

frontend/src/core/artifacts/utils.ts

@@ -0,0 +1,11 @@
+export function urlOfArtifact({
+  filepath,
+  threadId,
+  download = false,
+}: {
+  filepath: string;
+  threadId: string;
+  download?: boolean;
+}) {
+  return `http://localhost:8000/api/threads/${threadId}/artifacts${filepath}${download ? "?download=true" : ""}`;
+}