@microsoft/omnichannel-chat-widget 0.1.0-main.d5a92f2 → 0.1.0-main.d8553fe

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -51,8 +51,8 @@ _defineProperty(Constants, "acsChannel", "ACS_CHANNEL");
51
51
  _defineProperty(Constants, "publicMessageTag", "public");
52
52
  _defineProperty(Constants, "supportedAdaptiveCardContentTypes", ["application/vnd.microsoft.card.adaptive", "application/vnd.microsoft.card.audio", "application/vnd.microsoft.card.hero", "application/vnd.microsoft.card.receipt", "application/vnd.microsoft.card.thumbnail", "application/vnd.microsoft.card.signin", "application/vnd.microsoft.card.oauth"]);
53
53
  _defineProperty(Constants, "maxUploadFileSize", "500000");
54
- _defineProperty(Constants, "imageRegex", /(\.)(jpeg|jpg|jiff|png|gif|bmp)$/i);
55
- _defineProperty(Constants, "audioMediaRegex", /(\.)(aac|aiff|alac|flac|mp2|mp3|pcm|wav|wma)$/i);
54
+ _defineProperty(Constants, "imageRegex", /(\.)(jpeg|jpg|jiff|png|gif|bmp|webp)$/i);
55
+ _defineProperty(Constants, "audioMediaRegex", /(\.)(aac|aiff|alac|amr|flac|mp2|mp3|pcm|wav|wma)$/i);
56
56
  _defineProperty(Constants, "videoMediaRegex", /(\.)(avchd|avi|flv|mpe|mpeg|mpg|mpv|mp4|m4p|m4v|mov|qt|swf|webm|wmv)$/i);
57
57
  _defineProperty(Constants, "chromeSupportedInlineMediaRegex", /(\.)(aac|mp3|wav|mp4)$/i);
58
58
  _defineProperty(Constants, "firefoxSupportedInlineMediaRegex", /(\.)(aac|flac|mp3|wav|mp4|mov)$/i);
@@ -90,7 +90,7 @@ const ConfirmationPaneStateful = props => {
90
90
  Event: _TelemetryConstants.TelemetryEvent.ConfirmationPaneLoaded
91
91
  });
92
92
  }, []);
93
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !(controlProps !== null && controlProps !== void 0 && controlProps.disableDimLayer) && /*#__PURE__*/_react.default.createElement(_DimLayer.DimLayer, {
93
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DimLayer.DimLayer, {
94
94
  brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"
95
95
  }), /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.ConfirmationPane, {
96
96
  componentOverrides: props === null || props === void 0 ? void 0 : props.componentOverrides,
@@ -97,7 +97,7 @@ const EmailTranscriptPaneStateful = props => {
97
97
  Event: _TelemetryConstants.TelemetryEvent.EmailTranscriptLoaded
98
98
  });
99
99
  }, [initialEmail]);
