Skip to content

Add custom font family setting for native chat - #33687

Merged
AmethystLiang merged 3 commits into
mainfrom
allow-chat-ui-to-have-custom-font
Oct 26, 2026
Merged

AmethystLiang merged 3 commits into
mainfrom
allow-chat-ui-to-have-custom-font

Conversation

@AmethystLiang

@AmethystLiang AmethystLiang commented Oct 25, 2026 •

Copy link
Copy Markdown
Contributor
Files Added Deleted Net
Test 9 $\color{#1a7f37}{\Huge{\mathbf{+}}}$​561 $\color{#cf222e}{\Huge{\mathbf{−}}}$​7 $\color{#1a7f37}{\Huge{\mathbf{+}}}$​554
Prod 17 $\color{#1a7f37}{\Huge{\mathbf{+}}}$​259 $\color{#cf222e}{\Huge{\mathbf{−}}}$​21 $\color{#1a7f37}{\Huge{\mathbf{+}}}$​238

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

  • Added a native-chat font-family setting, search entry, localized labels, preview, and installed-font suggestions.
  • Added normalization, persistence, reset behavior, and style application for custom chat fonts.
  • Preserved terminal interface matching precedence and code-font behavior.
  • Updated windowed transcript handling and coverage for font reflow, scrolling, hidden views, autocomplete behavior, persistence, and settings UI.

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

  • Added/updated tests for settings persistence, normalization, style precedence, autocomplete preview/commit behavior, settings controls, browser-local settings, and windowed transcript font reflow/scroll anchoring.
  • I manually tested these changes locally
  • Automated tests added/updated, or explained why not below

AI Disclosure

Review

Agent skill upstream boundary

  • Not applicable, or this change copies or mechanically translates no upstream skill-installer source, tests, fixtures, registry entries, path tables, comments, or documentation.

Notes

Ensure no issues in: Security, Cross-platoform support (Linux, Windows, Mac), Remote SSH, Mobile, general backwards compatibility, performance

Checklist

  • This PR is small and focused
  • I explained what changed and why (ELI5, the user-facing before/after, the mechanism, and why over the alternatives)
  • Before/after screenshots or videos attached for UI changes, or N/A with reason
  • Self-reviewed for correctness, security, and performance
  • Cross-platform, SSH/remote, and path/shortcut impact considered (or N/A)
  • pnpm lint, pnpm typecheck, pnpm test, and pnpm build pass (or CI will cover; local preferred)

@coderabbitai

coderabbitai Bot commented Oct 25, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

Walkthrough

The change adds a chat font-family setting to native chat appearance preferences. The setting is trimmed during normalization and defaults to an empty value. A searchable picker supports font suggestions, preview, and commit behavior. Terminal-interface matching disables the picker and applies the terminal font. Tests cover persistence, picker interactions, and transcript positioning during font changes.

Priority: Normal

Merge Risk: Moderate · up to cca2f

The font picker’s ref update blocks static analysis. Move it out of render before merging.

Pre-merge checks: Passed 2 · Failed 3

Failed Failed checks: 3 warnings

Check name Status Explanation Resolution
Description check Warning The description follows the template and covers most required parts. It has an ELI5, What Changed, Why, a linked issue (Fixes #20392), Testing with automated tests checked, and the Agent skill upstrea… Attach before and after screenshots or a video of the chat font picker and preview in the Visual Proof section, or write N/A with a reason if no visual change applies. Check the manual testing box only after manual testing is done, and stat…
Linked Issues check Warning Issue #20392 requests chat appearance controls beyond font family. This PR adds and tests fontFamily normalization, persistence, autocomplete, preview, style application, and transcript reflow. The … Implement the remaining applicable #20392 appearance controls, or split the work and update the issue linkage so this PR has a font-family-only requirement.
Docstring Coverage Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 22 functions across 19 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
Passed Passed checks: 2 passed
Check name Status Explanation
Title check Passed The title "Add custom font family setting for native chat" matches the main change. The PR adds a native-chat font-family setting with a picker, suggestions, preview, and reset, and the diff matches t…
Out of Scope Changes check Passed The changed production files, localization entries, and tests support the font-family setting described in the PR and issue #20392. Autocomplete behavior, persistence, style precedence, and transcript…
Full details: Title check

Explanation

The title "Add custom font family setting for native chat" matches the main change. The PR adds a native-chat font-family setting with a picker, suggestions, preview, and reset, and the diff matches that scope. The title is short, specific, and free of noise.

Full details: Out of Scope Changes check

Explanation

The changed production files, localization entries, and tests support the font-family setting described in the PR and issue #20392. Autocomplete behavior, persistence, style precedence, and transcript measurement updates are supporting changes for that feature. No unrelated change is demonstrated.

Full details: Description check

Explanation

The description follows the template and covers most required parts. It has an ELI5, What Changed, Why, a linked issue (Fixes #20392), Testing with automated tests checked, and the Agent skill upstream boundary box checked. It also has a Community contribution section. Several items are incomplete. The Visual Proof section is a TODO with no before/after screenshots or video, even though the template marks it as required for UI changes. The manual testing box is unchecked. The Self-reviewed, Cross-platform/SSH impact, and lint/typecheck/test/build checklist items are unchecked. The Fixes # line now includes an issue number, but the Notes and AI Disclosure sections are left as template text.

Resolution

Attach before and after screenshots or a video of the chat font picker and preview in the Visual Proof section, or write N/A with a reason if no visual change applies. Check the manual testing box only after manual testing is done, and state the platforms tested. Complete the Testing section with reviewer steps. Confirm the Cross-platform, SSH/remote, and path/shortcut impact items, and confirm that lint, typecheck, test, and build pass. Replace the TODO text in Visual Proof. Fill in the AI Disclosure section if it applies to this contributor.

Full details: Linked Issues check

Explanation

Issue #20392 requests chat appearance controls beyond font family. This PR adds and tests fontFamily normalization, persistence, autocomplete, preview, style application, and transcript reflow. The reviewed settings type still has no line-height setting, configurable monospace font family, or chat theme setting. The PR therefore does not complete the directly linked issue's proposed coding requirements.

Resolution

Implement the remaining applicable #20392 appearance controls, or split the work and update the issue linkage so this PR has a font-family-only requirement.

Finishing Touches: 💡 2
📝 Generate docstrings: 💡
  • Commit to this branch
  • Create a new PR
🛠️ Fix failing CI checks: 💡
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Commits

Reviewing files that changed from the base of the PR and between ddd55a4 and 1c4ae67.

Files selected for processing: 26
  • src/main/persistence/applying-settings/persistence-native-chat-appearance.test.ts
  • src/renderer/src/components/native-chat/NativeChatMessageList.font-windowing.test.tsx
  • src/renderer/src/components/native-chat/native-chat-appearance-style.test.ts
  • src/renderer/src/components/native-chat/native-chat-appearance-style.ts
  • src/renderer/src/components/native-chat/use-native-chat-row-typography.test.tsx
  • src/renderer/src/components/native-chat/use-native-chat-transcript-window.ts
  • src/renderer/src/components/settings/AppearanceChatSection.test.tsx
  • src/renderer/src/components/settings/AppearanceChatSection.tsx
  • src/renderer/src/components/settings/ChatFontFamilySetting.tsx
  • src/renderer/src/components/settings/ChatSettingsSection.tsx
  • src/renderer/src/components/settings/FontAutocomplete.tsx
  • src/renderer/src/components/settings/SettingsFormControls.font-autocomplete.test.tsx
  • src/renderer/src/components/settings/chat-appearance-search.ts
  • src/renderer/src/components/settings/chat-naming-persistence.test.tsx
  • src/renderer/src/components/settings/settings-form-option-filter.ts
  • src/renderer/src/components/settings/settings-interface-secondary-section-renderers.tsx
  • src/renderer/src/i18n/locales/en.json
  • src/renderer/src/i18n/locales/es.json
  • src/renderer/src/i18n/locales/fr.json
  • src/renderer/src/i18n/locales/ja.json
  • src/renderer/src/i18n/locales/ko.json
  • src/renderer/src/i18n/locales/pt.json
  • src/renderer/src/i18n/locales/zh.json
  • src/renderer/src/web/web-native-chat-appearance-settings.test.ts
  • src/shared/native-chat-appearance-settings.test.ts
  • src/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.

@AmethystLiang
AmethystLiang force-pushed the allow-chat-ui-to-have-custom-font branch from 1c4ae67 to cca2f64 Compare October 26, 2026 00:03

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to GitHub limitations.

⚠️ Outside diff range comments (1)

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 win

Move the committed-value ref update out of render.

The assignment is conditional on value !== prevValue, but it still mutates lastCommittedValueRef.current during 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 in commitValue.

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
Commits

Reviewing files that changed from the base of the PR and between 1c4ae67 and cca2f64.

Files selected for processing: 2
  • src/renderer/src/components/settings/FontAutocomplete.tsx
  • src/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.

@AmethystLiang
AmethystLiang merged commit 478ad91 into main Oct 26, 2026
43 of 45 checks passed
nwparker added a commit that referenced this pull request Oct 26, 2026
#33687 added English-only search keywords and a code sample to the chat font
setting, which fails main's localization coverage check.
audichuang pushed a commit to audichuang/orca that referenced this pull request Oct 26, 2026
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: Appearance settings for the Chat UI (font family, size, line height, theme)

1 participant