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

Fix bubble image visibility in collapsed tool calls

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

88
index.js
View File

@ -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
summaryElement.after(renderContainer.clone());
// Also add to the mes_reasoning div if it exists
// Add inside the details content for when it's expanded
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>
`);