Originator with long text should be clipped

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -18,18 +18,18 @@ body:
       label: Is it an issue related to Adaptive Cards?
       description: If yes, please verify if this issue repro on [Adaptive Cards Designer](https://adaptivecards.io/designer/). If it repro on their designer, please [file an issue to their repository](https://github.com/microsoft/AdaptiveCards/issues/new/choose).
       options:
-        - ""
+        - ''
         - Yes, this is an Adaptive Card issue, however it only repro on Web Chat.
-        - "No"
+        - 'No'
     validations:
       required: true
   - type: dropdown
     attributes:
       label: Is this an accessibility issue?
       description: For accessibility issue, please use [this issue template](https://github.com/microsoft/BotFramework-WebChat/issues/new?template=accessibility.yml).
       options:
-        - ""
-        - "No"
+        - ''
+        - 'No'
     validations:
       required: true
   - type: dropdown
@@ -85,28 +85,29 @@ body:
       description: Please make sure the issue continued to repro on latest version of the browser.
       multiple: true
       options:
-        - "Browser: Edge (latest)"
-        - "Browser: Chrome (latest)"
-        - "Browser: Firefox (latest)"
-        - "Browser: Safari (latest)"
-        - "Browser: IE Mode (latest)"
-        - "Platform: Windows"
-        - "Platform: macOS"
-        - "Platform: iOS/iPadOS"
-        - "Platform: Android"
+        - 'Browser: Edge (latest)'
+        - 'Browser: Chrome (latest)'
+        - 'Browser: Firefox (latest)'
+        - 'Browser: Safari (latest)'
+        - 'Browser: IE Mode (latest)'
+        - 'Platform: Windows'
+        - 'Platform: macOS'
+        - 'Platform: iOS/iPadOS'
+        - 'Platform: Android'
         - Others or unrelated
   - type: dropdown
     id: area
     attributes:
       label: Which area does this issue affect?
       options:
-        - ""
-        - "Attachment: Adaptive Card"
-        - "Attachment: OAuth card"
-        - "Attachment: Other rich cards"
+        - ''
+        - 'Attachment: Adaptive Card'
+        - 'Attachment: OAuth card'
+        - 'Attachment: Other rich cards'
         - Chat history
-        - "Customization: Branding"
-        - "Customization: Others"
+        - Citation
+        - 'Customization: Branding'
+        - 'Customization: Others'
         - Development experience
         - Hooks
         - Notification
@@ -123,7 +124,7 @@ body:
     attributes:
       label: What is the public URL for the website?
       description: If the bot is not intended for public use, please leave this blank. It will be helpful if we can test the bot to understand the issue.
-      placeholder: https://
+      value: https://compulim.github.io/webchat-loader/
   - type: textarea
     id: describe-the-bug
     attributes:
@@ -142,9 +143,7 @@ body:
     attributes:
       label: How to reproduce the issue?
       value: |
-        1. Navigate to ...
-        2. Click on ...
-        3. Type "..." in the send box
+        1. Type "..." in the send box
     validations:
       required: true
   - type: textarea

CHANGELOG.md

@@ -32,6 +32,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#4863](https://github.com/microsoft/BotFramework-WebChat/issues/4863). Disable dark theme for link references until chat history has dark theme support, by [@compulim](https://github.com/compulim), in PR [#4864](https://github.com/microsoft/BotFramework-WebChat/pull/4864)
 -  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 [#4880](https://github.com/microsoft/BotFramework-WebChat/issues/4880). Originator with long text should be clipped with ellipsis, by [@compulim](https://github.com/compulim), in PR [#4881](https://github.com/microsoft/BotFramework-WebChat/pull/4881)
 
 ### Added
 

__tests__/html/provenance.basic.html

@@ -49,6 +49,7 @@
         expect(provenanceLink.getAttribute('href')).toBe('https://www.microsoft.com/en-us/ai/responsible-ai');
         expect(provenanceLink.getAttribute('rel')).toBe('noopener noreferrer');
         expect(provenanceLink.getAttribute('target')).toBe('_blank');
+        expect(provenanceLink.getAttribute('title')).toBe('Surfaced by Azure OpenAI');
       });
     </script>
   </body>

__tests__/html/provenance.long.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',
+              '@type': 'ReplyAction',
+              type: 'https://schema.org/ReplyAction',
+              provider: {
+                '@context': 'https://schema.org',
+                '@type': 'Project',
+                name: 'Minim velit occaecat adipisicing Lorem cupidatat ex consectetur ea est fugiat officia',
+                url: 'https://www.microsoft.com/en-us/ai/responsible-ai'
+              }
+            }
+          ],
+          text: 'Hello, World!',
+          type: 'message'
+        });
+
+        await host.snapshot();
+
+        const [activityStatus] = pageElements.activityStatuses();
+        const provenanceLink = activityStatus.querySelector('a');
+
+        expect(provenanceLink).toBeTruthy();
+        expect(provenanceLink.getAttribute('href')).toBe('https://www.microsoft.com/en-us/ai/responsible-ai');
+        expect(provenanceLink.getAttribute('rel')).toBe('noopener noreferrer');
+        expect(provenanceLink.getAttribute('target')).toBe('_blank');
+        expect(provenanceLink.getAttribute('title')).toBe('Minim velit occaecat adipisicing Lorem cupidatat ex consectetur ea est fugiat officia');
+      });
+    </script>
+  </body>
+</html>

