fix(frontend): use consistent marble avatar fallback in navbar (#13411) by Chessing234 · Pull Request #13426 · Significant-Gravitas/AutoGPT

Chessing234 · 2026-06-24T12:44:25Z

Summary

Replace the navbar account menu's custom letter-on-purple avatar fallback with the shared AvatarFallback component (boring-avatars marble gradient)
Ensures the same user sees a consistent avatar treatment in the navbar and across profile/creator displays

Root cause

InitialAvatar in the account menu rendered a hardcoded initial letter on a solid violet background, while the design-system Avatar component uses a marble gradient fallback seeded by the user's name everywhere else.

Test plan

pnpm exec vitest run src/components/layout/Navbar/components/AccountMenu/components/__tests__/InitialAvatar.test.tsx
Manually verify navbar avatar shows marble gradient when no profile image is set
Manually verify profile/creator avatars still match navbar fallback style

Made with Cursor

Replace the navbar account menu's letter-on-purple fallback with the shared AvatarFallback component so user avatars match profile/creator displays. Fixes Significant-Gravitas#13411 Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-06-24T12:44:35Z

This PR targets the master branch but does not come from dev or a hotfix/* branch.

Automatically setting the base branch to dev.

CLAassistant · 2026-06-24T12:44:42Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

coderabbitai · 2026-06-24T12:44:48Z

Walkthrough

InitialAvatar is refactored to accept an optional src prop and use AvatarImage/AvatarFallback from the Avatar module. The fallback text changes from a computed name initial to name?.trim() or "User". Tests are updated to assert SVG-based marble gradient fallback rendering and image accessibility when src is provided.

Changes

InitialAvatar AvatarImage/Fallback refactor

Layer / File(s)	Summary
Component: src prop and AvatarImage/AvatarFallback rendering `...AccountMenu/components/InitialAvatar.tsx`	Imports updated to include `AvatarFallback` and `AvatarImage`. `Props` gains optional `src?: string`. Render logic replaces the initial-letter `<div>` with `AvatarImage` (driven by `src`) and `AvatarFallback` (using `name?.trim()` or `"User"`).
Tests: fallback and src rendering assertions `...AccountMenu/components/__tests__/InitialAvatar.test.tsx`	Fallback tests switch from asserting extracted initial characters to checking for SVG-based marble gradient presence across four cases. A new async test asserts that `src` renders an `img` with accessible name `"ada's avatar"`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

Significant-Gravitas/AutoGPT#13138: Modifies the same InitialAvatar.tsx and InitialAvatar.test.tsx files around the avatar image and fallback rendering area.
Significant-Gravitas/AutoGPT#13155: Also touches InitialAvatar.tsx and its tests concerning AvatarImage rendering and z-index/layering assertions that this PR removes.

Suggested labels

size/m, platform/frontend

Suggested reviewers

kcze
0ubbe
autogpt-pr-reviewer

Poem

🐇 No more lonely letter "A" on purple ground,
A marble gradient swirls without a sound.
The src prop arrives, the fallback blooms in style,
Consistent avatars everywhere — now that's worthwhile!
✨ Hop hop hooray, the navbar joins the crew!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly reflects the navbar avatar fallback consistency change and is specific enough.
Description check	✅ Passed	The description matches the PR by explaining the avatar fallback refactor and related test plan.
Linked Issues check	✅ Passed	The navbar avatar now uses the shared Avatar fallback, matching the issue's consistency objective.
Out of Scope Changes check	✅ Passed	The changes stay focused on the avatar fallback refactor and tests, with no unrelated edits evident.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

sentry · 2026-06-24T12:47:35Z

-        className="relative z-10"
-      />
+      <AvatarImage src={src} alt={name ? `${name}'s avatar` : "User avatar"} />
+      <AvatarFallback>{name?.trim() || "User"}</AvatarFallback>


Bug: The InitialAvatar's fallback BoringAvatar is always rendered at 40px, causing it to be cropped when the component is used at a smaller size, like 32px.
_{Severity: LOW}

Suggested Fix

Pass the className prop from InitialAvatar down to the AvatarFallback component. This will allow AvatarFallback to correctly calculate the required size for the BoringAvatar SVG based on the Tailwind CSS classes, ensuring it matches the container size.

Prompt for AI Agent

Review the code at the location below. A potential bug has been identified by an AI agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not valid. Location: autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx#L17 Potential issue: The `AvatarFallback` component within `InitialAvatar` defaults to rendering its `BoringAvatar` SVG at a fixed size of 40px. This occurs because it's invoked without a `size` or `className` prop, causing its internal size calculation to fall back to a hardcoded `40`. When `InitialAvatar` is used with a `className` that specifies a smaller size (e.g., `h-8 w-8` for 32px), the outer container shrinks but the inner SVG does not. This results in the 40px SVG being clipped by the smaller container's `overflow-hidden` style, making the fallback avatar appear cropped instead of scaled correctly.

_{Did we get this right? 👍 / 👎 to inform future reviews.}

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/__tests__/InitialAvatar.test.tsx (1)

34-39: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Add a whitespace-name + src regression test.

This block covers the normal src case, but not whitespace-only names. Add one case asserting the image accessible name falls back to "User avatar" after normalization.

Suggested test addition

+  test("uses 'User avatar' alt text when name is whitespace and src is provided", async () => {
+    render(<InitialAvatar name="   " src="https://example.com/avatar.png" />);
+
+    await waitFor(() => {
+      expect(screen.getByRole("img", { name: "User avatar" })).toBeDefined();
+    });
+  });

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/__tests__/InitialAvatar.test.tsx`
around lines 34 - 39, The InitialAvatar tests currently cover the normal src
rendering path but miss the whitespace-only name regression. Add a new case in
InitialAvatar.test.tsx alongside the existing “shows image when src is provided”
test that renders InitialAvatar with a whitespace-only name and a src, then
assert via getByRole("img") that the accessible name falls back to “User avatar”
after name normalization.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx`:
- Around line 16-17: The avatar name handling in InitialAvatar should normalize
the `name` value once and reuse that normalized result for both `AvatarImage`
alt text and `AvatarFallback`, since raw `name` can produce invalid
whitespace-only strings while the fallback already trims it. Update the
`InitialAvatar` component to derive a single trimmed name value before
rendering, then use that same value for the alt message and fallback so both
behave consistently.

---

Nitpick comments:
In
`@autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/__tests__/InitialAvatar.test.tsx`:
- Around line 34-39: The InitialAvatar tests currently cover the normal src
rendering path but miss the whitespace-only name regression. Add a new case in
InitialAvatar.test.tsx alongside the existing “shows image when src is provided”
test that renders InitialAvatar with a whitespace-only name and a src, then
assert via getByRole("img") that the accessible name falls back to “User avatar”
after name normalization.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 86dca489-dd63-4469-83b5-27544314497b

📥 Commits

Reviewing files that changed from the base of the PR and between 150514f and 390da1d.

📒 Files selected for processing (2)

autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx
autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/__tests__/InitialAvatar.test.tsx

📜 Review details

⏰ Context from checks skipped due to timeout. (8)

GitHub Check: check API types
GitHub Check: integration_test
GitHub Check: lint
GitHub Check: Seer Code Review
GitHub Check: Check PR Status
GitHub Check: end-to-end tests
GitHub Check: Analyze (python)
GitHub Check: Analyze (typescript)

🧰 Additional context used

📓 Path-based instructions (15)

autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Use Node.js 21+ with pnpm package manager for frontend development
Always run 'pnpm format' for formatting and linting code in frontend development

Format frontend code using pnpm format

autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Fully capitalize acronyms in symbols, e.g. graphID, useBackendAPI
No linter suppressors (// @ts-ignore``, // eslint-disable) — fix the actual issue

Files:

autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/__tests__/InitialAvatar.test.tsx
autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

autogpt_platform/frontend/**/*.{tsx,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

autogpt_platform/frontend/**/*.{tsx,ts}: Use function declarations for components and handlers (not arrow functions) in React components
Only use arrow functions for small inline lambdas (map, filter, etc.) in React components
Use PascalCase for component names and camelCase with 'use' prefix for hook names in React
Use Tailwind CSS utilities only for styling in frontend components
Use design system components from 'src/components/' (atoms, molecules, organisms) in frontend development
Never use 'src/components/legacy/' in frontend code
Only use Phosphor Icons (@phosphor-icons/react) for icons in frontend components
Use generated API hooks from '@/app/api/__generated__/endpoints/' instead of deprecated 'BackendAPI' or 'src/lib/autogpt-server-api/'
Use React Query for server state (via generated hooks) in frontend development
Default to client components ('use client') in Next.js; only use server components for SEO or extreme TTFB needs
Use '' component for rendering errors in frontend UI; use toast notifications for mutation errors; use 'Sentry.captureException()' for manual exceptions
Separate render logic from data/behavior in React components; keep comments minimal (code should be self-documenting)

Files:

autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/__tests__/InitialAvatar.test.tsx
autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

autogpt_platform/frontend/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

autogpt_platform/frontend/**/*.{ts,tsx}: No barrel files or 'index.ts' re-exports in frontend code
Regenerate API hooks with 'pnpm generate:api' after backend OpenAPI spec changes in frontend development

autogpt_platform/frontend/**/*.{ts,tsx}: Use function declarations (not arrow functions) for components/handlers
No any types unless the value genuinely can be anything
Keep render functions and hooks under ~50 lines; extract named helpers or sub-components when they grow longer

Files:

autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/__tests__/InitialAvatar.test.tsx
autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

autogpt_platform/frontend/src/components/**/*.{tsx,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Structure React components as: ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts (exception: small 3-4 line components can be inline; render-only components can be direct files)

Files:

autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/__tests__/InitialAvatar.test.tsx
autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

autogpt_platform/frontend/src/components/**/*.{ts,tsx}