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:
committed by
GitHub
parent
881e8bdf4f
commit
47cecfc356
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user