Feat/1368 update image block

[Manikandan-Kanini]

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

[github-actions]

@CodiumAI-Agent /describe

[github-actions]

@CodiumAI-Agent /review

[QodoAI-Agent]

Title

Feat/1368 update image block

---

User description

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

---

PR Type

Enhancement

---

Description

• Dynamic image loading via URL or base64

• Show loading, error, and placeholder states

• Fetch app/insight assets with usePixel

• Tabbed settings UI for image configuration

---

Changes diagram

flowchart LR
  A["ImageBlock"] -- "useEffect load src" --> B["URL Loading / Base64 Fetch"]
  B -- "set imgStyle & status" --> C["State: style & status"]
  C -- "render content" --> D["Render: view, placeholder, or error"]

Loading

---

Changes walkthrough 📝

	Relevant files
Enhancement	9 files ImageBlock.tsx Overhaul image component with loading states                          +167/-13 GeneralSettings.tsx Move image settings block under GeneralSettings                    +32/-0    App.tsx Implement AppTab for asset file uploads                                    +70/-0    External.tsx Create ExternalTab for URL image input                                      +64/-0    Insight.tsx Add InsightTab for insight asset selection                              +33/-0    SelectImage.tsx Add dropdown for selecting existing images                              +37/-0    SelectedItem.tsx Display selected file with delete option                                  +43/-0    index.tsx Compose tabs UI for image settings                                              +111/-0  utils.ts Add utility to filter image files                                                +15/-0
Configuration changes	3 files config.tsx Add unavailable and placeholderText config fields                +2/-0      config.tsx Integrate GeneralSettings in config                                            +3/-15    default-menu.ts Extend default menu with image placeholders                            +3/-0
Formatting	1 files useBlock.tsx Remove redundant line and adjust formatting                            +0/-1

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Effect Dependencies The useEffect for loading the image doesn't include all dependencies (e.g., dataStyle, getImage.data, src.fileLocation), which may lead to stale updates or skipped re-renders. useEffect(() => { let isMounted = true; if (isObjSrc && src?.fileLocation && getImage?.status === "SUCCESS") { setStatus({ isLoading: false, hasError: false }); if (typeof getImage.data === "string") { const mimeType = getMimeType(src.fileName); const url = `data:${mimeType};base64,${getImage.data}`; isMounted && setImgStyle({ backgroundImage: `url('${url}')`, cursor: "pointer", }); } } else if (typeof src === "string" && src) { setStatus({ isLoading: true, hasError: false }); const img = new globalThis.Image(); img.onload = () => { if (isMounted) { setStatus({ isLoading: false, hasError: false }); setImgStyle({ backgroundImage: `url('${src}')` }); } }; img.onerror = () => { if (isMounted) { setStatus({ isLoading: false, hasError: true }); setImgStyle(dataStyle); } }; img.src = src; } else { setImgStyle(dataStyle); } return () => { isMounted = false; }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [getImage.status, isObjSrc ? src.fileName : src]); Loading State The object source branch doesn't set isLoading during base64 fetch and doesn't handle getImage error states, leading to inconsistent UI loading or error indicators. useEffect(() => { let isMounted = true; if (isObjSrc && src?.fileLocation && getImage?.status === "SUCCESS") { setStatus({ isLoading: false, hasError: false }); if (typeof getImage.data === "string") { const mimeType = getMimeType(src.fileName); const url = `data:${mimeType};base64,${getImage.data}`; isMounted && setImgStyle({ backgroundImage: `url('${url}')`, cursor: "pointer", }); } } else if (typeof src === "string" && src) { setStatus({ isLoading: true, hasError: false }); const img = new globalThis.Image(); img.onload = () => { if (isMounted) { setStatus({ isLoading: false, hasError: false }); setImgStyle({ backgroundImage: `url('${src}')` }); } }; img.onerror = () => { if (isMounted) { setStatus({ isLoading: false, hasError: true }); setImgStyle(dataStyle); } }; img.src = src; } else { setImgStyle(dataStyle); } return () => { isMounted = false; }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [getImage.status, isObjSrc ? src.fileName : src]); src Type Mismatch uploadRes[0] may be a string path, but setData expects an object with fileName and fileLocation, causing inconsistent src handling. let uploadRes = null; uploadRes = await upload(file, insightId, appId, 'version/assets/'); setData('title', ''); setData('src', uploadRes[0]); notification.add({

