github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-01-10 07:38:04 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): fix infinite loop in thumbnail images hook

Browse Source 
- Use refs to track previous prop values and prevent infinite re-renders
- Only update images state when initialImages actually changes
- Fix maximum update depth exceeded error in PublishAgentModal
- Ensure thumbnail images load correctly on first modal open

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Zamil Majdy
2025-12-19 11:31:49 +01:00
parent 21652a5422
commit 44d17885ed
2 changed files with 57 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
autogpt_platform/frontend/src/app/(platform)/components/MarketplaceBanners/MarketplaceBanners.tsx
View File

@@ -27,17 +27,25 @@ export function MarketplaceBanners({
return (
<div className="mb-6 rounded-lg bg-gray-50 p-4 dark:bg-gray-900">
<div className="flex flex-col gap-3">
<Text variant="body" className="text-gray-700 dark:text-gray-300">
You should update your agent in order to get the latest / best
results
</Text>
<div>
<Text
variant="large-medium"
className="mb-2 text-neutral-900 dark:text-neutral-100"
>
Update available
</Text>
<Text variant="body" className="text-gray-700 dark:text-gray-300">
You should update your agent in order to get the latest / best
results
</Text>
</div>
{onUpdate && (
<div className="flex justify-start">
<Button
size="small"
onClick={onUpdate}
disabled={isUpdating}
className="bg-gray-700 text-white hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
className="bg-neutral-800 text-white hover:bg-neutral-900 dark:bg-neutral-700 dark:hover:bg-neutral-800"
>
{isUpdating ? "Updating..." : "Update agent"}
</Button>
@@ -55,16 +63,24 @@ export function MarketplaceBanners({
return (
<div className="mb-6 rounded-lg bg-gray-50 p-4 dark:bg-gray-900">
<div className="flex flex-col gap-3">
<Text variant="body" className="text-gray-700 dark:text-gray-300">
You&apos;ve made changes to this agent that aren&apos;t published
yet. Would you like to publish the latest version?
</Text>
<div>
<Text
variant="large-medium"
className="mb-2 text-neutral-900 dark:text-neutral-100"
>
Unpublished changes
</Text>
<Text variant="body" className="text-gray-700 dark:text-gray-300">
You&apos;ve made changes to this agent that aren&apos;t
published yet. Would you like to publish the latest version?
</Text>
</div>
{onPublish && (
<div className="flex justify-start">
<Button
size="small"
onClick={onPublish}
className="bg-gray-700 text-white hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
className="bg-neutral-800 text-white hover:bg-neutral-900 dark:bg-neutral-700 dark:hover:bg-neutral-800"
>
Publish changes
</Button>

31
autogpt_platform/frontend/src/components/contextual/PublishAgentModal/components/AgentInfoStep/components/useThumbnailImages.ts
View File

@@ -23,8 +23,39 @@ export function useThumbnailImages({
const [isGenerating, setIsGenerating] = useState(false);
const thumbnailsContainerRef = useRef<HTMLDivElement | null>(null);
const prevInitialImagesRef = useRef<string[]>([]);
const prevInitialSelectedRef = useRef<string | null>(null);
const { toast } = useToast();
// Update images when initialImages prop changes
useEffect(() => {
const hasInitialImagesChanged =
initialImages.length !== prevInitialImagesRef.current.length ||
initialImages.some(
(img, index) => img !== prevInitialImagesRef.current[index],
);
const hasInitialSelectedChanged =
initialSelectedImage !== prevInitialSelectedRef.current;
if (
initialImages.length > 0 &&
(hasInitialImagesChanged || hasInitialSelectedChanged)
) {
setImages(initialImages);
// Set selectedImage if initialSelectedImage is provided
if (initialSelectedImage) {
setSelectedImage(initialSelectedImage);
} else {
setSelectedImage(initialImages[0]);
}
// Update refs
prevInitialImagesRef.current = initialImages;
prevInitialSelectedRef.current = initialSelectedImage;
}
}, [initialImages, initialSelectedImage]);
// Notify parent when images change
useEffect(() => {
onImagesChange(images);