xertica-ui 2.1.3 → 2.1.4

package/CHANGELOG.md

@@ -7,6 +7,21 @@ 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

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.3-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/assets/xertica-logo.svg

@@ -1,38 +1,38 @@
-<svg
-  fill="none"
-  preserveAspectRatio="xMidYMid meet"
-  viewBox="0 0 1543 289"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <g id="Xertica.ai">
-    <path d="M1352.82 239.808V285.425H1304.73V239.808H1352.82Z" fill="#00BEFF" />
-    <path d="M814.8 284.848H766.711V77.4971H814.8V284.848Z" fill="#00BEFF" />
-    <path d="M1543 284.438H1514.2V160.28H1543V284.438Z" fill="#00BEFF" />
-    <path 
-      clip-rule="evenodd"
-      d="M1432.83 157.796C1446.98 157.796 1459.14 162.515 1468.58 170.709V160.28H1497.38V284.438H1468.58V274.01C1459.14 282.451 1446.98 286.921 1432.83 286.921C1395.1 286.921 1368.29 260.352 1368.29 222.359C1368.29 184.616 1395.1 157.796 1432.83 157.796ZM1432.83 183.778C1410.79 183.778 1396.27 199.061 1396.27 222.359C1396.27 245.658 1410.79 260.94 1432.83 260.94C1454.63 260.94 1468.9 245.658 1468.9 222.359C1468.9 199.06 1454.63 183.778 1432.83 183.778Z"
-      fill="#00BEFF"
-      fill-rule="evenodd"
-    />
-    <path d="M947.87 73.3516C1002.88 73.3516 1044.42 107.647 1053.57 159.234H1004.68C997.221 132.988 976.34 117.308 947.87 117.308C911.387 117.308 887.337 142.612 887.337 181.176C887.337 219.739 911.387 245.036 947.87 245.036C976.34 245.036 997.221 229.356 1004.68 203.109H1053.57C1044.47 254.701 1003.26 289 947.87 289C884.853 289 840.078 244.626 840.078 181.176C840.078 118.142 884.854 73.3516 947.87 73.3516Z" fill="#00BEFF" />
-    <path d="M88.4971 39.8242L157.353 142.191L83.5371 251.524L60.9277 284.854H0L96.3154 142.191L5.37695 7H66.3047L88.4971 39.8242Z" fill="#00BEFF" />
-    <path d="M254.314 284.855H193.387L151.914 223.71L182.548 178.551L254.314 284.855Z" fill="#00BEFF" />
-    <path 
-      clip-rule="evenodd"
-      d="M1179.14 73.3477C1202.77 73.3477 1223.08 81.2286 1238.84 94.9121V77.4971H1286.94V284.847H1238.84V267.431C1223.09 281.528 1202.77 288.992 1179.14 288.992C1116.12 288.992 1071.35 244.622 1071.35 181.172C1071.35 118.139 1116.12 73.3478 1179.14 73.3477ZM1179.14 117.308C1142.66 117.308 1118.61 142.604 1118.61 181.172C1118.61 219.739 1142.66 245.035 1179.14 245.035C1215.21 245.035 1238.84 219.739 1238.84 181.172C1238.84 142.605 1215.21 117.308 1179.14 117.308Z"
-      fill="#00BEFF"
-      fill-rule="evenodd"
-    />
-    <path d="M1543 145.383H1514.2V118.067H1543V145.383Z" fill="#00BEFF" />
-    <path d="M672.466 77.501H736.31V121.457H672.466V211.448C672.466 230.939 682.415 240.891 702.313 240.891H736.309V284.852H698.999C649.246 284.851 625.203 259.968 625.203 211.449V7H672.466V77.501Z" fill="#00BEFF" />
-    <path d="M814.8 52.6172H766.711V7H814.8V52.6172Z" fill="#00BEFF" />
-    <path 
-      clip-rule="evenodd"
-      d="M354.069 73.3516C417.086 73.3517 461.864 118.143 461.864 181.176C461.864 187.396 461.031 193.615 460.204 199.422H295.197C301.829 228.864 323.392 246.696 354.069 246.696C372.724 246.696 389.309 241.721 399.675 226.376H452.742C441.132 265.774 400.501 288.996 354.069 288.996C291.053 288.996 246.274 244.626 246.273 181.176C246.273 118.142 291.053 73.3516 354.069 73.3516ZM354.068 115.65C325.044 115.65 303.902 131.826 296.44 158.78H410.863C403.819 131.826 382.672 115.65 354.068 115.65Z"
-      fill="#00BEFF"
-      fill-rule="evenodd"
-    />
-    <path d="M596.957 121.453H562.962C543.064 121.453 533.114 131.409 533.114 150.899V284.847H485.852V150.899C485.852 102.38 509.894 77.4972 559.647 77.4971H596.957V121.453Z" fill="#00BEFF" />
-    <path d="M182.552 98.6992L151.922 53.3906L188.014 0H248.941L182.552 98.6992Z" fill="#00BEFF" />
-  </g>
+<svg
+  fill="none"
+  preserveAspectRatio="xMidYMid meet"
+  viewBox="0 0 1543 289"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g id="Xertica.ai">
+    <path d="M1352.82 239.808V285.425H1304.73V239.808H1352.82Z" fill="#00BEFF" />
+    <path d="M814.8 284.848H766.711V77.4971H814.8V284.848Z" fill="#00BEFF" />
+    <path d="M1543 284.438H1514.2V160.28H1543V284.438Z" fill="#00BEFF" />
+    <path 
+      clip-rule="evenodd"
+      d="M1432.83 157.796C1446.98 157.796 1459.14 162.515 1468.58 170.709V160.28H1497.38V284.438H1468.58V274.01C1459.14 282.451 1446.98 286.921 1432.83 286.921C1395.1 286.921 1368.29 260.352 1368.29 222.359C1368.29 184.616 1395.1 157.796 1432.83 157.796ZM1432.83 183.778C1410.79 183.778 1396.27 199.061 1396.27 222.359C1396.27 245.658 1410.79 260.94 1432.83 260.94C1454.63 260.94 1468.9 245.658 1468.9 222.359C1468.9 199.06 1454.63 183.778 1432.83 183.778Z"
+      fill="#00BEFF"
+      fill-rule="evenodd"
+    />
+    <path d="M947.87 73.3516C1002.88 73.3516 1044.42 107.647 1053.57 159.234H1004.68C997.221 132.988 976.34 117.308 947.87 117.308C911.387 117.308 887.337 142.612 887.337 181.176C887.337 219.739 911.387 245.036 947.87 245.036C976.34 245.036 997.221 229.356 1004.68 203.109H1053.57C1044.47 254.701 1003.26 289 947.87 289C884.853 289 840.078 244.626 840.078 181.176C840.078 118.142 884.854 73.3516 947.87 73.3516Z" fill="#00BEFF" />
+    <path d="M88.4971 39.8242L157.353 142.191L83.5371 251.524L60.9277 284.854H0L96.3154 142.191L5.37695 7H66.3047L88.4971 39.8242Z" fill="#00BEFF" />
+    <path d="M254.314 284.855H193.387L151.914 223.71L182.548 178.551L254.314 284.855Z" fill="#00BEFF" />
+    <path 
+      clip-rule="evenodd"
+      d="M1179.14 73.3477C1202.77 73.3477 1223.08 81.2286 1238.84 94.9121V77.4971H1286.94V284.847H1238.84V267.431C1223.09 281.528 1202.77 288.992 1179.14 288.992C1116.12 288.992 1071.35 244.622 1071.35 181.172C1071.35 118.139 1116.12 73.3478 1179.14 73.3477ZM1179.14 117.308C1142.66 117.308 1118.61 142.604 1118.61 181.172C1118.61 219.739 1142.66 245.035 1179.14 245.035C1215.21 245.035 1238.84 219.739 1238.84 181.172C1238.84 142.605 1215.21 117.308 1179.14 117.308Z"
+      fill="#00BEFF"
+      fill-rule="evenodd"
+    />
+    <path d="M1543 145.383H1514.2V118.067H1543V145.383Z" fill="#00BEFF" />
+    <path d="M672.466 77.501H736.31V121.457H672.466V211.448C672.466 230.939 682.415 240.891 702.313 240.891H736.309V284.852H698.999C649.246 284.851 625.203 259.968 625.203 211.449V7H672.466V77.501Z" fill="#00BEFF" />
+    <path d="M814.8 52.6172H766.711V7H814.8V52.6172Z" fill="#00BEFF" />
+    <path 
+      clip-rule="evenodd"
+      d="M354.069 73.3516C417.086 73.3517 461.864 118.143 461.864 181.176C461.864 187.396 461.031 193.615 460.204 199.422H295.197C301.829 228.864 323.392 246.696 354.069 246.696C372.724 246.696 389.309 241.721 399.675 226.376H452.742C441.132 265.774 400.501 288.996 354.069 288.996C291.053 288.996 246.274 244.626 246.273 181.176C246.273 118.142 291.053 73.3516 354.069 73.3516ZM354.068 115.65C325.044 115.65 303.902 131.826 296.44 158.78H410.863C403.819 131.826 382.672 115.65 354.068 115.65Z"
+      fill="#00BEFF"
+      fill-rule="evenodd"
+    />
+    <path d="M596.957 121.453H562.962C543.064 121.453 533.114 131.409 533.114 150.899V284.847H485.852V150.899C485.852 102.38 509.894 77.4972 559.647 77.4971H596.957V121.453Z" fill="#00BEFF" />
+    <path d="M182.552 98.6992L151.922 53.3906L188.014 0H248.941L182.552 98.6992Z" fill="#00BEFF" />
+  </g>
 </svg>

