n/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy.git synced 2025-06-18 01:49:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1651 from xKevIsDev/improvements

Browse Source 
feat: add expo app creation, enhance ui, and refactor code
This commit is contained in:
KevIsDev 2025-04-30 12:48:15 +01:00 committed by GitHub
commit 837e64a605
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
64 changed files with 3248 additions and 910 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -413,7 +413,7 @@ 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/70 dark:bg-black/80 backdrop-blur-sm"

2
app/components/@settings/tabs/connections/ConnectionDiagnostics.tsx
View File

@ -313,7 +313,7 @@ export default function ConnectionDiagnostics() {
{/* 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-si:netlify text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent w-4 h-4" />
<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>

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

@ -688,7 +688,7 @@ export default function GitHubConnection() {
onClick={() => window.open('https://github.com/dashboard', '_blank', 'noopener,noreferrer')}
className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:text-bolt-elements-textPrimary transition-colors"
>
<div className="i-ph:layout-dashboard w-4 h-4" />
<div className="i-ph:layout w-4 h-4" />
Dashboard
</Button>
<Button
@ -912,7 +912,7 @@ export default function GitHubConnection() {
<div className="space-y-3">
<div className="flex items-start justify-between">
<div className="flex items-center gap-2">
<div className="i-ph:git-repository w-4 h-4 text-bolt-elements-icon-info dark:text-bolt-elements-icon-info" />
<div className="i-ph:git-branch w-4 h-4 text-bolt-elements-icon-info dark:text-bolt-elements-icon-info" />
<h5 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-bolt-elements-item-contentAccent transition-colors">
{repo.name}
</h5>

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

@ -431,7 +431,7 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
>
<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" />
<div className="i-ph:git-branch 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>

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

@ -1058,7 +1058,7 @@ function RepositoryCard({ repo, onSelect }: { repo: GitHubRepoInfo; onSelect: ()
<div className="p-4 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 transition-colors">
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2">
<span className="i-ph:git-repository text-bolt-elements-textTertiary" />
<span className="i-ph:git-branch text-bolt-elements-textTertiary" />
<h3 className="font-medium text-bolt-elements-textPrimary dark:text-white">{repo.name}</h3>
</div>
<button

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

@ -355,7 +355,7 @@ export function DataTab() {
<CardHeader>
<div className="flex items-center mb-2">
<motion.div className="text-accent-500 mr-2" whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
<div className="i-ph-filter-duotone w-5 h-5" />
<div className="i-ph:list-checks w-5 h-5" />
</motion.div>
<CardTitle className="text-lg group-hover:text-bolt-elements-item-contentAccent transition-colors">
Export Selected Chats

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

@ -1142,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,
},
{
@ -1652,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>
@ -1662,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>
@ -1917,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>
@ -1952,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,
},
{

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

@ -54,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>
</>
);
});

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

@ -4,10 +4,14 @@ 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 }[];
@ -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>

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

@ -39,6 +39,10 @@ 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;
@ -84,8 +88,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
(
{
textareaRef,
messageRef,
scrollRef,
showChat = true,
chatStarted = false,
isStreaming = false,
@ -130,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(
@ -324,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">
@ -336,50 +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>
{deployAlert && (
<DeployChatAlert
alert={deployAlert}
clearAlert={() => clearDeployAlert?.()}
postMessage={(message: string | undefined) => {
sendMessage?.({} as any, message);
clearSupabaseAlert?.();
<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;
}}
/>
)}
{supabaseAlert && (
<SupabaseChatAlert
alert={supabaseAlert}
clearAlert={() => clearSupabaseAlert?.()}
postMessage={(message) => {
sendMessage?.({} as any, message);
clearSupabaseAlert?.();
}}
/>
)}
</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}
@ -391,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',
/*
* {
@ -622,28 +636,31 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
</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>
@ -662,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>
)
);
}

6
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';
@ -483,8 +483,6 @@ export const ChatImpl = memo(
[],
);
const [messageRef, scrollRef] = useSnapScroll();
useEffect(() => {
const storedApiKeys = Cookies.get('apiKeys');
@ -522,8 +520,6 @@ export const ChatImpl = memo(
provider={provider}
setProvider={handleProviderChange}
providerList={activeProviders}
messageRef={messageRef}
scrollRef={scrollRef}
handleInputChange={(e) => {
onTextareaChange(e);
debouncedCachePrompt(e);

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>

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

@ -156,13 +156,13 @@ ${escapeBoltTags(file.content)}
<Button
onClick={() => setIsDialogOpen(true)}
title="Clone a Git Repo"
variant="outline"
variant="default"
size="lg"
className={classNames(
'gap-2 bg-bolt-elements-background-depth-1',
'text-bolt-elements-textPrimary',
'hover:bg-bolt-elements-background-depth-2',
'border-[rgba(0,0,0,0.08)] dark:border-[rgba(255,255,255,0.08)]',
'border border-bolt-elements-borderColor',
'h-10 px-4 py-2 min-w-[120px] justify-center',
'transition-all duration-200 ease-in-out',
className,

4
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-bolt-elements-background-depth-1',
'text-bolt-elements-textPrimary',
'hover:bg-bolt-elements-background-depth-2',
'border-[rgba(0,0,0,0.08)] dark:border-[rgba(255,255,255,0.08)]',
'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>

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} />
))}

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

@ -99,7 +99,7 @@ export function SupabaseChatAlert({ alert, clearAlert, postMessage }: Props) {
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-bolt-elements-borderColor bg-bolt-elements-background-depth-2"
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">

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

@ -296,7 +296,7 @@ export function SupabaseConnection() {
<DialogButton type="secondary">Close</DialogButton>
</DialogClose>
<DialogButton type="danger" onClick={handleDisconnect}>
<div className="i-ph:plug-x w-4 h-4" />
<div className="i-ph:plugs w-4 h-4" />
Disconnect
</DialogButton>
</div>

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) => (

4
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-bolt-elements-background-depth-1',
'text-bolt-elements-textPrimary',
'hover:bg-bolt-elements-background-depth-2',
'border-[rgba(0,0,0,0.08)] dark:border-[rgba(255,255,255,0.08)]',
'border border-bolt-elements-borderColor',
'h-10 px-4 py-2 min-w-[120px] justify-center',
'transition-all duration-200 ease-in-out',
)}

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

@ -116,7 +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-white dark:bg-gray-950 rounded-lg shadow-xl border border-bolt-elements-borderColor 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"

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,
},

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

@ -114,7 +114,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>
);
};

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

@ -143,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': {

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>

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

@ -4,6 +4,8 @@ import { IconButton } from '~/components/ui/IconButton';
import { workbenchStore } from '~/lib/stores/workbench';
import { PortDropdown } from './PortDropdown';
import { ScreenshotSelector } from './ScreenshotSelector';
import { expoUrlAtom } from '~/lib/stores/qrCodeStore';
import { ExpoQrModal } from '~/components/workbench/ExpoQrModal';
type ResizeSide = 'left' | 'right' | null;
@ -53,12 +55,10 @@ export const Preview = memo(() => {
const [activePreviewIndex, setActivePreviewIndex] = useState(0);
const [isPortDropdownOpen, setIsPortDropdownOpen] = useState(false);
const [isFullscreen, setIsFullscreen] = useState(false);
const [isPreviewOnly, setIsPreviewOnly] = useState(false);
const hasSelectedPreview = useRef(false);
const previews = useStore(workbenchStore.previews);
const activePreview = previews[activePreviewIndex];
const [url, setUrl] = useState('');
const [displayPath, setDisplayPath] = useState('/');
const [iframeUrl, setIframeUrl] = useState<string | undefined>();
const [isSelectionMode, setIsSelectionMode] = useState(false);
@ -86,39 +86,22 @@ export const Preview = memo(() => {
const [isLandscape, setIsLandscape] = useState(false);
const [showDeviceFrame, setShowDeviceFrame] = useState(true);
const [showDeviceFrameInPreview, setShowDeviceFrameInPreview] = useState(false);
const expoUrl = useStore(expoUrlAtom);
const [isExpoQrModalOpen, setIsExpoQrModalOpen] = useState(false);
useEffect(() => {
if (!activePreview) {
setUrl('');
setIframeUrl(undefined);
setDisplayPath('/');
return;
}
const { baseUrl } = activePreview;
setUrl(baseUrl);
setIframeUrl(baseUrl);
setDisplayPath('/');
}, [activePreview]);
const validateUrl = useCallback(
(value: string) => {
if (!activePreview) {
return false;
}
const { baseUrl } = activePreview;
if (value === baseUrl) {
return true;
} else if (value.startsWith(baseUrl)) {
return ['/', '?', '#'].includes(value.charAt(baseUrl.length));
}
return false;
},
[activePreview],
);
const findMinPortIndex = useCallback(
(minIndex: number, preview: { port: number }, index: number, array: { port: number }[]) => {
return preview.port < array[minIndex].port ? index : minIndex;
@ -565,6 +548,12 @@ export const Preview = memo(() => {
}
};
const openInNewTab = () => {
if (activePreview?.baseUrl) {
window.open(activePreview?.baseUrl, '_blank');
}
};
// Function to get the correct frame padding based on orientation
const getFramePadding = useCallback(() => {
if (!selectedWindowSize) {
@ -630,10 +619,7 @@ export const Preview = memo(() => {
}, [showDeviceFrameInPreview]);
return (
<div
ref={containerRef}
className={`w-full h-full flex flex-col relative ${isPreviewOnly ? 'fixed inset-0 z-50 bg-white' : ''}`}
>
<div ref={containerRef} className={`w-full h-full flex flex-col relative`}>
{isPortDropdownOpen && (
<div className="z-iframe-overlay w-full h-full absolute" onClick={() => setIsPortDropdownOpen(false)} />
)}
@ -647,50 +633,60 @@ export const Preview = memo(() => {
/>
</div>
<div className="flex-grow flex items-center gap-1 bg-bolt-elements-preview-addressBar-background border border-bolt-elements-borderColor text-bolt-elements-preview-addressBar-text rounded-full px-3 py-1 text-sm hover:bg-bolt-elements-preview-addressBar-backgroundHover hover:focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within-border-bolt-elements-borderColorActive focus-within:text-bolt-elements-preview-addressBar-textActive">
<div className="flex-grow flex items-center gap-1 bg-bolt-elements-preview-addressBar-background border border-bolt-elements-borderColor text-bolt-elements-preview-addressBar-text rounded-full px-1 py-1 text-sm hover:bg-bolt-elements-preview-addressBar-backgroundHover hover:focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within-border-bolt-elements-borderColorActive focus-within:text-bolt-elements-preview-addressBar-textActive">
<PortDropdown
activePreviewIndex={activePreviewIndex}
setActivePreviewIndex={setActivePreviewIndex}
isDropdownOpen={isPortDropdownOpen}
setHasSelectedPreview={(value) => (hasSelectedPreview.current = value)}
setIsDropdownOpen={setIsPortDropdownOpen}
previews={previews}
/>
<input
title="URL"
title="URL Path"
ref={inputRef}
className="w-full bg-transparent outline-none"
type="text"
value={url}
value={displayPath}
onChange={(event) => {
setUrl(event.target.value);
setDisplayPath(event.target.value);
}}
onKeyDown={(event) => {
if (event.key === 'Enter' && validateUrl(url)) {
setIframeUrl(url);
if (event.key === 'Enter' && activePreview) {
let targetPath = displayPath.trim();
if (!targetPath.startsWith('/')) {
targetPath = '/' + targetPath;
}
const fullUrl = activePreview.baseUrl + targetPath;
setIframeUrl(fullUrl);
setDisplayPath(targetPath);
if (inputRef.current) {
inputRef.current.blur();
}
}
}}
disabled={!activePreview}
/>
</div>
<div className="flex items-center gap-2">
{previews.length > 1 && (
<PortDropdown
activePreviewIndex={activePreviewIndex}
setActivePreviewIndex={setActivePreviewIndex}
isDropdownOpen={isPortDropdownOpen}
setHasSelectedPreview={(value) => (hasSelectedPreview.current = value)}
setIsDropdownOpen={setIsPortDropdownOpen}
previews={previews}
/>
)}
<IconButton
icon="i-ph:devices"
onClick={toggleDeviceMode}
title={isDeviceModeOn ? 'Switch to Responsive Mode' : 'Switch to Device Mode'}
/>
{expoUrl && <IconButton icon="i-ph:qr-code" onClick={() => setIsExpoQrModalOpen(true)} title="Show QR" />}
<ExpoQrModal open={isExpoQrModalOpen} onClose={() => setIsExpoQrModalOpen(false)} />
{isDeviceModeOn && (
<>
<IconButton
icon="i-ph:rotate-right"
icon="i-ph:device-rotate"
onClick={() => setIsLandscape(!isLandscape)}
title={isLandscape ? 'Switch to Portrait' : 'Switch to Landscape'}
/>
@ -702,60 +698,17 @@ export const Preview = memo(() => {
</>
)}
<IconButton
icon="i-ph:layout-light"
onClick={() => setIsPreviewOnly(!isPreviewOnly)}
title={isPreviewOnly ? 'Show Full Interface' : 'Show Preview Only'}
/>
<IconButton
icon={isFullscreen ? 'i-ph:arrows-in' : 'i-ph:arrows-out'}
onClick={toggleFullscreen}
title={isFullscreen ? 'Exit Full Screen' : 'Full Screen'}
/>
{/* Simple preview button */}
<IconButton
icon="i-ph:browser"
onClick={() => {
if (!activePreview?.baseUrl) {
console.warn('[Preview] No active preview available');
return;
}
const match = activePreview.baseUrl.match(
/^https?:\/\/([^.]+)\.local-credentialless\.webcontainer-api\.io/,
);
if (!match) {
console.warn('[Preview] Invalid WebContainer URL:', activePreview.baseUrl);
return;
}
const previewId = match[1];
const previewUrl = `/webcontainer/preview/${previewId}`;
// Open in a new window with simple parameters
window.open(
previewUrl,
`preview-${previewId}`,
'width=1280,height=720,menubar=no,toolbar=no,location=no,status=no,resizable=yes',
);
}}
title="Open Preview in New Window"
/>
<div className="flex items-center relative">
<IconButton
icon="i-ph:arrow-square-out"
onClick={() => openInNewWindow(selectedWindowSize)}
title={`Open Preview in ${selectedWindowSize.name} Window`}
/>
<IconButton
icon="i-ph:caret-down"
icon="i-ph:list"
onClick={() => setIsWindowSizeDropdownOpen(!isWindowSizeDropdownOpen)}
className="ml-1"
title="Select Window Size"
title="New Window Options"
/>
{isWindowSizeDropdownOpen && (
@ -764,11 +717,51 @@ export const Preview = memo(() => {
<div className="absolute right-0 top-full mt-2 z-50 min-w-[240px] max-h-[400px] overflow-y-auto bg-white dark:bg-black rounded-xl shadow-2xl border border-[#E5E7EB] dark:border-[rgba(255,255,255,0.1)] overflow-hidden">
<div className="p-3 border-b border-[#E5E7EB] dark:border-[rgba(255,255,255,0.1)]">
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium text-[#111827] dark:text-gray-300">Device Options</span>
<span className="text-sm font-medium text-[#111827] dark:text-gray-300">Window Options</span>
</div>
<div className="flex flex-col gap-2">
<button
className={`flex w-full justify-between items-center text-start bg-transparent text-xs text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary`}
onClick={() => {
openInNewTab();
}}
>
<span>Open in new tab</span>
<div className="i-ph:arrow-square-out h-5 w-4" />
</button>
<button
className={`flex w-full justify-between items-center text-start bg-transparent text-xs text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary`}
onClick={() => {
if (!activePreview?.baseUrl) {
console.warn('[Preview] No active preview available');
return;
}
const match = activePreview.baseUrl.match(
/^https?:\/\/([^.]+)\.local-credentialless\.webcontainer-api\.io/,
);
if (!match) {
console.warn('[Preview] Invalid WebContainer URL:', activePreview.baseUrl);
return;
}
const previewId = match[1];
const previewUrl = `/webcontainer/preview/${previewId}`;
// Open in a new window with simple parameters
window.open(
previewUrl,
`preview-${previewId}`,
'width=1280,height=720,menubar=no,toolbar=no,location=no,status=no,resizable=yes',
);
}}
>
<span>Open in new window</span>
<div className="i-ph:browser h-5 w-4" />
</button>
<div className="flex items-center justify-between">
<span className="text-xs text-[#6B7280] dark:text-gray-400">Show Device Frame</span>
<span className="text-xs text-bolt-elements-textTertiary">Show Device Frame</span>
<button
className={`w-10 h-5 rounded-full transition-colors duration-200 ${
showDeviceFrame ? 'bg-[#6D28D9]' : 'bg-gray-300 dark:bg-gray-700'
@ -786,7 +779,7 @@ export const Preview = memo(() => {
</button>
</div>
<div className="flex items-center justify-between">
<span className="text-xs text-[#6B7280] dark:text-gray-400">Landscape Mode</span>
<span className="text-xs text-bolt-elements-textTertiary">Landscape Mode</span>
<button
className={`w-10 h-5 rounded-full transition-colors duration-200 ${
isLandscape ? 'bg-[#6D28D9]' : 'bg-gray-300 dark:bg-gray-700'
@ -959,7 +952,7 @@ export const Preview = memo(() => {
className="border-none w-full h-full bg-bolt-elements-background-depth-1"
src={iframeUrl}
sandbox="allow-scripts allow-forms allow-popups allow-modals allow-storage-access-by-user-activation allow-same-origin"
allow="cross-origin-isolated"
allow="geolocation; ch-ua-full-version-list; cross-origin-isolated; screen-wake-lock; publickey-credentials-get; shared-storage-select-url; ch-ua-arch; bluetooth; compute-pressure; ch-prefers-reduced-transparency; deferred-fetch; usb; ch-save-data; publickey-credentials-create; shared-storage; deferred-fetch-minimal; run-ad-auction; ch-ua-form-factors; ch-downlink; otp-credentials; payment; ch-ua; ch-ua-model; ch-ect; autoplay; camera; private-state-token-issuance; accelerometer; ch-ua-platform-version; idle-detection; private-aggregation; interest-cohort; ch-viewport-height; local-fonts; ch-ua-platform; midi; ch-ua-full-version; xr-spatial-tracking; clipboard-read; gamepad; display-capture; keyboard-map; join-ad-interest-group; ch-width; ch-prefers-reduced-motion; browsing-topics; encrypted-media; gyroscope; serial; ch-rtt; ch-ua-mobile; window-management; unload; ch-dpr; ch-prefers-color-scheme; ch-ua-wow64; attribution-reporting; fullscreen; identity-credentials-get; private-state-token-redemption; hid; ch-ua-bitness; storage-access; sync-xhr; ch-device-memory; ch-viewport-width; picture-in-picture; magnetometer; clipboard-write; microphone"
/>
)}
<ScreenshotSelector

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

@ -25,6 +25,7 @@ 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;
@ -323,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(() => {

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) => {

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

@ -8,7 +8,6 @@ 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[];
@ -43,7 +42,6 @@ export async function streamText(props: {
env: serverEnv,
options,
apiKeys,
files,
providerSettings,
promptId,
contextOptimization,
@ -64,6 +62,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 };
}
@ -113,15 +120,10 @@ export async function streamText(props: {
},
}) ?? 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:
@ -153,126 +155,18 @@ ${props.summary}
logger.info(`Sending llm call to ${provider.name} with model ${modelDetails.name}`);
// Store original messages for reference
const originalMessages = [...messages];
const hasMultimodalContent = originalMessages.some((msg) => Array.isArray(msg.content));
// console.log(systemPrompt, processedMessages);
try {
if (hasMultimodalContent) {
/*
* For multimodal content, we need to preserve the original array structure
* but make sure the roles are valid and content items are properly formatted
*/
const multimodalMessages = originalMessages.map((msg) => ({
role: msg.role === 'system' || msg.role === 'user' || msg.role === 'assistant' ? msg.role : 'user',
content: Array.isArray(msg.content)
? msg.content.map((item) => {
// Ensure each content item has the correct format
if (typeof item === 'string') {
return { type: 'text', text: item };
}
if (item && typeof item === 'object') {
if (item.type === 'image' && item.image) {
return { type: 'image', image: item.image };
}
if (item.type === 'text') {
return { type: 'text', text: item.text || '' };
}
}
// Default fallback for unknown formats
return { type: 'text', text: String(item || '') };
})
: [{ type: 'text', text: typeof msg.content === 'string' ? msg.content : String(msg.content || '') }],
}));
return await _streamText({
model: provider.getModelInstance({
model: modelDetails.name,
serverEnv,
apiKeys,
providerSettings,
}),
system: systemPrompt,
maxTokens: dynamicMaxTokens,
messages: multimodalMessages as any,
...options,
});
} else {
// For non-multimodal content, we use the standard approach
const normalizedTextMessages = processedMessages.map((msg) => ({
role: msg.role === 'system' || msg.role === 'user' || msg.role === 'assistant' ? msg.role : 'user',
content: typeof msg.content === 'string' ? msg.content : String(msg.content || ''),
}));
return await _streamText({
model: provider.getModelInstance({
model: modelDetails.name,
serverEnv,
apiKeys,
providerSettings,
}),
system: systemPrompt,
maxTokens: dynamicMaxTokens,
messages: convertToCoreMessages(normalizedTextMessages),
...options,
});
}
} catch (error: any) {
// Special handling for format errors
if (error.message && error.message.includes('messages must be an array of CoreMessage or UIMessage')) {
logger.warn('Message format error detected, attempting recovery with explicit formatting...');
// Create properly formatted messages for all cases as a last resort
const fallbackMessages = processedMessages.map((msg) => {
// Determine text content with careful type handling
let textContent = '';
if (typeof msg.content === 'string') {
textContent = msg.content;
} else if (Array.isArray(msg.content)) {
// Handle array content safely
const contentArray = msg.content as any[];
textContent = contentArray
.map((contentItem) =>
typeof contentItem === 'string'
? contentItem
: contentItem?.text || contentItem?.image || String(contentItem || ''),
)
.join(' ');
} else {
textContent = String(msg.content || '');
}
return {
role: msg.role === 'system' || msg.role === 'user' || msg.role === 'assistant' ? msg.role : 'user',
content: [
{
type: 'text',
text: textContent,
},
],
};
});
// Try one more time with the fallback format
return await _streamText({
model: provider.getModelInstance({
model: modelDetails.name,
serverEnv,
apiKeys,
providerSettings,
}),
system: systemPrompt,
maxTokens: dynamicMaxTokens,
messages: fallbackMessages as any,
...options,
});
}
// If it's not a format error, re-throw the original error
throw error;
}
return await _streamText({
model: provider.getModelInstance({
model: modelDetails.name,
serverEnv,
apiKeys,
providerSettings,
}),
system: systemPrompt,
maxTokens: dynamicMaxTokens,
messages: convertToCoreMessages(processedMessages as any),
...options,
});
}

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

@ -1,5 +1,6 @@
import { getSystemPrompt } from './prompts/prompts';
import optimized from './prompts/optimized';
import { getFineTunedPrompt } from './prompts/new-prompt';
export interface PromptOptions {
cwd: string;
@ -29,6 +30,11 @@ export class PromptLibrary {
description: 'This is the battle tested default system Prompt',
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)',
description: 'an Experimental version of the prompt for lower token usage',

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.
`;

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

@ -363,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.
`;
};

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

@ -38,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
@ -338,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.
@ -350,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:
@ -373,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';

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)!;
}

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 },
];

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);
}
};
});
}

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

