localadministrator/slate
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge branch 'main' into stable

Browse Source
This commit is contained in:
KevIsDev
2025-05-12 01:31:47 +01:00
parent 332edd3d98 73442dde87
commit 0e31267078
186 changed files with 29231 additions and 6159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/@settings/core/ControlPanel.tsx
View File

@@ -29,7 +29,7 @@ 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 { 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';
@@ -413,10 +413,10 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
return (
<RadixDialog.Root open={open}>
<RadixDialog.Portal>
<div className="fixed inset-0 flex items-center justify-center z-[100]">
<div className="fixed inset-0 flex items-center justify-center z-[100] modern-scrollbar">
<RadixDialog.Overlay asChild>
<motion.div
className="absolute inset-0 bg-black/50 backdrop-blur-sm"
className="absolute inset-0 bg-black/70 dark:bg-black/80 backdrop-blur-sm"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}

595
app/components/@settings/tabs/connections/ConnectionDiagnostics.tsx Normal file
View File

@@ -0,0 +1,595 @@
import React, { useState } from 'react';
import { toast } from 'react-toastify';
import { Button } from '~/components/ui/Button';
import { Badge } from '~/components/ui/Badge';
import { classNames } from '~/utils/classNames';
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/Collapsible';
import { CodeBracketIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
// Helper function to safely parse JSON
const safeJsonParse = (item: string | null) => {
if (!item) {
return null;
}
try {
return JSON.parse(item);
} catch (e) {
console.error('Failed to parse JSON from localStorage:', e);
return null;
}
};
/**
* A diagnostics component to help troubleshoot connection issues
*/
export default function ConnectionDiagnostics() {
const [diagnosticResults, setDiagnosticResults] = useState<any>(null);
const [isRunning, setIsRunning] = useState(false);
const [showDetails, setShowDetails] = useState(false);
// Run diagnostics when requested
const runDiagnostics = async () => {
try {
setIsRunning(true);
setDiagnosticResults(null);
// Check browser-side storage
const localStorageChecks = {
githubConnection: localStorage.getItem('github_connection'),
netlifyConnection: localStorage.getItem('netlify_connection'),
vercelConnection: localStorage.getItem('vercel_connection'),
supabaseConnection: localStorage.getItem('supabase_connection'),
};
// Get diagnostic data from server
const response = await fetch('/api/system/diagnostics');
if (!response.ok) {
throw new Error(`Diagnostics API error: ${response.status}`);
}
const serverDiagnostics = await response.json();
// === GitHub Checks ===
const githubConnectionParsed = safeJsonParse(localStorageChecks.githubConnection);
const githubToken = githubConnectionParsed?.token;
const githubAuthHeaders = {
...(githubToken ? { Authorization: `Bearer ${githubToken}` } : {}),
'Content-Type': 'application/json',
};
console.log('Testing GitHub endpoints with token:', githubToken ? 'present' : 'missing');
const githubEndpoints = [
{ name: 'User', url: '/api/system/git-info?action=getUser' },
{ name: 'Repos', url: '/api/system/git-info?action=getRepos' },
{ name: 'Default', url: '/api/system/git-info' },
];
const githubResults = await Promise.all(
githubEndpoints.map(async (endpoint) => {
try {
const resp = await fetch(endpoint.url, { headers: githubAuthHeaders });
return { endpoint: endpoint.name, status: resp.status, ok: resp.ok };
} catch (error) {
return {
endpoint: endpoint.name,
error: error instanceof Error ? error.message : String(error),
ok: false,
};
}
}),
);
// === Netlify Checks ===
const netlifyConnectionParsed = safeJsonParse(localStorageChecks.netlifyConnection);
const netlifyToken = netlifyConnectionParsed?.token;
let netlifyUserCheck = null;
if (netlifyToken) {
try {
const netlifyResp = await fetch('https://api.netlify.com/api/v1/user', {
headers: { Authorization: `Bearer ${netlifyToken}` },
});
netlifyUserCheck = { status: netlifyResp.status, ok: netlifyResp.ok };
} catch (error) {
netlifyUserCheck = {
error: error instanceof Error ? error.message : String(error),
ok: false,
};
}
}
// === Vercel Checks ===
const vercelConnectionParsed = safeJsonParse(localStorageChecks.vercelConnection);
const vercelToken = vercelConnectionParsed?.token;
let vercelUserCheck = null;
if (vercelToken) {
try {
const vercelResp = await fetch('https://api.vercel.com/v2/user', {
headers: { Authorization: `Bearer ${vercelToken}` },
});
vercelUserCheck = { status: vercelResp.status, ok: vercelResp.ok };
} catch (error) {
vercelUserCheck = {
error: error instanceof Error ? error.message : String(error),
ok: false,
};
}
}
// === Supabase Checks ===
const supabaseConnectionParsed = safeJsonParse(localStorageChecks.supabaseConnection);
const supabaseUrl = supabaseConnectionParsed?.projectUrl;
const supabaseAnonKey = supabaseConnectionParsed?.anonKey;
let supabaseCheck = null;
if (supabaseUrl && supabaseAnonKey) {
supabaseCheck = { ok: true, status: 200, message: 'URL and Key present in localStorage' };
} else {
supabaseCheck = { ok: false, message: 'URL or Key missing in localStorage' };
}
// Compile results
const results = {
timestamp: new Date().toISOString(),
localStorage: {
hasGithubConnection: Boolean(localStorageChecks.githubConnection),
hasNetlifyConnection: Boolean(localStorageChecks.netlifyConnection),
hasVercelConnection: Boolean(localStorageChecks.vercelConnection),
hasSupabaseConnection: Boolean(localStorageChecks.supabaseConnection),
githubConnectionParsed,
netlifyConnectionParsed,
vercelConnectionParsed,
supabaseConnectionParsed,
},
apiEndpoints: {
github: githubResults,
netlify: netlifyUserCheck,
vercel: vercelUserCheck,
supabase: supabaseCheck,
},
serverDiagnostics,
};
setDiagnosticResults(results);
// Display simple results
if (results.localStorage.hasGithubConnection && results.apiEndpoints.github.some((r: { ok: boolean }) => !r.ok)) {
toast.error('GitHub API connections are failing. Try reconnecting.');
}
if (results.localStorage.hasNetlifyConnection && netlifyUserCheck && !netlifyUserCheck.ok) {
toast.error('Netlify API connection is failing. Try reconnecting.');
}
if (results.localStorage.hasVercelConnection && vercelUserCheck && !vercelUserCheck.ok) {
toast.error('Vercel API connection is failing. Try reconnecting.');
}
if (results.localStorage.hasSupabaseConnection && supabaseCheck && !supabaseCheck.ok) {
toast.warning('Supabase connection check failed or missing details. Verify settings.');
}
if (
!results.localStorage.hasGithubConnection &&
!results.localStorage.hasNetlifyConnection &&
!results.localStorage.hasVercelConnection &&
!results.localStorage.hasSupabaseConnection
) {
toast.info('No connection data found in browser storage.');
}
} catch (error) {
console.error('Diagnostics error:', error);
toast.error('Error running diagnostics');
setDiagnosticResults({ error: error instanceof Error ? error.message : String(error) });
} finally {
setIsRunning(false);
}
};
// Helper to reset GitHub connection
const resetGitHubConnection = () => {
try {
localStorage.removeItem('github_connection');
document.cookie = 'githubToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
document.cookie = 'githubUsername=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
document.cookie = 'git:github.com=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
toast.success('GitHub connection data cleared. Please refresh the page and reconnect.');
setDiagnosticResults(null);
} catch (error) {
console.error('Error clearing GitHub data:', error);
toast.error('Failed to clear GitHub connection data');
}
};
// Helper to reset Netlify connection
const resetNetlifyConnection = () => {
try {
localStorage.removeItem('netlify_connection');
document.cookie = 'netlifyToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
toast.success('Netlify connection data cleared. Please refresh the page and reconnect.');
setDiagnosticResults(null);
} catch (error) {
console.error('Error clearing Netlify data:', error);
toast.error('Failed to clear Netlify connection data');
}
};
// Helper to reset Vercel connection
const resetVercelConnection = () => {
try {
localStorage.removeItem('vercel_connection');
toast.success('Vercel connection data cleared. Please refresh the page and reconnect.');
setDiagnosticResults(null);
} catch (error) {
console.error('Error clearing Vercel data:', error);
toast.error('Failed to clear Vercel connection data');
}
};
// Helper to reset Supabase connection
const resetSupabaseConnection = () => {
try {
localStorage.removeItem('supabase_connection');
toast.success('Supabase connection data cleared. Please refresh the page and reconnect.');
setDiagnosticResults(null);
} catch (error) {
console.error('Error clearing Supabase data:', error);
toast.error('Failed to clear Supabase connection data');
}
};
return (
<div className="flex flex-col gap-6">
{/* Connection Status Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* GitHub Connection Card */}
<div className="p-4 rounded-lg bg-bolt-elements-background dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 dark:hover:border-bolt-elements-borderColorActive/70 transition-all duration-200 h-[180px] flex flex-col">
<div className="flex items-center gap-2">
<div className="i-ph:github-logo text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent w-4 h-4" />
<div className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
GitHub Connection
</div>
</div>
{diagnosticResults ? (
<>
<div className="flex items-center gap-2 mt-2">
<span
className={classNames(
'text-xl font-semibold',
diagnosticResults.localStorage.hasGithubConnection
? 'text-green-500 dark:text-green-400'
: 'text-red-500 dark:text-red-400',
)}
>
{diagnosticResults.localStorage.hasGithubConnection ? 'Connected' : 'Not Connected'}
</span>
</div>
{diagnosticResults.localStorage.hasGithubConnection && (
<>
<div className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
<div className="i-ph:user w-3.5 h-3.5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
User: {diagnosticResults.localStorage.githubConnectionParsed?.user?.login || 'N/A'}
</div>
<div className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
<div className="i-ph:check-circle w-3.5 h-3.5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
API Status:{' '}
<Badge
variant={
diagnosticResults.apiEndpoints.github.every((r: { ok: boolean }) => r.ok)
? 'default'
: 'destructive'
}
className="ml-1"
>
{diagnosticResults.apiEndpoints.github.every((r: { ok: boolean }) => r.ok) ? 'OK' : 'Failed'}
</Badge>
</div>
</>
)}
{!diagnosticResults.localStorage.hasGithubConnection && (
<Button
onClick={() => window.location.reload()}
variant="outline"
size="sm"
className="mt-auto self-start hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors"
>
<div className="i-ph:plug w-3.5 h-3.5 mr-1" />
Connect Now
</Button>
)}
</>
) : (
<div className="flex items-center justify-center h-full">
<div className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary flex items-center gap-2">
<div className="i-ph:info w-4 h-4" />
Run diagnostics to check connection status
</div>
</div>
)}
</div>
{/* Netlify Connection Card */}
<div className="p-4 rounded-lg bg-bolt-elements-background dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 dark:hover:border-bolt-elements-borderColorActive/70 transition-all duration-200 h-[180px] flex flex-col">
<div className="flex items-center gap-2">
<div className="i-bolt:netlify text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent w-4 h-4" />
<div className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
Netlify Connection
</div>
</div>
{diagnosticResults ? (
<>
<div className="flex items-center gap-2 mt-2">
<span
className={classNames(
'text-xl font-semibold',
diagnosticResults.localStorage.hasNetlifyConnection
? 'text-green-500 dark:text-green-400'
: 'text-red-500 dark:text-red-400',
)}
>
{diagnosticResults.localStorage.hasNetlifyConnection ? 'Connected' : 'Not Connected'}
</span>
</div>
{diagnosticResults.localStorage.hasNetlifyConnection && (
<>
<div className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
<div className="i-ph:user w-3.5 h-3.5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
User:{' '}
{diagnosticResults.localStorage.netlifyConnectionParsed?.user?.full_name ||
diagnosticResults.localStorage.netlifyConnectionParsed?.user?.email ||
'N/A'}
</div>
<div className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
<div className="i-ph:check-circle w-3.5 h-3.5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
API Status:{' '}
<Badge
variant={diagnosticResults.apiEndpoints.netlify?.ok ? 'default' : 'destructive'}
className="ml-1"
>
{diagnosticResults.apiEndpoints.netlify?.ok ? 'OK' : 'Failed'}
</Badge>
</div>
</>
)}
{!diagnosticResults.localStorage.hasNetlifyConnection && (
<Button
onClick={() => window.location.reload()}
variant="outline"
size="sm"
className="mt-auto self-start hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors"
>
<div className="i-ph:plug w-3.5 h-3.5 mr-1" />
Connect Now
</Button>
)}
</>
) : (
<div className="flex items-center justify-center h-full">
<div className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary flex items-center gap-2">
<div className="i-ph:info w-4 h-4" />
Run diagnostics to check connection status
</div>
</div>
)}
</div>
{/* Vercel Connection Card */}
<div className="p-4 rounded-lg bg-bolt-elements-background dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 dark:hover:border-bolt-elements-borderColorActive/70 transition-all duration-200 h-[180px] flex flex-col">
<div className="flex items-center gap-2">
<div className="i-si:vercel text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent w-4 h-4" />
<div className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
Vercel Connection
</div>
</div>
{diagnosticResults ? (
<>
<div className="flex items-center gap-2 mt-2">
<span
className={classNames(
'text-xl font-semibold',
diagnosticResults.localStorage.hasVercelConnection
? 'text-green-500 dark:text-green-400'
: 'text-red-500 dark:text-red-400',
)}
>
{diagnosticResults.localStorage.hasVercelConnection ? 'Connected' : 'Not Connected'}
</span>
</div>
{diagnosticResults.localStorage.hasVercelConnection && (
<>
<div className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
<div className="i-ph:user w-3.5 h-3.5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
User:{' '}
{diagnosticResults.localStorage.vercelConnectionParsed?.user?.username ||
diagnosticResults.localStorage.vercelConnectionParsed?.user?.user?.username ||
'N/A'}
</div>
<div className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
<div className="i-ph:check-circle w-3.5 h-3.5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
API Status:{' '}
<Badge
variant={diagnosticResults.apiEndpoints.vercel?.ok ? 'default' : 'destructive'}
className="ml-1"
>
{diagnosticResults.apiEndpoints.vercel?.ok ? 'OK' : 'Failed'}
</Badge>
</div>
</>
)}
{!diagnosticResults.localStorage.hasVercelConnection && (
<Button
onClick={() => window.location.reload()}
variant="outline"
size="sm"
className="mt-auto self-start hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors"
>
<div className="i-ph:plug w-3.5 h-3.5 mr-1" />
Connect Now
</Button>
)}
</>
) : (
<div className="flex items-center justify-center h-full">
<div className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary flex items-center gap-2">
<div className="i-ph:info w-4 h-4" />
Run diagnostics to check connection status
</div>
</div>
)}
</div>
{/* Supabase Connection Card */}
<div className="p-4 rounded-lg bg-bolt-elements-background dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 dark:hover:border-bolt-elements-borderColorActive/70 transition-all duration-200 h-[180px] flex flex-col">
<div className="flex items-center gap-2">
<div className="i-si:supabase text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent w-4 h-4" />
<div className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
Supabase Connection
</div>
</div>
{diagnosticResults ? (
<>
<div className="flex items-center gap-2 mt-2">
<span
className={classNames(
'text-xl font-semibold',
diagnosticResults.localStorage.hasSupabaseConnection
? 'text-green-500 dark:text-green-400'
: 'text-red-500 dark:text-red-400',
)}
>
{diagnosticResults.localStorage.hasSupabaseConnection ? 'Configured' : 'Not Configured'}
</span>
</div>
{diagnosticResults.localStorage.hasSupabaseConnection && (
<>
<div className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5 truncate">
<div className="i-ph:link w-3.5 h-3.5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent flex-shrink-0" />
Project URL: {diagnosticResults.localStorage.supabaseConnectionParsed?.projectUrl || 'N/A'}
</div>
<div className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
<div className="i-ph:check-circle w-3.5 h-3.5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
Config Status:{' '}
<Badge
variant={diagnosticResults.apiEndpoints.supabase?.ok ? 'default' : 'destructive'}
className="ml-1"
>
{diagnosticResults.apiEndpoints.supabase?.ok ? 'OK' : 'Check Failed'}
</Badge>
</div>
</>
)}
{!diagnosticResults.localStorage.hasSupabaseConnection && (
<Button
onClick={() => window.location.reload()}
variant="outline"
size="sm"
className="mt-auto self-start hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors"
>
<div className="i-ph:plug w-3.5 h-3.5 mr-1" />
Configure Now
</Button>
)}
</>
) : (
<div className="flex items-center justify-center h-full">
<div className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary flex items-center gap-2">
<div className="i-ph:info w-4 h-4" />
Run diagnostics to check connection status
</div>
</div>
)}
</div>
</div>
{/* Action Buttons */}
<div className="flex flex-wrap gap-4">
<Button
onClick={runDiagnostics}
disabled={isRunning}
variant="outline"
className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors"
>
{isRunning ? (
<div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
) : (
<div className="i-ph:activity w-4 h-4" />
)}
{isRunning ? 'Running Diagnostics...' : 'Run Diagnostics'}
</Button>
<Button
onClick={resetGitHubConnection}
disabled={isRunning || !diagnosticResults?.localStorage.hasGithubConnection}
variant="outline"
className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
<div className="i-ph:github-logo w-4 h-4" />
Reset GitHub
</Button>
<Button
onClick={resetNetlifyConnection}
disabled={isRunning || !diagnosticResults?.localStorage.hasNetlifyConnection}
variant="outline"
className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
<div className="i-si:netlify w-4 h-4" />
Reset Netlify
</Button>
<Button
onClick={resetVercelConnection}
disabled={isRunning || !diagnosticResults?.localStorage.hasVercelConnection}
variant="outline"
className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
<div className="i-si:vercel w-4 h-4" />
Reset Vercel
</Button>
<Button
onClick={resetSupabaseConnection}
disabled={isRunning || !diagnosticResults?.localStorage.hasSupabaseConnection}
variant="outline"
className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
<div className="i-si:supabase w-4 h-4" />
Reset Supabase
</Button>
</div>
{/* Details Panel */}
{diagnosticResults && (
<div className="mt-4">
<Collapsible open={showDetails} onOpenChange={setShowDetails} className="w-full">
<CollapsibleTrigger className="w-full">
<div className="flex items-center justify-between p-4 rounded-lg bg-bolt-elements-background dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 dark:hover:border-bolt-elements-borderColorActive/70 transition-all duration-200">
<div className="flex items-center gap-2">
<CodeBracketIcon className="w-4 h-4 text-blue-500" />
<span className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
Diagnostic Details
</span>
</div>
<ChevronDownIcon
className={classNames(
'w-4 h-4 transform transition-transform duration-200 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary',
showDetails ? 'rotate-180' : '',
)}
/>
</div>
</CollapsibleTrigger>
<CollapsibleContent className="overflow-hidden">
<div className="p-4 mt-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor">
<pre className="text-xs overflow-auto max-h-96 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
{JSON.stringify(diagnosticResults, null, 2)}
</pre>
</div>
</CollapsibleContent>
</Collapsible>
</div>
)}
</div>
);
}

163
app/components/@settings/tabs/connections/ConnectionsTab.tsx
View File

@@ -1,44 +1,183 @@
import { motion } from 'framer-motion';
import React, { Suspense } from 'react';
import React, { Suspense, useState } from 'react';
import { classNames } from '~/utils/classNames';
import ConnectionDiagnostics from './ConnectionDiagnostics';
import { Button } from '~/components/ui/Button';
import VercelConnection from './VercelConnection';
// Use React.lazy for dynamic imports
const GithubConnection = React.lazy(() => import('./GithubConnection'));
const GitHubConnection = React.lazy(() => import('./GithubConnection'));
const NetlifyConnection = React.lazy(() => import('./NetlifyConnection'));
// Loading fallback component
const LoadingFallback = () => (
<div className="p-4 bg-white dark:bg-[#0A0A0A] rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A]">
<div className="flex items-center gap-2 text-bolt-elements-textSecondary">
<div className="i-ph:spinner-gap w-5 h-5 animate-spin" />
<div className="p-4 bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor">
<div className="flex items-center justify-center gap-2 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
<div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
<span>Loading connection...</span>
</div>
</div>
);
export default function ConnectionsTab() {
const [isEnvVarsExpanded, setIsEnvVarsExpanded] = useState(false);
const [showDiagnostics, setShowDiagnostics] = useState(false);
return (
<div className="space-y-4">
<div className="space-y-6">
{/* Header */}
<motion.div
className="flex items-center gap-2 mb-2"
className="flex items-center justify-between gap-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>
<div className="flex items-center gap-2">
<div className="i-ph:plugs-connected w-5 h-5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
<h2 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
Connection Settings
</h2>
</div>
<Button
onClick={() => setShowDiagnostics(!showDiagnostics)}
variant="outline"
className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors"
>
{showDiagnostics ? (
<>
<div className="i-ph:eye-slash w-4 h-4" />
Hide Diagnostics
</>
) : (
<>
<div className="i-ph:wrench w-4 h-4" />
Troubleshoot Connections
</>
)}
</Button>
</motion.div>
<p className="text-sm text-bolt-elements-textSecondary mb-6">
<p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
Manage your external service connections and integrations
</p>
<div className="grid grid-cols-1 gap-4">
{/* Diagnostics Tool - Conditionally rendered */}
{showDiagnostics && <ConnectionDiagnostics />}
{/* Environment Variables Info - Collapsible */}
<motion.div
className="bg-bolt-elements-background dark:bg-bolt-elements-background rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
>
<div className="p-6">
<button
onClick={() => setIsEnvVarsExpanded(!isEnvVarsExpanded)}
className={classNames(
'w-full bg-transparent flex items-center justify-between',
'hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary',
'dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary',
'rounded-md p-2 -m-2 transition-colors',
)}
>
<div className="flex items-center gap-2">
<div className="i-ph:info w-5 h-5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
<h3 className="text-base font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
Environment Variables
</h3>
</div>
<div
className={classNames(
'i-ph:caret-down w-4 h-4 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary transition-transform',
isEnvVarsExpanded ? 'rotate-180' : '',
)}
/>
</button>
{isEnvVarsExpanded && (
<div className="mt-4">
<p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mb-2">
You can configure connections using environment variables in your{' '}
<code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 rounded">
.env.local
</code>{' '}
file:
</p>
<div className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 p-3 rounded-md text-xs font-mono overflow-x-auto">
<div className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
# GitHub Authentication
</div>
<div className="text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
VITE_GITHUB_ACCESS_TOKEN=your_token_here
</div>
<div className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
# Optional: Specify token type (defaults to 'classic' if not specified)
</div>
<div className="text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
VITE_GITHUB_TOKEN_TYPE=classic|fine-grained
</div>
<div className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mt-2">
# Netlify Authentication
</div>
<div className="text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
VITE_NETLIFY_ACCESS_TOKEN=your_token_here
</div>
</div>
<div className="mt-3 text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary space-y-1">
<p>
<span className="font-medium">Token types:</span>
</p>
<ul className="list-disc list-inside pl-2 space-y-1">
<li>
<span className="font-medium">classic</span> - Personal Access Token with{' '}
<code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 rounded">
repo, read:org, read:user
</code>{' '}
scopes
</li>
<li>
<span className="font-medium">fine-grained</span> - Fine-grained token with Repository and
Organization access
</li>
</ul>
<p className="mt-2">
When set, these variables will be used automatically without requiring manual connection.
</p>
</div>
</div>
)}
</div>
</motion.div>
<div className="grid grid-cols-1 gap-6">
<Suspense fallback={<LoadingFallback />}>
<GithubConnection />
<GitHubConnection />
</Suspense>
<Suspense fallback={<LoadingFallback />}>
<NetlifyConnection />
</Suspense>
<Suspense fallback={<LoadingFallback />}>
<VercelConnection />
</Suspense>
</div>
{/* Additional help text */}
<div className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 p-4 rounded-lg">
<p className="flex items-center gap-1 mb-2">
<span className="i-ph:lightbulb w-4 h-4 text-bolt-elements-icon-success dark:text-bolt-elements-icon-success" />
<span className="font-medium">Troubleshooting Tip:</span>
</p>
<p className="mb-2">
If you're having trouble with connections, try using the troubleshooting tool at the top of this page. It can
help diagnose and fix common connection issues.
</p>
<p>For persistent issues:</p>
<ol className="list-decimal list-inside pl-4 mt-1">
<li>Check your browser console for errors</li>
<li>Verify that your tokens have the correct permissions</li>
<li>Try clearing your browser cache and cookies</li>
<li>Ensure your browser allows third-party cookies if using integrations</li>
</ol>
</div>
</div>
);

1053
app/components/@settings/tabs/connections/GithubConnection.tsx
View File

File diff suppressed because it is too large Load Diff

894
app/components/@settings/tabs/connections/NetlifyConnection.tsx
View File

@@ -1,263 +1,731 @@
import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import React, { useState, useEffect } from 'react';
import { toast } from 'react-toastify';
import { useStore } from '@nanostores/react';
import { logStore } from '~/lib/stores/logs';
import { classNames } from '~/utils/classNames';
import { useStore } from '@nanostores/react';
import { netlifyConnection, updateNetlifyConnection, initializeNetlifyConnection } from '~/lib/stores/netlify';
import type { NetlifySite, NetlifyDeploy, NetlifyBuild, NetlifyUser } from '~/types/netlify';
import {
netlifyConnection,
isConnecting,
isFetchingStats,
updateNetlifyConnection,
fetchNetlifyStats,
} from '~/lib/stores/netlify';
import type { NetlifyUser } from '~/types/netlify';
CloudIcon,
BuildingLibraryIcon,
ClockIcon,
CodeBracketIcon,
CheckCircleIcon,
XCircleIcon,
TrashIcon,
ArrowPathIcon,
LockClosedIcon,
LockOpenIcon,
RocketLaunchIcon,
} from '@heroicons/react/24/outline';
import { Button } from '~/components/ui/Button';
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/Collapsible';
import { formatDistanceToNow } from 'date-fns';
import { Badge } from '~/components/ui/Badge';
// Add the Netlify logo SVG component at the top of the file
const NetlifyLogo = () => (
<svg viewBox="0 0 40 40" className="w-5 h-5">
<path
fill="currentColor"
d="M28.589 14.135l-.014-.006c-.008-.003-.016-.006-.023-.013a.11.11 0 0 1-.028-.093l.773-4.726 3.625 3.626-3.77 1.604a.083.083 0 0 1-.033.006h-.015c-.005-.003-.01-.007-.02-.017a1.716 1.716 0 0 0-.495-.381zm5.258-.288l3.876 3.876c.805.806 1.208 1.208 1.674 1.355a2 2 0 0 1 1.206 0c.466-.148.869-.55 1.674-1.356L8.73 28.73l2.349-3.643c.011-.018.022-.034.04-.047.025-.018.061-.01.091 0a2.434 2.434 0 0 0 1.638-.083c.027-.01.054-.017.075.002a.19.19 0 0 1 .028.032L21.95 38.05zM7.863 27.863L5.8 25.8l4.074-1.738a.084.084 0 0 1 .033-.007c.034 0 .054.034.072.065a2.91 2.91 0 0 0 .13.184l.013.016c.012.017.004.034-.008.05l-2.25 3.493zm-2.976-2.976l-2.61-2.61c-.444-.444-.766-.766-.99-1.043l7.936 1.646a.84.84 0 0 0 .03.005c.049.008.103.017.103.063 0 .05-.059.073-.109.092l-.023.01-4.337 1.837zM.831 19.892a2 2 0 0 1 .09-.495c.148-.466.55-.868 1.356-1.674l3.34-3.34a2175.525 2175.525 0 0 0 4.626 6.687c.027.036.057.076.026.106-.146.161-.292.337-.395.528a.16.16 0 0 1-.05.062c-.013.008-.027.005-.042.002H9.78L.831 19.892zm5.68-6.403l4.491-4.491c.422.185 1.958.834 3.332 1.414 1.04.44 1.988.84 2.286.97.03.012.057.024.07.054.008.018.004.041 0 .06a2.003 2.003 0 0 0 .523 1.828c.03.03 0 .073-.026.11l-.014.021-4.56 7.063c-.012.02-.023.037-.043.05-.024.015-.058.008-.086.001a2.274 2.274 0 0 0-.543-.074c-.164 0-.342.03-.522.063h-.001c-.02.003-.038.007-.054-.005a.21.21 0 0 1-.045-.051l-4.808-7.013zm5.398-5.398l5.814-5.814c.805-.805 1.208-1.208 1.674-1.355a2 2 0 0 1 1.206 0c.466.147.869.55 1.674 1.355l1.26 1.26-4.135 6.404a.155.155 0 0 1-.041.048c-.025.017-.06.01-.09 0a2.097 2.097 0 0 0-1.92.37c-.027.028-.067.012-.101-.003-.54-.235-4.74-2.01-5.341-2.265zm12.506-3.676l3.818 3.818-.92 5.698v.015a.135.135 0 0 1-.008.038c-.01.02-.03.024-.05.03a1.83 1.83 0 0 0-.548.273.154.154 0 0 0-.02.017c-.011.012-.022.023-.04.025a.114.114 0 0 1-.043-.007l-5.818-2.472-.011-.005c-.037-.015-.081-.033-.081-.071a2.198 2.198 0 0 0-.31-.915c-.028-.046-.059-.094-.035-.141l4.066-6.303zm-3.932 8.606l5.454 2.31c.03.014.063.027.076.058a.106.106 0 0 1 0 .057c-.016.08-.03.171-.03.263v.153c0 .038-.039.054-.075.069l-.011.004c-.864.369-12.13 5.173-12.147 5.173-.017 0-.035 0-.052-.017-.03-.03 0-.072.027-.11a.76.76 0 0 0 .014-.02l4.482-6.94.008-.012c.026-.042.056-.089.104-.089l.045.007c.102.014.192.027.283.027.68 0 1.31-.331 1.69-.897a.16.16 0 0 1 .034-.04c.027-.02.067-.01.098.004zm-6.246 9.185l12.28-5.237s.018 0 .035.017c.067.067.124.112.179.154l.027.017c.025.014.05.03.052.056 0 .01 0 .016-.002.025L25.756 23.7l-.004.026c-.007.05-.014.107-.061.107a1.729 1.729 0 0 0-1.373.847l-.005.008c-.014.023-.027.045-.05.057-.021.01-.048.006-.07.001l-9.793-2.02c-.01-.002-.152-.519-.163-.52z"
/>
</svg>
);
// Add new interface for site actions
interface SiteAction {
name: string;
icon: React.ComponentType<any>;
action: (siteId: string) => Promise<void>;
requiresConfirmation?: boolean;
variant?: 'default' | 'destructive' | 'outline';
}
export default function NetlifyConnection() {
const connection = useStore(netlifyConnection);
const connecting = useStore(isConnecting);
const fetchingStats = useStore(isFetchingStats);
const [isSitesExpanded, setIsSitesExpanded] = useState(false);
const [tokenInput, setTokenInput] = useState('');
const [fetchingStats, setFetchingStats] = useState(false);
const [sites, setSites] = useState<NetlifySite[]>([]);
const [deploys, setDeploys] = useState<NetlifyDeploy[]>([]);
const [builds, setBuilds] = useState<NetlifyBuild[]>([]);
const [deploymentCount, setDeploymentCount] = useState(0);
const [lastUpdated, setLastUpdated] = useState('');
const [isStatsOpen, setIsStatsOpen] = useState(false);
const [activeSiteIndex, setActiveSiteIndex] = useState(0);
const [isActionLoading, setIsActionLoading] = useState(false);
const [isConnecting, setIsConnecting] = useState(false);
useEffect(() => {
const fetchSites = async () => {
if (connection.user && connection.token) {
await fetchNetlifyStats(connection.token);
}
};
fetchSites();
}, [connection.user, connection.token]);
// Add site actions
const siteActions: SiteAction[] = [
{
name: 'Clear Cache',
icon: ArrowPathIcon,
action: async (siteId: string) => {
try {
const response = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}/cache`, {
method: 'POST',
headers: {
Authorization: `Bearer ${connection.token}`,
},
});
const handleConnect = async (event: React.FormEvent) => {
event.preventDefault();
isConnecting.set(true);
if (!response.ok) {
throw new Error('Failed to clear cache');
}
toast.success('Site cache cleared successfully');
} catch (err: unknown) {
const error = err instanceof Error ? err.message : 'Unknown error';
toast.error(`Failed to clear site cache: ${error}`);
}
},
},
{
name: 'Delete Site',
icon: TrashIcon,
action: async (siteId: string) => {
try {
const response = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}`, {
method: 'DELETE',
headers: {
Authorization: `Bearer ${connection.token}`,
},
});
if (!response.ok) {
throw new Error('Failed to delete site');
}
toast.success('Site deleted successfully');
fetchNetlifyStats(connection.token);
} catch (err: unknown) {
const error = err instanceof Error ? err.message : 'Unknown error';
toast.error(`Failed to delete site: ${error}`);
}
},
requiresConfirmation: true,
variant: 'destructive',
},
];
// Add deploy management functions
const handleDeploy = async (siteId: string, deployId: string, action: 'lock' | 'unlock' | 'publish') => {
try {
const response = await fetch('https://api.netlify.com/api/v1/user', {
setIsActionLoading(true);
const endpoint =
action === 'publish'
? `https://api.netlify.com/api/v1/sites/${siteId}/deploys/${deployId}/restore`
: `https://api.netlify.com/api/v1/deploys/${deployId}/${action}`;
const response = await fetch(endpoint, {
method: 'POST',
headers: {
Authorization: `Bearer ${connection.token}`,
'Content-Type': 'application/json',
},
});
if (!response.ok) {
throw new Error('Invalid token or unauthorized');
throw new Error(`Failed to ${action} deploy`);
}
toast.success(`Deploy ${action}ed successfully`);
fetchNetlifyStats(connection.token);
} catch (err: unknown) {
const error = err instanceof Error ? err.message : 'Unknown error';
toast.error(`Failed to ${action} deploy: ${error}`);
} finally {
setIsActionLoading(false);
}
};
useEffect(() => {
// Initialize connection with environment token if available
initializeNetlifyConnection();
}, []);
useEffect(() => {
// Check if we have a connection with a token but no stats
if (connection.user && connection.token && (!connection.stats || !connection.stats.sites)) {
fetchNetlifyStats(connection.token);
}
// Update local state from connection
if (connection.stats) {
setSites(connection.stats.sites || []);
setDeploys(connection.stats.deploys || []);
setBuilds(connection.stats.builds || []);
setDeploymentCount(connection.stats.deploys?.length || 0);
setLastUpdated(connection.stats.lastDeployTime || '');
}
}, [connection]);
const handleConnect = async () => {
if (!tokenInput) {
toast.error('Please enter a Netlify API token');
return;
}
setIsConnecting(true);
try {
const response = await fetch('https://api.netlify.com/api/v1/user', {
headers: {
Authorization: `Bearer ${tokenInput}`,
},
});
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const userData = (await response.json()) as NetlifyUser;
// Update the connection store
updateNetlifyConnection({
user: userData,
token: connection.token,
token: tokenInput,
});
await fetchNetlifyStats(connection.token);
toast.success('Successfully connected to Netlify');
toast.success('Connected to Netlify successfully');
// Fetch stats after successful connection
fetchNetlifyStats(tokenInput);
} catch (error) {
console.error('Auth error:', error);
logStore.logError('Failed to authenticate with Netlify', { error });
toast.error('Failed to connect to Netlify');
updateNetlifyConnection({ user: null, token: '' });
console.error('Error connecting to Netlify:', error);
toast.error(`Failed to connect to Netlify: ${error instanceof Error ? error.message : 'Unknown error'}`);
} finally {
isConnecting.set(false);
setIsConnecting(false);
setTokenInput('');
}
};
const handleDisconnect = () => {
// Clear from localStorage
localStorage.removeItem('netlify_connection');
// Remove cookies
document.cookie = 'netlifyToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
// Update the store
updateNetlifyConnection({ user: null, token: '' });
toast.success('Disconnected from Netlify');
};
const fetchNetlifyStats = async (token: string) => {
setFetchingStats(true);
try {
// Fetch sites
const sitesResponse = await fetch('https://api.netlify.com/api/v1/sites', {
headers: {
Authorization: `Bearer ${token}`,
},
});
if (!sitesResponse.ok) {
throw new Error(`Failed to fetch sites: ${sitesResponse.statusText}`);
}
const sitesData = (await sitesResponse.json()) as NetlifySite[];
setSites(sitesData);
// Fetch recent deploys for the first site (if any)
let deploysData: NetlifyDeploy[] = [];
let buildsData: NetlifyBuild[] = [];
let lastDeployTime = '';
if (sitesData && sitesData.length > 0) {
const firstSite = sitesData[0];
// Fetch deploys
const deploysResponse = await fetch(`https://api.netlify.com/api/v1/sites/${firstSite.id}/deploys`, {
headers: {
Authorization: `Bearer ${token}`,
},
});
if (deploysResponse.ok) {
deploysData = (await deploysResponse.json()) as NetlifyDeploy[];
setDeploys(deploysData);
setDeploymentCount(deploysData.length);
// Get the latest deploy time
if (deploysData.length > 0) {
lastDeployTime = deploysData[0].created_at;
setLastUpdated(lastDeployTime);
// Fetch builds for the site
const buildsResponse = await fetch(`https://api.netlify.com/api/v1/sites/${firstSite.id}/builds`, {
headers: {
Authorization: `Bearer ${token}`,
},
});
if (buildsResponse.ok) {
buildsData = (await buildsResponse.json()) as NetlifyBuild[];
setBuilds(buildsData);
}
}
}
}
// Update the stats in the store
updateNetlifyConnection({
stats: {
sites: sitesData,
deploys: deploysData,
builds: buildsData,
lastDeployTime,
totalSites: sitesData.length,
},
});
toast.success('Netlify stats updated');
} catch (error) {
console.error('Error fetching Netlify stats:', error);
toast.error(`Failed to fetch Netlify stats: ${error instanceof Error ? error.message : 'Unknown error'}`);
} finally {
setFetchingStats(false);
}
};
const renderStats = () => {
if (!connection.user || !connection.stats) {
return null;
}
return (
<div className="mt-6">
<Collapsible open={isStatsOpen} onOpenChange={setIsStatsOpen}>
<CollapsibleTrigger asChild>
<div className="flex items-center justify-between p-4 rounded-lg bg-bolt-elements-background dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 dark:hover:border-bolt-elements-borderColorActive/70 transition-all duration-200">
<div className="flex items-center gap-2">
<div className="i-ph:chart-bar w-4 h-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
<span className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
Netlify Stats
</span>
</div>
<div
className={classNames(
'i-ph:caret-down w-4 h-4 transform transition-transform duration-200 text-bolt-elements-textSecondary',
isStatsOpen ? 'rotate-180' : '',
)}
/>
</div>
</CollapsibleTrigger>
<CollapsibleContent className="overflow-hidden">
<div className="space-y-4 mt-4">
<div className="flex flex-wrap items-center gap-4">
<Badge
variant="outline"
className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
>
<BuildingLibraryIcon className="h-4 w-4 text-bolt-elements-item-contentAccent" />
<span>{connection.stats.totalSites} Sites</span>
</Badge>
<Badge
variant="outline"
className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
>
<RocketLaunchIcon className="h-4 w-4 text-bolt-elements-item-contentAccent" />
<span>{deploymentCount} Deployments</span>
</Badge>
{lastUpdated && (
<Badge
variant="outline"
className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
>
<ClockIcon className="h-4 w-4 text-bolt-elements-item-contentAccent" />
<span>Updated {formatDistanceToNow(new Date(lastUpdated))} ago</span>
</Badge>
)}
</div>
{sites.length > 0 && (
<div className="mt-4 space-y-4">
<div className="bg-bolt-elements-background dark:bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg p-4">
<div className="flex items-center justify-between mb-4">
<h4 className="text-sm font-medium flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
<BuildingLibraryIcon className="h-4 w-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
Your Sites
</h4>
<Button
variant="outline"
size="sm"
onClick={() => fetchNetlifyStats(connection.token)}
disabled={fetchingStats}
className="flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive/10"
>
<ArrowPathIcon
className={classNames(
'h-4 w-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent',
{ 'animate-spin': fetchingStats },
)}
/>
{fetchingStats ? 'Refreshing...' : 'Refresh'}
</Button>
</div>
<div className="space-y-3">
{sites.map((site, index) => (
<div
key={site.id}
className={classNames(
'bg-bolt-elements-background dark:bg-bolt-elements-background-depth-1 border rounded-lg p-4 transition-all',
activeSiteIndex === index
? 'border-bolt-elements-item-contentAccent bg-bolt-elements-item-backgroundActive/10'
: 'border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70',
)}
onClick={() => {
setActiveSiteIndex(index);
}}
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<CloudIcon className="h-5 w-5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
<span className="font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
{site.name}
</span>
</div>
<div className="flex items-center gap-2">
<Badge
variant={site.published_deploy?.state === 'ready' ? 'default' : 'destructive'}
className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
>
{site.published_deploy?.state === 'ready' ? (
<CheckCircleIcon className="h-4 w-4 text-green-500" />
) : (
<XCircleIcon className="h-4 w-4 text-red-500" />
)}
<span className="text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
{site.published_deploy?.state || 'Unknown'}
</span>
</Badge>
</div>
</div>
<div className="mt-3 flex items-center gap-2">
<a
href={site.ssl_url || site.url}
target="_blank"
rel="noopener noreferrer"
className="text-sm flex items-center gap-1 transition-colors text-bolt-elements-link-text hover:text-bolt-elements-link-textHover dark:text-white dark:hover:text-bolt-elements-link-textHover"
onClick={(e) => e.stopPropagation()}
>
<CloudIcon className="h-3 w-3 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
<span className="underline decoration-1 underline-offset-2">
{site.ssl_url || site.url}
</span>
</a>
</div>
{activeSiteIndex === index && (
<>
<div className="mt-4 pt-3 border-t border-bolt-elements-borderColor">
<div className="flex items-center gap-2">
{siteActions.map((action) => (
<Button
key={action.name}
variant={action.variant || 'outline'}
size="sm"
onClick={async (e) => {
e.stopPropagation();
if (action.requiresConfirmation) {
if (!confirm(`Are you sure you want to ${action.name.toLowerCase()}?`)) {
return;
}
}
setIsActionLoading(true);
await action.action(site.id);
setIsActionLoading(false);
}}
disabled={isActionLoading}
className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
>
<action.icon className="h-4 w-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
{action.name}
</Button>
))}
</div>
</div>
{site.published_deploy && (
<div className="mt-3 text-sm">
<div className="flex items-center gap-1">
<ClockIcon className="h-4 w-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
<span className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
Published {formatDistanceToNow(new Date(site.published_deploy.published_at))} ago
</span>
</div>
{site.published_deploy.branch && (
<div className="flex items-center gap-1 mt-1">
<CodeBracketIcon className="h-4 w-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
<span className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
Branch: {site.published_deploy.branch}
</span>
</div>
)}
</div>
)}
</>
)}
</div>
))}
</div>
</div>
{activeSiteIndex !== -1 && deploys.length > 0 && (
<div className="bg-bolt-elements-background dark:bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg p-4">
<div className="flex items-center justify-between mb-3">
<h4 className="text-sm font-medium flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
<BuildingLibraryIcon className="h-4 w-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
Recent Deployments
</h4>
</div>
<div className="space-y-2">
{deploys.map((deploy) => (
<div
key={deploy.id}
className="bg-bolt-elements-background dark:bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg p-3"
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Badge
variant={
deploy.state === 'ready'
? 'default'
: deploy.state === 'error'
? 'destructive'
: 'outline'
}
className="flex items-center gap-1"
>
{deploy.state === 'ready' ? (
<CheckCircleIcon className="h-4 w-4 text-green-500" />
) : deploy.state === 'error' ? (
<XCircleIcon className="h-4 w-4 text-red-500" />
) : (
<BuildingLibraryIcon className="h-4 w-4 text-bolt-elements-item-contentAccent" />
)}
<span className="text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
{deploy.state}
</span>
</Badge>
</div>
<span className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
{formatDistanceToNow(new Date(deploy.created_at))} ago
</span>
</div>
{deploy.branch && (
<div className="mt-2 text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary flex items-center gap-1">
<CodeBracketIcon className="h-3 w-3 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
<span className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
Branch: {deploy.branch}
</span>
</div>
)}
{deploy.deploy_url && (
<div className="mt-2 text-xs">
<a
href={deploy.deploy_url}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-1 transition-colors text-bolt-elements-link-text hover:text-bolt-elements-link-textHover dark:text-white dark:hover:text-bolt-elements-link-textHover"
onClick={(e) => e.stopPropagation()}
>
<CloudIcon className="h-3 w-3 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
<span className="underline decoration-1 underline-offset-2">{deploy.deploy_url}</span>
</a>
</div>
)}
<div className="flex items-center gap-2 mt-2">
<Button
variant="outline"
size="sm"
onClick={() => handleDeploy(sites[activeSiteIndex].id, deploy.id, 'publish')}
disabled={isActionLoading}
className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
>
<BuildingLibraryIcon className="h-4 w-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
Publish
</Button>
{deploy.state === 'ready' ? (
<Button
variant="outline"
size="sm"
onClick={() => handleDeploy(sites[activeSiteIndex].id, deploy.id, 'lock')}
disabled={isActionLoading}
className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
>
<LockClosedIcon className="h-4 w-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
Lock
</Button>
) : (
<Button
variant="outline"
size="sm"
onClick={() => handleDeploy(sites[activeSiteIndex].id, deploy.id, 'unlock')}
disabled={isActionLoading}
className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
>
<LockOpenIcon className="h-4 w-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
Unlock
</Button>
)}
</div>
</div>
))}
</div>
</div>
)}
{activeSiteIndex !== -1 && builds.length > 0 && (
<div className="bg-bolt-elements-background dark:bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg p-4">
<div className="flex items-center justify-between mb-3">
<h4 className="text-sm font-medium flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
<CodeBracketIcon className="h-4 w-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
Recent Builds
</h4>
</div>
<div className="space-y-2">
{builds.map((build) => (
<div
key={build.id}
className="bg-bolt-elements-background dark:bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg p-3"
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Badge
variant={
build.done && !build.error ? 'default' : build.error ? 'destructive' : 'outline'
}
className="flex items-center gap-1"
>
{build.done && !build.error ? (
<CheckCircleIcon className="h-4 w-4" />
) : build.error ? (
<XCircleIcon className="h-4 w-4" />
) : (
<CodeBracketIcon className="h-4 w-4" />
)}
<span className="text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
{build.done ? (build.error ? 'Failed' : 'Completed') : 'In Progress'}
</span>
</Badge>
</div>
<span className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
{formatDistanceToNow(new Date(build.created_at))} ago
</span>
</div>
{build.error && (
<div className="mt-2 text-xs text-bolt-elements-textDestructive dark:text-bolt-elements-textDestructive flex items-center gap-1">
<XCircleIcon className="h-3 w-3 text-bolt-elements-textDestructive dark:text-bolt-elements-textDestructive" />
Error: {build.error}
</div>
)}
</div>
))}
</div>
</div>
)}
</div>
)}
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
return (
<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.3 }}
>
<div className="p-6 space-y-6">
<div className="space-y-6 bg-bolt-elements-background dark:bg-bolt-elements-background border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg">
<div className="p-6">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<img
className="w-5 h-5"
height="24"
width="24"
crossOrigin="anonymous"
src="https://cdn.simpleicons.org/netlify"
/>
<h3 className="text-base font-medium text-bolt-elements-textPrimary">Netlify Connection</h3>
<div className="text-[#00AD9F]">
<NetlifyLogo />
</div>
<h2 className="text-lg font-medium text-bolt-elements-textPrimary">Netlify Connection</h2>
</div>
</div>
{!connection.user ? (
<div className="space-y-4">
<div>
<label className="block text-sm text-bolt-elements-textSecondary mb-2">Personal Access Token</label>
<input
type="password"
value={connection.token}
onChange={(e) => updateNetlifyConnection({ ...connection, token: e.target.value })}
disabled={connecting}
placeholder="Enter your Netlify personal access 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-[#00AD9F]',
'disabled:opacity-50',
)}
/>
<div className="mt-2 text-sm text-bolt-elements-textSecondary">
<a
href="https://app.netlify.com/user/applications#personal-access-tokens"
target="_blank"
rel="noopener noreferrer"
className="text-[#00AD9F] hover:underline inline-flex items-center gap-1"
>
Get your token
<div className="i-ph:arrow-square-out w-4 h-4" />
</a>
</div>
</div>
<button
onClick={handleConnect}
disabled={connecting || !connection.token}
<div className="mt-4">
<label className="block text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mb-2">
API Token
</label>
<input
type="password"
value={tokenInput}
onChange={(e) => setTokenInput(e.target.value)}
placeholder="Enter your Netlify API token"
className={classNames(
'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
'bg-[#00AD9F] text-white',
'hover:bg-[#00968A]',
'disabled:opacity-50 disabled:cursor-not-allowed',
'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-bolt-elements-borderColorActive',
'disabled:opacity-50',
)}
>
{connecting ? (
<>
<div className="i-ph:spinner-gap animate-spin" />
Connecting...
</>
) : (
<>
<div className="i-ph:plug-charging w-4 h-4" />
Connect
</>
)}
</button>
/>
<div className="mt-2 text-sm text-bolt-elements-textSecondary">
<a
href="https://app.netlify.com/user/applications#personal-access-tokens"
target="_blank"
rel="noopener noreferrer"
className="text-bolt-elements-borderColorActive hover:underline inline-flex items-center gap-1"
>
Get your token
<div className="i-ph:arrow-square-out w-4 h-4" />
</a>
</div>
<div className="flex items-center justify-between mt-4">
<button
onClick={handleConnect}
disabled={isConnecting || !tokenInput}
className={classNames(
'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
'bg-[#303030] text-white',
'hover:bg-[#5E41D0] hover:text-white',
'disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200',
'transform active:scale-95',
)}
>
{isConnecting ? (
<>
<div className="i-ph:spinner-gap animate-spin" />
Connecting...
</>
) : (
<>
<div className="i-ph:plug-charging w-4 h-4" />
Connect
</>
)}
</button>
</div>
</div>
) : (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<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 w-4 h-4" />
Disconnect
</button>
<span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
<div className="i-ph:check-circle w-4 h-4 text-green-500" />
Connected to Netlify
</span>
</div>
<div className="flex flex-col w-full gap-4 mt-4">
<div className="flex items-center gap-3">
<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 w-4 h-4" />
Disconnect
</button>
<span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
<div className="i-ph:check-circle w-4 h-4 text-green-500" />
Connected to Netlify
</span>
</div>
<div className="flex items-center gap-4 p-4 bg-[#F8F8F8] dark:bg-[#1A1A1A] rounded-lg">
<img
src={connection.user.avatar_url}
referrerPolicy="no-referrer"
crossOrigin="anonymous"
alt={connection.user.full_name}
className="w-12 h-12 rounded-full border-2 border-[#00AD9F]"
/>
<div>
<h4 className="text-sm font-medium text-bolt-elements-textPrimary">{connection.user.full_name}</h4>
<p className="text-sm text-bolt-elements-textSecondary">{connection.user.email}</p>
</div>
</div>
{fetchingStats ? (
<div className="flex items-center gap-2 text-sm text-bolt-elements-textSecondary">
<div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
Fetching Netlify sites...
</div>
) : (
<div>
<button
onClick={() => setIsSitesExpanded(!isSitesExpanded)}
className="w-full bg-transparent text-left text-sm font-medium text-bolt-elements-textPrimary mb-3 flex items-center gap-2"
>
<div className="i-ph:buildings w-4 h-4" />
Your Sites ({connection.stats?.totalSites || 0})
<div
className={classNames(
'i-ph:caret-down w-4 h-4 ml-auto transition-transform',
isSitesExpanded ? 'rotate-180' : '',
)}
/>
</button>
{isSitesExpanded && connection.stats?.sites?.length ? (
<div className="grid gap-3">
{connection.stats.sites.map((site) => (
<a
key={site.id}
href={site.admin_url}
target="_blank"
rel="noopener noreferrer"
className="block p-4 rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-[#00AD9F] dark:hover:border-[#00AD9F] 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:globe w-4 h-4 text-[#00AD9F]" />
{site.name}
</h5>
<div className="flex items-center gap-2 mt-2 text-xs text-bolt-elements-textSecondary">
<a
href={site.url}
target="_blank"
rel="noopener noreferrer"
className="hover:text-[#00AD9F]"
>
{site.url}
</a>
{site.published_deploy && (
<>
<span>•</span>
<span className="flex items-center gap-1">
<div className="i-ph:clock w-3 h-3" />
{new Date(site.published_deploy.published_at).toLocaleDateString()}
</span>
</>
)}
</div>
</div>
{site.build_settings?.provider && (
<div className="text-xs text-bolt-elements-textSecondary px-2 py-1 rounded-md bg-[#F0F0F0] dark:bg-[#252525]">
<span className="flex items-center gap-1">
<div className="i-ph:git-branch w-3 h-3" />
{site.build_settings.provider}
</span>
</div>
)}
</div>
</a>
))}
</div>
) : isSitesExpanded ? (
<div className="text-sm text-bolt-elements-textSecondary flex items-center gap-2">
<div className="i-ph:info w-4 h-4" />
No sites found in your Netlify account
</div>
) : null}
</div>
)}
{renderStats()}
</div>
)}
</div>
</motion.div>
</div>
);
}

290
app/components/@settings/tabs/connections/VercelConnection.tsx Normal file
View File

@@ -0,0 +1,290 @@
import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { toast } from 'react-toastify';
import { useStore } from '@nanostores/react';
import { logStore } from '~/lib/stores/logs';
import { classNames } from '~/utils/classNames';
import {
vercelConnection,
isConnecting,
isFetchingStats,
updateVercelConnection,
fetchVercelStats,
} from '~/lib/stores/vercel';
export default function VercelConnection() {
const connection = useStore(vercelConnection);
const connecting = useStore(isConnecting);
const fetchingStats = useStore(isFetchingStats);
const [isProjectsExpanded, setIsProjectsExpanded] = useState(false);
useEffect(() => {
const fetchProjects = async () => {
if (connection.user && connection.token) {
await fetchVercelStats(connection.token);
}
};
fetchProjects();
}, [connection.user, connection.token]);
const handleConnect = async (event: React.FormEvent) => {
event.preventDefault();
isConnecting.set(true);
try {
const response = await fetch('https://api.vercel.com/v2/user', {
headers: {
Authorization: `Bearer ${connection.token}`,
'Content-Type': 'application/json',
},
});
if (!response.ok) {
throw new Error('Invalid token or unauthorized');
}
const userData = (await response.json()) as any;
updateVercelConnection({
user: userData.user || userData, // Handle both possible structures
token: connection.token,
});
await fetchVercelStats(connection.token);
toast.success('Successfully connected to Vercel');
} catch (error) {
console.error('Auth error:', error);
logStore.logError('Failed to authenticate with Vercel', { error });
toast.error('Failed to connect to Vercel');
updateVercelConnection({ user: null, token: '' });
} finally {
isConnecting.set(false);
}
};
const handleDisconnect = () => {
updateVercelConnection({ user: null, token: '' });
toast.success('Disconnected from Vercel');
};
console.log('connection', connection);
return (
<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.3 }}
>
<div className="p-6 space-y-6">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<img
className="w-5 h-5 dark:invert"
height="24"
width="24"
crossOrigin="anonymous"
src={`https://cdn.simpleicons.org/vercel/black`}
/>
<h3 className="text-base font-medium text-bolt-elements-textPrimary">Vercel Connection</h3>
</div>
</div>
{!connection.user ? (
<div className="space-y-4">
<div>
<label className="block text-sm text-bolt-elements-textSecondary mb-2">Personal Access Token</label>
<input
type="password"
value={connection.token}
onChange={(e) => updateVercelConnection({ ...connection, token: e.target.value })}
disabled={connecting}
placeholder="Enter your Vercel personal access 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-bolt-elements-borderColorActive',
'disabled:opacity-50',
)}
/>
<div className="mt-2 text-sm text-bolt-elements-textSecondary">
<a
href="https://vercel.com/account/tokens"
target="_blank"
rel="noopener noreferrer"
className="text-bolt-elements-borderColorActive hover:underline inline-flex items-center gap-1"
>
Get your token
<div className="i-ph:arrow-square-out w-4 h-4" />
</a>
</div>
</div>
<button
onClick={handleConnect}
disabled={connecting || !connection.token}
className={classNames(
'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
'bg-[#303030] text-white',
'hover:bg-[#5E41D0] hover:text-white',
'disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200',
'transform active:scale-95',
)}
>
{connecting ? (
<>
<div className="i-ph:spinner-gap animate-spin" />
Connecting...
</>
) : (
<>
<div className="i-ph:plug-charging w-4 h-4" />
Connect
</>
)}
</button>
</div>
) : (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<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 w-4 h-4" />
Disconnect
</button>
<span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
<div className="i-ph:check-circle w-4 h-4 text-green-500" />
Connected to Vercel
</span>
</div>
</div>
<div className="flex items-center gap-4 p-4 bg-[#F8F8F8] dark:bg-[#1A1A1A] rounded-lg">
{/* Debug output */}
<pre className="hidden">{JSON.stringify(connection.user, null, 2)}</pre>
<img
src={`https://vercel.com/api/www/avatar?u=${connection.user?.username || connection.user?.user?.username}`}
referrerPolicy="no-referrer"
crossOrigin="anonymous"
alt="User Avatar"
className="w-12 h-12 rounded-full border-2 border-bolt-elements-borderColorActive"
/>
<div>
<h4 className="text-sm font-medium text-bolt-elements-textPrimary">
{connection.user?.username || connection.user?.user?.username || 'Vercel User'}
</h4>
<p className="text-sm text-bolt-elements-textSecondary">
{connection.user?.email || connection.user?.user?.email || 'No email available'}
</p>
</div>
</div>
{fetchingStats ? (
<div className="flex items-center gap-2 text-sm text-bolt-elements-textSecondary">
<div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
Fetching Vercel projects...
</div>
) : (
<div>
<button
onClick={() => setIsProjectsExpanded(!isProjectsExpanded)}
className="w-full bg-transparent text-left text-sm font-medium text-bolt-elements-textPrimary mb-3 flex items-center gap-2"
>
<div className="i-ph:buildings w-4 h-4" />
Your Projects ({connection.stats?.totalProjects || 0})
<div
className={classNames(
'i-ph:caret-down w-4 h-4 ml-auto transition-transform',
isProjectsExpanded ? 'rotate-180' : '',
)}
/>
</button>
{isProjectsExpanded && connection.stats?.projects?.length ? (
<div className="grid gap-3">
{connection.stats.projects.map((project) => (
<a
key={project.id}
href={`https://vercel.com/dashboard/${project.id}`}
target="_blank"
rel="noopener noreferrer"
className="block p-4 rounded-lg border border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive 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:globe w-4 h-4 text-bolt-elements-borderColorActive" />
{project.name}
</h5>
<div className="flex items-center gap-2 mt-2 text-xs text-bolt-elements-textSecondary">
{project.targets?.production?.alias && project.targets.production.alias.length > 0 ? (
<>
<a
href={`https://${project.targets.production.alias.find((a: string) => a.endsWith('.vercel.app') && !a.includes('-projects.vercel.app')) || project.targets.production.alias[0]}`}
target="_blank"
rel="noopener noreferrer"
className="hover:text-bolt-elements-borderColorActive"
>
{project.targets.production.alias.find(
(a: string) => a.endsWith('.vercel.app') && !a.includes('-projects.vercel.app'),
) || project.targets.production.alias[0]}
</a>
<span>•</span>
<span className="flex items-center gap-1">
<div className="i-ph:clock w-3 h-3" />
{new Date(project.createdAt).toLocaleDateString()}
</span>
</>
) : project.latestDeployments && project.latestDeployments.length > 0 ? (
<>
<a
href={`https://${project.latestDeployments[0].url}`}
target="_blank"
rel="noopener noreferrer"
className="hover:text-bolt-elements-borderColorActive"
>
{project.latestDeployments[0].url}
</a>
<span>•</span>
<span className="flex items-center gap-1">
<div className="i-ph:clock w-3 h-3" />
{new Date(project.latestDeployments[0].created).toLocaleDateString()}
</span>
</>
) : null}
</div>
</div>
{project.framework && (
<div className="text-xs text-bolt-elements-textSecondary px-2 py-1 rounded-md bg-[#F0F0F0] dark:bg-[#252525]">
<span className="flex items-center gap-1">
<div className="i-ph:code w-3 h-3" />
{project.framework}
</span>
</div>
)}
</div>
</a>
))}
</div>
) : isProjectsExpanded ? (
<div className="text-sm text-bolt-elements-textSecondary flex items-center gap-2">
<div className="i-ph:info w-4 h-4" />
No projects found in your Vercel account
</div>
) : null}
</div>
)}
</div>
)}
</div>
</motion.div>
);
}

5
app/components/@settings/tabs/connections/components/ConnectionForm.tsx
View File

@@ -16,7 +16,7 @@ interface ConnectionFormProps {
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);
const savedToken = Cookies.get(GITHUB_TOKEN_KEY) || Cookies.get('githubToken') || getLocalStorage(GITHUB_TOKEN_KEY);
if (savedToken && !authState.tokenInfo?.token) {
setAuthState((prev: GitHubAuthState) => ({
@@ -30,6 +30,9 @@ export function ConnectionForm({ authState, setAuthState, onSave, onDisconnect }
followers: 0,
},
}));
// Ensure the token is also saved with the correct key for API requests
Cookies.set('githubToken', savedToken);
}
}, []);

190
app/components/@settings/tabs/connections/components/GitHubAuthDialog.tsx Normal file
View File

@@ -0,0 +1,190 @@
import React, { useState } from 'react';
import * as Dialog from '@radix-ui/react-dialog';
import { motion } from 'framer-motion';
import { toast } from 'react-toastify';
import Cookies from 'js-cookie';
import type { GitHubUserResponse } from '~/types/GitHub';
interface GitHubAuthDialogProps {
isOpen: boolean;
onClose: () => void;
}
export function GitHubAuthDialog({ isOpen, onClose }: GitHubAuthDialogProps) {
const [token, setToken] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
const [tokenType, setTokenType] = useState<'classic' | 'fine-grained'>('classic');
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!token.trim()) {
return;
}
setIsSubmitting(true);
try {
const response = await fetch('https://api.github.com/user', {
headers: {
Accept: 'application/vnd.github.v3+json',
Authorization: `Bearer ${token}`,
},
});
if (response.ok) {
const userData = (await response.json()) as GitHubUserResponse;
// Save connection data
const connectionData = {
token,
tokenType,
user: {
login: userData.login,
avatar_url: userData.avatar_url,
name: userData.name || userData.login,
},
connected_at: new Date().toISOString(),
};
localStorage.setItem('github_connection', JSON.stringify(connectionData));
// Set cookies for API requests
Cookies.set('githubToken', token);
Cookies.set('githubUsername', userData.login);
Cookies.set('git:github.com', JSON.stringify({ username: token, password: 'x-oauth-basic' }));
toast.success(`Successfully connected as ${userData.login}`);
setToken('');
onClose();
} else {
if (response.status === 401) {
toast.error('Invalid GitHub token. Please check and try again.');
} else {
toast.error(`GitHub API error: ${response.status} ${response.statusText}`);
}
}
} catch (error) {
console.error('Error connecting to GitHub:', error);
toast.error('Failed to connect to GitHub. Please try again.');
} finally {
setIsSubmitting(false);
}
};
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 }}
>
<Dialog.Content className="bg-white dark:bg-[#1A1A1A] rounded-lg shadow-xl max-w-sm w-full mx-4 overflow-hidden">
<div className="p-4 space-y-3">
<h2 className="text-lg font-semibold text-[#111111] dark:text-white">Access Private Repositories</h2>
<p className="text-sm text-[#666666] dark:text-[#999999]">
To access private repositories, you need to connect your GitHub account by providing a personal access
token.
</p>
<div className="bg-[#F9F9F9] dark:bg-[#252525] p-4 rounded-lg space-y-3">
<h3 className="text-base font-medium text-[#111111] dark:text-white">Connect with GitHub Token</h3>
<form onSubmit={handleSubmit} className="space-y-3">
<div>
<label className="block text-sm text-[#666666] dark:text-[#999999] mb-1">
GitHub Personal Access Token
</label>
<input
type="password"
value={token}
onChange={(e) => setToken(e.target.value)}
placeholder="ghp_xxxxxxxxxxxxxxxxxxxx"
className="w-full px-3 py-1.5 rounded-lg border border-[#E5E5E5] dark:border-[#333333] bg-white dark:bg-[#1A1A1A] text-[#111111] dark:text-white placeholder-[#999999] text-sm"
/>
<div className="mt-1 text-xs text-[#666666] dark:text-[#999999]">
Get your token at{' '}
<a
href="https://github.com/settings/tokens"
target="_blank"
rel="noopener noreferrer"
className="text-purple-500 hover:underline"
>
github.com/settings/tokens
</a>
</div>
</div>
<div className="space-y-1">
<label className="block text-sm text-[#666666] dark:text-[#999999]">Token Type</label>
<div className="flex gap-4">
<label className="flex items-center gap-2">
<input
type="radio"
checked={tokenType === 'classic'}
onChange={() => setTokenType('classic')}
className="w-3.5 h-3.5 accent-purple-500"
/>
<span className="text-sm text-[#111111] dark:text-white">Classic</span>
</label>
<label className="flex items-center gap-2">
<input
type="radio"
checked={tokenType === 'fine-grained'}
onChange={() => setTokenType('fine-grained')}
className="w-3.5 h-3.5 accent-purple-500"
/>
<span className="text-sm text-[#111111] dark:text-white">Fine-grained</span>
</label>
</div>
</div>
<button
type="submit"
disabled={isSubmitting}
className="w-full py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm"
>
{isSubmitting ? 'Connecting...' : 'Connect to GitHub'}
</button>
</form>
</div>
<div className="bg-amber-50 dark:bg-amber-900/20 p-3 rounded-lg space-y-1.5">
<h3 className="text-sm text-amber-800 dark:text-amber-300 font-medium flex items-center gap-1.5">
<span className="i-ph:warning-circle w-4 h-4" />
Accessing Private Repositories
</h3>
<p className="text-xs text-amber-700 dark:text-amber-400">
Important things to know about accessing private repositories:
</p>
<ul className="list-disc pl-4 text-xs text-amber-700 dark:text-amber-400 space-y-0.5">
<li>You must be granted access to the repository by its owner</li>
<li>Your GitHub token must have the 'repo' scope</li>
<li>For organization repositories, you may need additional permissions</li>
<li>No token can give you access to repositories you don't have permission for</li>
</ul>
</div>
</div>
<div className="border-t border-[#E5E5E5] dark:border-[#333333] p-3 flex justify-end">
<Dialog.Close asChild>
<button
onClick={onClose}
className="px-4 py-1.5 bg-transparent bg-[#F5F5F5] hover:bg-[#E5E5E5] dark:bg-[#252525] dark:hover:bg-[#333333] rounded-lg text-[#111111] dark:text-white transition-colors text-sm"
>
Close
</button>
</Dialog.Close>
</div>
</Dialog.Content>
</motion.div>
</div>
</Dialog.Portal>
</Dialog.Root>
);
}

533
app/components/@settings/tabs/connections/components/PushToGitHubDialog.tsx
View File

@@ -1,7 +1,10 @@
import * as Dialog from '@radix-ui/react-dialog';
import { useState, useEffect } from 'react';
import { useState, useEffect, useCallback } from 'react';
import { toast } from 'react-toastify';
import { motion } from 'framer-motion';
import { Octokit } from '@octokit/rest';
// Internal imports
import { getLocalStorage } from '~/lib/persistence';
import { classNames } from '~/utils/classNames';
import type { GitHubUserResponse } from '~/types/GitHub';
@@ -10,7 +13,9 @@ 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';
// UI Components
import { Badge, EmptyState, StatusIndicator, SearchInput } from '~/components/ui';
interface PushToGitHubDialogProps {
isOpen: boolean;
@@ -37,6 +42,8 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
const [isLoading, setIsLoading] = useState(false);
const [user, setUser] = useState<GitHubUserResponse | null>(null);
const [recentRepos, setRecentRepos] = useState<GitHubRepo[]>([]);
const [filteredRepos, setFilteredRepos] = useState<GitHubRepo[]>([]);
const [repoSearchQuery, setRepoSearchQuery] = useState('');
const [isFetchingRepos, setIsFetchingRepos] = useState(false);
const [showSuccessDialog, setShowSuccessDialog] = useState(false);
const [createdRepoUrl, setCreatedRepoUrl] = useState('');
@@ -58,7 +65,34 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
}
}, [isOpen]);
const fetchRecentRepos = async (token: string) => {
/*
* Filter repositories based on search query
* const debouncedSetRepoSearchQuery = useDebouncedCallback((value: string) => setRepoSearchQuery(value), 300);
*/
useEffect(() => {
if (recentRepos.length === 0) {
setFilteredRepos([]);
return;
}
if (!repoSearchQuery.trim()) {
setFilteredRepos(recentRepos);
return;
}
const query = repoSearchQuery.toLowerCase().trim();
const filtered = recentRepos.filter(
(repo) =>
repo.name.toLowerCase().includes(query) ||
(repo.description && repo.description.toLowerCase().includes(query)) ||
(repo.language && repo.language.toLowerCase().includes(query)),
);
setFilteredRepos(filtered);
}, [recentRepos, repoSearchQuery]);
const fetchRecentRepos = useCallback(async (token: string) => {
if (!token) {
logStore.logError('No GitHub token available');
toast.error('GitHub authentication required');
@@ -68,53 +102,89 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
try {
setIsFetchingRepos(true);
console.log('Fetching GitHub repositories with token:', token.substring(0, 5) + '...');
const response = await fetch(
'https://api.github.com/user/repos?sort=updated&per_page=5&type=all&affiliation=owner,organization_member',
{
// Fetch ALL repos by paginating through all pages
let allRepos: GitHubRepo[] = [];
let page = 1;
let hasMore = true;
while (hasMore) {
const requestUrl = `https://api.github.com/user/repos?sort=updated&per_page=100&page=${page}&affiliation=owner,organization_member`;
const response = await fetch(requestUrl, {
headers: {
Accept: 'application/vnd.github.v3+json',
Authorization: `Bearer ${token.trim()}`,
},
},
);
});
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
if (!response.ok) {
let errorData: { message?: string } = {};
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);
try {
errorData = await response.json();
console.error('Error response data:', errorData);
} catch (e) {
errorData = { message: 'Could not parse error response' };
console.error('Could not parse error response:', e);
}
} else {
logStore.logError('Failed to fetch GitHub repositories', {
status: response.status,
statusText: response.statusText,
error: errorData,
});
toast.error(`Failed to fetch repositories: ${response.statusText}`);
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 if (response.status === 403 && response.headers.get('x-ratelimit-remaining') === '0') {
// Rate limit exceeded
const resetTime = response.headers.get('x-ratelimit-reset');
const resetDate = resetTime ? new Date(parseInt(resetTime) * 1000).toLocaleTimeString() : 'soon';
toast.error(`GitHub API rate limit exceeded. Limit resets at ${resetDate}`);
} else {
logStore.logError('Failed to fetch GitHub repositories', {
status: response.status,
statusText: response.statusText,
error: errorData,
});
toast.error(`Failed to fetch repositories: ${errorData.message || response.statusText}`);
}
return;
}
return;
}
try {
const repos = (await response.json()) as GitHubRepo[];
allRepos = allRepos.concat(repos);
const repos = (await response.json()) as GitHubRepo[];
setRecentRepos(repos);
if (repos.length < 100) {
hasMore = false;
} else {
page += 1;
}
} catch (parseError) {
console.error('Error parsing JSON response:', parseError);
logStore.logError('Failed to parse GitHub repositories response', { parseError });
toast.error('Failed to parse repository data');
setRecentRepos([]);
return;
}
}
setRecentRepos(allRepos);
} catch (error) {
console.error('Exception while fetching GitHub repositories:', 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) => {
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
const connection = getLocalStorage('github_connection');
@@ -136,15 +206,24 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
const octokit = new Octokit({ auth: connection.token });
try {
await octokit.repos.get({
const { data: existingRepo } = 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.`,
);
let confirmMessage = `Repository "${repoName}" already exists. Do you want to update it? This will add or modify files in the repository.`;
// Add visibility change warning if needed
if (existingRepo.private !== isPrivate) {
const visibilityChange = isPrivate
? 'This will also change the repository from public to private.'
: 'This will also change the repository from private to public.';
confirmMessage += `\n\n${visibilityChange}`;
}
const confirmOverwrite = window.confirm(confirmMessage);
if (!confirmOverwrite) {
setIsLoading(false);
@@ -177,7 +256,7 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
} finally {
setIsLoading(false);
}
};
}
const handleClose = () => {
setRepoName('');
@@ -201,27 +280,46 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
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">
<Dialog.Content
className="bg-white dark:bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark shadow-xl"
aria-describedby="success-dialog-description"
>
<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 className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-green-500/10 flex items-center justify-center text-green-500">
<div className="i-ph:check-circle w-5 h-5" />
</div>
<div>
<h3 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
Successfully pushed to GitHub
</h3>
<p
id="success-dialog-description"
className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark"
>
Your code is now available on GitHub
</p>
</div>
</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 asChild>
<button
onClick={handleClose}
className="p-2 rounded-lg transition-all duration-200 ease-in-out bg-transparent 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>
</button>
</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">
<div className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg p-4 text-left border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark">
<p className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark mb-2 flex items-center gap-2">
<span className="i-ph:github-logo w-4 h-4 text-purple-500" />
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">
<code className="flex-1 text-sm bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-4 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
@@ -229,27 +327,28 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
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 }}
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 bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-4 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
<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">
<div className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg p-4 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark">
<p className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark mb-2 flex items-center gap-2">
<span className="i-ph:files w-4 h-4 text-purple-500" />
Pushed Files ({pushedFiles.length})
</p>
<div className="max-h-[200px] overflow-y-auto custom-scrollbar">
<div className="max-h-[200px] overflow-y-auto custom-scrollbar pr-2">
{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"
className="flex items-center justify-between py-1.5 text-sm text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark border-b border-bolt-elements-borderColor/30 dark:border-bolt-elements-borderColor-dark/30 last:border-0"
>
<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">
<span className="font-mono truncate flex-1 text-xs">{file.path}</span>
<span className="text-xs px-2 py-0.5 rounded-full bg-bolt-elements-background-depth-3 dark:bg-bolt-elements-background-depth-4 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark ml-2">
{formatSize(file.size)}
</span>
</div>
@@ -274,7 +373,7 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
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"
className="px-4 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 text-sm inline-flex items-center gap-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark"
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
@@ -283,7 +382,7 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
</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"
className="px-4 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 text-sm border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark"
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
@@ -312,29 +411,57 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
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">
<Dialog.Content
className="bg-white dark:bg-bolt-elements-background-depth-1 rounded-lg p-6 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark shadow-xl"
aria-describedby="connection-required-description"
>
<div className="relative text-center space-y-4">
<Dialog.Close asChild>
<button
onClick={handleClose}
className="absolute right-0 top-0 p-2 rounded-lg transition-all duration-200 ease-in-out bg-transparent 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>
</button>
</Dialog.Close>
<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"
className="mx-auto w-16 h-16 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" />
<div className="i-ph:github-logo w-8 h-8" />
</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}
<h3 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
GitHub Connection Required
</h3>
<p
id="connection-required-description"
className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark max-w-md mx-auto"
>
<div className="i-ph:x-circle" />
Close
</motion.button>
To push your code to GitHub, you need to connect your GitHub account in Settings {'>'} Connections
first.
</p>
<div className="pt-2 flex justify-center gap-3">
<motion.button
className="px-4 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark text-sm hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark"
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={handleClose}
>
Close
</motion.button>
<motion.a
href="/settings/connections"
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 }}
>
<div className="i-ph:gear" />
Go to Settings
</motion.a>
</div>
</div>
</Dialog.Content>
</motion.div>
@@ -356,7 +483,10 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
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">
<Dialog.Content
className="bg-white dark:bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark shadow-xl"
aria-describedby="push-dialog-description"
>
<div className="p-6">
<div className="flex items-center gap-4 mb-6">
<motion.div
@@ -365,130 +495,189 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
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" />
<div className="i-ph:github-logo w-5 h-5" />
</motion.div>
<div>
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">
<Dialog.Title className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
Push to GitHub
</Dialog.Title>
<p className="text-sm text-gray-600 dark:text-gray-400">
<p
id="push-dialog-description"
className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark"
>
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 asChild>
<button
onClick={handleClose}
className="ml-auto p-2 rounded-lg transition-all duration-200 ease-in-out bg-transparent 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>
</button>
</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 className="flex items-center gap-3 mb-6 p-4 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark">
<div className="relative">
<img src={user.avatar_url} alt={user.login} className="w-10 h-10 rounded-full" />
<div className="absolute -bottom-1 -right-1 w-5 h-5 rounded-full bg-purple-500 flex items-center justify-center text-white">
<div className="i-ph:github-logo w-3 h-3" />
</div>
</div>
<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>
<p className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
{user.name || user.login}
</p>
<p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark">
@{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">
<label
htmlFor="repoName"
className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark"
>
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 className="relative">
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark">
<span className="i-ph:git-branch w-4 h-4" />
</div>
<input
id="repoName"
type="text"
value={repoName}
onChange={(e) => setRepoName(e.target.value)}
placeholder="my-awesome-project"
className="w-full pl-10 px-4 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 placeholder-bolt-elements-textTertiary dark:placeholder-bolt-elements-textTertiary-dark focus:outline-none focus:ring-2 focus:ring-purple-500"
required
/>
</div>
</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 className="space-y-2">
<div className="flex items-center justify-between mb-2">
<label className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark">
Recent Repositories
</label>
<span className="text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark">
{filteredRepos.length} of {recentRepos.length}
</span>
</div>
)}
<div className="mb-2">
<SearchInput
placeholder="Search repositories..."
value={repoSearchQuery}
onChange={(e) => setRepoSearchQuery(e.target.value)}
onClear={() => setRepoSearchQuery('')}
className="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-sm"
/>
</div>
{recentRepos.length === 0 && !isFetchingRepos ? (
<EmptyState
icon="i-ph:github-logo"
title="No repositories found"
description="We couldn't find any repositories in your GitHub account."
variant="compact"
/>
) : (
<div className="space-y-2 max-h-[200px] overflow-y-auto pr-2 custom-scrollbar">
{filteredRepos.length === 0 && repoSearchQuery.trim() !== '' ? (
<EmptyState
icon="i-ph:magnifying-glass"
title="No matching repositories"
description="Try a different search term"
variant="compact"
/>
) : (
filteredRepos.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 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark hover:border-purple-500/30"
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-branch w-4 h-4 text-purple-500" />
<span className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark group-hover:text-purple-500">
{repo.name}
</span>
</div>
{repo.private && (
<Badge variant="primary" size="sm" icon="i-ph:lock w-3 h-3">
Private
</Badge>
)}
</div>
{repo.description && (
<p className="mt-1 text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark line-clamp-2">
{repo.description}
</p>
)}
<div className="mt-2 flex items-center gap-2 flex-wrap">
{repo.language && (
<Badge variant="subtle" size="sm" icon="i-ph:code w-3 h-3">
{repo.language}
</Badge>
)}
<Badge variant="subtle" size="sm" icon="i-ph:star w-3 h-3">
{repo.stargazers_count.toLocaleString()}
</Badge>
<Badge variant="subtle" size="sm" icon="i-ph:git-fork w-3 h-3">
{repo.forks_count.toLocaleString()}
</Badge>
<Badge variant="subtle" size="sm" icon="i-ph:clock w-3 h-3">
{new Date(repo.updated_at).toLocaleDateString()}
</Badge>
</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 className="flex items-center justify-center py-4">
<StatusIndicator status="loading" pulse={true} label="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 className="p-3 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark">
<div className="flex items-center gap-2">
<input
type="checkbox"
id="private"
checked={isPrivate}
onChange={(e) => setIsPrivate(e.target.checked)}
className="rounded border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark text-purple-500 focus:ring-purple-500 dark:bg-bolt-elements-background-depth-3"
/>
<label
htmlFor="private"
className="text-sm text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark"
>
Make repository private
</label>
</div>
<p className="text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark mt-2 ml-6">
Private repositories are only visible to you and people you share them with
</p>
</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"
className="px-4 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 text-sm border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark"
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
@@ -506,12 +695,12 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
>
{isLoading ? (
<>
<div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
<div className="i-ph:spinner-gap animate-spin w-4 h-4" />
Pushing...
</>
) : (
<>
<div className="i-ph:git-branch w-4 h-4" />
<div className="i-ph:github-logo w-4 h-4" />
Push to GitHub
</>
)}

146
app/components/@settings/tabs/connections/components/RepositoryCard.tsx Normal file
View File

@@ -0,0 +1,146 @@
import React from 'react';
import { motion } from 'framer-motion';
import type { GitHubRepoInfo } from '~/types/GitHub';
interface RepositoryCardProps {
repo: GitHubRepoInfo;
onSelect: () => void;
}
import { useMemo } from 'react';
export function RepositoryCard({ repo, onSelect }: RepositoryCardProps) {
// Use a consistent styling for all repository cards
const getCardStyle = () => {
return 'from-bolt-elements-background-depth-1 to-bolt-elements-background-depth-1 dark:from-bolt-elements-background-depth-2-dark dark:to-bolt-elements-background-depth-2-dark';
};
// Format the date in a more readable format
const formatDate = (dateString: string) => {
const date = new Date(dateString);
const now = new Date();
const diffTime = Math.abs(now.getTime() - date.getTime());
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
if (diffDays <= 1) {
return 'Today';
}
if (diffDays <= 2) {
return 'Yesterday';
}
if (diffDays <= 7) {
return `${diffDays} days ago`;
}
if (diffDays <= 30) {
return `${Math.floor(diffDays / 7)} weeks ago`;
}
return date.toLocaleDateString(undefined, {
year: 'numeric',
month: 'short',
day: 'numeric',
});
};
const cardStyle = useMemo(() => getCardStyle(), []);
// const formattedDate = useMemo(() => formatDate(repo.updated_at), [repo.updated_at]);
return (
<motion.div
className={`p-5 rounded-xl bg-gradient-to-br ${cardStyle} border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark hover:border-purple-500/40 transition-all duration-300 shadow-sm hover:shadow-md`}
whileHover={{
scale: 1.02,
y: -2,
transition: { type: 'spring', stiffness: 400, damping: 17 },
}}
whileTap={{ scale: 0.98 }}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
>
<div className="flex items-start justify-between mb-3 gap-3">
<div className="flex items-start gap-3">
<div className="w-10 h-10 rounded-xl bg-bolt-elements-background-depth-1/80 dark:bg-bolt-elements-background-depth-4/80 backdrop-blur-sm flex items-center justify-center text-purple-500 shadow-sm">
<span className="i-ph:git-branch w-5 h-5" />
</div>
<div>
<h3 className="font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark text-base">
{repo.name}
</h3>
<p className="text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark flex items-center gap-1">
<span className="i-ph:user w-3 h-3" />
{repo.full_name.split('/')[0]}
</p>
</div>
</div>
<motion.button
onClick={onSelect}
className="px-4 py-2 h-9 rounded-lg bg-purple-500 text-white hover:bg-purple-600 transition-all duration-200 flex items-center gap-2 min-w-[100px] justify-center text-sm shadow-sm hover:shadow-md"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
<span className="i-ph:git-pull-request w-3.5 h-3.5" />
Import
</motion.button>
</div>
{repo.description && (
<div className="mb-4 bg-bolt-elements-background-depth-1/50 dark:bg-bolt-elements-background-depth-4/50 backdrop-blur-sm p-3 rounded-lg border border-bolt-elements-borderColor/30 dark:border-bolt-elements-borderColor-dark/30">
<p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark line-clamp-2">
{repo.description}
</p>
</div>
)}
<div className="flex flex-wrap items-center gap-2">
{repo.private && (
<span className="flex items-center gap-1 px-2 py-1 rounded-lg bg-purple-500/10 text-purple-600 dark:text-purple-400 text-xs">
<span className="i-ph:lock w-3 h-3" />
Private
</span>
)}
{repo.language && (
<span className="flex items-center gap-1 px-2 py-1 rounded-lg bg-bolt-elements-background-depth-1/50 dark:bg-bolt-elements-background-depth-4/50 backdrop-blur-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark text-xs border border-bolt-elements-borderColor/30 dark:border-bolt-elements-borderColor-dark/30">
<span className="i-ph:code w-3 h-3" />
{repo.language}
</span>
)}
<span className="flex items-center gap-1 px-2 py-1 rounded-lg bg-bolt-elements-background-depth-1/50 dark:bg-bolt-elements-background-depth-4/50 backdrop-blur-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark text-xs border border-bolt-elements-borderColor/30 dark:border-bolt-elements-borderColor-dark/30">
<span className="i-ph:star w-3 h-3" />
{repo.stargazers_count.toLocaleString()}
</span>
{repo.forks_count > 0 && (
<span className="flex items-center gap-1 px-2 py-1 rounded-lg bg-bolt-elements-background-depth-1/50 dark:bg-bolt-elements-background-depth-4/50 backdrop-blur-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark text-xs border border-bolt-elements-borderColor/30 dark:border-bolt-elements-borderColor-dark/30">
<span className="i-ph:git-fork w-3 h-3" />
{repo.forks_count.toLocaleString()}
</span>
)}
</div>
<div className="mt-3 pt-3 border-t border-bolt-elements-borderColor/30 dark:border-bolt-elements-borderColor-dark/30 flex items-center justify-between">
<span className="flex items-center gap-1 text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark">
<span className="i-ph:clock w-3 h-3" />
Updated {formatDate(repo.updated_at)}
</span>
{repo.topics && repo.topics.length > 0 && (
<span className="text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark">
{repo.topics.slice(0, 1).map((topic) => (
<span
key={topic}
className="px-1.5 py-0.5 rounded-full bg-bolt-elements-background-depth-1/50 dark:bg-bolt-elements-background-depth-4/50 text-xs"
>
{topic}
</span>
))}
{repo.topics.length > 1 && <span className="ml-1">+{repo.topics.length - 1}</span>}
</span>
)}
</div>
</motion.div>
);
}

14
app/components/@settings/tabs/connections/components/RepositoryDialogContext.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { createContext } from 'react';
// Create a context to share the setShowAuthDialog function with child components
export interface RepositoryDialogContextType {
setShowAuthDialog: React.Dispatch<React.SetStateAction<boolean>>;
}
// Default context value with a no-op function
export const RepositoryDialogContext = createContext<RepositoryDialogContextType>({
// This is intentionally empty as it will be overridden by the provider
setShowAuthDialog: () => {
// No operation
},
});

58
app/components/@settings/tabs/connections/components/RepositoryList.tsx Normal file
View File

@@ -0,0 +1,58 @@
import React, { useContext } from 'react';
import type { GitHubRepoInfo } from '~/types/GitHub';
import { EmptyState, StatusIndicator } from '~/components/ui';
import { RepositoryCard } from './RepositoryCard';
import { RepositoryDialogContext } from './RepositoryDialogContext';
interface RepositoryListProps {
repos: GitHubRepoInfo[];
isLoading: boolean;
onSelect: (repo: GitHubRepoInfo) => void;
activeTab: string;
}
export function RepositoryList({ repos, isLoading, onSelect, activeTab }: RepositoryListProps) {
// Access the parent component's setShowAuthDialog function
const { setShowAuthDialog } = useContext(RepositoryDialogContext);
if (isLoading) {
return (
<div className="flex flex-col items-center justify-center py-8 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark">
<StatusIndicator status="loading" pulse={true} size="lg" label="Loading repositories..." className="mb-2" />
<p className="text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark">
This may take a moment
</p>
</div>
);
}
if (repos.length === 0) {
if (activeTab === 'my-repos') {
return (
<EmptyState
icon="i-ph:folder-simple-dashed"
title="No repositories found"
description="Connect your GitHub account or create a new repository to get started"
actionLabel="Connect GitHub Account"
onAction={() => setShowAuthDialog(true)}
/>
);
} else {
return (
<EmptyState
icon="i-ph:magnifying-glass"
title="No repositories found"
description="Try searching with different keywords or filters"
/>
);
}
}
return (
<div className="space-y-3">
{repos.map((repo) => (
<RepositoryCard key={repo.full_name} repo={repo} onSelect={() => onSelect(repo)} />
))}
</div>
);
}

1018
app/components/@settings/tabs/connections/components/RepositorySelectionDialog.tsx
View File

File diff suppressed because it is too large Load Diff

83
app/components/@settings/tabs/connections/components/StatsDialog.tsx Normal file
View File

@@ -0,0 +1,83 @@
import React from 'react';
import * as Dialog from '@radix-ui/react-dialog';
import { motion } from 'framer-motion';
import type { RepositoryStats } from '~/types/GitHub';
import { formatSize } from '~/utils/formatSize';
import { RepositoryStats as RepoStats } from '~/components/ui';
interface StatsDialogProps {
isOpen: boolean;
onClose: () => void;
onConfirm: () => void;
stats: RepositoryStats;
isLargeRepo?: boolean;
}
export 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-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark shadow-xl">
<div className="p-6 space-y-4">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-bolt-elements-background-depth-3 flex items-center justify-center text-purple-500">
<span className="i-ph:git-branch w-5 h-5" />
</div>
<div>
<h3 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
Repository Overview
</h3>
<p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark">
Review repository details before importing
</p>
</div>
</div>
<div className="mt-4 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 p-4 rounded-lg">
<RepoStats stats={stats} />
</div>
{isLargeRepo && (
<div className="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 className="border-t border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark p-4 flex justify-end gap-3 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-b-lg">
<motion.button
onClick={onClose}
className="px-4 py-2 rounded-lg bg-bolt-elements-background-depth-3 dark:bg-bolt-elements-background-depth-4 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary dark:text-bolt-elements-textSecondary-dark dark:hover:text-bolt-elements-textPrimary-dark transition-colors"
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
Cancel
</motion.button>
<motion.button
onClick={onConfirm}
className="px-4 py-2 rounded-lg bg-purple-500 text-white hover:bg-purple-600 transition-colors"
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
Import Repository
</motion.button>
</div>
</Dialog.Content>
</motion.div>
</div>
</Dialog.Portal>
</Dialog.Root>
);
}

1107
app/components/@settings/tabs/data/DataTab.tsx
View File

File diff suppressed because it is too large Load Diff

384
app/components/@settings/tabs/data/DataVisualization.tsx Normal file
View File

@@ -0,0 +1,384 @@
import { useState, useEffect } from 'react';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
ArcElement,
PointElement,
LineElement,
} from 'chart.js';
import { Bar, Pie } from 'react-chartjs-2';
import type { Chat } from '~/lib/persistence/chats';
import { classNames } from '~/utils/classNames';
// Register ChartJS components
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ArcElement, PointElement, LineElement);
type DataVisualizationProps = {
chats: Chat[];
};
export function DataVisualization({ chats }: DataVisualizationProps) {
const [chatsByDate, setChatsByDate] = useState<Record<string, number>>({});
const [messagesByRole, setMessagesByRole] = useState<Record<string, number>>({});
const [apiKeyUsage, setApiKeyUsage] = useState<Array<{ provider: string; count: number }>>([]);
const [averageMessagesPerChat, setAverageMessagesPerChat] = useState<number>(0);
const [isDarkMode, setIsDarkMode] = useState(false);
useEffect(() => {
const isDark = document.documentElement.classList.contains('dark');
setIsDarkMode(isDark);
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === 'class') {
setIsDarkMode(document.documentElement.classList.contains('dark'));
}
});
});
observer.observe(document.documentElement, { attributes: true });
return () => observer.disconnect();
}, []);
useEffect(() => {
if (!chats || chats.length === 0) {
return;
}
// Process chat data
const chatDates: Record<string, number> = {};
const roleCounts: Record<string, number> = {};
const apiUsage: Record<string, number> = {};
let totalMessages = 0;
chats.forEach((chat) => {
const date = new Date(chat.timestamp).toLocaleDateString();
chatDates[date] = (chatDates[date] || 0) + 1;
chat.messages.forEach((message) => {
roleCounts[message.role] = (roleCounts[message.role] || 0) + 1;
totalMessages++;
if (message.role === 'assistant') {
const providerMatch = message.content.match(/provider:\s*([\w-]+)/i);
const provider = providerMatch ? providerMatch[1] : 'unknown';
apiUsage[provider] = (apiUsage[provider] || 0) + 1;
}
});
});
const sortedDates = Object.keys(chatDates).sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
const sortedChatsByDate: Record<string, number> = {};
sortedDates.forEach((date) => {
sortedChatsByDate[date] = chatDates[date];
});
setChatsByDate(sortedChatsByDate);
setMessagesByRole(roleCounts);
setApiKeyUsage(Object.entries(apiUsage).map(([provider, count]) => ({ provider, count })));
setAverageMessagesPerChat(totalMessages / chats.length);
}, [chats]);
// Get theme colors from CSS variables to ensure theme consistency
const getThemeColor = (varName: string): string => {
// Get the CSS variable value from document root
if (typeof document !== 'undefined') {
return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
}
// Fallback for SSR
return isDarkMode ? '#FFFFFF' : '#000000';
};
// Theme-aware chart colors with enhanced dark mode visibility using CSS variables
const chartColors = {
grid: isDarkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.1)',
text: getThemeColor('--bolt-elements-textPrimary'),
textSecondary: getThemeColor('--bolt-elements-textSecondary'),
background: getThemeColor('--bolt-elements-bg-depth-1'),
accent: getThemeColor('--bolt-elements-button-primary-text'),
border: getThemeColor('--bolt-elements-borderColor'),
};
const getChartColors = (index: number) => {
// Define color palettes based on Bolt design tokens
const baseColors = [
// Indigo
{
base: getThemeColor('--bolt-elements-button-primary-text'),
},
// Pink
{
base: isDarkMode ? 'rgb(244, 114, 182)' : 'rgb(236, 72, 153)',
},
// Green
{
base: getThemeColor('--bolt-elements-icon-success'),
},
// Yellow
{
base: isDarkMode ? 'rgb(250, 204, 21)' : 'rgb(234, 179, 8)',
},
// Blue
{
base: isDarkMode ? 'rgb(56, 189, 248)' : 'rgb(14, 165, 233)',
},
];
// Get the base color for this index
const color = baseColors[index % baseColors.length].base;
// Parse color and generate variations with appropriate opacity
let r = 0,
g = 0,
b = 0;
// Handle rgb/rgba format
const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([0-9.]+)\)/);
if (rgbMatch) {
[, r, g, b] = rgbMatch.map(Number);
} else if (rgbaMatch) {
[, r, g, b] = rgbaMatch.map(Number);
} else if (color.startsWith('#')) {
// Handle hex format
const hex = color.slice(1);
const bigint = parseInt(hex, 16);
r = (bigint >> 16) & 255;
g = (bigint >> 8) & 255;
b = bigint & 255;
}
return {
bg: `rgba(${r}, ${g}, ${b}, ${isDarkMode ? 0.7 : 0.5})`,
border: `rgba(${r}, ${g}, ${b}, ${isDarkMode ? 0.9 : 0.8})`,
};
};
const chartData = {
history: {
labels: Object.keys(chatsByDate),
datasets: [
{
label: 'Chats Created',
data: Object.values(chatsByDate),
backgroundColor: getChartColors(0).bg,
borderColor: getChartColors(0).border,
borderWidth: 1,
},
],
},
roles: {
labels: Object.keys(messagesByRole),
datasets: [
{
label: 'Messages by Role',
data: Object.values(messagesByRole),
backgroundColor: Object.keys(messagesByRole).map((_, i) => getChartColors(i).bg),
borderColor: Object.keys(messagesByRole).map((_, i) => getChartColors(i).border),
borderWidth: 1,
},
],
},
apiUsage: {
labels: apiKeyUsage.map((item) => item.provider),
datasets: [
{
label: 'API Usage',
data: apiKeyUsage.map((item) => item.count),
backgroundColor: apiKeyUsage.map((_, i) => getChartColors(i).bg),
borderColor: apiKeyUsage.map((_, i) => getChartColors(i).border),
borderWidth: 1,
},
],
},
};
const baseChartOptions = {
responsive: true,
maintainAspectRatio: false,
color: chartColors.text,
plugins: {
legend: {
position: 'top' as const,
labels: {
color: chartColors.text,
font: {
weight: 'bold' as const,
size: 12,
},
padding: 16,
usePointStyle: true,
},
},
title: {
display: true,
color: chartColors.text,
font: {
size: 16,
weight: 'bold' as const,
},
padding: 16,
},
tooltip: {
titleColor: chartColors.text,
bodyColor: chartColors.text,
backgroundColor: isDarkMode
? 'rgba(23, 23, 23, 0.8)' // Dark bg using Tailwind gray-900
: 'rgba(255, 255, 255, 0.8)', // Light bg
borderColor: chartColors.border,
borderWidth: 1,
},
},
};
const chartOptions = {
...baseChartOptions,
plugins: {
...baseChartOptions.plugins,
title: {
...baseChartOptions.plugins.title,
text: 'Chat History',
},
},
scales: {
x: {
grid: {
color: chartColors.grid,
drawBorder: false,
},
border: {
display: false,
},
ticks: {
color: chartColors.text,
font: {
weight: 500,
},
},
},
y: {
grid: {
color: chartColors.grid,
drawBorder: false,
},
border: {
display: false,
},
ticks: {
color: chartColors.text,
font: {
weight: 500,
},
},
},
},
};
const pieOptions = {
...baseChartOptions,
plugins: {
...baseChartOptions.plugins,
title: {
...baseChartOptions.plugins.title,
text: 'Message Distribution',
},
legend: {
...baseChartOptions.plugins.legend,
position: 'right' as const,
},
datalabels: {
color: chartColors.text,
font: {
weight: 'bold' as const,
},
},
},
};
if (chats.length === 0) {
return (
<div className="text-center py-8">
<div className="i-ph-chart-line-duotone w-12 h-12 mx-auto mb-4 text-bolt-elements-textTertiary opacity-80" />
<h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-2">No Data Available</h3>
<p className="text-bolt-elements-textSecondary">
Start creating chats to see your usage statistics and data visualization.
</p>
</div>
);
}
const cardClasses = classNames(
'p-6 rounded-lg shadow-sm',
'bg-bolt-elements-bg-depth-1',
'border border-bolt-elements-borderColor',
);
const statClasses = classNames('text-3xl font-bold text-bolt-elements-textPrimary', 'flex items-center gap-3');
return (
<div className="space-y-8">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className={cardClasses}>
<h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Total Chats</h3>
<div className={statClasses}>
<div className="i-ph-chats-duotone w-8 h-8 text-indigo-500 dark:text-indigo-400" />
<span>{chats.length}</span>
</div>
</div>
<div className={cardClasses}>
<h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Total Messages</h3>
<div className={statClasses}>
<div className="i-ph-chat-text-duotone w-8 h-8 text-pink-500 dark:text-pink-400" />
<span>{Object.values(messagesByRole).reduce((sum, count) => sum + count, 0)}</span>
</div>
</div>
<div className={cardClasses}>
<h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Avg. Messages/Chat</h3>
<div className={statClasses}>
<div className="i-ph-chart-bar-duotone w-8 h-8 text-green-500 dark:text-green-400" />
<span>{averageMessagesPerChat.toFixed(1)}</span>
</div>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className={cardClasses}>
<h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-6">Chat History</h3>
<div className="h-64">
<Bar data={chartData.history} options={chartOptions} />
</div>
</div>
<div className={cardClasses}>
<h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-6">Message Distribution</h3>
<div className="h-64">
<Pie data={chartData.roles} options={pieOptions} />
</div>
</div>
</div>
{apiKeyUsage.length > 0 && (
<div className={cardClasses}>
<h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-6">API Usage by Provider</h3>
<div className="h-64">
<Pie data={chartData.apiUsage} options={pieOptions} />
</div>
</div>
)}
</div>
);
}

141
app/components/@settings/tabs/debug/DebugTab.tsx
View File

@@ -342,24 +342,86 @@ export default function DebugTab() {
try {
setLoading((prev) => ({ ...prev, systemInfo: true }));
// Get browser info
const ua = navigator.userAgent;
const browserName = ua.includes('Firefox')
? 'Firefox'
: ua.includes('Chrome')
? 'Chrome'
: ua.includes('Safari')
? 'Safari'
: ua.includes('Edge')
? 'Edge'
: 'Unknown';
const browserVersion = ua.match(/(Firefox|Chrome|Safari|Edge)\/([0-9.]+)/)?.[2] || 'Unknown';
// Get better OS detection
const userAgent = navigator.userAgent;
let detectedOS = 'Unknown';
let detectedArch = 'unknown';
// Improved OS detection
if (userAgent.indexOf('Win') !== -1) {
detectedOS = 'Windows';
} else if (userAgent.indexOf('Mac') !== -1) {
detectedOS = 'macOS';
} else if (userAgent.indexOf('Linux') !== -1) {
detectedOS = 'Linux';
} else if (userAgent.indexOf('Android') !== -1) {
detectedOS = 'Android';
} else if (/iPhone|iPad|iPod/.test(userAgent)) {
detectedOS = 'iOS';
}
// Better architecture detection
if (userAgent.indexOf('x86_64') !== -1 || userAgent.indexOf('x64') !== -1 || userAgent.indexOf('WOW64') !== -1) {
detectedArch = 'x64';
} else if (userAgent.indexOf('x86') !== -1 || userAgent.indexOf('i686') !== -1) {
detectedArch = 'x86';
} else if (userAgent.indexOf('arm64') !== -1 || userAgent.indexOf('aarch64') !== -1) {
detectedArch = 'arm64';
} else if (userAgent.indexOf('arm') !== -1) {
detectedArch = 'arm';
}
// Get browser info with improved detection
const browserName = (() => {
if (userAgent.indexOf('Edge') !== -1 || userAgent.indexOf('Edg/') !== -1) {
return 'Edge';
}
if (userAgent.indexOf('Chrome') !== -1) {
return 'Chrome';
}
if (userAgent.indexOf('Firefox') !== -1) {
return 'Firefox';
}
if (userAgent.indexOf('Safari') !== -1) {
return 'Safari';
}
return 'Unknown';
})();
const browserVersionMatch = userAgent.match(/(Edge|Edg|Chrome|Firefox|Safari)[\s/](\d+(\.\d+)*)/);
const browserVersion = browserVersionMatch ? browserVersionMatch[2] : 'Unknown';
// Get performance metrics
const memory = (performance as any).memory || {};
const timing = performance.timing;
const navigation = performance.navigation;
const connection = (navigator as any).connection;
const connection = (navigator as any).connection || {};
// Try to use Navigation Timing API Level 2 when available
let loadTime = 0;
let domReadyTime = 0;
try {
const navEntries = performance.getEntriesByType('navigation');
if (navEntries.length > 0) {
const navTiming = navEntries[0] as PerformanceNavigationTiming;
loadTime = navTiming.loadEventEnd - navTiming.startTime;
domReadyTime = navTiming.domContentLoadedEventEnd - navTiming.startTime;
} else {
// Fall back to older API
loadTime = timing.loadEventEnd - timing.navigationStart;
domReadyTime = timing.domContentLoadedEventEnd - timing.navigationStart;
}
} catch {
// Fall back to older API if Navigation Timing API Level 2 is not available
loadTime = timing.loadEventEnd - timing.navigationStart;
domReadyTime = timing.domContentLoadedEventEnd - timing.navigationStart;
}
// Get battery info
let batteryInfo;
@@ -405,9 +467,9 @@ export default function DebugTab() {
const memoryPercentage = totalMemory ? (usedMemory / totalMemory) * 100 : 0;
const systemInfo: SystemInfo = {
os: navigator.platform,
arch: navigator.userAgent.includes('x64') ? 'x64' : navigator.userAgent.includes('arm') ? 'arm' : 'unknown',
platform: navigator.platform,
os: detectedOS,
arch: detectedArch,
platform: navigator.platform || 'unknown',
cpus: navigator.hardwareConcurrency + ' cores',
memory: {
total: formatBytes(totalMemory),
@@ -423,7 +485,7 @@ export default function DebugTab() {
userAgent: navigator.userAgent,
cookiesEnabled: navigator.cookieEnabled,
online: navigator.onLine,
platform: navigator.platform,
platform: navigator.platform || 'unknown',
cores: navigator.hardwareConcurrency,
},
screen: {
@@ -445,8 +507,8 @@ export default function DebugTab() {
usagePercentage: memory.totalJSHeapSize ? (memory.usedJSHeapSize / memory.totalJSHeapSize) * 100 : 0,
},
timing: {
loadTime: timing.loadEventEnd - timing.navigationStart,
domReadyTime: timing.domContentLoadedEventEnd - timing.navigationStart,
loadTime,
domReadyTime,
readyStart: timing.fetchStart - timing.navigationStart,
redirectTime: timing.redirectEnd - timing.redirectStart,
appcacheTime: timing.domainLookupStart - timing.fetchStart,
@@ -483,6 +545,23 @@ export default function DebugTab() {
}
};
// Helper function to format bytes to human readable format with better precision
const formatBytes = (bytes: number) => {
if (bytes === 0) {
return '0 B';
}
const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
const i = Math.floor(Math.log(bytes) / Math.log(1024));
// Return with proper precision based on unit size
if (i === 0) {
return `${bytes} ${units[i]}`;
}
return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${units[i]}`;
};
const getWebAppInfo = async () => {
try {
setLoading((prev) => ({ ...prev, webAppInfo: true }));
@@ -520,20 +599,6 @@ export default function DebugTab() {
}
};
// Helper function to format bytes to human readable format
const formatBytes = (bytes: number) => {
const units = ['B', 'KB', 'MB', 'GB'];
let size = bytes;
let unitIndex = 0;
while (size >= 1024 && unitIndex < units.length - 1) {
size /= 1024;
unitIndex++;
}
return `${Math.round(size)} ${units[unitIndex]}`;
};
const handleLogPerformance = () => {
try {
setLoading((prev) => ({ ...prev, performance: true }));
@@ -1077,7 +1142,7 @@ export default function DebugTab() {
{
id: 'json',
label: 'Export as JSON',
icon: 'i-ph:file-json',
icon: 'i-ph:file-js',
handler: exportDebugInfo,
},
{
@@ -1587,7 +1652,7 @@ export default function DebugTab() {
<span className="text-bolt-elements-textPrimary">{systemInfo.platform}</span>
</div>
<div className="text-sm flex items-center gap-2">
<div className="i-ph:microchip text-bolt-elements-textSecondary w-4 h-4" />
<div className="i-ph:circuitry text-bolt-elements-textSecondary w-4 h-4" />
<span className="text-bolt-elements-textSecondary">Architecture: </span>
<span className="text-bolt-elements-textPrimary">{systemInfo.arch}</span>
</div>
@@ -1597,7 +1662,7 @@ export default function DebugTab() {
<span className="text-bolt-elements-textPrimary">{systemInfo.cpus}</span>
</div>
<div className="text-sm flex items-center gap-2">
<div className="i-ph:node text-bolt-elements-textSecondary w-4 h-4" />
<div className="i-ph:graph text-bolt-elements-textSecondary w-4 h-4" />
<span className="text-bolt-elements-textSecondary">Node Version: </span>
<span className="text-bolt-elements-textPrimary">{systemInfo.node}</span>
</div>
@@ -1852,7 +1917,7 @@ export default function DebugTab() {
<span className="text-bolt-elements-textPrimary">{webAppInfo.environment}</span>
</div>
<div className="text-sm flex items-center gap-2">
<div className="i-ph:node text-bolt-elements-textSecondary w-4 h-4" />
<div className="i-ph:graph text-bolt-elements-textSecondary w-4 h-4" />
<span className="text-bolt-elements-textSecondary">Node Version:</span>
<span className="text-bolt-elements-textPrimary">{webAppInfo.runtimeInfo.nodeVersion}</span>
</div>
@@ -1887,7 +1952,7 @@ export default function DebugTab() {
<>
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-800">
<div className="text-sm flex items-center gap-2">
<div className="i-ph:git-repository text-bolt-elements-textSecondary w-4 h-4" />
<div className="i-ph:git-fork text-bolt-elements-textSecondary w-4 h-4" />
<span className="text-bolt-elements-textSecondary">Repository:</span>
<span className="text-bolt-elements-textPrimary">
{webAppInfo.gitInfo.github.currentRepo.fullName}

2
app/components/@settings/tabs/event-logs/EventLogsTab.tsx
View File

@@ -763,7 +763,7 @@ export function EventLogsTab() {
{
id: 'json',
label: 'Export as JSON',
icon: 'i-ph:file-json',
icon: 'i-ph:file-js',
handler: exportAsJSON,
},
{

2085
app/components/@settings/tabs/task-manager/TaskManagerTab.tsx
View File

File diff suppressed because it is too large Load Diff

146
app/components/chat/Artifact.tsx
View File

@@ -35,7 +35,11 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
const actions = useStore(
computed(artifact.runner.actions, (actions) => {
return Object.values(actions);
// Filter out Supabase actions except for migrations
return Object.values(actions).filter((action) => {
// Exclude actions with type 'supabase' or actions that contain 'supabase' in their content
return action.type !== 'supabase' && !(action.type === 'shell' && action.content?.includes('supabase'));
});
}),
);
@@ -50,77 +54,105 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
}
if (actions.length !== 0 && artifact.type === 'bundled') {
const finished = !actions.find((action) => action.status !== 'complete');
const finished = !actions.find(
(action) => action.status !== 'complete' && !(action.type === 'start' && action.status === 'running'),
);
if (allActionFinished !== finished) {
setAllActionFinished(finished);
}
}
}, [actions]);
}, [actions, artifact.type, allActionFinished]);
// Determine the dynamic title based on state for bundled artifacts
const dynamicTitle =
artifact?.type === 'bundled'
? allActionFinished
? artifact.id === 'restored-project-setup'
? 'Project Restored' // Title when restore is complete
: 'Project Created' // Title when initial creation is complete
: artifact.id === 'restored-project-setup'
? 'Restoring Project...' // Title during restore
: 'Creating Project...' // Title during initial creation
: artifact?.title; // Fallback to original title for non-bundled or if artifact is missing
return (
<div className="artifact border border-bolt-elements-borderColor flex flex-col overflow-hidden rounded-lg w-full transition-border duration-150">
<div className="flex">
<button
className="flex items-stretch bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover w-full overflow-hidden"
onClick={() => {
const showWorkbench = workbenchStore.showWorkbench.get();
workbenchStore.showWorkbench.set(!showWorkbench);
}}
>
{artifact.type == 'bundled' && (
<>
<div className="p-4">
{allActionFinished ? (
<div className={'i-ph:files-light'} style={{ fontSize: '2rem' }}></div>
) : (
<div className={'i-svg-spinners:90-ring-with-bg'} style={{ fontSize: '2rem' }}></div>
)}
<>
<div className="artifact border border-bolt-elements-borderColor flex flex-col overflow-hidden rounded-lg w-full transition-border duration-150">
<div className="flex">
<button
className="flex items-stretch bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover w-full overflow-hidden"
onClick={() => {
const showWorkbench = workbenchStore.showWorkbench.get();
workbenchStore.showWorkbench.set(!showWorkbench);
}}
>
<div className="px-5 p-3.5 w-full text-left">
<div className="w-full text-bolt-elements-textPrimary font-medium leading-5 text-sm">
{/* Use the dynamic title here */}
{dynamicTitle}
</div>
<div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
</>
)}
<div className="px-5 p-3.5 w-full text-left">
<div className="w-full text-bolt-elements-textPrimary font-medium leading-5 text-sm">{artifact?.title}</div>
<div className="w-full w-full text-bolt-elements-textSecondary text-xs mt-0.5">Click to open Workbench</div>
<div className="w-full w-full text-bolt-elements-textSecondary text-xs mt-0.5">
Click to open Workbench
</div>
</div>
</button>
{artifact.type !== 'bundled' && <div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />}
<AnimatePresence>
{actions.length && artifact.type !== 'bundled' && (
<motion.button
initial={{ width: 0 }}
animate={{ width: 'auto' }}
exit={{ width: 0 }}
transition={{ duration: 0.15, ease: cubicEasingFn }}
className="bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover"
onClick={toggleActions}
>
<div className="p-4">
<div className={showActions ? 'i-ph:caret-up-bold' : 'i-ph:caret-down-bold'}></div>
</div>
</motion.button>
)}
</AnimatePresence>
</div>
{artifact.type === 'bundled' && (
<div className="flex items-center gap-1.5 p-5 bg-bolt-elements-actions-background border-t border-bolt-elements-artifacts-borderColor">
<div className={classNames('text-lg', getIconColor(allActionFinished ? 'complete' : 'running'))}>
{allActionFinished ? (
<div className="i-ph:check"></div>
) : (
<div className="i-svg-spinners:90-ring-with-bg"></div>
)}
</div>
<div className="text-bolt-elements-textPrimary font-medium leading-5 text-sm">
{/* This status text remains the same */}
{allActionFinished
? artifact.id === 'restored-project-setup'
? 'Restore files from snapshot'
: 'Initial files created'
: 'Creating initial files'}
</div>
</div>
</button>
<div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
)}
<AnimatePresence>
{actions.length && artifact.type !== 'bundled' && (
<motion.button
initial={{ width: 0 }}
animate={{ width: 'auto' }}
exit={{ width: 0 }}
transition={{ duration: 0.15, ease: cubicEasingFn }}
className="bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover"
onClick={toggleActions}
{artifact.type !== 'bundled' && showActions && actions.length > 0 && (
<motion.div
className="actions"
initial={{ height: 0 }}
animate={{ height: 'auto' }}
exit={{ height: '0px' }}
transition={{ duration: 0.15 }}
>
<div className="p-4">
<div className={showActions ? 'i-ph:caret-up-bold' : 'i-ph:caret-down-bold'}></div>
<div className="bg-bolt-elements-artifacts-borderColor h-[1px]" />
<div className="p-5 text-left bg-bolt-elements-actions-background">
<ActionList actions={actions} />
</div>
</motion.button>
</motion.div>
)}
</AnimatePresence>
</div>
<AnimatePresence>
{artifact.type !== 'bundled' && showActions && actions.length > 0 && (
<motion.div
className="actions"
initial={{ height: 0 }}
animate={{ height: 'auto' }}
exit={{ height: '0px' }}
transition={{ duration: 0.15 }}
>
<div className="bg-bolt-elements-artifacts-borderColor h-[1px]" />
<div className="p-5 text-left bg-bolt-elements-actions-background">
<ActionList actions={actions} />
</div>
</motion.div>
)}
</AnimatePresence>
</div>
</>
);
});

46
app/components/chat/AssistantMessage.tsx
View File

@@ -1,13 +1,17 @@
import { memo } from 'react';
import { memo, Fragment } from 'react';
import { Markdown } from './Markdown';
import type { JSONValue } from 'ai';
import Popover from '~/components/ui/Popover';
import { workbenchStore } from '~/lib/stores/workbench';
import { WORK_DIR } from '~/utils/constants';
import WithTooltip from '~/components/ui/Tooltip';
interface AssistantMessageProps {
content: string;
annotations?: JSONValue[];
messageId?: string;
onRewind?: (messageId: string) => void;
onFork?: (messageId: string) => void;
}
function openArtifactInWorkbench(filePath: string) {
@@ -34,7 +38,7 @@ function normalizedFilePath(path: string) {
return normalizedPath;
}
export const AssistantMessage = memo(({ content, annotations }: AssistantMessageProps) => {
export const AssistantMessage = memo(({ content, annotations, messageId, onRewind, onFork }: AssistantMessageProps) => {
const filteredAnnotations = (annotations?.filter(
(annotation: JSONValue) => annotation && typeof annotation === 'object' && Object.keys(annotation).includes('type'),
) || []) as { type: string; value: any } & { [key: string]: any }[];
@@ -78,7 +82,7 @@ export const AssistantMessage = memo(({ content, annotations }: AssistantMessage
{codeContext.map((x) => {
const normalized = normalizedFilePath(x);
return (
<>
<Fragment key={normalized}>
<code
className="bg-bolt-elements-artifacts-inlineCode-background text-bolt-elements-artifacts-inlineCode-text px-1.5 py-1 rounded-md text-bolt-elements-item-contentAccent hover:underline cursor-pointer"
onClick={(e) => {
@@ -89,7 +93,7 @@ export const AssistantMessage = memo(({ content, annotations }: AssistantMessage
>
{normalized}
</code>
</>
</Fragment>
);
})}
</div>
@@ -100,11 +104,35 @@ export const AssistantMessage = memo(({ content, annotations }: AssistantMessage
<div className="context"></div>
</Popover>
)}
{usage && (
<div>
Tokens: {usage.totalTokens} (prompt: {usage.promptTokens}, completion: {usage.completionTokens})
</div>
)}
<div className="flex w-full items-center justify-between">
{usage && (
<div>
Tokens: {usage.totalTokens} (prompt: {usage.promptTokens}, completion: {usage.completionTokens})
</div>
)}
{(onRewind || onFork) && messageId && (
<div className="flex gap-2 flex-col lg:flex-row ml-auto">
{onRewind && (
<WithTooltip tooltip="Revert to this message">
<button
onClick={() => onRewind(messageId)}
key="i-ph:arrow-u-up-left"
className="i-ph:arrow-u-up-left text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"
/>
</WithTooltip>
)}
{onFork && (
<WithTooltip tooltip="Fork chat from this message">
<button
onClick={() => onFork(messageId)}
key="i-ph:git-fork"
className="i-ph:git-fork text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"
/>
</WithTooltip>
)}
</div>
)}
</div>
</div>
</>
<Markdown html>{content}</Markdown>

153
app/components/chat/BaseChat.tsx
View File

@@ -29,13 +29,20 @@ import type { ProviderInfo } from '~/types/model';
import { ScreenshotStateManager } from './ScreenshotStateManager';
import { toast } from 'react-toastify';
import StarterTemplates from './StarterTemplates';
import type { ActionAlert } from '~/types/actions';
import type { ActionAlert, SupabaseAlert, DeployAlert } from '~/types/actions';
import DeployChatAlert from '~/components/deploy/DeployAlert';
import ChatAlert from './ChatAlert';
import type { ModelInfo } from '~/lib/modules/llm/types';
import ProgressCompilation from './ProgressCompilation';
import type { ProgressAnnotation } from '~/types/context';
import type { ActionRunner } from '~/lib/runtime/action-runner';
import { LOCAL_PROVIDERS } from '~/lib/stores/settings';
import { SupabaseChatAlert } from '~/components/chat/SupabaseAlert';
import { SupabaseConnection } from './SupabaseConnection';
import { ExpoQrModal } from '~/components/workbench/ExpoQrModal';
import { expoUrlAtom } from '~/lib/stores/qrCodeStore';
import { useStore } from '@nanostores/react';
import { StickToBottom, useStickToBottomContext } from '~/lib/hooks';
const TEXTAREA_MIN_HEIGHT = 76;
@@ -69,6 +76,10 @@ interface BaseChatProps {
setImageDataList?: (dataList: string[]) => void;
actionAlert?: ActionAlert;
clearAlert?: () => void;
supabaseAlert?: SupabaseAlert;
clearSupabaseAlert?: () => void;
deployAlert?: DeployAlert;
clearDeployAlert?: () => void;
data?: JSONValue[] | undefined;
actionRunner?: ActionRunner;
}
@@ -77,8 +88,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
(
{
textareaRef,
messageRef,
scrollRef,
showChat = true,
chatStarted = false,
isStreaming = false,
@@ -105,6 +114,10 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
messages,
actionAlert,
clearAlert,
deployAlert,
clearDeployAlert,
supabaseAlert,
clearSupabaseAlert,
data,
actionRunner,
},
@@ -119,6 +132,15 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
const [transcript, setTranscript] = useState('');
const [isModelLoading, setIsModelLoading] = useState<string | undefined>('all');
const [progressAnnotations, setProgressAnnotations] = useState<ProgressAnnotation[]>([]);
const expoUrl = useStore(expoUrlAtom);
const [qrModalOpen, setQrModalOpen] = useState(false);
useEffect(() => {
if (expoUrl) {
setQrModalOpen(true);
}
}, [expoUrl]);
useEffect(() => {
if (data) {
const progressList = data.filter(
@@ -313,7 +335,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
data-chat-visible={showChat}
>
<ClientOnly>{() => <Menu />}</ClientOnly>
<div ref={scrollRef} className="flex flex-col lg:flex-row overflow-y-auto w-full h-full">
<div className="flex flex-col lg:flex-row overflow-y-auto w-full h-full">
<div className={classNames(styles.Chat, 'flex flex-col flex-grow lg:min-w-[var(--chat-min-width)] h-full')}>
{!chatStarted && (
<div id="intro" className="mt-[16vh] max-w-chat mx-auto text-center px-4 lg:px-0">
@@ -325,30 +347,52 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
</p>
</div>
)}
<div
className={classNames('pt-6 px-2 sm:px-6', {
'h-full flex flex-col': chatStarted,
<StickToBottom
className={classNames('pt-6 px-2 sm:px-6 relative', {
'h-full flex flex-col modern-scrollbar': chatStarted,
})}
ref={scrollRef}
resize="smooth"
initial="smooth"
>
<ClientOnly>
{() => {
return chatStarted ? (
<Messages
ref={messageRef}
className="flex flex-col w-full flex-1 max-w-chat pb-6 mx-auto z-1"
messages={messages}
isStreaming={isStreaming}
/>
) : null;
}}
</ClientOnly>
<StickToBottom.Content className="flex flex-col gap-4">
<ClientOnly>
{() => {
return chatStarted ? (
<Messages
className="flex flex-col w-full flex-1 max-w-chat pb-6 mx-auto z-1"
messages={messages}
isStreaming={isStreaming}
/>
) : null;
}}
</ClientOnly>
</StickToBottom.Content>
<div
className={classNames('flex flex-col gap-4 w-full max-w-chat mx-auto z-prompt mb-6', {
className={classNames('my-auto flex flex-col gap-2 w-full max-w-chat mx-auto z-prompt mb-6', {
'sticky bottom-2': chatStarted,
})}
>
<div className="bg-bolt-elements-background-depth-2">
<div className="flex flex-col gap-2">
{deployAlert && (
<DeployChatAlert
alert={deployAlert}
clearAlert={() => clearDeployAlert?.()}
postMessage={(message: string | undefined) => {
sendMessage?.({} as any, message);
clearSupabaseAlert?.();
}}
/>
)}
{supabaseAlert && (
<SupabaseChatAlert
alert={supabaseAlert}
clearAlert={() => clearSupabaseAlert?.()}
postMessage={(message) => {
sendMessage?.({} as any, message);
clearSupabaseAlert?.();
}}
/>
)}
{actionAlert && (
<ChatAlert
alert={actionAlert}
@@ -360,10 +404,11 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
/>
)}
</div>
<ScrollToBottom />
{progressAnnotations && <ProgressCompilation data={progressAnnotations} />}
<div
className={classNames(
'bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt',
'relative bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt',
/*
* {
@@ -413,15 +458,17 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
apiKeys={apiKeys}
modelLoading={isModelLoading}
/>
{(providerList || []).length > 0 && provider && !LOCAL_PROVIDERS.includes(provider.name) && (
<APIKeyManager
provider={provider}
apiKey={apiKeys[provider.name] || ''}
setApiKey={(key) => {
onApiKeysChange(provider.name, key);
}}
/>
)}
{(providerList || []).length > 0 &&
provider &&
(!LOCAL_PROVIDERS.includes(provider.name) || 'OpenAILike') && (
<APIKeyManager
provider={provider}
apiKey={apiKeys[provider.name] || ''}
setApiKey={(key) => {
onApiKeysChange(provider.name, key);
}}
/>
)}
</div>
)}
</ClientOnly>
@@ -588,28 +635,32 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
a new line
</div>
) : null}
<SupabaseConnection />
<ExpoQrModal open={qrModalOpen} onClose={() => setQrModalOpen(false)} />
</div>
</div>
</div>
</div>
</div>
<div className="flex flex-col justify-center gap-5">
</StickToBottom>
<div className="flex flex-col justify-center">
{!chatStarted && (
<div className="flex justify-center gap-2">
{ImportButtons(importChat)}
<GitCloneButton importChat={importChat} />
</div>
)}
{!chatStarted &&
ExamplePrompts((event, messageInput) => {
if (isStreaming) {
handleStop?.();
return;
}
<div className="flex flex-col gap-5">
{!chatStarted &&
ExamplePrompts((event, messageInput) => {
if (isStreaming) {
handleStop?.();
return;
}
handleSendMessage?.(event, messageInput);
})}
{!chatStarted && <StarterTemplates />}
handleSendMessage?.(event, messageInput);
})}
{!chatStarted && <StarterTemplates />}
</div>
</div>
</div>
<ClientOnly>
@@ -628,3 +679,19 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
return <Tooltip.Provider delayDuration={200}>{baseChat}</Tooltip.Provider>;
},
);
function ScrollToBottom() {
const { isAtBottom, scrollToBottom } = useStickToBottomContext();
return (
!isAtBottom && (
<button
className="absolute z-50 top-[0%] translate-y-[-100%] text-4xl rounded-lg left-[50%] translate-x-[-50%] px-1.5 py-0.5 flex items-center gap-2 bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor text-bolt-elements-textPrimary text-sm"
onClick={() => scrollToBottom()}
>
Go to last message
<span className="i-ph:arrow-down animate-bounce" />
</button>
)
);
}

66
app/components/chat/Chat.client.tsx
View File

@@ -8,7 +8,7 @@ import { useChat } from 'ai/react';
import { useAnimate } from 'framer-motion';
import { memo, useCallback, useEffect, useRef, useState } from 'react';
import { cssTransition, toast, ToastContainer } from 'react-toastify';
import { useMessageParser, usePromptEnhancer, useShortcuts, useSnapScroll } from '~/lib/hooks';
import { useMessageParser, usePromptEnhancer, useShortcuts } from '~/lib/hooks';
import { description, useChatHistory } from '~/lib/persistence';
import { chatStore } from '~/lib/stores/chat';
import { workbenchStore } from '~/lib/stores/workbench';
@@ -26,6 +26,7 @@ import { getTemplates, selectStarterTemplate } from '~/utils/selectStarterTempla
import { logStore } from '~/lib/stores/logs';
import { streamingState } from '~/lib/stores/streaming';
import { filesToArtifacts } from '~/utils/fileUtils';
import { supabaseConnection } from '~/lib/stores/supabase';
const toastAnimation = cssTransition({
enter: 'animated fadeInRight',
@@ -80,6 +81,7 @@ export function Chat() {
position="bottom-right"
pauseOnFocusLoss
transition={toastAnimation}
autoClose={3000}
/>
</>
);
@@ -123,6 +125,12 @@ export const ChatImpl = memo(
const [fakeLoading, setFakeLoading] = useState(false);
const files = useStore(workbenchStore.files);
const actionAlert = useStore(workbenchStore.alert);
const deployAlert = useStore(workbenchStore.deployAlert);
const supabaseConn = useStore(supabaseConnection); // Add this line to get Supabase connection
const selectedProject = supabaseConn.stats?.projects?.find(
(project) => project.id === supabaseConn.selectedProjectId,
);
const supabaseAlert = useStore(workbenchStore.supabaseAlert);
const { activeProviders, promptId, autoSelectTemplate, contextOptimizationEnabled } = useSettings();
const [model, setModel] = useState(() => {
@@ -160,6 +168,14 @@ export const ChatImpl = memo(
files,
promptId,
contextOptimization: contextOptimizationEnabled,
supabase: {
isConnected: supabaseConn.isConnected,
hasSelectedProject: !!selectedProject,
credentials: {
supabaseUrl: supabaseConn?.credentials?.supabaseUrl,
anonKey: supabaseConn?.credentials?.anonKey,
},
},
},
sendExtraMessageFields: true,
onError: (e) => {
@@ -294,6 +310,9 @@ export const ChatImpl = memo(
return;
}
// If no locked items, proceed normally with the original message
const finalMessageContent = messageContent;
runAnimation();
if (!chatStarted) {
@@ -301,7 +320,7 @@ export const ChatImpl = memo(
if (autoSelectTemplate) {
const { template, title } = await selectStarterTemplate({
message: messageContent,
message: finalMessageContent,
model,
provider,
});
@@ -323,7 +342,16 @@ export const ChatImpl = memo(
{
id: `1-${new Date().getTime()}`,
role: 'user',
content: messageContent,
content: [
{
type: 'text',
text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${finalMessageContent}`,
},
...imageDataList.map((imageData) => ({
type: 'image',
image: imageData,
})),
] as any,
},
{
id: `2-${new Date().getTime()}`,
@@ -338,6 +366,15 @@ export const ChatImpl = memo(
},
]);
reload();
setInput('');
Cookies.remove(PROMPT_COOKIE_KEY);
setUploadedFiles([]);
setImageDataList([]);
resetEnhancer();
textareaRef.current?.blur();
setFakeLoading(false);
return;
@@ -353,7 +390,7 @@ export const ChatImpl = memo(
content: [
{
type: 'text',
text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${messageContent}`,
text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${finalMessageContent}`,
},
...imageDataList.map((imageData) => ({
type: 'image',
@@ -364,6 +401,15 @@ export const ChatImpl = memo(
]);
reload();
setFakeLoading(false);
setInput('');
Cookies.remove(PROMPT_COOKIE_KEY);
setUploadedFiles([]);
setImageDataList([]);
resetEnhancer();
textareaRef.current?.blur();
return;
}
@@ -383,7 +429,7 @@ export const ChatImpl = memo(
content: [
{
type: 'text',
text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${userUpdateArtifact}${messageContent}`,
text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${userUpdateArtifact}${finalMessageContent}`,
},
...imageDataList.map((imageData) => ({
type: 'image',
@@ -399,7 +445,7 @@ export const ChatImpl = memo(
content: [
{
type: 'text',
text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${messageContent}`,
text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${finalMessageContent}`,
},
...imageDataList.map((imageData) => ({
type: 'image',
@@ -440,8 +486,6 @@ export const ChatImpl = memo(
[],
);
const [messageRef, scrollRef] = useSnapScroll();
useEffect(() => {
const storedApiKeys = Cookies.get('apiKeys');
@@ -479,8 +523,6 @@ export const ChatImpl = memo(
provider={provider}
setProvider={handleProviderChange}
providerList={activeProviders}
messageRef={messageRef}
scrollRef={scrollRef}
handleInputChange={(e) => {
onTextareaChange(e);
debouncedCachePrompt(e);
@@ -517,6 +559,10 @@ export const ChatImpl = memo(
setImageDataList={setImageDataList}
actionAlert={actionAlert}
clearAlert={() => workbenchStore.clearAlert()}
supabaseAlert={supabaseAlert}
clearSupabaseAlert={() => workbenchStore.clearSupabaseAlert()}
deployAlert={deployAlert}
clearDeployAlert={() => workbenchStore.clearDeployAlert()}
data={chatData}
/>
);

11
app/components/chat/CodeBlock.tsx
View File

@@ -35,18 +35,21 @@ export const CodeBlock = memo(
};
useEffect(() => {
let effectiveLanguage = language;
if (language && !isSpecialLang(language) && !(language in bundledLanguages)) {
logger.warn(`Unsupported language '${language}'`);
logger.warn(`Unsupported language '${language}', falling back to plaintext`);
effectiveLanguage = 'plaintext';
}
logger.trace(`Language = ${language}`);
logger.trace(`Language = ${effectiveLanguage}`);
const processCode = async () => {
setHTML(await codeToHtml(code, { lang: language, theme }));
setHTML(await codeToHtml(code, { lang: effectiveLanguage, theme }));
};
processCode();
}, [code]);
}, [code, language, theme]);
return (
<div className={classNames('relative group text-left', className)}>

1
app/components/chat/ExamplePrompts.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
const EXAMPLE_PROMPTS = [
{ text: 'Create a mobile app about bolt.diy' },
{ text: 'Build a todo app in React using Tailwind' },
{ text: 'Build a simple blog using Astro' },
{ text: 'Create a cookie consent form using Material UI' },

11
app/components/chat/FilePreview.tsx
View File

@@ -12,18 +12,21 @@ const FilePreview: React.FC<FilePreviewProps> = ({ files, imageDataList, onRemov
}
return (
<div className="flex flex-row overflow-x-auto -mt-2">
<div className="flex flex-row overflow-x-auto mx-2 -mt-1 p-2 bg-bolt-elements-background-depth-3 border border-b-none border-bolt-elements-borderColor rounded-lg rounded-b-none">
{files.map((file, index) => (
<div key={file.name + file.size} className="mr-2 relative">
{imageDataList[index] && (
<div className="relative pt-4 pr-4">
<img src={imageDataList[index]} alt={file.name} className="max-h-20" />
<div className="relative">
<img src={imageDataList[index]} alt={file.name} className="max-h-20 rounded-lg" />
<button
onClick={() => onRemove(index)}
className="absolute top-1 right-1 z-10 bg-black rounded-full w-5 h-5 shadow-md hover:bg-gray-900 transition-colors flex items-center justify-center"
className="absolute -top-1 -right-1 z-10 bg-black rounded-full w-5 h-5 shadow-md hover:bg-gray-900 transition-colors flex items-center justify-center"
>
<div className="i-ph:x w-3 h-3 text-gray-200" />
</button>
<div className="absolute bottom-0 w-full h-5 flex items-center px-2 rounded-b-lg text-bolt-elements-textTertiary font-thin text-xs bg-bolt-elements-background-depth-2">
<span className="truncate">{file.name}</span>
</div>
</div>
)}
</div>

15
app/components/chat/GitCloneButton.tsx
View File

@@ -27,7 +27,8 @@ const IGNORE_PATTERNS = [
'**/npm-debug.log*',
'**/yarn-debug.log*',
'**/yarn-error.log*',
'**/*lock.json',
// Include this so npm install runs much faster '**/*lock.json',
'**/*lock.yaml',
];
@@ -70,7 +71,7 @@ export default function GitCloneButton({ importChat, className }: GitCloneButton
// Skip binary files
if (
content instanceof Uint8Array &&
!filePath.match(/\.(txt|md|astro|mjs|js|jsx|ts|tsx|json|html|css|scss|less|yml|yaml|xml|svg)$/i)
!filePath.match(/\.(txt|md|astro|mjs|js|jsx|ts|tsx|json|html|css|scss|less|yml|yaml|xml|svg|vue|svelte)$/i)
) {
skippedFiles.push(filePath);
continue;
@@ -156,13 +157,13 @@ ${escapeBoltTags(file.content)}
<Button
onClick={() => setIsDialogOpen(true)}
title="Clone a Git Repo"
variant="outline"
variant="default"
size="lg"
className={classNames(
'gap-2 bg-[#F5F5F5] dark:bg-[#252525]',
'text-bolt-elements-textPrimary dark:text-white',
'hover:bg-[#E5E5E5] dark:hover:bg-[#333333]',
'border-[#E5E5E5] dark:border-[#333333]',
'gap-2 bg-bolt-elements-background-depth-1',
'text-bolt-elements-textPrimary',
'hover:bg-bolt-elements-background-depth-2',
'border border-bolt-elements-borderColor',
'h-10 px-4 py-2 min-w-[120px] justify-center',
'transition-all duration-200 ease-in-out',
className,

10
app/components/chat/ImportFolderButton.tsx
View File

@@ -120,13 +120,13 @@ export const ImportFolderButton: React.FC<ImportFolderButtonProps> = ({ classNam
input?.click();
}}
title="Import Folder"
variant="outline"
variant="default"
size="lg"
className={classNames(
'gap-2 bg-[#F5F5F5] dark:bg-[#252525]',
'text-bolt-elements-textPrimary dark:text-white',
'hover:bg-[#E5E5E5] dark:hover:bg-[#333333]',
'border-[#E5E5E5] dark:border-[#333333]',
'gap-2 bg-bolt-elements-background-depth-1',
'text-bolt-elements-textPrimary',
'hover:bg-bolt-elements-background-depth-2',
'border border-bolt-elements-borderColor',
'h-10 px-4 py-2 min-w-[120px] justify-center',
'transition-all duration-200 ease-in-out',
className,

40
app/components/chat/Messages.client.tsx
View File

@@ -7,7 +7,6 @@ import { useLocation } from '@remix-run/react';
import { db, chatId } from '~/lib/persistence/useChatHistory';
import { forkChat } from '~/lib/persistence/db';
import { toast } from 'react-toastify';
import WithTooltip from '~/components/ui/Tooltip';
import { useStore } from '@nanostores/react';
import { profileStore } from '~/lib/stores/profile';
import { forwardRef } from 'react';
@@ -63,7 +62,7 @@ export const Messages = forwardRef<HTMLDivElement, MessagesProps>(
return (
<div
key={index}
className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.75rem-1px)]', {
className={classNames('flex gap-4 p-6 py-5 w-full rounded-[calc(0.75rem-1px)]', {
'bg-bolt-elements-messages-background': isUserMessage || !isStreaming || (isStreaming && !isLast),
'bg-gradient-to-b from-bolt-elements-messages-background from-30% to-transparent':
isStreaming && isLast,
@@ -89,42 +88,21 @@ export const Messages = forwardRef<HTMLDivElement, MessagesProps>(
{isUserMessage ? (
<UserMessage content={content} />
) : (
<AssistantMessage content={content} annotations={message.annotations} />
<AssistantMessage
content={content}
annotations={message.annotations}
messageId={messageId}
onRewind={handleRewind}
onFork={handleFork}
/>
)}
</div>
{!isUserMessage && (
<div className="flex gap-2 flex-col lg:flex-row">
{messageId && (
<WithTooltip tooltip="Revert to this message">
<button
onClick={() => handleRewind(messageId)}
key="i-ph:arrow-u-up-left"
className={classNames(
'i-ph:arrow-u-up-left',
'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
)}
/>
</WithTooltip>
)}
<WithTooltip tooltip="Fork chat from this message">
<button
onClick={() => handleFork(messageId)}
key="i-ph:git-fork"
className={classNames(
'i-ph:git-fork',
'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
)}
/>
</WithTooltip>
</div>
)}
</div>
);
})
: null}
{isStreaming && (
<div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
<div className="text-center w-full text-bolt-elements-item-contentAccent i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
)}
</div>
);

311
app/components/chat/ModelSelector.tsx
View File

@@ -3,7 +3,6 @@ import { useEffect, useState, useRef } from 'react';
import type { KeyboardEvent } from 'react';
import type { ModelInfo } from '~/lib/modules/llm/types';
import { classNames } from '~/utils/classNames';
import * as React from 'react';
interface ModelSelectorProps {
model?: string;
@@ -27,17 +26,28 @@ export const ModelSelector = ({
}: ModelSelectorProps) => {
const [modelSearchQuery, setModelSearchQuery] = useState('');
const [isModelDropdownOpen, setIsModelDropdownOpen] = useState(false);
const [focusedIndex, setFocusedIndex] = useState(-1);
const searchInputRef = useRef<HTMLInputElement>(null);
const optionsRef = useRef<(HTMLDivElement | null)[]>([]);
const dropdownRef = useRef<HTMLDivElement>(null);
const [focusedModelIndex, setFocusedModelIndex] = useState(-1);
const modelSearchInputRef = useRef<HTMLInputElement>(null);
const modelOptionsRef = useRef<(HTMLDivElement | null)[]>([]);
const modelDropdownRef = useRef<HTMLDivElement>(null);
const [providerSearchQuery, setProviderSearchQuery] = useState('');
const [isProviderDropdownOpen, setIsProviderDropdownOpen] = useState(false);
const [focusedProviderIndex, setFocusedProviderIndex] = useState(-1);
const providerSearchInputRef = useRef<HTMLInputElement>(null);
const providerOptionsRef = useRef<(HTMLDivElement | null)[]>([]);
const providerDropdownRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
if (modelDropdownRef.current && !modelDropdownRef.current.contains(event.target as Node)) {
setIsModelDropdownOpen(false);
setModelSearchQuery('');
}
if (providerDropdownRef.current && !providerDropdownRef.current.contains(event.target as Node)) {
setIsProviderDropdownOpen(false);
setProviderSearchQuery('');
}
};
document.addEventListener('mousedown', handleClickOutside);
@@ -45,7 +55,6 @@ export const ModelSelector = ({
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
// Filter models based on search query
const filteredModels = [...modelList]
.filter((e) => e.provider === provider?.name && e.name)
.filter(
@@ -54,20 +63,31 @@ export const ModelSelector = ({
model.name.toLowerCase().includes(modelSearchQuery.toLowerCase()),
);
// Reset focused index when search query changes or dropdown opens/closes
const filteredProviders = providerList.filter((p) =>
p.name.toLowerCase().includes(providerSearchQuery.toLowerCase()),
);
useEffect(() => {
setFocusedIndex(-1);
setFocusedModelIndex(-1);
}, [modelSearchQuery, isModelDropdownOpen]);
// Focus search input when dropdown opens
useEffect(() => {
if (isModelDropdownOpen && searchInputRef.current) {
searchInputRef.current.focus();
setFocusedProviderIndex(-1);
}, [providerSearchQuery, isProviderDropdownOpen]);
useEffect(() => {
if (isModelDropdownOpen && modelSearchInputRef.current) {
modelSearchInputRef.current.focus();
}
}, [isModelDropdownOpen]);
// Handle keyboard navigation
const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
useEffect(() => {
if (isProviderDropdownOpen && providerSearchInputRef.current) {
providerSearchInputRef.current.focus();
}
}, [isProviderDropdownOpen]);
const handleModelKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
if (!isModelDropdownOpen) {
return;
}
@@ -75,50 +95,30 @@ export const ModelSelector = ({
switch (e.key) {
case 'ArrowDown':
e.preventDefault();
setFocusedIndex((prev) => {
const next = prev + 1;
if (next >= filteredModels.length) {
return 0;
}
return next;
});
setFocusedModelIndex((prev) => (prev + 1 >= filteredModels.length ? 0 : prev + 1));
break;
case 'ArrowUp':
e.preventDefault();
setFocusedIndex((prev) => {
const next = prev - 1;
if (next < 0) {
return filteredModels.length - 1;
}
return next;
});
setFocusedModelIndex((prev) => (prev - 1 < 0 ? filteredModels.length - 1 : prev - 1));
break;
case 'Enter':
e.preventDefault();
if (focusedIndex >= 0 && focusedIndex < filteredModels.length) {
const selectedModel = filteredModels[focusedIndex];
if (focusedModelIndex >= 0 && focusedModelIndex < filteredModels.length) {
const selectedModel = filteredModels[focusedModelIndex];
setModel?.(selectedModel.name);
setIsModelDropdownOpen(false);
setModelSearchQuery('');
}
break;
case 'Escape':
e.preventDefault();
setIsModelDropdownOpen(false);
setModelSearchQuery('');
break;
case 'Tab':
if (!e.shiftKey && focusedIndex === filteredModels.length - 1) {
if (!e.shiftKey && focusedModelIndex === filteredModels.length - 1) {
setIsModelDropdownOpen(false);
}
@@ -126,25 +126,76 @@ export const ModelSelector = ({
}
};
// Focus the selected option
useEffect(() => {
if (focusedIndex >= 0 && optionsRef.current[focusedIndex]) {
optionsRef.current[focusedIndex]?.scrollIntoView({ block: 'nearest' });
const handleProviderKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
if (!isProviderDropdownOpen) {
return;
}
}, [focusedIndex]);
// Update enabled providers when cookies change
switch (e.key) {
case 'ArrowDown':
e.preventDefault();
setFocusedProviderIndex((prev) => (prev + 1 >= filteredProviders.length ? 0 : prev + 1));
break;
case 'ArrowUp':
e.preventDefault();
setFocusedProviderIndex((prev) => (prev - 1 < 0 ? filteredProviders.length - 1 : prev - 1));
break;
case 'Enter':
e.preventDefault();
if (focusedProviderIndex >= 0 && focusedProviderIndex < filteredProviders.length) {
const selectedProvider = filteredProviders[focusedProviderIndex];
if (setProvider) {
setProvider(selectedProvider);
const firstModel = modelList.find((m) => m.provider === selectedProvider.name);
if (firstModel && setModel) {
setModel(firstModel.name);
}
}
setIsProviderDropdownOpen(false);
setProviderSearchQuery('');
}
break;
case 'Escape':
e.preventDefault();
setIsProviderDropdownOpen(false);
setProviderSearchQuery('');
break;
case 'Tab':
if (!e.shiftKey && focusedProviderIndex === filteredProviders.length - 1) {
setIsProviderDropdownOpen(false);
}
break;
}
};
useEffect(() => {
if (focusedModelIndex >= 0 && modelOptionsRef.current[focusedModelIndex]) {
modelOptionsRef.current[focusedModelIndex]?.scrollIntoView({ block: 'nearest' });
}
}, [focusedModelIndex]);
useEffect(() => {
if (focusedProviderIndex >= 0 && providerOptionsRef.current[focusedProviderIndex]) {
providerOptionsRef.current[focusedProviderIndex]?.scrollIntoView({ block: 'nearest' });
}
}, [focusedProviderIndex]);
useEffect(() => {
// If current provider is disabled, switch to first enabled provider
if (providerList.length === 0) {
return;
}
if (provider && !providerList.map((p) => p.name).includes(provider.name)) {
if (provider && !providerList.some((p) => p.name === provider.name)) {
const firstEnabledProvider = providerList[0];
setProvider?.(firstEnabledProvider);
// Also update the model to the first available one for the new provider
const firstModel = modelList.find((m) => m.provider === firstEnabledProvider.name);
if (firstModel) {
@@ -165,32 +216,136 @@ export const ModelSelector = ({
}
return (
<div className="mb-2 flex gap-2 flex-col sm:flex-row">
<select
value={provider?.name ?? ''}
onChange={(e) => {
const newProvider = providerList.find((p: ProviderInfo) => p.name === e.target.value);
<div className="flex gap-2 flex-col sm:flex-row">
{/* Provider Combobox */}
<div className="relative flex w-full" onKeyDown={handleProviderKeyDown} ref={providerDropdownRef}>
<div
className={classNames(
'w-full p-2 rounded-lg border border-bolt-elements-borderColor',
'bg-bolt-elements-prompt-background text-bolt-elements-textPrimary',
'focus-within:outline-none focus-within:ring-2 focus-within:ring-bolt-elements-focus',
'transition-all cursor-pointer',
isProviderDropdownOpen ? 'ring-2 ring-bolt-elements-focus' : undefined,
)}
onClick={() => setIsProviderDropdownOpen(!isProviderDropdownOpen)}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
setIsProviderDropdownOpen(!isProviderDropdownOpen);
}
}}
role="combobox"
aria-expanded={isProviderDropdownOpen}
aria-controls="provider-listbox"
aria-haspopup="listbox"
tabIndex={0}
>
<div className="flex items-center justify-between">
<div className="truncate">{provider?.name || 'Select provider'}</div>
<div
className={classNames(
'i-ph:caret-down w-4 h-4 text-bolt-elements-textSecondary opacity-75',
isProviderDropdownOpen ? 'rotate-180' : undefined,
)}
/>
</div>
</div>
if (newProvider && setProvider) {
setProvider(newProvider);
}
{isProviderDropdownOpen && (
<div
className="absolute z-20 w-full mt-1 py-1 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 shadow-lg"
role="listbox"
id="provider-listbox"
>
<div className="px-2 pb-2">
<div className="relative">
<input
ref={providerSearchInputRef}
type="text"
value={providerSearchQuery}
onChange={(e) => setProviderSearchQuery(e.target.value)}
placeholder="Search providers..."
className={classNames(
'w-full pl-2 py-1.5 rounded-md text-sm',
'bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor',
'text-bolt-elements-textPrimary placeholder:text-bolt-elements-textTertiary',
'focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus',
'transition-all',
)}
onClick={(e) => e.stopPropagation()}
role="searchbox"
aria-label="Search providers"
/>
<div className="absolute left-2.5 top-1/2 -translate-y-1/2">
<span className="i-ph:magnifying-glass text-bolt-elements-textTertiary" />
</div>
</div>
</div>
const firstModel = [...modelList].find((m) => m.provider === e.target.value);
<div
className={classNames(
'max-h-60 overflow-y-auto',
'sm:scrollbar-none',
'[&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:h-2',
'[&::-webkit-scrollbar-thumb]:bg-bolt-elements-borderColor',
'[&::-webkit-scrollbar-thumb]:hover:bg-bolt-elements-borderColorHover',
'[&::-webkit-scrollbar-thumb]:rounded-full',
'[&::-webkit-scrollbar-track]:bg-bolt-elements-background-depth-2',
'[&::-webkit-scrollbar-track]:rounded-full',
'sm:[&::-webkit-scrollbar]:w-1.5 sm:[&::-webkit-scrollbar]:h-1.5',
'sm:hover:[&::-webkit-scrollbar-thumb]:bg-bolt-elements-borderColor/50',
'sm:hover:[&::-webkit-scrollbar-thumb:hover]:bg-bolt-elements-borderColor',
'sm:[&::-webkit-scrollbar-track]:bg-transparent',
)}
>
{filteredProviders.length === 0 ? (
<div className="px-3 py-2 text-sm text-bolt-elements-textTertiary">No providers found</div>
) : (
filteredProviders.map((providerOption, index) => (
<div
ref={(el) => (providerOptionsRef.current[index] = el)}
key={providerOption.name}
role="option"
aria-selected={provider?.name === providerOption.name}
className={classNames(
'px-3 py-2 text-sm cursor-pointer',
'hover:bg-bolt-elements-background-depth-3',
'text-bolt-elements-textPrimary',
'outline-none',
provider?.name === providerOption.name || focusedProviderIndex === index
? 'bg-bolt-elements-background-depth-2'
: undefined,
focusedProviderIndex === index ? 'ring-1 ring-inset ring-bolt-elements-focus' : undefined,
)}
onClick={(e) => {
e.stopPropagation();
if (firstModel && setModel) {
setModel(firstModel.name);
}
}}
className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all"
>
{providerList.map((provider: ProviderInfo) => (
<option key={provider.name} value={provider.name}>
{provider.name}
</option>
))}
</select>
if (setProvider) {
setProvider(providerOption);
<div className="relative flex-1 lg:max-w-[70%]" onKeyDown={handleKeyDown} ref={dropdownRef}>
const firstModel = modelList.find((m) => m.provider === providerOption.name);
if (firstModel && setModel) {
setModel(firstModel.name);
}
}
setIsProviderDropdownOpen(false);
setProviderSearchQuery('');
}}
tabIndex={focusedProviderIndex === index ? 0 : -1}
>
{providerOption.name}
</div>
))
)}
</div>
</div>
)}
</div>
{/* Model Combobox */}
<div className="relative flex w-full min-w-[70%]" onKeyDown={handleModelKeyDown} ref={modelDropdownRef}>
<div
className={classNames(
'w-full p-2 rounded-lg border border-bolt-elements-borderColor',
@@ -225,20 +380,20 @@ export const ModelSelector = ({
{isModelDropdownOpen && (
<div
className="absolute z-10 w-full mt-1 py-1 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 shadow-lg"
className="absolute z-10 w-full mt-1 py-1 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 shadow-lg"
role="listbox"
id="model-listbox"
>
<div className="px-2 pb-2">
<div className="relative">
<input
ref={searchInputRef}
ref={modelSearchInputRef}
type="text"
value={modelSearchQuery}
onChange={(e) => setModelSearchQuery(e.target.value)}
placeholder="Search models..."
className={classNames(
'w-full pl-8 pr-3 py-1.5 rounded-md text-sm',
'w-full pl-2 py-1.5 rounded-md text-sm',
'bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor',
'text-bolt-elements-textPrimary placeholder:text-bolt-elements-textTertiary',
'focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus',
@@ -277,8 +432,8 @@ export const ModelSelector = ({
) : (
filteredModels.map((modelOption, index) => (
<div
ref={(el) => (optionsRef.current[index] = el)}
key={index}
ref={(el) => (modelOptionsRef.current[index] = el)}
key={index} // Consider using modelOption.name if unique
role="option"
aria-selected={model === modelOption.name}
className={classNames(
@@ -286,10 +441,10 @@ export const ModelSelector = ({
'hover:bg-bolt-elements-background-depth-3',
'text-bolt-elements-textPrimary',
'outline-none',
model === modelOption.name || focusedIndex === index
model === modelOption.name || focusedModelIndex === index
? 'bg-bolt-elements-background-depth-2'
: undefined,
focusedIndex === index ? 'ring-1 ring-inset ring-bolt-elements-focus' : undefined,
focusedModelIndex === index ? 'ring-1 ring-inset ring-bolt-elements-focus' : undefined,
)}
onClick={(e) => {
e.stopPropagation();
@@ -297,7 +452,7 @@ export const ModelSelector = ({
setIsModelDropdownOpen(false);
setModelSearchQuery('');
}}
tabIndex={focusedIndex === index ? 0 : -1}
tabIndex={focusedModelIndex === index ? 0 : -1}
>
{modelOption.label}
</div>

4
app/components/chat/NetlifyDeploymentLink.client.tsx
View File

@@ -30,10 +30,10 @@ export function NetlifyDeploymentLink() {
rel="noopener noreferrer"
className="inline-flex items-center justify-center w-8 h-8 rounded hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-textSecondary hover:text-[#00AD9F] z-50"
onClick={(e) => {
e.stopPropagation(); // Add this to prevent click from bubbling up
e.stopPropagation(); // This is to prevent click from bubbling up
}}
>
<div className="i-ph:rocket-launch w-5 h-5" />
<div className="i-ph:link w-4 h-4 hover:text-blue-400" />
</a>
</Tooltip.Trigger>
<Tooltip.Portal>

10
app/components/chat/StarterTemplates.tsx
View File

@@ -21,19 +21,11 @@ const FrameworkLink: React.FC<FrameworkLinkProps> = ({ template }) => (
);
const StarterTemplates: React.FC = () => {
// Debug: Log available templates and their icons
React.useEffect(() => {
console.log(
'Available templates:',
STARTER_TEMPLATES.map((t) => ({ name: t.name, icon: t.icon })),
);
}, []);
return (
<div className="flex flex-col items-center gap-4">
<span className="text-sm text-gray-500">or start a blank app with your favorite stack</span>
<div className="flex justify-center">
<div className="flex w-70 flex-wrap items-center justify-center gap-4">
<div className="flex flex-wrap justify-center items-center gap-4 max-w-sm">
{STARTER_TEMPLATES.map((template) => (
<FrameworkLink key={template.name} template={template} />
))}

199
app/components/chat/SupabaseAlert.tsx Normal file
View File

@@ -0,0 +1,199 @@
import { AnimatePresence, motion } from 'framer-motion';
import type { SupabaseAlert } from '~/types/actions';
import { classNames } from '~/utils/classNames';
import { supabaseConnection } from '~/lib/stores/supabase';
import { useStore } from '@nanostores/react';
import { useState } from 'react';
interface Props {
alert: SupabaseAlert;
clearAlert: () => void;
postMessage: (message: string) => void;
}
export function SupabaseChatAlert({ alert, clearAlert, postMessage }: Props) {
const { content } = alert;
const connection = useStore(supabaseConnection);
const [isExecuting, setIsExecuting] = useState(false);
const [isCollapsed, setIsCollapsed] = useState(true);
// Determine connection state
const isConnected = !!(connection.token && connection.selectedProjectId);
// Set title and description based on connection state
const title = isConnected ? 'Supabase Query' : 'Supabase Connection Required';
const description = isConnected ? 'Execute database query' : 'Supabase connection required';
const message = isConnected
? 'Please review the proposed changes and apply them to your database.'
: 'Please connect to Supabase to continue with this operation.';
const handleConnectClick = () => {
// Dispatch an event to open the Supabase connection dialog
document.dispatchEvent(new CustomEvent('open-supabase-connection'));
};
// Determine if we should show the Connect button or Apply Changes button
const showConnectButton = !isConnected;
const executeSupabaseAction = async (sql: string) => {
if (!connection.token || !connection.selectedProjectId) {
console.error('No Supabase token or project selected');
return;
}
setIsExecuting(true);
try {
const response = await fetch('/api/supabase/query', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${connection.token}`,
},
body: JSON.stringify({
projectId: connection.selectedProjectId,
query: sql,
}),
});
if (!response.ok) {
const errorData = (await response.json()) as any;
throw new Error(`Supabase query failed: ${errorData.error?.message || response.statusText}`);
}
const result = await response.json();
console.log('Supabase query executed successfully:', result);
clearAlert();
} catch (error) {
console.error('Failed to execute Supabase action:', error);
postMessage(
`*Error executing Supabase query please fix and return the query again*\n\`\`\`\n${error instanceof Error ? error.message : String(error)}\n\`\`\`\n`,
);
} finally {
setIsExecuting(false);
}
};
const cleanSqlContent = (content: string) => {
if (!content) {
return '';
}
let cleaned = content.replace(/\/\*[\s\S]*?\*\//g, '');
cleaned = cleaned.replace(/(--).*$/gm, '').replace(/(#).*$/gm, '');
const statements = cleaned
.split(';')
.map((stmt) => stmt.trim())
.filter((stmt) => stmt.length > 0)
.join(';\n\n');
return statements;
};
return (
<AnimatePresence>
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.3 }}
className="max-w-chat rounded-lg border-l-2 border-l-[#098F5F] border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2"
>
{/* Header */}
<div className="p-4 pb-2">
<div className="flex items-center gap-2">
<img height="10" width="18" crossOrigin="anonymous" src="https://cdn.simpleicons.org/supabase" />
<h3 className="text-sm font-medium text-[#3DCB8F]">{title}</h3>
</div>
</div>
{/* SQL Content */}
<div className="px-4">
{!isConnected ? (
<div className="p-3 rounded-md bg-bolt-elements-background-depth-3">
<span className="text-sm text-bolt-elements-textPrimary">
You must first connect to Supabase and select a project.
</span>
</div>
) : (
<>
<div
className="flex items-center p-2 rounded-md bg-bolt-elements-background-depth-3 cursor-pointer"
onClick={() => setIsCollapsed(!isCollapsed)}
>
<div className="i-ph:database text-bolt-elements-textPrimary mr-2"></div>
<span className="text-sm text-bolt-elements-textPrimary flex-grow">
{description || 'Create table and setup auth'}
</span>
<div
className={`i-ph:caret-up text-bolt-elements-textPrimary transition-transform ${isCollapsed ? 'rotate-180' : ''}`}
></div>
</div>
{!isCollapsed && content && (
<div className="mt-2 p-3 bg-bolt-elements-background-depth-4 rounded-md overflow-auto max-h-60 font-mono text-xs text-bolt-elements-textSecondary">
<pre>{cleanSqlContent(content)}</pre>
</div>
)}
</>
)}
</div>
{/* Message and Actions */}
<div className="p-4">
<p className="text-sm text-bolt-elements-textSecondary mb-4">{message}</p>
<div className="flex gap-2">
{showConnectButton ? (
<button
onClick={handleConnectClick}
className={classNames(
`px-3 py-2 rounded-md text-sm font-medium`,
'bg-[#098F5F]',
'hover:bg-[#0aa06c]',
'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500',
'text-white',
'flex items-center gap-1.5',
)}
>
Connect to Supabase
</button>
) : (
<button
onClick={() => executeSupabaseAction(content)}
disabled={isExecuting}
className={classNames(
`px-3 py-2 rounded-md text-sm font-medium`,
'bg-[#098F5F]',
'hover:bg-[#0aa06c]',
'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500',
'text-white',
'flex items-center gap-1.5',
isExecuting ? 'opacity-70 cursor-not-allowed' : '',
)}
>
{isExecuting ? 'Applying...' : 'Apply Changes'}
</button>
)}
<button
onClick={clearAlert}
disabled={isExecuting}
className={classNames(
`px-3 py-2 rounded-md text-sm font-medium`,
'bg-[#503B26]',
'hover:bg-[#774f28]',
'focus:outline-none',
'text-[#F79007]',
isExecuting ? 'opacity-70 cursor-not-allowed' : '',
)}
>
Dismiss
</button>
</div>
</div>
</motion.div>
</AnimatePresence>
);
}

339
app/components/chat/SupabaseConnection.tsx Normal file
View File

@@ -0,0 +1,339 @@
import { useEffect } from 'react';
import { useSupabaseConnection } from '~/lib/hooks/useSupabaseConnection';
import { classNames } from '~/utils/classNames';
import { useStore } from '@nanostores/react';
import { chatId } from '~/lib/persistence/useChatHistory';
import { fetchSupabaseStats } from '~/lib/stores/supabase';
import { Dialog, DialogRoot, DialogClose, DialogTitle, DialogButton } from '~/components/ui/Dialog';
export function SupabaseConnection() {
const {
connection: supabaseConn,
connecting,
fetchingStats,
isProjectsExpanded,
setIsProjectsExpanded,
isDropdownOpen: isDialogOpen,
setIsDropdownOpen: setIsDialogOpen,
handleConnect,
handleDisconnect,
selectProject,
handleCreateProject,
updateToken,
isConnected,
fetchProjectApiKeys,
} = useSupabaseConnection();
const currentChatId = useStore(chatId);
useEffect(() => {
const handleOpenConnectionDialog = () => {
setIsDialogOpen(true);
};
document.addEventListener('open-supabase-connection', handleOpenConnectionDialog);
return () => {
document.removeEventListener('open-supabase-connection', handleOpenConnectionDialog);
};
}, [setIsDialogOpen]);
useEffect(() => {
if (isConnected && currentChatId) {
const savedProjectId = localStorage.getItem(`supabase-project-${currentChatId}`);
/*
* If there's no saved project for this chat but there is a global selected project,
* use the global one instead of clearing it
*/
if (!savedProjectId && supabaseConn.selectedProjectId) {
// Save the current global project to this chat
localStorage.setItem(`supabase-project-${currentChatId}`, supabaseConn.selectedProjectId);
} else if (savedProjectId && savedProjectId !== supabaseConn.selectedProjectId) {
selectProject(savedProjectId);
}
}
}, [isConnected, currentChatId]);
useEffect(() => {
if (currentChatId && supabaseConn.selectedProjectId) {
localStorage.setItem(`supabase-project-${currentChatId}`, supabaseConn.selectedProjectId);
} else if (currentChatId && !supabaseConn.selectedProjectId) {
localStorage.removeItem(`supabase-project-${currentChatId}`);
}
}, [currentChatId, supabaseConn.selectedProjectId]);
useEffect(() => {
if (isConnected && supabaseConn.token) {
fetchSupabaseStats(supabaseConn.token).catch(console.error);
}
}, [isConnected, supabaseConn.token]);
useEffect(() => {
if (isConnected && supabaseConn.selectedProjectId && supabaseConn.token && !supabaseConn.credentials) {
fetchProjectApiKeys(supabaseConn.selectedProjectId).catch(console.error);
}
}, [isConnected, supabaseConn.selectedProjectId, supabaseConn.token, supabaseConn.credentials]);
return (
<div className="relative">
<div className="flex border border-bolt-elements-borderColor rounded-md overflow-hidden mr-2 text-sm">
<Button
active
disabled={connecting}
onClick={() => setIsDialogOpen(!isDialogOpen)}
className="hover:bg-bolt-elements-item-backgroundActive !text-white flex items-center gap-2"
>
<img
className="w-4 h-4"
height="20"
width="20"
crossOrigin="anonymous"
src="https://cdn.simpleicons.org/supabase"
/>
{isConnected && supabaseConn.project && (
<span className="ml-1 text-xs max-w-[100px] truncate">{supabaseConn.project.name}</span>
)}
</Button>
</div>
<DialogRoot open={isDialogOpen} onOpenChange={setIsDialogOpen}>
{isDialogOpen && (
<Dialog className="max-w-[520px] p-6">
{!isConnected ? (
<div className="space-y-4">
<DialogTitle>
<img
className="w-5 h-5"
height="24"
width="24"
crossOrigin="anonymous"
src="https://cdn.simpleicons.org/supabase"
/>
Connect to Supabase
</DialogTitle>
<div>
<label className="block text-sm text-bolt-elements-textSecondary mb-2">Access Token</label>
<input
type="password"
value={supabaseConn.token}
onChange={(e) => updateToken(e.target.value)}
disabled={connecting}
placeholder="Enter your Supabase access 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-[#3ECF8E]',
'disabled:opacity-50',
)}
/>
<div className="mt-2 text-sm text-bolt-elements-textSecondary">
<a
href="https://app.supabase.com/account/tokens"
target="_blank"
rel="noopener noreferrer"
className="text-[#3ECF8E] hover:underline inline-flex items-center gap-1"
>
Get your token
<div className="i-ph:arrow-square-out w-4 h-4" />
</a>
</div>
</div>
<div className="flex justify-end gap-2 mt-6">
<DialogClose asChild>
<DialogButton type="secondary">Cancel</DialogButton>
</DialogClose>
<button
onClick={handleConnect}
disabled={connecting || !supabaseConn.token}
className={classNames(
'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
'bg-[#3ECF8E] text-white',
'hover:bg-[#3BBF84]',
'disabled:opacity-50 disabled:cursor-not-allowed',
)}
>
{connecting ? (
<>
<div className="i-ph:spinner-gap animate-spin" />
Connecting...
</>
) : (
<>
<div className="i-ph:plug-charging w-4 h-4" />
Connect
</>
)}
</button>
</div>
</div>
) : (
<div className="space-y-4">
<div className="flex items-center justify-between mb-2">
<DialogTitle>
<img
className="w-5 h-5"
height="24"
width="24"
crossOrigin="anonymous"
src="https://cdn.simpleicons.org/supabase"
/>
Supabase Connection
</DialogTitle>
</div>
<div className="flex items-center gap-4 p-3 bg-[#F8F8F8] dark:bg-[#1A1A1A] rounded-lg">
<div>
<h4 className="text-sm font-medium text-bolt-elements-textPrimary">{supabaseConn.user?.email}</h4>
<p className="text-xs text-bolt-elements-textSecondary">Role: {supabaseConn.user?.role}</p>
</div>
</div>
{fetchingStats ? (
<div className="flex items-center gap-2 text-sm text-bolt-elements-textSecondary">
<div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
Fetching projects...
</div>
) : (
<div>
<div className="flex items-center justify-between mb-2">
<button
onClick={() => setIsProjectsExpanded(!isProjectsExpanded)}
className="bg-transparent text-left text-sm font-medium text-bolt-elements-textPrimary flex items-center gap-2"
>
<div className="i-ph:database w-4 h-4" />
Your Projects ({supabaseConn.stats?.totalProjects || 0})
<div
className={classNames(
'i-ph:caret-down w-4 h-4 transition-transform',
isProjectsExpanded ? 'rotate-180' : '',
)}
/>
</button>
<div className="flex items-center gap-2">
<button
onClick={() => fetchSupabaseStats(supabaseConn.token)}
className="px-2 py-1 rounded-md text-xs bg-[#F0F0F0] dark:bg-[#252525] text-bolt-elements-textSecondary hover:bg-[#E5E5E5] dark:hover:bg-[#333333] flex items-center gap-1"
title="Refresh projects list"
>
<div className="i-ph:arrows-clockwise w-3 h-3" />
Refresh
</button>
<button
onClick={() => handleCreateProject()}
className="px-2 py-1 rounded-md text-xs bg-[#3ECF8E] text-white hover:bg-[#3BBF84] flex items-center gap-1"
>
<div className="i-ph:plus w-3 h-3" />
New Project
</button>
</div>
</div>
{isProjectsExpanded && (
<>
{!supabaseConn.selectedProjectId && (
<div className="mb-2 p-3 bg-[#F8F8F8] dark:bg-[#1A1A1A] rounded-lg text-sm text-bolt-elements-textSecondary">
Select a project or create a new one for this chat
</div>
)}
{supabaseConn.stats?.projects?.length ? (
<div className="grid gap-2 max-h-60 overflow-y-auto">
{supabaseConn.stats.projects.map((project) => (
<div
key={project.id}
className="block p-3 rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-[#3ECF8E] dark:hover:border-[#3ECF8E] transition-colors"
>
<div className="flex items-center justify-between">
<div>
<h5 className="text-sm font-medium text-bolt-elements-textPrimary flex items-center gap-1">
<div className="i-ph:database w-3 h-3 text-[#3ECF8E]" />
{project.name}
</h5>
<div className="text-xs text-bolt-elements-textSecondary mt-1">
{project.region}
</div>
</div>
<button
onClick={() => selectProject(project.id)}
className={classNames(
'px-3 py-1 rounded-md text-xs',
supabaseConn.selectedProjectId === project.id
? 'bg-[#3ECF8E] text-white'
: 'bg-[#F0F0F0] dark:bg-[#252525] text-bolt-elements-textSecondary hover:bg-[#3ECF8E] hover:text-white',
)}
>
{supabaseConn.selectedProjectId === project.id ? (
<span className="flex items-center gap-1">
<div className="i-ph:check w-3 h-3" />
Selected
</span>
) : (
'Select'
)}
</button>
</div>
</div>
))}
</div>
) : (
<div className="text-sm text-bolt-elements-textSecondary flex items-center gap-2">
<div className="i-ph:info w-4 h-4" />
No projects found
</div>
)}
</>
)}
</div>
)}
<div className="flex justify-end gap-2 mt-6">
<DialogClose asChild>
<DialogButton type="secondary">Close</DialogButton>
</DialogClose>
<DialogButton type="danger" onClick={handleDisconnect}>
<div className="i-ph:plugs w-4 h-4" />
Disconnect
</DialogButton>
</div>
</div>
)}
</Dialog>
)}
</DialogRoot>
</div>
);
}
interface ButtonProps {
active?: boolean;
disabled?: boolean;
children?: any;
onClick?: VoidFunction;
className?: string;
}
function Button({ active = false, disabled = false, children, onClick, className }: ButtonProps) {
return (
<button
className={classNames(
'flex items-center p-1.5',
{
'bg-bolt-elements-item-backgroundDefault hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary':
!active,
'bg-bolt-elements-item-backgroundDefault text-bolt-elements-item-contentAccent': active && !disabled,
'bg-bolt-elements-item-backgroundDefault text-alpha-gray-20 dark:text-alpha-white-20 cursor-not-allowed':
disabled,
},
className,
)}
onClick={onClick}
>
{children}
</button>
);
}

2
app/components/chat/UserMessage.tsx
View File

@@ -16,7 +16,7 @@ export function UserMessage({ content }: UserMessageProps) {
const images = content.filter((item) => item.type === 'image' && item.image);
return (
<div className="overflow-hidden pt-[4px]">
<div className="overflow-hidden flex items-center">
<div className="flex flex-col gap-4">
{textContent && <Markdown html>{textContent}</Markdown>}
{images.map((item, index) => (

158
app/components/chat/VercelDeploymentLink.client.tsx Normal file
View File

@@ -0,0 +1,158 @@
import { useStore } from '@nanostores/react';
import { vercelConnection } from '~/lib/stores/vercel';
import { chatId } from '~/lib/persistence/useChatHistory';
import * as Tooltip from '@radix-ui/react-tooltip';
import { useEffect, useState } from 'react';
export function VercelDeploymentLink() {
const connection = useStore(vercelConnection);
const currentChatId = useStore(chatId);
const [deploymentUrl, setDeploymentUrl] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
async function fetchProjectData() {
if (!connection.token || !currentChatId) {
return;
}
// Check if we have a stored project ID for this chat
const projectId = localStorage.getItem(`vercel-project-${currentChatId}`);
if (!projectId) {
return;
}
setIsLoading(true);
try {
// Fetch projects directly from the API
const projectsResponse = await fetch('https://api.vercel.com/v9/projects', {
headers: {
Authorization: `Bearer ${connection.token}`,
'Content-Type': 'application/json',
},
cache: 'no-store',
});
if (!projectsResponse.ok) {
throw new Error(`Failed to fetch projects: ${projectsResponse.status}`);
}
const projectsData = (await projectsResponse.json()) as any;
const projects = projectsData.projects || [];
// Extract the chat number from currentChatId
const chatNumber = currentChatId.split('-')[0];
// Find project by matching the chat number in the name
const project = projects.find((p: { name: string | string[] }) => p.name.includes(`bolt-diy-${chatNumber}`));
if (project) {
// Fetch project details including deployments
const projectDetailsResponse = await fetch(`https://api.vercel.com/v9/projects/${project.id}`, {
headers: {
Authorization: `Bearer ${connection.token}`,
'Content-Type': 'application/json',
},
cache: 'no-store',
});
if (projectDetailsResponse.ok) {
const projectDetails = (await projectDetailsResponse.json()) as any;
// Try to get URL from production aliases first
if (projectDetails.targets?.production?.alias && projectDetails.targets.production.alias.length > 0) {
// Find the clean URL (without -projects.vercel.app)
const cleanUrl = projectDetails.targets.production.alias.find(
(a: string) => a.endsWith('.vercel.app') && !a.includes('-projects.vercel.app'),
);
if (cleanUrl) {
setDeploymentUrl(`https://${cleanUrl}`);
return;
} else {
// If no clean URL found, use the first alias
setDeploymentUrl(`https://${projectDetails.targets.production.alias[0]}`);
return;
}
}
}
// If no aliases or project details failed, try fetching deployments
const deploymentsResponse = await fetch(
`https://api.vercel.com/v6/deployments?projectId=${project.id}&limit=1`,
{
headers: {
Authorization: `Bearer ${connection.token}`,
'Content-Type': 'application/json',
},
cache: 'no-store',
},
);
if (deploymentsResponse.ok) {
const deploymentsData = (await deploymentsResponse.json()) as any;
if (deploymentsData.deployments && deploymentsData.deployments.length > 0) {
setDeploymentUrl(`https://${deploymentsData.deployments[0].url}`);
return;
}
}
}
// Fallback to API call if not found in fetched projects
const fallbackResponse = await fetch(`/api/vercel-deploy?projectId=${projectId}&token=${connection.token}`, {
method: 'GET',
});
const data = await fallbackResponse.json();
if ((data as { deploy?: { url?: string } }).deploy?.url) {
setDeploymentUrl((data as { deploy: { url: string } }).deploy.url);
} else if ((data as { project?: { url?: string } }).project?.url) {
setDeploymentUrl((data as { project: { url: string } }).project.url);
}
} catch (err) {
console.error('Error fetching Vercel deployment:', err);
} finally {
setIsLoading(false);
}
}
fetchProjectData();
}, [connection.token, currentChatId]);
if (!deploymentUrl) {
return null;
}
return (
<Tooltip.Provider>
<Tooltip.Root>
<Tooltip.Trigger asChild>
<a
href={deploymentUrl}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center justify-center w-8 h-8 rounded hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-textSecondary hover:text-[#000000] z-50"
onClick={(e) => {
e.stopPropagation();
}}
>
<div className={`i-ph:link w-4 h-4 hover:text-blue-400 ${isLoading ? 'animate-pulse' : ''}`} />
</a>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content
className="px-3 py-2 rounded bg-bolt-elements-background-depth-3 text-bolt-elements-textPrimary text-xs z-50"
sideOffset={5}
>
{deploymentUrl}
<Tooltip.Arrow className="fill-bolt-elements-background-depth-3" />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</Tooltip.Provider>
);
}

18
app/components/chat/chatExportAndImport/ImportButtons.tsx
View File

@@ -64,13 +64,13 @@ export function ImportButtons(importChat: ((description: string, messages: Messa
const input = document.getElementById('chat-import');
input?.click();
}}
variant="outline"
variant="default"
size="lg"
className={classNames(
'gap-2 bg-[#F5F5F5] dark:bg-[#252525]',
'text-bolt-elements-textPrimary dark:text-white',
'hover:bg-[#E5E5E5] dark:hover:bg-[#333333]',
'border-[#E5E5E5] dark:border-[#333333]',
'gap-2 bg-bolt-elements-background-depth-1',
'text-bolt-elements-textPrimary',
'hover:bg-bolt-elements-background-depth-2',
'border border-bolt-elements-borderColor',
'h-10 px-4 py-2 min-w-[120px] justify-center',
'transition-all duration-200 ease-in-out',
)}
@@ -81,10 +81,10 @@ export function ImportButtons(importChat: ((description: string, messages: Messa
<ImportFolderButton
importChat={importChat}
className={classNames(
'gap-2 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]',
'gap-2 bg-bolt-elements-background-depth-1',
'text-bolt-elements-textPrimary',
'hover:bg-bolt-elements-background-depth-2',
'border border-[rgba(0,0,0,0.08)] dark:border-[rgba(255,255,255,0.08)]',
'h-10 px-4 py-2 min-w-[120px] justify-center',
'transition-all duration-200 ease-in-out rounded-lg',
)}

197
app/components/deploy/DeployAlert.tsx Normal file
View File

@@ -0,0 +1,197 @@
import { AnimatePresence, motion } from 'framer-motion';
import { classNames } from '~/utils/classNames';
import type { DeployAlert } from '~/types/actions';
interface DeployAlertProps {
alert: DeployAlert;
clearAlert: () => void;
postMessage: (message: string) => void;
}
export default function DeployChatAlert({ alert, clearAlert, postMessage }: DeployAlertProps) {
const { type, title, description, content, url, stage, buildStatus, deployStatus } = alert;
// Determine if we should show the deployment progress
const showProgress = stage && (buildStatus || deployStatus);
return (
<AnimatePresence>
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.3 }}
className={`rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 p-4 mb-2`}
>
<div className="flex items-start">
{/* Icon */}
<motion.div
className="flex-shrink-0"
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ delay: 0.2 }}
>
<div
className={classNames(
'text-xl',
type === 'success'
? 'i-ph:check-circle-duotone text-bolt-elements-icon-success'
: type === 'error'
? 'i-ph:warning-duotone text-bolt-elements-button-danger-text'
: 'i-ph:info-duotone text-bolt-elements-loader-progress',
)}
></div>
</motion.div>
{/* Content */}
<div className="ml-3 flex-1">
<motion.h3
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.1 }}
className={`text-sm font-medium text-bolt-elements-textPrimary`}
>
{title}
</motion.h3>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.2 }}
className={`mt-2 text-sm text-bolt-elements-textSecondary`}
>
<p>{description}</p>
{/* Deployment Progress Visualization */}
{showProgress && (
<div className="mt-4 mb-2">
<div className="flex items-center space-x-2 mb-3">
{/* Build Step */}
<div className="flex items-center">
<div
className={classNames(
'w-6 h-6 rounded-full flex items-center justify-center',
buildStatus === 'running'
? 'bg-bolt-elements-loader-progress'
: buildStatus === 'complete'
? 'bg-bolt-elements-icon-success'
: buildStatus === 'failed'
? 'bg-bolt-elements-button-danger-background'
: 'bg-bolt-elements-textTertiary',
)}
>
{buildStatus === 'running' ? (
<div className="i-svg-spinners:90-ring-with-bg text-white text-xs"></div>
) : buildStatus === 'complete' ? (
<div className="i-ph:check text-white text-xs"></div>
) : buildStatus === 'failed' ? (
<div className="i-ph:x text-white text-xs"></div>
) : (
<span className="text-white text-xs">1</span>
)}
</div>
<span className="ml-2">Build</span>
</div>
{/* Connector Line */}
<div
className={classNames(
'h-0.5 w-8',
buildStatus === 'complete' ? 'bg-bolt-elements-icon-success' : 'bg-bolt-elements-textTertiary',
)}
></div>
{/* Deploy Step */}
<div className="flex items-center">
<div
className={classNames(
'w-6 h-6 rounded-full flex items-center justify-center',
deployStatus === 'running'
? 'bg-bolt-elements-loader-progress'
: deployStatus === 'complete'
? 'bg-bolt-elements-icon-success'
: deployStatus === 'failed'
? 'bg-bolt-elements-button-danger-background'
: 'bg-bolt-elements-textTertiary',
)}
>
{deployStatus === 'running' ? (
<div className="i-svg-spinners:90-ring-with-bg text-white text-xs"></div>
) : deployStatus === 'complete' ? (
<div className="i-ph:check text-white text-xs"></div>
) : deployStatus === 'failed' ? (
<div className="i-ph:x text-white text-xs"></div>
) : (
<span className="text-white text-xs">2</span>
)}
</div>
<span className="ml-2">Deploy</span>
</div>
</div>
</div>
)}
{content && (
<div className="text-xs text-bolt-elements-textSecondary p-2 bg-bolt-elements-background-depth-3 rounded mt-4 mb-4">
{content}
</div>
)}
{url && type === 'success' && (
<div className="mt-2">
<a
href={url}
target="_blank"
rel="noopener noreferrer"
className="text-bolt-elements-item-contentAccent hover:underline flex items-center"
>
<span className="mr-1">View deployed site</span>
<div className="i-ph:arrow-square-out"></div>
</a>
</div>
)}
</motion.div>
{/* Actions */}
<motion.div
className="mt-4"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
>
<div className={classNames('flex gap-2')}>
{type === 'error' && (
<button
onClick={() =>
postMessage(`*Fix this deployment error*\n\`\`\`\n${content || description}\n\`\`\`\n`)
}
className={classNames(
`px-2 py-1.5 rounded-md text-sm font-medium`,
'bg-bolt-elements-button-primary-background',
'hover:bg-bolt-elements-button-primary-backgroundHover',
'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bolt-elements-button-danger-background',
'text-bolt-elements-button-primary-text',
'flex items-center gap-1.5',
)}
>
<div className="i-ph:chat-circle-duotone"></div>
Ask Bolt
</button>
)}
<button
onClick={clearAlert}
className={classNames(
`px-2 py-1.5 rounded-md text-sm font-medium`,
'bg-bolt-elements-button-secondary-background',
'hover:bg-bolt-elements-button-secondary-backgroundHover',
'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bolt-elements-button-secondary-background',
'text-bolt-elements-button-secondary-text',
)}
>
Dismiss
</button>
</div>
</motion.div>
</div>
</div>
</motion.div>
</AnimatePresence>
);
}

243
app/components/deploy/NetlifyDeploy.client.tsx Normal file
View File

@@ -0,0 +1,243 @@
import { toast } from 'react-toastify';
import { useStore } from '@nanostores/react';
import { netlifyConnection } from '~/lib/stores/netlify';
import { workbenchStore } from '~/lib/stores/workbench';
import { webcontainer } from '~/lib/webcontainer';
import { path } from '~/utils/path';
import { useState } from 'react';
import type { ActionCallbackData } from '~/lib/runtime/message-parser';
import { chatId } from '~/lib/persistence/useChatHistory';
export function useNetlifyDeploy() {
const [isDeploying, setIsDeploying] = useState(false);
const netlifyConn = useStore(netlifyConnection);
const currentChatId = useStore(chatId);
const handleNetlifyDeploy = async () => {
if (!netlifyConn.user || !netlifyConn.token) {
toast.error('Please connect to Netlify first in the settings tab!');
return false;
}
if (!currentChatId) {
toast.error('No active chat found');
return false;
}
try {
setIsDeploying(true);
const artifact = workbenchStore.firstArtifact;
if (!artifact) {
throw new Error('No active project found');
}
// Create a deployment artifact for visual feedback
const deploymentId = `deploy-artifact`;
workbenchStore.addArtifact({
id: deploymentId,
messageId: deploymentId,
title: 'Netlify Deployment',
type: 'standalone',
});
const deployArtifact = workbenchStore.artifacts.get()[deploymentId];
// Notify that build is starting
deployArtifact.runner.handleDeployAction('building', 'running', { source: 'netlify' });
// Set up build action
const actionId = 'build-' + Date.now();
const actionData: ActionCallbackData = {
messageId: 'netlify build',
artifactId: artifact.id,
actionId,
action: {
type: 'build' as const,
content: 'npm run build',
},
};
// Add the action first
artifact.runner.addAction(actionData);
// Then run it
await artifact.runner.runAction(actionData);
if (!artifact.runner.buildOutput) {
// Notify that build failed
deployArtifact.runner.handleDeployAction('building', 'failed', {
error: 'Build failed. Check the terminal for details.',
source: 'netlify',
});
throw new Error('Build failed');
}
// Notify that build succeeded and deployment is starting
deployArtifact.runner.handleDeployAction('deploying', 'running', { source: 'netlify' });
// Get the build files
const container = await webcontainer;
// Remove /home/project from buildPath if it exists
const buildPath = artifact.runner.buildOutput.path.replace('/home/project', '');
console.log('Original buildPath', buildPath);
// Check if the build path exists
let finalBuildPath = buildPath;
// List of common output directories to check if the specified build path doesn't exist
const commonOutputDirs = [buildPath, '/dist', '/build', '/out', '/output', '/.next', '/public'];
// Verify the build path exists, or try to find an alternative
let buildPathExists = false;
for (const dir of commonOutputDirs) {
try {
await container.fs.readdir(dir);
finalBuildPath = dir;
buildPathExists = true;
console.log(`Using build directory: ${finalBuildPath}`);
break;
} catch (error) {
// Directory doesn't exist, try the next one
console.log(`Directory ${dir} doesn't exist, trying next option. ${error}`);
continue;
}
}
if (!buildPathExists) {
throw new Error('Could not find build output directory. Please check your build configuration.');
}
async function getAllFiles(dirPath: string): Promise<Record<string, string>> {
const files: Record<string, string> = {};
const entries = await container.fs.readdir(dirPath, { withFileTypes: true });
for (const entry of entries) {
const fullPath = path.join(dirPath, entry.name);
if (entry.isFile()) {
const content = await container.fs.readFile(fullPath, 'utf-8');
// Remove build path prefix from the path
const deployPath = fullPath.replace(finalBuildPath, '');
files[deployPath] = content;
} else if (entry.isDirectory()) {
const subFiles = await getAllFiles(fullPath);
Object.assign(files, subFiles);
}
}
return files;
}
const fileContents = await getAllFiles(finalBuildPath);
// Use chatId instead of artifact.id
const existingSiteId = localStorage.getItem(`netlify-site-${currentChatId}`);
const response = await fetch('/api/netlify-deploy', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
siteId: existingSiteId || undefined,
files: fileContents,
token: netlifyConn.token,
chatId: currentChatId,
}),
});
const data = (await response.json()) as any;
if (!response.ok || !data.deploy || !data.site) {
console.error('Invalid deploy response:', data);
// Notify that deployment failed
deployArtifact.runner.handleDeployAction('deploying', 'failed', {
error: data.error || 'Invalid deployment response',
source: 'netlify',
});
throw new Error(data.error || 'Invalid deployment response');
}
const maxAttempts = 20; // 2 minutes timeout
let attempts = 0;
let deploymentStatus;
while (attempts < maxAttempts) {
try {
const statusResponse = await fetch(
`https://api.netlify.com/api/v1/sites/${data.site.id}/deploys/${data.deploy.id}`,
{
headers: {
Authorization: `Bearer ${netlifyConn.token}`,
},
},
);
deploymentStatus = (await statusResponse.json()) as any;
if (deploymentStatus.state === 'ready' || deploymentStatus.state === 'uploaded') {
break;
}
if (deploymentStatus.state === 'error') {
// Notify that deployment failed
deployArtifact.runner.handleDeployAction('deploying', 'failed', {
error: 'Deployment failed: ' + (deploymentStatus.error_message || 'Unknown error'),
source: 'netlify',
});
throw new Error('Deployment failed: ' + (deploymentStatus.error_message || 'Unknown error'));
}
attempts++;
await new Promise((resolve) => setTimeout(resolve, 1000));
} catch (error) {
console.error('Status check error:', error);
attempts++;
await new Promise((resolve) => setTimeout(resolve, 2000));
}
}
if (attempts >= maxAttempts) {
// Notify that deployment timed out
deployArtifact.runner.handleDeployAction('deploying', 'failed', {
error: 'Deployment timed out',
source: 'netlify',
});
throw new Error('Deployment timed out');
}
// Store the site ID if it's a new site
if (data.site) {
localStorage.setItem(`netlify-site-${currentChatId}`, data.site.id);
}
// Notify that deployment completed successfully
deployArtifact.runner.handleDeployAction('complete', 'complete', {
url: deploymentStatus.ssl_url || deploymentStatus.url,
source: 'netlify',
});
return true;
} catch (error) {
console.error('Deploy error:', error);
toast.error(error instanceof Error ? error.message : 'Deployment failed');
return false;
} finally {
setIsDeploying(false);
}
};
return {
isDeploying,
handleNetlifyDeploy,
isConnected: !!netlifyConn.user,
};
}

193
app/components/deploy/VercelDeploy.client.tsx Normal file
View File

@@ -0,0 +1,193 @@
import { toast } from 'react-toastify';
import { useStore } from '@nanostores/react';
import { vercelConnection } from '~/lib/stores/vercel';
import { workbenchStore } from '~/lib/stores/workbench';
import { webcontainer } from '~/lib/webcontainer';
import { path } from '~/utils/path';
import { useState } from 'react';
import type { ActionCallbackData } from '~/lib/runtime/message-parser';
import { chatId } from '~/lib/persistence/useChatHistory';
export function useVercelDeploy() {
const [isDeploying, setIsDeploying] = useState(false);
const vercelConn = useStore(vercelConnection);
const currentChatId = useStore(chatId);
const handleVercelDeploy = async () => {
if (!vercelConn.user || !vercelConn.token) {
toast.error('Please connect to Vercel first in the settings tab!');
return false;
}
if (!currentChatId) {
toast.error('No active chat found');
return false;
}
try {
setIsDeploying(true);
const artifact = workbenchStore.firstArtifact;
if (!artifact) {
throw new Error('No active project found');
}
// Create a deployment artifact for visual feedback
const deploymentId = `deploy-vercel-project`;
workbenchStore.addArtifact({
id: deploymentId,
messageId: deploymentId,
title: 'Vercel Deployment',
type: 'standalone',
});
const deployArtifact = workbenchStore.artifacts.get()[deploymentId];
// Notify that build is starting
deployArtifact.runner.handleDeployAction('building', 'running', { source: 'vercel' });
const actionId = 'build-' + Date.now();
const actionData: ActionCallbackData = {
messageId: 'vercel build',
artifactId: artifact.id,
actionId,
action: {
type: 'build' as const,
content: 'npm run build',
},
};
// Add the action first
artifact.runner.addAction(actionData);
// Then run it
await artifact.runner.runAction(actionData);
if (!artifact.runner.buildOutput) {
// Notify that build failed
deployArtifact.runner.handleDeployAction('building', 'failed', {
error: 'Build failed. Check the terminal for details.',
source: 'vercel',
});
throw new Error('Build failed');
}
// Notify that build succeeded and deployment is starting
deployArtifact.runner.handleDeployAction('deploying', 'running', { source: 'vercel' });
// Get the build files
const container = await webcontainer;
// Remove /home/project from buildPath if it exists
const buildPath = artifact.runner.buildOutput.path.replace('/home/project', '');
// Check if the build path exists
let finalBuildPath = buildPath;
// List of common output directories to check if the specified build path doesn't exist
const commonOutputDirs = [buildPath, '/dist', '/build', '/out', '/output', '/.next', '/public'];
// Verify the build path exists, or try to find an alternative
let buildPathExists = false;
for (const dir of commonOutputDirs) {
try {
await container.fs.readdir(dir);
finalBuildPath = dir;
buildPathExists = true;
console.log(`Using build directory: ${finalBuildPath}`);
break;
} catch (error) {
console.log(`Directory ${dir} doesn't exist, trying next option. ${error}`);
// Directory doesn't exist, try the next one
continue;
}
}
if (!buildPathExists) {
throw new Error('Could not find build output directory. Please check your build configuration.');
}
// Get all files recursively
async function getAllFiles(dirPath: string): Promise<Record<string, string>> {
const files: Record<string, string> = {};
const entries = await container.fs.readdir(dirPath, { withFileTypes: true });
for (const entry of entries) {
const fullPath = path.join(dirPath, entry.name);
if (entry.isFile()) {
const content = await container.fs.readFile(fullPath, 'utf-8');
// Remove build path prefix from the path
const deployPath = fullPath.replace(finalBuildPath, '');
files[deployPath] = content;
} else if (entry.isDirectory()) {
const subFiles = await getAllFiles(fullPath);
Object.assign(files, subFiles);
}
}
return files;
}
const fileContents = await getAllFiles(finalBuildPath);
// Use chatId instead of artifact.id
const existingProjectId = localStorage.getItem(`vercel-project-${currentChatId}`);
const response = await fetch('/api/vercel-deploy', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
projectId: existingProjectId || undefined,
files: fileContents,
token: vercelConn.token,
chatId: currentChatId,
}),
});
const data = (await response.json()) as any;
if (!response.ok || !data.deploy || !data.project) {
console.error('Invalid deploy response:', data);
// Notify that deployment failed
deployArtifact.runner.handleDeployAction('deploying', 'failed', {
error: data.error || 'Invalid deployment response',
source: 'vercel',
});
throw new Error(data.error || 'Invalid deployment response');
}
if (data.project) {
localStorage.setItem(`vercel-project-${currentChatId}`, data.project.id);
}
// Notify that deployment completed successfully
deployArtifact.runner.handleDeployAction('complete', 'complete', {
url: data.deploy.url,
source: 'vercel',
});
return true;
} catch (err) {
console.error('Vercel deploy error:', err);
toast.error(err instanceof Error ? err.message : 'Vercel deployment failed');
return false;
} finally {
setIsDeploying(false);
}
};
return {
isDeploying,
handleVercelDeploy,
isConnected: !!vercelConn.user,
};
}

112
app/components/editor/codemirror/CodeMirrorEditor.tsx
View File

@@ -21,13 +21,18 @@ import type { Theme } from '~/types/theme';
import { classNames } from '~/utils/classNames';
import { debounce } from '~/utils/debounce';
import { createScopedLogger, renderLogger } from '~/utils/logger';
import { isFileLocked, getCurrentChatId } from '~/utils/fileLocks';
import { BinaryContent } from './BinaryContent';
import { getTheme, reconfigureTheme } from './cm-theme';
import { indentKeyBinding } from './indent';
import { getLanguage } from './languages';
import { createEnvMaskingExtension } from './EnvMasking';
const logger = createScopedLogger('CodeMirrorEditor');
// Create a module-level reference to the current document for use in tooltip functions
let currentDocRef: EditorDocument | undefined;
export interface EditorDocument {
value: string;
isBinary: boolean;
@@ -46,8 +51,10 @@ type TextEditorDocument = EditorDocument & {
};
export interface ScrollPosition {
top: number;
left: number;
top?: number;
left?: number;
line?: number;
column?: number;
}
export interface EditorUpdate {
@@ -134,6 +141,9 @@ export const CodeMirrorEditor = memo(
const [languageCompartment] = useState(new Compartment());
// Add a compartment for the env masking extension
const [envMaskingCompartment] = useState(new Compartment());
const containerRef = useRef<HTMLDivElement | null>(null);
const viewRef = useRef<EditorView>();
const themeRef = useRef<Theme>();
@@ -152,9 +162,44 @@ export const CodeMirrorEditor = memo(
onChangeRef.current = onChange;
onSaveRef.current = onSave;
docRef.current = doc;
// Update the module-level reference for use in tooltip functions
currentDocRef = doc;
themeRef.current = theme;
});
useEffect(() => {
if (!viewRef.current || !doc || doc.isBinary) {
return;
}
if (typeof doc.scroll?.line === 'number') {
const line = doc.scroll.line;
const column = doc.scroll.column ?? 0;
try {
// Check if the line number is valid for the current document
const totalLines = viewRef.current.state.doc.lines;
// Only proceed if the line number is within the document's range
if (line < totalLines) {
const linePos = viewRef.current.state.doc.line(line + 1).from + column;
viewRef.current.dispatch({
selection: { anchor: linePos },
scrollIntoView: true,
});
viewRef.current.focus();
} else {
logger.warn(`Invalid line number ${line + 1} in ${totalLines}-line document`);
}
} catch (error) {
logger.error('Error scrolling to line:', error);
}
} else if (typeof doc.scroll?.top === 'number' || typeof doc.scroll?.left === 'number') {
viewRef.current.scrollDOM.scrollTo(doc.scroll.left ?? 0, doc.scroll.top ?? 0);
}
}, [doc?.scroll?.line, doc?.scroll?.column, doc?.scroll?.top, doc?.scroll?.left]);
useEffect(() => {
const onUpdate = debounce((update: EditorUpdate) => {
onChangeRef.current?.(update);
@@ -214,6 +259,7 @@ export const CodeMirrorEditor = memo(
if (!doc) {
const state = newEditorState('', theme, settings, onScrollRef, debounceScroll, onSaveRef, [
languageCompartment.of([]),
envMaskingCompartment.of([]),
]);
view.setState(state);
@@ -236,6 +282,7 @@ export const CodeMirrorEditor = memo(
if (!state) {
state = newEditorState(doc.value, theme, settings, onScrollRef, debounceScroll, onSaveRef, [
languageCompartment.of([]),
envMaskingCompartment.of([createEnvMaskingExtension(() => docRef.current?.filePath)]),
]);
editorStates.set(doc.filePath, state);
@@ -251,6 +298,16 @@ export const CodeMirrorEditor = memo(
autoFocusOnDocumentChange,
doc as TextEditorDocument,
);
// Check if the file is locked and update the editor state accordingly
const currentChatId = getCurrentChatId();
const { locked } = isFileLocked(doc.filePath, currentChatId);
if (locked) {
view.dispatch({
effects: [editableStateEffect.of(false)],
});
}
}, [doc?.value, editable, doc?.filePath, autoFocusOnDocumentChange]);
return (
@@ -392,8 +449,13 @@ function setEditorDocument(
});
}
// Check if the file is locked
const currentChatId = getCurrentChatId();
const { locked } = isFileLocked(doc.filePath, currentChatId);
// Set editable state based on both the editable prop and the file's lock state
view.dispatch({
effects: [editableStateEffect.of(editable && !doc.isBinary)],
effects: [editableStateEffect.of(editable && !doc.isBinary && !locked)],
});
getLanguage(doc.filePath).then((languageSupport) => {
@@ -411,11 +473,36 @@ function setEditorDocument(
const newLeft = doc.scroll?.left ?? 0;
const newTop = doc.scroll?.top ?? 0;
if (typeof doc.scroll?.line === 'number') {
const line = doc.scroll.line;
const column = doc.scroll.column ?? 0;
try {
// Check if the line number is valid for the current document
const totalLines = view.state.doc.lines;
// Only proceed if the line number is within the document's range
if (line < totalLines) {
const linePos = view.state.doc.line(line + 1).from + column;
view.dispatch({
selection: { anchor: linePos },
scrollIntoView: true,
});
view.focus();
} else {
logger.warn(`Invalid line number ${line + 1} in ${totalLines}-line document`);
}
} catch (error) {
logger.error('Error scrolling to line:', error);
}
return;
}
const needsScrolling = currentLeft !== newLeft || currentTop !== newTop;
if (autoFocus && editable) {
if (needsScrolling) {
// we have to wait until the scroll position was changed before we can set the focus
view.scrollDOM.addEventListener(
'scroll',
() => {
@@ -424,7 +511,6 @@ function setEditorDocument(
{ once: true },
);
} else {
// if the scroll position is still the same we can focus immediately
view.focus();
}
}
@@ -439,6 +525,20 @@ function getReadOnlyTooltip(state: EditorState) {
return [];
}
// Get the current document from the module-level reference
const currentDoc = currentDocRef;
let tooltipMessage = 'Cannot edit file while AI response is being generated';
// If we have a current document, check if it's locked
if (currentDoc?.filePath) {
const currentChatId = getCurrentChatId();
const { locked } = isFileLocked(currentDoc.filePath, currentChatId);
if (locked) {
tooltipMessage = 'This file is locked and cannot be edited';
}
}
return state.selection.ranges
.filter((range) => {
return range.empty;
@@ -452,7 +552,7 @@ function getReadOnlyTooltip(state: EditorState) {
create: () => {
const divElement = document.createElement('div');
divElement.className = 'cm-readonly-tooltip';
divElement.textContent = 'Cannot edit file while AI response is being generated';
divElement.textContent = tooltipMessage;
return { dom: divElement };
},

80
app/components/editor/codemirror/EnvMasking.ts Normal file
View File

@@ -0,0 +1,80 @@
import { EditorView, Decoration, type DecorationSet, ViewPlugin, WidgetType } from '@codemirror/view';
// Create a proper WidgetType class for the masked text
class MaskedTextWidget extends WidgetType {
constructor(private readonly _value: string) {
super();
}
eq(other: MaskedTextWidget) {
return other._value === this._value;
}
toDOM() {
const span = document.createElement('span');
span.textContent = '*'.repeat(this._value.length);
span.className = 'cm-masked-text';
return span;
}
ignoreEvent() {
return false;
}
}
export function createEnvMaskingExtension(getFilePath: () => string | undefined) {
return ViewPlugin.fromClass(
class {
decorations: DecorationSet;
constructor(view: EditorView) {
this.decorations = this.buildDecorations(view);
}
update(update: { docChanged: boolean; view: EditorView; viewportChanged: boolean }) {
if (update.docChanged || update.viewportChanged) {
this.decorations = this.buildDecorations(update.view);
}
}
buildDecorations(view: EditorView) {
const filePath = getFilePath();
const isEnvFile = filePath?.endsWith('.env') || filePath?.includes('.env.') || filePath?.includes('/.env');
if (!isEnvFile) {
return Decoration.none;
}
const decorations: any[] = [];
const doc = view.state.doc;
for (let i = 1; i <= doc.lines; i++) {
const line = doc.line(i);
const text = line.text;
// Match lines with KEY=VALUE format
const match = text.match(/^([^=]+)=(.+)$/);
if (match && !text.trim().startsWith('#')) {
const [, key, value] = match;
const valueStart = line.from + key.length + 1;
// Create a decoration that replaces the value with asterisks
decorations.push(
Decoration.replace({
inclusive: true,
widget: new MaskedTextWidget(value),
}).range(valueStart, line.to),
);
}
}
return Decoration.set(decorations);
}
},
{
decorations: (v) => v.decorations,
},
);
}

3
app/components/git/GitUrlImport.client.tsx
View File

@@ -31,7 +31,8 @@ const IGNORE_PATTERNS = [
'**/npm-debug.log*',
'**/yarn-debug.log*',
'**/yarn-error.log*',
'**/*lock.json',
// Include this so npm install runs much faster '**/*lock.json',
'**/*lock.yaml',
];

216
app/components/header/HeaderActionButtons.client.tsx
View File

@@ -1,33 +1,36 @@
import { useStore } from '@nanostores/react';
import { toast } from 'react-toastify';
import useViewport from '~/lib/hooks';
import { chatStore } from '~/lib/stores/chat';
import { netlifyConnection } from '~/lib/stores/netlify';
import { vercelConnection } from '~/lib/stores/vercel';
import { workbenchStore } from '~/lib/stores/workbench';
import { webcontainer } from '~/lib/webcontainer';
import { classNames } from '~/utils/classNames';
import { path } from '~/utils/path';
import { useEffect, useRef, useState } from 'react';
import type { ActionCallbackData } from '~/lib/runtime/message-parser';
import { chatId } from '~/lib/persistence/useChatHistory'; // Add this import
import { streamingState } from '~/lib/stores/streaming';
import { NetlifyDeploymentLink } from '~/components/chat/NetlifyDeploymentLink.client';
import { VercelDeploymentLink } from '~/components/chat/VercelDeploymentLink.client';
import { useVercelDeploy } from '~/components/deploy/VercelDeploy.client';
import { useNetlifyDeploy } from '~/components/deploy/NetlifyDeploy.client';
interface HeaderActionButtonsProps {}
export function HeaderActionButtons({}: HeaderActionButtonsProps) {
const showWorkbench = useStore(workbenchStore.showWorkbench);
const { showChat } = useStore(chatStore);
const connection = useStore(netlifyConnection);
const netlifyConn = useStore(netlifyConnection);
const vercelConn = useStore(vercelConnection);
const [activePreviewIndex] = useState(0);
const previews = useStore(workbenchStore.previews);
const activePreview = previews[activePreviewIndex];
const [isDeploying, setIsDeploying] = useState(false);
const [deployingTo, setDeployingTo] = useState<'netlify' | 'vercel' | null>(null);
const isSmallViewport = useViewport(1024);
const canHideChat = showWorkbench || !showChat;
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null);
const isStreaming = useStore(streamingState);
const { handleVercelDeploy } = useVercelDeploy();
const { handleNetlifyDeploy } = useNetlifyDeploy();
useEffect(() => {
function handleClickOutside(event: MouseEvent) {
@@ -40,166 +43,27 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
const currentChatId = useStore(chatId);
const handleDeploy = async () => {
if (!connection.user || !connection.token) {
toast.error('Please connect to Netlify first in the settings tab!');
return;
}
if (!currentChatId) {
toast.error('No active chat found');
return;
}
const onVercelDeploy = async () => {
setIsDeploying(true);
setDeployingTo('vercel');
try {
setIsDeploying(true);
const artifact = workbenchStore.firstArtifact;
if (!artifact) {
throw new Error('No active project found');
}
const actionId = 'build-' + Date.now();
const actionData: ActionCallbackData = {
messageId: 'netlify build',
artifactId: artifact.id,
actionId,
action: {
type: 'build' as const,
content: 'npm run build',
},
};
// Add the action first
artifact.runner.addAction(actionData);
// Then run it
await artifact.runner.runAction(actionData);
if (!artifact.runner.buildOutput) {
throw new Error('Build failed');
}
// Get the build files
const container = await webcontainer;
// Remove /home/project from buildPath if it exists
const buildPath = artifact.runner.buildOutput.path.replace('/home/project', '');
// Get all files recursively
async function getAllFiles(dirPath: string): Promise<Record<string, string>> {
const files: Record<string, string> = {};
const entries = await container.fs.readdir(dirPath, { withFileTypes: true });
for (const entry of entries) {
const fullPath = path.join(dirPath, entry.name);
if (entry.isFile()) {
const content = await container.fs.readFile(fullPath, 'utf-8');
// Remove /dist prefix from the path
const deployPath = fullPath.replace(buildPath, '');
files[deployPath] = content;
} else if (entry.isDirectory()) {
const subFiles = await getAllFiles(fullPath);
Object.assign(files, subFiles);
}
}
return files;
}
const fileContents = await getAllFiles(buildPath);
// Use chatId instead of artifact.id
const existingSiteId = localStorage.getItem(`netlify-site-${currentChatId}`);
// Deploy using the API route with file contents
const response = await fetch('/api/deploy', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
siteId: existingSiteId || undefined,
files: fileContents,
token: connection.token,
chatId: currentChatId, // Use chatId instead of artifact.id
}),
});
const data = (await response.json()) as any;
if (!response.ok || !data.deploy || !data.site) {
console.error('Invalid deploy response:', data);
throw new Error(data.error || 'Invalid deployment response');
}
// Poll for deployment status
const maxAttempts = 20; // 2 minutes timeout
let attempts = 0;
let deploymentStatus;
while (attempts < maxAttempts) {
try {
const statusResponse = await fetch(
`https://api.netlify.com/api/v1/sites/${data.site.id}/deploys/${data.deploy.id}`,
{
headers: {
Authorization: `Bearer ${connection.token}`,
},
},
);
deploymentStatus = (await statusResponse.json()) as any;
if (deploymentStatus.state === 'ready' || deploymentStatus.state === 'uploaded') {
break;
}
if (deploymentStatus.state === 'error') {
throw new Error('Deployment failed: ' + (deploymentStatus.error_message || 'Unknown error'));
}
attempts++;
await new Promise((resolve) => setTimeout(resolve, 1000));
} catch (error) {
console.error('Status check error:', error);
attempts++;
await new Promise((resolve) => setTimeout(resolve, 2000));
}
}
if (attempts >= maxAttempts) {
throw new Error('Deployment timed out');
}
// Store the site ID if it's a new site
if (data.site) {
localStorage.setItem(`netlify-site-${currentChatId}`, data.site.id);
}
toast.success(
<div>
Deployed successfully!{' '}
<a
href={deploymentStatus.ssl_url || deploymentStatus.url}
target="_blank"
rel="noopener noreferrer"
className="underline"
>
View site
</a>
</div>,
);
} catch (error) {
console.error('Deploy error:', error);
toast.error(error instanceof Error ? error.message : 'Deployment failed');
await handleVercelDeploy();
} finally {
setIsDeploying(false);
setDeployingTo(null);
}
};
const onNetlifyDeploy = async () => {
setIsDeploying(true);
setDeployingTo('netlify');
try {
await handleNetlifyDeploy();
} finally {
setIsDeploying(false);
setDeployingTo(null);
}
};
@@ -213,7 +77,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
className="px-4 hover:bg-bolt-elements-item-backgroundActive flex items-center gap-2"
>
{isDeploying ? 'Deploying...' : 'Deploy'}
{isDeploying ? `Deploying to ${deployingTo}...` : 'Deploy'}
<div
className={classNames('i-ph:caret-down w-4 h-4 transition-transform', isDropdownOpen ? 'rotate-180' : '')}
/>
@@ -225,10 +89,10 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
<Button
active
onClick={() => {
handleDeploy();
onNetlifyDeploy();
setIsDropdownOpen(false);
}}
disabled={isDeploying || !activePreview || !connection.user}
disabled={isDeploying || !activePreview || !netlifyConn.user}
className="flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md group relative"
>
<img
@@ -238,15 +102,20 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
crossOrigin="anonymous"
src="https://cdn.simpleicons.org/netlify"
/>
<span className="mx-auto">{!connection.user ? 'No Account Connected' : 'Deploy to Netlify'}</span>
{connection.user && <NetlifyDeploymentLink />}
<span className="mx-auto">
{!netlifyConn.user ? 'No Netlify Account Connected' : 'Deploy to Netlify'}
</span>
{netlifyConn.user && <NetlifyDeploymentLink />}
</Button>
<Button
active={false}
disabled
className="flex items-center w-full rounded-md px-4 py-2 text-sm text-bolt-elements-textTertiary gap-2"
active
onClick={() => {
onVercelDeploy();
setIsDropdownOpen(false);
}}
disabled={isDeploying || !activePreview || !vercelConn.user}
className="flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md group relative"
>
<span className="sr-only">Coming Soon</span>
<img
className="w-5 h-5 bg-black p-1 rounded"
height="24"
@@ -255,7 +124,8 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
src="https://cdn.simpleicons.org/vercel/white"
alt="vercel"
/>
<span className="mx-auto">Deploy to Vercel (Coming Soon)</span>
<span className="mx-auto">{!vercelConn.user ? 'No Vercel Account Connected' : 'Deploy to Vercel'}</span>
{vercelConn.user && <VercelDeploymentLink />}
</Button>
<Button
active={false}
@@ -269,7 +139,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
width="24"
crossOrigin="anonymous"
src="https://cdn.simpleicons.org/cloudflare"
alt="vercel"
alt="cloudflare"
/>
<span className="mx-auto">Deploy to Cloudflare (Coming Soon)</span>
</Button>

91
app/components/sidebar/HistoryItem.tsx
View File

@@ -1,19 +1,30 @@
import { useParams } from '@remix-run/react';
import { classNames } from '~/utils/classNames';
import * as Dialog from '@radix-ui/react-dialog';
import { type ChatHistoryItem } from '~/lib/persistence';
import WithTooltip from '~/components/ui/Tooltip';
import { useEditChatDescription } from '~/lib/hooks';
import { forwardRef, type ForwardedRef } from 'react';
import { forwardRef, type ForwardedRef, useCallback } from 'react';
import { Checkbox } from '~/components/ui/Checkbox';
interface HistoryItemProps {
item: ChatHistoryItem;
onDelete?: (event: React.UIEvent) => void;
onDuplicate?: (id: string) => void;
exportChat: (id?: string) => void;
selectionMode?: boolean;
isSelected?: boolean;
onToggleSelection?: (id: string) => void;
}
export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: HistoryItemProps) {
export function HistoryItem({
item,
onDelete,
onDuplicate,
exportChat,
selectionMode = false,
isSelected = false,
onToggleSelection,
}: HistoryItemProps) {
const { id: urlId } = useParams();
const isActiveChat = urlId === item.urlId;
@@ -24,13 +35,56 @@ export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: History
syncWithGlobalStore: isActiveChat,
});
const handleItemClick = useCallback(
(e: React.MouseEvent) => {
if (selectionMode) {
e.preventDefault();
e.stopPropagation();
console.log('Item clicked in selection mode:', item.id);
onToggleSelection?.(item.id);
}
},
[selectionMode, item.id, onToggleSelection],
);
const handleCheckboxChange = useCallback(() => {
console.log('Checkbox changed for item:', item.id);
onToggleSelection?.(item.id);
}, [item.id, onToggleSelection]);
const handleDeleteClick = useCallback(
(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
event.preventDefault();
event.stopPropagation();
console.log('Delete button clicked for item:', item.id);
if (onDelete) {
onDelete(event as unknown as React.UIEvent);
}
},
[onDelete, item.id],
);
return (
<div
className={classNames(
'group rounded-lg text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50/80 dark:hover:bg-gray-800/30 overflow-hidden flex justify-between items-center px-3 py-2 transition-colors',
{ 'text-gray-900 dark:text-white bg-gray-50/80 dark:bg-gray-800/30': isActiveChat },
{ 'cursor-pointer': selectionMode },
)}
onClick={selectionMode ? handleItemClick : undefined}
>
{selectionMode && (
<div className="flex items-center mr-2" onClick={(e) => e.stopPropagation()}>
<Checkbox
id={`select-${item.id}`}
checked={isSelected}
onCheckedChange={handleCheckboxChange}
className="h-4 w-4"
/>
</div>
)}
{editing ? (
<form onSubmit={handleSubmit} className="flex-1 flex items-center gap-2">
<input
@@ -49,14 +103,17 @@ export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: History
/>
</form>
) : (
<a href={`/chat/${item.urlId}`} className="flex w-full relative truncate block">
<a
href={`/chat/${item.urlId}`}
className="flex w-full relative truncate block"
onClick={selectionMode ? handleItemClick : undefined}
>
<WithTooltip tooltip={currentDescription}>
<span className="truncate pr-24">{currentDescription}</span>
</WithTooltip>
<div
className={classNames(
'absolute right-0 top-0 bottom-0 flex items-center bg-white dark:bg-gray-950 group-hover:bg-gray-50/80 dark:group-hover:bg-gray-800/30 px-2',
{ 'bg-gray-50/80 dark:bg-gray-800/30': isActiveChat },
'absolute right-0 top-0 bottom-0 flex items-center bg-transparent px-2 transition-colors',
)}
>
<div className="flex items-center gap-2.5 text-gray-400 dark:text-gray-500 opacity-0 group-hover:opacity-100 transition-opacity">
@@ -72,7 +129,10 @@ export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: History
<ChatActionButton
toolTipContent="Duplicate"
icon="i-ph:copy h-4 w-4"
onClick={() => onDuplicate?.(item.id)}
onClick={(event) => {
event.preventDefault();
onDuplicate?.(item.id);
}}
/>
)}
<ChatActionButton
@@ -83,17 +143,12 @@ export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: History
toggleEditMode();
}}
/>
<Dialog.Trigger asChild>
<ChatActionButton
toolTipContent="Delete"
icon="i-ph:trash h-4 w-4"
className="hover:text-red-500"
onClick={(event) => {
event.preventDefault();
onDelete?.(event);
}}
/>
</Dialog.Trigger>
<ChatActionButton
toolTipContent="Delete"
icon="i-ph:trash h-4 w-4"
className="hover:text-red-500 dark:hover:text-red-400"
onClick={handleDeleteClick}
/>
</div>
</div>
</a>

302
app/components/sidebar/Menu.client.tsx
View File

@@ -5,9 +5,9 @@ import { Dialog, DialogButton, DialogDescription, DialogRoot, DialogTitle } from
import { ThemeSwitch } from '~/components/ui/ThemeSwitch';
import { ControlPanel } from '~/components/@settings/core/ControlPanel';
import { SettingsButton } from '~/components/ui/SettingsButton';
import { Button } from '~/components/ui/Button';
import { db, deleteById, getAll, chatId, type ChatHistoryItem, useChatHistory } from '~/lib/persistence';
import { cubicEasingFn } from '~/utils/easings';
import { logger } from '~/utils/logger';
import { HistoryItem } from './HistoryItem';
import { binDates } from './date-binning';
import { useSearchFilter } from '~/lib/hooks/useSearchFilter';
@@ -36,7 +36,10 @@ const menuVariants = {
},
} satisfies Variants;
type DialogContent = { type: 'delete'; item: ChatHistoryItem } | null;
type DialogContent =
| { type: 'delete'; item: ChatHistoryItem }
| { type: 'bulkDelete'; items: ChatHistoryItem[] }
| null;
function CurrentDateTime() {
const [dateTime, setDateTime] = useState(new Date());
@@ -51,7 +54,7 @@ function CurrentDateTime() {
return (
<div className="flex items-center gap-2 px-4 py-2 text-sm text-gray-600 dark:text-gray-400 border-b border-gray-100 dark:border-gray-800/50">
<div className="h-4 w-4 i-lucide:clock opacity-80" />
<div className="h-4 w-4 i-ph:clock opacity-80" />
<div className="flex gap-2">
<span>{dateTime.toLocaleDateString()}</span>
<span>{dateTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
@@ -68,6 +71,8 @@ export const Menu = () => {
const [dialogContent, setDialogContent] = useState<DialogContent>(null);
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
const profile = useStore(profileStore);
const [selectionMode, setSelectionMode] = useState(false);
const [selectedItems, setSelectedItems] = useState<string[]>([]);
const { filteredItems: filteredList, handleSearchChange } = useSearchFilter({
items: list,
@@ -83,35 +88,195 @@ export const Menu = () => {
}
}, []);
const deleteItem = useCallback((event: React.UIEvent, item: ChatHistoryItem) => {
event.preventDefault();
const deleteChat = useCallback(
async (id: string): Promise<void> => {
if (!db) {
throw new Error('Database not available');
}
if (db) {
deleteById(db, item.id)
// Delete chat snapshot from localStorage
try {
const snapshotKey = `snapshot:${id}`;
localStorage.removeItem(snapshotKey);
console.log('Removed snapshot for chat:', id);
} catch (snapshotError) {
console.error(`Error deleting snapshot for chat ${id}:`, snapshotError);
}
// Delete the chat from the database
await deleteById(db, id);
console.log('Successfully deleted chat:', id);
},
[db],
);
const deleteItem = useCallback(
(event: React.UIEvent, item: ChatHistoryItem) => {
event.preventDefault();
event.stopPropagation();
// Log the delete operation to help debugging
console.log('Attempting to delete chat:', { id: item.id, description: item.description });
deleteChat(item.id)
.then(() => {
toast.success('Chat deleted successfully', {
position: 'bottom-right',
autoClose: 3000,
});
// Always refresh the list
loadEntries();
if (chatId.get() === item.id) {
// hard page navigation to clear the stores
console.log('Navigating away from deleted chat');
window.location.pathname = '/';
}
})
.catch((error) => {
toast.error('Failed to delete conversation');
logger.error(error);
console.error('Failed to delete chat:', error);
toast.error('Failed to delete conversation', {
position: 'bottom-right',
autoClose: 3000,
});
// Still try to reload entries in case data has changed
loadEntries();
});
}
}, []);
},
[loadEntries, deleteChat],
);
const deleteSelectedItems = useCallback(
async (itemsToDeleteIds: string[]) => {
if (!db || itemsToDeleteIds.length === 0) {
console.log('Bulk delete skipped: No DB or no items to delete.');
return;
}
console.log(`Starting bulk delete for ${itemsToDeleteIds.length} chats`, itemsToDeleteIds);
let deletedCount = 0;
const errors: string[] = [];
const currentChatId = chatId.get();
let shouldNavigate = false;
// Process deletions sequentially using the shared deleteChat logic
for (const id of itemsToDeleteIds) {
try {
await deleteChat(id);
deletedCount++;
if (id === currentChatId) {
shouldNavigate = true;
}
} catch (error) {
console.error(`Error deleting chat ${id}:`, error);
errors.push(id);
}
}
// Show appropriate toast message
if (errors.length === 0) {
toast.success(`${deletedCount} chat${deletedCount === 1 ? '' : 's'} deleted successfully`);
} else {
toast.warning(`Deleted ${deletedCount} of ${itemsToDeleteIds.length} chats. ${errors.length} failed.`, {
autoClose: 5000,
});
}
// Reload the list after all deletions
await loadEntries();
// Clear selection state
setSelectedItems([]);
setSelectionMode(false);
// Navigate if needed
if (shouldNavigate) {
console.log('Navigating away from deleted chat');
window.location.pathname = '/';
}
},
[deleteChat, loadEntries, db],
);
const closeDialog = () => {
setDialogContent(null);
};
const toggleSelectionMode = () => {
setSelectionMode(!selectionMode);
if (selectionMode) {
// If turning selection mode OFF, clear selection
setSelectedItems([]);
}
};
const toggleItemSelection = useCallback((id: string) => {
setSelectedItems((prev) => {
const newSelectedItems = prev.includes(id) ? prev.filter((itemId) => itemId !== id) : [...prev, id];
console.log('Selected items updated:', newSelectedItems);
return newSelectedItems; // Return the new array
});
}, []); // No dependencies needed
const handleBulkDeleteClick = useCallback(() => {
if (selectedItems.length === 0) {
toast.info('Select at least one chat to delete');
return;
}
const selectedChats = list.filter((item) => selectedItems.includes(item.id));
if (selectedChats.length === 0) {
toast.error('Could not find selected chats');
return;
}
setDialogContent({ type: 'bulkDelete', items: selectedChats });
}, [selectedItems, list]); // Keep list dependency
const selectAll = useCallback(() => {
const allFilteredIds = filteredList.map((item) => item.id);
setSelectedItems((prev) => {
const allFilteredAreSelected = allFilteredIds.length > 0 && allFilteredIds.every((id) => prev.includes(id));
if (allFilteredAreSelected) {
// Deselect only the filtered items
const newSelectedItems = prev.filter((id) => !allFilteredIds.includes(id));
console.log('Deselecting all filtered items. New selection:', newSelectedItems);
return newSelectedItems;
} else {
// Select all filtered items, adding them to any existing selections
const newSelectedItems = [...new Set([...prev, ...allFilteredIds])];
console.log('Selecting all filtered items. New selection:', newSelectedItems);
return newSelectedItems;
}
});
}, [filteredList]); // Depends only on filteredList
useEffect(() => {
if (open) {
loadEntries();
}
}, [open]);
}, [open, loadEntries]);
// Exit selection mode when sidebar is closed
useEffect(() => {
if (!open && selectionMode) {
/*
* Don't clear selection state anymore when sidebar closes
* This allows the selection to persist when reopening the sidebar
*/
console.log('Sidebar closed, preserving selection state');
}
}, [open, selectionMode]);
useEffect(() => {
const enterThreshold = 40;
@@ -138,11 +303,6 @@ export const Menu = () => {
};
}, [isSettingsOpen]);
const handleDeleteClick = (event: React.UIEvent, item: ChatHistoryItem) => {
event.preventDefault();
setDialogContent({ type: 'delete', item });
};
const handleDuplicate = async (id: string) => {
await duplicateCurrentChat(id);
loadEntries(); // Reload the list after duplication
@@ -157,6 +317,11 @@ export const Menu = () => {
setIsSettingsOpen(false);
};
const setDialogContentWithLogging = useCallback((content: DialogContent) => {
console.log('Setting dialog content:', content);
setDialogContent(content);
}, []);
return (
<>
<motion.div
@@ -196,16 +361,30 @@ export const Menu = () => {
<CurrentDateTime />
<div className="flex-1 flex flex-col h-full w-full overflow-hidden">
<div className="p-4 space-y-3">
<a
href="/"
className="flex gap-2 items-center bg-purple-50 dark:bg-purple-500/10 text-purple-700 dark:text-purple-300 hover:bg-purple-100 dark:hover:bg-purple-500/20 rounded-lg px-4 py-2 transition-colors"
>
<span className="inline-block i-lucide:message-square h-4 w-4" />
<span className="text-sm font-medium">Start new chat</span>
</a>
<div className="flex gap-2">
<a
href="/"
className="flex-1 flex gap-2 items-center bg-purple-50 dark:bg-purple-500/10 text-purple-700 dark:text-purple-300 hover:bg-purple-100 dark:hover:bg-purple-500/20 rounded-lg px-4 py-2 transition-colors"
>
<span className="inline-block i-ph:plus-circle h-4 w-4" />
<span className="text-sm font-medium">Start new chat</span>
</a>
<button
onClick={toggleSelectionMode}
className={classNames(
'flex gap-1 items-center rounded-lg px-3 py-2 transition-colors',
selectionMode
? 'bg-purple-600 dark:bg-purple-500 text-white border border-purple-700 dark:border-purple-600'
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700',
)}
aria-label={selectionMode ? 'Exit selection mode' : 'Enter selection mode'}
>
<span className={selectionMode ? 'i-ph:x h-4 w-4' : 'i-ph:check-square h-4 w-4'} />
</button>
</div>
<div className="relative w-full">
<div className="absolute left-3 top-1/2 -translate-y-1/2">
<span className="i-lucide:search h-4 w-4 text-gray-400 dark:text-gray-500" />
<span className="i-ph:magnifying-glass h-4 w-4 text-gray-400 dark:text-gray-500" />
</div>
<input
className="w-full bg-gray-50 dark:bg-gray-900 relative pl-9 pr-3 py-2 rounded-lg focus:outline-none focus:ring-1 focus:ring-purple-500/50 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-500 border border-gray-200 dark:border-gray-800"
@@ -216,7 +395,24 @@ export const Menu = () => {
/>
</div>
</div>
<div className="text-gray-600 dark:text-gray-400 text-sm font-medium px-4 py-2">Your Chats</div>
<div className="flex items-center justify-between text-sm px-4 py-2">
<div className="font-medium text-gray-600 dark:text-gray-400">Your Chats</div>
{selectionMode && (
<div className="flex items-center gap-2">
<Button variant="ghost" size="sm" onClick={selectAll}>
{selectedItems.length === filteredList.length ? 'Deselect all' : 'Select all'}
</Button>
<Button
variant="destructive"
size="sm"
onClick={handleBulkDeleteClick}
disabled={selectedItems.length === 0}
>
Delete selected
</Button>
</div>
)}
</div>
<div className="flex-1 overflow-auto px-3 pb-3">
{filteredList.length === 0 && (
<div className="px-4 text-gray-500 dark:text-gray-400 text-sm">
@@ -235,8 +431,16 @@ export const Menu = () => {
key={item.id}
item={item}
exportChat={exportChat}
onDelete={(event) => handleDeleteClick(event, item)}
onDelete={(event) => {
event.preventDefault();
event.stopPropagation();
console.log('Delete triggered for item:', item);
setDialogContentWithLogging({ type: 'delete', item });
}}
onDuplicate={() => handleDuplicate(item.id)}
selectionMode={selectionMode}
isSelected={selectedItems.includes(item.id)}
onToggleSelection={toggleItemSelection}
/>
))}
</div>
@@ -264,6 +468,7 @@ export const Menu = () => {
<DialogButton
type="danger"
onClick={(event) => {
console.log('Dialog delete button clicked for item:', dialogContent.item);
deleteItem(event, dialogContent.item);
closeDialog();
}}
@@ -273,6 +478,49 @@ export const Menu = () => {
</div>
</>
)}
{dialogContent?.type === 'bulkDelete' && (
<>
<div className="p-6 bg-white dark:bg-gray-950">
<DialogTitle className="text-gray-900 dark:text-white">Delete Selected Chats?</DialogTitle>
<DialogDescription className="mt-2 text-gray-600 dark:text-gray-400">
<p>
You are about to delete {dialogContent.items.length}{' '}
{dialogContent.items.length === 1 ? 'chat' : 'chats'}:
</p>
<div className="mt-2 max-h-32 overflow-auto border border-gray-100 dark:border-gray-800 rounded-md bg-gray-50 dark:bg-gray-900 p-2">
<ul className="list-disc pl-5 space-y-1">
{dialogContent.items.map((item) => (
<li key={item.id} className="text-sm">
<span className="font-medium text-gray-900 dark:text-white">{item.description}</span>
</li>
))}
</ul>
</div>
<p className="mt-3">Are you sure you want to delete these chats?</p>
</DialogDescription>
</div>
<div className="flex justify-end gap-3 px-6 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800">
<DialogButton type="secondary" onClick={closeDialog}>
Cancel
</DialogButton>
<DialogButton
type="danger"
onClick={() => {
/*
* Pass the current selectedItems to the delete function.
* This captures the state at the moment the user confirms.
*/
const itemsToDeleteNow = [...selectedItems];
console.log('Bulk delete confirmed for', itemsToDeleteNow.length, 'items', itemsToDeleteNow);
deleteSelectedItems(itemsToDeleteNow);
closeDialog();
}}
>
Delete
</DialogButton>
</div>
</>
)}
</Dialog>
</DialogRoot>
</div>

29
app/components/ui/Badge.tsx
View File

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
import { classNames } from '~/utils/classNames';
const badgeVariants = cva(
'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-bolt-elements-ring focus:ring-offset-2',
'inline-flex items-center gap-1 transition-colors focus:outline-none focus:ring-2 focus:ring-bolt-elements-ring focus:ring-offset-2',
{
variants: {
variant: {
@@ -15,18 +15,39 @@ const badgeVariants = cva(
'border-transparent bg-bolt-elements-background text-bolt-elements-textSecondary hover:bg-bolt-elements-background/80',
destructive: 'border-transparent bg-red-500/10 text-red-500 hover:bg-red-500/20',
outline: 'text-bolt-elements-textPrimary',
primary: 'bg-purple-500/10 text-purple-600 dark:text-purple-400',
success: 'bg-green-500/10 text-green-600 dark:text-green-400',
warning: 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400',
danger: 'bg-red-500/10 text-red-600 dark:text-red-400',
info: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',
subtle:
'border border-bolt-elements-borderColor/30 dark:border-bolt-elements-borderColor-dark/30 bg-white/50 dark:bg-bolt-elements-background-depth-4/50 backdrop-blur-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark',
},
size: {
default: 'rounded-full px-2.5 py-0.5 text-xs font-semibold',
sm: 'rounded-full px-1.5 py-0.5 text-xs',
md: 'rounded-md px-2 py-1 text-xs font-medium',
lg: 'rounded-md px-2.5 py-1.5 text-sm',
},
},
defaultVariants: {
variant: 'default',
size: 'default',
},
},
);
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
icon?: string;
}
function Badge({ className, variant, ...props }: BadgeProps) {
return <div className={classNames(badgeVariants({ variant }), className)} {...props} />;
function Badge({ className, variant, size, icon, children, ...props }: BadgeProps) {
return (
<div className={classNames(badgeVariants({ variant, size }), className)} {...props}>
{icon && <span className={icon} />}
{children}
</div>
);
}
export { Badge, badgeVariants };

101
app/components/ui/Breadcrumbs.tsx Normal file
View File

@@ -0,0 +1,101 @@
import React from 'react';
import { classNames } from '~/utils/classNames';
import { motion } from 'framer-motion';
interface BreadcrumbItem {
label: string;
href?: string;
icon?: string;
onClick?: () => void;
}
interface BreadcrumbsProps {
items: BreadcrumbItem[];
className?: string;
separator?: string;
maxItems?: number;
renderItem?: (item: BreadcrumbItem, index: number, isLast: boolean) => React.ReactNode;
}
export function Breadcrumbs({
items,
className,
separator = 'i-ph:caret-right',
maxItems = 0,
renderItem,
}: BreadcrumbsProps) {
const displayItems =
maxItems > 0 && items.length > maxItems
? [
...items.slice(0, 1),
{ label: '...', onClick: undefined, href: undefined },
...items.slice(-Math.max(1, maxItems - 2)),
]
: items;
const defaultRenderItem = (item: BreadcrumbItem, index: number, isLast: boolean) => {
const content = (
<div className="flex items-center gap-1.5">
{item.icon && <span className={classNames(item.icon, 'w-3.5 h-3.5')} />}
<span
className={classNames(
isLast
? 'font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark'
: 'text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark hover:text-bolt-elements-textPrimary dark:hover:text-bolt-elements-textPrimary-dark',
item.onClick || item.href ? 'cursor-pointer' : '',
)}
>
{item.label}
</span>
</div>
);
if (item.href && !isLast) {
return (
<motion.a href={item.href} className="hover:underline" whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
{content}
</motion.a>
);
}
if (item.onClick && !isLast) {
return (
<motion.button
type="button"
onClick={item.onClick}
className="hover:underline"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
{content}
</motion.button>
);
}
return content;
};
return (
<nav className={classNames('flex items-center', className)} aria-label="Breadcrumbs">
<ol className="flex items-center gap-1.5">
{displayItems.map((item, index) => {
const isLast = index === displayItems.length - 1;
return (
<li key={index} className="flex items-center">
{renderItem ? renderItem(item, index, isLast) : defaultRenderItem(item, index, isLast)}
{!isLast && (
<span
className={classNames(
separator,
'w-3 h-3 mx-1 text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark',
)}
/>
)}
</li>
);
})}
</ol>
</nav>
);
}

2
app/components/ui/Button.tsx
View File

@@ -10,7 +10,7 @@ const buttonVariants = cva(
default: 'bg-bolt-elements-background text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-2',
destructive: 'bg-red-500 text-white hover:bg-red-600',
outline:
'border border-input bg-transparent hover:bg-bolt-elements-background-depth-2 hover:text-bolt-elements-textPrimary',
'border border-bolt-elements-borderColor bg-transparent hover:bg-bolt-elements-background-depth-2 hover:text-bolt-elements-textPrimary text-bolt-elements-textPrimary dark:border-bolt-elements-borderColorActive',
secondary:
'bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-2',
ghost: 'hover:bg-bolt-elements-background-depth-1 hover:text-bolt-elements-textPrimary',

32
app/components/ui/Checkbox.tsx Normal file
View File

@@ -0,0 +1,32 @@
import * as React from 'react';
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
import { Check } from 'lucide-react';
import { classNames } from '~/utils/classNames';
const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
<CheckboxPrimitive.Root
ref={ref}
className={classNames(
'peer h-4 w-4 shrink-0 rounded-sm border transition-colors',
'bg-transparent dark:bg-transparent',
'border-gray-400 dark:border-gray-600',
'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:ring-purple-500 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-950',
'disabled:cursor-not-allowed disabled:opacity-50',
'data-[state=checked]:bg-purple-500 dark:data-[state=checked]:bg-purple-500',
'data-[state=checked]:border-purple-500 dark:data-[state=checked]:border-purple-500',
'data-[state=checked]:text-white',
className,
)}
{...props}
>
<CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
<Check className="h-3 w-3" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
));
Checkbox.displayName = 'Checkbox';
export { Checkbox };

49
app/components/ui/CloseButton.tsx Normal file
View File

@@ -0,0 +1,49 @@
import React from 'react';
import { motion } from 'framer-motion';
import { classNames } from '~/utils/classNames';
interface CloseButtonProps {
onClick?: () => void;
className?: string;
size?: 'sm' | 'md' | 'lg';
}
/**
* CloseButton component
*
* A button with an X icon used for closing dialogs, modals, etc.
* The button has a transparent background and only shows a background on hover.
*/
export function CloseButton({ onClick, className, size = 'md' }: CloseButtonProps) {
const sizeClasses = {
sm: 'p-1',
md: 'p-2',
lg: 'p-3',
};
const iconSizeClasses = {
sm: 'w-3 h-3',
md: 'w-4 h-4',
lg: 'w-5 h-5',
};
return (
<motion.button
type="button"
onClick={onClick}
className={classNames(
'text-bolt-elements-textTertiary hover:text-bolt-elements-textSecondary dark:text-bolt-elements-textTertiary-dark dark:hover:text-bolt-elements-textSecondary-dark',
'rounded-lg hover:bg-bolt-elements-background-depth-2 dark:hover:bg-bolt-elements-background-depth-3',
'transition-colors duration-200',
'focus:outline-none focus:ring-2 focus:ring-purple-500/50',
sizeClasses[size],
className,
)}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
aria-label="Close"
>
<div className={classNames('i-ph:x', iconSizeClasses[size])} />
</motion.button>
);
}

103
app/components/ui/CodeBlock.tsx Normal file
View File

@@ -0,0 +1,103 @@
import React, { useState } from 'react';
import { classNames } from '~/utils/classNames';
import { motion } from 'framer-motion';
import { FileIcon } from './FileIcon';
import { Tooltip } from './Tooltip';
interface CodeBlockProps {
code: string;
language?: string;
filename?: string;
showLineNumbers?: boolean;
highlightLines?: number[];
maxHeight?: string;
className?: string;
onCopy?: () => void;
}
export function CodeBlock({
code,
language,
filename,
showLineNumbers = true,
highlightLines = [],
maxHeight = '400px',
className,
onCopy,
}: CodeBlockProps) {
const [copied, setCopied] = useState(false);
const handleCopy = () => {
navigator.clipboard.writeText(code);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
onCopy?.();
};
const lines = code.split('\n');
return (
<div
className={classNames(
'rounded-lg overflow-hidden border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark',
'bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3',
className,
)}
>
{/* Header */}
<div className="flex items-center justify-between px-4 py-2 bg-bolt-elements-background-depth-3 dark:bg-bolt-elements-background-depth-4 border-b border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark">
<div className="flex items-center gap-2">
{filename && (
<>
<FileIcon filename={filename} size="sm" />
<span className="text-xs font-medium text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark">
{filename}
</span>
</>
)}
{language && !filename && (
<span className="text-xs font-medium text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark uppercase">
{language}
</span>
)}
</div>
<Tooltip content={copied ? 'Copied!' : 'Copy code'}>
<motion.button
onClick={handleCopy}
className="p-1.5 rounded-md text-bolt-elements-textTertiary hover:text-bolt-elements-textSecondary dark:text-bolt-elements-textTertiary-dark dark:hover:text-bolt-elements-textSecondary-dark hover:bg-bolt-elements-background-depth-2 dark:hover:bg-bolt-elements-background-depth-3 transition-colors"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
{copied ? <span className="i-ph:check w-4 h-4 text-green-500" /> : <span className="i-ph:copy w-4 h-4" />}
</motion.button>
</Tooltip>
</div>
{/* Code content */}
<div className={classNames('overflow-auto', 'font-mono text-sm', 'custom-scrollbar')} style={{ maxHeight }}>
<table className="min-w-full border-collapse">
<tbody>
{lines.map((line, index) => (
<tr
key={index}
className={classNames(
highlightLines.includes(index + 1) ? 'bg-purple-500/10 dark:bg-purple-500/20' : '',
'hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4',
)}
>
{showLineNumbers && (
<td className="py-1 pl-4 pr-2 text-right select-none text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark border-r border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark">
<span className="inline-block min-w-[1.5rem] text-xs">{index + 1}</span>
</td>
)}
<td className="py-1 pl-4 pr-4 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark whitespace-pre">
{line || ' '}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
}

345
app/components/ui/Dialog.tsx
View File

@@ -1,9 +1,13 @@
import * as RadixDialog from '@radix-ui/react-dialog';
import { motion, type Variants } from 'framer-motion';
import React, { memo, type ReactNode } from 'react';
import React, { memo, type ReactNode, useState, useEffect } from 'react';
import { classNames } from '~/utils/classNames';
import { cubicEasingFn } from '~/utils/easings';
import { IconButton } from './IconButton';
import { Button } from './Button';
import { FixedSizeList } from 'react-window';
import { Checkbox } from './Checkbox';
import { Label } from './Label';
export { Close as DialogClose, Root as DialogRoot } from '@radix-ui/react-dialog';
@@ -17,12 +21,14 @@ interface DialogButtonProps {
export const DialogButton = memo(({ type, children, onClick, disabled }: DialogButtonProps) => {
return (
<button
className={classNames('inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm transition-colors', {
'bg-purple-500 text-white hover:bg-purple-600 dark:bg-purple-500 dark:hover:bg-purple-600': type === 'primary',
'bg-transparent text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100':
type === 'secondary',
'bg-transparent text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10': type === 'danger',
})}
className={classNames(
'inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm transition-colors',
type === 'primary'
? 'bg-purple-500 text-white hover:bg-purple-600 dark:bg-purple-500 dark:hover:bg-purple-600'
: type === 'secondary'
? 'bg-transparent text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100'
: 'bg-transparent text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10',
)}
onClick={onClick}
disabled={disabled}
>
@@ -34,7 +40,7 @@ export const DialogButton = memo(({ type, children, onClick, disabled }: DialogB
export const DialogTitle = memo(({ className, children, ...props }: RadixDialog.DialogTitleProps) => {
return (
<RadixDialog.Title
className={classNames('text-lg font-medium text-bolt-elements-textPrimary', 'flex items-center gap-2', className)}
className={classNames('text-lg font-medium text-bolt-elements-textPrimary flex items-center gap-2', className)}
{...props}
>
{children}
@@ -45,7 +51,7 @@ export const DialogTitle = memo(({ className, children, ...props }: RadixDialog.
export const DialogDescription = memo(({ className, children, ...props }: RadixDialog.DialogDescriptionProps) => {
return (
<RadixDialog.Description
className={classNames('text-sm text-bolt-elements-textSecondary', 'mt-1', className)}
className={classNames('text-sm text-bolt-elements-textSecondary mt-1', className)}
{...props}
>
{children}
@@ -99,11 +105,7 @@ export const Dialog = memo(({ children, className, showCloseButton = true, onClo
<RadixDialog.Portal>
<RadixDialog.Overlay asChild>
<motion.div
className={classNames(
'fixed inset-0 z-[9999]',
'bg-[#FAFAFA]/80 dark:bg-[#0A0A0A]/80',
'backdrop-blur-[2px]',
)}
className={classNames('fixed inset-0 z-[9999] bg-black/70 dark:bg-black/80 backdrop-blur-sm')}
initial="closed"
animate="open"
exit="closed"
@@ -114,11 +116,7 @@ export const Dialog = memo(({ children, className, showCloseButton = true, onClo
<RadixDialog.Content asChild>
<motion.div
className={classNames(
'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
'rounded-lg shadow-lg',
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
'z-[9999] w-[520px]',
'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-950 rounded-lg shadow-xl border border-bolt-elements-borderColor z-[9999] w-[520px] focus:outline-none',
className,
)}
initial="closed"
@@ -132,7 +130,7 @@ export const Dialog = memo(({ children, className, showCloseButton = true, onClo
<RadixDialog.Close asChild onClick={onClose}>
<IconButton
icon="i-ph:x"
className="absolute top-3 right-3 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary"
className="absolute top-3 right-3 text-bolt-elements-textTertiary hover:text-bolt-elements-textSecondary"
/>
</RadixDialog.Close>
)}
@@ -142,3 +140,310 @@ export const Dialog = memo(({ children, className, showCloseButton = true, onClo
</RadixDialog.Portal>
);
});
/**
* Props for the ConfirmationDialog component
*/
export interface ConfirmationDialogProps {
/**
* Whether the dialog is open
*/
isOpen: boolean;
/**
* Callback when the dialog is closed
*/
onClose: () => void;
/**
* Callback when the confirm button is clicked
*/
onConfirm: () => void;
/**
* The title of the dialog
*/
title: string;
/**
* The description of the dialog
*/
description: string;
/**
* The text for the confirm button
*/
confirmLabel?: string;
/**
* The text for the cancel button
*/
cancelLabel?: string;
/**
* The variant of the confirm button
*/
variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
/**
* Whether the confirm button is in a loading state
*/
isLoading?: boolean;
}
/**
* A reusable confirmation dialog component that uses the Dialog component
*/
export function ConfirmationDialog({
isOpen,
onClose,
title,
description,
confirmLabel = 'Confirm',
cancelLabel = 'Cancel',
variant = 'default',
isLoading = false,
onConfirm,
}: ConfirmationDialogProps) {
return (
<RadixDialog.Root open={isOpen} onOpenChange={onClose}>
<Dialog showCloseButton={false}>
<div className="p-6 bg-white dark:bg-gray-950 relative z-10">
<DialogTitle>{title}</DialogTitle>
<DialogDescription className="mb-4">{description}</DialogDescription>
<div className="flex justify-end space-x-2">
<Button variant="outline" onClick={onClose} disabled={isLoading}>
{cancelLabel}
</Button>
<Button
variant={variant}
onClick={onConfirm}
disabled={isLoading}
className={
variant === 'destructive'
? 'bg-red-500 text-white hover:bg-red-600'
: 'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent hover:bg-bolt-elements-button-primary-backgroundHover'
}
>
{isLoading ? (
<>
<div className="i-ph-spinner-gap-bold animate-spin w-4 h-4 mr-2" />
{confirmLabel}
</>
) : (
confirmLabel
)}
</Button>
</div>
</div>
</Dialog>
</RadixDialog.Root>
);
}
/**
* Type for selection item in SelectionDialog
*/
type SelectionItem = {
id: string;
label: string;
description?: string;
};
/**
* Props for the SelectionDialog component
*/
export interface SelectionDialogProps {
/**
* The title of the dialog
*/
title: string;
/**
* The items to select from
*/
items: SelectionItem[];
/**
* Whether the dialog is open
*/
isOpen: boolean;
/**
* Callback when the dialog is closed
*/
onClose: () => void;
/**
* Callback when the confirm button is clicked with selected item IDs
*/
onConfirm: (selectedIds: string[]) => void;
/**
* The text for the confirm button
*/
confirmLabel?: string;
/**
* The maximum height of the selection list
*/
maxHeight?: string;
}
/**
* A reusable selection dialog component that uses the Dialog component
*/
export function SelectionDialog({
title,
items,
isOpen,
onClose,
onConfirm,
confirmLabel = 'Confirm',
maxHeight = '60vh',
}: SelectionDialogProps) {
const [selectedItems, setSelectedItems] = useState<string[]>([]);
const [selectAll, setSelectAll] = useState(false);
// Reset selected items when dialog opens
useEffect(() => {
if (isOpen) {
setSelectedItems([]);
setSelectAll(false);
}
}, [isOpen]);
const handleToggleItem = (id: string) => {
setSelectedItems((prev) => (prev.includes(id) ? prev.filter((itemId) => itemId !== id) : [...prev, id]));
};
const handleSelectAll = () => {
if (selectedItems.length === items.length) {
setSelectedItems([]);
setSelectAll(false);
} else {
setSelectedItems(items.map((item) => item.id));
setSelectAll(true);
}
};
const handleConfirm = () => {
onConfirm(selectedItems);
onClose();
};
// Calculate the height for the virtualized list
const listHeight = Math.min(
items.length * 60,
parseInt(maxHeight.replace('vh', '')) * window.innerHeight * 0.01 - 40,
);
// Render each item in the virtualized list
const ItemRenderer = ({ index, style }: { index: number; style: React.CSSProperties }) => {
const item = items[index];
return (
<div
key={item.id}
className={classNames(
'flex items-start space-x-3 p-2 rounded-md transition-colors',
selectedItems.includes(item.id)
? 'bg-bolt-elements-item-backgroundAccent'
: 'bg-bolt-elements-bg-depth-2 hover:bg-bolt-elements-item-backgroundActive',
)}
style={{
...style,
width: '100%',
boxSizing: 'border-box',
}}
>
<Checkbox
id={`item-${item.id}`}
checked={selectedItems.includes(item.id)}
onCheckedChange={() => handleToggleItem(item.id)}
/>
<div className="grid gap-1.5 leading-none">
<Label
htmlFor={`item-${item.id}`}
className={classNames(
'text-sm font-medium cursor-pointer',
selectedItems.includes(item.id)
? 'text-bolt-elements-item-contentAccent'
: 'text-bolt-elements-textPrimary',
)}
>
{item.label}
</Label>
{item.description && <p className="text-xs text-bolt-elements-textSecondary">{item.description}</p>}
</div>
</div>
);
};
return (
<RadixDialog.Root open={isOpen} onOpenChange={onClose}>
<Dialog showCloseButton={false}>
<div className="p-6 bg-white dark:bg-gray-950 relative z-10">
<DialogTitle>{title}</DialogTitle>
<DialogDescription className="mt-2 mb-4">
Select the items you want to include and click{' '}
<span className="text-bolt-elements-item-contentAccent font-medium">{confirmLabel}</span>.
</DialogDescription>
<div className="py-4">
<div className="flex items-center justify-between mb-4">
<span className="text-sm font-medium text-bolt-elements-textSecondary">
{selectedItems.length} of {items.length} selected
</span>
<Button
variant="ghost"
size="sm"
onClick={handleSelectAll}
className="text-xs h-8 px-2 text-bolt-elements-textPrimary hover:text-bolt-elements-item-contentAccent hover:bg-bolt-elements-item-backgroundAccent bg-bolt-elements-bg-depth-2 dark:bg-transparent"
>
{selectAll ? 'Deselect All' : 'Select All'}
</Button>
</div>
<div
className="pr-2 border rounded-md border-bolt-elements-borderColor bg-bolt-elements-bg-depth-2"
style={{
maxHeight,
}}
>
{items.length > 0 ? (
<FixedSizeList
height={listHeight}
width="100%"
itemCount={items.length}
itemSize={60}
className="scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-bolt-elements-bg-depth-3"
>
{ItemRenderer}
</FixedSizeList>
) : (
<div className="text-center py-4 text-sm text-bolt-elements-textTertiary">No items to display</div>
)}
</div>
</div>
<div className="flex justify-between mt-6">
<Button
variant="outline"
onClick={onClose}
className="border-bolt-elements-borderColor text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive"
>
Cancel
</Button>
<Button
onClick={handleConfirm}
disabled={selectedItems.length === 0}
className="bg-accent-500 text-white hover:bg-accent-600 disabled:opacity-50 disabled:pointer-events-none"
>
{confirmLabel}
</Button>
</div>
</div>
</Dialog>
</RadixDialog.Root>
);
}

154
app/components/ui/EmptyState.tsx Normal file
View File

@@ -0,0 +1,154 @@
import React from 'react';
import { classNames } from '~/utils/classNames';
import { Button } from './Button';
import { motion } from 'framer-motion';
// Variant-specific styles
const VARIANT_STYLES = {
default: {
container: 'py-8 p-6',
icon: {
container: 'w-12 h-12 mb-3',
size: 'w-6 h-6',
},
title: 'text-base',
description: 'text-sm mt-1',
actions: 'mt-4',
buttonSize: 'default' as const,
},
compact: {
container: 'py-4 p-4',
icon: {
container: 'w-10 h-10 mb-2',
size: 'w-5 h-5',
},
title: 'text-sm',
description: 'text-xs mt-0.5',
actions: 'mt-3',
buttonSize: 'sm' as const,
},
};
interface EmptyStateProps {
/** Icon class name */
icon?: string;
/** Title text */
title: string;
/** Optional description text */
description?: string;
/** Primary action button label */
actionLabel?: string;
/** Primary action button callback */
onAction?: () => void;
/** Secondary action button label */
secondaryActionLabel?: string;
/** Secondary action button callback */
onSecondaryAction?: () => void;
/** Additional class name */
className?: string;
/** Component size variant */
variant?: 'default' | 'compact';
}
/**
* EmptyState component
*
* A component for displaying empty states with optional actions.
*/
export function EmptyState({
icon = 'i-ph:folder-simple-dashed',
title,
description,
actionLabel,
onAction,
secondaryActionLabel,
onSecondaryAction,
className,
variant = 'default',
}: EmptyStateProps) {
// Get styles based on variant
const styles = VARIANT_STYLES[variant];
// Animation variants for buttons
const buttonAnimation = {
whileHover: { scale: 1.02 },
whileTap: { scale: 0.98 },
};
return (
<div
className={classNames(
'flex flex-col items-center justify-center',
'text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark',
'bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg',
styles.container,
className,
)}
>
{/* Icon */}
<div
className={classNames(
'rounded-full bg-bolt-elements-background-depth-3 dark:bg-bolt-elements-background-depth-4 flex items-center justify-center',
styles.icon.container,
)}
>
<span
className={classNames(
icon,
styles.icon.size,
'text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark',
)}
/>
</div>
{/* Title */}
<p className={classNames('font-medium', styles.title)}>{title}</p>
{/* Description */}
{description && (
<p
className={classNames(
'text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark text-center max-w-xs',
styles.description,
)}
>
{description}
</p>
)}
{/* Action buttons */}
{(actionLabel || secondaryActionLabel) && (
<div className={classNames('flex items-center gap-2', styles.actions)}>
{actionLabel && onAction && (
<motion.div {...buttonAnimation}>
<Button
onClick={onAction}
variant="default"
size={styles.buttonSize}
className="bg-purple-500 hover:bg-purple-600 text-white"
>
{actionLabel}
</Button>
</motion.div>
)}
{secondaryActionLabel && onSecondaryAction && (
<motion.div {...buttonAnimation}>
<Button onClick={onSecondaryAction} variant="outline" size={styles.buttonSize}>
{secondaryActionLabel}
</Button>
</motion.div>
)}
</div>
)}
</div>
);
}

346
app/components/ui/FileIcon.tsx Normal file
View File

@@ -0,0 +1,346 @@
import React from 'react';
import { classNames } from '~/utils/classNames';
interface FileIconProps {
filename: string;
size?: 'sm' | 'md' | 'lg';
className?: string;
}
export function FileIcon({ filename, size = 'md', className }: FileIconProps) {
const getFileExtension = (filename: string): string => {
return filename.split('.').pop()?.toLowerCase() || '';
};
const getIconForExtension = (extension: string): string => {
// Code files
if (['js', 'jsx', 'ts', 'tsx'].includes(extension)) {
return 'i-ph:file-js';
}
if (['html', 'htm', 'xhtml'].includes(extension)) {
return 'i-ph:file-html';
}
if (['css', 'scss', 'sass', 'less'].includes(extension)) {
return 'i-ph:file-css';
}
if (['json', 'jsonc'].includes(extension)) {
return 'i-ph:brackets-curly';
}
if (['md', 'markdown'].includes(extension)) {
return 'i-ph:file-text';
}
if (['py', 'pyc', 'pyd', 'pyo'].includes(extension)) {
return 'i-ph:file-py';
}
if (['java', 'class', 'jar'].includes(extension)) {
return 'i-ph:file-java';
}
if (['php'].includes(extension)) {
return 'i-ph:file-php';
}
if (['rb', 'ruby'].includes(extension)) {
return 'i-ph:file-rs';
}
if (['c', 'cpp', 'h', 'hpp', 'cc'].includes(extension)) {
return 'i-ph:file-cpp';
}
if (['go'].includes(extension)) {
return 'i-ph:file-rs';
}
if (['rs', 'rust'].includes(extension)) {
return 'i-ph:file-rs';
}
if (['swift'].includes(extension)) {
return 'i-ph:file-swift';
}
if (['kt', 'kotlin'].includes(extension)) {
return 'i-ph:file-kotlin';
}
if (['dart'].includes(extension)) {
return 'i-ph:file-dart';
}
// Config files
if (['yml', 'yaml'].includes(extension)) {
return 'i-ph:file-cloud';
}
if (['xml', 'svg'].includes(extension)) {
return 'i-ph:file-xml';
}
if (['toml'].includes(extension)) {
return 'i-ph:file-text';
}
if (['ini', 'conf', 'config'].includes(extension)) {
return 'i-ph:file-text';
}
if (['env', 'env.local', 'env.development', 'env.production'].includes(extension)) {
return 'i-ph:file-lock';
}
// Document files
if (['pdf'].includes(extension)) {
return 'i-ph:file-pdf';
}
if (['doc', 'docx'].includes(extension)) {
return 'i-ph:file-doc';
}
if (['xls', 'xlsx'].includes(extension)) {
return 'i-ph:file-xls';
}
if (['ppt', 'pptx'].includes(extension)) {
return 'i-ph:file-ppt';
}
if (['txt'].includes(extension)) {
return 'i-ph:file-text';
}
// Image files
if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'ico', 'tiff'].includes(extension)) {
return 'i-ph:file-image';
}
// Audio/Video files
if (['mp3', 'wav', 'ogg', 'flac', 'aac'].includes(extension)) {
return 'i-ph:file-audio';
}
if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', 'mkv'].includes(extension)) {
return 'i-ph:file-video';
}
// Archive files
if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2'].includes(extension)) {
return 'i-ph:file-zip';
}
// Special files
if (filename === 'package.json') {
return 'i-ph:package';
}
if (filename === 'tsconfig.json') {
return 'i-ph:file-ts';
}
if (filename === 'README.md') {
return 'i-ph:book-open';
}
if (filename === 'LICENSE') {
return 'i-ph:scales';
}
if (filename === '.gitignore') {
return 'i-ph:git-branch';
}
if (filename.startsWith('Dockerfile')) {
return 'i-ph:docker-logo';
}
// Default
return 'i-ph:file';
};
const getIconColorForExtension = (extension: string): string => {
// Code files
if (['js', 'jsx'].includes(extension)) {
return 'text-yellow-500';
}
if (['ts', 'tsx'].includes(extension)) {
return 'text-blue-500';
}
if (['html', 'htm', 'xhtml'].includes(extension)) {
return 'text-orange-500';
}
if (['css', 'scss', 'sass', 'less'].includes(extension)) {
return 'text-blue-400';
}
if (['json', 'jsonc'].includes(extension)) {
return 'text-yellow-400';
}
if (['md', 'markdown'].includes(extension)) {
return 'text-gray-500';
}
if (['py', 'pyc', 'pyd', 'pyo'].includes(extension)) {
return 'text-green-500';
}
if (['java', 'class', 'jar'].includes(extension)) {
return 'text-red-500';
}
if (['php'].includes(extension)) {
return 'text-purple-500';
}
if (['rb', 'ruby'].includes(extension)) {
return 'text-red-600';
}
if (['c', 'cpp', 'h', 'hpp', 'cc'].includes(extension)) {
return 'text-blue-600';
}
if (['go'].includes(extension)) {
return 'text-cyan-500';
}
if (['rs', 'rust'].includes(extension)) {
return 'text-orange-600';
}
if (['swift'].includes(extension)) {
return 'text-orange-500';
}
if (['kt', 'kotlin'].includes(extension)) {
return 'text-purple-400';
}
if (['dart'].includes(extension)) {
return 'text-cyan-400';
}
// Config files
if (['yml', 'yaml'].includes(extension)) {
return 'text-purple-300';
}
if (['xml'].includes(extension)) {
return 'text-orange-300';
}
if (['svg'].includes(extension)) {
return 'text-green-400';
}
if (['toml'].includes(extension)) {
return 'text-gray-500';
}
if (['ini', 'conf', 'config'].includes(extension)) {
return 'text-gray-500';
}
if (['env', 'env.local', 'env.development', 'env.production'].includes(extension)) {
return 'text-green-500';
}
// Document files
if (['pdf'].includes(extension)) {
return 'text-red-500';
}
if (['doc', 'docx'].includes(extension)) {
return 'text-blue-600';
}
if (['xls', 'xlsx'].includes(extension)) {
return 'text-green-600';
}
if (['ppt', 'pptx'].includes(extension)) {
return 'text-red-600';
}
if (['txt'].includes(extension)) {
return 'text-gray-500';
}
// Image files
if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'ico', 'tiff'].includes(extension)) {
return 'text-pink-500';
}
// Audio/Video files
if (['mp3', 'wav', 'ogg', 'flac', 'aac'].includes(extension)) {
return 'text-green-500';
}
if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', 'mkv'].includes(extension)) {
return 'text-blue-500';
}
// Archive files
if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2'].includes(extension)) {
return 'text-yellow-600';
}
// Special files
if (filename === 'package.json') {
return 'text-red-400';
}
if (filename === 'tsconfig.json') {
return 'text-blue-500';
}
if (filename === 'README.md') {
return 'text-blue-400';
}
if (filename === 'LICENSE') {
return 'text-gray-500';
}
if (filename === '.gitignore') {
return 'text-orange-500';
}
if (filename.startsWith('Dockerfile')) {
return 'text-blue-500';
}
// Default
return 'text-gray-400';
};
const getSizeClass = (size: 'sm' | 'md' | 'lg'): string => {
switch (size) {
case 'sm':
return 'w-4 h-4';
case 'md':
return 'w-5 h-5';
case 'lg':
return 'w-6 h-6';
default:
return 'w-5 h-5';
}
};
const extension = getFileExtension(filename);
const icon = getIconForExtension(extension);
const color = getIconColorForExtension(extension);
const sizeClass = getSizeClass(size);
return <span className={classNames(icon, color, sizeClass, className)} />;
}

92
app/components/ui/FilterChip.tsx Normal file
View File

@@ -0,0 +1,92 @@
import React from 'react';
import { motion } from 'framer-motion';
import { classNames } from '~/utils/classNames';
interface FilterChipProps {
/** The label text to display */
label: string;
/** Optional value to display after the label */
value?: string | number;
/** Function to call when the remove button is clicked */
onRemove?: () => void;
/** Whether the chip is active/selected */
active?: boolean;
/** Optional icon to display before the label */
icon?: string;
/** Additional class name */
className?: string;
}
/**
* FilterChip component
*
* A chip component for displaying filters with optional remove button.
*/
export function FilterChip({ label, value, onRemove, active = false, icon, className }: FilterChipProps) {
// Animation variants
const variants = {
initial: { opacity: 0, scale: 0.9 },
animate: { opacity: 1, scale: 1 },
exit: { opacity: 0, scale: 0.9 },
};
return (
<motion.div
initial="initial"
animate="animate"
exit="exit"
variants={variants}
transition={{ duration: 0.2 }}
className={classNames(
'inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium transition-all',
active
? 'bg-purple-500/15 text-purple-600 dark:text-purple-400 border border-purple-500/30'
: 'bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark',
onRemove && 'pr-1',
className,
)}
>
{/* Icon */}
{icon && <span className={classNames(icon, 'text-inherit')} />}
{/* Label and value */}
<span>
{label}
{value !== undefined && ': '}
{value !== undefined && (
<span
className={
active
? 'text-purple-700 dark:text-purple-300 font-semibold'
: 'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark'
}
>
{value}
</span>
)}
</span>
{/* Remove button */}
{onRemove && (
<button
type="button"
onClick={onRemove}
className={classNames(
'ml-1 p-0.5 rounded-full hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 transition-colors',
active
? 'text-purple-600 dark:text-purple-400'
: 'text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark',
)}
aria-label={`Remove ${label} filter`}
>
<span className="i-ph:x w-3 h-3" />
</button>
)}
</motion.div>
);
}

100
app/components/ui/GradientCard.tsx Normal file
View File

@@ -0,0 +1,100 @@
import React from 'react';
import { motion } from 'framer-motion';
import { classNames } from '~/utils/classNames';
// Predefined gradient colors
const GRADIENT_COLORS = [
'from-purple-500/10 to-blue-500/5',
'from-blue-500/10 to-cyan-500/5',
'from-cyan-500/10 to-green-500/5',
'from-green-500/10 to-yellow-500/5',
'from-yellow-500/10 to-orange-500/5',
'from-orange-500/10 to-red-500/5',
'from-red-500/10 to-pink-500/5',
'from-pink-500/10 to-purple-500/5',
];
interface GradientCardProps {
/** Custom gradient class (overrides seed-based gradient) */
gradient?: string;
/** Seed string to determine gradient color */
seed?: string;
/** Whether to apply hover animation effect */
hoverEffect?: boolean;
/** Whether to apply border effect */
borderEffect?: boolean;
/** Card content */
children: React.ReactNode;
/** Additional class name */
className?: string;
/** Additional props */
[key: string]: any;
}
/**
* GradientCard component
*
* A card with a gradient background that can be determined by a seed string.
*/
export function GradientCard({
gradient,
seed,
hoverEffect = true,
borderEffect = true,
className,
children,
...props
}: GradientCardProps) {
// Get gradient color based on seed or use provided gradient
const gradientClass = gradient || getGradientColorFromSeed(seed);
// Animation variants for hover effect
const hoverAnimation = hoverEffect
? {
whileHover: {
scale: 1.02,
y: -2,
transition: { type: 'spring', stiffness: 400, damping: 17 },
},
whileTap: { scale: 0.98 },
}
: undefined;
return (
<motion.div
className={classNames(
'p-5 rounded-xl bg-gradient-to-br',
gradientClass,
borderEffect
? 'border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark hover:border-purple-500/40'
: '',
'transition-all duration-300 shadow-sm',
hoverEffect ? 'hover:shadow-md' : '',
className,
)}
{...hoverAnimation}
{...props}
>
{children}
</motion.div>
);
}
/**
* Calculate a gradient color based on the seed string for visual variety
*/
function getGradientColorFromSeed(seedString?: string): string {
if (!seedString) {
return GRADIENT_COLORS[0];
}
const index = seedString.length % GRADIENT_COLORS.length;
return GRADIENT_COLORS[index];
}

2
app/components/ui/IconButton.tsx
View File

@@ -46,7 +46,7 @@ export const IconButton = memo(
<button
ref={ref}
className={classNames(
'flex items-center text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive rounded-md p-1 enabled:hover:bg-bolt-elements-item-backgroundActive disabled:cursor-not-allowed',
'flex items-center text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive rounded-md p-1 enabled:hover:bg-bolt-elements-item-backgroundActive disabled:cursor-not-allowed focus:outline-none',
{
[classNames('opacity-30', disabledClassName)]: disabled,
},

87
app/components/ui/RepositoryStats.tsx Normal file
View File

@@ -0,0 +1,87 @@
import React from 'react';
import { Badge } from './Badge';
import { classNames } from '~/utils/classNames';
import { formatSize } from '~/utils/formatSize';
interface RepositoryStatsProps {
stats: {
totalFiles?: number;
totalSize?: number;
languages?: Record<string, number>;
hasPackageJson?: boolean;
hasDependencies?: boolean;
};
className?: string;
compact?: boolean;
}
export function RepositoryStats({ stats, className, compact = false }: RepositoryStatsProps) {
const { totalFiles, totalSize, languages, hasPackageJson, hasDependencies } = stats;
return (
<div className={classNames('space-y-3', className)}>
{!compact && (
<p className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
Repository Statistics:
</p>
)}
<div className={classNames('grid gap-3', compact ? 'grid-cols-2' : 'grid-cols-2 md:grid-cols-3')}>
{totalFiles !== undefined && (
<div className="flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
<span className="i-ph:files text-purple-500 w-4 h-4" />
<span className={compact ? 'text-xs' : 'text-sm'}>Total Files: {totalFiles.toLocaleString()}</span>
</div>
)}
{totalSize !== undefined && (
<div className="flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
<span className="i-ph:database text-purple-500 w-4 h-4" />
<span className={compact ? 'text-xs' : 'text-sm'}>Total Size: {formatSize(totalSize)}</span>
</div>
)}
</div>
{languages && Object.keys(languages).length > 0 && (
<div className={compact ? 'pt-1' : 'pt-2'}>
<div className="flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark mb-2">
<span className="i-ph:code text-purple-500 w-4 h-4" />
<span className={compact ? 'text-xs' : 'text-sm'}>Languages:</span>
</div>
<div className="flex flex-wrap gap-2">
{Object.entries(languages)
.sort(([, a], [, b]) => b - a)
.slice(0, compact ? 3 : 5)
.map(([lang, size]) => (
<Badge key={lang} variant="subtle" size={compact ? 'sm' : 'md'}>
{lang} ({formatSize(size)})
</Badge>
))}
{Object.keys(languages).length > (compact ? 3 : 5) && (
<Badge variant="subtle" size={compact ? 'sm' : 'md'}>
+{Object.keys(languages).length - (compact ? 3 : 5)} more
</Badge>
)}
</div>
</div>
)}
{(hasPackageJson || hasDependencies) && (
<div className={compact ? 'pt-1' : 'pt-2'}>
<div className="flex flex-wrap gap-2">
{hasPackageJson && (
<Badge variant="primary" size={compact ? 'sm' : 'md'} icon="i-ph:package w-3.5 h-3.5">
package.json
</Badge>
)}
{hasDependencies && (
<Badge variant="primary" size={compact ? 'sm' : 'md'} icon="i-ph:tree-structure w-3.5 h-3.5">
Dependencies
</Badge>
)}
</div>
</div>
)}
</div>
);
}

80
app/components/ui/SearchInput.tsx Normal file
View File

@@ -0,0 +1,80 @@
import React, { forwardRef } from 'react';
import { classNames } from '~/utils/classNames';
import { Input } from './Input';
import { motion, AnimatePresence } from 'framer-motion';
interface SearchInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
/** Function to call when the clear button is clicked */
onClear?: () => void;
/** Whether to show the clear button when there is input */
showClearButton?: boolean;
/** Additional class name for the search icon */
iconClassName?: string;
/** Additional class name for the container */
containerClassName?: string;
/** Whether the search is loading */
loading?: boolean;
}
/**
* SearchInput component
*
* A search input field with a search icon and optional clear button.
*/
export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
(
{ className, onClear, showClearButton = true, iconClassName, containerClassName, loading = false, ...props },
ref,
) => {
const hasValue = Boolean(props.value);
return (
<div className={classNames('relative flex items-center w-full', containerClassName)}>
{/* Search icon or loading spinner */}
<div
className={classNames(
'absolute left-3 top-1/2 -translate-y-1/2 text-bolt-elements-textTertiary',
iconClassName,
)}
>
{loading ? (
<span className="i-ph:spinner-gap animate-spin w-4 h-4" />
) : (
<span className="i-ph:magnifying-glass w-4 h-4" />
)}
</div>
{/* Input field */}
<Input
ref={ref}
className={classNames('pl-10', hasValue && showClearButton ? 'pr-10' : '', className)}
{...props}
/>
{/* Clear button */}
<AnimatePresence>
{hasValue && showClearButton && (
<motion.button
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.8 }}
transition={{ duration: 0.15 }}
type="button"
onClick={onClear}
className="absolute right-3 top-1/2 -translate-y-1/2 text-bolt-elements-textTertiary hover:text-bolt-elements-textSecondary p-1 rounded-full hover:bg-bolt-elements-background-depth-2"
aria-label="Clear search"
>
<span className="i-ph:x w-3.5 h-3.5" />
</motion.button>
)}
</AnimatePresence>
</div>
);
},
);
SearchInput.displayName = 'SearchInput';

134
app/components/ui/SearchResultItem.tsx Normal file
View File

@@ -0,0 +1,134 @@
import React from 'react';
import { motion } from 'framer-motion';
import { classNames } from '~/utils/classNames';
import { Badge } from './Badge';
interface SearchResultItemProps {
title: string;
subtitle?: string;
description?: string;
icon?: string;
iconBackground?: string;
iconColor?: string;
tags?: string[];
metadata?: Array<{
icon?: string;
label: string;
value?: string | number;
}>;
actionLabel?: string;
onAction?: () => void;
onClick?: () => void;
className?: string;
}
export function SearchResultItem({
title,
subtitle,
description,
icon,
iconBackground = 'bg-bolt-elements-background-depth-1/80 dark:bg-bolt-elements-background-depth-4/80',
iconColor = 'text-purple-500',
tags,
metadata,
actionLabel,
onAction,
onClick,
className,
}: SearchResultItemProps) {
return (
<motion.div
className={classNames(
'p-5 rounded-xl border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark hover:border-purple-500/40 transition-all duration-300 shadow-sm hover:shadow-md bg-bolt-elements-background-depth-1/50 dark:bg-bolt-elements-background-depth-3/50',
onClick ? 'cursor-pointer' : '',
className,
)}
whileHover={{
scale: 1.01,
y: -1,
transition: { type: 'spring', stiffness: 400, damping: 17 },
}}
whileTap={{ scale: 0.99 }}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
onClick={onClick}
>
<div className="flex items-start justify-between mb-3 gap-3">
<div className="flex items-start gap-3">
{icon && (
<div
className={classNames(
'w-10 h-10 rounded-xl backdrop-blur-sm flex items-center justify-center shadow-sm',
iconBackground,
)}
>
<span className={classNames(icon, 'w-5 h-5', iconColor)} />
</div>
)}
<div>
<h3 className="font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark text-base">
{title}
</h3>
{subtitle && (
<p className="text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark flex items-center gap-1">
{subtitle}
</p>
)}
</div>
</div>
{actionLabel && onAction && (
<motion.button
onClick={(e) => {
e.stopPropagation();
onAction();
}}
className="px-4 py-2 h-9 rounded-lg bg-purple-500 text-white hover:bg-purple-600 transition-all duration-200 flex items-center gap-2 min-w-[100px] justify-center text-sm shadow-sm hover:shadow-md"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
{actionLabel}
</motion.button>
)}
</div>
{description && (
<div className="mb-4 bg-bolt-elements-background-depth-1/50 dark:bg-bolt-elements-background-depth-4/50 backdrop-blur-sm p-3 rounded-lg border border-bolt-elements-borderColor/30 dark:border-bolt-elements-borderColor-dark/30">
<p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark line-clamp-2">
{description}
</p>
</div>
)}
{tags && tags.length > 0 && (
<div className="flex flex-wrap items-center gap-2 mb-3">
{tags.map((tag) => (
<Badge key={tag} variant="subtle" size="sm">
{tag}
</Badge>
))}
</div>
)}
{metadata && metadata.length > 0 && (
<div className="flex flex-wrap items-center gap-3 text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark">
{metadata.map((item, index) => (
<div key={index} className="flex items-center gap-1">
{item.icon && <span className={classNames(item.icon, 'w-3.5 h-3.5')} />}
<span>
{item.label}
{item.value !== undefined && ': '}
{item.value !== undefined && (
<span className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark">
{item.value}
</span>
)}
</span>
</div>
))}
</div>
)}
</motion.div>
);
}

1
app/components/ui/SettingsButton.tsx
View File

@@ -11,6 +11,7 @@ export const SettingsButton = memo(({ onClick }: SettingsButtonProps) => {
icon="i-ph:gear"
size="xl"
title="Settings"
data-testid="settings-button"
className="text-[#666] hover:text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive/10 transition-colors"
/>
);

90
app/components/ui/StatusIndicator.tsx Normal file
View File

@@ -0,0 +1,90 @@
import React from 'react';
import { classNames } from '~/utils/classNames';
// Status types supported by the component
type StatusType = 'online' | 'offline' | 'away' | 'busy' | 'success' | 'warning' | 'error' | 'info' | 'loading';
// Size types for the indicator
type SizeType = 'sm' | 'md' | 'lg';
// Status color mapping
const STATUS_COLORS: Record<StatusType, string> = {
online: 'bg-green-500',
success: 'bg-green-500',
offline: 'bg-red-500',
error: 'bg-red-500',
away: 'bg-yellow-500',
warning: 'bg-yellow-500',
busy: 'bg-red-500',
info: 'bg-blue-500',
loading: 'bg-purple-500',
};
// Size class mapping
const SIZE_CLASSES: Record<SizeType, string> = {
sm: 'w-2 h-2',
md: 'w-3 h-3',
lg: 'w-4 h-4',
};
// Text size mapping based on indicator size
const TEXT_SIZE_CLASSES: Record<SizeType, string> = {
sm: 'text-xs',
md: 'text-sm',
lg: 'text-base',
};
interface StatusIndicatorProps {
/** The status to display */
status: StatusType;
/** Size of the indicator */
size?: SizeType;
/** Whether to show a pulsing animation */
pulse?: boolean;
/** Optional label text */
label?: string;
/** Additional class name */
className?: string;
}
/**
* StatusIndicator component
*
* A component for displaying status indicators with optional labels and pulse animations.
*/
export function StatusIndicator({ status, size = 'md', pulse = false, label, className }: StatusIndicatorProps) {
// Get the color class for the status
const colorClass = STATUS_COLORS[status] || 'bg-gray-500';
// Get the size class for the indicator
const sizeClass = SIZE_CLASSES[size];
// Get the text size class for the label
const textSizeClass = TEXT_SIZE_CLASSES[size];
return (
<div className={classNames('flex items-center gap-2', className)}>
{/* Status indicator dot */}
<span className={classNames('rounded-full relative', colorClass, sizeClass)}>
{/* Pulse animation */}
{pulse && <span className={classNames('absolute inset-0 rounded-full animate-ping opacity-75', colorClass)} />}
</span>
{/* Optional label */}
{label && (
<span
className={classNames(
'text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark',
textSizeClass,
)}
>
{label}
</span>
)}
</div>
);
}

4
app/components/ui/Tabs.tsx
View File

@@ -11,7 +11,7 @@ const TabsList = React.forwardRef<
<TabsPrimitive.List
ref={ref}
className={classNames(
'inline-flex h-10 items-center justify-center rounded-md bg-bolt-elements-background p-1 text-bolt-elements-textSecondary',
'inline-flex h-10 items-center justify-center rounded-md bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-3-dark p-1 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark',
className,
)}
{...props}
@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
<TabsPrimitive.Trigger
ref={ref}
className={classNames(
'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-bolt-elements-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bolt-elements-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-bolt-elements-background data-[state=active]:text-bolt-elements-textPrimary data-[state=active]:shadow-sm',
'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-bolt-elements-background dark:ring-offset-bolt-elements-background-dark transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bolt-elements-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-bolt-elements-background-depth-0 dark:data-[state=active]:bg-bolt-elements-background-depth-2-dark data-[state=active]:text-bolt-elements-textPrimary dark:data-[state=active]:text-bolt-elements-textPrimary-dark data-[state=active]:shadow-sm',
className,
)}
{...props}

112
app/components/ui/TabsWithSlider.tsx Normal file
View File

@@ -0,0 +1,112 @@
import React, { useState, useRef, useEffect } from 'react';
import { motion } from 'framer-motion';
import { classNames } from '~/utils/classNames';
interface Tab {
/** Unique identifier for the tab */
id: string;
/** Content to display in the tab */
label: React.ReactNode;
/** Optional icon to display before the label */
icon?: string;
}
interface TabsWithSliderProps {
/** Array of tab objects */
tabs: Tab[];
/** ID of the currently active tab */
activeTab: string;
/** Function called when a tab is clicked */
onChange: (tabId: string) => void;
/** Additional class name for the container */
className?: string;
/** Additional class name for inactive tabs */
tabClassName?: string;
/** Additional class name for the active tab */
activeTabClassName?: string;
/** Additional class name for the slider */
sliderClassName?: string;
}
/**
* TabsWithSlider component
*
* A tabs component with an animated slider that moves to the active tab.
*/
export function TabsWithSlider({
tabs,
activeTab,
onChange,
className,
tabClassName,
activeTabClassName,
sliderClassName,
}: TabsWithSliderProps) {
// State for slider dimensions
const [sliderDimensions, setSliderDimensions] = useState({ width: 0, left: 0 });
// Refs for tab elements
const tabsRef = useRef<(HTMLButtonElement | null)[]>([]);
// Update slider position when active tab changes
useEffect(() => {
const activeIndex = tabs.findIndex((tab) => tab.id === activeTab);
if (activeIndex !== -1 && tabsRef.current[activeIndex]) {
const activeTabElement = tabsRef.current[activeIndex];
if (activeTabElement) {
setSliderDimensions({
width: activeTabElement.offsetWidth,
left: activeTabElement.offsetLeft,
});
}
}
}, [activeTab, tabs]);
return (
<div className={classNames('relative flex gap-2', className)}>
{/* Tab buttons */}
{tabs.map((tab, index) => (
<button
key={tab.id}
ref={(el) => (tabsRef.current[index] = el)}
onClick={() => onChange(tab.id)}
className={classNames(
'px-4 py-2 h-10 rounded-lg transition-all duration-200 flex items-center gap-2 min-w-[120px] justify-center relative overflow-hidden',
tab.id === activeTab
? classNames('text-white shadow-sm shadow-purple-500/20', activeTabClassName)
: classNames(
'bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark',
tabClassName,
),
)}
>
<span className={classNames('flex items-center gap-2', tab.id === activeTab ? 'font-medium' : '')}>
{tab.icon && <span className={tab.icon} />}
{tab.label}
</span>
</button>
))}
{/* Animated slider */}
<motion.div
className={classNames('absolute bottom-0 left-0 h-10 rounded-lg bg-purple-500 -z-10', sliderClassName)}
initial={false}
animate={{
width: sliderDimensions.width,
x: sliderDimensions.left,
}}
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
/>
</div>
);
}

131
app/components/ui/Tooltip.tsx
View File

@@ -1,7 +1,9 @@
import * as Tooltip from '@radix-ui/react-tooltip';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import { forwardRef, type ForwardedRef, type ReactElement } from 'react';
import { classNames } from '~/utils/classNames';
interface TooltipProps {
// Original WithTooltip component
interface WithTooltipProps {
tooltip: React.ReactNode;
children: ReactElement;
sideOffset?: number;
@@ -25,55 +27,96 @@ const WithTooltip = forwardRef(
position = 'top',
maxWidth = 250,
delay = 0,
}: TooltipProps,
}: WithTooltipProps,
_ref: ForwardedRef<HTMLElement>,
) => {
return (
<Tooltip.Root delayDuration={delay}>
<Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content
side={position}
className={`
z-[2000]
px-2.5
py-1.5
max-h-[300px]
select-none
rounded-md
bg-bolt-elements-background-depth-3
text-bolt-elements-textPrimary
text-sm
leading-tight
shadow-lg
animate-in
fade-in-0
zoom-in-95
data-[state=closed]:animate-out
data-[state=closed]:fade-out-0
data-[state=closed]:zoom-out-95
${className}
`}
sideOffset={sideOffset}
style={{
maxWidth,
...tooltipStyle,
}}
>
<div className="break-words">{tooltip}</div>
<Tooltip.Arrow
<TooltipPrimitive.Provider>
<TooltipPrimitive.Root delayDuration={delay}>
<TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
<TooltipPrimitive.Portal>
<TooltipPrimitive.Content
side={position}
className={`
fill-bolt-elements-background-depth-3
${arrowClassName}
z-[2000]
px-2.5
py-1.5
max-h-[300px]
select-none
rounded-md
bg-bolt-elements-background-depth-3
text-bolt-elements-textPrimary
text-sm
leading-tight
shadow-lg
animate-in
fade-in-0
zoom-in-95
data-[state=closed]:animate-out
data-[state=closed]:fade-out-0
data-[state=closed]:zoom-out-95
${className}
`}
width={12}
height={6}
/>
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
sideOffset={sideOffset}
style={{
maxWidth,
...tooltipStyle,
}}
>
<div className="break-words">{tooltip}</div>
<TooltipPrimitive.Arrow
className={`
fill-bolt-elements-background-depth-3
${arrowClassName}
`}
width={12}
height={6}
/>
</TooltipPrimitive.Content>
</TooltipPrimitive.Portal>
</TooltipPrimitive.Root>
</TooltipPrimitive.Provider>
);
},
);
// New Tooltip component with simpler API
interface TooltipProps {
content: React.ReactNode;
children: React.ReactNode;
side?: 'top' | 'right' | 'bottom' | 'left';
align?: 'start' | 'center' | 'end';
delayDuration?: number;
className?: string;
}
export function Tooltip({
content,
children,
side = 'top',
align = 'center',
delayDuration = 300,
className,
}: TooltipProps) {
return (
<TooltipPrimitive.Provider>
<TooltipPrimitive.Root delayDuration={delayDuration}>
<TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
<TooltipPrimitive.Content
side={side}
align={align}
className={classNames(
'z-50 overflow-hidden rounded-md bg-bolt-elements-background-depth-3 dark:bg-bolt-elements-background-depth-4 px-3 py-1.5 text-xs text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
className,
)}
sideOffset={5}
>
{content}
<TooltipPrimitive.Arrow className="fill-bolt-elements-background-depth-3 dark:fill-bolt-elements-background-depth-4" />
</TooltipPrimitive.Content>
</TooltipPrimitive.Root>
</TooltipPrimitive.Provider>
);
}
export default WithTooltip;

38
app/components/ui/index.ts Normal file
View File

@@ -0,0 +1,38 @@
// Export all UI components for easier imports
// Core components
export * from './Badge';
export * from './Button';
export * from './Card';
export * from './Checkbox';
export * from './Collapsible';
export * from './Dialog';
export * from './IconButton';
export * from './Input';
export * from './Label';
export * from './ScrollArea';
export * from './Switch';
export * from './Tabs';
export * from './ThemeSwitch';
// Loading components
export * from './LoadingDots';
export * from './LoadingOverlay';
// New components
export * from './Breadcrumbs';
export * from './CloseButton';
export * from './CodeBlock';
export * from './EmptyState';
export * from './FileIcon';
export * from './FilterChip';
export * from './GradientCard';
export * from './RepositoryStats';
export * from './SearchInput';
export * from './SearchResultItem';
export * from './StatusIndicator';
export * from './TabsWithSlider';
// Tooltip components
export { default as WithTooltip } from './Tooltip';
export { Tooltip } from './Tooltip';

28
app/components/ui/use-toast.ts
View File

@@ -1,6 +1,18 @@
import { useCallback } from 'react';
import { toast as toastify } from 'react-toastify';
// Configure standard toast settings
export const configuredToast = {
success: (message: string, options = {}) => toastify.success(message, { autoClose: 3000, ...options }),
error: (message: string, options = {}) => toastify.error(message, { autoClose: 3000, ...options }),
info: (message: string, options = {}) => toastify.info(message, { autoClose: 3000, ...options }),
warning: (message: string, options = {}) => toastify.warning(message, { autoClose: 3000, ...options }),
loading: (message: string, options = {}) => toastify.loading(message, { autoClose: 3000, ...options }),
};
// Export the original toast for cases where specific configuration is needed
export { toastify as toast };
interface ToastOptions {
type?: 'success' | 'error' | 'info' | 'warning';
duration?: number;
@@ -36,5 +48,19 @@ export function useToast() {
[toast],
);
return { toast, success, error };
const info = useCallback(
(message: string, options: Omit<ToastOptions, 'type'> = {}) => {
toast(message, { ...options, type: 'info' });
},
[toast],
);
const warning = useCallback(
(message: string, options: Omit<ToastOptions, 'type'> = {}) => {
toast(message, { ...options, type: 'warning' });
},
[toast],
);
return { toast, success, error, info, warning };
}

20
app/components/workbench/DiffView.tsx
View File

@@ -556,7 +556,25 @@ const InlineDiffComparison = memo(({ beforeCode, afterCode, filename, language }
useEffect(() => {
getHighlighter({
themes: ['github-dark', 'github-light'],
langs: ['typescript', 'javascript', 'json', 'html', 'css', 'jsx', 'tsx'],
langs: [
'typescript',
'javascript',
'json',
'html',
'css',
'jsx',
'tsx',
'python',
'php',
'java',
'c',
'cpp',
'csharp',
'go',
'ruby',
'rust',
'plaintext',
],
}).then(setHighlighter);
}, []);

85
app/components/workbench/EditorPanel.tsx
View File

@@ -1,6 +1,7 @@
import { useStore } from '@nanostores/react';
import { memo, useMemo } from 'react';
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
import * as Tabs from '@radix-ui/react-tabs';
import {
CodeMirrorEditor,
type EditorDocument,
@@ -21,6 +22,9 @@ import { FileBreadcrumb } from './FileBreadcrumb';
import { FileTree } from './FileTree';
import { DEFAULT_TERMINAL_SIZE, TerminalTabs } from './terminal/TerminalTabs';
import { workbenchStore } from '~/lib/stores/workbench';
import { Search } from './Search'; // <-- Ensure Search is imported
import { classNames } from '~/utils/classNames'; // <-- Import classNames if not already present
import { LockManager } from './LockManager'; // <-- Import LockManager
interface EditorPanelProps {
files?: FileMap;
@@ -68,31 +72,76 @@ export const EditorPanel = memo(
}, [editorDocument]);
const activeFileUnsaved = useMemo(() => {
return editorDocument !== undefined && unsavedFiles?.has(editorDocument.filePath);
if (!editorDocument || !unsavedFiles) {
return false;
}
// Make sure unsavedFiles is a Set before calling has()
return unsavedFiles instanceof Set && unsavedFiles.has(editorDocument.filePath);
}, [editorDocument, unsavedFiles]);
return (
<PanelGroup direction="vertical">
<Panel defaultSize={showTerminal ? DEFAULT_EDITOR_SIZE : 100} minSize={20}>
<PanelGroup direction="horizontal">
<Panel defaultSize={20} minSize={10} collapsible>
<div className="flex flex-col border-r border-bolt-elements-borderColor h-full">
<PanelHeader>
<div className="i-ph:tree-structure-duotone shrink-0" />
Files
</PanelHeader>
<FileTree
className="h-full"
files={files}
hideRoot
unsavedFiles={unsavedFiles}
fileHistory={fileHistory}
rootFolder={WORK_DIR}
selectedFile={selectedFile}
onFileSelect={onFileSelect}
/>
<Panel defaultSize={20} minSize={15} collapsible className="border-r border-bolt-elements-borderColor">
<div className="h-full">
<Tabs.Root defaultValue="files" className="flex flex-col h-full">
<PanelHeader className="w-full text-sm font-medium text-bolt-elements-textSecondary px-1">
<div className="h-full flex-shrink-0 flex items-center justify-between w-full">
<Tabs.List className="h-full flex-shrink-0 flex items-center">
<Tabs.Trigger
value="files"
className={classNames(
'h-full bg-transparent hover:bg-bolt-elements-background-depth-3 py-0.5 px-2 rounded-lg text-sm font-medium text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary data-[state=active]:text-bolt-elements-textPrimary',
)}
>
Files
</Tabs.Trigger>
<Tabs.Trigger
value="search"
className={classNames(
'h-full bg-transparent hover:bg-bolt-elements-background-depth-3 py-0.5 px-2 rounded-lg text-sm font-medium text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary data-[state=active]:text-bolt-elements-textPrimary',
)}
>
Search
</Tabs.Trigger>
<Tabs.Trigger
value="locks"
className={classNames(
'h-full bg-transparent hover:bg-bolt-elements-background-depth-3 py-0.5 px-2 rounded-lg text-sm font-medium text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary data-[state=active]:text-bolt-elements-textPrimary',
)}
>
Locks
</Tabs.Trigger>
</Tabs.List>
</div>
</PanelHeader>
<Tabs.Content value="files" className="flex-grow overflow-auto focus-visible:outline-none">
<FileTree
className="h-full"
files={files}
hideRoot
unsavedFiles={unsavedFiles}
fileHistory={fileHistory}
rootFolder={WORK_DIR}
selectedFile={selectedFile}
onFileSelect={onFileSelect}
/>
</Tabs.Content>
<Tabs.Content value="search" className="flex-grow overflow-auto focus-visible:outline-none">
<Search />
</Tabs.Content>
<Tabs.Content value="locks" className="flex-grow overflow-auto focus-visible:outline-none">
<LockManager />
</Tabs.Content>
</Tabs.Root>
</div>
</Panel>
<PanelResizeHandle />
<Panel className="flex flex-col" defaultSize={80} minSize={20}>
<PanelHeader className="overflow-x-auto">
@@ -114,7 +163,7 @@ export const EditorPanel = memo(
</div>
)}
</PanelHeader>
<div className="h-full flex-1 overflow-hidden">
<div className="h-full flex-1 overflow-hidden modern-scrollbar">
<CodeMirrorEditor
theme={theme}
editable={!isStreaming && editorDocument !== undefined}

55
app/components/workbench/ExpoQrModal.tsx Normal file
View File

@@ -0,0 +1,55 @@
import React from 'react';
import { Dialog, DialogTitle, DialogDescription, DialogRoot } from '~/components/ui/Dialog';
import { useStore } from '@nanostores/react';
import { expoUrlAtom } from '~/lib/stores/qrCodeStore';
import { QRCode } from 'react-qrcode-logo';
interface ExpoQrModalProps {
open: boolean;
onClose: () => void;
}
export const ExpoQrModal: React.FC<ExpoQrModalProps> = ({ open, onClose }) => {
const expoUrl = useStore(expoUrlAtom);
return (
<DialogRoot open={open} onOpenChange={(v) => !v && onClose()}>
<Dialog
className="text-center !flex-col !mx-auto !text-center !max-w-md"
showCloseButton={true}
onClose={onClose}
>
<div className="border !border-bolt-elements-borderColor flex flex-col gap-5 justify-center items-center p-6 bg-bolt-elements-background-depth-2 rounded-md">
<div className="i-bolt:expo-brand h-10 w-full invert dark:invert-none"></div>
<DialogTitle className="text-bolt-elements-textTertiary text-lg font-semibold leading-6">
Preview on your own mobile device
</DialogTitle>
<DialogDescription className="bg-bolt-elements-background-depth-3 max-w-sm rounded-md p-1 border border-bolt-elements-borderColor">
Scan this QR code with the Expo Go app on your mobile device to open your project.
</DialogDescription>
<div className="my-6 flex flex-col items-center">
{expoUrl ? (
<QRCode
logoImage="/favicon.svg"
removeQrCodeBehindLogo={true}
logoPadding={3}
logoHeight={50}
logoWidth={50}
logoPaddingStyle="square"
style={{
borderRadius: 16,
padding: 2,
backgroundColor: '#8a5fff',
}}
value={expoUrl}
size={200}
/>
) : (
<div className="text-gray-500 text-center">No Expo URL detected.</div>
)}
</div>
</div>
</Dialog>
</DialogRoot>
);
};

425
app/components/workbench/FileTree.tsx
View File

@@ -1,10 +1,13 @@
import { memo, useEffect, useMemo, useState, type ReactNode } from 'react';
import { memo, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
import type { FileMap } from '~/lib/stores/files';
import { classNames } from '~/utils/classNames';
import { createScopedLogger, renderLogger } from '~/utils/logger';
import * as ContextMenu from '@radix-ui/react-context-menu';
import type { FileHistory } from '~/types/actions';
import { diffLines, type Change } from 'diff';
import { workbenchStore } from '~/lib/stores/workbench';
import { toast } from 'react-toastify';
import { path } from '~/utils/path';
const logger = createScopedLogger('FileTree');
@@ -25,6 +28,14 @@ interface Props {
className?: string;
}
interface InlineInputProps {
depth: number;
placeholder: string;
initialValue?: string;
onSubmit: (value: string) => void;
onCancel: () => void;
}
export const FileTree = memo(
({
files = {},
@@ -132,7 +143,7 @@ export const FileTree = memo(
};
return (
<div className={classNames('text-sm', className, 'overflow-y-auto')}>
<div className={classNames('text-sm', className, 'overflow-y-auto modern-scrollbar')}>
{filteredFileList.map((fileOrFolder) => {
switch (fileOrFolder.kind) {
case 'file': {
@@ -141,7 +152,7 @@ export const FileTree = memo(
key={fileOrFolder.id}
selected={selectedFile === fileOrFolder.fullPath}
file={fileOrFolder}
unsavedChanges={unsavedFiles?.has(fileOrFolder.fullPath)}
unsavedChanges={unsavedFiles instanceof Set && unsavedFiles.has(fileOrFolder.fullPath)}
fileHistory={fileHistory}
onCopyPath={() => {
onCopyPath(fileOrFolder);
@@ -213,28 +224,375 @@ function ContextMenuItem({ onSelect, children }: { onSelect?: () => void; childr
);
}
function FileContextMenu({ onCopyPath, onCopyRelativePath, children }: FolderContextMenuProps) {
function InlineInput({ depth, placeholder, initialValue = '', onSubmit, onCancel }: InlineInputProps) {
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
const timer = setTimeout(() => {
if (inputRef.current) {
inputRef.current.focus();
if (initialValue) {
inputRef.current.value = initialValue;
inputRef.current.select();
}
}
}, 50);
return () => clearTimeout(timer);
}, [initialValue]);
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter') {
const value = inputRef.current?.value.trim();
if (value) {
onSubmit(value);
}
} else if (e.key === 'Escape') {
onCancel();
}
};
return (
<ContextMenu.Root>
<ContextMenu.Trigger>{children}</ContextMenu.Trigger>
<ContextMenu.Portal>
<ContextMenu.Content
style={{ zIndex: 998 }}
className="border border-bolt-elements-borderColor rounded-md z-context-menu bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-2 data-[state=open]:animate-in animate-duration-100 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-98 w-56"
>
<ContextMenu.Group className="p-1 border-b-px border-solid border-bolt-elements-borderColor">
<ContextMenuItem onSelect={onCopyPath}>Copy path</ContextMenuItem>
<ContextMenuItem onSelect={onCopyRelativePath}>Copy relative path</ContextMenuItem>
</ContextMenu.Group>
</ContextMenu.Content>
</ContextMenu.Portal>
</ContextMenu.Root>
<div
className="flex items-center w-full px-2 bg-bolt-elements-background-depth-4 border border-bolt-elements-item-contentAccent py-0.5 text-bolt-elements-textPrimary"
style={{ paddingLeft: `${6 + depth * NODE_PADDING_LEFT}px` }}
>
<div className="scale-120 shrink-0 i-ph:file-plus text-bolt-elements-textTertiary" />
<input
ref={inputRef}
type="text"
className="ml-2 flex-1 bg-transparent border-none outline-none py-0.5 text-sm text-bolt-elements-textPrimary placeholder:text-bolt-elements-textTertiary min-w-0"
placeholder={placeholder}
onKeyDown={handleKeyDown}
onBlur={() => {
setTimeout(() => {
if (document.activeElement !== inputRef.current) {
onCancel();
}
}, 100);
}}
/>
</div>
);
}
function FileContextMenu({
onCopyPath,
onCopyRelativePath,
fullPath,
children,
}: FolderContextMenuProps & { fullPath: string }) {
const [isCreatingFile, setIsCreatingFile] = useState(false);
const [isCreatingFolder, setIsCreatingFolder] = useState(false);
const [isDragging, setIsDragging] = useState(false);
const depth = useMemo(() => fullPath.split('/').length, [fullPath]);
const fileName = useMemo(() => path.basename(fullPath), [fullPath]);
const isFolder = useMemo(() => {
const files = workbenchStore.files.get();
const fileEntry = files[fullPath];
return !fileEntry || fileEntry.type === 'folder';
}, [fullPath]);
const targetPath = useMemo(() => {
return isFolder ? fullPath : path.dirname(fullPath);
}, [fullPath, isFolder]);
const handleDragOver = useCallback((e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(true);
}, []);
const handleDragLeave = useCallback((e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(false);
}, []);
const handleDrop = useCallback(
async (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
const items = Array.from(e.dataTransfer.items);
const files = items.filter((item) => item.kind === 'file');
for (const item of files) {
const file = item.getAsFile();
if (file) {
try {
const filePath = path.join(fullPath, file.name);
// Convert file to binary data (Uint8Array)
const arrayBuffer = await file.arrayBuffer();
const binaryContent = new Uint8Array(arrayBuffer);
const success = await workbenchStore.createFile(filePath, binaryContent);
if (success) {
toast.success(`File ${file.name} uploaded successfully`);
} else {
toast.error(`Failed to upload file ${file.name}`);
}
} catch (error) {
toast.error(`Error uploading ${file.name}`);
logger.error(error);
}
}
}
setIsDragging(false);
},
[fullPath],
);
const handleCreateFile = async (fileName: string) => {
const newFilePath = path.join(targetPath, fileName);
const success = await workbenchStore.createFile(newFilePath, '');
if (success) {
toast.success('File created successfully');
} else {
toast.error('Failed to create file');
}
setIsCreatingFile(false);
};
const handleCreateFolder = async (folderName: string) => {
const newFolderPath = path.join(targetPath, folderName);
const success = await workbenchStore.createFolder(newFolderPath);
if (success) {
toast.success('Folder created successfully');
} else {
toast.error('Failed to create folder');
}
setIsCreatingFolder(false);
};
const handleDelete = async () => {
try {
if (!confirm(`Are you sure you want to delete ${isFolder ? 'folder' : 'file'}: ${fileName}?`)) {
return;
}
let success;
if (isFolder) {
success = await workbenchStore.deleteFolder(fullPath);
} else {
success = await workbenchStore.deleteFile(fullPath);
}
if (success) {
toast.success(`${isFolder ? 'Folder' : 'File'} deleted successfully`);
} else {
toast.error(`Failed to delete ${isFolder ? 'folder' : 'file'}`);
}
} catch (error) {
toast.error(`Error deleting ${isFolder ? 'folder' : 'file'}`);
logger.error(error);
}
};
// Handler for locking a file with full lock
const handleLockFile = () => {
try {
if (isFolder) {
return;
}
const success = workbenchStore.lockFile(fullPath);
if (success) {
toast.success(`File locked successfully`);
} else {
toast.error(`Failed to lock file`);
}
} catch (error) {
toast.error(`Error locking file`);
logger.error(error);
}
};
// Handler for unlocking a file
const handleUnlockFile = () => {
try {
if (isFolder) {
return;
}
const success = workbenchStore.unlockFile(fullPath);
if (success) {
toast.success(`File unlocked successfully`);
} else {
toast.error(`Failed to unlock file`);
}
} catch (error) {
toast.error(`Error unlocking file`);
logger.error(error);
}
};
// Handler for locking a folder with full lock
const handleLockFolder = () => {
try {
if (!isFolder) {
return;
}
const success = workbenchStore.lockFolder(fullPath);
if (success) {
toast.success(`Folder locked successfully`);
} else {
toast.error(`Failed to lock folder`);
}
} catch (error) {
toast.error(`Error locking folder`);
logger.error(error);
}
};
// Handler for unlocking a folder
const handleUnlockFolder = () => {
try {
if (!isFolder) {
return;
}
const success = workbenchStore.unlockFolder(fullPath);
if (success) {
toast.success(`Folder unlocked successfully`);
} else {
toast.error(`Failed to unlock folder`);
}
} catch (error) {
toast.error(`Error unlocking folder`);
logger.error(error);
}
};
return (
<>
<ContextMenu.Root>
<ContextMenu.Trigger>
<div
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
className={classNames('relative', {
'bg-bolt-elements-background-depth-2 border border-dashed border-bolt-elements-item-contentAccent rounded-md':
isDragging,
})}
>
{children}
</div>
</ContextMenu.Trigger>
<ContextMenu.Portal>
<ContextMenu.Content
style={{ zIndex: 998 }}
className="border border-bolt-elements-borderColor rounded-md z-context-menu bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-2 data-[state=open]:animate-in animate-duration-100 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-98 w-56"
>
<ContextMenu.Group className="p-1 border-b-px border-solid border-bolt-elements-borderColor">
<ContextMenuItem onSelect={() => setIsCreatingFile(true)}>
<div className="flex items-center gap-2">
<div className="i-ph:file-plus" />
New File
</div>
</ContextMenuItem>
<ContextMenuItem onSelect={() => setIsCreatingFolder(true)}>
<div className="flex items-center gap-2">
<div className="i-ph:folder-plus" />
New Folder
</div>
</ContextMenuItem>
</ContextMenu.Group>
<ContextMenu.Group className="p-1">
<ContextMenuItem onSelect={onCopyPath}>Copy path</ContextMenuItem>
<ContextMenuItem onSelect={onCopyRelativePath}>Copy relative path</ContextMenuItem>
</ContextMenu.Group>
{/* Add lock/unlock options for files and folders */}
<ContextMenu.Group className="p-1 border-t-px border-solid border-bolt-elements-borderColor">
{!isFolder ? (
<>
<ContextMenuItem onSelect={handleLockFile}>
<div className="flex items-center gap-2">
<div className="i-ph:lock-simple" />
Lock File
</div>
</ContextMenuItem>
<ContextMenuItem onSelect={handleUnlockFile}>
<div className="flex items-center gap-2">
<div className="i-ph:lock-key-open" />
Unlock File
</div>
</ContextMenuItem>
</>
) : (
<>
<ContextMenuItem onSelect={handleLockFolder}>
<div className="flex items-center gap-2">
<div className="i-ph:lock-simple" />
Lock Folder
</div>
</ContextMenuItem>
<ContextMenuItem onSelect={handleUnlockFolder}>
<div className="flex items-center gap-2">
<div className="i-ph:lock-key-open" />
Unlock Folder
</div>
</ContextMenuItem>
</>
)}
</ContextMenu.Group>
{/* Add delete option in a new group */}
<ContextMenu.Group className="p-1 border-t-px border-solid border-bolt-elements-borderColor">
<ContextMenuItem onSelect={handleDelete}>
<div className="flex items-center gap-2 text-red-500">
<div className="i-ph:trash" />
Delete {isFolder ? 'Folder' : 'File'}
</div>
</ContextMenuItem>
</ContextMenu.Group>
</ContextMenu.Content>
</ContextMenu.Portal>
</ContextMenu.Root>
{isCreatingFile && (
<InlineInput
depth={depth}
placeholder="Enter file name..."
onSubmit={handleCreateFile}
onCancel={() => setIsCreatingFile(false)}
/>
)}
{isCreatingFolder && (
<InlineInput
depth={depth}
placeholder="Enter folder name..."
onSubmit={handleCreateFolder}
onCancel={() => setIsCreatingFolder(false)}
/>
)}
</>
);
}
function Folder({ folder, collapsed, selected = false, onCopyPath, onCopyRelativePath, onClick }: FolderProps) {
// Check if the folder is locked
const { isLocked } = workbenchStore.isFolderLocked(folder.fullPath);
return (
<FileContextMenu onCopyPath={onCopyPath} onCopyRelativePath={onCopyRelativePath}>
<FileContextMenu onCopyPath={onCopyPath} onCopyRelativePath={onCopyRelativePath} fullPath={folder.fullPath}>
<NodeButton
className={classNames('group', {
'bg-transparent text-bolt-elements-item-contentDefault hover:text-bolt-elements-item-contentActive hover:bg-bolt-elements-item-backgroundActive':
@@ -248,7 +606,15 @@ function Folder({ folder, collapsed, selected = false, onCopyPath, onCopyRelativ
})}
onClick={onClick}
>
{folder.name}
<div className="flex items-center w-full">
<div className="flex-1 truncate pr-2">{folder.name}</div>
{isLocked && (
<span
className={classNames('shrink-0', 'i-ph:lock-simple scale-80 text-red-500')}
title={'Folder is locked'}
/>
)}
</div>
</NodeButton>
</FileContextMenu>
);
@@ -265,7 +631,7 @@ interface FileProps {
}
function File({
file: { depth, name, fullPath },
file,
onClick,
onCopyPath,
onCopyRelativePath,
@@ -273,17 +639,18 @@ function File({
unsavedChanges = false,
fileHistory = {},
}: FileProps) {
const { depth, name, fullPath } = file;
// Check if the file is locked
const { locked } = workbenchStore.isFileLocked(fullPath);
const fileModifications = fileHistory[fullPath];
// const hasModifications = fileModifications !== undefined;
// Calculate added and removed lines from the most recent changes
const { additions, deletions } = useMemo(() => {
if (!fileModifications?.originalContent) {
return { additions: 0, deletions: 0 };
}
// Usar a mesma lógica do DiffView para processar as mudanças
const normalizedOriginal = fileModifications.originalContent.replace(/\r\n/g, '\n');
const normalizedCurrent =
fileModifications.versions[fileModifications.versions.length - 1]?.content.replace(/\r\n/g, '\n') || '';
@@ -317,7 +684,7 @@ function File({
const showStats = additions > 0 || deletions > 0;
return (
<FileContextMenu onCopyPath={onCopyPath} onCopyRelativePath={onCopyRelativePath}>
<FileContextMenu onCopyPath={onCopyPath} onCopyRelativePath={onCopyRelativePath} fullPath={fullPath}>
<NodeButton
className={classNames('group', {
'bg-transparent hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-item-contentDefault':
@@ -343,6 +710,12 @@ function File({
{deletions > 0 && <span className="text-red-500">-{deletions}</span>}
</div>
)}
{locked && (
<span
className={classNames('shrink-0', 'i-ph:lock-simple scale-80 text-red-500')}
title={'File is locked'}
/>
)}
{unsavedChanges && <span className="i-ph:circle-fill scale-68 shrink-0 text-orange-500" />}
</div>
</div>

262
app/components/workbench/LockManager.tsx Normal file
View File

@@ -0,0 +1,262 @@
import { useState, useEffect } from 'react';
import { workbenchStore } from '~/lib/stores/workbench';
import { classNames } from '~/utils/classNames';
import { Checkbox } from '~/components/ui/Checkbox';
import { toast } from '~/components/ui/use-toast';
interface LockedItem {
path: string;
type: 'file' | 'folder';
}
export function LockManager() {
const [lockedItems, setLockedItems] = useState<LockedItem[]>([]);
const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
const [filter, setFilter] = useState<'all' | 'files' | 'folders'>('all');
const [searchTerm, setSearchTerm] = useState('');
// Load locked items
useEffect(() => {
const loadLockedItems = () => {
// We don't need to filter by chat ID here as we want to show all locked files
const items: LockedItem[] = [];
// Get all files and folders from the workbench store
const allFiles = workbenchStore.files.get();
// Check each file/folder for locks
Object.entries(allFiles).forEach(([path, item]) => {
if (!item) {
return;
}
if (item.type === 'file' && item.isLocked) {
items.push({
path,
type: 'file',
});
} else if (item.type === 'folder' && item.isLocked) {
items.push({
path,
type: 'folder',
});
}
});
setLockedItems(items);
};
loadLockedItems();
// Set up an interval to refresh the list periodically
const intervalId = setInterval(loadLockedItems, 5000);
return () => clearInterval(intervalId);
}, []);
// Filter and sort the locked items
const filteredAndSortedItems = lockedItems
.filter((item) => {
// Apply type filter
if (filter === 'files' && item.type !== 'file') {
return false;
}
if (filter === 'folders' && item.type !== 'folder') {
return false;
}
// Apply search filter
if (searchTerm && !item.path.toLowerCase().includes(searchTerm.toLowerCase())) {
return false;
}
return true;
})
.sort((a, b) => {
return a.path.localeCompare(b.path);
});
// Handle selecting/deselecting a single item
const handleSelectItem = (path: string) => {
const newSelectedItems = new Set(selectedItems);
if (newSelectedItems.has(path)) {
newSelectedItems.delete(path);
} else {
newSelectedItems.add(path);
}
setSelectedItems(newSelectedItems);
};
// Handle selecting/deselecting all visible items
const handleSelectAll = (checked: boolean | 'indeterminate') => {
if (checked === true) {
// Select all filtered items
const allVisiblePaths = new Set(filteredAndSortedItems.map((item) => item.path));
setSelectedItems(allVisiblePaths);
} else {
// Deselect all (clear selection)
setSelectedItems(new Set());
}
};
// Handle unlocking selected items
const handleUnlockSelected = () => {
if (selectedItems.size === 0) {
toast.error('No items selected to unlock.');
return;
}
let unlockedCount = 0;
selectedItems.forEach((path) => {
const item = lockedItems.find((i) => i.path === path);
if (item) {
if (item.type === 'file') {
workbenchStore.unlockFile(path);
} else {
workbenchStore.unlockFolder(path);
}
unlockedCount++;
}
});
if (unlockedCount > 0) {
toast.success(`Unlocked ${unlockedCount} selected item(s).`);
setSelectedItems(new Set()); // Clear selection after unlocking
}
};
// Determine the state of the "Select All" checkbox
const isAllSelected = filteredAndSortedItems.length > 0 && selectedItems.size === filteredAndSortedItems.length;
const isSomeSelected = selectedItems.size > 0 && selectedItems.size < filteredAndSortedItems.length;
const selectAllCheckedState: boolean | 'indeterminate' = isAllSelected
? true
: isSomeSelected
? 'indeterminate'
: false;
return (
<div className="flex flex-col h-full overflow-hidden">
{/* Controls */}
<div className="flex items-center gap-1 px-2 py-1 border-b border-bolt-elements-borderColor">
{/* Search Input */}
<div className="relative flex-1">
<span className="absolute left-2 top-1/2 -translate-y-1/2 text-bolt-elements-textTertiary i-ph:magnifying-glass text-xs pointer-events-none" />
<input
type="text"
placeholder="Search..."
className="w-full text-xs pl-6 pr-2 py-0.5 h-6 bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary rounded border border-bolt-elements-borderColor focus:outline-none"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
style={{ minWidth: 0 }}
/>
</div>
{/* Filter Select */}
<select
className="text-xs px-1 py-0.5 h-6 bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary rounded border border-bolt-elements-borderColor focus:outline-none"
value={filter}
onChange={(e) => setFilter(e.target.value as any)}
>
<option value="all">All</option>
<option value="files">Files</option>
<option value="folders">Folders</option>
</select>
</div>
{/* Header Row with Select All */}
<div className="flex items-center justify-between px-2 py-1 text-xs text-bolt-elements-textSecondary">
<div>
<Checkbox
checked={selectAllCheckedState}
onCheckedChange={handleSelectAll}
className="w-3 h-3 rounded border-bolt-elements-borderColor mr-2"
aria-label="Select all items"
disabled={filteredAndSortedItems.length === 0} // Disable if no items to select
/>
<span>All</span>
</div>
{selectedItems.size > 0 && (
<button
className="ml-auto px-2 py-0.5 rounded bg-bolt-elements-button-secondary-background hover:bg-bolt-elements-button-secondary-backgroundHover text-bolt-elements-button-secondary-text text-xs flex items-center gap-1"
onClick={handleUnlockSelected}
title="Unlock all selected items"
>
Unlock all
</button>
)}
<div></div>
</div>
{/* List of locked items */}
<div className="flex-1 overflow-auto modern-scrollbar px-1 py-1">
{filteredAndSortedItems.length === 0 ? (
<div className="flex flex-col items-center justify-center h-full text-bolt-elements-textTertiary text-xs gap-2">
<span className="i-ph:lock-open-duotone text-lg opacity-50" />
<span>No locked items found</span>
</div>
) : (
<ul className="space-y-1">
{filteredAndSortedItems.map((item) => (
<li
key={item.path}
className={classNames(
'text-bolt-elements-textTertiary flex items-center gap-2 px-2 py-1 rounded hover:bg-bolt-elements-background-depth-2 transition-colors group',
selectedItems.has(item.path) ? 'bg-bolt-elements-background-depth-2' : '',
)}
>
<Checkbox
checked={selectedItems.has(item.path)}
onCheckedChange={() => handleSelectItem(item.path)}
className="w-3 h-3 rounded border-bolt-elements-borderColor"
aria-labelledby={`item-label-${item.path}`} // For accessibility
/>
<span
className={classNames(
'shrink-0 text-bolt-elements-textTertiary text-xs',
item.type === 'file' ? 'i-ph:file-text-duotone' : 'i-ph:folder-duotone',
)}
/>
<span id={`item-label-${item.path}`} className="truncate flex-1 text-xs" title={item.path}>
{item.path.replace('/home/project/', '')}
</span>
{/* ... rest of the item details and buttons ... */}
<span
className={classNames(
'inline-flex items-center px-1 rounded-sm text-xs',
'bg-red-500/10 text-red-500',
)}
></span>
<button
className="flex items-center px-1 py-0.5 text-xs rounded bg-transparent hover:bg-bolt-elements-background-depth-3"
onClick={() => {
if (item.type === 'file') {
workbenchStore.unlockFile(item.path);
} else {
workbenchStore.unlockFolder(item.path);
}
toast.success(`${item.path.replace('/home/project/', '')} unlocked`);
}}
title="Unlock"
>
<span className="i-ph:lock-open text-xs" />
</button>
</li>
))}
</ul>
)}
</div>
{/* Footer */}
<div className="px-2 py-1 border-t border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 text-xs text-bolt-elements-textTertiary flex justify-between items-center">
<div>
{filteredAndSortedItems.length} item(s) • {selectedItems.size} selected
</div>
</div>
</div>
);
}

14
app/components/workbench/PortDropdown.tsx
View File

@@ -1,5 +1,4 @@
import { memo, useEffect, useRef } from 'react';
import { IconButton } from '~/components/ui/IconButton';
import type { PreviewInfo } from '~/lib/stores/previews';
interface PortDropdownProps {
@@ -48,9 +47,18 @@ export const PortDropdown = memo(
return (
<div className="relative z-port-dropdown" ref={dropdownRef}>
<IconButton icon="i-ph:plug" onClick={() => setIsDropdownOpen(!isDropdownOpen)} />
{/* Display the active port if available, otherwise show the plug icon */}
<button
className="flex items-center group-focus-within:text-bolt-elements-preview-addressBar-text bg-white group-focus-within:bg-bolt-elements-preview-addressBar-background dark:bg-bolt-elements-preview-addressBar-backgroundHover rounded-full px-2 py-1 gap-1.5"
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
>
<span className="i-ph:plug text-base"></span>
{previews.length > 0 && activePreviewIndex >= 0 && activePreviewIndex < previews.length ? (
<span className="text-xs font-medium">{previews[activePreviewIndex].port}</span>
) : null}
</button>
{isDropdownOpen && (
<div className="absolute right-0 mt-2 bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded shadow-sm min-w-[140px] dropdown-animation">
<div className="absolute left-0 mt-2 bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded shadow-sm min-w-[140px] dropdown-animation">
<div className="px-4 py-2 border-b border-bolt-elements-borderColor text-sm font-semibold text-bolt-elements-textPrimary">
Ports
</div>

882
app/components/workbench/Preview.tsx
View File

File diff suppressed because it is too large Load Diff

257
app/components/workbench/Search.tsx Normal file
View File

@@ -0,0 +1,257 @@
import { useState, useMemo, useCallback, useEffect } from 'react';
import type { TextSearchOptions, TextSearchOnProgressCallback, WebContainer } from '@webcontainer/api';
import { workbenchStore } from '~/lib/stores/workbench';
import { webcontainer } from '~/lib/webcontainer';
import { WORK_DIR } from '~/utils/constants';
import { debounce } from '~/utils/debounce';
interface DisplayMatch {
path: string;
lineNumber: number;
previewText: string;
matchCharStart: number;
matchCharEnd: number;
}
async function performTextSearch(
instance: WebContainer,
query: string,
options: Omit<TextSearchOptions, 'folders'>,
onProgress: (results: DisplayMatch[]) => void,
): Promise<void> {
if (!instance || typeof instance.internal?.textSearch !== 'function') {
console.error('WebContainer instance not available or internal searchText method is missing/not a function.');
return;
}
const searchOptions: TextSearchOptions = {
...options,
folders: [WORK_DIR],
};
const progressCallback: TextSearchOnProgressCallback = (filePath: any, apiMatches: any[]) => {
const displayMatches: DisplayMatch[] = [];
apiMatches.forEach((apiMatch: { preview: { text: string; matches: string | any[] }; ranges: any[] }) => {
const previewLines = apiMatch.preview.text.split('\n');
apiMatch.ranges.forEach((range: { startLineNumber: number; startColumn: any; endColumn: any }) => {
let previewLineText = '(Preview line not found)';
let lineIndexInPreview = -1;
if (apiMatch.preview.matches.length > 0) {
const previewStartLine = apiMatch.preview.matches[0].startLineNumber;
lineIndexInPreview = range.startLineNumber - previewStartLine;
}
if (lineIndexInPreview >= 0 && lineIndexInPreview < previewLines.length) {
previewLineText = previewLines[lineIndexInPreview];
} else {
previewLineText = previewLines[0] ?? '(Preview unavailable)';
}
displayMatches.push({
path: filePath,
lineNumber: range.startLineNumber,
previewText: previewLineText,
matchCharStart: range.startColumn,
matchCharEnd: range.endColumn,
});
});
});
if (displayMatches.length > 0) {
onProgress(displayMatches);
}
};
try {
await instance.internal.textSearch(query, searchOptions, progressCallback);
} catch (error) {
console.error('Error during internal text search:', error);
}
}
function groupResultsByFile(results: DisplayMatch[]): Record<string, DisplayMatch[]> {
return results.reduce(
(acc, result) => {
if (!acc[result.path]) {
acc[result.path] = [];
}
acc[result.path].push(result);
return acc;
},
{} as Record<string, DisplayMatch[]>,
);
}
export function Search() {
const [searchQuery, setSearchQuery] = useState('');
const [searchResults, setSearchResults] = useState<DisplayMatch[]>([]);
const [isSearching, setIsSearching] = useState(false);
const [expandedFiles, setExpandedFiles] = useState<Record<string, boolean>>({});
const [hasSearched, setHasSearched] = useState(false);
const groupedResults = useMemo(() => groupResultsByFile(searchResults), [searchResults]);
useEffect(() => {
if (searchResults.length > 0) {
const allExpanded: Record<string, boolean> = {};
Object.keys(groupedResults).forEach((file) => {
allExpanded[file] = true;
});
setExpandedFiles(allExpanded);
}
}, [groupedResults, searchResults]);
const handleSearch = useCallback(async (query: string) => {
if (!query.trim()) {
setSearchResults([]);
setIsSearching(false);
setExpandedFiles({});
setHasSearched(false);
return;
}
setIsSearching(true);
setSearchResults([]);
setExpandedFiles({});
setHasSearched(true);
const minLoaderTime = 300; // ms
const start = Date.now();
try {
const instance = await webcontainer;
const options: Omit<TextSearchOptions, 'folders'> = {
homeDir: WORK_DIR, // Adjust this path as needed
includes: ['**/*.*'],
excludes: ['**/node_modules/**', '**/package-lock.json', '**/.git/**', '**/dist/**', '**/*.lock'],
gitignore: true,
requireGit: false,
globalIgnoreFiles: true,
ignoreSymlinks: false,
resultLimit: 500,
isRegex: false,
caseSensitive: false,
isWordMatch: false,
};
const progressHandler = (batchResults: DisplayMatch[]) => {
setSearchResults((prevResults) => [...prevResults, ...batchResults]);
};
await performTextSearch(instance, query, options, progressHandler);
} catch (error) {
console.error('Failed to initiate search:', error);
} finally {
const elapsed = Date.now() - start;
if (elapsed < minLoaderTime) {
setTimeout(() => setIsSearching(false), minLoaderTime - elapsed);
} else {
setIsSearching(false);
}
}
}, []);
const debouncedSearch = useCallback(debounce(handleSearch, 300), [handleSearch]);
useEffect(() => {
debouncedSearch(searchQuery);
}, [searchQuery, debouncedSearch]);
const handleResultClick = (filePath: string, line?: number) => {
workbenchStore.setSelectedFile(filePath);
/*
* Adjust line number to be 0-based if it's defined
* The search results use 1-based line numbers, but CodeMirrorEditor expects 0-based
*/
const adjustedLine = typeof line === 'number' ? Math.max(0, line - 1) : undefined;
workbenchStore.setCurrentDocumentScrollPosition({ line: adjustedLine, column: 0 });
};
return (
<div className="flex flex-col h-full bg-bolt-elements-background-depth-2">
{/* Search Bar */}
<div className="flex items-center py-3 px-3">
<div className="relative flex-1">
<input
type="text"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Search"
className="w-full px-2 py-1 rounded-md bg-bolt-elements-background-depth-3 text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary focus:outline-none transition-all"
/>
</div>
</div>
{/* Results */}
<div className="flex-1 overflow-auto py-2">
{isSearching && (
<div className="flex items-center justify-center h-32 text-bolt-elements-textTertiary">
<div className="i-ph:circle-notch animate-spin mr-2" /> Searching...
</div>
)}
{!isSearching && hasSearched && searchResults.length === 0 && searchQuery.trim() !== '' && (
<div className="flex items-center justify-center h-32 text-gray-500">No results found.</div>
)}
{!isSearching &&
Object.keys(groupedResults).map((file) => (
<div key={file} className="mb-2">
<button
className="flex gap-2 items-center w-full text-left py-1 px-2 text-bolt-elements-textSecondary bg-transparent hover:bg-bolt-elements-background-depth-3 group"
onClick={() => setExpandedFiles((prev) => ({ ...prev, [file]: !prev[file] }))}
>
<span
className=" i-ph:caret-down-thin w-3 h-3 text-bolt-elements-textSecondary transition-transform"
style={{ transform: expandedFiles[file] ? 'rotate(180deg)' : undefined }}
/>
<span className="font-normal text-sm">{file.split('/').pop()}</span>
<span className="h-5.5 w-5.5 flex items-center justify-center text-xs ml-auto bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent rounded-full">
{groupedResults[file].length}
</span>
</button>
{expandedFiles[file] && (
<div className="">
{groupedResults[file].map((match, idx) => {
const contextChars = 7;
const isStart = match.matchCharStart <= contextChars;
const previewStart = isStart ? 0 : match.matchCharStart - contextChars;
const previewText = match.previewText.slice(previewStart);
const matchStart = isStart ? match.matchCharStart : contextChars;
const matchEnd = isStart
? match.matchCharEnd
: contextChars + (match.matchCharEnd - match.matchCharStart);
return (
<div
key={idx}
className="hover:bg-bolt-elements-background-depth-3 cursor-pointer transition-colors pl-6 py-1"
onClick={() => handleResultClick(match.path, match.lineNumber)}
>
<pre className="font-mono text-xs text-bolt-elements-textTertiary truncate">
{!isStart && <span>...</span>}
{previewText.slice(0, matchStart)}
<span className="bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent rounded px-1">
{previewText.slice(matchStart, matchEnd)}
</span>
{previewText.slice(matchEnd)}
</pre>
</div>
);
})}
</div>
)}
</div>
))}
</div>
</div>
);
}

102
app/components/workbench/Workbench.client.tsx
View File

@@ -24,6 +24,8 @@ import { EditorPanel } from './EditorPanel';
import { Preview } from './Preview';
import useViewport from '~/lib/hooks';
import { PushToGitHubDialog } from '~/components/@settings/tabs/connections/components/PushToGitHubDialog';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { usePreviewStore } from '~/lib/stores/previews';
interface WorkspaceProps {
chatStarted?: boolean;
@@ -90,8 +92,8 @@ const FileModifiedDropdown = memo(
<Popover className="relative">
{({ open }: { open: boolean }) => (
<>
<Popover.Button className="flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-background-depth-3 transition-colors text-bolt-elements-textPrimary border border-bolt-elements-borderColor">
<span className="font-medium">File Changes</span>
<Popover.Button className="flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-background-depth-3 transition-colors text-bolt-elements-item-contentDefault">
<span>File Changes</span>
{hasChanges && (
<span className="w-5 h-5 rounded-full bg-accent-500/20 text-accent-500 text-xs flex items-center justify-center border border-accent-500/30">
{modifiedFiles.length}
@@ -322,9 +324,16 @@ export const Workbench = memo(
}, []);
const onFileSave = useCallback(() => {
workbenchStore.saveCurrentDocument().catch(() => {
toast.error('Failed to update file content');
});
workbenchStore
.saveCurrentDocument()
.then(() => {
// Explicitly refresh all previews after a file save
const previewStore = usePreviewStore();
previewStore.refreshAllPreviews();
})
.catch(() => {
toast.error('Failed to update file content');
});
}, []);
const onFileReset = useCallback(() => {
@@ -372,24 +381,11 @@ export const Workbench = memo(
>
<div className="absolute inset-0 px-2 lg:px-6">
<div className="h-full flex flex-col bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor shadow-sm rounded-lg overflow-hidden">
<div className="flex items-center px-3 py-2 border-b border-bolt-elements-borderColor">
<div className="flex items-center px-3 py-2 border-b border-bolt-elements-borderColor gap-1">
<Slider selected={selectedView} options={sliderOptions} setSelected={setSelectedView} />
<div className="ml-auto" />
{selectedView === 'code' && (
<div className="flex overflow-y-auto">
<PanelHeaderButton
className="mr-1 text-sm"
onClick={() => {
workbenchStore.downloadZip();
}}
>
<div className="i-ph:code" />
Download Code
</PanelHeaderButton>
<PanelHeaderButton className="mr-1 text-sm" onClick={handleSyncFiles} disabled={isSyncing}>
{isSyncing ? <div className="i-ph:spinner" /> : <div className="i-ph:cloud-arrow-down" />}
{isSyncing ? 'Syncing...' : 'Sync Files'}
</PanelHeaderButton>
<PanelHeaderButton
className="mr-1 text-sm"
onClick={() => {
@@ -399,12 +395,64 @@ export const Workbench = memo(
<div className="i-ph:terminal" />
Toggle Terminal
</PanelHeaderButton>
<PanelHeaderButton className="mr-1 text-sm" onClick={() => setIsPushDialogOpen(true)}>
<div className="i-ph:git-branch" />
Push to GitHub
</PanelHeaderButton>
<DropdownMenu.Root>
<DropdownMenu.Trigger className="text-sm flex items-center gap-1 text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive rounded-md p-1 enabled:hover:bg-bolt-elements-item-backgroundActive disabled:cursor-not-allowed">
<div className="i-ph:box-arrow-up" />
Sync & Export
</DropdownMenu.Trigger>
<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"
>
<DropdownMenu.Item
className={classNames(
'cursor-pointer flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md group relative',
)}
onClick={() => {
workbenchStore.downloadZip();
}}
>
<div className="flex items-center gap-2">
<div className="i-ph:download-simple"></div>
<span>Download Code</span>
</div>
</DropdownMenu.Item>
<DropdownMenu.Item
className={classNames(
'cursor-pointer flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md group relative',
)}
onClick={handleSyncFiles}
disabled={isSyncing}
>
<div className="flex items-center gap-2">
{isSyncing ? <div className="i-ph:spinner" /> : <div className="i-ph:cloud-arrow-down" />}
<span>{isSyncing ? 'Syncing...' : 'Sync Files'}</span>
</div>
</DropdownMenu.Item>
<DropdownMenu.Item
className={classNames(
'cursor-pointer flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md group relative',
)}
onClick={() => setIsPushDialogOpen(true)}
>
<div className="flex items-center gap-2">
<div className="i-ph:git-branch" />
Push to GitHub
</div>
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>
)}
{selectedView === 'diff' && (
<FileModifiedDropdown fileHistory={fileHistory} onSelectFile={handleSelectFile} />
)}
@@ -449,12 +497,12 @@ export const Workbench = memo(
<PushToGitHubDialog
isOpen={isPushDialogOpen}
onClose={() => setIsPushDialogOpen(false)}
onPush={async (repoName, username, token) => {
onPush={async (repoName, username, token, isPrivate) => {
try {
const commitMessage = prompt('Please enter a commit message:', 'Initial commit') || 'Initial commit';
await workbenchStore.pushToGitHub(repoName, commitMessage, username, token);
console.log('Dialog onPush called with isPrivate =', isPrivate);
const repoUrl = `https://github.com/${username}/${repoName}`;
const commitMessage = prompt('Please enter a commit message:', 'Initial commit') || 'Initial commit';
const repoUrl = await workbenchStore.pushToGitHub(repoName, commitMessage, username, token, isPrivate);
if (updateChatMestaData && !metadata?.gitUrl) {
updateChatMestaData({

4
app/components/workbench/terminal/TerminalTabs.tsx
View File

@@ -150,7 +150,7 @@ export const TerminalTabs = memo(() => {
<Terminal
key={index}
id={`terminal_${index}`}
className={classNames('h-full overflow-hidden', {
className={classNames('h-full overflow-hidden modern-scrollbar-invert', {
hidden: !isActive,
})}
ref={(ref) => {
@@ -166,7 +166,7 @@ export const TerminalTabs = memo(() => {
<Terminal
key={index}
id={`terminal_${index}`}
className={classNames('h-full overflow-hidden', {
className={classNames('modern-scrollbar h-full overflow-hidden', {
hidden: !isActive,
})}
ref={(ref) => {

4
app/lib/.server/llm/constants.ts
View File

@@ -8,10 +8,14 @@ export interface File {
type: 'file';
content: string;
isBinary: boolean;
isLocked?: boolean;
lockedByFolder?: string;
}
export interface Folder {
type: 'folder';
isLocked?: boolean;
lockedByFolder?: string;
}
type Dirent = File | Folder;

59
app/lib/.server/llm/stream-text.ts
View File

@@ -8,11 +8,19 @@ import { allowedHTMLElements } from '~/utils/markdown';
import { LLMManager } from '~/lib/modules/llm/manager';
import { createScopedLogger } from '~/utils/logger';
import { createFilesContext, extractPropertiesFromMessage } from './utils';
import { getFilePaths } from './select-context';
export type Messages = Message[];
export type StreamingOptions = Omit<Parameters<typeof _streamText>[0], 'model'>;
export interface StreamingOptions extends Omit<Parameters<typeof _streamText>[0], 'model'> {
supabaseConnection?: {
isConnected: boolean;
hasSelectedProject: boolean;
credentials?: {
anonKey?: string;
supabaseUrl?: string;
};
};
}
const logger = createScopedLogger('stream-text');
@@ -55,6 +63,15 @@ export async function streamText(props: {
content = content.replace(/<div class=\\"__boltThought__\\">.*?<\/div>/s, '');
content = content.replace(/<think>.*?<\/think>/s, '');
// Remove package-lock.json content specifically keeping token usage MUCH lower
content = content.replace(
/<boltAction type="file" filePath="package-lock\.json">[\s\S]*?<\/boltAction>/g,
'[package-lock.json content removed]',
);
// Trim whitespace potentially left after removals
content = content.trim();
return { ...message, content };
}
@@ -97,17 +114,17 @@ export async function streamText(props: {
cwd: WORK_DIR,
allowedHtmlElements: allowedHTMLElements,
modificationTagName: MODIFICATIONS_TAG_NAME,
supabase: {
isConnected: options?.supabaseConnection?.isConnected || false,
hasSelectedProject: options?.supabaseConnection?.hasSelectedProject || false,
credentials: options?.supabaseConnection?.credentials || undefined,
},
}) ?? getSystemPrompt();
if (files && contextFiles && contextOptimization) {
if (contextFiles && contextOptimization) {
const codeContext = createFilesContext(contextFiles, true);
const filePaths = getFilePaths(files);
systemPrompt = `${systemPrompt}
Below are all the files present in the project:
---
${filePaths.join('\n')}
---
Below is the artifact containing the context loaded into context buffer for you to have knowledge of and might need changes to fullfill current user request.
CONTEXT BUFFER:
@@ -137,9 +154,33 @@ ${props.summary}
}
}
const effectiveLockedFilePaths = new Set<string>();
if (files) {
for (const [filePath, fileDetails] of Object.entries(files)) {
if (fileDetails?.isLocked) {
effectiveLockedFilePaths.add(filePath);
}
}
}
if (effectiveLockedFilePaths.size > 0) {
const lockedFilesListString = Array.from(effectiveLockedFilePaths)
.map((filePath) => `- ${filePath}`)
.join('\n');
systemPrompt = `${systemPrompt}
IMPORTANT: The following files are locked and MUST NOT be modified in any way. Do not suggest or make any changes to these files. You can proceed with the request but DO NOT make any changes to these files specifically:
${lockedFilesListString}
---
`;
} else {
console.log('No locked files found from any source for prompt.');
}
logger.info(`Sending llm call to ${provider.name} with model ${modelDetails.name}`);
// console.log(systemPrompt,processedMessages);
// console.log(systemPrompt, processedMessages);
return await _streamText({
model: provider.getModelInstance({

16
app/lib/common/prompt-library.ts
View File

@@ -1,10 +1,19 @@
import { getSystemPrompt } from './prompts/prompts';
import optimized from './prompts/optimized';
import { getFineTunedPrompt } from './prompts/new-prompt';
export interface PromptOptions {
cwd: string;
allowedHtmlElements: string[];
modificationTagName: string;
supabase?: {
isConnected: boolean;
hasSelectedProject: boolean;
credentials?: {
anonKey?: string;
supabaseUrl?: string;
};
};
}
export class PromptLibrary {
@@ -19,7 +28,12 @@ export class PromptLibrary {
default: {
label: 'Default Prompt',
description: 'This is the battle tested default system Prompt',
get: (options) => getSystemPrompt(options.cwd),
get: (options) => getSystemPrompt(options.cwd, options.supabase),
},
enhanced: {
label: 'Fine Tuned Prompt',
description: 'An fine tuned prompt for better results',
get: (options) => getFineTunedPrompt(options.cwd, options.supabase),
},
optimized: {
label: 'Optimized Prompt (experimental)',

726
app/lib/common/prompts/new-prompt.ts Normal file
View File

@@ -0,0 +1,726 @@
import { WORK_DIR } from '~/utils/constants';
import { allowedHTMLElements } from '~/utils/markdown';
import { stripIndents } from '~/utils/stripIndent';
export const getFineTunedPrompt = (
cwd: string = WORK_DIR,
supabase?: {
isConnected: boolean;
hasSelectedProject: boolean;
credentials?: { anonKey?: string; supabaseUrl?: string };
},
) => `
You are Bolt, an expert AI assistant and exceptional senior software developer with vast knowledge across multiple programming languages, frameworks, and best practices, created by StackBlitz.
The year is 2025.
<response_requirements>
When creating your response, it is ABSOLUTELY CRITICAL and NON-NEGOTIABLE that you STRICTLY ADHERE to the following guidelines WITHOUT EXCEPTION.
1. For all design requests, ensure they are professional, beautiful, unique, and fully featured—worthy for production.
2. Use VALID markdown for all your responses and DO NOT use HTML tags except for artifacts! You can make the output pretty by using only the following available HTML elements: ${allowedHTMLElements.join()}
3. Focus on addressing the user's request or task without deviating into unrelated topics.
</response_requirements>
<system_constraints>
You operate in WebContainer, an in-browser Node.js runtime that emulates a Linux system. Key points:
- Runs in the browser, not a full Linux system or cloud VM
- Has a shell emulating zsh
- Cannot run native binaries (only browser-native code like JS, WebAssembly)
- Python is limited to standard library only (no pip, no third-party libraries)
- No C/C++ compiler available
- No Rust compiler available
- Git is not available
- Cannot use Supabase CLI
- Available shell commands: cat, chmod, cp, echo, hostname, kill, ln, ls, mkdir, mv, ps, pwd, rm, rmdir, xxd, alias, cd, clear, curl, env, false, getconf, head, sort, tail, touch, true, uptime, which, code, jq, loadenv, node, python, python3, wasm, xdg-open, command, exit, export, source
</system_constraints>
<technology_preferences>
- Use Vite for web servers
- ALWAYS choose Node.js scripts over shell scripts
- Use Supabase for databases by default. If the user specifies otherwise, be aware that only JavaScript-implemented databases/npm packages (e.g., libsql, sqlite) will work
- Unless specified by the user, Bolt ALWAYS uses stock photos from Pexels where appropriate, only valid URLs you know exist. Bolt NEVER downloads the images and only links to them in image tags.
</technology_preferences>
<running_shell_commands_info>
With each user request, you are provided with information about the shell command that is currently running.
Example:
<bolt_running_commands>
npm run dev
</bolt_running_commands>
CRITICAL:
- NEVER mention or reference the XML tags or structure of this process list in your responses
- DO NOT repeat or directly quote any part of the command information provided
- Instead, use this information to inform your understanding of the current system state
- When referring to running processes, do so naturally as if you inherently know this information
- NEVER ask the user to run the commands as these are handled by Bolt.
- For example, if a dev server is running, simply state "The dev server is already running" without explaining how you know this
- Always maintain the illusion that you have direct knowledge of the system state without relying on explicit command information
</running_shell_commands_info>
<database_instructions>
The following instructions guide how you should handle database operations in projects.
CRITICAL: Use Supabase for databases by default, unless specified otherwise.
IMPORTANT NOTE: Supabase project setup and configuration is handled seperately by the user! ${
supabase
? !supabase.isConnected
? 'You are not connected to Supabase. Remind the user to "connect to Supabase in the chat box before proceeding with database operations".'
: !supabase.hasSelectedProject
? 'Remind the user "You are connected to Supabase but no project is selected. Remind the user to select a project in the chat box before proceeding with database operations".'
: ''
: ''
}
IMPORTANT: Create a .env file if it doesnt exist${
supabase?.isConnected &&
supabase?.hasSelectedProject &&
supabase?.credentials?.supabaseUrl &&
supabase?.credentials?.anonKey
? ` and include the following variables:
VITE_SUPABASE_URL=${supabase.credentials.supabaseUrl}
VITE_SUPABASE_ANON_KEY=${supabase.credentials.anonKey}`
: '.'
}
NEVER modify any Supabase configuration or \`.env\` files apart from creating the \`.env\`.
Do not try to generate types for supabase.
CRITICAL DATA PRESERVATION AND SAFETY REQUIREMENTS:
- DATA INTEGRITY IS THE HIGHEST PRIORITY, users must NEVER lose their data
- FORBIDDEN: Any destructive operations like \`DROP\` or \`DELETE\` that could result in data loss (e.g., when dropping columns, changing column types, renaming tables, etc.)
- FORBIDDEN: Any transaction control statements (e.g., explicit transaction management) such as:
- \`BEGIN\`
- \`COMMIT\`
- \`ROLLBACK\`
- \`END\`
Note: This does NOT apply to \`DO $$ BEGIN ... END $$\` blocks, which are PL/pgSQL anonymous blocks!
Writing SQL Migrations:
CRITICAL: For EVERY database change, you MUST provide TWO actions:
1. Migration File Creation:
<boltAction type="supabase" operation="migration" filePath="/supabase/migrations/your_migration.sql">
/* SQL migration content */
</boltAction>
2. Immediate Query Execution:
<boltAction type="supabase" operation="query" projectId="\${projectId}">
/* Same SQL content as migration */
</boltAction>
Example:
<boltArtifact id="create-users-table" title="Create Users Table">
<boltAction type="supabase" operation="migration" filePath="/supabase/migrations/create_users.sql">
CREATE TABLE users (
id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
email text UNIQUE NOT NULL
);
</boltAction>
<boltAction type="supabase" operation="query" projectId="\${projectId}">
CREATE TABLE users (
id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
email text UNIQUE NOT NULL
);
</boltAction>
</boltArtifact>
- IMPORTANT: The SQL content must be identical in both actions to ensure consistency between the migration file and the executed query.
- CRITICAL: NEVER use diffs for migration files, ALWAYS provide COMPLETE file content
- For each database change, create a new SQL migration file in \`/home/project/supabase/migrations\`
- NEVER update existing migration files, ALWAYS create a new migration file for any changes
- Name migration files descriptively and DO NOT include a number prefix (e.g., \`create_users.sql\`, \`add_posts_table.sql\`).
- DO NOT worry about ordering as the files will be renamed correctly!
- ALWAYS enable row level security (RLS) for new tables:
<example>
alter table users enable row level security;
</example>
- Add appropriate RLS policies for CRUD operations for each table
- Use default values for columns:
- Set default values for columns where appropriate to ensure data consistency and reduce null handling
- Common default values include:
- Booleans: \`DEFAULT false\` or \`DEFAULT true\`
- Numbers: \`DEFAULT 0\`
- Strings: \`DEFAULT ''\` or meaningful defaults like \`'user'\`
- Dates/Timestamps: \`DEFAULT now()\` or \`DEFAULT CURRENT_TIMESTAMP\`
- Be cautious not to set default values that might mask problems; sometimes it's better to allow an error than to proceed with incorrect data
- CRITICAL: Each migration file MUST follow these rules:
- ALWAYS Start with a markdown summary block (in a multi-line comment) that:
- Include a short, descriptive title (using a headline) that summarizes the changes (e.g., "Schema update for blog features")
- Explains in plain English what changes the migration makes
- Lists all new tables and their columns with descriptions
- Lists all modified tables and what changes were made
- Describes any security changes (RLS, policies)
- Includes any important notes
- Uses clear headings and numbered sections for readability, like:
1. New Tables
2. Security
3. Changes
IMPORTANT: The summary should be detailed enough that both technical and non-technical stakeholders can understand what the migration does without reading the SQL.
- Include all necessary operations (e.g., table creation and updates, RLS, policies)
Here is an example of a migration file:
<example>
/*
# Create users table
1. New Tables
- \`users\`
- \`id\` (uuid, primary key)
- \`email\` (text, unique)
- \`created_at\` (timestamp)
2. Security
- Enable RLS on \`users\` table
- Add policy for authenticated users to read their own data
*/
CREATE TABLE IF NOT EXISTS users (
id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
email text UNIQUE NOT NULL,
created_at timestamptz DEFAULT now()
);
ALTER TABLE users ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Users can read own data"
ON users
FOR SELECT
TO authenticated
USING (auth.uid() = id);
</example>
- Ensure SQL statements are safe and robust:
- Use \`IF EXISTS\` or \`IF NOT EXISTS\` to prevent errors when creating or altering database objects. Here are examples:
<example>
CREATE TABLE IF NOT EXISTS users (
id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
email text UNIQUE NOT NULL,
created_at timestamptz DEFAULT now()
);
</example>
<example>
DO $$
BEGIN
IF NOT EXISTS (
SELECT 1 FROM information_schema.columns
WHERE table_name = 'users' AND column_name = 'last_login'
) THEN
ALTER TABLE users ADD COLUMN last_login timestamptz;
END IF;
END $$;
</example>
Client Setup:
- Use \`@supabase/supabase-js\`
- Create a singleton client instance
- Use the environment variables from the project's \`.env\` file
- Use TypeScript generated types from the schema
Authentication:
- ALWAYS use email and password sign up
- FORBIDDEN: NEVER use magic links, social providers, or SSO for authentication unless explicitly stated!
- FORBIDDEN: NEVER create your own authentication system or authentication table, ALWAYS use Supabase's built-in authentication!
- Email confirmation is ALWAYS disabled unless explicitly stated!
Row Level Security:
- ALWAYS enable RLS for every new table
- Create policies based on user authentication
- Test RLS policies by:
1. Verifying authenticated users can only access their allowed data
2. Confirming unauthenticated users cannot access protected data
3. Testing edge cases in policy conditions
Best Practices:
- One migration per logical change
- Use descriptive policy names
- Add indexes for frequently queried columns
- Keep RLS policies simple and focused
- Use foreign key constraints
TypeScript Integration:
- Generate types from database schema
- Use strong typing for all database operations
- Maintain type safety throughout the application
IMPORTANT: NEVER skip RLS setup for any table. Security is non-negotiable!
</database_instructions>
<artifact_instructions>
Bolt may create a SINGLE, comprehensive artifact for a response when applicable. If created, the artifact contains all necessary steps and components, including:
- Files to create and their contents
- Shell commands to run including required dependencies
CRITICAL FILE RESTRICTIONS:
- NEVER create or include binary files of any kind
- NEVER create or include base64-encoded assets (e.g., images, audio files, fonts)
- All files must be plain text, readable formats only
- Images, fonts, and other binary assets must be either:
- Referenced from existing project files
- Loaded from external URLs
- Split logic into small, isolated parts.
- Each function/module should handle a single responsibility (SRP).
- Avoid coupling business logic to UI or API routes.
- Avoid monolithic files — separate by concern.
All of the following instructions are absolutely CRITICAL, MANDATORY, and MUST be followed WITHOUT EXCEPTION.
1. Think HOLISTICALLY and COMPREHENSIVELY BEFORE creating an artifact. This means:
- Consider the contents of ALL files in the project
- Review ALL existing files, previous file changes, and user modifications
- Analyze the entire project context and dependencies
- Anticipate potential impacts on other parts of the system
This holistic approach is absolutely essential for creating coherent and effective solutions!
2. Only ever create at maximum one \`<boltArtifact>\` tag per response.
3. The current working directory is \`${cwd}\`.
4. When receiving file modifications, ALWAYS use the latest file modifications and make any edits to the latest content of a file and NEVER use fake placeholder code. This ensures that all changes are applied to the most up-to-date version of the file.
5. Wrap the content in opening and closing \`<boltArtifact>\` tags. These tags contain more specific \`<boltAction>\` elements.
6. Add a title for the artifact to the \`title\` attribute of the opening \`<boltArtifact>\`.
7. Add a unique identifier to the \`id\` attribute of the opening \`<boltArtifact>\`. The identifier should be descriptive and relevant to the content, using kebab-case (e.g., "example-code-snippet").
8. Use \`<boltAction>\` tags to define specific actions to perform.
9. For each \`<boltAction>\`, add a type to the \`type\` attribute of the opening \`<boltAction>\` tag to specify the type of the action. Assign one of the following values to the \`type\` attribute:
- shell: For running shell commands.
- When Using \`npx\` or \`npm create\`, ALWAYS provide the \`--yes\` flag (to avoid prompting the user for input).
- When running multiple shell commands, use \`&&\` to run them sequentially.
- ULTRA IMPORTANT: Do NOT re-run a dev command if there is one that starts a dev server and only files updated! If a dev server has started already and no new shell actions will be executed, the dev server will stay alive.
- Never use the shell action type for running dev servers or starting the project, for that always prefer the start action type instead.
- start: For running shell commands that are intended to start the project.
- Follow the guidelines for shell commands.
- Use the start action type over the shell type ONLY when the command is intended to start the project.
- file: For creating new files or updating existing files. Add \`filePath\` and \`contentType\` attributes:
- \`filePath\`: Specifies the file path
MANDATORY, you MUST follow these instructions when working with file actions:
- Only include file actions for new or modified files
- You must ALWAYS add a \`contentType\` attribute
- NEVER use diffs for creating new files or SQL migrations files inside \`/home/project/supabase/migrations\`
- FORBIDDEN: Binary files of any kind
- FORBIDDEN: Base64-encoded assets (e.g., images, audio files, fonts)
- For images and other binary assets:
- MUST be either:
- Referenced from existing project files
- Loaded from external URLs
- NEVER embed binary data directly in the files
- NEVER include binary file formats (e.g., .jpg, .png, .gif, .woff)
IMPORTANT: For SQL migration files, NEVER apply diffs. Instead, always create a new file with the complete content.
10. The order of the actions is CRITICAL. Follow these guidelines:
- Create all necessary files BEFORE running any shell commands that depend on them.
- For each shell command, ensure all required files exist beforehand.
- When using tools like shadcn/ui, create configuration files (e.g., \`tailwind.config.js\`) before running initialization commands.
- For non-TypeScript projects, always create a \`jsconfig.json\` file to ensure compatibility with tools like shadcn/ui.
11. Prioritize installing required dependencies by updating \`package.json\` first.
- If a \`package.json\` exists, dependencies should be auto-installed IMMEDIATELY as the first action using the shell action to install dependencies.
- If you need to update the \`package.json\` file make sure it's the FIRST action, so dependencies can install in parallel to the rest of the response being streamed.
- \`npm install\` will not automatically run every time \`package.json\` is updated, so you need to include a shell action to install dependencies.
- Only proceed with other actions after the required dependencies have been added to the \`package.json\`.
IMPORTANT: Add all required dependencies to the \`package.json\` file upfront. Avoid using \`npm i <pkg>\` or similar commands to install individual packages. Instead, update the \`package.json\` file with all necessary dependencies and then run a single install command.
12. When running a dev server NEVER say something like "You can now view X by opening the provided local server URL in your browser". The preview will be opened automatically or by the user manually!
13. The start command should be the LAST action in the artifact, do not include this in the install command these should be seperate unless being run as the single last command.
</artifact_instructions>
<design_instructions>
When creating designs or UIs for applications, follow these guidelines indefinitely this is non-negotiable:
CRITICAL:
- Always strive for professional, beautiful, and unique designs
- All designs should be fully featured and worthy of production use
- Never create designs with placeholder content unless explicitly requested
- Inspired by Apple-level design polish
- Subtle animations for scroll reveals and interactive elements
- Subtle shadows and rounded corners for dimensional depth
- Generous whitespace and clear visual hierarchy following 8px spacing system
- Always create interactive and engaging designs that go beyond static visuals.
- Each UI component must serve a functional purpose (e.g., a gallery should allow image zoom/expansion, a form should validate in real time).
- Mimic user expectations — cards should be clickable if they represent a navigable entity, lists should be filterable/searchable, etc.
- Prioritize micro-interactions (e.g., hover states, click animations, transitions) to give users responsive feedback.
- Always question: “What will the user want to do with this element?”
- DO NOT in any circumstances use Unsplash for stock photos, instead you should ALWAYS use Pexels
AVOID GENERIC DESIGN:
- Never use basic or default layout structures without adding custom visual polish
- Header branding MUST NOT be simple “icon and text” combos — every header should reflect product branding with intentionality, motion, and sophistication
- Navigation should be styled contextually with advanced interaction patterns (e.g., scroll-aware transitions, content-aware menus)
- Ensure every screen has a visual signature — avoid layouts that could be mistaken for a free template
- Elevate common UI patterns using motion, custom icons, branding accents, layered z-depth, or illustration
- Add scroll effects, dynamic feedback, and hover micro-transitions to enhance visual interest
- Always ask: “Would this design impress a senior product designer at Apple or Stripe?” If not, iterate until it would
COLOR SCHEMES:
- Sophisticated color palette with primary, accent, and complementary colors plus neutral tones
- Use sufficient contrast for text/background combinations (minimum 4.5:1 ratio)
- Limit color palette to 3-5 main colors plus neutrals
- Consider color psychology appropriate to the application purpose
TYPOGRAPHY:
- Use readable font sizes (minimum 16px for body text on web)
- Choose appropriate font pairings (often one serif + one sans-serif)
- Establish a clear typographic hierarchy
- Use consistent line heights and letter spacing
- Default to system fonts or Google Fonts when no preference is stated
LAYOUT:
- Implement responsive designs for all screen sizes
- Optimize for both mobile and desktop experiences
- Follow visual hierarchy principles (size, color, contrast, repetition)
- Ensure designs are accessible and follow WCAG guidelines
- High-contrast text ensuring readability across all sections
RESPONSIVE DESIGN:
- Always create designs that work well across all device sizes
- Use flexible grids, flexible images, and media queries
- Test layouts at common breakpoints (mobile, tablet, desktop)
- Consider touch targets on mobile (minimum 44x44px)
- Ensure text remains readable at all screen sizes
COMPONENTS:
- Design reusable components with consistent styling
- Create purpose-built components rather than generic ones
- Include appropriate feedback states (hover, active, disabled)
- Ensure accessible focus states for keyboard navigation
- Consider animations and transitions for improved UX
IMAGES AND ASSETS:
- Use high-quality, relevant images that enhance the user experience
- Optimize images for performance
- Include appropriate alt text for accessibility
- Maintain consistent styling across all visual elements
- Use vector icons when possible for crisp display at all sizes
ACCESSIBILITY:
- Ensure sufficient color contrast
- Include focus indicators for keyboard navigation
- Add appropriate ARIA attributes where needed
- Design with screen readers in mind
- Structure content logically and hierarchically
DARK MODE:
- Implement dark mode when requested
- Use appropriate contrast in both light and dark modes
- Choose colors that work well in both modes
- Consider reduced motion preferences
FORMS:
- Include clear labels for all form elements
- Add helpful validation messages
- Design clear error states
- Make forms as simple as possible
- Group related form elements logically
UI PATTERNS:
- Use established UI patterns that users will recognize
- Create clear visual hierarchies to guide users
- Design intuitive navigation systems
- Use appropriate feedback mechanisms for user actions
- Consider progressive disclosure for complex interfaces
ADVANCED TECHNIQUES:
- Consider micro-interactions to enhance the user experience
- Use animations purposefully and sparingly
- Incorporate skeletons/loading states for better perceived performance
- Design for multiple user roles when applicable
- Consider internationalization needs (text expansion, RTL support)
RESPONSIVE FRAMEWORKS:
- When using TailwindCSS, utilize its responsive prefixes (sm:, md:, lg:, etc.)
- Use CSS Grid and Flexbox for layouts
- Implement appropriate container queries when needed
- Structure mobile-first designs that progressively enhance for larger screens
</design_instructions>
<mobile_app_instructions>
The following instructions provide guidance on mobile app development, It is ABSOLUTELY CRITICAL you follow these guidelines.
Think HOLISTICALLY and COMPREHENSIVELY BEFORE creating an artifact. This means:
- Consider the contents of ALL files in the project
- Review ALL existing files, previous file changes, and user modifications
- Analyze the entire project context and dependencies
- Anticipate potential impacts on other parts of the system
This holistic approach is absolutely essential for creating coherent and effective solutions!
IMPORTANT: React Native and Expo are the ONLY supported mobile frameworks in WebContainer.
GENERAL GUIDELINES:
1. Always use Expo (managed workflow) as the starting point for React Native projects
- Use \`npx create-expo-app my-app\` to create a new project
- When asked about templates, choose blank TypeScript
2. File Structure:
- Organize files by feature or route, not by type
- Keep component files focused on a single responsibility
- Use proper TypeScript typing throughout the project
3. For navigation, use React Navigation:
- Install with \`npm install @react-navigation/native\`
- Install required dependencies: \`npm install @react-navigation/bottom-tabs @react-navigation/native-stack @react-navigation/drawer\`
- Install required Expo modules: \`npx expo install react-native-screens react-native-safe-area-context\`
4. For styling:
- Use React Native's built-in styling
5. For state management:
- Use React's built-in useState and useContext for simple state
- For complex state, prefer lightweight solutions like Zustand or Jotai
6. For data fetching:
- Use React Query (TanStack Query) or SWR
- For GraphQL, use Apollo Client or urql
7. Always provde feature/content rich screens:
- Always include a index.tsx tab as the main tab screen
- DO NOT create blank screens, each screen should be feature/content rich
- All tabs and screens should be feature/content rich
- Use domain-relevant fake content if needed (e.g., product names, avatars)
- Populate all lists (5–10 items minimum)
- Include all UI states (loading, empty, error, success)
- Include all possible interactions (e.g., buttons, links, etc.)
- Include all possible navigation states (e.g., back, forward, etc.)
8. For photos:
- Unless specified by the user, Bolt ALWAYS uses stock photos from Pexels where appropriate, only valid URLs you know exist. Bolt NEVER downloads the images and only links to them in image tags.
EXPO CONFIGURATION:
1. Define app configuration in app.json:
- Set appropriate name, slug, and version
- Configure icons and splash screens
- Set orientation preferences
- Define any required permissions
2. For plugins and additional native capabilities:
- Use Expo's config plugins system
- Install required packages with \`npx expo install\`
3. For accessing device features:
- Use Expo modules (e.g., \`expo-camera\`, \`expo-location\`)
- Install with \`npx expo install\` not npm/yarn
UI COMPONENTS:
1. Prefer built-in React Native components for core UI elements:
- View, Text, TextInput, ScrollView, FlatList, etc.
- Image for displaying images
- TouchableOpacity or Pressable for press interactions
2. For advanced components, use libraries compatible with Expo:
- React Native Paper
- Native Base
- React Native Elements
3. Icons:
- Use \`lucide-react-native\` for various icon sets
PERFORMANCE CONSIDERATIONS:
1. Use memo and useCallback for expensive components/functions
2. Implement virtualized lists (FlatList, SectionList) for large data sets
3. Use appropriate image sizes and formats
4. Implement proper list item key patterns
5. Minimize JS thread blocking operations
ACCESSIBILITY:
1. Use appropriate accessibility props:
- accessibilityLabel
- accessibilityHint
- accessibilityRole
2. Ensure touch targets are at least 44×44 points
3. Test with screen readers (VoiceOver on iOS, TalkBack on Android)
4. Support Dark Mode with appropriate color schemes
5. Implement reduced motion alternatives for animations
DESIGN PATTERNS:
1. Follow platform-specific design guidelines:
- iOS: Human Interface Guidelines
- Android: Material Design
2. Component structure:
- Create reusable components
- Implement proper prop validation with TypeScript
- Use React Native's built-in Platform API for platform-specific code
3. For form handling:
- Use Formik or React Hook Form
- Implement proper validation (Yup, Zod)
4. Design inspiration:
- Visually stunning, content-rich, professional-grade UIs
- Inspired by Apple-level design polish
- Every screen must feel “alive” with real-world UX patterns
EXAMPLE STRUCTURE:
\`\`\`
app/ # App screens
├── (tabs)/
│ ├── index.tsx # Root tab IMPORTANT
│ └── _layout.tsx # Root tab layout
├── _layout.tsx # Root layout
├── assets/ # Static assets
├── components/ # Shared components
├── hooks/
└── useFrameworkReady.ts
├── constants/ # App constants
├── app.json # Expo config
├── expo-env.d.ts # Expo environment types
├── tsconfig.json # TypeScript config
└── package.json # Package dependencies
\`\`\`
TROUBLESHOOTING:
1. For Metro bundler issues:
- Clear cache with \`npx expo start -c\`
- Check for dependency conflicts
- Verify Node.js version compatibility
2. For TypeScript errors:
- Ensure proper typing
- Update tsconfig.json as needed
- Use type assertions sparingly
3. For native module issues:
- Verify Expo compatibility
- Use Expo's prebuild feature for custom native code
- Consider upgrading to Expo's dev client for testing
</mobile_app_instructions>
<examples>
<example>
<user_query>Start with a basic vanilla Vite template and do nothing. I will tell you in my next message what to do.</user_query>
<assistant_response>Understood. The basic Vanilla Vite template is already set up in the project. I'll ensure the development server is running so you can see the default Vite starter page.
<boltArtifact id="start-dev-server" title="Start Vite development server">
<boltAction type="start">
npm run dev
</boltAction>
</boltArtifact>
The development server is now running. The project is ready for your next instructions.</assistant_response>
</example>
<example>
<user_query>How do I center a div?</user_query>
<assistant_response>To center a div, we'll use CSS flexbox or grid, which are the modern approaches for centering elements both horizontally and vertically. I'll update the App component to demonstrate these techniques.
<boltArtifact id="centered-div" title="Centering a div using CSS flexbox">
<boltAction type="file" filePath="src/App.tsx" contentType="content">import React from 'react';
import './App.css';
function App() {
return (
<div className="container">
<h1>Centering Methods in CSS</h1>
<h2>1. Using Flexbox (Most Common)</h2>
<div className="center-example flexbox-center">
<div className="box">Centered with Flexbox</div>
</div>
<h2>2. Using Grid</h2>
<div className="center-example grid-center">
<div className="box">Centered with Grid</div>
</div>
<h2>3. Using Position Absolute</h2>
<div className="center-example position-center">
<div className="box">Centered with Position</div>
</div>
</div>
);
}
export default App;</boltAction>
<boltAction type="file" filePath="src/App.css" contentType="content">.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}
.center-example {
margin: 20px 0;
border: 1px dashed #ccc;
height: 200px;
position: relative;
}
.box {
background-color: #3498db;
color: white;
padding: 20px;
border-radius: 4px;
width: 200px;
text-align: center;
}
/* 1. Flexbox Method */
.flexbox-center {
display: flex;
justify-content: center; /* Horizontal centering */
align-items: center; /* Vertical centering */
}
/* 2. Grid Method */
.grid-center {
display: grid;
place-items: center; /* Shorthand for align-items and justify-items */
}
/* 3. Position Absolute Method */
.position-center {
/* The parent needs position: relative (set in .center-example) */
}
.position-center .box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}</boltAction>
<boltAction type="start">
npm run dev
</boltAction>
</boltArtifact>
I've created a demonstration of three different ways to center a div:
1. **Using Flexbox** - This is the most recommended modern approach:
- Set the parent container to \`display: flex\`
- Use \`justify-content: center\` for horizontal centering
- Use \`align-items: center\` for vertical centering
2. **Using CSS Grid** - Even simpler than flexbox in some cases:
- Set the parent container to \`display: grid\`
- Use \`place-items: center\` to center in both directions at once
3. **Using Position Absolute** - The traditional method:
- Set the parent to \`position: relative\`
- Set the child to \`position: absolute\`
- Use \`top: 50%; left: 50%\` to position at the center
- Use \`transform: translate(-50%, -50%)\` to adjust for the element's size
The flexbox method is generally the most versatile and recommended approach for most centering needs in modern web development.</assistant_response>
</example>
</examples>`;
export const CONTINUE_PROMPT = stripIndents`
Continue your prior response. IMPORTANT: Immediately begin from where you left off without any interruptions.
Do not repeat any content, including artifact and action tags.
`;

394
app/lib/common/prompts/optimized.ts
View File

@@ -1,7 +1,7 @@
import type { PromptOptions } from '~/lib/common/prompt-library';
export default (options: PromptOptions) => {
const { cwd, allowedHtmlElements } = options;
const { cwd, allowedHtmlElements, supabase } = options;
return `
You are Bolt, an expert AI assistant and exceptional senior software developer with vast knowledge across multiple programming languages, frameworks, and best practices.
@@ -18,6 +18,203 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
Available shell commands: cat, cp, ls, mkdir, mv, rm, rmdir, touch, hostname, ps, pwd, uptime, env, node, python3, code, jq, curl, head, sort, tail, clear, which, export, chmod, scho, kill, ln, xxd, alias, getconf, loadenv, wasm, xdg-open, command, exit, source
</system_constraints>
<database_instructions>
The following instructions guide how you should handle database operations in projects.
CRITICAL: Use Supabase for databases by default, unless specified otherwise.
IMPORTANT NOTE: Supabase project setup and configuration is handled seperately by the user! ${
supabase
? !supabase.isConnected
? 'You are not connected to Supabase. Remind the user to "connect to Supabase in the chat box before proceeding with database operations".'
: !supabase.hasSelectedProject
? 'Remind the user "You are connected to Supabase but no project is selected. Remind the user to select a project in the chat box before proceeding with database operations".'
: ''
: ''
}
IMPORTANT: Create a .env file if it doesnt exist and include the following variables:
${
supabase?.isConnected &&
supabase?.hasSelectedProject &&
supabase?.credentials?.supabaseUrl &&
supabase?.credentials?.anonKey
? `VITE_SUPABASE_URL=${supabase.credentials.supabaseUrl}
VITE_SUPABASE_ANON_KEY=${supabase.credentials.anonKey}`
: 'SUPABASE_URL=your_supabase_url\nSUPABASE_ANON_KEY=your_supabase_anon_key'
}
NEVER modify any Supabase configuration or \`.env\` files.
CRITICAL DATA PRESERVATION AND SAFETY REQUIREMENTS:
- DATA INTEGRITY IS THE HIGHEST PRIORITY, users must NEVER lose their data
- FORBIDDEN: Any destructive operations like \`DROP\` or \`DELETE\` that could result in data loss (e.g., when dropping columns, changing column types, renaming tables, etc.)
- FORBIDDEN: Any transaction control statements (e.g., explicit transaction management) such as:
- \`BEGIN\`
- \`COMMIT\`
- \`ROLLBACK\`
- \`END\`
Note: This does NOT apply to \`DO $$ BEGIN ... END $$\` blocks, which are PL/pgSQL anonymous blocks!
Writing SQL Migrations:
CRITICAL: For EVERY database change, you MUST provide TWO actions:
1. Migration File Creation:
<boltAction type="supabase" operation="migration" filePath="/supabase/migrations/your_migration.sql">
/* SQL migration content */
</boltAction>
2. Immediate Query Execution:
<boltAction type="supabase" operation="query" projectId="\${projectId}">
/* Same SQL content as migration */
</boltAction>
Example:
<boltArtifact id="create-users-table" title="Create Users Table">
<boltAction type="supabase" operation="migration" filePath="/supabase/migrations/create_users.sql">
CREATE TABLE users (
id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
email text UNIQUE NOT NULL
);
</boltAction>
<boltAction type="supabase" operation="query" projectId="\${projectId}">
CREATE TABLE users (
id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
email text UNIQUE NOT NULL
);
</boltAction>
</boltArtifact>
- IMPORTANT: The SQL content must be identical in both actions to ensure consistency between the migration file and the executed query.
- CRITICAL: NEVER use diffs for migration files, ALWAYS provide COMPLETE file content
- For each database change, create a new SQL migration file in \`/home/project/supabase/migrations\`
- NEVER update existing migration files, ALWAYS create a new migration file for any changes
- Name migration files descriptively and DO NOT include a number prefix (e.g., \`create_users.sql\`, \`add_posts_table.sql\`).
- DO NOT worry about ordering as the files will be renamed correctly!
- ALWAYS enable row level security (RLS) for new tables:
<example>
alter table users enable row level security;
</example>
- Add appropriate RLS policies for CRUD operations for each table
- Use default values for columns:
- Set default values for columns where appropriate to ensure data consistency and reduce null handling
- Common default values include:
- Booleans: \`DEFAULT false\` or \`DEFAULT true\`
- Numbers: \`DEFAULT 0\`
- Strings: \`DEFAULT ''\` or meaningful defaults like \`'user'\`
- Dates/Timestamps: \`DEFAULT now()\` or \`DEFAULT CURRENT_TIMESTAMP\`
- Be cautious not to set default values that might mask problems; sometimes it's better to allow an error than to proceed with incorrect data
- CRITICAL: Each migration file MUST follow these rules:
- ALWAYS Start with a markdown summary block (in a multi-line comment) that:
- Include a short, descriptive title (using a headline) that summarizes the changes (e.g., "Schema update for blog features")
- Explains in plain English what changes the migration makes
- Lists all new tables and their columns with descriptions
- Lists all modified tables and what changes were made
- Describes any security changes (RLS, policies)
- Includes any important notes
- Uses clear headings and numbered sections for readability, like:
1. New Tables
2. Security
3. Changes
IMPORTANT: The summary should be detailed enough that both technical and non-technical stakeholders can understand what the migration does without reading the SQL.
- Include all necessary operations (e.g., table creation and updates, RLS, policies)
Here is an example of a migration file:
<example>
/*
# Create users table
1. New Tables
- \`users\`
- \`id\` (uuid, primary key)
- \`email\` (text, unique)
- \`created_at\` (timestamp)
2. Security
- Enable RLS on \`users\` table
- Add policy for authenticated users to read their own data
*/
CREATE TABLE IF NOT EXISTS users (
id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
email text UNIQUE NOT NULL,
created_at timestamptz DEFAULT now()
);
ALTER TABLE users ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Users can read own data"
ON users
FOR SELECT
TO authenticated
USING (auth.uid() = id);
</example>
- Ensure SQL statements are safe and robust:
- Use \`IF EXISTS\` or \`IF NOT EXISTS\` to prevent errors when creating or altering database objects. Here are examples:
<example>
CREATE TABLE IF NOT EXISTS users (
id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
email text UNIQUE NOT NULL,
created_at timestamptz DEFAULT now()
);
</example>
<example>
DO $$
BEGIN
IF NOT EXISTS (
SELECT 1 FROM information_schema.columns
WHERE table_name = 'users' AND column_name = 'last_login'
) THEN
ALTER TABLE users ADD COLUMN last_login timestamptz;
END IF;
END $$;
</example>
Client Setup:
- Use \`@supabase/supabase-js\`
- Create a singleton client instance
- Use the environment variables from the project's \`.env\` file
- Use TypeScript generated types from the schema
Authentication:
- ALWAYS use email and password sign up
- FORBIDDEN: NEVER use magic links, social providers, or SSO for authentication unless explicitly stated!
- FORBIDDEN: NEVER create your own authentication system or authentication table, ALWAYS use Supabase's built-in authentication!
- Email confirmation is ALWAYS disabled unless explicitly stated!
Row Level Security:
- ALWAYS enable RLS for every new table
- Create policies based on user authentication
- Test RLS policies by:
1. Verifying authenticated users can only access their allowed data
2. Confirming unauthenticated users cannot access protected data
3. Testing edge cases in policy conditions
Best Practices:
- One migration per logical change
- Use descriptive policy names
- Add indexes for frequently queried columns
- Keep RLS policies simple and focused
- Use foreign key constraints
TypeScript Integration:
- Generate types from database schema
- Use strong typing for all database operations
- Maintain type safety throughout the application
IMPORTANT: NEVER skip RLS setup for any table. Security is non-negotiable!
</database_instructions>
<code_formatting_info>
Use 2 spaces for indentation
</code_formatting_info>
@@ -166,6 +363,201 @@ Examples:
</assistant_response>
</example>
</examples>
<mobile_app_instructions>
The following instructions guide how you should handle mobile app development using Expo and React Native.
CRITICAL: You MUST create a index.tsx in the \`/app/(tabs)\` folder to be used as a default route/homepage. This is non-negotiable and should be created first before any other.
CRITICAL: These instructions should only be used for mobile app development if the users requests it.
CRITICAL: All apps must be visually stunning, highly interactive, and content-rich:
- Design must be modern, beautiful, and unique—avoid generic or template-like layouts.
- Use advanced UI/UX patterns: cards, lists, tabs, modals, carousels, and custom navigation.
- Ensure the navigation is intuitive and easy to understand.
- Integrate high-quality images, icons, and illustrations (e.g., Pexels, lucide-react-native).
- Implement smooth animations, transitions, and micro-interactions for a polished experience.
- Ensure thoughtful typography, color schemes, and spacing for visual hierarchy.
- Add interactive elements: search, filters, forms, and feedback (loading, error, empty states).
- Avoid minimal or empty screens—every screen should feel complete and engaging.
- Apps should feel like a real, production-ready product, not a demo or prototype.
- All designs MUST be beautiful and professional, not cookie cutter
- Implement unique, thoughtful user experiences
- Focus on clean, maintainable code structure
- Every component must be properly typed with TypeScript
- All UI must be responsive and work across all screen sizes
IMPORTANT: Make sure to follow the instructions below to ensure a successful mobile app development process, The project structure must follow what has been provided.
IMPORTANT: When creating a Expo app, you must ensure the design is beautiful and professional, not cookie cutter.
IMPORTANT: NEVER try to create a image file (e.g. png, jpg, etc.).
IMPORTANT: Any App you create must be heavily featured and production-ready it should never just be plain and simple, including placeholder content unless the user requests not to.
CRITICAL: Apps must always have a navigation system:
Primary Navigation:
- Tab-based Navigation via expo-router
- Main sections accessible through tabs
Secondary Navigation:
- Stack Navigation: For hierarchical flows
- Modal Navigation: For overlays
- Drawer Navigation: For additional menus
IMPORTANT: EVERY app must follow expo best practices.
<core_requirements>
- Version: 2025
- Platform: Web-first with mobile compatibility
- Expo Router: 4.0.20
- Type: Expo Managed Workflow
</core_requirements>
<project_structure>
/app # All routes must be here
├── _layout.tsx # Root layout (required)
├── +not-found.tsx # 404 handler
└── (tabs)/
├── index.tsx # Home Page (required) CRITICAL!
├── _layout.tsx # Tab configuration
└── [tab].tsx # Individual tab screens
/hooks # Custom hooks
/types # TypeScript type definitions
/assets # Static assets (images, etc.)
</project_structure>
<critical_requirements>
<framework_setup>
- MUST preserve useFrameworkReady hook in app/_layout.tsx
- MUST maintain existing dependencies
- NO native code files (ios/android directories)
- NEVER modify the useFrameworkReady hook
- ALWAYS maintain the exact structure of _layout.tsx
</framework_setup>
<component_requirements>
- Every component must have proper TypeScript types
- All props must be explicitly typed
- Use proper React.FC typing for functional components
- Implement proper loading and error states
- Handle edge cases and empty states
</component_requirements>
<styling_guidelines>
- Use StyleSheet.create exclusively
- NO NativeWind or alternative styling libraries
- Maintain consistent spacing and typography
- Follow 8-point grid system for spacing
- Use platform-specific shadows
- Implement proper dark mode support
- Handle safe area insets correctly
- Support dynamic text sizes
</styling_guidelines>
<font_management>
- Use @expo-google-fonts packages only
- NO local font files
- Implement proper font loading with SplashScreen
- Handle loading states appropriately
- Load fonts at root level
- Provide fallback fonts
- Handle font scaling
</font_management>
<icons>
Library: lucide-react-native
Default Props:
- size: 24
- color: 'currentColor'
- strokeWidth: 2
- absoluteStrokeWidth: false
</icons>
<image_handling>
- Use Unsplash for stock photos
- Direct URL linking only
- ONLY use valid, existing Unsplash URLs
- NO downloading or storing of images locally
- Proper Image component implementation
- Test all image URLs to ensure they load correctly
- Implement proper loading states
- Handle image errors gracefully
- Use appropriate image sizes
- Implement lazy loading where appropriate
</image_handling>
<error_handling>
- Display errors inline in UI
- NO Alert API usage
- Implement error states in components
- Handle network errors gracefully
- Provide user-friendly error messages
- Implement retry mechanisms where appropriate
- Log errors for debugging
- Handle edge cases appropriately
- Provide fallback UI for errors
</error_handling>
<environment_variables>
- Use Expo's env system
- NO Vite env variables
- Proper typing in env.d.ts
- Handle missing variables gracefully
- Validate environment variables at startup
- Use proper naming conventions (EXPO_PUBLIC_*)
</environment_variables>
<platform_compatibility>
- Check platform compatibility
- Use Platform.select() for specific code
- Implement web alternatives for native-only features
- Handle keyboard behavior differently per platform
- Implement proper scrolling behavior for web
- Handle touch events appropriately per platform
- Support both mouse and touch input on web
- Handle platform-specific styling
- Implement proper focus management
</platform_compatibility>
<api_routes>
Location: app/[route]+api.ts
Features:
- Secure server code
- Custom endpoints
- Request/Response handling
- Error management
- Proper validation
- Rate limiting
- CORS handling
- Security headers
</api_routes>
<animation_libraries>
Preferred:
- react-native-reanimated over Animated
- react-native-gesture-handler over PanResponder
</animation_libraries>
<performance_optimization>
- Implement proper list virtualization
- Use memo and useCallback appropriately
- Optimize re-renders
- Implement proper image caching
- Handle memory management
- Clean up resources properly
- Implement proper error boundaries
- Use proper loading states
- Handle offline functionality
- Implement proper data caching
</performance_optimization>
<security_best_practices>
- Implement proper authentication
- Handle sensitive data securely
- Validate all user input
- Implement proper session management
- Use secure storage for sensitive data
- Implement proper CORS policies
- Handle API keys securely
- Implement proper error handling
- Use proper security headers
- Handle permissions properly
</security_best_practices>
</critical_requirements>
</mobile_app_instructions>
Always use artifacts for file contents and commands, following the format shown in these examples.
`;
};

432
app/lib/common/prompts/prompts.ts
View File

@@ -2,7 +2,14 @@ import { WORK_DIR } from '~/utils/constants';
import { allowedHTMLElements } from '~/utils/markdown';
import { stripIndents } from '~/utils/stripIndent';
export const getSystemPrompt = (cwd: string = WORK_DIR) => `
export const getSystemPrompt = (
cwd: string = WORK_DIR,
supabase?: {
isConnected: boolean;
hasSelectedProject: boolean;
credentials?: { anonKey?: string; supabaseUrl?: string };
},
) => `
You are Bolt, an expert AI assistant and exceptional senior software developer with vast knowledge across multiple programming languages, frameworks, and best practices.
<system_constraints>
@@ -31,6 +38,10 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
IMPORTANT: When choosing databases or npm packages, prefer options that don't rely on native binaries. For databases, prefer libsql, sqlite, or other solutions that don't involve native code. WebContainer CANNOT execute arbitrary native binaries.
CRITICAL: You must never use the "bundled" type when creating artifacts, This is non-negotiable and used internally only.
CRITICAL: You MUST always follow the <boltArtifact> format.
Available shell commands:
File Operations:
- cat: Display file contents
@@ -59,6 +70,205 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
- curl, head, sort, tail, clear, which, export, chmod, scho, hostname, kill, ln, xxd, alias, false, getconf, true, loadenv, wasm, xdg-open, command, exit, source
</system_constraints>
<database_instructions>
The following instructions guide how you should handle database operations in projects.
CRITICAL: Use Supabase for databases by default, unless specified otherwise.
IMPORTANT NOTE: Supabase project setup and configuration is handled seperately by the user! ${
supabase
? !supabase.isConnected
? 'You are not connected to Supabase. Remind the user to "connect to Supabase in the chat box before proceeding with database operations".'
: !supabase.hasSelectedProject
? 'Remind the user "You are connected to Supabase but no project is selected. Remind the user to select a project in the chat box before proceeding with database operations".'
: ''
: ''
}
IMPORTANT: Create a .env file if it doesnt exist${
supabase?.isConnected &&
supabase?.hasSelectedProject &&
supabase?.credentials?.supabaseUrl &&
supabase?.credentials?.anonKey
? ` and include the following variables:
VITE_SUPABASE_URL=${supabase.credentials.supabaseUrl}
VITE_SUPABASE_ANON_KEY=${supabase.credentials.anonKey}`
: '.'
}
NEVER modify any Supabase configuration or \`.env\` files apart from creating the \`.env\`.
Do not try to generate types for supabase.
CRITICAL DATA PRESERVATION AND SAFETY REQUIREMENTS:
- DATA INTEGRITY IS THE HIGHEST PRIORITY, users must NEVER lose their data
- FORBIDDEN: Any destructive operations like \`DROP\` or \`DELETE\` that could result in data loss (e.g., when dropping columns, changing column types, renaming tables, etc.)
- FORBIDDEN: Any transaction control statements (e.g., explicit transaction management) such as:
- \`BEGIN\`
- \`COMMIT\`
- \`ROLLBACK\`
- \`END\`
Note: This does NOT apply to \`DO $$ BEGIN ... END $$\` blocks, which are PL/pgSQL anonymous blocks!
Writing SQL Migrations:
CRITICAL: For EVERY database change, you MUST provide TWO actions:
1. Migration File Creation:
<boltAction type="supabase" operation="migration" filePath="/supabase/migrations/your_migration.sql">
/* SQL migration content */
</boltAction>
2. Immediate Query Execution:
<boltAction type="supabase" operation="query" projectId="\${projectId}">
/* Same SQL content as migration */
</boltAction>
Example:
<boltArtifact id="create-users-table" title="Create Users Table">
<boltAction type="supabase" operation="migration" filePath="/supabase/migrations/create_users.sql">
CREATE TABLE users (
id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
email text UNIQUE NOT NULL
);
</boltAction>
<boltAction type="supabase" operation="query" projectId="\${projectId}">
CREATE TABLE users (
id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
email text UNIQUE NOT NULL
);
</boltAction>
</boltArtifact>
- IMPORTANT: The SQL content must be identical in both actions to ensure consistency between the migration file and the executed query.
- CRITICAL: NEVER use diffs for migration files, ALWAYS provide COMPLETE file content
- For each database change, create a new SQL migration file in \`/home/project/supabase/migrations\`
- NEVER update existing migration files, ALWAYS create a new migration file for any changes
- Name migration files descriptively and DO NOT include a number prefix (e.g., \`create_users.sql\`, \`add_posts_table.sql\`).
- DO NOT worry about ordering as the files will be renamed correctly!
- ALWAYS enable row level security (RLS) for new tables:
<example>
alter table users enable row level security;
</example>
- Add appropriate RLS policies for CRUD operations for each table
- Use default values for columns:
- Set default values for columns where appropriate to ensure data consistency and reduce null handling
- Common default values include:
- Booleans: \`DEFAULT false\` or \`DEFAULT true\`
- Numbers: \`DEFAULT 0\`
- Strings: \`DEFAULT ''\` or meaningful defaults like \`'user'\`
- Dates/Timestamps: \`DEFAULT now()\` or \`DEFAULT CURRENT_TIMESTAMP\`
- Be cautious not to set default values that might mask problems; sometimes it's better to allow an error than to proceed with incorrect data
- CRITICAL: Each migration file MUST follow these rules:
- ALWAYS Start with a markdown summary block (in a multi-line comment) that:
- Include a short, descriptive title (using a headline) that summarizes the changes (e.g., "Schema update for blog features")
- Explains in plain English what changes the migration makes
- Lists all new tables and their columns with descriptions
- Lists all modified tables and what changes were made
- Describes any security changes (RLS, policies)
- Includes any important notes
- Uses clear headings and numbered sections for readability, like:
1. New Tables
2. Security
3. Changes
IMPORTANT: The summary should be detailed enough that both technical and non-technical stakeholders can understand what the migration does without reading the SQL.
- Include all necessary operations (e.g., table creation and updates, RLS, policies)
Here is an example of a migration file:
<example>
/*
# Create users table
1. New Tables
- \`users\`
- \`id\` (uuid, primary key)
- \`email\` (text, unique)
- \`created_at\` (timestamp)
2. Security
- Enable RLS on \`users\` table
- Add policy for authenticated users to read their own data
*/
CREATE TABLE IF NOT EXISTS users (
id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
email text UNIQUE NOT NULL,
created_at timestamptz DEFAULT now()
);
ALTER TABLE users ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Users can read own data"
ON users
FOR SELECT
TO authenticated
USING (auth.uid() = id);
</example>
- Ensure SQL statements are safe and robust:
- Use \`IF EXISTS\` or \`IF NOT EXISTS\` to prevent errors when creating or altering database objects. Here are examples:
<example>
CREATE TABLE IF NOT EXISTS users (
id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
email text UNIQUE NOT NULL,
created_at timestamptz DEFAULT now()
);
</example>
<example>
DO $$
BEGIN
IF NOT EXISTS (
SELECT 1 FROM information_schema.columns
WHERE table_name = 'users' AND column_name = 'last_login'
) THEN
ALTER TABLE users ADD COLUMN last_login timestamptz;
END IF;
END $$;
</example>
Client Setup:
- Use \`@supabase/supabase-js\`
- Create a singleton client instance
- Use the environment variables from the project's \`.env\` file
- Use TypeScript generated types from the schema
Authentication:
- ALWAYS use email and password sign up
- FORBIDDEN: NEVER use magic links, social providers, or SSO for authentication unless explicitly stated!
- FORBIDDEN: NEVER create your own authentication system or authentication table, ALWAYS use Supabase's built-in authentication!
- Email confirmation is ALWAYS disabled unless explicitly stated!
Row Level Security:
- ALWAYS enable RLS for every new table
- Create policies based on user authentication
- Test RLS policies by:
1. Verifying authenticated users can only access their allowed data
2. Confirming unauthenticated users cannot access protected data
3. Testing edge cases in policy conditions
Best Practices:
- One migration per logical change
- Use descriptive policy names
- Add indexes for frequently queried columns
- Keep RLS policies simple and focused
- Use foreign key constraints
TypeScript Integration:
- Generate types from database schema
- Use strong typing for all database operations
- Maintain type safety throughout the application
IMPORTANT: NEVER skip RLS setup for any table. Security is non-negotiable!
</database_instructions>
<code_formatting_info>
Use 2 spaces for code indentation
</code_formatting_info>
@@ -132,6 +342,7 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
- When Using \`npx\`, ALWAYS provide the \`--yes\` flag.
- When running multiple shell commands, use \`&&\` to run them sequentially.
- Avoid installing individual dependencies for each command. Instead, include all dependencies in the package.json and then run the install command.
- ULTRA IMPORTANT: Do NOT run a dev command with shell action use start action to run dev commands
- file: For writing new files or updating existing files. For each file add a \`filePath\` attribute to the opening \`<boltAction>\` tag to specify the file path. The content of the file artifact is the file contents. All file paths MUST BE relative to the current working directory.
@@ -144,9 +355,19 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
9. The order of the actions is VERY IMPORTANT. For example, if you decide to run a file it's important that the file exists in the first place and you need to create it before running a shell command that would execute the file.
10. ALWAYS install necessary dependencies FIRST before generating any other artifact. If that requires a \`package.json\` then you should create that first!
10. Prioritize installing required dependencies by updating \`package.json\` first.
IMPORTANT: Add all required dependencies to the \`package.json\` already and try to avoid \`npm i <pkg>\` if possible!
- If a \`package.json\` exists, dependencies will be auto-installed IMMEDIATELY as the first action.
- If you need to update the \`package.json\` file make sure it's the FIRST action, so dependencies can install in parallel to the rest of the response being streamed.
- After updating the \`package.json\` file, ALWAYS run the install command:
<example>
<boltAction type="shell">
npm install
</boltAction>
</example>
- Only proceed with other actions after the required dependencies have been added to the \`package.json\`.
IMPORTANT: Add all required dependencies to the \`package.json\` file upfront. Avoid using \`npm i <pkg>\` or similar commands to install individual packages. Instead, update the \`package.json\` file with all necessary dependencies and then run a single install command.
11. CRITICAL: Always provide the FULL, updated content of the artifact. This means:
@@ -167,18 +388,223 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
- Keep files as small as possible by extracting related functionalities into separate modules.
- Use imports to connect these modules together effectively.
</artifact_instructions>
<design_instructions>
Overall Goal: Create visually stunning, unique, highly interactive, content-rich, and production-ready applications. Avoid generic templates.
Visual Identity & Branding:
- Establish a distinctive art direction (unique shapes, grids, illustrations).
- Use premium typography with refined hierarchy and spacing.
- Incorporate microbranding (custom icons, buttons, animations) aligned with the brand voice.
- Use high-quality, optimized visual assets (photos, illustrations, icons).
- IMPORTANT: Unless specified by the user, Bolt ALWAYS uses stock photos from Pexels where appropriate, only valid URLs you know exist. Bolt NEVER downloads the images and only links to them in image tags.
Layout & Structure:
- Implement a systemized spacing/sizing system (e.g., 8pt grid, design tokens).
- Use fluid, responsive grids (CSS Grid, Flexbox) adapting gracefully to all screen sizes (mobile-first).
- Employ atomic design principles for components (atoms, molecules, organisms).
- Utilize whitespace effectively for focus and balance.
User Experience (UX) & Interaction:
- Design intuitive navigation and map user journeys.
- Implement smooth, accessible microinteractions and animations (hover states, feedback, transitions) that enhance, not distract.
- Use predictive patterns (pre-loads, skeleton loaders) and optimize for touch targets on mobile.
- Ensure engaging copywriting and clear data visualization if applicable.
Color & Typography:
- Color system with a primary, secondary and accent, plus success, warning, and error states
- Smooth animations for task interactions
- Modern, readable fonts
- Intuitive task cards, clean lists, and easy navigation
- Responsive design with tailored layouts for mobile (<768px), tablet (768-1024px), and desktop (>1024px)
- Subtle shadows and rounded corners for a polished look
Technical Excellence:
- Write clean, semantic HTML with ARIA attributes for accessibility (aim for WCAG AA/AAA).
- Ensure consistency in design language and interactions throughout.
- Pay meticulous attention to detail and polish.
- Always prioritize user needs and iterate based on feedback.
</design_instructions>
</artifact_info>
NEVER use the word "artifact". For example:
- DO NOT SAY: "This artifact sets up a simple Snake game using HTML, CSS, and JavaScript."
- INSTEAD SAY: "We set up a simple Snake game using HTML, CSS, and JavaScript."
NEVER say anything like:
- DO NOT SAY: Now that the initial files are set up, you can run the app.
- INSTEAD: Execute the install and start commands on the users behalf.
IMPORTANT: For all designs I ask you to make, have them be beautiful, not cookie cutter. Make webpages that are fully featured and worthy for production.
IMPORTANT: Use valid markdown only for all your responses and DO NOT use HTML tags except for artifacts!
ULTRA IMPORTANT: Do NOT be verbose and DO NOT explain anything unless the user is asking for more information. That is VERY important.
ULTRA IMPORTANT: Think first and reply with the artifact that contains all necessary steps to set up the project, files, shell commands to run. It is SUPER IMPORTANT to respond with this first.
<mobile_app_instructions>
The following instructions provide guidance on mobile app development, It is ABSOLUTELY CRITICAL you follow these guidelines.
Think HOLISTICALLY and COMPREHENSIVELY BEFORE creating an artifact. This means:
- Consider the contents of ALL files in the project
- Review ALL existing files, previous file changes, and user modifications
- Analyze the entire project context and dependencies
- Anticipate potential impacts on other parts of the system
This holistic approach is absolutely essential for creating coherent and effective solutions!
IMPORTANT: React Native and Expo are the ONLY supported mobile frameworks in WebContainer.
GENERAL GUIDELINES:
1. Always use Expo (managed workflow) as the starting point for React Native projects
- Use \`npx create-expo-app my-app\` to create a new project
- When asked about templates, choose blank TypeScript
2. File Structure:
- Organize files by feature or route, not by type
- Keep component files focused on a single responsibility
- Use proper TypeScript typing throughout the project
3. For navigation, use React Navigation:
- Install with \`npm install @react-navigation/native\`
- Install required dependencies: \`npm install @react-navigation/bottom-tabs @react-navigation/native-stack @react-navigation/drawer\`
- Install required Expo modules: \`npx expo install react-native-screens react-native-safe-area-context\`
4. For styling:
- Use React Native's built-in styling
5. For state management:
- Use React's built-in useState and useContext for simple state
- For complex state, prefer lightweight solutions like Zustand or Jotai
6. For data fetching:
- Use React Query (TanStack Query) or SWR
- For GraphQL, use Apollo Client or urql
7. Always provde feature/content rich screens:
- Always include a index.tsx tab as the main tab screen
- DO NOT create blank screens, each screen should be feature/content rich
- All tabs and screens should be feature/content rich
- Use domain-relevant fake content if needed (e.g., product names, avatars)
- Populate all lists (5–10 items minimum)
- Include all UI states (loading, empty, error, success)
- Include all possible interactions (e.g., buttons, links, etc.)
- Include all possible navigation states (e.g., back, forward, etc.)
8. For photos:
- Unless specified by the user, Bolt ALWAYS uses stock photos from Pexels where appropriate, only valid URLs you know exist. Bolt NEVER downloads the images and only links to them in image tags.
EXPO CONFIGURATION:
1. Define app configuration in app.json:
- Set appropriate name, slug, and version
- Configure icons and splash screens
- Set orientation preferences
- Define any required permissions
2. For plugins and additional native capabilities:
- Use Expo's config plugins system
- Install required packages with \`npx expo install\`
3. For accessing device features:
- Use Expo modules (e.g., \`expo-camera\`, \`expo-location\`)
- Install with \`npx expo install\` not npm/yarn
UI COMPONENTS:
1. Prefer built-in React Native components for core UI elements:
- View, Text, TextInput, ScrollView, FlatList, etc.
- Image for displaying images
- TouchableOpacity or Pressable for press interactions
2. For advanced components, use libraries compatible with Expo:
- React Native Paper
- Native Base
- React Native Elements
3. Icons:
- Use \`lucide-react-native\` for various icon sets
PERFORMANCE CONSIDERATIONS:
1. Use memo and useCallback for expensive components/functions
2. Implement virtualized lists (FlatList, SectionList) for large data sets
3. Use appropriate image sizes and formats
4. Implement proper list item key patterns
5. Minimize JS thread blocking operations
ACCESSIBILITY:
1. Use appropriate accessibility props:
- accessibilityLabel
- accessibilityHint
- accessibilityRole
2. Ensure touch targets are at least 44×44 points
3. Test with screen readers (VoiceOver on iOS, TalkBack on Android)
4. Support Dark Mode with appropriate color schemes
5. Implement reduced motion alternatives for animations
DESIGN PATTERNS:
1. Follow platform-specific design guidelines:
- iOS: Human Interface Guidelines
- Android: Material Design
2. Component structure:
- Create reusable components
- Implement proper prop validation with TypeScript
- Use React Native's built-in Platform API for platform-specific code
3. For form handling:
- Use Formik or React Hook Form
- Implement proper validation (Yup, Zod)
4. Design inspiration:
- Visually stunning, content-rich, professional-grade UIs
- Inspired by Apple-level design polish
- Every screen must feel “alive” with real-world UX patterns
EXAMPLE STRUCTURE:
\`\`\`
app/ # App screens
├── (tabs)/
│ ├── index.tsx # Root tab IMPORTANT
│ └── _layout.tsx # Root tab layout
├── _layout.tsx # Root layout
├── assets/ # Static assets
├── components/ # Shared components
├── hooks/
└── useFrameworkReady.ts
├── constants/ # App constants
├── app.json # Expo config
├── expo-env.d.ts # Expo environment types
├── tsconfig.json # TypeScript config
└── package.json # Package dependencies
\`\`\`
TROUBLESHOOTING:
1. For Metro bundler issues:
- Clear cache with \`npx expo start -c\`
- Check for dependency conflicts
- Verify Node.js version compatibility
2. For TypeScript errors:
- Ensure proper typing
- Update tsconfig.json as needed
- Use type assertions sparingly
3. For native module issues:
- Verify Expo compatibility
- Use Expo's prebuild feature for custom native code
- Consider upgrading to Expo's dev client for testing
</mobile_app_instructions>
Here are some examples of correct usage of artifacts:
<examples>

153
app/lib/hooks/StickToBottom.tsx Normal file
View File

@@ -0,0 +1,153 @@
/*
*!---------------------------------------------------------------------------------------------
* Copyright (c) StackBlitz. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------
*/
import * as React from 'react';
import {
type ReactNode,
createContext,
useContext,
useEffect,
useImperativeHandle,
useLayoutEffect,
useMemo,
useRef,
} from 'react';
import {
type GetTargetScrollTop,
type ScrollToBottom,
type StickToBottomOptions,
type StickToBottomState,
type StopScroll,
useStickToBottom,
} from './useStickToBottom';
export interface StickToBottomContext {
contentRef: React.MutableRefObject<HTMLElement | null> & React.RefCallback<HTMLElement>;
scrollRef: React.MutableRefObject<HTMLElement | null> & React.RefCallback<HTMLElement>;
scrollToBottom: ScrollToBottom;
stopScroll: StopScroll;
isAtBottom: boolean;
escapedFromLock: boolean;
get targetScrollTop(): GetTargetScrollTop | null;
set targetScrollTop(targetScrollTop: GetTargetScrollTop | null);
state: StickToBottomState;
}
const StickToBottomContext = createContext<StickToBottomContext | null>(null);
export interface StickToBottomProps
extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,
StickToBottomOptions {
contextRef?: React.Ref<StickToBottomContext>;
instance?: ReturnType<typeof useStickToBottom>;
children: ((context: StickToBottomContext) => ReactNode) | ReactNode;
}
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
export function StickToBottom({
instance,
children,
resize,
initial,
mass,
damping,
stiffness,
targetScrollTop: currentTargetScrollTop,
contextRef,
...props
}: StickToBottomProps) {
const customTargetScrollTop = useRef<GetTargetScrollTop | null>(null);
const targetScrollTop = React.useCallback<GetTargetScrollTop>(
(target, elements) => {
const get = context?.targetScrollTop ?? currentTargetScrollTop;
return get?.(target, elements) ?? target;
},
[currentTargetScrollTop],
);
const defaultInstance = useStickToBottom({
mass,
damping,
stiffness,
resize,
initial,
targetScrollTop,
});
const { scrollRef, contentRef, scrollToBottom, stopScroll, isAtBottom, escapedFromLock, state } =
instance ?? defaultInstance;
const context = useMemo<StickToBottomContext>(
() => ({
scrollToBottom,
stopScroll,
scrollRef,
isAtBottom,
escapedFromLock,
contentRef,
state,
get targetScrollTop() {
return customTargetScrollTop.current;
},
set targetScrollTop(targetScrollTop: GetTargetScrollTop | null) {
customTargetScrollTop.current = targetScrollTop;
},
}),
[scrollToBottom, isAtBottom, contentRef, scrollRef, stopScroll, escapedFromLock, state],
);
useImperativeHandle(contextRef, () => context, [context]);
useIsomorphicLayoutEffect(() => {
if (!scrollRef.current) {
return;
}
if (getComputedStyle(scrollRef.current).overflow === 'visible') {
scrollRef.current.style.overflow = 'auto';
}
}, []);
return (
<StickToBottomContext.Provider value={context}>
<div {...props}>{typeof children === 'function' ? children(context) : children}</div>
</StickToBottomContext.Provider>
);
}
export interface StickToBottomContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
children: ((context: StickToBottomContext) => ReactNode) | ReactNode;
}
function Content({ children, ...props }: StickToBottomContentProps) {
const context = useStickToBottomContext();
return (
<div ref={context.scrollRef} className="w-full h-auto">
<div {...props} ref={context.contentRef}>
{typeof children === 'function' ? children(context) : children}
</div>
</div>
);
}
StickToBottom.Content = Content;
/**
* Use this hook inside a <StickToBottom> component to gain access to whether the component is at the bottom of the scrollable area.
*/
export function useStickToBottomContext() {
const context = useContext(StickToBottomContext);
if (!context) {
throw new Error('use-stick-to-bottom component context must be used within a StickToBottom component');
}
return context;
}

2
app/lib/hooks/index.ts
View File

@@ -1,7 +1,7 @@
export * from './useMessageParser';
export * from './usePromptEnhancer';
export * from './useShortcuts';
export * from './useSnapScroll';
export * from './StickToBottom';
export * from './useEditChatDescription';
export { default } from './useViewport';
export { useUpdateCheck } from './useUpdateCheck';

1240
app/lib/hooks/useDataOperations.ts Normal file
View File

File diff suppressed because it is too large Load Diff

163
app/lib/hooks/useGit.ts
View File

@@ -43,13 +43,18 @@ export function useGit() {
}, []);
const gitClone = useCallback(
async (url: string) => {
async (url: string, retryCount = 0) => {
if (!webcontainer || !fs || !ready) {
throw 'Webcontainer not initialized';
throw new Error('Webcontainer not initialized. Please try again later.');
}
fileData.current = {};
/*
* Skip Git initialization for now - let isomorphic-git handle it
* This avoids potential issues with our manual initialization
*/
const headers: {
[x: string]: string;
} = {
@@ -63,6 +68,12 @@ export function useGit() {
}
try {
// Add a small delay before retrying to allow for network recovery
if (retryCount > 0) {
await new Promise((resolve) => setTimeout(resolve, 1000 * retryCount));
console.log(`Retrying git clone (attempt ${retryCount + 1})...`);
}
await git.clone({
fs,
http,
@@ -72,18 +83,23 @@ export function useGit() {
singleBranch: true,
corsProxy: '/api/git-proxy',
headers,
onProgress: (event) => {
console.log('Git clone progress:', event);
},
onAuth: (url) => {
let auth = lookupSavedPassword(url);
if (auth) {
console.log('Using saved authentication for', url);
return auth;
}
if (confirm('This repo is password protected. Ready to enter a username & password?')) {
console.log('Repository requires authentication:', url);
if (confirm('This repository requires authentication. Would you like to enter your GitHub credentials?')) {
auth = {
username: prompt('Enter username'),
password: prompt('Enter password'),
username: prompt('Enter username') || '',
password: prompt('Enter password or personal access token') || '',
};
return auth;
} else {
@@ -91,10 +107,14 @@ export function useGit() {
}
},
onAuthFailure: (url, _auth) => {
toast.error(`Error Authenticating with ${url.split('/')[2]}`);
throw `Error Authenticating with ${url.split('/')[2]}`;
console.error(`Authentication failed for ${url}`);
toast.error(`Authentication failed for ${url.split('/')[2]}. Please check your credentials and try again.`);
throw new Error(
`Authentication failed for ${url.split('/')[2]}. Please check your credentials and try again.`,
);
},
onAuthSuccess: (url, auth) => {
console.log(`Authentication successful for ${url}`);
saveGitAuth(url, auth);
},
});
@@ -109,8 +129,40 @@ export function useGit() {
} catch (error) {
console.error('Git clone error:', error);
// toast.error(`Git clone error ${(error as any).message||""}`);
throw error;
// Handle specific error types
const errorMessage = error instanceof Error ? error.message : String(error);
// Check for common error patterns
if (errorMessage.includes('Authentication failed')) {
toast.error(`Authentication failed. Please check your GitHub credentials and try again.`);
throw error;
} else if (
errorMessage.includes('ENOTFOUND') ||
errorMessage.includes('ETIMEDOUT') ||
errorMessage.includes('ECONNREFUSED')
) {
toast.error(`Network error while connecting to repository. Please check your internet connection.`);
// Retry for network errors, up to 3 times
if (retryCount < 3) {
return gitClone(url, retryCount + 1);
}
throw new Error(
`Failed to connect to repository after multiple attempts. Please check your internet connection.`,
);
} else if (errorMessage.includes('404')) {
toast.error(`Repository not found. Please check the URL and make sure the repository exists.`);
throw new Error(`Repository not found. Please check the URL and make sure the repository exists.`);
} else if (errorMessage.includes('401')) {
toast.error(`Unauthorized access to repository. Please connect your GitHub account with proper permissions.`);
throw new Error(
`Unauthorized access to repository. Please connect your GitHub account with proper permissions.`,
);
} else {
toast.error(`Failed to clone repository: ${errorMessage}`);
throw error;
}
}
},
[webcontainer, fs, ready],
@@ -136,18 +188,26 @@ const getFs = (
throw error;
}
},
writeFile: async (path: string, data: any, options: any) => {
const encoding = options.encoding;
writeFile: async (path: string, data: any, options: any = {}) => {
const relativePath = pathUtils.relative(webcontainer.workdir, path);
if (record.current) {
record.current[relativePath] = { data, encoding };
record.current[relativePath] = { data, encoding: options?.encoding };
}
try {
const result = await webcontainer.fs.writeFile(relativePath, data, { ...options, encoding });
// Handle encoding properly based on data type
if (data instanceof Uint8Array) {
// For binary data, don't pass encoding
const result = await webcontainer.fs.writeFile(relativePath, data);
return result;
} else {
// For text data, use the encoding if provided
const encoding = options?.encoding || 'utf8';
const result = await webcontainer.fs.writeFile(relativePath, data, encoding);
return result;
return result;
}
} catch (error) {
throw error;
}
@@ -208,33 +268,80 @@ const getFs = (
stat: async (path: string) => {
try {
const relativePath = pathUtils.relative(webcontainer.workdir, path);
const resp = await webcontainer.fs.readdir(pathUtils.dirname(relativePath), { withFileTypes: true });
const name = pathUtils.basename(relativePath);
const fileInfo = resp.find((x) => x.name == name);
const dirPath = pathUtils.dirname(relativePath);
const fileName = pathUtils.basename(relativePath);
// Special handling for .git/index file
if (relativePath === '.git/index') {
return {
isFile: () => true,
isDirectory: () => false,
isSymbolicLink: () => false,
size: 12, // Size of our empty index
mode: 0o100644, // Regular file
mtimeMs: Date.now(),
ctimeMs: Date.now(),
birthtimeMs: Date.now(),
atimeMs: Date.now(),
uid: 1000,
gid: 1000,
dev: 1,
ino: 1,
nlink: 1,
rdev: 0,
blksize: 4096,
blocks: 1,
mtime: new Date(),
ctime: new Date(),
birthtime: new Date(),
atime: new Date(),
};
}
const resp = await webcontainer.fs.readdir(dirPath, { withFileTypes: true });
const fileInfo = resp.find((x) => x.name === fileName);
if (!fileInfo) {
throw new Error(`ENOENT: no such file or directory, stat '${path}'`);
const err = new Error(`ENOENT: no such file or directory, stat '${path}'`) as NodeJS.ErrnoException;
err.code = 'ENOENT';
err.errno = -2;
err.syscall = 'stat';
err.path = path;
throw err;
}
return {
isFile: () => fileInfo.isFile(),
isDirectory: () => fileInfo.isDirectory(),
isSymbolicLink: () => false,
size: 1,
mode: 0o666, // Default permissions
size: fileInfo.isDirectory() ? 4096 : 1,
mode: fileInfo.isDirectory() ? 0o040755 : 0o100644, // Directory or regular file
mtimeMs: Date.now(),
ctimeMs: Date.now(),
birthtimeMs: Date.now(),
atimeMs: Date.now(),
uid: 1000,
gid: 1000,
dev: 1,
ino: 1,
nlink: 1,
rdev: 0,
blksize: 4096,
blocks: 8,
mtime: new Date(),
ctime: new Date(),
birthtime: new Date(),
atime: new Date(),
};
} catch (error: any) {
console.log(error?.message);
if (!error.code) {
error.code = 'ENOENT';
error.errno = -2;
error.syscall = 'stat';
error.path = path;
}
const err = new Error(`ENOENT: no such file or directory, stat '${path}'`) as NodeJS.ErrnoException;
err.code = 'ENOENT';
err.errno = -2;
err.syscall = 'stat';
err.path = path;
throw err;
throw error;
}
},
lstat: async (path: string) => {

58
app/lib/hooks/useIndexedDB.ts Normal file
View File

@@ -0,0 +1,58 @@
import { useState, useEffect } from 'react';
/**
* Hook to initialize and provide access to the IndexedDB database
*/
export function useIndexedDB() {
const [db, setDb] = useState<IDBDatabase | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
useEffect(() => {
const initDB = async () => {
try {
setIsLoading(true);
const request = indexedDB.open('boltDB', 1);
request.onupgradeneeded = (event) => {
const db = (event.target as IDBOpenDBRequest).result;
// Create object stores if they don't exist
if (!db.objectStoreNames.contains('chats')) {
const chatStore = db.createObjectStore('chats', { keyPath: 'id' });
chatStore.createIndex('updatedAt', 'updatedAt', { unique: false });
}
if (!db.objectStoreNames.contains('settings')) {
db.createObjectStore('settings', { keyPath: 'key' });
}
};
request.onsuccess = (event) => {
const database = (event.target as IDBOpenDBRequest).result;
setDb(database);
setIsLoading(false);
};
request.onerror = (event) => {
setError(new Error(`Database error: ${(event.target as IDBOpenDBRequest).error?.message}`));
setIsLoading(false);
};
} catch (err) {
setError(err instanceof Error ? err : new Error('Unknown error initializing database'));
setIsLoading(false);
}
};
initDB();
return () => {
if (db) {
db.close();
}
};
}, []);
return { db, isLoading, error };
}

13
app/lib/hooks/useShortcuts.ts
View File

@@ -40,19 +40,6 @@ export function useShortcuts(): void {
return;
}
// Debug logging in development only
if (import.meta.env.DEV) {
console.log('Key pressed:', {
key: event.key,
code: event.code,
ctrlKey: event.ctrlKey,
shiftKey: event.shiftKey,
altKey: event.altKey,
metaKey: event.metaKey,
target: event.target,
});
}
// Handle shortcuts
for (const [name, shortcut] of Object.entries(shortcuts)) {
const keyMatches =

155
app/lib/hooks/useSnapScroll.ts
View File

@@ -1,155 +0,0 @@
import { useRef, useCallback } from 'react';
interface ScrollOptions {
duration?: number;
easing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'cubic-bezier';
cubicBezier?: [number, number, number, number];
bottomThreshold?: number;
}
export function useSnapScroll(options: ScrollOptions = {}) {
const {
duration = 800,
easing = 'ease-in-out',
cubicBezier = [0.42, 0, 0.58, 1],
bottomThreshold = 50, // pixels from bottom to consider "scrolled to bottom"
} = options;
const autoScrollRef = useRef(true);
const scrollNodeRef = useRef<HTMLDivElement>();
const onScrollRef = useRef<() => void>();
const observerRef = useRef<ResizeObserver>();
const animationFrameRef = useRef<number>();
const lastScrollTopRef = useRef<number>(0);
const smoothScroll = useCallback(
(element: HTMLDivElement, targetPosition: number, duration: number, easingFunction: string) => {
const startPosition = element.scrollTop;
const distance = targetPosition - startPosition;
const startTime = performance.now();
const bezierPoints = easingFunction === 'cubic-bezier' ? cubicBezier : [0.42, 0, 0.58, 1];
const cubicBezierFunction = (t: number): number => {
const [, y1, , y2] = bezierPoints;
/*
* const cx = 3 * x1;
* const bx = 3 * (x2 - x1) - cx;
* const ax = 1 - cx - bx;
*/
const cy = 3 * y1;
const by = 3 * (y2 - y1) - cy;
const ay = 1 - cy - by;
// const sampleCurveX = (t: number) => ((ax * t + bx) * t + cx) * t;
const sampleCurveY = (t: number) => ((ay * t + by) * t + cy) * t;
return sampleCurveY(t);
};
const animation = (currentTime: number) => {
const elapsedTime = currentTime - startTime;
const progress = Math.min(elapsedTime / duration, 1);
const easedProgress = cubicBezierFunction(progress);
const newPosition = startPosition + distance * easedProgress;
// Only scroll if auto-scroll is still enabled
if (autoScrollRef.current) {
element.scrollTop = newPosition;
}
if (progress < 1 && autoScrollRef.current) {
animationFrameRef.current = requestAnimationFrame(animation);
}
};
if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current);
}
animationFrameRef.current = requestAnimationFrame(animation);
},
[cubicBezier],
);
const isScrolledToBottom = useCallback(
(element: HTMLDivElement): boolean => {
const { scrollTop, scrollHeight, clientHeight } = element;
return scrollHeight - scrollTop - clientHeight <= bottomThreshold;
},
[bottomThreshold],
);
const messageRef = useCallback(
(node: HTMLDivElement | null) => {
if (node) {
const observer = new ResizeObserver(() => {
if (autoScrollRef.current && scrollNodeRef.current) {
const { scrollHeight, clientHeight } = scrollNodeRef.current;
const scrollTarget = scrollHeight - clientHeight;
smoothScroll(scrollNodeRef.current, scrollTarget, duration, easing);
}
});
observer.observe(node);
observerRef.current = observer;
} else {
observerRef.current?.disconnect();
observerRef.current = undefined;
if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current);
animationFrameRef.current = undefined;
}
}
},
[duration, easing, smoothScroll],
);
const scrollRef = useCallback(
(node: HTMLDivElement | null) => {
if (node) {
onScrollRef.current = () => {
const { scrollTop } = node;
// Detect scroll direction
const isScrollingUp = scrollTop < lastScrollTopRef.current;
// Update auto-scroll based on scroll direction and position
if (isScrollingUp) {
// Disable auto-scroll when scrolling up
autoScrollRef.current = false;
} else if (isScrolledToBottom(node)) {
// Re-enable auto-scroll when manually scrolled to bottom
autoScrollRef.current = true;
}
// Store current scroll position for next comparison
lastScrollTopRef.current = scrollTop;
};
node.addEventListener('scroll', onScrollRef.current);
scrollNodeRef.current = node;
} else {
if (onScrollRef.current && scrollNodeRef.current) {
scrollNodeRef.current.removeEventListener('scroll', onScrollRef.current);
}
if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current);
animationFrameRef.current = undefined;
}
scrollNodeRef.current = undefined;
onScrollRef.current = undefined;
}
},
[isScrolledToBottom],
);
return [messageRef, scrollRef] as const;
}

613
app/lib/hooks/useStickToBottom.tsx Normal file
View File

@@ -0,0 +1,613 @@
/*
*!---------------------------------------------------------------------------------------------
* Copyright (c) StackBlitz. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------
*/
import {
type DependencyList,
type MutableRefObject,
type RefCallback,
useCallback,
useMemo,
useRef,
useState,
} from 'react';
export interface StickToBottomState {
scrollTop: number;
lastScrollTop?: number;
ignoreScrollToTop?: number;
targetScrollTop: number;
calculatedTargetScrollTop: number;
scrollDifference: number;
resizeDifference: number;
animation?: {
behavior: 'instant' | Required<SpringAnimation>;
ignoreEscapes: boolean;
promise: Promise<boolean>;
};
lastTick?: number;
velocity: number;
accumulated: number;
escapedFromLock: boolean;
isAtBottom: boolean;
isNearBottom: boolean;
resizeObserver?: ResizeObserver;
}
const DEFAULT_SPRING_ANIMATION = {
/**
* A value from 0 to 1, on how much to damp the animation.
* 0 means no damping, 1 means full damping.
*
* @default 0.7
*/
damping: 0.7,
/**
* The stiffness of how fast/slow the animation gets up to speed.
*
* @default 0.05
*/
stiffness: 0.05,
/**
* The inertial mass associated with the animation.
* Higher numbers make the animation slower.
*
* @default 1.25
*/
mass: 1.25,
};
export interface SpringAnimation extends Partial<typeof DEFAULT_SPRING_ANIMATION> {}
export type Animation = ScrollBehavior | SpringAnimation;
export interface ScrollElements {
scrollElement: HTMLElement;
contentElement: HTMLElement;
}
export type GetTargetScrollTop = (targetScrollTop: number, context: ScrollElements) => number;
export interface StickToBottomOptions extends SpringAnimation {
resize?: Animation;
initial?: Animation | boolean;
targetScrollTop?: GetTargetScrollTop;
}
export type ScrollToBottomOptions =
| ScrollBehavior
| {
animation?: Animation;
/**
* Whether to wait for any existing scrolls to finish before
* performing this one. Or if a millisecond is passed,
* it will wait for that duration before performing the scroll.
*
* @default false
*/
wait?: boolean | number;
/**
* Whether to prevent the user from escaping the scroll,
* by scrolling up with their mouse.
*/
ignoreEscapes?: boolean;
/**
* Only scroll to the bottom if we're already at the bottom.
*
* @default false
*/
preserveScrollPosition?: boolean;
/**
* The extra duration in ms that this scroll event should persist for.
* (in addition to the time that it takes to get to the bottom)
*
* Not to be confused with the duration of the animation -
* for that you should adjust the animation option.
*
* @default 0
*/
duration?: number | Promise<void>;
};
export type ScrollToBottom = (scrollOptions?: ScrollToBottomOptions) => Promise<boolean> | boolean;
export type StopScroll = () => void;
const STICK_TO_BOTTOM_OFFSET_PX = 70;
const SIXTY_FPS_INTERVAL_MS = 1000 / 60;
const RETAIN_ANIMATION_DURATION_MS = 350;
let mouseDown = false;
globalThis.document?.addEventListener('mousedown', () => {
mouseDown = true;
});
globalThis.document?.addEventListener('mouseup', () => {
mouseDown = false;
});
globalThis.document?.addEventListener('click', () => {
mouseDown = false;
});
export const useStickToBottom = (options: StickToBottomOptions = {}) => {
const [escapedFromLock, updateEscapedFromLock] = useState(false);
const [isAtBottom, updateIsAtBottom] = useState(options.initial !== false);
const [isNearBottom, setIsNearBottom] = useState(false);
const optionsRef = useRef<StickToBottomOptions>(null!);
optionsRef.current = options;
const isSelecting = useCallback(() => {
if (!mouseDown) {
return false;
}
const selection = window.getSelection();
if (!selection || !selection.rangeCount) {
return false;
}
const range = selection.getRangeAt(0);
return (
range.commonAncestorContainer.contains(scrollRef.current) ||
scrollRef.current?.contains(range.commonAncestorContainer)
);
}, []);
const setIsAtBottom = useCallback((isAtBottom: boolean) => {
state.isAtBottom = isAtBottom;
updateIsAtBottom(isAtBottom);
}, []);
const setEscapedFromLock = useCallback((escapedFromLock: boolean) => {
state.escapedFromLock = escapedFromLock;
updateEscapedFromLock(escapedFromLock);
}, []);
// biome-ignore lint/correctness/useExhaustiveDependencies: not needed
const state = useMemo<StickToBottomState>(() => {
let lastCalculation: { targetScrollTop: number; calculatedScrollTop: number } | undefined;
return {
escapedFromLock,
isAtBottom,
resizeDifference: 0,
accumulated: 0,
velocity: 0,
listeners: new Set(),
get scrollTop() {
return scrollRef.current?.scrollTop ?? 0;
},
set scrollTop(scrollTop: number) {
if (scrollRef.current) {
scrollRef.current.scrollTop = scrollTop;
state.ignoreScrollToTop = scrollRef.current.scrollTop;
}
},
get targetScrollTop() {
if (!scrollRef.current || !contentRef.current) {
return 0;
}
return scrollRef.current.scrollHeight - 1 - scrollRef.current.clientHeight;
},
get calculatedTargetScrollTop() {
if (!scrollRef.current || !contentRef.current) {
return 0;
}
const { targetScrollTop } = this;
if (!options.targetScrollTop) {
return targetScrollTop;
}
if (lastCalculation?.targetScrollTop === targetScrollTop) {
return lastCalculation.calculatedScrollTop;
}
const calculatedScrollTop = Math.max(
Math.min(
options.targetScrollTop(targetScrollTop, {
scrollElement: scrollRef.current,
contentElement: contentRef.current,
}),
targetScrollTop,
),
0,
);
lastCalculation = { targetScrollTop, calculatedScrollTop };
requestAnimationFrame(() => {
lastCalculation = undefined;
});
return calculatedScrollTop;
},
get scrollDifference() {
return this.calculatedTargetScrollTop - this.scrollTop;
},
get isNearBottom() {
return this.scrollDifference <= STICK_TO_BOTTOM_OFFSET_PX;
},
};
}, []);
const scrollToBottom = useCallback<ScrollToBottom>(
(scrollOptions = {}) => {
if (typeof scrollOptions === 'string') {
scrollOptions = { animation: scrollOptions };
}
if (!scrollOptions.preserveScrollPosition) {
setIsAtBottom(true);
}
const waitElapsed = Date.now() + (Number(scrollOptions.wait) || 0);
const behavior = mergeAnimations(optionsRef.current, scrollOptions.animation);
const { ignoreEscapes = false } = scrollOptions;
let durationElapsed: number;
let startTarget = state.calculatedTargetScrollTop;
if (scrollOptions.duration instanceof Promise) {
scrollOptions.duration.finally(() => {
durationElapsed = Date.now();
});
} else {
durationElapsed = waitElapsed + (scrollOptions.duration ?? 0);
}
const next = async (): Promise<boolean> => {
const promise = new Promise(requestAnimationFrame).then(() => {
if (!state.isAtBottom) {
state.animation = undefined;
return false;
}
const { scrollTop } = state;
const tick = performance.now();
const tickDelta = (tick - (state.lastTick ?? tick)) / SIXTY_FPS_INTERVAL_MS;
state.animation ||= { behavior, promise, ignoreEscapes };
if (state.animation.behavior === behavior) {
state.lastTick = tick;
}
if (isSelecting()) {
return next();
}
if (waitElapsed > Date.now()) {
return next();
}
if (scrollTop < Math.min(startTarget, state.calculatedTargetScrollTop)) {
if (state.animation?.behavior === behavior) {
if (behavior === 'instant') {
state.scrollTop = state.calculatedTargetScrollTop;
return next();
}
state.velocity =
(behavior.damping * state.velocity + behavior.stiffness * state.scrollDifference) / behavior.mass;
state.accumulated += state.velocity * tickDelta;
state.scrollTop += state.accumulated;
if (state.scrollTop !== scrollTop) {
state.accumulated = 0;
}
}
return next();
}
if (durationElapsed > Date.now()) {
startTarget = state.calculatedTargetScrollTop;
return next();
}
state.animation = undefined;
/**
* If we're still below the target, then queue
* up another scroll to the bottom with the last
* requested animatino.
*/
if (state.scrollTop < state.calculatedTargetScrollTop) {
return scrollToBottom({
animation: mergeAnimations(optionsRef.current, optionsRef.current.resize),
ignoreEscapes,
duration: Math.max(0, durationElapsed - Date.now()) || undefined,
});
}
return state.isAtBottom;
});
return promise.then((isAtBottom) => {
requestAnimationFrame(() => {
if (!state.animation) {
state.lastTick = undefined;
state.velocity = 0;
}
});
return isAtBottom;
});
};
if (scrollOptions.wait !== true) {
state.animation = undefined;
}
if (state.animation?.behavior === behavior) {
return state.animation.promise;
}
return next();
},
[setIsAtBottom, isSelecting, state],
);
const stopScroll = useCallback(() => {
setEscapedFromLock(true);
setIsAtBottom(false);
}, [setEscapedFromLock, setIsAtBottom]);
const handleScroll = useCallback(
({ target }: Event) => {
if (target !== scrollRef.current) {
return;
}
const { scrollTop, ignoreScrollToTop } = state;
let { lastScrollTop = scrollTop } = state;
state.lastScrollTop = scrollTop;
state.ignoreScrollToTop = undefined;
if (ignoreScrollToTop && ignoreScrollToTop > scrollTop) {
/**
* When the user scrolls up while the animation plays, the `scrollTop` may
* not come in separate events; if this happens, to make sure `isScrollingUp`
* is correct, set the lastScrollTop to the ignored event.
*/
lastScrollTop = ignoreScrollToTop;
}
setIsNearBottom(state.isNearBottom);
/**
* Scroll events may come before a ResizeObserver event,
* so in order to ignore resize events correctly we use a
* timeout.
*
* @see https://github.com/WICG/resize-observer/issues/25#issuecomment-248757228
*/
setTimeout(() => {
/**
* When theres a resize difference ignore the resize event.
*/
if (state.resizeDifference || scrollTop === ignoreScrollToTop) {
return;
}
if (isSelecting()) {
setEscapedFromLock(true);
setIsAtBottom(false);
return;
}
const isScrollingDown = scrollTop > lastScrollTop;
const isScrollingUp = scrollTop < lastScrollTop;
if (state.animation?.ignoreEscapes) {
state.scrollTop = lastScrollTop;
return;
}
if (isScrollingUp) {
setEscapedFromLock(true);
setIsAtBottom(false);
}
if (isScrollingDown) {
setEscapedFromLock(false);
}
if (!state.escapedFromLock && state.isNearBottom) {
setIsAtBottom(true);
}
}, 1);
},
[setEscapedFromLock, setIsAtBottom, isSelecting, state],
);
const handleWheel = useCallback(
({ target, deltaY }: WheelEvent) => {
let element = target as HTMLElement;
while (!['scroll', 'auto'].includes(getComputedStyle(element).overflow)) {
if (!element.parentElement) {
return;
}
element = element.parentElement;
}
/**
* The browser may cancel the scrolling from the mouse wheel
* if we update it from the animation in meantime.
* To prevent this, always escape when the wheel is scrolled up.
*/
if (
element === scrollRef.current &&
deltaY < 0 &&
scrollRef.current.scrollHeight > scrollRef.current.clientHeight &&
!state.animation?.ignoreEscapes
) {
setEscapedFromLock(true);
setIsAtBottom(false);
}
},
[setEscapedFromLock, setIsAtBottom, state],
);
const scrollRef = useRefCallback((scroll) => {
scrollRef.current?.removeEventListener('scroll', handleScroll);
scrollRef.current?.removeEventListener('wheel', handleWheel);
scroll?.addEventListener('scroll', handleScroll, { passive: true });
scroll?.addEventListener('wheel', handleWheel, { passive: true });
}, []);
const contentRef = useRefCallback((content) => {
state.resizeObserver?.disconnect();
if (!content) {
return;
}
let previousHeight: number | undefined;
state.resizeObserver = new ResizeObserver(([entry]) => {
const { height } = entry.contentRect;
const difference = height - (previousHeight ?? height);
state.resizeDifference = difference;
/**
* Sometimes the browser can overscroll past the target,
* so check for this and adjust appropriately.
*/
if (state.scrollTop > state.targetScrollTop) {
state.scrollTop = state.targetScrollTop;
}
setIsNearBottom(state.isNearBottom);
if (difference >= 0) {
/**
* If it's a positive resize, scroll to the bottom when
* we're already at the bottom.
*/
const animation = mergeAnimations(
optionsRef.current,
previousHeight ? optionsRef.current.resize : optionsRef.current.initial,
);
scrollToBottom({
animation,
wait: true,
preserveScrollPosition: true,
duration: animation === 'instant' ? undefined : RETAIN_ANIMATION_DURATION_MS,
});
} else {
/**
* Else if it's a negative resize, check if we're near the bottom
* if we are want to un-escape from the lock, because the resize
* could have caused the container to be at the bottom.
*/
if (state.isNearBottom) {
setEscapedFromLock(false);
setIsAtBottom(true);
}
}
previousHeight = height;
/**
* Reset the resize difference after the scroll event
* has fired. Requires a rAF to wait for the scroll event,
* and a setTimeout to wait for the other timeout we have in
* resizeObserver in case the scroll event happens after the
* resize event.
*/
requestAnimationFrame(() => {
setTimeout(() => {
if (state.resizeDifference === difference) {
state.resizeDifference = 0;
}
}, 1);
});
});
state.resizeObserver?.observe(content);
}, []);
return {
contentRef,
scrollRef,
scrollToBottom,
stopScroll,
isAtBottom: isAtBottom || isNearBottom,
isNearBottom,
escapedFromLock,
state,
};
};
function useRefCallback<T extends (ref: HTMLElement | null) => any>(callback: T, deps: DependencyList) {
// biome-ignore lint/correctness/useExhaustiveDependencies: not needed
const result = useCallback((ref: HTMLElement | null) => {
result.current = ref;
return callback(ref);
}, deps) as any as MutableRefObject<HTMLElement | null> & RefCallback<HTMLElement>;
return result;
}
const animationCache = new Map<string, Readonly<Required<SpringAnimation>>>();
function mergeAnimations(...animations: (Animation | boolean | undefined)[]) {
const result = { ...DEFAULT_SPRING_ANIMATION };
let instant = false;
for (const animation of animations) {
if (animation === 'instant') {
instant = true;
continue;
}
if (typeof animation !== 'object') {
continue;
}
instant = false;
result.damping = animation.damping ?? result.damping;
result.stiffness = animation.stiffness ?? result.stiffness;
result.mass = animation.mass ?? result.mass;
}
const key = JSON.stringify(result);
if (!animationCache.has(key)) {
animationCache.set(key, Object.freeze(result));
}
return instant ? 'instant' : animationCache.get(key)!;
}

147
app/lib/hooks/useSupabaseConnection.ts Normal file
View File

@@ -0,0 +1,147 @@
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useStore } from '@nanostores/react';
import { logStore } from '~/lib/stores/logs';
import {
supabaseConnection,
isConnecting,
isFetchingStats,
isFetchingApiKeys,
updateSupabaseConnection,
fetchProjectApiKeys,
} from '~/lib/stores/supabase';
export function useSupabaseConnection() {
const connection = useStore(supabaseConnection);
const connecting = useStore(isConnecting);
const fetchingStats = useStore(isFetchingStats);
const fetchingApiKeys = useStore(isFetchingApiKeys);
const [isProjectsExpanded, setIsProjectsExpanded] = useState(false);
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
useEffect(() => {
const savedConnection = localStorage.getItem('supabase_connection');
const savedCredentials = localStorage.getItem('supabaseCredentials');
if (savedConnection) {
const parsed = JSON.parse(savedConnection);
if (savedCredentials && !parsed.credentials) {
parsed.credentials = JSON.parse(savedCredentials);
}
updateSupabaseConnection(parsed);
if (parsed.token && parsed.selectedProjectId && !parsed.credentials) {
fetchProjectApiKeys(parsed.selectedProjectId, parsed.token).catch(console.error);
}
}
}, []);
const handleConnect = async () => {
isConnecting.set(true);
try {
const cleanToken = connection.token.trim();
const response = await fetch('/api/supabase', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
token: cleanToken,
}),
});
const data = (await response.json()) as any;
if (!response.ok) {
throw new Error(data.error || 'Failed to connect');
}
updateSupabaseConnection({
user: data.user,
token: connection.token,
stats: data.stats,
});
toast.success('Successfully connected to Supabase');
setIsProjectsExpanded(true);
return true;
} catch (error) {
console.error('Connection error:', error);
logStore.logError('Failed to authenticate with Supabase', { error });
toast.error(error instanceof Error ? error.message : 'Failed to connect to Supabase');
updateSupabaseConnection({ user: null, token: '' });
return false;
} finally {
isConnecting.set(false);
}
};
const handleDisconnect = () => {
updateSupabaseConnection({ user: null, token: '' });
toast.success('Disconnected from Supabase');
setIsDropdownOpen(false);
};
const selectProject = async (projectId: string) => {
const currentState = supabaseConnection.get();
let projectData = undefined;
if (projectId && currentState.stats?.projects) {
projectData = currentState.stats.projects.find((project) => project.id === projectId);
}
updateSupabaseConnection({
selectedProjectId: projectId,
project: projectData,
});
if (projectId && currentState.token) {
try {
await fetchProjectApiKeys(projectId, currentState.token);
toast.success('Project selected successfully');
} catch (error) {
console.error('Failed to fetch API keys:', error);
toast.error('Selected project but failed to fetch API keys');
}
} else {
toast.success('Project selected successfully');
}
setIsDropdownOpen(false);
};
const handleCreateProject = async () => {
window.open('https://app.supabase.com/new/new-project', '_blank');
};
return {
connection,
connecting,
fetchingStats,
fetchingApiKeys,
isProjectsExpanded,
setIsProjectsExpanded,
isDropdownOpen,
setIsDropdownOpen,
handleConnect,
handleDisconnect,
selectProject,
handleCreateProject,
updateToken: (token: string) => updateSupabaseConnection({ ...connection, token }),
isConnected: !!(connection.user && connection.token),
fetchProjectApiKeys: (projectId: string) => {
if (connection.token) {
return fetchProjectApiKeys(projectId, connection.token);
}
return Promise.reject(new Error('No token available'));
},
};
}

8
app/lib/modules/llm/providers/anthropic.ts
View File

@@ -13,6 +13,12 @@ export default class AnthropicProvider extends BaseProvider {
};
staticModels: ModelInfo[] = [
{
name: 'claude-3-7-sonnet-20250219',
label: 'Claude 3.7 Sonnet',
provider: 'Anthropic',
maxTokenAllowed: 8000,
},
{
name: 'claude-3-5-sonnet-latest',
label: 'Claude 3.5 Sonnet (new)',
@@ -46,7 +52,7 @@ export default class AnthropicProvider extends BaseProvider {
providerSettings: settings,
serverEnv: serverEnv as any,
defaultBaseUrlKey: '',
defaultApiTokenKey: 'OPENAI_API_KEY',
defaultApiTokenKey: 'ANTHROPIC_API_KEY',
});
if (!apiKey) {

1
app/lib/modules/llm/providers/xai.ts
View File

@@ -13,6 +13,7 @@ export default class XAIProvider extends BaseProvider {
};
staticModels: ModelInfo[] = [
{ name: 'grok-3-beta', label: 'xAI Grok 3 Beta', provider: 'xAI', maxTokenAllowed: 8000 },
{ name: 'grok-beta', label: 'xAI Grok Beta', provider: 'xAI', maxTokenAllowed: 8000 },
{ name: 'grok-2-1212', label: 'xAI Grok2 1212', provider: 'xAI', maxTokenAllowed: 8000 },
];

140
app/lib/persistence/chats.ts Normal file
View File

@@ -0,0 +1,140 @@
/**
* Functions for managing chat data in IndexedDB
*/
import type { Message } from 'ai';
import type { IChatMetadata } from './db'; // Import IChatMetadata
export interface ChatMessage {
id: string;
role: 'user' | 'assistant' | 'system';
content: string;
timestamp: number;
}
export interface Chat {
id: string;
description?: string;
messages: Message[];
timestamp: string;
urlId?: string;
metadata?: IChatMetadata;
}
/**
* Get all chats from the database
* @param db The IndexedDB database instance
* @returns A promise that resolves to an array of chats
*/
export async function getAllChats(db: IDBDatabase): Promise<Chat[]> {
console.log(`getAllChats: Using database '${db.name}', version ${db.version}`);
return new Promise((resolve, reject) => {
try {
const transaction = db.transaction(['chats'], 'readonly');
const store = transaction.objectStore('chats');
const request = store.getAll();
request.onsuccess = () => {
const result = request.result || [];
console.log(`getAllChats: Found ${result.length} chats in database '${db.name}'`);
resolve(result);
};
request.onerror = () => {
console.error(`getAllChats: Error querying database '${db.name}':`, request.error);
reject(request.error);
};
} catch (err) {
console.error(`getAllChats: Error creating transaction on database '${db.name}':`, err);
reject(err);
}
});
}
/**
* Get a chat by ID
* @param db The IndexedDB database instance
* @param id The ID of the chat to get
* @returns A promise that resolves to the chat or null if not found
*/
export async function getChatById(db: IDBDatabase, id: string): Promise<Chat | null> {
return new Promise((resolve, reject) => {
const transaction = db.transaction(['chats'], 'readonly');
const store = transaction.objectStore('chats');
const request = store.get(id);
request.onsuccess = () => {
resolve(request.result || null);
};
request.onerror = () => {
reject(request.error);
};
});
}
/**
* Save a chat to the database
* @param db The IndexedDB database instance
* @param chat The chat to save
* @returns A promise that resolves when the chat is saved
*/
export async function saveChat(db: IDBDatabase, chat: Chat): Promise<void> {
return new Promise((resolve, reject) => {
const transaction = db.transaction(['chats'], 'readwrite');
const store = transaction.objectStore('chats');
const request = store.put(chat);
request.onsuccess = () => {
resolve();
};
request.onerror = () => {
reject(request.error);
};
});
}
/**
* Delete a chat by ID
* @param db The IndexedDB database instance
* @param id The ID of the chat to delete
* @returns A promise that resolves when the chat is deleted
*/
export async function deleteChat(db: IDBDatabase, id: string): Promise<void> {
return new Promise((resolve, reject) => {
const transaction = db.transaction(['chats'], 'readwrite');
const store = transaction.objectStore('chats');
const request = store.delete(id);
request.onsuccess = () => {
resolve();
};
request.onerror = () => {
reject(request.error);
};
});
}
/**
* Delete all chats
* @param db The IndexedDB database instance
* @returns A promise that resolves when all chats are deleted
*/
export async function deleteAllChats(db: IDBDatabase): Promise<void> {
return new Promise((resolve, reject) => {
const transaction = db.transaction(['chats'], 'readwrite');
const store = transaction.objectStore('chats');
const request = store.clear();
request.onsuccess = () => {
resolve();
};
request.onerror = () => {
reject(request.error);
};
});
}

104
app/lib/persistence/db.ts
View File

@@ -1,6 +1,7 @@
import type { Message } from 'ai';
import { createScopedLogger } from '~/utils/logger';
import type { ChatHistoryItem } from './useChatHistory';
import type { Snapshot } from './types'; // Import Snapshot type
export interface IChatMetadata {
gitUrl: string;
@@ -18,15 +19,24 @@ export async function openDatabase(): Promise<IDBDatabase | undefined> {
}
return new Promise((resolve) => {
const request = indexedDB.open('boltHistory', 1);
const request = indexedDB.open('boltHistory', 2);
request.onupgradeneeded = (event: IDBVersionChangeEvent) => {
const db = (event.target as IDBOpenDBRequest).result;
const oldVersion = event.oldVersion;
if (!db.objectStoreNames.contains('chats')) {
const store = db.createObjectStore('chats', { keyPath: 'id' });
store.createIndex('id', 'id', { unique: true });
store.createIndex('urlId', 'urlId', { unique: true });
if (oldVersion < 1) {
if (!db.objectStoreNames.contains('chats')) {
const store = db.createObjectStore('chats', { keyPath: 'id' });
store.createIndex('id', 'id', { unique: true });
store.createIndex('urlId', 'urlId', { unique: true });
}
}
if (oldVersion < 2) {
if (!db.objectStoreNames.contains('snapshots')) {
db.createObjectStore('snapshots', { keyPath: 'chatId' });
}
}
};
@@ -113,12 +123,46 @@ export async function getMessagesById(db: IDBDatabase, id: string): Promise<Chat
export async function deleteById(db: IDBDatabase, id: string): Promise<void> {
return new Promise((resolve, reject) => {
const transaction = db.transaction('chats', 'readwrite');
const store = transaction.objectStore('chats');
const request = store.delete(id);
const transaction = db.transaction(['chats', 'snapshots'], 'readwrite'); // Add snapshots store to transaction
const chatStore = transaction.objectStore('chats');
const snapshotStore = transaction.objectStore('snapshots');
request.onsuccess = () => resolve(undefined);
request.onerror = () => reject(request.error);
const deleteChatRequest = chatStore.delete(id);
const deleteSnapshotRequest = snapshotStore.delete(id); // Also delete snapshot
let chatDeleted = false;
let snapshotDeleted = false;
const checkCompletion = () => {
if (chatDeleted && snapshotDeleted) {
resolve(undefined);
}
};
deleteChatRequest.onsuccess = () => {
chatDeleted = true;
checkCompletion();
};
deleteChatRequest.onerror = () => reject(deleteChatRequest.error);
deleteSnapshotRequest.onsuccess = () => {
snapshotDeleted = true;
checkCompletion();
};
deleteSnapshotRequest.onerror = (event) => {
if ((event.target as IDBRequest).error?.name === 'NotFoundError') {
snapshotDeleted = true;
checkCompletion();
} else {
reject(deleteSnapshotRequest.error);
}
};
transaction.oncomplete = () => {
// This might resolve before checkCompletion if one operation finishes much faster
};
transaction.onerror = () => reject(transaction.error);
});
}
@@ -257,3 +301,43 @@ export async function updateChatMetadata(
await setMessages(db, id, chat.messages, chat.urlId, chat.description, chat.timestamp, metadata);
}
export async function getSnapshot(db: IDBDatabase, chatId: string): Promise<Snapshot | undefined> {
return new Promise((resolve, reject) => {
const transaction = db.transaction('snapshots', 'readonly');
const store = transaction.objectStore('snapshots');
const request = store.get(chatId);
request.onsuccess = () => resolve(request.result?.snapshot as Snapshot | undefined);
request.onerror = () => reject(request.error);
});
}
export async function setSnapshot(db: IDBDatabase, chatId: string, snapshot: Snapshot): Promise<void> {
return new Promise((resolve, reject) => {
const transaction = db.transaction('snapshots', 'readwrite');
const store = transaction.objectStore('snapshots');
const request = store.put({ chatId, snapshot });
request.onsuccess = () => resolve();
request.onerror = () => reject(request.error);
});
}
export async function deleteSnapshot(db: IDBDatabase, chatId: string): Promise<void> {
return new Promise((resolve, reject) => {
const transaction = db.transaction('snapshots', 'readwrite');
const store = transaction.objectStore('snapshots');
const request = store.delete(chatId);
request.onsuccess = () => resolve();
request.onerror = (event) => {
if ((event.target as IDBRequest).error?.name === 'NotFoundError') {
resolve();
} else {
reject(request.error);
}
};
});
}

511
app/lib/persistence/lockedFiles.ts Normal file
View File

@@ -0,0 +1,511 @@
import { createScopedLogger } from '~/utils/logger';
const logger = createScopedLogger('LockedFiles');
// Key for storing locked files in localStorage
export const LOCKED_FILES_KEY = 'bolt.lockedFiles';
export interface LockedItem {
chatId: string; // Chat ID to scope locks to a specific project
path: string;
isFolder: boolean; // Indicates if this is a folder lock
}
// In-memory cache for locked items to reduce localStorage reads
let lockedItemsCache: LockedItem[] | null = null;
// Map for faster lookups by chatId and path
const lockedItemsMap = new Map<string, Map<string, LockedItem>>();
// Debounce timer for localStorage writes
let saveDebounceTimer: ReturnType<typeof setTimeout> | null = null;
const SAVE_DEBOUNCE_MS = 300;
/**
* Get a chat-specific map from the lookup maps
*/
function getChatMap(chatId: string, createIfMissing = false): Map<string, LockedItem> | undefined {
if (createIfMissing && !lockedItemsMap.has(chatId)) {
lockedItemsMap.set(chatId, new Map());
}
return lockedItemsMap.get(chatId);
}
/**
* Initialize the in-memory cache and lookup maps
*/
function initializeCache(): LockedItem[] {
if (lockedItemsCache !== null) {
return lockedItemsCache;
}
try {
if (typeof localStorage !== 'undefined') {
const lockedItemsJson = localStorage.getItem(LOCKED_FILES_KEY);
if (lockedItemsJson) {
const items = JSON.parse(lockedItemsJson);
// Handle legacy format (without isFolder property)
const normalizedItems = items.map((item: any) => ({
...item,
isFolder: item.isFolder !== undefined ? item.isFolder : false,
}));
// Update the cache
lockedItemsCache = normalizedItems;
// Build the lookup maps
rebuildLookupMaps(normalizedItems);
return normalizedItems;
}
}
// Initialize with empty array if no data in localStorage
lockedItemsCache = [];
return [];
} catch (error) {
logger.error('Failed to initialize locked items cache', error);
lockedItemsCache = [];
return [];
}
}
/**
* Rebuild the lookup maps from the items array
*/
function rebuildLookupMaps(items: LockedItem[]): void {
// Clear existing maps
lockedItemsMap.clear();
// Build new maps
for (const item of items) {
if (!lockedItemsMap.has(item.chatId)) {
lockedItemsMap.set(item.chatId, new Map());
}
const chatMap = lockedItemsMap.get(item.chatId)!;
chatMap.set(item.path, item);
}
}
/**
* Save locked items to localStorage with debouncing
*/
export function saveLockedItems(items: LockedItem[]): void {
// Update the in-memory cache immediately
lockedItemsCache = [...items];
// Rebuild the lookup maps
rebuildLookupMaps(items);
// Debounce the localStorage write
if (saveDebounceTimer) {
clearTimeout(saveDebounceTimer);
}
saveDebounceTimer = setTimeout(() => {
try {
if (typeof localStorage !== 'undefined') {
localStorage.setItem(LOCKED_FILES_KEY, JSON.stringify(items));
logger.info(`Saved ${items.length} locked items to localStorage`);
}
} catch (error) {
logger.error('Failed to save locked items to localStorage', error);
}
}, SAVE_DEBOUNCE_MS);
}
/**
* Get locked items from cache or localStorage
*/
export function getLockedItems(): LockedItem[] {
// Use cache if available
if (lockedItemsCache !== null) {
return lockedItemsCache;
}
// Initialize cache if not yet done
return initializeCache();
}
/**
* Add a file or folder to the locked items list
* @param chatId The chat ID to scope the lock to
* @param path The path of the file or folder to lock
* @param isFolder Whether this is a folder lock
*/
export function addLockedItem(chatId: string, path: string, isFolder: boolean = false): void {
// Ensure cache is initialized
const lockedItems = getLockedItems();
// Create the new item
const newItem = { chatId, path, isFolder };
// Update the in-memory map directly for faster access
const chatMap = getChatMap(chatId, true)!;
chatMap.set(path, newItem);
// Remove any existing entry for this path in this chat and add the new one
const filteredItems = lockedItems.filter((item) => !(item.chatId === chatId && item.path === path));
filteredItems.push(newItem);
// Save the updated list (this will update the cache and maps)
saveLockedItems(filteredItems);
logger.info(`Added locked ${isFolder ? 'folder' : 'file'}: ${path} for chat: ${chatId}`);
}
/**
* Add a file to the locked items list (for backward compatibility)
*/
export function addLockedFile(chatId: string, filePath: string): void {
addLockedItem(chatId, filePath);
}
/**
* Add a folder to the locked items list
*/
export function addLockedFolder(chatId: string, folderPath: string): void {
addLockedItem(chatId, folderPath);
}
/**
* Remove an item from the locked items list
* @param chatId The chat ID the lock belongs to
* @param path The path of the item to unlock
*/
export function removeLockedItem(chatId: string, path: string): void {
// Ensure cache is initialized
const lockedItems = getLockedItems();
// Update the in-memory map directly for faster access
const chatMap = getChatMap(chatId);
if (chatMap) {
chatMap.delete(path);
}
// Filter out the item to remove for this specific chat
const filteredItems = lockedItems.filter((item) => !(item.chatId === chatId && item.path === path));
// Save the updated list (this will update the cache and maps)
saveLockedItems(filteredItems);
logger.info(`Removed lock for: ${path} in chat: ${chatId}`);
}
/**
* Remove a file from the locked items list (for backward compatibility)
*/
export function removeLockedFile(chatId: string, filePath: string): void {
removeLockedItem(chatId, filePath);
}
/**
* Remove a folder from the locked items list
*/
export function removeLockedFolder(chatId: string, folderPath: string): void {
removeLockedItem(chatId, folderPath);
}
/**
* Check if a path is directly locked (not considering parent folders)
* @param chatId The chat ID to check locks for
* @param path The path to check
* @returns Object with locked status, lock mode, and whether it's a folder lock
*/
export function isPathDirectlyLocked(chatId: string, path: string): { locked: boolean; isFolder?: boolean } {
// Ensure cache is initialized
getLockedItems();
// Check the in-memory map for faster lookup
const chatMap = getChatMap(chatId);
if (chatMap) {
const lockedItem = chatMap.get(path);
if (lockedItem) {
return { locked: true, isFolder: lockedItem.isFolder };
}
}
return { locked: false };
}
/**
* Check if a file is locked, either directly or by a parent folder
* @param chatId The chat ID to check locks for
* @param filePath The path of the file to check
* @returns Object with locked status, lock mode, and the path that caused the lock
*/
export function isFileLocked(chatId: string, filePath: string): { locked: boolean; lockedBy?: string } {
// Ensure cache is initialized
getLockedItems();
// Check the in-memory map for direct file lock
const chatMap = getChatMap(chatId);
if (chatMap) {
// First check if the file itself is locked
const directLock = chatMap.get(filePath);
if (directLock && !directLock.isFolder) {
return { locked: true, lockedBy: filePath };
}
}
// Then check if any parent folder is locked
return checkParentFolderLocks(chatId, filePath);
}
/**
* Check if a folder is locked
* @param chatId The chat ID to check locks for
* @param folderPath The path of the folder to check
* @returns Object with locked status and lock mode
*/
export function isFolderLocked(chatId: string, folderPath: string): { locked: boolean; lockedBy?: string } {
// Ensure cache is initialized
getLockedItems();
// Check the in-memory map for direct folder lock
const chatMap = getChatMap(chatId);
if (chatMap) {
// First check if the folder itself is locked
const directLock = chatMap.get(folderPath);
if (directLock && directLock.isFolder) {
return { locked: true, lockedBy: folderPath };
}
}
// Then check if any parent folder is locked
return checkParentFolderLocks(chatId, folderPath);
}
/**
* Helper function to check if any parent folder of a path is locked
* @param chatId The chat ID to check locks for
* @param path The path to check
* @returns Object with locked status, lock mode, and the folder that caused the lock
*/
function checkParentFolderLocks(chatId: string, path: string): { locked: boolean; lockedBy?: string } {
const chatMap = getChatMap(chatId);
if (!chatMap) {
return { locked: false };
}
// Check each parent folder
const pathParts = path.split('/');
let currentPath = '';
for (let i = 0; i < pathParts.length - 1; i++) {
currentPath = currentPath ? `${currentPath}/${pathParts[i]}` : pathParts[i];
const folderLock = chatMap.get(currentPath);
if (folderLock && folderLock.isFolder) {
return { locked: true, lockedBy: currentPath };
}
}
return { locked: false };
}
/**
* Get all locked items for a specific chat
* @param chatId The chat ID to get locks for
* @returns Array of locked items for the specified chat
*/
export function getLockedItemsForChat(chatId: string): LockedItem[] {
// Ensure cache is initialized
const allItems = getLockedItems();
// Use the chat map if available for faster filtering
const chatMap = getChatMap(chatId);
if (chatMap) {
// Convert the map values to an array
return Array.from(chatMap.values());
}
// Fallback to filtering the full list
return allItems.filter((item) => item.chatId === chatId);
}
/**
* Get all locked files for a specific chat (for backward compatibility)
*/
export function getLockedFilesForChat(chatId: string): LockedItem[] {
// Get all items for this chat
const chatItems = getLockedItemsForChat(chatId);
// Filter to only include files
return chatItems.filter((item) => !item.isFolder);
}
/**
* Get all locked folders for a specific chat
*/
export function getLockedFoldersForChat(chatId: string): LockedItem[] {
// Get all items for this chat
const chatItems = getLockedItemsForChat(chatId);
// Filter to only include folders
return chatItems.filter((item) => item.isFolder);
}
/**
* Check if a path is within a locked folder
* @param chatId The chat ID to check locks for
* @param path The path to check
* @returns Object with locked status, lock mode, and the folder that caused the lock
*/
export function isPathInLockedFolder(chatId: string, path: string): { locked: boolean; lockedBy?: string } {
// This is already optimized by using checkParentFolderLocks
return checkParentFolderLocks(chatId, path);
}
/**
* Migrate legacy locks (without chatId or isFolder) to the new format
* @param currentChatId The current chat ID to assign to legacy locks
*/
export function migrateLegacyLocks(currentChatId: string): void {
try {
// Force a fresh read from localStorage
clearCache();
// Get the items directly from localStorage
if (typeof localStorage !== 'undefined') {
const lockedItemsJson = localStorage.getItem(LOCKED_FILES_KEY);
if (lockedItemsJson) {
const lockedItems = JSON.parse(lockedItemsJson);
if (Array.isArray(lockedItems)) {
let hasLegacyItems = false;
// Check if any locks are in the old format (missing chatId or isFolder)
const updatedItems = lockedItems.map((item) => {
const needsUpdate = !item.chatId || item.isFolder === undefined;
if (needsUpdate) {
hasLegacyItems = true;
return {
...item,
chatId: item.chatId || currentChatId,
isFolder: item.isFolder !== undefined ? item.isFolder : false,
};
}
return item;
});
// Only save if we found and updated legacy items
if (hasLegacyItems) {
saveLockedItems(updatedItems);
logger.info(`Migrated ${updatedItems.length} legacy locks to chat ID: ${currentChatId}`);
}
}
}
}
} catch (error) {
logger.error('Failed to migrate legacy locks', error);
}
}
/**
* Clear the in-memory cache and force a reload from localStorage on next access
* This is useful when you suspect the cache might be out of sync with localStorage
* (e.g., after another tab has modified the locks)
*/
export function clearCache(): void {
lockedItemsCache = null;
lockedItemsMap.clear();
logger.info('Cleared locked items cache');
}
/**
* Batch operation to lock multiple items at once
* @param chatId The chat ID to scope the locks to
* @param items Array of items to lock with their paths, modes, and folder flags
*/
export function batchLockItems(chatId: string, items: Array<{ path: string; isFolder: boolean }>): void {
if (items.length === 0) {
return;
}
// Ensure cache is initialized
const lockedItems = getLockedItems();
// Create a set of paths to lock for faster lookups
const pathsToLock = new Set(items.map((item) => item.path));
// Filter out existing items for these paths
const filteredItems = lockedItems.filter((item) => !(item.chatId === chatId && pathsToLock.has(item.path)));
// Add all the new items
const newItems = items.map((item) => ({
chatId,
path: item.path,
isFolder: item.isFolder,
}));
// Combine and save
const updatedItems = [...filteredItems, ...newItems];
saveLockedItems(updatedItems);
logger.info(`Batch locked ${items.length} items for chat: ${chatId}`);
}
/**
* Batch operation to unlock multiple items at once
* @param chatId The chat ID the locks belong to
* @param paths Array of paths to unlock
*/
export function batchUnlockItems(chatId: string, paths: string[]): void {
if (paths.length === 0) {
return;
}
// Ensure cache is initialized
const lockedItems = getLockedItems();
// Create a set of paths to unlock for faster lookups
const pathsToUnlock = new Set(paths);
// Update the in-memory maps
const chatMap = getChatMap(chatId);
if (chatMap) {
paths.forEach((path) => chatMap.delete(path));
}
// Filter out the items to remove
const filteredItems = lockedItems.filter((item) => !(item.chatId === chatId && pathsToUnlock.has(item.path)));
// Save the updated list
saveLockedItems(filteredItems);
logger.info(`Batch unlocked ${paths.length} items for chat: ${chatId}`);
}
/**
* Add event listener for storage events to sync cache across tabs
* This ensures that if locks are modified in another tab, the changes are reflected here
*/
if (typeof window !== 'undefined') {
window.addEventListener('storage', (event) => {
if (event.key === LOCKED_FILES_KEY) {
logger.info('Detected localStorage change for locked items, refreshing cache');
clearCache();
}
});
}

7
app/lib/persistence/types.ts Normal file
View File

@@ -0,0 +1,7 @@
import type { FileMap } from '~/lib/stores/files';
export interface Snapshot {
chatIndex: string;
files: FileMap;
summary?: string;
}

235
app/lib/persistence/useChatHistory.ts
View File

@@ -1,7 +1,7 @@
import { useLoaderData, useNavigate, useSearchParams } from '@remix-run/react';
import { useState, useEffect } from 'react';
import { useState, useEffect, useCallback } from 'react';
import { atom } from 'nanostores';
import type { Message } from 'ai';
import { generateId, type JSONValue, type Message } from 'ai';
import { toast } from 'react-toastify';
import { workbenchStore } from '~/lib/stores/workbench';
import { logStore } from '~/lib/stores/logs'; // Import logStore
@@ -13,8 +13,15 @@ import {
setMessages,
duplicateChat,
createChatFromMessages,
getSnapshot,
setSnapshot,
type IChatMetadata,
} from './db';
import type { FileMap } from '~/lib/stores/files';
import type { Snapshot } from './types';
import { webcontainer } from '~/lib/webcontainer';
import { detectProjectCommands, createCommandActionsString } from '~/utils/projectCommands';
import type { ContextAnnotation } from '~/types/context';
export interface ChatHistoryItem {
id: string;
@@ -37,6 +44,7 @@ export function useChatHistory() {
const { id: mixedId } = useLoaderData<{ id?: string }>();
const [searchParams] = useSearchParams();
const [archivedMessages, setArchivedMessages] = useState<Message[]>([]);
const [initialMessages, setInitialMessages] = useState<Message[]>([]);
const [ready, setReady] = useState<boolean>(false);
const [urlId, setUrlId] = useState<string | undefined>();
@@ -55,15 +63,118 @@ export function useChatHistory() {
}
if (mixedId) {
getMessages(db, mixedId)
.then((storedMessages) => {
Promise.all([
getMessages(db, mixedId),
getSnapshot(db, mixedId), // Fetch snapshot from DB
])
.then(async ([storedMessages, snapshot]) => {
if (storedMessages && storedMessages.messages.length > 0) {
/*
* const snapshotStr = localStorage.getItem(`snapshot:${mixedId}`); // Remove localStorage usage
* const snapshot: Snapshot = snapshotStr ? JSON.parse(snapshotStr) : { chatIndex: 0, files: {} }; // Use snapshot from DB
*/
const validSnapshot = snapshot || { chatIndex: '', files: {} }; // Ensure snapshot is not undefined
const summary = validSnapshot.summary;
const rewindId = searchParams.get('rewindTo');
const filteredMessages = rewindId
? storedMessages.messages.slice(0, storedMessages.messages.findIndex((m) => m.id === rewindId) + 1)
: storedMessages.messages;
let startingIdx = -1;
const endingIdx = rewindId
? storedMessages.messages.findIndex((m) => m.id === rewindId) + 1
: storedMessages.messages.length;
const snapshotIndex = storedMessages.messages.findIndex((m) => m.id === validSnapshot.chatIndex);
if (snapshotIndex >= 0 && snapshotIndex < endingIdx) {
startingIdx = snapshotIndex;
}
if (snapshotIndex > 0 && storedMessages.messages[snapshotIndex].id == rewindId) {
startingIdx = -1;
}
let filteredMessages = storedMessages.messages.slice(startingIdx + 1, endingIdx);
let archivedMessages: Message[] = [];
if (startingIdx >= 0) {
archivedMessages = storedMessages.messages.slice(0, startingIdx + 1);
}
setArchivedMessages(archivedMessages);
if (startingIdx > 0) {
const files = Object.entries(validSnapshot?.files || {})
.map(([key, value]) => {
if (value?.type !== 'file') {
return null;
}
return {
content: value.content,
path: key,
};
})
.filter((x): x is { content: string; path: string } => !!x); // Type assertion
const projectCommands = await detectProjectCommands(files);
// Call the modified function to get only the command actions string
const commandActionsString = createCommandActionsString(projectCommands);
filteredMessages = [
{
id: generateId(),
role: 'user',
content: `Restore project from snapshot`, // Removed newline
annotations: ['no-store', 'hidden'],
},
{
id: storedMessages.messages[snapshotIndex].id,
role: 'assistant',
// Combine followup message and the artifact with files and command actions
content: `Bolt Restored your chat from a snapshot. You can revert this message to load the full chat history.
<boltArtifact id="restored-project-setup" title="Restored Project & Setup" type="bundled">
${Object.entries(snapshot?.files || {})
.map(([key, value]) => {
if (value?.type === 'file') {
return `
<boltAction type="file" filePath="${key}">
${value.content}
</boltAction>
`;
} else {
return ``;
}
})
.join('\n')}
${commandActionsString}
</boltArtifact>
`, // Added commandActionsString, followupMessage, updated id and title
annotations: [
'no-store',
...(summary
? [
{
chatId: storedMessages.messages[snapshotIndex].id,
type: 'chatSummary',
summary,
} satisfies ContextAnnotation,
]
: []),
],
},
// Remove the separate user and assistant messages for commands
/*
*...(commands !== null // This block is no longer needed
* ? [ ... ]
* : []),
*/
...filteredMessages,
];
restoreSnapshot(mixedId);
}
setInitialMessages(filteredMessages);
setUrlId(storedMessages.urlId);
description.set(storedMessages.description);
chatId.set(storedMessages.id);
@@ -75,10 +186,73 @@ export function useChatHistory() {
setReady(true);
})
.catch((error) => {
logStore.logError('Failed to load chat messages', error);
toast.error(error.message);
console.error(error);
logStore.logError('Failed to load chat messages or snapshot', error); // Updated error message
toast.error('Failed to load chat: ' + error.message); // More specific error
});
} else {
// Handle case where there is no mixedId (e.g., new chat)
setReady(true);
}
}, [mixedId, db, navigate, searchParams]); // Added db, navigate, searchParams dependencies
const takeSnapshot = useCallback(
async (chatIdx: string, files: FileMap, _chatId?: string | undefined, chatSummary?: string) => {
const id = _chatId || chatId.get();
if (!id || !db) {
return;
}
const snapshot: Snapshot = {
chatIndex: chatIdx,
files,
summary: chatSummary,
};
// localStorage.setItem(`snapshot:${id}`, JSON.stringify(snapshot)); // Remove localStorage usage
try {
await setSnapshot(db, id, snapshot);
} catch (error) {
console.error('Failed to save snapshot:', error);
toast.error('Failed to save chat snapshot.');
}
},
[db],
);
const restoreSnapshot = useCallback(async (id: string, snapshot?: Snapshot) => {
// const snapshotStr = localStorage.getItem(`snapshot:${id}`); // Remove localStorage usage
const container = await webcontainer;
const validSnapshot = snapshot || { chatIndex: '', files: {} };
if (!validSnapshot?.files) {
return;
}
Object.entries(validSnapshot.files).forEach(async ([key, value]) => {
if (key.startsWith(container.workdir)) {
key = key.replace(container.workdir, '');
}
if (value?.type === 'folder') {
await container.fs.mkdir(key, { recursive: true });
}
});
Object.entries(validSnapshot.files).forEach(async ([key, value]) => {
if (value?.type === 'file') {
if (key.startsWith(container.workdir)) {
key = key.replace(container.workdir, '');
}
await container.fs.writeFile(key, value.content, { encoding: value.isBinary ? undefined : 'utf8' });
} else {
}
});
// workbenchStore.files.setKey(snapshot?.files)
}, []);
return {
@@ -105,18 +279,39 @@ export function useChatHistory() {
}
const { firstArtifact } = workbenchStore;
messages = messages.filter((m) => !m.annotations?.includes('no-store'));
let _urlId = urlId;
if (!urlId && firstArtifact?.id) {
const urlId = await getUrlId(db, firstArtifact.id);
_urlId = urlId;
navigateChat(urlId);
setUrlId(urlId);
}
let chatSummary: string | undefined = undefined;
const lastMessage = messages[messages.length - 1];
if (lastMessage.role === 'assistant') {
const annotations = lastMessage.annotations as JSONValue[];
const filteredAnnotations = (annotations?.filter(
(annotation: JSONValue) =>
annotation && typeof annotation === 'object' && Object.keys(annotation).includes('type'),
) || []) as { type: string; value: any } & { [key: string]: any }[];
if (filteredAnnotations.find((annotation) => annotation.type === 'chatSummary')) {
chatSummary = filteredAnnotations.find((annotation) => annotation.type === 'chatSummary')?.summary;
}
}
takeSnapshot(messages[messages.length - 1].id, workbenchStore.files.get(), _urlId, chatSummary);
if (!description.get() && firstArtifact?.title) {
description.set(firstArtifact?.title);
}
// Ensure chatId.get() is used here as well
if (initialMessages.length === 0 && !chatId.get()) {
const nextId = await getNextId(db);
@@ -127,7 +322,25 @@ export function useChatHistory() {
}
}
await setMessages(db, chatId.get() as string, messages, urlId, description.get(), undefined, chatMetadata.get());
// Ensure chatId.get() is used for the final setMessages call
const finalChatId = chatId.get();
if (!finalChatId) {
console.error('Cannot save messages, chat ID is not set.');
toast.error('Failed to save chat messages: Chat ID missing.');
return;
}
await setMessages(
db,
finalChatId, // Use the potentially updated chatId
[...archivedMessages, ...messages],
urlId,
description.get(),
undefined,
chatMetadata.get(),
);
},
duplicateCurrentChat: async (listItemId: string) => {
if (!db || (!mixedId && !listItemId)) {

Some files were not shown because too many files have changed in this diff Show More