xertica-ui 2.5.3 → 2.6.0

package/components/Introduction.mdx

@@ -1,121 +1,121 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import { XerticaLogo } from './brand/xertica-logo/XerticaLogo';
-
-<Meta title="Introduction" />
-
-<div className="flex flex-col gap-8 py-12 max-w-4xl mx-auto">
-  <div className="flex flex-col items-center text-center space-y-4">
-    <div className="p-3">
-      <XerticaLogo className="h-16 w-auto" />
-    </div>
-    <h1 className="text-5xl font-extrabold tracking-tight text-foreground">Design System</h1>
-    <p className="text-xl text-muted-foreground max-w-2xl">
-      Official Design System for Xertica projects. Built with Tailwind CSS v4, Radix UI, and AI-first engineering.
-    </p>
-    <div className="text-lg font-mono text-muted-foreground bg-muted px-4 py-2 rounded-lg">
-      97 Components
-    </div>
-    <div className="flex gap-4 pt-4">
-      <a href="https://www.npmjs.com/package/xertica-ui" target="_blank" className="h-11 px-8 rounded-full border border-border bg-background text-foreground font-medium flex items-center hover:bg-accent transition-colors no-underline">
-        NPM
-      </a>
-    </div>
-  </div>
-
-  {/* Installation */}
-  <div className="bg-muted p-8 rounded-2xl space-y-6">
-    <h2 className="text-2xl font-bold">Installation</h2>
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-      <div className="space-y-3">
-        <h3 className="font-semibold flex items-center gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
-          npm
-        </h3>
-        <div className="bg-background p-4 rounded-lg border border-border font-mono text-sm overflow-x-auto">
-          <pre className="text-foreground"><code>npm install xertica-ui</code></pre>
-        </div>
-      </div>
-      <div className="space-y-3">
-        <h3 className="font-semibold flex items-center gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v8"/><path d="m16 6-4 4-4-4"/><rect width="20" height="8" x="2" y="14" rx="2"/></svg>
-          npx (CLI)
-        </h3>
-        <div className="bg-background p-4 rounded-lg border border-border font-mono text-sm overflow-x-auto">
-          <pre className="text-foreground"><code>npx xertica-ui@latest init</code></pre>
-        </div>
-      </div>
-    </div>
-    <p className="text-sm text-muted-foreground">
-      Use <code>npm</code> to install the package, or <code>npx</code> to scaffold a new project with the CLI.
-    </p>
-  </div>
-
-  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 pt-8">
-    <div className="p-6 rounded-[var(--radius-card)] border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
-      <div className="w-10 h-10 bg-info/10 rounded-lg flex items-center justify-center mb-4 text-info">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v8"/><path d="m16 6-4 4-4-4"/><rect width="20" height="8" x="2" y="14" rx="2"/></svg>
-      </div>
-      <h3 className="text-lg font-semibold mb-2">Instant Installation</h3>
-      <p className="text-sm text-muted-foreground leading-relaxed">
-        Add to your project with a single command. Integrated CLI for layout and theme scaffolding.
-      </p>
-    </div>
-
-    <div className="p-6 rounded-[var(--radius-card)] border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
-      <div className="w-10 h-10 bg-success/10 rounded-lg flex items-center justify-center mb-4 text-success">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
-      </div>
-      <h3 className="text-lg font-semibold mb-2">Tailwind v4 Native</h3>
-      <p className="text-sm text-muted-foreground leading-relaxed">
-        Leverage the power of Tailwind CSS v4 with its new faster and more flexible engine.
-      </p>
-    </div>
-
-    <div className="p-6 rounded-[var(--radius-card)] border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
-      <div className="w-10 h-10 bg-warning/10 rounded-lg flex items-center justify-center mb-4 text-warning">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
-      </div>
-      <h3 className="text-lg font-semibold mb-2">AI-Ready</h3>
-      <p className="text-sm text-muted-foreground leading-relaxed">
-        Documentation optimized for LLM prompt systems (Antigravity, Cursor, etc).
-      </p>
-    </div>
-  </div>
-
-  <div className="space-y-6 pt-12">
-    <h2 className="text-3xl font-bold border-b pb-2 border-border">Design Philosophy</h2>
-    <p className="text-lg leading-relaxed text-muted-foreground">
-      Xertica UI focuses on modularity and high performance for Xertica's ecosystem of products. 
-      Our goal is to ensure functional consistency, accessibility (via Radix UI), and rapid development at scale.
-    </p>
-
-    <div className="bg-muted p-8 rounded-2xl space-y-4">
-      <h4 className="font-bold flex items-center gap-2">
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></svg>
-        Ecosystem Highlights
-      </h4>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div className="flex items-center gap-2 bg-background p-3 rounded-lg border border-border shadow-sm">
-          <span className="w-2 h-2 rounded-full bg-primary" />
-          <span><b>Radix UI</b> for accessible, unstyled primitives.</span>
-        </div>
-        <div className="flex items-center gap-2 bg-background p-3 rounded-lg border border-border shadow-sm">
-          <span className="w-2 h-2 rounded-full bg-primary" />
-          <span><b>Tailwind v4</b> ultra-fast engine.</span>
-        </div>
-        <div className="flex items-center gap-2 bg-background p-3 rounded-lg border border-border shadow-sm">
-          <span className="w-2 h-2 rounded-full bg-primary" />
-          <span><b>Dark Mode</b> native via CSS Tokens.</span>
-        </div>
-        <div className="flex items-center gap-2 bg-background p-3 rounded-lg border border-border shadow-sm">
-          <span className="w-2 h-2 rounded-full bg-primary" />
-          <span><b>Full Customization</b> via <code>tokens.css</code>.</span>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div className="pt-12 text-center text-sm text-muted-foreground border-t border-border">
-    &copy; 2026 Xertica. All rights reserved.
-  </div>
-</div>
+import { Meta } from '@storybook/addon-docs/blocks';
+import { XerticaLogo } from './brand/xertica-logo/XerticaLogo';
+
+<Meta title="Introduction" />
+
+<div className="flex flex-col gap-8 py-12 max-w-4xl mx-auto">
+  <div className="flex flex-col items-center text-center space-y-4">
+    <div className="p-3">
+      <XerticaLogo className="h-16 w-auto" />
+    </div>
+    <h1 className="text-5xl font-extrabold tracking-tight text-foreground">Design System</h1>
+    <p className="text-xl text-muted-foreground max-w-2xl">
+      Official Design System for Xertica projects. Built with Tailwind CSS v4, Radix UI, and AI-first engineering.
+    </p>
+    <div className="text-lg font-mono text-muted-foreground bg-muted px-4 py-2 rounded-lg">
+      97 Components
+    </div>
+    <div className="flex gap-4 pt-4">
+      <a href="https://www.npmjs.com/package/xertica-ui" target="_blank" className="h-11 px-8 rounded-full border border-border bg-background text-foreground font-medium flex items-center hover:bg-accent transition-colors no-underline">
+        NPM
+      </a>
+    </div>
+  </div>
+
+  {/* Installation */}
+  <div className="bg-muted p-8 rounded-2xl space-y-6">
+    <h2 className="text-2xl font-bold">Installation</h2>
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div className="space-y-3">
+        <h3 className="font-semibold flex items-center gap-2">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
+          npm
+        </h3>
+        <div className="bg-background p-4 rounded-lg border border-border font-mono text-sm overflow-x-auto">
+          <pre className="text-foreground"><code>npm install xertica-ui</code></pre>
+        </div>
+      </div>
+      <div className="space-y-3">
+        <h3 className="font-semibold flex items-center gap-2">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v8"/><path d="m16 6-4 4-4-4"/><rect width="20" height="8" x="2" y="14" rx="2"/></svg>
+          npx (CLI)
+        </h3>
+        <div className="bg-background p-4 rounded-lg border border-border font-mono text-sm overflow-x-auto">
+          <pre className="text-foreground"><code>npx xertica-ui@latest init</code></pre>
+        </div>
+      </div>
+    </div>
+    <p className="text-sm text-muted-foreground">
+      Use <code>npm</code> to install the package, or <code>npx</code> to scaffold a new project with the CLI.
+    </p>
+  </div>
+
+  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 pt-8">
+    <div className="p-6 rounded-[var(--radius-card)] border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
+      <div className="w-10 h-10 bg-info/10 rounded-lg flex items-center justify-center mb-4 text-info">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v8"/><path d="m16 6-4 4-4-4"/><rect width="20" height="8" x="2" y="14" rx="2"/></svg>
+      </div>
+      <h3 className="text-lg font-semibold mb-2">Instant Installation</h3>
+      <p className="text-sm text-muted-foreground leading-relaxed">
+        Add to your project with a single command. Integrated CLI for layout and theme scaffolding.
+      </p>
+    </div>
+
+    <div className="p-6 rounded-[var(--radius-card)] border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
+      <div className="w-10 h-10 bg-success/10 rounded-lg flex items-center justify-center mb-4 text-success">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
+      </div>
+      <h3 className="text-lg font-semibold mb-2">Tailwind v4 Native</h3>
+      <p className="text-sm text-muted-foreground leading-relaxed">
+        Leverage the power of Tailwind CSS v4 with its new faster and more flexible engine.
+      </p>
+    </div>
+
+    <div className="p-6 rounded-[var(--radius-card)] border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
+      <div className="w-10 h-10 bg-warning/10 rounded-lg flex items-center justify-center mb-4 text-warning">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
+      </div>
+      <h3 className="text-lg font-semibold mb-2">AI-Ready</h3>
+      <p className="text-sm text-muted-foreground leading-relaxed">
+        Documentation optimized for LLM prompt systems (Antigravity, Cursor, etc).
+      </p>
+    </div>
+  </div>
+
+  <div className="space-y-6 pt-12">
+    <h2 className="text-3xl font-bold border-b pb-2 border-border">Design Philosophy</h2>
+    <p className="text-lg leading-relaxed text-muted-foreground">
+      Xertica UI focuses on modularity and high performance for Xertica's ecosystem of products. 
+      Our goal is to ensure functional consistency, accessibility (via Radix UI), and rapid development at scale.
+    </p>
+
+    <div className="bg-muted p-8 rounded-2xl space-y-4">
+      <h4 className="font-bold flex items-center gap-2">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></svg>
+        Ecosystem Highlights
+      </h4>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="flex items-center gap-2 bg-background p-3 rounded-lg border border-border shadow-sm">
+          <span className="w-2 h-2 rounded-full bg-primary" />
+          <span><b>Radix UI</b> for accessible, unstyled primitives.</span>
+        </div>
+        <div className="flex items-center gap-2 bg-background p-3 rounded-lg border border-border shadow-sm">
+          <span className="w-2 h-2 rounded-full bg-primary" />
+          <span><b>Tailwind v4</b> ultra-fast engine.</span>
+        </div>
+        <div className="flex items-center gap-2 bg-background p-3 rounded-lg border border-border shadow-sm">
+          <span className="w-2 h-2 rounded-full bg-primary" />
+          <span><b>Dark Mode</b> native via CSS Tokens.</span>
+        </div>
+        <div className="flex items-center gap-2 bg-background p-3 rounded-lg border border-border shadow-sm">
+          <span className="w-2 h-2 rounded-full bg-primary" />
+          <span><b>Full Customization</b> via <code>tokens.css</code>.</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div className="pt-12 text-center text-sm text-muted-foreground border-t border-border">
+    &copy; 2026 Xertica. All rights reserved.
+  </div>
+</div>