@ -13,12 +13,14 @@ 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 { createCommandsMessage, detectProjectCommands } from '~/utils/projectCommands';
import { detectProjectCommands, createCommandActionsString } from '~/utils/projectCommands';
import type { ContextAnnotation } from '~/types/context';
export interface ChatHistoryItem {
@ -61,19 +63,25 @@ export function useChatHistory() {
}
if (mixedId) {
getMessages(db, mixedId)
.then(async (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}`);
const snapshot: Snapshot = snapshotStr ? JSON.parse(snapshotStr) : { chatIndex: 0, files: {} };
const summary = snapshot.summary;
/*
* 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');
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 === snapshot.chatIndex);
const snapshotIndex = storedMessages.messages.findIndex((m) => m.id === validSnapshot.chatIndex);
if (snapshotIndex >= 0 && snapshotIndex < endingIdx) {
startingIdx = snapshotIndex;
@ -93,7 +101,7 @@ export function useChatHistory() {
setArchivedMessages(archivedMessages);
if (startingIdx > 0) {
const files = Object.entries(snapshot?.files || {})
const files = Object.entries(validSnapshot?.files || {})
.map(([key, value]) => {
if (value?.type !== 'file') {
return null;
@ -104,25 +112,27 @@ export function useChatHistory() {
path: key,
};
})
.filter((x) => !!x);
.filter((x): x is { content: string; path: string } => !!x); // Type assertion
const projectCommands = await detectProjectCommands(files);
const commands = createCommandsMessage(projectCommands);
// 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
`,
content: `Restore project from snapshot`, // Removed newline
annotations: ['no-store', 'hidden'],
},
{
id: storedMessages.messages[snapshotIndex].id,
role: 'assistant',
content: ` 📦 Chat Restored from snapshot, You can revert this message to load the full chat history
<boltArtifact id="imported-files" title="Project Files Snapshot" type="bundled">
// 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 || {})
.filter((x) => !x[0].endsWith('lock.json'))
.map(([key, value]) => {
if (value?.type === 'file') {
return `
@ -135,8 +145,9 @@ ${value.content}
}
})
.join('\n')}
${commandActionsString}
</boltArtifact>
`,
`, // Added commandActionsString, followupMessage, updated id and title
annotations: [
'no-store',
...(summary
@ -150,33 +161,13 @@ ${value.content}
: []),
],
},
...(commands !== null
? [
{
id: `${storedMessages.messages[snapshotIndex].id}-2`,
role: 'user' as const,
content: `setup project`,
annotations: ['no-store', 'hidden'],
},
{
...commands,
id: `${storedMessages.messages[snapshotIndex].id}-3`,
annotations: [
'no-store',
...(commands.annotations || []),
...(summary
? [
{
chatId: `${storedMessages.messages[snapshotIndex].id}-3`,
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);
@ -197,17 +188,20 @@ ${value.content}
.catch((error) => {
console.error(error);
logStore.logError('Failed to load chat messages', error);
toast.error(error.message);
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]);
}, [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;
const id = _chatId || chatId.get();
if (!id) {
if (!id || !db) {
return;
}
@ -216,23 +210,29 @@ ${value.content}
files,
summary: chatSummary,
};
localStorage.setItem(`snapshot:${id}`, JSON.stringify(snapshot));
// 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.');
}
},
[chatId],
[db],
);
const restoreSnapshot = useCallback(async (id: string) => {
const snapshotStr = localStorage.getItem(`snapshot:${id}`);
const restoreSnapshot = useCallback(async (id: string, snapshot?: Snapshot) => {
// const snapshotStr = localStorage.getItem(`snapshot:${id}`); // Remove localStorage usage
const container = await webcontainer;
// if (snapshotStr)setSnapshot(JSON.parse(snapshotStr));
const snapshot: Snapshot = snapshotStr ? JSON.parse(snapshotStr) : { chatIndex: 0, files: {} };
const validSnapshot = snapshot || { chatIndex: '', files: {} };
if (!snapshot?.files) {
if (!validSnapshot?.files) {
return;
}
Object.entries(snapshot.files).forEach(async ([key, value]) => {
Object.entries(validSnapshot.files).forEach(async ([key, value]) => {
if (key.startsWith(container.workdir)) {
key = key.replace(container.workdir, '');
}
@ -241,7 +241,7 @@ ${value.content}
await container.fs.mkdir(key, { recursive: true });
}
});
Object.entries(snapshot.files).forEach(async ([key, value]) => {
Object.entries(validSnapshot.files).forEach(async ([key, value]) => {
if (value?.type === 'file') {
if (key.startsWith(container.workdir)) {
key = key.replace(container.workdir, '');
@ -311,6 +311,7 @@ ${value.content}
description.set(firstArtifact?.title);
}
// Ensure chatId.get() is used here as well
if (initialMessages.length === 0 && !chatId.get()) {
const nextId = await getNextId(db);
@ -321,9 +322,19 @@ ${value.content}
}
}
// 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,
chatId.get() as string,
finalChatId, // Use the potentially updated chatId
[...archivedMessages, ...messages],
urlId,
description.get(),

55
app/lib/stores/files.ts
View File

@ -181,29 +181,52 @@ export class FilesStore {
}
const currentFiles = this.files.get();
const pathsToDelete = new Set<string>();
for (const deletedPath of this.#deletedPaths) {
if (currentFiles[deletedPath]) {
this.files.setKey(deletedPath, undefined);
// Precompute prefixes for efficient checking
const deletedPrefixes = [...this.#deletedPaths].map((p) => p + '/');
if (currentFiles[deletedPath]?.type === 'file') {
// Iterate through all current files/folders once
for (const [path, dirent] of Object.entries(currentFiles)) {
// Skip if dirent is already undefined (shouldn't happen often but good practice)
if (!dirent) {
continue;
}
// Check for exact match in deleted paths
if (this.#deletedPaths.has(path)) {
pathsToDelete.add(path);
continue; // No need to check prefixes if it's an exact match
}
// Check if the path starts with any of the deleted folder prefixes
for (const prefix of deletedPrefixes) {
if (path.startsWith(prefix)) {
pathsToDelete.add(path);
break; // Found a match, no need to check other prefixes for this path
}
}
}
// Perform the deletions and updates based on the collected paths
if (pathsToDelete.size > 0) {
const updates: FileMap = {};
for (const pathToDelete of pathsToDelete) {
const dirent = currentFiles[pathToDelete];
updates[pathToDelete] = undefined; // Mark for deletion in the map update
if (dirent?.type === 'file') {
this.#size--;
}
}
for (const [path, dirent] of Object.entries(currentFiles)) {
if (path.startsWith(deletedPath + '/')) {
this.files.setKey(path, undefined);
if (dirent?.type === 'file') {
this.#size--;
}
if (dirent?.type === 'file' && this.#modifiedFiles.has(path)) {
this.#modifiedFiles.delete(path);
if (this.#modifiedFiles.has(pathToDelete)) {
this.#modifiedFiles.delete(pathToDelete);
}
}
}
// Apply all deletions to the store at once for potential efficiency
this.files.set({ ...currentFiles, ...updates });
}
}

12
app/lib/stores/previews.ts
View File

@ -295,6 +295,18 @@ export class PreviewsStore {
this.#refreshTimeouts.set(previewId, timeout);
}
refreshAllPreviews() {
const previews = this.previews.get();
for (const preview of previews) {
const previewId = this.getPreviewId(preview.baseUrl);
if (previewId) {
this.broadcastFileChange(previewId);
}
}
}
}
// Create a singleton instance

3
app/lib/stores/qrCodeStore.ts Normal file
View File

@ -0,0 +1,3 @@
import { atom } from 'nanostores';
export const expoUrlAtom = atom<string | null>(null);

4
app/lib/stores/workbench.ts
View File

@ -513,6 +513,10 @@ export class WorkbenchStore {
this.#editorStore.updateFile(fullPath, data.action.content);
if (!isStreaming && data.action.content) {
await this.saveFile(fullPath);
}
if (!isStreaming) {
await artifact.runner.runAction(data);
this.resetAllFileModifications();

96
app/routes/api.github-template.ts Normal file
View File

@ -0,0 +1,96 @@
import { json } from '@remix-run/cloudflare';
import JSZip from 'jszip';
export async function loader({ request }: { request: Request }) {
const url = new URL(request.url);
const repo = url.searchParams.get('repo');
if (!repo) {
return json({ error: 'Repository name is required' }, { status: 400 });
}
try {
const baseUrl = 'https://api.github.com';
// Get the latest release
const releaseResponse = await fetch(`${baseUrl}/repos/${repo}/releases/latest`, {
headers: {
Accept: 'application/vnd.github.v3+json',
// Add GitHub token if available in environment variables
...(process.env.GITHUB_TOKEN ? { Authorization: `Bearer ${process.env.GITHUB_TOKEN}` } : {}),
},
});
if (!releaseResponse.ok) {
throw new Error(`GitHub API error: ${releaseResponse.status}`);
}
const releaseData = (await releaseResponse.json()) as any;
const zipballUrl = releaseData.zipball_url;
// Fetch the zipball
const zipResponse = await fetch(zipballUrl, {
headers: {
...(process.env.GITHUB_TOKEN ? { Authorization: `Bearer ${process.env.GITHUB_TOKEN}` } : {}),
},
});
if (!zipResponse.ok) {
throw new Error(`Failed to fetch release zipball: ${zipResponse.status}`);
}
// Get the zip content as ArrayBuffer
const zipArrayBuffer = await zipResponse.arrayBuffer();
// Use JSZip to extract the contents
const zip = await JSZip.loadAsync(zipArrayBuffer);
// Find the root folder name
let rootFolderName = '';
zip.forEach((relativePath) => {
if (!rootFolderName && relativePath.includes('/')) {
rootFolderName = relativePath.split('/')[0];
}
});
// Extract all files
const promises = Object.keys(zip.files).map(async (filename) => {
const zipEntry = zip.files[filename];
// Skip directories
if (zipEntry.dir) {
return null;
}
// Skip the root folder itself
if (filename === rootFolderName) {
return null;
}
// Remove the root folder from the path
let normalizedPath = filename;
if (rootFolderName && filename.startsWith(rootFolderName + '/')) {
normalizedPath = filename.substring(rootFolderName.length + 1);
}
// Get the file content
const content = await zipEntry.async('string');
return {
name: normalizedPath.split('/').pop() || '',
path: normalizedPath,
content,
};
});
const results = await Promise.all(promises);
const fileList = results.filter(Boolean) as { name: string; path: string; content: string }[];
return json(fileList);
} catch (error) {
console.error('Error processing GitHub template:', error);
return json({ error: 'Failed to fetch template files' }, { status: 500 });
}
}

32
app/routes/webcontainer.connect.$id.tsx Normal file
View File

@ -0,0 +1,32 @@
import { type LoaderFunction } from '@remix-run/cloudflare';
export const loader: LoaderFunction = async ({ request }) => {
const url = new URL(request.url);
const editorOrigin = url.searchParams.get('editorOrigin') || 'https://stackblitz.com';
console.log('editorOrigin', editorOrigin);
const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Connect to WebContainer</title>
</head>
<body>
<script type="module">
(async () => {
const { setupConnect } = await import('https://cdn.jsdelivr.net/npm/@webcontainer/api@latest/dist/connect.js');
setupConnect({
editorOrigin: '${editorOrigin}'
});
})();
</script>
</body>
</html>
`;
return new Response(htmlContent, {
headers: { 'Content-Type': 'text/html' },
});
};

48
app/styles/index.scss
View File

@ -22,3 +22,51 @@ body {
// --secondary-color: rgba(138, 43, 226, var(--gradient-opacity));
// --accent-color: rgba(180, 170, 220, var(--gradient-opacity));
}
.modern-scrollbar {
overflow: auto;
// WebKit scrollbar styling
&::-webkit-scrollbar {
width: 2px;
height: 4px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
// Use CSS variables for colors
background-color: var(--modern-scrollbar-thumb-background);
border-radius: 9999px; // pill shape
border: 2px solid transparent; // for padding-like effect
background-clip: content-box;
transition: background-color 0.2s ease-in-out; // Add transition
}
&::-webkit-scrollbar-thumb:hover {
// Use CSS variable for hover color
background-color: var(--modern-scrollbar-thumb-backgroundHover);
}
// Firefox support
scrollbar-width: thin;
// Use CSS variables for Firefox colors
scrollbar-color: var(--modern-scrollbar-thumb-backgroundHover) transparent; // Use hover color for thumb for consistency
}
.modern-scrollbar-invert {
&::-webkit-scrollbar-thumb {
// Override with a contrasting color, e.g., primary text color with transparency
background-color: color-mix(in srgb, var(--bolt-elements-textPrimary), transparent 70%);
}
&::-webkit-scrollbar-thumb:hover {
// Darker/more opaque version on hover
background-color: color-mix(in srgb, var(--bolt-elements-textPrimary), transparent 50%);
}
// Firefox support for inverted colors
scrollbar-color: color-mix(in srgb, var(--bolt-elements-textPrimary), transparent 50%) transparent;
}

8
app/styles/variables.scss
View File

@ -102,6 +102,8 @@
--bolt-terminal-brightMagenta: #bc05bc;
--bolt-terminal-brightCyan: #0598bc;
--bolt-terminal-brightWhite: #a5a5a5;
--modern-scrollbar-thumb-background: rgba(100, 100, 100, 0.3); // Example light theme color
--modern-scrollbar-thumb-backgroundHover: rgba(74, 74, 74, 0.8);
}
/* Color Tokens Dark Theme */
@ -208,6 +210,8 @@
--bolt-terminal-brightMagenta: #ff6ac1;
--bolt-terminal-brightCyan: #9aedfe;
--bolt-terminal-brightWhite: #f1f1f0;
--modern-scrollbar-thumb-background: rgba(100, 100, 100, 0.3); // Example dark theme color (adjust as needed)
--modern-scrollbar-thumb-backgroundHover: rgba(10, 10, 10, 0.8);
}
/*
@ -217,8 +221,8 @@
*/
:root {
--header-height: 54px;
--chat-max-width: 37rem;
--chat-min-width: 640px;
--chat-max-width: 35rem;
--chat-min-width: 575px;
--workbench-width: min(calc(100% - var(--chat-min-width)), 2536px);
--workbench-inner-width: var(--workbench-width);
--workbench-left: calc(100% - var(--workbench-width));

60
app/utils/constants.ts
View File

@ -26,47 +26,63 @@ PROVIDER_LIST.forEach((provider) => {
export const STARTER_TEMPLATES: Template[] = [
{
name: 'bolt-astro-basic',
name: 'Expo App',
label: 'Expo App',
description: 'Expo starter template for building cross-platform mobile apps',
githubRepo: 'xKevIsDev/bolt-expo-template',
tags: ['mobile', 'expo', 'mobile-app', 'android', 'iphone'],
icon: 'i-bolt:expo',
},
{
name: 'Basic Astro',
label: 'Astro Basic',
description: 'Lightweight Astro starter template for building fast static websites',
githubRepo: 'thecodacus/bolt-astro-basic-template',
githubRepo: 'xKevIsDev/bolt-astro-basic-template',
tags: ['astro', 'blog', 'performance'],
icon: 'i-bolt:astro',
},
{
name: 'bolt-nextjs-shadcn',
name: 'NextJS Shadcn',
label: 'Next.js with shadcn/ui',
description: 'Next.js starter fullstack template integrated with shadcn/ui components and styling system',
githubRepo: 'thecodacus/bolt-nextjs-shadcn-template',
githubRepo: 'xKevIsDev/bolt-nextjs-shadcn-template',
tags: ['nextjs', 'react', 'typescript', 'shadcn', 'tailwind'],
icon: 'i-bolt:nextjs',
},
{
name: 'bolt-qwik-ts',
name: 'Vite Shadcn',
label: 'Vite with shadcn/ui',
description: 'Vite starter fullstack template integrated with shadcn/ui components and styling system',
githubRepo: 'xKevIsDev/vite-shadcn',
tags: ['vite', 'react', 'typescript', 'shadcn', 'tailwind'],
icon: 'i-bolt:shadcn',
},
{
name: 'Qwik Typescript',
label: 'Qwik TypeScript',
description: 'Qwik framework starter with TypeScript for building resumable applications',
githubRepo: 'thecodacus/bolt-qwik-ts-template',
githubRepo: 'xKevIsDev/bolt-qwik-ts-template',
tags: ['qwik', 'typescript', 'performance', 'resumable'],
icon: 'i-bolt:qwik',
},
{
name: 'bolt-remix-ts',
name: 'Remix Typescript',
label: 'Remix TypeScript',
description: 'Remix framework starter with TypeScript for full-stack web applications',
githubRepo: 'thecodacus/bolt-remix-ts-template',
githubRepo: 'xKevIsDev/bolt-remix-ts-template',
tags: ['remix', 'typescript', 'fullstack', 'react'],
icon: 'i-bolt:remix',
},
{
name: 'bolt-slidev',
name: 'Slidev',
label: 'Slidev Presentation',
description: 'Slidev starter template for creating developer-friendly presentations using Markdown',
githubRepo: 'thecodacus/bolt-slidev-template',
githubRepo: 'xKevIsDev/bolt-slidev-template',
tags: ['slidev', 'presentation', 'markdown'],
icon: 'i-bolt:slidev',
},
{
name: 'bolt-sveltekit',
name: 'Sveltekit',
label: 'SvelteKit',
description: 'SvelteKit starter template for building fast, efficient web applications',
githubRepo: 'bolt-sveltekit-template',
@ -74,42 +90,42 @@ export const STARTER_TEMPLATES: Template[] = [
icon: 'i-bolt:svelte',
},
{
name: 'vanilla-vite',
name: 'Vanilla Vite',
label: 'Vanilla + Vite',
description: 'Minimal Vite starter template for vanilla JavaScript projects',
githubRepo: 'thecodacus/vanilla-vite-template',
githubRepo: 'xKevIsDev/vanilla-vite-template',
tags: ['vite', 'vanilla-js', 'minimal'],
icon: 'i-bolt:vite',
},
{
name: 'bolt-vite-react',
name: 'Vite React',
label: 'React + Vite + typescript',
description: 'React starter template powered by Vite for fast development experience',
githubRepo: 'thecodacus/bolt-vite-react-ts-template',
tags: ['react', 'vite', 'frontend'],
githubRepo: 'xKevIsDev/bolt-vite-react-ts-template',
tags: ['react', 'vite', 'frontend', 'website', 'app'],
icon: 'i-bolt:react',
},
{
name: 'bolt-vite-ts',
name: 'Vite Typescript',
label: 'Vite + TypeScript',
description: 'Vite starter template with TypeScript configuration for type-safe development',
githubRepo: 'thecodacus/bolt-vite-ts-template',
githubRepo: 'xKevIsDev/bolt-vite-ts-template',
tags: ['vite', 'typescript', 'minimal'],
icon: 'i-bolt:typescript',
},
{
name: 'bolt-vue',
name: 'Vue',
label: 'Vue.js',
description: 'Vue.js starter template with modern tooling and best practices',
githubRepo: 'thecodacus/bolt-vue-template',
githubRepo: 'xKevIsDev/bolt-vue-template',
tags: ['vue', 'typescript', 'frontend'],
icon: 'i-bolt:vue',
},
{
name: 'bolt-angular',
name: 'Angular',
label: 'Angular Starter',
description: 'A modern Angular starter template with TypeScript support and best practices configuration',
githubRepo: 'thecodacus/bolt-angular-template',
githubRepo: 'xKevIsDev/bolt-angular-template',
tags: ['angular', 'typescript', 'frontend', 'spa'],
icon: 'i-bolt:angular',
},

26
app/utils/projectCommands.ts
View File

@ -84,9 +84,10 @@ export function createCommandsMessage(commands: ProjectCommands): Message | null
return {
role: 'assistant',
content: `
${commands.followupMessage ? `\n\n${commands.followupMessage}` : ''}
<boltArtifact id="project-setup" title="Project Setup">
${commandString}
</boltArtifact>${commands.followupMessage ? `\n\n${commands.followupMessage}` : ''}`,
</boltArtifact>`,
id: generateId(),
createdAt: new Date(),
};
@ -127,3 +128,26 @@ export function escapeBoltAActionTags(input: string) {
export function escapeBoltTags(input: string) {
return escapeBoltArtifactTags(escapeBoltAActionTags(input));
}
// We have this seperate function to simplify the restore snapshot process in to one single artifact.
export function createCommandActionsString(commands: ProjectCommands): string {
if (!commands.setupCommand && !commands.startCommand) {
// Return empty string if no commands
return '';
}
let commandString = '';
if (commands.setupCommand) {
commandString += `
<boltAction type="shell">${commands.setupCommand}</boltAction>`;
}
if (commands.startCommand) {
commandString += `
<boltAction type="start">${commands.startCommand}</boltAction>
`;
}
return commandString;
}

96
app/utils/selectStarterTemplate.ts
View File

@ -2,10 +2,9 @@ import ignore from 'ignore';
import type { ProviderInfo } from '~/types/model';
import type { Template } from '~/types/template';
import { STARTER_TEMPLATES } from './constants';
import Cookies from 'js-cookie';
const starterTemplateSelectionPrompt = (templates: Template[]) => `
You are an experienced developer who helps people choose the best starter template for their projects.
You are an experienced developer who helps people choose the best starter template for their projects, Vite is preferred.
Available templates:
<template>
@ -111,81 +110,21 @@ export const selectStarterTemplate = async (options: { message: string; model: s
}
};
const getGitHubRepoContent = async (
repoName: string,
path: string = '',
): Promise<{ name: string; path: string; content: string }[]> => {
const baseUrl = 'https://api.github.com';
const getGitHubRepoContent = async (repoName: string): Promise<{ name: string; path: string; content: string }[]> => {
try {
const token = Cookies.get('githubToken') || import.meta.env.VITE_GITHUB_ACCESS_TOKEN;
const headers: HeadersInit = {
Accept: 'application/vnd.github.v3+json',
};
// Add your GitHub token if needed
if (token) {
headers.Authorization = 'Bearer ' + token;
}
// Fetch contents of the path
const response = await fetch(`${baseUrl}/repos/${repoName}/contents/${path}`, {
headers,
});
// Instead of directly fetching from GitHub, use our own API endpoint as a proxy
const response = await fetch(`/api/github-template?repo=${encodeURIComponent(repoName)}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data: any = await response.json();
// Our API will return the files in the format we need
const files = (await response.json()) as any;
// If it's a single file, return its content
if (!Array.isArray(data)) {
if (data.type === 'file') {
// If it's a file, get its content
const content = atob(data.content); // Decode base64 content
return [
{
name: data.name,
path: data.path,
content,
},
];
}
}
// Process directory contents recursively
const contents = await Promise.all(
data.map(async (item: any) => {
if (item.type === 'dir') {
// Recursively get contents of subdirectories
return await getGitHubRepoContent(repoName, item.path);
} else if (item.type === 'file') {
// Fetch file content
const fileResponse = await fetch(item.url, {
headers,
});
const fileData: any = await fileResponse.json();
const content = atob(fileData.content); // Decode base64 content
return [
{
name: item.name,
path: item.path,
content,
},
];
}
return [];
}),
);
// Flatten the array of contents
return contents.flat();
return files;
} catch (error) {
console.error('Error fetching repo contents:', error);
console.error('Error fetching release contents:', error);
throw error;
}
};
@ -208,9 +147,16 @@ export async function getTemplates(templateName: string, title?: string) {
*/
filteredFiles = filteredFiles.filter((x) => x.path.startsWith('.git') == false);
// exclude lock files
const comminLockFiles = ['package-lock.json', 'yarn.lock', 'pnpm-lock.yaml'];
filteredFiles = filteredFiles.filter((x) => comminLockFiles.includes(x.name) == false);
/*
* exclude lock files
* WE NOW INCLUDE LOCK FILES FOR IMPROVED INSTALL TIMES
*/
{
/*
*const comminLockFiles = ['package-lock.json', 'yarn.lock', 'pnpm-lock.yaml'];
*filteredFiles = filteredFiles.filter((x) => comminLockFiles.includes(x.name) == false);
*/
}
// exclude .bolt
filteredFiles = filteredFiles.filter((x) => x.path.startsWith('.bolt') == false);
@ -236,7 +182,8 @@ export async function getTemplates(templateName: string, title?: string) {
}
const assistantMessage = `
<boltArtifact id="imported-files" title="${title || 'Importing Starter Files'}" type="bundled">
Bolt is initializing your project with the required files using the ${template.name} template.
<boltArtifact id="imported-files" title="${title || 'Create initial files'}" type="bundled">
${filesToImport.files
.map(
(file) =>
@ -255,7 +202,6 @@ ${file.content}
TEMPLATE INSTRUCTIONS:
${templatePromptFile.content}
IMPORTANT: Dont Forget to install the dependencies before running the app
---
`;
}
@ -296,6 +242,8 @@ edit only the files that need to be changed, and you can create new files as nee
NO NOT EDIT/WRITE ANY FILES THAT ALREADY EXIST IN THE PROJECT AND DOES NOT NEED TO BE MODIFIED
---
Now that the Template is imported please continue with my original request
IMPORTANT: Dont Forget to install the dependencies before running the app by using \`npm install && npm run dev\`
`;
return {

160
app/utils/shell.ts
View File

@ -2,6 +2,7 @@ import type { WebContainer, WebContainerProcess } from '@webcontainer/api';
import type { ITerminal } from '~/types/terminal';
import { withResolvers } from './promises';
import { atom } from 'nanostores';
import { expoUrlAtom } from '~/lib/stores/qrCodeStore';
export async function newShellProcess(webcontainer: WebContainer, terminal: ITerminal) {
const args: string[] = [];
@ -80,13 +81,96 @@ export class BoltShell {
this.#webcontainer = webcontainer;
this.#terminal = terminal;
const { process, output } = await this.newBoltShellProcess(webcontainer, terminal);
// Use all three streams from tee: one for terminal, one for command execution, one for Expo URL detection
const { process, commandStream, expoUrlStream } = await this.newBoltShellProcess(webcontainer, terminal);
this.#process = process;
this.#outputStream = output.getReader();
this.#outputStream = commandStream.getReader();
// Start background Expo URL watcher immediately
this._watchExpoUrlInBackground(expoUrlStream);
await this.waitTillOscCode('interactive');
this.#initialized?.();
}
async newBoltShellProcess(webcontainer: WebContainer, terminal: ITerminal) {
const args: string[] = [];
const process = await webcontainer.spawn('/bin/jsh', ['--osc', ...args], {
terminal: {
cols: terminal.cols ?? 80,
rows: terminal.rows ?? 15,
},
});
const input = process.input.getWriter();
this.#shellInputStream = input;
// Tee the output so we can have three independent readers
const [streamA, streamB] = process.output.tee();
const [streamC, streamD] = streamB.tee();
const jshReady = withResolvers<void>();
let isInteractive = false;
streamA.pipeTo(
new WritableStream({
write(data) {
if (!isInteractive) {
const [, osc] = data.match(/\x1b\]654;([^\x07]+)\x07/) || [];
if (osc === 'interactive') {
isInteractive = true;
jshReady.resolve();
}
}
terminal.write(data);
},
}),
);
terminal.onData((data) => {
if (isInteractive) {
input.write(data);
}
});
await jshReady.promise;
// Return all streams for use in init
return { process, terminalStream: streamA, commandStream: streamC, expoUrlStream: streamD };
}
// Dedicated background watcher for Expo URL
private async _watchExpoUrlInBackground(stream: ReadableStream<string>) {
const reader = stream.getReader();
let buffer = '';
const expoUrlRegex = /(exp:\/\/[^\s]+)/;
while (true) {
const { value, done } = await reader.read();
if (done) {
break;
}
buffer += value || '';
const expoUrlMatch = buffer.match(expoUrlRegex);
if (expoUrlMatch) {
const cleanUrl = expoUrlMatch[1]
.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '')
.replace(/[^\x20-\x7E]+$/g, '');
expoUrlAtom.set(cleanUrl);
buffer = buffer.slice(buffer.indexOf(expoUrlMatch[1]) + expoUrlMatch[1].length);
}
if (buffer.length > 2048) {
buffer = buffer.slice(-2048);
}
}
}
get terminal() {
return this.#terminal;
}
@ -138,65 +222,17 @@ export class BoltShell {
return resp;
}
async newBoltShellProcess(webcontainer: WebContainer, terminal: ITerminal) {
const args: string[] = [];
// we spawn a JSH process with a fallback cols and rows in case the process is not attached yet to a visible terminal
const process = await webcontainer.spawn('/bin/jsh', ['--osc', ...args], {
terminal: {
cols: terminal.cols ?? 80,
rows: terminal.rows ?? 15,
},
});
const input = process.input.getWriter();
this.#shellInputStream = input;
const [internalOutput, terminalOutput] = process.output.tee();
const jshReady = withResolvers<void>();
let isInteractive = false;
terminalOutput.pipeTo(
new WritableStream({
write(data) {
if (!isInteractive) {
const [, osc] = data.match(/\x1b\]654;([^\x07]+)\x07/) || [];
if (osc === 'interactive') {
// wait until we see the interactive OSC
isInteractive = true;
jshReady.resolve();
}
}
terminal.write(data);
},
}),
);
terminal.onData((data) => {
// console.log('terminal onData', { data, isInteractive });
if (isInteractive) {
input.write(data);
}
});
await jshReady.promise;
return { process, output: internalOutput };
}
async getCurrentExecutionResult(): Promise<ExecutionResult> {
const { output, exitCode } = await this.waitTillOscCode('exit');
return { output, exitCode };
}
onQRCodeDetected?: (qrCode: string) => void;
async waitTillOscCode(waitCode: string) {
let fullOutput = '';
let exitCode: number = 0;
let buffer = ''; // <-- Add a buffer to accumulate output
if (!this.#outputStream) {
return { output: fullOutput, exitCode };
@ -204,6 +240,9 @@ export class BoltShell {
const tappedStream = this.#outputStream;
// Regex for Expo URL
const expoUrlRegex = /(exp:\/\/[^\s]+)/;
while (true) {
const { value, done } = await tappedStream.read();
@ -213,6 +252,21 @@ export class BoltShell {
const text = value || '';
fullOutput += text;
buffer += text; // <-- Accumulate in buffer
// Extract Expo URL from buffer and set store
const expoUrlMatch = buffer.match(expoUrlRegex);
if (expoUrlMatch) {
// Remove any trailing ANSI escape codes or non-printable characters
const cleanUrl = expoUrlMatch[1]
.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '')
.replace(/[^\x20-\x7E]+$/g, '');
expoUrlAtom.set(cleanUrl);
// Remove everything up to and including the URL from the buffer to avoid duplicate matches
buffer = buffer.slice(buffer.indexOf(expoUrlMatch[1]) + expoUrlMatch[1].length);
}
// Check if command completion signal with exit code
const [, osc, , , code] = text.match(/\x1b\]654;([^\x07=]+)=?((-?\d+):(\d+))?\x07/) || [];

1
icons/expo-brand.svg Normal file
View File

@ -0,0 +1 @@
<svg width="114" height="32" viewBox="0 0 114 32"><path fill="#FFF" d="M14.805 10.334c.256-.377.535-.425.762-.425.227 0 .605.048.86.425 2.015 2.766 5.34 8.277 7.791 12.342 1.6 2.65 2.828 4.687 3.08 4.946.946.972 2.243.366 2.997-.737.742-1.086.948-1.849.948-2.663 0-.554-10.752-20.552-11.835-22.217C18.366.405 18.028 0 16.245 0H14.91c-1.777 0-2.034.404-3.075 2.005C10.753 3.67 0 23.668 0 24.222c0 .814.206 1.577.948 2.663.754 1.103 2.052 1.71 2.998.737.252-.26 1.48-2.295 3.08-4.946 2.451-4.065 5.765-9.576 7.78-12.342Zm23.913-8.566v24.55h14.96v-4.98h-9.799v-5.19h8.718v-4.98h-8.718v-4.42h9.799v-4.98h-14.96Zm34.922 24.55-6.208-8.908 5.789-8.312h-5.859l-2.859 4.068-2.825-4.068H55.75l5.789 8.347-6.172 8.873h5.858l3.243-4.664 3.243 4.664h5.928ZM86.115 8.747c-2.37 0-4.22.982-5.405 2.77v-2.42h-4.916V32h4.916v-8.102c1.186 1.789 3.034 2.771 5.405 2.771 4.429 0 7.95-4.033 7.95-8.979 0-4.945-3.521-8.943-7.95-8.943ZM85 21.934c-2.407 0-4.29-1.824-4.29-4.244 0-2.384 1.883-4.243 4.29-4.243 2.37 0 4.289 1.894 4.289 4.244 0 2.384-1.918 4.243-4.29 4.243Zm19.791-13.187c-5.056 0-8.892 3.858-8.892 8.979 0 5.12 3.835 8.943 8.892 8.943 5.021 0 8.892-3.823 8.892-8.943 0-5.121-3.871-8.979-8.892-8.979Zm0 4.735c2.301 0 4.08 1.789 4.08 4.244 0 2.384-1.779 4.208-4.08 4.208-2.337 0-4.08-1.824-4.08-4.208 0-2.455 1.743-4.244 4.08-4.244Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

4
icons/expo.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="none" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path fill='#7B7B7B' d="M24.292 15.547c1.968 0.131 3.729-1.213 4.115-3.145-0.475-0.735-1.287-1.177-2.161-1.177-2.272-0.052-3.491 2.651-1.953 4.323zM15.115 4.697l5.359-3.104-1.708-0.963-7.391 4.281 0.589 0.328 1.119 0.629 2.032-1.176zM21.161 1.307c0.089 0.027 0.161 0.1 0.188 0.188l2.484 7.593c0.047 0.131-0.005 0.272-0.125 0.344-1.968 1.156-2.916 3.489-2.317 5.693 0.656 2.391 2.937 3.953 5.401 3.703 0.135-0.011 0.265 0.073 0.307 0.203l2.563 7.803c0.041 0.131-0.011 0.271-0.125 0.344l-7.859 4.771c-0.037 0.021-0.084 0.036-0.131 0.036-0.068 0.016-0.14 0-0.203-0.041l-2.765-1.797c-0.048-0.031-0.084-0.077-0.109-0.129l-5.396-12.896-8.219 4.875c-0.016 0.011-0.037 0.021-0.052 0.032-0.084 0.036-0.183 0.025-0.261-0.021l-1.859-1.093c-0.136-0.073-0.188-0.245-0.115-0.381l7.953-15.749c0.025-0.057 0.077-0.104 0.135-0.131l7.959-4.609c0.088-0.052 0.197-0.057 0.292-0.005zM12.839 6.407l-1.932-1.089-7.693 15.229 1.396 0.823 6.631-9.015c0.063-0.089 0.167-0.136 0.271-0.12 0.104 0.011 0.192 0.077 0.235 0.177l7.228 17.296 1.933 1.251-8.063-24.552zM26.245 16.964c-2.256 0-3.787-2.292-2.923-4.376 0.86-2.083 3.563-2.619 5.156-1.025 0.595 0.593 0.928 1.396 0.928 2.235 0.005 1.749-1.412 3.167-3.161 3.167z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

10
icons/netlify.svg Normal file
View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="a" cy="0%" r="100.11%" fx="50%" fy="0%" gradientTransform="matrix(0 .9989 -1.152 0 .5 -.5)">
<stop offset="0%" stop-color="#20C6B7"/>
<stop offset="100%" stop-color="#4D9ABF"/>
</radialGradient>
</defs>
<path fill="url(#a)" 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.355 1.674.022.069.04.138.054.209l-9.263-3.923a.728.728 0 0 0-.015-.006c-.037-.015-.08-.032-.08-.07 0-.038.044-.056.081-.071l.012-.005 3.98-1.684zm5.127 7.003c-.2.376-.59.766-1.25 1.427l-4.37 4.369-5.652-1.177-.03-.006c-.05-.008-.103-.017-.103-.062a1.706 1.706 0 0 0-.655-1.193c-.023-.023-.017-.059-.01-.092 0-.005 0-.01.002-.014l1.063-6.526.004-.022c.006-.05.015-.108.06-.108a1.73 1.73 0 0 0 1.16-.665c.009-.01.015-.021.027-.027.032-.015.07 0 .103.014l9.65 4.082zm-6.625 6.801l-7.186 7.186 1.23-7.56.002-.01c.001-.01.003-.02.006-.029.01-.024.036-.034.061-.044l.012-.005a1.85 1.85 0 0 0 .695-.517c.024-.028.053-.055.09-.06a.09.09 0 0 1 .029 0l5.06 1.04zm-8.707 8.707l-.81.81-8.955-12.942a.424.424 0 0 0-.01-.014c-.014-.019-.029-.038-.026-.06.001-.016.011-.03.022-.042l.01-.013c.027-.04.05-.08.075-.123l.02-.035.003-.003c.014-.024.027-.047.051-.06.021-.01.05-.006.073-.001l9.921 2.046a.164.164 0 0 1 .076.033c.013.013.016.027.019.043a1.757 1.757 0 0 0 1.028 1.175c.028.014.016.045.003.078a.238.238 0 0 0-.015.045c-.125.76-1.197 7.298-1.485 9.063zm-1.692 1.691c-.597.591-.949.904-1.347 1.03a2 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.891zm5.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>
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

21
icons/shadcn.svg Normal file
View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 256 256">
<!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) -->
<defs>
<style>
.st0, .st1 {
fill: none;
}
.st1 {
stroke: #7B7B7B; /* Changed from #000 to #7B7B7B */
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 32px;
}
</style>
</defs>
<rect class="st0" width="256" height="256"/>
<line class="st1" x1="208" y1="128" x2="128" y2="208"/>
<line class="st1" x1="192" y1="40" x2="40" y2="192"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 660 B

1
package.json
View File

@ -136,6 +136,7 @@
"react-hotkeys-hook": "^4.6.1",
"react-icons": "^5.4.0",
"react-markdown": "^9.0.1",
"react-qrcode-logo": "^3.0.0",
"react-resizable-panels": "^2.1.7",
"react-toastify": "^10.0.6",
"react-window": "^1.8.11",

21
pnpm-lock.yaml generated
View File

@ -287,6 +287,9 @@ importers:
react-markdown:
specifier: ^9.0.1
version: 9.1.0(@types/react@18.3.20)(react@18.3.1)
react-qrcode-logo:
specifier: ^3.0.0
version: 3.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
react-resizable-panels:
specifier: ^2.1.7
version: 2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@ -6556,6 +6559,9 @@ packages:
resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
engines: {node: '>=6'}
qrcode-generator@1.4.4:
resolution: {integrity: sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==}
qs@6.13.0:
resolution: {integrity: sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==}
engines: {node: '>=0.6'}
@ -6657,6 +6663,12 @@ packages:
'@types/react': '>=18'
react: '>=18'
react-qrcode-logo@3.0.0:
resolution: {integrity: sha512-2+vZ3GNBdUpYxIKyt6SFZsDGXa0xniyUQ0wPI4O0hJTzRjttPIx1pPnH9IWQmp/4nDMoN47IBhi3Breu1KudYw==}
peerDependencies:
react: '>=18.0.0'
react-dom: '>=18.0.0'
react-redux@7.2.9:
resolution: {integrity: sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==}
peerDependencies:
@ -15554,6 +15566,8 @@ snapshots:
punycode@2.3.1: {}
qrcode-generator@1.4.4: {}
qs@6.13.0:
dependencies:
side-channel: 1.1.0
@ -15668,6 +15682,13 @@ snapshots:
transitivePeerDependencies:
- supports-color
react-qrcode-logo@3.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
lodash.isequal: 4.5.0
qrcode-generator: 1.4.4
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
react-redux@7.2.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@babel/runtime': 7.27.0