From 5a0f4481a7a9eec5a4c64ac430403d482fcd137f Mon Sep 17 00:00:00 2001 From: William Wong Date: Sat, 15 Mar 2025 01:40:07 +0000 Subject: [PATCH 01/16] Add sliding dots typing indicator --- CHANGELOG.md | 1 + .../html2/fluentTheme/typingIndicator.html | 53 ++++++++++++++++++ .../typingIndicator.html.snap-1.png | Bin 0 -> 7636 bytes .../typingIndicator.livestream.html | 9 +++ ...typingIndicator.livestream.html.snap-1.png | Bin 0 -> 7636 bytes .../components/activity/ActivityLoader.tsx | 12 +--- .../src/components/assets/SlidingDots.tsx | 14 +++++ .../SlidingDotsTypingIndicator.module.css | 9 +++ .../SlidingDotsTypingIndicator.tsx | 20 +++++++ .../src/private/FluentThemeProvider.tsx | 10 +++- 10 files changed, 117 insertions(+), 11 deletions(-) create mode 100644 __tests__/html2/fluentTheme/typingIndicator.html create mode 100644 __tests__/html2/fluentTheme/typingIndicator.html.snap-1.png create mode 100644 __tests__/html2/fluentTheme/typingIndicator.livestream.html create mode 100644 __tests__/html2/fluentTheme/typingIndicator.livestream.html.snap-1.png create mode 100644 packages/fluent-theme/src/components/assets/SlidingDots.tsx create mode 100644 packages/fluent-theme/src/components/typingIndicator/SlidingDotsTypingIndicator.module.css create mode 100644 packages/fluent-theme/src/components/typingIndicator/SlidingDotsTypingIndicator.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 687fedbf94..fe9302a20b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -83,6 +83,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/ - Resolved [#2661](https://github.com/microsoft/BotFramework-WebChat/issues/2661) and [#5352](https://github.com/microsoft/BotFramework-WebChat/issues/5352). Added speech recognition continuous mode with barge-in support, in PR [#5426](https://github.com/microsoft/BotFramework-WebChat/pull/5426), by [@RushikeshGavali](https://github.com/RushikeshGavali) and [@compulim](https://github.com/compulim) - Set `styleOptions.speechRecognitionContinuous` to `true` with a Web Speech API provider with continuous mode support - Added support of [contentless activity in livestream](https://github.com/microsoft/BotFramework-WebChat/blob/main/docs/LIVESTREAMING.md#scenario-3-interim-activities-with-no-content), in PR [#5430](https://github.com/microsoft/BotFramework-WebChat/pull/5430), by [@compulim](https://github.com/compulim) +- Added sliding dots typing indicator in Fluent theme, in PR [#XXX](https://github.com/microsoft/BotFramework-WebChat/pull/XXX), by [@compulim](https://github.com/compulim) ### Changed diff --git a/__tests__/html2/fluentTheme/typingIndicator.html b/__tests__/html2/fluentTheme/typingIndicator.html new file mode 100644 index 0000000000..ac8a209af3 --- /dev/null +++ b/__tests__/html2/fluentTheme/typingIndicator.html @@ -0,0 +1,53 @@ + + + + + + + + + + + + +
+ + + diff --git a/__tests__/html2/fluentTheme/typingIndicator.html.snap-1.png b/__tests__/html2/fluentTheme/typingIndicator.html.snap-1.png new file mode 100644 index 0000000000000000000000000000000000000000..a6df7bd314ad561234cd2f7154d7c04f3a7f6227 GIT binary patch literal 7636 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 Ak^lez literal 0 HcmV?d00001 diff --git a/__tests__/html2/fluentTheme/typingIndicator.livestream.html b/__tests__/html2/fluentTheme/typingIndicator.livestream.html new file mode 100644 index 0000000000..abedbe5bff --- /dev/null +++ b/__tests__/html2/fluentTheme/typingIndicator.livestream.html @@ -0,0 +1,9 @@ + + + + + + + diff --git a/__tests__/html2/fluentTheme/typingIndicator.livestream.html.snap-1.png b/__tests__/html2/fluentTheme/typingIndicator.livestream.html.snap-1.png new file mode 100644 index 0000000000000000000000000000000000000000..a6df7bd314ad561234cd2f7154d7c04f3a7f6227 GIT binary patch literal 7636 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 Ak^lez literal 0 HcmV?d00001 diff --git a/packages/fluent-theme/src/components/activity/ActivityLoader.tsx b/packages/fluent-theme/src/components/activity/ActivityLoader.tsx index 850c57b716..f1482bb81a 100644 --- a/packages/fluent-theme/src/components/activity/ActivityLoader.tsx +++ b/packages/fluent-theme/src/components/activity/ActivityLoader.tsx @@ -3,23 +3,17 @@ import cx from 'classnames'; import React, { Fragment, memo, type ReactNode } from 'react'; import { useVariantClassName } from '../../styles'; +import SlidingDots from '../assets/SlidingDots'; import styles from './ActivityLoader.module.css'; -const loadingAnimationUrl = - 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCA0MDAgMjAiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjAiIHgyPSIxMDAlIiB5MT0iMCIgeTI9IjAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAlIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdG9wLWNvbG9yIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iI2FkNWFlMTsjYWQ1YWUxOyMwRTk0RTE7IzBFOTRFMTsjNjY5ZmMyOyM2NjlmYzI7I2FkNWFlMSIvPjwvc3RvcD48c3RvcCBvZmZzZXQ9IjUwJSI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ic3RvcC1jb2xvciIgZHVyPSIycyIga2V5VGltZXM9IjA7MC4yOzAuMzM7MC41OzAuNjY7MC44OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IiNlOTYxOGQ7I2U5NjE4ZDsjNTdBQjgyOyM1N0FCODI7IzYzNzdlMDsjNjM3N2UwOyNlOTYxOGQiLz48L3N0b3A+PHN0b3Agb2Zmc2V0PSIxMDAlIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdG9wLWNvbG9yIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iI2ZkOWU1ZjsjZmQ5ZTVmOyNDNkMyMjU7I0M2QzIyNTsjOWI4MGVjOyM5YjgwZWM7I2ZkOWU1ZiIvPjwvc3RvcD48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZyBmaWxsPSJ1cmwoI2EpIj48cmVjdCBoZWlnaHQ9IjIwIiByeD0iMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IngiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuNTswLjY2OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjI2OzI2OzA7MCIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IndpZHRoIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIyMDsyMDszMDszMDsyMDsyMCIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuNTswLjY2OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjE7MTswOzAiLz48L3JlY3Q+PHJlY3QgaGVpZ2h0PSIyMCIgcng9IjEwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4IiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iNjI7NjI7NzI7NzI7MjY7MjY7MCIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IndpZHRoIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iMTA0OzEwNDsyMDsyMDs3MDs3MDsyMCIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuODsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIxOzE7MCIvPjwvcmVjdD48cmVjdCBoZWlnaHQ9IjIwIiByeD0iMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IngiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuMjswLjMzOzAuNTswLjY2OzAuODsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIxODI7MTgyOzEwODsxMDg7MTEyOzExMjsyNiIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IndpZHRoIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIyMDsyMDs2MDs2MDsyMDsyMCIvPjwvcmVjdD48cmVjdCBoZWlnaHQ9IjIwIiByeD0iMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IngiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuMjswLjMzOzAuNTswLjY2OzAuODsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIyMTg7MjE4OzE4NDsxODQ7MTQ4OzE0ODs2MiIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IndpZHRoIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iNjA7NjA7ODA7ODA7NDA7NDA7MTA0Ii8+PC9yZWN0PjxyZWN0IGhlaWdodD0iMjAiIHJ4PSIxMCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieCIgZHVyPSIycyIga2V5VGltZXM9IjA7MC4yOzAuMzM7MC41OzAuNjY7MC44OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjI5NDsyOTQ7MjgwOzI4MDsyMDQ7MjA0OzE4MiIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IndpZHRoIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iNDA7NDA7MjA7MjA7ODA7ODA7MjAiLz48L3JlY3Q+PHJlY3QgaGVpZ2h0PSIyMCIgcng9IjEwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4IiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iMzUwOzM1MDszMTY7MzE2OzMwMDszMDA7MjE4Ii8+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0id2lkdGgiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuMjswLjMzOzAuNTswLjY2OzAuODsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIyMDsyMDs2MDs2MDsyMDsyMDs2MCIvPjwvcmVjdD48cmVjdCBoZWlnaHQ9IjIwIiByeD0iMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IngiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuMjswLjMzOzAuNTswLjY2OzAuODsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIzODY7Mzg2OzM5MjszOTI7MzM2OzMzNjsyOTQiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ3aWR0aCIgZHVyPSIycyIga2V5VGltZXM9IjA7MC41OzAuNjY7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iMjA7MjA7NDA7NDAiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjU7MC42NjsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIwOzA7MTsxIi8+PC9yZWN0PjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcng9IjEwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4IiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iNDIyOzQyMjs0Mjg7NDI4OzM5MjszOTI7MzUwIi8+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgZHVyPSIycyIga2V5VGltZXM9IjA7MC44OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjA7MDsxIi8+PC9yZWN0PjwvZz48L3N2Zz4='; - function FluentActivityLoader({ children }: Readonly<{ children?: ReactNode | undefined }>) { const classNames = useStyles(styles); const variantClassName = useVariantClassName(classNames); + return ( {children} - + ); } diff --git a/packages/fluent-theme/src/components/assets/SlidingDots.tsx b/packages/fluent-theme/src/components/assets/SlidingDots.tsx new file mode 100644 index 0000000000..2cfd8bcb42 --- /dev/null +++ b/packages/fluent-theme/src/components/assets/SlidingDots.tsx @@ -0,0 +1,14 @@ +import React, { memo } from 'react'; + +const slidingDotsURL = + 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCA0MDAgMjAiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjAiIHgyPSIxMDAlIiB5MT0iMCIgeTI9IjAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAlIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdG9wLWNvbG9yIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iI2FkNWFlMTsjYWQ1YWUxOyMwRTk0RTE7IzBFOTRFMTsjNjY5ZmMyOyM2NjlmYzI7I2FkNWFlMSIvPjwvc3RvcD48c3RvcCBvZmZzZXQ9IjUwJSI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ic3RvcC1jb2xvciIgZHVyPSIycyIga2V5VGltZXM9IjA7MC4yOzAuMzM7MC41OzAuNjY7MC44OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IiNlOTYxOGQ7I2U5NjE4ZDsjNTdBQjgyOyM1N0FCODI7IzYzNzdlMDsjNjM3N2UwOyNlOTYxOGQiLz48L3N0b3A+PHN0b3Agb2Zmc2V0PSIxMDAlIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdG9wLWNvbG9yIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iI2ZkOWU1ZjsjZmQ5ZTVmOyNDNkMyMjU7I0M2QzIyNTsjOWI4MGVjOyM5YjgwZWM7I2ZkOWU1ZiIvPjwvc3RvcD48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZyBmaWxsPSJ1cmwoI2EpIj48cmVjdCBoZWlnaHQ9IjIwIiByeD0iMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IngiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuNTswLjY2OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjI2OzI2OzA7MCIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IndpZHRoIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIyMDsyMDszMDszMDsyMDsyMCIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuNTswLjY2OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjE7MTswOzAiLz48L3JlY3Q+PHJlY3QgaGVpZ2h0PSIyMCIgcng9IjEwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4IiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iNjI7NjI7NzI7NzI7MjY7MjY7MCIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IndpZHRoIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iMTA0OzEwNDsyMDsyMDs3MDs3MDsyMCIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuODsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIxOzE7MCIvPjwvcmVjdD48cmVjdCBoZWlnaHQ9IjIwIiByeD0iMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IngiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuMjswLjMzOzAuNTswLjY2OzAuODsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIxODI7MTgyOzEwODsxMDg7MTEyOzExMjsyNiIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IndpZHRoIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIyMDsyMDs2MDs2MDsyMDsyMCIvPjwvcmVjdD48cmVjdCBoZWlnaHQ9IjIwIiByeD0iMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IngiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuMjswLjMzOzAuNTswLjY2OzAuODsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIyMTg7MjE4OzE4NDsxODQ7MTQ4OzE0ODs2MiIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IndpZHRoIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iNjA7NjA7ODA7ODA7NDA7NDA7MTA0Ii8+PC9yZWN0PjxyZWN0IGhlaWdodD0iMjAiIHJ4PSIxMCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieCIgZHVyPSIycyIga2V5VGltZXM9IjA7MC4yOzAuMzM7MC41OzAuNjY7MC44OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjI5NDsyOTQ7MjgwOzI4MDsyMDQ7MjA0OzE4MiIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IndpZHRoIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iNDA7NDA7MjA7MjA7ODA7ODA7MjAiLz48L3JlY3Q+PHJlY3QgaGVpZ2h0PSIyMCIgcng9IjEwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4IiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iMzUwOzM1MDszMTY7MzE2OzMwMDszMDA7MjE4Ii8+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0id2lkdGgiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuMjswLjMzOzAuNTswLjY2OzAuODsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIyMDsyMDs2MDs2MDsyMDsyMDs2MCIvPjwvcmVjdD48cmVjdCBoZWlnaHQ9IjIwIiByeD0iMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IngiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuMjswLjMzOzAuNTswLjY2OzAuODsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIzODY7Mzg2OzM5MjszOTI7MzM2OzMzNjsyOTQiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ3aWR0aCIgZHVyPSIycyIga2V5VGltZXM9IjA7MC41OzAuNjY7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iMjA7MjA7NDA7NDAiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjU7MC42NjsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIwOzA7MTsxIi8+PC9yZWN0PjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcng9IjEwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4IiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iNDIyOzQyMjs0Mjg7NDI4OzM5MjszOTI7MzUwIi8+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgZHVyPSIycyIga2V5VGltZXM9IjA7MC44OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjA7MDsxIi8+PC9yZWN0PjwvZz48L3N2Zz4='; + +type SlidingDotsProps = { + className?: string | undefined; +}; + +function SlidingDots({ className }: SlidingDotsProps) { + return ; +} + +export default memo(SlidingDots); diff --git a/packages/fluent-theme/src/components/typingIndicator/SlidingDotsTypingIndicator.module.css b/packages/fluent-theme/src/components/typingIndicator/SlidingDotsTypingIndicator.module.css new file mode 100644 index 0000000000..4012e615d6 --- /dev/null +++ b/packages/fluent-theme/src/components/typingIndicator/SlidingDotsTypingIndicator.module.css @@ -0,0 +1,9 @@ +:global(.webchat-fluent) .sliding-dots-typing-indicator { + align-self: start; + height: 24px; + margin: auto var(--webchat-spacingHorizontalMNudge); +} + +:global(.webchat-fluent) .sliding-dots-typing-indicator__image { + height: 6px; +} diff --git a/packages/fluent-theme/src/components/typingIndicator/SlidingDotsTypingIndicator.tsx b/packages/fluent-theme/src/components/typingIndicator/SlidingDotsTypingIndicator.tsx new file mode 100644 index 0000000000..d6a19ef7d8 --- /dev/null +++ b/packages/fluent-theme/src/components/typingIndicator/SlidingDotsTypingIndicator.tsx @@ -0,0 +1,20 @@ +import { useStyles } from 'botframework-webchat-styles/react'; +import cx from 'classnames'; +import React, { memo } from 'react'; + +import { useVariantClassName } from '../../styles'; +import SlidingDots from '../assets/SlidingDots'; +import styles from './SlidingDotsTypingIndicator.module.css'; + +function SlidingDotsTypingIndicator() { + const classNames = useStyles(styles); + const variantClassName = useVariantClassName(classNames); + + return ( +
+ +
+ ); +} + +export default memo(SlidingDotsTypingIndicator); diff --git a/packages/fluent-theme/src/private/FluentThemeProvider.tsx b/packages/fluent-theme/src/private/FluentThemeProvider.tsx index f952150fd8..8506e1a65c 100644 --- a/packages/fluent-theme/src/private/FluentThemeProvider.tsx +++ b/packages/fluent-theme/src/private/FluentThemeProvider.tsx @@ -1,4 +1,4 @@ -import { type ActivityMiddleware, type StyleOptions } from 'botframework-webchat-api'; +import { type ActivityMiddleware, type StyleOptions, type TypingIndicatorMiddleware } from 'botframework-webchat-api'; import { DecoratorComposer, DecoratorMiddleware } from 'botframework-webchat-api/decorator'; import { Components } from 'botframework-webchat-component'; import { WebChatDecorator } from 'botframework-webchat-component/decorator'; @@ -6,13 +6,14 @@ import React, { memo, type ReactNode } from 'react'; import { ActivityDecorator } from '../components/activity'; import ActivityLoader from '../components/activity/ActivityLoader'; +import { isLinerMessageActivity, LinerMessageActivity } from '../components/linerActivity'; import { isPreChatMessageActivity, PreChatMessageActivity } from '../components/preChatActivity'; import { PrimarySendBox } from '../components/sendBox'; import { TelephoneKeypadProvider } from '../components/telephoneKeypad'; import { WebChatTheme } from '../components/theme'; +import SlidingDotsTypingIndicator from '../components/typingIndicator/SlidingDotsTypingIndicator'; import { createStyles } from '../styles'; import VariantComposer, { VariantList } from './VariantComposer'; -import { isLinerMessageActivity, LinerMessageActivity } from '../components/linerActivity'; const { ThemeProvider } = Components; @@ -55,6 +56,10 @@ const fluentStyleOptions: StyleOptions = Object.freeze({ feedbackActionsPlacement: 'activity-actions' }); +const typingIndicatorMiddleware = Object.freeze([ + () => () => () => +] satisfies TypingIndicatorMiddleware[]); + const FluentThemeProvider = ({ children, variant = 'fluent' }: Props) => ( @@ -64,6 +69,7 @@ const FluentThemeProvider = ({ children, variant = 'fluent' }: Props) => ( sendBoxMiddleware={sendBoxMiddleware} styleOptions={fluentStyleOptions} styles={styles} + typingIndicatorMiddleware={typingIndicatorMiddleware} > {children} From 46fb758ceba5e76a56736c41b69277d0a5e2b23e Mon Sep 17 00:00:00 2001 From: William Wong Date: Sat, 15 Mar 2025 01:42:18 +0000 Subject: [PATCH 02/16] Update PR number --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fe9302a20b..badcfba4db 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -83,7 +83,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/ - Resolved [#2661](https://github.com/microsoft/BotFramework-WebChat/issues/2661) and [#5352](https://github.com/microsoft/BotFramework-WebChat/issues/5352). Added speech recognition continuous mode with barge-in support, in PR [#5426](https://github.com/microsoft/BotFramework-WebChat/pull/5426), by [@RushikeshGavali](https://github.com/RushikeshGavali) and [@compulim](https://github.com/compulim) - Set `styleOptions.speechRecognitionContinuous` to `true` with a Web Speech API provider with continuous mode support - Added support of [contentless activity in livestream](https://github.com/microsoft/BotFramework-WebChat/blob/main/docs/LIVESTREAMING.md#scenario-3-interim-activities-with-no-content), in PR [#5430](https://github.com/microsoft/BotFramework-WebChat/pull/5430), by [@compulim](https://github.com/compulim) -- Added sliding dots typing indicator in Fluent theme, in PR [#XXX](https://github.com/microsoft/BotFramework-WebChat/pull/XXX), by [@compulim](https://github.com/compulim) +- Added sliding dots typing indicator in Fluent theme, in PR [#5447](https://github.com/microsoft/BotFramework-WebChat/pull/5447), by [@compulim](https://github.com/compulim) ### Changed From 7feeae0ed2e37f0976eafb1a178b97cfd36f185f Mon Sep 17 00:00:00 2001 From: William Wong Date: Sat, 15 Mar 2025 02:32:32 +0000 Subject: [PATCH 03/16] Add tests --- .../html2/fluentTheme/typingIndicator.html | 47 ++++++++++++++++++- .../component/src/Assets/TypingAnimation.js | 2 + packages/component/src/testIds.ts | 1 + .../SlidingDotsTypingIndicator.tsx | 3 +- .../src/private/FluentThemeProvider.tsx | 5 +- packages/fluent-theme/src/testIds.ts | 3 +- .../globals/pageElements/typingIndicator.js | 2 +- 7 files changed, 57 insertions(+), 6 deletions(-) diff --git a/__tests__/html2/fluentTheme/typingIndicator.html b/__tests__/html2/fluentTheme/typingIndicator.html index ac8a209af3..f71e2a6355 100644 --- a/__tests__/html2/fluentTheme/typingIndicator.html +++ b/__tests__/html2/fluentTheme/typingIndicator.html @@ -11,8 +11,19 @@
+