package/assets/xertica-x-logo.svg

@@ -1,21 +1,21 @@
-<svg
-  fill="none"
-  preserveAspectRatio="xMidYMid meet"
-  viewBox="0 0 258 282"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <g id="Xertica X">
-    <path 
-      d="M67.2666 0.0361328L89.7793 33.3447L159.63 137.228L84.7471 248.178L61.8115 282H0L97.7109 137.228L5.45508 0.0361328H67.2666Z" 
-      fill="#00BEFF" 
-    />
-    <path 
-      d="M258 282H196.185L154.114 219.951L185.192 174.123L258 282Z" 
-      fill="#00BEFF" 
-    />
-    <path 
-      d="M252.696 0.186523L185.042 100.142L154.106 54.0693L190.884 0L252.696 0.186523Z" 
-      fill="#00BEFF" 
-    />
-  </g>
+<svg
+  fill="none"
+  preserveAspectRatio="xMidYMid meet"
+  viewBox="0 0 258 282"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g id="Xertica X">
+    <path 
+      d="M67.2666 0.0361328L89.7793 33.3447L159.63 137.228L84.7471 248.178L61.8115 282H0L97.7109 137.228L5.45508 0.0361328H67.2666Z" 
+      fill="#00BEFF" 
+    />
+    <path 
+      d="M258 282H196.185L154.114 219.951L185.192 174.123L258 282Z" 
+      fill="#00BEFF" 
+    />
+    <path 
+      d="M252.696 0.186523L185.042 100.142L154.106 54.0693L190.884 0L252.696 0.186523Z" 
+      fill="#00BEFF" 
+    />
+  </g>
 </svg>

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';

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