From 36ad95edada3582419bb2d10447df0f3bced5bb6 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 30 Jan 2026 19:01:54 +0200
Subject: [PATCH 1/4] Add issues and suggestions display to `ExpertChatMessage`
 component with icon support

---
 .../components/expert/ExpertChatMessage.vue   | 77 +++++++++++++++----
 1 file changed, 63 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/expert/ExpertChatMessage.vue b/frontend/src/components/expert/ExpertChatMessage.vue
index ecd2354a05..d98d7c31f5 100644
--- a/frontend/src/components/expert/ExpertChatMessage.vue
+++ b/frontend/src/components/expert/ExpertChatMessage.vue
@@ -7,17 +7,34 @@
             <!-- Regular text content (for chat messages) -->
             <!-- eslint-disable-next-line vue/no-v-html -->
             <div v-if="!hasRichContent" class="message-text" v-html="formattedContent" />
+
+            <div v-if="hasIssues" class="issues">
+                <h4><exclamation-icon class="ff-icon" /> Issues</h4>
+                <ul>
+                    <li v-for="issue in issues" :key="issue">{{ sanitize(issue) }}</li>
+                </ul>
+            </div>
+
+            <div v-if="hasSuggestions" class="suggestions">
+                <h4><information-circle-icon class="ff-icon" /> Suggestions</h4>
+                <ul>
+                    <li v-for="suggestion in suggestions" :key="suggestion">{{ sanitize(suggestion) }}</li>
+                </ul>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
+import { ExclamationIcon, InformationCircleIcon } from '@heroicons/vue/solid'
 import { marked } from 'marked'
