Uses claimInterpreter (#4910)

* Update schema

* Move to claimInterpreter

* Move to claimInterpreter

* Fix test

* Add entry

* Add replyAction as deprecated

* Add deprecation notes

* Remove unnecessary code

* Add new Schema.org things

* Add sensitivity label

* Fix text ellipsis and add tests

* Remove Schema.org types (moved to core)

* Add valibot for Schema.org

* Componentize LinkDefinitions

* Rename props

* Cache const

* Ellipsis on overflow

* Chevron should not shrink

* Read message sensitivity label from entities

* Add event

* Turn plural into singular

* Add getOrgSchemaMessage

* Deprecate older Schema.org types

* Remove deprecated Schema.org types

* Allow no accessory

* Clean up

* Should render link definitions without claims

* Add test for message sensitivity label

* Test accordion text

* Better tooltip

* Rename props

* Update snapshot

* Fix backward compatibility

* Support non-numeric identifier

* Turn unknown scheme into button

* Update snapshots

* Add tests

* No wrap on identifier

* Wrap pure identifier with zero-width space

* Update screenshot for word wrap

* Fix legacy VoteAction

* Fix timestamp

* Fix test

* Show citation only when its thing is in the graph

* Revert

* Dereference unconnected blank nodes

* Rename files

* Add isEncrypted

* Add reference sample

* Update schema

* Add zero-width space

* Fix test

* Fix test

* Fix ESLint

CHANGELOG.md

@@ -90,6 +90,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#4866](https://github.com/microsoft/BotFramework-WebChat/issues/4866). Citation modal show fill screen width on mobile device and various fit-and-finish, by [@compulim](https://github.com/compulim), in PR [#4867](https://github.com/microsoft/BotFramework-WebChat/pull/4867)
 -  Fixes [#4878](https://github.com/microsoft/BotFramework-WebChat/issues/4878). `createStore` should return type of `Redux.Store`, by [@compulim](https://github.com/compulim), in PR [#4877](https://github.com/microsoft/BotFramework-WebChat/pull/4877)
 -  Fixes [#4957](https://github.com/microsoft/BotFramework-WebChat/issues/4957). Native chevron of the accordion in citation should be hidden, by [@compulim](https://github.com/compulim), in PR [#4958](https://github.com/microsoft/BotFramework-WebChat/pull/4958)
+-  Fixes [#4870](https://github.com/microsoft/BotFramework-WebChat/issues/4870). Originator should use `claimInterpreter` instead of `ReplyAction/provider`, by [@compulim](https://github.com/compulim), in PR [#4910](https://github.com/microsoft/BotFramework-WebChat/pull/4910)
 
 ### Added
 

__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/\\" 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>
+          "<p>Click \u200B<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>\u200B 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/\\" 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>
+          "<p>Click \u200B<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>\u200B to find out more.</p>
           "
         `);
 });

__tests__/html/accessibility.heroCard.heading.html

@@ -25,7 +25,7 @@
 
         expect(document.querySelector('.ac-textBlock[role="heading"]')).toHaveProperty(
           'innerText',
-          'Details about image 1'
+          '\u200BDetails about image 1\u200B'
         );
       });
     </script>

__tests__/html/linkDefinition/badge.html

@@ -0,0 +1,148 @@
+<!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': '',
+              '@type': 'Message',
+              citation: [
+                {
+                  '@type': 'Claim',
+                  appearance: {
+                    '@type': 'DigitalDocument',
+                    url: 'https://example.com/1/',
+                    usageInfo: {
+                      '@id': '_:1',
+                      '@type': 'CreativeWork',
+                      description:
+                        'Nisi quis ut sint elit est nulla enim eiusmod. Deserunt commodo pariatur nostrud culpa aliquip esse pariatur exercitation nulla do proident. Est qui eiusmod aliquip deserunt labore consequat fugiat. Ullamco reprehenderit nostrud eiusmod nisi nulla esse id. Reprehenderit aliqua quis consectetur sit cupidatat fugiat Lorem ex labore. Eiusmod velit laborum quis tempor incididunt excepteur culpa esse nulla.',
+                      keywords: ['encrypted-content'],
+                      name: 'Sit veniam do irure velit est et quis ut Lorem reprehenderit commodo cillum occaecat',
+                      pattern: {
+                        '@type': 'DefinedTerm',
+                        inDefinedTermSet: 'https://www.w3.org/TR/css-color-4/',
+                        name: 'color',
+                        termCode: 'orange'
+                      }
+                    }
+                  },
+                  position: 1
+                },
+                {
+                  '@type': 'Claim',
+                  appearance: {
+                    '@type': 'DigitalDocument',
+                    text: 'Incididunt amet dolore anim commodo fugiat occaecat elit nulla do consequat. Quis incididunt occaecat labore adipisicing. Cillum sunt velit consequat irure ipsum ullamco sint ea aute. Sunt et eu ut enim aliqua cupidatat non adipisicing dolore commodo dolor magna enim. Commodo reprehenderit excepteur ad nostrud ex id aliquip deserunt eiusmod. Esse non labore nulla voluptate.',
+                    usageInfo: {
+                      '@type': 'CreativeWork',
+                      name: 'Velit exercitation',
+                      pattern: {
+                        '@type': 'DefinedTerm',
+                        inDefinedTermSet: 'https://www.w3.org/TR/css-color-4/',
+                        name: 'color',
+                        termCode: 'Yellow'
+                      }
+                    }
+                  },
+                  position: 3
+                },
+                {
+                  '@type': 'Claim',
+                  appearance: {
+                    '@type': 'DigitalDocument',
+                    text: 'Ea nisi nostrud duis dolore aliqua sit reprehenderit minim est nisi id est sit. Amet mollit ex fugiat sint aliquip Lorem eiusmod incididunt nulla laboris labore nulla. In id exercitation ut non non Lorem consequat cupidatat deserunt do aliqua exercitation. Minim commodo aliquip dolore exercitation officia commodo sint aute aute. Fugiat laborum proident cupidatat quis eiusmod excepteur voluptate commodo. Ullamco minim duis id deserunt laboris ullamco cupidatat dolor est sint ut. Anim pariatur non ea do occaecat dolor sint ad.'
+                  },
+                  position: 4
+                }
+              ],
+              type: 'https://schema.org/Message',
+              usageInfo: { '@id': '_:1' }
+            }
+          ],
+          text: 'Ipsum[1] dolore[2] cupidatat[3] magna[4] consectetur[5] do tempor est excepteur.\n\n[1]: https://example.com/1/ "Sint amet id officia dolor ex eiusmod ipsum ipsum magna fugiat"\n[2]: https://example.com/2/ "Laboris cupidatat voluptate"\n[3]: _:3 "Velit nulla culpa eu ea consectetur consectetur dolore velit"\n[4]: _:4 "Adipisicing enim nulla"\n[5]: https://example.com/5',
+          type: 'message'
+        });
+
+        await host.snapshot();
+
+        const [firstActivityElement] = pageElements.activities();
+
+        const linkDefinitions = firstActivityElement.querySelectorAll('.webchat__link-definitions__list-item');
+
+        expect(linkDefinitions).toHaveProperty('length', 5);
+
+        expect(linkDefinitions[0].querySelector('.webchat__link-definitions__list-item-box').tagName).toBe('A');
+        expect(
+          linkDefinitions[0].querySelector('.webchat__link-definitions__list-item-text').getAttribute('title')
+        ).toBe('Sint amet id officia dolor ex eiusmod ipsum ipsum magna fugiat');
+        expect(
+          linkDefinitions[0].querySelector('.webchat__link-definitions__list-item-badge').getAttribute('title')
+        ).toBe(
+          'Sit veniam do irure velit est et quis ut Lorem reprehenderit commodo cillum occaecat\n\nNisi quis ut sint elit est nulla enim eiusmod. Deserunt commodo pariatur nostrud culpa aliquip esse pariatur exercitation nulla do proident. Est qui eiusmod aliquip deserunt labore consequat fugiat. Ullamco reprehenderit nostrud eiusmod nisi nulla esse id. Reprehenderit aliqua quis consectetur sit cupidatat fugiat Lorem ex labore. Eiusmod velit laborum quis tempor incididunt excepteur culpa esse nulla.'
+        );
+
+        expect(linkDefinitions[1].querySelector('.webchat__link-definitions__list-item-box').tagName).toBe('A');
+        expect(
+          linkDefinitions[1].querySelector('.webchat__link-definitions__list-item-text').getAttribute('title')
+        ).toBe('Laboris cupidatat voluptate');
+        expect(linkDefinitions[1].querySelector('.webchat__link-definitions__list-item-badge')).toBeNull();
+
+        expect(linkDefinitions[2].querySelector('.webchat__link-definitions__list-item-box').tagName).toBe('BUTTON');
+        expect(
+          linkDefinitions[2].querySelector('.webchat__link-definitions__list-item-text').getAttribute('title')
+        ).toBe('Velit nulla culpa eu ea consectetur consectetur dolore velit');
+        expect(
+          linkDefinitions[2].querySelector('.webchat__link-definitions__list-item-badge').getAttribute('title')
+        ).toBe('Velit exercitation');
+
+        expect(linkDefinitions[3].querySelector('.webchat__link-definitions__list-item-box').tagName).toBe('BUTTON');
+        expect(
+          linkDefinitions[3].querySelector('.webchat__link-definitions__list-item-text').getAttribute('title')
+        ).toBe('Adipisicing enim nulla');
+        expect(linkDefinitions[3].querySelector('.webchat__link-definitions__list-item-badge')).toBeNull();
+
+        expect(document.querySelector('.webchat__link-definitions__header-text')).toHaveProperty(
+          'textContent',
+          '5 references'
+        );
+
+        expect(document.querySelector('.webchat__link-definitions__message-sensitivity-label-text')).toHaveProperty(
+          'textContent',
+          'Sit veniam do irure velit est et quis ut Lorem reprehenderit commodo cillum occaecat'
+        );
+
+        expect(document.querySelector('.webchat__link-definitions__message-sensitivity-label')).toHaveProperty(
+          'title',
+          'Sit veniam do irure velit est et quis ut Lorem reprehenderit commodo cillum occaecat\n\nNisi quis ut sint elit est nulla enim eiusmod. Deserunt commodo pariatur nostrud culpa aliquip esse pariatur exercitation nulla do proident. Est qui eiusmod aliquip deserunt labore consequat fugiat. Ullamco reprehenderit nostrud eiusmod nisi nulla esse id. Reprehenderit aliqua quis consectetur sit cupidatat fugiat Lorem ex labore. Eiusmod velit laborum quis tempor incididunt excepteur culpa esse nulla.'
+        );
+
+        expect(
+          document.querySelector('.webchat__link-definitions__message-sensitivity-label--is-encrypted')
+        ).toBeTruthy();
+      });
+    </script>
+  </body>
+</html>

__tests__/html/linkDefinition/badge.js

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

__tests__/html/linkDefinition/identifierAsString.html

@@ -0,0 +1,63 @@
+<!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({
+          text: 'Ipsum[Abc] dolore[DEF] cupidatat[xyz] magna consectetur do tempor est excepteur.\n\n[Abc]: https://example.com/1/ "Sint amet id officia dolor ex eiusmod ipsum ipsum magna fugiat"\n[DEF]: https://example.com/2/ "Laboris cupidatat voluptate"\n[xyz]: https://example.com/3/ "Velit nulla culpa eu ea consectetur consectetur dolore velit"',
+          type: 'message'
+        });
+
+        await host.snapshot();
+
+        const [firstActivityElement] = pageElements.activities();
+
+        const linkDefinitions = firstActivityElement.querySelectorAll('.webchat__link-definitions__list-item');
+
+        expect(linkDefinitions).toHaveProperty('length', 3);
+
+        expect(linkDefinitions[0].querySelector('.webchat__link-definitions__list-item-box').tagName).toBe('A');
+        expect(
+          linkDefinitions[0].querySelector('.webchat__link-definitions__list-item-text').getAttribute('title')
+        ).toBe('Sint amet id officia dolor ex eiusmod ipsum ipsum magna fugiat');
+
+        expect(linkDefinitions[1].querySelector('.webchat__link-definitions__list-item-box').tagName).toBe('A');
+        expect(
+          linkDefinitions[1].querySelector('.webchat__link-definitions__list-item-text').getAttribute('title')
+        ).toBe('Laboris cupidatat voluptate');
+        expect(linkDefinitions[1].querySelector('.webchat__link-definitions__list-item-badge')).toBeNull();
+
+        expect(linkDefinitions[2].querySelector('.webchat__link-definitions__list-item-box').tagName).toBe('A');
+        expect(
+          linkDefinitions[2].querySelector('.webchat__link-definitions__list-item-text').getAttribute('title')
+        ).toBe('Velit nulla culpa eu ea consectetur consectetur dolore velit');
+
+        expect(
+          [].map.call(
+            firstActivityElement.querySelectorAll('.webchat__link-definitions__badge'),
+            ({ textContent }) => textContent
+          )
+        ).toEqual(['Abc', 'DEF', 'xyz']);
+      });
+    </script>
+  </body>
+</html>

__tests__/html/linkDefinition/identifierAsString.js

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('link definition', () => {
+  test('should display identifier of type string', () => runHTML('linkDefinition/identifierAsString.html'));
+});