diff --git a/app/components/chat/CodeBlock.tsx b/app/components/chat/CodeBlock.tsx
index bc20dc2c..e6b09f06 100644
--- a/app/components/chat/CodeBlock.tsx
+++ b/app/components/chat/CodeBlock.tsx
@@ -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 (
diff --git a/app/components/workbench/Workbench.client.tsx b/app/components/workbench/Workbench.client.tsx
index 3a87686f..0a838953 100644
--- a/app/components/workbench/Workbench.client.tsx
+++ b/app/components/workbench/Workbench.client.tsx
@@ -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(() => {
diff --git a/app/lib/common/prompts/prompts.ts b/app/lib/common/prompts/prompts.ts
index 6e8b416a..7aba78cc 100644
--- a/app/lib/common/prompts/prompts.ts
+++ b/app/lib/common/prompts/prompts.ts
@@ -355,9 +355,14 @@ 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
\` 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.
+ - \`npm install\` will automatically run every time \`package.json\` is updated, so there's no need for you 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 \` 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:
@@ -377,33 +382,32 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
- Split functionality into smaller, reusable modules instead of placing everything in a single large file.
- Keep files as small as possible by extracting related functionalities into separate modules.
- Use imports to connect these modules together effectively.
-
- 15. Use Unsplash for stock photos
- - ONLY use valid, existing Unsplash URLs
- **Overall Goal:** Create visually stunning, unique, highly interactive, content-rich, and production-ready applications. Avoid generic templates.
+ Overall Goal: Create visually stunning, unique, highly interactive, content-rich, and production-ready applications. Avoid generic templates.
- **Visual Identity & Branding:**
+ 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).
+ - Use Unsplash for stock photos
+ - ONLY use valid, existing Unsplash URLs
- **Layout & Structure:**
+ 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:**
+ 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.
- **Technical Excellence:**
+ 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.
@@ -521,6 +525,7 @@ Here are some examples of correct usage of artifacts:
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.).
+ CRITICAL: You MUST NEVER include or add the expo-dev-client package.
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:
diff --git a/app/lib/stores/previews.ts b/app/lib/stores/previews.ts
index 1dd54871..01d56cd7 100644
--- a/app/lib/stores/previews.ts
+++ b/app/lib/stores/previews.ts
@@ -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