Merge pull request #85 from vilpessoa/claude/wonderful-sagan-3tJ90

feat: assistente de IA (Gemini) na toolbar do editor DAX

Author: vilpessoa

.env.example

@@ -0,0 +1,4 @@
+# URL pública do proxy serverless que encapsula a Gemini API.
+# A GEMINI_API_KEY NUNCA deve ser colocada no frontend — ela vive apenas
+# nas variáveis de ambiente do provedor serverless (Vercel/Netlify/Cloudflare).
+VITE_GEMINI_PROXY_URL=https://your-proxy.vercel.app/api/gemini

README.md

@@ -28,6 +28,27 @@ Ele tokeniza o código, monta uma AST por descida recursiva e avalia para produz
 do `RETURN`. Funções de tabela (ALL, FILTER, ADDCOLUMNS, TOPN, RANKX, CONCATENATEX, SUMX, etc.)
 operam sobre tabelas fictícias geradas a partir dos JSONs em `src/data/`.
 
+## Assistente de IA (Gemini)
+
+A toolbar do editor inclui um botão **Sparkles** que aciona o assistente Gemini para
+**Refatorar**, **Indentar**, **Comentar** ou **Corrigir** o código DAX atual.
+
+### Configuração
+
+Por segurança, a `GEMINI_API_KEY` **nunca** é exposta no bundle do frontend.
+O app chama um **proxy serverless** que guarda a chave server-side.
+
+1. Faça deploy do proxy de exemplo em `docs/serverless-proxy-example.ts`
+   (Vercel/Netlify/Cloudflare). Defina no provedor:
+   - `GEMINI_API_KEY=<sua chave>`
+   - `ALLOWED_ORIGIN=https://seu-app...` (opcional)
+2. Copie `.env.example` para `.env.local` e ajuste:
+   ```
+   VITE_GEMINI_PROXY_URL=https://seu-proxy.vercel.app/api/gemini
+   ```
+3. Reinicie `npm run dev`. O prompt do sistema vive em
+   `src/assets/prompts/dax_analyst_prompt.txt` e pode ser editado livremente.
+
 ## Atalhos
 
 - `Ctrl+Enter` — renderizar

api/gemini.ts

@@ -0,0 +1,111 @@
+// Proxy serverless — Vercel detecta automaticamente arquivos em /api
+// Guarda GEMINI_API_KEY nas variáveis de ambiente do Vercel (nunca no Git).
+
+export const config = { runtime: 'edge' };
+
+interface ProxyBody {
+  action: string;
+  code: string;
+  history?: { role: 'user' | 'model'; text: string }[];
+  systemInstruction: string;
+  actionContext: string;
+  model?: string;
+}
+
+export default async function handler(req: Request): Promise<Response> {
+  const origin = req.headers.get('origin') ?? '*';
+  const cors = {
+    'Access-Control-Allow-Origin': origin,
+    'Access-Control-Allow-Methods': 'POST, OPTIONS',
+    'Access-Control-Allow-Headers': 'Content-Type',
+  };
+
+  if (req.method === 'OPTIONS') return new Response(null, { headers: cors });
+  if (req.method !== 'POST') {
+    return new Response(JSON.stringify({ error: 'Method not allowed' }), {
+      status: 405,
+      headers: { ...cors, 'Content-Type': 'application/json' },
+    });
+  }
+
+  const apiKey = process.env.GEMINI_API_KEY;
+  if (!apiKey) {
+    return new Response(JSON.stringify({ error: 'GEMINI_API_KEY não configurada.' }), {
+      status: 401,
+      headers: { ...cors, 'Content-Type': 'application/json' },
+    });
+  }
+
+  let body: ProxyBody;
+  try {
+    body = (await req.json()) as ProxyBody;
+  } catch {
+    return new Response(JSON.stringify({ error: 'JSON inválido.' }), {
+      status: 400,
+      headers: { ...cors, 'Content-Type': 'application/json' },
+    });
+  }
+
+  const model = body.model ?? 'gemini-2.5-flash';
+  const url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;
+
+  const contents = [
+    ...(body.history ?? []).map((h) => ({
+      role: h.role,
+      parts: [{ text: h.text }],
+    })),
+    {
+      role: 'user',
+      parts: [{ text: `${body.actionContext}\n\nCódigo:\n${body.code}` }],
+    },
+  ];
+
+  let upstream: Response;
+  try {
+    upstream = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        systemInstruction: { parts: [{ text: body.systemInstruction }] },
+        contents,
+      }),
+    });
+  } catch {
+    return new Response(JSON.stringify({ error: 'Falha ao conectar à Gemini API.' }), {
+      status: 502,
+      headers: { ...cors, 'Content-Type': 'application/json' },
+    });
+  }
+
+  if (!upstream.ok) {
+    if (upstream.status === 429) {
+      const text = await upstream.text();
+      const scope = /per day|daily/i.test(text) ? 'daily' : 'minute';
+      return new Response(JSON.stringify({ error: 'Rate limited' }), {
+        status: 429,
+        headers: { ...cors, 'Content-Type': 'application/json', 'X-Quota-Scope': scope },
+      });
+    }
+    if (upstream.status === 401 || upstream.status === 403) {
+      return new Response(JSON.stringify({ error: 'Chave inválida.' }), {
+        status: upstream.status,
+        headers: { ...cors, 'Content-Type': 'application/json' },
+      });
+    }
+    return new Response(JSON.stringify({ error: `Gemini API retornou ${upstream.status}` }), {
+      status: 502,
+      headers: { ...cors, 'Content-Type': 'application/json' },
+    });
+  }
+
+  const data = await upstream.json();
+  const text: string =
+    data?.candidates?.[0]?.content?.parts
+      ?.map((p: { text?: string }) => p.text ?? '')
+      .join('') ?? '';
+
+  return new Response(JSON.stringify({ text }), {
+    status: 200,
+    headers: { ...cors, 'Content-Type': 'application/json' },
+  });
+}

