Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fluent] Add copy button #5259

Merged
merged 27 commits into from
Aug 16, 2024
Merged

[Fluent] Add copy button #5259

merged 27 commits into from
Aug 16, 2024

Conversation

compulim
Copy link
Contributor

@compulim compulim commented Aug 9, 2024

Changelog Entry

Added

  • (Experimental) Added "Copy" button to bot messages in Fluent UI if it contains keyword AllowCopy, in PR #5259, by @compulim

Description

If the bot message has AllowCopy keyword in its Message entity, a "Copy" button will appear below the text and above all attachments. Clicking on the button will copy the text as both plain text and rich text (if the bot message is a Markdown).

image

Design

New getMessageEntity helper function

Added new getMessageEntity helper function to obtain the Message schema.org object associated with the message itself.

When the base package is ready, we should move this helper function there.

New web server for hosting test pages

To allow navigator.clipboard, the page must be run under secure context and enabled via CDP Browser.setPermission with permission of clipboard-write.

Previously, browser in Docker was using http://webchat2. In this PR, we introduced a self-signed certificate for https://webchat2. The certificate is generated randomly on container start.

This does not affect running the tests locally as it will be tested against http://localhost:5001 instead.

Specific Changes

  • Added "Copy" button via attachment middleware to Fluent skin pack
  • Added new self-signed secure web server for tests running under Docker to enable secure context
  • Added getMessageEntity helper function
  • Updated withEmoji.5.html to grant clipboard permission as we are now running under secure context and have navigator.clipboard enabled
  • I have added tests and executed them locally
  • I have updated CHANGELOG.md
  • I have updated documentation

Review Checklist

This section is for contributors to review your work.

  • Accessibility reviewed (tab order, content readability, alt text, color contrast)
  • Browser and platform compatibilities reviewed
  • CSS styles reviewed (minimal rules, no z-index)
  • Documents reviewed (docs, samples, live demo)
  • Internationalization reviewed (strings, unit formatting)
  • package.json and package-lock.json reviewed
  • Security reviewed (no data URIs, check for nonce leak)
  • Tests reviewed (coverage, legitimacy)

@compulim compulim marked this pull request as ready for review August 15, 2024 19:53
@compulim compulim changed the title [Fluent] WIP: Add copy button [Fluent] Add copy button Aug 15, 2024
Copy link
Collaborator

@OEvgeny OEvgeny left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Asking for dark mode test and enabling this in some side-by-side tests for copilot variant, so we see how all this combines.

OEvgeny
OEvgeny previously approved these changes Aug 15, 2024
@compulim compulim merged commit 302d546 into main Aug 16, 2024
25 checks passed
@compulim compulim deleted the feat-fluent-copy-button branch August 16, 2024 00:12
@compulim compulim mentioned this pull request Aug 17, 2024
11 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants