From a2eac10d872f7db58fbd2d98fb50fd4238784439 Mon Sep 17 00:00:00 2001
From: LE Quoc Dat <quocdat.le.insacvl@gmail.com>
Date: Mon, 28 Jul 2025 21:42:25 +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
---
 .../tool-views/file-operation/FileEditToolView.tsx   |  7 ++++---
 .../thread/tool-views/file-operation/_utils.ts       | 12 +++++++++---
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/thread/tool-views/file-operation/FileEditToolView.tsx b/frontend/src/components/thread/tool-views/file-operation/FileEditToolView.tsx
index cf96202d..f7aab248 100644
--- a/frontend/src/components/thread/tool-views/file-operation/FileEditToolView.tsx
+++ b/frontend/src/components/thread/tool-views/file-operation/FileEditToolView.tsx
@@ -97,7 +97,7 @@ const SplitDiffView: React.FC<{ oldCode: string; newCode: string }> = ({ oldCode
   />
 );
 
-const ErrorState: React.FC = () => (
+const ErrorState: React.FC<{ message?: string }> = ({ message }) => (
   <div className="flex flex-col items-center justify-center h-full py-12 px-6 bg-gradient-to-b from-white to-zinc-50 dark:from-zinc-950 dark:to-zinc-900">
     <div className="text-center w-full max-w-xs">
       <AlertTriangle className="h-16 w-16 mx-auto mb-6 text-amber-500" />
@@ -105,7 +105,7 @@ const ErrorState: React.FC = () => (
         Invalid File Edit
       </h3>
       <p className="text-sm text-zinc-500 dark:text-zinc-400">
-        Could not extract the file changes from the tool result.
+        {message || "Could not extract the file changes from the tool result."}
       </p>
     </div>
   </div>
@@ -128,6 +128,7 @@ export function FileEditToolView({
     updatedContent,
     actualIsSuccess,
     actualToolTimestamp,
+    errorMessage,
   } = extractFileEditData(
     assistantContent,
     toolContent,
@@ -188,7 +189,7 @@ export function FileEditToolView({
             subtitle="Please wait while the file is being modified"
           />
         ) : shouldShowError ? (
-          <ErrorState />
+          <ErrorState message={errorMessage} />
         ) : (
           <div className="h-full flex flex-col">
             <div className="p-3 border-b border-zinc-200 dark:border-zinc-800 bg-accent flex items-center justify-between">
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 a5b706ce..57e8fc2e 100644
--- a/frontend/src/components/thread/tool-views/file-operation/_utils.ts
+++ b/frontend/src/components/thread/tool-views/file-operation/_utils.ts
@@ -198,6 +198,7 @@ export interface ExtractedEditData {
   updatedContent: string | null;
   success?: boolean;
   timestamp?: string;
+  errorMessage?: string;
 }
 
 export const extractFileEditData = (
@@ -213,6 +214,7 @@ export const extractFileEditData = (
   actualIsSuccess: boolean;
   actualToolTimestamp?: string;
   actualAssistantTimestamp?: string;
+  errorMessage?: string;
 } => {
   let filePath: string | null = null;
   let originalContent: string | null = null;
@@ -220,13 +222,14 @@ export const extractFileEditData = (
   let actualIsSuccess = isSuccess;
   let actualToolTimestamp = toolTimestamp;
   let actualAssistantTimestamp = assistantTimestamp;
+  let errorMessage: string | undefined;
 
   const parseOutput = (output: any) => {
     if (typeof output === 'string') {
       try {
         return JSON.parse(output);
       } catch {
-        return null;
+        return output; // Return as string if not JSON
       }
     }
     return output;
@@ -237,12 +240,14 @@ export const extractFileEditData = (
     if (parsed?.tool_execution) {
       const args = parsed.tool_execution.arguments || {};
       const output = parseOutput(parsed.tool_execution.result?.output);
+      const success = parsed.tool_execution.result?.success;
       return {
         filePath: args.target_file || output?.file_path || null,
         originalContent: output?.original_content || null,
         updatedContent: output?.updated_content || null,
-        success: parsed.tool_execution.result?.success,
+        success: success,
         timestamp: parsed.tool_execution.execution_details?.timestamp,
+        errorMessage: success === false ? (typeof output === 'string' ? output : JSON.stringify(output)) : undefined,
       };
     }
     return {};
@@ -254,6 +259,7 @@ export const extractFileEditData = (
   filePath = toolData.filePath || assistantData.filePath;
   originalContent = toolData.originalContent || assistantData.originalContent;
   updatedContent = toolData.updatedContent || assistantData.updatedContent;
+  errorMessage = toolData.errorMessage || assistantData.errorMessage;
 
   if (toolData.success !== undefined) {
     actualIsSuccess = toolData.success;
@@ -263,7 +269,7 @@ export const extractFileEditData = (
     actualAssistantTimestamp = assistantData.timestamp || assistantTimestamp;
   }
 
-  return { filePath, originalContent, updatedContent, actualIsSuccess, actualToolTimestamp, actualAssistantTimestamp };
+  return { filePath, originalContent, updatedContent, actualIsSuccess, actualToolTimestamp, actualAssistantTimestamp, errorMessage };
 };
 
 const parseContent = (content: any): any => {