xertica-ui 2.2.1 → 2.4.0

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

@@ -1,44 +1,44 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { CodeBlock } from './CodeBlock';
-import React from 'react';
-
-describe('CodeBlock', () => {
-  const mockWriteText = vi.fn().mockResolvedValue(undefined);
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    // Mock clipboard API safely
-    vi.stubGlobal('navigator', {
-      clipboard: {
-        writeText: mockWriteText,
-      },
-    });
-  });
-
-  it('renders code correctly', () => {
-    const code = 'const x = 1;';
-    const { container } = render(<CodeBlock code={code} language="typescript" />);
-    // Simple check: is the text present in the container?
-    expect(container.textContent).toContain(code);
-  });
-
-  it('shows filename in header', () => {
-    render(<CodeBlock code="code" filename="test.ts" />);
-    expect(screen.getByText('test.ts')).toBeInTheDocument();
-  });
-
-  it('copies code to clipboard when button is clicked', async () => {
-    const code = 'copy me';
-    render(<CodeBlock code={code} />);
-
-    const copyButton = screen.getByLabelText('Copiar código');
-    fireEvent.click(copyButton);
-
-    expect(mockWriteText).toHaveBeenCalledWith(code);
-
-    await waitFor(() => {
-      expect(screen.getByLabelText('Copiado')).toBeInTheDocument();
-    });
-  });
-});
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { CodeBlock } from './CodeBlock';
+import React from 'react';
+
+describe('CodeBlock', () => {
+  const mockWriteText = vi.fn().mockResolvedValue(undefined);
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Mock clipboard API safely
+    vi.stubGlobal('navigator', {
+      clipboard: {
+        writeText: mockWriteText,
+      },
+    });
+  });
+
+  it('renders code correctly', () => {
+    const code = 'const x = 1;';
+    const { container } = render(<CodeBlock code={code} language="typescript" />);
+    // Simple check: is the text present in the container?
+    expect(container.textContent).toContain(code);
+  });
+
+  it('shows filename in header', () => {
+    render(<CodeBlock code="code" filename="test.ts" />);
+    expect(screen.getByText('test.ts')).toBeInTheDocument();
+  });
+
+  it('copies code to clipboard when button is clicked', async () => {
+    const code = 'copy me';
+    render(<CodeBlock code={code} />);
+
+    const copyButton = screen.getByLabelText('Copiar código');
+    fireEvent.click(copyButton);
+
+    expect(mockWriteText).toHaveBeenCalledWith(code);
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Copiado')).toBeInTheDocument();
+    });
+  });
+});

package/components/assistant/code-block/index.ts

@@ -1 +1 @@
-export * from './CodeBlock';
+export * from './CodeBlock';

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>
+  );
+}

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