docs/serverless-proxy-example.ts

@@ -0,0 +1,101 @@
+// Exemplo de proxy serverless para a Gemini API — pronto para Vercel
+// (`api/gemini.ts`). Adapte para Netlify Functions ou Cloudflare Workers
+// conforme necessário.
+//
+// Defina no provedor (NUNCA no Git):
+//   GEMINI_API_KEY=<sua-chave>
+//   ALLOWED_ORIGIN=https://seu-app.vercel.app   (opcional, default *)
+//
+// O frontend define VITE_GEMINI_PROXY_URL apontando para esta função.
+
+export const config = { runtime: 'edge' };
+
+interface ProxyBody {
+  action: 'refactor' | 'indent' | 'comment' | 'fix';
+  code: string;
+  history?: { role: 'user' | 'model'; text: string }[];
+  systemInstruction: string;
+  actionContext: string;
+  model?: string;
+}
+
+function corsHeaders(origin: string) {
+  return {
+    'Access-Control-Allow-Origin': origin,
+    'Access-Control-Allow-Methods': 'POST, OPTIONS',
+    'Access-Control-Allow-Headers': 'Content-Type',
+  };
+}
+
+export default async function handler(req: Request): Promise<Response> {
+  const allowOrigin = process.env.ALLOWED_ORIGIN ?? '*';
+  const headers = { ...corsHeaders(allowOrigin), 'Content-Type': 'application/json' };
+
+  if (req.method === 'OPTIONS') return new Response(null, { headers });
+  if (req.method !== 'POST') {
+    return new Response(JSON.stringify({ error: 'Method not allowed' }), { status: 405, headers });
+  }
+
+  const apiKey = process.env.GEMINI_API_KEY;
+  if (!apiKey) {
+    return new Response(JSON.stringify({ error: 'GEMINI_API_KEY missing' }), { status: 401, headers });
+  }
+
+  let body: ProxyBody;
+  try {
+    body = (await req.json()) as ProxyBody;
+  } catch {
+    return new Response(JSON.stringify({ error: 'Invalid JSON' }), { status: 400, headers });
+  }
+
+  const model = body.model ?? 'gemini-2.5-flash';
+  const url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;
+
+  const contents = [
+    ...(body.history ?? []).map((h) => ({
+      role: h.role,
+      parts: [{ text: h.text }],
+    })),
+    {
+      role: 'user',
+      parts: [{ text: `${body.actionContext}\n\nCódigo:\n${body.code}` }],
+    },
+  ];
+
+  const upstream = await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      systemInstruction: { parts: [{ text: body.systemInstruction }] },
+      contents,
+    }),
+  });
+
+  if (!upstream.ok) {
+    // Repasse de 429 com classificação minuto vs. diário (heurística simples
+    // baseada na mensagem da API; ajuste conforme necessidade).
+    if (upstream.status === 429) {
+      const text = await upstream.text();
+      const scope = /per day|daily/i.test(text) ? 'daily' : 'minute';
+      return new Response(JSON.stringify({ error: 'Rate limited' }), {
+        status: 429,
+        headers: { ...headers, 'X-Quota-Scope': scope },
+      });
+    }
+    if (upstream.status === 401 || upstream.status === 403) {
+      return new Response(JSON.stringify({ error: 'Auth failed' }), {
+        status: upstream.status,
+        headers,
+      });
+    }
+    return new Response(JSON.stringify({ error: `Upstream ${upstream.status}` }), {
+      status: 502,
+      headers,
+    });
+  }
+
+  const data = await upstream.json();
+  const text = data?.candidates?.[0]?.content?.parts?.map((p: { text?: string }) => p.text ?? '').join('') ?? '';
+
+  return new Response(JSON.stringify({ text }), { status: 200, headers });
+}

