Skip to content

Commit b63791f

Browse files
authored
fix: long citation breaks out of activity layout (#5507)
* fix: citation breaks out of activity layout * Changelog
1 parent c59e6ed commit b63791f

File tree

11 files changed

+130
-6
lines changed

11 files changed

+130
-6
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
235235
- Downstreamers who use our CommonJS and ES Modules output with esbuild will need to disable AMD themselves to prevent conflict with RequireJS
236236
- 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)
237237
- Migrated to radio button for like/dislike where form submission is required
238+
- Fixed long citation identifiers break activity layout, in PR [#5507](https://github.com/microsoft/BotFramework-WebChat/pull/5507), by [@OEvgeny](https://github.com/OEvgeny)
238239

239240
# Removed
240241

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Citation long ref (copilot)</title>
5+
<script>
6+
location = './citation.longRef?theme=fluent&variant=copilot';
7+
</script>
8+
</head>
9+
<body></body>
10+
</html>
34.5 KB
Loading
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Citation long ref (fluent)</title>
5+
<script>
6+
location = './citation.longRef?theme=fluent';
7+
</script>
8+
</head>
9+
<body></body>
10+
</html>
37.2 KB
Loading
Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
<script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
6+
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
7+
<script crossorigin="anonymous" src="/test-harness.js"></script>
8+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
9+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
10+
<script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
11+
</head>
12+
<body>
13+
<main id="webchat"></main>
14+
<script>
15+
run(async function () {
16+
const { directLine, store } = testHelpers.createDirectLineEmulator();
17+
18+
renderWebChat(
19+
{
20+
directLine,
21+
store
22+
},
23+
document.getElementById('webchat')
24+
);
25+
26+
await pageConditions.uiConnected();
27+
28+
const citations = [
29+
'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',
30+
(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' })),
31+
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')
32+
]
33+
34+
await directLine.emulateIncomingActivity({
35+
entities: [
36+
{
37+
'@context': 'https://schema.org',
38+
'@id': 'cite:1',
39+
'@type': 'Claim',
40+
name: 'Should Be Visible',
41+
type: 'https://schema.org/Claim',
42+
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/).'
43+
}
44+
],
45+
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)}].
46+
47+
[${citations.at(0)}]: https://support.microsoft.com/en-us/windows/use-a-proxy-server-in-windows-03096c53-0554-4ffe-b6ab-8b1deee8dae1
48+
[${citations.at(1)}]: https://learn.microsoft.com/en-us/troubleshoot/windows-server/networking/configure-proxy-server-settings "Configure proxy server settings - Windows Server"
49+
[${citations.at(2)}]: cite:1 "should be hidden"
50+
`,
51+
type: 'message'
52+
});
53+
54+
await host.snapshot('local');
55+
56+
const markdownElement = pageElements.activities()[0].querySelector('.webchat__text-content__markdown');
57+
const markdownLinks = markdownElement.querySelectorAll('a');
58+
const markdownButtons = markdownElement.querySelectorAll('button');
59+
60+
expect(markdownLinks).toHaveLength(2);
61+
expect(markdownButtons).toHaveLength(1);
62+
63+
expect(markdownLinks[0].getAttribute('href')).toBe(
64+
'https://support.microsoft.com/en-us/windows/use-a-proxy-server-in-windows-03096c53-0554-4ffe-b6ab-8b1deee8dae1'
65+
);
66+
67+
expect(markdownLinks[1].getAttribute('href')).toBe(
68+
'https://learn.microsoft.com/en-us/troubleshoot/windows-server/networking/configure-proxy-server-settings'
69+
);
70+
71+
expect(markdownButtons[0].getAttribute('type')).toBe('button');
72+
73+
const linkDefinitionItems = pageElements.linkDefinitions()[0].querySelectorAll('[role="listitem"] > *');
74+
75+
expect(linkDefinitionItems[0].getAttribute('href')).toBe(
76+
'https://support.microsoft.com/en-us/windows/use-a-proxy-server-in-windows-03096c53-0554-4ffe-b6ab-8b1deee8dae1'
77+
);
78+
79+
expect(linkDefinitionItems[1].getAttribute('href')).toBe(
80+
'https://learn.microsoft.com/en-us/troubleshoot/windows-server/networking/configure-proxy-server-settings'
81+
);
82+
83+
expect(linkDefinitionItems[2].tagName).toBe('BUTTON');
84+
85+
expect(linkDefinitionItems[2].innerHTML).toContain('Should Be Visible');
86+
expect(linkDefinitionItems[2].innerHTML).not.toContain('should be hidden');
87+
});
88+
</script>
89+
</body>
90+
</html>
43.9 KB
Loading

packages/component/src/LinkDefinition/private/Badge.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ import React, { memo } from 'react';
22

33
type Props = Readonly<{ value: string }>;
44

5-
const Badge = memo(({ value }: Props) => <div className="webchat__link-definitions__badge">{value}</div>);
5+
const Badge = memo(({ value }: Props) => (
6+
<div className="webchat__link-definitions__badge" title={value}>
7+
{value}
8+
</div>
9+
));
610

711
Badge.displayName = 'Badge';
812

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -91,19 +91,19 @@ export default function createLinkDefinitionsStyleSet() {
9191
},
9292

9393
'.webchat__link-definitions__badge': {
94-
alignItems: 'center',
9594
alignSelf: 'flex-start',
9695
borderRadius: '4px',
9796
borderStyle: 'solid',
9897
borderWidth: 1,
99-
display: 'flex',
10098
flexShrink: 0,
10199
fontSize: '75%',
102-
justifyContent: 'center',
103100
margin: 4,
101+
maxWidth: '4em',
104102
minWidth: '1em',
105103
overflow: 'hidden',
106104
padding: 2,
105+
textAlign: 'center',
106+
textOverflow: 'ellipsis',
107107
whiteSpace: 'nowrap',
108108

109109
[LIGHT_THEME_SELECTOR]: {

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,14 @@ export default function createMarkdownStyle() {
4040
background: 'transparent',
4141
border: 0,
4242
cursor: 'pointer',
43+
display: 'inline-block',
4344
fontFamily: 'unset',
4445
fontSize: 'unset',
46+
overflow: 'hidden',
4547
padding: 0,
4648
textDecoration: 'underline',
49+
textOverflow: 'ellipsis',
50+
verticalAlign: 'bottom',
4751
whiteSpace: 'nowrap',
4852

4953
[FORCED_COLORS_SELECTOR]: {
@@ -56,6 +60,11 @@ export default function createMarkdownStyle() {
5660
},
5761

5862
'& .webchat__render-markdown__pure-identifier': {
63+
display: 'inline-block',
64+
maxWidth: '100%',
65+
overflow: 'hidden',
66+
textOverflow: 'ellipsis',
67+
verticalAlign: 'bottom',
5968
whiteSpace: 'nowrap'
6069
},
6170

0 commit comments

Comments
 (0)