(.*?)<\/code>/g, '`$1`')
.replace(/(.*?)<\/h[1-6]>/g, (match, level, text) => '#'.repeat(level) + ' ' + text)
.replace(/(.*?)<\/p>/g, '$1\n\n')
.replace(//g, '\n')
.replace(/<[^>]*>/g, ''); // Remove remaining HTML tags
}
}
// Initialize copy manager
document.addEventListener('DOMContentLoaded', () => {
window.messageCopyManager = new MessageCopyManager();
});
```
### CSS Styling
```css
.copy-message-btn {
position: absolute;
top: 8px;
right: 8px;
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 10;
padding: 4px 8px;
font-size: 12px;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.chat-message {
position: relative;
}
.chat-message:hover .copy-message-btn {
opacity: 1;
transform: translateY(0);
}
.copy-message-btn:hover {
opacity: 1 !important;
transform: scale(1.05);
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.copy-message-btn.copying {
animation: copyPulse 0.6s ease;
}
@keyframes copyPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Code block copy button positioning */
.message-content pre {
position: relative;
}
.message-content pre .copy-message-btn {
top: 4px;
right: 4px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
border: none;
}
/* Table copy button */
.message-content table {
position: relative;
}
.message-content table .copy-message-btn {
top: -2px;
right: -2px;
background-color: var(--table-header-bg);
}
/* Dark mode support */
[data-bs-theme="dark"] .copy-message-btn {
background-color: rgba(0, 0, 0, 0.8);
color: white;
border-color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme="dark"] .copy-message-btn:hover {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
/* Mobile optimizations */
@media (max-width: 768px) {
.copy-message-btn {
opacity: 1;
position: static;
display: inline-block;
margin-left: 8px;
font-size: 11px;
padding: 2px 6px;
}
.chat-message .message-actions {
margin-top: 8px;
text-align: right;
}
}
/* Accessibility improvements */
.copy-message-btn:focus {
opacity: 1;
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
.copy-message-btn[aria-describedby] {
/* Tooltip support */
}
/* Message selection highlighting */
.message-selected {
background-color: var(--selection-bg);
border-left: 3px solid var(--primary-color);
padding-left: 12px;
}
```
## Configuration Options
### Admin Settings
```html
```
### Content Type Handling
```javascript
const copyConfiguration = {
contentTypes: {
text: {
enabled: true,
format: 'plain'
},
code: {
enabled: true,
format: 'preserveLanguage',
includeLanguageComment: true
},
table: {
enabled: true,
format: 'csv',
alternativeFormats: ['tsv', 'markdown']
},
list: {
enabled: true,
format: 'markdown',
preserveNesting: true
},
markdown: {
enabled: true,
format: 'markdown',
fallbackToPlain: true
}
},
ui: {
showCopyButton: 'hover',
animationDuration: 200,
feedbackDuration: 2000,
buttonSize: 'small'
},
advanced: {
enableKeyboardShortcuts: true,
enableBulkCopy: false,
maxContentLength: 50000,
enableClipboardAPI: true
}
};
```
## Usage Instructions
### For End Users
#### Basic Message Copying
1. **Hover Over Message**: Move your cursor over any message in the conversation
2. **Click Copy Button**: Click the copy icon (📋) that appears in the top-right corner
3. **Visual Confirmation**: The button will briefly change to a checkmark (✓) indicating successful copy
4. **Paste Content**: Use Ctrl+V (or Cmd+V on Mac) to paste the content elsewhere
#### Keyboard Shortcuts
- **Select and Copy**: Click a message to select it, then press Ctrl+C to copy
- **Quick Copy**: Hover over a message and press C to copy without clicking
#### Content-Specific Copying
**Code Blocks:**
- Copies clean code without syntax highlighting
- Preserves indentation and line breaks
- Includes language information as a comment
**Tables:**
- Copies as tab-separated values for easy pasting into spreadsheets
- Maintains column structure
- Headers are preserved
**Lists:**
- Preserves bullet points and numbering
- Maintains nested list structure
- Converts to plain text format
#### Advanced Copy Options
```html
```
### For Administrators
#### Monitoring Copy Usage
```javascript
class CopyAnalytics {
generateCopyReport(dateRange) {
return {
totalCopies: 0,
contentTypeBreakdown: {
text: 0,
code: 0,
table: 0,
list: 0
},
topCopiedMessages: [],
userEngagement: {
activeUsers: 0,
averageCopiesPerUser: 0
},
trends: {
dailyCopies: [],
peakUsageHours: []
}
};
}
}
```
#### Content Policy Configuration
```javascript
const copyPolicyConfig = {
restrictions: {
maxCopiesPerHour: 100,
maxContentLength: 10000,
blockedContentPatterns: [
/sensitive.*information/i,
/confidential/i
]
},
auditLogging: {
enabled: true,
includeContent: false,
retentionDays: 90
},
security: {
watermarkCopiedContent: false,
trackCopyDestination: false,
preventBulkCopy: true
}
};
```
## Integration Points
### Search Integration
```javascript
// Integration with conversation search
document.addEventListener('messageCopied', (event) => {
const { messageId, content } = event.detail;
// Update search rankings based on copy frequency
if (window.conversationSearch) {
window.conversationSearch.updateMessagePopularity(messageId);
}
});
```
### Export Integration
```javascript
class ConversationExporter {
includeCopyStatistics(conversation) {
const messages = conversation.messages.map(message => ({
...message,
copyCount: this.getCopyCount(message.id),
lastCopied: this.getLastCopyDate(message.id)
}));
return { ...conversation, messages };
}
}
```
### Plugin Integration
```javascript
// Allow plugins to customize copy behavior
class CopyPluginManager {
registerCopyHandler(contentType, handler) {
this.copyHandlers[contentType] = handler;
}
processCopyRequest(content, type) {
const handler = this.copyHandlers[type];
return handler ? handler(content) : content;
}
}
```
## Security Considerations
### Content Sanitization
```javascript
class CopySecurityManager {
sanitizeCopyContent(content) {
// Remove sensitive patterns
const sensitivePatterns = [
/\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g, // emails
/\b\d{4}\s?\d{4}\s?\d{4}\s?\d{4}\b/g, // credit cards
/\b\d{3}-\d{2}-\d{4}\b/g // SSNs
];
let sanitized = content;
sensitivePatterns.forEach(pattern => {
sanitized = sanitized.replace(pattern, '[REDACTED]');
});
return sanitized;
}
auditCopyEvent(userId, messageId, contentType) {
fetch('/api/audit/copy-event', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
userId,
messageId,
contentType,
timestamp: new Date().toISOString(),
userAgent: navigator.userAgent
})
});
}
}
```
### Privacy Protection
```javascript
class CopyPrivacyManager {
shouldAllowCopy(messageContent, userRole) {
// Check if content contains sensitive information
if (this.containsSensitiveData(messageContent)) {
return userRole === 'Admin';
}
return true;
}
containsSensitiveData(content) {
const sensitiveKeywords = [
'password', 'secret', 'token', 'api key',
'confidential', 'internal only'
];
return sensitiveKeywords.some(keyword =>
content.toLowerCase().includes(keyword)
);
}
}
```
## Testing and Validation
### Functional Testing
- Verify copy functionality across all message types and browsers
- Test keyboard shortcuts and accessibility features
- Validate content formatting preservation in different applications
- Confirm error handling for clipboard API failures
### Performance Testing
- Measure copy operation performance with large content blocks
- Test memory usage during bulk copy operations
- Validate responsiveness during copy feedback animations
- Check impact on overall application performance
### Security Testing
- Verify content sanitization for sensitive data
- Test copy restrictions and rate limiting
- Validate audit logging functionality
- Confirm privacy protection mechanisms
## Known Limitations
- Clipboard API support varies across browsers and requires HTTPS
- Some applications may not preserve rich formatting when pasting
- Large content blocks may cause performance issues
- Mobile devices may have limited clipboard functionality
## Browser Compatibility
- **Full Support**: Chrome 76+, Firefox 90+, Safari 13.1+, Edge 79+
- **Basic Support**: Earlier browsers with fallback to legacy copy methods
- **Mobile Support**: iOS Safari 13.4+, Android Chrome 84+
## Future Enhancements
- Bulk copy for multiple selected messages
- Copy templates with customizable formatting
- Integration with external clipboard managers
- AI-powered content summarization for large copies
- Copy history and recently copied items
- Advanced content transformation options (e.g., translate while copying)
- Integration with collaboration tools and document editors