src/App.tsx

@@ -317,6 +317,8 @@ export default function App() {
                 onDaxEditorThemeChange={onDaxEditorThemeChange}
                 searchOpen={searchOpen}
                 onToggleSearch={() => setSearchOpen((v) => !v)}
+                code={code}
+                onAiApply={setCode}
               />
               <AnimatePresence>
                 {searchOpen && (

src/assets/prompts/dax_analyst_prompt.txt

@@ -0,0 +1,8 @@
+Você é um analista e engenheiro de BI sênior especialista em otimização de código DAX para Power BI.
+Sua função é receber um trecho de código DAX e aplicar a ação solicitada de forma limpa, elegante e performática.
+
+DIRETRIZES OBRIGATÓRIAS DE RETORNO:
+1. Retorne APENAS o código DAX resultante dentro de um bloco de código markdown padrão. Não adicione saudações, introduções ou explicações textuais fora do código, exceto se solicitado explicitamente pelas regras de sugestão.
+2. Siga as boas práticas de espaçamento e indentação padrão internacional do DAX Formatter.
+3. Se a ação incluir "Comentar", insira comentários curtos em linha usando '//' apenas onde houver alterações ou pontos críticos de lógica.
+4. Mantenha os nomes das variáveis internas originais (ex: _cor_alavancavel, _cor_gargalo) intactos, a menos que uma refatoração estrutural de nomenclatura seja explicitamente mandatória por performance.

src/components/DaxEditorToolbar.tsx

@@ -25,6 +25,7 @@ import {
 } from '@/components/ui/dropdown';
 import * as DM from '@radix-ui/react-dropdown-menu';
 import { ZOOM_MIN, ZOOM_MAX } from '@/components/ZoomControls';
+import { AIAssistantDropdown } from '@/components/ai/AIAssistantDropdown';
 import type { DaxEditorTheme } from '@/lib/storage';
 
 const EDITOR_THEMES: { key: DaxEditorTheme; label: string; dot1: string; dot2: string }[] = [
@@ -48,6 +49,8 @@ interface DaxEditorToolbarProps {
   onDaxEditorThemeChange: (t: DaxEditorTheme) => void;
   searchOpen: boolean;
   onToggleSearch: () => void;
+  code: string;
+  onAiApply: (newCode: string) => void;
 }
 
 function VDivider() {
@@ -104,6 +107,8 @@ export function DaxEditorToolbar({
   onDaxEditorThemeChange,
   searchOpen,
   onToggleSearch,
+  code,
+  onAiApply,
 }: DaxEditorToolbarProps) {
   const clampZoom = (v: number) => Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, v));
 
@@ -151,6 +156,11 @@ export function DaxEditorToolbar({
               Pesquisar ou Substituir
             </TooltipContent>
           </Tooltip>
+
+          <VDivider />
+
+          {/* 6. Assistente IA */}
+          <AIAssistantDropdown code={code} onApply={onAiApply} />
         </div>
 
         {/* Right: Zoom controls and Theme picker */}