Queue functionality added

Author: MaxITService

buttons.js

@@ -103,6 +103,19 @@ window.MaxExtensionButtons = {
  * @param {boolean} autoSend - Flag indicating whether to automatically send the message
  */
 function processCustomSendButtonClick(event, customText, autoSend) {
+    // Check if we are in queue mode in the floating panel.
+    // This check must be first.
+    if (window.MaxExtensionFloatingPanel && window.MaxExtensionFloatingPanel.isPanelVisible && globalMaxExtensionConfig.enableQueueMode) {
+        const buttonConfig = {
+            icon: event.target.innerHTML,
+            text: customText,
+            autoSend: autoSend
+        };
+        // Add to queue and stop further processing. The engine handles the rest.
+        window.MaxExtensionFloatingPanel.addToQueue(buttonConfig);
+        return;
+    }
+
     event.preventDefault();
     logConCgp('[buttons] Custom send button clicked');
 

code-notes.md

@@ -1,4 +1,5 @@
 // code-notes.md
+
 # OneClickPrompts Chrome Extension - Codebase Overview
 
 This document provides a high-level overview of the OneClickPrompts Chrome Extension codebase. It describes the purpose of each file and its role within the extension. Extension was previously called "ChatGPT Quick Buttons for your text".
@@ -87,10 +88,20 @@ The OneClickPrompts extension enhances AI chat platforms like ChatGPT, Claude, C
 
 ### `floating-panel-ui-queue.js`
 
-- **Purpose:** Initializes the interactive elements within the floating panel's queue section.
-- **Role:** This script finds the pre-existing queue elements loaded from `floating-panel.html` and attaches the necessary JavaScript logic and event handlers. It no longer creates the DOM elements itself. Key functions:
+- **Purpose:** Initializes the interactive elements within the floating panel's queue section and handles rendering the queue's visual state.
+- **Role:** This script finds the pre-existing queue elements loaded from `floating-panel.html` and attaches the necessary JavaScript logic and event handlers. It is responsible for all direct DOM manipulation of the queue UI. Key functions:
   - `initializeQueueSection()`: Finds the queue toggle, delay input, and control buttons in the DOM and wires up their functionality.
-- **Dependencies:** `floating-panel.html` (relies on its structure), `interface.js` (uses `createToggle`).
+  - `renderQueueDisplay()`: Clears and redraws the list of queued prompt icons.
+  - `updateQueueControlsState()`: Manages the enabled/disabled state and icons of the play/pause and reset buttons.
+- **Dependencies:** `floating-panel.html`, `interface.js`, `floating-panel-queue-engine.js`.
+
+### `floating-panel-ui-engine.js`
+
+- **Purpose:** Contains the core state management and execution logic for the prompt queue.
+- **Role:** This script is UI-agnostic and manages the `promptQueue` array, the sending process, timers, and state flags (`isQueueRunning`). It provides the backend functionality for the queue feature. Key functions:
+  - `addToQueue()`, `removeFromQueue()`, `startQueue()`, `pauseQueue()`, `resetQueue()`: Manage the queue's lifecycle.
+  - `processNextQueueItem()`: The core loop that sends a prompt and sets a timer for the next.
+- **Dependencies:** `floating-panel.js`, `floating-panel-ui-queue.js` (calls UI update functions).
 
 ### `floating-panel-settings.js`
 
@@ -139,7 +150,7 @@ The OneClickPrompts extension enhances AI chat platforms like ChatGPT, Claude, C
 ### `buttons.js`
 
 - **Purpose:** Manages the creation and functionality of custom send buttons.
-- **Role:** Creates button elements based on configuration, assigns keyboard shortcuts, and handles click events across different supported sites. It decides which site-specific functions are called.
+- **Role:** Creates button elements based on configuration, assigns keyboard shortcuts, and handles click events across different supported sites. It decides which site-specific functions are called. It also contains the logic to divert clicks to the prompt queue when Queue Mode is active in the floating panel.
 
 ### `buttons-init.js`
 
@@ -253,12 +264,14 @@ The extension operates as follows:
 4.  The content scripts retrieve the configuration from the service worker and inject the custom buttons into the page.
 5.  Users can toggle between inline injected buttons and the floating panel via the toggle button (🔼).
 6.  The floating panel's position, size, and visibility state are saved per website and restored when revisiting.
-7.  When the user clicks a custom button (either in the inline container or floating panel), the appropriate site-specific function is called to insert the text and trigger the send button.
+7.  When the user clicks a custom button:
+    - If the floating panel is active and Queue Mode is on, the prompt is added to a queue. The queue sends prompts sequentially with a configurable delay.
+    - Otherwise, the appropriate site-specific function is called to insert the text and trigger the send button.
 
 ## Additional Notes
 
 - The extension uses a resilient injection mechanism to ensure that the custom buttons remain active even when the target website dynamically updates its content.
 - The `InjectionTargetsOnWebsite` class in `utils.js` centralizes the CSS selectors for different websites, making it easier to support new platforms.
 - The floating panel provides an alternative UI that can be positioned anywhere on the screen, offering flexibility for different workflows.
 - Button configurations are consistently applied between the inline injection and floating panel modes.
-- The extension uses debounced saving to prevent excessive storage writes when the user is dragging or resizing the floating panel.
+- The extension uses debounced saving to prevent excessive storage writes when the user is dragging or resizing the floating panel.

config.js

@@ -230,9 +230,13 @@ async function getCurrentProfileConfig() {
                     logConfigurationRelatedStuff(`Initialized missing 'customButtons' for profile: ${profileName}`);
                 }
                 // Ensure queue settings exist for backward compatibility
-                if (typeof profile.queueDelaySeconds === 'undefined') {
-                    profile.queueDelaySeconds = 15; // Default delay in seconds
-                    logConfigurationRelatedStuff(`Initialized missing 'queueDelaySeconds' for profile: ${profileName}`);
+                if (typeof profile.queueDelayMinutes === 'undefined') {
+                    profile.queueDelayMinutes = 5; // Default delay in minutes
+                    logConfigurationRelatedStuff(`Initialized missing 'queueDelayMinutes' for profile: ${profileName}`);
+                }
+                if (typeof profile.enableQueueMode === 'undefined') {
+                    profile.enableQueueMode = false;
+                    logConfigurationRelatedStuff(`Initialized missing 'enableQueueMode' for profile: ${profileName}`);
                 }
                 return profile;
             }
@@ -245,9 +249,13 @@ async function getCurrentProfileConfig() {
             defaultProfile.customButtons = [];
             logConfigurationRelatedStuff("Initialized missing 'customButtons' for default profile");
         }
-        if (typeof defaultProfile.queueDelaySeconds === 'undefined') {
-            defaultProfile.queueDelaySeconds = 15;
-            logConfigurationRelatedStuff("Initialized missing 'queueDelaySeconds' for default profile");
+        if (typeof defaultProfile.queueDelayMinutes === 'undefined') {
+            defaultProfile.queueDelayMinutes = 5;
+            logConfigurationRelatedStuff("Initialized missing 'queueDelayMinutes' for default profile");
+        }
+        if (typeof defaultProfile.enableQueueMode === 'undefined') {
+            defaultProfile.enableQueueMode = false;
+            logConfigurationRelatedStuff("Initialized missing 'enableQueueMode' for default profile");
         }
         return defaultProfile;
     } catch (error) {
@@ -534,5 +542,4 @@ chrome.storage.onChanged.addListener((changes, namespace) => {
             });
         }
     }
-});
-
+});

