feat(addmodellayout): update add model layout and styling

[Gunasrini18]

Description

Changes Made

How to Test

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

Notes

[github-actions]

@CodiumAI-Agent /describe

[CodiumAI-Agent]

Title

feat(addmodellayout): update add model layout and styling

---

User description

Description

Changes Made

How to Test

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

Notes

---

PR Type

Enhancement

---

Description

• Add Tabs-based navigation for model categories

• Implement ModelCard with tooltip and truncation logic

• Add state (selectedTab, modelOptions) and filtering helpers

• Refactor styled components for model display

---

Changes walkthrough 📝

	Relevant files
Enhancement	ImportPage.tsx Implement tabbed model selection UI                                            packages/client/src/pages/import/ImportPage.tsx • Add Tabs, Tab, StyledTab for category navigation • Introduce ModelCard component with tooltip support • Add state and helpers: selectedTab, getTabLabels, getModelsForTab • Refactor styled components: StyledInnerBox, StyledCardImage, model boxes +250/-177

---

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 /review

[github-actions]

@CodiumAI-Agent /improve

[CodiumAI-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 Missing Hook Import Ensure that useEffect is properly imported or referenced (e.g. use React.useEffect) for the ModelCard component to avoid runtime errors. const ModelCard = ({ model, setSteps, steps }) => { const textRef = useRef<HTMLParagraphElement>(null); const [isTruncated, setIsTruncated] = React.useState(false); useEffect(() => { const el = textRef.current; if (el) { setIsTruncated(el.scrollWidth > el.clientWidth); } }, [model.name]); Component Recreation ModelCard is defined inside the ImportPage function and will be recreated on every render, which can hurt performance. Consider extracting it or memoizing. const ModelCard = ({ model, setSteps, steps }) => { const textRef = useRef<HTMLParagraphElement>(null); const [isTruncated, setIsTruncated] = React.useState(false); useEffect(() => { const el = textRef.current; if (el) { setIsTruncated(el.scrollWidth > el.clientWidth); } }, [model.name]); const cardContent = ( <StyledFormTypeModelBox disabled={model.disable} onClick={() => { if (!model.disable) { setSteps( [ ...steps, { id: `${model.name}`, title: model.name, description: `Fill out ${ model.name } details in order to add ${steps[0].data.toLowerCase()} to catalog`, data: model.fields, }, ], steps.length + 1, ); } }} > <StyledInnerBox isModel={true}> {model.disable ? ( <Stack direction="row" width={'100%'} spacing={1}> <StyledCardImage isModel={true} src={model.icon} /> <StyledTypographyText variant="body1"> Coming Soon </StyledTypographyText> </Stack> ) : ( <StyledCardImage isModel={true} src={model.icon} /> )} <StyledCardModelText ref={textRef}> {model.name} </StyledCardModelText> </StyledInnerBox> </StyledFormTypeModelBox> ); return isTruncated ? ( <Tooltip title={model.name} placement="bottom" arrow componentsProps={{ tooltip: { sx: { backgroundColor: '#757575', fontFamily: 'Inter', fontStyle: 'normal', letterSpacing: '0.4px', }, }, }} > <span style={{ display: 'block' }}>{cardContent}</span> </Tooltip> ) : ( cardContent ); }; Unstable Keys Using the array index (idx) as the React key in renderModelsGrid can lead to UI issues when the list changes. Use a stable identifier like model.id or model.name. .filter((m) => m.name.toLowerCase().includes(search.toLowerCase()), ) .map((model, idx) => ( <Grid key={idx} item lg={1} md={1} xs={1} xl={1} sm={1}> <ModelCard model={model} steps={steps} setSteps={setSteps} /> </Grid> ))} </Grid>

[CodiumAI-Agent]

PR Code Suggestions ✨

Latest suggestions up to 3bab93f

Category	Suggestion	Impact
Possible issue	Prefix useEffect with React Replace the undefined useEffect call with React.useEffect to avoid a ReferenceError since useEffect isn’t imported. This ensures the hook is correctly referenced from React. packages/client/src/pages/import/ImportPage.tsx [265-270] -useEffect(() => { +React.useEffect(() => { const el = textRef.current; if (el) { setIsTruncated(el.scrollWidth > el.clientWidth); } }, [model.name]); Suggestion importance[1-10]: 8 __ Why: Using bare useEffect without importing it will cause a ReferenceError; prefixing with React.useEffect fixes the runtime bug.	Medium
General	Use stable keys for grid items Use a stable, unique identifier for the key instead of the array index to avoid reconciliation issues and potential rendering bugs. For example, use model.name or an actual id property. packages/client/src/pages/import/ImportPage.tsx [511] -<Grid key={idx} item lg={1} md={1} xs={1} xl={1} sm={1}> +<Grid key={model.name} item lg={1} md={1} xs={1} xl={1} sm={1}> Suggestion importance[1-10]: 6 __ Why: Using the array index as a React key can lead to rendering issues; switching to a stable identifier like model.name improves reconciliation.	Low
	Use unique keys for tabs Avoid using the index as the key in tab mappings; use the label string which is unique. This prevents issues when tab order changes. packages/client/src/pages/import/ImportPage.tsx [625-627] -{tabLabels.map((label, i) => ( - <StyledTab key={i} label={label} /> +{tabLabels.map((label) => ( + <StyledTab key={label} label={label} /> ))} Suggestion importance[1-10]: 6 __ Why: Using the loop index for the key in tabLabels.map may cause problems when tab order changes; using the unique label string is more reliable.	Low
	Filter custom prop forwarding Prevent the custom isModel prop from being forwarded to the DOM by adding a shouldForwardProp filter. This removes React warnings about unknown attributes. packages/client/src/pages/import/ImportPage.tsx [106-113] -const StyledInnerBox = styled('div')<{ isModel?: boolean }>( - ({ theme, isModel }) => ({ - display: 'flex', - alignItems: isModel ? 'flex-start' : 'center', - gap: theme.spacing(1), - flexDirection: isModel ? 'column' : 'row', - }), -); +const StyledInnerBox = styled('div', { + shouldForwardProp: (prop) => prop !== 'isModel', +})<{ isModel?: boolean }>(({ theme, isModel }) => ({ + display: 'flex', + alignItems: isModel ? 'flex-start' : 'center', + gap: theme.spacing(1), + flexDirection: isModel ? 'column' : 'row', +})); Suggestion importance[1-10]: 5 __ Why: Without a shouldForwardProp filter, the custom isModel prop will be passed to the DOM and trigger React warnings; filtering prevents this.	Low

---

Previous suggestions

Suggestions up to commit 3bab93f

Category	Suggestion	Impact
Possible issue	Scope useEffect via React Prefix the useEffect call with React. to ensure the hook is defined. This avoids an undefined reference at runtime. packages/client/src/pages/import/ImportPage.tsx [261-270] const ModelCard = ({ model, setSteps, steps }) => { const textRef = useRef<HTMLParagraphElement>(null); const [isTruncated, setIsTruncated] = React.useState(false); - useEffect(() => { + React.useEffect(() => { const el = textRef.current; if (el) { setIsTruncated(el.scrollWidth > el.clientWidth); } }, [model.name]); Suggestion importance[1-10]: 8 __ Why: The unprefixed useEffect would be undefined since only React is imported, so using React.useEffect prevents runtime errors.	Medium
General	Use stable model name keys Replace the array index idx with a stable unique key such as model.name to prevent React key collisions when the list changes. packages/client/src/pages/import/ImportPage.tsx [506-518] {models .filter((m) => m.name.toLowerCase().includes(search.toLowerCase()), ) - .map((model, idx) => ( - <Grid key={idx} item lg={1} md={1} xs={1} xl={1} sm={1}> + .map((model) => ( + <Grid key={model.name} item lg={1} md={1} xs={1} xl={1} sm={1}> <ModelCard model={model} steps={steps} setSteps={setSteps} /> </Grid> ))} Suggestion importance[1-10]: 7 __ Why: Using model.name as the key ensures stable, unique keys in the list and prevents React reconciliation issues.	Medium
	Filter invalid isModel prop Prevent the custom isModel prop from being passed to the DOM by adding a shouldForwardProp filter. This removes invalid HTML attributes warnings. packages/client/src/pages/import/ImportPage.tsx [106-113] -const StyledInnerBox = styled('div')<{ isModel?: boolean }>( - ({ theme, isModel }) => ({ - display: 'flex', - alignItems: isModel ? 'flex-start' : 'center', - gap: theme.spacing(1), - flexDirection: isModel ? 'column' : 'row', - }), -); +const StyledInnerBox = styled('div', { + shouldForwardProp: (prop) => prop !== 'isModel', +})<{ isModel?: boolean }>(({ theme, isModel }) => ({ + display: 'flex', + alignItems: isModel ? 'flex-start' : 'center', + gap: theme.spacing(1), + flexDirection: isModel ? 'column' : 'row', +})); Suggestion importance[1-10]: 5 __ Why: Adding shouldForwardProp avoids passing the isModel prop to the DOM, preventing React warnings about invalid attributes.	Low
	Prevent isModel on img Filter out the isModel prop from being forwarded to the element by adding shouldForwardProp. This avoids React warnings about unknown DOM attributes. packages/client/src/pages/import/ImportPage.tsx [115-126] -const StyledCardImage = styled('img')<{ isModel?: boolean }>(({ isModel }) => ({ +const StyledCardImage = styled('img', { + shouldForwardProp: (prop) => prop !== 'isModel', +})<{ isModel?: boolean }>(({ isModel }) => ({ display: 'flex', height: '30px', width: '30px', alignItems: 'flex-start', gap: '10px', alignSelf: 'stretch', overflowClipMargin: 'content-box', overflow: 'clip', objectFit: 'cover', borderRadius: isModel ? '8px' : 'inherit', })); Suggestion importance[1-10]: 5 __ Why: Filtering isModel from StyledCardImage stops invalid attribute warnings on the <img> element, improving code quality.	Low

[johbaxter]

@ppatel9703 this is clean, can we do the same designs for other engines?

@Gunasrini18 good match to design

[github-actions]

@CodiumAI-Agent /update_changelog

[CodiumAI-Agent]

Changelog updates: 🔄

2025-05-27 *

Changed

• Refine add-model page with tabbed category navigation and improved filtering
• Update model cards and form boxes with enhanced styling, responsive layouts, and tooltips

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