[HIGH] New UIs for better bot response (#4846)

* Refactor TextAttachment

* Add schema.org

* Add @types/jest

* Refactor Markdown-It plugins

* Fix test

* Add ModalDialogComposer

* Use constants

* Add link definitions

* Clean up

* Cosmetics

* Cosmetics

* Add citation, definitions, provenance, vote buttons

* Use ReplyAction instead of Person

* Clean up styles

* Style slotted

* Localize feedback buttons

* Focus indicator cosmetics

* Click on citation should show modal

* Fix colors

* Fix accessibility on link definitions

* Add open in new window icon

* Clean up

* Show host if no name on link

* Remove transition

* Chevron cosmetics

* Clean up vote buttons

* Use VoteAction directly

* Fix @context

* Add onErrorResumeNext

* Allow different type for default value

* Clean up

* Simplify

* Fix test

* Simplify

* Add test for Thing

* Add tests

* Add tests

* Add test

* Add test entrypoints

* Add tests

* Add screenshots

* Add entries

* Fix px

* Fix slotted activity status padding

* Fix test

* Fix tests

* Fix tests

* Migrate test

* Delete old test

* Fix send status padding

* Fix screenshot

* Fix tests

* Update snapshots

* Fix tests

* Rename CSS variables

* Fix prop types

* Fix flaky test

* Update screenshots

* Fix screenshots

* Typo

* Add comment

* Update scrollbar size

* Update screenshot

* Fix tests because DOM go deeper

CHANGELOG.md

@@ -22,6 +22,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+-  Resolves [#4840](https://github.com/microsoft/BotFramework-WebChat/issues/4840). Added feedback buttons in activity status, by [@compulim](https://github.com/compulim), in PR [#4846](https://github.com/microsoft/BotFramework-WebChat/pull/4846)
+-  Resolves [#4841](https://github.com/microsoft/BotFramework-WebChat/issues/4841). Added link definitions UI in Markdown, by [@compulim](https://github.com/compulim), in PR [#4846](https://github.com/microsoft/BotFramework-WebChat/pull/4846)
+-  Resolves [#4842](https://github.com/microsoft/BotFramework-WebChat/issues/4842). Added provenance in activity status, by [@compulim](https://github.com/compulim), in PR [#4846](https://github.com/microsoft/BotFramework-WebChat/pull/4846)
+
 ## [4.15.9] - 2023-08-25
 
 ### Fixed

__tests__/hooks/useRenderMarkdownAsHTML.js

@@ -41,7 +41,7 @@ test('renderMarkdown should add accessibility text for external links', async ()
   await expect(
     pageObjects.runHook('useRenderMarkdownAsHTML', [], fn => fn('Click [here](https://aka.ms/) to find out more.'))
   ).resolves.toMatchInlineSnapshot(`
-          "<p>Click <a href=\\"https://aka.ms/\\" rel=\\"noopener noreferrer\\" target=\\"_blank\\" title=\\"Opens in a new window; external.\\">here<img src=\\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\\" alt=\\"Opens in a new window; external.\\" class=\\"webchat__markdown__external-link-icon\\" /></a> to find out more.</p>
+          "<p>Click <a href=\\"https://aka.ms/\\" aria-label=\\"here Opens in a new window; external.\\" rel=\\"noopener noreferrer\\" target=\\"_blank\\">here<img src=\\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\\" alt class=\\"webchat__render-markdown__external-link-icon\\" title=\\"Opens in a new window; external.\\" /></a> to find out more.</p>
           "
         `);
 });
@@ -52,7 +52,7 @@ test('renderMarkdown should add accessibility text for external links with yue',
   await expect(
     pageObjects.runHook('useRenderMarkdownAsHTML', [], fn => fn('Click [here](https://aka.ms/) to find out more.'))
   ).resolves.toMatchInlineSnapshot(`
-          "<p>Click <a href=\\"https://aka.ms/\\" rel=\\"noopener noreferrer\\" target=\\"_blank\\" title=\\"喺新嘅視窗開啟外部連結。\\">here<img src=\\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\\" alt=\\"喺新嘅視窗開啟外部連結。\\" class=\\"webchat__markdown__external-link-icon\\" /></a> to find out more.</p>
+          "<p>Click <a href=\\"https://aka.ms/\\" aria-label=\\"here 喺新嘅視窗開啟外部連結。\\" rel=\\"noopener noreferrer\\" target=\\"_blank\\">here<img src=\\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\\" alt class=\\"webchat__render-markdown__external-link-icon\\" title=\\"喺新嘅視窗開啟外部連結。\\" /></a> to find out more.</p>
           "
         `);
 });

__tests__/html/accessibility.landmarkRole.invalid.html

@@ -23,7 +23,7 @@
           await pageConditions.uiConnected();
 
           // Should fallback to "complementary" if the role specified is not a valid landmark role.
-          await expect(document.querySelector('#webchat > *').getAttribute('role')).toBe('complementary');
+          await expect(document.querySelector('#webchat > * > *').getAttribute('role')).toBe('complementary');
         },
         { ignoreErrors: true }
       );

