vrr/eigent
2
0
Fork 0
mirror of https://github.com/eigent-ai/eigent.git synced 2026-07-10 01:38:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: add loop="infinite" to img tags to ensure GIFs play continuously (fixes #1480)

Browse source 
GIFs generated by eigent agents were only playing once and then
stopping on the last frame. Added loop="infinite" attribute to
all img tags in the MarkDown component to ensure they loop properly.

This affects:
- Images rendered from relative paths (data URLs)
- Images rendered from absolute URLs
- Image preview dialog

While HTML img tags should loop GIFs by default, this explicit
attribute ensures consistent behavior across browsers and Electron.
This commit is contained in:
carlosjarenom 2026-06-09 18:01:31 +02:00
parent 8da53e8644
commit ee60676c29
1 changed files with 5 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/ChatBox/MessageItem/MarkDown.tsx
View file

@ -168,7 +168,8 @@ export const MarkDown = memo(
await window.electronAPI.readFileAsDataUrl(resolvedPath);
// Add cursor-pointer class and data attributes for click handling
const newTag = `<img${beforeSrc}src="${dataUrl}"${afterSrc} class="cursor-pointer hover:opacity-90 transition-opacity" data-clickable="true" style="max-height: 320px; object-fit: contain;">`;
// Add loop="infinite" to ensure GIFs play continuously (fixes issue #1480)
const newTag = `<img${beforeSrc}src="${dataUrl}"${afterSrc} class="cursor-pointer hover:opacity-90 transition-opacity" data-clickable="true" style="max-height: 320px; object-fit: contain;" loop="infinite">`;
rawHtml = rawHtml.replace(fullTag, newTag);
} else {
// Fallback: show alt text or placeholder
@ -182,10 +183,10 @@ export const MarkDown = memo(
// Keep original tag if loading fails
}
} else {
// For absolute URLs, add click handler
// For absolute URLs, add click handler and loop attribute
const newTag = fullTag.replace(
'<img',
'<img class="cursor-pointer hover:opacity-90 transition-opacity" data-clickable="true" style="max-height: 320px; object-fit: contain;"'
'<img class="cursor-pointer hover:opacity-90 transition-opacity" data-clickable="true" style="max-height: 320px; object-fit: contain;" loop="infinite"'
);
rawHtml = rawHtml.replace(fullTag, newTag);
}
@ -246,6 +247,7 @@ export const MarkDown = memo(
src={previewImage}
alt="Preview"
className="h-auto max-h-[90vh] w-auto max-w-full rounded object-contain"
loop="infinite"
/>
)}
</DialogContent>