fix(webview): show copy button in web clients #7310
Merged
+208
−50
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit refactors the UI for code blocks in chat messages to improve the placement of action buttons (copy, apply, insert) and fixes the issue where copy button is not showing up on web. The cause of the issue is due to the logic where actionsContainer will only be displayed when previewContainer is available, a regression from #7217. The fix is to always append available actionsContainer, but also insert the previewContainer before that when available. Key changes: - Modified CSS styles in `ChatMessageContent.module.css` to adjust padding, borders, and background colors for code blocks and buttons. - Updated `ChatMessageContent.tsx` to insert the preview container (containing file info) before the code block and the actions container after the code block. - Updated `create-buttons.ts` to use the default `buttonsContainer` style instead of `buttonsContainerTransparent` for both preview and action button containers. ## Test Plan Added storybook to cover this component
julialeex
requested changes
Mar 4, 2025
This commit refactors the code block action button layout in chat messages to improve the visual appearance. Key changes: - Modified `create-buttons.ts` to use `previewContainer` and `actionsContainer` for better clarity and separation of concerns. - Updated `ChatMessageContent.module.css` to remove the top border from the code block action buttons.
julialeex
approved these changes
Mar 4, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
CLOSE https://linear.app/sourcegraph/issue/CODY-5193/cody-web-copy-button-is-missing-for-code-blocks
This commit refactors the UI for code blocks in chat messages to improve the placement of action buttons (copy, apply, insert) and fixes the issue where copy button is not showing up on web.
The cause of the issue is due to the logic where actionsContainer will only be displayed when previewContainer is available, a regression from #7217.
The fix is to always append available actionsContainer, but also insert the previewContainer before that when available.
Key changes:
ChatMessageContent.module.cssto adjust padding, borders, and background colors for code blocks and buttons.ChatMessageContent.tsxto insert the preview container (containing file info) before the code block and the actions container after the code block.create-buttons.tsto use the defaultbuttonsContainerstyle instead ofbuttonsContainerTransparentfor both preview and action button containers.Test plan
Run Cody Web and confirmed the copy button is now showing up:
Added storybook to cover this component: