feat: add CogIcon for model change and direct boot to document upload

2026-06-23 17:14:24 +00:00
parent 3a0771667c
commit d194dbf383
3 changed files with 86 additions and 17 deletions
@@ -8,7 +8,7 @@ import { FileUpload } from './components/FileUpload';
 import { Loader } from './components/Loader';
 import { ReportDisplay } from './components/ReportDisplay';
 import { PrintableReport } from './components/PrintableReport';
-import { DownloadIcon, EyeIcon } from './components/Icons';
+import { DownloadIcon, EyeIcon, CogIcon } from './components/Icons';
 import { ApiKeySetup } from './components/ApiKeySetup';

 const App: React.FC = () => {
@@ -21,6 +21,8 @@ const App: React.FC = () => {
  const [reportsData, setReportsData] = useState<ReportData[] | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
+  const [showSetup, setShowSetup] = useState<boolean>(false);
+  const [isConfigLoaded, setIsConfigLoaded] = useState<boolean>(false);

  useEffect(() => {
    // 1. Tentar ler do localStorage primeiro
@@ -29,12 +31,17 @@ const App: React.FC = () => {
    const savedModel = localStorage.getItem('model-' + savedProvider);
    const savedEndpoint = localStorage.getItem('ollama-endpoint');
    
+    let hasLocal = false;
    if (savedApiKey || savedEndpoint) {
      setApiKey(savedApiKey || '');
      if (savedProvider) setProvider(savedProvider);
      if (savedModel) setModel(savedModel);
      if (savedEndpoint) setEndpoint(savedEndpoint);
      setHasKey(true);
+      setShowSetup(false);
+      hasLocal = true;
+    } else {
+      setShowSetup(true);
    }

    // 2. Sincronizar com as configurações globais persistidas no servidor (mesmo em outros navegadores)
@@ -47,6 +54,7 @@ const App: React.FC = () => {
          if (config.model) setModel(config.model);
          if (config.endpoint) setEndpoint(config.endpoint);
          setHasKey(true);
+          setShowSetup(false);

          // Sincroniza o localStorage
          localStorage.setItem('ai-provider', config.provider);
@@ -60,9 +68,18 @@ const App: React.FC = () => {
          if (config.endpoint) {
            localStorage.setItem('ollama-endpoint', config.endpoint);
          }
+        } else if (!hasLocal) {
+          setShowSetup(true);
        }
+        setIsConfigLoaded(true);
      })
-      .catch(err => console.warn('Erro ao carregar configurações do servidor:', err));
+      .catch(err => {
+        console.warn('Erro ao carregar configurações do servidor:', err);
+        if (!hasLocal) {
+          setShowSetup(true);
+        }
+        setIsConfigLoaded(true);
+      });
  }, []);

  const handleFileChange = useCallback((selectedFile: File | null) => {
@@ -88,6 +105,7 @@ const App: React.FC = () => {
    localStorage.setItem('ai-provider', newProvider);
    localStorage.setItem('model-' + newProvider, newModel);
    setHasKey(true);
+    setShowSetup(false);

    // Salvar no servidor para persistência multi-navegador
    fetch('/api/config', {
@@ -156,6 +174,7 @@ const App: React.FC = () => {
    setApiKey('');
    localStorage.removeItem('api-key');
    setHasKey(false);
+    setShowSetup(true);
    handleReset();

    // Limpar no servidor
@@ -178,8 +197,12 @@ const App: React.FC = () => {
        <Header onReset={handleReset} onClearKey={handleClearKey} hasKey={hasKey} provider={provider} />

        <main className="container mx-auto p-4 sm:p-6 md:p-8 max-w-7xl">
-        {!hasKey ? (
-          <ApiKeySetup onKeySave={handleKeySave} />
+        {!isConfigLoaded ? (
+          <div className="flex justify-center items-center py-20">
+            <span className="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></span>
+          </div>
+        ) : (!hasKey || showSetup) ? (
+          <ApiKeySetup onKeySave={handleKeySave} onCancel={hasKey ? () => setShowSetup(false) : undefined} />
        ) : !reportsData ? (
          <div className="max-w-2xl mx-auto pt-8">
            <div className="bg-white/70 dark:bg-slate-800/60 backdrop-blur-md border border-white/20 dark:border-slate-700/50 shadow-xl p-6 sm:p-10 rounded-2xl">
@@ -190,9 +213,18 @@ const App: React.FC = () => {
                <p className="text-slate-500 dark:text-slate-400">
                  Carregue seu certificado de qualidade e deixe nossa IA verificar a conformidade.
                </p>
-                <div className="mt-4 inline-flex items-center gap-2 px-3 py-1 bg-slate-100 dark:bg-slate-700 rounded-full text-xs text-slate-600 dark:text-slate-300">
-                  <span className="w-2 h-2 bg-green-500 rounded-full"></span>
-                  {provider.toUpperCase()} • {model}
+                <div className="mt-4 flex items-center justify-center gap-2">
+                  <div className="inline-flex items-center gap-2 px-3 py-1 bg-slate-100 dark:bg-slate-700 rounded-full text-xs text-slate-600 dark:text-slate-300">
+                    <span className="w-2 h-2 bg-green-500 rounded-full"></span>
+                    {provider.toUpperCase()} • {model}
+                  </div>
+                  <button
+                    onClick={() => setShowSetup(true)}
+                    className="p-1 rounded-full text-slate-400 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-slate-100 dark:hover:bg-slate-700/50 transition-colors"
+                    title="Configurar API / Trocar Modelo"
+                  >
+                    <CogIcon className="w-4 h-4" />
+                  </button>
                </div>
              </div>

@@ -1,10 +1,11 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { KeyIcon, SaveIcon, TestTubeIcon, TrashIcon } from './Icons';
+import { KeyIcon, SaveIcon, TestTubeIcon, TrashIcon, XIcon } from './Icons';
 import { PROVIDERS, type AIProvider } from '../types/providers';
 import { testApiKey, type ModelInfo } from '../services/apiTestService';

 interface ApiKeySetupProps {
  onKeySave: (key: string, provider: AIProvider, model: string, endpoint?: string) => void;
+  onCancel?: () => void;
 }

 const isValidApiKey = (key: string): boolean => {
@@ -12,7 +13,7 @@ const isValidApiKey = (key: string): boolean => {
  return trimmedKey.length > 10 && /^[A-Za-z0-9_-]+$/.test(trimmedKey);
 };

-export const ApiKeySetup: React.FC<ApiKeySetupProps> = ({ onKeySave }) => {
+export const ApiKeySetup: React.FC<ApiKeySetupProps> = ({ onKeySave, onCancel }) => {
  const [localApiKey, setLocalApiKey] = useState('');
  const [endpoint, setEndpoint] = useState('');
  const [error, setError] = useState<string | null>(null);
@@ -168,6 +169,15 @@ export const ApiKeySetup: React.FC<ApiKeySetupProps> = ({ onKeySave }) => {
        <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

        <div className="relative z-10">
+          {onCancel && (
+            <button
+              onClick={onCancel}
+              className="absolute top-0 right-0 p-1 rounded-full text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700/50 transition-colors"
+              title="Fechar"
+            >
+              <XIcon className="w-5 h-5" />
+            </button>
+          )}
          <h2 className="text-2xl font-display font-bold text-center mb-3 text-slate-800 dark:text-white">
            Configurar API
          </h2>
@@ -371,14 +381,34 @@ export const ApiKeySetup: React.FC<ApiKeySetupProps> = ({ onKeySave }) => {
              )}
            </div>

-            <button
-              onClick={handleSave}
-              disabled={provider === 'ollama' ? !endpoint && testStatus !== 'success' : (!localApiKey.trim() || isValid === false)}
-              className="w-full flex justify-center items-center gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-3.5 px-4 rounded-xl shadow-lg hover:shadow-blue-500/30 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 transform active:scale-[0.98]"
-            >
-              <SaveIcon className="h-5 w-5" />
-              <span>{provider === 'ollama' ? 'Conectar e Continuar' : 'Salvar e Continuar'}</span>
-            </button>
+            {onCancel ? (
+              <div className="flex gap-3">
+                <button
+                  type="button"
+                  onClick={onCancel}
+                  className="w-1/3 flex justify-center items-center bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 font-bold py-3.5 px-4 rounded-xl transition-all duration-300 transform active:scale-[0.98]"
+                >
+                  Cancelar
+                </button>
+                <button
+                  onClick={handleSave}
+                  disabled={provider === 'ollama' ? !endpoint && testStatus !== 'success' : (!localApiKey.trim() || isValid === false)}
+                  className="w-2/3 flex justify-center items-center gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-3.5 px-4 rounded-xl shadow-lg hover:shadow-blue-500/30 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 transform active:scale-[0.98]"
+                >
+                  <SaveIcon className="h-5 w-5" />
+                  <span>Salvar</span>
+                </button>
+              </div>
+            ) : (
+              <button
+                onClick={handleSave}
+                disabled={provider === 'ollama' ? !endpoint && testStatus !== 'success' : (!localApiKey.trim() || isValid === false)}
+                className="w-full flex justify-center items-center gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-3.5 px-4 rounded-xl shadow-lg hover:shadow-blue-500/30 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 transform active:scale-[0.98]"
+              >
+                <SaveIcon className="h-5 w-5" />
+                <span>{provider === 'ollama' ? 'Conectar e Continuar' : 'Salvar e Continuar'}</span>
+              </button>
+            )}
          </div>
        </div>
      </div>
@@ -100,4 +100,11 @@ export const TrashIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
    </svg>
+);
+
+export const CogIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.43l-1.003.828c-.293.241-.438.613-.43.992a7.723 7.723 0 010 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.43l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.991l-1.004-.827a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.645-.869l.214-1.28z" />
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
 );