Skip to content

Commit 3efb9bc

Browse files
Merge branch 'main' into janewby/WebChat
2 parents 9b8d3b3 + b63791f commit 3efb9bc

11 files changed

Lines changed: 130 additions & 6 deletions

File tree

CHANGELOG.md

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

240241
# Removed
241242

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)