add a button to translate input message

public/scripts/extensions/translate/index.js

@@ -1,19 +1,10 @@
-export { translate };
+import {callPopup, event_types, eventSource, getRequestHeaders, reloadCurrentChat, saveSettingsDebounced, substituteParams, updateMessageBlock,} from '../../../script.js';
-
-import {
-    callPopup,
-    eventSource,
-    event_types,
-    getRequestHeaders,
-    reloadCurrentChat,
-    saveSettingsDebounced,
-    substituteParams,
-    updateMessageBlock,
-} from '../../../script.js';
 import {extension_settings, getContext} from '../../extensions.js';
 import {findSecret, secret_state, writeSecret} from '../../secrets.js';
 import {splitRecursive} from '../../utils.js';
 
+export {translate};
+
 export const autoModeOptions = {
   NONE: 'none',
   RESPONSES: 'responses',
@@ -142,12 +133,21 @@ const KEY_REQUIRED = ['deepl', 'libre'];
 const LOCAL_URL = ['libre', 'oneringtranslator', 'deeplx', 'lingva'];
 
 function showKeysButton() {
-    const providerRequiresKey = KEY_REQUIRED.includes(extension_settings.translate.provider);
+  const providerRequiresKey =
-    const providerOptionalUrl = LOCAL_URL.includes(extension_settings.translate.provider);
+      KEY_REQUIRED.includes(extension_settings.translate.provider);
+  const providerOptionalUrl =
+      LOCAL_URL.includes(extension_settings.translate.provider);
   $('#translate_key_button').toggle(providerRequiresKey);
-    $('#translate_key_button').toggleClass('success', Boolean(secret_state[extension_settings.translate.provider]));
+  $('#translate_key_button')
+      .toggleClass(
+          'success',
+          Boolean(secret_state[extension_settings.translate.provider]));
   $('#translate_url_button').toggle(providerOptionalUrl);
-    $('#translate_url_button').toggleClass('success', Boolean(secret_state[extension_settings.translate.provider + '_url']));
+  $('#translate_url_button')
+      .toggleClass(
+          'success',
+          Boolean(
+              secret_state[extension_settings.translate.provider + '_url']));
 }
 
 function loadSettings() {
@@ -157,14 +157,21 @@ function loadSettings() {
     }
   }
 
-    $(`#translation_provider option[value="${extension_settings.translate.provider}"]`).attr('selected', true);
+  $(`#translation_provider option[value="${
-    $(`#translation_target_language option[value="${extension_settings.translate.target_language}"]`).attr('selected', true);
+        extension_settings.translate.provider}"]`)
-    $(`#translation_auto_mode option[value="${extension_settings.translate.auto_mode}"]`).attr('selected', true);
+      .attr('selected', true);
+  $(`#translation_target_language option[value="${
+        extension_settings.translate.target_language}"]`)
+      .attr('selected', true);
+  $(`#translation_auto_mode option[value="${
+        extension_settings.translate.auto_mode}"]`)
+      .attr('selected', true);
   showKeysButton();
 }
 
 async function translateImpersonate(text) {
-    const translatedText = await translate(text, extension_settings.translate.target_language);
+  const translatedText =
+      await translate(text, extension_settings.translate.target_language);
   $('#send_textarea').val(translatedText);
 }
 
@@ -181,17 +188,19 @@ async function translateIncomingMessage(messageId) {
     return;
   }
 
