1+ <!doctype html>
2+ < html lang ="en-US ">
3+
4+ < head >
5+ < title > Avatar layout: grouped</ title >
6+ < link href ="/assets/index.css " rel ="stylesheet " type ="text/css " />
7+ < script type ="importmap ">
8+ {
9+ "imports" : {
10+ "react" : "https://esm.sh/react@18.3.1" ,
11+ "react-dom" : "https://esm.sh/react-dom@18.3.1" ,
12+ "react-dom/" : "https://esm.sh/react-dom@18.3.1/" ,
13+ "@testduet/wait-for" : "https://unpkg.com/@testduet/wait-for@main/dist/wait-for.mjs"
14+ }
15+ }
16+ </ script >
17+ < script crossorigin ="anonymous " src ="/test-harness.js "> </ script >
18+ < script crossorigin ="anonymous " src ="/test-page-object.js "> </ script >
19+ < script type ="module ">
20+ import React from 'react' ;
21+ window . React = React ;
22+ </ script >
23+ < script defer crossorigin ="anonymous " src ="/__dist__/webchat-es5.js "> </ script >
24+ </ head >
25+
26+ < body >
27+ < main id ="webchat "> </ main >
28+ < script type ="module ">
29+ import React from 'react' ;
30+ import { createRoot } from 'react-dom/client' ;
31+
32+ run ( async function ( ) {
33+ const {
34+ WebChat : { ReactWebChat }
35+ } = window ;
36+
37+ const { directLine, store } = testHelpers . createDirectLineEmulator ( ) ;
38+
39+ const root = createRoot ( document . getElementById ( 'webchat' ) ) ;
40+ let webChatProps = { directLine, store } ;
41+
42+ const render = ( ) => {
43+ root . render ( React . createElement ( ReactWebChat , webChatProps ) ) ;
44+ } ;
45+
46+ const aiMessageEntity = {
47+ '@context' : 'https://schema.org' ,
48+ '@id' : '' ,
49+ '@type' : 'Message' ,
50+ type : 'https://schema.org/Message' ,
51+ author : {
52+ '@context' : 'https://schema.org' ,
53+ '@type' : 'Person' ,
54+ name : 'Research' ,
55+ }
56+ } ;
57+
58+ render ( ) ;
59+
60+ await pageConditions . uiConnected ( ) ;
61+
62+ const botGroup1 = { isPartOf : { '@id' : '_:bot-group-1' , '@type' : 'HowTo' } } ;
63+ const botGroup2 = { isPartOf : { '@id' : '_:bot-group-2' , '@type' : 'HowTo' } } ;
64+
65+ const botIcon = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="%235563B1"/></svg>' ;
66+
67+ // Test Case 1: No bot avatar for grouped messages
68+ directLine . emulateIncomingActivity ( { from : { role : 'bot' } , text : 'Message 1.1' , entities : [ { ...aiMessageEntity , ...botGroup1 } ] } ) ;
69+ directLine . emulateIncomingActivity ( { from : { role : 'bot' } , text : 'Message 1.2' , entities : [ { ...aiMessageEntity , ...botGroup1 } ] } ) ;
70+ directLine . emulateIncomingActivity ( { from : { role : 'bot' } , text : 'Message 2.1' , entities : [ { ...aiMessageEntity , ...botGroup2 } ] } ) ;
71+ directLine . emulateIncomingActivity ( { from : { role : 'bot' } , text : 'Message 2.2' , entities : [ { ...aiMessageEntity , ...botGroup2 } ] } ) ;
72+ directLine . emulateIncomingActivity ( { from : { role : 'bot' } , text : 'Out of group' } ) ;
73+ await pageConditions . numActivitiesShown ( 5 ) ;
74+ await host . snapshot ( 'local' ) ;
75+
76+ // Test Case 2: Bot avatar with initials
77+ webChatProps = { ...webChatProps , styleOptions : { botAvatarInitials : 'B' } } ;
78+ render ( ) ;
79+ await pageConditions . numActivitiesShown ( 5 ) ;
80+ await host . snapshot ( 'local' ) ;
81+
82+ // Test Case 3: Bot avatar with custom image
83+ webChatProps = { ...webChatProps , styleOptions : { botAvatarImage : botIcon , botAvatarInitials : 'B' } } ;
84+ render ( ) ;
85+ await pageConditions . numActivitiesShown ( 5 ) ;
86+ await host . snapshot ( 'local' ) ;
87+
88+ // Test Case 4: No user avatar
89+ directLine . emulateIncomingActivity ( { from : { role : 'user' } , text : 'User message 1.1' } ) ;
90+ await pageConditions . numActivitiesShown ( 6 ) ;
91+ await host . snapshot ( 'local' ) ;
92+
93+ // Test Case 5: User avatar with initials
94+ webChatProps = { ...webChatProps , styleOptions : { ...webChatProps . styleOptions , userAvatarInitials : 'U' } } ;
95+ render ( ) ;
96+ await pageConditions . numActivitiesShown ( 6 ) ;
97+ await host . snapshot ( 'local' ) ;
98+ } ) ;
99+ </ script >
100+ </ body >
101+
102+ </ html >
0 commit comments