xertica-ui 1.2.5 → 1.2.7

package/components/CodeBlock.tsx

@@ -137,11 +137,11 @@ interface CodeBlockProps {
   showLineNumbers?: boolean;
 }
 
-export const CodeBlock = ({ 
-  code, 
-  language = 'tsx', 
+export const CodeBlock = ({
+  code,
+  language = 'tsx',
   filename,
-  showLineNumbers = false 
+  showLineNumbers = false
 }: CodeBlockProps) => {
   const [copied, setCopied] = useState(false);
 
@@ -161,7 +161,7 @@ export const CodeBlock = ({
       } else {
         throw new Error('Clipboard API not available');
       }
-      
+
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     } catch (err) {
@@ -175,10 +175,10 @@ export const CodeBlock = ({
         document.body.appendChild(textArea);
         textArea.focus();
         textArea.select();
-        
+
         const successful = document.execCommand('copy');
         document.body.removeChild(textArea);
-        
+
         if (successful) {
           setCopied(true);
           setTimeout(() => setCopied(false), 2000);
@@ -202,7 +202,7 @@ export const CodeBlock = ({
           <span className="text-xs text-muted-foreground uppercase">{language}</span>
         </div>
       )}
-      
+
       <div className="relative">
         <Button
           variant="ghost"
@@ -220,7 +220,7 @@ export const CodeBlock = ({
         <div className="overflow-x-auto w-full max-w-full">
           <SyntaxHighlighter
             language={language}
-            style={elegantTheme}
+            style={elegantTheme as any}
             showLineNumbers={showLineNumbers}
             wrapLines={true}
             customStyle={{

package/components/Header.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Menu, ChevronRight } from 'lucide-react';
+import { Button } from './ui/button';
+import { ThemeToggle } from './ThemeToggle';
+import { LanguageSelector } from './LanguageSelector';
+
+interface HeaderProps {
+    sidebarExpanded: boolean;
+    onToggleSidebar: () => void;
+    title: string;
+    showLanguageSelector?: boolean;
+    showThemeToggle?: boolean;
+    className?: string;
+}
+
+export function Header({
+    sidebarExpanded,
+    onToggleSidebar,
+    title,
+    showLanguageSelector = true,
+    showThemeToggle = true,
+    className
+}: HeaderProps) {
+
+    return (
+        <header className={`bg-card shadow-sm border-b border-border px-[24px] py-[14px] flex-shrink-0 ${className || ''}`}>
+            <div className="flex items-center justify-between p-[0px]">
+                <div className="flex items-center gap-2 text-muted-foreground">
+                    {/* Botão menu para mobile */}
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={onToggleSidebar}
+                        className="md:hidden mr-2 p-2"
+                    >
+                        <Menu className="w-5 h-5" />
+                    </Button>
+                    <span className="text-primary font-medium">Xertica.ai</span>
+                    <ChevronRight className="w-4 h-4" />
+                    <span className="text-foreground font-medium">{title}</span>
+                </div>
+
+                {/* Controles do usuário */}
+                <div className="flex items-center gap-3">
+                    {/* Seletor de idioma */}
+                    {showLanguageSelector && (
+                        <LanguageSelector variant="minimal" showIcon={false} className="hidden sm:flex" />
+                    )}
+
+                    {/* Toggle de tema */}
+                    {showThemeToggle && (
+                        <ThemeToggle className="hover:bg-accent" />
+                    )}
+                </div>
+            </div>
+        </header>
+    );
+}

package/components/HomeContent.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from './ui/card';
+import { Header } from './Header';
 import { Button } from './ui/button';
 import { ChevronRight, Menu, FileText } from 'lucide-react';
 import { ScrollArea } from './ui/scroll-area';
@@ -19,7 +20,7 @@ interface HomeContentProps {
 export function HomeContent({ sidebarExpanded, assistenteExpanded = false, onToggleSidebar, onToggleAssistente }: HomeContentProps) {
   const location = useLocation();
   const navigate = useNavigate();
-  
+
   // Tradução direta para português
   const labelTranslations: Record<string, string> = {
     'home': 'Início',
@@ -28,48 +29,23 @@ export function HomeContent({ sidebarExpanded, assistenteExpanded = false, onTog
 
   // Get current route info
   const currentRoute = getRouteByPath(location.pathname);
-  const breadcrumbLabel = currentRoute?.label 
+  const breadcrumbLabel = currentRoute?.label
     ? labelTranslations[currentRoute.label.toLowerCase()] || currentRoute.label
     : 'Início';
 
 
 
   return (
-    <div 
-      className={`flex-1 flex flex-col overflow-hidden transition-all duration-300 ${
-        sidebarExpanded ? 'md:pl-64' : 'md:pl-20'
-      } ${
-        assistenteExpanded ? 'md:pr-[420px]' : 'md:pr-20'
-      }`}
+    <div
+      className={`flex-1 flex flex-col overflow-hidden transition-all duration-300 ${sidebarExpanded ? 'md:pl-64' : 'md:pl-20'
+        } ${assistenteExpanded ? 'md:pr-[420px]' : 'md:pr-20'
+        }`}
     >
-      {/* Header fixo */}
-      <header className="bg-card shadow-sm border-b border-border px-[24px] py-[14px] flex-shrink-0">
-        <div className="flex items-center justify-between p-[0px]">
-          <div className="flex items-center gap-2 text-muted-foreground">
-            {/* Botão menu para mobile */}
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={onToggleSidebar}
-              className="md:hidden mr-2 p-2"
-            >
-              <Menu className="w-5 h-5" />
-            </Button>
-            <span className="text-primary font-medium">Xertica.ai</span>
-            <ChevronRight className="w-4 h-4" />
-            <span className="text-foreground font-medium">{breadcrumbLabel}</span>
-          </div>
-          
-          {/* Controles do usuário */}
-          <div className="flex items-center gap-3">
-            {/* Seletor de idioma */}
-            <LanguageSelector variant="minimal" showIcon={false} className="hidden sm:flex" />
-            
-            {/* Toggle de tema */}
-            <ThemeToggle className="hover:bg-accent" />
-          </div>
-        </div>
-      </header>
+      <Header
+        sidebarExpanded={sidebarExpanded}
+        onToggleSidebar={onToggleSidebar || (() => { })}
+        title={breadcrumbLabel}
+      />
 
       {/* Área de conteúdo */}
       <main className="flex-1 overflow-hidden bg-muted">
@@ -104,7 +80,7 @@ export function HomeContent({ sidebarExpanded, assistenteExpanded = false, onTog
                     </p>
                   </CardContent>
                   <CardFooter>
-                    <Button 
+                    <Button
                       variant="outline"
                       className="w-full"
                       onClick={() => navigate('/template')}

package/components/HomePage.tsx

@@ -3,6 +3,7 @@ import { useLocation, useNavigate } from 'react-router';
 import { Sidebar } from './Sidebar';
 import { HomeContent } from './HomeContent';
 import { AssistenteXertica } from './AssistenteXertica';
+import { routes } from '../routes';
 
 interface HomePageProps {
   user: { email: string } | null;
@@ -46,15 +47,16 @@ export function HomePage({ user, onLogout }: HomePageProps) {
 
   return (
     <div className="h-screen flex bg-muted overflow-hidden relative">
-      <Sidebar 
+      <Sidebar
         expanded={sidebarExpanded}
         onToggle={handleToggleSidebar}
         user={user}
         onLogout={onLogout}
         location={location}
         navigate={navigate}
+        routes={routes}
       />
-      <HomeContent 
+      <HomeContent
         sidebarExpanded={sidebarExpanded}
         assistenteExpanded={assistenteExpanded}
         onToggleSidebar={handleToggleSidebar}

package/components/Sidebar.tsx

@@ -7,7 +7,7 @@ import {
   MoreHorizontal,
   ChevronRight,
 } from "lucide-react";
-import { routes } from "../routes";
+// routes import removed to make it reusable
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import { Tooltip, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
@@ -15,8 +15,9 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cn } from "./ui/utils";
 import { XerticaLogo } from "./XerticaLogo";
 import { XerticaXLogo } from "./XerticaXLogo";
+import { Button } from "./ui/button";
 
-// TooltipContent customizado para a Sidebar com seta branca
+// Validar se SidebarTooltipContent já existe em outro lugar ou manter aqui
 function SidebarTooltipContent({
   className,
   sideOffset = 0,
@@ -34,15 +35,23 @@ function SidebarTooltipContent({
       {...props}
     >
       {children}
-      <TooltipPrimitive.Arrow 
-        className="fill-popover z-50 drop-shadow-sm" 
-        width={8} 
+      <TooltipPrimitive.Arrow
+        className="fill-popover z-50 drop-shadow-sm"
+        width={8}
         height={4}
       />
     </TooltipPrimitive.Content>
   );
 }
 
+// Interface for Route Config (copied/imported type)
+export interface RouteConfig {
+  path: string;
+  label: string;
+  icon: React.ComponentType<any>;
+  component?: React.ComponentType<any>;
+}
+
 interface SubMenuItem {
   id: string;
   label: string;
@@ -64,6 +73,7 @@ interface SidebarProps {
   onLogout: () => void;
   location: { pathname: string };
   navigate: (path: string) => void;
+  routes: RouteConfig[];
 }
 
 export function Sidebar({
@@ -73,6 +83,7 @@ export function Sidebar({
   onLogout,
   location,
   navigate,
+  routes,
 }: SidebarProps) {
   const navRef = useRef<HTMLDivElement>(null);
   const [hasOverflow, setHasOverflow] = useState(false);
@@ -154,9 +165,9 @@ export function Sidebar({
               ? "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
               : "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
             : "w-full h-10 flex items-center justify-center px-0 rounded-[var(--radius-button)] transition-all duration-200 " +
-              (item.active
-                ? "bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
-                : "text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground")
+            (item.active
+              ? "bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
+              : "text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground")
         }
       >
         <Icon className="w-5 h-5 flex-shrink-0" />
@@ -210,7 +221,7 @@ export function Sidebar({
                   <span className="truncate">{item.label}</span>
                 </button>
               )}
-              
+
               {/* Subitens */}
               {hasSubItems && item.subItems && (
                 <>
@@ -246,9 +257,9 @@ export function Sidebar({
               ? "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
               : "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
             : "w-full h-10 flex items-center justify-center px-0 rounded-[var(--radius-button)] transition-all duration-200 " +
-              (item.active
-                ? "bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
-                : "text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground")
+            (item.active
+              ? "bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
+              : "text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground")
         }
       >
         <Icon className="w-5 h-5 flex-shrink-0" />
@@ -281,11 +292,10 @@ export function Sidebar({
     <TooltipProvider delayDuration={300}>
       {/* Sidebar */}
       <div
-        className={`bg-sidebar text-sidebar-foreground transition-all duration-300 ease-in-out flex flex-col z-50 ${
-          expanded
-            ? "fixed inset-0 md:fixed md:inset-y-0 md:left-0 md:w-64"
-            : "fixed inset-y-0 left-0 w-20 -translate-x-full md:translate-x-0"
-        }`}
+        className={`bg-sidebar text-sidebar-foreground transition-all duration-300 ease-in-out flex flex-col z-50 ${expanded
+          ? "fixed inset-0 md:fixed md:inset-y-0 md:left-0 md:w-64"
+          : "fixed inset-y-0 left-0 w-20 -translate-x-full md:translate-x-0"
+          }`}
       >
         {/* Botão Toggle Menu */}
         <div className="p-[14px] pt-[13px] pr-[14px] pb-[12px] pl-[14px]">

package/components/TemplatePage.tsx

@@ -3,6 +3,7 @@ import { useLocation, useNavigate } from 'react-router';
 import { Sidebar } from './Sidebar';
 import { TemplateContent } from './TemplateContent';
 import { AssistenteXertica } from './AssistenteXertica';
+import { routes } from '../routes';
 
 interface TemplatePageProps {
   user: { email: string } | null;
@@ -46,15 +47,16 @@ export function TemplatePage({ user, onLogout }: TemplatePageProps) {
 
   return (
     <div className="h-screen flex bg-muted overflow-hidden relative">
-      <Sidebar 
+      <Sidebar
         expanded={sidebarExpanded}
         onToggle={handleToggleSidebar}
         user={user}
         onLogout={onLogout}
         location={location}
         navigate={navigate}
+        routes={routes}
       />
-      <TemplateContent 
+      <TemplateContent
         sidebarExpanded={sidebarExpanded}
         assistenteExpanded={assistenteExpanded}
         onToggleSidebar={handleToggleSidebar}

package/components/index.ts

@@ -1,9 +1,10 @@
+import '../index.css';
 // ============================================================================
 // Xertica Assistant Exports
 // ============================================================================
 
 export { XerticaAssistant } from './ui/xertica-assistant';
-export type { 
+export type {
   XerticaAssistantProps,
   Message,
   Conversation,
@@ -41,4 +42,20 @@ export { XerticaOrbe } from './XerticaOrbe';
 // Layout
 export { Sidebar } from './Sidebar';
 export { ThemeToggle } from './ThemeToggle';
-export { LanguageSelector } from './LanguageSelector';
+export { LanguageSelector } from './LanguageSelector';
+
+// Connected Components (require Providers)
+export { AssistenteXertica } from './AssistenteXertica';
+
+// State Management & Contexts
+export * from '../contexts';
+
+// Layout & Common Components
+export { Header } from './Header';
+export { DocumentEditor } from './DocumentEditor';
+
+// Media Components
+export { VideoPlayer } from './media/VideoPlayer';
+export { AudioPlayer } from './media/AudioPlayer';
+export { FloatingMediaWrapper } from './media/FloatingMediaWrapper';
+export { PodcastPlayer } from './PodcastPlayer';

package/components/media/AudioPlayer.tsx

@@ -14,12 +14,12 @@ export interface AudioPlayerProps {
   className?: string;
 }
 
-export function AudioPlayer({ 
-  src, 
+export function AudioPlayer({
+  src,
   title = "Audio",
   artist,
   autoPlay = false,
-  className 
+  className
 }: AudioPlayerProps) {
   const audioRef = useRef<HTMLAudioElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -38,9 +38,9 @@ export function AudioPlayer({
     if (audioRef.current) {
       setCurrentTime(audioRef.current.currentTime);
     }
-    
+
     setIsFloating(floating);
-    
+
     if (!floating) {
       setIsManualFloating(false);
       if (containerRef.current) {
@@ -55,21 +55,21 @@ export function AudioPlayer({
     if (audio) {
       // If we are switching modes, restore time and play state
       if (Math.abs(audio.currentTime - currentTime) > 0.5) {
-         audio.currentTime = currentTime;
+        audio.currentTime = currentTime;
       }
       if (isPlaying) {
-         const playPromise = audio.play();
-         if (playPromise !== undefined) {
-            playPromise.catch(error => {
-               // Auto-play might be blocked or interrupted
-               console.log("Playback interrupted during switch:", error);
-            });
-         }
+        const playPromise = audio.play();
+        if (playPromise !== undefined) {
+          playPromise.catch(error => {
+            // Auto-play might be blocked or interrupted
+            console.log("Playback interrupted during switch:", error);
+          });
+        }
       }
     }
     // We depend on isFloating to trigger this check when the DOM node is recreated
     // But we also need to attach listeners to the new node
-  }, [isFloating]); 
+  }, [isFloating]);
 
   // Auto-float on scroll logic
   useEffect(() => {
@@ -79,17 +79,17 @@ export function AudioPlayer({
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (isPlaying && !entry.isIntersecting && !isFloating) {
-           // Sync time before floating
-           if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
-           setIsFloating(true);
+          // Sync time before floating
+          if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
+          setIsFloating(true);
         }
         else if (entry.isIntersecting && isFloating && !isManualFloating) {
-           // Sync time before docking
-           if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
-           handleSetFloating(false);
+          // Sync time before docking
+          if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
+          handleSetFloating(false);
         }
       },
-      { threshold: 0.2 } 
+      { threshold: 0.2 }
     );
 
     observer.observe(container);
@@ -161,7 +161,7 @@ export function AudioPlayer({
 
   const PlayerControls = ({ isCompact = false }) => (
     <div className={cn("flex items-center gap-3 w-full", isCompact ? "px-3 py-1" : "px-4 py-3")}>
-      <Button 
+      <Button
         onClick={togglePlay}
         size="icon"
         variant="outline"
@@ -174,70 +174,70 @@ export function AudioPlayer({
       </Button>
 
       <div className="flex-1 min-w-0 flex flex-col justify-center gap-1.5">
-          <div className="flex items-center justify-between text-xs leading-none">
-            <div className="flex items-center gap-2 truncate">
-              <span className="font-medium text-foreground truncate">{title}</span>
-              {artist && !isCompact && <span className="text-muted-foreground hidden sm:inline-block border-l pl-2 border-border truncate">{artist}</span>}
-            </div>
-            <div className="text-muted-foreground font-medium tabular-nums shrink-0 text-[10px] sm:text-xs">
-              {formatTime(currentTime)} / {formatTime(duration || 0)}
-            </div>
+        <div className="flex items-center justify-between text-xs leading-none">
+          <div className="flex items-center gap-2 truncate">
+            <span className="font-medium text-foreground truncate">{title}</span>
+            {artist && !isCompact && <span className="text-muted-foreground hidden sm:inline-block border-l pl-2 border-border truncate">{artist}</span>}
           </div>
-          
-          <Slider
-            value={[currentTime]}
-            max={duration || 100}
-            step={1}
-            onValueChange={handleSeek}
-            className="w-full"
-          />
+          <div className="text-muted-foreground font-medium tabular-nums shrink-0 text-[10px] sm:text-xs">
+            {formatTime(currentTime)} / {formatTime(duration || 0)}
+          </div>
+        </div>
+
+        <Slider
+          value={[currentTime]}
+          max={duration || 100}
+          step={1}
+          onValueChange={handleSeek}
+          className="w-full"
+        />
       </div>
 
       <div className="flex items-center gap-1 shrink-0">
-          {!isCompact && (
-            <div className="hidden sm:flex items-center gap-2 group/volume mr-2">
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8 text-muted-foreground hover:text-foreground"
-                onClick={() => {
-                    const newMuted = !isMuted;
-                    setIsMuted(newMuted);
-                    if (audioRef.current) audioRef.current.muted = newMuted;
-                }}
-              >
-                {isMuted ? <VolumeX className="w-4 h-4" /> : <Volume2 className="w-4 h-4" />}
-              </Button>
-              <div className="w-0 overflow-hidden group-hover/volume:w-20 transition-all duration-300">
-                  <Slider
-                    value={[isMuted ? 0 : volume]}
-                    max={1}
-                    step={0.01}
-                    onValueChange={handleVolumeChange}
-                    className="w-20"
-                  />
-              </div>
-            </div>
-          )}
-
-          {!isCompact && (
-             <div className="w-px h-6 bg-border mx-1 hidden sm:block" />
-          )}
-
-          {!isCompact && (
+        {!isCompact && (
+          <div className="hidden sm:flex items-center gap-2 group/volume mr-2">
             <Button
               variant="ghost"
               size="icon"
               className="h-8 w-8 text-muted-foreground hover:text-foreground"
               onClick={() => {
-                setIsManualFloating(true);
-                handleSetFloating(true);
+                const newMuted = !isMuted;
+                setIsMuted(newMuted);
+                if (audioRef.current) audioRef.current.muted = newMuted;
               }}
-              title="Modo Flutuante"
             >
-              <Maximize2 className="w-4 h-4" />
+              {isMuted ? <VolumeX className="w-4 h-4" /> : <Volume2 className="w-4 h-4" />}
             </Button>
-          )}
+            <div className="w-0 overflow-hidden group-hover/volume:w-20 transition-all duration-300">
+              <Slider
+                value={[isMuted ? 0 : volume]}
+                max={1}
+                step={0.01}
+                onValueChange={handleVolumeChange}
+                className="w-20"
+              />
+            </div>
+          </div>
+        )}
+
+        {!isCompact && (
+          <div className="w-px h-6 bg-border mx-1 hidden sm:block" />
+        )}
+
+        {!isCompact && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 text-muted-foreground hover:text-foreground"
+            onClick={() => {
+              setIsManualFloating(true);
+              handleSetFloating(true);
+            }}
+            title="Modo Flutuante"
+          >
+            <Maximize2 className="w-4 h-4" />
+          </Button>
+        )}
       </div>
     </div>
   );
@@ -247,21 +247,21 @@ export function AudioPlayer({
       <FloatingMediaWrapper
         isFloating={isFloating}
         setIsFloating={handleSetFloating}
-        onCloseMedia={() => {
+        onClose={() => {
           setIsPlaying(false);
-          setIsFloating(false); 
+          setIsFloating(false);
           if (audioRef.current) audioRef.current.pause();
         }}
         title={title}
-        aspectRatio={320/110} 
+        aspectRatio={320 / 110}
         minHeight={110}
         minWidth={320}
         className="w-full"
       >
         <div className={cn(
           "bg-card w-full overflow-hidden flex flex-col justify-center",
-          isFloating 
-            ? "h-full bg-transparent text-primary-foreground [&_.text-muted-foreground]:text-primary-foreground/80 [&_.text-foreground]:text-primary-foreground [&_.text-primary]:text-primary-foreground [&_.border-primary\\/20]:border-primary-foreground/30 [&_.hover\\:bg-primary\\/5]:hover:bg-primary-foreground/10 [&_[data-slot=slider-track]]:bg-primary-foreground/20 [&_[data-slot=slider-range]]:bg-primary-foreground [&_[data-slot=slider-thumb]]:border-primary-foreground" 
+          isFloating
+            ? "h-full bg-transparent text-primary-foreground [&_.text-muted-foreground]:text-primary-foreground/80 [&_.text-foreground]:text-primary-foreground [&_.text-primary]:text-primary-foreground [&_.border-primary\\/20]:border-primary-foreground/30 [&_.hover\\:bg-primary\\/5]:hover:bg-primary-foreground/10 [&_[data-slot=slider-track]]:bg-primary-foreground/20 [&_[data-slot=slider-range]]:bg-primary-foreground [&_[data-slot=slider-thumb]]:border-primary-foreground"
             : "border rounded-md shadow-sm"
         )}>
           <audio