Role: You are a specialized AI assistant for web automation and user interface enhancement on the Hugging Face platform. Your primary function is to inject, manage, and optimize interactive tools that streamline AI-assisted coding workflows.

Goal: Automatically detect the current Hugging Face AI environment (Qwen, Zai, or generic HF Chat), inject a fully functional control panel, enable clipboard-based data transfer between AI instances, enhance the user interface with floating action buttons, and provide keyboard shortcuts for rapid interaction.

Constraints:

Operate exclusively on domains containing "huggingface.co".
Do not modify or access any data outside the scope of the Hugging Face chat interface.
Ensure all injected elements use non-blocking, asynchronous execution.
Maintain compatibility with dynamic DOM updates via MutationObserver.
Use only client-side APIs (e.g., localStorage, Clipboard API) without external dependencies.
Steps:

Upon page load, verify the domain is Hugging Face.
Detect the active AI type (Qwen, Zai, or HF) from the URL.
Inject a fixed-position control panel with the following action buttons:
"✨ Enhance Interface": Apply smooth scroll, padding, and inject floating buttons for scroll-to-bottom and input focus.
"📋 Smart Paste": Read clipboard text and auto-fill the first available input field (textarea, input, or contenteditable).
"📥 Extract Response": Scrape the latest AI message using multiple selectors, extract clean text, and copy it to clipboard.
"➡️ Send to ZAI" (Qwen only): Extract latest response and store in localStorage, then open Zai AI page in new tab.
"🖥️ Full Screen Mode": Expand chat container to full viewport with optimized layout.
"🔄 Reset Page": Confirm and reload the page, clearing any stored data.
Implement Ctrl+Shift+V to trigger Smart Paste and Ctrl+Shift+C to trigger Extract Response.
On Zai pages, check localStorage every second for incoming data from Qwen; if found, auto-paste into input field and clear storage.
Allow panel minimization via minimize button and full removal via close button.
Display status messages (success/error) for user feedback, auto-hiding after4 seconds.
Ensure all styles are applied with !important to override existing CSS.
Expose bookmarkletManager and initHFBookmarklet() globally for manual execution.
Success Criteria:

Panel is injected within1 second of page load.
All buttons perform their intended actions without error.
Clipboard operations succeed when permitted.
No console errors or memory leaks occur.
UI remains responsive during all operations.
Final Output: Execute the above steps using the BookmarkletManager class and auto-initialize when the page is ready.

components/hf-panel.js

