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