diff --git a/src/lib/components/chat/Messages/MarkdownTokens.svelte b/src/lib/components/chat/Messages/MarkdownTokens.svelte index b9dd6bfd4..23a4ab06c 100644 --- a/src/lib/components/chat/Messages/MarkdownTokens.svelte +++ b/src/lib/components/chat/Messages/MarkdownTokens.svelte @@ -36,11 +36,12 @@ const codeId = `${id}-${codes.length}`; const interval = setInterval(() => { - if (document.getElementById(`code-${codeId}`)) { + const codeElement = document.getElementById(`code-${codeId}`); + if (codeElement) { clearInterval(interval); new CodeBlock({ - target: document.getElementById(`code-${codeId}`), + target: codeElement, props: { id: `${id}-${codes.length}`, lang: lang, @@ -52,7 +53,7 @@ } }, 10); - return `
`; + return `
`; }; let images = []; @@ -65,22 +66,29 @@ images = images; const imageId = `${id}-${images.length}`; - const interval = setInterval(() => { - if (document.getElementById(`image-${imageId}`)) { + const imageElement = document.getElementById(`image-${imageId}`); + if (imageElement) { clearInterval(interval); + + // If the image is already loaded, don't load it again + if (imageElement.innerHTML) { + return; + } + + console.log('image', href, text); new Image({ - target: document.getElementById(`image-${imageId}`), + target: imageElement, props: { src: href, alt: text }, - hydrate: true + $$inline: true }); } }, 10); - return `
`; + return `
`; }; // Open all links in a new tab/window (from https://github.com/markedjs/marked/issues/655#issuecomment-383226346)