-    const textToTranslate = substituteParams(message.mes, context.name1, message.name);
+  const textToTranslate =
-    const translation = await translate(textToTranslate, extension_settings.translate.target_language);
+      substituteParams(message.mes, context.name1, message.name);
+  const translation = await translate(
+      textToTranslate, extension_settings.translate.target_language);
   message.extra.display_text = translation;
 
   updateMessageBlock(messageId, message);
 }
 
 async function translateProviderOneRing(text, lang) {
-    let from_lang = lang == extension_settings.translate.internal_language
+  let from_lang = lang == extension_settings.translate.internal_language ?
-        ? extension_settings.translate.target_language
+      extension_settings.translate.target_language :
-        : extension_settings.translate.internal_language;
+      extension_settings.translate.internal_language;
 
   const response = await fetch('/api/translate/onering', {
     method: 'POST',
@@ -341,7 +350,8 @@ async function translateProviderBing(text, lang) {
  * Splits text into chunks and translates each chunk separately
  * @param {string} text Text to translate
  * @param {string} lang Target language code
- * @param {(text: string, lang: string) => Promise<string>} translateFn Function to translate a single chunk (must return a Promise)
+ * @param {(text: string, lang: string) => Promise<string>} translateFn Function
+ *     to translate a single chunk (must return a Promise)
  * @param {number} chunkSize Maximum chunk size
  * @returns {Promise<string>} Translated text
  */
@@ -375,19 +385,24 @@ async function translate(text, lang) {
       case 'libre':
         return await translateProviderLibre(text, lang);
       case 'google':
-                return await chunkedTranslate(text, lang, translateProviderGoogle, 5000);
+        return await chunkedTranslate(
+            text, lang, translateProviderGoogle, 5000);
       case 'lingva':
-                return await chunkedTranslate(text, lang, translateProviderLingva, 5000);
+        return await chunkedTranslate(
+            text, lang, translateProviderLingva, 5000);
       case 'deepl':
         return await translateProviderDeepl(text, lang);
       case 'deeplx':
-                return await chunkedTranslate(text, lang, translateProviderDeepLX, 1500);
+        return await chunkedTranslate(
+            text, lang, translateProviderDeepLX, 1500);
       case 'oneringtranslator':
         return await translateProviderOneRing(text, lang);
       case 'bing':
         return await chunkedTranslate(text, lang, translateProviderBing, 1000);
       default:
-                console.error('Unknown translation provider', extension_settings.translate.provider);
+        console.error(
+            'Unknown translation provider',
+            extension_settings.translate.provider);
         return text;
     }
   } catch (error) {
@@ -406,7 +421,8 @@ async function translateOutgoingMessage(messageId) {
 
   const originalText = message.mes;
   message.extra.display_text = originalText;
-    message.mes = await translate(originalText, extension_settings.translate.internal_language);
+  message.mes = await translate(
+      originalText, extension_settings.translate.internal_language);
   updateMessageBlock(messageId, message);
 
   console.log('translateOutgoingMessage', messageId);
@@ -424,6 +440,13 @@ function createEventHandler(translateFunction, shouldTranslateFunction) {
   };
 }
 
+async function onTranslateInputMessageClick() {
+  const ta = document.querySelector('#send_textarea');
+  toastr.info(`Input Message is translating`, 'Please wait...');
+  const translatedText =
+      await translate(ta.value, extension_settings.translate.internal_language);
+  $('#send_textarea').val(translatedText);
+}
 // Prevents the chat from being translated in parallel
 let translateChatExecuting = false;
 
@@ -437,7 +460,8 @@ async function onTranslateChatClick() {
     const context = getContext();
     const chat = context.chat;
 
-        toastr.info(`${chat.length} message(s) queued for translation.`, 'Please wait...');
+    toastr.info(
+        `${chat.length} message(s) queued for translation.`, 'Please wait...');
 
     for (let i = 0; i < chat.length; i++) {
       await translateIncomingMessage(i);
@@ -453,7 +477,9 @@ async function onTranslateChatClick() {
 }
 
 async function onTranslationsClearClick() {
-    const confirm = await callPopup('<h3>Are you sure?</h3>This will remove translated text from all messages in the current chat. This action cannot be undone.', 'confirm');
+  const confirm = await callPopup(
+      '<h3>Are you sure?</h3>This will remove translated text from all messages in the current chat. This action cannot be undone.',
+      'confirm');
 
   if (!confirm) {
     return;
@@ -477,11 +503,13 @@ async function translateMessageEdit(messageId) {
   const chat = context.chat;
   const message = chat[messageId];
 
-    if (message.is_system || extension_settings.translate.auto_mode == autoModeOptions.NONE) {
+  if (message.is_system ||
+      extension_settings.translate.auto_mode == autoModeOptions.NONE) {
     return;
   }
 
-    if ((message.is_user && shouldTranslate(outgoingTypes)) || (!message.is_user && shouldTranslate(incomingTypes))) {
+  if ((message.is_user && shouldTranslate(outgoingTypes)) ||
+      (!message.is_user && shouldTranslate(incomingTypes))) {
     await translateIncomingMessage(messageId);
   }
 }
@@ -504,9 +532,12 @@ async function onMessageTranslateClick() {
   await context.saveChat();
 }
 
-const handleIncomingMessage = createEventHandler(translateIncomingMessage, () => shouldTranslate(incomingTypes));
+const handleIncomingMessage = createEventHandler(
-const handleOutgoingMessage = createEventHandler(translateOutgoingMessage, () => shouldTranslate(outgoingTypes));
+    translateIncomingMessage, () => shouldTranslate(incomingTypes));
-const handleImpersonateReady = createEventHandler(translateImpersonate, () => shouldTranslate(incomingTypes));
+const handleOutgoingMessage = createEventHandler(
+    translateOutgoingMessage, () => shouldTranslate(outgoingTypes));
+const handleImpersonateReady = createEventHandler(
+    translateImpersonate, () => shouldTranslate(incomingTypes));
 const handleMessageEdit = createEventHandler(translateMessageEdit, () => true);
 
 window['translate'] = translate;
@@ -555,14 +586,21 @@ jQuery(() => {
         <div id="translate_chat" class="list-group-item flex-container flexGap5">
             <div class="fa-solid fa-language extensionsMenuExtensionButton" /></div>
             Translate Chat
-        </div>`;
+        </div>
+        <div id="translate_input_message" class="list-group-item flex-container flexGap5">
+            <div class="fa-solid fa-language extensionsMenuExtensionButton" /></div>
+            Translate Input Message
+        </div>
+        `;
   $('#extensionsMenu').append(buttonHtml);
   $('#extensions_settings2').append(html);
   $('#translate_chat').on('click', onTranslateChatClick);
+  $('#translate_input_message').on('click', onTranslateInputMessageClick);
   $('#translation_clear').on('click', onTranslationsClearClick);
 
   for (const [key, value] of Object.entries(languageCodes)) {
-        $('#translation_target_language').append(`<option value="${value}">${key}</option>`);
+    $('#translation_target_language')
+        .append(`<option value="${value}">${key}</option>`);
   }
 
   $('#translation_auto_mode').on('change', (event) => {
@@ -599,7 +637,8 @@ jQuery(() => {
       'oneringtranslator': 'http://127.0.0.1:4990/translate',
       'deeplx': 'http://127.0.0.1:1188/translate',
     };
-        const popupText = `<h3>${optionText} API URL</h3><i>Example: <tt>${String(exampleURLs[extension_settings.translate.provider])}</tt></i>`;
+    const popupText = `<h3>${optionText} API URL</h3><i>Example: <tt>${
+        String(exampleURLs[extension_settings.translate.provider])}</tt></i>`;
 
     const secretKey = extension_settings.translate.provider + '_url';
     const savedUrl = secret_state[secretKey] ? await findSecret(secretKey) : '';