Adjust caption extension to new menu

public/scripts/extensions/caption/index.js

@@ -15,9 +15,9 @@ async function moduleWorker() {
 
 async function setImageIcon() {
     try {
-        const sendButton = document.getElementById('send_picture');
-        sendButton.classList.add('fa-image');
-        sendButton.classList.remove('fa-hourglass-half');
+        const sendButton = $('#send_picture .extensionsMenuExtensionButton');
+        sendButton.addClass('fa-image');
+        sendButton.removeClass('fa-hourglass-half');
     }
     catch (error) {
         console.log(error);
@@ -26,9 +26,9 @@ async function setImageIcon() {
 
 async function setSpinnerIcon() {
     try {
-        const sendButton = document.getElementById('send_picture');
-        sendButton.classList.remove('fa-image');
-        sendButton.classList.add('fa-hourglass-half');
+        const sendButton = $('#send_picture .extensionsMenuExtensionButton');
+        sendButton.removeClass('fa-image');
+        sendButton.addClass('fa-hourglass-half');
     }
     catch (error) {
         console.log(error);
@@ -92,15 +92,17 @@ async function onSelectImage(e) {
     }
 }
 
-$(document).ready(function () {
+jQuery(function () {
     function addSendPictureButton() {
-        const sendButton = document.createElement('div');
-        sendButton.id = 'send_picture';
-        sendButton.title = 'Send a picture to chat';
-        sendButton.classList.add('fa-solid');
+        const sendButton = $(`
+        <div id="send_picture" class="list-group-item flex-container flexGap5">
+            <div class="fa-solid fa-image extensionsMenuExtensionButton"></div>
+            Send a picture
+        </div>`);
+
+        $('#extensionsMenu').prepend(sendButton);
         $(sendButton).hide();
-        $(sendButton).on('click', () => $('#img_file').click());
-        $('#send_but_sheld').prepend(sendButton);
+        $(sendButton).on('click', () => $('#img_file').trigger('click'));
     }
     function addPictureSendForm() {
         const inputHtml = `<input id="img_file" type="file" accept="image/*">`;

public/scripts/extensions/caption/style.css

@@ -1,24 +1,3 @@
-#send_picture {
-    order: 200;
-    width: 40px;
-    height: 40px;
-    margin: 0;
-    padding: 1px;
-    outline: none;
-    border: none;
-    cursor: pointer;
-    transition: 0.3s;
-    opacity: 0.7;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-#send_picture:hover {
-    opacity: 1;
-    filter: brightness(1.2);
-}
-
 #img_form {
     display: none;
 }

public/scripts/extensions/stable-diffusion/index.js

@@ -549,7 +549,7 @@ function addSDGenButtons() {
     const buttonHtml = `
     <div id="sd_gen" class="list-group-item flex-container flexGap5">    
         <div class="fa-solid fa-paintbrush extensionsMenuExtensionButton" title="Trigger Stable Diffusion" /></div>
-        StableDiffusion
+        Stable Diffusion
     </div>
         `;
 
@@ -757,7 +757,7 @@ jQuery(async () => {
             <select id="sd_model"></select>
             <label for="sd_sampler">Sampling method</label>
             <select id="sd_sampler"></select>
-            <div class="flex-container flexGap5 marginTop10 margin-bot-10px">
+            <div class="flex-container flexGap5 margin-bot-10px">
                 <label class="checkbox_label">
                     <input id="sd_horde_karras" type="checkbox" />
                     Karras (only for Horde, not all samplers supported)

public/style.css

@@ -538,6 +538,11 @@ code {
     cursor: pointer;
 }
 
+#extensionsMenu>div {
+    transition: 0.3s;
+    opacity: 0.7;
+}
+
 .options-content a div:first-child {
     min-width: 20px;
 }