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

This commit is contained in:
2026-06-23 17:14:24 +00:00
parent 3a0771667c
commit d194dbf383
3 changed files with 86 additions and 17 deletions
+40 -10
View File
@@ -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>