xertica-ui 1.8.1 → 1.9.1

package/CHANGELOG.md

@@ -7,6 +7,31 @@ Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [1.9.0] — 2026-05-05
+
+### Added
+- **Standardized Form Sizing System** — Implemented a unified `size` prop (`sm`, `md`, `lg`) across all form-related components for perfect visual alignment in grid layouts:
+  - **Text Components** — `Input`, `SelectTrigger`, `Textarea`, `Search`, and `InputOTPSlot` now share consistent height/padding/font-size tokens.
+  - **Toggle Components** — `Checkbox`, `RadioGroupItem`, and `Switch` now feature dynamic sizing for both containers and internal indicators (check icon, dot, thumb).
+  - **Labels** — `Label` component now supports `size` to match the text size of the associated input.
+  - **Reference Guide** — Added `docs/form-sizing.md` as a comprehensive guide for the standardized sizing scale.
+- **Assistant Individual Controls** — Added granular control props to `XerticaAssistant` to toggle specific features independently:
+  - `showHistory`, `showFavorites`, `allowAudioInput`, `allowFileUpload`, `allowDocCreation`, `allowPodcastGen`, `allowResearchGen`.
+- **Header Breadcrumb Navigation** — Standardized `Header` to use breadcrumbs as the default navigation pattern:
+  - Added support for `react-router-dom` links in breadcrumbs to prevent page reloads.
+  - Configurable hierarchy levels and labels directly via props.
+
+### Changed
+- **Form Component Architecture** — Migrated form elements from legacy tokens to standardized design system tokens (`bg-background`, `border-border`) for better theme consistency.
+- **Documentation & Storybook** — Updated all 9 affected form components with new "Sizes" sections in Storybook (Stories + MDX) and enriched LLM-facing markdown documentation.
+- **Unit Testing** — Updated test suites for `Checkbox`, `RadioGroup`, `Switch`, `InputOTP`, `Label`, `Search`, `Select`, and `Textarea` to verify sizing variant classes.
+
+### Fixed
+- **Search Component** — Removed obsolete `loading` prop which was causing TypeScript errors and was redundant with the current design system patterns.
+- **SelectTrigger Sizing** — Standardized `md` height to `h-10` (40px) to match the rest of the form system.
+
+---
+
 ## [1.8.0] — 2026-04-27
 
 ### Added

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

@@ -35,6 +35,16 @@ interface ModernChatInputProps {
   onVoiceRecording?: (transcript: string) => void;
   /** Whether the input is being used in a full-page view (affects layout) */
   isFullPage?: boolean;
+  /** Whether to show audio input (voice recording). @default true */
+  enableAudioInput?: boolean;
+  /** Whether to show the file attachment button. @default true */
+  enableFileAttachment?: boolean;
+  /** Whether to show the "Create document" action. @default true */
+  enableDocumentCreation?: boolean;
+  /** Whether to show the "Generate podcast" action. @default true */
+  enablePodcastGeneration?: boolean;
+  /** Whether to show the "Search" action. @default true */
+  enableSearch?: boolean;
 }
 
 /**
@@ -58,7 +68,12 @@ export function ModernChatInput({
   onFileUpload,
   onAudioUpload,
   onVoiceRecording,
-  isFullPage = false
+  isFullPage = false,
+  enableAudioInput = true,
+  enableFileAttachment = true,
+  enableDocumentCreation = true,
+  enablePodcastGeneration = true,
+  enableSearch = true,
 }: ModernChatInputProps) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [isFocused, setIsFocused] = useState(false);
@@ -355,6 +370,7 @@ export function ModernChatInput({
           <div className="flex items-center justify-between">
             {/* Left Actions */}
             <div className="flex items-center gap-1">
