mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-03-10 14:13:19 +00:00
fc3dd8c84c
# 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.
844 lines
33 KiB
TypeScript
844 lines
33 KiB
TypeScript
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;
|