diff --git a/ACHIEVEMENTS.md b/ACHIEVEMENTS.md new file mode 100644 index 0000000000..647a074c5d --- /dev/null +++ b/ACHIEVEMENTS.md @@ -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. + + + +--- + +## ๐Ÿงฑ 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. + +--- diff --git a/README.md b/README.md index 2d27e9e613..c62bc192af 100644 --- a/README.md +++ b/README.md @@ -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