diff --git a/index.js b/index.js index 1cd9445..608b3ae 100644 --- a/index.js +++ b/index.js @@ -243,13 +243,20 @@ function processToolCallMessages() { // Add this image after the summary element, but only if details is present if (summaryElement.length) { - summaryElement.after(renderContainer); + // Place the image both in summary and in the details content for maximum compatibility + 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); + } } // Mark this message as processed $(this).attr('data-sb-processed', 'true'); - console.log(`[${extensionName}] Rendered chat bubble image in tool call`); + console.log(`[${extensionName}] Rendered chat bubble image in tool call: ${imgUrl}`); } } } @@ -304,6 +311,20 @@ function setupMessageObserver() { // Process any existing messages setTimeout(() => processToolCallMessages(), 500); + + // Add additional event listener for details element clicks + $(document).on('click', '.mes.smallSysMes.toolCall details, .mes.smallSysMes.toolCall summary', function() { + // Force reprocessing of this specific tool call message after a short delay + // This ensures the image is visible regardless of details open/closed state + setTimeout(() => { + const toolCallMessage = $(this).closest('.mes.smallSysMes.toolCall'); + if (toolCallMessage.length) { + // Remove the processed flag to force reprocessing + toolCallMessage.removeAttr('data-sb-processed'); + processToolCallMessages(); + } + }, 50); + }); } else { console.warn(`[${extensionName}] Chat element not found, observer not started`); // Try again after a delay @@ -343,11 +364,15 @@ jQuery(async () => { border-radius: 5px; margin: 5px 0; text-align: center; + display: block !important; + visibility: visible !important; } .sillybubble-rendered-image img { max-width: 100%; border-radius: 3px; + display: inline-block !important; + visibility: visible !important; } .smallSysMes.toolCall[data-sb-processed="true"] summary { @@ -362,6 +387,11 @@ jQuery(async () => { .smallSysMes.toolCall[data-sb-processed="true"] summary:hover { opacity: 1; } + + /* Ensure details content is visible */ + .smallSysMes.toolCall details .mes_reasoning { + display: block !important; + } `);