xertica-ui 1.0.0

package/components/FormattedDocument.tsx

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+
+interface FormattedDocumentProps {
+  content: string;
+  maxPreviewLength?: number;
+  className?: string;
+}
+
+export function FormattedDocument({ content, maxPreviewLength = 500, className = '' }: FormattedDocumentProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  
+  // Converter Markdown simples para HTML
+  const convertMarkdownToHtml = (markdown: string): string => {
+    let html = markdown;
+    
+    // Headers (com estilos melhorados)
+    html = html.replace(/^### (.*$)/gim, '<h3 class="text-base font-medium mt-3 mb-1.5 text-foreground">$1</h3>');
+    html = html.replace(/^## (.*$)/gim, '<h2 class="text-lg font-medium mt-4 mb-2 text-foreground">$1</h2>');
+    html = html.replace(/^# (.*$)/gim, '<h1 class="text-xl font-medium mt-4 mb-3 text-foreground">$1</h1>');
+    
+    // Bold
+    html = html.replace(/\*\*(.*?)\*\*/g, '<strong class="font-medium text-foreground">$1</strong>');
+    
+    // Italic
+    html = html.replace(/\*(.*?)\*/g, '<em class="italic">$1</em>');
+    
+    // Lists
+    html = html.replace(/^\- (.*$)/gim, '<li class="ml-4 my-0.5">• $1</li>');
+    html = html.replace(/^\d+\. (.*$)/gim, '<li class="ml-4 my-0.5">$1</li>');
+    
+    // Checkboxes
+    html = html.replace(/- \[ \] (.*$)/gim, '<div class="flex items-center gap-2 ml-4 my-1"><input type="checkbox" disabled class="rounded w-3 h-3" /> <span class="text-sm">$1</span></div>');
+    html = html.replace(/- \[x\] (.*$)/gim, '<div class="flex items-center gap-2 ml-4 my-1"><input type="checkbox" checked disabled class="rounded w-3 h-3" /> <span class="text-sm">$1</span></div>');
+    
+    // Horizontal rule
+    html = html.replace(/^---$/gim, '<hr class="my-3 border-border" />');
+    
+    // Line breaks (mantém parágrafos)
+    html = html.replace(/\n\n/g, '</p><p class="my-2">');
+    html = html.replace(/\n/g, '<br/>');
+    
+    // Wrap em parágrafo
+    html = '<p class="my-1">' + html + '</p>';
+    
+    return html;
+  };
+  
+  const htmlContent = convertMarkdownToHtml(content);
+  const isLong = content.length > maxPreviewLength;
+  
+  // Se não for longo ou estiver expandido, mostra tudo
+  const displayContent = (!isLong || isExpanded) 
+    ? htmlContent 
+    : convertMarkdownToHtml(content.substring(0, maxPreviewLength) + '...');
+  
+  return (
+    <div className={className}>
+      <div 
+        className="max-w-none text-sm text-foreground leading-relaxed break-words overflow-hidden"
+        dangerouslySetInnerHTML={{ __html: displayContent }}
+      />
+      
+      {isLong && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="mt-2 w-full text-xs hover:bg-accent text-muted-foreground"
+        >
+          {isExpanded ? (
+            <>
+              <ChevronUp className="w-3 h-3 mr-1" />
+              Ver menos
+            </>
+          ) : (
+            <>
+              <ChevronDown className="w-3 h-3 mr-1" />
+              Ver mais
+            </>
+          )}
+        </Button>
+      )}
+    </div>
+  );
+}

package/components/HomeContent.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from './ui/card';
+import { Button } from './ui/button';
+import { ChevronRight, Menu, FileText } from 'lucide-react';
+import { ScrollArea } from './ui/scroll-area';
+import { useLocation, useNavigate } from 'react-router';
+import { getRouteByPath } from '../routes';
+import { ThemeToggle } from './ThemeToggle';
+import { LanguageSelector } from './LanguageSelector';
+import { Badge } from './ui/badge';
+
+interface HomeContentProps {
+  sidebarExpanded: boolean;
+  assistenteExpanded?: boolean;
+  onToggleSidebar?: () => void;
+  onToggleAssistente?: () => void;
+}
+
+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',
+    'template': 'Template',
+  };
+
+  // Get current route info
+  const currentRoute = getRouteByPath(location.pathname);
+  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'
+      }`}
+    >
+      {/* 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>
+
+      {/* Área de conteúdo */}
+      <main className="flex-1 overflow-hidden bg-muted">
+        <ScrollArea className="h-full">
+          <div className="p-2 sm:p-4 md:p-6">
+            <div className="max-w-6xl mx-auto space-y-8">
+              {/* Cabeçalho da página */}
+              <div className="space-y-2">
+                <h2>Bem-vindo, Ariel!</h2>
+                <p className="text-muted-foreground">
+                  Sua plataforma inteligente para automação e análise de dados
+                </p>
+              </div>
+
+              {/* Cards principais */}
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <Card className="hover:shadow-xl transition-shadow duration-200 flex flex-col h-full">
+                  <CardHeader>
+                    <div className="flex items-center gap-3">
+                      <div className="p-2 bg-[var(--chart-2)]/20 rounded-[var(--radius)]">
+                        <FileText className="w-6 h-6 text-[var(--chart-2)]" />
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <CardTitle className="text-sm">Template CLI</CardTitle>
+                        <Badge variant="default" className="text-xs">Novo</Badge>
+                      </div>
+                    </div>
+                  </CardHeader>
+                  <CardContent className="flex-1">
+                    <p className="text-muted-foreground">
+                      Página template pronta para uso no CLI com todos os componentes configurados.
+                    </p>
+                  </CardContent>
+                  <CardFooter>
+                    <Button 
+                      variant="outline"
+                      className="w-full"
+                      onClick={() => navigate('/template')}
+                    >
+                      Visualizar
+                    </Button>
+                  </CardFooter>
+                </Card>
+              </div>
+            </div>
+          </div>
+        </ScrollArea>
+      </main>
+    </div>
+  );
+}

package/components/HomePage.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { useLocation, useNavigate } from 'react-router';
+import { Sidebar } from './Sidebar';
+import { HomeContent } from './HomeContent';
+import { AssistenteXertica } from './AssistenteXertica';
+
+interface HomePageProps {
+  user: { email: string } | null;
+  onLogout: () => void;
+}
+
+export function HomePage({ user, onLogout }: HomePageProps) {
+  const [sidebarExpanded, setSidebarExpanded] = useState(false);
+  const [assistenteExpanded, setAssistenteExpanded] = useState(false);
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  // Função para alternar a sidebar - fecha o assistente se estiver aberto
+  const handleToggleSidebar = () => {
+    if (!sidebarExpanded && assistenteExpanded) {
+      // Se a sidebar vai abrir e o assistente está aberto, fechar o assistente
+      setAssistenteExpanded(false);
+    }
+    setSidebarExpanded(!sidebarExpanded);
+  };
+
+  // Função para alternar o assistente - fecha a sidebar se estiver aberta
+  const handleToggleAssistente = () => {
+    if (!assistenteExpanded && sidebarExpanded) {
+      // Se o assistente vai abrir e a sidebar está aberta, fechar a sidebar
+      setSidebarExpanded(false);
+    }
+    setAssistenteExpanded(!assistenteExpanded);
+  };
+
+  // Função para abrir assistente com tab específica - fecha a sidebar se estiver aberta
+  const handleToggleAssistenteWithTab = (tab: string) => {
+    if (!assistenteExpanded) {
+      if (sidebarExpanded) {
+        // Se o assistente vai abrir e a sidebar está aberta, fechar a sidebar
+        setSidebarExpanded(false);
+      }
+      setAssistenteExpanded(true);
+    }
+  };
+
+  return (
+    <div className="h-screen flex bg-muted overflow-hidden relative">
+      <Sidebar 
+        expanded={sidebarExpanded}
+        onToggle={handleToggleSidebar}
+        user={user}
+        onLogout={onLogout}
+        location={location}
+        navigate={navigate}
+      />
+      <HomeContent 
+        sidebarExpanded={sidebarExpanded}
+        assistenteExpanded={assistenteExpanded}
+        onToggleSidebar={handleToggleSidebar}
+        onToggleAssistente={handleToggleAssistente}
+      />
+      <AssistenteXertica
+        isExpanded={assistenteExpanded}
+        onToggle={handleToggleAssistente}
+        onToggleWithTab={handleToggleAssistenteWithTab}
+      />
+    </div>
+  );
+}

package/components/LanguageSelector.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { useLanguage, Language } from '../contexts/LanguageContext';
+import { Globe } from 'lucide-react';
+
+interface LanguageSelectorProps {
+  variant?: 'default' | 'minimal';
+  showIcon?: boolean;
+  className?: string;
+}
+
+export function LanguageSelector({ 
+  variant = 'default', 
+  showIcon = true,
+  className = ''
+}: LanguageSelectorProps) {
+  const { language, setLanguage } = useLanguage();
+
+  const languages = [
+    { value: 'pt' as Language, label: 'Português', flag: '🇧🇷' },
+    { value: 'en' as Language, label: 'English', flag: '🇺🇸' },
+    { value: 'es' as Language, label: 'Español', flag: '🇪🇸' },
+  ];
+
+  const currentLanguage = languages.find(lang => lang.value === language);
+
+  return (
+    <div className={`flex items-center gap-2 ${className}`}>
+      {showIcon && variant === 'default' && (
+        <Globe className="w-4 h-4 text-muted-foreground" />
+      )}
+      <Select value={language} onValueChange={setLanguage}>
+        <SelectTrigger className={variant === 'minimal' ? 'w-auto border-none shadow-none bg-transparent' : 'w-full'}>
+          <SelectValue>
+            <div className="flex items-center gap-2">
+              <span>{currentLanguage?.flag}</span>
+              <span>{currentLanguage?.label}</span>
+            </div>
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          {languages.map((lang) => (
+            <SelectItem key={lang.value} value={lang.value}>
+              <div className="flex items-center gap-2">
+                <span>{lang.flag}</span>
+                <span>{lang.label}</span>
+              </div>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

package/components/LoginPage.tsx

@@ -0,0 +1,199 @@
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { XerticaLogo } from './XerticaLogo';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { LanguageSelector } from './LanguageSelector';
+import { Lock } from 'lucide-react';
+import { useNavigate } from 'react-router';
+
+interface LoginPageProps {
+  onLogin: (email: string, password: string) => boolean;
+}
+
+export function LoginPage({ onLogin }: LoginPageProps) {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setIsLoading(true);
+
+    // Simula um pequeno delay para mostrar o loading
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    const success = onLogin(email, password);
+    
+    if (!success) {
+      setError('Por favor, preencha todos os campos');
+    }
+    
+    setIsLoading(false);
+  };
+
+  const handleSocialLogin = (provider: string) => {
+    // Simula login social/SSO
+    console.log(`Login com ${provider}`);
+    // Aqui seria implementada a integração real com cada provedor
+    // Por enquanto, simula um login bem-sucedido
+    onLogin('social@user.com', 'social-auth');
+  };
+
+  return (
+    <div className="min-h-screen flex">
+      {/* Lado esquerdo - Imagem de fundo completa */}
+      <div className="hidden lg:flex lg:flex-1 relative overflow-hidden">
+        {/* Imagem de fundo preenchendo todo o espaço */}
+        <ImageWithFallback
+          src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=1200&h=800&fit=crop&auto=format"
+          alt="Equipe trabalhando com tecnologia"
+          className="absolute inset-0 w-full h-full object-cover"
+        />
+        
+        {/* Overlay com gradiente */}
+        <div className="absolute inset-0 bg-[image:var(--gradient-diagonal)] opacity-80" />
+      </div>
+
+      {/* Lado direito - Formulário */}
+      <div className="flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 lg:flex-none lg:w-1/2 relative bg-muted">
+        {/* Seletor de idioma no canto superior direito */}
+        <div className="absolute top-4 right-4 z-20">
+          <LanguageSelector variant="minimal" showIcon={false} />
+        </div>
+        
+        {/* Gradiente de fundo para mobile */}
+        <div className="absolute inset-0 lg:hidden bg-[image:var(--gradient-diagonal)] opacity-10 dark:opacity-5" />
+        <div className="w-full max-w-sm space-y-6 relative z-10">
+          {/* Header do formulário */}
+          <div className="text-center">
+            <div className="flex items-center justify-center mb-4">
+              <XerticaLogo 
+                className="h-12 w-auto text-primary dark:text-foreground" 
+                variant="theme"
+              />
+            </div>
+            <h2 className="text-sm text-muted-foreground">Faça login em sua conta</h2>
+          </div>
+
+          {/* Formulário */}
+          <form className="space-y-6" onSubmit={handleSubmit}>
+            <div className="space-y-2">
+              <Label htmlFor="email">
+                E-mail
+              </Label>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                required
+                className="w-full"
+                placeholder="seu@email.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="password">
+                Senha
+              </Label>
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                required
+                className="w-full"
+                placeholder="••••••••"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
+
+            {error && (
+              <div className="text-destructive text-sm text-center">
+                {error}
+              </div>
+            )}
+
+            <Button 
+              type="submit" 
+              className="w-full"
+              disabled={isLoading}
+            >
+              {isLoading ? 'Entrando...' : 'Entrar'}
+            </Button>
+
+            {/* Link para recuperação de senha */}
+            <div className="text-center">
+              <button
+                type="button"
+                onClick={() => navigate('/forgot-password')}
+                className="text-sm text-primary hover:opacity-80 transition-colors"
+              >
+                Esqueceu sua senha?
+              </button>
+            </div>
+          </form>
+
+          {/* Divider */}
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-border"></div>
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="bg-muted px-2 text-muted-foreground">
+                ou continuar com
+              </span>
+            </div>
+          </div>
+
+          {/* Opções de login social/SSO */}
+          <div className="space-y-3">
+            {/* Google */}
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full justify-center"
+              onClick={() => handleSocialLogin('Google')}
+            >
+              <svg className="w-5 h-5 mr-2" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+                <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
+                <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
+                <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
+                <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
+                <path fill="none" d="M0 0h48v48H0z"></path>
+              </svg>
+              <span>Entrar com Google</span>
+            </Button>
+
+            {/* MT Login */}
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full justify-center"
+              onClick={() => handleSocialLogin('MT Login')}
+            >
+              <Lock className="w-5 h-5 mr-2 text-[var(--chart-4)]" />
+              <span>Entrar com MT Login</span>
+            </Button>
+
+            {/* gov.br */}
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full justify-center font-normal"
+              onClick={() => handleSocialLogin('gov.br')}
+            >
+              <span>Entrar com <strong className="font-semibold">gov.br</strong></span>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/MarkdownMessage.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+interface MarkdownMessageProps {
+  content: string;
+  className?: string;
+}
+
+export function MarkdownMessage({ content, className = '' }: MarkdownMessageProps) {
+  // Converter Markdown simples para HTML
+  const convertMarkdownToHtml = (markdown: string): string => {
+    let html = markdown;
+    
+    // Escapar HTML existente
+    html = html.replace(/</g, '<').replace(/>/g, '>');
+    
+    // Headers (do maior para o menor para evitar conflitos)
+    html = html.replace(/^### (.*$)/gim, '<h3 class="font-medium text-sm mt-2 mb-1 break-words">$1</h3>');
+    html = html.replace(/^## (.*$)/gim, '<h2 class="font-medium text-base mt-3 mb-1.5 break-words">$1</h2>');
+    html = html.replace(/^# (.*$)/gim, '<h1 class="font-medium text-lg mt-3 mb-2 break-words">$1</h1>');
+    
+    // Bold (negrito)
+    html = html.replace(/\*\*(.*?)\*\*/g, '<strong class="font-medium">$1</strong>');
+    
+    // Italic (itálico)
+    html = html.replace(/\*(.*?)\*/g, '<em class="italic">$1</em>');
+    
+    // Links
+    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="text-[var(--chart-4)] hover:underline break-all" target="_blank" rel="noopener noreferrer">$1</a>');
+    
+    // Code inline
+    html = html.replace(/`([^`]+)`/g, '<code class="px-1.5 py-0.5 rounded bg-muted text-xs font-mono break-all inline-block max-w-full">$1</code>');
+    
+    // Listas não ordenadas (bullet points) - usar list-disc nativo, sem adicionar • manual
+    html = html.replace(/^[•\-] (.*$)/gim, '<li class="ml-4 mb-1 list-disc break-words">$1</li>');
+    
+    // Listas ordenadas
+    html = html.replace(/^\d+\. (.*$)/gim, '<li class="ml-4 mb-1 list-decimal break-words">$1</li>');
+    
+    // Emojis e ícones (manter como estão)
+    
+    // Line breaks (preservar quebras de linha duplas como parágrafos)
+    html = html.replace(/\n\n/g, '</p><p class="mb-2 break-words">');
+    html = html.replace(/\n/g, '<br/>');
+    
+    // Wrap em parágrafo inicial
+    html = '<p class="mb-2 break-words">' + html + '</p>';
+    
+    // Limpar parágrafos vazios
+    html = html.replace(/<p[^>]*>\s*<\/p>/g, '');
+    
+    return html;
+  };
+  
+  const htmlContent = convertMarkdownToHtml(content);
+  
+  return (
+    <div 
+      className={`text-sm leading-relaxed break-words overflow-wrap-anywhere max-w-full ${className}`}
+      dangerouslySetInnerHTML={{ __html: htmlContent }}
+    />
+  );
+}