1865 lines
83 KiB
TypeScript
1865 lines
83 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, lazy, Suspense } from 'react';
|
|
import { useState, useEffect, lazy, Suspense } from 'react';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Switch } from '@/components/ui/switch';
|
|
import { Slider } from '@/components/ui/slider';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import { useSettingsStore } from '@/store/settings-store';
|
|
import { DomainTagsInput } from '@/components/settings/domain-tags-input';
|
|
import { SearxngOnboarding } from '@/components/settings/searxng-onboarding';
|
|
import { SearxngInstallWizard } from '@/components/settings/searxng-install-wizard';
|
|
import { DockerSettingsPanel } from '@/components/settings/docker-settings-panel';
|
|
const HardwareDashboard = lazy(() => import('@/components/settings/HardwareDashboard').then(m => ({ default: m.HardwareDashboard })));
|
|
import { RuntimeSettingsPanel } from '@/components/settings/runtime-settings-panel';
|
|
import { invoke } from '@tauri-apps/api/core';
|
|
import { listen } from '@tauri-apps/api/event';
|
|
import { CheckCircle2, XCircle, Loader2, Download, Trash2, Copy, ExternalLink, Plus, X, BookOpen, GraduationCap, Newspaper, Code, DollarSign, Edit, RotateCcw, Terminal, Power, ArrowLeft, Sparkles, RefreshCw, Settings, Square } from 'lucide-react';
|
|
import { useToast } from '@/hooks/use-toast';
|
|
import { useRouter } from 'next/navigation';
|
|
import { SourcesConfig, SourceCategory } from '@/lib/types';
|
|
import { TitleBar } from '@/components/titlebar';
|
|
import { useAppUpdater } from '@/hooks/use-app-updater';
|
|
import { getVersion } from '@tauri-apps/api/app';
|
|
import { useAppUpdater } from '@/hooks/use-app-updater';
|
|
import { getVersion } from '@tauri-apps/api/app';
|
|
|
|
interface Model {
|
|
name: string;
|
|
modified_at: string;
|
|
size: number;
|
|
}
|
|
|
|
export default function SettingsPage() {
|
|
const settings = useSettingsStore();
|
|
const { toast } = useToast();
|
|
const router = useRouter();
|
|
const [isCheckingConnection, setIsCheckingConnection] = useState(false);
|
|
const [showSearxngOnboarding, setShowSearxngOnboarding] = useState(false);
|
|
const [showSearxngWizard, setShowSearxngWizard] = useState(false);
|
|
const [connectionStatus, setConnectionStatus] = useState<'idle' | 'success' | 'error'>('idle');
|
|
const [availableModels, setAvailableModels] = useState<Model[]>([]);
|
|
const [isLoadingModels, setIsLoadingModels] = useState(false);
|
|
const [storagePath, setStoragePath] = useState<string>('');
|
|
const [showClearDialog, setShowClearDialog] = useState(false);
|
|
const [isExporting, setIsExporting] = useState(false);
|
|
const [isClearing, setIsClearing] = useState(false);
|
|
const [editingCategory, setEditingCategory] = useState<SourceCategory | null>(null);
|
|
const [isSavingSources, setIsSavingSources] = useState(false);
|
|
const [recentLogs, setRecentLogs] = useState<string[]>([]);
|
|
const [isLoadingLogs, setIsLoadingLogs] = useState(false);
|
|
const [appVersion, setAppVersion] = useState<string>('');
|
|
const [activeTab, setActiveTab] = useState<string>('overview');
|
|
|
|
const updater = useAppUpdater();
|
|
const [appVersion, setAppVersion] = useState<string>('');
|
|
const [activeTab, setActiveTab] = useState<string>('overview');
|
|
|
|
const updater = useAppUpdater();
|
|
|
|
// Load models, storage path, and sources config on mount
|
|
useEffect(() => {
|
|
loadModels();
|
|
loadStoragePath();
|
|
settings.fetchSources();
|
|
|
|
// Load app version
|
|
getVersion()
|
|
.then(setAppVersion)
|
|
.catch(() => setAppVersion('0.1.0'));
|
|
|
|
// Load app version
|
|
getVersion()
|
|
.then(setAppVersion)
|
|
.catch(() => setAppVersion('0.1.0'));
|
|
}, [settings.ollamaUrl]);
|
|
|
|
// Load logs periodically
|
|
useEffect(() => {
|
|
const loadLogs = async () => {
|
|
try {
|
|
setIsLoadingLogs(true);
|
|
const logs = await invoke<string[]>('get_recent_logs', { lines: 100 });
|
|
setRecentLogs(logs);
|
|
} catch (error) {
|
|
console.error('Failed to load logs:', error);
|
|
} finally {
|
|
setIsLoadingLogs(false);
|
|
}
|
|
};
|
|
|
|
loadLogs();
|
|
const logsInterval = setInterval(loadLogs, 5000); // Refresh logs every 5 seconds
|
|
|
|
// Periodic model check (fallback)
|
|
const modelsInterval = setInterval(loadModels, 30000); // Refresh models every 30 seconds
|
|
|
|
return () => {
|
|
clearInterval(logsInterval);
|
|
clearInterval(modelsInterval);
|
|
};
|
|
}, []);
|
|
|
|
// Listen for model download completion
|
|
useEffect(() => {
|
|
let unlisten: (() => void) | undefined;
|
|
|
|
const setupListener = async () => {
|
|
unlisten = await listen<string>('download-progress', (event) => {
|
|
try {
|
|
const payload = JSON.parse(event.payload);
|
|
if (payload.status === 'success') {
|
|
loadModels();
|
|
toast({
|
|
title: 'Novo modelo detectado',
|
|
description: 'A lista de modelos foi atualizada.',
|
|
});
|
|
}
|
|
} catch (e) {
|
|
console.error('Error parsing download progress:', e);
|
|
}
|
|
});
|
|
};
|
|
|
|
setupListener();
|
|
|
|
return () => {
|
|
if (unlisten) unlisten();
|
|
};
|
|
}, []);
|
|
|
|
const loadModels = async () => {
|
|
setIsLoadingModels(true);
|
|
try {
|
|
const models = await invoke<Array<{ name: string; size?: number; modified_at?: string; digest?: string }>>('get_ollama_tags');
|
|
// Mapear para o formato esperado pela interface Model
|
|
const mappedModels: Model[] = (models || []).map(model => ({
|
|
name: model.name,
|
|
size: model.size ?? 0,
|
|
modified_at: model.modified_at ?? '',
|
|
}));
|
|
setAvailableModels(mappedModels);
|
|
} catch (error) {
|
|
console.error('Failed to load models:', error);
|
|
setAvailableModels([]);
|
|
} finally {
|
|
setIsLoadingModels(false);
|
|
}
|
|
};
|
|
|
|
const loadStoragePath = async () => {
|
|
try {
|
|
const path = await invoke<string>('get_app_data_dir');
|
|
setStoragePath(path);
|
|
} catch (error) {
|
|
console.error('Failed to load storage path:', error);
|
|
setStoragePath('N/A');
|
|
}
|
|
};
|
|
|
|
const checkConnection = async () => {
|
|
setIsCheckingConnection(true);
|
|
setConnectionStatus('idle');
|
|
|
|
try {
|
|
// Verificar conexão tentando listar modelos
|
|
await invoke('get_ollama_tags');
|
|
setConnectionStatus('success');
|
|
toast({
|
|
title: 'Conexão bem-sucedida',
|
|
description: 'Ollama está acessível neste endpoint.',
|
|
});
|
|
// Reload models after successful connection
|
|
loadModels();
|
|
} catch (error) {
|
|
setConnectionStatus('error');
|
|
toast({
|
|
title: 'Erro de conexão',
|
|
description: error instanceof Error ? error.message : 'Falha ao conectar',
|
|
variant: 'destructive',
|
|
});
|
|
} finally {
|
|
setIsCheckingConnection(false);
|
|
}
|
|
};
|
|
|
|
const handleExportChats = async () => {
|
|
setIsExporting(true);
|
|
try {
|
|
await invoke('export_chat_sessions');
|
|
toast({
|
|
title: 'Exportação concluída',
|
|
description: 'Todos os chats foram exportados com sucesso.',
|
|
});
|
|
} catch (error) {
|
|
console.error('Failed to export chats:', error);
|
|
toast({
|
|
title: 'Erro na exportação',
|
|
description: error instanceof Error ? error.message : 'Falha ao exportar',
|
|
variant: 'destructive',
|
|
});
|
|
} finally {
|
|
setIsExporting(false);
|
|
}
|
|
};
|
|
|
|
const handleExportAllData = async () => {
|
|
setIsExporting(true);
|
|
try {
|
|
const zipPath = await invoke<string>('export_all_data');
|
|
toast({
|
|
title: 'Backup completo exportado',
|
|
description: `Arquivo salvo em: ${zipPath}`,
|
|
});
|
|
} catch (error) {
|
|
console.error('Failed to export all data:', error);
|
|
toast({
|
|
title: 'Erro na exportação',
|
|
description: error instanceof Error ? error.message : 'Falha ao exportar',
|
|
variant: 'destructive',
|
|
});
|
|
} finally {
|
|
setIsExporting(false);
|
|
}
|
|
};
|
|
|
|
const handleClearHistory = async () => {
|
|
setIsClearing(true);
|
|
try {
|
|
await invoke('clear_chat_history');
|
|
toast({
|
|
title: 'Histórico apagado',
|
|
description: 'Todas as conversas foram removidas.',
|
|
});
|
|
setShowClearDialog(false);
|
|
} catch (error) {
|
|
console.error('Failed to clear history:', error);
|
|
toast({
|
|
title: 'Erro ao apagar',
|
|
description: error instanceof Error ? error.message : 'Falha ao apagar histórico',
|
|
variant: 'destructive',
|
|
});
|
|
} finally {
|
|
setIsClearing(false);
|
|
}
|
|
};
|
|
|
|
const copyStoragePath = async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(storagePath);
|
|
toast({
|
|
title: 'Caminho copiado',
|
|
description: 'O caminho foi copiado para a área de transferência.',
|
|
});
|
|
} catch (error) {
|
|
console.error('Failed to copy path:', error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="h-screen w-full bg-background overflow-hidden flex flex-col">
|
|
<TitleBar />
|
|
<div className="flex-1 overflow-y-auto pt-8">
|
|
<div className="container mx-auto py-4 sm:py-6 md:py-8 px-3 sm:px-4 md:px-6 max-w-4xl w-full overflow-x-hidden">
|
|
<div className="mb-4 sm:mb-6">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="flex-1 min-w-0">
|
|
<h1 className="text-2xl sm:text-3xl font-bold truncate">Configurações</h1>
|
|
<p className="text-muted-foreground mt-1 sm:mt-2 text-sm sm:text-base">
|
|
Gerencie as preferências do OllaHub
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => router.push('/chat')}
|
|
className="rounded-lg shrink-0"
|
|
title="Fechar configurações"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<Tabs defaultValue="overview" value={activeTab} onValueChange={setActiveTab} className="space-y-4 sm:space-y-6">
|
|
<TabsList className="grid w-full grid-cols-2 sm:grid-cols-3 md:grid-cols-7 gap-1 sm:gap-2 h-auto">
|
|
<TabsTrigger value="overview" className="text-xs sm:text-sm px-2 sm:px-3 py-1.5 sm:py-2 truncate">
|
|
Visão Geral
|
|
</TabsTrigger>
|
|
<TabsTrigger value="general" className="text-xs sm:text-sm px-2 sm:px-3 py-1.5 sm:py-2 truncate">
|
|
General
|
|
</TabsTrigger>
|
|
<TabsTrigger value="web" className="text-xs sm:text-sm px-2 sm:px-3 py-1.5 sm:py-2 truncate">
|
|
Web Search
|
|
</TabsTrigger>
|
|
<TabsTrigger value="sources" className="text-xs sm:text-sm px-2 sm:px-3 py-1.5 sm:py-2 truncate">
|
|
Sources
|
|
</TabsTrigger>
|
|
<TabsTrigger value="searxng" className="text-xs sm:text-sm px-2 sm:px-3 py-1.5 sm:py-2 truncate">
|
|
SearXNG
|
|
</TabsTrigger>
|
|
<TabsTrigger value="tasks" className="text-xs sm:text-sm px-2 sm:px-3 py-1.5 sm:py-2 truncate">
|
|
Tasks
|
|
</TabsTrigger>
|
|
<TabsTrigger value="system" className="text-xs sm:text-sm px-2 sm:px-3 py-1.5 sm:py-2 truncate">
|
|
System
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* Tab: Visão Geral (Hardware Dashboard) */}
|
|
<TabsContent value="overview" className="space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Dashboard de Hardware</CardTitle>
|
|
<CardDescription>
|
|
Monitoramento em tempo real do sistema (atualizado a cada 1 segundo)
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{activeTab === 'overview' && (
|
|
<Suspense fallback={
|
|
<div className="space-y-4">
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<Card key={i}>
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="h-4 w-16 bg-muted animate-pulse rounded" />
|
|
<div className="h-5 w-12 bg-muted animate-pulse rounded" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2">
|
|
<div className="h-2 w-full bg-muted animate-pulse rounded" />
|
|
<div className="h-3 w-24 bg-muted animate-pulse rounded" />
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
}>
|
|
<HardwareDashboard />
|
|
</Suspense>
|
|
)}
|
|
{activeTab === 'overview' && (
|
|
<Suspense fallback={
|
|
<div className="space-y-4">
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<Card key={i}>
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="h-4 w-16 bg-muted animate-pulse rounded" />
|
|
<div className="h-5 w-12 bg-muted animate-pulse rounded" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2">
|
|
<div className="h-2 w-full bg-muted animate-pulse rounded" />
|
|
<div className="h-3 w-24 bg-muted animate-pulse rounded" />
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
}>
|
|
<HardwareDashboard />
|
|
</Suspense>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* Tab: General */}
|
|
<TabsContent value="general" className="space-y-6">
|
|
<RuntimeSettingsPanel />
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Conexão Ollama</CardTitle>
|
|
<CardDescription>
|
|
Configure o endpoint do Ollama local
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="ollama-url">Ollama Endpoint</Label>
|
|
<div className="flex flex-col sm:flex-row gap-2">
|
|
<Input
|
|
id="ollama-url"
|
|
value={settings.ollamaUrl}
|
|
onChange={(e) => settings.setOllamaUrl(e.target.value)}
|
|
placeholder="http://localhost:11434"
|
|
className="flex-1 min-w-0"
|
|
/>
|
|
<Button
|
|
onClick={checkConnection}
|
|
disabled={isCheckingConnection}
|
|
variant="outline"
|
|
className="shrink-0"
|
|
>
|
|
{isCheckingConnection ? (
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
) : connectionStatus === 'success' ? (
|
|
<CheckCircle2 className="w-4 h-4 text-green-500" />
|
|
) : connectionStatus === 'error' ? (
|
|
<XCircle className="w-4 h-4 text-red-500" />
|
|
) : (
|
|
'Verificar'
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label htmlFor="model-select">Modelo Padrão</Label>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6"
|
|
onClick={loadModels}
|
|
disabled={isLoadingModels}
|
|
title="Atualizar lista de modelos"
|
|
>
|
|
<RefreshCw className={`h-4 w-4 ${isLoadingModels ? 'animate-spin' : ''}`} />
|
|
</Button>
|
|
</div>
|
|
{isLoadingModels ? (
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
Carregando modelos...
|
|
</div>
|
|
) : availableModels.length > 0 ? (
|
|
<TooltipProvider>
|
|
<Select
|
|
value={settings.selectedModel}
|
|
onValueChange={settings.setSelectedModel}
|
|
>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<SelectTrigger id="model-select" className="min-w-0 max-w-full">
|
|
<SelectValue placeholder="Selecione um modelo..." className="truncate" />
|
|
</SelectTrigger>
|
|
</TooltipTrigger>
|
|
{settings.selectedModel && (
|
|
<TooltipContent side="top" className="max-w-[70vw] break-words">
|
|
<p className="text-sm">{settings.selectedModel}</p>
|
|
</TooltipContent>
|
|
)}
|
|
</Tooltip>
|
|
<SelectContent className="max-w-[90vw]">
|
|
{availableModels.map((model) => (
|
|
<Tooltip key={model.name}>
|
|
<TooltipTrigger asChild>
|
|
<SelectItem value={model.name} className="min-w-0">
|
|
<span className="truncate block" style={{ maxWidth: '70vw' }}>
|
|
{model.name}
|
|
</span>
|
|
</SelectItem>
|
|
</TooltipTrigger>
|
|
{model.name.length > 40 && (
|
|
<TooltipContent side="right" className="max-w-[70vw] break-words">
|
|
<p className="text-sm">{model.name}</p>
|
|
</TooltipContent>
|
|
)}
|
|
</Tooltip>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</TooltipProvider>
|
|
) : (
|
|
<Input
|
|
id="model-input"
|
|
value={settings.selectedModel}
|
|
onChange={(e) => settings.setSelectedModel(e.target.value)}
|
|
placeholder="Digite o nome do modelo..."
|
|
/>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>System Prompt</CardTitle>
|
|
<CardDescription>
|
|
Defina a personalidade e comportamento padrão da IA
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Textarea
|
|
value={settings.systemPrompt}
|
|
onChange={(e) => settings.setSystemPrompt(e.target.value)}
|
|
className="min-h-[300px] font-mono text-sm"
|
|
placeholder="Você é um assistente útil..."
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Context Window</CardTitle>
|
|
<CardDescription>
|
|
Tamanho máximo do contexto (tokens)
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span>2048</span>
|
|
<span className="font-medium">{settings.contextWindow.toLocaleString()}</span>
|
|
<span>32768</span>
|
|
</div>
|
|
<Slider
|
|
value={[settings.contextWindow]}
|
|
onValueChange={([value]) => settings.setContextWindow(value)}
|
|
min={2048}
|
|
max={32768}
|
|
step={512}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Inicialização Automática</CardTitle>
|
|
<CardDescription>
|
|
Iniciar o OllaHub automaticamente ao iniciar o sistema
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-0">
|
|
<div className="space-y-0.5 flex-1 min-w-0">
|
|
<Label htmlFor="autostart">Iniciar com o Sistema</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
O aplicativo será iniciado automaticamente ao fazer login
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
id="autostart"
|
|
checked={settings.autoStart}
|
|
onCheckedChange={settings.toggleAutoStart}
|
|
className="shrink-0"
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* Tab: Web Search */}
|
|
<TabsContent value="web" className="space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Web Search</CardTitle>
|
|
<CardDescription>
|
|
Configure o sistema de busca e scraping na web
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-0.5">
|
|
<Label htmlFor="web-search-enabled">Ativar Web Search</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
Busca automática na web antes de responder
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
id="web-search-enabled"
|
|
checked={settings.webSearch.enabled}
|
|
onCheckedChange={settings.setWebSearchEnabled}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="max-results">Máximo de Resultados</Label>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2 sm:gap-3">
|
|
<Input
|
|
id="max-results"
|
|
type="number"
|
|
value={settings.webSearch.maxResults}
|
|
onChange={(e) => {
|
|
const v = parseInt(e.target.value || '0', 10);
|
|
const clamped = Math.min(100, Math.max(1, isNaN(v) ? 1 : v));
|
|
settings.setWebSearchMaxResults(clamped);
|
|
}}
|
|
className="w-20 sm:w-24 shrink-0"
|
|
min={1}
|
|
max={100}
|
|
disabled={!settings.webSearch.enabled}
|
|
/>
|
|
<div className="flex-1 min-w-0">
|
|
<Slider
|
|
value={[settings.webSearch.maxResults]}
|
|
onValueChange={([value]) => settings.setWebSearchMaxResults(value)}
|
|
min={1}
|
|
max={100}
|
|
step={1}
|
|
disabled={!settings.webSearch.enabled}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-between text-xs text-muted-foreground">
|
|
<span>1</span>
|
|
<span>100</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="timeout">Scraper Timeout (segundos)</Label>
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span>10s</span>
|
|
<span className="font-medium">{settings.webSearch.timeout / 1000}s</span>
|
|
<span>60s</span>
|
|
</div>
|
|
<Slider
|
|
value={[settings.webSearch.timeout / 1000]}
|
|
onValueChange={([value]) => settings.setWebSearchTimeout(value * 1000)}
|
|
min={10}
|
|
max={60}
|
|
step={5}
|
|
disabled={!settings.webSearch.enabled}
|
|
/>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
Tempo máximo para carregar cada página. Valores maiores podem resolver timeouts, mas aumentam o tempo total de busca.
|
|
</p>
|
|
</div>
|
|
|
|
<DomainTagsInput
|
|
domains={settings.webSearch.excludedDomains}
|
|
onAdd={settings.addExcludedDomain}
|
|
onRemove={settings.removeExcludedDomain}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Card: Search Engines Configuration */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Motores de Busca</CardTitle>
|
|
<CardDescription>
|
|
Configure o comportamento da busca web
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-0.5">
|
|
<Label htmlFor="semantic-expansion">Expansão Semântica de Queries</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
Adiciona sinônimos e variantes às queries para melhorar resultados
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
id="semantic-expansion"
|
|
checked={settings.webSearch.enableSemanticExpansion}
|
|
onCheckedChange={settings.setWebSearchSemanticExpansion}
|
|
disabled={!settings.webSearch.enabled}
|
|
/>
|
|
</div>
|
|
|
|
{settings.webSearch.enableSemanticExpansion && (
|
|
<div className="space-y-2">
|
|
<Label htmlFor="semantic-language">Idioma para Expansão Semântica</Label>
|
|
<Select
|
|
value={settings.webSearch.semanticExpansionLanguage}
|
|
onValueChange={settings.setWebSearchSemanticExpansionLanguage}
|
|
disabled={!settings.webSearch.enabled}
|
|
>
|
|
<SelectTrigger id="semantic-language">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="pt-BR">Português (Brasil)</SelectItem>
|
|
<SelectItem value="en">English</SelectItem>
|
|
<SelectItem value="es">Español</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<p className="text-xs text-muted-foreground">
|
|
Idioma usado para identificar stopwords e sinônimos durante a expansão semântica.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Card: SearXNG Self-Hosted */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>SearXNG Self-Hosted</CardTitle>
|
|
<CardDescription>
|
|
Busca ilimitada e privada via SearXNG self-hosted (opcional)
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-0.5 flex-1">
|
|
<Label htmlFor="searxng-enabled">Ativar SearXNG Self-Hosted</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
Use SearXNG como fonte de busca adicional (requer Docker)
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
id="searxng-enabled"
|
|
checked={settings.webSearch.searxng?.enabled ?? false}
|
|
onCheckedChange={(checked) => {
|
|
settings.setSearxngEnabled(checked);
|
|
if (checked && (settings.webSearch.searxng?.status ?? 'unknown') === 'unknown') {
|
|
// Show onboarding on first enable
|
|
setShowSearxngOnboarding(true);
|
|
}
|
|
}}
|
|
disabled={!settings.webSearch.enabled}
|
|
/>
|
|
</div>
|
|
|
|
{(settings.webSearch.searxng?.enabled ?? false) && (
|
|
<>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label>Status</Label>
|
|
<div className="flex items-center gap-2">
|
|
{(settings.webSearch.searxng?.status ?? 'unknown') === 'checking' && (
|
|
<>
|
|
<Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
|
|
<span className="text-xs text-muted-foreground">Verificando...</span>
|
|
</>
|
|
)}
|
|
{(settings.webSearch.searxng?.status ?? 'unknown') === 'available' && (
|
|
<>
|
|
<CheckCircle2 className="w-4 h-4 text-green-500" />
|
|
<Badge variant="outline" className="text-green-600 border-green-500">
|
|
Disponível
|
|
</Badge>
|
|
</>
|
|
)}
|
|
{(settings.webSearch.searxng?.status ?? 'unknown') === 'unavailable' && (
|
|
<>
|
|
<XCircle className="w-4 h-4 text-red-500" />
|
|
<Badge variant="outline" className="text-red-600 border-red-500">
|
|
Indisponível
|
|
</Badge>
|
|
</>
|
|
)}
|
|
{(settings.webSearch.searxng?.status ?? 'unknown') === 'unknown' && (
|
|
<Badge variant="outline">Não verificado</Badge>
|
|
)}
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={async () => {
|
|
await settings.checkSearxngStatus();
|
|
}}
|
|
disabled={(settings.webSearch.searxng?.status ?? 'unknown') === 'checking'}
|
|
>
|
|
<RefreshCw className="w-3 h-3 mr-1" />
|
|
Verificar
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="searxng-url">URL do SearXNG</Label>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
id="searxng-url"
|
|
value={settings.webSearch.searxng?.url ?? 'http://localhost:8080'}
|
|
onChange={(e) => settings.setSearxngUrl(e.target.value)}
|
|
placeholder="http://localhost:8080"
|
|
disabled={(settings.webSearch.searxng?.status ?? 'unknown') === 'checking'}
|
|
/>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
URL completa onde o SearXNG está acessível
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex gap-2 pt-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => {
|
|
if ((settings.webSearch.searxng?.status ?? 'unknown') === 'unknown') {
|
|
setShowSearxngOnboarding(true);
|
|
} else {
|
|
setShowSearxngWizard(true);
|
|
}
|
|
}}
|
|
>
|
|
<Settings className="w-4 h-4 mr-2" />
|
|
Configurar
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={async () => {
|
|
try {
|
|
const isRunning = (settings.webSearch.searxng?.status ?? 'unknown') === 'available';
|
|
if (isRunning) {
|
|
await invoke('stop_searxng');
|
|
toast({
|
|
title: 'SearXNG parado',
|
|
description: 'Container foi parado com sucesso',
|
|
});
|
|
await settings.checkSearxngStatus();
|
|
} else {
|
|
await invoke('start_searxng');
|
|
toast({
|
|
title: 'SearXNG iniciado',
|
|
description: 'Container foi iniciado com sucesso',
|
|
});
|
|
await settings.checkSearxngStatus();
|
|
}
|
|
} catch (error) {
|
|
toast({
|
|
title: 'Erro',
|
|
description: error instanceof Error ? error.message : 'Falha ao gerenciar container',
|
|
variant: 'destructive',
|
|
});
|
|
}
|
|
}}
|
|
>
|
|
{(settings.webSearch.searxng?.status ?? 'unknown') === 'available' ? (
|
|
<>
|
|
<Square className="w-4 h-4 mr-2" />
|
|
Parar
|
|
</>
|
|
) : (
|
|
<>
|
|
<Power className="w-4 h-4 mr-2" />
|
|
Iniciar
|
|
</>
|
|
)}
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
window.open('https://docs.searxng.org/', '_blank');
|
|
}}
|
|
>
|
|
<ExternalLink className="w-4 h-4 mr-2" />
|
|
Saiba Mais
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* Tab: Sources & Knowledge */}
|
|
<TabsContent value="sources" className="space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle>Fontes de Conhecimento</CardTitle>
|
|
<CardDescription>
|
|
Configure categorias de busca salvas no sources.json (compartilhável)
|
|
</CardDescription>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={async () => {
|
|
try {
|
|
await settings.fetchSources();
|
|
toast({
|
|
title: 'Configuração recarregada',
|
|
description: 'Fontes atualizadas do arquivo sources.json',
|
|
});
|
|
} catch (error) {
|
|
toast({
|
|
title: 'Erro ao recarregar',
|
|
description: error instanceof Error ? error.message : 'Falha ao recarregar',
|
|
variant: 'destructive',
|
|
});
|
|
}
|
|
}}
|
|
>
|
|
<RotateCcw className="w-4 h-4 mr-2" />
|
|
Recarregar
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
{settings.sourcesConfig ? (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<Label>Categorias de Busca</Label>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={async () => {
|
|
if (confirm('Mesclar categorias padrão curadas com sua configuração (sem duplicatas)?')) {
|
|
try {
|
|
const curated: SourcesConfig = {
|
|
version: 1,
|
|
last_updated: new Date().toISOString(),
|
|
categories: [
|
|
{
|
|
id: 'academico',
|
|
name: 'Acadêmico',
|
|
base_sites: [
|
|
'scholar.google.com', 'arxiv.org', 'pubmed.ncbi.nlm.nih.gov', 'ieee.org', 'acm.org',
|
|
'sciencedirect.com', 'springer.com', 'jstor.org', 'researchgate.net', 'plos.org',
|
|
'nature.com', 'sciencemag.org', 'mit.edu', 'phys.org', 'semanticscholar.org',
|
|
'core.ac.uk', 'paperswithcode.com', 'base-search.net', 'doaj.org', 'worldscientific.com'
|
|
],
|
|
enabled: true,
|
|
},
|
|
{
|
|
id: 'tech',
|
|
name: 'Tech',
|
|
base_sites: [
|
|
'stackoverflow.com', 'github.com', 'reddit.com/r/programming', 'dev.to', 'hackernoon.com',
|
|
'tabnews.com.br', 'lobste.rs', 'news.ycombinator.com', 'hashnode.com', 'codesandbox.io',
|
|
'developer.mozilla.org', 'web.dev', 'smashingmagazine.com', 'martinfowler.com', 'infoq.com',
|
|
'dzone.com', 'freecodecamp.org', 'digitalocean.com', 'realpython.com', 'css-tricks.com'
|
|
],
|
|
enabled: true,
|
|
},
|
|
{
|
|
id: 'news',
|
|
name: 'News',
|
|
base_sites: [
|
|
'theverge.com', 'techcrunch.com', 'arstechnica.com', 'engadget.com', 'wired.com',
|
|
'venturebeat.com', 'cnet.com', 'mashable.com', 'gizmodo.com', 'zdnet.com',
|
|
'tomshardware.com', 'anandtech.com', 'bleepingcomputer.com', 'theregister.com', '9to5mac.com',
|
|
'androidauthority.com', 'techradar.com', 'fastcompany.com', 'g1.globo.com', 'techtudo.com.br'
|
|
],
|
|
enabled: true,
|
|
},
|
|
{
|
|
id: 'financeiro',
|
|
name: 'Financeiro',
|
|
base_sites: [
|
|
'bloomberg.com', 'reuters.com', 'wsj.com', 'ft.com', 'cnbc.com',
|
|
'marketwatch.com', 'economist.com', 'forbes.com', 'investopedia.com', 'seekingalpha.com',
|
|
'infomoney.com.br', 'valor.globo.com', 'exame.com', 'braziljournal.com', 'coindesk.com',
|
|
'cointelegraph.com', 'moneytimes.com.br', 'suno.com.br', 'b3.com.br', 'imf.org'
|
|
],
|
|
enabled: true,
|
|
},
|
|
],
|
|
};
|
|
if (!settings.sourcesConfig) {
|
|
await settings.saveSources(curated);
|
|
} else {
|
|
const merged: SourcesConfig = {
|
|
...settings.sourcesConfig,
|
|
categories: settings.sourcesConfig.categories.map((existing) => {
|
|
const cur = curated.categories.find(c => c.id === existing.id);
|
|
if (!cur) return existing;
|
|
const set = new Set<string>([...existing.base_sites, ...cur.base_sites].map(s => s.toLowerCase()));
|
|
return { ...existing, base_sites: Array.from(set) } as any;
|
|
}),
|
|
last_updated: new Date().toISOString(),
|
|
};
|
|
await settings.saveSources(merged);
|
|
}
|
|
toast({
|
|
title: 'Fontes mescladas',
|
|
description: 'Categorias curadas foram mescladas sem duplicatas',
|
|
});
|
|
} catch (error) {
|
|
toast({
|
|
title: 'Erro ao mesclar',
|
|
description: error instanceof Error ? error.message : 'Falha ao mesclar categorias',
|
|
variant: 'destructive',
|
|
});
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
<RotateCcw className="w-4 h-4 mr-2" />
|
|
Mesclar Padrões Curados
|
|
</Button>
|
|
</div>
|
|
<div className="grid gap-4">
|
|
{settings.sourcesConfig.categories.map((category) => {
|
|
const iconMap: Record<string, React.ReactNode> = {
|
|
academico: <GraduationCap className="w-4 h-4" />,
|
|
news: <Newspaper className="w-4 h-4" />,
|
|
tech: <Code className="w-4 h-4" />,
|
|
financeiro: <DollarSign className="w-4 h-4" />,
|
|
};
|
|
|
|
return (
|
|
<Card key={category.id} className={category.enabled ? 'border-primary' : ''}>
|
|
<CardContent className="pt-4 sm:pt-6">
|
|
<div className="flex flex-col sm:flex-row items-start justify-between gap-3 sm:gap-0">
|
|
<div className="flex items-start gap-2 sm:gap-3 flex-1 min-w-0 w-full">
|
|
<div className="mt-1 shrink-0">
|
|
{iconMap[category.id] || <BookOpen className="w-4 h-4" />}
|
|
</div>
|
|
<div className="flex-1 min-w-0 overflow-hidden">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<Label className="font-semibold truncate">{category.name}</Label>
|
|
<Switch
|
|
checked={category.enabled}
|
|
onCheckedChange={async () => {
|
|
const updated = {
|
|
...settings.sourcesConfig!,
|
|
categories: settings.sourcesConfig!.categories.map((cat) =>
|
|
cat.id === category.id ? { ...cat, enabled: !cat.enabled } : cat
|
|
),
|
|
};
|
|
try {
|
|
await settings.saveSources(updated);
|
|
} catch (error) {
|
|
toast({
|
|
title: 'Erro ao salvar',
|
|
description: error instanceof Error ? error.message : 'Falha ao salvar',
|
|
variant: 'destructive',
|
|
});
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-wrap gap-1.5 mb-2">
|
|
{category.base_sites.map((site) => (
|
|
<Badge key={site} variant="secondary" className="text-xs">
|
|
{site}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
{category.base_sites.length} sites
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setEditingCategory(category)}
|
|
className="shrink-0"
|
|
>
|
|
<Edit className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-2" />
|
|
<p>Carregando configuração de fontes...</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Edit Category Dialog */}
|
|
<Dialog open={!!editingCategory} onOpenChange={(open) => !open && setEditingCategory(null)}>
|
|
<DialogContent className="max-w-[95vw] sm:max-w-2xl w-full">
|
|
<DialogHeader>
|
|
<DialogTitle>Editar Categoria: {editingCategory?.name}</DialogTitle>
|
|
<DialogDescription>
|
|
Adicione ou remova sites desta categoria
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
{editingCategory && (
|
|
<EditCategoryDialog
|
|
category={editingCategory}
|
|
onSave={async (updatedCategory) => {
|
|
if (!settings.sourcesConfig) return;
|
|
const updated = {
|
|
...settings.sourcesConfig,
|
|
categories: settings.sourcesConfig.categories.map((cat) =>
|
|
cat.id === updatedCategory.id ? updatedCategory : cat
|
|
),
|
|
};
|
|
try {
|
|
setIsSavingSources(true);
|
|
await settings.saveSources(updated);
|
|
setEditingCategory(null);
|
|
toast({
|
|
title: 'Categoria atualizada',
|
|
description: 'Alterações salvas com sucesso',
|
|
});
|
|
} catch (error) {
|
|
toast({
|
|
title: 'Erro ao salvar',
|
|
description: error instanceof Error ? error.message : 'Falha ao salvar',
|
|
variant: 'destructive',
|
|
});
|
|
} finally {
|
|
setIsSavingSources(false);
|
|
}
|
|
}}
|
|
/>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
</TabsContent>
|
|
|
|
{/* Tab: SearXNG Integration */}
|
|
<TabsContent value="searxng" className="space-y-3 sm:space-y-4 pb-4 sm:pb-6">
|
|
{/* Docker Settings Panel */}
|
|
<DockerSettingsPanel />
|
|
|
|
<Card>
|
|
<CardHeader className="pb-2 sm:pb-4">
|
|
<CardTitle className="text-lg sm:text-xl">SearXNG Self-Hosted</CardTitle>
|
|
<CardDescription className="text-xs sm:text-sm">
|
|
Configure e gerencie sua instância SearXNG self-hosted para buscas privadas e ilimitadas
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3 sm:space-y-4">
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-3">
|
|
<div className="space-y-0.5 sm:space-y-1 flex-1 min-w-0">
|
|
<Label className="text-sm sm:text-base">Habilitar SearXNG</Label>
|
|
<p className="text-xs sm:text-sm text-muted-foreground">
|
|
Use SearXNG self-hosted como fonte de busca prioritária
|
|
</p>
|
|
</div>
|
|
<div className="flex-shrink-0">
|
|
<Switch
|
|
id="searxng-enabled-tab"
|
|
checked={settings.webSearch.searxng?.enabled ?? false}
|
|
onCheckedChange={(checked) => {
|
|
settings.setSearxngEnabled(checked);
|
|
if (checked && (settings.webSearch.searxng?.status ?? 'unknown') === 'unknown') {
|
|
setShowSearxngOnboarding(true);
|
|
}
|
|
}}
|
|
disabled={!settings.webSearch.enabled}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{(settings.webSearch.searxng?.enabled ?? false) && (
|
|
<>
|
|
<div className="space-y-2">
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
|
|
<Label className="text-sm sm:text-base">Status</Label>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
{(settings.webSearch.searxng?.status ?? 'unknown') === 'checking' && (
|
|
<>
|
|
<Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
|
|
<span className="text-xs sm:text-sm text-muted-foreground">Verificando...</span>
|
|
</>
|
|
)}
|
|
{(settings.webSearch.searxng?.status ?? 'unknown') === 'available' && (
|
|
<>
|
|
<CheckCircle2 className="w-4 h-4 text-green-500 flex-shrink-0" />
|
|
<Badge variant="outline" className="text-xs sm:text-sm text-green-600 border-green-500 whitespace-nowrap">
|
|
Disponível
|
|
</Badge>
|
|
</>
|
|
)}
|
|
{(settings.webSearch.searxng?.status ?? 'unknown') === 'unavailable' && (
|
|
<>
|
|
<XCircle className="w-4 h-4 text-red-500 flex-shrink-0" />
|
|
<Badge variant="outline" className="text-xs sm:text-sm text-red-600 border-red-500 whitespace-nowrap">
|
|
Indisponível
|
|
</Badge>
|
|
</>
|
|
)}
|
|
{(settings.webSearch.searxng?.status ?? 'unknown') === 'unknown' && (
|
|
<Badge variant="outline" className="text-xs sm:text-sm whitespace-nowrap">Não verificado</Badge>
|
|
)}
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={async () => {
|
|
await settings.checkSearxngStatus();
|
|
}}
|
|
disabled={(settings.webSearch.searxng?.status ?? 'unknown') === 'checking'}
|
|
className="text-xs sm:text-sm"
|
|
>
|
|
<RefreshCw className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
|
|
<span className="hidden xs:inline">Verificar</span>
|
|
<span className="xs:hidden">Atualizar</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="searxng-url-tab" className="text-sm sm:text-base">URL do SearXNG</Label>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
id="searxng-url-tab"
|
|
value={settings.webSearch.searxng?.url ?? 'http://localhost:8080'}
|
|
onChange={(e) => settings.setSearxngUrl(e.target.value)}
|
|
placeholder="http://localhost:8080"
|
|
disabled={(settings.webSearch.searxng?.status ?? 'unknown') === 'checking'}
|
|
className="text-xs sm:text-sm"
|
|
/>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
URL completa onde o SearXNG está acessível
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col xs:flex-row gap-2 pt-1 sm:pt-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => {
|
|
if ((settings.webSearch.searxng?.status ?? 'unknown') === 'unknown') {
|
|
setShowSearxngOnboarding(true);
|
|
} else {
|
|
setShowSearxngWizard(true);
|
|
}
|
|
}}
|
|
className="flex-1 xs:flex-initial text-xs sm:text-sm"
|
|
>
|
|
<Settings className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
|
|
Configurar
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={async () => {
|
|
try {
|
|
const isRunning = (settings.webSearch.searxng?.status ?? 'unknown') === 'available';
|
|
if (isRunning) {
|
|
await invoke('stop_searxng');
|
|
toast({
|
|
title: 'SearXNG parado',
|
|
description: 'Container foi parado com sucesso',
|
|
});
|
|
await settings.checkSearxngStatus();
|
|
} else {
|
|
await invoke('start_searxng');
|
|
toast({
|
|
title: 'SearXNG iniciado',
|
|
description: 'Container foi iniciado com sucesso',
|
|
});
|
|
await settings.checkSearxngStatus();
|
|
}
|
|
} catch (error) {
|
|
toast({
|
|
title: 'Erro',
|
|
description: error instanceof Error ? error.message : 'Falha ao gerenciar container',
|
|
variant: 'destructive',
|
|
});
|
|
}
|
|
}}
|
|
className="flex-1 xs:flex-initial text-xs sm:text-sm"
|
|
>
|
|
{(settings.webSearch.searxng?.status ?? 'unknown') === 'available' ? (
|
|
<>
|
|
<Square className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
|
|
Parar
|
|
</>
|
|
) : (
|
|
<>
|
|
<Power className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
|
|
Iniciar
|
|
</>
|
|
)}
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
window.open('https://docs.searxng.org/', '_blank');
|
|
}}
|
|
className="flex-1 xs:flex-initial text-xs sm:text-sm"
|
|
>
|
|
<ExternalLink className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
|
|
<span className="hidden sm:inline">Saiba Mais</span>
|
|
<span className="sm:hidden">Docs</span>
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{!(settings.webSearch.searxng?.enabled ?? false) && (
|
|
<div className="text-center py-4 sm:py-6 text-muted-foreground px-2">
|
|
<p className="text-xs sm:text-sm">
|
|
Habilite o SearXNG acima para começar a usar buscas privadas e ilimitadas.
|
|
</p>
|
|
<p className="text-xs mt-2">
|
|
Você também pode configurar o SearXNG na aba "Web Search".
|
|
</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* Tab: Tasks & Scheduler */}
|
|
<TabsContent value="tasks" className="space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Tarefas Agendadas</CardTitle>
|
|
<CardDescription>
|
|
Gerencie tarefas automáticas que executam em intervalos regulares
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Visualize e gerencie tarefas agendadas no Task Manager
|
|
</p>
|
|
</div>
|
|
<Button
|
|
onClick={() => router.push('/tasks')}
|
|
variant="outline"
|
|
>
|
|
<ExternalLink className="w-4 h-4 mr-2" />
|
|
Abrir Task Manager
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* Tab: System & Logs */}
|
|
<TabsContent value="system" className="space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Armazenamento</CardTitle>
|
|
<CardDescription>
|
|
Gerencie os dados salvos localmente
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="space-y-2">
|
|
<Label>Localização dos Dados</Label>
|
|
<div className="flex items-center gap-2">
|
|
<Input
|
|
value={storagePath}
|
|
readOnly
|
|
className="font-mono text-sm"
|
|
/>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={copyStoragePath}
|
|
title="Copiar caminho"
|
|
>
|
|
<Copy className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
As conversas são salvas como arquivos JSON neste diretório
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4 pt-4 border-t">
|
|
<div className="space-y-2">
|
|
<Label>Backup e Manutenção</Label>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button
|
|
onClick={handleExportAllData}
|
|
disabled={isExporting}
|
|
variant="default"
|
|
>
|
|
{isExporting ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
Exportando...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Download className="w-4 h-4 mr-2" />
|
|
Exportar Tudo (Backup Completo)
|
|
</>
|
|
)}
|
|
</Button>
|
|
<Button
|
|
onClick={handleExportChats}
|
|
disabled={isExporting}
|
|
variant="outline"
|
|
>
|
|
<Download className="w-4 h-4 mr-2" />
|
|
Exportar Apenas Chats
|
|
</Button>
|
|
<Button
|
|
onClick={() => setShowClearDialog(true)}
|
|
variant="destructive"
|
|
>
|
|
<Trash2 className="w-4 h-4 mr-2" />
|
|
Apagar Histórico
|
|
</Button>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
O backup completo inclui: chats, tasks.json, sources.json e settings.json
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Logs do Sistema</CardTitle>
|
|
<CardDescription>
|
|
Visualize os logs recentes do aplicativo (atualizado a cada 5 segundos)
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="relative">
|
|
<div className="bg-black text-green-400 font-mono text-xs p-4 rounded-lg h-[400px] overflow-y-auto">
|
|
{isLoadingLogs ? (
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
Carregando logs...
|
|
</div>
|
|
) : recentLogs.length === 0 ? (
|
|
<div className="text-muted-foreground">Nenhum log disponível</div>
|
|
) : (
|
|
recentLogs.map((line, idx) => (
|
|
<div key={idx} className="mb-1">
|
|
{line}
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Processos do Sistema</CardTitle>
|
|
<CardDescription>
|
|
Gerencie processos do Chrome/Chromium que podem ficar "zumbis" após buscas web
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label>Chrome/Chromium Processes</Label>
|
|
<p className="text-xs text-muted-foreground mb-4">
|
|
Se você notar processos Chrome "zumbis" consumindo memória após buscas web, use este botão para forçar o encerramento de todos os processos relacionados.
|
|
</p>
|
|
<Button
|
|
onClick={async () => {
|
|
try {
|
|
const killed = await invoke<number>('force_kill_browser');
|
|
toast({
|
|
title: killed > 0 ? 'Processos encerrados' : 'Nenhum processo encontrado',
|
|
description: killed > 0
|
|
? `${killed} processo(s) Chrome foram encerrados com sucesso.`
|
|
: 'Não há processos Chrome rodando no momento.',
|
|
});
|
|
} catch (error) {
|
|
console.error('Erro ao encerrar processos:', error);
|
|
toast({
|
|
title: 'Erro ao encerrar processos',
|
|
description: error instanceof Error ? error.message : 'Falha ao executar comando',
|
|
variant: 'destructive',
|
|
});
|
|
}
|
|
}}
|
|
variant="outline"
|
|
className="w-full"
|
|
>
|
|
<XCircle className="w-4 h-4 mr-2" />
|
|
Encerrar Processos Chrome
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Debug & Desenvolvimento</CardTitle>
|
|
<CardDescription>
|
|
Ferramentas de debug e introspecção técnica
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-0.5">
|
|
<Label htmlFor="debug-mode">Modo Debug (God-Mode)</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
Exibe console completo de introspecção técnica para cada resposta da IA
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
id="debug-mode"
|
|
checked={settings.debugMode}
|
|
onCheckedChange={settings.setDebugMode}
|
|
/>
|
|
</div>
|
|
{settings.debugMode && (
|
|
<div className="p-3 bg-muted/50 rounded-lg border border-border/50">
|
|
<p className="text-xs text-muted-foreground">
|
|
O console de debug mostrará: System Prompt, Histórico da Sessão, Deep Research Pipeline,
|
|
Dados Processados e Resposta Raw para cada mensagem do assistente.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Atualizações</CardTitle>
|
|
<CardDescription>
|
|
Configure verificação automática de atualizações
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-0.5">
|
|
<Label htmlFor="auto-check-updates">Verificar Atualizações Automaticamente</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
O app verificará novas versões periodicamente
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
id="auto-check-updates"
|
|
checked={settings.autoCheckUpdates}
|
|
onCheckedChange={settings.setAutoCheckUpdates}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-muted-foreground">Versão Atual</span>
|
|
<span className="font-mono font-medium">
|
|
{appVersion || 'Carregando...'}
|
|
</span>
|
|
</div>
|
|
{updater.updateAvailable && (
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-muted-foreground">Nova Versão Disponível</span>
|
|
<span className="font-mono font-medium text-primary">
|
|
{updater.updateInfo?.version}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<Button
|
|
onClick={async () => {
|
|
await updater.checkUpdate();
|
|
if (updater.updateAvailable) {
|
|
toast({
|
|
title: 'Atualização disponível',
|
|
description: `Versão ${updater.updateInfo?.version} está disponível para download.`,
|
|
});
|
|
} else {
|
|
toast({
|
|
title: 'Você está atualizado',
|
|
description: 'Não há novas atualizações disponíveis.',
|
|
});
|
|
}
|
|
}}
|
|
variant="outline"
|
|
className="w-full"
|
|
disabled={updater.isChecking}
|
|
>
|
|
{updater.isChecking ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
Verificando...
|
|
</>
|
|
) : (
|
|
<>
|
|
<RefreshCw className="w-4 h-4 mr-2" />
|
|
Verificar Atualizações
|
|
</>
|
|
)}
|
|
</Button>
|
|
|
|
{updater.error && (
|
|
<div className="p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
|
|
<p className="text-sm text-destructive">{updater.error}</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Debug & Desenvolvimento</CardTitle>
|
|
<CardDescription>
|
|
Ferramentas de debug e introspecção técnica
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-0.5">
|
|
<Label htmlFor="debug-mode">Modo Debug (God-Mode)</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
Exibe console completo de introspecção técnica para cada resposta da IA
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
id="debug-mode"
|
|
checked={settings.debugMode}
|
|
onCheckedChange={settings.setDebugMode}
|
|
/>
|
|
</div>
|
|
{settings.debugMode && (
|
|
<div className="p-3 bg-muted/50 rounded-lg border border-border/50">
|
|
<p className="text-xs text-muted-foreground">
|
|
O console de debug mostrará: System Prompt, Histórico da Sessão, Deep Research Pipeline,
|
|
Dados Processados e Resposta Raw para cada mensagem do assistente.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Atualizações</CardTitle>
|
|
<CardDescription>
|
|
Configure verificação automática de atualizações
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-0.5">
|
|
<Label htmlFor="auto-check-updates">Verificar Atualizações Automaticamente</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
O app verificará novas versões periodicamente
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
id="auto-check-updates"
|
|
checked={settings.autoCheckUpdates}
|
|
onCheckedChange={settings.setAutoCheckUpdates}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-muted-foreground">Versão Atual</span>
|
|
<span className="font-mono font-medium">
|
|
{appVersion || 'Carregando...'}
|
|
</span>
|
|
</div>
|
|
{updater.updateAvailable && (
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-muted-foreground">Nova Versão Disponível</span>
|
|
<span className="font-mono font-medium text-primary">
|
|
{updater.updateInfo?.version}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<Button
|
|
onClick={async () => {
|
|
await updater.checkUpdate();
|
|
if (updater.updateAvailable) {
|
|
toast({
|
|
title: 'Atualização disponível',
|
|
description: `Versão ${updater.updateInfo?.version} está disponível para download.`,
|
|
});
|
|
} else {
|
|
toast({
|
|
title: 'Você está atualizado',
|
|
description: 'Não há novas atualizações disponíveis.',
|
|
});
|
|
}
|
|
}}
|
|
variant="outline"
|
|
className="w-full"
|
|
disabled={updater.isChecking}
|
|
>
|
|
{updater.isChecking ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
Verificando...
|
|
</>
|
|
) : (
|
|
<>
|
|
<RefreshCw className="w-4 h-4 mr-2" />
|
|
Verificar Atualizações
|
|
</>
|
|
)}
|
|
</Button>
|
|
|
|
{updater.error && (
|
|
<div className="p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
|
|
<p className="text-sm text-destructive">{updater.error}</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
|
|
{/* Clear History Dialog */}
|
|
<Dialog open={showClearDialog} onOpenChange={setShowClearDialog}>
|
|
<DialogContent className="max-w-[95vw] sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>Confirmar Exclusão</DialogTitle>
|
|
<DialogDescription>
|
|
Esta ação não pode ser desfeita. Todos os chats serão permanentemente removidos.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter className="flex-col sm:flex-row gap-2">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setShowClearDialog(false)}
|
|
disabled={isClearing}
|
|
className="w-full sm:w-auto"
|
|
>
|
|
Cancelar
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={handleClearHistory}
|
|
disabled={isClearing}
|
|
className="w-full sm:w-auto"
|
|
>
|
|
{isClearing ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
Apagando...
|
|
</>
|
|
) : (
|
|
'Confirmar Exclusão'
|
|
)}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
</div>
|
|
|
|
{/* SearXNG Onboarding Modal */}
|
|
{showSearxngOnboarding && (
|
|
<SearxngOnboarding
|
|
onInstall={() => {
|
|
setShowSearxngOnboarding(false);
|
|
setShowSearxngWizard(true);
|
|
}}
|
|
onSkip={() => {
|
|
setShowSearxngOnboarding(false);
|
|
settings.setSearxngEnabled(false);
|
|
}}
|
|
onLearnMore={() => {
|
|
window.open('https://docs.searxng.org/', '_blank');
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* SearXNG Install Wizard Modal */}
|
|
{showSearxngWizard && (
|
|
<SearxngInstallWizard
|
|
onComplete={async () => {
|
|
setShowSearxngWizard(false);
|
|
settings.setSearxngEnabled(true);
|
|
settings.setSearxngStatus('available');
|
|
await settings.checkSearxngStatus();
|
|
toast({
|
|
title: 'SearXNG configurado',
|
|
description: 'SearXNG foi instalado e configurado com sucesso!',
|
|
});
|
|
}}
|
|
onCancel={() => {
|
|
setShowSearxngWizard(false);
|
|
}}
|
|
initialUrl={settings.webSearch.searxng?.url ?? 'http://localhost:8080'}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Edit Category Dialog Component
|
|
function EditCategoryDialog({
|
|
category,
|
|
onSave
|
|
}: {
|
|
category: SourceCategory;
|
|
onSave: (category: SourceCategory) => void;
|
|
}) {
|
|
const [sites, setSites] = useState<string[]>(category.base_sites);
|
|
const [newSite, setNewSite] = useState('');
|
|
|
|
const handleAddSite = () => {
|
|
const normalized = newSite.trim().toLowerCase().replace(/^https?:\/\//, '').replace(/\/$/, '');
|
|
if (normalized && !sites.includes(normalized)) {
|
|
setSites([...sites, normalized]);
|
|
setNewSite('');
|
|
}
|
|
};
|
|
|
|
const handleRemoveSite = (site: string) => {
|
|
setSites(sites.filter((s) => s !== site));
|
|
};
|
|
|
|
const handleSave = () => {
|
|
onSave({
|
|
...category,
|
|
base_sites: sites,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label>Sites da Categoria</Label>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
placeholder="exemplo.com"
|
|
value={newSite}
|
|
onChange={(e) => setNewSite(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
handleAddSite();
|
|
}
|
|
}}
|
|
/>
|
|
<Button type="button" variant="outline" onClick={handleAddSite}>
|
|
<Plus className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2 mt-2">
|
|
{sites.map((site) => (
|
|
<Badge key={site} variant="secondary" className="text-sm">
|
|
{site}
|
|
<button
|
|
onClick={() => handleRemoveSite(site)}
|
|
className="ml-2 hover:text-destructive"
|
|
>
|
|
<X className="w-3 h-3" />
|
|
</button>
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => onSave(category)}>
|
|
Cancelar
|
|
</Button>
|
|
<Button onClick={handleSave}>
|
|
Salvar Alterações
|
|
</Button>
|
|
</DialogFooter>
|
|
</div>
|
|
);
|
|
}
|
|
|