xertica-ui 1.6.1 → 1.6.2

package/bin/cli.ts

@@ -181,7 +181,7 @@ program
 
                 const minimalApp = `import React, { useState, useEffect, useLayoutEffect } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
-import { XerticaProvider, Toaster } from 'xertica-ui';
+import { XerticaProvider } from 'xertica-ui';
 ${imports.join('\n')}
 
 export default function App() {
@@ -193,7 +193,6 @@ ${routes.join('\n')}
           <Route path="/" element={<Navigate to="${hasLogin ? '/login' : hasHome ? '/home' : '/template'}" replace />} />
           <Route path="*" element={<Navigate to="${hasLogin ? '/login' : hasHome ? '/home' : '/template'}" replace />} />
         </Routes>
-        <Toaster position="top-right" richColors />
       </Router>
     </XerticaProvider>
   );

package/components/{CodeBlock.tsx → assistant/code-block/CodeBlock.tsx}

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Check, Copy } from 'lucide-react';
-import { Button } from './ui/button';
+import { Button } from '../../ui/button';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 
 // Elegant custom theme inspired by Xertica.ai design system

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

@@ -0,0 +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.

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

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CodeBlock } from './CodeBlock';
+import React from 'react';
+
+const meta: Meta<typeof CodeBlock> = {
+  title: 'High-Level/CodeBlock',
+  component: CodeBlock,
+  argTypes: {
+    language: {
+      control: 'select',
+      options: ['typescript', 'tsx', 'css', 'bash', 'jsx'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CodeBlock>;
+
+const exampleCode = `function HelloWorld() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <h1 className="text-2xl font-bold">Counter</h1>
+      <p>Current count: {count}</p>
+      <Button onClick={() => setCount(count + 1)}>
+        Increment
+      </Button>
+    </div>
+  );
+}`;
+
+export const Default: Story = {
+  args: {
+    code: exampleCode,
+    language: 'tsx',
+    filename: 'Counter.tsx',
+    showLineNumbers: true,
+  },
+  render: (args) => (
+    <div className="w-full max-w-3xl">
+      <CodeBlock {...args} />
+    </div>
+  ),
+};
+
+export const Simple: Story = {
+  args: {
+    code: 'npm install xertica-ui',
+    language: 'bash',
+  },
+  render: (args) => (
+    <div className="w-full max-w-xl">
+      <CodeBlock {...args} />
+    </div>
+  ),
+};

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

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

package/components/{FormattedDocument.tsx → assistant/formatted-document/FormattedDocument.tsx}

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Button } from './ui/button';
+import { Button } from '../../ui/button';
 import { ChevronDown, ChevronUp } from 'lucide-react';
 
 /**

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

@@ -0,0 +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.

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

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FormattedDocument } from './FormattedDocument';
+import React from 'react';
+
+const meta: Meta<typeof FormattedDocument> = {
+  title: 'High-Level/FormattedDocument',
+  component: FormattedDocument,
+  argTypes: {
+    maxPreviewLength: { control: 'number' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FormattedDocument>;
+
+const longContent = `# Proposta Estratégica Xertica
+## Visão Geral
+Esta proposta descreve a implementação de uma camada de inteligência artificial generativa em toda a jornada do cliente.
+
+### Objetivos Principais
+- Redução de latência no atendimento em até 40%
+- Aumento na taxa de conversão de leads qualificados
+- Automação de relatórios semanais para gestão
+
+### Cronograma
+1. **Semana 1-2:** Discovery e Mapeamento de Dados
+2. **Semana 3-4:** Setup de Infraestrutura e Agentes
+3. **Semana 5-8:** Implementação Pilot e Feedback Loop
+
+## Detalhamento Técnico
+A arquitetura baseia-se em RAG (Retrieval Augmented Generation) utilizando bases vetoriais de alto desempenho. Os agentes são orquestrados em tempo real para garantir respostas precisas e contextuais.
+
+- [x] Definição de personas
+- [x] Configuração de guardrails
+- [ ] Integração com CRM
+- [ ] Deploy global
+
+---
+**Nota:** Esta é uma versão preliminar para revisão da diretoria.`;
+
+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/index.ts

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

package/components/assistant/markdown-message/index.ts

@@ -0,0 +1 @@
+export * from './MarkdownMessage';

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

@@ -0,0 +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';
+
+<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.

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

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MarkdownMessage } from './MarkdownMessage';
+
+const meta: Meta<typeof MarkdownMessage> = {
+  title: 'Assistant/MarkdownMessage',
+  component: MarkdownMessage,
+};
+
+export default meta;
+type Story = StoryObj<typeof MarkdownMessage>;
+
+export const Default: Story = {
+  args: {
+    content: `
+# Markdown Message Example
+
+This component renders **Markdown** content sent by the AI assistant.
+
+- It supports **bold** and _italic_ text.
+- It supports [links](https://xertica.com).
+- It supports code blocks:
+
+\`\`\`javascript
+function hello() {
+  console.log("Hello, Xertica!");
+}
+\`\`\`
+
+> "The advance of technology is based on making it fit in so that you don't even notice it, so it's part of everyday life." - Bill Gates
+    `.trim(),
+  },
+};
+
+export const Short: Story = {
+  args: {
+    content: '**Short message** with some `inline code`.',
+  },
+};
+
+export const Table: Story = {
+  args: {
+    content: `
+| Project | Status | Health |
+|---|---|---|
+| Analytics V2 | Active | ✅ Healthy |
+| CRM Refactor | On Hold | ⚠️ Warning |
+| Mobile App | Completed | 🏆 Done |
+    `.trim(),
+  },
+};

