UI fixes and copy to clipboard#4
Conversation
|
Autonomous SOC2 cleanup disposition (2026-05-24): still potentially useful, but not merge-ready as-is; not superseded by WENTZEL #12-#15. This is unrelated UI/copy-to-clipboard work: CSS spacing changes plus Current state: open since 2024-04-03, last updated 2025-01-13, clean merge state, no PR checks reported, 5 changed files across shared CSS, prompt, headless primitives, and types. Blockers before merge: stale product/UI assumptions, no current CI signal, and shared styling/API surface area. Recommendation is not to merge directly; harvest into a fresh WENTZEL branch only if product still wants the feature. No replacement branch created. |
PromptView's new allowCopy button passes the answer as a plain string child, but CopyCodeButton read children[0].props.children[0] — which on a string is just its first character's (undefined) props — so the answer- copy button copied an empty string. Add extractCopyableText() to handle both the plain-string answer shape and the react-markdown code-block tree. Add headless tests covering both child shapes and the useCopyToClipboard didCopy toggle; the plain-string test fails against the old extraction and passes with the fix. Local: build green; headless suite 17/17; full suite 146 (3 added). The intermittent SearchView keyboard-nav flake on this branch is pre-existing on its older base and unrelated (fixed separately on the eslint-9 branch). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
📝 WalkthroughWalkthroughThis PR introduces a configurable copy-to-clipboard feature for generated answers in DevDocs.ai. It adds a new ChangesCopy-to-clipboard feature
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
packages/css/devdocsai.cssParsing error: Declaration or statement expected. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/react/src/primitives/headless.tsx`:
- Around line 275-280: The handleClick in useCopyToClipboard currently calls
navigator.clipboard.writeText(content) without feature-detecting or awaiting it
and immediately toggles setDidCopy(true); change handleClick to first check for
navigator.clipboard existence, then call writeText as an async operation (or
handle the returned promise), await it or use .then/.catch, only call
setDidCopy(true) and start the 2000ms reset timer on successful resolution, and
handle rejection by logging or exposing an error state so unhandled promise
rejections and false "copied" UI are avoided.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: d74b8d52-bf7e-40a2-aaca-077d1a66d197
📒 Files selected for processing (6)
packages/css/devdocsai.csspackages/react/src/constants.tsxpackages/react/src/primitives/headless.test.tsxpackages/react/src/primitives/headless.tsxpackages/react/src/prompt/PromptView.tsxpackages/react/src/types.ts
| const handleClick = (): void => { | ||
| navigator.clipboard.writeText(props.children[0]?.props.children[0]); | ||
| navigator.clipboard.writeText(content); | ||
| setDidCopy(true); | ||
| setTimeout(() => { | ||
| setDidCopy(false); | ||
| }, 2000); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify the copy path has no availability/rejection handling today.
rg -n "navigator\.clipboard|writeText|setDidCopy|setTimeout" packages/react/src/primitives/headless.tsxRepository: devdocsorg/devdocsai-js
Length of output: 256
🏁 Script executed:
#!/bin/bash
# Inspect the surrounding implementation for any guard/try-catch/promise handling.
sed -n '250,310p' packages/react/src/primitives/headless.tsx | nl -baRepository: devdocsorg/devdocsai-js
Length of output: 110
🏁 Script executed:
#!/bin/bash
# Re-run with line numbers using cat -n (no nl available).
sed -n '250,310p' packages/react/src/primitives/headless.tsx | cat -nRepository: devdocsorg/devdocsai-js
Length of output: 2372
Guard Clipboard API failures before flipping didCopy.
useCopyToClipboard calls navigator.clipboard.writeText(content) without checking API availability or handling promise rejection, but immediately sets setDidCopy(true)—so unsupported/rejected cases can show “copied” UI and may produce unhandled promise rejections.
Suggested patch
const handleClick = (): void => {
- navigator.clipboard.writeText(content);
- setDidCopy(true);
- setTimeout(() => {
- setDidCopy(false);
- }, 2000);
+ if (!navigator.clipboard?.writeText) return;
+ void navigator.clipboard
+ .writeText(content)
+ .then(() => {
+ setDidCopy(true);
+ setTimeout(() => {
+ setDidCopy(false);
+ }, 2000);
+ })
+ .catch(() => {
+ setDidCopy(false);
+ });
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleClick = (): void => { | |
| navigator.clipboard.writeText(props.children[0]?.props.children[0]); | |
| navigator.clipboard.writeText(content); | |
| setDidCopy(true); | |
| setTimeout(() => { | |
| setDidCopy(false); | |
| }, 2000); | |
| const handleClick = (): void => { | |
| if (!navigator.clipboard?.writeText) return; | |
| void navigator.clipboard | |
| .writeText(content) | |
| .then(() => { | |
| setDidCopy(true); | |
| setTimeout(() => { | |
| setDidCopy(false); | |
| }, 2000); | |
| }) | |
| .catch(() => { | |
| setDidCopy(false); | |
| }); | |
| }; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/react/src/primitives/headless.tsx` around lines 275 - 280, The
handleClick in useCopyToClipboard currently calls
navigator.clipboard.writeText(content) without feature-detecting or awaiting it
and immediately toggles setDidCopy(true); change handleClick to first check for
navigator.clipboard existence, then call writeText as an async operation (or
handle the returned promise), await it or use .then/.catch, only call
setDidCopy(true) and start the 2000ms reset timer on successful resolution, and
handle rejection by logging or exposing an error state so unhandled promise
rejections and false "copied" UI are avoided.
Summary by CodeRabbit
New Features
Style