xertica-ui 1.0.0

package/styles/xertica/tokens.css

@@ -0,0 +1,190 @@
+/* ============================================
+   🎨 TOKENS / VARIABLES
+   ============================================ */
+
+:root,
+:root[data-theme="default"] {
+  /* Brand Tokens - Source of Truth */
+  --xertica-primary: rgba(44, 39, 91, 1);
+  --xertica-dark: rgba(35, 29, 79, 1);
+  
+  /* Semantic Colors */
+  --background: rgba(255, 255, 255, 1);
+  --foreground: rgba(9, 9, 11, 1);
+  
+  --card: rgba(255, 255, 255, 1);
+  --card-foreground: rgba(9, 9, 11, 1);
+  
+  --popover: rgba(255, 255, 255, 1);
+  --popover-foreground: rgba(9, 9, 11, 1);
+  
+  --primary: var(--xertica-primary);
+  --primary-foreground: rgba(250, 250, 250, 1);
+  --primary-light: rgba(44, 39, 91, 0.15);
+  --primary-light-foreground: rgba(44, 39, 91, 1);
+  
+  --secondary: rgba(244, 244, 245, 1);
+  --secondary-foreground: rgba(24, 24, 27, 1);
+  
+  --muted: rgba(244, 244, 245, 1);
+  --muted-foreground: rgba(113, 113, 122, 1);
+  
+  --accent: rgba(244, 244, 245, 1);
+  --accent-foreground: rgba(24, 24, 27, 1);
+  
+  --destructive: rgba(239, 68, 68, 1);
+  --destructive-foreground: rgba(250, 250, 250, 1);
+  
+  --border: rgba(228, 228, 231, 1);
+  --input: rgba(244, 244, 245, 0.5);
+  --input-background: rgba(244, 244, 245, 0.5);
+  --ring: rgba(161, 161, 170, 1);
+  
+  /* Sidebar */
+  --sidebar: rgba(44, 39, 91, 1);
+  --sidebar-foreground: rgba(250, 250, 250, 1);
+  --sidebar-primary: rgba(255, 255, 255, 1);
+  --sidebar-primary-foreground: rgba(9, 9, 11, 1);
+  --sidebar-accent: rgba(244, 244, 245, 1);
+  --sidebar-accent-foreground: rgba(24, 24, 27, 1);
+  --sidebar-border: rgba(65, 61, 107, 1);
+  --sidebar-ring: rgba(161, 161, 170, 1);
+
+  /* Charts */
+  --chart-1: rgba(44, 39, 91, 1);
+  --chart-2: rgba(5, 150, 105, 1);
+  --chart-3: rgba(245, 158, 11, 1);
+  --chart-4: rgba(37, 99, 235, 1);
+  --chart-5: rgba(239, 68, 68, 1);
+  
+  /* Gradients */
+  --gradient-diagonal: linear-gradient(135deg, #FDB0F2 0%, #72CDFD 100%);
+  
+  /* Spacing & Radius */
+  --radius: 6px;
+  --radius-button: 12px;
+  --radius-card: 12px;
+  
+  --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.1);
+  
+  /* Typography */
+  --font-size: 16px;
+  --text-h1: 2rem;
+  --text-h2: 1.75rem;
+  --text-h3: 1.5rem;
+  --text-h4: 1.25rem;
+  --text-base: 1rem;
+  --text-p: 0.875rem;
+  --text-label: 0.875rem;
+  --text-small: 0.875rem;
+  --text-xs: 0.75rem;
+  --text-muted: 0.875rem;
+  --text-stats: 2.25rem;
+  --text-table-head: 1.25rem;
+  
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-8: 2rem;
+  
+  /* Calendar */
+  --cell-size: 2.5rem;
+  --cell-radius: var(--radius);
+  --calendar-caption-size: 15px;
+  --calendar-weekday-size: 12px;
+  --calendar-day-size: 14px;
+  
+  /* Toast - Success */
+  --toast-success-bg: rgba(220, 252, 231, 1);
+  --toast-success-border: rgba(5, 150, 105, 1);
+  --toast-success-icon: rgba(5, 150, 105, 1);
+  /* Toast - Warning */
+  --toast-warning-bg: rgba(254, 243, 199, 1);
+  --toast-warning-border: rgba(245, 158, 11, 1);
+  --toast-warning-icon: rgba(245, 158, 11, 1);
+  /* Toast - Info */
+  --toast-info-bg: rgba(219, 234, 254, 1);
+  --toast-info-border: rgba(37, 99, 235, 1);
+  --toast-info-icon: rgba(37, 99, 235, 1);
+  /* Toast - Error */
+  --toast-error-bg: rgba(254, 226, 226, 1);
+  --toast-error-border: rgba(239, 68, 68, 1);
+  --toast-error-icon: rgba(239, 68, 68, 1);
+}
+
+:root[data-mode="dark"],
+.dark {
+  /* Brand Tokens */
+  --xertica-primary: rgba(44, 39, 91, 1);
+  
+  /* Semantic Colors */
+  --background: rgba(5, 5, 5, 1);
+  --foreground: rgba(250, 250, 250, 1);
+  
+  --card: rgba(20, 20, 22, 1);
+  --card-foreground: rgba(250, 250, 250, 1);
+  
+  --popover: rgba(20, 20, 22, 1);
+  --popover-foreground: rgba(250, 250, 250, 1);
+  
+  --primary-foreground: rgba(250, 250, 250, 1);
+  --primary-light: rgba(44, 39, 91, 0.15);
+  --primary-light-foreground: rgba(44, 39, 91, 1);
+  
+  --secondary: rgba(39, 39, 42, 1);
+  --secondary-foreground: rgba(250, 250, 250, 1);
+  
+  --muted: rgba(39, 39, 42, 1);
+  --muted-foreground: rgba(161, 161, 170, 1);
+  
+  --accent: rgba(39, 39, 42, 1);
+  --accent-foreground: rgba(250, 250, 250, 1);
+  
+  --destructive: rgba(239, 68, 68, 1);
+  --destructive-foreground: rgba(250, 250, 250, 1);
+  
+  --border: rgba(63, 63, 70, 1);
+  --input: rgba(39, 39, 42, 0.5);
+  --input-background: rgba(39, 39, 42, 0.5);
+  --ring: rgba(113, 113, 122, 1);
+  
+  --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.3);
+  
+  /* Sidebar */
+  --sidebar-foreground: rgba(250, 250, 250, 1);
+  --sidebar-primary: rgba(255, 255, 255, 1);
+  --sidebar-primary-foreground: rgba(9, 9, 11, 1);
+  --sidebar-accent: rgba(63, 63, 70, 1);
+  --sidebar-accent-foreground: rgba(250, 250, 250, 1);
+  --sidebar-border: rgba(65, 61, 107, 1);
+  --sidebar-ring: rgba(161, 161, 170, 1);
+  
+  /* Gradients */
+  --gradient-diagonal: linear-gradient(135deg, #7B4A7A 0%, #3A5C7D 100%);
+  
+  /* Toast - Success */
+  --toast-success-bg: rgba(6, 78, 59, 1);
+  --toast-success-border: rgba(34, 197, 94, 1);
+  --toast-success-icon: rgba(34, 197, 94, 1);
+  /* Toast - Warning */
+  --toast-warning-bg: rgba(113, 63, 18, 1);
+  --toast-warning-border: rgba(251, 191, 36, 1);
+  --toast-warning-icon: rgba(251, 191, 36, 1);
+  /* Toast - Info */
+  --toast-info-bg: rgba(30, 58, 138, 1);
+  --toast-info-border: rgba(96, 165, 250, 1);
+  --toast-info-icon: rgba(96, 165, 250, 1);
+  /* Toast - Error */
+  --toast-error-bg: rgba(127, 29, 29, 1);
+  --toast-error-border: rgba(248, 113, 113, 1);
+  --toast-error-icon: rgba(248, 113, 113, 1);
+}

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path mapping */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["./**/*.ts", "./**/*.tsx"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/utils/gemini.ts

@@ -0,0 +1,140 @@
+import { GoogleGenerativeAI, GenerativeModel } from "@google/generative-ai";
+
+export interface GeminiMessage {
+  role: 'user' | 'model';
+  parts: { text: string }[];
+}
+
+export async function callGeminiAPI(
+  apiKey: string,
+  message: string,
+  conversationHistory: GeminiMessage[] = []
+): Promise<string> {
+  try {
+    // Inicializar o cliente Gemini
+    const genAI = new GoogleGenerativeAI(apiKey);
+    
+    // Obter o modelo gemini-2.0-flash
+    const model: GenerativeModel = genAI.getGenerativeModel({ 
+      model: "gemini-2.0-flash",
+      generationConfig: {
+        temperature: 0.9,
+        topK: 40,
+        topP: 0.95,
+        maxOutputTokens: 2048,
+      },
+    });
+
+    console.log('Calling Gemini API with:', {
+      model: 'gemini-2.0-flash',
+      messageLength: message.length,
+      historyLength: conversationHistory.length
+    });
+
+    let result;
+
+    // Se houver histórico, usar chat com contexto
+    if (conversationHistory.length > 0) {
+      // Criar sessão de chat com histórico
+      const chat = model.startChat({
+        history: conversationHistory.map(msg => ({
+          role: msg.role,
+          parts: msg.parts
+        })),
+      });
+
+      // Enviar mensagem no contexto do chat
+      result = await chat.sendMessage(message);
+    } else {
+      // Sem histórico, fazer chamada simples
+      result = await model.generateContent(message);
+    }
+
+    // Obter o texto da resposta
+    const response = result.response;
+    const text = response.text();
+
+    console.log('Gemini API Response:', {
+      hasText: !!text,
+      textLength: text?.length || 0
+    });
+
+    if (!text || text.trim().length === 0) {
+      throw new Error('Resposta vazia recebida da API.');
+    }
+
+    return text;
+
+  } catch (error: any) {
+    console.error('Error calling Gemini API:', error);
+
+    // Tratamento de erros específicos da biblioteca
+    if (error.message) {
+      const errorMsg = error.message.toLowerCase();
+
+      // Erro de API Key vazada/leaked
+      if (errorMsg.includes('leaked') || errorMsg.includes('reported')) {
+        throw new Error('🔐 Sua chave de API foi reportada como vazada e foi desativada por segurança. Gere uma nova chave em https://aistudio.google.com/apikey e configure em Configurações.');
+      }
+
+      // Erro de API Key inválida ou expirada
+      if (errorMsg.includes('api key') || errorMsg.includes('api_key') || errorMsg.includes('invalid') || errorMsg.includes('expired') || errorMsg.includes('403')) {
+        if (errorMsg.includes('expired')) {
+          throw new Error('❌ Chave de API expirada. Gere uma nova chave em https://aistudio.google.com/apikey e configure em Configurações.');
+        }
+        if (errorMsg.includes('403')) {
+          throw new Error('🔐 Acesso negado. Sua chave de API pode ter sido desativada. Gere uma nova em https://aistudio.google.com/apikey e configure em Configurações.');
+        }
+        throw new Error('❌ Chave de API inválida ou sem permissão. Verifique sua chave nas Configurações.');
+      }
+
+      // Erro de modelo não encontrado
+      if (errorMsg.includes('not found') || errorMsg.includes('404')) {
+        throw new Error('⚠️ Modelo não encontrado. A API pode estar temporariamente indisponível.');
+      }
+
+      // Erro de quota/rate limit
+      if (errorMsg.includes('quota') || errorMsg.includes('limit') || errorMsg.includes('429')) {
+        throw new Error('⏱️ Limite de requisições excedido. Tente novamente em alguns minutos.');
+      }
+
+      // Erro de bloqueio por segurança
+      if (errorMsg.includes('safety') || errorMsg.includes('blocked')) {
+        throw new Error('🛡️ A resposta foi bloqueada por filtros de segurança. Tente uma pergunta diferente.');
+      }
+
+      // Erro de rede
+      if (errorMsg.includes('fetch') || errorMsg.includes('network')) {
+        throw new Error('🌐 Erro de conexão. Verifique sua internet e tente novamente.');
+      }
+
+      // Erro genérico com mensagem específica
+      throw new Error(`Erro na API do Gemini: ${error.message}`);
+    }
+
+    // Erro sem mensagem específica
+    throw new Error('❌ Erro desconhecido ao processar sua mensagem. Tente novamente.');
+  }
+}
+
+export function buildSystemPrompt(): string {
+  return `Você é o Assistente Xertica, uma IA desenvolvida para ajudar usuários da plataforma Xertica.ai a gerenciar projetos, analisar dados e otimizar processos.
+
+Características importantes:
+- Você é prestativo, profissional e direto
+- Responda sempre em português brasileiro
+- Seja conciso mas informativo
+- Quando não souber algo específico da plataforma, seja honesto
+- Foque em ajudar o usuário com suas tarefas e dúvidas
+- Mantenha um tom amigável e acessível
+
+A plataforma Xertica.ai oferece:
+- Gerenciamento de projetos e tarefas
+- Análise de dados e métricas
+- Criação de documentos e relatórios
+- Geração de podcasts a partir de conteúdo
+- Sistema de pesquisa integrado
+- Colaboração em equipe
+
+Você está aqui para ajudar os usuários a tirar o máximo proveito dessas funcionalidades.`;
+}

package/vite-env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+// Declaração para variáveis de ambiente
+interface ImportMetaEnv {
+  readonly VITE_GEMINI_API_KEY?: string;
+  readonly VITE_APP_NAME?: string;
+  readonly VITE_APP_VERSION?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/vite.config.ts

@@ -0,0 +1,36 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+import tailwindcss from "@tailwindcss/postcss";
+import autoprefixer from "autoprefixer";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  css: {
+    postcss: {
+      plugins: [tailwindcss, autoprefixer],
+    },
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./"),
+    },
+  },
+  server: {
+    port: 3000,
+    open: true,
+  },
+  build: {
+    outDir: "dist",
+    sourcemap: false,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ["react", "react-dom", "react-router"],
+          ui: ["lucide-react", "sonner"],
+        },
+      },
+    },
+  },
+});