AI: How can we stream the edit_file tool when it generating like create_file ? Also the edit_file tool show this

"""Invalid File Edit

Could not extract the file changes from the tool result."""

Check the state of code base and make to sure implement fully

frontend/src/components/thread/content/ShowToolStream.tsx

@@ -38,7 +38,8 @@ export const ShowToolStream: React.FC<ShowToolStreamProps> = ({
         stableStartTimeRef.current = Date.now();
     }
 
-    const toolName = extractToolNameFromStream(content);
+    const rawToolName = extractToolNameFromStream(content);
+    const toolName = getUserFriendlyToolName(rawToolName || '');
     const isEditFile = toolName === 'AI File Edit';
 
     // Extract code_edit content for streaming
@@ -105,9 +106,9 @@ export const ShowToolStream: React.FC<ShowToolStreamProps> = ({
     // Check if this is a file operation tool
     const isFileOperationTool = FILE_OPERATION_TOOLS.has(toolName);
 
-    const IconComponent = getToolIcon(toolName);
-    const displayName = getUserFriendlyToolName(toolName);
-    const paramDisplay = extractPrimaryParam(toolName, content);
+    const IconComponent = getToolIcon(rawToolName || '');
+    const displayName = toolName;
+    const paramDisplay = extractPrimaryParam(rawToolName || '', content);
 
     // Always show tool button, conditionally show content below for file operations only
     if (showExpanded && (isFileOperationTool || isEditFile)) {

frontend/src/components/thread/tool-views/file-operation/_utils.ts

@@ -201,6 +201,28 @@ export interface ExtractedEditData {
   errorMessage?: string;
 }
 
+const parseContent = (content: any): any => {
+  if (typeof content === 'string') {
+    try {
+      return JSON.parse(content);
+    } catch (e) {
+      return content;
+    }
+  }
+  return content;
+};
+
+const parseOutput = (output: any) => {
+    if (typeof output === 'string') {
+      try {
+        return JSON.parse(output);
+      } catch {
+        return output; // Return as string if not JSON
+      }
+    }
+    return output;
+  };
+
 export const extractFileEditData = (
   assistantContent: any,
   toolContent: any,

frontend/src/components/thread/tool-views/xml-parser.ts

@@ -100,14 +100,12 @@ export function isNewXmlFormat(content: string): boolean {
 export function extractToolNameFromStream(content: string): string | null {
   const invokeMatch = content.match(/<invoke\s+name=["']([^"']+)["']/i);
   if (invokeMatch) {
-    const toolName = invokeMatch[1].replace(/_/g, '-');
-    return formatToolNameForDisplay(toolName);
+    return invokeMatch[1].replace(/_/g, '-');
   }
 
   const oldFormatMatch = content.match(/<([a-zA-Z\-_]+)(?:\s+[^>]*)?>(?!\/)/);
   if (oldFormatMatch) {
-    const toolName = oldFormatMatch[1].replace(/_/g, '-');
-    return formatToolNameForDisplay(toolName);
+    return oldFormatMatch[1].replace(/_/g, '-');
   }
   
   return null;