Repository navigation
Add custom font family setting for native chat - #33687
Conversation
Walkthrough
Priority: Merge Risk:
|
There was a problem hiding this comment.
Actionable comments posted: 1

Review info
-
Run configuration-
- Source mode: Auto
- Repository: Unavailable
- Branch: Unavailable
- File: No configuration file from this repository applied
- Commit: Unavailable
- Layers: Repository UI
- Review profile: CHILL
- Plan: Advanced
- Run ID:
48cfdd6d-a085-4760-ac37-e01b152b2b68
Files selected for processing: 26-
src/main/persistence/applying-settings/persistence-native-chat-appearance.test.tssrc/renderer/src/components/native-chat/NativeChatMessageList.font-windowing.test.tsxsrc/renderer/src/components/native-chat/native-chat-appearance-style.test.tssrc/renderer/src/components/native-chat/native-chat-appearance-style.tssrc/renderer/src/components/native-chat/use-native-chat-row-typography.test.tsxsrc/renderer/src/components/native-chat/use-native-chat-transcript-window.tssrc/renderer/src/components/settings/AppearanceChatSection.test.tsxsrc/renderer/src/components/settings/AppearanceChatSection.tsxsrc/renderer/src/components/settings/ChatFontFamilySetting.tsxsrc/renderer/src/components/settings/ChatSettingsSection.tsxsrc/renderer/src/components/settings/FontAutocomplete.tsxsrc/renderer/src/components/settings/SettingsFormControls.font-autocomplete.test.tsxsrc/renderer/src/components/settings/chat-appearance-search.tssrc/renderer/src/components/settings/chat-naming-persistence.test.tsxsrc/renderer/src/components/settings/settings-form-option-filter.tssrc/renderer/src/components/settings/settings-interface-secondary-section-renderers.tsxsrc/renderer/src/i18n/locales/en.jsonsrc/renderer/src/i18n/locales/es.jsonsrc/renderer/src/i18n/locales/fr.jsonsrc/renderer/src/i18n/locales/ja.jsonsrc/renderer/src/i18n/locales/ko.jsonsrc/renderer/src/i18n/locales/pt.jsonsrc/renderer/src/i18n/locales/zh.jsonsrc/renderer/src/web/web-native-chat-appearance-settings.test.tssrc/shared/native-chat-appearance-settings.test.tssrc/shared/native-chat-appearance-settings.ts
Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 5 remain after this review.
-
1c4ae67 to
cca2f64
Compare
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to GitHub limitations.

Major · Move the committed-value ref update out of render. · FontAutocomplete.tsx:61
src/renderer/src/components/settings/FontAutocomplete.tsx:61
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winMove the committed-value ref update out of render.
The assignment is conditional on
value !== prevValue, but it still mutateslastCommittedValueRef.currentduring render. The changed-lines React Doctor gate reports this as an error and blocks the static-analysis workflow. Move the assignment to a commit-phase effect, while retaining the event-handler update incommitValue.Suggested fix
useEffect(() => { previewFontFamilyRef.current = onPreviewFontFamily }, [onPreviewFontFamily]) + useEffect(() => { + lastCommittedValueRef.current = value + }, [value]) + const setRootNode = useCallback((element: HTMLDivElement | null): void => { rootRef.current = element if (!element) { @@ if (value !== prevValue) { setPrevValue(value) - lastCommittedValueRef.current = value setQuery(value) if (value !== query) { setIsFilteringQuery(false)

Review info
-
Run configuration-
- Source mode: Auto
- Repository: Unavailable
- Branch: Unavailable
- File: No configuration file from this repository applied
- Commit: Unavailable
- Layers: Repository UI
- Review profile: CHILL
- Plan: Advanced
- Run ID:
3725523f-05dc-4d7a-960f-85f0a906a295
Files selected for processing: 2-
src/renderer/src/components/settings/FontAutocomplete.tsxsrc/renderer/src/components/settings/SettingsFormControls.font-autocomplete.test.tsx
Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 6 remain after this review.
-
#33687 added English-only search keywords and a code sample to the chat font setting, which fails main's localization coverage check.
stablyai#33687 added English-only search keywords and a code sample to the chat font setting, which fails main's localization coverage check. (cherry picked from commit 5dfaee0) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Problem
Chat text could only use the IDE font or terminal-matched font, so people could not choose a different typeface for messages and the message box.
Solution
Add a Chat font family picker with installed-font suggestions, a live preview, and a “Same as IDE font” reset option. The choice is normalized and persisted, applies to chat body text while preserving code-font behavior, and is disabled when matching the terminal interface.
It also keeps a reader’s position stable and refreshes visible transcript row measurements when a font changes.
ELI5
Choose a font for chat without changing the rest of the app. You can preview it before saving, or switch back to the IDE font.
What Changed
Why
This lets chat typography be customized independently while keeping the existing IDE-font default and terminal-matching behavior intact. Previewing before commit avoids saving accidental selections.
Linked Issue
If you do not have one and are an outside contributors, your PR wiil be ignored. Refs is not sufficient. Link an actual issue
Fixes #20392
Community contribution
This PR takes inspiration from @denis-sj’s earlier community work in #21032. We will credit @denis-sj as the author of the corresponding chat-font work in this PR.
Visual Proof
TODO: Attach before/after screenshots or video of the chat font picker and preview.
Testing
AI Disclosure
Review
Agent skill upstream boundary
Notes
Ensure no issues in: Security, Cross-platoform support (Linux, Windows, Mac), Remote SSH, Mobile, general backwards compatibility, performance
Checklist
N/Awith reasonpnpm lint,pnpm typecheck,pnpm test, andpnpm buildpass (or CI will cover; local preferred)