feat(previews): add refreshAllPreviews method to refresh all previews

This commit introduces the `refreshAllPreviews` method in the `PreviewsStore` class, which iterates through all previews and triggers a file change broadcast for each. This ensures that all previews are updated after a file save operation.

refactor(CodeBlock): handle unsupported languages by falling back to plaintext

The `CodeBlock` component now defaults to 'plaintext' when an unsupported language is detected, improving the user experience by avoiding unsupported language errors.

prompts: update dependency installation instructions

The prompts documentation has been updated to clarify the process of installing dependencies, emphasizing the importance of updating `package.json` first and avoiding individual package installations.

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 (
       <div className={classNames('relative group text-left', className)}>

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,7 +324,14 @@ export const Workbench = memo(
     }, []);
 
     const onFileSave = useCallback(() => {
-      workbenchStore.saveCurrentDocument().catch(() => {
+      workbenchStore
+        .saveCurrentDocument()
+        .then(() => {
+          // Explicitly refresh all previews after a file save
+          const previewStore = usePreviewStore();
+          previewStore.refreshAllPreviews();
+        })
+        .catch(() => {
           toast.error('Failed to update file content');
         });
     }, []);

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 <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.
+      - \`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 <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:
 
@@ -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
   </artifact_instructions>
 
   <design_instructions>
-    **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:

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