refactor: unify clipboard copy flow across desktop/web/vscode runtimes (#458)

* fix: prevent copying incomplete diagnostics report

* refactoring: clipboard writes to unified cross-runtime fallback helper
This commit is contained in:
Bohdan Triapitsyn
2026-02-20 14:50:26 +02:00
committed by GitHub
parent 881e8bdf4f
commit 47cecfc356
22 changed files with 232 additions and 209 deletions
+11 -38
View File
@@ -25,6 +25,7 @@ import { flattenAssistantTextParts } from '@/lib/messages/messageText';
import { isLikelyProviderAuthFailure, PROVIDER_AUTH_FAILURE_MESSAGE } from '@/lib/messages/providerAuthError';
import { FadeInOnReveal } from './message/FadeInOnReveal';
import type { TurnGroupingContext } from './hooks/useTurnGrouping';
import { copyTextToClipboard } from '@/lib/clipboard';
const ToolOutputDialog = React.lazy(() => import('./message/ToolOutputDialog'));
@@ -578,9 +579,13 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
}, [isUser, previousRole, turnGroupingContext, streamPhase, message.info]);
const handleCopyCode = React.useCallback((code: string) => {
navigator.clipboard.writeText(code);
setCopiedCode(code);
setTimeout(() => setCopiedCode(null), 2000);
void copyTextToClipboard(code).then((result) => {
if (!result.ok) {
return;
}
setCopiedCode(code);
setTimeout(() => setCopiedCode(null), 2000);
});
}, []);
const userMessageIdForTurn = turnGroupingContext?.turnId;
@@ -704,46 +709,14 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
const hasTextContent = messageTextContent.length > 0;
const copyTextToClipboard = React.useCallback(async (text: string): Promise<boolean> => {
if (!text) {
return false;
}
if (typeof navigator !== 'undefined' && navigator.clipboard && typeof window !== 'undefined' && window.isSecureContext) {
try {
await navigator.clipboard.writeText(text);
return true;
} catch (error) {
void error;
}
}
if (typeof document === 'undefined') {
return false;
}
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.setAttribute('readonly', '');
textarea.style.position = 'fixed';
textarea.style.top = '-1000px';
textarea.style.left = '-1000px';
document.body.appendChild(textarea);
textarea.select();
textarea.setSelectionRange(0, textarea.value.length);
const succeeded = document.execCommand('copy');
document.body.removeChild(textarea);
return succeeded;
}, []);
const handleCopyMessage = React.useCallback(async () => {
const didCopy = await copyTextToClipboard(messageTextContent);
if (!didCopy) {
const result = await copyTextToClipboard(messageTextContent);
if (!result.ok) {
return;
}
setCopiedMessage(true);
setTimeout(() => setCopiedMessage(false), 2000);
}, [copyTextToClipboard, messageTextContent]);
}, [messageTextContent]);
const handleRevert = React.useCallback(() => {
if (!sessionId || !message.info.id) return;
@@ -8,6 +8,7 @@ import type { Part } from '@opencode-ai/sdk/v2';
import { cn } from '@/lib/utils';
import { RiFileCopyLine, RiCheckLine, RiDownloadLine } from '@remixicon/react';
import { toast } from '@/components/ui';
import { copyTextToClipboard } from '@/lib/clipboard';
import { isVSCodeRuntime } from '@/lib/desktop';
import { useOptionalThemeSystem } from '@/contexts/useThemeSystem';
@@ -262,9 +263,10 @@ const TableCopyButton: React.FC<{ tableRef: React.RefObject<HTMLDivElement | nul
const tableEl = tableRef.current?.querySelector('table');
if (!tableEl) return;
const data = extractTableData(tableEl);
const content = format === 'csv' ? tableToCSV(data) : tableToTSV(data);
try {
const data = extractTableData(tableEl);
const content = format === 'csv' ? tableToCSV(data) : tableToTSV(data);
await navigator.clipboard.write([
new ClipboardItem({
'text/plain': new Blob([content], { type: 'text/plain' }),
@@ -275,6 +277,13 @@ const TableCopyButton: React.FC<{ tableRef: React.RefObject<HTMLDivElement | nul
setShowMenu(false);
setTimeout(() => setCopied(false), 2000);
} catch (err) {
const fallbackResult = await copyTextToClipboard(content);
if (fallbackResult.ok) {
setCopied(true);
setShowMenu(false);
setTimeout(() => setCopied(false), 2000);
return;
}
console.error('Failed to copy table:', err);
}
};
@@ -481,12 +490,12 @@ const CodeBlockWrapper: React.FC<CodeBlockWrapperProps> = ({ children, className
const handleCopy = async () => {
const code = getCodeContent();
if (!code) return;
try {
await navigator.clipboard.writeText(code);
const result = await copyTextToClipboard(code);
if (result.ok) {
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (err) {
console.error('Failed to copy:', err);
} else {
console.error('Failed to copy:', result.error);
}
};
@@ -539,12 +548,12 @@ const MermaidCopyButton: React.FC<{ source: string }> = ({ source }) => {
const handleCopy = async () => {
if (!source) return;
try {
await navigator.clipboard.writeText(source);
const result = await copyTextToClipboard(source);
if (result.ok) {
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (err) {
console.error('Failed to copy diagram:', err);
} else {
console.error('Failed to copy diagram:', result.error);
}
};
@@ -27,6 +27,7 @@ import { MULTIRUN_EXECUTION_FORK_PROMPT_META_TEXT } from '@/lib/messages/executi
import { useMessageTTS } from '@/hooks/useMessageTTS';
import { useConfigStore } from '@/stores/useConfigStore';
import { TextSelectionMenu } from './TextSelectionMenu';
import { copyTextToClipboard } from '@/lib/clipboard';
type SubtaskPartLike = Part & {
type: 'subtask';
@@ -165,32 +166,8 @@ const UserShellActionPart: React.FC<{ part: ShellActionPartLike }> = ({ part })
const copyOutputToClipboard = React.useCallback(async () => {
if (!hasOutput) return;
let succeeded = false;
if (typeof navigator !== 'undefined' && navigator.clipboard && typeof window !== 'undefined' && window.isSecureContext) {
try {
await navigator.clipboard.writeText(output);
succeeded = true;
} catch {
succeeded = false;
}
}
if (!succeeded && typeof document !== 'undefined') {
const textarea = document.createElement('textarea');
textarea.value = output;
textarea.setAttribute('readonly', '');
textarea.style.position = 'fixed';
textarea.style.top = '-1000px';
textarea.style.left = '-1000px';
document.body.appendChild(textarea);
textarea.select();
textarea.setSelectionRange(0, textarea.value.length);
succeeded = document.execCommand('copy');
document.body.removeChild(textarea);
}
if (!succeeded) return;
const result = await copyTextToClipboard(output);
if (!result.ok) return;
clearCopiedResetTimeout();
setCopiedOutput(true);
@@ -4,6 +4,7 @@ import { useSessionStore } from '@/stores/useSessionStore';
import { useUIStore } from '@/stores/useUIStore';
import { RiChatNewLine, RiAddLine, RiFileCopyLine } from '@remixicon/react';
import { cn } from '@/lib/utils';
import { copyTextToClipboard } from '@/lib/clipboard';
interface TextSelectionMenuProps {
containerRef: React.RefObject<HTMLElement | null>;
@@ -223,10 +224,9 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
const handleCopy = React.useCallback(async () => {
if (!selectedText) return;
try {
await navigator.clipboard.writeText(selectedText);
} catch (err) {
console.error('Failed to copy:', err);
const result = await copyTextToClipboard(selectedText);
if (!result.ok) {
console.error('Failed to copy:', result.error);
}
hideMenu();