commit

Author: Tejasri-Microsoft

src/App/src/components/content/PlanChat.tsx

@@ -87,8 +87,10 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
         {renderAgentMessages(agentMessages, undefined, undefined, finalResultRef)}
 
         {showProcessingPlanSpinner && renderPlanExecutionMessage()}
-        {/* Streaming plan updates */}
-        {showBufferingText && (
+        {/* Streaming plan updates — hidden while an approval prompt is pending so
+            the approval action is presented at the appropriate step instead of
+            after the thinking process visibly completes. */}
+        {showBufferingText && !showApprovalButtons && (
           <StreamingBufferMessage
             streamingMessageBuffer={streamingMessageBuffer}
             isStreaming={true}

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

@@ -82,6 +82,9 @@ const useStyles = makeStyles({
     backgroundColor: 'var(--colorNeutralBackground2)',
     color: 'var(--colorNeutralForeground1)',
     maxWidth: '100%',
+    width: '100%',
+    boxSizing: 'border-box',
+    overflowX: 'hidden',
     alignSelf: 'flex-start',
 
   },
@@ -219,10 +222,10 @@ const renderAgentMessages = (
                         />
                       ),
                       img: ({ node: _imgNode, ...props }) => (
-                        <div style={{ position: 'relative', display: 'inline-block', marginTop: '8px' }}>
+                        <div style={{ position: 'relative', display: 'block', width: '100%', maxWidth: '100%', marginTop: '8px', overflow: 'hidden' }}>
                           <img
                             {...props}
-                            style={{ maxWidth: '100%', borderRadius: '8px', display: 'block' }}
+                            style={{ display: 'block', width: '100%', maxWidth: '100%', height: 'auto', borderRadius: '8px' }}
                           />
                           <Button
                             appearance="subtle"
@@ -239,13 +242,27 @@ const renderAgentMessages = (
                               color: 'white',
                               borderRadius: '4px',
                             }}
-                            onClick={() => {
+                            onClick={async () => {
                               const url = props.src;
-                              if (url) {
+                              if (!url) return;
+                              const filename = `ad-image-${Date.now()}.png`;
+                              try {
+                                const response = await fetch(url, { mode: 'cors' });
+                                if (!response.ok) throw new Error(`Failed to fetch image (${response.status})`);
+                                const blob = await response.blob();
+                                const blobUrl = URL.createObjectURL(blob);
+                                const link = document.createElement('a');
+                                link.href = blobUrl;
+                                link.download = filename;
+                                document.body.appendChild(link);
+                                link.click();
+                                document.body.removeChild(link);
+                                URL.revokeObjectURL(blobUrl);
+                              } catch (err) {
+                                // Fallback: trigger direct download (works for same-origin or CORS-enabled URLs)
                                 const link = document.createElement('a');
                                 link.href = url;
-                                link.download = `ad-image-${Date.now()}.png`;
-                                link.target = '_blank';
+                                link.download = filename;
                                 document.body.appendChild(link);
                                 link.click();
                                 document.body.removeChild(link);
@@ -254,6 +271,38 @@ const renderAgentMessages = (
                             title="Download image"
                           />
                         </div>
+                      ),
+                      p: ({ node: _pNode, ...props }) => (
+                        <p {...props} style={{ margin: '0 0 8px 0' }} />
+                      ),
+                      h1: ({ node: _hNode, ...props }) => (
+                        <h1 {...props} style={{ fontSize: '20px', fontWeight: 600, margin: '16px 0 8px 0', lineHeight: '1.3' }} />
+                      ),
+                      h2: ({ node: _hNode, ...props }) => (
+                        <h2 {...props} style={{ fontSize: '17px', fontWeight: 600, margin: '14px 0 8px 0', lineHeight: '1.3' }} />
+                      ),
+                      h3: ({ node: _hNode, ...props }) => (
+                        <h3 {...props} style={{ fontSize: '15px', fontWeight: 600, margin: '12px 0 6px 0', lineHeight: '1.3' }} />
+                      ),
+                      ul: ({ node: _ulNode, ...props }) => (
+                        <ul {...props} style={{ margin: '8px 0', paddingLeft: '24px' }} />
+                      ),
+                      ol: ({ node: _olNode, ...props }) => (
+                        <ol {...props} style={{ margin: '8px 0', paddingLeft: '24px' }} />
+                      ),
+                      li: ({ node: _liNode, ...props }) => (
+                        <li {...props} style={{ margin: '4px 0', lineHeight: '1.5' }} />
+                      ),
+                      blockquote: ({ node: _bqNode, ...props }) => (
+                        <blockquote
+                          {...props}
+                          style={{
+                            margin: '8px 0',
+                            padding: '8px 12px',
+                            borderLeft: '3px solid var(--colorNeutralStroke1)',
+                            color: 'var(--colorNeutralForeground2)'
+                          }}
+                        />
                       )
                     }}
                 >

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

@@ -12,6 +12,67 @@ interface StreamingBufferMessageProps {
     isStreaming?: boolean;
 }
 
+/**
+ * Wrap any raw JSON object/array blocks in markdown fenced code blocks so the
+ * Details section renders them as formatted code rather than plain text.
+ * Lines that already sit inside an existing fenced block are left alone.
+ */
+const formatBufferContent = (content: string): string => {
+    if (!content) return content;
+
+    const lines = content.split('\n');
+    const out: string[] = [];
+    let insideExistingFence = false;
+    let i = 0;
+
+    while (i < lines.length) {
+        const line = lines[i];
+        const trimmed = line.trim();
+
+        if (trimmed.startsWith('```')) {
+            insideExistingFence = !insideExistingFence;
+            out.push(line);
+            i++;
+            continue;
+        }
+
+        if (!insideExistingFence && (trimmed.startsWith('{') || trimmed.startsWith('['))) {
+            // Try to capture a balanced JSON block starting at this line
+            let depth = 0;
+            let endIdx = -1;
+            for (let j = i; j < lines.length; j++) {
+                const l = lines[j];
+                for (const ch of l) {
+                    if (ch === '{' || ch === '[') depth++;
+                    else if (ch === '}' || ch === ']') depth--;
+                }
+                if (depth === 0) {
+                    endIdx = j;
+                    break;
+                }
+            }
+            if (endIdx !== -1) {
+                const block = lines.slice(i, endIdx + 1).join('\n');
+                try {
+                    const parsed = JSON.parse(block);
+                    out.push('```json');
+                    out.push(JSON.stringify(parsed, null, 2));
+                    out.push('```');
+                    i = endIdx + 1;
+                    continue;
+                } catch {
+                    // Not valid JSON — fall through and keep the original line
+                }
+            }
+        }
+
+        out.push(line);
+        i++;
+    }
+
+    return out.join('\n');
+};
+
 // Convert to a proper React component instead of a function
 const StreamingBufferMessage: React.FC<StreamingBufferMessageProps> = ({
     streamingMessageBuffer,
@@ -42,6 +103,8 @@ const StreamingBufferMessage: React.FC<StreamingBufferMessageProps> = ({
 
     if (!streamingMessageBuffer || streamingMessageBuffer.trim() === "") return null;
 
+    const formattedBuffer = formatBufferContent(streamingMessageBuffer);
+
     return (
         <div style={{
             maxWidth: '800px',
@@ -182,7 +245,7 @@ const StreamingBufferMessage: React.FC<StreamingBufferMessageProps> = ({
                                         )
                                     }}
                                 >
-                                    {streamingMessageBuffer}
+                                    {formattedBuffer}
                                 </ReactMarkdown>
                             </div>
                         </div>
@@ -216,7 +279,7 @@ const StreamingBufferMessage: React.FC<StreamingBufferMessageProps> = ({
                                 )
                             }}
                         >
-                            {streamingMessageBuffer}
+                            {formattedBuffer}
                         </ReactMarkdown>
                     </div>
                 )}

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

@@ -61,7 +61,9 @@ const useStyles = makeStyles({
         borderRadius: '8px',
         fontSize: '14px',
         lineHeight: '1.5',
-        wordWrap: 'break-word'
+        wordWrap: 'break-word',
+        marginLeft: '48px',
+        boxSizing: 'border-box'
     },
     factsSection: {
         backgroundColor: 'var(--colorNeutralBackground2)',