Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: avatar display in various scenarios #5346

Merged
merged 5 commits into from
Nov 8, 2024
Merged

Fix: avatar display in various scenarios #5346

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2117213
Fix: avatar display in various scenarios
OEvgeny Oct 31, 2024
ed70d13
Update tests
OEvgeny Nov 1, 2024
decfd47
Add tests
OEvgeny Nov 7, 2024
c92ba8b
Changelog
OEvgeny Nov 7, 2024
14bc69b
Center vertically and use responsive image for avatar
OEvgeny Nov 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
- Moved to `micromark` for rendering Markdown, instead of `markdown-it`, in PR [#5330](https://github.com/microsoft/BotFramework-WebChat/pull/5330), by [@compulim](https://github.com/compulim)
- Improved view code dialog UI in Fluent theme with better styling and accessibility, in PR [#5337](https://github.com/microsoft/BotFramework-WebChat/pull/5337), by [@OEvgeny](https://github.com/OEvgeny)
- Switched math block syntax from `$$` to Tex-style `\[ \]` and `\( \)` delimiters with improved rendering and error handling, in PR [#5353](https://github.com/microsoft/BotFramework-WebChat/pull/5353), by [@OEvgeny](https://github.com/OEvgeny)
- Improved avatar display and grouping behavior by fixing rendering issues and activity sender identification, in PR [#5346](https://github.com/microsoft/BotFramework-WebChat/pull/5346), by [@OEvgeny](https://github.com/OEvgeny)

### Fixed

Expand Down
Binary file modified ...ave-focus-js-transcript-navigation-should-save-last-focused-activity-5-snap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion __tests__/html/autoScroll.withPostBack.activity.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,6 @@
}
],
from: {
id: 'bot',
role: 'bot'
},
id: '1',
Expand Down
1 change: 0 additions & 1 deletion __tests__/html/autoScroll.withPostBack.page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,6 @@
}
],
from: {
id: 'bot',
role: 'bot'
},
id: '1',
Expand Down
2 changes: 2 additions & 0 deletions __tests__/html/typing/activityOrder.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
// SETUP: Bot sent a message.
await directLine.emulateIncomingActivity({
id: 'a-00001',
from: { id: 'u-00001', name: 'Bot', role: 'bot' },
text: 'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.',
type: 'message'
});
Expand Down Expand Up @@ -91,6 +92,7 @@
// WHEN: Bot send another message.
await directLine.emulateIncomingActivity({
id: 'a-00003',
from: { id: 'u-00001', name: 'Bot', role: 'bot' },
text: 'Amet consequat enim incididunt excepteur aliquip magna duis et tempor.',
type: 'message'
});
Expand Down
1 change: 1 addition & 0 deletions __tests__/html/typing/chunk.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
// SETUP: Bot sent a message.
await directLine.emulateIncomingActivity({
id: 'a-00001',
from: { id: 'u-00001', name: 'Bot', role: 'bot' },
text: 'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.',
type: 'message'
});
Expand Down
11 changes: 8 additions & 3 deletions __tests__/html/typing/informative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,14 @@

await pageConditions.uiConnected();

await directLine.emulateIncomingActivity(
'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
);
await directLine.emulateIncomingActivity({
from: {
id: 'u-00001',
name: 'Bot',
role: 'bot'
},
text: 'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
});

const firstTypingActivityId = 't-00001';

