Final UI V3
# UI V3 Changelog Major updates and improvements in this release: ## Core Changes - Complete NEW REWRITTEN UI system overhaul (V3) with semantic design tokens - New settings management system with drag-and-drop capabilities - Enhanced provider system supporting multiple AI services - Improved theme system with better dark mode support - New component library with consistent design patterns ## Technical Updates - Reorganized project architecture for better maintainability - Performance optimizations and bundle size improvements - Enhanced security features and access controls - Improved developer experience with better tooling - Comprehensive testing infrastructure ## New Features - Background rays effect for improved visual feedback - Advanced tab management system - Automatic and manual update support - Enhanced error handling and visualization - Improved accessibility across all components For detailed information about all changes and improvements, please see the full changelog.
This commit is contained in:
Stijnus
181
app/components/@settings/core/AvatarDropdown.tsx
Normal file
181
app/components/@settings/core/AvatarDropdown.tsx
Normal file
@@ -0,0 +1,181 @@
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { profileStore } from '~/lib/stores/profile';
|
||||
import type { TabType, Profile } from './types';
|
||||
|
||||
interface AvatarDropdownProps {
|
||||
onSelectTab: (tab: TabType) => void;
|
||||
}
|
||||
|
||||
export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
|
||||
const profile = useStore(profileStore) as Profile;
|
||||
|
||||
return (
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<motion.button
|
||||
className="group flex items-center justify-center"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<div
|
||||
className={classNames(
|
||||
'w-10 h-10',
|
||||
'rounded-full overflow-hidden',
|
||||
'bg-gray-100/50 dark:bg-gray-800/50',
|
||||
'flex items-center justify-center',
|
||||
'ring-1 ring-gray-200/50 dark:ring-gray-700/50',
|
||||
'group-hover:ring-purple-500/50 dark:group-hover:ring-purple-500/50',
|
||||
'group-hover:bg-purple-500/10 dark:group-hover:bg-purple-500/10',
|
||||
'transition-all duration-200',
|
||||
'relative',
|
||||
)}
|
||||
>
|
||||
{profile?.avatar ? (
|
||||
<div className="w-full h-full">
|
||||
<img
|
||||
src={profile.avatar}
|
||||
alt={profile?.username || 'Profile'}
|
||||
className={classNames(
|
||||
'w-full h-full',
|
||||
'object-cover',
|
||||
'transform-gpu',
|
||||
'image-rendering-crisp',
|
||||
'group-hover:brightness-110',
|
||||
'group-hover:scale-105',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
loading="eager"
|
||||
decoding="sync"
|
||||
/>
|
||||
<div
|
||||
className={classNames(
|
||||
'absolute inset-0',
|
||||
'ring-1 ring-inset ring-black/5 dark:ring-white/5',
|
||||
'group-hover:ring-purple-500/20 dark:group-hover:ring-purple-500/20',
|
||||
'group-hover:bg-purple-500/5 dark:group-hover:bg-purple-500/5',
|
||||
'transition-colors duration-200',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="i-ph:robot-fill w-6 h-6 text-gray-400 dark:text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
|
||||
)}
|
||||
</div>
|
||||
</motion.button>
|
||||
</DropdownMenu.Trigger>
|
||||
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content
|
||||
className={classNames(
|
||||
'min-w-[240px] z-[250]',
|
||||
'bg-white dark:bg-[#141414]',
|
||||
'rounded-lg shadow-lg',
|
||||
'border border-gray-200/50 dark:border-gray-800/50',
|
||||
'animate-in fade-in-0 zoom-in-95',
|
||||
'py-1',
|
||||
)}
|
||||
sideOffset={5}
|
||||
align="end"
|
||||
>
|
||||
<div
|
||||
className={classNames(
|
||||
'px-4 py-3 flex items-center gap-3',
|
||||
'border-b border-gray-200/50 dark:border-gray-800/50',
|
||||
)}
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full overflow-hidden bg-gray-100/50 dark:bg-gray-800/50 flex-shrink-0">
|
||||
{profile?.avatar ? (
|
||||
<img
|
||||
src={profile.avatar}
|
||||
alt={profile?.username || 'Profile'}
|
||||
className={classNames('w-full h-full', 'object-cover', 'transform-gpu', 'image-rendering-crisp')}
|
||||
loading="eager"
|
||||
decoding="sync"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<div className="i-ph:robot-fill w-6 h-6 text-gray-400 dark:text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium text-sm text-gray-900 dark:text-white truncate">
|
||||
{profile?.username || 'Guest User'}
|
||||
</div>
|
||||
{profile?.bio && <div className="text-xs text-gray-500 dark:text-gray-400 truncate">{profile.bio}</div>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DropdownMenu.Item
|
||||
className={classNames(
|
||||
'flex items-center gap-2 px-4 py-2.5',
|
||||
'text-sm text-gray-700 dark:text-gray-200',
|
||||
'hover:bg-purple-50 dark:hover:bg-purple-500/10',
|
||||
'hover:text-purple-500 dark:hover:text-purple-400',
|
||||
'cursor-pointer transition-all duration-200',
|
||||
'outline-none',
|
||||
'group',
|
||||
)}
|
||||
onClick={() => onSelectTab('profile')}
|
||||
>
|
||||
<div className="i-ph:robot-fill w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
|
||||
Edit Profile
|
||||
</DropdownMenu.Item>
|
||||
|
||||
<DropdownMenu.Item
|
||||
className={classNames(
|
||||
'flex items-center gap-2 px-4 py-2.5',
|
||||
'text-sm text-gray-700 dark:text-gray-200',
|
||||
'hover:bg-purple-50 dark:hover:bg-purple-500/10',
|
||||
'hover:text-purple-500 dark:hover:text-purple-400',
|
||||
'cursor-pointer transition-all duration-200',
|
||||
'outline-none',
|
||||
'group',
|
||||
)}
|
||||
onClick={() => onSelectTab('settings')}
|
||||
>
|
||||
<div className="i-ph:gear-six-fill w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
|
||||
Settings
|
||||
</DropdownMenu.Item>
|
||||
|
||||
<div className="my-1 border-t border-gray-200/50 dark:border-gray-800/50" />
|
||||
|
||||
<DropdownMenu.Item
|
||||
className={classNames(
|
||||
'flex items-center gap-2 px-4 py-2.5',
|
||||
'text-sm text-gray-700 dark:text-gray-200',
|
||||
'hover:bg-purple-50 dark:hover:bg-purple-500/10',
|
||||
'hover:text-purple-500 dark:hover:text-purple-400',
|
||||
'cursor-pointer transition-all duration-200',
|
||||
'outline-none',
|
||||
'group',
|
||||
)}
|
||||
onClick={() => onSelectTab('task-manager')}
|
||||
>
|
||||
<div className="i-ph:activity-fill w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
|
||||
Task Manager
|
||||
</DropdownMenu.Item>
|
||||
|
||||
<DropdownMenu.Item
|
||||
className={classNames(
|
||||
'flex items-center gap-2 px-4 py-2.5',
|
||||
'text-sm text-gray-700 dark:text-gray-200',
|
||||
'hover:bg-purple-50 dark:hover:bg-purple-500/10',
|
||||
'hover:text-purple-500 dark:hover:text-purple-400',
|
||||
'cursor-pointer transition-all duration-200',
|
||||
'outline-none',
|
||||
'group',
|
||||
)}
|
||||
onClick={() => onSelectTab('service-status')}
|
||||
>
|
||||
<div className="i-ph:heartbeat-fill w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
|
||||
Service Status
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
);
|
||||
};
|
||||
459
app/components/@settings/core/ControlPanel.tsx
Normal file
459
app/components/@settings/core/ControlPanel.tsx
Normal file
@@ -0,0 +1,459 @@
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { Switch } from '@radix-ui/react-switch';
|
||||
import * as RadixDialog from '@radix-ui/react-dialog';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { TabManagement } from '~/components/@settings/shared/components/TabManagement';
|
||||
import { TabTile } from '~/components/@settings/shared/components/TabTile';
|
||||
import { useUpdateCheck } from '~/lib/hooks/useUpdateCheck';
|
||||
import { useFeatures } from '~/lib/hooks/useFeatures';
|
||||
import { useNotifications } from '~/lib/hooks/useNotifications';
|
||||
import { useConnectionStatus } from '~/lib/hooks/useConnectionStatus';
|
||||
import { useDebugStatus } from '~/lib/hooks/useDebugStatus';
|
||||
import { tabConfigurationStore, developerModeStore, setDeveloperMode } from '~/lib/stores/settings';
|
||||
import { profileStore } from '~/lib/stores/profile';
|
||||
import type { TabType, TabVisibilityConfig, DevTabConfig, Profile } from './types';
|
||||
import { TAB_LABELS, DEFAULT_TAB_CONFIG } from './constants';
|
||||
import { resetTabConfiguration } from '~/lib/stores/settings';
|
||||
import { DialogTitle } from '~/components/ui/Dialog';
|
||||
import { AvatarDropdown } from './AvatarDropdown';
|
||||
|
||||
// Import all tab components
|
||||
import ProfileTab from '~/components/@settings/tabs/profile/ProfileTab';
|
||||
import SettingsTab from '~/components/@settings/tabs/settings/SettingsTab';
|
||||
import NotificationsTab from '~/components/@settings/tabs/notifications/NotificationsTab';
|
||||
import FeaturesTab from '~/components/@settings/tabs/features/FeaturesTab';
|
||||
import DataTab from '~/components/@settings/tabs/data/DataTab';
|
||||
import DebugTab from '~/components/@settings/tabs/debug/DebugTab';
|
||||
import { EventLogsTab } from '~/components/@settings/tabs/event-logs/EventLogsTab';
|
||||
import UpdateTab from '~/components/@settings/tabs/update/UpdateTab';
|
||||
import ConnectionsTab from '~/components/@settings/tabs/connections/ConnectionsTab';
|
||||
import CloudProvidersTab from '~/components/@settings/tabs/providers/cloud/CloudProvidersTab';
|
||||
import ServiceStatusTab from '~/components/@settings/tabs/providers/status/ServiceStatusTab';
|
||||
import LocalProvidersTab from '~/components/@settings/tabs/providers/local/LocalProvidersTab';
|
||||
import TaskManagerTab from '~/components/@settings/tabs/task-manager/TaskManagerTab';
|
||||
|
||||
interface ControlPanelProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
interface TabWithDevType extends TabVisibilityConfig {
|
||||
isExtraDevTab?: boolean;
|
||||
}
|
||||
|
||||
const TAB_DESCRIPTIONS: Record<TabType, string> = {
|
||||
profile: 'Manage your profile and account settings',
|
||||
settings: 'Configure application preferences',
|
||||
notifications: 'View and manage your notifications',
|
||||
features: 'Explore new and upcoming features',
|
||||
data: 'Manage your data and storage',
|
||||
'cloud-providers': 'Configure cloud AI providers and models',
|
||||
'local-providers': 'Configure local AI providers and models',
|
||||
'service-status': 'Monitor cloud LLM service status',
|
||||
connection: 'Check connection status and settings',
|
||||
debug: 'Debug tools and system information',
|
||||
'event-logs': 'View system events and logs',
|
||||
update: 'Check for updates and release notes',
|
||||
'task-manager': 'Monitor system resources and processes',
|
||||
'tab-management': 'Configure visible tabs and their order',
|
||||
};
|
||||
|
||||
export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
|
||||
// State
|
||||
const [activeTab, setActiveTab] = useState<TabType | null>(null);
|
||||
const [loadingTab, setLoadingTab] = useState<TabType | null>(null);
|
||||
const [showTabManagement, setShowTabManagement] = useState(false);
|
||||
|
||||
// Store values
|
||||
const tabConfiguration = useStore(tabConfigurationStore);
|
||||
const developerMode = useStore(developerModeStore);
|
||||
const profile = useStore(profileStore) as Profile;
|
||||
|
||||
// Status hooks
|
||||
const { hasUpdate, currentVersion, acknowledgeUpdate } = useUpdateCheck();
|
||||
const { hasNewFeatures, unviewedFeatures, acknowledgeAllFeatures } = useFeatures();
|
||||
const { hasUnreadNotifications, unreadNotifications, markAllAsRead } = useNotifications();
|
||||
const { hasConnectionIssues, currentIssue, acknowledgeIssue } = useConnectionStatus();
|
||||
const { hasActiveWarnings, activeIssues, acknowledgeAllIssues } = useDebugStatus();
|
||||
|
||||
// Add visibleTabs logic using useMemo
|
||||
const visibleTabs = useMemo(() => {
|
||||
if (!tabConfiguration?.userTabs || !Array.isArray(tabConfiguration.userTabs)) {
|
||||
console.warn('Invalid tab configuration, resetting to defaults');
|
||||
resetTabConfiguration();
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
// In developer mode, show ALL tabs without restrictions
|
||||
if (developerMode) {
|
||||
// Combine all unique tabs from both user and developer configurations
|
||||
const allTabs = new Set([
|
||||
...DEFAULT_TAB_CONFIG.map((tab) => tab.id),
|
||||
...tabConfiguration.userTabs.map((tab) => tab.id),
|
||||
...(tabConfiguration.developerTabs || []).map((tab) => tab.id),
|
||||
]);
|
||||
|
||||
// Create a complete tab list with all tabs visible
|
||||
const devTabs = Array.from(allTabs).map((tabId) => {
|
||||
// Try to find existing configuration for this tab
|
||||
const existingTab =
|
||||
tabConfiguration.developerTabs?.find((t) => t.id === tabId) ||
|
||||
tabConfiguration.userTabs?.find((t) => t.id === tabId) ||
|
||||
DEFAULT_TAB_CONFIG.find((t) => t.id === tabId);
|
||||
|
||||
return {
|
||||
id: tabId,
|
||||
visible: true,
|
||||
window: 'developer' as const,
|
||||
order: existingTab?.order || DEFAULT_TAB_CONFIG.findIndex((t) => t.id === tabId),
|
||||
};
|
||||
});
|
||||
|
||||
// Add Tab Management tile for developer mode
|
||||
const tabManagementConfig: DevTabConfig = {
|
||||
id: 'tab-management',
|
||||
visible: true,
|
||||
window: 'developer',
|
||||
order: devTabs.length,
|
||||
isExtraDevTab: true,
|
||||
};
|
||||
devTabs.push(tabManagementConfig);
|
||||
|
||||
return devTabs.sort((a, b) => a.order - b.order);
|
||||
}
|
||||
|
||||
// In user mode, only show visible user tabs
|
||||
const notificationsDisabled = profile?.preferences?.notifications === false;
|
||||
|
||||
return tabConfiguration.userTabs
|
||||
.filter((tab) => {
|
||||
if (!tab || typeof tab.id !== 'string') {
|
||||
console.warn('Invalid tab entry:', tab);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Hide notifications tab if notifications are disabled in user preferences
|
||||
if (tab.id === 'notifications' && notificationsDisabled) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Only show tabs that are explicitly visible and assigned to the user window
|
||||
return tab.visible && tab.window === 'user';
|
||||
})
|
||||
.sort((a, b) => a.order - b.order);
|
||||
}, [tabConfiguration, developerMode, profile?.preferences?.notifications]);
|
||||
|
||||
// Handlers
|
||||
const handleBack = () => {
|
||||
if (showTabManagement) {
|
||||
setShowTabManagement(false);
|
||||
} else if (activeTab) {
|
||||
setActiveTab(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeveloperModeChange = (checked: boolean) => {
|
||||
console.log('Developer mode changed:', checked);
|
||||
setDeveloperMode(checked);
|
||||
};
|
||||
|
||||
// Add effect to log developer mode changes
|
||||
useEffect(() => {
|
||||
console.log('Current developer mode:', developerMode);
|
||||
}, [developerMode]);
|
||||
|
||||
const getTabComponent = (tabId: TabType | 'tab-management') => {
|
||||
if (tabId === 'tab-management') {
|
||||
return <TabManagement />;
|
||||
}
|
||||
|
||||
switch (tabId) {
|
||||
case 'profile':
|
||||
return <ProfileTab />;
|
||||
case 'settings':
|
||||
return <SettingsTab />;
|
||||
case 'notifications':
|
||||
return <NotificationsTab />;
|
||||
case 'features':
|
||||
return <FeaturesTab />;
|
||||
case 'data':
|
||||
return <DataTab />;
|
||||
case 'cloud-providers':
|
||||
return <CloudProvidersTab />;
|
||||
case 'local-providers':
|
||||
return <LocalProvidersTab />;
|
||||
case 'connection':
|
||||
return <ConnectionsTab />;
|
||||
case 'debug':
|
||||
return <DebugTab />;
|
||||
case 'event-logs':
|
||||
return <EventLogsTab />;
|
||||
case 'update':
|
||||
return <UpdateTab />;
|
||||
case 'task-manager':
|
||||
return <TaskManagerTab />;
|
||||
case 'service-status':
|
||||
return <ServiceStatusTab />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const getTabUpdateStatus = (tabId: TabType): boolean => {
|
||||
switch (tabId) {
|
||||
case 'update':
|
||||
return hasUpdate;
|
||||
case 'features':
|
||||
return hasNewFeatures;
|
||||
case 'notifications':
|
||||
return hasUnreadNotifications;
|
||||
case 'connection':
|
||||
return hasConnectionIssues;
|
||||
case 'debug':
|
||||
return hasActiveWarnings;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusMessage = (tabId: TabType): string => {
|
||||
switch (tabId) {
|
||||
case 'update':
|
||||
return `New update available (v${currentVersion})`;
|
||||
case 'features':
|
||||
return `${unviewedFeatures.length} new feature${unviewedFeatures.length === 1 ? '' : 's'} to explore`;
|
||||
case 'notifications':
|
||||
return `${unreadNotifications.length} unread notification${unreadNotifications.length === 1 ? '' : 's'}`;
|
||||
case 'connection':
|
||||
return currentIssue === 'disconnected'
|
||||
? 'Connection lost'
|
||||
: currentIssue === 'high-latency'
|
||||
? 'High latency detected'
|
||||
: 'Connection issues detected';
|
||||
case 'debug': {
|
||||
const warnings = activeIssues.filter((i) => i.type === 'warning').length;
|
||||
const errors = activeIssues.filter((i) => i.type === 'error').length;
|
||||
|
||||
return `${warnings} warning${warnings === 1 ? '' : 's'}, ${errors} error${errors === 1 ? '' : 's'}`;
|
||||
}
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
const handleTabClick = (tabId: TabType) => {
|
||||
setLoadingTab(tabId);
|
||||
setActiveTab(tabId);
|
||||
setShowTabManagement(false);
|
||||
|
||||
// Acknowledge notifications based on tab
|
||||
switch (tabId) {
|
||||
case 'update':
|
||||
acknowledgeUpdate();
|
||||
break;
|
||||
case 'features':
|
||||
acknowledgeAllFeatures();
|
||||
break;
|
||||
case 'notifications':
|
||||
markAllAsRead();
|
||||
break;
|
||||
case 'connection':
|
||||
acknowledgeIssue();
|
||||
break;
|
||||
case 'debug':
|
||||
acknowledgeAllIssues();
|
||||
break;
|
||||
}
|
||||
|
||||
// Clear loading state after a delay
|
||||
setTimeout(() => setLoadingTab(null), 500);
|
||||
};
|
||||
|
||||
return (
|
||||
<RadixDialog.Root open={open}>
|
||||
<RadixDialog.Portal>
|
||||
<div className="fixed inset-0 flex items-center justify-center z-[100]">
|
||||
<RadixDialog.Overlay asChild>
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-black/50 backdrop-blur-sm"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
/>
|
||||
</RadixDialog.Overlay>
|
||||
|
||||
<RadixDialog.Content
|
||||
aria-describedby={undefined}
|
||||
onEscapeKeyDown={onClose}
|
||||
onPointerDownOutside={onClose}
|
||||
className="relative z-[101]"
|
||||
>
|
||||
<motion.div
|
||||
className={classNames(
|
||||
'w-[1200px] h-[90vh]',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'rounded-2xl shadow-2xl',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'flex flex-col overflow-hidden',
|
||||
)}
|
||||
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: 20 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center space-x-4">
|
||||
{activeTab || showTabManagement ? (
|
||||
<button
|
||||
onClick={handleBack}
|
||||
className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-purple-500/10 dark:hover:bg-purple-500/20 group transition-all duration-200"
|
||||
>
|
||||
<div className="i-ph:arrow-left w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
|
||||
</button>
|
||||
) : (
|
||||
<motion.div
|
||||
className="w-7 h-7"
|
||||
initial={{ rotate: -5 }}
|
||||
animate={{ rotate: 5 }}
|
||||
transition={{
|
||||
repeat: Infinity,
|
||||
repeatType: 'reverse',
|
||||
duration: 2,
|
||||
ease: 'easeInOut',
|
||||
}}
|
||||
>
|
||||
<div className="w-full h-full flex items-center justify-center bg-gray-100/50 dark:bg-gray-800/50 rounded-full">
|
||||
<div className="i-ph:robot-fill w-5 h-5 text-gray-400 dark:text-gray-400 transition-colors" />
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
<DialogTitle className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
{showTabManagement ? 'Tab Management' : activeTab ? TAB_LABELS[activeTab] : 'Control Panel'}
|
||||
</DialogTitle>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
{/* Developer Mode Controls */}
|
||||
<div className="flex items-center gap-6">
|
||||
{/* Mode Toggle */}
|
||||
<div className="flex items-center gap-2 min-w-[140px] border-r border-gray-200 dark:border-gray-800 pr-6">
|
||||
<Switch
|
||||
id="developer-mode"
|
||||
checked={developerMode}
|
||||
onCheckedChange={handleDeveloperModeChange}
|
||||
className={classNames(
|
||||
'relative inline-flex h-6 w-11 items-center rounded-full',
|
||||
'bg-gray-200 dark:bg-gray-700',
|
||||
'data-[state=checked]:bg-purple-500',
|
||||
'transition-colors duration-200',
|
||||
)}
|
||||
>
|
||||
<span className="sr-only">Toggle developer mode</span>
|
||||
<span
|
||||
className={classNames(
|
||||
'inline-block h-4 w-4 transform rounded-full bg-white',
|
||||
'transition duration-200',
|
||||
'translate-x-1 data-[state=checked]:translate-x-6',
|
||||
)}
|
||||
/>
|
||||
</Switch>
|
||||
<div className="flex items-center gap-2">
|
||||
<label
|
||||
htmlFor="developer-mode"
|
||||
className="text-sm text-gray-500 dark:text-gray-400 select-none cursor-pointer whitespace-nowrap w-[88px]"
|
||||
>
|
||||
{developerMode ? 'Developer Mode' : 'User Mode'}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Avatar and Dropdown */}
|
||||
<div className="border-l border-gray-200 dark:border-gray-800 pl-6">
|
||||
<AvatarDropdown onSelectTab={handleTabClick} />
|
||||
</div>
|
||||
|
||||
{/* Close Button */}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-purple-500/10 dark:hover:bg-purple-500/20 group transition-all duration-200"
|
||||
>
|
||||
<div className="i-ph:x w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div
|
||||
className={classNames(
|
||||
'flex-1',
|
||||
'overflow-y-auto',
|
||||
'hover:overflow-y-auto',
|
||||
'scrollbar scrollbar-w-2',
|
||||
'scrollbar-track-transparent',
|
||||
'scrollbar-thumb-[#E5E5E5] hover:scrollbar-thumb-[#CCCCCC]',
|
||||
'dark:scrollbar-thumb-[#333333] dark:hover:scrollbar-thumb-[#444444]',
|
||||
'will-change-scroll',
|
||||
'touch-auto',
|
||||
)}
|
||||
>
|
||||
<motion.div
|
||||
key={activeTab || 'home'}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="p-6"
|
||||
>
|
||||
{showTabManagement ? (
|
||||
<TabManagement />
|
||||
) : activeTab ? (
|
||||
getTabComponent(activeTab)
|
||||
) : (
|
||||
<motion.div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 relative">
|
||||
<AnimatePresence mode="popLayout">
|
||||
{(visibleTabs as TabWithDevType[]).map((tab: TabWithDevType) => (
|
||||
<motion.div
|
||||
key={tab.id}
|
||||
layout
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.8 }}
|
||||
transition={{
|
||||
type: 'spring',
|
||||
stiffness: 400,
|
||||
damping: 30,
|
||||
mass: 0.8,
|
||||
duration: 0.3,
|
||||
}}
|
||||
className="aspect-[1.5/1]"
|
||||
>
|
||||
<TabTile
|
||||
tab={tab}
|
||||
onClick={() => handleTabClick(tab.id as TabType)}
|
||||
isActive={activeTab === tab.id}
|
||||
hasUpdate={getTabUpdateStatus(tab.id)}
|
||||
statusMessage={getStatusMessage(tab.id)}
|
||||
description={TAB_DESCRIPTIONS[tab.id]}
|
||||
isLoading={loadingTab === tab.id}
|
||||
className="h-full"
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</RadixDialog.Content>
|
||||
</div>
|
||||
</RadixDialog.Portal>
|
||||
</RadixDialog.Root>
|
||||
);
|
||||
};
|
||||
88
app/components/@settings/core/constants.ts
Normal file
88
app/components/@settings/core/constants.ts
Normal file
@@ -0,0 +1,88 @@
|
||||
import type { TabType } from './types';
|
||||
|
||||
export const TAB_ICONS: Record<TabType, string> = {
|
||||
profile: 'i-ph:user-circle-fill',
|
||||
settings: 'i-ph:gear-six-fill',
|
||||
notifications: 'i-ph:bell-fill',
|
||||
features: 'i-ph:star-fill',
|
||||
data: 'i-ph:database-fill',
|
||||
'cloud-providers': 'i-ph:cloud-fill',
|
||||
'local-providers': 'i-ph:desktop-fill',
|
||||
'service-status': 'i-ph:activity-bold',
|
||||
connection: 'i-ph:wifi-high-fill',
|
||||
debug: 'i-ph:bug-fill',
|
||||
'event-logs': 'i-ph:list-bullets-fill',
|
||||
update: 'i-ph:arrow-clockwise-fill',
|
||||
'task-manager': 'i-ph:chart-line-fill',
|
||||
'tab-management': 'i-ph:squares-four-fill',
|
||||
};
|
||||
|
||||
export const TAB_LABELS: Record<TabType, string> = {
|
||||
profile: 'Profile',
|
||||
settings: 'Settings',
|
||||
notifications: 'Notifications',
|
||||
features: 'Features',
|
||||
data: 'Data Management',
|
||||
'cloud-providers': 'Cloud Providers',
|
||||
'local-providers': 'Local Providers',
|
||||
'service-status': 'Service Status',
|
||||
connection: 'Connection',
|
||||
debug: 'Debug',
|
||||
'event-logs': 'Event Logs',
|
||||
update: 'Updates',
|
||||
'task-manager': 'Task Manager',
|
||||
'tab-management': 'Tab Management',
|
||||
};
|
||||
|
||||
export const TAB_DESCRIPTIONS: Record<TabType, string> = {
|
||||
profile: 'Manage your profile and account settings',
|
||||
settings: 'Configure application preferences',
|
||||
notifications: 'View and manage your notifications',
|
||||
features: 'Explore new and upcoming features',
|
||||
data: 'Manage your data and storage',
|
||||
'cloud-providers': 'Configure cloud AI providers and models',
|
||||
'local-providers': 'Configure local AI providers and models',
|
||||
'service-status': 'Monitor cloud LLM service status',
|
||||
connection: 'Check connection status and settings',
|
||||
debug: 'Debug tools and system information',
|
||||
'event-logs': 'View system events and logs',
|
||||
update: 'Check for updates and release notes',
|
||||
'task-manager': 'Monitor system resources and processes',
|
||||
'tab-management': 'Configure visible tabs and their order',
|
||||
};
|
||||
|
||||
export const DEFAULT_TAB_CONFIG = [
|
||||
// User Window Tabs (Always visible by default)
|
||||
{ id: 'features', visible: true, window: 'user' as const, order: 0 },
|
||||
{ id: 'data', visible: true, window: 'user' as const, order: 1 },
|
||||
{ id: 'cloud-providers', visible: true, window: 'user' as const, order: 2 },
|
||||
{ id: 'local-providers', visible: true, window: 'user' as const, order: 3 },
|
||||
{ id: 'connection', visible: true, window: 'user' as const, order: 4 },
|
||||
{ id: 'notifications', visible: true, window: 'user' as const, order: 5 },
|
||||
{ id: 'event-logs', visible: true, window: 'user' as const, order: 6 },
|
||||
|
||||
// User Window Tabs (In dropdown, initially hidden)
|
||||
{ id: 'profile', visible: false, window: 'user' as const, order: 7 },
|
||||
{ id: 'settings', visible: false, window: 'user' as const, order: 8 },
|
||||
{ id: 'task-manager', visible: false, window: 'user' as const, order: 9 },
|
||||
{ id: 'service-status', visible: false, window: 'user' as const, order: 10 },
|
||||
|
||||
// User Window Tabs (Hidden, controlled by TaskManagerTab)
|
||||
{ id: 'debug', visible: false, window: 'user' as const, order: 11 },
|
||||
{ id: 'update', visible: false, window: 'user' as const, order: 12 },
|
||||
|
||||
// Developer Window Tabs (All visible by default)
|
||||
{ id: 'features', visible: true, window: 'developer' as const, order: 0 },
|
||||
{ id: 'data', visible: true, window: 'developer' as const, order: 1 },
|
||||
{ id: 'cloud-providers', visible: true, window: 'developer' as const, order: 2 },
|
||||
{ id: 'local-providers', visible: true, window: 'developer' as const, order: 3 },
|
||||
{ id: 'connection', visible: true, window: 'developer' as const, order: 4 },
|
||||
{ id: 'notifications', visible: true, window: 'developer' as const, order: 5 },
|
||||
{ id: 'event-logs', visible: true, window: 'developer' as const, order: 6 },
|
||||
{ id: 'profile', visible: true, window: 'developer' as const, order: 7 },
|
||||
{ id: 'settings', visible: true, window: 'developer' as const, order: 8 },
|
||||
{ id: 'task-manager', visible: true, window: 'developer' as const, order: 9 },
|
||||
{ id: 'service-status', visible: true, window: 'developer' as const, order: 10 },
|
||||
{ id: 'debug', visible: true, window: 'developer' as const, order: 11 },
|
||||
{ id: 'update', visible: true, window: 'developer' as const, order: 12 },
|
||||
];
|
||||
114
app/components/@settings/core/types.ts
Normal file
114
app/components/@settings/core/types.ts
Normal file
@@ -0,0 +1,114 @@
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
export type SettingCategory = 'profile' | 'file_sharing' | 'connectivity' | 'system' | 'services' | 'preferences';
|
||||
|
||||
export type TabType =
|
||||
| 'profile'
|
||||
| 'settings'
|
||||
| 'notifications'
|
||||
| 'features'
|
||||
| 'data'
|
||||
| 'cloud-providers'
|
||||
| 'local-providers'
|
||||
| 'service-status'
|
||||
| 'connection'
|
||||
| 'debug'
|
||||
| 'event-logs'
|
||||
| 'update'
|
||||
| 'task-manager'
|
||||
| 'tab-management';
|
||||
|
||||
export type WindowType = 'user' | 'developer';
|
||||
|
||||
export interface UserProfile {
|
||||
nickname: any;
|
||||
name: string;
|
||||
email: string;
|
||||
avatar?: string;
|
||||
theme: 'light' | 'dark' | 'system';
|
||||
notifications: boolean;
|
||||
password?: string;
|
||||
bio?: string;
|
||||
language: string;
|
||||
timezone: string;
|
||||
}
|
||||
|
||||
export interface SettingItem {
|
||||
id: TabType;
|
||||
label: string;
|
||||
icon: string;
|
||||
category: SettingCategory;
|
||||
description?: string;
|
||||
component: () => ReactNode;
|
||||
badge?: string;
|
||||
keywords?: string[];
|
||||
}
|
||||
|
||||
export interface TabVisibilityConfig {
|
||||
id: TabType;
|
||||
visible: boolean;
|
||||
window: WindowType;
|
||||
order: number;
|
||||
isExtraDevTab?: boolean;
|
||||
locked?: boolean;
|
||||
}
|
||||
|
||||
export interface DevTabConfig extends TabVisibilityConfig {
|
||||
window: 'developer';
|
||||
}
|
||||
|
||||
export interface UserTabConfig extends TabVisibilityConfig {
|
||||
window: 'user';
|
||||
}
|
||||
|
||||
export interface TabWindowConfig {
|
||||
userTabs: UserTabConfig[];
|
||||
developerTabs: DevTabConfig[];
|
||||
}
|
||||
|
||||
export const TAB_LABELS: Record<TabType, string> = {
|
||||
profile: 'Profile',
|
||||
settings: 'Settings',
|
||||
notifications: 'Notifications',
|
||||
features: 'Features',
|
||||
data: 'Data Management',
|
||||
'cloud-providers': 'Cloud Providers',
|
||||
'local-providers': 'Local Providers',
|
||||
'service-status': 'Service Status',
|
||||
connection: 'Connections',
|
||||
debug: 'Debug',
|
||||
'event-logs': 'Event Logs',
|
||||
update: 'Updates',
|
||||
'task-manager': 'Task Manager',
|
||||
'tab-management': 'Tab Management',
|
||||
};
|
||||
|
||||
export const categoryLabels: Record<SettingCategory, string> = {
|
||||
profile: 'Profile & Account',
|
||||
file_sharing: 'File Sharing',
|
||||
connectivity: 'Connectivity',
|
||||
system: 'System',
|
||||
services: 'Services',
|
||||
preferences: 'Preferences',
|
||||
};
|
||||
|
||||
export const categoryIcons: Record<SettingCategory, string> = {
|
||||
profile: 'i-ph:user-circle',
|
||||
file_sharing: 'i-ph:folder-simple',
|
||||
connectivity: 'i-ph:wifi-high',
|
||||
system: 'i-ph:gear',
|
||||
services: 'i-ph:cube',
|
||||
preferences: 'i-ph:sliders',
|
||||
};
|
||||
|
||||
export interface Profile {
|
||||
username?: string;
|
||||
bio?: string;
|
||||
avatar?: string;
|
||||
preferences?: {
|
||||
notifications?: boolean;
|
||||
theme?: 'light' | 'dark' | 'system';
|
||||
language?: string;
|
||||
timezone?: string;
|
||||
};
|
||||
}
|
||||
14
app/components/@settings/index.ts
Normal file
14
app/components/@settings/index.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
// Core exports
|
||||
export { ControlPanel } from './core/ControlPanel';
|
||||
export type { TabType, TabVisibilityConfig } from './core/types';
|
||||
|
||||
// Constants
|
||||
export { TAB_LABELS, TAB_DESCRIPTIONS, DEFAULT_TAB_CONFIG } from './core/constants';
|
||||
|
||||
// Shared components
|
||||
export { TabTile } from './shared/components/TabTile';
|
||||
export { TabManagement } from './shared/components/TabManagement';
|
||||
|
||||
// Utils
|
||||
export { getVisibleTabs, reorderTabs, resetToDefaultConfig } from './utils/tab-helpers';
|
||||
export * from './utils/animations';
|
||||
163
app/components/@settings/shared/components/DraggableTabList.tsx
Normal file
163
app/components/@settings/shared/components/DraggableTabList.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
import { useDrag, useDrop } from 'react-dnd';
|
||||
import { motion } from 'framer-motion';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import type { TabVisibilityConfig } from '~/components/@settings/core/types';
|
||||
import { TAB_LABELS } from '~/components/@settings/core/types';
|
||||
import { Switch } from '~/components/ui/Switch';
|
||||
|
||||
interface DraggableTabListProps {
|
||||
tabs: TabVisibilityConfig[];
|
||||
onReorder: (tabs: TabVisibilityConfig[]) => void;
|
||||
onWindowChange?: (tab: TabVisibilityConfig, window: 'user' | 'developer') => void;
|
||||
onVisibilityChange?: (tab: TabVisibilityConfig, visible: boolean) => void;
|
||||
showControls?: boolean;
|
||||
}
|
||||
|
||||
interface DraggableTabItemProps {
|
||||
tab: TabVisibilityConfig;
|
||||
index: number;
|
||||
moveTab: (dragIndex: number, hoverIndex: number) => void;
|
||||
showControls?: boolean;
|
||||
onWindowChange?: (tab: TabVisibilityConfig, window: 'user' | 'developer') => void;
|
||||
onVisibilityChange?: (tab: TabVisibilityConfig, visible: boolean) => void;
|
||||
}
|
||||
|
||||
interface DragItem {
|
||||
type: string;
|
||||
index: number;
|
||||
id: string;
|
||||
}
|
||||
|
||||
const DraggableTabItem = ({
|
||||
tab,
|
||||
index,
|
||||
moveTab,
|
||||
showControls,
|
||||
onWindowChange,
|
||||
onVisibilityChange,
|
||||
}: DraggableTabItemProps) => {
|
||||
const [{ isDragging }, dragRef] = useDrag({
|
||||
type: 'tab',
|
||||
item: { type: 'tab', index, id: tab.id },
|
||||
collect: (monitor) => ({
|
||||
isDragging: monitor.isDragging(),
|
||||
}),
|
||||
});
|
||||
|
||||
const [, dropRef] = useDrop({
|
||||
accept: 'tab',
|
||||
hover: (item: DragItem, monitor) => {
|
||||
if (!monitor.isOver({ shallow: true })) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.index === index) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.id === tab.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
moveTab(item.index, index);
|
||||
item.index = index;
|
||||
},
|
||||
});
|
||||
|
||||
const ref = (node: HTMLDivElement | null) => {
|
||||
dragRef(node);
|
||||
dropRef(node);
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
initial={false}
|
||||
animate={{
|
||||
scale: isDragging ? 1.02 : 1,
|
||||
boxShadow: isDragging ? '0 8px 16px rgba(0,0,0,0.1)' : 'none',
|
||||
}}
|
||||
className={classNames(
|
||||
'flex items-center justify-between p-4 rounded-lg',
|
||||
'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
|
||||
'border border-[#E5E5E5] dark:border-[#333333]',
|
||||
isDragging ? 'z-50' : '',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="cursor-grab">
|
||||
<div className="i-ph:dots-six-vertical w-4 h-4 text-bolt-elements-textSecondary" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-bolt-elements-textPrimary">{TAB_LABELS[tab.id]}</div>
|
||||
{showControls && (
|
||||
<div className="text-xs text-bolt-elements-textSecondary">
|
||||
Order: {tab.order}, Window: {tab.window}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{showControls && !tab.locked && (
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
checked={tab.visible}
|
||||
onCheckedChange={(checked: boolean) => onVisibilityChange?.(tab, checked)}
|
||||
className="data-[state=checked]:bg-purple-500"
|
||||
aria-label={`Toggle ${TAB_LABELS[tab.id]} visibility`}
|
||||
/>
|
||||
<label className="text-sm text-bolt-elements-textSecondary">Visible</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm text-bolt-elements-textSecondary">User</label>
|
||||
<Switch
|
||||
checked={tab.window === 'developer'}
|
||||
onCheckedChange={(checked: boolean) => onWindowChange?.(tab, checked ? 'developer' : 'user')}
|
||||
className="data-[state=checked]:bg-purple-500"
|
||||
aria-label={`Toggle ${TAB_LABELS[tab.id]} window assignment`}
|
||||
/>
|
||||
<label className="text-sm text-bolt-elements-textSecondary">Dev</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export const DraggableTabList = ({
|
||||
tabs,
|
||||
onReorder,
|
||||
onWindowChange,
|
||||
onVisibilityChange,
|
||||
showControls = false,
|
||||
}: DraggableTabListProps) => {
|
||||
const moveTab = (dragIndex: number, hoverIndex: number) => {
|
||||
const items = Array.from(tabs);
|
||||
const [reorderedItem] = items.splice(dragIndex, 1);
|
||||
items.splice(hoverIndex, 0, reorderedItem);
|
||||
|
||||
// Update order numbers based on position
|
||||
const reorderedTabs = items.map((tab, index) => ({
|
||||
...tab,
|
||||
order: index + 1,
|
||||
}));
|
||||
|
||||
onReorder(reorderedTabs);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{tabs.map((tab, index) => (
|
||||
<DraggableTabItem
|
||||
key={tab.id}
|
||||
tab={tab}
|
||||
index={index}
|
||||
moveTab={moveTab}
|
||||
showControls={showControls}
|
||||
onWindowChange={onWindowChange}
|
||||
onVisibilityChange={onVisibilityChange}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
259
app/components/@settings/shared/components/TabManagement.tsx
Normal file
259
app/components/@settings/shared/components/TabManagement.tsx
Normal file
@@ -0,0 +1,259 @@
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { Switch } from '@radix-ui/react-switch';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { tabConfigurationStore } from '~/lib/stores/settings';
|
||||
import { TAB_LABELS } from '~/components/@settings/core/constants';
|
||||
import type { TabType } from '~/components/@settings/core/types';
|
||||
import { toast } from 'react-toastify';
|
||||
import { TbLayoutGrid } from 'react-icons/tb';
|
||||
|
||||
// Define tab icons mapping
|
||||
const TAB_ICONS: Record<TabType, string> = {
|
||||
profile: 'i-ph:user-circle-fill',
|
||||
settings: 'i-ph:gear-six-fill',
|
||||
notifications: 'i-ph:bell-fill',
|
||||
features: 'i-ph:star-fill',
|
||||
data: 'i-ph:database-fill',
|
||||
'cloud-providers': 'i-ph:cloud-fill',
|
||||
'local-providers': 'i-ph:desktop-fill',
|
||||
'service-status': 'i-ph:activity-fill',
|
||||
connection: 'i-ph:wifi-high-fill',
|
||||
debug: 'i-ph:bug-fill',
|
||||
'event-logs': 'i-ph:list-bullets-fill',
|
||||
update: 'i-ph:arrow-clockwise-fill',
|
||||
'task-manager': 'i-ph:chart-line-fill',
|
||||
'tab-management': 'i-ph:squares-four-fill',
|
||||
};
|
||||
|
||||
// Define which tabs are default in user mode
|
||||
const DEFAULT_USER_TABS: TabType[] = [
|
||||
'features',
|
||||
'data',
|
||||
'cloud-providers',
|
||||
'local-providers',
|
||||
'connection',
|
||||
'notifications',
|
||||
'event-logs',
|
||||
];
|
||||
|
||||
// Define which tabs can be added to user mode
|
||||
const OPTIONAL_USER_TABS: TabType[] = ['profile', 'settings', 'task-manager', 'service-status', 'debug', 'update'];
|
||||
|
||||
// All available tabs for user mode
|
||||
const ALL_USER_TABS = [...DEFAULT_USER_TABS, ...OPTIONAL_USER_TABS];
|
||||
|
||||
export const TabManagement = () => {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const tabConfiguration = useStore(tabConfigurationStore);
|
||||
|
||||
const handleTabVisibilityChange = (tabId: TabType, checked: boolean) => {
|
||||
// Get current tab configuration
|
||||
const currentTab = tabConfiguration.userTabs.find((tab) => tab.id === tabId);
|
||||
|
||||
// If tab doesn't exist in configuration, create it
|
||||
if (!currentTab) {
|
||||
const newTab = {
|
||||
id: tabId,
|
||||
visible: checked,
|
||||
window: 'user' as const,
|
||||
order: tabConfiguration.userTabs.length,
|
||||
};
|
||||
|
||||
const updatedTabs = [...tabConfiguration.userTabs, newTab];
|
||||
|
||||
tabConfigurationStore.set({
|
||||
...tabConfiguration,
|
||||
userTabs: updatedTabs,
|
||||
});
|
||||
|
||||
toast.success(`Tab ${checked ? 'enabled' : 'disabled'} successfully`);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if tab can be enabled in user mode
|
||||
const canBeEnabled = DEFAULT_USER_TABS.includes(tabId) || OPTIONAL_USER_TABS.includes(tabId);
|
||||
|
||||
if (!canBeEnabled && checked) {
|
||||
toast.error('This tab cannot be enabled in user mode');
|
||||
return;
|
||||
}
|
||||
|
||||
// Update tab visibility
|
||||
const updatedTabs = tabConfiguration.userTabs.map((tab) => {
|
||||
if (tab.id === tabId) {
|
||||
return { ...tab, visible: checked };
|
||||
}
|
||||
|
||||
return tab;
|
||||
});
|
||||
|
||||
// Update store
|
||||
tabConfigurationStore.set({
|
||||
...tabConfiguration,
|
||||
userTabs: updatedTabs,
|
||||
});
|
||||
|
||||
// Show success message
|
||||
toast.success(`Tab ${checked ? 'enabled' : 'disabled'} successfully`);
|
||||
};
|
||||
|
||||
// Create a map of existing tab configurations
|
||||
const tabConfigMap = new Map(tabConfiguration.userTabs.map((tab) => [tab.id, tab]));
|
||||
|
||||
// Generate the complete list of tabs, including those not in the configuration
|
||||
const allTabs = ALL_USER_TABS.map((tabId) => {
|
||||
return (
|
||||
tabConfigMap.get(tabId) || {
|
||||
id: tabId,
|
||||
visible: false,
|
||||
window: 'user' as const,
|
||||
order: -1,
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// Filter tabs based on search query
|
||||
const filteredTabs = allTabs.filter((tab) => TAB_LABELS[tab.id].toLowerCase().includes(searchQuery.toLowerCase()));
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<motion.div
|
||||
className="space-y-4"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between gap-4 mt-8 mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={classNames(
|
||||
'w-8 h-8 flex items-center justify-center rounded-lg',
|
||||
'bg-bolt-elements-background-depth-3',
|
||||
'text-purple-500',
|
||||
)}
|
||||
>
|
||||
<TbLayoutGrid className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-md font-medium text-bolt-elements-textPrimary">Tab Management</h4>
|
||||
<p className="text-sm text-bolt-elements-textSecondary">Configure visible tabs and their order</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div className="relative w-64">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<div className="i-ph:magnifying-glass w-4 h-4 text-gray-400" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search tabs..."
|
||||
className={classNames(
|
||||
'w-full pl-10 pr-4 py-2 rounded-lg',
|
||||
'bg-bolt-elements-background-depth-2',
|
||||
'border border-bolt-elements-borderColor',
|
||||
'text-bolt-elements-textPrimary',
|
||||
'placeholder-bolt-elements-textTertiary',
|
||||
'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tab Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{filteredTabs.map((tab, index) => (
|
||||
<motion.div
|
||||
key={tab.id}
|
||||
className={classNames(
|
||||
'rounded-lg border bg-bolt-elements-background text-bolt-elements-textPrimary',
|
||||
'bg-bolt-elements-background-depth-2',
|
||||
'hover:bg-bolt-elements-background-depth-3',
|
||||
'transition-all duration-200',
|
||||
'relative overflow-hidden group',
|
||||
)}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
>
|
||||
{/* Status Badges */}
|
||||
<div className="absolute top-2 right-2 flex gap-1">
|
||||
{DEFAULT_USER_TABS.includes(tab.id) && (
|
||||
<span className="px-2 py-0.5 text-xs rounded-full bg-purple-500/10 text-purple-500 font-medium">
|
||||
Default
|
||||
</span>
|
||||
)}
|
||||
{OPTIONAL_USER_TABS.includes(tab.id) && (
|
||||
<span className="px-2 py-0.5 text-xs rounded-full bg-blue-500/10 text-blue-500 font-medium">
|
||||
Optional
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-4">
|
||||
<motion.div
|
||||
className={classNames(
|
||||
'w-10 h-10 flex items-center justify-center rounded-xl',
|
||||
'bg-bolt-elements-background-depth-3 group-hover:bg-bolt-elements-background-depth-4',
|
||||
'transition-all duration-200',
|
||||
tab.visible ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
|
||||
)}
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
<div className={classNames('w-6 h-6', 'transition-transform duration-200', 'group-hover:rotate-12')}>
|
||||
<div className={classNames(TAB_ICONS[tab.id], 'w-full h-full')} />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-purple-500 transition-colors">
|
||||
{TAB_LABELS[tab.id]}
|
||||
</h4>
|
||||
<p className="text-xs text-bolt-elements-textSecondary mt-0.5">
|
||||
{tab.visible ? 'Visible in user mode' : 'Hidden in user mode'}
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={tab.visible}
|
||||
onCheckedChange={(checked) => handleTabVisibilityChange(tab.id, checked)}
|
||||
disabled={!DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id)}
|
||||
className={classNames(
|
||||
'relative inline-flex h-5 w-9 items-center rounded-full',
|
||||
'transition-colors duration-200',
|
||||
tab.visible ? 'bg-purple-500' : 'bg-bolt-elements-background-depth-4',
|
||||
{
|
||||
'opacity-50 cursor-not-allowed':
|
||||
!DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id),
|
||||
},
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="absolute inset-0 border-2 border-purple-500/0 rounded-lg pointer-events-none"
|
||||
animate={{
|
||||
borderColor: tab.visible ? 'rgba(168, 85, 247, 0.2)' : 'rgba(168, 85, 247, 0)',
|
||||
scale: tab.visible ? 1 : 0.98,
|
||||
}}
|
||||
transition={{ duration: 0.2 }}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
162
app/components/@settings/shared/components/TabTile.tsx
Normal file
162
app/components/@settings/shared/components/TabTile.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import * as Tooltip from '@radix-ui/react-tooltip';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import type { TabVisibilityConfig } from '~/components/@settings/core/types';
|
||||
import { TAB_LABELS, TAB_ICONS } from '~/components/@settings/core/constants';
|
||||
|
||||
interface TabTileProps {
|
||||
tab: TabVisibilityConfig;
|
||||
onClick?: () => void;
|
||||
isActive?: boolean;
|
||||
hasUpdate?: boolean;
|
||||
statusMessage?: string;
|
||||
description?: string;
|
||||
isLoading?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const TabTile = ({
|
||||
tab,
|
||||
onClick,
|
||||
isActive,
|
||||
hasUpdate,
|
||||
statusMessage,
|
||||
description,
|
||||
isLoading,
|
||||
className,
|
||||
}: TabTileProps) => {
|
||||
return (
|
||||
<Tooltip.Provider delayDuration={200}>
|
||||
<Tooltip.Root>
|
||||
<Tooltip.Trigger asChild>
|
||||
<motion.div
|
||||
onClick={onClick}
|
||||
className={classNames(
|
||||
'relative flex flex-col items-center p-6 rounded-xl',
|
||||
'w-full h-full min-h-[160px]',
|
||||
'bg-white dark:bg-[#141414]',
|
||||
'border border-[#E5E5E5] dark:border-[#333333]',
|
||||
'group',
|
||||
'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
|
||||
'hover:border-purple-200 dark:hover:border-purple-900/30',
|
||||
isActive ? 'border-purple-500 dark:border-purple-500/50 bg-purple-500/5 dark:bg-purple-500/10' : '',
|
||||
isLoading ? 'cursor-wait opacity-70' : '',
|
||||
className || '',
|
||||
)}
|
||||
>
|
||||
{/* Main Content */}
|
||||
<div className="flex flex-col items-center justify-center flex-1 w-full">
|
||||
{/* Icon */}
|
||||
<motion.div
|
||||
className={classNames(
|
||||
'relative',
|
||||
'w-14 h-14',
|
||||
'flex items-center justify-center',
|
||||
'rounded-xl',
|
||||
'bg-gray-100 dark:bg-gray-800',
|
||||
'ring-1 ring-gray-200 dark:ring-gray-700',
|
||||
'group-hover:bg-purple-100 dark:group-hover:bg-gray-700/80',
|
||||
'group-hover:ring-purple-200 dark:group-hover:ring-purple-800/30',
|
||||
isActive ? 'bg-purple-500/10 dark:bg-purple-500/10 ring-purple-500/30 dark:ring-purple-500/20' : '',
|
||||
)}
|
||||
>
|
||||
<motion.div
|
||||
className={classNames(
|
||||
TAB_ICONS[tab.id],
|
||||
'w-8 h-8',
|
||||
'text-gray-600 dark:text-gray-300',
|
||||
'group-hover:text-purple-500 dark:group-hover:text-purple-400/80',
|
||||
isActive ? 'text-purple-500 dark:text-purple-400/90' : '',
|
||||
)}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Label and Description */}
|
||||
<div className="flex flex-col items-center mt-5 w-full">
|
||||
<h3
|
||||
className={classNames(
|
||||
'text-[15px] font-medium leading-snug mb-2',
|
||||
'text-gray-700 dark:text-gray-200',
|
||||
'group-hover:text-purple-600 dark:group-hover:text-purple-300/90',
|
||||
isActive ? 'text-purple-500 dark:text-purple-400/90' : '',
|
||||
)}
|
||||
>
|
||||
{TAB_LABELS[tab.id]}
|
||||
</h3>
|
||||
{description && (
|
||||
<p
|
||||
className={classNames(
|
||||
'text-[13px] leading-relaxed',
|
||||
'text-gray-500 dark:text-gray-400',
|
||||
'max-w-[85%]',
|
||||
'text-center',
|
||||
'group-hover:text-purple-500 dark:group-hover:text-purple-400/70',
|
||||
isActive ? 'text-purple-400 dark:text-purple-400/80' : '',
|
||||
)}
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Indicator */}
|
||||
{hasUpdate && (
|
||||
<motion.div
|
||||
className={classNames(
|
||||
'absolute top-3 right-3',
|
||||
'w-2.5 h-2.5 rounded-full',
|
||||
'bg-purple-500',
|
||||
'ring-4 ring-purple-500',
|
||||
)}
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ type: 'spring', bounce: 0.5 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Loading Overlay */}
|
||||
{isLoading && (
|
||||
<motion.div
|
||||
className={classNames(
|
||||
'absolute inset-0 rounded-xl z-10',
|
||||
'bg-white dark:bg-black',
|
||||
'flex items-center justify-center',
|
||||
)}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<motion.div
|
||||
className={classNames('w-8 h-8 rounded-full', 'border-2 border-purple-500', 'border-t-purple-500')}
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{
|
||||
duration: 1,
|
||||
repeat: Infinity,
|
||||
ease: 'linear',
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</motion.div>
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Portal>
|
||||
<Tooltip.Content
|
||||
className={classNames(
|
||||
'px-3 py-1.5 rounded-lg',
|
||||
'bg-[#18181B] text-white',
|
||||
'text-sm font-medium',
|
||||
'select-none',
|
||||
'z-[100]',
|
||||
)}
|
||||
side="top"
|
||||
sideOffset={5}
|
||||
>
|
||||
{statusMessage || TAB_LABELS[tab.id]}
|
||||
<Tooltip.Arrow className="fill-[#18181B]" />
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
);
|
||||
};
|
||||
615
app/components/@settings/tabs/connections/ConnectionsTab.tsx
Normal file
615
app/components/@settings/tabs/connections/ConnectionsTab.tsx
Normal file
@@ -0,0 +1,615 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { logStore } from '~/lib/stores/logs';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { motion } from 'framer-motion';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
interface GitHubUserResponse {
|
||||
login: string;
|
||||
avatar_url: string;
|
||||
html_url: string;
|
||||
name: string;
|
||||
bio: string;
|
||||
public_repos: number;
|
||||
followers: number;
|
||||
following: number;
|
||||
created_at: string;
|
||||
public_gists: number;
|
||||
}
|
||||
|
||||
interface GitHubRepoInfo {
|
||||
name: string;
|
||||
full_name: string;
|
||||
html_url: string;
|
||||
description: string;
|
||||
stargazers_count: number;
|
||||
forks_count: number;
|
||||
default_branch: string;
|
||||
updated_at: string;
|
||||
languages_url: string;
|
||||
}
|
||||
|
||||
interface GitHubOrganization {
|
||||
login: string;
|
||||
avatar_url: string;
|
||||
html_url: string;
|
||||
}
|
||||
|
||||
interface GitHubEvent {
|
||||
id: string;
|
||||
type: string;
|
||||
repo: {
|
||||
name: string;
|
||||
};
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
interface GitHubLanguageStats {
|
||||
[language: string]: number;
|
||||
}
|
||||
|
||||
interface GitHubStats {
|
||||
repos: GitHubRepoInfo[];
|
||||
totalStars: number;
|
||||
totalForks: number;
|
||||
organizations: GitHubOrganization[];
|
||||
recentActivity: GitHubEvent[];
|
||||
languages: GitHubLanguageStats;
|
||||
totalGists: number;
|
||||
}
|
||||
|
||||
interface GitHubConnection {
|
||||
user: GitHubUserResponse | null;
|
||||
token: string;
|
||||
tokenType: 'classic' | 'fine-grained';
|
||||
stats?: GitHubStats;
|
||||
}
|
||||
|
||||
export default function ConnectionsTab() {
|
||||
const [connection, setConnection] = useState<GitHubConnection>({
|
||||
user: null,
|
||||
token: '',
|
||||
tokenType: 'classic',
|
||||
});
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isConnecting, setIsConnecting] = useState(false);
|
||||
const [isFetchingStats, setIsFetchingStats] = useState(false);
|
||||
|
||||
// Load saved connection on mount
|
||||
useEffect(() => {
|
||||
const savedConnection = localStorage.getItem('github_connection');
|
||||
|
||||
if (savedConnection) {
|
||||
const parsed = JSON.parse(savedConnection);
|
||||
|
||||
// Ensure backward compatibility with existing connections
|
||||
if (!parsed.tokenType) {
|
||||
parsed.tokenType = 'classic';
|
||||
}
|
||||
|
||||
setConnection(parsed);
|
||||
|
||||
if (parsed.user && parsed.token) {
|
||||
fetchGitHubStats(parsed.token);
|
||||
}
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
const fetchGitHubStats = async (token: string) => {
|
||||
try {
|
||||
setIsFetchingStats(true);
|
||||
|
||||
// Fetch repositories - only owned by the authenticated user
|
||||
const reposResponse = await fetch(
|
||||
'https://api.github.com/user/repos?sort=updated&per_page=10&affiliation=owner,organization_member,collaborator',
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (!reposResponse.ok) {
|
||||
throw new Error('Failed to fetch repositories');
|
||||
}
|
||||
|
||||
const repos = (await reposResponse.json()) as GitHubRepoInfo[];
|
||||
|
||||
// Fetch organizations
|
||||
const orgsResponse = await fetch('https://api.github.com/user/orgs', {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!orgsResponse.ok) {
|
||||
throw new Error('Failed to fetch organizations');
|
||||
}
|
||||
|
||||
const organizations = (await orgsResponse.json()) as GitHubOrganization[];
|
||||
|
||||
// Fetch recent activity
|
||||
const eventsResponse = await fetch('https://api.github.com/users/' + connection.user?.login + '/events/public', {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!eventsResponse.ok) {
|
||||
throw new Error('Failed to fetch events');
|
||||
}
|
||||
|
||||
const recentActivity = ((await eventsResponse.json()) as GitHubEvent[]).slice(0, 5);
|
||||
|
||||
// Fetch languages for each repository
|
||||
const languagePromises = repos.map((repo) =>
|
||||
fetch(repo.languages_url, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}).then((res) => res.json() as Promise<Record<string, number>>),
|
||||
);
|
||||
|
||||
const repoLanguages = await Promise.all(languagePromises);
|
||||
const languages: GitHubLanguageStats = {};
|
||||
|
||||
repoLanguages.forEach((repoLang) => {
|
||||
Object.entries(repoLang).forEach(([lang, bytes]) => {
|
||||
languages[lang] = (languages[lang] || 0) + bytes;
|
||||
});
|
||||
});
|
||||
|
||||
// Calculate total stats
|
||||
const totalStars = repos.reduce((acc, repo) => acc + repo.stargazers_count, 0);
|
||||
const totalForks = repos.reduce((acc, repo) => acc + repo.forks_count, 0);
|
||||
const totalGists = connection.user?.public_gists || 0;
|
||||
|
||||
setConnection((prev) => ({
|
||||
...prev,
|
||||
stats: {
|
||||
repos,
|
||||
totalStars,
|
||||
totalForks,
|
||||
organizations,
|
||||
recentActivity,
|
||||
languages,
|
||||
totalGists,
|
||||
},
|
||||
}));
|
||||
} catch (error) {
|
||||
logStore.logError('Failed to fetch GitHub stats', { error });
|
||||
toast.error('Failed to fetch GitHub statistics');
|
||||
} finally {
|
||||
setIsFetchingStats(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchGithubUser = async (token: string) => {
|
||||
try {
|
||||
setIsConnecting(true);
|
||||
|
||||
const response = await fetch('https://api.github.com/user', {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Invalid token or unauthorized');
|
||||
}
|
||||
|
||||
const data = (await response.json()) as GitHubUserResponse;
|
||||
const newConnection: GitHubConnection = {
|
||||
user: data,
|
||||
token,
|
||||
tokenType: connection.tokenType,
|
||||
};
|
||||
|
||||
// Save connection
|
||||
localStorage.setItem('github_connection', JSON.stringify(newConnection));
|
||||
setConnection(newConnection);
|
||||
|
||||
// Fetch additional stats
|
||||
await fetchGitHubStats(token);
|
||||
|
||||
toast.success('Successfully connected to GitHub');
|
||||
} catch (error) {
|
||||
logStore.logError('Failed to authenticate with GitHub', { error });
|
||||
toast.error('Failed to connect to GitHub');
|
||||
setConnection({ user: null, token: '', tokenType: 'classic' });
|
||||
} finally {
|
||||
setIsConnecting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConnect = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
await fetchGithubUser(connection.token);
|
||||
};
|
||||
|
||||
const handleDisconnect = () => {
|
||||
localStorage.removeItem('github_connection');
|
||||
setConnection({ user: null, token: '', tokenType: 'classic' });
|
||||
toast.success('Disconnected from GitHub');
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return <LoadingSpinner />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
className="flex items-center gap-2 mb-2"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
>
|
||||
<div className="i-ph:plugs-connected w-5 h-5 text-purple-500" />
|
||||
<h2 className="text-lg font-medium text-bolt-elements-textPrimary">Connection Settings</h2>
|
||||
</motion.div>
|
||||
<p className="text-sm text-bolt-elements-textSecondary mb-6">
|
||||
Manage your external service connections and integrations
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{/* GitHub Connection */}
|
||||
<motion.div
|
||||
className="bg-[#FFFFFF] dark:bg-[#0A0A0A] rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A]"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="i-ph:github-logo w-5 h-5 text-bolt-elements-textPrimary" />
|
||||
<h3 className="text-base font-medium text-bolt-elements-textPrimary">GitHub Connection</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm text-bolt-elements-textSecondary mb-2">Token Type</label>
|
||||
<select
|
||||
value={connection.tokenType}
|
||||
onChange={(e) =>
|
||||
setConnection((prev) => ({ ...prev, tokenType: e.target.value as 'classic' | 'fine-grained' }))
|
||||
}
|
||||
disabled={isConnecting || !!connection.user}
|
||||
className={classNames(
|
||||
'w-full px-3 py-2 rounded-lg text-sm',
|
||||
'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
|
||||
'border border-[#E5E5E5] dark:border-[#333333]',
|
||||
'text-bolt-elements-textPrimary',
|
||||
'focus:outline-none focus:ring-1 focus:ring-purple-500',
|
||||
'disabled:opacity-50',
|
||||
)}
|
||||
>
|
||||
<option value="classic">Personal Access Token (Classic)</option>
|
||||
<option value="fine-grained">Fine-grained Token</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-bolt-elements-textSecondary mb-2">
|
||||
{connection.tokenType === 'classic' ? 'Personal Access Token' : 'Fine-grained Token'}
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={connection.token}
|
||||
onChange={(e) => setConnection((prev) => ({ ...prev, token: e.target.value }))}
|
||||
disabled={isConnecting || !!connection.user}
|
||||
placeholder={`Enter your GitHub ${connection.tokenType === 'classic' ? 'personal access token' : 'fine-grained token'}`}
|
||||
className={classNames(
|
||||
'w-full px-3 py-2 rounded-lg text-sm',
|
||||
'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
|
||||
'border border-[#E5E5E5] dark:border-[#333333]',
|
||||
'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
|
||||
'focus:outline-none focus:ring-1 focus:ring-purple-500',
|
||||
'disabled:opacity-50',
|
||||
)}
|
||||
/>
|
||||
<div className="mt-2 text-sm text-bolt-elements-textSecondary">
|
||||
<a
|
||||
href={`https://github.com/settings/tokens${connection.tokenType === 'fine-grained' ? '/beta' : '/new'}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-purple-500 hover:underline inline-flex items-center gap-1"
|
||||
>
|
||||
Get your token
|
||||
<div className="i-ph:arrow-square-out w-10 h-5" />
|
||||
</a>
|
||||
<span className="mx-2">•</span>
|
||||
<span>
|
||||
Required scopes:{' '}
|
||||
{connection.tokenType === 'classic'
|
||||
? 'repo, read:org, read:user'
|
||||
: 'Repository access, Organization access'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{!connection.user ? (
|
||||
<button
|
||||
onClick={handleConnect}
|
||||
disabled={isConnecting || !connection.token}
|
||||
className={classNames(
|
||||
'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
|
||||
'bg-purple-500 text-white',
|
||||
'hover:bg-purple-600',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
)}
|
||||
>
|
||||
{isConnecting ? (
|
||||
<>
|
||||
<div className="i-ph:spinner-gap animate-spin" />
|
||||
Connecting...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="i-ph:plug-charging w-4 h-4" />
|
||||
Connect
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleDisconnect}
|
||||
className={classNames(
|
||||
'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
|
||||
'bg-red-500 text-white',
|
||||
'hover:bg-red-600',
|
||||
)}
|
||||
>
|
||||
<div className="i-ph:plug-x w-4 h-4" />
|
||||
Disconnect
|
||||
</button>
|
||||
)}
|
||||
|
||||
{connection.user && (
|
||||
<span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
|
||||
<div className="i-ph:check-circle w-4 h-4" />
|
||||
Connected to GitHub
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{connection.user && (
|
||||
<div className="p-4 bg-[#F8F8F8] dark:bg-[#1A1A1A] rounded-lg">
|
||||
<div className="flex items-center gap-4">
|
||||
<img
|
||||
src={connection.user.avatar_url}
|
||||
alt={connection.user.login}
|
||||
className="w-12 h-12 rounded-full"
|
||||
/>
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-bolt-elements-textPrimary">{connection.user.name}</h4>
|
||||
<p className="text-sm text-bolt-elements-textSecondary">@{connection.user.login}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isFetchingStats ? (
|
||||
<div className="mt-4 flex items-center gap-2 text-sm text-bolt-elements-textSecondary">
|
||||
<div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
|
||||
Fetching GitHub stats...
|
||||
</div>
|
||||
) : (
|
||||
connection.stats && (
|
||||
<div className="mt-4 grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-bolt-elements-textSecondary">Public Repos</p>
|
||||
<p className="text-lg font-medium text-bolt-elements-textPrimary">
|
||||
{connection.user.public_repos}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-bolt-elements-textSecondary">Total Stars</p>
|
||||
<p className="text-lg font-medium text-bolt-elements-textPrimary">
|
||||
{connection.stats.totalStars}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-bolt-elements-textSecondary">Total Forks</p>
|
||||
<p className="text-lg font-medium text-bolt-elements-textPrimary">
|
||||
{connection.stats.totalForks}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{connection.user && connection.stats && (
|
||||
<div className="mt-6 border-t border-[#E5E5E5] dark:border-[#1A1A1A] pt-6">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<img
|
||||
src={connection.user.avatar_url}
|
||||
alt={connection.user.login}
|
||||
className="w-16 h-16 rounded-full"
|
||||
/>
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-bolt-elements-textPrimary">
|
||||
{connection.user.name || connection.user.login}
|
||||
</h3>
|
||||
{connection.user.bio && (
|
||||
<p className="text-sm text-bolt-elements-textSecondary">{connection.user.bio}</p>
|
||||
)}
|
||||
<div className="flex gap-4 mt-2 text-sm text-bolt-elements-textSecondary">
|
||||
<span className="flex items-center gap-1">
|
||||
<div className="i-ph:users w-4 h-4" />
|
||||
{connection.user.followers} followers
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<div className="i-ph:star w-4 h-4" />
|
||||
{connection.stats.totalStars} stars
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<div className="i-ph:git-fork w-4 h-4" />
|
||||
{connection.stats.totalForks} forks
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Organizations Section */}
|
||||
{connection.stats.organizations.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Organizations</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{connection.stats.organizations.map((org) => (
|
||||
<a
|
||||
key={org.login}
|
||||
href={org.html_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 p-2 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A] hover:bg-[#F0F0F0] dark:hover:bg-[#252525] transition-colors"
|
||||
>
|
||||
<img src={org.avatar_url} alt={org.login} className="w-6 h-6 rounded-md" />
|
||||
<span className="text-sm text-bolt-elements-textPrimary">{org.login}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Languages Section */}
|
||||
<div className="mb-6">
|
||||
<h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Top Languages</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{Object.entries(connection.stats.languages)
|
||||
.sort(([, a], [, b]) => b - a)
|
||||
.slice(0, 5)
|
||||
.map(([language]) => (
|
||||
<span
|
||||
key={language}
|
||||
className="px-3 py-1 text-xs rounded-full bg-purple-500/10 text-purple-500 dark:bg-purple-500/20"
|
||||
>
|
||||
{language}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Activity Section */}
|
||||
<div className="mb-6">
|
||||
<h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Recent Activity</h4>
|
||||
<div className="space-y-3">
|
||||
{connection.stats.recentActivity.map((event) => (
|
||||
<div key={event.id} className="p-3 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A] text-sm">
|
||||
<div className="flex items-center gap-2 text-bolt-elements-textPrimary">
|
||||
<div className="i-ph:git-commit w-4 h-4 text-bolt-elements-textSecondary" />
|
||||
<span className="font-medium">{event.type.replace('Event', '')}</span>
|
||||
<span>on</span>
|
||||
<a
|
||||
href={`https://github.com/${event.repo.name}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-purple-500 hover:underline"
|
||||
>
|
||||
{event.repo.name}
|
||||
</a>
|
||||
</div>
|
||||
<div className="mt-1 text-xs text-bolt-elements-textSecondary">
|
||||
{new Date(event.created_at).toLocaleDateString()} at{' '}
|
||||
{new Date(event.created_at).toLocaleTimeString()}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional Stats */}
|
||||
<div className="grid grid-cols-4 gap-4 mb-6">
|
||||
<div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A]">
|
||||
<div className="text-sm text-bolt-elements-textSecondary">Member Since</div>
|
||||
<div className="text-lg font-medium text-bolt-elements-textPrimary">
|
||||
{new Date(connection.user.created_at).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A]">
|
||||
<div className="text-sm text-bolt-elements-textSecondary">Public Gists</div>
|
||||
<div className="text-lg font-medium text-bolt-elements-textPrimary">
|
||||
{connection.stats.totalGists}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A]">
|
||||
<div className="text-sm text-bolt-elements-textSecondary">Organizations</div>
|
||||
<div className="text-lg font-medium text-bolt-elements-textPrimary">
|
||||
{connection.stats.organizations.length}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A]">
|
||||
<div className="text-sm text-bolt-elements-textSecondary">Languages</div>
|
||||
<div className="text-lg font-medium text-bolt-elements-textPrimary">
|
||||
{Object.keys(connection.stats.languages).length}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Existing repositories section */}
|
||||
<h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Recent Repositories</h4>
|
||||
<div className="space-y-3">
|
||||
{connection.stats.repos.map((repo) => (
|
||||
<a
|
||||
key={repo.full_name}
|
||||
href={repo.html_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block p-3 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A] hover:bg-[#F0F0F0] dark:hover:bg-[#252525] transition-colors"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h5 className="text-sm font-medium text-bolt-elements-textPrimary flex items-center gap-2">
|
||||
<div className="i-ph:git-repository w-4 h-4 text-bolt-elements-textSecondary" />
|
||||
{repo.name}
|
||||
</h5>
|
||||
{repo.description && (
|
||||
<p className="text-xs text-bolt-elements-textSecondary mt-1">{repo.description}</p>
|
||||
)}
|
||||
<div className="flex items-center gap-2 mt-2 text-xs text-bolt-elements-textSecondary">
|
||||
<span className="flex items-center gap-1">
|
||||
<div className="i-ph:git-branch w-3 h-3" />
|
||||
{repo.default_branch}
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span>Updated {new Date(repo.updated_at).toLocaleDateString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
|
||||
<span className="flex items-center gap-1">
|
||||
<div className="i-ph:star w-3 h-3" />
|
||||
{repo.stargazers_count}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<div className="i-ph:git-fork w-3 h-3" />
|
||||
{repo.forks_count}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LoadingSpinner() {
|
||||
return (
|
||||
<div className="flex items-center justify-center p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
|
||||
<span className="text-bolt-elements-textSecondary">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,180 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import type { GitHubAuthState } from '~/components/@settings/tabs/connections/types/GitHub';
|
||||
import Cookies from 'js-cookie';
|
||||
import { getLocalStorage } from '~/lib/persistence';
|
||||
|
||||
const GITHUB_TOKEN_KEY = 'github_token';
|
||||
|
||||
interface ConnectionFormProps {
|
||||
authState: GitHubAuthState;
|
||||
setAuthState: React.Dispatch<React.SetStateAction<GitHubAuthState>>;
|
||||
onSave: (e: React.FormEvent) => void;
|
||||
onDisconnect: () => void;
|
||||
}
|
||||
|
||||
export function ConnectionForm({ authState, setAuthState, onSave, onDisconnect }: ConnectionFormProps) {
|
||||
// Check for saved token on mount
|
||||
useEffect(() => {
|
||||
const savedToken = Cookies.get(GITHUB_TOKEN_KEY) || getLocalStorage(GITHUB_TOKEN_KEY);
|
||||
|
||||
if (savedToken && !authState.tokenInfo?.token) {
|
||||
setAuthState((prev: GitHubAuthState) => ({
|
||||
...prev,
|
||||
tokenInfo: {
|
||||
token: savedToken,
|
||||
scope: [],
|
||||
avatar_url: '',
|
||||
name: null,
|
||||
created_at: new Date().toISOString(),
|
||||
followers: 0,
|
||||
},
|
||||
}));
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] overflow-hidden">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
|
||||
<div className="i-ph:plug-fill text-bolt-elements-textTertiary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-bolt-elements-textPrimary">Connection Settings</h3>
|
||||
<p className="text-sm text-bolt-elements-textSecondary">Configure your GitHub connection</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={onSave} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="username" className="block text-sm font-medium text-bolt-elements-textSecondary mb-2">
|
||||
GitHub Username
|
||||
</label>
|
||||
<input
|
||||
id="username"
|
||||
type="text"
|
||||
value={authState.username}
|
||||
onChange={(e) => setAuthState((prev: GitHubAuthState) => ({ ...prev, username: e.target.value }))}
|
||||
className={classNames(
|
||||
'w-full px-4 py-2.5 bg-[#F5F5F5] dark:bg-[#1A1A1A] border rounded-lg',
|
||||
'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary text-base',
|
||||
'border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
placeholder="e.g., octocat"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label htmlFor="token" className="block text-sm font-medium text-bolt-elements-textSecondary">
|
||||
Personal Access Token
|
||||
</label>
|
||||
<a
|
||||
href="https://github.com/settings/tokens/new?scopes=repo,user,read:org,workflow,delete_repo,write:packages,read:packages"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={classNames(
|
||||
'inline-flex items-center gap-1.5 text-xs',
|
||||
'text-purple-500 hover:text-purple-600 dark:text-purple-400 dark:hover:text-purple-300',
|
||||
'transition-colors duration-200',
|
||||
)}
|
||||
>
|
||||
<span>Generate new token</span>
|
||||
<div className="i-ph:plus-circle" />
|
||||
</a>
|
||||
</div>
|
||||
<input
|
||||
id="token"
|
||||
type="password"
|
||||
value={authState.tokenInfo?.token || ''}
|
||||
onChange={(e) =>
|
||||
setAuthState((prev: GitHubAuthState) => ({
|
||||
...prev,
|
||||
tokenInfo: {
|
||||
token: e.target.value,
|
||||
scope: [],
|
||||
avatar_url: '',
|
||||
name: null,
|
||||
created_at: new Date().toISOString(),
|
||||
followers: 0,
|
||||
},
|
||||
username: '',
|
||||
isConnected: false,
|
||||
isVerifying: false,
|
||||
isLoadingRepos: false,
|
||||
}))
|
||||
}
|
||||
className={classNames(
|
||||
'w-full px-4 py-2.5 bg-[#F5F5F5] dark:bg-[#1A1A1A] border rounded-lg',
|
||||
'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary text-base',
|
||||
'border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
placeholder="ghp_xxxxxxxxxxxx"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-4 border-t border-[#E5E5E5] dark:border-[#1A1A1A]">
|
||||
<div className="flex items-center gap-4">
|
||||
{!authState.isConnected ? (
|
||||
<button
|
||||
type="submit"
|
||||
disabled={authState.isVerifying || !authState.username || !authState.tokenInfo?.token}
|
||||
className={classNames(
|
||||
'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
|
||||
'bg-purple-500 hover:bg-purple-600',
|
||||
'text-white',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
)}
|
||||
>
|
||||
{authState.isVerifying ? (
|
||||
<>
|
||||
<div className="i-ph:spinner animate-spin" />
|
||||
<span>Verifying...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="i-ph:plug-fill" />
|
||||
<span>Connect</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={onDisconnect}
|
||||
className={classNames(
|
||||
'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
|
||||
'bg-[#F5F5F5] hover:bg-red-500/10 hover:text-red-500',
|
||||
'dark:bg-[#1A1A1A] dark:hover:bg-red-500/20 dark:hover:text-red-500',
|
||||
'text-bolt-elements-textPrimary',
|
||||
)}
|
||||
>
|
||||
<div className="i-ph:plug-fill" />
|
||||
<span>Disconnect</span>
|
||||
</button>
|
||||
<span className="inline-flex items-center gap-2 px-3 py-1.5 text-sm text-green-600 dark:text-green-400 bg-green-500/5 rounded-lg border border-green-500/20">
|
||||
<div className="i-ph:check-circle-fill" />
|
||||
<span>Connected</span>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{authState.rateLimits && (
|
||||
<div className="flex items-center gap-2 text-sm text-bolt-elements-textTertiary">
|
||||
<div className="i-ph:clock-countdown opacity-60" />
|
||||
<span>Rate limit resets at {authState.rateLimits.reset.toLocaleTimeString()}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
import { useState } from 'react';
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import type { GitHubRepoInfo } from '~/components/@settings/tabs/connections/types/GitHub';
|
||||
import { GitBranch } from '@phosphor-icons/react';
|
||||
|
||||
interface GitHubBranch {
|
||||
name: string;
|
||||
default?: boolean;
|
||||
}
|
||||
|
||||
interface CreateBranchDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: (branchName: string, sourceBranch: string) => void;
|
||||
repository: GitHubRepoInfo;
|
||||
branches?: GitHubBranch[];
|
||||
}
|
||||
|
||||
export function CreateBranchDialog({ isOpen, onClose, onConfirm, repository, branches }: CreateBranchDialogProps) {
|
||||
const [branchName, setBranchName] = useState('');
|
||||
const [sourceBranch, setSourceBranch] = useState(branches?.find((b) => b.default)?.name || 'main');
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
onConfirm(branchName, sourceBranch);
|
||||
setBranchName('');
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog.Root open={isOpen} onOpenChange={onClose}>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-black/50 dark:bg-black/80" />
|
||||
<Dialog.Content
|
||||
className={classNames(
|
||||
'fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]',
|
||||
'w-full max-w-md p-6 rounded-xl shadow-lg',
|
||||
'bg-white dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
)}
|
||||
>
|
||||
<Dialog.Title className="text-lg font-medium text-bolt-elements-textPrimary mb-4">
|
||||
Create New Branch
|
||||
</Dialog.Title>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="branchName" className="block text-sm font-medium text-bolt-elements-textSecondary mb-2">
|
||||
Branch Name
|
||||
</label>
|
||||
<input
|
||||
id="branchName"
|
||||
type="text"
|
||||
value={branchName}
|
||||
onChange={(e) => setBranchName(e.target.value)}
|
||||
placeholder="feature/my-new-branch"
|
||||
className={classNames(
|
||||
'w-full px-3 py-2 rounded-lg',
|
||||
'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'text-bolt-elements-textPrimary placeholder:text-bolt-elements-textTertiary',
|
||||
'focus:outline-none focus:ring-2 focus:ring-purple-500/50',
|
||||
)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="sourceBranch"
|
||||
className="block text-sm font-medium text-bolt-elements-textSecondary mb-2"
|
||||
>
|
||||
Source Branch
|
||||
</label>
|
||||
<select
|
||||
id="sourceBranch"
|
||||
value={sourceBranch}
|
||||
onChange={(e) => setSourceBranch(e.target.value)}
|
||||
className={classNames(
|
||||
'w-full px-3 py-2 rounded-lg',
|
||||
'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'text-bolt-elements-textPrimary',
|
||||
'focus:outline-none focus:ring-2 focus:ring-purple-500/50',
|
||||
)}
|
||||
>
|
||||
{branches?.map((branch) => (
|
||||
<option key={branch.name} value={branch.name}>
|
||||
{branch.name} {branch.default ? '(default)' : ''}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 p-3 bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-lg">
|
||||
<h4 className="text-sm font-medium text-bolt-elements-textSecondary mb-2">Branch Overview</h4>
|
||||
<ul className="space-y-2 text-sm text-bolt-elements-textSecondary">
|
||||
<li className="flex items-center gap-2">
|
||||
<GitBranch className="text-lg" />
|
||||
Repository: {repository.name}
|
||||
</li>
|
||||
{branchName && (
|
||||
<li className="flex items-center gap-2">
|
||||
<div className="i-ph:check-circle text-green-500" />
|
||||
New branch will be created as: {branchName}
|
||||
</li>
|
||||
)}
|
||||
<li className="flex items-center gap-2">
|
||||
<div className="i-ph:check-circle text-green-500" />
|
||||
Based on: {sourceBranch}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className={classNames(
|
||||
'px-4 py-2 rounded-lg text-sm font-medium',
|
||||
'text-bolt-elements-textPrimary',
|
||||
'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
|
||||
'hover:bg-purple-500/10 hover:text-purple-500',
|
||||
'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
|
||||
'transition-colors',
|
||||
)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className={classNames(
|
||||
'px-4 py-2 rounded-lg text-sm font-medium',
|
||||
'text-white bg-purple-500',
|
||||
'hover:bg-purple-600',
|
||||
'transition-colors',
|
||||
)}
|
||||
>
|
||||
Create Branch
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,528 @@
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { motion } from 'framer-motion';
|
||||
import { getLocalStorage } from '~/lib/persistence';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import type { GitHubUserResponse } from '~/types/GitHub';
|
||||
import { logStore } from '~/lib/stores/logs';
|
||||
import { workbenchStore } from '~/lib/stores/workbench';
|
||||
import { extractRelativePath } from '~/utils/diff';
|
||||
import { formatSize } from '~/utils/formatSize';
|
||||
import type { FileMap, File } from '~/lib/stores/files';
|
||||
import { Octokit } from '@octokit/rest';
|
||||
|
||||
interface PushToGitHubDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onPush: (repoName: string, username?: string, token?: string, isPrivate?: boolean) => Promise<string>;
|
||||
}
|
||||
|
||||
interface GitHubRepo {
|
||||
name: string;
|
||||
full_name: string;
|
||||
html_url: string;
|
||||
description: string;
|
||||
stargazers_count: number;
|
||||
forks_count: number;
|
||||
default_branch: string;
|
||||
updated_at: string;
|
||||
language: string;
|
||||
private: boolean;
|
||||
}
|
||||
|
||||
export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDialogProps) {
|
||||
const [repoName, setRepoName] = useState('');
|
||||
const [isPrivate, setIsPrivate] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [user, setUser] = useState<GitHubUserResponse | null>(null);
|
||||
const [recentRepos, setRecentRepos] = useState<GitHubRepo[]>([]);
|
||||
const [isFetchingRepos, setIsFetchingRepos] = useState(false);
|
||||
const [showSuccessDialog, setShowSuccessDialog] = useState(false);
|
||||
const [createdRepoUrl, setCreatedRepoUrl] = useState('');
|
||||
const [pushedFiles, setPushedFiles] = useState<{ path: string; size: number }[]>([]);
|
||||
|
||||
// Load GitHub connection on mount
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
const connection = getLocalStorage('github_connection');
|
||||
|
||||
if (connection?.user && connection?.token) {
|
||||
setUser(connection.user);
|
||||
|
||||
// Only fetch if we have both user and token
|
||||
if (connection.token.trim()) {
|
||||
fetchRecentRepos(connection.token);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const fetchRecentRepos = async (token: string) => {
|
||||
if (!token) {
|
||||
logStore.logError('No GitHub token available');
|
||||
toast.error('GitHub authentication required');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsFetchingRepos(true);
|
||||
|
||||
const response = await fetch(
|
||||
'https://api.github.com/user/repos?sort=updated&per_page=5&type=all&affiliation=owner,organization_member',
|
||||
{
|
||||
headers: {
|
||||
Accept: 'application/vnd.github.v3+json',
|
||||
Authorization: `Bearer ${token.trim()}`,
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
|
||||
if (response.status === 401) {
|
||||
toast.error('GitHub token expired. Please reconnect your account.');
|
||||
|
||||
// Clear invalid token
|
||||
const connection = getLocalStorage('github_connection');
|
||||
|
||||
if (connection) {
|
||||
localStorage.removeItem('github_connection');
|
||||
setUser(null);
|
||||
}
|
||||
} else {
|
||||
logStore.logError('Failed to fetch GitHub repositories', {
|
||||
status: response.status,
|
||||
statusText: response.statusText,
|
||||
error: errorData,
|
||||
});
|
||||
toast.error(`Failed to fetch repositories: ${response.statusText}`);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const repos = (await response.json()) as GitHubRepo[];
|
||||
setRecentRepos(repos);
|
||||
} catch (error) {
|
||||
logStore.logError('Failed to fetch GitHub repositories', { error });
|
||||
toast.error('Failed to fetch recent repositories');
|
||||
} finally {
|
||||
setIsFetchingRepos(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
const connection = getLocalStorage('github_connection');
|
||||
|
||||
if (!connection?.token || !connection?.user) {
|
||||
toast.error('Please connect your GitHub account in Settings > Connections first');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!repoName.trim()) {
|
||||
toast.error('Repository name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
// Check if repository exists first
|
||||
const octokit = new Octokit({ auth: connection.token });
|
||||
|
||||
try {
|
||||
await octokit.repos.get({
|
||||
owner: connection.user.login,
|
||||
repo: repoName,
|
||||
});
|
||||
|
||||
// If we get here, the repo exists
|
||||
const confirmOverwrite = window.confirm(
|
||||
`Repository "${repoName}" already exists. Do you want to update it? This will add or modify files in the repository.`,
|
||||
);
|
||||
|
||||
if (!confirmOverwrite) {
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
// 404 means repo doesn't exist, which is what we want for new repos
|
||||
if (error instanceof Error && 'status' in error && error.status !== 404) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
const repoUrl = await onPush(repoName, connection.user.login, connection.token, isPrivate);
|
||||
setCreatedRepoUrl(repoUrl);
|
||||
|
||||
// Get list of pushed files
|
||||
const files = workbenchStore.files.get();
|
||||
const filesList = Object.entries(files as FileMap)
|
||||
.filter(([, dirent]) => dirent?.type === 'file' && !dirent.isBinary)
|
||||
.map(([path, dirent]) => ({
|
||||
path: extractRelativePath(path),
|
||||
size: new TextEncoder().encode((dirent as File).content || '').length,
|
||||
}));
|
||||
|
||||
setPushedFiles(filesList);
|
||||
setShowSuccessDialog(true);
|
||||
} catch (error) {
|
||||
console.error('Error pushing to GitHub:', error);
|
||||
toast.error('Failed to push to GitHub. Please check your repository name and try again.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setRepoName('');
|
||||
setIsPrivate(false);
|
||||
setShowSuccessDialog(false);
|
||||
setCreatedRepoUrl('');
|
||||
onClose();
|
||||
};
|
||||
|
||||
// Success Dialog
|
||||
if (showSuccessDialog) {
|
||||
return (
|
||||
<Dialog.Root open={isOpen} onOpenChange={(open) => !open && handleClose()}>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999]" />
|
||||
<div className="fixed inset-0 flex items-center justify-center z-[9999]">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="w-[90vw] md:w-[600px] max-h-[85vh] overflow-y-auto"
|
||||
>
|
||||
<Dialog.Content className="bg-white dark:bg-[#1E1E1E] rounded-lg border border-[#E5E5E5] dark:border-[#333333] shadow-xl">
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-green-500">
|
||||
<div className="i-ph:check-circle w-5 h-5" />
|
||||
<h3 className="text-lg font-medium">Successfully pushed to GitHub</h3>
|
||||
</div>
|
||||
<Dialog.Close
|
||||
onClick={handleClose}
|
||||
className="p-2 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400"
|
||||
>
|
||||
<div className="i-ph:x w-5 h-5" />
|
||||
</Dialog.Close>
|
||||
</div>
|
||||
|
||||
<div className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg p-3 text-left">
|
||||
<p className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark mb-2">
|
||||
Repository URL
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="flex-1 text-sm bg-bolt-elements-background dark:bg-bolt-elements-background-dark px-3 py-2 rounded border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark font-mono">
|
||||
{createdRepoUrl}
|
||||
</code>
|
||||
<motion.button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(createdRepoUrl);
|
||||
toast.success('URL copied to clipboard');
|
||||
}}
|
||||
className="p-2 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary dark:text-bolt-elements-textSecondary-dark dark:hover:text-bolt-elements-textPrimary-dark"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
<div className="i-ph:copy w-4 h-4" />
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg p-3">
|
||||
<p className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark mb-2">
|
||||
Pushed Files ({pushedFiles.length})
|
||||
</p>
|
||||
<div className="max-h-[200px] overflow-y-auto custom-scrollbar">
|
||||
{pushedFiles.map((file) => (
|
||||
<div
|
||||
key={file.path}
|
||||
className="flex items-center justify-between py-1 text-sm text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark"
|
||||
>
|
||||
<span className="font-mono truncate flex-1">{file.path}</span>
|
||||
<span className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark ml-2">
|
||||
{formatSize(file.size)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<motion.a
|
||||
href={createdRepoUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-4 py-2 rounded-lg bg-purple-500 text-white hover:bg-purple-600 text-sm inline-flex items-center gap-2"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<div className="i-ph:github-logo w-4 h-4" />
|
||||
View Repository
|
||||
</motion.a>
|
||||
<motion.button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(createdRepoUrl);
|
||||
toast.success('URL copied to clipboard');
|
||||
}}
|
||||
className="px-4 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] text-gray-600 dark:text-gray-400 hover:bg-[#E5E5E5] dark:hover:bg-[#252525] text-sm inline-flex items-center gap-2"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<div className="i-ph:copy w-4 h-4" />
|
||||
Copy URL
|
||||
</motion.button>
|
||||
<motion.button
|
||||
onClick={handleClose}
|
||||
className="px-4 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] text-gray-600 dark:text-gray-400 hover:bg-[#E5E5E5] dark:hover:bg-[#252525] text-sm"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
Close
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</motion.div>
|
||||
</div>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<Dialog.Root open={isOpen} onOpenChange={(open) => !open && handleClose()}>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999]" />
|
||||
<div className="fixed inset-0 flex items-center justify-center z-[9999]">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="w-[90vw] md:w-[500px]"
|
||||
>
|
||||
<Dialog.Content className="bg-white dark:bg-[#0A0A0A] rounded-lg p-6 border border-[#E5E5E5] dark:border-[#1A1A1A] shadow-xl">
|
||||
<div className="text-center space-y-4">
|
||||
<motion.div
|
||||
initial={{ scale: 0.8 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="mx-auto w-12 h-12 rounded-xl bg-bolt-elements-background-depth-3 flex items-center justify-center text-purple-500"
|
||||
>
|
||||
<div className="i-ph:github-logo w-6 h-6" />
|
||||
</motion.div>
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white">GitHub Connection Required</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Please connect your GitHub account in Settings {'>'} Connections to push your code to GitHub.
|
||||
</p>
|
||||
<motion.button
|
||||
className="px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600 inline-flex items-center gap-2"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={handleClose}
|
||||
>
|
||||
<div className="i-ph:x-circle" />
|
||||
Close
|
||||
</motion.button>
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</motion.div>
|
||||
</div>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog.Root open={isOpen} onOpenChange={(open) => !open && handleClose()}>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999]" />
|
||||
<div className="fixed inset-0 flex items-center justify-center z-[9999]">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="w-[90vw] md:w-[500px]"
|
||||
>
|
||||
<Dialog.Content className="bg-white dark:bg-[#0A0A0A] rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A] shadow-xl">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<motion.div
|
||||
initial={{ scale: 0.8 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="w-10 h-10 rounded-xl bg-bolt-elements-background-depth-3 flex items-center justify-center text-purple-500"
|
||||
>
|
||||
<div className="i-ph:git-branch w-5 h-5" />
|
||||
</motion.div>
|
||||
<div>
|
||||
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">
|
||||
Push to GitHub
|
||||
</Dialog.Title>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Push your code to a new or existing GitHub repository
|
||||
</p>
|
||||
</div>
|
||||
<Dialog.Close
|
||||
className="ml-auto p-2 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<div className="i-ph:x w-5 h-5" />
|
||||
</Dialog.Close>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 mb-6 p-3 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg">
|
||||
<img src={user.avatar_url} alt={user.login} className="w-10 h-10 rounded-full" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">{user.name || user.login}</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">@{user.login}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="repoName" className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Repository Name
|
||||
</label>
|
||||
<input
|
||||
id="repoName"
|
||||
type="text"
|
||||
value={repoName}
|
||||
onChange={(e) => setRepoName(e.target.value)}
|
||||
placeholder="my-awesome-project"
|
||||
className="w-full px-4 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 border border-[#E5E5E5] dark:border-[#1A1A1A] text-gray-900 dark:text-white placeholder-gray-400"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{recentRepos.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-gray-600 dark:text-gray-400">Recent Repositories</label>
|
||||
<div className="space-y-2">
|
||||
{recentRepos.map((repo) => (
|
||||
<motion.button
|
||||
key={repo.full_name}
|
||||
type="button"
|
||||
onClick={() => setRepoName(repo.name)}
|
||||
className="w-full p-3 text-left rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 transition-colors group"
|
||||
whileHover={{ scale: 1.01 }}
|
||||
whileTap={{ scale: 0.99 }}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="i-ph:git-repository w-4 h-4 text-purple-500" />
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white group-hover:text-purple-500">
|
||||
{repo.name}
|
||||
</span>
|
||||
</div>
|
||||
{repo.private && (
|
||||
<span className="text-xs px-2 py-1 rounded-full bg-purple-500/10 text-purple-500">
|
||||
Private
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{repo.description && (
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400 line-clamp-2">
|
||||
{repo.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="mt-2 flex items-center gap-3 text-xs text-gray-400 dark:text-gray-500">
|
||||
{repo.language && (
|
||||
<span className="flex items-center gap-1">
|
||||
<div className="i-ph:code w-3 h-3" />
|
||||
{repo.language}
|
||||
</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<div className="i-ph:star w-3 h-3" />
|
||||
{repo.stargazers_count.toLocaleString()}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<div className="i-ph:git-fork w-3 h-3" />
|
||||
{repo.forks_count.toLocaleString()}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<div className="i-ph:clock w-3 h-3" />
|
||||
{new Date(repo.updated_at).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isFetchingRepos && (
|
||||
<div className="flex items-center justify-center py-4 text-gray-500 dark:text-gray-400">
|
||||
<div className="i-ph:spinner-gap-bold animate-spin w-4 h-4 mr-2" />
|
||||
Loading repositories...
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="private"
|
||||
checked={isPrivate}
|
||||
onChange={(e) => setIsPrivate(e.target.checked)}
|
||||
className="rounded border-[#E5E5E5] dark:border-[#1A1A1A] text-purple-500 focus:ring-purple-500 dark:bg-[#0A0A0A]"
|
||||
/>
|
||||
<label htmlFor="private" className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Make repository private
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 flex gap-2">
|
||||
<motion.button
|
||||
type="button"
|
||||
onClick={handleClose}
|
||||
className="px-4 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] text-gray-600 dark:text-gray-400 hover:bg-[#E5E5E5] dark:hover:bg-[#252525] text-sm"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
Cancel
|
||||
</motion.button>
|
||||
<motion.button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className={classNames(
|
||||
'flex-1 px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 text-sm inline-flex items-center justify-center gap-2',
|
||||
isLoading ? 'opacity-50 cursor-not-allowed' : '',
|
||||
)}
|
||||
whileHover={!isLoading ? { scale: 1.02 } : {}}
|
||||
whileTap={!isLoading ? { scale: 0.98 } : {}}
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
|
||||
Pushing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="i-ph:git-branch w-4 h-4" />
|
||||
Push to GitHub
|
||||
</>
|
||||
)}
|
||||
</motion.button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</motion.div>
|
||||
</div>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,693 @@
|
||||
import type { GitHubRepoInfo, GitHubContent, RepositoryStats } from '~/types/GitHub';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { getLocalStorage } from '~/lib/persistence';
|
||||
import { motion } from 'framer-motion';
|
||||
import { formatSize } from '~/utils/formatSize';
|
||||
import { Input } from '~/components/ui/Input';
|
||||
|
||||
interface GitHubTreeResponse {
|
||||
tree: Array<{
|
||||
path: string;
|
||||
type: string;
|
||||
size?: number;
|
||||
}>;
|
||||
}
|
||||
|
||||
interface RepositorySelectionDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSelect: (url: string) => void;
|
||||
}
|
||||
|
||||
interface SearchFilters {
|
||||
language?: string;
|
||||
stars?: number;
|
||||
forks?: number;
|
||||
}
|
||||
|
||||
interface StatsDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: () => void;
|
||||
stats: RepositoryStats;
|
||||
isLargeRepo?: boolean;
|
||||
}
|
||||
|
||||
function StatsDialog({ isOpen, onClose, onConfirm, stats, isLargeRepo }: StatsDialogProps) {
|
||||
return (
|
||||
<Dialog.Root open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999]" />
|
||||
<div className="fixed inset-0 flex items-center justify-center z-[9999]">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="w-[90vw] md:w-[500px]"
|
||||
>
|
||||
<Dialog.Content className="bg-white dark:bg-[#1E1E1E] rounded-lg border border-[#E5E5E5] dark:border-[#333333] shadow-xl">
|
||||
<div className="p-6 space-y-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-[#111111] dark:text-white">Repository Overview</h3>
|
||||
<div className="mt-4 space-y-2">
|
||||
<p className="text-sm text-[#666666] dark:text-[#999999]">Repository Statistics:</p>
|
||||
<div className="space-y-2 text-sm text-[#111111] dark:text-white">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="i-ph:files text-purple-500 w-4 h-4" />
|
||||
<span>Total Files: {stats.totalFiles}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="i-ph:database text-purple-500 w-4 h-4" />
|
||||
<span>Total Size: {formatSize(stats.totalSize)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="i-ph:code text-purple-500 w-4 h-4" />
|
||||
<span>
|
||||
Languages:{' '}
|
||||
{Object.entries(stats.languages)
|
||||
.sort(([, a], [, b]) => b - a)
|
||||
.slice(0, 3)
|
||||
.map(([lang, size]) => `${lang} (${formatSize(size)})`)
|
||||
.join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
{stats.hasPackageJson && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="i-ph:package text-purple-500 w-4 h-4" />
|
||||
<span>Has package.json</span>
|
||||
</div>
|
||||
)}
|
||||
{stats.hasDependencies && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="i-ph:tree-structure text-purple-500 w-4 h-4" />
|
||||
<span>Has dependencies</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{isLargeRepo && (
|
||||
<div className="mt-4 p-3 bg-yellow-50 dark:bg-yellow-500/10 rounded-lg text-sm flex items-start gap-2">
|
||||
<span className="i-ph:warning text-yellow-600 dark:text-yellow-500 w-4 h-4 flex-shrink-0 mt-0.5" />
|
||||
<div className="text-yellow-800 dark:text-yellow-500">
|
||||
This repository is quite large ({formatSize(stats.totalSize)}). Importing it might take a while
|
||||
and could impact performance.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-[#E5E5E5] dark:border-[#333333] p-4 flex justify-end gap-3 bg-[#F9F9F9] dark:bg-[#252525] rounded-b-lg">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#333333] text-[#666666] hover:text-[#111111] dark:text-[#999999] dark:hover:text-white transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={onConfirm}
|
||||
className="px-4 py-2 rounded-lg bg-purple-500 text-white hover:bg-purple-600 transition-colors"
|
||||
>
|
||||
OK
|
||||
</button>
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</motion.div>
|
||||
</div>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
|
||||
export function RepositorySelectionDialog({ isOpen, onClose, onSelect }: RepositorySelectionDialogProps) {
|
||||
const [selectedRepository, setSelectedRepository] = useState<GitHubRepoInfo | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [repositories, setRepositories] = useState<GitHubRepoInfo[]>([]);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [searchResults, setSearchResults] = useState<GitHubRepoInfo[]>([]);
|
||||
const [activeTab, setActiveTab] = useState<'my-repos' | 'search' | 'url'>('my-repos');
|
||||
const [customUrl, setCustomUrl] = useState('');
|
||||
const [branches, setBranches] = useState<{ name: string; default?: boolean }[]>([]);
|
||||
const [selectedBranch, setSelectedBranch] = useState('');
|
||||
const [filters, setFilters] = useState<SearchFilters>({});
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const [stats, setStats] = useState<RepositoryStats | null>(null);
|
||||
const [showStatsDialog, setShowStatsDialog] = useState(false);
|
||||
const [currentStats, setCurrentStats] = useState<RepositoryStats | null>(null);
|
||||
const [pendingGitUrl, setPendingGitUrl] = useState<string>('');
|
||||
|
||||
// Fetch user's repositories when dialog opens
|
||||
useEffect(() => {
|
||||
if (isOpen && activeTab === 'my-repos') {
|
||||
fetchUserRepos();
|
||||
}
|
||||
}, [isOpen, activeTab]);
|
||||
|
||||
const fetchUserRepos = async () => {
|
||||
const connection = getLocalStorage('github_connection');
|
||||
|
||||
if (!connection?.token) {
|
||||
toast.error('Please connect your GitHub account first');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const response = await fetch('https://api.github.com/user/repos?sort=updated&per_page=100&type=all', {
|
||||
headers: {
|
||||
Authorization: `Bearer ${connection.token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch repositories');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Add type assertion and validation
|
||||
if (
|
||||
Array.isArray(data) &&
|
||||
data.every((item) => typeof item === 'object' && item !== null && 'full_name' in item)
|
||||
) {
|
||||
setRepositories(data as GitHubRepoInfo[]);
|
||||
} else {
|
||||
throw new Error('Invalid repository data format');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching repos:', error);
|
||||
toast.error('Failed to fetch your repositories');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = async (query: string) => {
|
||||
setIsLoading(true);
|
||||
setSearchResults([]);
|
||||
|
||||
try {
|
||||
let searchQuery = query;
|
||||
|
||||
if (filters.language) {
|
||||
searchQuery += ` language:${filters.language}`;
|
||||
}
|
||||
|
||||
if (filters.stars) {
|
||||
searchQuery += ` stars:>${filters.stars}`;
|
||||
}
|
||||
|
||||
if (filters.forks) {
|
||||
searchQuery += ` forks:>${filters.forks}`;
|
||||
}
|
||||
|
||||
const response = await fetch(
|
||||
`https://api.github.com/search/repositories?q=${encodeURIComponent(searchQuery)}&sort=stars&order=desc`,
|
||||
{
|
||||
headers: {
|
||||
Accept: 'application/vnd.github.v3+json',
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to search repositories');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Add type assertion and validation
|
||||
if (typeof data === 'object' && data !== null && 'items' in data && Array.isArray(data.items)) {
|
||||
setSearchResults(data.items as GitHubRepoInfo[]);
|
||||
} else {
|
||||
throw new Error('Invalid search results format');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error searching repos:', error);
|
||||
toast.error('Failed to search repositories');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchBranches = async (repo: GitHubRepoInfo) => {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const response = await fetch(`https://api.github.com/repos/${repo.full_name}/branches`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${getLocalStorage('github_connection')?.token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch branches');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Add type assertion and validation
|
||||
if (Array.isArray(data) && data.every((item) => typeof item === 'object' && item !== null && 'name' in item)) {
|
||||
setBranches(
|
||||
data.map((branch) => ({
|
||||
name: branch.name,
|
||||
default: branch.name === repo.default_branch,
|
||||
})),
|
||||
);
|
||||
} else {
|
||||
throw new Error('Invalid branch data format');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching branches:', error);
|
||||
toast.error('Failed to fetch branches');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRepoSelect = async (repo: GitHubRepoInfo) => {
|
||||
setSelectedRepository(repo);
|
||||
await fetchBranches(repo);
|
||||
};
|
||||
|
||||
const formatGitUrl = (url: string): string => {
|
||||
// Remove any tree references and ensure .git extension
|
||||
const baseUrl = url
|
||||
.replace(/\/tree\/[^/]+/, '') // Remove /tree/branch-name
|
||||
.replace(/\/$/, '') // Remove trailing slash
|
||||
.replace(/\.git$/, ''); // Remove .git if present
|
||||
return `${baseUrl}.git`;
|
||||
};
|
||||
|
||||
const verifyRepository = async (repoUrl: string): Promise<RepositoryStats | null> => {
|
||||
try {
|
||||
const [owner, repo] = repoUrl
|
||||
.replace(/\.git$/, '')
|
||||
.split('/')
|
||||
.slice(-2);
|
||||
|
||||
const connection = getLocalStorage('github_connection');
|
||||
const headers: HeadersInit = connection?.token ? { Authorization: `Bearer ${connection.token}` } : {};
|
||||
|
||||
// Fetch repository tree
|
||||
const treeResponse = await fetch(`https://api.github.com/repos/${owner}/${repo}/git/trees/main?recursive=1`, {
|
||||
headers,
|
||||
});
|
||||
|
||||
if (!treeResponse.ok) {
|
||||
throw new Error('Failed to fetch repository structure');
|
||||
}
|
||||
|
||||
const treeData = (await treeResponse.json()) as GitHubTreeResponse;
|
||||
|
||||
// Calculate repository stats
|
||||
let totalSize = 0;
|
||||
let totalFiles = 0;
|
||||
const languages: { [key: string]: number } = {};
|
||||
let hasPackageJson = false;
|
||||
let hasDependencies = false;
|
||||
|
||||
for (const file of treeData.tree) {
|
||||
if (file.type === 'blob') {
|
||||
totalFiles++;
|
||||
|
||||
if (file.size) {
|
||||
totalSize += file.size;
|
||||
}
|
||||
|
||||
// Check for package.json
|
||||
if (file.path === 'package.json') {
|
||||
hasPackageJson = true;
|
||||
|
||||
// Fetch package.json content to check dependencies
|
||||
const contentResponse = await fetch(`https://api.github.com/repos/${owner}/${repo}/contents/package.json`, {
|
||||
headers,
|
||||
});
|
||||
|
||||
if (contentResponse.ok) {
|
||||
const content = (await contentResponse.json()) as GitHubContent;
|
||||
const packageJson = JSON.parse(Buffer.from(content.content, 'base64').toString());
|
||||
hasDependencies = !!(
|
||||
packageJson.dependencies ||
|
||||
packageJson.devDependencies ||
|
||||
packageJson.peerDependencies
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Detect language based on file extension
|
||||
const ext = file.path.split('.').pop()?.toLowerCase();
|
||||
|
||||
if (ext) {
|
||||
languages[ext] = (languages[ext] || 0) + (file.size || 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const stats: RepositoryStats = {
|
||||
totalFiles,
|
||||
totalSize,
|
||||
languages,
|
||||
hasPackageJson,
|
||||
hasDependencies,
|
||||
};
|
||||
|
||||
setStats(stats);
|
||||
|
||||
return stats;
|
||||
} catch (error) {
|
||||
console.error('Error verifying repository:', error);
|
||||
toast.error('Failed to verify repository');
|
||||
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleImport = async () => {
|
||||
try {
|
||||
let gitUrl: string;
|
||||
|
||||
if (activeTab === 'url' && customUrl) {
|
||||
gitUrl = formatGitUrl(customUrl);
|
||||
} else if (selectedRepository) {
|
||||
gitUrl = formatGitUrl(selectedRepository.html_url);
|
||||
|
||||
if (selectedBranch) {
|
||||
gitUrl = `${gitUrl}#${selectedBranch}`;
|
||||
}
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
// Verify repository before importing
|
||||
const stats = await verifyRepository(gitUrl);
|
||||
|
||||
if (!stats) {
|
||||
return;
|
||||
}
|
||||
|
||||
setCurrentStats(stats);
|
||||
setPendingGitUrl(gitUrl);
|
||||
setShowStatsDialog(true);
|
||||
} catch (error) {
|
||||
console.error('Error preparing repository:', error);
|
||||
toast.error('Failed to prepare repository. Please try again.');
|
||||
}
|
||||
};
|
||||
|
||||
const handleStatsConfirm = () => {
|
||||
setShowStatsDialog(false);
|
||||
|
||||
if (pendingGitUrl) {
|
||||
onSelect(pendingGitUrl);
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
const handleFilterChange = (key: keyof SearchFilters, value: string) => {
|
||||
let parsedValue: string | number | undefined = value;
|
||||
|
||||
if (key === 'stars' || key === 'forks') {
|
||||
parsedValue = value ? parseInt(value, 10) : undefined;
|
||||
}
|
||||
|
||||
setFilters((prev) => ({ ...prev, [key]: parsedValue }));
|
||||
handleSearch(searchQuery);
|
||||
};
|
||||
|
||||
// Handle dialog close properly
|
||||
const handleClose = () => {
|
||||
setIsLoading(false); // Reset loading state
|
||||
setSearchQuery(''); // Reset search
|
||||
setSearchResults([]); // Reset results
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog.Root
|
||||
open={isOpen}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
handleClose();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50" />
|
||||
<Dialog.Content className="fixed top-[50%] left-[50%] -translate-x-1/2 -translate-y-1/2 w-[90vw] md:w-[600px] max-h-[85vh] overflow-hidden bg-white dark:bg-[#1A1A1A] rounded-xl shadow-xl z-[51] border border-[#E5E5E5] dark:border-[#333333]">
|
||||
<div className="p-4 border-b border-[#E5E5E5] dark:border-[#333333] flex items-center justify-between">
|
||||
<Dialog.Title className="text-lg font-semibold text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
|
||||
Import GitHub Repository
|
||||
</Dialog.Title>
|
||||
<Dialog.Close
|
||||
onClick={handleClose}
|
||||
className={classNames(
|
||||
'p-2 rounded-lg transition-all duration-200 ease-in-out',
|
||||
'text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary',
|
||||
'dark:text-bolt-elements-textTertiary-dark dark:hover:text-bolt-elements-textPrimary-dark',
|
||||
'hover:bg-bolt-elements-background-depth-2 dark:hover:bg-bolt-elements-background-depth-3',
|
||||
'focus:outline-none focus:ring-2 focus:ring-bolt-elements-borderColor dark:focus:ring-bolt-elements-borderColor-dark',
|
||||
)}
|
||||
>
|
||||
<span className="i-ph:x block w-5 h-5" aria-hidden="true" />
|
||||
<span className="sr-only">Close dialog</span>
|
||||
</Dialog.Close>
|
||||
</div>
|
||||
|
||||
<div className="p-4">
|
||||
<div className="flex gap-2 mb-4">
|
||||
<TabButton active={activeTab === 'my-repos'} onClick={() => setActiveTab('my-repos')}>
|
||||
<span className="i-ph:book-bookmark" />
|
||||
My Repos
|
||||
</TabButton>
|
||||
<TabButton active={activeTab === 'search'} onClick={() => setActiveTab('search')}>
|
||||
<span className="i-ph:magnifying-glass" />
|
||||
Search
|
||||
</TabButton>
|
||||
<TabButton active={activeTab === 'url'} onClick={() => setActiveTab('url')}>
|
||||
<span className="i-ph:link" />
|
||||
URL
|
||||
</TabButton>
|
||||
</div>
|
||||
|
||||
{activeTab === 'url' ? (
|
||||
<div className="space-y-4">
|
||||
<Input
|
||||
placeholder="Enter repository URL"
|
||||
value={customUrl}
|
||||
onChange={(e) => setCustomUrl(e.target.value)}
|
||||
className={classNames('w-full', {
|
||||
'border-red-500': false,
|
||||
})}
|
||||
/>
|
||||
<button
|
||||
onClick={handleImport}
|
||||
disabled={!customUrl}
|
||||
className="w-full h-10 px-4 py-2 rounded-lg bg-purple-500 text-white hover:bg-purple-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center gap-2 justify-center"
|
||||
>
|
||||
Import Repository
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{activeTab === 'search' && (
|
||||
<div className="space-y-4 mb-4">
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search repositories..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value);
|
||||
handleSearch(e.target.value);
|
||||
}}
|
||||
className="flex-1 px-4 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#252525] border border-[#E5E5E5] dark:border-[#333333] text-bolt-elements-textPrimary"
|
||||
/>
|
||||
<button
|
||||
onClick={() => setFilters({})}
|
||||
className="px-3 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#252525] text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary"
|
||||
>
|
||||
<span className="i-ph:funnel-simple" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Filter by language..."
|
||||
value={filters.language || ''}
|
||||
onChange={(e) => {
|
||||
setFilters({ ...filters, language: e.target.value });
|
||||
handleSearch(searchQuery);
|
||||
}}
|
||||
className="px-3 py-1.5 text-sm rounded-lg bg-[#F5F5F5] dark:bg-[#252525] border border-[#E5E5E5] dark:border-[#333333]"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Min stars..."
|
||||
value={filters.stars || ''}
|
||||
onChange={(e) => handleFilterChange('stars', e.target.value)}
|
||||
className="px-3 py-1.5 text-sm rounded-lg bg-[#F5F5F5] dark:bg-[#252525] border border-[#E5E5E5] dark:border-[#333333]"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Min forks..."
|
||||
value={filters.forks || ''}
|
||||
onChange={(e) => handleFilterChange('forks', e.target.value)}
|
||||
className="px-3 py-1.5 text-sm rounded-lg bg-[#F5F5F5] dark:bg-[#252525] border border-[#E5E5E5] dark:border-[#333333]"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-3 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
|
||||
{selectedRepository ? (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setSelectedRepository(null)}
|
||||
className="p-1.5 rounded-lg hover:bg-[#F5F5F5] dark:hover:bg-[#252525]"
|
||||
>
|
||||
<span className="i-ph:arrow-left w-4 h-4" />
|
||||
</button>
|
||||
<h3 className="font-medium">{selectedRepository.full_name}</h3>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-bolt-elements-textSecondary">Select Branch</label>
|
||||
<select
|
||||
value={selectedBranch}
|
||||
onChange={(e) => setSelectedBranch(e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark focus:outline-none focus:ring-2 focus:ring-bolt-elements-borderColor dark:focus:ring-bolt-elements-borderColor-dark"
|
||||
>
|
||||
{branches.map((branch) => (
|
||||
<option
|
||||
key={branch.name}
|
||||
value={branch.name}
|
||||
className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark"
|
||||
>
|
||||
{branch.name} {branch.default ? '(default)' : ''}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
onClick={handleImport}
|
||||
className="w-full h-10 px-4 py-2 rounded-lg bg-purple-500 text-white hover:bg-purple-600 transition-all duration-200 flex items-center gap-2 justify-center"
|
||||
>
|
||||
Import Selected Branch
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<RepositoryList
|
||||
repos={activeTab === 'my-repos' ? repositories : searchResults}
|
||||
isLoading={isLoading}
|
||||
onSelect={handleRepoSelect}
|
||||
activeTab={activeTab}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
{currentStats && (
|
||||
<StatsDialog
|
||||
isOpen={showStatsDialog}
|
||||
onClose={handleStatsConfirm}
|
||||
onConfirm={handleStatsConfirm}
|
||||
stats={currentStats}
|
||||
isLargeRepo={currentStats.totalSize > 50 * 1024 * 1024}
|
||||
/>
|
||||
)}
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
|
||||
function TabButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={classNames(
|
||||
'px-4 py-2 h-10 rounded-lg transition-all duration-200 flex items-center gap-2 min-w-[120px] justify-center',
|
||||
active
|
||||
? 'bg-purple-500 text-white hover:bg-purple-600'
|
||||
: 'bg-[#F5F5F5] dark:bg-[#252525] text-bolt-elements-textPrimary dark:text-white hover:bg-[#E5E5E5] dark:hover:bg-[#333333] border border-[#E5E5E5] dark:border-[#333333]',
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function RepositoryList({
|
||||
repos,
|
||||
isLoading,
|
||||
onSelect,
|
||||
activeTab,
|
||||
}: {
|
||||
repos: GitHubRepoInfo[];
|
||||
isLoading: boolean;
|
||||
onSelect: (repo: GitHubRepoInfo) => void;
|
||||
activeTab: string;
|
||||
}) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-8 text-bolt-elements-textSecondary">
|
||||
<span className="i-ph:spinner animate-spin mr-2" />
|
||||
Loading repositories...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (repos.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-bolt-elements-textSecondary">
|
||||
<span className="i-ph:folder-simple-dashed w-12 h-12 mb-2 opacity-50" />
|
||||
<p>{activeTab === 'my-repos' ? 'No repositories found' : 'Search for repositories'}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return repos.map((repo) => <RepositoryCard key={repo.full_name} repo={repo} onSelect={() => onSelect(repo)} />);
|
||||
}
|
||||
|
||||
function RepositoryCard({ repo, onSelect }: { repo: GitHubRepoInfo; onSelect: () => void }) {
|
||||
return (
|
||||
<div className="p-4 rounded-lg bg-[#F5F5F5] dark:bg-[#252525] border border-[#E5E5E5] dark:border-[#333333] hover:border-purple-500/50 transition-colors">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="i-ph:git-repository text-bolt-elements-textTertiary" />
|
||||
<h3 className="font-medium text-bolt-elements-textPrimary dark:text-white">{repo.name}</h3>
|
||||
</div>
|
||||
<button
|
||||
onClick={onSelect}
|
||||
className="px-4 py-2 h-10 rounded-lg bg-purple-500 text-white hover:bg-purple-600 transition-all duration-200 flex items-center gap-2 min-w-[120px] justify-center"
|
||||
>
|
||||
<span className="i-ph:download-simple w-4 h-4" />
|
||||
Import
|
||||
</button>
|
||||
</div>
|
||||
{repo.description && <p className="text-sm text-bolt-elements-textSecondary mb-3">{repo.description}</p>}
|
||||
<div className="flex items-center gap-4 text-sm text-bolt-elements-textTertiary">
|
||||
{repo.language && (
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="i-ph:code" />
|
||||
{repo.language}
|
||||
</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="i-ph:star" />
|
||||
{repo.stargazers_count.toLocaleString()}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="i-ph:clock" />
|
||||
{new Date(repo.updated_at).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
95
app/components/@settings/tabs/connections/types/GitHub.ts
Normal file
95
app/components/@settings/tabs/connections/types/GitHub.ts
Normal file
@@ -0,0 +1,95 @@
|
||||
export interface GitHubUserResponse {
|
||||
login: string;
|
||||
avatar_url: string;
|
||||
html_url: string;
|
||||
name: string;
|
||||
bio: string;
|
||||
public_repos: number;
|
||||
followers: number;
|
||||
following: number;
|
||||
public_gists: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface GitHubRepoInfo {
|
||||
name: string;
|
||||
full_name: string;
|
||||
html_url: string;
|
||||
description: string;
|
||||
stargazers_count: number;
|
||||
forks_count: number;
|
||||
default_branch: string;
|
||||
updated_at: string;
|
||||
language: string;
|
||||
languages_url: string;
|
||||
}
|
||||
|
||||
export interface GitHubOrganization {
|
||||
login: string;
|
||||
avatar_url: string;
|
||||
description: string;
|
||||
html_url: string;
|
||||
}
|
||||
|
||||
export interface GitHubEvent {
|
||||
id: string;
|
||||
type: string;
|
||||
created_at: string;
|
||||
repo: {
|
||||
name: string;
|
||||
url: string;
|
||||
};
|
||||
payload: {
|
||||
action?: string;
|
||||
ref?: string;
|
||||
ref_type?: string;
|
||||
description?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface GitHubLanguageStats {
|
||||
[key: string]: number;
|
||||
}
|
||||
|
||||
export interface GitHubStats {
|
||||
repos: GitHubRepoInfo[];
|
||||
totalStars: number;
|
||||
totalForks: number;
|
||||
organizations: GitHubOrganization[];
|
||||
recentActivity: GitHubEvent[];
|
||||
languages: GitHubLanguageStats;
|
||||
totalGists: number;
|
||||
}
|
||||
|
||||
export interface GitHubConnection {
|
||||
user: GitHubUserResponse | null;
|
||||
token: string;
|
||||
tokenType: 'classic' | 'fine-grained';
|
||||
stats?: GitHubStats;
|
||||
}
|
||||
|
||||
export interface GitHubTokenInfo {
|
||||
token: string;
|
||||
scope: string[];
|
||||
avatar_url: string;
|
||||
name: string | null;
|
||||
created_at: string;
|
||||
followers: number;
|
||||
}
|
||||
|
||||
export interface GitHubRateLimits {
|
||||
limit: number;
|
||||
remaining: number;
|
||||
reset: Date;
|
||||
used: number;
|
||||
}
|
||||
|
||||
export interface GitHubAuthState {
|
||||
username: string;
|
||||
tokenInfo: GitHubTokenInfo | null;
|
||||
isConnected: boolean;
|
||||
isVerifying: boolean;
|
||||
isLoadingRepos: boolean;
|
||||
rateLimits?: GitHubRateLimits;
|
||||
}
|
||||
452
app/components/@settings/tabs/data/DataTab.tsx
Normal file
452
app/components/@settings/tabs/data/DataTab.tsx
Normal file
@@ -0,0 +1,452 @@
|
||||
import { useState, useRef } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { toast } from 'react-toastify';
|
||||
import { DialogRoot, DialogClose, Dialog, DialogTitle } from '~/components/ui/Dialog';
|
||||
import { db, getAll, deleteById } from '~/lib/persistence';
|
||||
|
||||
export default function DataTab() {
|
||||
const [isDownloadingTemplate, setIsDownloadingTemplate] = useState(false);
|
||||
const [isImportingKeys, setIsImportingKeys] = useState(false);
|
||||
const [isResetting, setIsResetting] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [showResetInlineConfirm, setShowResetInlineConfirm] = useState(false);
|
||||
const [showDeleteInlineConfirm, setShowDeleteInlineConfirm] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const apiKeyFileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleExportAllChats = async () => {
|
||||
try {
|
||||
if (!db) {
|
||||
throw new Error('Database not initialized');
|
||||
}
|
||||
|
||||
// Get all chats from IndexedDB
|
||||
const allChats = await getAll(db);
|
||||
const exportData = {
|
||||
chats: allChats,
|
||||
exportDate: new Date().toISOString(),
|
||||
};
|
||||
|
||||
// Download as JSON
|
||||
const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `bolt-chats-${new Date().toISOString()}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
toast.success('Chats exported successfully');
|
||||
} catch (error) {
|
||||
console.error('Export error:', error);
|
||||
toast.error('Failed to export chats');
|
||||
}
|
||||
};
|
||||
|
||||
const handleExportSettings = () => {
|
||||
try {
|
||||
const settings = {
|
||||
userProfile: localStorage.getItem('bolt_user_profile'),
|
||||
settings: localStorage.getItem('bolt_settings'),
|
||||
exportDate: new Date().toISOString(),
|
||||
};
|
||||
|
||||
const blob = new Blob([JSON.stringify(settings, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `bolt-settings-${new Date().toISOString()}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
toast.success('Settings exported successfully');
|
||||
} catch (error) {
|
||||
console.error('Export error:', error);
|
||||
toast.error('Failed to export settings');
|
||||
}
|
||||
};
|
||||
|
||||
const handleImportSettings = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const content = await file.text();
|
||||
const settings = JSON.parse(content);
|
||||
|
||||
if (settings.userProfile) {
|
||||
localStorage.setItem('bolt_user_profile', settings.userProfile);
|
||||
}
|
||||
|
||||
if (settings.settings) {
|
||||
localStorage.setItem('bolt_settings', settings.settings);
|
||||
}
|
||||
|
||||
window.location.reload(); // Reload to apply settings
|
||||
toast.success('Settings imported successfully');
|
||||
} catch (error) {
|
||||
console.error('Import error:', error);
|
||||
toast.error('Failed to import settings');
|
||||
}
|
||||
};
|
||||
|
||||
const handleImportAPIKeys = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsImportingKeys(true);
|
||||
|
||||
try {
|
||||
const content = await file.text();
|
||||
const keys = JSON.parse(content);
|
||||
|
||||
// Validate and save each key
|
||||
Object.entries(keys).forEach(([key, value]) => {
|
||||
if (typeof value !== 'string') {
|
||||
throw new Error(`Invalid value for key: ${key}`);
|
||||
}
|
||||
|
||||
localStorage.setItem(`bolt_${key.toLowerCase()}`, value);
|
||||
});
|
||||
|
||||
toast.success('API keys imported successfully');
|
||||
} catch (error) {
|
||||
console.error('Error importing API keys:', error);
|
||||
toast.error('Failed to import API keys');
|
||||
} finally {
|
||||
setIsImportingKeys(false);
|
||||
|
||||
if (apiKeyFileInputRef.current) {
|
||||
apiKeyFileInputRef.current.value = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownloadTemplate = () => {
|
||||
setIsDownloadingTemplate(true);
|
||||
|
||||
try {
|
||||
const template = {
|
||||
Anthropic_API_KEY: '',
|
||||
OpenAI_API_KEY: '',
|
||||
Google_API_KEY: '',
|
||||
Groq_API_KEY: '',
|
||||
HuggingFace_API_KEY: '',
|
||||
OpenRouter_API_KEY: '',
|
||||
Deepseek_API_KEY: '',
|
||||
Mistral_API_KEY: '',
|
||||
OpenAILike_API_KEY: '',
|
||||
Together_API_KEY: '',
|
||||
xAI_API_KEY: '',
|
||||
Perplexity_API_KEY: '',
|
||||
Cohere_API_KEY: '',
|
||||
AzureOpenAI_API_KEY: '',
|
||||
OPENAI_LIKE_API_BASE_URL: '',
|
||||
LMSTUDIO_API_BASE_URL: '',
|
||||
OLLAMA_API_BASE_URL: '',
|
||||
TOGETHER_API_BASE_URL: '',
|
||||
};
|
||||
|
||||
const blob = new Blob([JSON.stringify(template, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'bolt-api-keys-template.json';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
toast.success('Template downloaded successfully');
|
||||
} catch (error) {
|
||||
console.error('Error downloading template:', error);
|
||||
toast.error('Failed to download template');
|
||||
} finally {
|
||||
setIsDownloadingTemplate(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleResetSettings = async () => {
|
||||
setIsResetting(true);
|
||||
|
||||
try {
|
||||
// Clear all stored settings from localStorage
|
||||
localStorage.removeItem('bolt_user_profile');
|
||||
localStorage.removeItem('bolt_settings');
|
||||
localStorage.removeItem('bolt_chat_history');
|
||||
|
||||
// Clear all data from IndexedDB
|
||||
if (!db) {
|
||||
throw new Error('Database not initialized');
|
||||
}
|
||||
|
||||
// Get all chats and delete them
|
||||
const chats = await getAll(db as IDBDatabase);
|
||||
const deletePromises = chats.map((chat) => deleteById(db as IDBDatabase, chat.id));
|
||||
await Promise.all(deletePromises);
|
||||
|
||||
// Close the dialog first
|
||||
setShowResetInlineConfirm(false);
|
||||
|
||||
// Then reload and show success message
|
||||
window.location.reload();
|
||||
toast.success('Settings reset successfully');
|
||||
} catch (error) {
|
||||
console.error('Reset error:', error);
|
||||
setShowResetInlineConfirm(false);
|
||||
toast.error('Failed to reset settings');
|
||||
} finally {
|
||||
setIsResetting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteAllChats = async () => {
|
||||
setIsDeleting(true);
|
||||
|
||||
try {
|
||||
// Clear chat history from localStorage
|
||||
localStorage.removeItem('bolt_chat_history');
|
||||
|
||||
// Clear chats from IndexedDB
|
||||
if (!db) {
|
||||
throw new Error('Database not initialized');
|
||||
}
|
||||
|
||||
// Get all chats and delete them one by one
|
||||
const chats = await getAll(db as IDBDatabase);
|
||||
const deletePromises = chats.map((chat) => deleteById(db as IDBDatabase, chat.id));
|
||||
await Promise.all(deletePromises);
|
||||
|
||||
// Close the dialog first
|
||||
setShowDeleteInlineConfirm(false);
|
||||
|
||||
// Then show the success message
|
||||
toast.success('Chat history deleted successfully');
|
||||
} catch (error) {
|
||||
console.error('Delete error:', error);
|
||||
setShowDeleteInlineConfirm(false);
|
||||
toast.error('Failed to delete chat history');
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<input ref={fileInputRef} type="file" accept=".json" onChange={handleImportSettings} className="hidden" />
|
||||
{/* Reset Settings Dialog */}
|
||||
<DialogRoot open={showResetInlineConfirm} onOpenChange={setShowResetInlineConfirm}>
|
||||
<Dialog showCloseButton={false} className="z-[1000]">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="i-ph:warning-circle-fill w-5 h-5 text-yellow-500" />
|
||||
<DialogTitle>Reset All Settings?</DialogTitle>
|
||||
</div>
|
||||
<p className="text-sm text-bolt-elements-textSecondary mt-2">
|
||||
This will reset all your settings to their default values. This action cannot be undone.
|
||||
</p>
|
||||
<div className="flex justify-end items-center gap-3 mt-6">
|
||||
<DialogClose asChild>
|
||||
<button className="px-4 py-2 rounded-lg text-sm bg-[#F5F5F5] dark:bg-[#1A1A1A] text-[#666666] dark:text-[#999999] hover:text-[#333333] dark:hover:text-white">
|
||||
Cancel
|
||||
</button>
|
||||
</DialogClose>
|
||||
<motion.button
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm bg-white dark:bg-[#1A1A1A] text-yellow-600 dark:text-yellow-500 hover:bg-yellow-50 dark:hover:bg-yellow-500/10 border border-transparent hover:border-yellow-500/10 dark:hover:border-yellow-500/20"
|
||||
onClick={handleResetSettings}
|
||||
disabled={isResetting}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
{isResetting ? (
|
||||
<div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
|
||||
) : (
|
||||
<div className="i-ph:arrow-counter-clockwise w-4 h-4" />
|
||||
)}
|
||||
Reset Settings
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</DialogRoot>
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<DialogRoot open={showDeleteInlineConfirm} onOpenChange={setShowDeleteInlineConfirm}>
|
||||
<Dialog showCloseButton={false} className="z-[1000]">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="i-ph:warning-circle-fill w-5 h-5 text-red-500" />
|
||||
<DialogTitle>Delete All Chats?</DialogTitle>
|
||||
</div>
|
||||
<p className="text-sm text-bolt-elements-textSecondary mt-2">
|
||||
This will permanently delete all your chat history. This action cannot be undone.
|
||||
</p>
|
||||
<div className="flex justify-end items-center gap-3 mt-6">
|
||||
<DialogClose asChild>
|
||||
<button className="px-4 py-2 rounded-lg text-sm bg-[#F5F5F5] dark:bg-[#1A1A1A] text-[#666666] dark:text-[#999999] hover:text-[#333333] dark:hover:text-white">
|
||||
Cancel
|
||||
</button>
|
||||
</DialogClose>
|
||||
<motion.button
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm bg-white dark:bg-[#1A1A1A] text-red-500 dark:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 border border-transparent hover:border-red-500/10 dark:hover:border-red-500/20"
|
||||
onClick={handleDeleteAllChats}
|
||||
disabled={isDeleting}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
{isDeleting ? (
|
||||
<div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
|
||||
) : (
|
||||
<div className="i-ph:trash w-4 h-4" />
|
||||
)}
|
||||
Delete All
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</DialogRoot>
|
||||
|
||||
{/* Chat History Section */}
|
||||
<motion.div
|
||||
className="bg-white dark:bg-[#0A0A0A] rounded-lg p-6 border border-[#E5E5E5] dark:border-[#1A1A1A]"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="i-ph:chat-circle-duotone w-5 h-5 text-purple-500" />
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white">Chat History</h3>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Export or delete all your chat history.</p>
|
||||
<div className="flex gap-4">
|
||||
<motion.button
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={handleExportAllChats}
|
||||
>
|
||||
<div className="i-ph:download-simple w-4 h-4" />
|
||||
Export All Chats
|
||||
</motion.button>
|
||||
<motion.button
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-red-50 text-red-500 text-sm hover:bg-red-100 dark:bg-red-500/10 dark:hover:bg-red-500/20"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={() => setShowDeleteInlineConfirm(true)}
|
||||
>
|
||||
<div className="i-ph:trash w-4 h-4" />
|
||||
Delete All Chats
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Settings Backup Section */}
|
||||
<motion.div
|
||||
className="bg-white dark:bg-[#0A0A0A] rounded-lg p-6 border border-[#E5E5E5] dark:border-[#1A1A1A]"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="i-ph:gear-duotone w-5 h-5 text-purple-500" />
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white">Settings Backup</h3>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Export your settings to a JSON file or import settings from a previously exported file.
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
<motion.button
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={handleExportSettings}
|
||||
>
|
||||
<div className="i-ph:download-simple w-4 h-4" />
|
||||
Export Settings
|
||||
</motion.button>
|
||||
<motion.button
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
<div className="i-ph:upload-simple w-4 h-4" />
|
||||
Import Settings
|
||||
</motion.button>
|
||||
<motion.button
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-yellow-50 text-yellow-600 text-sm hover:bg-yellow-100 dark:bg-yellow-500/10 dark:hover:bg-yellow-500/20 dark:text-yellow-500"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={() => setShowResetInlineConfirm(true)}
|
||||
>
|
||||
<div className="i-ph:arrow-counter-clockwise w-4 h-4" />
|
||||
Reset Settings
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* API Keys Management Section */}
|
||||
<motion.div
|
||||
className="bg-white dark:bg-[#0A0A0A] rounded-lg p-6 border border-[#E5E5E5] dark:border-[#1A1A1A]"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="i-ph:key-duotone w-5 h-5 text-purple-500" />
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white">API Keys Management</h3>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Import API keys from a JSON file or download a template to fill in your keys.
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
<input
|
||||
ref={apiKeyFileInputRef}
|
||||
type="file"
|
||||
accept=".json"
|
||||
onChange={handleImportAPIKeys}
|
||||
className="hidden"
|
||||
/>
|
||||
<motion.button
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={handleDownloadTemplate}
|
||||
disabled={isDownloadingTemplate}
|
||||
>
|
||||
{isDownloadingTemplate ? (
|
||||
<div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
|
||||
) : (
|
||||
<div className="i-ph:download-simple w-4 h-4" />
|
||||
)}
|
||||
Download Template
|
||||
</motion.button>
|
||||
<motion.button
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={() => apiKeyFileInputRef.current?.click()}
|
||||
disabled={isImportingKeys}
|
||||
>
|
||||
{isImportingKeys ? (
|
||||
<div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
|
||||
) : (
|
||||
<div className="i-ph:upload-simple w-4 h-4" />
|
||||
)}
|
||||
Import API Keys
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
1341
app/components/@settings/tabs/debug/DebugTab.tsx
Normal file
1341
app/components/@settings/tabs/debug/DebugTab.tsx
Normal file
File diff suppressed because it is too large
Load Diff
613
app/components/@settings/tabs/event-logs/EventLogsTab.tsx
Normal file
613
app/components/@settings/tabs/event-logs/EventLogsTab.tsx
Normal file
@@ -0,0 +1,613 @@
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Switch } from '~/components/ui/Switch';
|
||||
import { logStore, type LogEntry } from '~/lib/stores/logs';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
|
||||
interface SelectOption {
|
||||
value: string;
|
||||
label: string;
|
||||
icon?: string;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
const logLevelOptions: SelectOption[] = [
|
||||
{
|
||||
value: 'all',
|
||||
label: 'All Types',
|
||||
icon: 'i-ph:funnel',
|
||||
color: '#9333ea',
|
||||
},
|
||||
{
|
||||
value: 'provider',
|
||||
label: 'LLM',
|
||||
icon: 'i-ph:robot',
|
||||
color: '#10b981',
|
||||
},
|
||||
{
|
||||
value: 'api',
|
||||
label: 'API',
|
||||
icon: 'i-ph:cloud',
|
||||
color: '#3b82f6',
|
||||
},
|
||||
{
|
||||
value: 'error',
|
||||
label: 'Errors',
|
||||
icon: 'i-ph:warning-circle',
|
||||
color: '#ef4444',
|
||||
},
|
||||
{
|
||||
value: 'warning',
|
||||
label: 'Warnings',
|
||||
icon: 'i-ph:warning',
|
||||
color: '#f59e0b',
|
||||
},
|
||||
{
|
||||
value: 'info',
|
||||
label: 'Info',
|
||||
icon: 'i-ph:info',
|
||||
color: '#3b82f6',
|
||||
},
|
||||
{
|
||||
value: 'debug',
|
||||
label: 'Debug',
|
||||
icon: 'i-ph:bug',
|
||||
color: '#6b7280',
|
||||
},
|
||||
];
|
||||
|
||||
interface LogEntryItemProps {
|
||||
log: LogEntry;
|
||||
isExpanded: boolean;
|
||||
use24Hour: boolean;
|
||||
showTimestamp: boolean;
|
||||
}
|
||||
|
||||
const LogEntryItem = ({ log, isExpanded: forceExpanded, use24Hour, showTimestamp }: LogEntryItemProps) => {
|
||||
const [localExpanded, setLocalExpanded] = useState(forceExpanded);
|
||||
|
||||
useEffect(() => {
|
||||
setLocalExpanded(forceExpanded);
|
||||
}, [forceExpanded]);
|
||||
|
||||
const timestamp = useMemo(() => {
|
||||
const date = new Date(log.timestamp);
|
||||
return date.toLocaleTimeString('en-US', { hour12: !use24Hour });
|
||||
}, [log.timestamp, use24Hour]);
|
||||
|
||||
const style = useMemo(() => {
|
||||
if (log.category === 'provider') {
|
||||
return {
|
||||
icon: 'i-ph:robot',
|
||||
color: 'text-emerald-500 dark:text-emerald-400',
|
||||
bg: 'hover:bg-emerald-500/10 dark:hover:bg-emerald-500/20',
|
||||
badge: 'text-emerald-500 bg-emerald-50 dark:bg-emerald-500/10',
|
||||
};
|
||||
}
|
||||
|
||||
if (log.category === 'api') {
|
||||
return {
|
||||
icon: 'i-ph:cloud',
|
||||
color: 'text-blue-500 dark:text-blue-400',
|
||||
bg: 'hover:bg-blue-500/10 dark:hover:bg-blue-500/20',
|
||||
badge: 'text-blue-500 bg-blue-50 dark:bg-blue-500/10',
|
||||
};
|
||||
}
|
||||
|
||||
switch (log.level) {
|
||||
case 'error':
|
||||
return {
|
||||
icon: 'i-ph:warning-circle',
|
||||
color: 'text-red-500 dark:text-red-400',
|
||||
bg: 'hover:bg-red-500/10 dark:hover:bg-red-500/20',
|
||||
badge: 'text-red-500 bg-red-50 dark:bg-red-500/10',
|
||||
};
|
||||
case 'warning':
|
||||
return {
|
||||
icon: 'i-ph:warning',
|
||||
color: 'text-yellow-500 dark:text-yellow-400',
|
||||
bg: 'hover:bg-yellow-500/10 dark:hover:bg-yellow-500/20',
|
||||
badge: 'text-yellow-500 bg-yellow-50 dark:bg-yellow-500/10',
|
||||
};
|
||||
case 'debug':
|
||||
return {
|
||||
icon: 'i-ph:bug',
|
||||
color: 'text-gray-500 dark:text-gray-400',
|
||||
bg: 'hover:bg-gray-500/10 dark:hover:bg-gray-500/20',
|
||||
badge: 'text-gray-500 bg-gray-50 dark:bg-gray-500/10',
|
||||
};
|
||||
default:
|
||||
return {
|
||||
icon: 'i-ph:info',
|
||||
color: 'text-blue-500 dark:text-blue-400',
|
||||
bg: 'hover:bg-blue-500/10 dark:hover:bg-blue-500/20',
|
||||
badge: 'text-blue-500 bg-blue-50 dark:bg-blue-500/10',
|
||||
};
|
||||
}
|
||||
}, [log.level, log.category]);
|
||||
|
||||
const renderDetails = (details: any) => {
|
||||
if (log.category === 'provider') {
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span>Model: {details.model}</span>
|
||||
<span>•</span>
|
||||
<span>Tokens: {details.totalTokens}</span>
|
||||
<span>•</span>
|
||||
<span>Duration: {details.duration}ms</span>
|
||||
</div>
|
||||
{details.prompt && (
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-xs font-medium text-gray-700 dark:text-gray-300">Prompt:</div>
|
||||
<pre className="text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded p-2 whitespace-pre-wrap">
|
||||
{details.prompt}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
{details.response && (
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-xs font-medium text-gray-700 dark:text-gray-300">Response:</div>
|
||||
<pre className="text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded p-2 whitespace-pre-wrap">
|
||||
{details.response}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (log.category === 'api') {
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span className={details.method === 'GET' ? 'text-green-500' : 'text-blue-500'}>{details.method}</span>
|
||||
<span>•</span>
|
||||
<span>Status: {details.statusCode}</span>
|
||||
<span>•</span>
|
||||
<span>Duration: {details.duration}ms</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-600 dark:text-gray-400 break-all">{details.url}</div>
|
||||
{details.request && (
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-xs font-medium text-gray-700 dark:text-gray-300">Request:</div>
|
||||
<pre className="text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded p-2 whitespace-pre-wrap">
|
||||
{JSON.stringify(details.request, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
{details.response && (
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-xs font-medium text-gray-700 dark:text-gray-300">Response:</div>
|
||||
<pre className="text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded p-2 whitespace-pre-wrap">
|
||||
{JSON.stringify(details.response, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
{details.error && (
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-xs font-medium text-red-500">Error:</div>
|
||||
<pre className="text-xs text-red-400 bg-red-50 dark:bg-red-500/10 rounded p-2 whitespace-pre-wrap">
|
||||
{JSON.stringify(details.error, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<pre className="text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded whitespace-pre-wrap">
|
||||
{JSON.stringify(details, null, 2)}
|
||||
</pre>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className={classNames(
|
||||
'flex flex-col gap-2',
|
||||
'rounded-lg p-4',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
style.bg,
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className={classNames('text-lg', style.icon, style.color)} />
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-white">{log.message}</div>
|
||||
{log.details && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setLocalExpanded(!localExpanded)}
|
||||
className="text-xs text-gray-500 dark:text-gray-400 hover:text-purple-500 dark:hover:text-purple-400 transition-colors"
|
||||
>
|
||||
{localExpanded ? 'Hide' : 'Show'} Details
|
||||
</button>
|
||||
{localExpanded && renderDetails(log.details)}
|
||||
</>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={classNames('px-2 py-0.5 rounded text-xs font-medium uppercase', style.badge)}>
|
||||
{log.level}
|
||||
</div>
|
||||
{log.category && (
|
||||
<div className="px-2 py-0.5 rounded-full text-xs bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400">
|
||||
{log.category}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{showTimestamp && <time className="shrink-0 text-xs text-gray-500 dark:text-gray-400">{timestamp}</time>}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export function EventLogsTab() {
|
||||
const logs = useStore(logStore.logs);
|
||||
const [selectedLevel, setSelectedLevel] = useState<'all' | string>('all');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [use24Hour, setUse24Hour] = useState(false);
|
||||
const [autoExpand, setAutoExpand] = useState(false);
|
||||
const [showTimestamps, setShowTimestamps] = useState(true);
|
||||
const [showLevelFilter, setShowLevelFilter] = useState(false);
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
const levelFilterRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const filteredLogs = useMemo(() => {
|
||||
const allLogs = Object.values(logs);
|
||||
|
||||
if (selectedLevel === 'all') {
|
||||
return allLogs.filter((log) =>
|
||||
searchQuery ? log.message.toLowerCase().includes(searchQuery.toLowerCase()) : true,
|
||||
);
|
||||
}
|
||||
|
||||
return allLogs.filter((log) => {
|
||||
const matchesType = log.category === selectedLevel || log.level === selectedLevel;
|
||||
const matchesSearch = searchQuery ? log.message.toLowerCase().includes(searchQuery.toLowerCase()) : true;
|
||||
|
||||
return matchesType && matchesSearch;
|
||||
});
|
||||
}, [logs, selectedLevel, searchQuery]);
|
||||
|
||||
// Add performance tracking on mount
|
||||
useEffect(() => {
|
||||
const startTime = performance.now();
|
||||
|
||||
logStore.logInfo('Event Logs tab mounted', {
|
||||
type: 'component_mount',
|
||||
message: 'Event Logs tab component mounted',
|
||||
component: 'EventLogsTab',
|
||||
});
|
||||
|
||||
return () => {
|
||||
const duration = performance.now() - startTime;
|
||||
logStore.logPerformanceMetric('EventLogsTab', 'mount-duration', duration);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Log filter changes
|
||||
const handleLevelFilterChange = useCallback(
|
||||
(newLevel: string) => {
|
||||
logStore.logInfo('Log level filter changed', {
|
||||
type: 'filter_change',
|
||||
message: `Log level filter changed from ${selectedLevel} to ${newLevel}`,
|
||||
component: 'EventLogsTab',
|
||||
previousLevel: selectedLevel,
|
||||
newLevel,
|
||||
});
|
||||
setSelectedLevel(newLevel as string);
|
||||
setShowLevelFilter(false);
|
||||
},
|
||||
[selectedLevel],
|
||||
);
|
||||
|
||||
// Log search changes with debounce
|
||||
useEffect(() => {
|
||||
const timeoutId = setTimeout(() => {
|
||||
if (searchQuery) {
|
||||
logStore.logInfo('Log search performed', {
|
||||
type: 'search',
|
||||
message: `Search performed with query "${searchQuery}" (${filteredLogs.length} results)`,
|
||||
component: 'EventLogsTab',
|
||||
query: searchQuery,
|
||||
resultsCount: filteredLogs.length,
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
return () => clearTimeout(timeoutId);
|
||||
}, [searchQuery, filteredLogs.length]);
|
||||
|
||||
// Enhanced export logs handler
|
||||
const handleExportLogs = useCallback(() => {
|
||||
const startTime = performance.now();
|
||||
|
||||
try {
|
||||
const exportData = {
|
||||
timestamp: new Date().toISOString(),
|
||||
logs: filteredLogs,
|
||||
filters: {
|
||||
level: selectedLevel,
|
||||
searchQuery,
|
||||
},
|
||||
};
|
||||
|
||||
const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `bolt-logs-${new Date().toISOString()}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
const duration = performance.now() - startTime;
|
||||
logStore.logSuccess('Logs exported successfully', {
|
||||
type: 'export',
|
||||
message: `Successfully exported ${filteredLogs.length} logs`,
|
||||
component: 'EventLogsTab',
|
||||
exportedCount: filteredLogs.length,
|
||||
filters: {
|
||||
level: selectedLevel,
|
||||
searchQuery,
|
||||
},
|
||||
duration,
|
||||
});
|
||||
} catch (error) {
|
||||
logStore.logError('Failed to export logs', error, {
|
||||
type: 'export_error',
|
||||
message: 'Failed to export logs',
|
||||
component: 'EventLogsTab',
|
||||
});
|
||||
}
|
||||
}, [filteredLogs, selectedLevel, searchQuery]);
|
||||
|
||||
// Enhanced refresh handler
|
||||
const handleRefresh = useCallback(async () => {
|
||||
const startTime = performance.now();
|
||||
setIsRefreshing(true);
|
||||
|
||||
try {
|
||||
await logStore.refreshLogs();
|
||||
|
||||
const duration = performance.now() - startTime;
|
||||
|
||||
logStore.logSuccess('Logs refreshed successfully', {
|
||||
type: 'refresh',
|
||||
message: `Successfully refreshed ${Object.keys(logs).length} logs`,
|
||||
component: 'EventLogsTab',
|
||||
duration,
|
||||
logsCount: Object.keys(logs).length,
|
||||
});
|
||||
} catch (error) {
|
||||
logStore.logError('Failed to refresh logs', error, {
|
||||
type: 'refresh_error',
|
||||
message: 'Failed to refresh logs',
|
||||
component: 'EventLogsTab',
|
||||
});
|
||||
} finally {
|
||||
setTimeout(() => setIsRefreshing(false), 500);
|
||||
}
|
||||
}, [logs]);
|
||||
|
||||
// Log preference changes
|
||||
const handlePreferenceChange = useCallback((type: string, value: boolean) => {
|
||||
logStore.logInfo('Log preference changed', {
|
||||
type: 'preference_change',
|
||||
message: `Log preference "${type}" changed to ${value}`,
|
||||
component: 'EventLogsTab',
|
||||
preference: type,
|
||||
value,
|
||||
});
|
||||
|
||||
switch (type) {
|
||||
case 'timestamps':
|
||||
setShowTimestamps(value);
|
||||
break;
|
||||
case '24hour':
|
||||
setUse24Hour(value);
|
||||
break;
|
||||
case 'autoExpand':
|
||||
setAutoExpand(value);
|
||||
break;
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Close filters when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (levelFilterRef.current && !levelFilterRef.current.contains(event.target as Node)) {
|
||||
setShowLevelFilter(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const selectedLevelOption = logLevelOptions.find((opt) => opt.value === selectedLevel);
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<DropdownMenu.Root open={showLevelFilter} onOpenChange={setShowLevelFilter}>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button
|
||||
className={classNames(
|
||||
'flex items-center gap-2',
|
||||
'rounded-lg px-3 py-1.5',
|
||||
'text-sm text-gray-900 dark:text-white',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={classNames('text-lg', selectedLevelOption?.icon || 'i-ph:funnel')}
|
||||
style={{ color: selectedLevelOption?.color }}
|
||||
/>
|
||||
{selectedLevelOption?.label || 'All Types'}
|
||||
<span className="i-ph:caret-down text-lg text-gray-500 dark:text-gray-400" />
|
||||
</button>
|
||||
</DropdownMenu.Trigger>
|
||||
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content
|
||||
className="min-w-[200px] bg-white dark:bg-[#0A0A0A] rounded-lg shadow-lg py-1 z-[250] animate-in fade-in-0 zoom-in-95 border border-[#E5E5E5] dark:border-[#1A1A1A]"
|
||||
sideOffset={5}
|
||||
align="start"
|
||||
side="bottom"
|
||||
>
|
||||
{logLevelOptions.map((option) => (
|
||||
<DropdownMenu.Item
|
||||
key={option.value}
|
||||
className="group flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-500/10 dark:hover:bg-purple-500/20 cursor-pointer transition-colors"
|
||||
onClick={() => handleLevelFilterChange(option.value)}
|
||||
>
|
||||
<div className="mr-3 flex h-5 w-5 items-center justify-center">
|
||||
<div
|
||||
className={classNames(option.icon, 'text-lg group-hover:text-purple-500 transition-colors')}
|
||||
style={{ color: option.color }}
|
||||
/>
|
||||
</div>
|
||||
<span className="group-hover:text-purple-500 transition-colors">{option.label}</span>
|
||||
</DropdownMenu.Item>
|
||||
))}
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
checked={showTimestamps}
|
||||
onCheckedChange={(value) => handlePreferenceChange('timestamps', value)}
|
||||
className="data-[state=checked]:bg-purple-500"
|
||||
/>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">Show Timestamps</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
checked={use24Hour}
|
||||
onCheckedChange={(value) => handlePreferenceChange('24hour', value)}
|
||||
className="data-[state=checked]:bg-purple-500"
|
||||
/>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">24h Time</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
checked={autoExpand}
|
||||
onCheckedChange={(value) => handlePreferenceChange('autoExpand', value)}
|
||||
className="data-[state=checked]:bg-purple-500"
|
||||
/>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">Auto Expand</span>
|
||||
</div>
|
||||
|
||||
<div className="w-px h-4 bg-gray-200 dark:bg-gray-700" />
|
||||
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
className={classNames(
|
||||
'group flex items-center gap-2',
|
||||
'rounded-lg px-3 py-1.5',
|
||||
'text-sm text-gray-900 dark:text-white',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
|
||||
'transition-all duration-200',
|
||||
{ 'animate-spin': isRefreshing },
|
||||
)}
|
||||
>
|
||||
<span className="i-ph:arrows-clockwise text-lg text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
|
||||
Refresh
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleExportLogs}
|
||||
className={classNames(
|
||||
'group flex items-center gap-2',
|
||||
'rounded-lg px-3 py-1.5',
|
||||
'text-sm text-gray-900 dark:text-white',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
<span className="i-ph:download text-lg text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search logs..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className={classNames(
|
||||
'w-full px-4 py-2 pl-10 rounded-lg',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400',
|
||||
'focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
/>
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2">
|
||||
<div className="i-ph:magnifying-glass text-lg text-gray-500 dark:text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{filteredLogs.length === 0 ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className={classNames(
|
||||
'flex flex-col items-center justify-center gap-4',
|
||||
'rounded-lg p-8 text-center',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
)}
|
||||
>
|
||||
<span className="i-ph:clipboard-text text-4xl text-gray-400 dark:text-gray-600" />
|
||||
<div className="flex flex-col gap-1">
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-white">No Logs Found</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Try adjusting your search or filters</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
filteredLogs.map((log) => (
|
||||
<LogEntryItem
|
||||
key={log.id}
|
||||
log={log}
|
||||
isExpanded={autoExpand}
|
||||
use24Hour={use24Hour}
|
||||
showTimestamp={showTimestamps}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
291
app/components/@settings/tabs/features/FeaturesTab.tsx
Normal file
291
app/components/@settings/tabs/features/FeaturesTab.tsx
Normal file
@@ -0,0 +1,291 @@
|
||||
// Remove unused imports
|
||||
import React, { memo, useCallback } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Switch } from '~/components/ui/Switch';
|
||||
import { useSettings } from '~/lib/hooks/useSettings';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { toast } from 'react-toastify';
|
||||
import { PromptLibrary } from '~/lib/common/prompt-library';
|
||||
|
||||
interface FeatureToggle {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
enabled: boolean;
|
||||
beta?: boolean;
|
||||
experimental?: boolean;
|
||||
tooltip?: string;
|
||||
}
|
||||
|
||||
const FeatureCard = memo(
|
||||
({
|
||||
feature,
|
||||
index,
|
||||
onToggle,
|
||||
}: {
|
||||
feature: FeatureToggle;
|
||||
index: number;
|
||||
onToggle: (id: string, enabled: boolean) => void;
|
||||
}) => (
|
||||
<motion.div
|
||||
key={feature.id}
|
||||
layoutId={feature.id}
|
||||
className={classNames(
|
||||
'relative group cursor-pointer',
|
||||
'bg-bolt-elements-background-depth-2',
|
||||
'hover:bg-bolt-elements-background-depth-3',
|
||||
'transition-colors duration-200',
|
||||
'rounded-lg overflow-hidden',
|
||||
)}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
>
|
||||
<div className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={classNames(feature.icon, 'w-5 h-5 text-bolt-elements-textSecondary')} />
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="font-medium text-bolt-elements-textPrimary">{feature.title}</h4>
|
||||
{feature.beta && (
|
||||
<span className="px-2 py-0.5 text-xs rounded-full bg-blue-500/10 text-blue-500 font-medium">Beta</span>
|
||||
)}
|
||||
{feature.experimental && (
|
||||
<span className="px-2 py-0.5 text-xs rounded-full bg-orange-500/10 text-orange-500 font-medium">
|
||||
Experimental
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Switch checked={feature.enabled} onCheckedChange={(checked) => onToggle(feature.id, checked)} />
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-bolt-elements-textSecondary">{feature.description}</p>
|
||||
{feature.tooltip && <p className="mt-1 text-xs text-bolt-elements-textTertiary">{feature.tooltip}</p>}
|
||||
</div>
|
||||
</motion.div>
|
||||
),
|
||||
);
|
||||
|
||||
const FeatureSection = memo(
|
||||
({
|
||||
title,
|
||||
features,
|
||||
icon,
|
||||
description,
|
||||
onToggleFeature,
|
||||
}: {
|
||||
title: string;
|
||||
features: FeatureToggle[];
|
||||
icon: string;
|
||||
description: string;
|
||||
onToggleFeature: (id: string, enabled: boolean) => void;
|
||||
}) => (
|
||||
<motion.div
|
||||
layout
|
||||
className="flex flex-col gap-4"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={classNames(icon, 'text-xl text-purple-500')} />
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-bolt-elements-textPrimary">{title}</h3>
|
||||
<p className="text-sm text-bolt-elements-textSecondary">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{features.map((feature, index) => (
|
||||
<FeatureCard key={feature.id} feature={feature} index={index} onToggle={onToggleFeature} />
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
),
|
||||
);
|
||||
|
||||
export default function FeaturesTab() {
|
||||
const {
|
||||
autoSelectTemplate,
|
||||
isLatestBranch,
|
||||
contextOptimizationEnabled,
|
||||
eventLogs,
|
||||
setAutoSelectTemplate,
|
||||
enableLatestBranch,
|
||||
enableContextOptimization,
|
||||
setEventLogs,
|
||||
setPromptId,
|
||||
promptId,
|
||||
} = useSettings();
|
||||
|
||||
// Enable features by default on first load
|
||||
React.useEffect(() => {
|
||||
// Only enable if they haven't been explicitly set before
|
||||
if (isLatestBranch === undefined) {
|
||||
enableLatestBranch(true);
|
||||
}
|
||||
|
||||
if (contextOptimizationEnabled === undefined) {
|
||||
enableContextOptimization(true);
|
||||
}
|
||||
|
||||
if (autoSelectTemplate === undefined) {
|
||||
setAutoSelectTemplate(true);
|
||||
}
|
||||
|
||||
if (eventLogs === undefined) {
|
||||
setEventLogs(true);
|
||||
}
|
||||
}, []); // Only run once on component mount
|
||||
|
||||
const handleToggleFeature = useCallback(
|
||||
(id: string, enabled: boolean) => {
|
||||
switch (id) {
|
||||
case 'latestBranch': {
|
||||
enableLatestBranch(enabled);
|
||||
toast.success(`Main branch updates ${enabled ? 'enabled' : 'disabled'}`);
|
||||
break;
|
||||
}
|
||||
|
||||
case 'autoSelectTemplate': {
|
||||
setAutoSelectTemplate(enabled);
|
||||
toast.success(`Auto select template ${enabled ? 'enabled' : 'disabled'}`);
|
||||
break;
|
||||
}
|
||||
|
||||
case 'contextOptimization': {
|
||||
enableContextOptimization(enabled);
|
||||
toast.success(`Context optimization ${enabled ? 'enabled' : 'disabled'}`);
|
||||
break;
|
||||
}
|
||||
|
||||
case 'eventLogs': {
|
||||
setEventLogs(enabled);
|
||||
toast.success(`Event logging ${enabled ? 'enabled' : 'disabled'}`);
|
||||
break;
|
||||
}
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
[enableLatestBranch, setAutoSelectTemplate, enableContextOptimization, setEventLogs],
|
||||
);
|
||||
|
||||
const features = {
|
||||
stable: [
|
||||
{
|
||||
id: 'latestBranch',
|
||||
title: 'Main Branch Updates',
|
||||
description: 'Get the latest updates from the main branch',
|
||||
icon: 'i-ph:git-branch',
|
||||
enabled: isLatestBranch,
|
||||
tooltip: 'Enabled by default to receive updates from the main development branch',
|
||||
},
|
||||
{
|
||||
id: 'autoSelectTemplate',
|
||||
title: 'Auto Select Template',
|
||||
description: 'Automatically select starter template',
|
||||
icon: 'i-ph:selection',
|
||||
enabled: autoSelectTemplate,
|
||||
tooltip: 'Enabled by default to automatically select the most appropriate starter template',
|
||||
},
|
||||
{
|
||||
id: 'contextOptimization',
|
||||
title: 'Context Optimization',
|
||||
description: 'Optimize context for better responses',
|
||||
icon: 'i-ph:brain',
|
||||
enabled: contextOptimizationEnabled,
|
||||
tooltip: 'Enabled by default for improved AI responses',
|
||||
},
|
||||
{
|
||||
id: 'eventLogs',
|
||||
title: 'Event Logging',
|
||||
description: 'Enable detailed event logging and history',
|
||||
icon: 'i-ph:list-bullets',
|
||||
enabled: eventLogs,
|
||||
tooltip: 'Enabled by default to record detailed logs of system events and user actions',
|
||||
},
|
||||
],
|
||||
beta: [],
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-8">
|
||||
<FeatureSection
|
||||
title="Core Features"
|
||||
features={features.stable}
|
||||
icon="i-ph:check-circle"
|
||||
description="Essential features that are enabled by default for optimal performance"
|
||||
onToggleFeature={handleToggleFeature}
|
||||
/>
|
||||
|
||||
{features.beta.length > 0 && (
|
||||
<FeatureSection
|
||||
title="Beta Features"
|
||||
features={features.beta}
|
||||
icon="i-ph:test-tube"
|
||||
description="New features that are ready for testing but may have some rough edges"
|
||||
onToggleFeature={handleToggleFeature}
|
||||
/>
|
||||
)}
|
||||
|
||||
<motion.div
|
||||
layout
|
||||
className={classNames(
|
||||
'bg-bolt-elements-background-depth-2',
|
||||
'hover:bg-bolt-elements-background-depth-3',
|
||||
'transition-all duration-200',
|
||||
'rounded-lg p-4',
|
||||
'group',
|
||||
)}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div
|
||||
className={classNames(
|
||||
'p-2 rounded-lg text-xl',
|
||||
'bg-bolt-elements-background-depth-3 group-hover:bg-bolt-elements-background-depth-4',
|
||||
'transition-colors duration-200',
|
||||
'text-purple-500',
|
||||
)}
|
||||
>
|
||||
<div className="i-ph:book" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-purple-500 transition-colors">
|
||||
Prompt Library
|
||||
</h4>
|
||||
<p className="text-xs text-bolt-elements-textSecondary mt-0.5">
|
||||
Choose a prompt from the library to use as the system prompt
|
||||
</p>
|
||||
</div>
|
||||
<select
|
||||
value={promptId}
|
||||
onChange={(e) => {
|
||||
setPromptId(e.target.value);
|
||||
toast.success('Prompt template updated');
|
||||
}}
|
||||
className={classNames(
|
||||
'p-2 rounded-lg text-sm min-w-[200px]',
|
||||
'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
|
||||
'text-bolt-elements-textPrimary',
|
||||
'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
|
||||
'group-hover:border-purple-500/30',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
{PromptLibrary.getList().map((x) => (
|
||||
<option key={x.id} value={x.id}>
|
||||
{x.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
300
app/components/@settings/tabs/notifications/NotificationsTab.tsx
Normal file
300
app/components/@settings/tabs/notifications/NotificationsTab.tsx
Normal file
@@ -0,0 +1,300 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { logStore } from '~/lib/stores/logs';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
|
||||
interface NotificationDetails {
|
||||
type?: string;
|
||||
message?: string;
|
||||
currentVersion?: string;
|
||||
latestVersion?: string;
|
||||
branch?: string;
|
||||
updateUrl?: string;
|
||||
}
|
||||
|
||||
type FilterType = 'all' | 'system' | 'error' | 'warning' | 'update' | 'info' | 'provider' | 'network';
|
||||
|
||||
const NotificationsTab = () => {
|
||||
const [filter, setFilter] = useState<FilterType>('all');
|
||||
const logs = useStore(logStore.logs);
|
||||
|
||||
useEffect(() => {
|
||||
const startTime = performance.now();
|
||||
|
||||
return () => {
|
||||
const duration = performance.now() - startTime;
|
||||
logStore.logPerformanceMetric('NotificationsTab', 'mount-duration', duration);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleClearNotifications = () => {
|
||||
const count = Object.keys(logs).length;
|
||||
logStore.logInfo('Cleared notifications', {
|
||||
type: 'notification_clear',
|
||||
message: `Cleared ${count} notifications`,
|
||||
clearedCount: count,
|
||||
component: 'notifications',
|
||||
});
|
||||
logStore.clearLogs();
|
||||
};
|
||||
|
||||
const handleUpdateAction = (updateUrl: string) => {
|
||||
logStore.logInfo('Update link clicked', {
|
||||
type: 'update_click',
|
||||
message: 'User clicked update link',
|
||||
updateUrl,
|
||||
component: 'notifications',
|
||||
});
|
||||
window.open(updateUrl, '_blank');
|
||||
};
|
||||
|
||||
const handleFilterChange = (newFilter: FilterType) => {
|
||||
logStore.logInfo('Notification filter changed', {
|
||||
type: 'filter_change',
|
||||
message: `Filter changed to ${newFilter}`,
|
||||
previousFilter: filter,
|
||||
newFilter,
|
||||
component: 'notifications',
|
||||
});
|
||||
setFilter(newFilter);
|
||||
};
|
||||
|
||||
const filteredLogs = Object.values(logs)
|
||||
.filter((log) => {
|
||||
if (filter === 'all') {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (filter === 'update') {
|
||||
return log.details?.type === 'update';
|
||||
}
|
||||
|
||||
if (filter === 'system') {
|
||||
return log.category === 'system';
|
||||
}
|
||||
|
||||
if (filter === 'provider') {
|
||||
return log.category === 'provider';
|
||||
}
|
||||
|
||||
if (filter === 'network') {
|
||||
return log.category === 'network';
|
||||
}
|
||||
|
||||
return log.level === filter;
|
||||
})
|
||||
.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
|
||||
|
||||
const getNotificationStyle = (level: string, type?: string) => {
|
||||
if (type === 'update') {
|
||||
return {
|
||||
icon: 'i-ph:arrow-circle-up',
|
||||
color: 'text-purple-500 dark:text-purple-400',
|
||||
bg: 'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
|
||||
};
|
||||
}
|
||||
|
||||
switch (level) {
|
||||
case 'error':
|
||||
return {
|
||||
icon: 'i-ph:warning-circle',
|
||||
color: 'text-red-500 dark:text-red-400',
|
||||
bg: 'hover:bg-red-500/10 dark:hover:bg-red-500/20',
|
||||
};
|
||||
case 'warning':
|
||||
return {
|
||||
icon: 'i-ph:warning',
|
||||
color: 'text-yellow-500 dark:text-yellow-400',
|
||||
bg: 'hover:bg-yellow-500/10 dark:hover:bg-yellow-500/20',
|
||||
};
|
||||
case 'info':
|
||||
return {
|
||||
icon: 'i-ph:info',
|
||||
color: 'text-blue-500 dark:text-blue-400',
|
||||
bg: 'hover:bg-blue-500/10 dark:hover:bg-blue-500/20',
|
||||
};
|
||||
default:
|
||||
return {
|
||||
icon: 'i-ph:bell',
|
||||
color: 'text-gray-500 dark:text-gray-400',
|
||||
bg: 'hover:bg-gray-500/10 dark:hover:bg-gray-500/20',
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const renderNotificationDetails = (details: NotificationDetails) => {
|
||||
if (details.type === 'update') {
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">{details.message}</p>
|
||||
<div className="flex flex-col gap-1 text-xs text-gray-500 dark:text-gray-500">
|
||||
<p>Current Version: {details.currentVersion}</p>
|
||||
<p>Latest Version: {details.latestVersion}</p>
|
||||
<p>Branch: {details.branch}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => details.updateUrl && handleUpdateAction(details.updateUrl)}
|
||||
className={classNames(
|
||||
'mt-2 inline-flex items-center gap-2',
|
||||
'rounded-lg px-3 py-1.5',
|
||||
'text-sm font-medium',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'text-gray-900 dark:text-white',
|
||||
'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
<span className="i-ph:git-branch text-lg" />
|
||||
View Changes
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return details.message ? <p className="text-sm text-gray-600 dark:text-gray-400">{details.message}</p> : null;
|
||||
};
|
||||
|
||||
const filterOptions: { id: FilterType; label: string; icon: string; color: string }[] = [
|
||||
{ id: 'all', label: 'All Notifications', icon: 'i-ph:bell', color: '#9333ea' },
|
||||
{ id: 'system', label: 'System', icon: 'i-ph:gear', color: '#6b7280' },
|
||||
{ id: 'update', label: 'Updates', icon: 'i-ph:arrow-circle-up', color: '#9333ea' },
|
||||
{ id: 'error', label: 'Errors', icon: 'i-ph:warning-circle', color: '#ef4444' },
|
||||
{ id: 'warning', label: 'Warnings', icon: 'i-ph:warning', color: '#f59e0b' },
|
||||
{ id: 'info', label: 'Information', icon: 'i-ph:info', color: '#3b82f6' },
|
||||
{ id: 'provider', label: 'Providers', icon: 'i-ph:robot', color: '#10b981' },
|
||||
{ id: 'network', label: 'Network', icon: 'i-ph:wifi-high', color: '#6366f1' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button
|
||||
className={classNames(
|
||||
'flex items-center gap-2',
|
||||
'rounded-lg px-3 py-1.5',
|
||||
'text-sm text-gray-900 dark:text-white',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={classNames('text-lg', filterOptions.find((opt) => opt.id === filter)?.icon || 'i-ph:funnel')}
|
||||
style={{ color: filterOptions.find((opt) => opt.id === filter)?.color }}
|
||||
/>
|
||||
{filterOptions.find((opt) => opt.id === filter)?.label || 'Filter Notifications'}
|
||||
<span className="i-ph:caret-down text-lg text-gray-500 dark:text-gray-400" />
|
||||
</button>
|
||||
</DropdownMenu.Trigger>
|
||||
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content
|
||||
className="min-w-[200px] bg-white dark:bg-[#0A0A0A] rounded-lg shadow-lg py-1 z-[250] animate-in fade-in-0 zoom-in-95 border border-[#E5E5E5] dark:border-[#1A1A1A]"
|
||||
sideOffset={5}
|
||||
align="start"
|
||||
side="bottom"
|
||||
>
|
||||
{filterOptions.map((option) => (
|
||||
<DropdownMenu.Item
|
||||
key={option.id}
|
||||
className="group flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-500/10 dark:hover:bg-purple-500/20 cursor-pointer transition-colors"
|
||||
onClick={() => handleFilterChange(option.id)}
|
||||
>
|
||||
<div className="mr-3 flex h-5 w-5 items-center justify-center">
|
||||
<div
|
||||
className={classNames(option.icon, 'text-lg group-hover:text-purple-500 transition-colors')}
|
||||
style={{ color: option.color }}
|
||||
/>
|
||||
</div>
|
||||
<span className="group-hover:text-purple-500 transition-colors">{option.label}</span>
|
||||
</DropdownMenu.Item>
|
||||
))}
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
|
||||
<button
|
||||
onClick={handleClearNotifications}
|
||||
className={classNames(
|
||||
'group flex items-center gap-2',
|
||||
'rounded-lg px-3 py-1.5',
|
||||
'text-sm text-gray-900 dark:text-white',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
<span className="i-ph:trash text-lg text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
|
||||
Clear All
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
{filteredLogs.length === 0 ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className={classNames(
|
||||
'flex flex-col items-center justify-center gap-4',
|
||||
'rounded-lg p-8 text-center',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
)}
|
||||
>
|
||||
<span className="i-ph:bell-slash text-4xl text-gray-400 dark:text-gray-600" />
|
||||
<div className="flex flex-col gap-1">
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-white">No Notifications</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">You're all caught up!</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
filteredLogs.map((log) => {
|
||||
const style = getNotificationStyle(log.level, log.details?.type);
|
||||
return (
|
||||
<motion.div
|
||||
key={log.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className={classNames(
|
||||
'flex flex-col gap-2',
|
||||
'rounded-lg p-4',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
style.bg,
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className={classNames('text-lg', style.icon, style.color)} />
|
||||
<div className="flex flex-col gap-1">
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-white">{log.message}</h3>
|
||||
{log.details && renderNotificationDetails(log.details as NotificationDetails)}
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
Category: {log.category}
|
||||
{log.subCategory ? ` > ${log.subCategory}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<time className="shrink-0 text-xs text-gray-500 dark:text-gray-400">
|
||||
{formatDistanceToNow(new Date(log.timestamp), { addSuffix: true })}
|
||||
</time>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotificationsTab;
|
||||
174
app/components/@settings/tabs/profile/ProfileTab.tsx
Normal file
174
app/components/@settings/tabs/profile/ProfileTab.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import { useState } from 'react';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { profileStore, updateProfile } from '~/lib/stores/profile';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
export default function ProfileTab() {
|
||||
const profile = useStore(profileStore);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
|
||||
const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsUploading(true);
|
||||
|
||||
// Convert the file to base64
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onloadend = () => {
|
||||
const base64String = reader.result as string;
|
||||
updateProfile({ avatar: base64String });
|
||||
setIsUploading(false);
|
||||
toast.success('Profile picture updated');
|
||||
};
|
||||
|
||||
reader.onerror = () => {
|
||||
console.error('Error reading file:', reader.error);
|
||||
setIsUploading(false);
|
||||
toast.error('Failed to update profile picture');
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} catch (error) {
|
||||
console.error('Error uploading avatar:', error);
|
||||
setIsUploading(false);
|
||||
toast.error('Failed to update profile picture');
|
||||
}
|
||||
};
|
||||
|
||||
const handleProfileUpdate = (field: 'username' | 'bio', value: string) => {
|
||||
updateProfile({ [field]: value });
|
||||
|
||||
// Only show toast for completed typing (after 1 second of no typing)
|
||||
const debounceToast = setTimeout(() => {
|
||||
toast.success(`${field.charAt(0).toUpperCase() + field.slice(1)} updated`);
|
||||
}, 1000);
|
||||
|
||||
return () => clearTimeout(debounceToast);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="space-y-6">
|
||||
{/* Personal Information Section */}
|
||||
<div>
|
||||
{/* Avatar Upload */}
|
||||
<div className="flex items-start gap-6 mb-8">
|
||||
<div
|
||||
className={classNames(
|
||||
'w-24 h-24 rounded-full overflow-hidden',
|
||||
'bg-gray-100 dark:bg-gray-800/50',
|
||||
'flex items-center justify-center',
|
||||
'ring-1 ring-gray-200 dark:ring-gray-700',
|
||||
'relative group',
|
||||
'transition-all duration-300 ease-out',
|
||||
'hover:ring-purple-500/30 dark:hover:ring-purple-500/30',
|
||||
'hover:shadow-lg hover:shadow-purple-500/10',
|
||||
)}
|
||||
>
|
||||
{profile.avatar ? (
|
||||
<img
|
||||
src={profile.avatar}
|
||||
alt="Profile"
|
||||
className={classNames(
|
||||
'w-full h-full object-cover',
|
||||
'transition-all duration-300 ease-out',
|
||||
'group-hover:scale-105 group-hover:brightness-90',
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<div className="i-ph:robot-fill w-16 h-16 text-gray-400 dark:text-gray-500 transition-colors group-hover:text-purple-500/70 transform -translate-y-1" />
|
||||
)}
|
||||
|
||||
<label
|
||||
className={classNames(
|
||||
'absolute inset-0',
|
||||
'flex items-center justify-center',
|
||||
'bg-black/0 group-hover:bg-black/40',
|
||||
'cursor-pointer transition-all duration-300 ease-out',
|
||||
isUploading ? 'cursor-wait' : '',
|
||||
)}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={handleAvatarUpload}
|
||||
disabled={isUploading}
|
||||
/>
|
||||
{isUploading ? (
|
||||
<div className="i-ph:spinner-gap w-6 h-6 text-white animate-spin" />
|
||||
) : (
|
||||
<div className="i-ph:camera-plus w-6 h-6 text-white opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out transform group-hover:scale-110" />
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 pt-1">
|
||||
<label className="block text-base font-medium text-gray-900 dark:text-gray-100 mb-1">
|
||||
Profile Picture
|
||||
</label>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Upload a profile picture or avatar</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Username Input */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">Username</label>
|
||||
<div className="relative group">
|
||||
<div className="absolute left-3.5 top-1/2 -translate-y-1/2">
|
||||
<div className="i-ph:user-circle-fill w-5 h-5 text-gray-400 dark:text-gray-500 transition-colors group-focus-within:text-purple-500" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={profile.username}
|
||||
onChange={(e) => handleProfileUpdate('username', e.target.value)}
|
||||
className={classNames(
|
||||
'w-full pl-11 pr-4 py-2.5 rounded-xl',
|
||||
'bg-white dark:bg-gray-800/50',
|
||||
'border border-gray-200 dark:border-gray-700/50',
|
||||
'text-gray-900 dark:text-white',
|
||||
'placeholder-gray-400 dark:placeholder-gray-500',
|
||||
'focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500/50',
|
||||
'transition-all duration-300 ease-out',
|
||||
)}
|
||||
placeholder="Enter your username"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bio Input */}
|
||||
<div className="mb-8">
|
||||
<label className="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">Bio</label>
|
||||
<div className="relative group">
|
||||
<div className="absolute left-3.5 top-3">
|
||||
<div className="i-ph:text-aa w-5 h-5 text-gray-400 dark:text-gray-500 transition-colors group-focus-within:text-purple-500" />
|
||||
</div>
|
||||
<textarea
|
||||
value={profile.bio}
|
||||
onChange={(e) => handleProfileUpdate('bio', e.target.value)}
|
||||
className={classNames(
|
||||
'w-full pl-11 pr-4 py-2.5 rounded-xl',
|
||||
'bg-white dark:bg-gray-800/50',
|
||||
'border border-gray-200 dark:border-gray-700/50',
|
||||
'text-gray-900 dark:text-white',
|
||||
'placeholder-gray-400 dark:placeholder-gray-500',
|
||||
'focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500/50',
|
||||
'transition-all duration-300 ease-out',
|
||||
'resize-none',
|
||||
'h-32',
|
||||
)}
|
||||
placeholder="Tell us about yourself"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,305 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { Switch } from '~/components/ui/Switch';
|
||||
import { useSettings } from '~/lib/hooks/useSettings';
|
||||
import { URL_CONFIGURABLE_PROVIDERS } from '~/lib/stores/settings';
|
||||
import type { IProviderConfig } from '~/types/model';
|
||||
import { logStore } from '~/lib/stores/logs';
|
||||
import { motion } from 'framer-motion';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { toast } from 'react-toastify';
|
||||
import { providerBaseUrlEnvKeys } from '~/utils/constants';
|
||||
import { SiAmazon, SiGoogle, SiHuggingface, SiPerplexity, SiOpenai } from 'react-icons/si';
|
||||
import { BsRobot, BsCloud } from 'react-icons/bs';
|
||||
import { TbBrain, TbCloudComputing } from 'react-icons/tb';
|
||||
import { BiCodeBlock, BiChip } from 'react-icons/bi';
|
||||
import { FaCloud, FaBrain } from 'react-icons/fa';
|
||||
import type { IconType } from 'react-icons';
|
||||
|
||||
// Add type for provider names to ensure type safety
|
||||
type ProviderName =
|
||||
| 'AmazonBedrock'
|
||||
| 'Anthropic'
|
||||
| 'Cohere'
|
||||
| 'Deepseek'
|
||||
| 'Google'
|
||||
| 'Groq'
|
||||
| 'HuggingFace'
|
||||
| 'Hyperbolic'
|
||||
| 'Mistral'
|
||||
| 'OpenAI'
|
||||
| 'OpenRouter'
|
||||
| 'Perplexity'
|
||||
| 'Together'
|
||||
| 'XAI';
|
||||
|
||||
// Update the PROVIDER_ICONS type to use the ProviderName type
|
||||
const PROVIDER_ICONS: Record<ProviderName, IconType> = {
|
||||
AmazonBedrock: SiAmazon,
|
||||
Anthropic: FaBrain,
|
||||
Cohere: BiChip,
|
||||
Deepseek: BiCodeBlock,
|
||||
Google: SiGoogle,
|
||||
Groq: BsCloud,
|
||||
HuggingFace: SiHuggingface,
|
||||
Hyperbolic: TbCloudComputing,
|
||||
Mistral: TbBrain,
|
||||
OpenAI: SiOpenai,
|
||||
OpenRouter: FaCloud,
|
||||
Perplexity: SiPerplexity,
|
||||
Together: BsCloud,
|
||||
XAI: BsRobot,
|
||||
};
|
||||
|
||||
// Update PROVIDER_DESCRIPTIONS to use the same type
|
||||
const PROVIDER_DESCRIPTIONS: Partial<Record<ProviderName, string>> = {
|
||||
Anthropic: 'Access Claude and other Anthropic models',
|
||||
OpenAI: 'Use GPT-4, GPT-3.5, and other OpenAI models',
|
||||
};
|
||||
|
||||
const CloudProvidersTab = () => {
|
||||
const settings = useSettings();
|
||||
const [editingProvider, setEditingProvider] = useState<string | null>(null);
|
||||
const [filteredProviders, setFilteredProviders] = useState<IProviderConfig[]>([]);
|
||||
const [categoryEnabled, setCategoryEnabled] = useState<boolean>(false);
|
||||
|
||||
// Load and filter providers
|
||||
useEffect(() => {
|
||||
const newFilteredProviders = Object.entries(settings.providers || {})
|
||||
.filter(([key]) => !['Ollama', 'LMStudio', 'OpenAILike'].includes(key))
|
||||
.map(([key, value]) => ({
|
||||
name: key,
|
||||
settings: value.settings,
|
||||
staticModels: value.staticModels || [],
|
||||
getDynamicModels: value.getDynamicModels,
|
||||
getApiKeyLink: value.getApiKeyLink,
|
||||
labelForGetApiKey: value.labelForGetApiKey,
|
||||
icon: value.icon,
|
||||
}));
|
||||
|
||||
const sorted = newFilteredProviders.sort((a, b) => a.name.localeCompare(b.name));
|
||||
setFilteredProviders(sorted);
|
||||
|
||||
// Update category enabled state
|
||||
const allEnabled = newFilteredProviders.every((p) => p.settings.enabled);
|
||||
setCategoryEnabled(allEnabled);
|
||||
}, [settings.providers]);
|
||||
|
||||
const handleToggleCategory = useCallback(
|
||||
(enabled: boolean) => {
|
||||
// Update all providers
|
||||
filteredProviders.forEach((provider) => {
|
||||
settings.updateProviderSettings(provider.name, { ...provider.settings, enabled });
|
||||
});
|
||||
|
||||
setCategoryEnabled(enabled);
|
||||
toast.success(enabled ? 'All cloud providers enabled' : 'All cloud providers disabled');
|
||||
},
|
||||
[filteredProviders, settings],
|
||||
);
|
||||
|
||||
const handleToggleProvider = useCallback(
|
||||
(provider: IProviderConfig, enabled: boolean) => {
|
||||
// Update the provider settings in the store
|
||||
settings.updateProviderSettings(provider.name, { ...provider.settings, enabled });
|
||||
|
||||
if (enabled) {
|
||||
logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
|
||||
toast.success(`${provider.name} enabled`);
|
||||
} else {
|
||||
logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
|
||||
toast.success(`${provider.name} disabled`);
|
||||
}
|
||||
},
|
||||
[settings],
|
||||
);
|
||||
|
||||
const handleUpdateBaseUrl = useCallback(
|
||||
(provider: IProviderConfig, baseUrl: string) => {
|
||||
const newBaseUrl: string | undefined = baseUrl.trim() || undefined;
|
||||
|
||||
// Update the provider settings in the store
|
||||
settings.updateProviderSettings(provider.name, { ...provider.settings, baseUrl: newBaseUrl });
|
||||
|
||||
logStore.logProvider(`Base URL updated for ${provider.name}`, {
|
||||
provider: provider.name,
|
||||
baseUrl: newBaseUrl,
|
||||
});
|
||||
toast.success(`${provider.name} base URL updated`);
|
||||
setEditingProvider(null);
|
||||
},
|
||||
[settings],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<motion.div
|
||||
className="space-y-4"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-4 mt-8 mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={classNames(
|
||||
'w-8 h-8 flex items-center justify-center rounded-lg',
|
||||
'bg-bolt-elements-background-depth-3',
|
||||
'text-purple-500',
|
||||
)}
|
||||
>
|
||||
<TbCloudComputing className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-md font-medium text-bolt-elements-textPrimary">Cloud Providers</h4>
|
||||
<p className="text-sm text-bolt-elements-textSecondary">Connect to cloud-based AI models and services</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-bolt-elements-textSecondary">Enable All Cloud</span>
|
||||
<Switch checked={categoryEnabled} onCheckedChange={handleToggleCategory} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{filteredProviders.map((provider, index) => (
|
||||
<motion.div
|
||||
key={provider.name}
|
||||
className={classNames(
|
||||
'rounded-lg border bg-bolt-elements-background text-bolt-elements-textPrimary shadow-sm',
|
||||
'bg-bolt-elements-background-depth-2',
|
||||
'hover:bg-bolt-elements-background-depth-3',
|
||||
'transition-all duration-200',
|
||||
'relative overflow-hidden group',
|
||||
'flex flex-col',
|
||||
)}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
>
|
||||
<div className="absolute top-0 right-0 p-2 flex gap-1">
|
||||
{URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && (
|
||||
<motion.span
|
||||
className="px-2 py-0.5 text-xs rounded-full bg-purple-500/10 text-purple-500 font-medium"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
Configurable
|
||||
</motion.span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-4">
|
||||
<motion.div
|
||||
className={classNames(
|
||||
'w-10 h-10 flex items-center justify-center rounded-xl',
|
||||
'bg-bolt-elements-background-depth-3 group-hover:bg-bolt-elements-background-depth-4',
|
||||
'transition-all duration-200',
|
||||
provider.settings.enabled ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
|
||||
)}
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
<div className={classNames('w-6 h-6', 'transition-transform duration-200', 'group-hover:rotate-12')}>
|
||||
{React.createElement(PROVIDER_ICONS[provider.name as ProviderName] || BsRobot, {
|
||||
className: 'w-full h-full',
|
||||
'aria-label': `${provider.name} logo`,
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between gap-4 mb-2">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-purple-500 transition-colors">
|
||||
{provider.name}
|
||||
</h4>
|
||||
<p className="text-xs text-bolt-elements-textSecondary mt-0.5">
|
||||
{PROVIDER_DESCRIPTIONS[provider.name as keyof typeof PROVIDER_DESCRIPTIONS] ||
|
||||
(URL_CONFIGURABLE_PROVIDERS.includes(provider.name)
|
||||
? 'Configure custom endpoint for this provider'
|
||||
: 'Standard AI provider integration')}
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={provider.settings.enabled}
|
||||
onCheckedChange={(checked) => handleToggleProvider(provider, checked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{provider.settings.enabled && URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<div className="flex items-center gap-2 mt-4">
|
||||
{editingProvider === provider.name ? (
|
||||
<input
|
||||
type="text"
|
||||
defaultValue={provider.settings.baseUrl}
|
||||
placeholder={`Enter ${provider.name} base URL`}
|
||||
className={classNames(
|
||||
'flex-1 px-3 py-1.5 rounded-lg text-sm',
|
||||
'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
|
||||
'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
|
||||
'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleUpdateBaseUrl(provider, e.currentTarget.value);
|
||||
} else if (e.key === 'Escape') {
|
||||
setEditingProvider(null);
|
||||
}
|
||||
}}
|
||||
onBlur={(e) => handleUpdateBaseUrl(provider, e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="flex-1 px-3 py-1.5 rounded-lg text-sm cursor-pointer group/url"
|
||||
onClick={() => setEditingProvider(provider.name)}
|
||||
>
|
||||
<div className="flex items-center gap-2 text-bolt-elements-textSecondary">
|
||||
<div className="i-ph:link text-sm" />
|
||||
<span className="group-hover/url:text-purple-500 transition-colors">
|
||||
{provider.settings.baseUrl || 'Click to set base URL'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{providerBaseUrlEnvKeys[provider.name]?.baseUrlKey && (
|
||||
<div className="mt-2 text-xs text-green-500">
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="i-ph:info" />
|
||||
<span>Environment URL set in .env file</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="absolute inset-0 border-2 border-purple-500/0 rounded-lg pointer-events-none"
|
||||
animate={{
|
||||
borderColor: provider.settings.enabled ? 'rgba(168, 85, 247, 0.2)' : 'rgba(168, 85, 247, 0)',
|
||||
scale: provider.settings.enabled ? 1 : 0.98,
|
||||
}}
|
||||
transition={{ duration: 0.2 }}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CloudProvidersTab;
|
||||
@@ -0,0 +1,718 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { Switch } from '~/components/ui/Switch';
|
||||
import { useSettings } from '~/lib/hooks/useSettings';
|
||||
import { LOCAL_PROVIDERS, URL_CONFIGURABLE_PROVIDERS } from '~/lib/stores/settings';
|
||||
import type { IProviderConfig } from '~/types/model';
|
||||
import { logStore } from '~/lib/stores/logs';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { BsRobot } from 'react-icons/bs';
|
||||
import type { IconType } from 'react-icons';
|
||||
import { BiChip } from 'react-icons/bi';
|
||||
import { TbBrandOpenai } from 'react-icons/tb';
|
||||
import { providerBaseUrlEnvKeys } from '~/utils/constants';
|
||||
import { useToast } from '~/components/ui/use-toast';
|
||||
import { Progress } from '~/components/ui/Progress';
|
||||
import OllamaModelInstaller from './OllamaModelInstaller';
|
||||
|
||||
// Add type for provider names to ensure type safety
|
||||
type ProviderName = 'Ollama' | 'LMStudio' | 'OpenAILike';
|
||||
|
||||
// Update the PROVIDER_ICONS type to use the ProviderName type
|
||||
const PROVIDER_ICONS: Record<ProviderName, IconType> = {
|
||||
Ollama: BsRobot,
|
||||
LMStudio: BsRobot,
|
||||
OpenAILike: TbBrandOpenai,
|
||||
};
|
||||
|
||||
// Update PROVIDER_DESCRIPTIONS to use the same type
|
||||
const PROVIDER_DESCRIPTIONS: Record<ProviderName, string> = {
|
||||
Ollama: 'Run open-source models locally on your machine',
|
||||
LMStudio: 'Local model inference with LM Studio',
|
||||
OpenAILike: 'Connect to OpenAI-compatible API endpoints',
|
||||
};
|
||||
|
||||
// Add a constant for the Ollama API base URL
|
||||
const OLLAMA_API_URL = 'http://127.0.0.1:11434';
|
||||
|
||||
interface OllamaModel {
|
||||
name: string;
|
||||
digest: string;
|
||||
size: number;
|
||||
modified_at: string;
|
||||
details?: {
|
||||
family: string;
|
||||
parameter_size: string;
|
||||
quantization_level: string;
|
||||
};
|
||||
status?: 'idle' | 'updating' | 'updated' | 'error' | 'checking';
|
||||
error?: string;
|
||||
newDigest?: string;
|
||||
progress?: {
|
||||
current: number;
|
||||
total: number;
|
||||
status: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface OllamaPullResponse {
|
||||
status: string;
|
||||
completed?: number;
|
||||
total?: number;
|
||||
digest?: string;
|
||||
}
|
||||
|
||||
const isOllamaPullResponse = (data: unknown): data is OllamaPullResponse => {
|
||||
return (
|
||||
typeof data === 'object' &&
|
||||
data !== null &&
|
||||
'status' in data &&
|
||||
typeof (data as OllamaPullResponse).status === 'string'
|
||||
);
|
||||
};
|
||||
|
||||
export default function LocalProvidersTab() {
|
||||
const { providers, updateProviderSettings } = useSettings();
|
||||
const [filteredProviders, setFilteredProviders] = useState<IProviderConfig[]>([]);
|
||||
const [categoryEnabled, setCategoryEnabled] = useState(false);
|
||||
const [ollamaModels, setOllamaModels] = useState<OllamaModel[]>([]);
|
||||
const [isLoadingModels, setIsLoadingModels] = useState(false);
|
||||
const [editingProvider, setEditingProvider] = useState<string | null>(null);
|
||||
const { toast } = useToast();
|
||||
|
||||
// Effect to filter and sort providers
|
||||
useEffect(() => {
|
||||
const newFilteredProviders = Object.entries(providers || {})
|
||||
.filter(([key]) => [...LOCAL_PROVIDERS, 'OpenAILike'].includes(key))
|
||||
.map(([key, value]) => {
|
||||
const provider = value as IProviderConfig;
|
||||
const envKey = providerBaseUrlEnvKeys[key]?.baseUrlKey;
|
||||
|
||||
// Get environment URL safely
|
||||
const envUrl = envKey ? (import.meta.env[envKey] as string | undefined) : undefined;
|
||||
|
||||
console.log(`Checking env URL for ${key}:`, {
|
||||
envKey,
|
||||
envUrl,
|
||||
currentBaseUrl: provider.settings.baseUrl,
|
||||
});
|
||||
|
||||
// If there's an environment URL and no base URL set, update it
|
||||
if (envUrl && !provider.settings.baseUrl) {
|
||||
console.log(`Setting base URL for ${key} from env:`, envUrl);
|
||||
updateProviderSettings(key, {
|
||||
...provider.settings,
|
||||
baseUrl: envUrl,
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
name: key,
|
||||
settings: {
|
||||
...provider.settings,
|
||||
baseUrl: provider.settings.baseUrl || envUrl,
|
||||
},
|
||||
staticModels: provider.staticModels || [],
|
||||
getDynamicModels: provider.getDynamicModels,
|
||||
getApiKeyLink: provider.getApiKeyLink,
|
||||
labelForGetApiKey: provider.labelForGetApiKey,
|
||||
icon: provider.icon,
|
||||
} as IProviderConfig;
|
||||
});
|
||||
|
||||
// Custom sort function to ensure LMStudio appears before OpenAILike
|
||||
const sorted = newFilteredProviders.sort((a, b) => {
|
||||
if (a.name === 'LMStudio') {
|
||||
return -1;
|
||||
}
|
||||
|
||||
if (b.name === 'LMStudio') {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if (a.name === 'OpenAILike') {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if (b.name === 'OpenAILike') {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
setFilteredProviders(sorted);
|
||||
}, [providers, updateProviderSettings]);
|
||||
|
||||
// Add effect to update category toggle state based on provider states
|
||||
useEffect(() => {
|
||||
const newCategoryState = filteredProviders.every((p) => p.settings.enabled);
|
||||
setCategoryEnabled(newCategoryState);
|
||||
}, [filteredProviders]);
|
||||
|
||||
// Fetch Ollama models when enabled
|
||||
useEffect(() => {
|
||||
const ollamaProvider = filteredProviders.find((p) => p.name === 'Ollama');
|
||||
|
||||
if (ollamaProvider?.settings.enabled) {
|
||||
fetchOllamaModels();
|
||||
}
|
||||
}, [filteredProviders]);
|
||||
|
||||
const fetchOllamaModels = async () => {
|
||||
try {
|
||||
setIsLoadingModels(true);
|
||||
|
||||
const response = await fetch('http://127.0.0.1:11434/api/tags');
|
||||
const data = (await response.json()) as { models: OllamaModel[] };
|
||||
|
||||
setOllamaModels(
|
||||
data.models.map((model) => ({
|
||||
...model,
|
||||
status: 'idle' as const,
|
||||
})),
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error fetching Ollama models:', error);
|
||||
} finally {
|
||||
setIsLoadingModels(false);
|
||||
}
|
||||
};
|
||||
|
||||
const updateOllamaModel = async (modelName: string): Promise<boolean> => {
|
||||
try {
|
||||
const response = await fetch(`${OLLAMA_API_URL}/api/pull`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name: modelName }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to update ${modelName}`);
|
||||
}
|
||||
|
||||
const reader = response.body?.getReader();
|
||||
|
||||
if (!reader) {
|
||||
throw new Error('No response reader available');
|
||||
}
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
|
||||
if (done) {
|
||||
break;
|
||||
}
|
||||
|
||||
const text = new TextDecoder().decode(value);
|
||||
const lines = text.split('\n').filter(Boolean);
|
||||
|
||||
for (const line of lines) {
|
||||
const rawData = JSON.parse(line);
|
||||
|
||||
if (!isOllamaPullResponse(rawData)) {
|
||||
console.error('Invalid response format:', rawData);
|
||||
continue;
|
||||
}
|
||||
|
||||
setOllamaModels((current) =>
|
||||
current.map((m) =>
|
||||
m.name === modelName
|
||||
? {
|
||||
...m,
|
||||
progress: {
|
||||
current: rawData.completed || 0,
|
||||
total: rawData.total || 0,
|
||||
status: rawData.status,
|
||||
},
|
||||
newDigest: rawData.digest,
|
||||
}
|
||||
: m,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const updatedResponse = await fetch('http://127.0.0.1:11434/api/tags');
|
||||
const updatedData = (await updatedResponse.json()) as { models: OllamaModel[] };
|
||||
const updatedModel = updatedData.models.find((m) => m.name === modelName);
|
||||
|
||||
return updatedModel !== undefined;
|
||||
} catch (error) {
|
||||
console.error(`Error updating ${modelName}:`, error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleCategory = useCallback(
|
||||
async (enabled: boolean) => {
|
||||
filteredProviders.forEach((provider) => {
|
||||
updateProviderSettings(provider.name, { ...provider.settings, enabled });
|
||||
});
|
||||
toast(enabled ? 'All local providers enabled' : 'All local providers disabled');
|
||||
},
|
||||
[filteredProviders, updateProviderSettings],
|
||||
);
|
||||
|
||||
const handleToggleProvider = (provider: IProviderConfig, enabled: boolean) => {
|
||||
updateProviderSettings(provider.name, {
|
||||
...provider.settings,
|
||||
enabled,
|
||||
});
|
||||
|
||||
if (enabled) {
|
||||
logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
|
||||
toast(`${provider.name} enabled`);
|
||||
} else {
|
||||
logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
|
||||
toast(`${provider.name} disabled`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateBaseUrl = (provider: IProviderConfig, newBaseUrl: string) => {
|
||||
updateProviderSettings(provider.name, {
|
||||
...provider.settings,
|
||||
baseUrl: newBaseUrl,
|
||||
});
|
||||
toast(`${provider.name} base URL updated`);
|
||||
setEditingProvider(null);
|
||||
};
|
||||
|
||||
const handleUpdateOllamaModel = async (modelName: string) => {
|
||||
const updateSuccess = await updateOllamaModel(modelName);
|
||||
|
||||
if (updateSuccess) {
|
||||
toast(`Updated ${modelName}`);
|
||||
} else {
|
||||
toast(`Failed to update ${modelName}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteOllamaModel = async (modelName: string) => {
|
||||
try {
|
||||
const response = await fetch(`${OLLAMA_API_URL}/api/delete`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ name: modelName }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to delete ${modelName}`);
|
||||
}
|
||||
|
||||
setOllamaModels((current) => current.filter((m) => m.name !== modelName));
|
||||
toast(`Deleted ${modelName}`);
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
|
||||
console.error(`Error deleting ${modelName}:`, errorMessage);
|
||||
toast(`Failed to delete ${modelName}`);
|
||||
}
|
||||
};
|
||||
|
||||
// Update model details display
|
||||
const ModelDetails = ({ model }: { model: OllamaModel }) => (
|
||||
<div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="i-ph:code text-purple-500" />
|
||||
<span>{model.digest.substring(0, 7)}</span>
|
||||
</div>
|
||||
{model.details && (
|
||||
<>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="i-ph:database text-purple-500" />
|
||||
<span>{model.details.parameter_size}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="i-ph:cube text-purple-500" />
|
||||
<span>{model.details.quantization_level}</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
// Update model actions to not use Tooltip
|
||||
const ModelActions = ({
|
||||
model,
|
||||
onUpdate,
|
||||
onDelete,
|
||||
}: {
|
||||
model: OllamaModel;
|
||||
onUpdate: () => void;
|
||||
onDelete: () => void;
|
||||
}) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<motion.button
|
||||
onClick={onUpdate}
|
||||
disabled={model.status === 'updating'}
|
||||
className={classNames(
|
||||
'rounded-lg p-2',
|
||||
'bg-purple-500/10 text-purple-500',
|
||||
'hover:bg-purple-500/20',
|
||||
'transition-all duration-200',
|
||||
{ 'opacity-50 cursor-not-allowed': model.status === 'updating' },
|
||||
)}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
title="Update model"
|
||||
>
|
||||
{model.status === 'updating' ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
|
||||
<span className="text-sm">Updating...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="i-ph:arrows-clockwise text-lg" />
|
||||
)}
|
||||
</motion.button>
|
||||
<motion.button
|
||||
onClick={onDelete}
|
||||
disabled={model.status === 'updating'}
|
||||
className={classNames(
|
||||
'rounded-lg p-2',
|
||||
'bg-red-500/10 text-red-500',
|
||||
'hover:bg-red-500/20',
|
||||
'transition-all duration-200',
|
||||
{ 'opacity-50 cursor-not-allowed': model.status === 'updating' },
|
||||
)}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
title="Delete model"
|
||||
>
|
||||
<div className="i-ph:trash text-lg" />
|
||||
</motion.button>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'rounded-lg bg-bolt-elements-background text-bolt-elements-textPrimary shadow-sm p-4',
|
||||
'hover:bg-bolt-elements-background-depth-2',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
role="region"
|
||||
aria-label="Local Providers Configuration"
|
||||
>
|
||||
<motion.div
|
||||
className="space-y-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{/* Header section */}
|
||||
<div className="flex items-center justify-between gap-4 border-b border-bolt-elements-borderColor pb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<motion.div
|
||||
className={classNames(
|
||||
'w-10 h-10 flex items-center justify-center rounded-xl',
|
||||
'bg-purple-500/10 text-purple-500',
|
||||
)}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
>
|
||||
<BiChip className="w-6 h-6" />
|
||||
</motion.div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-bolt-elements-textPrimary">Local AI Models</h2>
|
||||
<p className="text-sm text-bolt-elements-textSecondary">Configure and manage your local AI providers</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-bolt-elements-textSecondary">Enable All</span>
|
||||
<Switch
|
||||
checked={categoryEnabled}
|
||||
onCheckedChange={handleToggleCategory}
|
||||
aria-label="Toggle all local providers"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ollama Section */}
|
||||
{filteredProviders
|
||||
.filter((provider) => provider.name === 'Ollama')
|
||||
.map((provider) => (
|
||||
<motion.div
|
||||
key={provider.name}
|
||||
className={classNames(
|
||||
'bg-bolt-elements-background-depth-2 rounded-xl',
|
||||
'hover:bg-bolt-elements-background-depth-3',
|
||||
'transition-all duration-200 p-5',
|
||||
'relative overflow-hidden group',
|
||||
)}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
whileHover={{ scale: 1.01 }}
|
||||
>
|
||||
{/* Provider Header */}
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<motion.div
|
||||
className={classNames(
|
||||
'w-12 h-12 flex items-center justify-center rounded-xl',
|
||||
'bg-bolt-elements-background-depth-3',
|
||||
provider.settings.enabled ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
|
||||
)}
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
>
|
||||
{React.createElement(PROVIDER_ICONS[provider.name as ProviderName] || BsRobot, {
|
||||
className: 'w-7 h-7',
|
||||
'aria-label': `${provider.name} icon`,
|
||||
})}
|
||||
</motion.div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-md font-semibold text-bolt-elements-textPrimary">{provider.name}</h3>
|
||||
<span className="px-2 py-0.5 text-xs rounded-full bg-green-500/10 text-green-500">Local</span>
|
||||
</div>
|
||||
<p className="text-sm text-bolt-elements-textSecondary mt-1">
|
||||
{PROVIDER_DESCRIPTIONS[provider.name as ProviderName]}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Switch
|
||||
checked={provider.settings.enabled}
|
||||
onCheckedChange={(checked) => handleToggleProvider(provider, checked)}
|
||||
aria-label={`Toggle ${provider.name} provider`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Ollama Models Section */}
|
||||
{provider.settings.enabled && (
|
||||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="mt-6 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="i-ph:cube-duotone text-purple-500" />
|
||||
<h4 className="text-sm font-medium text-bolt-elements-textPrimary">Installed Models</h4>
|
||||
</div>
|
||||
{isLoadingModels ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
|
||||
<span className="text-sm text-bolt-elements-textSecondary">Loading models...</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-sm text-bolt-elements-textSecondary">
|
||||
{ollamaModels.length} models available
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{isLoadingModels ? (
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="h-20 w-full bg-bolt-elements-background-depth-3 rounded-lg animate-pulse"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : ollamaModels.length === 0 ? (
|
||||
<div className="text-center py-8 text-bolt-elements-textSecondary">
|
||||
<div className="i-ph:cube-transparent text-4xl mx-auto mb-2" />
|
||||
<p>No models installed yet</p>
|
||||
<p className="text-sm">Install your first model below</p>
|
||||
</div>
|
||||
) : (
|
||||
ollamaModels.map((model) => (
|
||||
<motion.div
|
||||
key={model.name}
|
||||
className={classNames(
|
||||
'p-4 rounded-xl',
|
||||
'bg-bolt-elements-background-depth-3',
|
||||
'hover:bg-bolt-elements-background-depth-4',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
whileHover={{ scale: 1.01 }}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<h5 className="text-sm font-medium text-bolt-elements-textPrimary">{model.name}</h5>
|
||||
<ModelStatusBadge status={model.status} />
|
||||
</div>
|
||||
<ModelDetails model={model} />
|
||||
</div>
|
||||
<ModelActions
|
||||
model={model}
|
||||
onUpdate={() => handleUpdateOllamaModel(model.name)}
|
||||
onDelete={() => {
|
||||
if (window.confirm(`Are you sure you want to delete ${model.name}?`)) {
|
||||
handleDeleteOllamaModel(model.name);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{model.progress && (
|
||||
<div className="mt-3">
|
||||
<Progress
|
||||
value={Math.round((model.progress.current / model.progress.total) * 100)}
|
||||
className="h-1"
|
||||
/>
|
||||
<div className="flex justify-between mt-1 text-xs text-bolt-elements-textSecondary">
|
||||
<span>{model.progress.status}</span>
|
||||
<span>{Math.round((model.progress.current / model.progress.total) * 100)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Model Installation Section */}
|
||||
<OllamaModelInstaller onModelInstalled={fetchOllamaModels} />
|
||||
</motion.div>
|
||||
)}
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
{/* Other Providers Section */}
|
||||
<div className="border-t border-bolt-elements-borderColor pt-6 mt-8">
|
||||
<h3 className="text-lg font-semibold text-bolt-elements-textPrimary mb-4">Other Local Providers</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{filteredProviders
|
||||
.filter((provider) => provider.name !== 'Ollama')
|
||||
.map((provider, index) => (
|
||||
<motion.div
|
||||
key={provider.name}
|
||||
className={classNames(
|
||||
'bg-bolt-elements-background-depth-2 rounded-xl',
|
||||
'hover:bg-bolt-elements-background-depth-3',
|
||||
'transition-all duration-200 p-5',
|
||||
'relative overflow-hidden group',
|
||||
)}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
whileHover={{ scale: 1.01 }}
|
||||
>
|
||||
{/* Provider Header */}
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<motion.div
|
||||
className={classNames(
|
||||
'w-12 h-12 flex items-center justify-center rounded-xl',
|
||||
'bg-bolt-elements-background-depth-3',
|
||||
provider.settings.enabled ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
|
||||
)}
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
>
|
||||
{React.createElement(PROVIDER_ICONS[provider.name as ProviderName] || BsRobot, {
|
||||
className: 'w-7 h-7',
|
||||
'aria-label': `${provider.name} icon`,
|
||||
})}
|
||||
</motion.div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-md font-semibold text-bolt-elements-textPrimary">{provider.name}</h3>
|
||||
<div className="flex gap-1">
|
||||
<span className="px-2 py-0.5 text-xs rounded-full bg-green-500/10 text-green-500">
|
||||
Local
|
||||
</span>
|
||||
{URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && (
|
||||
<span className="px-2 py-0.5 text-xs rounded-full bg-purple-500/10 text-purple-500">
|
||||
Configurable
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-bolt-elements-textSecondary mt-1">
|
||||
{PROVIDER_DESCRIPTIONS[provider.name as ProviderName]}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Switch
|
||||
checked={provider.settings.enabled}
|
||||
onCheckedChange={(checked) => handleToggleProvider(provider, checked)}
|
||||
aria-label={`Toggle ${provider.name} provider`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* URL Configuration Section */}
|
||||
<AnimatePresence>
|
||||
{provider.settings.enabled && URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
className="mt-4"
|
||||
>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="text-sm text-bolt-elements-textSecondary">API Endpoint</label>
|
||||
{editingProvider === provider.name ? (
|
||||
<input
|
||||
type="text"
|
||||
defaultValue={provider.settings.baseUrl}
|
||||
placeholder={`Enter ${provider.name} base URL`}
|
||||
className={classNames(
|
||||
'w-full px-3 py-2 rounded-lg text-sm',
|
||||
'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
|
||||
'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
|
||||
'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleUpdateBaseUrl(provider, e.currentTarget.value);
|
||||
} else if (e.key === 'Escape') {
|
||||
setEditingProvider(null);
|
||||
}
|
||||
}}
|
||||
onBlur={(e) => handleUpdateBaseUrl(provider, e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
onClick={() => setEditingProvider(provider.name)}
|
||||
className={classNames(
|
||||
'w-full px-3 py-2 rounded-lg text-sm cursor-pointer',
|
||||
'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
|
||||
'hover:border-purple-500/30 hover:bg-bolt-elements-background-depth-4',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2 text-bolt-elements-textSecondary">
|
||||
<div className="i-ph:link text-sm" />
|
||||
<span>{provider.settings.baseUrl || 'Click to set base URL'}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Helper component for model status badge
|
||||
function ModelStatusBadge({ status }: { status?: string }) {
|
||||
if (!status || status === 'idle') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const statusConfig = {
|
||||
updating: { bg: 'bg-yellow-500/10', text: 'text-yellow-500', label: 'Updating' },
|
||||
updated: { bg: 'bg-green-500/10', text: 'text-green-500', label: 'Updated' },
|
||||
error: { bg: 'bg-red-500/10', text: 'text-red-500', label: 'Error' },
|
||||
};
|
||||
|
||||
const config = statusConfig[status as keyof typeof statusConfig];
|
||||
|
||||
if (!config) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={classNames('px-2 py-0.5 rounded-full text-xs font-medium', config.bg, config.text)}>
|
||||
{config.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,597 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { Progress } from '~/components/ui/Progress';
|
||||
import { useToast } from '~/components/ui/use-toast';
|
||||
|
||||
interface OllamaModelInstallerProps {
|
||||
onModelInstalled: () => void;
|
||||
}
|
||||
|
||||
interface InstallProgress {
|
||||
status: string;
|
||||
progress: number;
|
||||
downloadedSize?: string;
|
||||
totalSize?: string;
|
||||
speed?: string;
|
||||
}
|
||||
|
||||
interface ModelInfo {
|
||||
name: string;
|
||||
desc: string;
|
||||
size: string;
|
||||
tags: string[];
|
||||
installedVersion?: string;
|
||||
latestVersion?: string;
|
||||
needsUpdate?: boolean;
|
||||
status?: 'idle' | 'installing' | 'updating' | 'updated' | 'error';
|
||||
details?: {
|
||||
family: string;
|
||||
parameter_size: string;
|
||||
quantization_level: string;
|
||||
};
|
||||
}
|
||||
|
||||
const POPULAR_MODELS: ModelInfo[] = [
|
||||
{
|
||||
name: 'deepseek-coder:6.7b',
|
||||
desc: "DeepSeek's code generation model",
|
||||
size: '4.1GB',
|
||||
tags: ['coding', 'popular'],
|
||||
},
|
||||
{
|
||||
name: 'llama2:7b',
|
||||
desc: "Meta's Llama 2 (7B parameters)",
|
||||
size: '3.8GB',
|
||||
tags: ['general', 'popular'],
|
||||
},
|
||||
{
|
||||
name: 'mistral:7b',
|
||||
desc: "Mistral's 7B model",
|
||||
size: '4.1GB',
|
||||
tags: ['general', 'popular'],
|
||||
},
|
||||
{
|
||||
name: 'gemma:7b',
|
||||
desc: "Google's Gemma model",
|
||||
size: '4.0GB',
|
||||
tags: ['general', 'new'],
|
||||
},
|
||||
{
|
||||
name: 'codellama:7b',
|
||||
desc: "Meta's Code Llama model",
|
||||
size: '4.1GB',
|
||||
tags: ['coding', 'popular'],
|
||||
},
|
||||
{
|
||||
name: 'neural-chat:7b',
|
||||
desc: "Intel's Neural Chat model",
|
||||
size: '4.1GB',
|
||||
tags: ['chat', 'popular'],
|
||||
},
|
||||
{
|
||||
name: 'phi:latest',
|
||||
desc: "Microsoft's Phi-2 model",
|
||||
size: '2.7GB',
|
||||
tags: ['small', 'fast'],
|
||||
},
|
||||
{
|
||||
name: 'qwen:7b',
|
||||
desc: "Alibaba's Qwen model",
|
||||
size: '4.1GB',
|
||||
tags: ['general'],
|
||||
},
|
||||
{
|
||||
name: 'solar:10.7b',
|
||||
desc: "Upstage's Solar model",
|
||||
size: '6.1GB',
|
||||
tags: ['large', 'powerful'],
|
||||
},
|
||||
{
|
||||
name: 'openchat:7b',
|
||||
desc: 'Open-source chat model',
|
||||
size: '4.1GB',
|
||||
tags: ['chat', 'popular'],
|
||||
},
|
||||
{
|
||||
name: 'dolphin-phi:2.7b',
|
||||
desc: 'Lightweight chat model',
|
||||
size: '1.6GB',
|
||||
tags: ['small', 'fast'],
|
||||
},
|
||||
{
|
||||
name: 'stable-code:3b',
|
||||
desc: 'Lightweight coding model',
|
||||
size: '1.8GB',
|
||||
tags: ['coding', 'small'],
|
||||
},
|
||||
];
|
||||
|
||||
function formatBytes(bytes: number): string {
|
||||
if (bytes === 0) {
|
||||
return '0 B';
|
||||
}
|
||||
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
|
||||
}
|
||||
|
||||
function formatSpeed(bytesPerSecond: number): string {
|
||||
return `${formatBytes(bytesPerSecond)}/s`;
|
||||
}
|
||||
|
||||
// Add Ollama Icon SVG component
|
||||
function OllamaIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg viewBox="0 0 1024 1024" className={className} fill="currentColor">
|
||||
<path d="M684.3 322.2H339.8c-9.5.1-17.7 6.8-19.6 16.1-8.2 41.4-12.4 83.5-12.4 125.7 0 42.2 4.2 84.3 12.4 125.7 1.9 9.3 10.1 16 19.6 16.1h344.5c9.5-.1 17.7-6.8 19.6-16.1 8.2-41.4 12.4-83.5 12.4-125.7 0-42.2-4.2-84.3-12.4-125.7-1.9-9.3-10.1-16-19.6-16.1zM512 640c-176.7 0-320-143.3-320-320S335.3 0 512 0s320 143.3 320 320-143.3 320-320 320z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelInstallerProps) {
|
||||
const [modelString, setModelString] = useState('');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [isInstalling, setIsInstalling] = useState(false);
|
||||
const [isChecking, setIsChecking] = useState(false);
|
||||
const [installProgress, setInstallProgress] = useState<InstallProgress | null>(null);
|
||||
const [selectedTags, setSelectedTags] = useState<string[]>([]);
|
||||
const [models, setModels] = useState<ModelInfo[]>(POPULAR_MODELS);
|
||||
const { toast } = useToast();
|
||||
|
||||
// Function to check installed models and their versions
|
||||
const checkInstalledModels = async () => {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:11434/api/tags', {
|
||||
method: 'GET',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch installed models');
|
||||
}
|
||||
|
||||
const data = (await response.json()) as { models: Array<{ name: string; digest: string; latest: string }> };
|
||||
const installedModels = data.models || [];
|
||||
|
||||
// Update models with installed versions
|
||||
setModels((prevModels) =>
|
||||
prevModels.map((model) => {
|
||||
const installed = installedModels.find((m) => m.name.toLowerCase() === model.name.toLowerCase());
|
||||
|
||||
if (installed) {
|
||||
return {
|
||||
...model,
|
||||
installedVersion: installed.digest.substring(0, 8),
|
||||
needsUpdate: installed.digest !== installed.latest,
|
||||
latestVersion: installed.latest?.substring(0, 8),
|
||||
};
|
||||
}
|
||||
|
||||
return model;
|
||||
}),
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error checking installed models:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Check installed models on mount and after installation
|
||||
useEffect(() => {
|
||||
checkInstalledModels();
|
||||
}, []);
|
||||
|
||||
const handleCheckUpdates = async () => {
|
||||
setIsChecking(true);
|
||||
|
||||
try {
|
||||
await checkInstalledModels();
|
||||
toast('Model versions checked');
|
||||
} catch (err) {
|
||||
console.error('Failed to check model versions:', err);
|
||||
toast('Failed to check model versions');
|
||||
} finally {
|
||||
setIsChecking(false);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredModels = models.filter((model) => {
|
||||
const matchesSearch =
|
||||
searchQuery === '' ||
|
||||
model.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
model.desc.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
const matchesTags = selectedTags.length === 0 || selectedTags.some((tag) => model.tags.includes(tag));
|
||||
|
||||
return matchesSearch && matchesTags;
|
||||
});
|
||||
|
||||
const handleInstallModel = async (modelToInstall: string) => {
|
||||
if (!modelToInstall) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsInstalling(true);
|
||||
setInstallProgress({
|
||||
status: 'Starting download...',
|
||||
progress: 0,
|
||||
downloadedSize: '0 B',
|
||||
totalSize: 'Calculating...',
|
||||
speed: '0 B/s',
|
||||
});
|
||||
setModelString('');
|
||||
setSearchQuery('');
|
||||
|
||||
const response = await fetch('http://127.0.0.1:11434/api/pull', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ name: modelToInstall }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const reader = response.body?.getReader();
|
||||
|
||||
if (!reader) {
|
||||
throw new Error('Failed to get response reader');
|
||||
}
|
||||
|
||||
let lastTime = Date.now();
|
||||
let lastBytes = 0;
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
|
||||
if (done) {
|
||||
break;
|
||||
}
|
||||
|
||||
const text = new TextDecoder().decode(value);
|
||||
const lines = text.split('\n').filter(Boolean);
|
||||
|
||||
for (const line of lines) {
|
||||
try {
|
||||
const data = JSON.parse(line);
|
||||
|
||||
if ('status' in data) {
|
||||
const currentTime = Date.now();
|
||||
const timeDiff = (currentTime - lastTime) / 1000; // Convert to seconds
|
||||
const bytesDiff = (data.completed || 0) - lastBytes;
|
||||
const speed = bytesDiff / timeDiff;
|
||||
|
||||
setInstallProgress({
|
||||
status: data.status,
|
||||
progress: data.completed && data.total ? (data.completed / data.total) * 100 : 0,
|
||||
downloadedSize: formatBytes(data.completed || 0),
|
||||
totalSize: data.total ? formatBytes(data.total) : 'Calculating...',
|
||||
speed: formatSpeed(speed),
|
||||
});
|
||||
|
||||
lastTime = currentTime;
|
||||
lastBytes = data.completed || 0;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error parsing progress:', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
toast('Successfully installed ' + modelToInstall + '. The model list will refresh automatically.');
|
||||
|
||||
// Ensure we call onModelInstalled after successful installation
|
||||
setTimeout(() => {
|
||||
onModelInstalled();
|
||||
}, 1000);
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
|
||||
console.error(`Error installing ${modelToInstall}:`, errorMessage);
|
||||
toast(`Failed to install ${modelToInstall}. ${errorMessage}`);
|
||||
} finally {
|
||||
setIsInstalling(false);
|
||||
setInstallProgress(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateModel = async (modelToUpdate: string) => {
|
||||
try {
|
||||
setModels((prev) => prev.map((m) => (m.name === modelToUpdate ? { ...m, status: 'updating' } : m)));
|
||||
|
||||
const response = await fetch('http://127.0.0.1:11434/api/pull', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ name: modelToUpdate }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const reader = response.body?.getReader();
|
||||
|
||||
if (!reader) {
|
||||
throw new Error('Failed to get response reader');
|
||||
}
|
||||
|
||||
let lastTime = Date.now();
|
||||
let lastBytes = 0;
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
|
||||
if (done) {
|
||||
break;
|
||||
}
|
||||
|
||||
const text = new TextDecoder().decode(value);
|
||||
const lines = text.split('\n').filter(Boolean);
|
||||
|
||||
for (const line of lines) {
|
||||
try {
|
||||
const data = JSON.parse(line);
|
||||
|
||||
if ('status' in data) {
|
||||
const currentTime = Date.now();
|
||||
const timeDiff = (currentTime - lastTime) / 1000;
|
||||
const bytesDiff = (data.completed || 0) - lastBytes;
|
||||
const speed = bytesDiff / timeDiff;
|
||||
|
||||
setInstallProgress({
|
||||
status: data.status,
|
||||
progress: data.completed && data.total ? (data.completed / data.total) * 100 : 0,
|
||||
downloadedSize: formatBytes(data.completed || 0),
|
||||
totalSize: data.total ? formatBytes(data.total) : 'Calculating...',
|
||||
speed: formatSpeed(speed),
|
||||
});
|
||||
|
||||
lastTime = currentTime;
|
||||
lastBytes = data.completed || 0;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error parsing progress:', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
toast('Successfully updated ' + modelToUpdate);
|
||||
|
||||
// Refresh model list after update
|
||||
await checkInstalledModels();
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
|
||||
console.error(`Error updating ${modelToUpdate}:`, errorMessage);
|
||||
toast(`Failed to update ${modelToUpdate}. ${errorMessage}`);
|
||||
setModels((prev) => prev.map((m) => (m.name === modelToUpdate ? { ...m, status: 'error' } : m)));
|
||||
} finally {
|
||||
setInstallProgress(null);
|
||||
}
|
||||
};
|
||||
|
||||
const allTags = Array.from(new Set(POPULAR_MODELS.flatMap((model) => model.tags)));
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between pt-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<OllamaIcon className="w-8 h-8 text-purple-500" />
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-bolt-elements-textPrimary">Ollama Models</h3>
|
||||
<p className="text-sm text-bolt-elements-textSecondary mt-1">Install and manage your Ollama models</p>
|
||||
</div>
|
||||
</div>
|
||||
<motion.button
|
||||
onClick={handleCheckUpdates}
|
||||
disabled={isChecking}
|
||||
className={classNames(
|
||||
'px-4 py-2 rounded-lg',
|
||||
'bg-purple-500/10 text-purple-500',
|
||||
'hover:bg-purple-500/20',
|
||||
'transition-all duration-200',
|
||||
'flex items-center gap-2',
|
||||
)}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
{isChecking ? (
|
||||
<div className="i-ph:spinner-gap-bold animate-spin" />
|
||||
) : (
|
||||
<div className="i-ph:arrows-clockwise" />
|
||||
)}
|
||||
Check Updates
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="space-y-1">
|
||||
<input
|
||||
type="text"
|
||||
className={classNames(
|
||||
'w-full px-4 py-3 rounded-xl',
|
||||
'bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor',
|
||||
'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
|
||||
'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
placeholder="Search models or enter custom model name..."
|
||||
value={searchQuery || modelString}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setSearchQuery(value);
|
||||
setModelString(value);
|
||||
}}
|
||||
disabled={isInstalling}
|
||||
/>
|
||||
<p className="text-xs text-bolt-elements-textTertiary px-1">
|
||||
Browse models at{' '}
|
||||
<a
|
||||
href="https://ollama.com/library"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-purple-500 hover:underline inline-flex items-center gap-0.5"
|
||||
>
|
||||
ollama.com/library
|
||||
<div className="i-ph:arrow-square-out text-[10px]" />
|
||||
</a>{' '}
|
||||
and copy model names to install
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<motion.button
|
||||
onClick={() => handleInstallModel(modelString)}
|
||||
disabled={!modelString || isInstalling}
|
||||
className={classNames(
|
||||
'rounded-xl px-6 py-3',
|
||||
'bg-purple-500 text-white',
|
||||
'hover:bg-purple-600',
|
||||
'transition-all duration-200',
|
||||
{ 'opacity-50 cursor-not-allowed': !modelString || isInstalling },
|
||||
)}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
{isInstalling ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="i-ph:spinner-gap-bold animate-spin" />
|
||||
<span>Installing...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<OllamaIcon className="w-4 h-4" />
|
||||
<span>Install Model</span>
|
||||
</div>
|
||||
)}
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{allTags.map((tag) => (
|
||||
<button
|
||||
key={tag}
|
||||
onClick={() => {
|
||||
setSelectedTags((prev) => (prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]));
|
||||
}}
|
||||
className={classNames(
|
||||
'px-3 py-1 rounded-full text-xs font-medium transition-all duration-200',
|
||||
selectedTags.includes(tag)
|
||||
? 'bg-purple-500 text-white'
|
||||
: 'bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary hover:bg-bolt-elements-background-depth-4',
|
||||
)}
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
{filteredModels.map((model) => (
|
||||
<motion.div
|
||||
key={model.name}
|
||||
className={classNames(
|
||||
'flex items-start gap-2 p-3 rounded-lg',
|
||||
'bg-bolt-elements-background-depth-3',
|
||||
'hover:bg-bolt-elements-background-depth-4',
|
||||
'transition-all duration-200',
|
||||
'relative group',
|
||||
)}
|
||||
>
|
||||
<OllamaIcon className="w-5 h-5 text-purple-500 mt-0.5 flex-shrink-0" />
|
||||
<div className="flex-1 space-y-1.5">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<p className="text-bolt-elements-textPrimary font-mono text-sm">{model.name}</p>
|
||||
<p className="text-xs text-bolt-elements-textSecondary mt-0.5">{model.desc}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="text-xs text-bolt-elements-textTertiary">{model.size}</span>
|
||||
{model.installedVersion && (
|
||||
<div className="mt-0.5 flex flex-col items-end gap-0.5">
|
||||
<span className="text-xs text-bolt-elements-textTertiary">v{model.installedVersion}</span>
|
||||
{model.needsUpdate && model.latestVersion && (
|
||||
<span className="text-xs text-purple-500">v{model.latestVersion} available</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{model.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-1.5 py-0.5 rounded-full text-[10px] bg-bolt-elements-background-depth-4 text-bolt-elements-textTertiary"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{model.installedVersion ? (
|
||||
model.needsUpdate ? (
|
||||
<motion.button
|
||||
onClick={() => handleUpdateModel(model.name)}
|
||||
className={classNames(
|
||||
'px-2 py-0.5 rounded-lg text-xs',
|
||||
'bg-purple-500 text-white',
|
||||
'hover:bg-purple-600',
|
||||
'transition-all duration-200',
|
||||
'flex items-center gap-1',
|
||||
)}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<div className="i-ph:arrows-clockwise text-xs" />
|
||||
Update
|
||||
</motion.button>
|
||||
) : (
|
||||
<span className="px-2 py-0.5 rounded-lg text-xs text-green-500 bg-green-500/10">Up to date</span>
|
||||
)
|
||||
) : (
|
||||
<motion.button
|
||||
onClick={() => handleInstallModel(model.name)}
|
||||
className={classNames(
|
||||
'px-2 py-0.5 rounded-lg text-xs',
|
||||
'bg-purple-500 text-white',
|
||||
'hover:bg-purple-600',
|
||||
'transition-all duration-200',
|
||||
'flex items-center gap-1',
|
||||
)}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<div className="i-ph:download text-xs" />
|
||||
Install
|
||||
</motion.button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{installProgress && (
|
||||
<motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-bolt-elements-textSecondary">{installProgress.status}</span>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-bolt-elements-textTertiary">
|
||||
{installProgress.downloadedSize} / {installProgress.totalSize}
|
||||
</span>
|
||||
<span className="text-bolt-elements-textTertiary">{installProgress.speed}</span>
|
||||
<span className="text-bolt-elements-textSecondary">{Math.round(installProgress.progress)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<Progress value={installProgress.progress} className="h-1" />
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import type { ServiceStatus } from './types';
|
||||
import { ProviderStatusCheckerFactory } from './provider-factory';
|
||||
|
||||
export default function ServiceStatusTab() {
|
||||
const [serviceStatuses, setServiceStatuses] = useState<ServiceStatus[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const checkAllProviders = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const providers = ProviderStatusCheckerFactory.getProviderNames();
|
||||
const statuses: ServiceStatus[] = [];
|
||||
|
||||
for (const provider of providers) {
|
||||
try {
|
||||
const checker = ProviderStatusCheckerFactory.getChecker(provider);
|
||||
const result = await checker.checkStatus();
|
||||
|
||||
statuses.push({
|
||||
provider,
|
||||
...result,
|
||||
lastChecked: new Date().toISOString(),
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(`Error checking ${provider} status:`, err);
|
||||
statuses.push({
|
||||
provider,
|
||||
status: 'degraded',
|
||||
message: 'Unable to check service status',
|
||||
incidents: ['Error checking service status'],
|
||||
lastChecked: new Date().toISOString(),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setServiceStatuses(statuses);
|
||||
} catch (err) {
|
||||
console.error('Error checking provider statuses:', err);
|
||||
setError('Failed to check service statuses');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
checkAllProviders();
|
||||
|
||||
// Set up periodic checks every 5 minutes
|
||||
const interval = setInterval(checkAllProviders, 5 * 60 * 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const getStatusColor = (status: ServiceStatus['status']) => {
|
||||
switch (status) {
|
||||
case 'operational':
|
||||
return 'text-green-500 dark:text-green-400';
|
||||
case 'degraded':
|
||||
return 'text-yellow-500 dark:text-yellow-400';
|
||||
case 'down':
|
||||
return 'text-red-500 dark:text-red-400';
|
||||
default:
|
||||
return 'text-gray-500 dark:text-gray-400';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusIcon = (status: ServiceStatus['status']) => {
|
||||
switch (status) {
|
||||
case 'operational':
|
||||
return 'i-ph:check-circle';
|
||||
case 'degraded':
|
||||
return 'i-ph:warning';
|
||||
case 'down':
|
||||
return 'i-ph:x-circle';
|
||||
default:
|
||||
return 'i-ph:question';
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="animate-spin i-ph:circle-notch w-8 h-8 text-purple-500" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full text-red-500 dark:text-red-400">
|
||||
<div className="i-ph:warning w-8 h-8 mb-2" />
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{serviceStatuses.map((service) => (
|
||||
<div
|
||||
key={service.provider}
|
||||
className="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">{service.provider}</h3>
|
||||
<div className={`flex items-center ${getStatusColor(service.status)}`}>
|
||||
<div className={`${getStatusIcon(service.status)} w-5 h-5 mr-2`} />
|
||||
<span className="capitalize">{service.status}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-2">{service.message}</p>
|
||||
{service.incidents && service.incidents.length > 0 && (
|
||||
<div className="mt-2">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">Recent Incidents:</h4>
|
||||
<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
|
||||
{service.incidents.map((incident, index) => (
|
||||
<li key={index}>{incident}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
Last checked: {new Date(service.lastChecked).toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
import type { ProviderConfig, StatusCheckResult, ApiResponse } from './types';
|
||||
|
||||
export abstract class BaseProviderChecker {
|
||||
protected config: ProviderConfig;
|
||||
|
||||
constructor(config: ProviderConfig) {
|
||||
this.config = config;
|
||||
}
|
||||
|
||||
protected async checkApiEndpoint(
|
||||
url: string,
|
||||
headers?: Record<string, string>,
|
||||
testModel?: string,
|
||||
): Promise<{ ok: boolean; status: number | string; message?: string; responseTime: number }> {
|
||||
try {
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), 10000);
|
||||
|
||||
const startTime = performance.now();
|
||||
|
||||
// Add common headers
|
||||
const processedHeaders = {
|
||||
'Content-Type': 'application/json',
|
||||
...headers,
|
||||
};
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: processedHeaders,
|
||||
signal: controller.signal,
|
||||
});
|
||||
|
||||
const endTime = performance.now();
|
||||
const responseTime = endTime - startTime;
|
||||
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
const data = (await response.json()) as ApiResponse;
|
||||
|
||||
if (!response.ok) {
|
||||
let errorMessage = `API returned status: ${response.status}`;
|
||||
|
||||
if (data.error?.message) {
|
||||
errorMessage = data.error.message;
|
||||
} else if (data.message) {
|
||||
errorMessage = data.message;
|
||||
}
|
||||
|
||||
return {
|
||||
ok: false,
|
||||
status: response.status,
|
||||
message: errorMessage,
|
||||
responseTime,
|
||||
};
|
||||
}
|
||||
|
||||
// Different providers have different model list formats
|
||||
let models: string[] = [];
|
||||
|
||||
if (Array.isArray(data)) {
|
||||
models = data.map((model: { id?: string; name?: string }) => model.id || model.name || '');
|
||||
} else if (data.data && Array.isArray(data.data)) {
|
||||
models = data.data.map((model) => model.id || model.name || '');
|
||||
} else if (data.models && Array.isArray(data.models)) {
|
||||
models = data.models.map((model) => model.id || model.name || '');
|
||||
} else if (data.model) {
|
||||
models = [data.model];
|
||||
}
|
||||
|
||||
if (!testModel || models.length > 0) {
|
||||
return {
|
||||
ok: true,
|
||||
status: response.status,
|
||||
responseTime,
|
||||
message: 'API key is valid',
|
||||
};
|
||||
}
|
||||
|
||||
if (testModel && !models.includes(testModel)) {
|
||||
return {
|
||||
ok: true,
|
||||
status: 'model_not_found',
|
||||
message: `API key is valid (test model ${testModel} not found in ${models.length} available models)`,
|
||||
responseTime,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
ok: true,
|
||||
status: response.status,
|
||||
message: 'API key is valid',
|
||||
responseTime,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error(`Error checking API endpoint ${url}:`, error);
|
||||
return {
|
||||
ok: false,
|
||||
status: error instanceof Error ? error.message : 'Unknown error',
|
||||
message: error instanceof Error ? `Connection failed: ${error.message}` : 'Connection failed',
|
||||
responseTime: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
protected async checkEndpoint(url: string): Promise<'reachable' | 'unreachable'> {
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
mode: 'no-cors',
|
||||
headers: {
|
||||
Accept: 'text/html',
|
||||
},
|
||||
});
|
||||
return response.type === 'opaque' ? 'reachable' : 'unreachable';
|
||||
} catch (error) {
|
||||
console.error(`Error checking ${url}:`, error);
|
||||
return 'unreachable';
|
||||
}
|
||||
}
|
||||
|
||||
abstract checkStatus(): Promise<StatusCheckResult>;
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
import type { ProviderName, ProviderConfig, StatusCheckResult } from './types';
|
||||
import { BaseProviderChecker } from './base-provider';
|
||||
|
||||
import { AmazonBedrockStatusChecker } from './providers/amazon-bedrock';
|
||||
import { CohereStatusChecker } from './providers/cohere';
|
||||
import { DeepseekStatusChecker } from './providers/deepseek';
|
||||
import { GoogleStatusChecker } from './providers/google';
|
||||
import { GroqStatusChecker } from './providers/groq';
|
||||
import { HuggingFaceStatusChecker } from './providers/huggingface';
|
||||
import { HyperbolicStatusChecker } from './providers/hyperbolic';
|
||||
import { MistralStatusChecker } from './providers/mistral';
|
||||
import { OpenRouterStatusChecker } from './providers/openrouter';
|
||||
import { PerplexityStatusChecker } from './providers/perplexity';
|
||||
import { TogetherStatusChecker } from './providers/together';
|
||||
import { XAIStatusChecker } from './providers/xai';
|
||||
|
||||
export class ProviderStatusCheckerFactory {
|
||||
private static _providerConfigs: Record<ProviderName, ProviderConfig> = {
|
||||
AmazonBedrock: {
|
||||
statusUrl: 'https://health.aws.amazon.com/health/status',
|
||||
apiUrl: 'https://bedrock.us-east-1.amazonaws.com/models',
|
||||
headers: {},
|
||||
testModel: 'anthropic.claude-3-sonnet-20240229-v1:0',
|
||||
},
|
||||
Cohere: {
|
||||
statusUrl: 'https://status.cohere.com/',
|
||||
apiUrl: 'https://api.cohere.ai/v1/models',
|
||||
headers: {},
|
||||
testModel: 'command',
|
||||
},
|
||||
Deepseek: {
|
||||
statusUrl: 'https://status.deepseek.com/',
|
||||
apiUrl: 'https://api.deepseek.com/v1/models',
|
||||
headers: {},
|
||||
testModel: 'deepseek-chat',
|
||||
},
|
||||
Google: {
|
||||
statusUrl: 'https://status.cloud.google.com/',
|
||||
apiUrl: 'https://generativelanguage.googleapis.com/v1/models',
|
||||
headers: {},
|
||||
testModel: 'gemini-pro',
|
||||
},
|
||||
Groq: {
|
||||
statusUrl: 'https://groqstatus.com/',
|
||||
apiUrl: 'https://api.groq.com/v1/models',
|
||||
headers: {},
|
||||
testModel: 'mixtral-8x7b-32768',
|
||||
},
|
||||
HuggingFace: {
|
||||
statusUrl: 'https://status.huggingface.co/',
|
||||
apiUrl: 'https://api-inference.huggingface.co/models',
|
||||
headers: {},
|
||||
testModel: 'mistralai/Mixtral-8x7B-Instruct-v0.1',
|
||||
},
|
||||
Hyperbolic: {
|
||||
statusUrl: 'https://status.hyperbolic.ai/',
|
||||
apiUrl: 'https://api.hyperbolic.ai/v1/models',
|
||||
headers: {},
|
||||
testModel: 'hyperbolic-1',
|
||||
},
|
||||
Mistral: {
|
||||
statusUrl: 'https://status.mistral.ai/',
|
||||
apiUrl: 'https://api.mistral.ai/v1/models',
|
||||
headers: {},
|
||||
testModel: 'mistral-tiny',
|
||||
},
|
||||
OpenRouter: {
|
||||
statusUrl: 'https://status.openrouter.ai/',
|
||||
apiUrl: 'https://openrouter.ai/api/v1/models',
|
||||
headers: {},
|
||||
testModel: 'anthropic/claude-3-sonnet',
|
||||
},
|
||||
Perplexity: {
|
||||
statusUrl: 'https://status.perplexity.com/',
|
||||
apiUrl: 'https://api.perplexity.ai/v1/models',
|
||||
headers: {},
|
||||
testModel: 'pplx-7b-chat',
|
||||
},
|
||||
Together: {
|
||||
statusUrl: 'https://status.together.ai/',
|
||||
apiUrl: 'https://api.together.xyz/v1/models',
|
||||
headers: {},
|
||||
testModel: 'mistralai/Mixtral-8x7B-Instruct-v0.1',
|
||||
},
|
||||
XAI: {
|
||||
statusUrl: 'https://status.x.ai/',
|
||||
apiUrl: 'https://api.x.ai/v1/models',
|
||||
headers: {},
|
||||
testModel: 'grok-1',
|
||||
},
|
||||
};
|
||||
|
||||
static getChecker(provider: ProviderName): BaseProviderChecker {
|
||||
const config = this._providerConfigs[provider];
|
||||
|
||||
if (!config) {
|
||||
throw new Error(`No configuration found for provider: ${provider}`);
|
||||
}
|
||||
|
||||
switch (provider) {
|
||||
case 'AmazonBedrock':
|
||||
return new AmazonBedrockStatusChecker(config);
|
||||
case 'Cohere':
|
||||
return new CohereStatusChecker(config);
|
||||
case 'Deepseek':
|
||||
return new DeepseekStatusChecker(config);
|
||||
case 'Google':
|
||||
return new GoogleStatusChecker(config);
|
||||
case 'Groq':
|
||||
return new GroqStatusChecker(config);
|
||||
case 'HuggingFace':
|
||||
return new HuggingFaceStatusChecker(config);
|
||||
case 'Hyperbolic':
|
||||
return new HyperbolicStatusChecker(config);
|
||||
case 'Mistral':
|
||||
return new MistralStatusChecker(config);
|
||||
case 'OpenRouter':
|
||||
return new OpenRouterStatusChecker(config);
|
||||
case 'Perplexity':
|
||||
return new PerplexityStatusChecker(config);
|
||||
case 'Together':
|
||||
return new TogetherStatusChecker(config);
|
||||
case 'XAI':
|
||||
return new XAIStatusChecker(config);
|
||||
default:
|
||||
return new (class extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
const endpointStatus = await this.checkEndpoint(this.config.statusUrl);
|
||||
const apiStatus = await this.checkEndpoint(this.config.apiUrl);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
})(config);
|
||||
}
|
||||
}
|
||||
|
||||
static getProviderNames(): ProviderName[] {
|
||||
return Object.keys(this._providerConfigs) as ProviderName[];
|
||||
}
|
||||
|
||||
static getProviderConfig(provider: ProviderName): ProviderConfig {
|
||||
const config = this._providerConfigs[provider];
|
||||
|
||||
if (!config) {
|
||||
throw new Error(`Unknown provider: ${provider}`);
|
||||
}
|
||||
|
||||
return config;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class AmazonBedrockStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check AWS health status page
|
||||
const statusPageResponse = await fetch('https://health.aws.amazon.com/health/status');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
// Check for Bedrock and general AWS status
|
||||
const hasBedrockIssues =
|
||||
text.includes('Amazon Bedrock') &&
|
||||
(text.includes('Service is experiencing elevated error rates') ||
|
||||
text.includes('Service disruption') ||
|
||||
text.includes('Degraded Service'));
|
||||
|
||||
const hasGeneralIssues = text.includes('Service disruption') || text.includes('Multiple services affected');
|
||||
|
||||
// Extract incidents
|
||||
const incidents: string[] = [];
|
||||
const incidentMatches = text.matchAll(/(\d{4}-\d{2}-\d{2})\s+(.*?)\s+Impact:(.*?)(?=\n|$)/g);
|
||||
|
||||
for (const match of incidentMatches) {
|
||||
const [, date, title, impact] = match;
|
||||
|
||||
if (title.includes('Bedrock') || title.includes('AWS')) {
|
||||
incidents.push(`${date}: ${title.trim()} - Impact: ${impact.trim()}`);
|
||||
}
|
||||
}
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All services operational';
|
||||
|
||||
if (hasBedrockIssues) {
|
||||
status = 'degraded';
|
||||
message = 'Amazon Bedrock service issues reported';
|
||||
} else if (hasGeneralIssues) {
|
||||
status = 'degraded';
|
||||
message = 'AWS experiencing general issues';
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://health.aws.amazon.com/health/status');
|
||||
const apiEndpoint = 'https://bedrock.us-east-1.amazonaws.com/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents: incidents.slice(0, 5),
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking Amazon Bedrock status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://health.aws.amazon.com/health/status');
|
||||
const apiEndpoint = 'https://bedrock.us-east-1.amazonaws.com/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class AnthropicStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check status page
|
||||
const statusPageResponse = await fetch('https://status.anthropic.com/');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
// Check for specific Anthropic status indicators
|
||||
const isOperational = text.includes('All Systems Operational');
|
||||
const hasDegradedPerformance = text.includes('Degraded Performance');
|
||||
const hasPartialOutage = text.includes('Partial Outage');
|
||||
const hasMajorOutage = text.includes('Major Outage');
|
||||
|
||||
// Extract incidents
|
||||
const incidents: string[] = [];
|
||||
const incidentSection = text.match(/Past Incidents(.*?)(?=\n\n)/s);
|
||||
|
||||
if (incidentSection) {
|
||||
const incidentLines = incidentSection[1]
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line && line.includes('202')); // Only get dated incidents
|
||||
|
||||
incidents.push(...incidentLines.slice(0, 5));
|
||||
}
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All systems operational';
|
||||
|
||||
if (hasMajorOutage) {
|
||||
status = 'down';
|
||||
message = 'Major service outage';
|
||||
} else if (hasPartialOutage) {
|
||||
status = 'down';
|
||||
message = 'Partial service outage';
|
||||
} else if (hasDegradedPerformance) {
|
||||
status = 'degraded';
|
||||
message = 'Service experiencing degraded performance';
|
||||
} else if (!isOperational) {
|
||||
status = 'degraded';
|
||||
message = 'Service status unknown';
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://status.anthropic.com/');
|
||||
const apiEndpoint = 'https://api.anthropic.com/v1/messages';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking Anthropic status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://status.anthropic.com/');
|
||||
const apiEndpoint = 'https://api.anthropic.com/v1/messages';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class CohereStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check status page
|
||||
const statusPageResponse = await fetch('https://status.cohere.com/');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
// Check for specific Cohere status indicators
|
||||
const isOperational = text.includes('All Systems Operational');
|
||||
const hasIncidents = text.includes('Active Incidents');
|
||||
const hasDegradation = text.includes('Degraded Performance');
|
||||
const hasOutage = text.includes('Service Outage');
|
||||
|
||||
// Extract incidents
|
||||
const incidents: string[] = [];
|
||||
const incidentSection = text.match(/Past Incidents(.*?)(?=\n\n)/s);
|
||||
|
||||
if (incidentSection) {
|
||||
const incidentLines = incidentSection[1]
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line && line.includes('202')); // Only get dated incidents
|
||||
|
||||
incidents.push(...incidentLines.slice(0, 5));
|
||||
}
|
||||
|
||||
// Check specific services
|
||||
const services = {
|
||||
api: {
|
||||
operational: text.includes('API Service') && text.includes('Operational'),
|
||||
degraded: text.includes('API Service') && text.includes('Degraded Performance'),
|
||||
outage: text.includes('API Service') && text.includes('Service Outage'),
|
||||
},
|
||||
generation: {
|
||||
operational: text.includes('Generation Service') && text.includes('Operational'),
|
||||
degraded: text.includes('Generation Service') && text.includes('Degraded Performance'),
|
||||
outage: text.includes('Generation Service') && text.includes('Service Outage'),
|
||||
},
|
||||
};
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All systems operational';
|
||||
|
||||
if (services.api.outage || services.generation.outage || hasOutage) {
|
||||
status = 'down';
|
||||
message = 'Service outage detected';
|
||||
} else if (services.api.degraded || services.generation.degraded || hasDegradation || hasIncidents) {
|
||||
status = 'degraded';
|
||||
message = 'Service experiencing issues';
|
||||
} else if (!isOperational) {
|
||||
status = 'degraded';
|
||||
message = 'Service status unknown';
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://status.cohere.com/');
|
||||
const apiEndpoint = 'https://api.cohere.ai/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking Cohere status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://status.cohere.com/');
|
||||
const apiEndpoint = 'https://api.cohere.ai/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class DeepseekStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
/*
|
||||
* Check status page - Note: Deepseek doesn't have a public status page yet
|
||||
* so we'll check their API endpoint directly
|
||||
*/
|
||||
const apiEndpoint = 'https://api.deepseek.com/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
// Check their website as a secondary indicator
|
||||
const websiteStatus = await this.checkEndpoint('https://deepseek.com');
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All systems operational';
|
||||
|
||||
if (apiStatus !== 'reachable' || websiteStatus !== 'reachable') {
|
||||
status = apiStatus !== 'reachable' ? 'down' : 'degraded';
|
||||
message = apiStatus !== 'reachable' ? 'API appears to be down' : 'Service may be experiencing issues';
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents: [], // No public incident tracking available yet
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking Deepseek status:', error);
|
||||
|
||||
return {
|
||||
status: 'degraded',
|
||||
message: 'Unable to determine service status',
|
||||
incidents: ['Note: Limited status information available'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class GoogleStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check status page
|
||||
const statusPageResponse = await fetch('https://status.cloud.google.com/');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
// Check for Vertex AI and general cloud status
|
||||
const hasVertexAIIssues =
|
||||
text.includes('Vertex AI') &&
|
||||
(text.includes('Incident') ||
|
||||
text.includes('Disruption') ||
|
||||
text.includes('Outage') ||
|
||||
text.includes('degraded'));
|
||||
|
||||
const hasGeneralIssues = text.includes('Major Incidents') || text.includes('Service Disruption');
|
||||
|
||||
// Extract incidents
|
||||
const incidents: string[] = [];
|
||||
const incidentMatches = text.matchAll(/(\d{4}-\d{2}-\d{2})\s+(.*?)\s+Impact:(.*?)(?=\n|$)/g);
|
||||
|
||||
for (const match of incidentMatches) {
|
||||
const [, date, title, impact] = match;
|
||||
|
||||
if (title.includes('Vertex AI') || title.includes('Cloud')) {
|
||||
incidents.push(`${date}: ${title.trim()} - Impact: ${impact.trim()}`);
|
||||
}
|
||||
}
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All services operational';
|
||||
|
||||
if (hasVertexAIIssues) {
|
||||
status = 'degraded';
|
||||
message = 'Vertex AI service issues reported';
|
||||
} else if (hasGeneralIssues) {
|
||||
status = 'degraded';
|
||||
message = 'Google Cloud experiencing issues';
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://status.cloud.google.com/');
|
||||
const apiEndpoint = 'https://generativelanguage.googleapis.com/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents: incidents.slice(0, 5),
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking Google status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://status.cloud.google.com/');
|
||||
const apiEndpoint = 'https://generativelanguage.googleapis.com/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class GroqStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check status page
|
||||
const statusPageResponse = await fetch('https://groqstatus.com/');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
const isOperational = text.includes('All Systems Operational');
|
||||
const hasIncidents = text.includes('Active Incidents');
|
||||
const hasDegradation = text.includes('Degraded Performance');
|
||||
const hasOutage = text.includes('Service Outage');
|
||||
|
||||
// Extract incidents
|
||||
const incidents: string[] = [];
|
||||
const incidentMatches = text.matchAll(/(\d{4}-\d{2}-\d{2})\s+(.*?)\s+Status:(.*?)(?=\n|$)/g);
|
||||
|
||||
for (const match of incidentMatches) {
|
||||
const [, date, title, status] = match;
|
||||
incidents.push(`${date}: ${title.trim()} - ${status.trim()}`);
|
||||
}
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All systems operational';
|
||||
|
||||
if (hasOutage) {
|
||||
status = 'down';
|
||||
message = 'Service outage detected';
|
||||
} else if (hasDegradation || hasIncidents) {
|
||||
status = 'degraded';
|
||||
message = 'Service experiencing issues';
|
||||
} else if (!isOperational) {
|
||||
status = 'degraded';
|
||||
message = 'Service status unknown';
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://groqstatus.com/');
|
||||
const apiEndpoint = 'https://api.groq.com/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents: incidents.slice(0, 5),
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking Groq status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://groqstatus.com/');
|
||||
const apiEndpoint = 'https://api.groq.com/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class HuggingFaceStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check status page
|
||||
const statusPageResponse = await fetch('https://status.huggingface.co/');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
// Check for "All services are online" message
|
||||
const allServicesOnline = text.includes('All services are online');
|
||||
|
||||
// Get last update time
|
||||
const lastUpdateMatch = text.match(/Last updated on (.*?)(EST|PST|GMT)/);
|
||||
const lastUpdate = lastUpdateMatch ? `${lastUpdateMatch[1]}${lastUpdateMatch[2]}` : '';
|
||||
|
||||
// Check individual services and their uptime percentages
|
||||
const services = {
|
||||
'Huggingface Hub': {
|
||||
operational: text.includes('Huggingface Hub') && text.includes('Operational'),
|
||||
uptime: text.match(/Huggingface Hub[\s\S]*?(\d+\.\d+)%\s*uptime/)?.[1],
|
||||
},
|
||||
'Git Hosting and Serving': {
|
||||
operational: text.includes('Git Hosting and Serving') && text.includes('Operational'),
|
||||
uptime: text.match(/Git Hosting and Serving[\s\S]*?(\d+\.\d+)%\s*uptime/)?.[1],
|
||||
},
|
||||
'Inference API': {
|
||||
operational: text.includes('Inference API') && text.includes('Operational'),
|
||||
uptime: text.match(/Inference API[\s\S]*?(\d+\.\d+)%\s*uptime/)?.[1],
|
||||
},
|
||||
'HF Endpoints': {
|
||||
operational: text.includes('HF Endpoints') && text.includes('Operational'),
|
||||
uptime: text.match(/HF Endpoints[\s\S]*?(\d+\.\d+)%\s*uptime/)?.[1],
|
||||
},
|
||||
Spaces: {
|
||||
operational: text.includes('Spaces') && text.includes('Operational'),
|
||||
uptime: text.match(/Spaces[\s\S]*?(\d+\.\d+)%\s*uptime/)?.[1],
|
||||
},
|
||||
};
|
||||
|
||||
// Create service status messages with uptime
|
||||
const serviceMessages = Object.entries(services).map(([name, info]) => {
|
||||
if (info.uptime) {
|
||||
return `${name}: ${info.uptime}% uptime`;
|
||||
}
|
||||
|
||||
return `${name}: ${info.operational ? 'Operational' : 'Issues detected'}`;
|
||||
});
|
||||
|
||||
// Determine overall status
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = allServicesOnline
|
||||
? `All services are online (Last updated on ${lastUpdate})`
|
||||
: 'Checking individual services';
|
||||
|
||||
// Only mark as degraded if we explicitly detect issues
|
||||
const hasIssues = Object.values(services).some((service) => !service.operational);
|
||||
|
||||
if (hasIssues) {
|
||||
status = 'degraded';
|
||||
message = `Service issues detected (Last updated on ${lastUpdate})`;
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://status.huggingface.co/');
|
||||
const apiEndpoint = 'https://api-inference.huggingface.co/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents: serviceMessages,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking HuggingFace status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://status.huggingface.co/');
|
||||
const apiEndpoint = 'https://api-inference.huggingface.co/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class HyperbolicStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
/*
|
||||
* Check API endpoint directly since Hyperbolic is a newer provider
|
||||
* and may not have a public status page yet
|
||||
*/
|
||||
const apiEndpoint = 'https://api.hyperbolic.ai/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
// Check their website as a secondary indicator
|
||||
const websiteStatus = await this.checkEndpoint('https://hyperbolic.ai');
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All systems operational';
|
||||
|
||||
if (apiStatus !== 'reachable' || websiteStatus !== 'reachable') {
|
||||
status = apiStatus !== 'reachable' ? 'down' : 'degraded';
|
||||
message = apiStatus !== 'reachable' ? 'API appears to be down' : 'Service may be experiencing issues';
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents: [], // No public incident tracking available yet
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking Hyperbolic status:', error);
|
||||
|
||||
return {
|
||||
status: 'degraded',
|
||||
message: 'Unable to determine service status',
|
||||
incidents: ['Note: Limited status information available'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class MistralStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check status page
|
||||
const statusPageResponse = await fetch('https://status.mistral.ai/');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
const isOperational = text.includes('All Systems Operational');
|
||||
const hasIncidents = text.includes('Active Incidents');
|
||||
const hasDegradation = text.includes('Degraded Performance');
|
||||
const hasOutage = text.includes('Service Outage');
|
||||
|
||||
// Extract incidents
|
||||
const incidents: string[] = [];
|
||||
const incidentSection = text.match(/Recent Events(.*?)(?=\n\n)/s);
|
||||
|
||||
if (incidentSection) {
|
||||
const incidentLines = incidentSection[1]
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line && !line.includes('No incidents'));
|
||||
|
||||
incidents.push(...incidentLines.slice(0, 5));
|
||||
}
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All systems operational';
|
||||
|
||||
if (hasOutage) {
|
||||
status = 'down';
|
||||
message = 'Service outage detected';
|
||||
} else if (hasDegradation || hasIncidents) {
|
||||
status = 'degraded';
|
||||
message = 'Service experiencing issues';
|
||||
} else if (!isOperational) {
|
||||
status = 'degraded';
|
||||
message = 'Service status unknown';
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://status.mistral.ai/');
|
||||
const apiEndpoint = 'https://api.mistral.ai/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking Mistral status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://status.mistral.ai/');
|
||||
const apiEndpoint = 'https://api.mistral.ai/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class OpenAIStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check status page
|
||||
const statusPageResponse = await fetch('https://status.openai.com/');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
// Check individual services
|
||||
const services = {
|
||||
api: {
|
||||
operational: text.includes('API ? Operational'),
|
||||
degraded: text.includes('API ? Degraded Performance'),
|
||||
outage: text.includes('API ? Major Outage') || text.includes('API ? Partial Outage'),
|
||||
},
|
||||
chat: {
|
||||
operational: text.includes('ChatGPT ? Operational'),
|
||||
degraded: text.includes('ChatGPT ? Degraded Performance'),
|
||||
outage: text.includes('ChatGPT ? Major Outage') || text.includes('ChatGPT ? Partial Outage'),
|
||||
},
|
||||
};
|
||||
|
||||
// Extract recent incidents
|
||||
const incidents: string[] = [];
|
||||
const incidentMatches = text.match(/Past Incidents(.*?)(?=\w+ \d+, \d{4})/s);
|
||||
|
||||
if (incidentMatches) {
|
||||
const recentIncidents = incidentMatches[1]
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line && line.includes('202')); // Get only dated incidents
|
||||
|
||||
incidents.push(...recentIncidents.slice(0, 5));
|
||||
}
|
||||
|
||||
// Determine overall status
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
const messages: string[] = [];
|
||||
|
||||
if (services.api.outage || services.chat.outage) {
|
||||
status = 'down';
|
||||
|
||||
if (services.api.outage) {
|
||||
messages.push('API: Major Outage');
|
||||
}
|
||||
|
||||
if (services.chat.outage) {
|
||||
messages.push('ChatGPT: Major Outage');
|
||||
}
|
||||
} else if (services.api.degraded || services.chat.degraded) {
|
||||
status = 'degraded';
|
||||
|
||||
if (services.api.degraded) {
|
||||
messages.push('API: Degraded Performance');
|
||||
}
|
||||
|
||||
if (services.chat.degraded) {
|
||||
messages.push('ChatGPT: Degraded Performance');
|
||||
}
|
||||
} else if (services.api.operational) {
|
||||
messages.push('API: Operational');
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://status.openai.com/');
|
||||
const apiEndpoint = 'https://api.openai.com/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message: messages.join(', ') || 'Status unknown',
|
||||
incidents,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking OpenAI status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://status.openai.com/');
|
||||
const apiEndpoint = 'https://api.openai.com/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class OpenRouterStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check status page
|
||||
const statusPageResponse = await fetch('https://status.openrouter.ai/');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
// Check for specific OpenRouter status indicators
|
||||
const isOperational = text.includes('All Systems Operational');
|
||||
const hasIncidents = text.includes('Active Incidents');
|
||||
const hasDegradation = text.includes('Degraded Performance');
|
||||
const hasOutage = text.includes('Service Outage');
|
||||
|
||||
// Extract incidents
|
||||
const incidents: string[] = [];
|
||||
const incidentSection = text.match(/Past Incidents(.*?)(?=\n\n)/s);
|
||||
|
||||
if (incidentSection) {
|
||||
const incidentLines = incidentSection[1]
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line && line.includes('202')); // Only get dated incidents
|
||||
|
||||
incidents.push(...incidentLines.slice(0, 5));
|
||||
}
|
||||
|
||||
// Check specific services
|
||||
const services = {
|
||||
api: {
|
||||
operational: text.includes('API Service') && text.includes('Operational'),
|
||||
degraded: text.includes('API Service') && text.includes('Degraded Performance'),
|
||||
outage: text.includes('API Service') && text.includes('Service Outage'),
|
||||
},
|
||||
routing: {
|
||||
operational: text.includes('Routing Service') && text.includes('Operational'),
|
||||
degraded: text.includes('Routing Service') && text.includes('Degraded Performance'),
|
||||
outage: text.includes('Routing Service') && text.includes('Service Outage'),
|
||||
},
|
||||
};
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All systems operational';
|
||||
|
||||
if (services.api.outage || services.routing.outage || hasOutage) {
|
||||
status = 'down';
|
||||
message = 'Service outage detected';
|
||||
} else if (services.api.degraded || services.routing.degraded || hasDegradation || hasIncidents) {
|
||||
status = 'degraded';
|
||||
message = 'Service experiencing issues';
|
||||
} else if (!isOperational) {
|
||||
status = 'degraded';
|
||||
message = 'Service status unknown';
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://status.openrouter.ai/');
|
||||
const apiEndpoint = 'https://openrouter.ai/api/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking OpenRouter status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://status.openrouter.ai/');
|
||||
const apiEndpoint = 'https://openrouter.ai/api/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class PerplexityStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check status page
|
||||
const statusPageResponse = await fetch('https://status.perplexity.ai/');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
// Check for specific Perplexity status indicators
|
||||
const isOperational = text.includes('All Systems Operational');
|
||||
const hasIncidents = text.includes('Active Incidents');
|
||||
const hasDegradation = text.includes('Degraded Performance');
|
||||
const hasOutage = text.includes('Service Outage');
|
||||
|
||||
// Extract incidents
|
||||
const incidents: string[] = [];
|
||||
const incidentSection = text.match(/Past Incidents(.*?)(?=\n\n)/s);
|
||||
|
||||
if (incidentSection) {
|
||||
const incidentLines = incidentSection[1]
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line && line.includes('202')); // Only get dated incidents
|
||||
|
||||
incidents.push(...incidentLines.slice(0, 5));
|
||||
}
|
||||
|
||||
// Check specific services
|
||||
const services = {
|
||||
api: {
|
||||
operational: text.includes('API Service') && text.includes('Operational'),
|
||||
degraded: text.includes('API Service') && text.includes('Degraded Performance'),
|
||||
outage: text.includes('API Service') && text.includes('Service Outage'),
|
||||
},
|
||||
inference: {
|
||||
operational: text.includes('Inference Service') && text.includes('Operational'),
|
||||
degraded: text.includes('Inference Service') && text.includes('Degraded Performance'),
|
||||
outage: text.includes('Inference Service') && text.includes('Service Outage'),
|
||||
},
|
||||
};
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All systems operational';
|
||||
|
||||
if (services.api.outage || services.inference.outage || hasOutage) {
|
||||
status = 'down';
|
||||
message = 'Service outage detected';
|
||||
} else if (services.api.degraded || services.inference.degraded || hasDegradation || hasIncidents) {
|
||||
status = 'degraded';
|
||||
message = 'Service experiencing issues';
|
||||
} else if (!isOperational) {
|
||||
status = 'degraded';
|
||||
message = 'Service status unknown';
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://status.perplexity.ai/');
|
||||
const apiEndpoint = 'https://api.perplexity.ai/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking Perplexity status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://status.perplexity.ai/');
|
||||
const apiEndpoint = 'https://api.perplexity.ai/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class TogetherStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
// Check status page
|
||||
const statusPageResponse = await fetch('https://status.together.ai/');
|
||||
const text = await statusPageResponse.text();
|
||||
|
||||
// Check for specific Together status indicators
|
||||
const isOperational = text.includes('All Systems Operational');
|
||||
const hasIncidents = text.includes('Active Incidents');
|
||||
const hasDegradation = text.includes('Degraded Performance');
|
||||
const hasOutage = text.includes('Service Outage');
|
||||
|
||||
// Extract incidents
|
||||
const incidents: string[] = [];
|
||||
const incidentSection = text.match(/Past Incidents(.*?)(?=\n\n)/s);
|
||||
|
||||
if (incidentSection) {
|
||||
const incidentLines = incidentSection[1]
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line && line.includes('202')); // Only get dated incidents
|
||||
|
||||
incidents.push(...incidentLines.slice(0, 5));
|
||||
}
|
||||
|
||||
// Check specific services
|
||||
const services = {
|
||||
api: {
|
||||
operational: text.includes('API Service') && text.includes('Operational'),
|
||||
degraded: text.includes('API Service') && text.includes('Degraded Performance'),
|
||||
outage: text.includes('API Service') && text.includes('Service Outage'),
|
||||
},
|
||||
inference: {
|
||||
operational: text.includes('Inference Service') && text.includes('Operational'),
|
||||
degraded: text.includes('Inference Service') && text.includes('Degraded Performance'),
|
||||
outage: text.includes('Inference Service') && text.includes('Service Outage'),
|
||||
},
|
||||
};
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All systems operational';
|
||||
|
||||
if (services.api.outage || services.inference.outage || hasOutage) {
|
||||
status = 'down';
|
||||
message = 'Service outage detected';
|
||||
} else if (services.api.degraded || services.inference.degraded || hasDegradation || hasIncidents) {
|
||||
status = 'degraded';
|
||||
message = 'Service experiencing issues';
|
||||
} else if (!isOperational) {
|
||||
status = 'degraded';
|
||||
message = 'Service status unknown';
|
||||
}
|
||||
|
||||
// If status page check fails, fallback to endpoint check
|
||||
if (!statusPageResponse.ok) {
|
||||
const endpointStatus = await this.checkEndpoint('https://status.together.ai/');
|
||||
const apiEndpoint = 'https://api.together.ai/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking Together status:', error);
|
||||
|
||||
// Fallback to basic endpoint check
|
||||
const endpointStatus = await this.checkEndpoint('https://status.together.ai/');
|
||||
const apiEndpoint = 'https://api.together.ai/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { BaseProviderChecker } from '~/components/@settings/tabs/providers/service-status/base-provider';
|
||||
import type { StatusCheckResult } from '~/components/@settings/tabs/providers/service-status/types';
|
||||
|
||||
export class XAIStatusChecker extends BaseProviderChecker {
|
||||
async checkStatus(): Promise<StatusCheckResult> {
|
||||
try {
|
||||
/*
|
||||
* Check API endpoint directly since XAI is a newer provider
|
||||
* and may not have a public status page yet
|
||||
*/
|
||||
const apiEndpoint = 'https://api.xai.com/v1/models';
|
||||
const apiStatus = await this.checkEndpoint(apiEndpoint);
|
||||
|
||||
// Check their website as a secondary indicator
|
||||
const websiteStatus = await this.checkEndpoint('https://x.ai');
|
||||
|
||||
let status: StatusCheckResult['status'] = 'operational';
|
||||
let message = 'All systems operational';
|
||||
|
||||
if (apiStatus !== 'reachable' || websiteStatus !== 'reachable') {
|
||||
status = apiStatus !== 'reachable' ? 'down' : 'degraded';
|
||||
message = apiStatus !== 'reachable' ? 'API appears to be down' : 'Service may be experiencing issues';
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
message,
|
||||
incidents: [], // No public incident tracking available yet
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error checking XAI status:', error);
|
||||
|
||||
return {
|
||||
status: 'degraded',
|
||||
message: 'Unable to determine service status',
|
||||
incidents: ['Note: Limited status information available'],
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import type { IconType } from 'react-icons';
|
||||
|
||||
export type ProviderName =
|
||||
| 'AmazonBedrock'
|
||||
| 'Cohere'
|
||||
| 'Deepseek'
|
||||
| 'Google'
|
||||
| 'Groq'
|
||||
| 'HuggingFace'
|
||||
| 'Hyperbolic'
|
||||
| 'Mistral'
|
||||
| 'OpenRouter'
|
||||
| 'Perplexity'
|
||||
| 'Together'
|
||||
| 'XAI';
|
||||
|
||||
export type ServiceStatus = {
|
||||
provider: ProviderName;
|
||||
status: 'operational' | 'degraded' | 'down';
|
||||
lastChecked: string;
|
||||
statusUrl?: string;
|
||||
icon?: IconType;
|
||||
message?: string;
|
||||
responseTime?: number;
|
||||
incidents?: string[];
|
||||
};
|
||||
|
||||
export interface ProviderConfig {
|
||||
statusUrl: string;
|
||||
apiUrl: string;
|
||||
headers: Record<string, string>;
|
||||
testModel: string;
|
||||
}
|
||||
|
||||
export type ApiResponse = {
|
||||
error?: {
|
||||
message: string;
|
||||
};
|
||||
message?: string;
|
||||
model?: string;
|
||||
models?: Array<{
|
||||
id?: string;
|
||||
name?: string;
|
||||
}>;
|
||||
data?: Array<{
|
||||
id?: string;
|
||||
name?: string;
|
||||
}>;
|
||||
};
|
||||
|
||||
export type StatusCheckResult = {
|
||||
status: 'operational' | 'degraded' | 'down';
|
||||
message: string;
|
||||
incidents: string[];
|
||||
};
|
||||
@@ -0,0 +1,886 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { TbActivityHeartbeat } from 'react-icons/tb';
|
||||
import { BsCheckCircleFill, BsXCircleFill, BsExclamationCircleFill } from 'react-icons/bs';
|
||||
import { SiAmazon, SiGoogle, SiHuggingface, SiPerplexity, SiOpenai } from 'react-icons/si';
|
||||
import { BsRobot, BsCloud } from 'react-icons/bs';
|
||||
import { TbBrain } from 'react-icons/tb';
|
||||
import { BiChip, BiCodeBlock } from 'react-icons/bi';
|
||||
import { FaCloud, FaBrain } from 'react-icons/fa';
|
||||
import type { IconType } from 'react-icons';
|
||||
import { useSettings } from '~/lib/hooks/useSettings';
|
||||
import { useToast } from '~/components/ui/use-toast';
|
||||
|
||||
// Types
|
||||
type ProviderName =
|
||||
| 'AmazonBedrock'
|
||||
| 'Anthropic'
|
||||
| 'Cohere'
|
||||
| 'Deepseek'
|
||||
| 'Google'
|
||||
| 'Groq'
|
||||
| 'HuggingFace'
|
||||
| 'Mistral'
|
||||
| 'OpenAI'
|
||||
| 'OpenRouter'
|
||||
| 'Perplexity'
|
||||
| 'Together'
|
||||
| 'XAI';
|
||||
|
||||
type ServiceStatus = {
|
||||
provider: ProviderName;
|
||||
status: 'operational' | 'degraded' | 'down';
|
||||
lastChecked: string;
|
||||
statusUrl?: string;
|
||||
icon?: IconType;
|
||||
message?: string;
|
||||
responseTime?: number;
|
||||
incidents?: string[];
|
||||
};
|
||||
|
||||
type ProviderConfig = {
|
||||
statusUrl: string;
|
||||
apiUrl: string;
|
||||
headers: Record<string, string>;
|
||||
testModel: string;
|
||||
};
|
||||
|
||||
// Types for API responses
|
||||
type ApiResponse = {
|
||||
error?: {
|
||||
message: string;
|
||||
};
|
||||
message?: string;
|
||||
model?: string;
|
||||
models?: Array<{
|
||||
id?: string;
|
||||
name?: string;
|
||||
}>;
|
||||
data?: Array<{
|
||||
id?: string;
|
||||
name?: string;
|
||||
}>;
|
||||
};
|
||||
|
||||
// Constants
|
||||
const PROVIDER_STATUS_URLS: Record<ProviderName, ProviderConfig> = {
|
||||
OpenAI: {
|
||||
statusUrl: 'https://status.openai.com/',
|
||||
apiUrl: 'https://api.openai.com/v1/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $OPENAI_API_KEY',
|
||||
},
|
||||
testModel: 'gpt-3.5-turbo',
|
||||
},
|
||||
Anthropic: {
|
||||
statusUrl: 'https://status.anthropic.com/',
|
||||
apiUrl: 'https://api.anthropic.com/v1/messages',
|
||||
headers: {
|
||||
'x-api-key': '$ANTHROPIC_API_KEY',
|
||||
'anthropic-version': '2024-02-29',
|
||||
},
|
||||
testModel: 'claude-3-sonnet-20240229',
|
||||
},
|
||||
Cohere: {
|
||||
statusUrl: 'https://status.cohere.com/',
|
||||
apiUrl: 'https://api.cohere.ai/v1/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $COHERE_API_KEY',
|
||||
},
|
||||
testModel: 'command',
|
||||
},
|
||||
Google: {
|
||||
statusUrl: 'https://status.cloud.google.com/',
|
||||
apiUrl: 'https://generativelanguage.googleapis.com/v1/models',
|
||||
headers: {
|
||||
'x-goog-api-key': '$GOOGLE_API_KEY',
|
||||
},
|
||||
testModel: 'gemini-pro',
|
||||
},
|
||||
HuggingFace: {
|
||||
statusUrl: 'https://status.huggingface.co/',
|
||||
apiUrl: 'https://api-inference.huggingface.co/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $HUGGINGFACE_API_KEY',
|
||||
},
|
||||
testModel: 'mistralai/Mixtral-8x7B-Instruct-v0.1',
|
||||
},
|
||||
Mistral: {
|
||||
statusUrl: 'https://status.mistral.ai/',
|
||||
apiUrl: 'https://api.mistral.ai/v1/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $MISTRAL_API_KEY',
|
||||
},
|
||||
testModel: 'mistral-tiny',
|
||||
},
|
||||
Perplexity: {
|
||||
statusUrl: 'https://status.perplexity.com/',
|
||||
apiUrl: 'https://api.perplexity.ai/v1/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $PERPLEXITY_API_KEY',
|
||||
},
|
||||
testModel: 'pplx-7b-chat',
|
||||
},
|
||||
Together: {
|
||||
statusUrl: 'https://status.together.ai/',
|
||||
apiUrl: 'https://api.together.xyz/v1/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $TOGETHER_API_KEY',
|
||||
},
|
||||
testModel: 'mistralai/Mixtral-8x7B-Instruct-v0.1',
|
||||
},
|
||||
AmazonBedrock: {
|
||||
statusUrl: 'https://health.aws.amazon.com/health/status',
|
||||
apiUrl: 'https://bedrock.us-east-1.amazonaws.com/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $AWS_BEDROCK_CONFIG',
|
||||
},
|
||||
testModel: 'anthropic.claude-3-sonnet-20240229-v1:0',
|
||||
},
|
||||
Groq: {
|
||||
statusUrl: 'https://groqstatus.com/',
|
||||
apiUrl: 'https://api.groq.com/v1/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $GROQ_API_KEY',
|
||||
},
|
||||
testModel: 'mixtral-8x7b-32768',
|
||||
},
|
||||
OpenRouter: {
|
||||
statusUrl: 'https://status.openrouter.ai/',
|
||||
apiUrl: 'https://openrouter.ai/api/v1/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $OPEN_ROUTER_API_KEY',
|
||||
},
|
||||
testModel: 'anthropic/claude-3-sonnet',
|
||||
},
|
||||
XAI: {
|
||||
statusUrl: 'https://status.x.ai/',
|
||||
apiUrl: 'https://api.x.ai/v1/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $XAI_API_KEY',
|
||||
},
|
||||
testModel: 'grok-1',
|
||||
},
|
||||
Deepseek: {
|
||||
statusUrl: 'https://status.deepseek.com/',
|
||||
apiUrl: 'https://api.deepseek.com/v1/models',
|
||||
headers: {
|
||||
Authorization: 'Bearer $DEEPSEEK_API_KEY',
|
||||
},
|
||||
testModel: 'deepseek-chat',
|
||||
},
|
||||
};
|
||||
|
||||
const PROVIDER_ICONS: Record<ProviderName, IconType> = {
|
||||
AmazonBedrock: SiAmazon,
|
||||
Anthropic: FaBrain,
|
||||
Cohere: BiChip,
|
||||
Google: SiGoogle,
|
||||
Groq: BsCloud,
|
||||
HuggingFace: SiHuggingface,
|
||||
Mistral: TbBrain,
|
||||
OpenAI: SiOpenai,
|
||||
OpenRouter: FaCloud,
|
||||
Perplexity: SiPerplexity,
|
||||
Together: BsCloud,
|
||||
XAI: BsRobot,
|
||||
Deepseek: BiCodeBlock,
|
||||
};
|
||||
|
||||
const ServiceStatusTab = () => {
|
||||
const [serviceStatuses, setServiceStatuses] = useState<ServiceStatus[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [lastRefresh, setLastRefresh] = useState<Date>(new Date());
|
||||
const [testApiKey, setTestApiKey] = useState<string>('');
|
||||
const [testProvider, setTestProvider] = useState<ProviderName | ''>('');
|
||||
const [testingStatus, setTestingStatus] = useState<'idle' | 'testing' | 'success' | 'error'>('idle');
|
||||
const settings = useSettings();
|
||||
const { success, error } = useToast();
|
||||
|
||||
// Function to get the API key for a provider from environment variables
|
||||
const getApiKey = useCallback(
|
||||
(provider: ProviderName): string | null => {
|
||||
if (!settings.providers) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Map provider names to environment variable names
|
||||
const envKeyMap: Record<ProviderName, string> = {
|
||||
OpenAI: 'OPENAI_API_KEY',
|
||||
Anthropic: 'ANTHROPIC_API_KEY',
|
||||
Cohere: 'COHERE_API_KEY',
|
||||
Google: 'GOOGLE_GENERATIVE_AI_API_KEY',
|
||||
HuggingFace: 'HuggingFace_API_KEY',
|
||||
Mistral: 'MISTRAL_API_KEY',
|
||||
Perplexity: 'PERPLEXITY_API_KEY',
|
||||
Together: 'TOGETHER_API_KEY',
|
||||
AmazonBedrock: 'AWS_BEDROCK_CONFIG',
|
||||
Groq: 'GROQ_API_KEY',
|
||||
OpenRouter: 'OPEN_ROUTER_API_KEY',
|
||||
XAI: 'XAI_API_KEY',
|
||||
Deepseek: 'DEEPSEEK_API_KEY',
|
||||
};
|
||||
|
||||
const envKey = envKeyMap[provider];
|
||||
|
||||
if (!envKey) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Get the API key from environment variables
|
||||
const apiKey = (import.meta.env[envKey] as string) || null;
|
||||
|
||||
// Special handling for providers with base URLs
|
||||
if (provider === 'Together' && apiKey) {
|
||||
const baseUrl = import.meta.env.TOGETHER_API_BASE_URL;
|
||||
|
||||
if (!baseUrl) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return apiKey;
|
||||
},
|
||||
[settings.providers],
|
||||
);
|
||||
|
||||
// Update provider configurations based on available API keys
|
||||
const getProviderConfig = useCallback((provider: ProviderName): ProviderConfig | null => {
|
||||
const config = PROVIDER_STATUS_URLS[provider];
|
||||
|
||||
if (!config) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Handle special cases for providers with base URLs
|
||||
let updatedConfig = { ...config };
|
||||
const togetherBaseUrl = import.meta.env.TOGETHER_API_BASE_URL;
|
||||
|
||||
if (provider === 'Together' && togetherBaseUrl) {
|
||||
updatedConfig = {
|
||||
...config,
|
||||
apiUrl: `${togetherBaseUrl}/models`,
|
||||
};
|
||||
}
|
||||
|
||||
return updatedConfig;
|
||||
}, []);
|
||||
|
||||
// Function to check if an API endpoint is accessible with model verification
|
||||
const checkApiEndpoint = useCallback(
|
||||
async (
|
||||
url: string,
|
||||
headers?: Record<string, string>,
|
||||
testModel?: string,
|
||||
): Promise<{ ok: boolean; status: number | string; message?: string; responseTime: number }> => {
|
||||
try {
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), 10000);
|
||||
|
||||
const startTime = performance.now();
|
||||
|
||||
// Add common headers
|
||||
const processedHeaders = {
|
||||
'Content-Type': 'application/json',
|
||||
...headers,
|
||||
};
|
||||
|
||||
// First check if the API is accessible
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: processedHeaders,
|
||||
signal: controller.signal,
|
||||
});
|
||||
|
||||
const endTime = performance.now();
|
||||
const responseTime = endTime - startTime;
|
||||
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
// Get response data
|
||||
const data = (await response.json()) as ApiResponse;
|
||||
|
||||
// Special handling for different provider responses
|
||||
if (!response.ok) {
|
||||
let errorMessage = `API returned status: ${response.status}`;
|
||||
|
||||
// Handle provider-specific error messages
|
||||
if (data.error?.message) {
|
||||
errorMessage = data.error.message;
|
||||
} else if (data.message) {
|
||||
errorMessage = data.message;
|
||||
}
|
||||
|
||||
return {
|
||||
ok: false,
|
||||
status: response.status,
|
||||
message: errorMessage,
|
||||
responseTime,
|
||||
};
|
||||
}
|
||||
|
||||
// Different providers have different model list formats
|
||||
let models: string[] = [];
|
||||
|
||||
if (Array.isArray(data)) {
|
||||
models = data.map((model: { id?: string; name?: string }) => model.id || model.name || '');
|
||||
} else if (data.data && Array.isArray(data.data)) {
|
||||
models = data.data.map((model) => model.id || model.name || '');
|
||||
} else if (data.models && Array.isArray(data.models)) {
|
||||
models = data.models.map((model) => model.id || model.name || '');
|
||||
} else if (data.model) {
|
||||
// Some providers return single model info
|
||||
models = [data.model];
|
||||
}
|
||||
|
||||
// For some providers, just having a successful response is enough
|
||||
if (!testModel || models.length > 0) {
|
||||
return {
|
||||
ok: true,
|
||||
status: response.status,
|
||||
responseTime,
|
||||
message: 'API key is valid',
|
||||
};
|
||||
}
|
||||
|
||||
// If a specific model was requested, verify it exists
|
||||
if (testModel && !models.includes(testModel)) {
|
||||
return {
|
||||
ok: true, // Still mark as ok since API works
|
||||
status: 'model_not_found',
|
||||
message: `API key is valid (test model ${testModel} not found in ${models.length} available models)`,
|
||||
responseTime,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
ok: true,
|
||||
status: response.status,
|
||||
message: 'API key is valid',
|
||||
responseTime,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error(`Error checking API endpoint ${url}:`, error);
|
||||
return {
|
||||
ok: false,
|
||||
status: error instanceof Error ? error.message : 'Unknown error',
|
||||
message: error instanceof Error ? `Connection failed: ${error.message}` : 'Connection failed',
|
||||
responseTime: 0,
|
||||
};
|
||||
}
|
||||
},
|
||||
[getApiKey],
|
||||
);
|
||||
|
||||
// Function to fetch real status from provider status pages
|
||||
const fetchPublicStatus = useCallback(
|
||||
async (
|
||||
provider: ProviderName,
|
||||
): Promise<{
|
||||
status: ServiceStatus['status'];
|
||||
message?: string;
|
||||
incidents?: string[];
|
||||
}> => {
|
||||
try {
|
||||
// Due to CORS restrictions, we can only check if the endpoints are reachable
|
||||
const checkEndpoint = async (url: string) => {
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
mode: 'no-cors',
|
||||
headers: {
|
||||
Accept: 'text/html',
|
||||
},
|
||||
});
|
||||
|
||||
// With no-cors, we can only know if the request succeeded
|
||||
return response.type === 'opaque' ? 'reachable' : 'unreachable';
|
||||
} catch (error) {
|
||||
console.error(`Error checking ${url}:`, error);
|
||||
return 'unreachable';
|
||||
}
|
||||
};
|
||||
|
||||
switch (provider) {
|
||||
case 'HuggingFace': {
|
||||
const endpointStatus = await checkEndpoint('https://status.huggingface.co/');
|
||||
|
||||
// Check API endpoint as fallback
|
||||
const apiEndpoint = 'https://api-inference.huggingface.co/models';
|
||||
const apiStatus = await checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
case 'OpenAI': {
|
||||
const endpointStatus = await checkEndpoint('https://status.openai.com/');
|
||||
const apiEndpoint = 'https://api.openai.com/v1/models';
|
||||
const apiStatus = await checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
case 'Google': {
|
||||
const endpointStatus = await checkEndpoint('https://status.cloud.google.com/');
|
||||
const apiEndpoint = 'https://generativelanguage.googleapis.com/v1/models';
|
||||
const apiStatus = await checkEndpoint(apiEndpoint);
|
||||
|
||||
return {
|
||||
status: endpointStatus === 'reachable' && apiStatus === 'reachable' ? 'operational' : 'degraded',
|
||||
message: `Status page: ${endpointStatus}, API: ${apiStatus}`,
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
|
||||
// Similar pattern for other providers...
|
||||
default:
|
||||
return {
|
||||
status: 'operational',
|
||||
message: 'Basic reachability check only',
|
||||
incidents: ['Note: Limited status information due to CORS restrictions'],
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error fetching status for ${provider}:`, error);
|
||||
return {
|
||||
status: 'degraded',
|
||||
message: 'Unable to fetch status due to CORS restrictions',
|
||||
incidents: ['Error: Unable to check service status'],
|
||||
};
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
// Function to fetch status for a provider with retries
|
||||
const fetchProviderStatus = useCallback(
|
||||
async (provider: ProviderName, config: ProviderConfig): Promise<ServiceStatus> => {
|
||||
const MAX_RETRIES = 2;
|
||||
const RETRY_DELAY = 2000; // 2 seconds
|
||||
|
||||
const attemptCheck = async (attempt: number): Promise<ServiceStatus> => {
|
||||
try {
|
||||
// First check the public status page if available
|
||||
const hasPublicStatus = [
|
||||
'Anthropic',
|
||||
'OpenAI',
|
||||
'Google',
|
||||
'HuggingFace',
|
||||
'Mistral',
|
||||
'Groq',
|
||||
'Perplexity',
|
||||
'Together',
|
||||
].includes(provider);
|
||||
|
||||
if (hasPublicStatus) {
|
||||
const publicStatus = await fetchPublicStatus(provider);
|
||||
|
||||
return {
|
||||
provider,
|
||||
status: publicStatus.status,
|
||||
lastChecked: new Date().toISOString(),
|
||||
statusUrl: config.statusUrl,
|
||||
icon: PROVIDER_ICONS[provider],
|
||||
message: publicStatus.message,
|
||||
incidents: publicStatus.incidents,
|
||||
};
|
||||
}
|
||||
|
||||
// For other providers, we'll show status but mark API check as separate
|
||||
const apiKey = getApiKey(provider);
|
||||
const providerConfig = getProviderConfig(provider);
|
||||
|
||||
if (!apiKey || !providerConfig) {
|
||||
return {
|
||||
provider,
|
||||
status: 'operational',
|
||||
lastChecked: new Date().toISOString(),
|
||||
statusUrl: config.statusUrl,
|
||||
icon: PROVIDER_ICONS[provider],
|
||||
message: !apiKey
|
||||
? 'Status operational (API key needed for usage)'
|
||||
: 'Status operational (configuration needed for usage)',
|
||||
incidents: [],
|
||||
};
|
||||
}
|
||||
|
||||
// If we have API access, let's verify that too
|
||||
const { ok, status, message, responseTime } = await checkApiEndpoint(
|
||||
providerConfig.apiUrl,
|
||||
providerConfig.headers,
|
||||
providerConfig.testModel,
|
||||
);
|
||||
|
||||
if (!ok && attempt < MAX_RETRIES) {
|
||||
await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY));
|
||||
return attemptCheck(attempt + 1);
|
||||
}
|
||||
|
||||
return {
|
||||
provider,
|
||||
status: ok ? 'operational' : 'degraded',
|
||||
lastChecked: new Date().toISOString(),
|
||||
statusUrl: providerConfig.statusUrl,
|
||||
icon: PROVIDER_ICONS[provider],
|
||||
message: ok ? 'Service and API operational' : `Service operational (API: ${message || status})`,
|
||||
responseTime,
|
||||
incidents: [],
|
||||
};
|
||||
} catch (error) {
|
||||
console.error(`Error fetching status for ${provider} (attempt ${attempt}):`, error);
|
||||
|
||||
if (attempt < MAX_RETRIES) {
|
||||
await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY));
|
||||
return attemptCheck(attempt + 1);
|
||||
}
|
||||
|
||||
return {
|
||||
provider,
|
||||
status: 'degraded',
|
||||
lastChecked: new Date().toISOString(),
|
||||
statusUrl: config.statusUrl,
|
||||
icon: PROVIDER_ICONS[provider],
|
||||
message: 'Service operational (Status check error)',
|
||||
responseTime: 0,
|
||||
incidents: [],
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
return attemptCheck(1);
|
||||
},
|
||||
[checkApiEndpoint, getApiKey, getProviderConfig, fetchPublicStatus],
|
||||
);
|
||||
|
||||
// Memoize the fetchAllStatuses function
|
||||
const fetchAllStatuses = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const statuses = await Promise.all(
|
||||
Object.entries(PROVIDER_STATUS_URLS).map(([provider, config]) =>
|
||||
fetchProviderStatus(provider as ProviderName, config),
|
||||
),
|
||||
);
|
||||
|
||||
setServiceStatuses(statuses.sort((a, b) => a.provider.localeCompare(b.provider)));
|
||||
setLastRefresh(new Date());
|
||||
success('Service statuses updated successfully');
|
||||
} catch (err) {
|
||||
console.error('Error fetching all statuses:', err);
|
||||
error('Failed to update service statuses');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [fetchProviderStatus, success, error]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchAllStatuses();
|
||||
|
||||
// Refresh status every 2 minutes
|
||||
const interval = setInterval(fetchAllStatuses, 2 * 60 * 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [fetchAllStatuses]);
|
||||
|
||||
// Function to test an API key
|
||||
const testApiKeyForProvider = useCallback(
|
||||
async (provider: ProviderName, apiKey: string) => {
|
||||
try {
|
||||
setTestingStatus('testing');
|
||||
|
||||
const config = PROVIDER_STATUS_URLS[provider];
|
||||
|
||||
if (!config) {
|
||||
throw new Error('Provider configuration not found');
|
||||
}
|
||||
|
||||
const headers = { ...config.headers };
|
||||
|
||||
// Replace the placeholder API key with the test key
|
||||
Object.keys(headers).forEach((key) => {
|
||||
if (headers[key].startsWith('$')) {
|
||||
headers[key] = headers[key].replace(/\$.*/, apiKey);
|
||||
}
|
||||
});
|
||||
|
||||
// Special handling for certain providers
|
||||
switch (provider) {
|
||||
case 'Anthropic':
|
||||
headers['anthropic-version'] = '2024-02-29';
|
||||
break;
|
||||
case 'OpenAI':
|
||||
if (!headers.Authorization?.startsWith('Bearer ')) {
|
||||
headers.Authorization = `Bearer ${apiKey}`;
|
||||
}
|
||||
|
||||
break;
|
||||
case 'Google': {
|
||||
// Google uses the API key directly in the URL
|
||||
const googleUrl = `${config.apiUrl}?key=${apiKey}`;
|
||||
const result = await checkApiEndpoint(googleUrl, {}, config.testModel);
|
||||
|
||||
if (result.ok) {
|
||||
setTestingStatus('success');
|
||||
success('API key is valid!');
|
||||
} else {
|
||||
setTestingStatus('error');
|
||||
error(`API key test failed: ${result.message}`);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const { ok, message } = await checkApiEndpoint(config.apiUrl, headers, config.testModel);
|
||||
|
||||
if (ok) {
|
||||
setTestingStatus('success');
|
||||
success('API key is valid!');
|
||||
} else {
|
||||
setTestingStatus('error');
|
||||
error(`API key test failed: ${message}`);
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
setTestingStatus('error');
|
||||
error('Failed to test API key: ' + (err instanceof Error ? err.message : 'Unknown error'));
|
||||
} finally {
|
||||
// Reset testing status after a delay
|
||||
setTimeout(() => setTestingStatus('idle'), 3000);
|
||||
}
|
||||
},
|
||||
[checkApiEndpoint, success, error],
|
||||
);
|
||||
|
||||
const getStatusColor = (status: ServiceStatus['status']) => {
|
||||
switch (status) {
|
||||
case 'operational':
|
||||
return 'text-green-500';
|
||||
case 'degraded':
|
||||
return 'text-yellow-500';
|
||||
case 'down':
|
||||
return 'text-red-500';
|
||||
default:
|
||||
return 'text-gray-500';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusIcon = (status: ServiceStatus['status']) => {
|
||||
switch (status) {
|
||||
case 'operational':
|
||||
return <BsCheckCircleFill className="w-4 h-4" />;
|
||||
case 'degraded':
|
||||
return <BsExclamationCircleFill className="w-4 h-4" />;
|
||||
case 'down':
|
||||
return <BsXCircleFill className="w-4 h-4" />;
|
||||
default:
|
||||
return <BsXCircleFill className="w-4 h-4" />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<motion.div
|
||||
className="space-y-4"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2 mt-8 mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={classNames(
|
||||
'w-8 h-8 flex items-center justify-center rounded-lg',
|
||||
'bg-bolt-elements-background-depth-3',
|
||||
'text-purple-500',
|
||||
)}
|
||||
>
|
||||
<TbActivityHeartbeat className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-md font-medium text-bolt-elements-textPrimary">Service Status</h4>
|
||||
<p className="text-sm text-bolt-elements-textSecondary">
|
||||
Monitor and test the operational status of cloud LLM providers
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-bolt-elements-textSecondary">
|
||||
Last updated: {lastRefresh.toLocaleTimeString()}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => fetchAllStatuses()}
|
||||
className={classNames(
|
||||
'px-3 py-1.5 rounded-lg text-sm',
|
||||
'bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-4',
|
||||
'text-bolt-elements-textPrimary',
|
||||
'transition-all duration-200',
|
||||
'flex items-center gap-2',
|
||||
loading ? 'opacity-50 cursor-not-allowed' : '',
|
||||
)}
|
||||
disabled={loading}
|
||||
>
|
||||
<div className={`i-ph:arrows-clockwise w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
<span>{loading ? 'Refreshing...' : 'Refresh'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* API Key Test Section */}
|
||||
<div className="p-4 bg-bolt-elements-background-depth-2 rounded-lg">
|
||||
<h5 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Test API Key</h5>
|
||||
<div className="flex gap-2">
|
||||
<select
|
||||
value={testProvider}
|
||||
onChange={(e) => setTestProvider(e.target.value as ProviderName)}
|
||||
className={classNames(
|
||||
'flex-1 px-3 py-1.5 rounded-lg text-sm max-w-[200px]',
|
||||
'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
|
||||
'text-bolt-elements-textPrimary',
|
||||
'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
|
||||
)}
|
||||
>
|
||||
<option value="">Select Provider</option>
|
||||
{Object.keys(PROVIDER_STATUS_URLS).map((provider) => (
|
||||
<option key={provider} value={provider}>
|
||||
{provider}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
type="password"
|
||||
value={testApiKey}
|
||||
onChange={(e) => setTestApiKey(e.target.value)}
|
||||
placeholder="Enter API key to test"
|
||||
className={classNames(
|
||||
'flex-1 px-3 py-1.5 rounded-lg text-sm',
|
||||
'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
|
||||
'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
|
||||
'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
|
||||
)}
|
||||
/>
|
||||
<button
|
||||
onClick={() =>
|
||||
testProvider && testApiKey && testApiKeyForProvider(testProvider as ProviderName, testApiKey)
|
||||
}
|
||||
disabled={!testProvider || !testApiKey || testingStatus === 'testing'}
|
||||
className={classNames(
|
||||
'px-4 py-1.5 rounded-lg text-sm',
|
||||
'bg-purple-500 hover:bg-purple-600',
|
||||
'text-white',
|
||||
'transition-all duration-200',
|
||||
'flex items-center gap-2',
|
||||
!testProvider || !testApiKey || testingStatus === 'testing' ? 'opacity-50 cursor-not-allowed' : '',
|
||||
)}
|
||||
>
|
||||
{testingStatus === 'testing' ? (
|
||||
<>
|
||||
<div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
|
||||
<span>Testing...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="i-ph:key w-4 h-4" />
|
||||
<span>Test Key</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Grid */}
|
||||
{loading && serviceStatuses.length === 0 ? (
|
||||
<div className="text-center py-8 text-bolt-elements-textSecondary">Loading service statuses...</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{serviceStatuses.map((service, index) => (
|
||||
<motion.div
|
||||
key={service.provider}
|
||||
className={classNames(
|
||||
'bg-bolt-elements-background-depth-2',
|
||||
'hover:bg-bolt-elements-background-depth-3',
|
||||
'transition-all duration-200',
|
||||
'relative overflow-hidden rounded-lg',
|
||||
)}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
>
|
||||
<div
|
||||
className={classNames('block p-4', service.statusUrl ? 'cursor-pointer' : '')}
|
||||
onClick={() => service.statusUrl && window.open(service.statusUrl, '_blank')}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
{service.icon && (
|
||||
<div
|
||||
className={classNames(
|
||||
'w-8 h-8 flex items-center justify-center rounded-lg',
|
||||
'bg-bolt-elements-background-depth-3',
|
||||
getStatusColor(service.status),
|
||||
)}
|
||||
>
|
||||
{React.createElement(service.icon, {
|
||||
className: 'w-5 h-5',
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-bolt-elements-textPrimary">{service.provider}</h4>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-bolt-elements-textSecondary">
|
||||
Last checked: {new Date(service.lastChecked).toLocaleTimeString()}
|
||||
</p>
|
||||
{service.responseTime && (
|
||||
<p className="text-xs text-bolt-elements-textTertiary">
|
||||
Response time: {Math.round(service.responseTime)}ms
|
||||
</p>
|
||||
)}
|
||||
{service.message && (
|
||||
<p className="text-xs text-bolt-elements-textTertiary">{service.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classNames('flex items-center gap-2', getStatusColor(service.status))}>
|
||||
<span className="text-sm capitalize">{service.status}</span>
|
||||
{getStatusIcon(service.status)}
|
||||
</div>
|
||||
</div>
|
||||
{service.incidents && service.incidents.length > 0 && (
|
||||
<div className="mt-2 border-t border-bolt-elements-borderColor pt-2">
|
||||
<p className="text-xs font-medium text-bolt-elements-textSecondary mb-1">Recent Incidents:</p>
|
||||
<ul className="text-xs text-bolt-elements-textTertiary space-y-1">
|
||||
{service.incidents.map((incident, i) => (
|
||||
<li key={i}>{incident}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Add tab metadata
|
||||
ServiceStatusTab.tabMetadata = {
|
||||
icon: 'i-ph:activity-bold',
|
||||
description: 'Monitor and test LLM provider service status',
|
||||
category: 'services',
|
||||
};
|
||||
|
||||
export default ServiceStatusTab;
|
||||
279
app/components/@settings/tabs/settings/SettingsTab.tsx
Normal file
279
app/components/@settings/tabs/settings/SettingsTab.tsx
Normal file
@@ -0,0 +1,279 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { toast } from 'react-toastify';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { Switch } from '~/components/ui/Switch';
|
||||
import { themeStore, kTheme } from '~/lib/stores/theme';
|
||||
import type { UserProfile } from '~/components/@settings/core/types';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { shortcutsStore } from '~/lib/stores/settings';
|
||||
|
||||
export default function SettingsTab() {
|
||||
const [currentTimezone, setCurrentTimezone] = useState('');
|
||||
const [settings, setSettings] = useState<UserProfile>(() => {
|
||||
const saved = localStorage.getItem('bolt_user_profile');
|
||||
return saved
|
||||
? JSON.parse(saved)
|
||||
: {
|
||||
theme: 'system',
|
||||
notifications: true,
|
||||
language: 'en',
|
||||
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
};
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone);
|
||||
}, []);
|
||||
|
||||
// Apply theme when settings changes
|
||||
useEffect(() => {
|
||||
if (settings.theme === 'system') {
|
||||
// Remove theme override
|
||||
localStorage.removeItem(kTheme);
|
||||
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
document.querySelector('html')?.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
|
||||
themeStore.set(prefersDark ? 'dark' : 'light');
|
||||
} else {
|
||||
themeStore.set(settings.theme);
|
||||
localStorage.setItem(kTheme, settings.theme);
|
||||
document.querySelector('html')?.setAttribute('data-theme', settings.theme);
|
||||
}
|
||||
}, [settings.theme]);
|
||||
|
||||
// Save settings automatically when they change
|
||||
useEffect(() => {
|
||||
try {
|
||||
// Get existing profile data
|
||||
const existingProfile = JSON.parse(localStorage.getItem('bolt_user_profile') || '{}');
|
||||
|
||||
// Merge with new settings
|
||||
const updatedProfile = {
|
||||
...existingProfile,
|
||||
theme: settings.theme,
|
||||
notifications: settings.notifications,
|
||||
language: settings.language,
|
||||
timezone: settings.timezone,
|
||||
};
|
||||
|
||||
localStorage.setItem('bolt_user_profile', JSON.stringify(updatedProfile));
|
||||
toast.success('Settings updated');
|
||||
} catch (error) {
|
||||
console.error('Error saving settings:', error);
|
||||
toast.error('Failed to update settings');
|
||||
}
|
||||
}, [settings]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Theme & Language */}
|
||||
<motion.div
|
||||
className="bg-white dark:bg-[#0A0A0A] rounded-lg shadow-sm dark:shadow-none p-4 space-y-4"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className="i-ph:palette-fill w-4 h-4 text-purple-500" />
|
||||
<span className="text-sm font-medium text-bolt-elements-textPrimary">Appearance</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="i-ph:paint-brush-fill w-4 h-4 text-bolt-elements-textSecondary" />
|
||||
<label className="block text-sm text-bolt-elements-textSecondary">Theme</label>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{(['light', 'dark', 'system'] as const).map((theme) => (
|
||||
<button
|
||||
key={theme}
|
||||
onClick={() => {
|
||||
setSettings((prev) => ({ ...prev, theme }));
|
||||
|
||||
if (theme !== 'system') {
|
||||
themeStore.set(theme);
|
||||
}
|
||||
}}
|
||||
className={classNames(
|
||||
'inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
settings.theme === theme
|
||||
? 'bg-purple-500 text-white hover:bg-purple-600 dark:bg-purple-500 dark:text-white dark:hover:bg-purple-600'
|
||||
: 'bg-bolt-elements-hover dark:bg-[#1A1A1A] text-bolt-elements-textSecondary hover:bg-purple-500/10 hover:text-purple-500 dark:hover:bg-purple-500/20 dark:text-bolt-elements-textPrimary dark:hover:text-purple-500',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={`w-4 h-4 ${
|
||||
theme === 'light'
|
||||
? 'i-ph:sun-fill'
|
||||
: theme === 'dark'
|
||||
? 'i-ph:moon-stars-fill'
|
||||
: 'i-ph:monitor-fill'
|
||||
}`}
|
||||
/>
|
||||
<span className="capitalize">{theme}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="i-ph:translate-fill w-4 h-4 text-bolt-elements-textSecondary" />
|
||||
<label className="block text-sm text-bolt-elements-textSecondary">Language</label>
|
||||
</div>
|
||||
<select
|
||||
value={settings.language}
|
||||
onChange={(e) => setSettings((prev) => ({ ...prev, language: e.target.value }))}
|
||||
className={classNames(
|
||||
'w-full px-3 py-2 rounded-lg text-sm',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'text-bolt-elements-textPrimary',
|
||||
'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
<option value="en">English</option>
|
||||
<option value="es">Español</option>
|
||||
<option value="fr">Français</option>
|
||||
<option value="de">Deutsch</option>
|
||||
<option value="it">Italiano</option>
|
||||
<option value="pt">Português</option>
|
||||
<option value="ru">Русский</option>
|
||||
<option value="zh">中文</option>
|
||||
<option value="ja">日本語</option>
|
||||
<option value="ko">한국어</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="i-ph:bell-fill w-4 h-4 text-bolt-elements-textSecondary" />
|
||||
<label className="block text-sm text-bolt-elements-textSecondary">Notifications</label>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-bolt-elements-textSecondary">
|
||||
{settings.notifications ? 'Notifications are enabled' : 'Notifications are disabled'}
|
||||
</span>
|
||||
<Switch
|
||||
checked={settings.notifications}
|
||||
onCheckedChange={(checked) => {
|
||||
// Update local state
|
||||
setSettings((prev) => ({ ...prev, notifications: checked }));
|
||||
|
||||
// Update localStorage immediately
|
||||
const existingProfile = JSON.parse(localStorage.getItem('bolt_user_profile') || '{}');
|
||||
const updatedProfile = {
|
||||
...existingProfile,
|
||||
notifications: checked,
|
||||
};
|
||||
localStorage.setItem('bolt_user_profile', JSON.stringify(updatedProfile));
|
||||
|
||||
// Dispatch storage event for other components
|
||||
window.dispatchEvent(
|
||||
new StorageEvent('storage', {
|
||||
key: 'bolt_user_profile',
|
||||
newValue: JSON.stringify(updatedProfile),
|
||||
}),
|
||||
);
|
||||
|
||||
toast.success(`Notifications ${checked ? 'enabled' : 'disabled'}`);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Timezone */}
|
||||
<motion.div
|
||||
className="bg-white dark:bg-[#0A0A0A] rounded-lg shadow-sm dark:shadow-none p-4"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className="i-ph:clock-fill w-4 h-4 text-purple-500" />
|
||||
<span className="text-sm font-medium text-bolt-elements-textPrimary">Time Settings</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="i-ph:globe-fill w-4 h-4 text-bolt-elements-textSecondary" />
|
||||
<label className="block text-sm text-bolt-elements-textSecondary">Timezone</label>
|
||||
</div>
|
||||
<select
|
||||
value={settings.timezone}
|
||||
onChange={(e) => setSettings((prev) => ({ ...prev, timezone: e.target.value }))}
|
||||
className={classNames(
|
||||
'w-full px-3 py-2 rounded-lg text-sm',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'text-bolt-elements-textPrimary',
|
||||
'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
<option value={currentTimezone}>{currentTimezone}</option>
|
||||
</select>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Keyboard Shortcuts */}
|
||||
<motion.div
|
||||
className="bg-white dark:bg-[#0A0A0A] rounded-lg shadow-sm dark:shadow-none p-4"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className="i-ph:keyboard-fill w-4 h-4 text-purple-500" />
|
||||
<span className="text-sm font-medium text-bolt-elements-textPrimary">Keyboard Shortcuts</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{Object.entries(useStore(shortcutsStore)).map(([name, shortcut]) => (
|
||||
<div
|
||||
key={name}
|
||||
className="flex items-center justify-between p-2 rounded-lg bg-[#FAFAFA] dark:bg-[#1A1A1A] hover:bg-purple-50 dark:hover:bg-purple-500/10 transition-colors"
|
||||
>
|
||||
<span className="text-sm text-bolt-elements-textPrimary capitalize">
|
||||
{name.replace(/([A-Z])/g, ' $1').toLowerCase()}
|
||||
</span>
|
||||
<div className="flex items-center gap-1">
|
||||
{shortcut.ctrlOrMetaKey && (
|
||||
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
|
||||
{navigator.platform.includes('Mac') ? '⌘' : 'Ctrl'}
|
||||
</kbd>
|
||||
)}
|
||||
{shortcut.ctrlKey && (
|
||||
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
|
||||
Ctrl
|
||||
</kbd>
|
||||
)}
|
||||
{shortcut.metaKey && (
|
||||
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
|
||||
⌘
|
||||
</kbd>
|
||||
)}
|
||||
{shortcut.altKey && (
|
||||
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
|
||||
{navigator.platform.includes('Mac') ? '⌥' : 'Alt'}
|
||||
</kbd>
|
||||
)}
|
||||
{shortcut.shiftKey && (
|
||||
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
|
||||
⇧
|
||||
</kbd>
|
||||
)}
|
||||
<kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
|
||||
{shortcut.key.toUpperCase()}
|
||||
</kbd>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
1265
app/components/@settings/tabs/task-manager/TaskManagerTab.tsx
Normal file
1265
app/components/@settings/tabs/task-manager/TaskManagerTab.tsx
Normal file
File diff suppressed because it is too large
Load Diff
843
app/components/@settings/tabs/update/UpdateTab.tsx
Normal file
843
app/components/@settings/tabs/update/UpdateTab.tsx
Normal file
@@ -0,0 +1,843 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useSettings } from '~/lib/hooks/useSettings';
|
||||
import { logStore } from '~/lib/stores/logs';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { toast } from 'react-toastify';
|
||||
import { Dialog, DialogRoot, DialogTitle, DialogDescription, DialogButton } from '~/components/ui/Dialog';
|
||||
|
||||
interface GitHubCommitResponse {
|
||||
sha: string;
|
||||
commit: {
|
||||
message: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface GitHubReleaseResponse {
|
||||
tag_name: string;
|
||||
body: string;
|
||||
assets: Array<{
|
||||
size: number;
|
||||
browser_download_url: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
interface UpdateInfo {
|
||||
currentVersion: string;
|
||||
latestVersion: string;
|
||||
branch: string;
|
||||
hasUpdate: boolean;
|
||||
releaseNotes?: string;
|
||||
downloadSize?: string;
|
||||
changelog?: string[];
|
||||
currentCommit?: string;
|
||||
latestCommit?: string;
|
||||
downloadProgress?: number;
|
||||
installProgress?: number;
|
||||
estimatedTimeRemaining?: number;
|
||||
error?: {
|
||||
type: string;
|
||||
message: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface UpdateSettings {
|
||||
autoUpdate: boolean;
|
||||
notifyInApp: boolean;
|
||||
checkInterval: number;
|
||||
}
|
||||
|
||||
interface UpdateResponse {
|
||||
success: boolean;
|
||||
error?: string;
|
||||
message?: string;
|
||||
instructions?: string[];
|
||||
}
|
||||
|
||||
const categorizeChangelog = (messages: string[]) => {
|
||||
const categories = new Map<string, string[]>();
|
||||
|
||||
messages.forEach((message) => {
|
||||
let category = 'Other';
|
||||
|
||||
if (message.startsWith('feat:')) {
|
||||
category = 'Features';
|
||||
} else if (message.startsWith('fix:')) {
|
||||
category = 'Bug Fixes';
|
||||
} else if (message.startsWith('docs:')) {
|
||||
category = 'Documentation';
|
||||
} else if (message.startsWith('ci:')) {
|
||||
category = 'CI Improvements';
|
||||
} else if (message.startsWith('refactor:')) {
|
||||
category = 'Refactoring';
|
||||
} else if (message.startsWith('test:')) {
|
||||
category = 'Testing';
|
||||
} else if (message.startsWith('style:')) {
|
||||
category = 'Styling';
|
||||
} else if (message.startsWith('perf:')) {
|
||||
category = 'Performance';
|
||||
}
|
||||
|
||||
if (!categories.has(category)) {
|
||||
categories.set(category, []);
|
||||
}
|
||||
|
||||
categories.get(category)!.push(message);
|
||||
});
|
||||
|
||||
const order = [
|
||||
'Features',
|
||||
'Bug Fixes',
|
||||
'Documentation',
|
||||
'CI Improvements',
|
||||
'Refactoring',
|
||||
'Performance',
|
||||
'Testing',
|
||||
'Styling',
|
||||
'Other',
|
||||
];
|
||||
|
||||
return Array.from(categories.entries())
|
||||
.sort((a, b) => order.indexOf(a[0]) - order.indexOf(b[0]))
|
||||
.filter(([_, messages]) => messages.length > 0);
|
||||
};
|
||||
|
||||
const parseCommitMessage = (message: string) => {
|
||||
const prMatch = message.match(/#(\d+)/);
|
||||
const prNumber = prMatch ? prMatch[1] : null;
|
||||
|
||||
let cleanMessage = message.replace(/^[a-z]+:\s*/i, '');
|
||||
cleanMessage = cleanMessage.replace(/#\d+/g, '').trim();
|
||||
|
||||
const parts = cleanMessage.split(/[\n\r]|\s+\*\s+/);
|
||||
const title = parts[0].trim();
|
||||
const description = parts
|
||||
.slice(1)
|
||||
.map((p) => p.trim())
|
||||
.filter((p) => p && !p.includes('Co-authored-by:'))
|
||||
.join('\n');
|
||||
|
||||
return { title, description, prNumber };
|
||||
};
|
||||
|
||||
const GITHUB_URLS = {
|
||||
commitJson: async (branch: string, headers: HeadersInit = {}): Promise<UpdateInfo> => {
|
||||
try {
|
||||
const [commitResponse, releaseResponse, changelogResponse] = await Promise.all([
|
||||
fetch(`https://api.github.com/repos/stackblitz-labs/bolt.diy/commits/${branch}`, { headers }),
|
||||
fetch('https://api.github.com/repos/stackblitz-labs/bolt.diy/releases/latest', { headers }),
|
||||
fetch(`https://api.github.com/repos/stackblitz-labs/bolt.diy/commits?sha=${branch}&per_page=10`, { headers }),
|
||||
]);
|
||||
|
||||
if (!commitResponse.ok || !releaseResponse.ok || !changelogResponse.ok) {
|
||||
throw new Error(
|
||||
`GitHub API error: ${!commitResponse.ok ? await commitResponse.text() : await releaseResponse.text()}`,
|
||||
);
|
||||
}
|
||||
|
||||
const commitData = (await commitResponse.json()) as GitHubCommitResponse;
|
||||
const releaseData = (await releaseResponse.json()) as GitHubReleaseResponse;
|
||||
const commits = (await changelogResponse.json()) as GitHubCommitResponse[];
|
||||
|
||||
const totalSize = releaseData.assets?.reduce((acc, asset) => acc + asset.size, 0) || 0;
|
||||
const downloadSize = (totalSize / (1024 * 1024)).toFixed(2) + ' MB';
|
||||
|
||||
const changelog = commits.map((commit) => commit.commit.message);
|
||||
|
||||
return {
|
||||
currentVersion: process.env.APP_VERSION || 'unknown',
|
||||
latestVersion: releaseData.tag_name || commitData.sha.substring(0, 7),
|
||||
branch,
|
||||
hasUpdate: commitData.sha !== process.env.CURRENT_COMMIT,
|
||||
releaseNotes: releaseData.body || '',
|
||||
downloadSize,
|
||||
changelog,
|
||||
currentCommit: process.env.CURRENT_COMMIT?.substring(0, 7),
|
||||
latestCommit: commitData.sha.substring(0, 7),
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error fetching update info:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const UpdateTab = () => {
|
||||
const { isLatestBranch } = useSettings();
|
||||
const [updateInfo, setUpdateInfo] = useState<UpdateInfo | null>(null);
|
||||
const [isChecking, setIsChecking] = useState(false);
|
||||
const [isUpdating, setIsUpdating] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [retryCount, setRetryCount] = useState(0);
|
||||
const [showChangelog, setShowChangelog] = useState(false);
|
||||
const [showManualInstructions, setShowManualInstructions] = useState(false);
|
||||
const [hasUserRespondedToUpdate, setHasUserRespondedToUpdate] = useState(false);
|
||||
const [updateFailed, setUpdateFailed] = useState(false);
|
||||
const [updateSettings, setUpdateSettings] = useState<UpdateSettings>(() => {
|
||||
const stored = localStorage.getItem('update_settings');
|
||||
return stored
|
||||
? JSON.parse(stored)
|
||||
: {
|
||||
autoUpdate: false,
|
||||
notifyInApp: true,
|
||||
checkInterval: 24,
|
||||
};
|
||||
});
|
||||
const [lastChecked, setLastChecked] = useState<Date | null>(null);
|
||||
const [showUpdateDialog, setShowUpdateDialog] = useState(false);
|
||||
const [updateChangelog, setUpdateChangelog] = useState<string[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('update_settings', JSON.stringify(updateSettings));
|
||||
}, [updateSettings]);
|
||||
|
||||
const checkForUpdates = async () => {
|
||||
console.log('Starting update check...');
|
||||
setIsChecking(true);
|
||||
setError(null);
|
||||
setLastChecked(new Date());
|
||||
|
||||
try {
|
||||
console.log('Fetching update info...');
|
||||
|
||||
const branchToCheck = isLatestBranch ? 'main' : 'stable';
|
||||
const info = await GITHUB_URLS.commitJson(branchToCheck);
|
||||
|
||||
setUpdateInfo(info);
|
||||
|
||||
if (info.error) {
|
||||
setError(info.error.message);
|
||||
logStore.logWarning('Update Check Failed', {
|
||||
type: 'update',
|
||||
message: info.error.message,
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (info.hasUpdate) {
|
||||
const existingLogs = Object.values(logStore.logs.get());
|
||||
const hasUpdateNotification = existingLogs.some(
|
||||
(log) =>
|
||||
log.level === 'warning' &&
|
||||
log.details?.type === 'update' &&
|
||||
log.details.latestVersion === info.latestVersion,
|
||||
);
|
||||
|
||||
if (!hasUpdateNotification && updateSettings.notifyInApp) {
|
||||
logStore.logWarning('Update Available', {
|
||||
currentVersion: info.currentVersion,
|
||||
latestVersion: info.latestVersion,
|
||||
branch: branchToCheck,
|
||||
type: 'update',
|
||||
message: `A new version is available on the ${branchToCheck} branch`,
|
||||
updateUrl: `https://github.com/stackblitz-labs/bolt.diy/compare/${info.currentVersion}...${info.latestVersion}`,
|
||||
});
|
||||
|
||||
if (updateSettings.autoUpdate && !hasUserRespondedToUpdate) {
|
||||
setUpdateChangelog([
|
||||
'New version available.',
|
||||
`Compare changes: https://github.com/stackblitz-labs/bolt.diy/compare/${info.currentVersion}...${info.latestVersion}`,
|
||||
'',
|
||||
'Click "Update Now" to start the update process.',
|
||||
]);
|
||||
setShowUpdateDialog(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Update check failed:', err);
|
||||
|
||||
const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
|
||||
setError(`Failed to check for updates: ${errorMessage}`);
|
||||
setUpdateFailed(true);
|
||||
} finally {
|
||||
setIsChecking(false);
|
||||
}
|
||||
};
|
||||
|
||||
const initiateUpdate = async () => {
|
||||
setIsUpdating(true);
|
||||
setError(null);
|
||||
|
||||
let currentRetry = 0;
|
||||
const maxRetries = 3;
|
||||
|
||||
const attemptUpdate = async (): Promise<void> => {
|
||||
try {
|
||||
const response = await fetch('/api/update', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
branch: isLatestBranch ? 'main' : 'stable',
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = (await response.json()) as { error: string };
|
||||
throw new Error(errorData.error || 'Failed to initiate update');
|
||||
}
|
||||
|
||||
const result = (await response.json()) as UpdateResponse;
|
||||
|
||||
if (result.success) {
|
||||
logStore.logSuccess('Update instructions ready', {
|
||||
type: 'update',
|
||||
message: result.message || 'Update instructions ready',
|
||||
});
|
||||
|
||||
// Show manual update instructions
|
||||
setShowManualInstructions(true);
|
||||
setUpdateChangelog(
|
||||
result.instructions || [
|
||||
'Failed to get update instructions. Please update manually:',
|
||||
'1. git pull origin main',
|
||||
'2. pnpm install',
|
||||
'3. pnpm build',
|
||||
'4. Restart the application',
|
||||
],
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
throw new Error(result.error || 'Update failed');
|
||||
} catch (err) {
|
||||
currentRetry++;
|
||||
|
||||
const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
|
||||
|
||||
if (currentRetry < maxRetries) {
|
||||
toast.warning(`Update attempt ${currentRetry} failed. Retrying...`, { autoClose: 2000 });
|
||||
setRetryCount(currentRetry);
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
||||
await attemptUpdate();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
setError('Failed to get update instructions. Please update manually.');
|
||||
console.error('Update failed:', err);
|
||||
logStore.logSystem('Update failed: ' + errorMessage);
|
||||
toast.error('Update failed: ' + errorMessage);
|
||||
setUpdateFailed(true);
|
||||
}
|
||||
};
|
||||
|
||||
await attemptUpdate();
|
||||
setIsUpdating(false);
|
||||
setRetryCount(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const checkInterval = updateSettings.checkInterval * 60 * 60 * 1000;
|
||||
const intervalId = setInterval(checkForUpdates, checkInterval);
|
||||
|
||||
return () => clearInterval(intervalId);
|
||||
}, [updateSettings.checkInterval, isLatestBranch]);
|
||||
|
||||
useEffect(() => {
|
||||
checkForUpdates();
|
||||
}, [isLatestBranch]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<motion.div
|
||||
className="flex items-center gap-3"
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className="i-ph:arrow-circle-up text-xl text-purple-500" />
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-bolt-elements-textPrimary">Updates</h3>
|
||||
<p className="text-sm text-bolt-elements-textSecondary">Check for and manage application updates</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Update Settings Card */}
|
||||
<motion.div
|
||||
className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3, delay: 0.1 }}
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="i-ph:gear text-purple-500 w-5 h-5" />
|
||||
<h3 className="text-lg font-medium text-bolt-elements-textPrimary">Update Settings</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-sm text-bolt-elements-textPrimary">Automatic Updates</span>
|
||||
<p className="text-xs text-bolt-elements-textSecondary">
|
||||
Automatically check and apply updates when available
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setUpdateSettings((prev) => ({ ...prev, autoUpdate: !prev.autoUpdate }))}
|
||||
className={classNames(
|
||||
'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
|
||||
updateSettings.autoUpdate ? 'bg-purple-500' : 'bg-gray-200 dark:bg-gray-700',
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={classNames(
|
||||
'inline-block h-4 w-4 transform rounded-full bg-white transition-transform',
|
||||
updateSettings.autoUpdate ? 'translate-x-6' : 'translate-x-1',
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-sm text-bolt-elements-textPrimary">In-App Notifications</span>
|
||||
<p className="text-xs text-bolt-elements-textSecondary">Show notifications when updates are available</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setUpdateSettings((prev) => ({ ...prev, notifyInApp: !prev.notifyInApp }))}
|
||||
className={classNames(
|
||||
'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
|
||||
updateSettings.notifyInApp ? 'bg-purple-500' : 'bg-gray-200 dark:bg-gray-700',
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={classNames(
|
||||
'inline-block h-4 w-4 transform rounded-full bg-white transition-transform',
|
||||
updateSettings.notifyInApp ? 'translate-x-6' : 'translate-x-1',
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-sm text-bolt-elements-textPrimary">Check Interval</span>
|
||||
<p className="text-xs text-bolt-elements-textSecondary">How often to check for updates</p>
|
||||
</div>
|
||||
<select
|
||||
value={updateSettings.checkInterval}
|
||||
onChange={(e) => setUpdateSettings((prev) => ({ ...prev, checkInterval: Number(e.target.value) }))}
|
||||
className={classNames(
|
||||
'px-3 py-2 rounded-lg text-sm',
|
||||
'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'text-bolt-elements-textPrimary',
|
||||
'hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
|
||||
'transition-colors duration-200',
|
||||
)}
|
||||
>
|
||||
<option value="6">6 hours</option>
|
||||
<option value="12">12 hours</option>
|
||||
<option value="24">24 hours</option>
|
||||
<option value="48">48 hours</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Update Status Card */}
|
||||
<motion.div
|
||||
className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3, delay: 0.2 }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-sm text-bolt-elements-textSecondary">
|
||||
Currently on {isLatestBranch ? 'main' : 'stable'} branch
|
||||
</span>
|
||||
{updateInfo && (
|
||||
<span className="text-xs text-bolt-elements-textTertiary">
|
||||
Version: {updateInfo.currentVersion} ({updateInfo.currentCommit})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setHasUserRespondedToUpdate(false);
|
||||
setUpdateFailed(false);
|
||||
setError(null);
|
||||
checkForUpdates();
|
||||
}}
|
||||
disabled={isChecking}
|
||||
className={classNames(
|
||||
'flex items-center gap-2 px-3 py-2 rounded-lg text-sm',
|
||||
'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
|
||||
'hover:bg-purple-500/10 hover:text-purple-500',
|
||||
'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
|
||||
'text-bolt-elements-textPrimary',
|
||||
'transition-colors duration-200',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
)}
|
||||
>
|
||||
<div className={classNames('i-ph:arrows-clockwise w-4 h-4', isChecking ? 'animate-spin' : '')} />
|
||||
{isChecking ? 'Checking...' : 'Check for Updates'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-4 rounded-lg bg-red-500/10 border border-red-500/20 text-red-600 dark:text-red-400">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="i-ph:warning-circle" />
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{error}</span>
|
||||
{error.includes('rate limit') && (
|
||||
<span className="text-sm mt-1">
|
||||
Try adding a GitHub token in the connections tab to increase the rate limit.
|
||||
</span>
|
||||
)}
|
||||
{error.includes('authentication') && (
|
||||
<span className="text-sm mt-1">
|
||||
Please check your GitHub token configuration in the connections tab.
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{updateInfo && (
|
||||
<div
|
||||
className={classNames(
|
||||
'p-4 rounded-lg',
|
||||
updateInfo.hasUpdate
|
||||
? 'bg-purple-500/5 dark:bg-purple-500/10 border border-purple-500/20'
|
||||
: 'bg-green-500/5 dark:bg-green-500/10 border border-green-500/20',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={classNames(
|
||||
'text-lg',
|
||||
updateInfo.hasUpdate ? 'i-ph:warning text-purple-500' : 'i-ph:check-circle text-green-500',
|
||||
)}
|
||||
/>
|
||||
<div>
|
||||
<h4 className="font-medium text-bolt-elements-textPrimary">
|
||||
{updateInfo.hasUpdate ? 'Update Available' : 'Up to Date'}
|
||||
</h4>
|
||||
<p className="text-sm text-bolt-elements-textSecondary">
|
||||
{updateInfo.hasUpdate
|
||||
? `Version ${updateInfo.latestVersion} (${updateInfo.latestCommit}) is now available`
|
||||
: 'You are running the latest version'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{lastChecked && (
|
||||
<div className="flex flex-col items-end mt-2">
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||
Last checked: {lastChecked.toLocaleString()}
|
||||
</span>
|
||||
{error && <span className="text-xs text-red-500 mt-1">{error}</span>}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
{/* Update Details Card */}
|
||||
{updateInfo && updateInfo.hasUpdate && (
|
||||
<motion.div
|
||||
className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3, delay: 0.2 }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="i-ph:arrow-circle-up text-purple-500 w-5 h-5" />
|
||||
<span className="text-sm font-medium text-bolt-elements-textPrimary">
|
||||
Version {updateInfo.latestVersion}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-xs px-3 py-1 rounded-full bg-purple-500/10 text-purple-500">
|
||||
{updateInfo.downloadSize}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Update Options */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={initiateUpdate}
|
||||
disabled={isUpdating || updateFailed}
|
||||
className={classNames(
|
||||
'flex items-center gap-2 px-4 py-2 rounded-lg text-sm',
|
||||
'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
|
||||
'hover:bg-purple-500/10 hover:text-purple-500',
|
||||
'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
|
||||
'text-bolt-elements-textPrimary',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
<div className={classNames('i-ph:arrow-circle-up w-4 h-4', isUpdating ? 'animate-spin' : '')} />
|
||||
{isUpdating ? 'Updating...' : 'Auto Update'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowManualInstructions(!showManualInstructions)}
|
||||
className={classNames(
|
||||
'flex items-center gap-2 px-4 py-2 rounded-lg text-sm',
|
||||
'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
|
||||
'hover:bg-purple-500/10 hover:text-purple-500',
|
||||
'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
|
||||
'text-bolt-elements-textPrimary',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
<div className="i-ph:book-open w-4 h-4" />
|
||||
{showManualInstructions ? 'Hide Instructions' : 'Manual Update'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Manual Update Instructions */}
|
||||
<AnimatePresence>
|
||||
{showManualInstructions && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
className="space-y-6 text-bolt-elements-textSecondary"
|
||||
>
|
||||
<div className="p-4 rounded-lg bg-purple-500/5 dark:bg-purple-500/10 border border-purple-500/20">
|
||||
<p className="font-medium text-purple-500">
|
||||
Update available from {isLatestBranch ? 'main' : 'stable'} branch!
|
||||
</p>
|
||||
<div className="mt-2 space-y-1">
|
||||
<p>
|
||||
Current: {updateInfo.currentVersion} ({updateInfo.currentCommit})
|
||||
</p>
|
||||
<p>
|
||||
Latest: {updateInfo.latestVersion} ({updateInfo.latestCommit})
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-base font-medium text-bolt-elements-textPrimary mb-3">To update:</h4>
|
||||
<ol className="space-y-4">
|
||||
<li className="flex items-start gap-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 rounded-full bg-purple-500/10 text-purple-500 flex items-center justify-center">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-bolt-elements-textPrimary">Pull the latest changes:</p>
|
||||
<code className="mt-2 block p-3 rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] font-mono text-sm">
|
||||
git pull upstream {isLatestBranch ? 'main' : 'stable'}
|
||||
</code>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 rounded-full bg-purple-500/10 text-purple-500 flex items-center justify-center">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-bolt-elements-textPrimary">Install dependencies:</p>
|
||||
<code className="mt-2 block p-3 rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] font-mono text-sm">
|
||||
pnpm install
|
||||
</code>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 rounded-full bg-purple-500/10 text-purple-500 flex items-center justify-center">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-bolt-elements-textPrimary">Build the application:</p>
|
||||
<code className="mt-2 block p-3 rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] font-mono text-sm">
|
||||
pnpm build
|
||||
</code>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 rounded-full bg-purple-500/10 text-purple-500 flex items-center justify-center">
|
||||
4
|
||||
</div>
|
||||
<p className="font-medium text-bolt-elements-textPrimary">Restart the application</p>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Changelog */}
|
||||
{updateInfo.changelog && updateInfo.changelog.length > 0 && (
|
||||
<div className="mt-4">
|
||||
<button
|
||||
onClick={() => setShowChangelog(!showChangelog)}
|
||||
className={classNames(
|
||||
'flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm',
|
||||
'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
|
||||
'hover:bg-purple-500/10 hover:text-purple-500',
|
||||
'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
|
||||
'text-bolt-elements-textSecondary',
|
||||
'transition-colors duration-200',
|
||||
)}
|
||||
>
|
||||
<div className={`i-ph:${showChangelog ? 'caret-up' : 'caret-down'} w-4 h-4`} />
|
||||
{showChangelog ? 'Hide Changelog' : 'View Changelog'}
|
||||
</button>
|
||||
|
||||
<AnimatePresence>
|
||||
{showChangelog && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
className="mt-4 rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] border border-[#E5E5E5] dark:border-[#1A1A1A]"
|
||||
>
|
||||
<div className="max-h-[400px] overflow-y-auto">
|
||||
{categorizeChangelog(updateInfo.changelog).map(([category, messages]) => (
|
||||
<div key={category} className="border-b last:border-b-0 border-bolt-elements-borderColor">
|
||||
<div className="p-3 bg-[#EAEAEA] dark:bg-[#2A2A2A]">
|
||||
<h5 className="text-sm font-medium text-bolt-elements-textPrimary">
|
||||
{category}
|
||||
<span className="ml-2 text-xs text-bolt-elements-textSecondary">
|
||||
({messages.length})
|
||||
</span>
|
||||
</h5>
|
||||
</div>
|
||||
<div className="divide-y divide-bolt-elements-borderColor">
|
||||
{messages.map((message, index) => {
|
||||
const { title, description, prNumber } = parseCommitMessage(message);
|
||||
return (
|
||||
<div key={index} className="p-3 hover:bg-bolt-elements-bg-depth-4 transition-colors">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="mt-1.5 w-1.5 h-1.5 rounded-full bg-bolt-elements-textSecondary" />
|
||||
<div className="space-y-1 flex-1">
|
||||
<p className="text-sm font-medium text-bolt-elements-textPrimary">
|
||||
{title}
|
||||
{prNumber && (
|
||||
<span className="ml-2 text-xs text-bolt-elements-textSecondary">
|
||||
#{prNumber}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
{description && (
|
||||
<p className="text-xs text-bolt-elements-textSecondary">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Update Progress */}
|
||||
{isUpdating && updateInfo?.downloadProgress !== undefined && (
|
||||
<motion.div
|
||||
className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-bolt-elements-textPrimary">Downloading Update</span>
|
||||
<span className="text-sm text-bolt-elements-textSecondary">
|
||||
{Math.round(updateInfo.downloadProgress)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-purple-500 transition-all duration-300"
|
||||
style={{ width: `${updateInfo.downloadProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
{retryCount > 0 && <p className="text-sm text-yellow-500">Retry attempt {retryCount}/3...</p>}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Update Confirmation Dialog */}
|
||||
<DialogRoot open={showUpdateDialog} onOpenChange={setShowUpdateDialog}>
|
||||
<Dialog
|
||||
onClose={() => {
|
||||
setShowUpdateDialog(false);
|
||||
setHasUserRespondedToUpdate(true);
|
||||
logStore.logSystem('Update cancelled by user');
|
||||
}}
|
||||
>
|
||||
<div className="p-6 w-[500px]">
|
||||
<DialogTitle>Update Available</DialogTitle>
|
||||
<DialogDescription className="mt-2">
|
||||
A new version is available. Would you like to update now?
|
||||
</DialogDescription>
|
||||
|
||||
<div className="mt-3">
|
||||
<h3 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Update Information:</h3>
|
||||
<div
|
||||
className="bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-lg p-3 max-h-[300px] overflow-y-auto"
|
||||
style={{
|
||||
scrollbarWidth: 'thin',
|
||||
scrollbarColor: 'rgba(155, 155, 155, 0.5) transparent',
|
||||
}}
|
||||
>
|
||||
<div className="text-sm text-bolt-elements-textSecondary space-y-1.5">
|
||||
{updateChangelog.map((log, index) => (
|
||||
<div key={index} className="break-words leading-relaxed">
|
||||
{log.startsWith('Compare changes:') ? (
|
||||
<a
|
||||
href={log.split(': ')[1]}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-purple-500 hover:text-purple-600 dark:text-purple-400 dark:hover:text-purple-300"
|
||||
>
|
||||
View changes on GitHub
|
||||
</a>
|
||||
) : (
|
||||
log
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-end gap-3">
|
||||
<DialogButton
|
||||
type="secondary"
|
||||
onClick={() => {
|
||||
setShowUpdateDialog(false);
|
||||
setHasUserRespondedToUpdate(true);
|
||||
logStore.logSystem('Update cancelled by user');
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</DialogButton>
|
||||
<DialogButton
|
||||
type="primary"
|
||||
onClick={async () => {
|
||||
setShowUpdateDialog(false);
|
||||
setHasUserRespondedToUpdate(true);
|
||||
await initiateUpdate();
|
||||
}}
|
||||
>
|
||||
Update Now
|
||||
</DialogButton>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</DialogRoot>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdateTab;
|
||||
41
app/components/@settings/utils/animations.ts
Normal file
41
app/components/@settings/utils/animations.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import type { Variants } from 'framer-motion';
|
||||
|
||||
export const fadeIn: Variants = {
|
||||
initial: { opacity: 0 },
|
||||
animate: { opacity: 1 },
|
||||
exit: { opacity: 0 },
|
||||
};
|
||||
|
||||
export const slideIn: Variants = {
|
||||
initial: { opacity: 0, y: 20 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
exit: { opacity: 0, y: -20 },
|
||||
};
|
||||
|
||||
export const scaleIn: Variants = {
|
||||
initial: { opacity: 0, scale: 0.8 },
|
||||
animate: { opacity: 1, scale: 1 },
|
||||
exit: { opacity: 0, scale: 0.8 },
|
||||
};
|
||||
|
||||
export const tabAnimation: Variants = {
|
||||
initial: { opacity: 0, scale: 0.8, y: 20 },
|
||||
animate: { opacity: 1, scale: 1, y: 0 },
|
||||
exit: { opacity: 0, scale: 0.8, y: -20 },
|
||||
};
|
||||
|
||||
export const overlayAnimation: Variants = {
|
||||
initial: { opacity: 0 },
|
||||
animate: { opacity: 1 },
|
||||
exit: { opacity: 0 },
|
||||
};
|
||||
|
||||
export const modalAnimation: Variants = {
|
||||
initial: { opacity: 0, scale: 0.95, y: 20 },
|
||||
animate: { opacity: 1, scale: 1, y: 0 },
|
||||
exit: { opacity: 0, scale: 0.95, y: 20 },
|
||||
};
|
||||
|
||||
export const transition = {
|
||||
duration: 0.2,
|
||||
};
|
||||
89
app/components/@settings/utils/tab-helpers.ts
Normal file
89
app/components/@settings/utils/tab-helpers.ts
Normal file
@@ -0,0 +1,89 @@
|
||||
import type { TabType, TabVisibilityConfig } from '~/components/@settings/core/types';
|
||||
import { DEFAULT_TAB_CONFIG } from '~/components/@settings/core/constants';
|
||||
|
||||
export const getVisibleTabs = (
|
||||
tabConfiguration: { userTabs: TabVisibilityConfig[]; developerTabs?: TabVisibilityConfig[] },
|
||||
isDeveloperMode: boolean,
|
||||
notificationsEnabled: boolean,
|
||||
): TabVisibilityConfig[] => {
|
||||
if (!tabConfiguration?.userTabs || !Array.isArray(tabConfiguration.userTabs)) {
|
||||
console.warn('Invalid tab configuration, using defaults');
|
||||
return DEFAULT_TAB_CONFIG as TabVisibilityConfig[];
|
||||
}
|
||||
|
||||
// In developer mode, show ALL tabs without restrictions
|
||||
if (isDeveloperMode) {
|
||||
// Combine all unique tabs from both user and developer configurations
|
||||
const allTabs = new Set([
|
||||
...DEFAULT_TAB_CONFIG.map((tab) => tab.id),
|
||||
...tabConfiguration.userTabs.map((tab) => tab.id),
|
||||
...(tabConfiguration.developerTabs || []).map((tab) => tab.id),
|
||||
'task-manager' as TabType, // Always include task-manager in developer mode
|
||||
]);
|
||||
|
||||
// Create a complete tab list with all tabs visible
|
||||
const devTabs = Array.from(allTabs).map((tabId) => {
|
||||
// Try to find existing configuration for this tab
|
||||
const existingTab =
|
||||
tabConfiguration.developerTabs?.find((t) => t.id === tabId) ||
|
||||
tabConfiguration.userTabs?.find((t) => t.id === tabId) ||
|
||||
DEFAULT_TAB_CONFIG.find((t) => t.id === tabId);
|
||||
|
||||
return {
|
||||
id: tabId as TabType,
|
||||
visible: true,
|
||||
window: 'developer' as const,
|
||||
order: existingTab?.order || DEFAULT_TAB_CONFIG.findIndex((t) => t.id === tabId),
|
||||
} as TabVisibilityConfig;
|
||||
});
|
||||
|
||||
return devTabs.sort((a, b) => a.order - b.order);
|
||||
}
|
||||
|
||||
// In user mode, only show visible user tabs
|
||||
return tabConfiguration.userTabs
|
||||
.filter((tab) => {
|
||||
if (!tab || typeof tab.id !== 'string') {
|
||||
console.warn('Invalid tab entry:', tab);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Hide notifications tab if notifications are disabled
|
||||
if (tab.id === 'notifications' && !notificationsEnabled) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Always show task-manager in user mode if it's configured as visible
|
||||
if (tab.id === 'task-manager') {
|
||||
return tab.visible;
|
||||
}
|
||||
|
||||
// Only show tabs that are explicitly visible and assigned to the user window
|
||||
return tab.visible && tab.window === 'user';
|
||||
})
|
||||
.sort((a, b) => a.order - b.order);
|
||||
};
|
||||
|
||||
export const reorderTabs = (
|
||||
tabs: TabVisibilityConfig[],
|
||||
startIndex: number,
|
||||
endIndex: number,
|
||||
): TabVisibilityConfig[] => {
|
||||
const result = Array.from(tabs);
|
||||
const [removed] = result.splice(startIndex, 1);
|
||||
result.splice(endIndex, 0, removed);
|
||||
|
||||
// Update order property
|
||||
return result.map((tab, index) => ({
|
||||
...tab,
|
||||
order: index,
|
||||
}));
|
||||
};
|
||||
|
||||
export const resetToDefaultConfig = (isDeveloperMode: boolean): TabVisibilityConfig[] => {
|
||||
return DEFAULT_TAB_CONFIG.map((tab) => ({
|
||||
...tab,
|
||||
visible: isDeveloperMode ? true : tab.window === 'user',
|
||||
window: isDeveloperMode ? 'developer' : tab.window,
|
||||
})) as TabVisibilityConfig[];
|
||||
};
|
||||
Reference in New Issue
Block a user