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/Markdown.tsx

@@ -42,6 +42,42 @@ export const Markdown = memo(
             return <Artifact messageId={messageId} />;
           }
 
+          if (className?.includes('__boltSelectedElement__')) {
+            const messageId = node?.properties.dataMessageId as string;
+            const elementDataAttr = node?.properties.dataElement as string;
+
+            // Parse the element data if it exists
+            let elementData: any = null;
+
+            if (elementDataAttr) {
+              try {
+                elementData = JSON.parse(elementDataAttr);
+              } catch (e) {
+                console.error('Failed to parse element data:', e);
+              }
+            }
+
+            if (!messageId) {
+              logger.error(`Invalid message id ${messageId}`);
+            }
+
+            return (
+              <div className="bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor rounded-lg p-3 my-2">
+                <div className="flex items-center gap-2 mb-2">
+                  <span className="text-xs font-mono bg-bolt-elements-background-depth-2 px-2 py-1 rounded text-bolt-elements-textTer">
+                    {elementData?.tagName}
+                  </span>
+                  {elementData?.className && (
+                    <span className="text-xs text-bolt-elements-textSecondary">.{elementData.className}</span>
+                  )}
+                </div>
+                <code className="block text-sm !text-bolt-elements-textSecondary !bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor p-2 rounded">
+                  {elementData?.displayText}
+                </code>
+              </div>
+            );
+          }
+
           if (className?.includes('__boltThought__')) {
             return <ThoughtBox title="Thought process">{children}</ThoughtBox>;
           }
@@ -110,7 +146,12 @@ export const Markdown = memo(
                   } else if (type === 'message' && append) {
                     append({
                       id: `quick-action-message-${Date.now()}`,
-                      content: `[Model: ${model}]\n\n[Provider: ${provider?.name}]\n\n${message}`,
+                      content: [
+                        {
+                          type: 'text',
+                          text: `[Model: ${model}]\n\n[Provider: ${provider?.name}]\n\n${message}`,
+                        },
+                      ] as any, // Type assertion to bypass compiler check
                       role: 'user',
                     });
                     console.log('Message appended:', message);
@@ -118,7 +159,12 @@ export const Markdown = memo(
                     setChatMode('build');
                     append({
                       id: `quick-action-implement-${Date.now()}`,
-                      content: `[Model: ${model}]\n\n[Provider: ${provider?.name}]\n\n${message}`,
+                      content: [
+                        {
+                          type: 'text',
+                          text: `[Model: ${model}]\n\n[Provider: ${provider?.name}]\n\n${message}`,
+                        },
+                      ] as any, // Type assertion to bypass compiler check
                       role: 'user',
                     });
                   } else if (type === 'link' && typeof href === 'string') {