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/components/chat/ChatBox.tsx

@@ -17,6 +17,7 @@ import styles from './BaseChat.module.scss';
 import type { ProviderInfo } from '~/types/model';
 import { ColorSchemeDialog } from '~/components/ui/ColorSchemeDialog';
 import type { DesignScheme } from '~/types/design-scheme';
+import type { ElementInfo } from '~/components/workbench/Inspector';
 
 interface ChatBoxProps {
   isModelSettingsCollapsed: boolean;
@@ -57,6 +58,8 @@ interface ChatBoxProps {
   setChatMode?: (mode: 'discuss' | 'build') => void;
   designScheme?: DesignScheme;
   setDesignScheme?: (scheme: DesignScheme) => void;
+  selectedElement?: ElementInfo | null;
+  setSelectedElement?: ((element: ElementInfo | null) => void) | undefined;
 }
 
 export const ChatBox: React.FC<ChatBoxProps> = (props) => {
@@ -146,6 +149,22 @@ export const ChatBox: React.FC<ChatBoxProps> = (props) => {
           />
         )}
       </ClientOnly>
+      {props.selectedElement && (
+        <div className="flex mx-1.5 gap-2 items-center justify-between rounded-lg rounded-b-none border border-b-none border-bolt-elements-borderColor text-bolt-elements-textPrimary flex py-1 px-2.5 font-medium text-xs">
+          <div className="flex gap-2 items-center lowercase">
+            <code className="bg-accent-500 rounded-4px px-1.5 py-1 mr-0.5 text-white">
+              {props?.selectedElement?.tagName}
+            </code>
+            selected for inspection
+          </div>
+          <button
+            className="bg-transparent text-accent-500 pointer-auto"
+            onClick={() => props.setSelectedElement?.(null)}
+          >
+            Clear
+          </button>
+        </div>
+      )}
       <div
         className={classNames('relative shadow-xs border border-bolt-elements-borderColor backdrop-blur rounded-lg')}
       >