commit

Author: Tejasri-Microsoft

src/App/src/components/content/streaming/StreamingBufferMessage.tsx

@@ -65,29 +65,68 @@ const jsonToMarkdown = (value: any, depth = 0): string => {
 /**
  * Detect raw JSON blocks in the streaming buffer and replace them with a
  * readable Markdown rendering so the Details section doesn't expose raw JSON.
- * Lines that already sit inside an existing fenced code block are left alone.
+ * Handles both bare JSON blocks and fenced code blocks containing JSON
+ * (e.g. ```json ... ``` or ``` { ... } ```).
  */
 const formatBufferContent = (content: string): string => {
     if (!content) return content;
 
     const lines = content.split('\n');
     const out: string[] = [];
-    let insideExistingFence = false;
     let i = 0;
 
+    const tryRenderJsonBlock = (block: string): string | null => {
+        const trimmed = block.trim();
+        if (!trimmed) return null;
+        if (!(trimmed.startsWith('{') || trimmed.startsWith('['))) return null;
+        try {
+            const parsed = JSON.parse(trimmed);
+            if (parsed === null || typeof parsed !== 'object') return null;
+            return jsonToMarkdown(parsed);
+        } catch {
+            return null;
+        }
+    };
+
     while (i < lines.length) {
         const line = lines[i];
         const trimmed = line.trim();
 
+        // Fenced code block — try to render as readable JSON if applicable
         if (trimmed.startsWith('```')) {
-            insideExistingFence = !insideExistingFence;
-            out.push(line);
-            i++;
+            const fenceLang = trimmed.replace(/^```/, '').trim().toLowerCase();
+            // Find closing fence
+            let endIdx = -1;
+            for (let j = i + 1; j < lines.length; j++) {
+                if (lines[j].trim().startsWith('```')) {
+                    endIdx = j;
+                    break;
+                }
+            }
+            if (endIdx === -1) {
+                // Unterminated fence — pass remaining lines through unchanged
+                out.push(line);
+                i++;
+                continue;
+            }
+
+            const inner = lines.slice(i + 1, endIdx).join('\n');
+            const isJsonLang = fenceLang === 'json' || fenceLang === '';
+            const rendered = isJsonLang ? tryRenderJsonBlock(inner) : null;
+            if (rendered !== null) {
+                out.push(rendered);
+                out.push('');
+            } else {
+                // Keep original fenced block as-is
+                out.push(line);
+                for (let j = i + 1; j <= endIdx; j++) out.push(lines[j]);
+            }
+            i = endIdx + 1;
             continue;
         }
 
-        if (!insideExistingFence && (trimmed.startsWith('{') || trimmed.startsWith('['))) {
-            // Try to capture a balanced JSON block starting at this line
+        // Bare JSON block (not inside a fence)
+        if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
             let depth = 0;
             let endIdx = -1;
             for (let j = i; j < lines.length; j++) {
@@ -103,14 +142,12 @@ const formatBufferContent = (content: string): string => {
             }
             if (endIdx !== -1) {
                 const block = lines.slice(i, endIdx + 1).join('\n');
-                try {
-                    const parsed = JSON.parse(block);
-                    out.push(jsonToMarkdown(parsed));
+                const rendered = tryRenderJsonBlock(block);
+                if (rendered !== null) {
+                    out.push(rendered);
                     out.push('');
                     i = endIdx + 1;
                     continue;
-                } catch {
-                    // Not valid JSON — fall through and keep the original line
                 }
             }
         }