__tests__/html/accessibility.landmarkRole.valid.html

@@ -20,7 +20,10 @@
         );
 
         await pageConditions.uiConnected();
-        await expect(document.querySelector('#webchat > *').getAttribute('role')).toBe('main');
+
+        // The "role" is on second level.
+        // The first level is our <Composer>, which could be parent of many other things including Web Chat.
+        await expect(document.querySelector('#webchat > * > *').getAttribute('role')).toBe('main');
       });
     </script>
   </body>

__tests__/html/citation.accordion.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          entities: [
+            {
+              '@context': 'https://schema.org',
+              '@id': 'cite:1',
+              '@type': 'Claim',
+              type: 'https://schema.org/Claim',
+              text: 'Reprehenderit exercitation laborum labore ut. Nostrud do et ut nostrud nisi excepteur labore adipisicing nostrud nostrud ipsum id dolore. Anim aliquip incididunt incididunt sunt sit proident consectetur exercitation qui aliqua aliquip adipisicing nisi et. Id commodo labore sunt quis do aute cillum laborum veniam [proident](https://bing.com/).'
+            }
+          ],
+          text: `Sure, you should override the default proxy settings[1]\u200C[2], when your proxy server requires authentication[3].
+
+[1]: https://support.microsoft.com/en-us/windows/use-a-proxy-server-in-windows-03096c53-0554-4ffe-b6ab-8b1deee8dae1
+[2]: https://learn.microsoft.com/en-us/troubleshoot/windows-server/networking/configure-proxy-server-settings "Configure proxy server settings - Windows Server"
+[3]: cite:1 "Citation-1"
+`,
+          type: 'message'
+        });
+
+        await host.snapshot();
+
+        const summary = pageElements.linkDefinitions()[0].querySelector('summary');
+
+        await host.click(summary);
+        await host.snapshot();
+
+        await host.click(summary);
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>

__tests__/html/citation.accordion.js

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('citation accordion', () => {
+  test('should expand and collapse on click', () => runHTML('citation.accordion.html'));
+});

__tests__/html/citation.basic.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          entities: [
+            {
+              '@context': 'https://schema.org',
+              '@id': 'cite:1',
+              '@type': 'Claim',
+              type: 'https://schema.org/Claim',
+              text: 'Reprehenderit exercitation laborum labore ut. Nostrud do et ut nostrud nisi excepteur labore adipisicing nostrud nostrud ipsum id dolore. Anim aliquip incididunt incididunt sunt sit proident consectetur exercitation qui aliqua aliquip adipisicing nisi et. Id commodo labore sunt quis do aute cillum laborum veniam [proident](https://bing.com/).'
+            }
+          ],
+          text: `Sure, you should override the default proxy settings[1]\u200C[2], when your proxy server requires authentication[3].
+
+[1]: https://support.microsoft.com/en-us/windows/use-a-proxy-server-in-windows-03096c53-0554-4ffe-b6ab-8b1deee8dae1
+[2]: https://learn.microsoft.com/en-us/troubleshoot/windows-server/networking/configure-proxy-server-settings "Configure proxy server settings - Windows Server"
+[3]: cite:1 "Citation-1"
+`,
+          type: 'message'
+        });
+
+        await host.snapshot();
+
+        const markdownElement = pageElements.activities()[0].querySelector('.webchat__text-content__markdown');
+        const markdownLinks = markdownElement.querySelectorAll('a');
+        const markdownButtons = markdownElement.querySelectorAll('button');
+
+        expect(markdownLinks).toHaveLength(2);
+        expect(markdownButtons).toHaveLength(1);
+
+        expect(markdownLinks[0].getAttribute('href')).toBe(
+          'https://support.microsoft.com/en-us/windows/use-a-proxy-server-in-windows-03096c53-0554-4ffe-b6ab-8b1deee8dae1'
+        );
+
+        expect(markdownLinks[1].getAttribute('href')).toBe(
+          'https://learn.microsoft.com/en-us/troubleshoot/windows-server/networking/configure-proxy-server-settings'
+        );
+
+        expect(markdownButtons[0].getAttribute('type')).toBe('button');
+
+        const linkDefinitionItems = pageElements.linkDefinitions()[0].querySelectorAll('[role="listitem"] > *');
+
+        expect(linkDefinitionItems[0].getAttribute('href')).toBe(
+          'https://support.microsoft.com/en-us/windows/use-a-proxy-server-in-windows-03096c53-0554-4ffe-b6ab-8b1deee8dae1'
+        );
+
+        expect(linkDefinitionItems[1].getAttribute('href')).toBe(
+          'https://learn.microsoft.com/en-us/troubleshoot/windows-server/networking/configure-proxy-server-settings'
+        );
+
+        expect(linkDefinitionItems[2].tagName).toBe('BUTTON');
+      });
+    </script>
+  </body>
+</html>

__tests__/html/citation.basic.js

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('citation', () => {
+  test('should display', () => runHTML('citation.basic.html'));
+});

