feat: add element inspector with chat integration

- Implement element inspector tool for preview iframe with hover/click detection
- Add inspector panel UI to display element details and styles
- Integrate selected elements into chat messages for reference
- Style improvements for chat messages and scroll behavior
- Add inspector script injection to preview iframe
- Support element selection and context in chat prompts
-Redesign Messgaes, Workbench and Header for a more refined look allowing more workspace in view

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

@@ -326,14 +326,6 @@ 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
@@ -438,6 +430,14 @@ The year is 2025.
   - Use CSS Grid and Flexbox for layouts
   - Implement appropriate container queries when needed
   - Structure mobile-first designs that progressively enhance for larger screens
+
+  <user_provided_design>
+    USER PROVIDED DESIGN SCHEME:
+    - ALWAYS use the user provided design scheme when creating designs ensuring it complies with the professionalism of design instructions below, 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>
 </design_instructions>
 
 <mobile_app_instructions>

app/lib/hooks/StickToBottom.tsx

@@ -133,6 +133,7 @@ function Content({ children, ...props }: StickToBottomContentProps) {
       <div {...props} ref={context.contentRef}>
         {typeof children === 'function' ? children(context) : children}
       </div>
+      {/* Blur effect overlay */}
     </div>
   );
 }

app/lib/webcontainer/index.ts

@@ -34,6 +34,10 @@ if (!import.meta.env.SSR) {
 
         const { workbenchStore } = await import('~/lib/stores/workbench');
 
+        const response = await fetch('/inspector-script.js');
+        const inspectorScript = await response.text();
+        await webcontainer.setPreviewScript(inspectorScript);
+
         // Listen for preview errors
         webcontainer.on('preview-message', (message) => {
           console.log('WebContainer preview message:', message);