microsoft · OEvgeny · May 28, 2025 · May 27, 2025 · May 28, 2025 · May 28, 2025
@@ -0,0 +1,151 @@
+# 🎉 BotFramework Web Chat — Achievements
+
+A curated list of major achievements by the Web Chat team. This document celebrates impactful changes, forward-looking designs, and key architectural wins.
+
+<!-- Template for future additions. Add new to the top of a corresponding section.
+
+## 🏆 \[Achievement Title]
+
+**Goal:** Briefly describe the purpose of the change.
+**By:** [@username](https://github.com/username) in [PR #XXXX](https://github.com/microsoft/BotFramework-WebChat/pull/XXXX)
+
+* Summary of what was done and why it mattered.
+
+-->
+
+---
+
+## 🧱 Architecture & Core Systems
+
+### 🛠️ Migration to `micromark`
+
+**Goal:** Replace `markdown-it` with a modern and extensible markdown parser.  
+**By:** [@compulim](https://github.com/compulim) in [PR #5330](https://github.com/microsoft/BotFramework-WebChat/pull/5330)
+
+- Switched to `micromark`, enabling MathML support and consistent parsing.
+- Foundation for better Markdown extensibility and performance.
+
+### 🧼 HTML Content Transformer Middleware
+
+**Goal:** Move HTML sanitization into a dedicated middleware layer.  
+**By:** [@compulim](https://github.com/compulim) in [PR #5338](https://github.com/microsoft/BotFramework-WebChat/pull/5338)
+
+- Clean separation of concerns for Markdown rendering and sanitation.
+- Easier customization and more secure rendering.
+
+### 🧩 Migration to npm Workspaces
+
+**Goal:** Modernize monorepo tooling for better dependency and package management.  
+**By:** [@compulim](https://github.com/compulim) in [PR #5301](https://github.com/microsoft/BotFramework-WebChat/pull/5301)
+
+- Dropped Lerna in favor of native npm workspaces.
+- Improves build performance and developer experience.
+
+---
+
+## 🎨 UI & Theming
+
+### 🧾 Code Block Rendering & Highlighting System
+
+**Goal:** Unify and polish code block rendering across Markdown and UI components.  
+**By:** [@OEvgeny](https://github.com/OEvgeny), [@compulim](https://github.com/compulim) in [PR #5334](https://github.com/microsoft/BotFramework-WebChat/pull/5334), [#5335](https://github.com/microsoft/BotFramework-WebChat/pull/5335), [#5336](https://github.com/microsoft/BotFramework-WebChat/pull/5336), [#5389](https://github.com/microsoft/BotFramework-WebChat/pull/5389)
+
+- Introduced syntax highlighting for markdown blocks using Shiki.
+- Added copy buttons to all rendered code blocks and dialogs.
+- Unified presentation of fenced blocks with accessibility and clipboard improvements.
+
+### ✨ Fluent Theme Overhaul
+
+**Goal:** Expand and refine Fluent UI styling across all components.  
+**By:** [@OEvgeny](https://github.com/OEvgeny) in [PR #5258](https://github.com/microsoft/BotFramework-WebChat/pull/5258) and others
+
+- Introduced "Copilot" variant and transcript-wide theming.
+- Improved accessibility, visual consistency, and component modularity.
+
+### 🧱 Decorator System for Activity Styling
+
+**Goal:** Enable pluggable, dynamic visual enhancements per activity.  
+**By:** [@OEvgeny](https://github.com/OEvgeny) in [PR #5205](https://github.com/microsoft/BotFramework-WebChat/pull/5205), [#5312](https://github.com/microsoft/BotFramework-WebChat/pull/5312)
+
+- Introduced `WebChatDecorator` and `ActivityDecorator`.
+- Supports animated borders and style options with minimal code changes.
+
+### 🗂️ Starter Prompts
+
+**Goal:** Enhance onboarding by offering users suggested starter prompts before interaction.  
+**By:** [@compulim](https://github.com/compulim), [@OEvgeny](https://github.com/OEvgeny)
+
+- Experimental pre-chat messages added in [PR #5255](https://github.com/microsoft/BotFramework-WebChat/pull/5255) and [#5263](https://github.com/microsoft/BotFramework-WebChat/pull/5263)
+- Fluent blueprint implementation in [#5270](https://github.com/microsoft/BotFramework-WebChat/pull/5270), [#5276](https://github.com/microsoft/BotFramework-WebChat/pull/5276), [#5279](https://github.com/microsoft/BotFramework-WebChat/pull/5279), [#5284](https://github.com/microsoft/BotFramework-WebChat/pull/5284)
+
+---
+
+## 🗣️ Voice & Accessibility
+
+### 🎙️ Speech Recognition Enhancements
+
+**Goal:** Improve real-world usability of voice input.  
+**By:** [@compulim](https://github.com/compulim), [@RushikeshGavali](https://github.com/RushikeshGavali) in [PR #5400](https://github.com/microsoft/BotFramework-WebChat/pull/5400), [#5426](https://github.com/microsoft/BotFramework-WebChat/pull/5426)
+
+- Support for initial silence timeout and continuous barge-in mode.
+- Makes Azure Speech more responsive and accessible.
+
+### 🔊 Centralized Live Region Announcements
+
+**Goal:** Improve screen reader support via centralized ARIA updates.  
+**By:** [@OEvgeny](https://github.com/OEvgeny) in [PR #5251](https://github.com/microsoft/BotFramework-WebChat/pull/5251)
+
+- Added `usePushToLiveRegion` hook.
+- Enables consistent and predictable accessibility behavior.
+
+---
+
+## 🧪 Advanced & Experimental
+
+### 🧩 Shadow DOM Support
+
+**Goal:** Enable safe embedding of Web Chat in custom element trees.  
+**By:** [@OEvgeny](https://github.com/OEvgeny) in [PR #5196](https://github.com/microsoft/BotFramework-WebChat/pull/5196)
+
+- Added `stylesRoot`, `ThemeProvider.styles`, and nonce support.
+- Ensures style encapsulation and isolation in Web Component environments.
+
+### 🧮 TeX/MathML Markdown Support
+
+**Goal:** Support use cases requiring math rendering.  
+**By:** [@compulim](https://github.com/compulim), [@OEvgeny](https://github.com/OEvgeny) in [PR #5332](https://github.com/microsoft/BotFramework-WebChat/pull/5332), [#5381](https://github.com/microsoft/BotFramework-WebChat/pull/5381)
+
+- Integrated `katex` via `micromark-extension-math`.
+- Supports `\\[ \\]`, `\\( \\)`, and `$$ $$` syntax.
+
+---
+
+## 🚀 Performance & Developer Experience
+
+### 🧠 Memoization & Hook Optimizations
+
+**Goal:** Reduce rerenders and memory footprint.  
+**By:** [@OEvgeny](https://github.com/OEvgeny), [@compulim](https://github.com/compulim) across [#5163](https://github.com/microsoft/BotFramework-WebChat/pull/5163), [#5183](https://github.com/microsoft/BotFramework-WebChat/pull/5183), [#5190](https://github.com/microsoft/BotFramework-WebChat/pull/5190)
+
+- Rewrote key hooks (`useActivityWithRenderer`, `useMemoized`) for efficiency.
+- Prevents excessive renders in large conversations.
+
+### 🧮 Multi-Dimensional Grouping Support
+
+**Goal:** Improve activity grouping logic and performance.  
+**By:** [@compulim](https://github.com/compulim) in [PR #5471](https://github.com/microsoft/BotFramework-WebChat/pull/5471)
+
+- Added `styleOptions.groupActivitiesBy` and `useGroupActivitiesByName` hook.
+- Keeps existing `sender` + `status` behavior as default.
+- New hook preferred for performance.
+- Middleware can optionally compute groupings by name.
+
+### 🧪 `valibot` Props Validation
+
+**Goal:** Modernize runtime prop validation for performance and clarity.  
+**By:** [@compulim](https://github.com/compulim) in [PR #5476](https://github.com/microsoft/BotFramework-WebChat/pull/5476)
+
+- Introduced `valibot` to improve schema-based prop safety.
+- Reduces runtime errors and simplifies validation logic.
+
+---
@@ -19,11 +19,13 @@ Web Chat supports [Content Security Policy (CSP)](https://developer.mozilla.org/
 
 > This section points out important version notes. For further information, please see the related links and check the [`CHANGELOG.md`](https://github.com/microsoft/BotFramework-WebChat/blob/main/CHANGELOG.md)
 
+[Our achievements](https://github.com/microsoft/BotFramework-WebChat/blob/main/ACHIEVEMENTS.md)
+
 Notes: web developers are advised to use [`~` (tilde range)](https://github.com/npm/node-semver?tab=readme-ov-file#tilde-ranges-123-12-1) to select minor versions, which contains new features and/or fixes. Use [`^` (caret range)](https://github.com/npm/node-semver?tab=readme-ov-file#caret-ranges-123-025-004) to select major versions, which may contains breaking changes.
 
 ## 4.19.0 notable changes
 
--  Supports informative message in [livestreaming](./docs/LIVESTREAMING.md)
+- Supports informative message in [livestreaming](./docs/LIVESTREAMING.md)
 
 ## 4.18.0 notable changes
 
@@ -101,8 +103,8 @@ window.WebChat.renderWebChat(
 );
 ```
 
--  Web Chat will apply the maximum schema available according to the Adaptive Cards version (as of this patch, schema 1.3) by default.
--  An invalid version will revert to Web Chat's default.
+- Web Chat will apply the maximum schema available according to the Adaptive Cards version (as of this patch, schema 1.3) by default.
+- An invalid version will revert to Web Chat's default.
 
 ## Visual focus changes to transcript in Web Chat 4.12.0
 
@@ -163,9 +165,9 @@ We strongly recommend using the token API instead of providing the app with your
 
 For further reading, please see the following links:
 
--  Using Web Chat with [Azure Bot Services authentication](https://blog.botframework.com/2018/09/01/using-webchat-with-azure-bot-services-authentication/)
+- Using Web Chat with [Azure Bot Services authentication](https://blog.botframework.com/2018/09/01/using-webchat-with-azure-bot-services-authentication/)
 
--  [Enhanced Direct Line authentication features](https://blog.botframework.com/2018/09/25/enhanced-direct-line-authentication-features/)
+- [Enhanced Direct Line authentication features](https://blog.botframework.com/2018/09/25/enhanced-direct-line-authentication-features/)
 
 ## Integrate with JavaScript
 
@@ -279,11 +281,11 @@ To use Redux DevTools, use the `createStoreWithDevTools` function for creating a
 
 There are some limitations when using the Redux DevTools:
 
--  The Redux store uses side-effects via [`redux-saga`](https://github.com/redux-saga/redux-saga). Time-traveling may break the UI.
--  Many UI states are stored in React context and state. They are not exposed in the Redux store.
--  Some time-sensitive UIs are based on real-time clock and not affected by time-traveling.
--  Dispatching actions are not officially supported. Please use [hooks API](https://github.com/microsoft/BotFramework-WebChat/tree/main/docs/HOOKS.md) instead.
--  Actions and reducers may move in and out of Redux store across versions. [Hooks API](https://github.com/microsoft/BotFramework-WebChat/tree/main/docs/HOOKS.md) is the official API for accessing the UI.
+- The Redux store uses side-effects via [`redux-saga`](https://github.com/redux-saga/redux-saga). Time-traveling may break the UI.
+- Many UI states are stored in React context and state. They are not exposed in the Redux store.
+- Some time-sensitive UIs are based on real-time clock and not affected by time-traveling.
+- Dispatching actions are not officially supported. Please use [hooks API](https://github.com/microsoft/BotFramework-WebChat/tree/main/docs/HOOKS.md) instead.
+- Actions and reducers may move in and out of Redux store across versions. [Hooks API](https://github.com/microsoft/BotFramework-WebChat/tree/main/docs/HOOKS.md) is the official API for accessing the UI.
 
 # Customizing the Web Chat UI
 
@@ -324,10 +326,10 @@ If you need Web Chat in Internet Explorer 11, please see the [ES5 bundle demo](h
 
 Please note, however:
 
--  Web Chat does not support Internet Explorer older than version 11
--  Customization as shown in non-ES5 samples are not supported for Internet Explorer. Because IE11 is a non-modern browser, it does not support ES6, and many samples that use arrow functions and modern promises would need to be manually converted to ES5. If you are in need of heavy customization for your app, we strongly recommend developing your app for a modern browser like Google Chrome or Microsoft Edge.
--  Web Chat has no plan to support samples for IE11 (ES5).
-   -  For customers who wish to manually rewrite our other samples to work in IE11, we recommend looking into converting code from ES6+ to ES5 using polyfills and transpilers like [`babel`](https://babeljs.io/docs/en/next/babel-standalone.html).
+- Web Chat does not support Internet Explorer older than version 11
+- Customization as shown in non-ES5 samples are not supported for Internet Explorer. Because IE11 is a non-modern browser, it does not support ES6, and many samples that use arrow functions and modern promises would need to be manually converted to ES5. If you are in need of heavy customization for your app, we strongly recommend developing your app for a modern browser like Google Chrome or Microsoft Edge.
+- Web Chat has no plan to support samples for IE11 (ES5).
+   - For customers who wish to manually rewrite our other samples to work in IE11, we recommend looking into converting code from ES6+ to ES5 using polyfills and transpilers like [`babel`](https://babeljs.io/docs/en/next/babel-standalone.html).
 
 ## Accessibility
 
@@ -353,9 +355,9 @@ View the [Technical Support Guide](https://github.com/microsoft/BotFramework-Web
 
 Web Chat supports a wide-range of speech engines for a natural chat experience with a bot. This section outlines the different engines that are supported:
 
--  [Direct Line Speech](#integrate-with-direct-line-speech)
--  [Cognitive Services Speech Services](#integrate-with-cognitive-services-speech-services)
--  [Browser-provided engine or other engines](#browser-provided-engine-or-other-engines)
+- [Direct Line Speech](#integrate-with-direct-line-speech)
+- [Cognitive Services Speech Services](#integrate-with-cognitive-services-speech-services)
+- [Browser-provided engine or other engines](#browser-provided-engine-or-other-engines)
 
 ### Integrate with Direct Line Speech