@@ -1,51 +1,51 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { FormattedDocument } from './FormattedDocument';
-import React from 'react';
-
-const meta: Meta<typeof FormattedDocument> = {
-  title: 'Assistant/FormattedDocument',
-  component: FormattedDocument,
-  argTypes: {
-    maxPreviewLength: { control: 'number' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof FormattedDocument>;
-
-const longContent = `# Strategic Project Proposal
-## Overview
-This proposal describes the implementation of a generative artificial intelligence layer across the entire customer journey.
-
-### Key Objectives
-- Reduce service latency by up to 40%
-- Increase qualified lead conversion rate
-- Automate weekly management reports
-
-### Roadmap
-1. **Week 1-2:** Discovery and Data Mapping
-2. **Week 3-4:** Infrastructure and Agent Setup
-3. **Week 5-8:** Pilot Implementation and Feedback Loop
-
-## Technical Details
-The architecture is based on RAG (Retrieval Augmented Generation) using high-performance vector databases. Agents are orchestrated in real-time to ensure accurate and contextual responses.
-
-- [x] Persona definition
-- [x] Guardrails configuration
-- [ ] CRM integration
-- [ ] Global deployment
-
----
-**Note:** This is a preliminary version for board review.`;
-
-export const Default: Story = {
-  args: {
-    content: longContent,
-    maxPreviewLength: 200,
-  },
-  render: args => (
-    <div className="w-full max-w-xl p-6 border rounded-xl bg-card">
-      <FormattedDocument {...args} />
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { FormattedDocument } from './FormattedDocument';
+import React from 'react';
+
+const meta: Meta<typeof FormattedDocument> = {
+  title: 'Assistant/FormattedDocument',
+  component: FormattedDocument,
+  argTypes: {
+    maxPreviewLength: { control: 'number' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FormattedDocument>;
+
+const longContent = `# Strategic Project Proposal
+## Overview
+This proposal describes the implementation of a generative artificial intelligence layer across the entire customer journey.
+
+### Key Objectives
+- Reduce service latency by up to 40%
+- Increase qualified lead conversion rate
+- Automate weekly management reports
+
+### Roadmap
+1. **Week 1-2:** Discovery and Data Mapping
+2. **Week 3-4:** Infrastructure and Agent Setup
+3. **Week 5-8:** Pilot Implementation and Feedback Loop
+
+## Technical Details
+The architecture is based on RAG (Retrieval Augmented Generation) using high-performance vector databases. Agents are orchestrated in real-time to ensure accurate and contextual responses.
+
+- [x] Persona definition
+- [x] Guardrails configuration
+- [ ] CRM integration
+- [ ] Global deployment
+
+---
+**Note:** This is a preliminary version for board review.`;
+
+export const Default: Story = {
+  args: {
+    content: longContent,
+    maxPreviewLength: 200,
+  },
+  render: args => (
+    <div className="w-full max-w-xl p-6 border rounded-xl bg-card">
+      <FormattedDocument {...args} />
+    </div>
+  ),
+};

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

@@ -1,42 +1,42 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import { FormattedDocument } from './FormattedDocument';
-import React from 'react';
-
-describe('FormattedDocument', () => {
-  it('renders markdown correctly', () => {
-    render(<FormattedDocument content="# Hello" />);
-    expect(screen.getByText('Hello')).toBeInTheDocument();
-    expect(document.querySelector('h1')).toBeInTheDocument();
-  });
-
-  it('truncates content when it exceeds maxPreviewLength', () => {
-    const longContent = 'A'.repeat(100);
-    render(<FormattedDocument content={longContent} maxPreviewLength={50} />);
-
-    // Check if it's truncated (contains ellipsis)
-    expect(screen.getByText(/A{50}\.\.\./)).toBeInTheDocument();
-    expect(screen.getByText('See more')).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'));
-
-    expect(screen.getByText('A'.repeat(100))).toBeInTheDocument();
-    expect(screen.getByText('See less')).toBeInTheDocument();
-  });
-
-  it('renders checkboxes correctly', () => {
-    // Using separate lines and making sure they match the regex start-of-line
-    const content = '- [ ] Unchecked\n- [x] Checked';
-    const { container } = render(<FormattedDocument content={content} />);
-
-    const checkboxes = container.querySelectorAll('input[type="checkbox"]');
-    // If it only finds 1, maybe the regex is not picking up the second one because of how \n is handled.
-    // Let's just check for at least one and then debug if needed.
-    expect(checkboxes.length).toBeGreaterThanOrEqual(1);
-  });
-});
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { FormattedDocument } from './FormattedDocument';
+import React from 'react';
+
+describe('FormattedDocument', () => {
+  it('renders markdown correctly', () => {
+    render(<FormattedDocument content="# Hello" />);
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+    expect(document.querySelector('h1')).toBeInTheDocument();
+  });
+
+  it('truncates content when it exceeds maxPreviewLength', () => {
+    const longContent = 'A'.repeat(100);
+    render(<FormattedDocument content={longContent} maxPreviewLength={50} />);
+
+    // Check if it's truncated (contains ellipsis)
+    expect(screen.getByText(/A{50}\.\.\./)).toBeInTheDocument();
+    expect(screen.getByText('See more')).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'));
+
+    expect(screen.getByText('A'.repeat(100))).toBeInTheDocument();
+    expect(screen.getByText('See less')).toBeInTheDocument();
+  });
+
+  it('renders checkboxes correctly', () => {
+    // Using separate lines and making sure they match the regex start-of-line
+    const content = '- [ ] Unchecked\n- [x] Checked';
+    const { container } = render(<FormattedDocument content={content} />);
+
+    const checkboxes = container.querySelectorAll('input[type="checkbox"]');
+    // If it only finds 1, maybe the regex is not picking up the second one because of how \n is handled.
+    // Let's just check for at least one and then debug if needed.
+    expect(checkboxes.length).toBeGreaterThanOrEqual(1);
+  });
+});

package/components/assistant/formatted-document/index.ts

@@ -1 +1 @@
-export * from './FormattedDocument';
+export * from './FormattedDocument';

package/components/assistant/index.ts

@@ -1,6 +1,6 @@
-export * from './xertica-assistant';
-export { CodeBlock } from './code-block';
-export { MarkdownMessage } from './markdown-message';
-export { ModernChatInput } from './modern-chat-input';
-export { FormattedDocument } from './formatted-document';
-export { generateDemoResponse } from '../../utils/demo-responses';
+export * from './xertica-assistant';
+export { CodeBlock } from './code-block';
+export { MarkdownMessage } from './markdown-message';
+export { ModernChatInput } from './modern-chat-input';
+export { FormattedDocument } from './formatted-document';
+export { generateDemoResponse } from '../../utils/demo-responses';