package/components/{ModernChatInput.tsx → assistant/modern-chat-input/ModernChatInput.tsx}

@@ -1,8 +1,8 @@
 import React, { useRef, useEffect, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Send, Plus, Paperclip, Mic, FileText, Radio, Search, X } from 'lucide-react';
-import { Button } from './ui/button';
-import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
+import { Button } from '../../ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
 import { toast } from 'sonner';
 
 /**

package/components/assistant/modern-chat-input/index.ts

@@ -0,0 +1 @@
+export * from './ModernChatInput';

package/components/assistant/modern-chat-input/modern-chat-input.mdx

@@ -0,0 +1,38 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as ModernChatInputStories from './modern-chat-input.stories';
+
+<Meta of={ModernChatInputStories} />
+
+<Title />
+<Subtitle>An advanced, high-performance chat input for the Xertica Assistant.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Usage Patterns
+
+### Standard Floating Input
+Optimized for chat interfaces with multi-line support, voice recording, and action chips.
+
+<Canvas>
+  <ModernChatInputStories.Default />
+</Canvas>
+
+### Full-Page Variant
+Adjusts maximum width and alignment for use in standalone chat pages.
+
+<Canvas>
+  <ModernChatInputStories.FullPage />
+</Canvas>
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Action Workflow** — Handle the `onSubmit` callback's optional `action` parameter to distinguish between standard text messages and intent-driven generations (Documents, Podcasts, Search).
+> - **State Sync** — Always maintain the `value` in a parent state and update it via `onChange` and `onVoiceRecording` to ensure consistent data binding.
+> - **Dynamic Sizing** — The input automatically expands up to 100px based on content; ensure the parent container can accommodate these height changes without layout shift.

package/components/assistant/modern-chat-input/modern-chat-input.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ModernChatInput } from './ModernChatInput';
+import React, { useState } from 'react';
+
+const meta: Meta<typeof ModernChatInput> = {
+  title: 'High-Level/ModernChatInput',
+  component: ModernChatInput,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ModernChatInput>;
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <div className="w-[600px]">
+        <ModernChatInput
+          value={value}
+          onChange={setValue}
+          onSubmit={(action) => {
+            alert(`Submitted: "${value}" ${action ? `with action: ${action}` : ""}`);
+            setValue("");
+          }}
+          onVoiceRecording={(text) => setValue(text)}
+        />
+      </div>
+    );
+  },
+};
+
+export const FullPage: Story = {
+  args: {
+    isFullPage: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState("Preciso de ajuda com os relatórios");
+    return (
+      <div className="w-full bg-slate-50 p-10 min-h-[300px]">
+        <ModernChatInput
+          {...args}
+          value={value}
+          onChange={setValue}
+          onSubmit={() => setValue("")}
+        />
+      </div>
+    );
+  },
+};

package/components/assistant/xertica-assistant/index.ts

@@ -0,0 +1 @@
+export * from './xertica-assistant';

package/components/assistant/xertica-assistant/xertica-assistant.mdx

@@ -0,0 +1,39 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as AssistantStories from './xertica-assistant.stories';
+
+<Meta of={AssistantStories} />
+
+<Title />
+<Subtitle>An embedded AI-powered assistant panel powered by Gemini.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Layout Integration
+The assistant panel is intensely integrated into the responsive behavior of the primary layout shell.
+
+### Desktop & Mobile
+On desktop, it sits flush against the right side. On mobile, it transitions into a floating action button.
+
+<Canvas>
+  <AssistantStories.Default />
+</Canvas>
+
+### Custom Tabs
+Extend the assistant with specialized tabs for domain-specific insights.
+
+<Canvas>
+  <AssistantStories.CustomTabs />
+</Canvas>
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **API Key** — Ensure `apiKey` is provided in `<XerticaProvider>`.
+> - **State Management** — Use `toggleAssistente()` from `useLayout()` to manage visibility.
+> - **System Prompt** — Always provide a context-specific `systemPrompt` for better AI relevance.

package/components/assistant/xertica-assistant/xertica-assistant.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { XerticaAssistant } from './xertica-assistant';
+import { Button } from '../../ui/button';
+import { useLayout } from '../../../contexts/LayoutContext';
+import React from 'react';
+
+const meta: Meta<typeof XerticaAssistant> = {
+  title: 'Xertica/Assistant',
+  component: XerticaAssistant,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof XerticaAssistant>;
+
+export const Default: Story = {
+  decorators: [
+    (Story) => {
+      const { toggleAssistente, assistenteExpanded } = useLayout();
+      return (
+        <div className="h-screen w-full flex relative overflow-hidden bg-muted/30">
+          <div className="flex-1 flex flex-col p-8 gap-4">
+            <h1 className="text-2xl font-bold">Main Content Area</h1>
+            <p>Click the button below to toggle the AI Assistant.</p>
+            <Button onClick={toggleAssistente} className="w-fit">
+              {assistenteExpanded ? 'Close Assistant' : 'Open Assistant'}
+            </Button>
+          </div>
+          <Story />
+        </div>
+      );
+    },
+  ],
+  args: {
+    title: 'AI Assistant',
+    systemPrompt: 'You are a helpful UI/UX design assistant.',
+  },
+};
+
+export const CustomTabs: Story = {
+  decorators: [
+    (Story) => {
+      const { setAssistenteExpanded } = useLayout();
+      React.useEffect(() => {
+        setAssistenteExpanded(true);
+      }, []);
+      return (
+        <div className="h-screen w-full flex relative overflow-hidden bg-muted/30">
+          <div className="flex-1 p-8">
+            <h1 className="text-2xl font-bold">Assistant with Custom Tabs</h1>
+          </div>
+          <Story />
+        </div>
+      );
+    },
+  ],
+  args: {
+    title: 'Analytics Assistant',
+    tabs: [
+      {
+        id: 'overview',
+        label: 'Overview',
+        content: <div className="p-4">Analytics Overview Content</div>
+      },
+      {
+        id: 'settings',
+        label: 'Stats',
+        content: <div className="p-4">Detailed Stats and Charts</div>
+      }
+    ]
+  }
+};

package/components/{ui → assistant/xertica-assistant}/xertica-assistant.tsx

@@ -60,7 +60,7 @@ import {
   ChartTooltipContent,
   ChartLegend,
   ChartLegendContent
-} from "./chart";
+} from '../../ui/chart';
 import {
   Table,
   TableBody,
@@ -69,7 +69,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "./table";
+} from '../../ui/table';
 import {
   Dialog,
   DialogContent,
@@ -77,26 +77,26 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "./dialog";
+} from '../../ui/dialog';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "./dropdown-menu";
-import { Textarea } from "./textarea";
-import { Button } from './button';
-import { ScrollArea } from './scroll-area';
-import { Separator } from './separator';
-import { RichTextEditor } from './rich-text-editor';
-import { MarkdownMessage } from '../MarkdownMessage';
-import { FormattedDocument } from '../FormattedDocument';
-import { ModernChatInput } from '../ModernChatInput';
-import type { ActionType } from '../ModernChatInput';
-import { XerticaOrbe } from '../XerticaOrbe';
-import { Tooltip, TooltipTrigger } from './tooltip';
+} from '../../ui/dropdown-menu';
+import { Textarea } from '../../ui/textarea';
+import { Button } from '../../ui/button';
+import { ScrollArea } from '../../ui/scroll-area';
+import { Separator } from '../../ui/separator';
+import { RichTextEditor } from '../../ui/rich-text-editor';
+import { MarkdownMessage } from '../markdown-message';
+import { FormattedDocument } from '../formatted-document';
+import { ModernChatInput } from '../modern-chat-input';
+import type { ActionType } from '../modern-chat-input';
+import { XerticaOrbe } from '../../brand/xertica-orbe';
+import { Tooltip, TooltipTrigger } from '../../ui/tooltip';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { cn } from './utils';
+import { cn } from '../../shared/utils';
 import { toast } from 'sonner';
 
 // Tooltip customizado estilo sidebar (branco)
@@ -224,6 +224,7 @@ export interface Conversation {
 export interface Suggestion {
   id: string;
   texto: string;
+  icon?: React.ReactNode;
 }
 
 /**
@@ -240,8 +241,8 @@ export type AssistantTab = 'chat' | 'historico' | 'favoritos';
 // Component Props
 // ============================================================================
 
-import type { MockResponse } from '../../contexts/AssistenteContext';
-import { gerarResposta } from '../assistant-utils';
+import type { MockResponse } from '../../../contexts/AssistenteContext';
+import { gerarResposta } from '../../shared/assistant-utils';
 
 export interface XerticaAssistantProps {
   /**