# 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:

```bash
pnpm add rehype-external-links
```

## Configuration

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

```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:
1. Send a query that generates citations
2. Check that citation links have proper attributes:
   - `target="_blank"`
   - `rel="noopener noreferrer"`
3. Verify links open in new tabs

## Benefits

1. **Security**: Prevents `window.opener` attacks
2. **UX**: External links don't navigate away from the app
3. **Accessibility**: Maintains proper link semantics
4. **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