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

Fix bubble rendering in tool calls

Browse Source
This commit is contained in:
Sven Olderaan 2025-03-16 13:25:29 +01:00
parent 1e09bd6638
commit c0a9345c17
1 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
index.js
View File

@ -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;
}
</style>
`);