__tests__/html/citation.showModal.close.button.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          entities: [
+            {
+              '@context': 'https://schema.org',
+              '@id': 'cite:1',
+              '@type': 'Claim',
+              type: 'https://schema.org/Claim',
+              text: 'Reprehenderit exercitation laborum labore ut. Nostrud do et ut nostrud nisi excepteur labore adipisicing nostrud nostrud ipsum id dolore. Anim aliquip incididunt incididunt sunt sit proident consectetur exercitation qui aliqua aliquip adipisicing nisi et. Id commodo labore sunt quis do aute cillum laborum veniam [proident](https://bing.com/).'
+            }
+          ],
+          text: `Sure, you should override the default proxy settings[1]\u200C[2], when your proxy server requires authentication[3].
+
+[1]: https://support.microsoft.com/en-us/windows/use-a-proxy-server-in-windows-03096c53-0554-4ffe-b6ab-8b1deee8dae1
+[2]: https://learn.microsoft.com/en-us/troubleshoot/windows-server/networking/configure-proxy-server-settings "Configure proxy server settings - Windows Server"
+[3]: cite:1 "Citation-1"
+`,
+          type: 'message'
+        });
+
+        const markdownElement = pageElements.activities()[0].querySelector('.webchat__text-content__markdown');
+        const markdownButtons = markdownElement.querySelectorAll('button');
+
+        await host.click(markdownButtons[0]);
+        await host.snapshot();
+
+        await host.sendKeys(' ');
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>

__tests__/html/citation.showModal.close.button.js

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('citation modal dialog', () => {
+  test('should close when clicking on close button', () => runHTML('citation.showModal.close.button.html'));
+});

__tests__/html/citation.showModal.close.escape.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          entities: [
+            {
+              '@context': 'https://schema.org',
+              '@id': 'cite:1',
+              '@type': 'Claim',
+              type: 'https://schema.org/Claim',
+              text: 'Reprehenderit exercitation laborum labore ut. Nostrud do et ut nostrud nisi excepteur labore adipisicing nostrud nostrud ipsum id dolore. Anim aliquip incididunt incididunt sunt sit proident consectetur exercitation qui aliqua aliquip adipisicing nisi et. Id commodo labore sunt quis do aute cillum laborum veniam [proident](https://bing.com/).'
+            }
+          ],
+          text: `Sure, you should override the default proxy settings[1]\u200C[2], when your proxy server requires authentication[3].
+
+[1]: https://support.microsoft.com/en-us/windows/use-a-proxy-server-in-windows-03096c53-0554-4ffe-b6ab-8b1deee8dae1
+[2]: https://learn.microsoft.com/en-us/troubleshoot/windows-server/networking/configure-proxy-server-settings "Configure proxy server settings - Windows Server"
+[3]: cite:1 "Citation-1"
+`,
+          type: 'message'
+        });
+
+        const markdownElement = pageElements.activities()[0].querySelector('.webchat__text-content__markdown');
+        const markdownButtons = markdownElement.querySelectorAll('button');
+
+        await host.click(markdownButtons[0]);
+        await host.snapshot();
+
+        await host.sendTab();
+        await host.sendKeys('ESCAPE');
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>

__tests__/html/citation.showModal.close.escape.js

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('citation modal dialog', () => {
+  test('should close when escape key is pressed', () => runHTML('citation.showModal.close.escape.html'));
+});

__tests__/html/citation.showModal.linkDefinitions.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          entities: [
+            {
+              '@context': 'https://schema.org',
+              '@id': 'cite:1',
+              '@type': 'Claim',
+              type: 'https://schema.org/Claim',
+              text: 'Reprehenderit exercitation laborum labore ut. Nostrud do et ut nostrud nisi excepteur labore adipisicing nostrud nostrud ipsum id dolore. Anim aliquip incididunt incididunt sunt sit proident consectetur exercitation qui aliqua aliquip adipisicing nisi et. Id commodo labore sunt quis do aute cillum laborum veniam [proident](https://bing.com/).'
+            }
+          ],
+          text: `Sure, you should override the default proxy settings[1]\u200C[2], when your proxy server requires authentication[3].
+
+[1]: https://support.microsoft.com/en-us/windows/use-a-proxy-server-in-windows-03096c53-0554-4ffe-b6ab-8b1deee8dae1
+[2]: https://learn.microsoft.com/en-us/troubleshoot/windows-server/networking/configure-proxy-server-settings "Configure proxy server settings - Windows Server"
+[3]: cite:1 "Citation-1"
+`,
+          type: 'message'
+        });
+
+        const linkDefinitionItems = pageElements.linkDefinitions()[0].querySelectorAll('[role="listitem"] > *');
+
+        await host.click(linkDefinitionItems[2]);
+        await host.snapshot();
+
+        await host.sendTab();
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>

__tests__/html/citation.showModal.linkDefinitions.js

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('citation modal dialog', () => {
+  test('should show when clicking on citation in link definitions', () => runHTML('citation.showModal.linkDefinitions.html'));
+});