82 lines
2.2 KiB
Markdown
82 lines
2.2 KiB
Markdown
|
# 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
|