__tests__/html/provenance.long.js

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

packages/component/src/ActivityStatus/SelfActivityStatus.tsx

@@ -8,7 +8,7 @@ import useStyleSet from '../hooks/useStyleSet';
 
 type Props = Readonly<{ activity: WebChatActivity }>;
 
-const SelftActivityStatus = memo(({ activity }: Props) => {
+const SelfActivityStatus = memo(({ activity }: Props) => {
   const [{ sendStatus }] = useStyleSet();
   const { timestamp } = activity;
 
@@ -19,6 +19,6 @@ const SelftActivityStatus = memo(({ activity }: Props) => {
   ) : null;
 });
 
-SelftActivityStatus.displayName = 'SelftActivityStatus';
+SelfActivityStatus.displayName = 'SelfActivityStatus';
 
-export default SelftActivityStatus;
+export default SelfActivityStatus;

packages/component/src/ActivityStatus/private/Originator.tsx

@@ -16,6 +16,7 @@ const Originator = memo(({ replyAction }: Props) => {
       href={url}
       rel="noopener noreferrer"
       target="_blank"
+      title={text} // In case the content is clipped with ellipsis, customers can hover to see the full text.
     >
       {text}
     </a>

packages/component/src/Styles/StyleSet/SendStatus.ts

@@ -6,7 +6,8 @@ export default function createSendStatusStyle() {
       color: CSSTokens.ColorTimestamp,
       fontFamily: CSSTokens.FontPrimary,
       fontSize: CSSTokens.FontSizeSmall,
-      marginTop: `calc(${CSSTokens.PaddingRegular} / 2)`
+      marginTop: `calc(${CSSTokens.PaddingRegular} / 2)`,
+      maxWidth: '100%'
     },
 
     '&.webchat__activity-status--slotted': {
@@ -15,7 +16,10 @@ export default function createSendStatusStyle() {
     },
 
     '& .webchat__activity-status__originator': {
-      alignItems: 'center',
+      flex: 1,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
 
       '&.webchat__activity-status__originator--has-link': {
         color: CSSTokens.ColorAccent

packages/component/src/Styles/createStyleSet.ts

@@ -31,7 +31,6 @@ import createSendBoxStyle from './StyleSet/SendBox';
 import createSendBoxTextBoxStyle from './StyleSet/SendBoxTextBox';
 import createSendStatusStyle from './StyleSet/SendStatus';
 import createSingleAttachmentActivityStyle from './StyleSet/SingleAttachmentActivity';
-import createSlottedActivityStatusStyle from './StyleSet/SlottedActivityStatus';
 import createSpinnerAnimationStyle from './StyleSet/SpinnerAnimation';
 import createStackedLayoutStyle from './StyleSet/StackedLayout';
 import createSuggestedActionsStyle from './StyleSet/SuggestedActions';
@@ -106,7 +105,6 @@ export default function createStyleSet(styleOptions: StyleOptions) {
     modalDialog: createModalDialogStyle(),
     renderMarkdown: createRenderMarkdownStyle(),
     sendStatus: createSendStatusStyle(),
-    slottedActivityStatus: createSlottedActivityStatusStyle(),
     textContent: createTextContentStyle(),
     thumbButton: createThumbButtonStyle()
   } as const);