PR #69634: fix(ui): code block copy button overlaps message-level copy action (#69605)

• Repository: openclaw/openclaw
• Author: longle325
• State: open | merged: False
• Link: https://github.com/openclaw/openclaw/pull/69634

Description (problem / solution / changelog)

Summary

Fixes #69605

In the Control UI webchat, clicking the copy button on a code block copies the entire assistant message instead of just the code block content.

Root Cause

The .chat-bubble-actions (containing the "Copy as markdown" button) is positioned absolutely at top: 6px; right: 8px of .chat-bubble. The CSS rule .chat-bubble.has-copy { padding-right: 70px; } was designed to create space for these actions, but the has-copy class was never applied to the .chat-bubble element.

Without this padding, the code block header (with its own "Copy" button) extends to the right edge of the bubble, directly under the .chat-bubble-actions. When the user clicks what appears to be the code block copy button in the overlapping area, the click hits the message-level "Copy as markdown" button instead, copying the entire message.

Changes

• Apply the existing has-copy class to .chat-bubble when canCopyMarkdown or canExpand is true, activating the padding-right: 70px rule and preventing the overlap between code block content and the floating action bar

Testing

• pnpm test ui/src/ui/chat/ passes (165 tests across 14 files)
• pnpm test ui/src/ui/markdown.test.ts passes (63 tests)
• pnpm tsgo:prod (typecheck) passes
• pnpm lint:core passes (0 errors)

AI Disclosure

This pull request was created with AI assistance using OpenCode. The code was reviewed and verified by a human contributor before submission. Every line of the change has been understood and can be explained by the contributor.

Changed files

• ui/src/ui/chat/grouped-render.ts (modified, +1/-1)

PR #69635: fix(ui): preserve raw code text in code-block copy button

• Repository: openclaw/openclaw
• Author: Eruditi
• State: open | merged: False
• Link: https://github.com/openclaw/openclaw/pull/69635

Description (problem / solution / changelog)

Summary

• Problem: The data-code attribute on code-block copy buttons was using escapeHtml(), which converted special characters like <, >, and & into HTML entities. When users clicked the copy button, they got escaped text instead of the original code.
• Why it matters: Users copying code with HTML special characters get broken, escaped code that does not work when pasted.
• What changed: Introduced escapeHtmlAttribute() which only escapes double quotes for HTML attribute safety, preserving the original code text.

Linked Issue

• Closes #69605

Change Type

• Bug fix

Scope

• UI / DX

Security Impact

None. No new permissions, secrets, network calls, or data scope changes.

Changed files

• ui/src/ui/markdown.test.ts (modified, +9/-1)
• ui/src/ui/markdown.ts (modified, +6/-4)

PR #69689: fix(ui): reserve bubble space for code block copy (#69605)

• Repository: openclaw/openclaw
• Author: ly85206559
• State: closed | merged: False
• Link: https://github.com/openclaw/openclaw/pull/69689

Description (problem / solution / changelog)

Summary

• Problem: In Control UI webchat, clicking Copy on a fenced code block pasted the entire assistant Markdown instead of only the snippet (#69605).
• Why it matters: Floating “Copy as markdown” / expand controls overlap the code-block header when both appear; mis-clicks trigger the bubble-level copy handler.
• What changed: Apply the existing .chat-bubble.has-copy class when assistant bubbles show copy/expand actions (ui/src/ui/chat/grouped-render.ts), reserving right padding per ui/src/styles/chat/grouped.css.
• What did NOT change: Markdown rendering, handleCodeBlockCopy, or clipboard APIs.

Change Type

• Bug fix
• Feature
• Refactor required for the fix
• Docs
• Security hardening
• Chore/infra

Scope

• Gateway / orchestration
• Skills / tool execution
• Auth / tokens
• Memory / storage
• Integrations
• API / contracts
• UI / DX
• CI/CD / infra

Linked Issue/PR

• Closes #69605
• Related #
• This PR fixes a bug or regression

Root Cause

• Root cause: has-copy CSS existed for bubble actions but was never applied in renderAssistantBubble, so .chat-bubble-actions could overlap fenced code-block Copy controls; users hit “Copy as markdown” instead.
• Missing detection / guardrail: No structural spacing when actions render.
• Contributing context: Hover/coarse-pointer (hover: none) keeps actions always interactive on some setups, increasing overlap risk.

Regression Test Plan

• Coverage: Unit test
• Target: ui/src/ui/chat/grouped-render.test.ts
• Scenario: Assistant bubble with markdown actions gets has-copy; user bubbles do not.
• Guardrail: Locks the layout contract between bubble actions and markdown chrome.

User-visible / Behavior Changes

• Assistant messages with copy/expand actions gain right padding so code-block Copy no longer sits under floating buttons.

Diagram

Before:
[hover bubble] -> [actions + code header overlap] -> mis-click -> full Markdown copied

After:
[hover bubble] -> [has-copy padding shifts content] -> code Copy hit target -> snippet copied

Security Impact

• New permissions/capabilities? No
• Secrets/tokens handling changed? No
• New/changed network calls? No
• Command/tool execution surface changed? No
• Data access scope changed? No

Repro + Verification

Environment

• OS: Windows / Linux (issue reported on Ubuntu)
• Control UI webchat with assistant reply containing fenced code at top of bubble

Steps

1. Open Control UI chat; get an assistant reply with a fenced code block near the top.
2. Hover the bubble so “Copy as markdown” appears.
3. Click the code-block Copy control.

Expected

• Clipboard contains only the code inside the fence.

Actual (before fix)

• Clipboard often contained the full assistant message (Markdown).

Evidence

• pnpm test ui/src/ui/chat/grouped-render.test.ts — pass
• pnpm check:changed — pass

Human Verification

• Verified scenarios: unit tests + layout contract (has-copy when actions present).
• Edge cases: user bubble without actions (no has-copy).
• Not verified: manual browser click on physical device (CI/agent only).

Compatibility / Migration

• Backward compatible? Yes
• Config/env changes? No
• Migration needed? No

Risks and Mitigations

• Risk: Slightly narrower assistant bubble text when actions show.
  • Mitigation: Matches existing CSS intent; padding only when actions exist.

Changed files

• CHANGELOG.md (modified, +1/-0)
• ui/src/ui/chat/grouped-render.test.ts (modified, +32/-0)
• ui/src/ui/chat/grouped-render.ts (modified, +7/-3)