BotFramework-WebChat/__tests__/html2/avatar/emptyInitials.html at d4df29c91f892ee9c949ea7ed03426ec0be394f1 · microsoft/BotFramework-WebChat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!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/standalone@7.8.7/babel.min.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/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>
    <style type="text/css">
      .custom-avatar {
        align-items: center;
        justify-content: center;
        background-color: #e00;
        border-radius: 4px;
        color: White;
        display: flex;
        flex-direction: column;
        height: 40px;
        width: 40px;
      }
    </style>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="text/babel" data-presets="env,stage-3,react">
      const {
        React: { useMemo }
      } = window;

      run(async function () {
        const avatarMiddleware = () => next => (...args) => {
          const [{ activity }] = args;

          if (activity.id === '3.0') {
            return () => <div className="custom-avatar">Bot</div>;
          }

          return next(...args);
        };

        const directLine = await testHelpers.createDirectLineWithTranscript([
          {
            from: { role: 'bot' },
            id: '1.0',
            text: 'Laborum irure officia eiusmod dolore culpa.',
            timestamp: -300001,
            type: 'message'
          },
          {
            channelData: { state: 'sent' },
            from: { role: 'user' },
            id: '2.0',
            localTimestamp: -300001,
            text: 'Incididunt amet occaecat enim ullamco voluptate proident.',
            timestamp: -300001,
            type: 'message'
          },
          {
            from: { role: 'bot' },
            id: '3.0',
            text: 'We can use custom avatar if gutter is shown.',
            timestamp: 0,
            type: 'message'
          }
        ]);

        WebChat.renderWebChat(
          {
            avatarMiddleware,
            directLine,
            store: testHelpers.createStore(),
            styleOptions: {
              botAvatarInitials: '',
              bubbleBackground: '#0063B1',
              bubbleBorderColor: '#0063B1',
              bubbleBorderRadius: 4,
              bubbleFromUserBackground: '#0063B1',
              bubbleFromUserBorderColor: '#0063B1',
              bubbleFromUserBorderRadius: 4,
              bubbleFromUserNubOffset: 0,
              bubbleFromUserNubSize: 10,
              bubbleFromUserTextColor: 'White',
              bubbleNubOffset: 0,
              bubbleNubSize: 10,
              bubbleTextColor: 'White',
              groupTimestamp: false,
              userAvatarInitials: ''
            }
          },
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();

        await host.snapshot('local');
      });
    </script>
  </body>
</html>