From 7ef8a624bef5842aa4190a6cf9784ae4e7dc4bcb Mon Sep 17 00:00:00 2001
From: LE Quoc Dat <quocdat.le.insacvl@gmail.com>
Date: Mon, 28 Jul 2025 22:12:46 +0200
Subject: [PATCH] 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
---
 .../thread/content/ShowToolStream.tsx         | 22 ++-------------
 .../tool-views/file-operation/_utils.ts       | 28 ++++++++++---------
 2 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/thread/content/ShowToolStream.tsx b/frontend/src/components/thread/content/ShowToolStream.tsx
index 73861a55..a5118d5b 100644
--- a/frontend/src/components/thread/content/ShowToolStream.tsx
+++ b/frontend/src/components/thread/content/ShowToolStream.tsx
@@ -64,28 +64,12 @@ export const ShowToolStream: React.FC<ShowToolStreamProps> = ({
         return content; // fallback to full content
     }, [content, isEditFile, isCreateFile, isFullFileRewrite]);
 
-    // Time-based logic - show streaming content after 1500ms
+    // Show streaming content immediately for file operations
     useEffect(() => {
-        const effectiveStartTime = stableStartTimeRef.current;
-
-        // Only show expanded content for file operation tools
-        if (!effectiveStartTime || !showExpanded || !FILE_OPERATION_TOOLS.has(toolName || '')) {
-            setShouldShowContent(false);
-            return;
-        }
-
-        const elapsed = Date.now() - effectiveStartTime;
-        if (elapsed >= 2000) {
+        if (showExpanded && FILE_OPERATION_TOOLS.has(toolName || '')) {
             setShouldShowContent(true);
         } else {
-            const delay = 2000 - elapsed;
-            const timer = setTimeout(() => {
-                setShouldShowContent(true);
-            }, delay);
-
-            return () => {
-                clearTimeout(timer);
-            };
+            setShouldShowContent(false);
         }
     }, [showExpanded, toolName]);
 
diff --git a/frontend/src/components/thread/tool-views/file-operation/_utils.ts b/frontend/src/components/thread/tool-views/file-operation/_utils.ts
index 8bbf8528..be7b7a26 100644
--- a/frontend/src/components/thread/tool-views/file-operation/_utils.ts
+++ b/frontend/src/components/thread/tool-views/file-operation/_utils.ts
@@ -238,14 +238,6 @@ export const extractFileEditData = (
   actualAssistantTimestamp?: string;
   errorMessage?: string;
 } => {
-  let filePath: string | null = null;
-  let originalContent: string | null = null;
-  let updatedContent: string | null = null;
-  let actualIsSuccess = isSuccess;
-  let actualToolTimestamp = toolTimestamp;
-  let actualAssistantTimestamp = assistantTimestamp;
-  let errorMessage: string | undefined;
-
   const parseOutput = (output: any) => {
     if (typeof output === 'string') {
       try {
@@ -258,7 +250,13 @@ export const extractFileEditData = (
   };
 
   const extractData = (content: any) => {
-    const parsed = typeof content === 'string' ? parseContent(content) : content;
+    let parsed = typeof content === 'string' ? parseContent(content) : content;
+    
+    // Handle nested content structures like { role: '...', content: '...' }
+    if (parsed?.role && parsed?.content) {
+        parsed = typeof parsed.content === 'string' ? parseContent(parsed.content) : parsed.content;
+    }
+
     if (parsed?.tool_execution) {
       const args = parsed.tool_execution.arguments || {};
       const output = parseOutput(parsed.tool_execution.result?.output);
@@ -290,10 +288,14 @@ export const extractFileEditData = (
   const toolData = extractData(toolContent);
   const assistantData = extractData(assistantContent);
 
-  filePath = toolData.filePath || assistantData.filePath;
-  originalContent = toolData.originalContent || assistantData.originalContent;
-  updatedContent = toolData.updatedContent || assistantData.updatedContent;
-  errorMessage = toolData.errorMessage || assistantData.errorMessage;
+  const filePath = toolData.filePath || assistantData.filePath;
+  const originalContent = toolData.originalContent || assistantData.originalContent;
+  const updatedContent = toolData.updatedContent || assistantData.updatedContent;
+  const errorMessage = toolData.errorMessage || assistantData.errorMessage;
+
+  let actualIsSuccess = isSuccess;
+  let actualToolTimestamp = toolTimestamp;
+  let actualAssistantTimestamp = assistantTimestamp;
 
   if (toolData.success !== undefined) {
     actualIsSuccess = toolData.success;