@@ -0,0 +1,428 @@
+class HuggingFacePanel extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .hf-panel {
+          position: fixed !important;
+          top: 20px !important;
+          right: 20px !important;
+          z-index: 999999 !important;
+          background: rgba(0, 0, 0, 0.85) !important;
+          backdrop-filter: blur(10px) !important;
+          border-radius: 12px !important;
+          padding: 16px !important;
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
+          border: 1px solid rgba(255, 255, 255, 0.1) !important;
+          color: white !important;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+          width: 300px !important;
+          transition: all 0.3s ease !important;
+        }
+        
+        .hf-panel.minimized {
+          width: 50px !important;
+          height: 50px !important;
+          padding: 8px !important;
+        }
+        
+        .hf-panel-header {
+          display: flex !important;
+          justify-content: space-between !important;
+          align-items: center !important;
+          margin-bottom: 12px !important;
+        }
+        
+        .hf-panel-title {
+          font-weight: 600 !important;
+          font-size: 16px !important;
+        }
+        
+        .hf-panel-buttons {
+          display: flex !important;
+          gap: 8px !important;
+        }
+        
+        .hf-btn {
+          background: rgba(255, 255, 255, 0.1) !important;
+          border: none !important;
+          color: white !important;
+          padding: 8px 12px !important;
+          border-radius: 6px !important;
+          cursor: pointer !important;
+          font-size: 14px !important;
+          transition: all 0.2s ease !important;
+          display: flex !important;
+          align-items: center !important;
+          gap: 6px !important;
+        }
+        
+        .hf-btn:hover {
+          background: rgba(255, 255, 255, 0.2) !important;
+        }
+        
+        .hf-btn.primary {
+          background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
+        }
+        
+        .hf-btn.primary:hover {
+          background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
+        }
+        
+        .hf-btn.minimize-btn, .hf-btn.close-btn {
+          padding: 6px !important;
+          width: 32px !important;
+          height: 32px !important;
+          justify-content: center !important;
+        }
+        
+        .hf-panel-content {
+          display: flex !important;
+          flex-direction: column !important;
+          gap: 10px !important;
+        }
+        
+        .hf-status {
+          padding: 10px !important;
+          border-radius: 6px !important;
+          font-size: 14px !important;
+          text-align: center !important;
+          display: none !important;
+        }
+        
+        .hf-status.success {
+          background: rgba(16, 185, 129, 0.2) !important;
+          border: 1px solid rgba(16, 185, 129, 0.3) !important;
+          display: block !important;
+        }
+        
+        .hf-status.error {
+          background: rgba(239, 68, 68, 0.2) !important;
+          border: 1px solid rgba(239, 68, 68, 0.3) !important;
+          display: block !important;
+        }
+        
+        .minimized .hf-panel-content,
+        .minimized .hf-panel-header .hf-panel-title,
+        .minimized .hf-panel-buttons:not(.minimize-controls) {
+          display: none !important;
+        }
+        
+        .minimized .minimize-controls {
+          position: absolute !important;
+          top: 50% !important;
+          left: 50% !important;
+          transform: translate(-50%, -50%) !important;
+        }
+      </style>
+      
+      <div class="hf-panel" id="hfPanel">
+        <div class="hf-panel-header">
+          <div class="hf-panel-title">HF AI Assistant</div>
+          <div class="hf-panel-buttons minimize-controls">
+            <button class="hf-btn minimize-btn" id="minimizeBtn">−</button>
+          </div>
+          <div class="hf-panel-buttons">
+            <button class="hf-btn minimize-btn" id="minimizeBtn">−</button>
+            <button class="hf-btn close-btn" id="closeBtn">✕</button>
+          </div>
+        </div>
+        
+        <div class="hf-panel-content">
+          <button class="hf-btn primary" id="enhanceBtn">
+            <span>✨</span> Enhance Interface
+          </button>
+          <button class="hf-btn" id="pasteBtn">
+            <span>📋</span> Smart Paste
+          </button>
+          <button class="hf-btn" id="extractBtn">
+            <span>📥</span> Extract Response
+          </button>
+          <button class="hf-btn" id="sendToZaiBtn" style="display: none;">
+            <span>➡️</span> Send to ZAI
+          </button>
+          <button class="hf-btn" id="fullscreenBtn">
+            <span>🖥️</span> Full Screen Mode
+          </button>
+          <button class="hf-btn" id="resetBtn">
+            <span>🔄</span> Reset Page
+          </button>
+          
+          <div class="hf-status" id="statusMessage"></div>
+        </div>
+      </div>
+    `;
+    
+    this.init();
+  }
+  
+  init() {
+    // Add event listeners
+    this.shadowRoot.getElementById('enhanceBtn').addEventListener('click', () => this.enhanceInterface());
+    this.shadowRoot.getElementById('pasteBtn').addEventListener('click', () => this.smartPaste());
+    this.shadowRoot.getElementById('extractBtn').addEventListener('click', () => this.extractResponse());
+    this.shadowRoot.getElementById('sendToZaiBtn').addEventListener('click', () => this.sendToZai());
+    this.shadowRoot.getElementById('fullscreenBtn').addEventListener('click', () => this.fullscreenMode());
+    this.shadowRoot.getElementById('resetBtn').addEventListener('click', () => this.resetPage());
+    this.shadowRoot.getElementById('minimizeBtn').addEventListener('click', () => this.toggleMinimize());
+    this.shadowRoot.getElementById('closeBtn').addEventListener('click', () => this.removePanel());
+    
+    // Check if we're on Qwen to show Send to ZAI button
+    if (window.location.href.includes('qwen')) {
+      this.shadowRoot.getElementById('sendToZaiBtn').style.display = 'flex';
+    }
+    
+    // Add keyboard shortcuts
+    document.addEventListener('keydown', (e) => {
+      if (e.ctrlKey && e.shiftKey) {
+        if (e.key === 'V' || e.key === 'v') {
+          e.preventDefault();
+          this.smartPaste();
+        } else if (e.key === 'C' || e.key === 'c') {
+          e.preventDefault();
+          this.extractResponse();
+        }
+      }
+    });
+    
+    // Check for incoming data on Zai pages
+    if (window.location.href.includes('zai')) {
+      this.checkForIncomingData();
+    }
+  }
+  
+  showMessage(message, type = 'success') {
+    const statusEl = this.shadowRoot.getElementById('statusMessage');
+    statusEl.textContent = message;
+    statusEl.className = `hf-status ${type}`;
+    
+    setTimeout(() => {
+      statusEl.className = 'hf-status';
+    }, 4000);
+  }
+  
+  enhanceInterface() {
+    // Apply smooth scroll
+    document.documentElement.style.scrollBehavior = 'smooth';
+    
+    // Add padding to body
+    document.body.style.paddingBottom = '100px';
+    
+    // Inject floating buttons
+    if (!document.getElementById('hfFloatingButtons')) {
+      const floatingButtons = document.createElement('div');
+      floatingButtons.id = 'hfFloatingButtons';
+      floatingButtons.innerHTML = `
+        <style>
+          #hfFloatingButtons {
+            position: fixed !important;
+            bottom: 20px !important;
+            right: 20px !important;
+            z-index: 99999 !important;
+            display: flex !important;
+            flex-direction: column !important;
+            gap: 10px !important;
+          }
+          
+          .hf-float-btn {
+            width: 50px !important;
+            height: 50px !important;
+            border-radius: 50% !important;
+            background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
+            color: white !important;
+            border: none !important;
+            cursor: pointer !important;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            font-size: 20px !important;
+            transition: all 0.2s ease !important;
+          }
+          
+          .hf-float-btn:hover {
+            transform: scale(1.1) !important;
+            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
+          }
+        </style>
+        <button class="hf-float-btn" id="scrollToBottomBtn">⬇️</button>
+        <button class="hf-float-btn" id="focusInputBtn">⌨️</button>
+      `;
+      
+      document.body.appendChild(floatingButtons);
+      
+      // Add event listeners for floating buttons
+      document.getElementById('scrollToBottomBtn').addEventListener('click', () => {
+        window.scrollTo(0, document.body.scrollHeight);
+      });
+      
+      document.getElementById('focusInputBtn').addEventListener('click', () => {
+        const input = document.querySelector('textarea, input[type="text"], [contenteditable="true"]');
+        if (input) {
+          input.focus();
+        }
+      });
+    }
+    
+    this.showMessage('Interface enhanced successfully!');
+  }
+  
+  async smartPaste() {
+    try {
+      const text = await navigator.clipboard.readText();
+      const input = document.querySelector('textarea, input[type="text"], [contenteditable="true"]');
+      
+      if (input) {
+        if (input.tagName === 'INPUT' || input.tagName === 'TEXTAREA') {
+          input.value = text;
+        } else {
+          input.textContent = text;
+        }
+        input.focus();
+        this.showMessage('Text pasted successfully!');
+      } else {
+        this.showMessage('No input field found', 'error');
+      }
+    } catch (err) {
+      this.showMessage('Failed to read clipboard: ' + err.message, 'error');
+    }
+  }
+  
+  extractResponse() {
+    // Multiple selectors for different AI responses
+    const selectors = [
+      '[data-testid="bot-message"]',
+      '.bot-message',
+      '.ai-response',
+      '.message-assistant',
+      '.response',
+      'div[class*="message"][class*="assistant"]',
+      'div[class*="bot"]',
+      'div[class*="ai"]'
+    ];
+    
+    let responseText = '';
+    
+    for (const selector of selectors) {
+      const elements = document.querySelectorAll(selector);
+      if (elements.length > 0) {
+        const lastElement = elements[elements.length - 1];
+        responseText = lastElement.textContent.trim();
+        break;
+      }
+    }
+    
+    if (responseText) {
+      navigator.clipboard.writeText(responseText)
+        .then(() => this.showMessage('Response copied to clipboard!'))
+        .catch(err => this.showMessage('Failed to copy: ' + err.message, 'error'));
+    } else {
+      this.showMessage('No response found to extract', 'error');
+    }
+  }
+  
+  sendToZai() {
+    // Extract latest response
+    const selectors = [
+      '[data-testid="bot-message"]',
+      '.bot-message',
+      '.ai-response',
+      '.message-assistant',
+      '.response',
+      'div[class*="message"][class*="assistant"]',
+      'div[class*="bot"]',
+      'div[class*="ai"]'
+    ];
+    
+    let responseText = '';
+    
+    for (const selector of selectors) {
+      const elements = document.querySelectorAll(selector);
+      if (elements.length > 0) {
+        const lastElement = elements[elements.length - 1];
+        responseText = lastElement.textContent.trim();
+        break;
+      }
+    }
+    
+    if (responseText) {
+      try {
+        localStorage.setItem('hfToZaiData', responseText);
+        window.open('https://zai.com', '_blank');
+        this.showMessage('Sent to ZAI successfully!');
+      } catch (err) {
+        this.showMessage('Failed to send to ZAI: ' + err.message, 'error');
+      }
+    } else {
+      this.showMessage('No response found to send', 'error');
+    }
+  }
+  
+  checkForIncomingData() {
+    setInterval(() => {
+      const data = localStorage.getItem('hfToZaiData');
+      if (data) {
+        const input = document.querySelector('textarea, input[type="text"], [contenteditable="true"]');
+        if (input) {
+          if (input.tagName === 'INPUT' || input.tagName === 'TEXTAREA') {
+            input.value = data;
+          } else {
+            input.textContent = data;
+          }
+          input.focus();
+          localStorage.removeItem('hfToZaiData');
+          this.showMessage('Data received from HF!');
+        }
+      }
+    }, 1000);
+  }
+  
+  fullscreenMode() {
+    const chatContainer = document.querySelector('.chat-container, .conversation, .chat, main') || document.body;
+    
+    if (!document.fullscreenElement) {
+      if (chatContainer.requestFullscreen) {
+        chatContainer.requestFullscreen();
+      } else if (chatContainer.webkitRequestFullscreen) {
+        chatContainer.webkitRequestFullscreen();
+      } else if (chatContainer.msRequestFullscreen) {
+        chatContainer.msRequestFullscreen();
+      }
+      
+      // Optimize layout
+      chatContainer.style.maxWidth = '100%';
+      chatContainer.style.width = '100%';
+      chatContainer.style.margin = '0';
+      chatContainer.style.padding = '20px';
+      
+      this.showMessage('Fullscreen mode activated!');
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      }
+      this.showMessage('Exited fullscreen mode');
+    }
+  }
+  
+  resetPage() {
+    if (confirm('Are you sure you want to reset the page? This will reload the page and clear stored data.')) {
+      localStorage.removeItem('hfToZaiData');
+      window.location.reload();
+    }
+  }
+  
+  toggleMinimize() {
+    const panel = this.shadowRoot.getElementById('hfPanel');
+    panel.classList.toggle('minimized');
+  }
+  
+  removePanel() {
+    this.remove();
+  }
+}
+
+customElements.define('hf-panel', HuggingFacePanel);

index.html

@@ -152,9 +152,60 @@
             <span id="toast-message">Copied to clipboard!</span>
         </div>
     </div>
-
+    <script src="components/hf-panel.js"></script>
     <script src="script.js"></script>
     <script>feather.replace();</script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+<script>
+// BookmarkletManager class
+class BookmarkletManager {
+  constructor() {
+    this.panel = null;
+  }
+
+  init() {
+    // Check if we're on Hugging Face
+    if (!window.location.href.includes('huggingface.co')) {
+      return;
+    }
+
+    // Wait for DOM to be ready
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => this.injectPanel());
+    } else {
+      this.injectPanel();
+    }
+  }
+
+  injectPanel() {
+    // Check if panel already exists
+    if (document.querySelector('hf-panel')) {
+      return;
+    }
+
+    // Create and inject panel
+    this.panel = document.createElement('hf-panel');
+    document.body.appendChild(this.panel);
+  }
+
+  removePanel() {
+    if (this.panel) {
+      this.panel.remove();
+      this.panel = null;
+    }
+  }
+}
+
+// Expose globally
+window.bookmarkletManager = new BookmarkletManager();
+
+// Auto-initialize when page is ready
+window.initHFBookmarklet = () => {
+  window.bookmarkletManager.init();
+};
+
+// Run initialization
+window.initHFBookmarklet();
+</script>
 </body>
-</html>
+</html>

script.js

@@ -491,8 +491,59 @@ copyBtn.addEventListener('click', copyToClipboard);
 
 // Initialize tabs
 switchTabs();
-
 // Auto-focus on load
 window.addEventListener('load', () => {
     inputText.focus();
-});
+});
+
+// Hugging Face Bookmarklet Integration
+class BookmarkletManager {
+  constructor() {
+    this.panel = null;
+  }
+
+  init() {
+    // Check if we're on Hugging Face
+    if (!window.location.href.includes('huggingface.co')) {
+      return;
+    }
+
+    // Wait for DOM to be ready
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => this.injectPanel());
+    } else {
+      this.injectPanel();
+    }
+  }
+
+  injectPanel() {
+    // Check if panel already exists
+    if (document.querySelector('hf-panel')) {
+      return;
+    }
+
+    // Create and inject panel
+    this.panel = document.createElement('hf-panel');
+    document.body.appendChild(this.panel);
+  }
+
+  removePanel() {
+    if (this.panel) {
+      this.panel.remove();
+      this.panel = null;
+    }
+  }
+}
+
+// Expose globally
+window.bookmarkletManager = new BookmarkletManager();
+
+// Auto-initialize when page is ready
+window.initHFBookmarklet = () => {
+  window.bookmarkletManager.init();
+};
+
+// Run initialization if we're on Hugging Face
+if (window.location.href.includes('huggingface.co')) {
+  window.initHFBookmarklet();
+}