xertica-ui 2.4.0 → 2.5.0

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

@@ -1,99 +1,99 @@
-import React from 'react';
-import { MessageSquare, Heart, History } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-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) {
-  const { t } = useTranslation();
-  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={t('assistant.open')}
-          >
-            <XerticaOrbe size={32} />
-          </button>
-        </TooltipTrigger>
-        <AssistantTooltipContent side="left" sideOffset={8}>
-          <p>{t('assistant.title')}</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>{t('assistant.tabs.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>{t('assistant.tabs.favorites')}</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>{t('assistant.tabs.history')}</p>
-          </AssistantTooltipContent>
-        </Tooltip>
-      )}
-    </div>
-  );
-}
+import React from 'react';
+import { MessageSquare, Heart, History } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+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) {
+  const { t } = useTranslation();
+  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={t('assistant.open')}
+          >
+            <XerticaOrbe size={32} />
+          </button>
+        </TooltipTrigger>
+        <AssistantTooltipContent side="left" sideOffset={8}>
+          <p>{t('assistant.title')}</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>{t('assistant.tabs.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>{t('assistant.tabs.favorites')}</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>{t('assistant.tabs.history')}</p>
+          </AssistantTooltipContent>
+        </Tooltip>
+      )}
+    </div>
+  );
+}

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

@@ -1,104 +1,104 @@
-import React from 'react';
-import { Plus, Heart } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-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) {
-  const { t } = useTranslation();
-  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" />
-          {t('assistant.newConversation')}
-        </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' ? t('assistant.noFavorites') : t('assistant.noHistory')}
-              </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>
-  );
-}
+import React from 'react';
+import { Plus, Heart } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+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) {
+  const { t } = useTranslation();
+  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" />
+          {t('assistant.newConversation')}
+        </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' ? t('assistant.noFavorites') : t('assistant.noHistory')}
+              </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

@@ -1,81 +1,81 @@
-import React from 'react';
-import { X, FileText, Check } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-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) {
-  const { t } = useTranslation();
-  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={t('assistant.closeDocumentEditor')}
-          >
-            <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={t('assistant.documentEditorPlaceholder')}
-            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" />
-                {t('common.save')}
-              </Button>
-            }
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
+import React from 'react';
+import { X, FileText, Check } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+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) {
+  const { t } = useTranslation();
+  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={t('assistant.closeDocumentEditor')}
+          >
+            <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={t('assistant.documentEditorPlaceholder')}
+            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" />
+                {t('common.save')}
+              </Button>
+            }
+          />
+        </div>
+      </div>
+    </div>
+  );
+}