xertica-ui 2.3.0 → 2.4.0

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

@@ -1,147 +1,147 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button } from '../../ui/button';
-import { ChevronDown, ChevronUp } from 'lucide-react';
-
-/**
- * Props for the FormattedDocument component.
- */
-interface FormattedDocumentProps {
-  /** The raw markdown string to be converted and displayed */
-  content: string;
-  /** Maximum number of characters to show in the collapsed preview state */
-  maxPreviewLength?: number;
-  /** Additional CSS classes for the container */
-  className?: string;
-}
-
-/**
- * Simple Markdown-to-HTML formatter with collapsible preview.
- *
- * @description
- * Converts basic markdown syntax (headers, bold, lists, checkboxes) into styled
- * Tailwind HTML elements. Includes a "See more/less" toggle for long documents.
- *
- * @ai-rules
- * 1. Use this component to display AI-generated text or documentation strings.
- * 2. It supports standard markdown symbols: #, ##, ###, **, *, -, [ ], [x].
- * 3. `maxPreviewLength` defaults to 500 characters.
- */
-export function FormattedDocument({
-  content,
-  maxPreviewLength = 500,
-  className = '',
-}: FormattedDocumentProps) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const { t } = useTranslation();
-
-  /**
-   * Converts simple Markdown strings to HTML using regex patterns.
-   */
-  const convertMarkdownToHtml = (markdown: string): string => {
-    let html = markdown;
-
-    // Headers (with improved styling, reduced spacing)
-    html = html.replace(
-      /^### (.*$)/gim,
-      '<h3 class="text-base font-medium mt-2 mb-1 text-foreground">$1</h3>'
-    );
-    html = html.replace(
-      /^## (.*$)/gim,
-      '<h2 class="text-lg font-medium mt-2 mb-1 text-foreground">$1</h2>'
-    );
-    html = html.replace(
-      /^# (.*$)/gim,
-      '<h1 class="text-xl font-medium mt-3 mb-2 text-foreground">$1</h1>'
-    );
-
-    // Bold
-    html = html.replace(
-      /\*\*(.*?)\*\*/g,
-      '<strong class="font-medium text-foreground">$1</strong>'
-    );
-
-    // Italic
-    html = html.replace(/\*(.*?)\*/g, '<em class="italic">$1</em>');
-
-    // Checkboxes (Process before lists to avoid collisions)
-    html = html.replace(
-      /^[-*+] \[ \] (.*$)/gim,
-      '<div class="flex items-center gap-2 ml-4 my-0.5"><input type="checkbox" disabled class="rounded w-3.5 h-3.5 accent-primary" aria-label="$1" /> <span class="text-sm">$1</span></div>'
-    );
-    html = html.replace(
-      /^[-*+] \[x\] (.*$)/gim,
-      '<div class="flex items-center gap-2 ml-4 my-0.5"><input type="checkbox" checked disabled class="rounded w-3.5 h-3.5 accent-primary" aria-label="$1" /> <span class="text-sm">$1</span></div>'
-    );
-
-    // Lists (Bullet and Numbered) - Wrap blocks of items in ul/ol
-    html = html.replace(/((?:^[-*+] .*$(?:\n|$))+)/gim, match => {
-      const items = match
-        .trim()
-        .split('\n')
-        .map(item => `<li class="ml-6 my-0.5 list-disc">${item.replace(/^[-*+] /i, '')}</li>`)
-        .join('');
-      return `<ul class="list-disc my-2">${items}</ul>`;
-    });
-
-    html = html.replace(/((?:^\d+\. .*$(?:\n|$))+)/gim, match => {
-      const items = match
-        .trim()
-        .split('\n')
-        .map(item => `<li class="ml-6 my-0.5 list-decimal">${item.replace(/^\d+\. /i, '')}</li>`)
-        .join('');
-      return `<ol class="list-decimal my-2">${items}</ol>`;
-    });
-
-    // Horizontal rule
-    html = html.replace(/^---$/gim, '<hr class="my-2 border-border" />');
-
-    // Line breaks - treat single \n as space, \n\n as paragraph break
-    html = html.replace(/\n\n+/g, '</p><p class="my-0.5">');
-    html = html.replace(/\n/g, ' ');
-
-    // Wrap in paragraph
-    html = '<p class="my-0.5">' + html + '</p>';
-
-    return html;
-  };
-
-  const htmlContent = convertMarkdownToHtml(content);
-  const isLong = content.length > maxPreviewLength;
-
-  // If not long or if expanded, show everything
-  const displayContent =
-    !isLong || isExpanded
-      ? htmlContent
-      : convertMarkdownToHtml(content.substring(0, maxPreviewLength) + '...');
-
-  return (
-    <div className={className}>
-      <div
-        className="max-w-none text-sm text-foreground leading-relaxed break-words overflow-hidden"
-        dangerouslySetInnerHTML={{ __html: displayContent }}
-      />
-
-      {isLong && (
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => setIsExpanded(!isExpanded)}
-          className="mt-2 w-full text-xs hover:bg-accent text-muted-foreground"
-        >
-          {isExpanded ? (
-            <>
-              <ChevronUp className="w-3 h-3 mr-1" />
-              {t('common.seeLess')}
-            </>
-          ) : (
-            <>
-              <ChevronDown className="w-3 h-3 mr-1" />
-              {t('common.seeMore')}
-            </>
-          )}
-        </Button>
-      )}
-    </div>
-  );
-}
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../../ui/button';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+
+/**
+ * Props for the FormattedDocument component.
+ */
+interface FormattedDocumentProps {
+  /** The raw markdown string to be converted and displayed */
+  content: string;
+  /** Maximum number of characters to show in the collapsed preview state */
+  maxPreviewLength?: number;
+  /** Additional CSS classes for the container */
+  className?: string;
+}
+
+/**
+ * Simple Markdown-to-HTML formatter with collapsible preview.
+ *
+ * @description
+ * Converts basic markdown syntax (headers, bold, lists, checkboxes) into styled
+ * Tailwind HTML elements. Includes a "See more/less" toggle for long documents.
+ *
+ * @ai-rules
+ * 1. Use this component to display AI-generated text or documentation strings.
+ * 2. It supports standard markdown symbols: #, ##, ###, **, *, -, [ ], [x].
+ * 3. `maxPreviewLength` defaults to 500 characters.
+ */
+export function FormattedDocument({
+  content,
+  maxPreviewLength = 500,
+  className = '',
+}: FormattedDocumentProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const { t } = useTranslation();
+
+  /**
+   * Converts simple Markdown strings to HTML using regex patterns.
+   */
+  const convertMarkdownToHtml = (markdown: string): string => {
+    let html = markdown;
+
+    // Headers (with improved styling, reduced spacing)
+    html = html.replace(
+      /^### (.*$)/gim,
+      '<h3 class="text-base font-medium mt-2 mb-1 text-foreground">$1</h3>'
+    );
+    html = html.replace(
+      /^## (.*$)/gim,
+      '<h2 class="text-lg font-medium mt-2 mb-1 text-foreground">$1</h2>'
+    );
+    html = html.replace(
+      /^# (.*$)/gim,
+      '<h1 class="text-xl font-medium mt-3 mb-2 text-foreground">$1</h1>'
+    );
+
+    // Bold
+    html = html.replace(
+      /\*\*(.*?)\*\*/g,
+      '<strong class="font-medium text-foreground">$1</strong>'
+    );
+
+    // Italic
+    html = html.replace(/\*(.*?)\*/g, '<em class="italic">$1</em>');
+
+    // Checkboxes (Process before lists to avoid collisions)
+    html = html.replace(
+      /^[-*+] \[ \] (.*$)/gim,
+      '<div class="flex items-center gap-2 ml-4 my-0.5"><input type="checkbox" disabled class="rounded w-3.5 h-3.5 accent-primary" aria-label="$1" /> <span class="text-sm">$1</span></div>'
+    );
+    html = html.replace(
+      /^[-*+] \[x\] (.*$)/gim,
+      '<div class="flex items-center gap-2 ml-4 my-0.5"><input type="checkbox" checked disabled class="rounded w-3.5 h-3.5 accent-primary" aria-label="$1" /> <span class="text-sm">$1</span></div>'
+    );
+
+    // Lists (Bullet and Numbered) - Wrap blocks of items in ul/ol
+    html = html.replace(/((?:^[-*+] .*$(?:\n|$))+)/gim, match => {
+      const items = match
+        .trim()
+        .split('\n')
+        .map(item => `<li class="ml-6 my-0.5 list-disc">${item.replace(/^[-*+] /i, '')}</li>`)
+        .join('');
+      return `<ul class="list-disc my-2">${items}</ul>`;
+    });
+
+    html = html.replace(/((?:^\d+\. .*$(?:\n|$))+)/gim, match => {
+      const items = match
+        .trim()
+        .split('\n')
+        .map(item => `<li class="ml-6 my-0.5 list-decimal">${item.replace(/^\d+\. /i, '')}</li>`)
+        .join('');
+      return `<ol class="list-decimal my-2">${items}</ol>`;
+    });
+
+    // Horizontal rule
+    html = html.replace(/^---$/gim, '<hr class="my-2 border-border" />');
+
+    // Line breaks - treat single \n as space, \n\n as paragraph break
+    html = html.replace(/\n\n+/g, '</p><p class="my-0.5">');
+    html = html.replace(/\n/g, ' ');
+
+    // Wrap in paragraph
+    html = '<p class="my-0.5">' + html + '</p>';
+
+    return html;
+  };
+
+  const htmlContent = convertMarkdownToHtml(content);
+  const isLong = content.length > maxPreviewLength;
+
+  // If not long or if expanded, show everything
+  const displayContent =
+    !isLong || isExpanded
+      ? htmlContent
+      : convertMarkdownToHtml(content.substring(0, maxPreviewLength) + '...');
+
+  return (
+    <div className={className}>
+      <div
+        className="max-w-none text-sm text-foreground leading-relaxed break-words overflow-hidden"
+        dangerouslySetInnerHTML={{ __html: displayContent }}
+      />
+
+      {isLong && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="mt-2 w-full text-xs hover:bg-accent text-muted-foreground"
+        >
+          {isExpanded ? (
+            <>
+              <ChevronUp className="w-3 h-3 mr-1" />
+              {t('common.seeLess')}
+            </>
+          ) : (
+            <>
+              <ChevronDown className="w-3 h-3 mr-1" />
+              {t('common.seeMore')}
+            </>
+          )}
+        </Button>
+      )}
+    </div>
+  );
+}