9 Commits

Author SHA1 Message Date
KevIsDev
c64f69b01d Revert "fix: increase Node.js memory limit in Docker build" 2025-05-26 16:43:31 +01:00
KevIsDev
c008c7a557 Merge pull request #1725 from ssuvamm/fix/docker-oom
fix: increase Node.js memory limit in Docker build
2025-05-26 16:39:52 +01:00
google-labs-jules[bot]
927d8bc635 Fix: Increase Node.js memory limit in Docker build
The Docker build process was failing with an out-of-memory error during the `pnpm run build` step in the `bolt-ai-production` stage.

This commit increases the memory available to Node.js by modifying the build command to include the `--max-old-space-size=4096` flag. This provides 4GB of memory to the Node.js process, which should be sufficient to complete the build.
2025-05-21 04:48:37 +00:00
KevIsDev
f0aa58c922 Merge pull request #1708 from xKevIsDev/main
fix: various performance issues
2025-05-20 01:18:15 +01:00
KevIsDev
cfc2fc75d8 refactor(files): simplify file event processing logic
Remove redundant checks for deleted paths and streamline binary file handling. This fixes the browser using excessive memory and freezing.

Improve DiffView to use a singleton instance of Shiki
2025-05-20 00:57:52 +01:00
KevIsDev
0ec30e2358 Merge branch 'stackblitz-labs:main' into main 2025-05-19 17:35:04 +01:00
KevIsDev
50a5196477 Merge pull request #1721 from dhensen/anthropic-experiment-128k-max-token-output
feat: increase max token limit for Claude model claude-3-7-sonnet-202…
2025-05-19 11:19:27 +01:00
KevIsDev
62769b2fef fix: chat history snapshot logic to use the same ID as chat and update prompt instructions
- Remove redundant `_chatId` parameter in `takeSnapshot` function
- Update prompt instructions for shell commands and artifact handling
2025-05-14 11:54:51 +01:00
Dino Hensen
208ba2a54b feat: increase max token limit for Claude model claude-3-7-sonnet-20250219
- Added logging for dynamic max tokens based on model details.
- Increased max token limit for Claude model from 8000 to 128000.
- Included beta header for Anthropik API call.
2025-05-13 07:20:38 +02:00
6 changed files with 89 additions and 102 deletions

View File

