init

vw-agentic-rag/docs/topics/REHYPE_EXTERNAL_LINKS.md

@@ -0,0 +1,81 @@
+# 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