100
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !(controlProps !== null && controlProps !== void 0 && controlProps.disableDimLayer) && /*#__PURE__*/_react.default.createElement(_DimLayer.DimLayer, {
100
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DimLayer.DimLayer, {
101
101
  brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"
102
102
  }), /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.InputValidationPane, {
103
103
  componentOverrides: props.componentOverrides,
@@ -30,6 +30,7 @@ const HeaderStateful = props => {
30
30
  const [outOfOperatingHours, setOutOfOperatingHours] = (0, _react.useState)(((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : (_state$domainStates$l2 = _state$domainStates$l.LiveWSAndLiveChatEngJoin) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.OutOfOperatingHours) === "True");
31
31
  const outOfOfficeStyleProps = Object.assign({}, _defaultOutOfOfficeHeaderStyleProps.defaultOutOfOfficeHeaderStyleProps, outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : outOfOfficeHeaderProps.styleProps);
32
32
  const conversationState = (0, _react.useRef)(state.appStates.conversationState);
33
+ const conversationEndedByAgent = (0, _react.useRef)(state.appStates.conversationEndedByAgent);
33
34
  const controlProps = {
34
35
  id: "oc-lcw-header",
35
36
  dir: state.domainStates.globalDir,
@@ -49,7 +50,7 @@ const HeaderStateful = props => {
49
50
  Event: _TelemetryConstants.TelemetryEvent.HeaderCloseButtonClicked,
50
51
  Description: "Header Close button clicked."
51
52
  });
52
- if (conversationState.current === _ConversationState.ConversationState.Active) {
53
+ if (conversationState.current === _ConversationState.ConversationState.Active || conversationEndedByAgent.current) {
53
54
  dispatch({
54
55
  type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_SHOW_CONFIRMATION,
55
56
  payload: true
@@ -95,6 +96,7 @@ const HeaderStateful = props => {
95
96
  if (state.appStates.conversationState) {
96
97
  conversationState.current = state.appStates.conversationState;
97
98
  }
99
+ conversationEndedByAgent.current = state.appStates.conversationEndedByAgent;
98
100
  }, [state.appStates]);
99
101
  return /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.Header, {
100
102
  componentOverrides: headerProps === null || headerProps === void 0 ? void 0 : headerProps.componentOverrides,
@@ -413,6 +413,7 @@ const dummyDefaultProps = {
413
413
  width: "90px",
414
414
  cursor: "pointer",
415
415
  overflow: "hidden",
416
+ padding: "0px",
416
417
  whiteSpace: "nowrap"
417
418
  },
418
419
  subtitleStyleProps: {
@@ -420,6 +421,7 @@ const dummyDefaultProps = {
420
421
  fontWeight: "200",
421
422
  color: "#666",
422
423
  overflow: "hidden",
424
+ padding: "0px",
423
425
  fontFamily: "'Segoe UI',Arial,sans-serif",
424
426
  display: "block",
425
427
  alignItems: "center",
@@ -475,7 +477,6 @@ const dummyDefaultProps = {
475
477
  cancelButtonText: "Cancel",
476
478
  cancelButtonAriaLabel: "Cancel. Return to Chat",
477
479
  brightnessValueOnDim: "0.2",
478
- disableDimLayer: false,
479
480
  onConfirm: () => {},
480
481
  // Detailed implementation omitted
481
482
  onCancel: () => {} // Detailed implementation omitted
@@ -483,20 +484,23 @@ const dummyDefaultProps = {
483
484
 
484
485
  styleProps: {
485
486
  generalStyleProps: {
487
+ display: "flex",
488
+ minHeight: "160px",
489
+ maxHeight: "300px",
490
+ boxSizing: "border-box",
486
491
  backgroundColor: "#FFFFFF",
487
492
  borderRadius: "2px",
488
493
  color: "black",
489
494
  fontFamily: "Segoe UI, Arial, sans-serif",
490
495
  fontSize: "14px",
491
- height: "160px",
492
496
  padding: "10px 20px",
493
- width: "262px",
494
497
  position: "absolute",
495
498
  justifyContent: "center",
496
499
  alignItems: "center",
497
- display: "flex",
498
500
  flexFlow: "column",
499
- zIndex: "9999"
501
+ zIndex: "9999",
502
+ left: "26px",
503
+ right: "26px"
500
504
  },
501
505
  titleStyleProps: {
502
506
  color: "#323130",
@@ -518,10 +522,14 @@ const dummyDefaultProps = {
518
522
  },
519
523
  buttonGroupStyleProps: {
520
524
  display: "flex",
525
+ width: "auto",
526
+ height: "auto",
527
+ boxSizing: "border-box",
521
528
  flexFlow: "row",
522
529
  justifyContent: "center",
523
530
  alignItems: "center",
524
- gap: "10px"
531
+ gap: "10px",
532
+ marginBottom: "10px"
525
533
  },
526
534
  confirmButtonStyleProps: {
527
535
  backgroundColor: "rgba(9,72,159,1)",
@@ -626,7 +634,6 @@ const dummyDefaultProps = {
626
634
  cancelButtonText: "Cancel",
627
635
  cancelButtonAriaLabel: "Cancel",
628
636
  brightnessValueOnDim: "0.2",
629
- disableDimLayer: false,
630
637
  onSend: undefined,
631
638
  onCancel: undefined,
632
639
  checkInput: undefined
@@ -1190,6 +1197,47 @@ const dummyDefaultProps = {
1190
1197
  },
1191
1198
  isCustomerVoiceSurveyCompact: undefined
1192
1199
  },
1200
+ preChatSurveyPaneProps: {
1201
+ controlProps: {
1202
+ id: "oc-lcw-prechatsurveypane-default",
1203
+ dir: "auto",
1204
+ hidePreChatSurveyPane: false,
1205
+ adaptiveCardHostConfig: "{\"fontFamily\":\"Segoe UI, Helvetica Neue, sans-serif\",\"containerStyles\":{\"default\":{\"foregroundColors\":{\"default\":{\"default\":\"#000000\"}},\"backgroundColor\":\"#FFFFFF\"}},\"actions\":{\"actionsOrientation\":\"Vertical\",\"actionAlignment\":\"stretch\"}}",
1206
+ payload: "{\"$schema\":\"http://adaptivecards.io/schemas/adaptive-card.json\",\"type\":\"AdaptiveCard\",\"version\":\"1.1\",\"body\":[{\"type\":\"TextBlock\",\"weight\":\"bolder\",\"text\":\"Please answer below questions.\"},{\"type\":\"Input.Text\",\"id\":\"1e5e4e7a-8f0b-ec11-b6e6-000d3a305d38\",\"label\":\"name pls?\",\"maxLength\":100,\"isRequired\":true,\"errorMessage\":\"Name is required\"},{\"type\":\"Input.Text\",\"id\":\"7f8f5d6d-995e-ec11-8f8f-000d3a31376e\",\"label\":\"multi\\nmulti\\nmulti\",\"style\":\"text\",\"isMultiline\":true,\"maxLength\":250},{\"type\":\"Input.ChoiceSet\",\"id\":\"e4bdf7cb-995e-ec11-8f8f-000d3a31376e\",\"label\":\"options\",\"isMultiSelect\":false,\"value\":\"1\",\"style\":\"compact\",\"choices\":[{\"title\":\"one\",\"value\":\"1\"},{\"title\":\"two\",\"value\":\"2\"},{\"title\":\"three\",\"value\":\"3\"}]},{\"type\":\"Input.Toggle\",\"id\":\"b26011d2-995e-ec11-8f8f-000d3a31376e\",\"title\":\"consent\",\"valueOn\":\"True\",\"valueOff\":\"False\",\"value\":\"false\"},{\"type\":\"TextBlock\",\"isSubtle\":true,\"text\":\"Fields marked with * are mandatory.\",\"wrap\":true}],\"actions\":[{\"type\":\"Action.Submit\",\"title\":\"Submit\",\"data\":{\"Type\":\"InputSubmit\"}}]}",
1207
+ onSubmit: function () {} // Detailed implementation omitted
1208
+ },
1209
+
1210
+ styleProps: {
1211
+ generalStyleProps: {
1212
+ borderStyle: "solid",
1213
+ borderRadius: "4px",
1214
+ borderWidth: "3px",
1215
+ backgroundColor: "#FFFFFF",
1216
+ borderColor: "#F1F1F1",
1217
+ overflowY: "auto",
1218
+ height: "inherit",
1219
+ width: "inherit"
1220
+ },
1221
+ customButtonStyleProps: {
1222
+ backgroundColor: "rgb(49, 95, 162)",
1223
+ color: "#FFFFFF",
1224
+ fontFamily: "Segoe UI, Arial, sans-serif",
1225
+ fontSize: "15px",
1226
+ height: "48px"
1227
+ },
1228
+ adaptiveCardContainerStyleProps: {
1229
+ border: "1px solid #ECECEC",
1230
+ borderRadius: "4px",
1231
+ margin: "3%"
1232
+ },
1233
+ customTextInputStyleProps: {
1234
+ height: "20px"
1235
+ },
1236
+ customMultilineTextInputStyleProps: {
1237
+ height: "52px"
1238
+ }
1239
+ }
1240
+ },
1193
1241
  proactiveChatPaneProps: {
1194
1242
  componentOverrides: {
1195
1243
  title: undefined,
@@ -84,10 +84,7 @@ const getChatReconnectContext = async (chatSDK, chatConfig, props, isAuthenticat
84
84
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
85
85
  exports.getChatReconnectContext = getChatReconnectContext;
86
86
  const setReconnectIdAndStartChat = async (isAuthenticatedChat, chatSDK, props, dispatch, setAdapter, reconnectId, initStartChat) => {
87
- if (isAuthenticatedChat) {
88
- // Get auth token for for getting chat reconnect context
89
- await (0, _authHelper.handleAuthentication)(chatSDK, props.chatConfig, props.getAuthToken);
90
- } else {
87
+ if (!isAuthenticatedChat) {
91
88
  const startUnauthenticatedReconnectChat = {
92
89
  eventName: _TelemetryConstants.BroadcastEvent.StartUnauthenticatedReconnectChat
93
90
  };
@@ -12,6 +12,7 @@ const FileAttachmentIconMap = {
12
12
  "aac": _Icons.AudioIcon,
13
13
  "aiff": _Icons.AudioIcon,
14
14
  "alac": _Icons.AudioIcon,
15
+ "amr": _Icons.AudioIcon,
15
16
  "avchd": _Icons.VideoIcon,
16
17
  "avi": _Icons.VideoIcon,
17
18
  "bmp": _Icons.ImageIcon,
@@ -50,6 +51,7 @@ const FileAttachmentIconMap = {
50
51
  "vsdx": _Icons.VisioIcon,
51
52
  "wav": _Icons.AudioIcon,
52
53
  "webm": _Icons.VideoIcon,
54
+ "webp": _Icons.ImageIcon,
53
55
  "wma": _Icons.AudioIcon,
54
56
  "wmv": _Icons.VideoIcon,
55
57
  "xls": _Icons.ExcelIcon,
@@ -33,14 +33,13 @@ const DeliveredTimestamp = _ref => {
33
33
  } = args;
34
34
  return /*#__PURE__*/_react.default.createElement(_react2.Stack, {
35
35
  style: contentStyles,
36
+ dir: dir
37
+ }, role === _DirectLineSenderRole.DirectLineSenderRole.Bot && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
36
38
  dir: dir,
37
- horizontal: true
38
- }, role === _DirectLineSenderRole.DirectLineSenderRole.Bot && /*#__PURE__*/_react.default.createElement("span", {
39
39
  "aria-hidden": "false"
40
- }, name), role === _DirectLineSenderRole.DirectLineSenderRole.Bot && /*#__PURE__*/_react.default.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/_react.default.createElement("span", {
40
+ }, name, " - ", (0, _utils.getTimestampHourMinute)(timestamp))), role === _DirectLineSenderRole.DirectLineSenderRole.User && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
41
+ "aria-hidden": "false",
41
42
  dir: dir
42
- }, " ", (0, _utils.getTimestampHourMinute)(timestamp)), role === _DirectLineSenderRole.DirectLineSenderRole.User && /*#__PURE__*/_react.default.createElement("span", null, " \xA0-\xA0 "), role === _DirectLineSenderRole.DirectLineSenderRole.User && /*#__PURE__*/_react.default.createElement("span", {
43
- "aria-hidden": "false"
44
- }, ((_state$domainStates$m = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_MESSAGE_DELIVERED) ?? _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_DELIVERED));
43
+ }, " ", (0, _utils.getTimestampHourMinute)(timestamp), " - ", ((_state$domainStates$m = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_MESSAGE_DELIVERED) ?? _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_DELIVERED)));
45
44
  };
46
45
  exports.DeliveredTimestamp = DeliveredTimestamp;
@@ -44,8 +44,8 @@ _defineProperty(Constants, "acsChannel", "ACS_CHANNEL");
44
44
  _defineProperty(Constants, "publicMessageTag", "public");
45
45
  _defineProperty(Constants, "supportedAdaptiveCardContentTypes", ["application/vnd.microsoft.card.adaptive", "application/vnd.microsoft.card.audio", "application/vnd.microsoft.card.hero", "application/vnd.microsoft.card.receipt", "application/vnd.microsoft.card.thumbnail", "application/vnd.microsoft.card.signin", "application/vnd.microsoft.card.oauth"]);
46
46
  _defineProperty(Constants, "maxUploadFileSize", "500000");
47
- _defineProperty(Constants, "imageRegex", /(\.)(jpeg|jpg|jiff|png|gif|bmp)$/i);
48
- _defineProperty(Constants, "audioMediaRegex", /(\.)(aac|aiff|alac|flac|mp2|mp3|pcm|wav|wma)$/i);
47
+ _defineProperty(Constants, "imageRegex", /(\.)(jpeg|jpg|jiff|png|gif|bmp|webp)$/i);
48
+ _defineProperty(Constants, "audioMediaRegex", /(\.)(aac|aiff|alac|amr|flac|mp2|mp3|pcm|wav|wma)$/i);
49
49
  _defineProperty(Constants, "videoMediaRegex", /(\.)(avchd|avi|flv|mpe|mpeg|mpg|mpv|mp4|m4p|m4v|mov|qt|swf|webm|wmv)$/i);
50
50
  _defineProperty(Constants, "chromeSupportedInlineMediaRegex", /(\.)(aac|mp3|wav|mp4)$/i);
51
51
  _defineProperty(Constants, "firefoxSupportedInlineMediaRegex", /(\.)(aac|flac|mp3|wav|mp4|mov)$/i);
@@ -82,7 +82,7 @@ export const ConfirmationPaneStateful = props => {
82
82
  Event: TelemetryEvent.ConfirmationPaneLoaded
83
83
  });
84
84
  }, []);
85
- return /*#__PURE__*/React.createElement(React.Fragment, null, !(controlProps !== null && controlProps !== void 0 && controlProps.disableDimLayer) && /*#__PURE__*/React.createElement(DimLayer, {
85
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DimLayer, {
86
86
  brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"
87
87
  }), /*#__PURE__*/React.createElement(ConfirmationPane, {
88
88
  componentOverrides: props === null || props === void 0 ? void 0 : props.componentOverrides,
@@ -88,7 +88,7 @@ export const EmailTranscriptPaneStateful = props => {
88
88
  Event: TelemetryEvent.EmailTranscriptLoaded
89
89
  });
90
90
  }, [initialEmail]);
91
- return /*#__PURE__*/React.createElement(React.Fragment, null, !(controlProps !== null && controlProps !== void 0 && controlProps.disableDimLayer) && /*#__PURE__*/React.createElement(DimLayer, {
91
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DimLayer, {
92
92
  brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"
93
93
  }), /*#__PURE__*/React.createElement(InputValidationPane, {
94
94
  componentOverrides: props.componentOverrides,
@@ -21,6 +21,7 @@ export const HeaderStateful = props => {
21
21
  const [outOfOperatingHours, setOutOfOperatingHours] = useState(((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : (_state$domainStates$l2 = _state$domainStates$l.LiveWSAndLiveChatEngJoin) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.OutOfOperatingHours) === "True");
22
22
  const outOfOfficeStyleProps = Object.assign({}, defaultOutOfOfficeHeaderStyleProps, outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : outOfOfficeHeaderProps.styleProps);
23
23
  const conversationState = useRef(state.appStates.conversationState);
24
+ const conversationEndedByAgent = useRef(state.appStates.conversationEndedByAgent);
24
25
  const controlProps = {
25
26
  id: "oc-lcw-header",
26
27
  dir: state.domainStates.globalDir,
@@ -40,7 +41,7 @@ export const HeaderStateful = props => {
40
41
  Event: TelemetryEvent.HeaderCloseButtonClicked,
41
42
  Description: "Header Close button clicked."
42
43
  });
43
- if (conversationState.current === ConversationState.Active) {
44
+ if (conversationState.current === ConversationState.Active || conversationEndedByAgent.current) {
44
45
  dispatch({
45
46
  type: LiveChatWidgetActionType.SET_SHOW_CONFIRMATION,
46
47
  payload: true
@@ -86,6 +87,7 @@ export const HeaderStateful = props => {
86
87
  if (state.appStates.conversationState) {
87
88
  conversationState.current = state.appStates.conversationState;
88
89
  }
90
+ conversationEndedByAgent.current = state.appStates.conversationEndedByAgent;
89
91
  }, [state.appStates]);
90
92
  return /*#__PURE__*/React.createElement(Header, {
91
93
  componentOverrides: headerProps === null || headerProps === void 0 ? void 0 : headerProps.componentOverrides,
@@ -407,6 +407,7 @@ export const dummyDefaultProps = {
407
407
  width: "90px",
408
408
  cursor: "pointer",
409
409
  overflow: "hidden",
410
+ padding: "0px",
410
411
  whiteSpace: "nowrap"
411
412
  },
412
413
  subtitleStyleProps: {
@@ -414,6 +415,7 @@ export const dummyDefaultProps = {
414
415
  fontWeight: "200",
415
416
  color: "#666",
416
417
  overflow: "hidden",
418
+ padding: "0px",
417
419
  fontFamily: "'Segoe UI',Arial,sans-serif",
418
420
  display: "block",
419
421
  alignItems: "center",
@@ -469,7 +471,6 @@ export const dummyDefaultProps = {
469
471
  cancelButtonText: "Cancel",
470
472
  cancelButtonAriaLabel: "Cancel. Return to Chat",
471
473
  brightnessValueOnDim: "0.2",
472
- disableDimLayer: false,
473
474
  onConfirm: () => {},
474
475
  // Detailed implementation omitted
475
476
  onCancel: () => {} // Detailed implementation omitted
@@ -477,20 +478,23 @@ export const dummyDefaultProps = {
477
478
 
478
479
  styleProps: {
479
480
  generalStyleProps: {
481
+ display: "flex",
482
+ minHeight: "160px",
483
+ maxHeight: "300px",
484
+ boxSizing: "border-box",
480
485
  backgroundColor: "#FFFFFF",
481
486
  borderRadius: "2px",
482
487
  color: "black",
483
488
  fontFamily: "Segoe UI, Arial, sans-serif",
484
489
  fontSize: "14px",
485
- height: "160px",
486
490
  padding: "10px 20px",
487
- width: "262px",
488
491
  position: "absolute",
489
492
  justifyContent: "center",
490
493
  alignItems: "center",
491
- display: "flex",
492
494
  flexFlow: "column",
493
- zIndex: "9999"
495
+ zIndex: "9999",
496
+ left: "26px",
497
+ right: "26px"
494
498
  },
495
499
  titleStyleProps: {
496
500
  color: "#323130",
@@ -512,10 +516,14 @@ export const dummyDefaultProps = {
512
516
  },
513
517
  buttonGroupStyleProps: {
514
518
  display: "flex",
519
+ width: "auto",
520
+ height: "auto",
521
+ boxSizing: "border-box",
515
522
  flexFlow: "row",
516
523
  justifyContent: "center",
517
524
  alignItems: "center",
518
- gap: "10px"
525
+ gap: "10px",
526
+ marginBottom: "10px"
519
527
  },
520
528
  confirmButtonStyleProps: {
521
529
  backgroundColor: "rgba(9,72,159,1)",
@@ -620,7 +628,6 @@ export const dummyDefaultProps = {
620
628
  cancelButtonText: "Cancel",
621
629
  cancelButtonAriaLabel: "Cancel",
622
630
  brightnessValueOnDim: "0.2",
623
- disableDimLayer: false,
624
631
  onSend: undefined,
625
632
  onCancel: undefined,
626
633
  checkInput: undefined
@@ -1184,6 +1191,47 @@ export const dummyDefaultProps = {
1184
1191
  },
1185
1192
  isCustomerVoiceSurveyCompact: undefined
1186
1193
  },
1194
+ preChatSurveyPaneProps: {
1195
+ controlProps: {
1196
+ id: "oc-lcw-prechatsurveypane-default",
1197
+ dir: "auto",
1198
+ hidePreChatSurveyPane: false,
1199
+ adaptiveCardHostConfig: "{\"fontFamily\":\"Segoe UI, Helvetica Neue, sans-serif\",\"containerStyles\":{\"default\":{\"foregroundColors\":{\"default\":{\"default\":\"#000000\"}},\"backgroundColor\":\"#FFFFFF\"}},\"actions\":{\"actionsOrientation\":\"Vertical\",\"actionAlignment\":\"stretch\"}}",
1200
+ payload: "{\"$schema\":\"http://adaptivecards.io/schemas/adaptive-card.json\",\"type\":\"AdaptiveCard\",\"version\":\"1.1\",\"body\":[{\"type\":\"TextBlock\",\"weight\":\"bolder\",\"text\":\"Please answer below questions.\"},{\"type\":\"Input.Text\",\"id\":\"1e5e4e7a-8f0b-ec11-b6e6-000d3a305d38\",\"label\":\"name pls?\",\"maxLength\":100,\"isRequired\":true,\"errorMessage\":\"Name is required\"},{\"type\":\"Input.Text\",\"id\":\"7f8f5d6d-995e-ec11-8f8f-000d3a31376e\",\"label\":\"multi\\nmulti\\nmulti\",\"style\":\"text\",\"isMultiline\":true,\"maxLength\":250},{\"type\":\"Input.ChoiceSet\",\"id\":\"e4bdf7cb-995e-ec11-8f8f-000d3a31376e\",\"label\":\"options\",\"isMultiSelect\":false,\"value\":\"1\",\"style\":\"compact\",\"choices\":[{\"title\":\"one\",\"value\":\"1\"},{\"title\":\"two\",\"value\":\"2\"},{\"title\":\"three\",\"value\":\"3\"}]},{\"type\":\"Input.Toggle\",\"id\":\"b26011d2-995e-ec11-8f8f-000d3a31376e\",\"title\":\"consent\",\"valueOn\":\"True\",\"valueOff\":\"False\",\"value\":\"false\"},{\"type\":\"TextBlock\",\"isSubtle\":true,\"text\":\"Fields marked with * are mandatory.\",\"wrap\":true}],\"actions\":[{\"type\":\"Action.Submit\",\"title\":\"Submit\",\"data\":{\"Type\":\"InputSubmit\"}}]}",
1201
+ onSubmit: function () {} // Detailed implementation omitted
1202
+ },
1203
+
1204
+ styleProps: {
1205
+ generalStyleProps: {
1206
+ borderStyle: "solid",
1207
+ borderRadius: "4px",
1208
+ borderWidth: "3px",
1209
+ backgroundColor: "#FFFFFF",
1210
+ borderColor: "#F1F1F1",
1211
+ overflowY: "auto",
1212
+ height: "inherit",
1213
+ width: "inherit"
1214
+ },
1215
+ customButtonStyleProps: {
1216
+ backgroundColor: "rgb(49, 95, 162)",
1217
+ color: "#FFFFFF",
1218
+ fontFamily: "Segoe UI, Arial, sans-serif",
1219
+ fontSize: "15px",
1220
+ height: "48px"
1221
+ },
1222
+ adaptiveCardContainerStyleProps: {
1223
+ border: "1px solid #ECECEC",
1224
+ borderRadius: "4px",
1225
+ margin: "3%"
1226
+ },
1227
+ customTextInputStyleProps: {
1228
+ height: "20px"
1229
+ },
1230
+ customMultilineTextInputStyleProps: {
1231
+ height: "52px"
1232
+ }
1233
+ }
1234
+ },
1187
1235
  proactiveChatPaneProps: {
1188
1236
  componentOverrides: {
1189
1237
  title: undefined,
@@ -76,10 +76,7 @@ const getChatReconnectContext = async (chatSDK, chatConfig, props, isAuthenticat
76
76
 
77
77
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
78
78
  const setReconnectIdAndStartChat = async (isAuthenticatedChat, chatSDK, props, dispatch, setAdapter, reconnectId, initStartChat) => {
79
- if (isAuthenticatedChat) {
80
- // Get auth token for for getting chat reconnect context
81
- await handleAuthentication(chatSDK, props.chatConfig, props.getAuthToken);
82
- } else {
79
+ if (!isAuthenticatedChat) {
83
80
  const startUnauthenticatedReconnectChat = {
84
81
  eventName: BroadcastEvent.StartUnauthenticatedReconnectChat
85
82
  };
@@ -6,6 +6,7 @@ const FileAttachmentIconMap = {
6
6
  "aac": AudioIcon,
7
7
  "aiff": AudioIcon,
8
8
  "alac": AudioIcon,
9
+ "amr": AudioIcon,
9
10
  "avchd": VideoIcon,
10
11
  "avi": VideoIcon,
11
12
  "bmp": ImageIcon,
@@ -44,6 +45,7 @@ const FileAttachmentIconMap = {
44
45
  "vsdx": VisioIcon,
45
46
  "wav": AudioIcon,
46
47
  "webm": VideoIcon,
48
+ "webp": ImageIcon,
47
49
  "wma": AudioIcon,
48
50
  "wmv": VideoIcon,
49
51
  "xls": ExcelIcon,
@@ -27,13 +27,12 @@ export const DeliveredTimestamp = _ref => {
27
27
  } = args;
28
28
  return /*#__PURE__*/React.createElement(Stack, {
29
29
  style: contentStyles,
30
+ dir: dir
31
+ }, role === DirectLineSenderRole.Bot && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
30
32
  dir: dir,
31
- horizontal: true
32
- }, role === DirectLineSenderRole.Bot && /*#__PURE__*/React.createElement("span", {
33
33
  "aria-hidden": "false"
34
- }, name), role === DirectLineSenderRole.Bot && /*#__PURE__*/React.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/React.createElement("span", {
34
+ }, name, " - ", getTimestampHourMinute(timestamp))), role === DirectLineSenderRole.User && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
35
+ "aria-hidden": "false",
35
36
  dir: dir
36
- }, " ", getTimestampHourMinute(timestamp)), role === DirectLineSenderRole.User && /*#__PURE__*/React.createElement("span", null, " \xA0-\xA0 "), role === DirectLineSenderRole.User && /*#__PURE__*/React.createElement("span", {
37
- "aria-hidden": "false"
38
- }, ((_state$domainStates$m = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_MESSAGE_DELIVERED) ?? defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_DELIVERED));
37
+ }, " ", getTimestampHourMinute(timestamp), " - ", ((_state$domainStates$m = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_MESSAGE_DELIVERED) ?? defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_DELIVERED)));
39
38
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microsoft/omnichannel-chat-widget",
3
- "version": "0.1.0-main.d5a92f2",
3
+ "version": "0.1.0-main.d8553fe",
4
4
  "description": "Microsoft Omnichannel Chat Widget",
5
5
  "main": "lib/cjs/index.js",
6
6
  "types": "lib/types/index.d.ts",
@@ -74,8 +74,8 @@
74
74
  },
75
75
  "dependencies": {
76
76
  "@fluentui/react": "^8.49.1",
77
- "@microsoft/omnichannel-chat-components": "0.1.0-main.d066b23",
78
- "@microsoft/omnichannel-chat-sdk": "1.1.1-main.b88f92d",
77
+ "@microsoft/omnichannel-chat-components": "0.1.0-main.501b425",
78
+ "@microsoft/omnichannel-chat-sdk": "^1.2.0",
79
79
  "abort-controller-es5": "^2.0.1",
80
80
  "dompurify": "^2.3.4",
81
81
  "markdown-it": "^12.3.2",