[Bug]: Copy button in tool call messages not working - navigator.clipboard.writeText Promise not handled

[hh0592821]

Description

In the @agentscope-ai/chat component, the copy button for tool call message input/output content is not working. Clicking the copy button has no effect, and content is not copied to the clipboard.

Package Version: @agentscope-ai/chat@1.1.51

Security considerations: None - only affects clipboard functionality

Component(s) Affected

• @agentscope-ai/chat component
• @agentscope-ai/design component
• Icons
• Documentation

Environment

• Package: @agentscope-ai/chat@1.1.51
• OS: macOS 14, Windows, Linux (cross-platform issue)
• Browsers: Chrome, Safari, Firefox (all affected)

Steps to Reproduce

1. Integrate @agentscope-ai/chat component in a React application
2. Trigger a tool call in the chat interface
3. Click the copy button in the tool call message's input or output area
4. Observe that nothing happens

Actual vs Expected

Actual:

• Clicking the copy button has no effect
• Content is not copied to clipboard
• Browser console may show unhandled Promise warnings
• No visual feedback (no green checkmark)

Expected:

• Content should be copied to clipboard successfully
• Visual feedback should appear (green checkmark icon)
• Copy success indicator should show briefly

Root Cause Analysis

The issue is in the copy button's onClick handler. The navigator.clipboard.writeText() method returns a Promise, but the code does not properly handle it with .then() and .catch().

Current problematic code pattern:

onClick: function() {
  clearTimeout(c.current);
  navigator.clipboard.writeText(a);  // ← Promise returned but not handled
  l(!0);
  c.current = setTimeout(function() { l(!1) }, 2e3);
}

Problems:

1. Promise is not awaited or chained with .then()
2. No error handling with .catch()
3. State update l(!0) executes before copy completes
4. May fail silently in certain browser/HTTPS configurations

Proposed Fix

Add proper Promise handling and error fallback:

onClick: function() {
  clearTimeout(c.current);
  var textToCopy = typeof e.content === "string" 
    ? e.content 
    : JSON.stringify(e.content, null, 2);
  
  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(textToCopy)
      .then(function() {
        l(!0);  // Show success indicator
        c.current = setTimeout(function() { l(!1) }, 2e3);
      })
      .catch(function(error) {
        console.error("Copy failed:", error);
        // Still show indicator to avoid confusing user
        l(!0);
        c.current = setTimeout(function() { l(!1) }, 2e3);
      });
  } else {
    // Fallback for browsers without clipboard API
    l(!0);
    c.current = setTimeout(function() { l(!1) }, 2e3);
  }
}

Additional Recommendations

1. Add fallback mechanism: Use document.execCommand('copy') as fallback for older browsers or non-HTTPS contexts

2. Use formatted JSON: When copying object content, use JSON.stringify(content, null, 2) for better readability

3. Add user feedback: Show error toast/notification if copy fails

4. Consider TypeScript: Add proper type definitions for the clipboard API

Testing Checklist

• Copy plain text content
• Copy JSON object content (should be formatted)
• Copy in HTTPS environment
• Copy in non-HTTPS environment (should fallback gracefully)
• Verify visual feedback appears
• Verify content is actually in clipboard
• Test in Chrome, Firefox, Safari
• Test error handling

Impact

• Severity: Medium (UX issue, not security-critical)
• User Impact: Affects all users trying to copy tool call content
• Workaround: Users can manually select and copy text

Additional Context

This issue was discovered in CoPaw (https://github.com/agentscope-ai/CoPaw) which uses @agentscope-ai/chat@1.1.51 as a dependency.

Related CoPaw issue: agentscope-ai/CoPaw#908

---

Priority: Medium
Type: Bug Fix
Breaking Change: No