Skip to content

Add WebChat custom CSAT rating sample#511

Open
adilei wants to merge 1 commit into
microsoft:mainfrom
adilei:sample/webchat-csat
Open

Add WebChat custom CSAT rating sample#511
adilei wants to merge 1 commit into
microsoft:mainfrom
adilei:sample/webchat-csat

Conversation

@adilei
Copy link
Copy Markdown
Collaborator

@adilei adilei commented May 14, 2026

Summary

  • Adds a new sample (ui/custom-ui/webchat-csat/) that intercepts Copilot Studio's built-in CSAT Adaptive Card using WebChat's activityMiddleware
  • Replaces the default card with a custom emoji-based React rating component (😠🙁😐😃🤩 mapping to 1-5)
  • Sends the identical { rate: "N" } postBack payload back to the bot so the conversation flow continues normally
  • Includes a mock DirectLine with RxJS so the sample works standalone in a browser without a real agent
  • Updates the Custom UI contents table

Test plan

  • Open ui/custom-ui/webchat-csat/index.html via a local server (python3 -m http.server)
  • Verify the bot greeting appears with suggested action buttons
  • Click a button or type any message — verify the CSAT emoji rating appears
  • Click an emoji — verify "Thanks for your feedback!" appears and the bot acknowledges
  • Verify no console errors

🤖 Generated with Claude Code

Intercepts Copilot Studio's built-in CSAT Adaptive Card and replaces it
with a custom emoji-based React rating component, while sending the
identical { rate: "N" } postBack payload back to the bot.

Includes a mock DirectLine so the sample works standalone in a browser
without connecting to a real agent.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@adilei adilei requested a review from HenryJammes as a code owner May 14, 2026 19:12
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.

1 participant