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
@@ -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>
 );