microsoft · OEvgeny · Jul 1, 2025 · Jul 1, 2025 · Jul 1, 2025
@@ -235,6 +235,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
    - Downstreamers who use our CommonJS and ES Modules output with esbuild will need to disable AMD themselves to prevent conflict with RequireJS
 - Fixed [#5479](https://github.com/microsoft/BotFramework-WebChat/issues/5479). Fixed feedback form buttons should not squash other buttons, in PR [#5480](https://github.com/microsoft/BotFramework-WebChat/pull/5480), by [@compulim](https://github.com/compulim)
    - Migrated to radio button for like/dislike where form submission is required
+- Fixed long citation identifiers break activity layout, in PR [#5507](https://github.com/microsoft/BotFramework-WebChat/pull/5507), by [@OEvgeny](https://github.com/OEvgeny)
 
 # Removed
 

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Citation long ref (copilot)</title>
+    <script>
+      location = './citation.longRef?theme=fluent&variant=copilot';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Citation long ref (fluent)</title>
+    <script>
+      location = './citation.longRef?theme=fluent';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
+    <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>
+    <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        const citations = [
+          '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',
+          (JSON.stringify({ json: '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' })),
+          encodeURI('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')
+        ]
+
+        await directLine.emulateIncomingActivity({
+          entities: [
+            {
+              '@context': 'https://schema.org',
+              '@id': 'cite:1',
+              '@type': 'Claim',
+              name: 'Should Be Visible',
+              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[${citations.at(0)}]\u200C[${citations.at(1)}], when your proxy server requires authentication[${citations.at(2)}].
+
+[${citations.at(0)}]: https://support.microsoft.com/en-us/windows/use-a-proxy-server-in-windows-03096c53-0554-4ffe-b6ab-8b1deee8dae1
+[${citations.at(1)}]: https://learn.microsoft.com/en-us/troubleshoot/windows-server/networking/configure-proxy-server-settings "Configure proxy server settings - Windows Server"
+[${citations.at(2)}]: cite:1 "should be hidden"
+`,
+          type: 'message'
+        });
+
+        await host.snapshot('local');
+
+        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');
+
+        expect(linkDefinitionItems[2].innerHTML).toContain('Should Be Visible');
+        expect(linkDefinitionItems[2].innerHTML).not.toContain('should be hidden');
+      });
+    </script>
+  </body>
+</html>
@@ -2,7 +2,11 @@ import React, { memo } from 'react';
 
 type Props = Readonly<{ value: string }>;
 
-const Badge = memo(({ value }: Props) => <div className="webchat__link-definitions__badge">{value}</div>);
+const Badge = memo(({ value }: Props) => (
+  <div className="webchat__link-definitions__badge" title={value}>
+    {value}
+  </div>
+));
 
 Badge.displayName = 'Badge';
 

@@ -91,19 +91,19 @@ export default function createLinkDefinitionsStyleSet() {
       },
 
       '.webchat__link-definitions__badge': {
-        alignItems: 'center',
         alignSelf: 'flex-start',
         borderRadius: '4px',
         borderStyle: 'solid',
         borderWidth: 1,
-        display: 'flex',
         flexShrink: 0,
         fontSize: '75%',
-        justifyContent: 'center',
         margin: 4,
+        maxWidth: '4em',
         minWidth: '1em',
         overflow: 'hidden',
         padding: 2,
+        textAlign: 'center',
+        textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
 
         [LIGHT_THEME_SELECTOR]: {

@@ -40,10 +40,14 @@ export default function createMarkdownStyle() {
         background: 'transparent',
         border: 0,
         cursor: 'pointer',
+        display: 'inline-block',
         fontFamily: 'unset',
         fontSize: 'unset',
+        overflow: 'hidden',
         padding: 0,
         textDecoration: 'underline',
+        textOverflow: 'ellipsis',
+        verticalAlign: 'bottom',
         whiteSpace: 'nowrap',
 
         [FORCED_COLORS_SELECTOR]: {
@@ -56,6 +60,11 @@ export default function createMarkdownStyle() {
       },
 
       '& .webchat__render-markdown__pure-identifier': {
+        display: 'inline-block',
+        maxWidth: '100%',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        verticalAlign: 'bottom',
         whiteSpace: 'nowrap'
       },
 

@@ -277,9 +277,9 @@
   display: inline-flex;
   font-size: var(--webchat-fontSizeBase100);
   font-weight: var(--webchat-fontWeightSemibold);
-  height: 14px;
+  min-height: 12.4px;
   justify-content: center;
-  line-height: var(--webchat-lineHeightBase100);
+  line-height: 12.4px;
   margin-left: var(--webchat-spacingHorizontalXXS);
   margin-right: var(--webchat-spacingHorizontalXXS);
   min-width: 14px;