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
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;
|
||||
Reference in New Issue
Block a user