botframework-webchat-adapter-azure-communication-chat/index.html at main · peterinnesmsft/botframework-webchat-adapter-azure-communication-chat · 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Chat Adapter Prototype</title>
    <!-- Use latest stable -->
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <!-- <script src="http://localhost:5000/packages/bundle/dist/webchat.js"></script> -->
    <script src="http://localhost:8080/chat-adapter-dev.js"></script>
    <style type="text/css">
      body,
      html,
      #parent {
        height: 100%;
        width: 100%;
        display: flex;
      }

      body {
        background-color: #f7f7f7;
        margin: 0;
      }

      #devPannel {
        display: none;
      }

      #root {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        margin: auto;
        min-width: 360px;
        max-width: 720px;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="parent">
      <div id="root"></div>
      <div id="devPannel"></div>
    </div>
    <script>
      (async function () {
        'use strict';
        const {
          createACSAdapter,
          fileManagerInitialize, /* this function is mock storage provider authentication for dev mode*/
          threadInitialize /* this function is a mock server logic and only exists in dev mode*/,
          OneDriveFileManager,
          renderDebugPanel
        } = window.ChatAdapter;

        // All the logic in this function should be implemented in server side
        // Check src\development\threadInitialize.ts for reference
        const { token, userId, threadId, environmentUrl, displayName, chatClient } = await threadInitialize();

        const egressMiddlewareTest = ({ getState }) => (next) => (activity) => {
          return next(activity);
        }

        const ingressMiddlewareTest = ({ getState }) => (next) => (activity) => {
          return next(activity);
        }

        const featuresOption = {
          enableAdaptiveCards: true,  // Whether to enable adaptive card payload in adapter, will format adaptive cards into attachments for Webchat
          enableThreadMemberUpdateNotification: true,  // Whether to enable chat thread member join/leave notification
          enableLeaveThreadOnWindowClosed: true,  // Whether to remove user on browser close event
          enableMessageErrorHandler: true, // Whether to enable error handler to handle failed messages.
          historyPageSizeLimit: null,  // History messages's size limit per page. Off by default if no size limit provided
          serverPageSizeLimit: 60,
          egressMiddleware: [egressMiddlewareTest],
          ingressMiddleware: [ingressMiddlewareTest],
          messagePollingHandle:
          {
            stopPolling: () => false,
            getIsPollingEnabled: () => true
          }
        };

        // OneDrive
        const oneDriveToken = fileManagerInitialize();
        const downloadUrl = (fileId) => {
          return `https://graph.microsoft.com/v1.0/me/drive/items/${fileId}`;
        }
        const uploadUrl = (filename) => {
          return `https://graph.microsoft.com/v1.0/me/drive/root:/Uploads/${filename}:/content`;
        }

        // Initialize FileManager
        const fileManager = new OneDriveFileManager(oneDriveToken, downloadUrl, uploadUrl);

        const pollingInterval = 30000;

        // Realtime notification is requested from inside Adapter. No need to connect again here.
        const directLine = createACSAdapter(token, userId, threadId, environmentUrl, fileManager, pollingInterval,
          {
            notifyErrorEvent: (adapterErrorEvent) => {
              console.log(adapterErrorEvent);
              console.log(adapterErrorEvent.CorrelationVector)
            }
          },
          displayName, chatClient,
          {
            logEvent: (eventLevel, event) => {
              const { CustomProperties, ...rest } = event;
              const otherFields = { ...rest };
              console.log(`eventLevel: ${eventLevel}, event object: ${JSON.stringify(otherFields)}`)
            },
          },
          featuresOption);

        // Sample code to display activity Error( Message send/receive )
        const store = window.WebChat.createStore({}, ({ dispatch }) => (next) => (action) => {
          if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
            if (
              action.payload &&
              action.payload.activity?.channelData &&
              action.payload.activity?.channelData.type == 'Thread'
            ) {
              // this is example to send notification to WebChat UI
              // you can decide your expected UI activity as per channel data type
              dispatch({
                type: 'WEB_CHAT/SET_NOTIFICATION',
                payload: {
                  level: 'info',
                  message: action.payload.activity.text
                }
              });
            } else if (
              action.payload &&
              action.payload.activity?.channelData &&
              action.payload.activity?.channelData.type == 'Error'
            ) {
              dispatch({
                type: 'WEB_CHAT/SET_NOTIFICATION',
                payload: {
                  level: 'error',
                  message: JSON.parse(action.payload.activity.text).message
                }
              });
            } else {
              return next(action);
            }
          } else {
            return next(action);
          }
        });

        window.WebChat.renderWebChat(
          {
            directLine,
            store,
            sendTypingIndicator: true,
            styleOptions: {
              hideUploadButton: false
            },
            userID: userId
          },
          document.getElementById('root')
        );

        window.directLine = directLine;
        window.store = store;
        renderDebugPanel(document.getElementById('devPannel'), store);
      })();
    </script>
  </body>
</html>