From 09774c084aa2df6ab6c566e2f67e0967a1fdac29 Mon Sep 17 00:00:00 2001
From: Claude <claude@anthropic.com>
Date: Wed, 28 Jan 2026 04:59:18 +0000
Subject: [PATCH] Bug RHOAIENG-39106: Make URLs clickable in chat messages

Add custom anchor component to ReactMarkdown defaultComponents to
ensure URLs in chat messages are rendered as clickable hyperlinks.

Changes:
- Add custom 'a' component to defaultComponents in message.tsx
- Configure links to open in new tab (target="_blank")
- Add security headers (rel="noopener noreferrer")
- Apply primary color styling with hover underline effect

The remarkGfm plugin auto-links URLs, but without a custom anchor
component they weren't properly styled or configured for external
links. This fix ensures all URLs are clickable and open safely in
new tabs.

Fixes: https://issues.redhat.com/browse/RHOAIENG-39106
---
 components/frontend/src/components/ui/message.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/components/frontend/src/components/ui/message.tsx b/components/frontend/src/components/ui/message.tsx
index 398858e87..fa2721cc6 100644
--- a/components/frontend/src/components/ui/message.tsx
+++ b/components/frontend/src/components/ui/message.tsx
@@ -83,6 +83,16 @@ const defaultComponents: Components = {
   li: ({ children }) => (
     <li className="leading-relaxed">{children}</li>
   ),
+  a: ({ href, children }) => (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="text-primary hover:underline cursor-pointer"
+    >
+      {children}
+    </a>
+  ),
 };
 
 const LOADING_MESSAGES = [