xertica-ui 2.1.2 → 2.1.4

package/CHANGELOG.md

@@ -7,6 +7,52 @@ Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [2.1.4] — 2026-05-19
+
+### Changed
+
+- **`XerticaAssistant` — decomposição em sub-componentes** — o componente monolítico (1 468 linhas) foi dividido em 9 sub-componentes focados em `parts/`: `AssistantHeader`, `AssistantCollapsedView`, `AssistantTabBar`, `AssistantWelcomeScreen`, `AssistantMessageBubble`, `AssistantTypingIndicator`, `AssistantConversationList`, `AssistantFeedbackDialog` e `AssistantDocumentEditor`. A API pública (`XerticaAssistantProps`) permanece 100% compatível.
+- **`useAudioPlayer` — headless hook** — toda a lógica do `AudioPlayer` foi extraída para `components/media/audio-player/use-audio-player.ts`. O componente `AudioPlayer` agora consome o hook internamente; API pública inalterada. O hook é exportado via `components/hooks/index.ts`.
+- **`useLayoutShortcuts` — headless hook** — registro de atalhos de teclado (Ctrl+B, Ctrl+I) extraído do `LayoutContext` para `components/hooks/use-layout-shortcuts.ts`. Exportado via `components/hooks/index.ts`.
+- **`CustomTooltipContent` — componente compartilhado** — implementação duplicada de tooltip customizado (existia em `sidebar.tsx` e `xertica-assistant.tsx`) consolidada em `components/shared/CustomTooltipContent.tsx`.
+- **`useIsMobile` — fonte única de detecção mobile** — `use-sidebar.ts`, `use-assistant.ts`, `LayoutContext.tsx` e `AudioPlayer.tsx` agora importam de `components/shared/use-mobile.ts` em vez de duplicar a lógica de `matchMedia`.
+- **`utils/color-utils.ts` — utilitários de cor** — funções `hexToRgb`, `hexToRgba` e `isLightColor` extraídas do `BrandColorsContext` para `utils/color-utils.ts` como funções puras reutilizáveis.
+- **`ThemeToggle` — usa `useTheme()`** — substituída referência direta ao `localStorage` pelo hook `useTheme()` do `ThemeContext`.
+- **`types.ts` — fonte única de tipos do assistente** — `Message`, `Conversation`, `Suggestion`, `MockResponse`, `SearchResult`, `SearchSource`, `SearchCommand` e enums relacionados movidos para `components/assistant/xertica-assistant/types.ts`. `xertica-assistant.tsx` e `AssistenteContext.tsx` re-exportam os tipos para backward compatibility.
+
+---
+
+## [2.1.3] — 2026-05-16
+
+### Added
+
+- **Headless hooks — 4 new logic-only hooks** — all logic extracted from their UI components into standalone, tree-shakeable hooks:
+  - **`useFileUpload`** — drag state, file validation (size + count), error messaging, and hidden input ref. Props: `maxFiles`, `maxSize`, `onFilesChange`, `onError`, `disabled`. Returns: `files`, `dragActive`, `errorMessage`, `inputRef`, `handleFiles`, `handleDrag`, `handleDrop`, `handleChange`, `removeFile`, `openFileDialog`.
+  - **`usePagination`** — computes the full page item list (page numbers + ellipsis markers) and exposes navigation helpers. Supports controlled (`page` prop) and uncontrolled modes. Props: `totalItems`, `pageSize`, `initialPage`, `page`, `onPageChange`, `siblingCount`. Returns: `currentPage`, `totalPages`, `startIndex`, `endIndex`, `canGoPrev`, `canGoNext`, `isFirstPage`, `isLastPage`, `items: PaginationPageItem[]`, `goTo`, `next`, `prev`, `first`, `last`.
+  - **`useStepper`** — step navigation with optional async `onBeforeNext` guard for per-step validation. Supports controlled (`step` prop) and uncontrolled modes. Props: `totalSteps`, `initialStep`, `step`, `onStepChange`, `onBeforeNext`. Returns: `currentStep`, `totalSteps`, `isFirstStep`, `isLastStep`, `canGoPrev`, `canGoNext`, `next` (async), `prev`, `goTo`, `reset`.
+  - **`useTreeView`** — expand/collapse state, single-node selection, full WAI-ARIA keyboard navigation (Arrow keys, Home, End, Space), and DOM focus management via `nodeRefs`. Supports controlled `selectedNodeId`. Returns: `expanded`, `effectiveSelectedId`, `nodeRefs`, `getNodeRef`, `toggleExpand`, `handleSelect`, `handleKeyDown`, `getVisibleNodes`.
+- **New chart types — 4 new Recharts wrappers** added to `components/ui/chart/chart.tsx`:
+  - **`RadarMetricChart`** — multi-axis radar chart with optional fill, dots, and multi-series overlay.
+  - **`PieMetricChart`** — pie chart with optional percentage labels and exploded slice support.
+  - **`RadialBarMetricChart`** — radial bar chart with stacked rings and configurable arc angle.
+  - **`GaugeChart`** — pure SVG semicircle gauge with needle, threshold color zones, and optional label. Supports `thresholds` array for dynamic color changes at value breakpoints.
+- **Chart color tokens expanded** — added `--chart-6`, `--chart-7`, `--chart-8` tokens to `styles/xertica/tokens.css`, `templates/src/styles/xertica/tokens.css`, and `bin/generate-tokens.ts`. All 8 chart tokens now use a vibrant, accessible palette.
+- **Headless hook stories** — added `HeadlessHook` story variant to `file-upload.stories.tsx`, `pagination.stories.tsx`, `stepper.stories.tsx`, and `tree-view.stories.tsx` demonstrating fully custom UIs built with each hook.
+
+### Fixed
+
+- **`GaugeChart` — filled-blob visual bug for values > 50%** — the SVG arc `largeArc` flag was set to `1` when `percent > 0.5`, causing the arc command to draw the reflex arc (> 180°) which rendered as a solid filled blob. Since the gauge is a semicircle (max 180°), `largeArc` is always `0`. Removed the conditional entirely and hardcoded `0` for both arc commands.
+- **`GaugeChart` — needle overlapping value text** — the value text at `y=cy+4` was directly behind the needle pivot circle. Fixed by expanding the SVG `viewBox` from `"0 0 200 110"` to `"0 0 200 130"` and moving the value text to `y=cy+18` (13 px below the needle base circle bottom) and the label text to `y=cy+36`.
+
+### Changed
+
+- **`FileUpload` component** — refactored to consume `useFileUpload` internally; public API unchanged.
+- **`TreeView` component** — refactored to consume `useTreeView` internally; public API unchanged.
+- **`Stepper` component** — refactored to consume `useStepper` internally; public API unchanged.
+- **Documentation** — updated `docs/components/chart.md`, `docs/components/file-upload.md`, `docs/components/pagination.md`, `docs/components/stepper.md`, and `docs/components/tree-view.md` with full hook API reference, props/return tables, controlled/uncontrolled examples, and AI Rules sections.
+
+---
+
 ## [2.1.2] — 2026-05-14
 
 ### Fixed

