Rehype External Links Integration

Overview

This document describes the integration of rehype-external-links in the Agentic RAG frontend application.

Installation

The rehype-external-links package has been added to the project dependencies:

pnpm add rehype-external-links

Configuration

The plugin is configured in the MarkdownText component located at /src/components/ui/markdown-text.tsx:

import { MarkdownTextPrimitive } from "@assistant-ui/react-markdown";
import remarkGfm from "remark-gfm";
import rehypeExternalLinks from "rehype-external-links";

export const MarkdownText = () => {
  return (
    <MarkdownTextPrimitive
      remarkPlugins={[remarkGfm]}
      rehypePlugins={[[rehypeExternalLinks, {
        target: "_blank",
        rel: ["noopener", "noreferrer"],
      }]]}
      className="prose prose-gray max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
    />
  );
};

Features

Security

All external links automatically get rel="noopener noreferrer" for security
Prevents potential security vulnerabilities when opening external links

User Experience

External links open in new tabs (target="_blank")
Users stay on the application while exploring external references
Maintains session continuity

Citation Support

The plugin works seamlessly with the citation system implemented in the backend:

Citations links to CAT system open in new tabs
Standard/regulation links maintain proper security attributes
Internal navigation links work normally

Usage

The MarkdownText component is used in:

src/components/ui/mychat.tsx - Main chat interface
Assistant message rendering

Testing

To verify the functionality:

Send a query that generates citations
Check that citation links have proper attributes:
- target="_blank"
- rel="noopener noreferrer"
Verify links open in new tabs

Benefits

Security: Prevents window.opener attacks
UX: External links don't navigate away from the app
Accessibility: Maintains proper link semantics
Standards Compliance: Follows modern web security practices

Dependencies

rehype-external-links: ^3.0.0
@assistant-ui/react-markdown: ^0.10.9
remark-gfm: ^4.0.1

2.2 KiB Raw Blame History