Repository navigation
🫧 fix: Paint Chat Surfaces From Theme Roles - #16483
Conversation
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
8fa538c to
6fac64f
Compare
|
Lighthouse CI failed. The last 80 log lines contain the measured budgets and assertion failures. |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 6fac64fe8d
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| @@ -9,7 +9,7 @@ const sourceToEndpoint = { | |||
| }; | |||
|
|
|||
| const sourceToClassname = { | |||
| [FileSources.openai]: 'bg-white/75 dark:bg-black/65', | |||
| [FileSources.openai]: 'bg-surface-primary/75', | |||
There was a problem hiding this comment.
Preserve the OpenAI badge's dark-mode opacity
In dark mode, this changes the OpenAI source badge from 65%-opaque black to 75%-opaque surface-primary (#0d0d0d in the default dark theme). Because the badge is composited over arbitrary file previews, this visibly darkens it—for example, over white the resulting channel falls from about 89 to 74—even though this change is presented as a semantic-token migration rather than a redesign. Preserve the shipped dark appearance while making the color theme-aware.
AGENTS.md reference: AGENTS.md:L42-L45
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Fixed in c299b69: the chip keeps white/75 and black/65; it composites over the file's own preview, so it is recorded in theme/allowlist.md as a media overlay with the code-execution badge.
| await selectMockEndpoint(page, MOCK_ENDPOINTS[0]); | ||
| await enableCodeInterpreter(page); | ||
|
|
||
| const response = await sendMessageAndWaitForCompletion(page, `E2E_EXECUTE_CODE:${label}`); |
There was a problem hiding this comment.
Exercise CodeWindowHeader instead of BashCall
With the standard mock configuration, enabling Run Code registers bash_tool and read_file, while the fake model's E2E_EXECUTE_CODE handler deliberately selects bash_tool first. The located “Copy code” button therefore belongs to BashCall; its parent is the concrete bg-surface-code container, so the assertion that this element is transparent fails and the test never reaches CodeWindowHeader. Drive a tool that actually renders CodeWindowHeader instead.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Fixed in 838ebd9: the scenario now creates a skill file through the model, which opens the file-authoring card that renders CodeWindowHeader.
6fac64f to
c299b69
Compare
c299b69 to
fa60955
Compare
|
Lighthouse CI failed. The last 80 log lines contain the measured budgets and assertion failures. |
fa60955 to
e088589
Compare
|
Lighthouse CI failed. The last 80 log lines contain the measured budgets and assertion failures. |
e088589 to
01f3134
Compare
|
Lighthouse CI failed. The last 80 log lines contain the measured budgets and assertion failures. |
The code window header and skill output panel stop repainting their surface-secondary container with a per-mode fill that matched it in every bundled theme, the drag-and-drop backdrop becomes the theme scrim, the OpenAI file-source chip takes the primary surface, and the banner drops a stopless dark gradient. ActionIcon, RetrievalIcon, WrenchIcon and the message ProgressCircle had no importers and carried fixed Lottie colours, so they are removed. The media, artwork and exported-document colours that stay fixed are recorded in the theme allowlist.
The theme scrim is gray in default light, so at the same alpha it dimmed the page less than the black backdrop it replaced. The backdrop keeps its original colour and the allowlist records the scrim-opacity role it waits on.
The mock code interpreter exposes bash_tool, whose card has its own header; a skill file created by the model opens the file-authoring card that renders CodeWindowHeader.
The chip composites over the file's own preview, where surface-primary at 75% darkened it against the shipped black at 65%. It keeps its colours and joins the code-execution badge in the allowlist as a media overlay.
|
Lighthouse CI failed. The last 80 log lines contain the measured budgets and assertion failures. |
01f3134 to
094ac1b
Compare
* fix: Paint Chat Surfaces From Theme Roles The code window header and skill output panel stop repainting their surface-secondary container with a per-mode fill that matched it in every bundled theme, the drag-and-drop backdrop becomes the theme scrim, the OpenAI file-source chip takes the primary surface, and the banner drops a stopless dark gradient. ActionIcon, RetrievalIcon, WrenchIcon and the message ProgressCircle had no importers and carried fixed Lottie colours, so they are removed. The media, artwork and exported-document colours that stay fixed are recorded in the theme allowlist. * fix: Keep the Drag-and-Drop Backdrop Black Until Scrim Opacity Is a Role The theme scrim is gray in default light, so at the same alpha it dimmed the page less than the black backdrop it replaced. The backdrop keeps its original colour and the allowlist records the scrim-opacity role it waits on. * test: Cover the Code Window Header Showing Its Panel Surface * test: Exercise the Code Window Header Through a File-Authoring Card The mock code interpreter exposes bash_tool, whose card has its own header; a skill file created by the model opens the file-authoring card that renders CodeWindowHeader. * fix: Keep the OpenAI File-Source Chip's Dark Opacity The chip composites over the file's own preview, where surface-primary at 75% darkened it against the shipped black at 65%. It keeps its colours and joins the code-execution badge in the allowlist as a media overlay. (cherry picked from commit 0b80ea5) Original-PR: LibreChat-AI#16483
Summary
Part of the theme-leakage stack; based on the library link. In the chat area, the code window header (
CodeWindowHeader, used by ExecuteCode, ReadFileCall and FileAuthoringCall) and the skill output panel paintedbg-surface-primary-alt dark:bg-transparentover asurface-secondarycontainer. In every bundled theme (default, dark, both high-contrast palettes, ClickHouse light and dark) that pair equals the container, so both classes go and the header shows its container, which is also what a custom theme now gets. The banner drops adark:bg-gradient-to-rthat had no stops.ActionIcon,RetrievalIcon,WrenchIconandChat/Messages/Content/ProgressCirclehad no importers and carried fixed Lottie colours, so they are removed. The drop illustration and its black backdrop (which moves to the theme scrim once scrim opacity is a theme role, berry-13#181), the file-source chips over a file's own preview (OpenAI and code execution), the upload progress over an image, and the documents that leave the app (markdown and mermaid exports, clipboard rich text, runtime token fallbacks) go into the allowlist.Counts, before to after this link: raw palette utilities 56 (unchanged),
dark:colour utilities 32 to 28, hex/rgb/hsl literals 793 to 776. Suppressions:client/srcno-raw-colors 47 to 30, no-inline-styles 211 to 192, no-arbitrary-values 162 to 161; the rest unchanged. Theeslint-suppressions.jsondiff only removes or lowers entries for files this link edits or deletes.Type of change
Testing
Tested environments/configuration:
surface-secondarycomputes transparent over 247,247,248 / 33,33,33 (default) and 246,247,250 / 40,40,40 (ClickHouse).Automated tests:
reviewctl precheckagainst the library link: static checks andjest-clientpass.@scenario:code-window-header-shows-its-panel(new,e2e/specs/mock/scenarios/code-window-header.spec.ts): a skill file created by the model opens the file-authoring card; its code header's background is transparent and its panel paintssurface-secondary.npx tsc --noEmit(incremental) forclient: clean.npm run static-checks -- --against berry-13/theme-leakage-library: all affected checks pass.Screenshots / recordings
No visible change in the bundled themes: the header and output panel compute the same colours as before in default, dark, both high-contrast palettes and ClickHouse. The removed components had no importers.
Risk / compatibility
None. The removed components had no importers in the app or the package.
Checklist