☰

Claude Continue Button

Adds a 'Continue' button to Claude AI chat interface when message length limit is reached. Allows one-click continuation of Claude's response.

  1. // ==UserScript==
  2. // @name         Claude Continue Button
  3. // @name:it      Pulsante Continua per Claude
  4. // @name:es      Botón Continuar para Claude
  5. // @name:fr      Bouton Continuer pour Claude
  6. // @name:de      Weiter-Button für Claude
  7. // @namespace    https://greatest.deepsurf.us/users/Flejta
  8. // @version      1.1.0
  9. // @description  Adds a 'Continue' button to Claude AI chat interface when message length limit is reached. Allows one-click continuation of Claude's response.
  10. // @description:it  Aggiunge un pulsante 'Continua' all'interfaccia di Claude AI quando viene raggiunto il limite di lunghezza. Permette di continuare la risposta di Claude con un solo clic.
  11. // @description:es  Añade un botón 'Continuar' a la interfaz de Claude AI cuando se alcanza el límite de longitud del mensaje. Permite continuar la respuesta de Claude con un solo clic.
  12. // @description:fr  Ajoute un bouton 'Continuer' à l'interface de Claude AI lorsque la limite de longueur du message est atteinte. Permet de continuer la réponse de Claude en un seul clic.
  13. // @description:de  Fügt der Claude AI-Oberfläche eine 'Weiter'-Schaltfläche hinzu, wenn die Nachrichtenlängenbegrenzung erreicht wird. Ermöglicht die Fortsetzung der Antwort von Claude mit einem Klick.
  14. // @author       Flejta
  15. // @match        https://claude.ai/*
  16. // @icon         https://www.google.com/s2/favicons?sz=64&domain=claude.ai
  17. // @grant        none
  18. // @license      MIT
  19. // @supportURL   https://github.com/flejta/claude-scripts/issues
  20. // @homepageURL  https://github.com/flejta/claude-scripts
  21. // ==/UserScript==
  22.  
  23. (function() {
  24.     'use strict';
  25.  
  26.     // Prompts in different languages
  27.     const continuePrompts = {
  28.         'en': "Your platform informs me that you've reached the maximum message length and has paused your response. Please continue from where you left off, and if you were working on an artifact, please continue updating the same one instead of starting over.",
  29.         'it': "La tua piattaforma mi informa che hai raggiunto la lunghezza massima per un messaggio e ha messo in pausa la risposta. Per favore continua da dove eri rimasto, se stavi lavorando su un artefatto continua ad aggiornare lo stesso e non ricominciare da capo.",
  30.         'es': "Tu plataforma me informa que has alcanzado la longitud máxima del mensaje y ha pausado tu respuesta. Por favor, continúa desde donde lo dejaste, y si estabas trabajando en un artefacto, continúa actualizando el mismo en lugar de empezar de nuevo.",
  31.         'fr': "Votre plateforme m'informe que vous avez atteint la longueur maximale du message et a mis votre réponse en pause. Veuillez continuer là où vous vous êtes arrêté, et si vous travailliez sur un artefact, veuillez continuer à mettre à jour le même au lieu de recommencer.",
  32.         'de': "Ihre Plattform teilt mir mit, dass Sie die maximale Nachrichtenlänge erreicht haben und Ihre Antwort pausiert wurde. Bitte fahren Sie dort fort, wo Sie aufgehört haben, und wenn Sie an einem Artefakt gearbeitet haben, aktualisieren Sie bitte dasselbe, anstatt von vorne zu beginnen."
  33.     };
  34.  
  35.     // Warning messages to detect in different languages
  36.     const warningMessages = {
  37.         'en': /Claude has reached the maximum message length and has paused the response|has reached its response length limit/i,
  38.         'it': /Claude ha raggiunto la lunghezza massima per un messaggio e ha messo in pausa la risposta/i,
  39.         'es': /Claude ha alcanzado la longitud máxima del mensaje y ha pausado la respuesta/i,
  40.         'fr': /Claude a atteint la longueur maximale du message et a mis en pause la réponse/i,
  41.         'de': /Claude hat die maximale Nachrichtenlänge erreicht und hat die Antwort pausiert/i
  42.     };
  43.  
  44.     // Get user's browser language (default to English if not supported)
  45.     const browserLang = navigator.language.split('-')[0];
  46.     const continuePrompt = continuePrompts[browserLang] || continuePrompts['en'];
  47.  
  48.     // Function to wait for an element to appear in the DOM
  49.     function waitForElement(selector, callback, checkFrequencyInMs = 100, timeoutInMs = 10000) {
  50.         let startTimeInMs = Date.now();
  51.         (function loopSearch() {
  52.             if (Date.now() - startTimeInMs > timeoutInMs) {
  53.                 console.log("Element search timed out for: ", selector);
  54.                 return;
  55.             }
  56.             const element = document.querySelector(selector);
  57.             if (element) {
  58.                 callback(element);
  59.                 return;
  60.             } else {
  61.                 setTimeout(loopSearch, checkFrequencyInMs);
  62.             }
  63.         })();
  64.     }
  65.  
  66.     // Function to create the Continue button for the input area
  67.     function createContinueButton() {
  68.         // Create a new container div for the button (similar to existing divs)
  69.         const buttonContainer = document.createElement('div');
  70.         buttonContainer.className = 'relative shrink-0';
  71.         buttonContainer.innerHTML = `
  72.             <div>
  73.                 <div class="flex items-center">
  74.                     <div class="flex shrink-0" style="opacity: 1; transform: none; transform-origin: 50% 50% 0px;">
  75.                         <button class="inline-flex items-center justify-center relative shrink-0 can-focus select-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none disabled:drop-shadow-none border-0.5 transition-all h-8 min-w-8 rounded-lg flex items-center px-[7.5px] group !pointer-events-auto text-text-300 border-border-300 active:scale-[0.98] hover:text-text-200/90 hover:bg-bg-100" 
  76.                                type="button" 
  77.                                id="claude-continue-button" 
  78.                                aria-label="Continue" 
  79.                                title="Ask Claude to continue">
  80.                             <div class="flex flex-row items-center justify-center gap-1">
  81.                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256">
  82.                                     <path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path>
  83.                                 </svg>
  84.                             </div>
  85.                         </button>
  86.                     </div>
  87.                 </div>
  88.             </div>
  89.             <div class="w-[20rem] absolute max-w-[calc(100vw-16px)] bottom-10 hidden"></div>
  90.         `;
  91.  
  92.         return buttonContainer;
  93.     }
  94.  
  95.     // Create button for warning message
  96.     function createWarningButton() {
  97.         const button = document.createElement('button');
  98.         button.className = 'claude-warning-continue-button inline-flex items-center justify-center ml-2 px-2 py-1 bg-bg-100 rounded-md hover:bg-bg-200 text-text-200 transition-colors';
  99.         button.title = "Click to continue";
  100.         button.innerHTML = `
  101.             <span class="flex items-center">
  102.                 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" class="mr-1">
  103.                     <path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path>
  104.                 </svg>
  105.                 Continue
  106.             </span>
  107.         `;
  108.         return button;
  109.     }
  110.  
  111.     // Function to insert the continuation text into the ProseMirror editor
  112.     function insertContinueText() {
  113.         // Find the ProseMirror contenteditable element
  114.         const proseMirrorEditor = document.querySelector('div.ProseMirror[contenteditable="true"]');
  115.         
  116.         if (proseMirrorEditor) {
  117.             // Clear the editor and insert the new text
  118.             proseMirrorEditor.innerHTML = `<p>${continuePrompt}</p>`;
  119.             
  120.             // Simulate an input event to activate any listeners
  121.             proseMirrorEditor.dispatchEvent(new Event('input', { bubbles: true }));
  122.             
  123.             // Focus on the editor
  124.             proseMirrorEditor.focus();
  125.             
  126.             // Position the cursor at the end of the text
  127.             const selection = window.getSelection();
  128.             const range = document.createRange();
  129.             const lastChild = proseMirrorEditor.lastChild;
  130.             if (lastChild) {
  131.                 range.selectNodeContents(lastChild);
  132.                 range.collapse(false); // Collapse to the end
  133.                 selection.removeAllRanges();
  134.                 selection.addRange(range);
  135.             }
  136.             
  137.             console.log('Continue prompt inserted into the editor');
  138.         } else {
  139.             console.log('ProseMirror editor not found');
  140.         }
  141.     }
  142.  
  143.     // Function to insert the button after the tools button
  144.     function insertContinueButton() {
  145.         waitForElement('#input-tools-menu-trigger', function(toolsButton) {
  146.             // Check if the button doesn't already exist
  147.             if (document.getElementById('claude-continue-button')) {
  148.                 return;
  149.             }
  150.             
  151.             // Find the container div of the tools button
  152.             const toolsContainer = toolsButton.closest('.relative.shrink-0');
  153.             if (toolsContainer) {
  154.                 // Create and insert the continue button after the tools button
  155.                 const continueButton = createContinueButton();
  156.                 toolsContainer.parentNode.insertBefore(continueButton, toolsContainer.nextSibling);
  157.                 
  158.                 // Add event listener to the button
  159.                 document.getElementById('claude-continue-button').addEventListener('click', function() {
  160.                     insertContinueText();
  161.                 });
  162.                 
  163.                 console.log('Continue button added successfully');
  164.             }
  165.         });
  166.     }
  167.  
  168.     // Function to check for warning messages and add buttons to them
  169.     function checkForWarningMessages() {
  170.         // Get all warning messages
  171.         const warningElements = document.querySelectorAll('[data-testid="message-warning"]');
  172.         
  173.         // Process only the most recent warning if there are multiple
  174.         let latestWarning = null;
  175.         
  176.         warningElements.forEach(warning => {
  177.             // Check if the warning is about message length limit
  178.             const text = warning.textContent || '';
  179.             let isLengthWarning = false;
  180.             
  181.             for (const lang in warningMessages) {
  182.                 if (warningMessages[lang].test(text)) {
  183.                     isLengthWarning = true;
  184.                     break;
  185.                 }
  186.             }
  187.             
  188.             // Remove existing buttons from all warnings
  189.             const existingButton = warning.querySelector('.claude-warning-continue-button');
  190.             if (existingButton) {
  191.                 existingButton.remove();
  192.             }
  193.             
  194.             // If it's a length warning, mark it as the latest
  195.             if (isLengthWarning) {
  196.                 latestWarning = warning;
  197.             }
  198.         });
  199.         
  200.         // Add button only to the latest warning
  201.         if (latestWarning) {
  202.             const p = latestWarning.querySelector('p');
  203.             if (p && !p.querySelector('.claude-warning-continue-button')) {
  204.                 const button = createWarningButton();
  205.                 p.appendChild(button);
  206.                 
  207.                 // Add event listener
  208.                 button.addEventListener('click', function() {
  209.                     insertContinueText();
  210.                 });
  211.             }
  212.         }
  213.     }
  214.  
  215.     // Initial setup
  216.     function initialize() {
  217.         insertContinueButton();
  218.         checkForWarningMessages();
  219.     }
  220.  
  221.     // Check if the page is already loaded
  222.     if (document.readyState === 'complete' || document.readyState === 'interactive') {
  223.         initialize();
  224.     } else {
  225.         // Otherwise, wait for the page to fully load
  226.         window.addEventListener('DOMContentLoaded', initialize);
  227.     }
  228.  
  229.     // Periodically check, to handle SPA navigation and dynamic content
  230.     setInterval(function() {
  231.         if (!document.getElementById('claude-continue-button')) {
  232.             insertContinueButton();
  233.         }
  234.         checkForWarningMessages();
  235.     }, 2000);
  236. })();