@@ -542,8 +542,53 @@ const FileInfo = memo(
}, },
); );
// Create and manage a single highlighter instance at the module level
let highlighterInstance: any = null;
let highlighterPromise: Promise<any> | null = null;
const getSharedHighlighter = async () => {
if (highlighterInstance) {
return highlighterInstance;
}
if (highlighterPromise) {
return highlighterPromise;
}
highlighterPromise = getHighlighter({
themes: ['github-dark', 'github-light'],
langs: [
'typescript',
'javascript',
'json',
'html',
'css',
'jsx',
'tsx',
'python',
'php',
'java',
'c',
'cpp',
'csharp',
'go',
'ruby',
'rust',
'plaintext',
],
});
highlighterInstance = await highlighterPromise;
highlighterPromise = null;
// Clear the promise once resolved
return highlighterInstance;
};
const InlineDiffComparison = memo(({ beforeCode, afterCode, filename, language }: CodeComparisonProps) => { const InlineDiffComparison = memo(({ beforeCode, afterCode, filename, language }: CodeComparisonProps) => {
const [isFullscreen, setIsFullscreen] = useState(false); const [isFullscreen, setIsFullscreen] = useState(false);
// Use state to hold the shared highlighter instance
const [highlighter, setHighlighter] = useState<any>(null); const [highlighter, setHighlighter] = useState<any>(null);
const theme = useStore(themeStore); const theme = useStore(themeStore);
@@ -554,34 +599,32 @@ const InlineDiffComparison = memo(({ beforeCode, afterCode, filename, language }
const { unifiedBlocks, hasChanges, isBinary, error } = useProcessChanges(beforeCode, afterCode); const { unifiedBlocks, hasChanges, isBinary, error } = useProcessChanges(beforeCode, afterCode);
useEffect(() => { useEffect(() => {
getHighlighter({ // Fetch the shared highlighter instance
themes: ['github-dark', 'github-light'], getSharedHighlighter().then(setHighlighter);
langs: [
'typescript', /*
'javascript', * No cleanup needed here for the highlighter instance itself,
'json', * as it's managed globally. Shiki instances don't typically
'html', * need disposal unless you are dynamically loading/unloading themes/languages.
'css', * If you were dynamically loading, you might need a more complex
'jsx', * shared instance manager with reference counting or similar.
'tsx', * For static themes/langs, a single instance is sufficient.
'python', */
'php', }, []); // Empty dependency array ensures this runs only once on mount
'java',
'c',
'cpp',
'csharp',
'go',
'ruby',
'rust',
'plaintext',
],
}).then(setHighlighter);
}, []);
if (isBinary || error) { if (isBinary || error) {
return renderContentWarning(isBinary ? 'binary' : 'error'); return renderContentWarning(isBinary ? 'binary' : 'error');
} }
// Render a loading state or null while highlighter is not ready
if (!highlighter) {
return (
<div className="h-full flex items-center justify-center">
<div className="text-bolt-elements-textTertiary">Loading diff...</div>
</div>
);
}
return ( return (
<FullscreenOverlay isFullscreen={isFullscreen}> <FullscreenOverlay isFullscreen={isFullscreen}>
<div className="w-full h-full flex flex-col"> <div className="w-full h-full flex flex-col">
@@ -602,7 +645,7 @@ const InlineDiffComparison = memo(({ beforeCode, afterCode, filename, language }
lineNumber={block.lineNumber} lineNumber={block.lineNumber}
content={block.content} content={block.content}
type={block.type} type={block.type}
highlighter={highlighter} highlighter={highlighter} // Pass the shared instance
language={language} language={language}
block={block} block={block}
theme={theme} theme={theme}

View File

@@ -108,6 +108,9 @@ export async function streamText(props: {
} }
const dynamicMaxTokens = modelDetails && modelDetails.maxTokenAllowed ? modelDetails.maxTokenAllowed : MAX_TOKENS; const dynamicMaxTokens = modelDetails && modelDetails.maxTokenAllowed ? modelDetails.maxTokenAllowed : MAX_TOKENS;
logger.info(
`Max tokens for model ${modelDetails.name} is ${dynamicMaxTokens} based on ${modelDetails.maxTokenAllowed} or ${MAX_TOKENS}`,
);
let systemPrompt = let systemPrompt =
PromptLibrary.getPropmtFromLibrary(promptId || 'default', { PromptLibrary.getPropmtFromLibrary(promptId || 'default', {

View File

@@ -45,14 +45,6 @@ The year is 2025.
</technology_preferences> </technology_preferences>
<running_shell_commands_info> <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: CRITICAL:
- NEVER mention or reference the XML tags or structure of this process list in your responses - 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 - DO NOT repeat or directly quote any part of the command information provided
@@ -286,6 +278,7 @@ The year is 2025.
- Follow the guidelines for shell commands. - 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. - Use the start action type over the shell type ONLY when the command is intended to start the project.
- IMPORTANT: Always execute the start command after executing a shell command.
- file: For creating new files or updating existing files. Add \`filePath\` and \`contentType\` attributes: - file: For creating new files or updating existing files. Add \`filePath\` and \`contentType\` attributes:
@@ -317,7 +310,7 @@ The year is 2025.
11. Prioritize installing required dependencies by updating \`package.json\` first. 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 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. - 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 this should ALWAYS be done inside the artifact.
- \`npm install\` will not automatically run every time \`package.json\` is updated, so you need to include a shell action to install dependencies. - \`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\`. - Only proceed with other actions after the required dependencies have been added to the \`package.json\`.
@@ -325,7 +318,7 @@ The year is 2025.
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! 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. 13. Always include a start command in the artifact, The start command should be the LAST action in the artifact.
</artifact_instructions> </artifact_instructions>
<design_instructions> <design_instructions>
@@ -647,7 +640,8 @@ function App() {
} }
export default App;</boltAction> export default App;</boltAction>
<boltAction type="file" filePath="src/App.css" contentType="content">.container {
<boltAction type="file" filePath="src/App.css" contentType="content"> {
max-width: 800px; max-width: 800px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
@@ -698,25 +692,6 @@ export default App;</boltAction>
npm run dev npm run dev
</boltAction> </boltAction>
</boltArtifact> </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> </example>
</examples>`; </examples>`;

View File

@@ -17,7 +17,7 @@ export default class AnthropicProvider extends BaseProvider {
name: 'claude-3-7-sonnet-20250219', name: 'claude-3-7-sonnet-20250219',
label: 'Claude 3.7 Sonnet', label: 'Claude 3.7 Sonnet',
provider: 'Anthropic', provider: 'Anthropic',
maxTokenAllowed: 8000, maxTokenAllowed: 128000,
}, },
{ {
name: 'claude-3-5-sonnet-latest', name: 'claude-3-5-sonnet-latest',
@@ -95,6 +95,7 @@ export default class AnthropicProvider extends BaseProvider {
}); });
const anthropic = createAnthropic({ const anthropic = createAnthropic({
apiKey, apiKey,
headers: { 'anthropic-beta': 'output-128k-2025-02-19' },
}); });
return anthropic(model); return anthropic(model);

View File

@@ -199,7 +199,7 @@ ${value.content}
const takeSnapshot = useCallback( const takeSnapshot = useCallback(
async (chatIdx: string, files: FileMap, _chatId?: string | undefined, chatSummary?: string) => { async (chatIdx: string, files: FileMap, _chatId?: string | undefined, chatSummary?: string) => {
const id = _chatId || chatId.get(); const id = chatId.get();
if (!id || !db) { if (!id || !db) {
return; return;

View File

@@ -692,27 +692,9 @@ export class FilesStore {
#processEventBuffer(events: Array<[events: PathWatcherEvent[]]>) { #processEventBuffer(events: Array<[events: PathWatcherEvent[]]>) {
const watchEvents = events.flat(2); const watchEvents = events.flat(2);
for (const { type, path: eventPath, buffer } of watchEvents) { for (const { type, path, buffer } of watchEvents) {
// remove any trailing slashes // remove any trailing slashes
const sanitizedPath = eventPath.replace(/\/+$/g, ''); const sanitizedPath = path.replace(/\/+$/g, '');
// Skip processing if this file/folder was explicitly deleted
if (this.#deletedPaths.has(sanitizedPath)) {
continue;
}
let isInDeletedFolder = false;
for (const deletedPath of this.#deletedPaths) {
if (sanitizedPath.startsWith(deletedPath + '/')) {
isInDeletedFolder = true;
break;
}
}
if (isInDeletedFolder) {
continue;
}
switch (type) { switch (type) {
case 'add_dir': { case 'add_dir': {
@@ -738,38 +720,21 @@ export class FilesStore {
} }
let content = ''; let content = '';
/**
* @note This check is purely for the editor. The way we detect this is not
* bullet-proof and it's a best guess so there might be false-positives.
* The reason we do this is because we don't want to display binary files
* in the editor nor allow to edit them.
*/
const isBinary = isBinaryFile(buffer); const isBinary = isBinaryFile(buffer);
if (isBinary && buffer) { if (!isBinary) {
// For binary files, we need to preserve the content as base64
content = Buffer.from(buffer).toString('base64');
} else if (!isBinary) {
content = this.#decodeFileContent(buffer); content = this.#decodeFileContent(buffer);
/*
* If the content is a single space and this is from our empty file workaround,
* convert it back to an actual empty string
*/
if (content === ' ' && type === 'add_file') {
content = '';
}
} }
const existingFile = this.files.get()[sanitizedPath]; this.files.setKey(sanitizedPath, { type: 'file', content, isBinary });
if (existingFile?.type === 'file' && existingFile.isBinary && existingFile.content && !content) {
content = existingFile.content;
}
// Preserve lock state if the file already exists
const isLocked = existingFile?.type === 'file' ? existingFile.isLocked : false;
this.files.setKey(sanitizedPath, {
type: 'file',
content,
isBinary,
isLocked,
});
break; break;
} }
case 'remove_file': { case 'remove_file': {