Expand Down
1 change: 1 addition & 0 deletions __tests__/html/typing/outOfOrder.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@
// SETUP: Bot sent a message.
await directLine.emulateIncomingActivity({
id: 'a-00001',
from: { id: 'u-00001', name: 'Bot', role: 'bot' },
text: 'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.',
timestamp: 0,
type: 'message'
Expand Down
1 change: 1 addition & 0 deletions __tests__/html/typing/outOfOrder.sequenceNumber.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@
// SETUP: Bot sent a message.
await directLine.emulateIncomingActivity({
id: 'a-00001',
from: { id: 'u-00001', name: 'Bot', role: 'bot' },
text: 'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.',
timestamp: 0,
type: 'message'
Expand Down
12 changes: 6 additions & 6 deletions __tests__/html/typing/simultaneous.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
// WHEN: Bot is typing a message.
await directLine.emulateIncomingActivity({
channelData: { streamSequence: 1, streamType: 'streaming' },
from: { id: 'u-00001', name: 'Bot', role: 'bot' },
from: { name: 'Bot', role: 'bot' },
id: 't-00001',
text: 'A quick',
type: 'typing'
Expand Down Expand Up @@ -89,7 +89,7 @@
// WHEN: Bot is typing another message.
await directLine.emulateIncomingActivity({
channelData: { streamSequence: 1, streamType: 'streaming' },
from: { id: 'u-00001', name: 'Bot', role: 'bot' },
from: { name: 'Bot', role: 'bot' },
id: 't-10001',
text: 'Falsches Üben',
type: 'typing'
Expand Down Expand Up @@ -120,7 +120,7 @@
// WHEN: Bot continue typing the message.
await directLine.emulateIncomingActivity({
channelData: { streamSequence: 2, streamId: 't-00001', streamType: 'streaming' },
from: { id: 'u-00001', name: 'Bot', role: 'bot' },
from: { name: 'Bot', role: 'bot' },
id: 't-00002',
text: 'A quick brown fox',
type: 'typing'
Expand Down Expand Up @@ -149,7 +149,7 @@
// WHEN: Bot continue typing the third message.
await directLine.emulateIncomingActivity({
channelData: { streamSequence: 2, streamId: 't-10001', streamType: 'streaming' },
from: { id: 'u-00001', name: 'Bot', role: 'bot' },
from: { name: 'Bot', role: 'bot' },
id: 't-10002',
text: 'Falsches Üben von Xylophonmusik',
type: 'typing'
Expand Down Expand Up @@ -178,7 +178,7 @@
// WHEN: Bot finished typing the second message.
await directLine.emulateIncomingActivity({
channelData: { streamSequence: 3, streamId: 't-00001', streamType: 'streaming' },
from: { id: 'u-00001', name: 'Bot', role: 'bot' },
from: { name: 'Bot', role: 'bot' },
id: 'a-00002',
text: 'A quick brown fox jumped over the lazy dogs.',
type: 'message'
Expand Down Expand Up @@ -210,7 +210,7 @@
// WHEN: Bot finished typing the third message.
await directLine.emulateIncomingActivity({
channelData: { streamSequence: 3, streamId: 't-10001', streamType: 'streaming' },
from: { id: 'u-00001', name: 'Bot', role: 'bot' },
from: { name: 'Bot', role: 'bot' },
id: 'a-00003',
text: 'Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.',
type: 'message'
Expand Down
211 changes: 211 additions & 0 deletions __tests__/html2/activity/avatar.aspect.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,211 @@
<!doctype html>
<html lang="en-US">
<head>
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
<script crossorigin="anonymous" src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.development.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>
</head>
<template id="avatars">
<svg data-for="1" xmlns="http://www.w3.org/2000/svg" width="75" height="150" viewBox="0 0 75 150">
<!-- Gradient Definitions -->
<defs>
<linearGradient id="tallGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#0ea5e9"/>
<stop offset="100%" style="stop-color:#6366f1"/>
</linearGradient>
<linearGradient id="tallHighlight" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgba(255,255,255,0.2)"/>
<stop offset="100%" style="stop-color:rgba(255,255,255,0)"/>
</linearGradient>
</defs>

<!-- Base Rectangle -->
<rect width="75" height="150" rx="37.5" fill="url(#tallGradient)"/>

<!-- Highlight Overlay -->
<path d="M 0 0 L 75 0 L 75 75 Q 37.5 95 0 75 Z" fill="url(#tallHighlight)" opacity="0.5"/>

<!-- Face - Positioned in Upper Third -->
<!-- Eyes -->
<path d="M 25 55 Q 27 52 29 55" stroke="white" stroke-width="3" stroke-linecap="round" fill="none"/>
<path d="M 46 55 Q 48 52 50 55" stroke="white" stroke-width="3" stroke-linecap="round" fill="none"/>

<!-- Smile -->
<path d="M 25 70 Q 37.5 80 50 70" stroke="white" stroke-width="3" stroke-linecap="round" fill="none"/>

<!-- Decorative Elements -->
<circle cx="37.5" cy="110" r="15" stroke="white" stroke-width="3" fill="none" opacity="0.3"/>
<circle cx="37.5" cy="110" r="7" stroke="white" stroke-width="2" fill="none" opacity="0.2"/>
</svg>
<svg data-for="2" xmlns="http://www.w3.org/2000/svg" width="150" height="75" viewBox="0 0 150 75">
<!-- Gradient Definitions -->
<defs>
<linearGradient id="wideGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#84cc16"/>
<stop offset="100%" style="stop-color:#22c55e"/>
</linearGradient>
<linearGradient id="wideHighlight" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgba(255,255,255,0.25)"/>
<stop offset="100%" style="stop-color:rgba(255,255,255,0)"/>
</linearGradient>
</defs>

<!-- Base Rectangle -->
<rect width="150" height="75" rx="37.5" fill="url(#wideGradient)"/>

<!-- Highlight Overlay -->
<path d="M 0 0 Q 75 -10 150 0 L 150 40 Q 75 30 0 40 Z" fill="url(#wideHighlight)" opacity="0.5"/>

<!-- Face - Centered -->
<!-- Eyes -->
<path d="M 55 35 Q 58 32 61 35" stroke="white" stroke-width="3" stroke-linecap="round" fill="none"/>
<path d="M 89 35 Q 92 32 95 35" stroke="white" stroke-width="3" stroke-linecap="round" fill="none"/>

<!-- Smile -->
<path d="M 55 45 Q 75 55 95 45" stroke="white" stroke-width="3" stroke-linecap="round" fill="none"/>

<!-- Decorative Elements -->
<circle cx="30" cy="37.5" r="8" stroke="white" stroke-width="2" fill="none" opacity="0.2"/>
<circle cx="120" cy="37.5" r="8" stroke="white" stroke-width="2" fill="none" opacity="0.2"/>
</svg>
</template>
<body>
<main id="webchat"></main>
<script type="text/babel" data-presets="env,stage-3,react">
const {
React: { useMemo },
WebChat: {
hooks: { useDirection }
}
} = window;

run(async function () {
await host.windowSize(undefined, 1280, document.getElementById('webchat'));

WebChat.renderWebChat(
{
directLine: await testHelpers.createDirectLineWithTranscript([
{
from: { role: 'bot' },
id: '1.0',
text: 'Cillum ea irure amet reprehenderit minim.',
timestamp: -300001,
type: 'message'
},
{
from: { role: 'bot' },
id: '1.1',
text: 'Minim ut laboris enim nostrud magna irure occaecat laborum occaecat ex.',
timestamp: -300001,
type: 'message'
},
{
channelData: { state: 'sent' },
from: { role: 'user' },
id: '2.0',
text: 'Tempor deserunt ut enim eu elit.',
timestamp: -300001,
type: 'message'
},
{
channelData: { state: 'sent' },
from: { role: 'user' },
id: '2.1',
text: 'Elit occaecat quis velit qui ad.',
timestamp: -300001,
type: 'message'
},
{
from: { role: 'bot' },
id: '3.0',
text: 'Nulla irure laborum officia tempor aute consequat eiusmod nisi velit ipsum magna.',
timestamp: -300001,
type: 'message'
},
{
from: { role: 'bot' },
id: '3.1',
text: 'Minim fugiat aute do ea veniam.',
timestamp: -300001,
type: 'message'
},
{
channelData: { state: 'sent' },
from: { role: 'user' },
id: '4.0',
text: 'This first activity has user avatar',
timestamp: 0,
type: 'message'
},
{
channelData: { state: 'sent' },
from: { role: 'user' },
id: '4.1',
text: 'This shows no avatar as the activities in the same group',
timestamp: 0,
type: 'message'
},
{
attachmentLayout: 'carousel',
attachments: [
{
contentType: 'image/jpeg',
contentUrl:
'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface1.jpg',
name: 'front of Surface Pro'
},
{
contentType: 'image/jpeg',
contentUrl:
'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface2.jpg',
name: 'back of Surface Pro'
}
],
from: { role: 'bot' },
id: '5.0',
text: 'Bot message with attachment',
timestamp: 0,
type: 'message'
},
{
from: { role: 'bot' },
id: '5.1',
text: 'Follow-up message within the group',
timestamp: 0,
type: 'message'
}
]),
store: testHelpers.createStore(),
styleOptions: {
botAvatarImage: `data:image/svg+xml;utf8,${encodeURIComponent(window.avatars.content.querySelector(`[data-for="1"]`).outerHTML)}`,
botAvatarInitials: 'Bot',
bubbleBackground: '#0063B1',
bubbleBorderColor: '#0063B1',
bubbleBorderRadius: 4,
bubbleFromUserBackground: '#0063B1',
bubbleFromUserBorderColor: '#0063B1',
bubbleFromUserBorderRadius: 4,
bubbleFromUserNubOffset: 0,
bubbleFromUserNubSize: 10,
bubbleFromUserTextColor: 'White',
bubbleNubOffset: 0,
bubbleNubSize: 10,
bubbleTextColor: 'White',
userAvatarInitials: 'You',
userAvatarImage: `data:image/svg+xml;utf8,${encodeURIComponent(window.avatars.content.querySelector(`[data-for="2"]`).outerHTML)}`,
}
},
document.getElementById('webchat')
);

await pageConditions.uiConnected();

await host.snapshot('local');
});
</script>
</body>
</html>
Binary file added __tests__/html2/activity/avatar.aspect.html.snap-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading