feat: add ToggleGroup

frontend/src/core/artifacts/hooks.ts

@@ -3,7 +3,7 @@ import { useMemo } from "react";
 
 import { useThread } from "@/components/workspace/messages/context";
 
-import { loadArtifactContent } from "./loader";
+import { loadArtifactContent, loadArtifactContentFromToolCall } from "./loader";
 
 export function useArtifactContent({
   filepath,
@@ -20,25 +20,10 @@ export function useArtifactContent({
   const { thread } = useThread();
   const content = useMemo(() => {
     if (isWriteFile) {
-      const url = new URL(filepath);
-      const toolCallId = url.searchParams.get("tool_call_id");
-      const messageId = url.searchParams.get("message_id");
-      if (messageId && toolCallId) {
-        const message = thread.messages.find(
-          (message) => message.id === messageId,
-        );
-        if (message?.type === "ai" && message.tool_calls) {
-          const toolCall = message.tool_calls.find(
-            (toolCall) => toolCall.id === toolCallId,
-          );
-          if (toolCall) {
-            return toolCall.args.content;
-          }
-        }
-      }
+      return loadArtifactContentFromToolCall({ url: filepath, thread });
     }
     return null;
-  }, [filepath, isWriteFile, thread.messages]);
+  }, [filepath, isWriteFile, thread]);
   const { data, isLoading, error } = useQuery({
     queryKey: ["artifact", filepath, threadId],
     queryFn: () => {

frontend/src/core/artifacts/loader.ts

@@ -1,3 +1,7 @@
+import type { UseStream } from "@langchain/langgraph-sdk/react";
+
+import type { AgentThreadState } from "../threads";
+
 import { urlOfArtifact } from "./utils";
 
 export async function loadArtifactContent({
@@ -12,3 +16,26 @@ export async function loadArtifactContent({
   const text = await response.text();
   return text;
 }
+
+export function loadArtifactContentFromToolCall({
+  url: urlString,
+  thread,
+}: {
+  url: string;
+  thread: UseStream<AgentThreadState>;
+}) {
+  const url = new URL(urlString);
+  const toolCallId = url.searchParams.get("tool_call_id");
+  const messageId = url.searchParams.get("message_id");
+  if (messageId && toolCallId) {
+    const message = thread.messages.find((message) => message.id === messageId);
+    if (message?.type === "ai" && message.tool_calls) {
+      const toolCall = message.tool_calls.find(
+        (toolCall) => toolCall.id === toolCallId,
+      );
+      if (toolCall) {
+        return toolCall.args.content;
+      }
+    }
+  }
+}

frontend/src/core/utils/files.ts

@@ -1,6 +1,13 @@
-import type { BundledLanguage } from "shiki";
+const extensionMap: Record<string, string> = {
+  // Text
+  txt: "text",
+  csv: "csv",
+  log: "text",
+  conf: "text",
+  config: "text",
+  properties: "text",
+  props: "text",
 
-const extensionMap: Record<string, BundledLanguage> = {
   // JavaScript/TypeScript ecosystem
   js: "javascript",
   jsx: "jsx",
@@ -137,14 +144,14 @@ export function getFileExtension(filepath: string) {
 export function checkCodeFile(
   filepath: string,
 ):
-  | { isCodeFile: true; language: BundledLanguage }
+  | { isCodeFile: true; language: string }
   | { isCodeFile: false; language: null } {
   const extension = getFileExtension(filepath);
   const isCodeFile = extension in extensionMap;
   if (isCodeFile) {
     return {
       isCodeFile: true,
-      language: extensionMap[extension] as unknown as BundledLanguage,
+      language: extensionMap[extension] ?? "text",
     };
   }
   return {