feat: show custom profiles in chat header profile selector#4382
feat: show custom profiles in chat header profile selector#4382salarkhannn wants to merge 1 commit into
Conversation
📝 WalkthroughWalkthroughThe chat header now renders agent profile buttons from a locale-aware sorted helper that excludes builtIn profiles, and the helper is covered by unit tests for filtering and ordering. ChangesAgent Profile Selector UI
Estimated code review effort: 2 (Simple) | ~10 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Warning Review ran into problems🔥 ProblemsGit: Failed to clone repository. Please run the 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
app/src/pages/Conversations.tsx (1)
2955-2960: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winSort doesn't actually use the app's locale.
a.name.localeCompare(b.name)uses the runtime's default locale, not the app's selecteduiLocale(already available at Line 333 and used elsewhere in this component forchatSend). For non-English users this can order custom profiles inconsistently with the rest of the localized UI.🔧 Proposed fix
{agentProfiles .filter(p => !p.builtIn) .sort( (a, b) => - (a.sortOrder ?? 0) - (b.sortOrder ?? 0) || a.name.localeCompare(b.name) + (a.sortOrder ?? 0) - (b.sortOrder ?? 0) || + a.name.localeCompare(b.name, uiLocale) )🤖 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 `@app/src/pages/Conversations.tsx` around lines 2955 - 2960, The custom agent profile sort in Conversations.tsx is using the runtime default locale via a plain localeCompare call instead of the app’s selected uiLocale. Update the comparator in the agentProfiles sort to pass the existing uiLocale value (the same one already used in chatSend and available in this component) into the name comparison so ordering matches the localized UI for non-English users.
🤖 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.
Nitpick comments:
In `@app/src/pages/Conversations.tsx`:
- Around line 2955-2960: The custom agent profile sort in Conversations.tsx is
using the runtime default locale via a plain localeCompare call instead of the
app’s selected uiLocale. Update the comparator in the agentProfiles sort to pass
the existing uiLocale value (the same one already used in chatSend and available
in this component) into the name comparison so ordering matches the localized UI
for non-English users.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 88b80c28-27a1-4018-ac17-c8bdde5b9ccc
📒 Files selected for processing (1)
app/src/pages/Conversations.tsx
There was a problem hiding this comment.
Pull request overview
This PR extends the chat header’s agent-profile selector so that user-created (non-built-in) profiles from Settings → Profiles are visible and selectable directly from the main chat surface, alongside the existing Quick/Reasoning options.
Changes:
- Render additional radio-style buttons for each non-built-in agent profile in the chat header.
- Sort custom profiles by
sortOrder, then byname.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .sort( | ||
| (a, b) => | ||
| (a.sortOrder ?? 0) - (b.sortOrder ?? 0) || a.name.localeCompare(b.name) | ||
| ) |
| {agentProfiles | ||
| .filter(p => !p.builtIn) | ||
| .sort( | ||
| (a, b) => | ||
| (a.sortOrder ?? 0) - (b.sortOrder ?? 0) || a.name.localeCompare(b.name) | ||
| ) | ||
| .map(profile => ( | ||
| <button | ||
| key={profile.id} | ||
| type="button" | ||
| role="radio" | ||
| aria-checked={selectedAgentProfileId === profile.id} | ||
| data-analytics-id={`chat-header-mode-${profile.id}`} | ||
| onClick={() => void handleSelectAgentProfile(profile.id)} | ||
| className={`rounded-full px-2.5 py-0.5 text-xs font-medium transition-all ${ |
salarkhannn
force-pushed
the
feat/profile-custom-profiles-in-header
branch
from
d3e69ac to
22a7d71
Compare
There was a problem hiding this comment.
🧹 Nitpick comments (1)
app/src/pages/Conversations.tsx (1)
221-228: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low valueConsider memoizing the sort result.
sortAgentProfilesis called inline during render (line 2964) rather than being memoized, so it re-filters/re-sorts on every render. Logic itself is correct.♻️ Optional refactor
-{sortAgentProfiles(agentProfiles, uiLocale).map(profile => ( +{sortedAgentProfiles.map(profile => (with
const sortedAgentProfiles = useMemo(() => sortAgentProfiles(agentProfiles, uiLocale), [agentProfiles, uiLocale]);declared near other memoized values.🤖 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 `@app/src/pages/Conversations.tsx` around lines 221 - 228, Memoize the agent profile sorting result in Conversations to avoid re-filtering/re-sorting on every render. Update the `Conversations` component by introducing a `useMemo`-based `sortedAgentProfiles` near the other memoized values, using `sortAgentProfiles(agentProfiles, uiLocale)` with `agentProfiles` and `uiLocale` as dependencies, and then replace the inline call site with the memoized value.
🤖 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.
Nitpick comments:
In `@app/src/pages/Conversations.tsx`:
- Around line 221-228: Memoize the agent profile sorting result in Conversations
to avoid re-filtering/re-sorting on every render. Update the `Conversations`
component by introducing a `useMemo`-based `sortedAgentProfiles` near the other
memoized values, using `sortAgentProfiles(agentProfiles, uiLocale)` with
`agentProfiles` and `uiLocale` as dependencies, and then replace the inline call
site with the memoized value.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 12e09cb6-c347-4b95-90e0-bfb1eae577a7
📒 Files selected for processing (2)
app/src/pages/Conversations.tsxapp/src/pages/__tests__/Conversations.test.tsx
Summary
Custom agent profiles created in Settings → Profiles are now visible and selectable from the chat header, right alongside the existing Quick / Reasoning toggle. No extra navigation needed.
Problem
The chat header only had hardcoded toggles for "Quick" and "Reasoning" profiles. If someone created a custom profile (e.g. "Marketing" or "Coder"), it was invisible from the main chat surface — you had to dig into Settings to switch to it.
Solution
Renders a button for each non-built-in profile returned by the backend, using the same radiogroup pattern as the existing Quick/Reasoning buttons. Profiles are sorted by sortOrder, then alphabetically by name. Nothing changes if there are no custom profiles.
Closes #3486
Summary by CodeRabbit