Fix bubble image visibility in collapsed tool calls

index.js

@@ -234,28 +234,40 @@ function processToolCallMessages() {
                     }
                     console.log(`[${extensionName}] Rendering image from URL: ${imgUrl}`);
                     renderContainer.html(`<img src="${imgUrl}" alt="Chat Bubble">`);
+                    
+                    // Store the image URL in a data attribute for easier access
+                    $(this).attr('data-sb-image-url', imgUrl);
                   } else {
                     renderContainer.html(tool.result);
                   }
                   
                   // Remove any existing rendered images
                   $(this).find('.sillybubble-rendered-image').remove();
+                  $('.sillybubble-collapsed-image').remove();
                   
-                  // Add this image after the summary element, but only if details is present
+                  // Create a special always-visible container for collapsed state
+                  const collapsedContainer = $('<div class="sillybubble-collapsed-image"></div>');
+                  collapsedContainer.html(renderContainer.html());
+                  
+                  // Add the image to the mes_block, BEFORE the details element
+                  // This ensures it's visible when details is collapsed
+                  detailsElement.before(collapsedContainer);
+                  
+                  // Also add inside the details for when it's open
                   if (summaryElement.length) {
-                    // Place the image both in summary and in the details content for maximum compatibility
+                    // Add inside the details content for when it's expanded
-                    summaryElement.after(renderContainer.clone());
-                    
-                    // Also add to the mes_reasoning div if it exists
                     const reasoningDiv = $(this).find('.mes_reasoning');
                     if (reasoningDiv.length) {
-                      reasoningDiv.prepend(renderContainer);
+                      reasoningDiv.prepend(renderContainer.clone());
                     }
                   }
                   
                   // Mark this message as processed
                   $(this).attr('data-sb-processed', 'true');
                   
+                  // Manage visibility based on details open state
+                  handleDetailsVisibility($(this), detailsElement);
+                  
                   console.log(`[${extensionName}] Rendered chat bubble image in tool call: ${imgUrl}`);
                 }
               }
@@ -271,6 +283,33 @@ function processToolCallMessages() {
   });
 }
 
+// Helper function to handle visibility of images based on details open state
+function handleDetailsVisibility(messageElement, detailsElement) {
+  if (detailsElement.prop('open')) {
+    // If details is open, hide the collapsed version
+    messageElement.find('.sillybubble-collapsed-image').hide();
+  } else {
+    // If details is closed, show the collapsed version
+    messageElement.find('.sillybubble-collapsed-image').show();
+  }
+  
+  // Set up a mutation observer to watch for the open attribute changing
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.attributeName === 'open') {
+        if (detailsElement.prop('open')) {
+          messageElement.find('.sillybubble-collapsed-image').hide();
+        } else {
+          messageElement.find('.sillybubble-collapsed-image').show();
+        }
+      }
+    });
+  });
+  
+  // Start observing the details element
+  observer.observe(detailsElement[0], { attributes: true });
+}
+
 // Observer function to watch for new messages
 function setupMessageObserver() {
   // Create a mutation observer to monitor the chat for new messages
@@ -358,6 +397,7 @@ jQuery(async () => {
     // Add CSS for rendered images
     $('head').append(`
       <style>
+        /* Style for bubble images in expanded details */
         .sillybubble-rendered-image {
           padding: 10px;
           background-color: rgba(0, 0, 0, 0.05);
@@ -375,23 +415,47 @@ jQuery(async () => {
           visibility: visible !important;
         }
         
+        /* Style for bubble images when details is collapsed */
+        .sillybubble-collapsed-image {
+          padding: 10px 5px;
+          background-color: rgba(0, 0, 0, 0.03);
+          border-radius: 5px;
+          margin: 5px 0;
+          text-align: center;
+          display: block !important;
+          visibility: visible !important;
+          position: relative;
+          z-index: 1;
+        }
+        
+        .sillybubble-collapsed-image img {
+          max-width: 100%;
+          border-radius: 3px;
+          display: inline-block !important;
+          visibility: visible !important;
+          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+        
+        /* Hide the "Tool calls: Chat Bubble Image" summary text when collapsed */
         .smallSysMes.toolCall[data-sb-processed="true"] summary {
+          font-size: 0.8em;
+          opacity: 0.6;
           cursor: pointer;
         }
         
-        /* Make the text in the summary a bit less prominent when an image is shown */
-        .smallSysMes.toolCall[data-sb-processed="true"] summary {
-          opacity: 0.7;
-        }
-        
         .smallSysMes.toolCall[data-sb-processed="true"] summary:hover {
-          opacity: 1;
+          opacity: 0.9;
         }
         
         /* Ensure details content is visible */
         .smallSysMes.toolCall details .mes_reasoning {
           display: block !important;
         }
+        
+        /* Make the collapsed image look nicer */
+        .smallSysMes.toolCall[data-sb-processed="true"] {
+          position: relative;
+        }
       </style>
     `);