package/README.md

@@ -2,7 +2,7 @@
 
 > **Enterprise-grade React design system** built on Tailwind CSS v4, Radix UI, and Lucide Icons — with a robust AI-first documentation layer for precise LLM-driven composition and autonomous agent interaction.
 
-[![npm version](https://img.shields.io/badge/npm-2.1.0-blue)](https://www.npmjs.com/package/xertica-ui)
+[![npm version](https://img.shields.io/badge/npm-2.1.4-blue)](https://www.npmjs.com/package/xertica-ui)
 [![license](https://img.shields.io/badge/license-proprietary-red)](./LICENSE)
 
 ---

package/bin/cli.ts

@@ -18,7 +18,7 @@ const program = new Command();
 program
     .name('xertica-ui')
     .description('CLI to initialize Xertica UI projects')
-    .version('2.1.2');
+    .version('2.1.3');
 
 program
     .command('init')

package/bin/generate-tokens.ts

@@ -71,8 +71,8 @@ export const generateTokensCss = (theme: ColorTheme): string => {
   --success-foreground: rgba(250, 250, 250, 1);
   --info: rgba(37, 99, 235, 1);
   --info-foreground: rgba(250, 250, 250, 1);
-  --warning: rgba(245, 158, 11, 1);
-  --warning-foreground: rgba(24, 24, 27, 1);
+  --warning: rgba(234, 179, 8, 1);
+  --warning-foreground: rgba(28, 25, 23, 1);
   
   --border: rgba(228, 228, 231, 1);
   --input: rgba(244, 244, 245, 0.5);
@@ -95,12 +95,15 @@ export const generateTokensCss = (theme: ColorTheme): string => {
   --sidebar-border: rgba(255, 255, 255, 0.1); 
   --sidebar-ring: ${rgba(colors.primary, 0.5)};
 
-  /* Charts */
+  /* Charts — vibrant, accessible, harmonious palette */
   --chart-1: ${rgba(colors.chart1)};
   --chart-2: ${rgba(colors.chart2)};
   --chart-3: ${rgba(colors.chart3)};
   --chart-4: ${rgba(colors.chart4)};
   --chart-5: ${rgba(colors.chart5)};
+  --chart-6: rgba(168, 85, 247, 1);  /* purple — extended palette */
+  --chart-7: rgba(20, 184, 166, 1);  /* teal — extended palette */
+  --chart-8: rgba(251, 113, 133, 1); /* rose — extended palette */
   
   /* Gradients */
   --gradient-diagonal: linear-gradient(135deg, ${colors.gradientStart} 0%, ${colors.gradientEnd} 100%);
@@ -153,9 +156,9 @@ export const generateTokensCss = (theme: ColorTheme): string => {
   --toast-success-border: rgba(5, 150, 105, 1);
   --toast-success-icon: rgba(5, 150, 105, 1);
   /* Toast - Warning */
-  --toast-warning-bg: rgba(254, 243, 199, 1);
-  --toast-warning-border: rgba(245, 158, 11, 1);
-  --toast-warning-icon: rgba(245, 158, 11, 1);
+  --toast-warning-bg: rgba(254, 249, 195, 1);
+  --toast-warning-border: rgba(161, 98, 7, 1);
+  --toast-warning-icon: rgba(161, 98, 7, 1);
   /* Toast - Info */
   --toast-info-bg: rgba(219, 234, 254, 1);
   --toast-info-border: rgba(37, 99, 235, 1);
@@ -213,12 +216,15 @@ export const generateTokensCss = (theme: ColorTheme): string => {
   
   --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.3);
 
-  /* Charts */
+  /* Charts — dark mode: slightly lighter/more saturated for contrast on dark bg */
   --chart-1: ${rgba(colors.chart1)};
   --chart-2: ${rgba(colors.chart2)};
   --chart-3: ${rgba(colors.chart3)};
   --chart-4: ${rgba(colors.chart4)};
   --chart-5: ${rgba(colors.chart5)};
+  --chart-6: rgba(196, 132, 252, 1);   /* purple lighter */
+  --chart-7: rgba(45, 212, 191, 1);    /* teal lighter */
+  --chart-8: rgba(253, 164, 175, 1);   /* rose lighter */
   
   /* Sidebar */
   --sidebar: ${rgba(colors.sidebarDark)};

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

@@ -1 +1,3 @@
 export * from './xertica-assistant';
+export { useAssistant } from './use-assistant';
+export type { UseAssistantProps, UseAssistantReturn } from './use-assistant';

package/components/assistant/xertica-assistant/parts/AssistantCollapsedView.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { MessageSquare, Heart, History } from 'lucide-react';
+import { Button } from '../../../ui/button';
+import { Tooltip, TooltipTrigger } from '../../../ui/tooltip';
+import { CustomTooltipContent as AssistantTooltipContent } from '../../../shared/CustomTooltipContent';
+import { XerticaOrbe } from '../../../brand/xertica-orbe';
+import type { AssistantTab } from '../types';
+
+interface AssistantCollapsedViewProps {
+    showHistory: boolean;
+    showFavorites: boolean;
+    onToggle: () => void;
+    onExpandWithTab: (tab: AssistantTab) => void;
+}
+
+/**
+ * AssistantCollapsedView — Icon-only strip shown when the assistant panel is collapsed.
+ * Renders the Xertica Orbe logo and quick-access icons for Chat, Favorites, and History.
+ */
+export function AssistantCollapsedView({
+    showHistory,
+    showFavorites,
+    onToggle,
+    onExpandWithTab,
+}: AssistantCollapsedViewProps) {
+    return (
+        <div className="flex flex-col items-center p-4 space-y-4">
+            {/* Ícone do Assistente - Xertica Orbe */}
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <button
+                        onClick={onToggle}
+                        className="w-10 h-10 rounded-full flex items-center justify-center hover:bg-accent/50 transition-colors duration-200 cursor-pointer mx-auto"
+                        aria-label="Abrir assistente"
+                    >
+                        <XerticaOrbe size={32} />
+                    </button>
+                </TooltipTrigger>
+                <AssistantTooltipContent side="left" sideOffset={8}>
+                    <p>Assistente Xertica</p>
+                </AssistantTooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => onExpandWithTab('chat')}
+                        className="w-8 h-8 p-0 text-muted-foreground"
+                    >
+                        <MessageSquare className="w-4 h-4" />
+                    </Button>
+                </TooltipTrigger>
+                <AssistantTooltipContent side="left" sideOffset={8}>
+                    <p>Chat</p>
+                </AssistantTooltipContent>
+            </Tooltip>
+
+            {showFavorites && (
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => onExpandWithTab('favoritos')}
+                            className="w-8 h-8 p-0 text-muted-foreground"
+                        >
+                            <Heart className="w-4 h-4" />
+                        </Button>
+                    </TooltipTrigger>
+                    <AssistantTooltipContent side="left" sideOffset={8}>
+                        <p>Favoritos</p>
+                    </AssistantTooltipContent>
+                </Tooltip>
+            )}
+
+            {showHistory && (
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => onExpandWithTab('historico')}
+                            className="w-8 h-8 p-0 text-muted-foreground"
+                        >
+                            <History className="w-4 h-4" />
+                        </Button>
+                    </TooltipTrigger>
+                    <AssistantTooltipContent side="left" sideOffset={8}>
+                        <p>Histórico</p>
+                    </AssistantTooltipContent>
+                </Tooltip>
+            )}
+        </div>
+    );
+}

package/components/assistant/xertica-assistant/parts/AssistantConversationList.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { Plus, Heart } from 'lucide-react';
+import { Button } from '../../../ui/button';
+import { ScrollArea } from '../../../ui/scroll-area';
+import { cn } from '../../../shared/utils';
+import type { Conversation, AssistantTab } from '../types';
+
+interface AssistantConversationListProps {
+    conversations: Conversation[];
+    currentConversationId: string | null;
+    activeTab: AssistantTab;
+    isFullPage: boolean;
+    onNewConversation: () => void;
+    onSelectConversation: (id: string) => void;
+    onToggleFavorite: (id: string) => void;
+}
+
+/**
+ * AssistantConversationList — Scrollable list of saved conversations shown in
+ * the History and Favorites tabs.
+ */
+export function AssistantConversationList({
+    conversations,
+    currentConversationId,
+    activeTab,
+    isFullPage,
+    onNewConversation,
+    onSelectConversation,
+    onToggleFavorite,
+}: AssistantConversationListProps) {
+    return (
+        <ScrollArea className="flex-1 min-h-0">
+            <div className={`p-4 ${isFullPage ? 'mx-auto w-full max-w-6xl' : ''}`}>
+                {/* New Conversation Button */}
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={onNewConversation}
+                    className="w-full mb-4 justify-start"
+                >
+                    <Plus className="w-4 h-4 mr-2" />
+                    Nova Conversa
+                </Button>
+
+                {/* Conversations List */}
+                <div className="space-y-2">
+                    {conversations.length === 0 ? (
+                        <div className="text-center py-8">
+                            <Heart className="w-12 h-12 mx-auto text-muted-foreground/50 mb-2" />
+                            <p className="text-muted-foreground">
+                                {activeTab === 'favoritos'
+                                    ? 'Nenhuma conversa favorita ainda'
+                                    : 'Nenhuma conversa no histórico'}
+                            </p>
+                        </div>
+                    ) : (
+                        conversations.map((conversa) => (
+                            <div
+                                key={conversa.id}
+                                onClick={() => onSelectConversation(conversa.id)}
+                                className={cn(
+                                    'p-3 rounded-[var(--radius)] cursor-pointer transition-colors duration-200 border',
+                                    conversa.id === currentConversationId
+                                        ? 'border-primary bg-primary/10'
+                                        : 'border-border hover:bg-muted',
+                                )}
+                            >
+                                <div className="flex items-start justify-between mb-1">
+                                    <h4 className="text-sm font-medium text-foreground truncate flex-1">
+                                        {conversa.title}
+                                    </h4>
+                                    <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            onToggleFavorite(conversa.id);
+                                        }}
+                                        className="h-6 w-6 p-0 flex-shrink-0 ml-1"
+                                    >
+                                        <Heart
+                                            className={cn(
+                                                'w-3 h-3',
+                                                conversa.isFavorite
+                                                    ? 'text-destructive fill-current'
+                                                    : 'text-muted-foreground',
+                                            )}
+                                        />
+                                    </Button>
+                                </div>
+                                {conversa.lastMessage && (
+                                    <p className="text-sm text-muted-foreground truncate mb-1">
+                                        {conversa.lastMessage}
+                                    </p>
+                                )}
+                                <p className="text-sm text-muted-foreground">{conversa.timestamp}</p>
+                            </div>
+                        ))
+                    )}
+                </div>
+            </div>
+        </ScrollArea>
+    );
+}

package/components/assistant/xertica-assistant/parts/AssistantDocumentEditor.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { X, FileText, Check } from 'lucide-react';
+import { Button } from '../../../ui/button';
+import { RichTextEditor } from '../../../ui/rich-text-editor';
+import { cn } from '../../../shared/utils';
+
+interface EditingDocument {
+    content: string;
+    title: string;
+}
+
+interface AssistantDocumentEditorProps {
+    document: EditingDocument;
+    isMobile: boolean;
+    containerWidth: string;
+    onClose: () => void;
+    onChange: (doc: EditingDocument) => void;
+}
+
+/**
+ * AssistantDocumentEditor — Overlay panel with a rich text editor for editing documents
+ * generated by the assistant. Slides in from the left of the assistant panel.
+ */
+export function AssistantDocumentEditor({
+    document,
+    isMobile,
+    containerWidth,
+    onClose,
+    onChange,
+}: AssistantDocumentEditorProps) {
+    return (
+        <div
+            className={cn(
+                'flex flex-col border-border bg-background overflow-hidden transition-all duration-300',
+                isMobile
+                    ? 'fixed inset-0 z-[110] w-full h-[100dvh]'
+                    : 'absolute top-0 bottom-0 right-full w-[800px] border-l border-r border-border shadow-[-25px_0_50px_-15px_rgba(0,0,0,0.15)] z-[90]',
+            )}
+            style={{ maxWidth: isMobile ? 'none' : `calc(100vw - ${containerWidth})` }}
+        >
+            <div className="h-full flex flex-col">
+                {/* Header Toolbar */}
+                <div className="px-4 h-[64px] border-b border-border bg-card flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                        <div className="p-2 bg-primary/10 rounded-md">
+                            <FileText className="w-4 h-4 text-primary" />
+                        </div>
+                        <h3 className="font-semibold text-card-foreground text-sm">{document.title}</h3>
+                    </div>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8 rounded-full"
+                        onClick={onClose}
+                        aria-label="Fechar editor de documento"
+                    >
+                        <X className="w-4 h-4" />
+                    </Button>
+                </div>
+
+                {/* Rich Text Editor */}
+                <div className="flex-1 bg-muted/20 p-0 sm:p-6 overflow-hidden">
+                    <RichTextEditor
+                        value={document.content || ''}
+                        onChange={(newVal) =>
+                            onChange({ ...document, content: newVal })
+                        }
+                        placeholder="Comece a digitar o conteúdo do seu documento aqui..."
+                        className="max-w-4xl mx-auto h-full"
+                        actionButton={
+                            <Button size="sm" className="gap-2 h-8">
+                                <Check className="w-3.5 h-3.5" />
+                                Salvar
+                            </Button>
+                        }
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}

package/components/assistant/xertica-assistant/parts/AssistantFeedbackDialog.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Button } from '../../../ui/button';
+import { Textarea } from '../../../ui/textarea';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '../../../ui/dialog';
+
+export interface EvaluationState {
+    isOpen: boolean;
+    messageId: string | null;
+    type?: 'dislike' | null;
+    category?: string | null;
+    reason: string;
+}
+
+interface AssistantFeedbackDialogProps {
+    state: EvaluationState;
+    onReasonChange: (reason: string) => void;
+    onClose: () => void;
+    onSubmit: () => void;
+}
+
+/**
+ * AssistantFeedbackDialog — Modal dialog for collecting negative feedback (dislike) on messages.
+ * Supports both categorized feedback (from feedbackOptions) and free-text input.
+ */
+export function AssistantFeedbackDialog({
+    state,
+    onReasonChange,
+    onClose,
+    onSubmit,
+}: AssistantFeedbackDialogProps) {
+    return (
+        <Dialog
+            open={state.isOpen}
+            onOpenChange={(open) => !open && onClose()}
+        >
+            <DialogContent className="sm:max-w-[600px]">
+                <DialogHeader>
+                    <DialogTitle className="pr-8">
+                        {state.category
+                            ? `Enviar feedback: ${state.category}`
+                            : 'Enviar feedback'}
+                    </DialogTitle>
+                    <DialogDescription>
+                        {state.category
+                            ? 'Gostaria de adicionar algum comentário? (Opcional)'
+                            : 'Conte-nos por que essa resposta não foi útil para que possamos melhorar.'}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="grid gap-4 py-4 px-6">
+                    <Textarea
+                        className="min-h-[100px]"
+                        placeholder={
+                            state.category ? 'Comentário adicional...' : 'Descreva o motivo...'
+                        }
+                        aria-label={
+                            state.category ? 'Comentário adicional' : 'Descreva o motivo'
+                        }
+                        value={state.reason}
+                        onChange={(e) => onReasonChange(e.target.value)}
+                        rows={4}
+                    />
+                </div>
+
+                <DialogFooter>
+                    <Button variant="outline" onClick={onClose}>
+                        Cancelar
+                    </Button>
+                    <Button
+                        onClick={onSubmit}
+                        disabled={!state.category && !state.reason.trim()}
+                    >
+                        {state.category ? 'Confirmar e Enviar' : 'Enviar Feedback'}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/components/assistant/xertica-assistant/parts/AssistantHeader.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { ChevronRight, PanelRight, Maximize2 } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { Button } from '../../../ui/button';
+import { XerticaOrbe } from '../../../brand/xertica-orbe';
+import { cn } from '../../../shared/utils';
+
+interface AssistantHeaderProps {
+    isExpanded: boolean;
+    onToggle: () => void;
+    onNavigateFullPage?: () => void;
+}
+
+/**
+ * AssistantHeader — Top bar shown in expanded/collapsed (non-fullPage) mode.
+ * Contains the Xertica Orbe logo, title, expand-to-full-page button, and toggle button.
+ */
+export function AssistantHeader({
+    isExpanded,
+    onToggle,
+    onNavigateFullPage,
+}: AssistantHeaderProps) {
+    return (
+        <div
+            className={cn(
+                'border-b border-border flex items-center h-[64px]',
+                isExpanded ? 'justify-between px-4' : 'justify-center px-0',
+            )}
+        >
+            {isExpanded && (
+                <motion.div
+                    initial={{ opacity: 0, x: -10 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: -10 }}
+                    className="flex items-center gap-2 overflow-hidden"
+                >
+                    <div className="flex-shrink-0">
+                        <XerticaOrbe size={32} />
+                    </div>
+                    <span className="text-foreground font-medium truncate">Assistente Xertica</span>
+                </motion.div>
+            )}
+
+            <div className="flex items-center gap-1">
+                {isExpanded && onNavigateFullPage && (
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={onNavigateFullPage}
+                        className="h-8 w-8 p-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-full"
+                        title="Expandir assistente"
+                        aria-label="Expandir assistente"
+                    >
+                        <Maximize2 className="w-4 h-4" />
+                    </Button>
+                )}
+
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={onToggle}
+                    className={cn(
+                        'h-8 w-8 p-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-full',
+                        !isExpanded && 'w-10 h-10',
+                    )}
+                    aria-label={isExpanded ? 'Recolher assistente' : 'Expandir assistente'}
+                >
+                    {isExpanded ? (
+                        <ChevronRight className="w-4 h-4" />
+                    ) : (
+                        <PanelRight className="w-4 h-4" />
+                    )}
+                </Button>
+            </div>
+        </div>
+    );
+}