chore: enchance notify link ui (#36155)

web/app/components/base/markdown-with-directive/__tests__/index.spec.tsx

@@ -185,6 +185,15 @@ describe('markdown-with-directive', () => {
       })
       expect(screen.getByText('Sanitized')).toBeInTheDocument()
       expectDecorativeIcon(container, 'https://example.com/safe.png')
+      sanitizeSpy.mockRestore()
+    })
+
+    it('should render markdown links without underline', () => {
+      render(<MarkdownWithDirective markdown="[Langfuse](https://langfuse.com)" />)
+
+      const link = screen.getByRole('link', { name: 'Langfuse' })
+      expect(link).toHaveClass('text-text-accent')
+      expect(link).toHaveStyle({ textDecoration: 'none' })
     })
 
     it('should render empty output and skip sanitizer when markdown is empty', () => {

web/app/components/base/markdown-with-directive/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { ReactNode } from 'react'
+import type { AnchorHTMLAttributes, ClassAttributes, ReactNode } from 'react'
 import type { Components, StreamdownProps } from 'streamdown'
 import DOMPurify from 'dompurify'
 import remarkDirective from 'remark-directive'
@@ -241,10 +241,25 @@ function directivePlugin() {
   }
 }
 
-const directiveComponents = {
+const directiveComponents: Components = {
+  a: (props) => {
+    const { children, href } = props as ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<HTMLAnchorElement>
+
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-text-accent"
+        style={{ textDecoration: 'none' }}
+      >
+        {children}
+      </a>
+    )
+  },
   withiconcardlist: WithIconCardListAdapter,
   withiconcarditem: WithIconCardItemAdapter,
-} satisfies Components
+}
 
 type MarkdownWithDirectiveProps = {
   markdown: string