Skip to content

Commit 438c779

Browse files
compulimcompulim
authored
[Fluent] Fixed typing indicator padding not being squashed (#5453)
* Prevent typing indicator padding from squashed * Update PR number * Update tests * Add "browser" search params to unpkg.com * Use flex: none
1 parent abcd9e7 commit 438c779

File tree

10 files changed

+81
-23
lines changed

10 files changed

+81
-23
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,8 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
207207
- Fixed copy button screen reader announcement
208208
- Added proper ARIA attributes to link definitions component
209209
- Improved focus management for scroll to end button
210-
- Fixed [#5439](https://github.com/microsoft/BotFramework-WebChat/issues/5439). Fixed batched livestream activities are not recognized in the same session, in PR [#XXX](https://github.com/microsoft/BotFramework-WebChat/pull/XXX)
210+
- Fixed [#5439](https://github.com/microsoft/BotFramework-WebChat/issues/5439). Fixed batched livestream activities are not recognized in the same session, in PR [#5440](https://github.com/microsoft/BotFramework-WebChat/pull/5440), by [@compulim](https://github.com/compulim)
211+
- Fixed [#5452](https://github.com/microsoft/BotFramework-WebChat/issues/5452). With Fluent/Copilot theme, the typing indicator padding should not be squashed, in PR [#5453](https://github.com/microsoft/BotFramework-WebChat/pull/5453), by [@compulim](https://github.com/compulim)
211212

212213
# Removed
213214

‎__tests__/html2/basic/sendBox.trimOutgoing.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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/[email protected]/umd/react.production.min.js"></script>
6+
<script crossorigin="anonymous" src="https://unpkg.com/[email protected]/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+
</head>
11+
<body>
12+
<main id="webchat"></main>
13+
<script type="module">
14+
run(async function () {
15+
const {
16+
React: { createElement },
17+
ReactDOM: { render },
18+
testHelpers: {
19+
createStore,
20+
token: { fetchDirectLineToken }
21+
},
22+
WebChat: { createDirectLine, ReactWebChat }
23+
} = window; // Imports in UMD fashion.
24+
25+
const directLine = createDirectLine({ token: await fetchDirectLineToken() });
26+
const store = createStore();
27+
28+
render(
29+
createElement(ReactWebChat, {
30+
directLine,
31+
store
32+
}),
33+
document.getElementById('webchat')
34+
);
35+
36+
await pageConditions.uiConnected();
37+
38+
await pageObjects.sendMessageViaSendBox(
39+
'\u00A0\u00A0There should be no space before and after this message.\u00A0\u00A0',
40+
{ waitForSend: false }
41+
);
42+
43+
await pageConditions.actionDispatched(
44+
'DIRECT_LINE/INCOMING_ACTIVITY',
45+
({ payload: { activity } = {}, type }) =>
46+
type === 'DIRECT_LINE/INCOMING_ACTIVITY' &&
47+
activity.from.role === 'user' &&
48+
activity.text === 'There should be no space before and after this message.'
49+
);
50+
51+
await pageConditions.minNumActivitiesShown(2);
52+
});
53+
</script>
54+
</body>
55+
</html>

‎__tests__/html2/fluentTheme/typingIndicator.html‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,28 @@
4949
await directLine.emulateIncomingActivity({
5050
from: { id: 'u-00001', name: 'Bot', role: 'bot' },
5151
id: 'a-00001',
52-
text: 'Hello, World!',
52+
text: 'In minim amet culpa adipisicing aliqua culpa minim culpa officia culpa laboris non commodo. Velit nisi ut sit amet in sunt eu voluptate Lorem eu do sint proident aute. Nulla nisi commodo consectetur anim id non ut est anim veniam occaecat excepteur dolor nulla. Adipisicing et dolor ex cillum sit ipsum amet labore officia dolor non ad aliquip officia. Irure quis occaecat cupidatat ut commodo culpa eiusmod ipsum pariatur. Excepteur aliqua consectetur anim laborum enim ipsum tempor occaecat voluptate.',
53+
type: 'message'
54+
});
55+
56+
await directLine.emulateIncomingActivity({
57+
from: { id: 'u-00001', name: 'Bot', role: 'bot' },
58+
id: 'a-00002',
59+
text: 'Excepteur enim tempor ex do magna elit consectetur elit incididunt. Amet reprehenderit cupidatat amet velit nostrud esse est dolor proident ex ut deserunt. Velit veniam minim esse laboris irure esse duis dolor sint culpa. Sit ullamco eiusmod consectetur enim elit cillum sit elit irure ut commodo ad. Cillum ad mollit est labore culpa proident sunt tempor culpa pariatur elit laborum.',
60+
type: 'message'
61+
});
62+
63+
await directLine.emulateIncomingActivity({
64+
from: { id: 'u-00001', name: 'Bot', role: 'bot' },
65+
id: 'a-00003',
66+
text: 'Ad minim fugiat sint et laboris consectetur eu ut in nisi fugiat cillum est labore. Et proident tempor veniam ex est incididunt Lorem. Culpa sit id eu voluptate.',
67+
type: 'message'
68+
});
69+
70+
await directLine.emulateIncomingActivity({
71+
from: { id: 'u-00001', name: 'Bot', role: 'bot' },
72+
id: 'a-00004',
73+
text: 'Est voluptate eiusmod ad Lorem irure amet sint ea aliqua labore eu do nostrud exercitation. Non adipisicing non amet laborum. Anim fugiat minim cupidatat consequat ipsum minim ex mollit commodo ut aliqua quis consequat dolore. Cupidatat tempor laborum consectetur eiusmod cillum do consequat ad pariatur amet magna aliquip occaecat officia.',
5374
type: 'message'
5475
});
5576

‎__tests__/html2/fluentTheme/typingIndicator.html.snap-1.png‎

51.1 KB
Loading

‎__tests__/html2/fluentTheme/typingIndicator.html.snap-2.png‎

53.6 KB
Loading

‎__tests__/html2/fluentTheme/typingIndicator.livestream.html.snap-1.png‎

51.1 KB
Loading

‎__tests__/html2/fluentTheme/typingIndicator.livestream.html.snap-2.png‎

53.6 KB
Loading

‎__tests__/sendBox.js‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -32,23 +32,3 @@ test('should focus send box when message is being sent', async () => {
3232

3333
expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
3434
});
35-
36-
test('should trim outgoing message when being sent', async () => {
37-
const { driver, pageObjects } = await setupWebDriver();
38-
39-
await driver.wait(uiConnected(), timeouts.directLine);
40-
await pageObjects.sendMessageViaSendBox(
41-
'\u00A0\u00A0There should be no space before and after this message.\u00A0\u00A0',
42-
{ waitForSend: false }
43-
);
44-
await driver.wait(
45-
actionDispatched(
46-
({ payload: { activity } = {}, type }) =>
47-
type === 'DIRECT_LINE/INCOMING_ACTIVITY' &&
48-
activity.from.role === 'user' &&
49-
activity.text === 'There should be no space before and after this message.'
50-
),
51-
timeouts.directLine
52-
);
53-
await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
54-
});

‎__tests__/setup/web/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
crossorigin="anonymous"
7474
src="https://unpkg.com/[email protected]/dist/event-target-shim.umd.js"
7575
></script>
76-
<script crossorigin="anonymous" src="https://unpkg.com/simple-update-in"></script>
76+
<script crossorigin="anonymous" src="https://unpkg.com/simple-update-in?browser"></script>
7777
<script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
7878
<script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
7979
<script crossorigin="anonymous" src="/createProduceConsumeBroker.js"></script>

‎packages/fluent-theme/src/components/typingIndicator/SlidingDotsTypingIndicator.module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
:global(.webchat-fluent) .sliding-dots-typing-indicator {
22
align-self: start;
33
display: flex;
4+
flex: none;
45
height: 16px;
56
margin: auto var(--webchat-spacingHorizontalMNudge);
67
}

0 commit comments

Comments
 (0)