@microsoft/omnichannel-chat-widget 0.1.0-main.8b6c0d8 → 0.1.0-main.edd8c2a

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.
@@ -98,7 +98,14 @@ const ChatButtonStateful = props => {
98
98
  ElapsedTimeInMilliseconds: _TelemetryManager.TelemetryTimers.LcwLoadToChatButtonTimer.milliSecondsElapsed
99
99
  });
100
100
 
101
- (0, _utils.setFocusOnElement)(document.getElementById((controlProps === null || controlProps === void 0 ? void 0 : controlProps.id) ?? "oc-lcw-chat-button"));
101
+ if (state.uiStates.focusChatButton) {
102
+ (0, _utils.setFocusOnElement)(document.getElementById((controlProps === null || controlProps === void 0 ? void 0 : controlProps.id) ?? "oc-lcw-chat-button"));
103
+ } else {
104
+ dispatch({
105
+ type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_FOCUS_CHAT_BUTTON,
106
+ payload: true
107
+ });
108
+ }
102
109
  }, []);
103
110
  return /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.ChatButton, {
104
111
  componentOverrides: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.componentOverrides,
@@ -150,7 +150,7 @@ const dummyDefaultProps = {
150
150
  id: "oc-lcw-CurrentCall-timer",
151
151
  showHours: false,
152
152
  timerStyles: {
153
- color: "white",
153
+ color: "#FFFFFF",
154
154
  textAlign: "center",
155
155
  backgroundColor: "#3d3c3c",
156
156
  height: "45px",
@@ -181,8 +181,8 @@ const dummyDefaultProps = {
181
181
  },
182
182
  audioCallButtonStyleProps: {
183
183
  borderRadius: "50%",
184
- color: "white",
185
- backgroundColor: "green",
184
+ color: "#FFFFFF",
185
+ backgroundColor: "#008000",
186
186
  lineHeight: "40px",
187
187
  height: "40px",
188
188
  width: "40px",
@@ -193,8 +193,8 @@ const dummyDefaultProps = {
193
193
  },
194
194
  videoCallButtonStyleProps: {
195
195
  borderRadius: "50%",
196
- color: "white",
197
- backgroundColor: "green",
196
+ color: "#FFFFFF",
197
+ backgroundColor: "#008000",
198
198
  lineHeight: "40px",
199
199
  height: "40px",
200
200
  width: "40px",
@@ -209,8 +209,8 @@ const dummyDefaultProps = {
209
209
  },
210
210
  declineCallButtonStyleProps: {
211
211
  borderRadius: "50%",
212
- color: "white",
213
- backgroundColor: "red",
212
+ color: "#FFFFFF",
213
+ backgroundColor: "#DC0000",
214
214
  lineHeight: "40px",
215
215
  height: "40px",
216
216
  width: "40px",
@@ -219,12 +219,12 @@ const dummyDefaultProps = {
219
219
  },
220
220
  incomingCallTitleStyleProps: {
221
221
  margin: "0 5px",
222
- color: "white",
222
+ color: "#FFFFFF",
223
223
  fontSize: 12,
224
224
  fontFamily: "Segoe UI, Arial, sans-serif"
225
225
  },
226
226
  itemFocusStyleProps: {
227
- outline: "2px solid white"
227
+ outline: "2px solid #FFFFFF"
228
228
  }
229
229
  },
230
230
  currentCallStyleProps: {
@@ -236,7 +236,7 @@ const dummyDefaultProps = {
236
236
  },
237
237
  micButtonStyleProps: {
238
238
  borderRadius: "2px",
239
- color: "white",
239
+ color: "#FFFFFF",
240
240
  backgroundColor: "#3d3c3c",
241
241
  height: "45px",
242
242
  width: "50px",
@@ -247,7 +247,7 @@ const dummyDefaultProps = {
247
247
  },
248
248
  videoOffButtonStyleProps: {
249
249
  borderRadius: "2px",
250
- color: "white",
250
+ color: "#FFFFFF",
251
251
  backgroundColor: "#3d3c3c",
252
252
  height: "45px",
253
253
  width: "50px",
@@ -261,8 +261,8 @@ const dummyDefaultProps = {
261
261
  },
262
262
  endCallButtonStyleProps: {
263
263
  borderRadius: "2px",
264
- color: "white",
265
- backgroundColor: "red",
264
+ color: "#FFFFFF",
265
+ backgroundColor: "#DC0000",
266
266
  lineHeight: "50px",
267
267
  height: "45px",
268
268
  width: "50px",
@@ -271,7 +271,7 @@ const dummyDefaultProps = {
271
271
  currentCallTimerStyleProps: {
272
272
  borderRadius: "2px",
273
273
  margin: "1px",
274
- color: "white",
274
+ color: "#FFFFFF",
275
275
  paddingTop: "18px",
276
276
  fontSize: 12,
277
277
  fontFamily: "Segoe UI, Arial, sans-serif",
@@ -493,7 +493,7 @@ const dummyDefaultProps = {
493
493
  },
494
494
  styleProps: {
495
495
  generalStyleProps: {
496
- backgroundColor: "white",
496
+ backgroundColor: "#FFFFFF",
497
497
  borderRadius: "2px",
498
498
  color: "black",
499
499
  fontFamily: "Segoe UI, Arial, sans-serif",
@@ -535,7 +535,7 @@ const dummyDefaultProps = {
535
535
  },
536
536
  confirmButtonStyleProps: {
537
537
  backgroundColor: "rgba(9,72,159,1)",
538
- color: "white",
538
+ color: "#FFFFFF",
539
539
  fontFamily: "Segoe UI, Arial, sans-serif",
540
540
  fontSize: "14px",
541
541
  fontWeight: "500",
@@ -549,7 +549,7 @@ const dummyDefaultProps = {
549
549
  border: "2px dotted #000"
550
550
  },
551
551
  cancelButtonStyleProps: {
552
- backgroundColor: "white",
552
+ backgroundColor: "#FFFFFF",
553
553
  fontFamily: "Segoe UI, Arial, sans-serif",
554
554
  fontSize: "14px",
555
555
  fontWeight: "500",
@@ -934,16 +934,16 @@ const dummyDefaultProps = {
934
934
  fontSize: 16,
935
935
  fontFamily: "Segoe UI, Arial, sans-serif",
936
936
  fontWeight: "450",
937
- color: "white",
937
+ color: "#FFFFFF",
938
938
  padding: "3px 0"
939
939
  },
940
940
  minimizeButtonStyleProps: {
941
- color: "white",
941
+ color: "#FFFFFF",
942
942
  margin: "5px 0",
943
943
  fontSize: "12px"
944
944
  },
945
945
  closeButtonStyleProps: {
946
- color: "white",
946
+ color: "#FFFFFF",
947
947
  margin: "5px 0",
948
948
  fontSize: "12px"
949
949
  },
@@ -1105,7 +1105,7 @@ const dummyDefaultProps = {
1105
1105
  titleStyleProps: {
1106
1106
  // ...[Existing chat button title style props]
1107
1107
  margin: "0 0 0 10px",
1108
- color: "White"
1108
+ color: "#FFFFFF"
1109
1109
  }
1110
1110
  }
1111
1111
  },
@@ -1471,7 +1471,7 @@ const dummyDefaultProps = {
1471
1471
  bubbleBackground: "#315FA2",
1472
1472
  bubbleBorderRadius: 4,
1473
1473
  bubbleBorderWidth: 0,
1474
- bubbleFromUserBackground: "White",
1474
+ bubbleFromUserBackground: "#FFFFFF",
1475
1475
  bubbleFromUserBorderRadius: 4,
1476
1476
  bubbleFromUserBorderWidth: 1,
1477
1477
  bubbleFromUserTextColor: "Black",
@@ -1479,7 +1479,7 @@ const dummyDefaultProps = {
1479
1479
  bubbleMaxWidth: 250,
1480
1480
  bubbleMinHeight: 34,
1481
1481
  bubbleMinWidth: 20,
1482
- bubbleTextColor: "White",
1482
+ bubbleTextColor: "#FFFFFF",
1483
1483
  hideSendBox: false,
1484
1484
  hideUploadButton: true,
1485
1485
  primaryFont: "Segoe UI, Arial, sans-serif",
@@ -1488,7 +1488,7 @@ const dummyDefaultProps = {
1488
1488
  sendBoxTextWrap: true,
1489
1489
  sendBoxHeight: 60,
1490
1490
  sendBoxMaxHeight: 96,
1491
- sendBoxBackground: "White",
1491
+ sendBoxBackground: "#FFFFFF",
1492
1492
  showAvatarInGroup: true,
1493
1493
  suggestedActionsStackedHeight: 125,
1494
1494
  suggestedActionsStackedOverflow: "scroll",
@@ -1599,7 +1599,7 @@ const dummyDefaultProps = {
1599
1599
  fontWeight: 600,
1600
1600
  fontSize: "13px",
1601
1601
  lineHeight: "18px",
1602
- color: "white",
1602
+ color: "#FFFFFF",
1603
1603
  paddingTop: "7px",
1604
1604
  WebkitUserSelect: "none",
1605
1605
  MozUserSelect: "none",
@@ -35,4 +35,5 @@ exports.LiveChatWidgetActionType = LiveChatWidgetActionType;
35
35
  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_TELEMETRY_DATA"] = 24] = "SET_TELEMETRY_DATA";
36
36
  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_RECONNECT_ID"] = 25] = "SET_RECONNECT_ID";
37
37
  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_UNREAD_MESSAGE_COUNT"] = 26] = "SET_UNREAD_MESSAGE_COUNT";
38
+ LiveChatWidgetActionType[LiveChatWidgetActionType["SET_FOCUS_CHAT_BUTTON"] = 27] = "SET_FOCUS_CHAT_BUTTON";
38
39
  })(LiveChatWidgetActionType || (exports.LiveChatWidgetActionType = LiveChatWidgetActionType = {}));
@@ -50,7 +50,8 @@ const getLiveChatWidgetContextInitialState = props => {
50
50
  isIncomingCall: true,
51
51
  disableVideoCall: true,
52
52
  disableRemoteVideo: true,
53
- disableSelfVideo: true
53
+ disableSelfVideo: true,
54
+ focusChatButton: false
54
55
  }
55
56
  };
56
57
  return props.liveChatContextFromCache ?? LiveChatWidgetContextInitialState;
@@ -114,6 +114,13 @@ const createReducer = () => {
114
114
  }
115
115
  };
116
116
 
117
+ case _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_FOCUS_CHAT_BUTTON:
118
+ return { ...state,
119
+ uiStates: { ...state.uiStates,
120
+ focusChatButton: action.payload
121
+ }
122
+ };
123
+
117
124
  case _LiveChatWidgetActionType.LiveChatWidgetActionType.DISABLE_VIDEO_CALL:
118
125
  return { ...state,
119
126
  uiStates: { ...state.uiStates,
@@ -73,7 +73,15 @@ export const ChatButtonStateful = props => {
73
73
  Event: TelemetryEvent.LCWChatButtonShow,
74
74
  ElapsedTimeInMilliseconds: TelemetryTimers.LcwLoadToChatButtonTimer.milliSecondsElapsed
75
75
  });
76
- setFocusOnElement(document.getElementById((controlProps === null || controlProps === void 0 ? void 0 : controlProps.id) ?? "oc-lcw-chat-button"));
76
+
77
+ if (state.uiStates.focusChatButton) {
78
+ setFocusOnElement(document.getElementById((controlProps === null || controlProps === void 0 ? void 0 : controlProps.id) ?? "oc-lcw-chat-button"));
79
+ } else {
80
+ dispatch({
81
+ type: LiveChatWidgetActionType.SET_FOCUS_CHAT_BUTTON,
82
+ payload: true
83
+ });
84
+ }
77
85
  }, []);
78
86
  return /*#__PURE__*/React.createElement(ChatButton, {
79
87
  componentOverrides: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.componentOverrides,
@@ -132,7 +132,7 @@ export const dummyDefaultProps = {
132
132
  id: "oc-lcw-CurrentCall-timer",
133
133
  showHours: false,
134
134
  timerStyles: {
135
- color: "white",
135
+ color: "#FFFFFF",
136
136
  textAlign: "center",
137
137
  backgroundColor: "#3d3c3c",
138
138
  height: "45px",
@@ -163,8 +163,8 @@ export const dummyDefaultProps = {
163
163
  },
164
164
  audioCallButtonStyleProps: {
165
165
  borderRadius: "50%",
166
- color: "white",
167
- backgroundColor: "green",
166
+ color: "#FFFFFF",
167
+ backgroundColor: "#008000",
168
168
  lineHeight: "40px",
169
169
  height: "40px",
170
170
  width: "40px",
@@ -175,8 +175,8 @@ export const dummyDefaultProps = {
175
175
  },
176
176
  videoCallButtonStyleProps: {
177
177
  borderRadius: "50%",
178
- color: "white",
179
- backgroundColor: "green",
178
+ color: "#FFFFFF",
179
+ backgroundColor: "#008000",
180
180
  lineHeight: "40px",
181
181
  height: "40px",
182
182
  width: "40px",
@@ -191,8 +191,8 @@ export const dummyDefaultProps = {
191
191
  },
192
192
  declineCallButtonStyleProps: {
193
193
  borderRadius: "50%",
194
- color: "white",
195
- backgroundColor: "red",
194
+ color: "#FFFFFF",
195
+ backgroundColor: "#DC0000",
196
196
  lineHeight: "40px",
197
197
  height: "40px",
198
198
  width: "40px",
@@ -201,12 +201,12 @@ export const dummyDefaultProps = {
201
201
  },
202
202
  incomingCallTitleStyleProps: {
203
203
  margin: "0 5px",
204
- color: "white",
204
+ color: "#FFFFFF",
205
205
  fontSize: 12,
206
206
  fontFamily: "Segoe UI, Arial, sans-serif"
207
207
  },
208
208
  itemFocusStyleProps: {
209
- outline: "2px solid white"
209
+ outline: "2px solid #FFFFFF"
210
210
  }
211
211
  },
212
212
  currentCallStyleProps: {
@@ -218,7 +218,7 @@ export const dummyDefaultProps = {
218
218
  },
219
219
  micButtonStyleProps: {
220
220
  borderRadius: "2px",
221
- color: "white",
221
+ color: "#FFFFFF",
222
222
  backgroundColor: "#3d3c3c",
223
223
  height: "45px",
224
224
  width: "50px",
@@ -229,7 +229,7 @@ export const dummyDefaultProps = {
229
229
  },
230
230
  videoOffButtonStyleProps: {
231
231
  borderRadius: "2px",
232
- color: "white",
232
+ color: "#FFFFFF",
233
233
  backgroundColor: "#3d3c3c",
234
234
  height: "45px",
235
235
  width: "50px",
@@ -243,8 +243,8 @@ export const dummyDefaultProps = {
243
243
  },
244
244
  endCallButtonStyleProps: {
245
245
  borderRadius: "2px",
246
- color: "white",
247
- backgroundColor: "red",
246
+ color: "#FFFFFF",
247
+ backgroundColor: "#DC0000",
248
248
  lineHeight: "50px",
249
249
  height: "45px",
250
250
  width: "50px",
@@ -253,7 +253,7 @@ export const dummyDefaultProps = {
253
253
  currentCallTimerStyleProps: {
254
254
  borderRadius: "2px",
255
255
  margin: "1px",
256
- color: "white",
256
+ color: "#FFFFFF",
257
257
  paddingTop: "18px",
258
258
  fontSize: 12,
259
259
  fontFamily: "Segoe UI, Arial, sans-serif",
@@ -475,7 +475,7 @@ export const dummyDefaultProps = {
475
475
  },
476
476
  styleProps: {
477
477
  generalStyleProps: {
478
- backgroundColor: "white",
478
+ backgroundColor: "#FFFFFF",
479
479
  borderRadius: "2px",
480
480
  color: "black",
481
481
  fontFamily: "Segoe UI, Arial, sans-serif",
@@ -517,7 +517,7 @@ export const dummyDefaultProps = {
517
517
  },
518
518
  confirmButtonStyleProps: {
519
519
  backgroundColor: "rgba(9,72,159,1)",
520
- color: "white",
520
+ color: "#FFFFFF",
521
521
  fontFamily: "Segoe UI, Arial, sans-serif",
522
522
  fontSize: "14px",
523
523
  fontWeight: "500",
@@ -531,7 +531,7 @@ export const dummyDefaultProps = {
531
531
  border: "2px dotted #000"
532
532
  },
533
533
  cancelButtonStyleProps: {
534
- backgroundColor: "white",
534
+ backgroundColor: "#FFFFFF",
535
535
  fontFamily: "Segoe UI, Arial, sans-serif",
536
536
  fontSize: "14px",
537
537
  fontWeight: "500",
@@ -916,16 +916,16 @@ export const dummyDefaultProps = {
916
916
  fontSize: 16,
917
917
  fontFamily: "Segoe UI, Arial, sans-serif",
918
918
  fontWeight: "450",
919
- color: "white",
919
+ color: "#FFFFFF",
920
920
  padding: "3px 0"
921
921
  },
922
922
  minimizeButtonStyleProps: {
923
- color: "white",
923
+ color: "#FFFFFF",
924
924
  margin: "5px 0",
925
925
  fontSize: "12px"
926
926
  },
927
927
  closeButtonStyleProps: {
928
- color: "white",
928
+ color: "#FFFFFF",
929
929
  margin: "5px 0",
930
930
  fontSize: "12px"
931
931
  },
@@ -1087,7 +1087,7 @@ export const dummyDefaultProps = {
1087
1087
  titleStyleProps: {
1088
1088
  // ...[Existing chat button title style props]
1089
1089
  margin: "0 0 0 10px",
1090
- color: "White"
1090
+ color: "#FFFFFF"
1091
1091
  }
1092
1092
  }
1093
1093
  },
@@ -1453,7 +1453,7 @@ export const dummyDefaultProps = {
1453
1453
  bubbleBackground: "#315FA2",
1454
1454
  bubbleBorderRadius: 4,
1455
1455
  bubbleBorderWidth: 0,
1456
- bubbleFromUserBackground: "White",
1456
+ bubbleFromUserBackground: "#FFFFFF",
1457
1457
  bubbleFromUserBorderRadius: 4,
1458
1458
  bubbleFromUserBorderWidth: 1,
1459
1459
  bubbleFromUserTextColor: "Black",
@@ -1461,7 +1461,7 @@ export const dummyDefaultProps = {
1461
1461
  bubbleMaxWidth: 250,
1462
1462
  bubbleMinHeight: 34,
1463
1463
  bubbleMinWidth: 20,
1464
- bubbleTextColor: "White",
1464
+ bubbleTextColor: "#FFFFFF",
1465
1465
  hideSendBox: false,
1466
1466
  hideUploadButton: true,
1467
1467
  primaryFont: "Segoe UI, Arial, sans-serif",
@@ -1470,7 +1470,7 @@ export const dummyDefaultProps = {
1470
1470
  sendBoxTextWrap: true,
1471
1471
  sendBoxHeight: 60,
1472
1472
  sendBoxMaxHeight: 96,
1473
- sendBoxBackground: "White",
1473
+ sendBoxBackground: "#FFFFFF",
1474
1474
  showAvatarInGroup: true,
1475
1475
  suggestedActionsStackedHeight: 125,
1476
1476
  suggestedActionsStackedOverflow: "scroll",
@@ -1581,7 +1581,7 @@ export const dummyDefaultProps = {
1581
1581
  fontWeight: 600,
1582
1582
  fontSize: "13px",
1583
1583
  lineHeight: "18px",
1584
- color: "white",
1584
+ color: "#FFFFFF",
1585
1585
  paddingTop: "7px",
1586
1586
  WebkitUserSelect: "none",
1587
1587
  MozUserSelect: "none",
@@ -28,4 +28,5 @@ export let LiveChatWidgetActionType;
28
28
  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_TELEMETRY_DATA"] = 24] = "SET_TELEMETRY_DATA";
29
29
  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_RECONNECT_ID"] = 25] = "SET_RECONNECT_ID";
30
30
  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_UNREAD_MESSAGE_COUNT"] = 26] = "SET_UNREAD_MESSAGE_COUNT";
31
+ LiveChatWidgetActionType[LiveChatWidgetActionType["SET_FOCUS_CHAT_BUTTON"] = 27] = "SET_FOCUS_CHAT_BUTTON";
31
32
  })(LiveChatWidgetActionType || (LiveChatWidgetActionType = {}));
@@ -41,7 +41,8 @@ export const getLiveChatWidgetContextInitialState = props => {
41
41
  isIncomingCall: true,
42
42
  disableVideoCall: true,
43
43
  disableRemoteVideo: true,
44
- disableSelfVideo: true
44
+ disableSelfVideo: true,
45
+ focusChatButton: false
45
46
  }
46
47
  };
47
48
  return props.liveChatContextFromCache ?? LiveChatWidgetContextInitialState;
@@ -105,6 +105,13 @@ export const createReducer = () => {
105
105
  }
106
106
  };
107
107
 
108
+ case LiveChatWidgetActionType.SET_FOCUS_CHAT_BUTTON:
109
+ return { ...state,
110
+ uiStates: { ...state.uiStates,
111
+ focusChatButton: action.payload
112
+ }
113
+ };
114
+
108
115
  case LiveChatWidgetActionType.DISABLE_VIDEO_CALL:
109
116
  return { ...state,
110
117
  uiStates: { ...state.uiStates,
@@ -42,5 +42,6 @@ export interface ILiveChatWidgetContext {
42
42
  disableRemoteVideo: boolean;
43
43
  disableSelfVideo: boolean;
44
44
  isIncomingCall: boolean;
45
+ focusChatButton: boolean;
45
46
  };
46
47
  }
@@ -25,5 +25,6 @@ export declare enum LiveChatWidgetActionType {
25
25
  SET_PROACTIVE_CHAT_PARAMS = 23,
26
26
  SET_TELEMETRY_DATA = 24,
27
27
  SET_RECONNECT_ID = 25,
28
- SET_UNREAD_MESSAGE_COUNT = 26
28
+ SET_UNREAD_MESSAGE_COUNT = 26,
29
+ SET_FOCUS_CHAT_BUTTON = 27
29
30
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microsoft/omnichannel-chat-widget",
3
- "version": "0.1.0-main.8b6c0d8",
3
+ "version": "0.1.0-main.edd8c2a",
4
4
  "description": "Microsoft Omnichannel Chat Widget",
5
5
  "main": "lib/cjs/index.js",
6
6
  "types": "lib/types/index.d.ts",