From 67a4981cf2be17b14f58da30b2ada0babb10526c Mon Sep 17 00:00:00 2001
From: "coderabbitai[bot]"
 <136622811+coderabbitai[bot]@users.noreply.github.com>
Date: Mon, 1 Jun 2026 15:00:54 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20CodeRabbit=20Chat:=20Implement?=
 =?UTF-8?q?=20requested=20code=20changes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/download-report-button.tsx | 16 ++++++++++++++--
 components/report-template.tsx        | 27 +++++++++++++++++++++------
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/components/download-report-button.tsx b/components/download-report-button.tsx
index 7485f05c..7c7b5e4f 100644
--- a/components/download-report-button.tsx
+++ b/components/download-report-button.tsx
@@ -36,8 +36,20 @@ export const DownloadReportButton = () => {
 
       setShowTemplate(true)
 
-      // Wait for React to render the template
-      await new Promise(resolve => setTimeout(resolve, 500))
+      // Poll until the portal has committed to the DOM, up to 3 seconds
+      await new Promise<void>((resolve, reject) => {
+        const start = Date.now()
+        const check = () => {
+          if (document.getElementById('report-template')) {
+            resolve()
+          } else if (Date.now() - start > 3000) {
+            reject(new Error('Element with id report-template not found'))
+          } else {
+            requestAnimationFrame(check)
+          }
+        }
+        requestAnimationFrame(check)
+      })
 
       let chatTitle = 'Untitled Chat'
       if (aiState.messages.length > 0) {
diff --git a/components/report-template.tsx b/components/report-template.tsx
index 8b23eb5a..9cf1edb4 100644
--- a/components/report-template.tsx
+++ b/components/report-template.tsx
@@ -3,6 +3,20 @@ import { AIMessage } from '@/lib/types'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 
+// AIMessage content can be a string or an array of content parts ({type, text} | {type, image, ...})
+function getContentString(content: AIMessage['content']): string {
+  if (typeof content === 'string') {
+    return content
+  }
+  if (Array.isArray(content)) {
+    return content
+      .filter((part: any) => part.type === 'text')
+      .map((part: any) => part.text ?? '')
+      .join('\n')
+  }
+  return ''
+}
+
 export interface ReportTemplateProps {
   messages: AIMessage[]
   drawnFeatures?: Array<{
@@ -50,11 +64,12 @@ export const ReportTemplate: React.FC<ReportTemplateProps> = ({
           {filteredMessages.map((message, index) => {
             if (message.type === 'input' || message.type === 'input_related') {
               let content = ''
+              const rawContent = getContentString(message.content)
               try {
-                const json = JSON.parse(message.content as string)
-                content = message.type === 'input' ? json.input : json.related_query
+                const json = JSON.parse(rawContent)
+                content = message.type === 'input' ? (json.input ?? rawContent) : (json.related_query ?? rawContent)
               } catch (e) {
-                content = message.content as string
+                content = rawContent
               }
               return (
                 <div key={index} className="bg-gray-50 p-4 rounded-lg border-l-4 border-blue-500">
@@ -67,17 +82,17 @@ export const ReportTemplate: React.FC<ReportTemplateProps> = ({
                 <div key={index} className="prose prose-sm max-w-none">
                   <p className="text-sm font-bold text-green-600 mb-1">AI Response</p>
                   <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                    {message.content as string}
+                    {getContentString(message.content)}
                   </ReactMarkdown>
                 </div>
               )
             } else if (message.type === 'resolution_search_result') {
               try {
-                const result = JSON.parse(message.content as string)
+                const result = JSON.parse(getContentString(message.content))
                 return (
                   <div key={index} className="space-y-4">
                     <p className="text-sm font-bold text-purple-600 mb-1">Analysis Result</p>
-                    {result.summary && (
+
                       <div className="bg-purple-50 p-4 rounded-lg text-gray-800">
                         {result.summary}
                       </div>