[QodoAI-Agent]

PR Code Suggestions ✨

Category	Suggestion	Impact
Possible issue	Handle object image fetch errors Add explicit error handling when the pixel fetch for object-based images fails. This ensures hasError is set and the component falls back to the regular style. libs/renderer/src/components/block-defaults/image-block/ImageBlock.tsx [125-136] if (isObjSrc && src?.fileLocation && getImage?.status === "SUCCESS") { setStatus({ isLoading: false, hasError: false }); if (typeof getImage.data === "string") { const mimeType = getMimeType(src.fileName); const url = `data:${mimeType};base64,${getImage.data}`; isMounted && setImgStyle({ backgroundImage: `url('${url}')`, cursor: "pointer", }); } +} else if (isObjSrc && getImage?.status === "ERROR") { + if (isMounted) { + setStatus({ isLoading: false, hasError: true }); + setImgStyle(dataStyle); + } } else if (typeof src === "string" && src) { Suggestion importance[1-10]: 7 __ Why: The added error branch ensures hasError is set when pixel fetch fails, improving fallback handling for object-based images.	Medium
General	Add missing effect dependencies Include all relevant dependencies (getImage.data, src.fileLocation, and dataStyle) in the dependency array so the effect runs whenever the image source or fetched data changes. libs/renderer/src/components/block-defaults/image-block/ImageBlock.tsx [159] -}, [getImage.status, isObjSrc ? src.fileName : src]); +}, [ + getImage.status, + getImage.data, + isObjSrc ? src.fileName : src, + isObjSrc ? src.fileLocation : undefined, + dataStyle +]); Suggestion importance[1-10]: 6 __ Why: Including getImage.data, src.fileLocation, and dataStyle in the dependency array ensures the effect reruns when any relevant value changes.	Low
	Show loading state for object images Set the loading state when fetching an object-based image so that the LoadingIndicator appears correctly during pixel retrieval. libs/renderer/src/components/block-defaults/image-block/ImageBlock.tsx [123-125] useEffect(() => { let isMounted = true; + if (isObjSrc && getImage?.status === "PENDING") { + setStatus({ isLoading: true, hasError: false }); + } if (isObjSrc && src?.fileLocation && getImage?.status === "SUCCESS") { Suggestion importance[1-10]: 5 __ Why: Setting isLoading on PENDING status allows the LoadingIndicator to display correctly during object-based image retrieval.	Low
	Remove undefined config field Remove the stray file: null configuration since file is not defined in the block’s schema, preventing invalid default state. packages/client/src/components/blocks-workspace/menus/default-menu.ts [1065-1070] src: '', title: '', show: 'true', -file: null, unavailable: '', placeholderText: '', Suggestion importance[1-10]: 4 __ Why: The file property is not defined in ImageBlockDef, so removing it avoids an invalid default configuration.	Low

[johbaxter]

You add a bunch of changes to config, where is the migration function to add these properites to existing image blocks

[github-actions]

@CodiumAI-Agent /update_changelog

[QodoAI-Agent]

Changelog updates: 🔄

2025-09-03 *

Added

• Enhanced Image block with asset selection tabs, upload support, tooltips, and placeholders; added migration to include new fields.

Changed

• Updated Image block rendering to support base64/app assets, improved error/loading handling, and refactored settings UI.

to commit the new content to the CHANGELOG.md file, please type:
'/update_changelog --pr_update_changelog.push_changelog_changes=true'