+            {(enableDocumentCreation || enablePodcastGeneration || enableSearch) && (
               <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
                 <PopoverTrigger asChild>
                   <Button
@@ -378,54 +394,62 @@ export function ModernChatInput({
                   side="top"
                 >
                   <div className="space-y-1">
-                    <button
-                      onClick={() => handleActionSelect('document')}
-                      className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-accent transition-colors text-left group"
-                    >
-                      <div className="w-8 h-8 rounded-full bg-[var(--chart-4)]/20 flex items-center justify-center group-hover:bg-[var(--chart-4)] transition-colors">
-                        <FileText className="w-4 h-4 text-[var(--chart-4)] group-hover:text-white" />
-                      </div>
-                      <div className="flex-1">
-                        <div>Criar documento</div>
-                        <div className="text-xs text-muted-foreground">
-                          Gere um documento completo
+                    {enableDocumentCreation && (
+                      <button
+                        onClick={() => handleActionSelect('document')}
+                        className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-accent transition-colors text-left group"
+                      >
+                        <div className="w-8 h-8 rounded-full bg-[var(--chart-4)]/20 flex items-center justify-center group-hover:bg-[var(--chart-4)] transition-colors">
+                          <FileText className="w-4 h-4 text-[var(--chart-4)] group-hover:text-white" />
                         </div>
-                      </div>
-                    </button>
+                        <div className="flex-1">
+                          <div>Criar documento</div>
+                          <div className="text-xs text-muted-foreground">
+                            Gere um documento completo
+                          </div>
+                        </div>
+                      </button>
+                    )}
                     
-                    <button
-                      onClick={() => handleActionSelect('podcast')}
-                      className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-accent transition-colors text-left group"
-                    >
-                      <div className="w-8 h-8 rounded-full bg-[var(--chart-1)]/20 flex items-center justify-center group-hover:bg-[var(--chart-1)] transition-colors">
-                        <Radio className="w-4 h-4 text-[var(--chart-1)] group-hover:text-white" />
-                      </div>
-                      <div className="flex-1">
-                        <div>Gerar podcast</div>
-                        <div className="text-xs text-muted-foreground">
-                          Crie um podcast de áudio
+                    {enablePodcastGeneration && (
+                      <button
+                        onClick={() => handleActionSelect('podcast')}
+                        className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-accent transition-colors text-left group"
+                      >
+                        <div className="w-8 h-8 rounded-full bg-[var(--chart-1)]/20 flex items-center justify-center group-hover:bg-[var(--chart-1)] transition-colors">
+                          <Radio className="w-4 h-4 text-[var(--chart-1)] group-hover:text-white" />
+                        </div>
+                        <div className="flex-1">
+                          <div>Gerar podcast</div>
+                          <div className="text-xs text-muted-foreground">
+                            Crie um podcast de áudio
+                          </div>
                         </div>
-                      </div>
-                    </button>
+                      </button>
+                    )}
                     
-                    <button
-                      onClick={() => handleActionSelect('search')}
-                      className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-accent transition-colors text-left group"
-                    >
-                      <div className="w-8 h-8 rounded-full bg-[var(--chart-2)]/20 flex items-center justify-center group-hover:bg-[var(--chart-2)] transition-colors">
-                        <Search className="w-4 h-4 text-[var(--chart-2)] group-hover:text-white" />
-                      </div>
-                      <div className="flex-1">
-                        <div>Pesquisar</div>
-                        <div className="text-xs text-muted-foreground">
-                          Busque por informações relevantes
+                    {enableSearch && (
+                      <button
+                        onClick={() => handleActionSelect('search')}
+                        className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-accent transition-colors text-left group"
+                      >
+                        <div className="w-8 h-8 rounded-full bg-[var(--chart-2)]/20 flex items-center justify-center group-hover:bg-[var(--chart-2)] transition-colors">
+                          <Search className="w-4 h-4 text-[var(--chart-2)] group-hover:text-white" />
+                        </div>
+                        <div className="flex-1">
+                          <div>Pesquisar</div>
+                          <div className="text-xs text-muted-foreground">
+                            Busque por informações relevantes
+                          </div>
                         </div>
-                      </div>
-                    </button>
+                      </button>
+                    )}
                   </div>
                 </PopoverContent>
               </Popover>
+            )}
               
+            {enableFileAttachment && (
               <motion.div
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
@@ -440,29 +464,32 @@ export function ModernChatInput({
                   <Paperclip className="w-4 h-4" />
                 </Button>
               </motion.div>
+            )}
             </div>
 
             {/* Right Actions */}
             <div className="flex items-center gap-1">
               {/* Voice Recording Button */}
-              <motion.div
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
-              >
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={handleVoiceRecording}
-                  className={`h-8 w-8 p-0 rounded-full transition-all duration-200 ${
-                    isRecording 
-                      ? 'bg-destructive hover:bg-destructive/90 text-white animate-pulse' 
-                      : 'text-muted-foreground hover:bg-accent hover:text-foreground'
-                  }`}
-                  aria-label={isRecording ? "Parar gravação" : "Sugerir com voz"}
+              {enableAudioInput && (
+                <motion.div
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
                 >
-                  <Mic className="w-4 h-4" />
-                </Button>
-              </motion.div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleVoiceRecording}
+                    className={`h-8 w-8 p-0 rounded-full transition-all duration-200 ${
+                      isRecording 
+                        ? 'bg-destructive hover:bg-destructive/90 text-white animate-pulse' 
+                        : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                    }`}
+                    aria-label={isRecording ? "Parar gravação" : "Sugerir com voz"}
+                  >
+                    <Mic className="w-4 h-4" />
+                  </Button>
+                </motion.div>
+              )}
               
               <AnimatePresence mode="wait">
                 <motion.div

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

@@ -30,9 +30,42 @@ Adjusts maximum width and alignment for use in standalone chat pages.
 
 ---
 
+## Feature Flags
+
+Each input capability can be individually toggled via boolean props.
+All flags default to `true` for full backward compatibility.
+
+| Prop | Controls | Default |
+|---|---|---|
+| `enableAudioInput` | Voice recording button | `true` |
+| `enableFileAttachment` | File attachment (paperclip) button | `true` |
+| `enableDocumentCreation` | "Create document" menu item | `true` |
+| `enablePodcastGeneration` | "Generate podcast" menu item | `true` |
+| `enableSearch` | "Search" menu item | `true` |
+
+> [!NOTE]
+> When all three action types (`enableDocumentCreation`, `enablePodcastGeneration`, `enableSearch`) are set to `false`, the "+" menu button is completely hidden.
+
+### Text Only
+All action buttons disabled — only the text input and send button remain.
+
+<Canvas>
+  <ModernChatInputStories.TextOnly />
+</Canvas>
+
+### Selective Actions
+Only document creation and search are enabled for a focused workflow.
+
+<Canvas>
+  <ModernChatInputStories.SelectiveActions />
+</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.
+> - **Feature Flags** — Pass flags like `enableSearch={false}` or `enableAudioInput={false}` to tailor input capabilities per use-case. Flags are independent and can be combined freely.

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

@@ -8,6 +8,28 @@ const meta: Meta<typeof ModernChatInput> = {
   parameters: {
     layout: 'centered',
   },
+  argTypes: {
+    enableAudioInput: {
+      control: 'boolean',
+      description: 'Whether to show audio input (voice recording).',
+    },
+    enableFileAttachment: {
+      control: 'boolean',
+      description: 'Whether to show the file attachment button.',
+    },
+    enableDocumentCreation: {
+      control: 'boolean',
+      description: 'Whether to show the "Create document" action.',
+    },
+    enablePodcastGeneration: {
+      control: 'boolean',
+      description: 'Whether to show the "Generate podcast" action.',
+    },
+    enableSearch: {
+      control: 'boolean',
+      description: 'Whether to show the "Search" action.',
+    },
+  },
 };
 
 export default meta;
@@ -51,3 +73,59 @@ export const FullPage: Story = {
     );
   },
 };
+
+/**
+ * Text-only input: all action buttons and extras are disabled.
+ * Only the text input and send button remain.
+ */
+export const TextOnly: Story = {
+  args: {
+    enableAudioInput: false,
+    enableFileAttachment: false,
+    enableDocumentCreation: false,
+    enablePodcastGeneration: false,
+    enableSearch: false,
+  },
+  render: (args) => {
+    const [value, setValue] = useState("");
+    return (
+      <div className="w-[600px]">
+        <ModernChatInput
+          {...args}
+          value={value}
+          onChange={setValue}
+          onSubmit={() => setValue("")}
+        />
+      </div>
+    );
+  },
+};
+
+/**
+ * Selective features: only document creation and search are enabled.
+ */
+export const SelectiveActions: Story = {
+  args: {
+    enableAudioInput: false,
+    enableFileAttachment: false,
+    enableDocumentCreation: true,
+    enablePodcastGeneration: false,
+    enableSearch: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState("");
+    return (
+      <div className="w-[600px]">
+        <ModernChatInput
+          {...args}
+          value={value}
+          onChange={setValue}
+          onSubmit={(action) => {
+            alert(`Submitted: "${value}" ${action ? `with action: ${action}` : ""}`);
+            setValue("");
+          }}
+        />
+      </div>
+    );
+  },
+};

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

@@ -12,6 +12,35 @@ import * as AssistantStories from './xertica-assistant.stories';
 
 ---
 
+## Feature Flags
+
+Each assistant capability can be individually toggled on or off via boolean props.
+All flags default to `true` for full backward compatibility.
+
+| Prop | Controls | Default |
+|---|---|---|
+| `showHistory` | Conversation history tab and collapsed icon | `true` |
+| `showFavorites` | Favorites tab and collapsed icon | `true` |
+| `enableAudioInput` | Voice recording and audio upload | `true` |
+| `enableFileAttachment` | File attachment button | `true` |
+| `enableDocumentCreation` | "Create document" action in the input menu | `true` |
+| `enablePodcastGeneration` | "Generate podcast" action and per-message button | `true` |
+| `enableSearch` | "Search" action in the input menu | `true` |
+
+### Chat Only
+
+All extra features disabled — the assistant provides only a basic text chat.
+
+<Canvas of={AssistantStories.ChatOnly} />
+
+### Minimal Input
+
+Only document creation and file attachment are enabled — ideal for document-focused workflows.
+
+<Canvas of={AssistantStories.MinimalInput} />
+
+---
+
 ## Workspace Integration
 
 The assistant features specialized workspaces for different content types.
@@ -34,4 +63,4 @@ For focused work, the assistant can be expanded into a centered full-page layout
 > - **Layout Context** — Use `useLayout()` to toggle the assistant's visibility and track its state across the application.
 > - **Demo Mode** — Use `demoMode={true}` for prototyping; it provides rich mock responses for documents, charts, and media.
 > - **Custom Responses** — Leverage `responseGenerator` to bridge the assistant with your backend or custom LLM logic.
-
+> - **Feature Flags** — Pass individual flags like `showHistory={false}` or `enableSearch={false}` to tailor the assistant's capabilities per use-case. Flags can be combined freely.

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

@@ -28,6 +28,34 @@ const meta: Meta<typeof XerticaAssistant> = {
       control: 'boolean',
       description: 'Whether the assistant is initially expanded.',
     },
+    showHistory: {
+      control: 'boolean',
+      description: 'Whether to show the conversation history tab and collapsed icon.',
+    },
+    showFavorites: {
+      control: 'boolean',
+      description: 'Whether to show the favorites tab and collapsed icon.',
+    },
+    enableAudioInput: {
+      control: 'boolean',
+      description: 'Whether to enable audio input (voice recording / audio upload) in the chat.',
+    },
+    enableFileAttachment: {
+      control: 'boolean',
+      description: 'Whether to enable file attachment in the chat input.',
+    },
+    enableDocumentCreation: {
+      control: 'boolean',
+      description: 'Whether to enable the "Create document" action in the chat input.',
+    },
+    enablePodcastGeneration: {
+      control: 'boolean',
+      description: 'Whether to enable podcast generation (action chip + per-message button).',
+    },
+    enableSearch: {
+      control: 'boolean',
+      description: 'Whether to enable the "Search" action in the chat input.',
+    },
   },
 };
 