package/components/assistant/code-block/CodeBlock.tsx

@@ -5,7 +5,7 @@ import { Button } from '../../ui/button';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 
 // Elegant custom theme inspired by Xertica.ai design system
-const elegantTheme = {
+const elegantTheme: { [key: string]: React.CSSProperties } = {
   'code[class*="language-"]': {
     color: 'var(--foreground)',
     fontFamily: 'var(--font-mono)',
@@ -173,11 +173,12 @@ export const CodeBlock = ({
       if (navigator.clipboard && navigator.clipboard.writeText) {
         try {
           await navigator.clipboard.writeText(code);
-        } catch (clipboardError: any) {
+        } catch (clipboardError) {
           // If clipboard API fails due to permissions, fall back to execCommand
           if (
-            clipboardError.name === 'NotAllowedError' ||
-            clipboardError.message.includes('permissions policy')
+            clipboardError instanceof Error &&
+            (clipboardError.name === 'NotAllowedError' ||
+              clipboardError.message.includes('permissions policy'))
           ) {
             throw new Error('Clipboard permission denied, falling back');
           }
@@ -189,7 +190,7 @@ export const CodeBlock = ({
 
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
+    } catch {
       // Fallback for browsers that don't support Clipboard API or when permissions are denied
       try {
         const textArea = document.createElement('textarea');
@@ -246,7 +247,7 @@ export const CodeBlock = ({
         <div className="overflow-x-auto w-full max-w-full">
           <SyntaxHighlighter
             language={language}
-            style={elegantTheme as any}
+            style={elegantTheme}
             showLineNumbers={showLineNumbers}
             wrapLines={true}
             customStyle={{

package/components/assistant/code-block/code-block.mdx

@@ -1,38 +1,38 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as CodeBlockStories from './code-block.stories';
-
-<Meta of={CodeBlockStories} />
-
-<Title />
-<Subtitle>An elegant syntax highlighter with built-in copy functionality and Xertica branding.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Usage Patterns
-
-### Development Snippets
-Ideal for showing code examples with line numbers and filename headers.
-
-<Canvas>
-  <CodeBlockStories.Default />
-</Canvas>
-
-### Terminal Commands
-Compact view for shell commands or configuration highlights.
-
-<Canvas>
-  <CodeBlockStories.Simple />
-</Canvas>
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Language Selection** — Always specify the correct `language` prop to ensure accurate syntax highlighting.
-> - **Theme Consistency** — The underlying `elegantTheme` automatically maps to the system's CSS theme variables; ensure the `XerticaProvider` is wrapping the application for correct colors.
-> - **Clipboard Support** — Copy functionality includes progressive fallbacks for browsers with restricted clipboard permissions.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as CodeBlockStories from './code-block.stories';
+
+<Meta of={CodeBlockStories} />
+
+<Title />
+<Subtitle>An elegant syntax highlighter with built-in copy functionality and Xertica branding.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Usage Patterns
+
+### Development Snippets
+Ideal for showing code examples with line numbers and filename headers.
+
+<Canvas>
+  <CodeBlockStories.Default />
+</Canvas>
+
+### Terminal Commands
+Compact view for shell commands or configuration highlights.
+
+<Canvas>
+  <CodeBlockStories.Simple />
+</Canvas>
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Language Selection** — Always specify the correct `language` prop to ensure accurate syntax highlighting.
+> - **Theme Consistency** — The underlying `elegantTheme` automatically maps to the system's CSS theme variables; ensure the `XerticaProvider` is wrapping the application for correct colors.
+> - **Clipboard Support** — Copy functionality includes progressive fallbacks for browsers with restricted clipboard permissions.

package/components/assistant/code-block/code-block.test.tsx

@@ -1,4 +1,5 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import { renderWithProviders as render } from '../../../test/render';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { CodeBlock } from './CodeBlock';
 import React from 'react';

package/components/assistant/formatted-document/FormattedDocument.tsx

@@ -41,6 +41,9 @@ export function FormattedDocument({
   const convertMarkdownToHtml = (markdown: string): string => {
     let html = markdown;
 
+    // Escape existing HTML
+    html = html.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
     // Headers (with improved styling, reduced spacing)
     html = html.replace(
       /^### (.*$)/gim,

package/components/assistant/formatted-document/formatted-document.mdx

@@ -1,31 +1,31 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as FormattedDocumentStories from './formatted-document.stories';
-
-<Meta of={FormattedDocumentStories} />
-
-<Title />
-<Subtitle>A lightweight markdown renderer for displaying AI-generated summaries and documentation.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Usage Patterns
-
-### Collapsible Content
-Ideal for displaying long AI responses where a "See more" toggle is needed to preserve page verticality.
-
-<Canvas>
-  <FormattedDocumentStories.Default />
-</Canvas>
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Markdown Compatibility** — Supports basic markdown: headers (`#`), bold (`**`), lists (`-`), and checkboxes (`- [ ]`). It does not support complex nested tables or markdown-in-html.
-> - **Preview Mode** — Use `maxPreviewLength` to control the initial character count before truncation. Defaults to 500.
-> - **Safe Injection** — Content is rendered via `dangerouslySetInnerHTML`. Ensure the source content (e.g., from an AI API) is trustable and sanitized if necessary.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as FormattedDocumentStories from './formatted-document.stories';
+
+<Meta of={FormattedDocumentStories} />
+
+<Title />
+<Subtitle>A lightweight markdown renderer for displaying AI-generated summaries and documentation.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Usage Patterns
+
+### Collapsible Content
+Ideal for displaying long AI responses where a "See more" toggle is needed to preserve page verticality.
+
+<Canvas>
+  <FormattedDocumentStories.Default />
+</Canvas>
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Markdown Compatibility** — Supports basic markdown: headers (`#`), bold (`**`), lists (`-`), and checkboxes (`- [ ]`). It does not support complex nested tables or markdown-in-html.
+> - **Preview Mode** — Use `maxPreviewLength` to control the initial character count before truncation. Defaults to 500.
+> - **Safe Injection** — Content is rendered via `dangerouslySetInnerHTML`. Ensure the source content (e.g., from an AI API) is trustable and sanitized if necessary.

package/components/assistant/formatted-document/formatted-document.test.tsx

@@ -1,4 +1,5 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { screen, fireEvent } from '@testing-library/react';
+import { renderWithProviders as render } from '../../../test/render';
 import { describe, it, expect } from 'vitest';
 import { FormattedDocument } from './FormattedDocument';
 import React from 'react';
@@ -16,17 +17,17 @@ describe('FormattedDocument', () => {
 
     // Check if it's truncated (contains ellipsis)
     expect(screen.getByText(/A{50}\.\.\./)).toBeInTheDocument();
-    expect(screen.getByText('See more')).toBeInTheDocument();
+    expect(screen.getByText('Ver mais')).toBeInTheDocument();
   });
 
   it('expands content when See more is clicked', () => {
     const longContent = 'A'.repeat(100);
     render(<FormattedDocument content={longContent} maxPreviewLength={50} />);
 
-    fireEvent.click(screen.getByText('See more'));
+    fireEvent.click(screen.getByText('Ver mais'));
 
     expect(screen.getByText('A'.repeat(100))).toBeInTheDocument();
-    expect(screen.getByText('See less')).toBeInTheDocument();
+    expect(screen.getByText('Ver menos')).toBeInTheDocument();
   });
 
   it('renders checkboxes correctly', () => {

package/components/assistant/markdown-message/MarkdownMessage.tsx

@@ -29,7 +29,7 @@ export function MarkdownMessage({ content, className = '' }: MarkdownMessageProp
     let html = markdown;
 
     // Escape existing HTML
-    html = html.replace(/</g, '<').replace(/>/g, '>');
+    html = html.replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
     // Headers (large to small to avoid conflicts)
     html = html.replace(

package/components/assistant/markdown-message/markdown-message.mdx

@@ -1,44 +1,44 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as MarkdownMessageStories from './markdown-message.stories';
-
-<Meta of={MarkdownMessageStories} />
-
-<Title />
-<Subtitle>Renders AI assistant messages as formatted Markdown with syntax-highlighted code blocks.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Usage
-
-```tsx
-import { MarkdownMessage } from 'xertica-ui/assistant';
-
-<MarkdownMessage content="**Hello!** Here is a `code` example." />
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `content` | `string` | _(required)_ | The Markdown string to render |
-| `className` | `string` | `''` | Additional CSS classes on the root container |
-
-## Supported Markdown
-
-- **Bold**, _italic_, ~~strikethrough~~
-- `inline code` and fenced code blocks with syntax highlighting
-- Lists (ordered and unordered)
-- Headers (`# H1`, `## H2`, etc.)
-- Tables
-- Blockquotes
-
-## AI Rules
-
-> [!IMPORTANT]
-> - This component is used **exclusively inside** `XerticaAssistant` message bubbles.
-> - Do not use it for general-purpose Markdown rendering outside the assistant context — use a standard Markdown library instead.
-> - Always sanitize content before passing it if coming from untrusted sources.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as MarkdownMessageStories from './markdown-message.stories';
+
+<Meta of={MarkdownMessageStories} />
+
+<Title />
+<Subtitle>Renders AI assistant messages as formatted Markdown with syntax-highlighted code blocks.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Usage
+
+```tsx
+import { MarkdownMessage } from 'xertica-ui/assistant';
+
+<MarkdownMessage content="**Hello!** Here is a `code` example." />
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `content` | `string` | _(required)_ | The Markdown string to render |
+| `className` | `string` | `''` | Additional CSS classes on the root container |
+
+## Supported Markdown
+
+- **Bold**, _italic_, ~~strikethrough~~
+- `inline code` and fenced code blocks with syntax highlighting
+- Lists (ordered and unordered)
+- Headers (`# H1`, `## H2`, etc.)
+- Tables
+- Blockquotes
+
+## AI Rules
+
+> [!IMPORTANT]
+> - This component is used **exclusively inside** `XerticaAssistant` message bubbles.
+> - Do not use it for general-purpose Markdown rendering outside the assistant context — use a standard Markdown library instead.
+> - Always sanitize content before passing it if coming from untrusted sources.