Crystal/SillyBubble
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix duplicate image rendering in chat bubble tool calls

Browse Source
This commit is contained in:
Sven Olderaan 2025-03-16 13:37:02 +01:00
parent 17796630af
commit 34bd7e44e6
1 changed files with 50 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
index.js
View File

@ -241,25 +241,35 @@ function processToolCallMessages() {
renderContainer.html(tool.result);
}
// Remove any existing rendered images
// Clean up all images for this message
$(this).find('.sillybubble-rendered-image').remove();
$('.sillybubble-collapsed-image').remove();
$(this).find('.sillybubble-collapsed-image').remove();
// 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);
// Get the message text element (where tool calls are shown)
const messageTextDiv = $(this).find('.mes_text');
// Also add inside the details for when it's open
if (summaryElement.length) {
// Add inside the details content for when it's expanded
const reasoningDiv = $(this).find('.mes_reasoning');
if (reasoningDiv.length) {
reasoningDiv.prepend(renderContainer.clone());
}
// Check if the details element is part of mes_text (most common case)
const detailsInText = messageTextDiv.find('details').length > 0;
if (detailsInText) {
// For typical tool calls, add collapsed image just before the details element in mes_text
messageTextDiv.find('details').before(collapsedContainer);
} else {
// Fallback - add it before the details element wherever it is
detailsElement.before(collapsedContainer);
}
// ONLY add image in the reasoning div, NOT in the details summary
const reasoningDiv = $(this).find('.mes_reasoning');
if (reasoningDiv.length) {
// Make sure no existing image is there
reasoningDiv.find('.sillybubble-rendered-image').remove();
// Add the image to the reasoning section
reasoningDiv.prepend(renderContainer);
}
// Mark this message as processed
@ -285,29 +295,29 @@ 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();
}
// Add a class to the details element to mark it as containing a bubble image
detailsElement.addClass('has-bubble-image');
// 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();
}
// Set up a click handler for the details/summary to ensure proper rendering
detailsElement.on('click', function() {
// Small delay to ensure the open state has changed
setTimeout(() => {
// Use the CSS-based visibility approach defined in our styles
// This is more reliable than show/hide in the DOM
if (detailsElement.prop('open')) {
messageElement.addClass('details-open');
} else {
messageElement.removeClass('details-open');
}
});
}, 10);
});
// Start observing the details element
observer.observe(detailsElement[0], { attributes: true });
// Set initial state
if (detailsElement.prop('open')) {
messageElement.addClass('details-open');
} else {
messageElement.removeClass('details-open');
}
}
// Observer function to watch for new messages
@ -436,6 +446,15 @@ jQuery(async () => {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Hide the collapsed image when details is open using classes */
.details-open .sillybubble-collapsed-image,
details[open] ~ .sillybubble-collapsed-image,
details[open] + .sillybubble-collapsed-image,
.mes_text details[open] ~ .sillybubble-collapsed-image,
.mes_text details[open] + .sillybubble-collapsed-image {
display: none !important;
}
/* Hide the "Tool calls: Chat Bubble Image" summary text when collapsed */
.smallSysMes.toolCall[data-sb-processed="true"] summary {
font-size: 0.8em;