@@ -101,3 +129,73 @@ export const DocumentEditing: Story = {
   },
 };
 
+/**
+ * Chat-only mode: hides history, favorites, audio, file attachments,
+ * document creation, podcast generation, and search.
+ * Only the basic text chat remains.
+ */
+export const ChatOnly: Story = {
+  decorators: [
+    (Story) => {
+      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 text-foreground">Chat Only Mode</h1>
+            <p className="text-muted-foreground">
+              All extra features are disabled. The assistant provides only a plain text chat interface.
+            </p>
+          </div>
+          <Story />
+        </div>
+      );
+    },
+  ],
+  args: {
+    mode: 'expanded',
+    isExpanded: true,
+    userName: 'Jane Smith',
+    demoMode: true,
+    showHistory: false,
+    showFavorites: false,
+    enableAudioInput: false,
+    enableFileAttachment: false,
+    enableDocumentCreation: false,
+    enablePodcastGeneration: false,
+    enableSearch: false,
+  },
+};
+
+/**
+ * Minimal input mode: only document creation and file attachment are enabled.
+ * No audio input, no podcast generation, no search, no history, no favorites.
+ */
+export const MinimalInput: Story = {
+  decorators: [
+    (Story) => {
+      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 text-foreground">Minimal Input Mode</h1>
+            <p className="text-muted-foreground">
+              Only document creation and file attachment are enabled — ideal for a focused document-generation workflow.
+            </p>
+          </div>
+          <Story />
+        </div>
+      );
+    },
+  ],
+  args: {
+    mode: 'expanded',
+    isExpanded: true,
+    userName: 'Jane Smith',
+    demoMode: true,
+    showHistory: false,
+    showFavorites: false,
+    enableAudioInput: false,
+    enableFileAttachment: true,
+    enableDocumentCreation: true,
+    enablePodcastGeneration: false,
+    enableSearch: false,
+  },
+};