+import { h, render } from 'vue'
 
 import { sanitize } from '../../composables/String.js'
 
 export default {
     name: 'ExpertChatMessage',
+    components: { ExclamationIcon, InformationCircleIcon },
     props: {
         message: {
             type: Object,
@@ -55,16 +72,16 @@ export default {
             // Convert markdown to HTML
             const content = []
             content.push(this.message.content || '')
-            if (this.message.resources?.issues?.length > 0) {
-                content.push('\n\n')
-                content.push('**Issues:**')
-                content.push(this.message.resources.issues.map(issue => `\n- ${this.sanitize(issue)}`).join(''))
-            }
-            if (this.message.resources?.suggestions?.length > 0) {
-                content.push('\n\n')
-                content.push('**Suggestions:**')
-                content.push(this.message.resources.suggestions.map(suggestion => `\n- ${this.sanitize(suggestion)}`).join(''))
-            }
+            // if (this.message.resources?.issues?.length > 0) {
+            //     content.push('\n\n')
+            //     content.push('**Issues:**')
+            //     content.push(this.message.resources.issues.map(issue => `\n- ${this.sanitize(issue)}`).join(''))
+            // }
+            // if (this.message.resources?.suggestions?.length > 0) {
+            //     content.push('\n\n')
+            //     content.push('**Suggestions:**')
+            //     content.push(this.message.resources.suggestions.map(suggestion => `\n- ${this.sanitize(suggestion)}`).join(''))
+            // }
             const html = marked(content.join('\n'), {
                 breaks: true,
                 gfm: true
@@ -79,16 +96,24 @@ export default {
             })
         },
         issues () {
-            return this.resources.issues
+            return this.message.resources.issues
         },
         suggestions () {
-            return this.resources.suggestions
+            return this.message.resources.suggestions
         },
         hasIssues () {
-            return (this.resources.issues && this.resources.issues.length > 0)
+            return (this.message.resources?.issues && this.message.resources?.issues.length > 0)
         },
         hasSuggestions () {
-            return (this.resources.suggestions && this.resources.suggestions.length > 0)
+            return (this.message.resources?.suggestions && this.message.resources?.suggestions.length > 0)
+        }
+    },
+    methods: {
+        renderIconToHtml (component) {
+            const vnode = h(component, { class: 'inline-block w-5 h-5 mr-1 align-text-bottom' })
+            const container = document.createElement('div')
+            render(vnode, container)
+            return container.innerHTML
         }
     }
 }
@@ -120,6 +145,30 @@ export default {
             border-radius: 0.5rem;
             border-bottom-left-radius: 0.125rem;
         }
+
+        .issues, .suggestions {
+            margin-top: 1.25rem;
+            h4 {
+                font-weight: bold;
+                display: flex;
+                align-items: center;
+                gap: 5px;
+                color: $ff-grey-600;
+
+                .ff-icon {
+                    color: $ff-grey-500;
+                }
+            }
+
+            ul {
+                list-style: disc;
+                padding-left: 1.4rem;
+
+                li {
+                    margin-top: .5rem;
+                }
+            }
+        }
     }
 
     &.message-system {

From 6f8664fee4a89927a7d1ebaf24ec67189cd0be43 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 30 Jan 2026 19:03:58 +0200
Subject: [PATCH 2/4] Remove commented-out code for issues and suggestions
 display in `ExpertChatMessage` component

---
 frontend/src/components/expert/ExpertChatMessage.vue | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/frontend/src/components/expert/ExpertChatMessage.vue b/frontend/src/components/expert/ExpertChatMessage.vue
index d98d7c31f5..24c7ec043c 100644
--- a/frontend/src/components/expert/ExpertChatMessage.vue
+++ b/frontend/src/components/expert/ExpertChatMessage.vue
@@ -72,16 +72,7 @@ export default {
             // Convert markdown to HTML
             const content = []
             content.push(this.message.content || '')
-            // if (this.message.resources?.issues?.length > 0) {
-            //     content.push('\n\n')
-            //     content.push('**Issues:**')
-            //     content.push(this.message.resources.issues.map(issue => `\n- ${this.sanitize(issue)}`).join(''))
-            // }
-            // if (this.message.resources?.suggestions?.length > 0) {
-            //     content.push('\n\n')
-            //     content.push('**Suggestions:**')
-            //     content.push(this.message.resources.suggestions.map(suggestion => `\n- ${this.sanitize(suggestion)}`).join(''))
-            // }
+
             const html = marked(content.join('\n'), {
                 breaks: true,
                 gfm: true

From 9c4a7c61597e4c95a36c98cacee7918644e9c45c Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 30 Jan 2026 19:04:25 +0200
Subject: [PATCH 3/4] Remove unused `renderIconToHtml` method from
 `ExpertChatMessage` component

---
 frontend/src/components/expert/ExpertChatMessage.vue | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/frontend/src/components/expert/ExpertChatMessage.vue b/frontend/src/components/expert/ExpertChatMessage.vue
index 24c7ec043c..fcccefe18d 100644
--- a/frontend/src/components/expert/ExpertChatMessage.vue
+++ b/frontend/src/components/expert/ExpertChatMessage.vue
@@ -98,14 +98,6 @@ export default {
         hasSuggestions () {
             return (this.message.resources?.suggestions && this.message.resources?.suggestions.length > 0)
         }
-    },
-    methods: {
-        renderIconToHtml (component) {
-            const vnode = h(component, { class: 'inline-block w-5 h-5 mr-1 align-text-bottom' })
-            const container = document.createElement('div')
-            render(vnode, container)
-            return container.innerHTML
-        }
     }
 }
 </script>

From b36db2704b2cb29c80f4abdf9c0323e220b181c4 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 30 Jan 2026 19:04:35 +0200
Subject: [PATCH 4/4] Remove unused `h` and `render` imports from
 `ExpertChatMessage` component

---
 frontend/src/components/expert/ExpertChatMessage.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/expert/ExpertChatMessage.vue b/frontend/src/components/expert/ExpertChatMessage.vue
index fcccefe18d..fa4972d911 100644
--- a/frontend/src/components/expert/ExpertChatMessage.vue
+++ b/frontend/src/components/expert/ExpertChatMessage.vue
@@ -28,7 +28,6 @@
 <script>
 import { ExclamationIcon, InformationCircleIcon } from '@heroicons/vue/solid'
 import { marked } from 'marked'
-import { h, render } from 'vue'
 
 import { sanitize } from '../../composables/String.js'