default-config.json

@@ -4,6 +4,8 @@
   "globalAutoSendEnabled": true,
   "enableShortcuts": true,
   "firstModificationDone": false,
+  "enableQueueMode": false,
+  "queueDelayMinutes": 5,
   "customButtons": [
     {
       "icon": "🧠",

floating-panel-ui-engine.js

@@ -0,0 +1,155 @@
+// Version: 1.0
+//
+// Documentation:
+// This file contains the core engine logic for the prompt queue feature.
+// It manages the queue's state, adding/removing items, and the sequential
+// sending process with delays. It is designed to be UI-agnostic.
+// All functions extend the window.MaxExtensionFloatingPanel namespace.
+//
+// Methods included:
+// - addToQueue(buttonConfig): Adds a prompt to the queue.
+// - removeFromQueue(index): Removes a prompt from the queue by its index.
+// - startQueue(): Begins the sequential sending process.
+// - pauseQueue(): Pauses the sending process.
+// - resetQueue(): Stops and clears the entire queue.
+// - processNextQueueItem(): The core function that sends one item and sets a timer for the next.
+// - getSiteSpecificSendFunction(): A helper to determine which site-specific send function to use.
+//
+// Dependencies:
+// - floating-panel.js: Provides the namespace and shared properties.
+// - floating-panel-ui-queue.js: Provides UI update functions like renderQueueDisplay.
+
+'use strict';
+
+/**
+ * Adds a prompt configuration to the queue.
+ * @param {object} buttonConfig - The configuration of the button clicked.
+ */
+window.MaxExtensionFloatingPanel.addToQueue = function (buttonConfig) {
+    if (this.promptQueue.length >= this.QUEUE_MAX_SIZE) {
+        logConCgp('[queue-engine] Queue is full. Cannot add more prompts.');
+        // Optional: Add visual feedback for the user
+        if (this.queueDisplayArea) {
+            this.queueDisplayArea.style.borderColor = 'red';
+            setTimeout(() => {
+                this.queueDisplayArea.style.borderColor = '';
+            }, 500);
+        }
+        return;
+    }
+
+    this.promptQueue.push(buttonConfig);
+    logConCgp('[queue-engine] Added to queue:', buttonConfig.text);
+    this.renderQueueDisplay();
+    this.updateQueueControlsState();
+};
+
+/**
+ * Removes a prompt from the queue at a specific index.
+ * @param {number} index - The index of the item to remove.
+ */
+window.MaxExtensionFloatingPanel.removeFromQueue = function (index) {
+    if (index > -1 && index < this.promptQueue.length) {
+        const removed = this.promptQueue.splice(index, 1);
+        logConCgp('[queue-engine] Removed from queue:', removed[0].text);
+        this.renderQueueDisplay();
+        this.updateQueueControlsState();
+    }
+};
+
+/**
+ * Starts the queue processing.
+ */
+window.MaxExtensionFloatingPanel.startQueue = function () {
+    if (this.isQueueRunning || this.promptQueue.length === 0) {
+        return;
+    }
+    this.isQueueRunning = true;
+    logConCgp('[queue-engine] Queue started.');
+    this.updateQueueControlsState();
+    this.processNextQueueItem();
+};
+
+/**
+ * Pauses the queue processing.
+ */
+window.MaxExtensionFloatingPanel.pauseQueue = function () {
+    this.isQueueRunning = false;
+    if (this.queueTimerId) {
+        clearTimeout(this.queueTimerId);
+        this.queueTimerId = null;
+    }
+    logConCgp('[queue-engine] Queue paused.');
+    this.updateQueueControlsState();
+};
+
+/**
+ * Resets the queue, clearing all items and stopping the process.
+ */
+window.MaxExtensionFloatingPanel.resetQueue = function () {
+    this.pauseQueue(); // Stop any running timers and set isQueueRunning to false
+    this.promptQueue = [];
+    logConCgp('[queue-engine] Queue reset.');
+    this.renderQueueDisplay();
+    this.updateQueueControlsState(); // This will disable buttons as needed
+};
+
+/**
+ * Processes the next item in the queue.
+ */
+window.MaxExtensionFloatingPanel.processNextQueueItem = function () {
+    if (!this.isQueueRunning) {
+        return;
+    }
+
+    if (this.promptQueue.length === 0) {
+        logConCgp('[queue-engine] Queue is empty. Stopping.');
+        this.pauseQueue(); // Effectively stops and resets the UI
+        return;
+    }
+
+    const item = this.promptQueue.shift(); // Get the first item and remove it
+    this.renderQueueDisplay(); // Update UI to show the item is gone
+    logConCgp(`[queue-engine] Sending item:`, item.text);
+
+    const sendFunction = this.getSiteSpecificSendFunction();
+    if (sendFunction) {
+        // A mock event object is sufficient for the send functions
+        const mockEvent = { preventDefault: () => { } };
+        sendFunction(mockEvent, item.text, item.autoSend);
+    } else {
+        logConCgp('[queue-engine] No send function found for this site. Stopping queue.');
+        this.resetQueue();
+        return;
+    }
+
+    // If there are more items, set a timeout for the next one
+    if (this.promptQueue.length > 0) {
+        const delayMs = (globalMaxExtensionConfig.queueDelayMinutes || 5) * 60 * 1000;
+        logConCgp(`[queue-engine] Waiting for ${delayMs / 1000 / 60} minutes before next item.`);
+        this.queueTimerId = setTimeout(() => this.processNextQueueItem(), delayMs);
+    } else {
+        logConCgp('[queue-engine] All items have been sent.');
+        this.pauseQueue(); // Queue finished, so pause/stop
+    }
+};
+
+/**
+ * Helper to get the site-specific send function.
+ * @returns {Function|null} The send function for the current site or null.
+ */
+window.MaxExtensionFloatingPanel.getSiteSpecificSendFunction = function () {
+    const activeSite = window.InjectionTargetsOnWebsite.activeSite;
+    switch (activeSite) {
+        case 'ChatGPT': return window.processChatGPTCustomSendButtonClick;
+        case 'Claude': return window.processClaudeCustomSendButtonClick;
+        case 'Copilot': return window.processCopilotCustomSendButtonClick;
+        case 'DeepSeek': return window.processDeepSeekCustomSendButtonClick;
+        case 'AIStudio': return window.processAIStudioCustomSendButtonClick;
+        case 'Grok': return window.processGrokCustomSendButtonClick;
+        case 'Gemini': return window.processGeminiCustomSendButtonClick;
+        default:
+            logConCgp(`[queue-engine] Unsupported site for queue: ${activeSite}`);
+            return null;
+    }
+};

floating-panel-ui-queue.js

@@ -8,6 +8,8 @@
 //
 // Methods included:
 // - initializeQueueSection(): Wires up the DOM structure for the queue UI.
+// - renderQueueDisplay(): Updates the visual display of queued items.
+// - updateQueueControlsState(): Manages the state of play/pause/reset buttons.
 //
 // Dependencies:
 // - floating-panel.js: Provides the namespace and shared properties.
@@ -31,7 +33,7 @@ window.MaxExtensionFloatingPanel.initializeQueueSection = function () {
     this.queueDisplayArea = document.getElementById('max-extension-queue-display');
 
     if (!this.queueSectionElement) {
-        logConCgp('[floating-panel] Queue section element not found in the DOM.');
+        logConCgp('[floating-panel-queue] Queue section element not found in the DOM.');
         return;
     }
 
@@ -41,13 +43,16 @@ window.MaxExtensionFloatingPanel.initializeQueueSection = function () {
     });
 
     // Set initial values and event listeners for controls
-    this.delayInputElement.value = globalMaxExtensionConfig.queueDelaySeconds || 15;
+    this.delayInputElement.value = globalMaxExtensionConfig.queueDelayMinutes || 5;
     this.delayInputElement.addEventListener('change', (event) => {
-        const delay = parseInt(event.target.value, 10);
-        if (!isNaN(delay) && delay >= 0) {
-            globalMaxExtensionConfig.queueDelaySeconds = delay;
-            // The config will be saved on the next profile save action
+        let delay = parseInt(event.target.value, 10);
+        if (isNaN(delay) || delay < 2) {
+            delay = 2; // Enforce minimum delay
+            event.target.value = delay;
         }
+        globalMaxExtensionConfig.queueDelayMinutes = delay;
+        logConCgp(`[floating-panel-queue] Queue delay set to ${delay} minutes.`);
+        // Note: The config is saved with the profile, or upon panel settings save.
     });
 
     // Create and insert the Queue Mode toggle
@@ -63,10 +68,69 @@ window.MaxExtensionFloatingPanel.initializeQueueSection = function () {
         }
     );
     this.queueModeToggle.style.margin = '0';
+    this.queueModeToggle.querySelector('label').style.fontSize = '12px';
     this.queueModeToggle.title = 'When enabled, clicking buttons adds them to a queue instead of sending immediately.';
     togglePlaceholder.appendChild(this.queueModeToggle);
 
     // Set initial visibility of controls based on config
     expandableSection.style.display = isQueueEnabled ? 'contents' : 'none';
     this.queueDisplayArea.style.display = isQueueEnabled ? 'flex' : 'none';
+
+    // Attach event listeners to buttons
+    this.playQueueButton.addEventListener('click', () => {
+        if (this.isQueueRunning) {
+            this.pauseQueue();
+        } else {
+            this.startQueue();
+        }
+    });
+
+    this.resetQueueButton.addEventListener('click', () => {
+        this.resetQueue();
+    });
+
+    // Initial state update for controls
+    this.updateQueueControlsState();
+};
+
+/**
+ * Renders the queue display area with the current items in the queue.
+ */
+window.MaxExtensionFloatingPanel.renderQueueDisplay = function () {
+    if (!this.queueDisplayArea) return;
+
+    this.queueDisplayArea.innerHTML = ''; // Clear previous items
+    this.promptQueue.forEach((item, index) => {
+        const queuedItemElement = document.createElement('button');
+        queuedItemElement.className = 'max-extension-queued-item';
+        queuedItemElement.innerHTML = item.icon;
+        queuedItemElement.title = `Click to remove: ${item.text}`;
+        queuedItemElement.addEventListener('click', () => {
+            this.removeFromQueue(index);
+        });
+        this.queueDisplayArea.appendChild(queuedItemElement);
+    });
+};
+
+/**
+ * Updates the state (icon, disabled status) of the queue control buttons.
+ */
+window.MaxExtensionFloatingPanel.updateQueueControlsState = function () {
+    if (!this.playQueueButton || !this.resetQueueButton) return;
+
+    const hasItems = this.promptQueue.length > 0;
+
+    // Play/Pause Button
+    if (this.isQueueRunning) {
+        this.playQueueButton.innerHTML = '⏸️'; // Pause icon
+        this.playQueueButton.title = 'Pause the queue.';
+        this.playQueueButton.disabled = false;
+    } else {
+        this.playQueueButton.innerHTML = '▶️'; // Play icon
+        this.playQueueButton.title = 'Start sending the queued prompts.';
+        this.playQueueButton.disabled = !hasItems; // Disabled if no items
+    }
+
+    // Reset Button
+    this.resetQueueButton.disabled = !hasItems && !this.isQueueRunning;
 };