Skip to content

Commit aa45507

Browse files
OEvgenycompulim
OEvgeny
and
compulim
authoredAug 30, 2024··
Fluent: liner message activity (#5272)
* Fluent: liner message activity * Changelog * update snapshots * Tweak from Figma and add snapshots * Fix lint * Update other snaps * Sort --------- Co-authored-by: William Wong <[email protected]>
1 parent 4534802 commit aa45507

File tree

28 files changed

+138
-8
lines changed

28 files changed

+138
-8
lines changed
 

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
4444
- Added keyboard shortcut for the "New Messages" button, in PR [#5251](https://github.com/microsoft/BotFramework-WebChat/pull/5251), by [@OEvgeny](https://github.com/OEvgeny)
4545
- Added decorators for loading and completion states to the Fluent theme, in PR [#5269](https://github.com/microsoft/BotFramework-WebChat/pull/5269), by [@OEvgeny](https://github.com/OEvgeny)
4646
- Added placeholder state for starter prompts in the Fluent theme, in PR [#5270](https://github.com/microsoft/BotFramework-WebChat/pull/5270), by [@OEvgeny](https://github.com/OEvgeny)
47+
- Added support for liner message activities in the Fluent theme, in PR [#5272](https://github.com/microsoft/BotFramework-WebChat/pull/5272), by [@OEvgeny](https://github.com/OEvgeny)
4748

4849
### Changed
4950

‎__tests__/html/fluentTheme/side-by-side.wide.dark.html

+28
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@
122122
},
123123
{
124124
timestamp: timestamp(),
125+
from: { role: 'bot' },
125126
"entities": [
126127
{
127128
"@context": "https://schema.org",
@@ -393,6 +394,33 @@
393394
text: `<img alt="" src="data:image/png;base64,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" />\n\n## New Copilot extension\n\nDescription`,
394395
type: 'message'
395396
}
397+
], [
398+
{
399+
timestamp: timestamp(),
400+
"from": { "role": "user" },
401+
"id": "6.0",
402+
"text": "Help me access my team’s sprint board?",
403+
"type": "message"
404+
},
405+
{
406+
timestamp: timestamp(),
407+
from: { name: 'Onboarding Buddy', role: 'bot' },
408+
"id": "7.1",
409+
"text": `To access your team's sprint board, you can follow these steps:
410+
411+
Check if you have the necessary permissions to access the sprint board. You might need to be part of a specific security group or have a particular role assigned to you.
412+
1. If you're unsure about your access rights or need to request access, you can reach out to your team.
413+
2. Once you have access, you can navigate to the board through the Azure DevOps portal. Look for the board under the 'Boards' tab in your project's dashboard.
414+
415+
If your access is still pending, consider emailing your manager to remind them to give you access.`,
416+
"type": "message"
417+
},
418+
{
419+
timestamp: timestamp(),
420+
from: { role: 'channel'},
421+
text: `Extension refreshed`,
422+
type: 'message'
423+
}
396424
]];
397425

398426
const leftStore = testHelpers.createStore();

‎__tests__/html/fluentTheme/side-by-side.wide.dark.js

+8-3
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@
22

33
describe('Fluent theme applied', () => {
44
describe('dark theme applied', () => {
5-
test('side by side left - transcript, right - pre chat message', () => runHTML('fluentTheme/side-by-side.wide.dark?focus=1'));
6-
test('side by side left - transcript, right - transcript', () => runHTML('fluentTheme/side-by-side.wide.dark?transcript=0&transcript=2&focus=0&focus=1'));
7-
test('side by side left - transcript, right - pre placeholder', () => runHTML('fluentTheme/side-by-side.wide.dark?transcript=0&transcript=3'));
5+
test('side by side left - transcript, right - pre chat message', () =>
6+
runHTML('fluentTheme/side-by-side.wide.dark?focus=1'));
7+
test('side by side left - transcript, right - transcript', () =>
8+
runHTML('fluentTheme/side-by-side.wide.dark?transcript=0&transcript=2&focus=0&focus=1'));
9+
test('side by side left - transcript, right - pre placeholder', () =>
10+
runHTML('fluentTheme/side-by-side.wide.dark?transcript=0&transcript=3'));
11+
test('side by side left - transcript, right - pre liner', () =>
12+
runHTML('fluentTheme/side-by-side.wide.dark?transcript=0&transcript=4'));
813
});
914
});

‎__tests__/html/fluentTheme/side-by-side.wide.html

+28
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@
129129
},
130130
{
131131
timestamp: timestamp(),
132+
from: { role: 'bot' },
132133
"entities": [
133134
{
134135
"@context": "https://schema.org",
@@ -400,6 +401,33 @@
400401
text: `<img alt="" src="data:image/png;base64,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" />\n\n## New Copilot extension\n\nDescription`,
401402
type: 'message'
402403
}
404+
], [
405+
{
406+
timestamp: timestamp(),
407+
"from": { "role": "user" },
408+
"id": "6.0",
409+
"text": "Help me access my team’s sprint board?",
410+
"type": "message"
411+
},
412+
{
413+
timestamp: timestamp(),
414+
from: { name: 'Onboarding Buddy', role: 'bot' },
415+
"id": "7.1",
416+
"text": `To access your team's sprint board, you can follow these steps:
417+
418+
Check if you have the necessary permissions to access the sprint board. You might need to be part of a specific security group or have a particular role assigned to you.
419+
1. If you're unsure about your access rights or need to request access, you can reach out to your team.
420+
2. Once you have access, you can navigate to the board through the Azure DevOps portal. Look for the board under the 'Boards' tab in your project's dashboard.
421+
422+
If your access is still pending, consider emailing your manager to remind them to give you access.`,
423+
"type": "message"
424+
},
425+
{
426+
timestamp: timestamp(),
427+
from: { role: 'channel'},
428+
text: `Extension refreshed`,
429+
type: 'message'
430+
}
403431
]];
404432

405433
const leftStore = testHelpers.createStore();

‎__tests__/html/fluentTheme/side-by-side.wide.js

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
22

33
describe('Fluent theme applied', () => {
4-
test('side by side left - transcript, right - pre chat message', () => runHTML('fluentTheme/side-by-side.wide?focus=1'));
5-
test('side by side left - transcript, right - transcript', () => runHTML('fluentTheme/side-by-side.wide?transcript=0&transcript=2&focus=0&focus=1'));
6-
test('side by side left - transcript, right - pre placeholder', () => runHTML('fluentTheme/side-by-side.wide?transcript=0&transcript=3'));
4+
test('side by side left - transcript, right - pre chat message', () =>
5+
runHTML('fluentTheme/side-by-side.wide?focus=1'));
6+
test('side by side left - transcript, right - transcript', () =>
7+
runHTML('fluentTheme/side-by-side.wide?transcript=0&transcript=2&focus=0&focus=1'));
8+
test('side by side left - transcript, right - pre placeholder', () =>
9+
runHTML('fluentTheme/side-by-side.wide?transcript=0&transcript=3'));
10+
test('side by side left - transcript, right - pre liner', () =>
11+
runHTML('fluentTheme/side-by-side.wide?transcript=0&transcript=4'));
712
});

‎packages/fluent-theme/src/components/activity/ActivityDecorator.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ function ActivityDecorator({ activity, children }: Readonly<{ activity: WebChatA
1111
const variants = useVariants();
1212
const variantClassName = useVariantClassName(styles);
1313

14-
const shouldRenderHeader = variants.includes('copilot') && activity?.from?.role !== 'user' && !!children;
14+
const shouldRenderHeader = variants.includes('copilot') && activity?.from?.role === 'bot' && !!children;
1515

1616
return (
1717
<div className={cx(classNames['activity-decorator'], variantClassName)}>

‎packages/fluent-theme/src/components/linerActivity/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default as isLinerMessageActivity } from './private/isLinerMessageActivity';
2+
export { default as LinerMessageActivity } from './private/LinerActivity';

‎packages/fluent-theme/src/components/linerActivity/private/LinerActivity.tsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { type WebChatActivity } from 'botframework-webchat-core';
2+
import React, { memo } from 'react';
3+
import { useStyles } from '../../../styles/index.js';
4+
import styles from './LinerMessageActivity.module.css';
5+
6+
type Props = Readonly<{ activity: WebChatActivity & { type: 'message' } }>;
7+
8+
const LinerMessageActivity = ({ activity }: Props) => {
9+
const classNames = useStyles(styles);
10+
11+
return (
12+
<div className={classNames['liner-message-activity']} role="separator">
13+
{activity.text}
14+
</div>
15+
);
16+
};
17+
18+
LinerMessageActivity.displayName = 'LinerMessageActivity';
19+
20+
export default memo(LinerMessageActivity);

‎packages/fluent-theme/src/components/linerActivity/private/LinerMessageActivity.module.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
2+
:global(.webchat-fluent) .liner-message-activity {
3+
align-items: center;
4+
box-sizing: border-box;
5+
color: var(--webchat-colorNeutralForeground3);
6+
display: flex;
7+
flex-direction: row;
8+
font-family: var(--webchat__font--primary);
9+
font-size: var(--webchat-fontSizeBase200);
10+
font-weight: var(--webchat-fontWeightRegular);
11+
gap: var(--webchat-spacingHorizontalM);
12+
line-height: var(--webchat-lineHeightBase200);
13+
padding: var(--webchat-spacingVerticalSNudge) var(--webchat-spacingHorizontalM);
14+
text-align: center;
15+
width: 100%;
16+
17+
&::before, &::after {
18+
border-top: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke2);
19+
content: "";
20+
display: flex;
21+
flex: auto;
22+
min-width: 8px;
23+
}
24+
}

‎packages/fluent-theme/src/components/linerActivity/private/isLinerMessageActivity.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { type WebChatActivity } from 'botframework-webchat-core';
2+
3+
export default function isLinerMessageActivity(
4+
activity: undefined | WebChatActivity
5+
): activity is WebChatActivity & { type: 'message'; from: { role: 'channel' } } {
6+
return !!(activity && activity.from.role === 'channel' && activity.type === 'message' && 'text' in activity);
7+
}

0 commit comments

Comments
 (0)
Please sign in to comment.