feat(design): add design scheme support and UI improvements

- Implement design scheme system with palette, typography, and feature customization
- Add color scheme dialog for user customization
- Update chat UI components to use design scheme values
- Improve header actions with consolidated deploy and export buttons
- Adjust layout spacing and styling across multiple components (chat, workbench etc...)
- Add model and provider info to chat messages
- Refactor workbench and sidebar components for better responsiveness

app/lib/common/prompt-library.ts

@@ -1,11 +1,13 @@
 import { getSystemPrompt } from './prompts/prompts';
 import optimized from './prompts/optimized';
 import { getFineTunedPrompt } from './prompts/new-prompt';
+import type { DesignScheme } from '~/types/design-scheme';
 
 export interface PromptOptions {
   cwd: string;
   allowedHtmlElements: string[];
   modificationTagName: string;
+  designScheme?: DesignScheme;
   supabase?: {
     isConnected: boolean;
     hasSelectedProject: boolean;
@@ -28,12 +30,12 @@ export class PromptLibrary {
     default: {
       label: 'Default Prompt',
       description: 'This is the battle tested default system Prompt',
-      get: (options) => getSystemPrompt(options.cwd, options.supabase),
+      get: (options) => getSystemPrompt(options.cwd, options.supabase, options.designScheme),
     },
     enhanced: {
       label: 'Fine Tuned Prompt',
       description: 'An fine tuned prompt for better results',
-      get: (options) => getFineTunedPrompt(options.cwd, options.supabase),
+      get: (options) => getFineTunedPrompt(options.cwd, options.supabase, options.designScheme),
     },
     optimized: {
       label: 'Optimized Prompt (experimental)',

app/lib/common/prompts/new-prompt.ts

@@ -1,3 +1,4 @@
+import type { DesignScheme } from '~/types/design-scheme';
 import { WORK_DIR } from '~/utils/constants';
 import { allowedHTMLElements } from '~/utils/markdown';
 import { stripIndents } from '~/utils/stripIndent';
@@ -9,6 +10,7 @@ export const getFineTunedPrompt = (
     hasSelectedProject: boolean;
     credentials?: { anonKey?: string; supabaseUrl?: string };
   },
+  designScheme?: DesignScheme,
 ) => `
 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.
 
@@ -324,6 +326,14 @@ The year is 2025.
 <design_instructions>
   When creating designs or UIs for applications, follow these guidelines indefinitely this is non-negotiable:
 
+  <user_provided_design>
+    USER PROVIDED DESIGN SCHEME:
+    - ALWAYS use the user provided design scheme when creating designs unless the user specifically requests otherwise.
+    FONT: ${JSON.stringify(designScheme?.font)}
+    COLOR PALETTE: ${JSON.stringify(designScheme?.palette)}
+    FEATURES: ${JSON.stringify(designScheme?.features)}
+  </user_provided_design>
+
   CRITICAL:
   - Always strive for professional, beautiful, and unique designs
   - All designs should be fully featured and worthy of production use

app/lib/common/prompts/prompts.ts

@@ -1,3 +1,4 @@
+import type { DesignScheme } from '~/types/design-scheme';
 import { WORK_DIR } from '~/utils/constants';
 import { allowedHTMLElements } from '~/utils/markdown';
 import { stripIndents } from '~/utils/stripIndent';
@@ -9,6 +10,7 @@ export const getSystemPrompt = (
     hasSelectedProject: boolean;
     credentials?: { anonKey?: string; supabaseUrl?: string };
   },
+  designScheme?: DesignScheme,
 ) => `
 You are Bolt, an expert AI assistant and exceptional senior software developer with vast knowledge across multiple programming languages, frameworks, and best practices.
 
@@ -392,6 +394,14 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
   <design_instructions>
     Overall Goal: Create visually stunning, unique, highly interactive, content-rich, and production-ready applications. Avoid generic templates.
 
+    <user_provided_design>
+      USER PROVIDED DESIGN SCHEME:
+      - ALWAYS use the user provided design scheme when creating designs unless the user specifically requests otherwise.
+      FONT: ${JSON.stringify(designScheme?.font)}
+      COLOR PALETTE: ${JSON.stringify(designScheme?.palette)}
+      FEATURES: ${JSON.stringify(designScheme?.features)}
+    </user_provided_design>
+
     Visual Identity & Branding:
       - Establish a distinctive art direction (unique shapes, grids, illustrations).
       - Use premium typography with refined hierarchy and spacing.