botframework-webchat-fluent-theme 4.17.0-main.20240411.ff34969 → 4.17.0-main.20240416.e3f5401

package/dist/botframework-webchat-fluent-theme.development.js

@@ -2794,7 +2794,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
       // border: `solid 1px ${isHighContrastTheme() ? white : isDarkTheme() ? gray160 : gray40}`,
       // color: 'inherit',
       border: "solid 1px var(--webchat-colorNeutralStroke1)",
-      color: "var(--webchat-colorNeutralForeground1)",
+      color: "var(--webchat-colorGray200)",
       fontWeight: "var(--webchat-fontWeightSemibold)",
       cursor: "pointer",
       display: "flex",
@@ -2813,7 +2813,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
     },
     "webchat__telephone-keypad__button__ruby": {
       // color: isHighContrastTheme() ? white : isDarkTheme() ? gray40 : gray160,
-      color: "var(--webchat-colorGray160)",
+      color: "var(--webchat-colorGray190)",
       fontSize: 10
     },
     "webchat__telephone-keypad__button__text": {
@@ -3073,9 +3073,10 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
       "--webchat-colorCompoundBrandForeground1Hover": "var(--colorCompoundBrandForeground1Hover, #02729c)",
       "--webchat-colorCompoundBrandForeground1Pressed": "var(--colorCompoundBrandForeground1Pressed, #01678c)",
       "--webchat-colorStatusDangerForeground1": "var(--colorStatusDangerForeground1, #b10e1c)",
-      // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/colors.ts
+      // https://github.com/microsoft/fluentui/blob/master/packages/theme/src/colors/FluentColors.ts
       "--webchat-colorGray30": "var(--colorGray30, #edebe9)",
       "--webchat-colorGray160": "var(--colorGray160, #323130)",
+      "--webchat-colorGray190": "var(--colorGray190, #201f1e)",
       "--webchat-colorGray200": "var(--colorGray200, #1b1a19)",
       // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts
       "--webchat-borderRadiusSmall": "var(--borderRadiusSmall, 2px)",
@@ -3257,20 +3258,6 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
   var import_classnames3 = __toESM(require_classnames());
   var import_react16 = __toESM(require_react());
 
-  // src/components/suggestedActions/private/computeSuggestedActionText.ts
-  function computeSuggestedActionText(cardAction) {
-    const { title } = cardAction;
-    const { type, value } = cardAction;
-    if (type === "messageBack") {
-      return title || cardAction.displayText;
-    } else if (title) {
-      return title;
-    } else if (typeof value === "string") {
-      return value;
-    }
-    return JSON.stringify(value);
-  }
-
   // src/components/suggestedActions/SuggestedAction.tsx
   var import_botframework_webchat_component = __toESM(require_botframework_webchat_component());
   var import_classnames2 = __toESM(require_classnames());
@@ -3305,20 +3292,19 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
   var AccessibleButton_default = (0, import_react14.memo)(AccessibleButton);
 
   // src/components/suggestedActions/SuggestedAction.tsx
-  var { useScrollToEnd, useStyleSet, usePerformCardAction, useFocus, useSuggestedActions, useDisabled } = import_botframework_webchat_component.hooks;
+  var { useDisabled, useFocus, usePerformCardAction, useScrollToEnd, useStyleSet, useSuggestedActions } = import_botframework_webchat_component.hooks;
   var styles5 = {
     "webchat-fluent__suggested-action": {
+      alignItems: "center",
       background: "transparent",
       border: "1px solid var(--webchat-colorBrandStroke2)",
       borderRadius: "8px",
       cursor: "pointer",
-      fontSize: "12px",
-      lineHeight: "14px",
-      padding: "6px 8px 4px",
-      textAlign: "start",
       display: "flex",
+      fontSize: "12px",
       gap: "4px",
-      alignItems: "center",
+      padding: "4px 8px 4px",
+      textAlign: "start",
       transition: "all .15s ease-out",
       "@media (hover: hover)": {
         '&:not([aria-disabled="true"]):hover': {
@@ -3331,15 +3317,12 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
         color: "var(--webchat-colorBrandForeground2Pressed)"
       },
       '&[aria-disabled="true"]': {
-        color: " var(--webchat-colorNeutralForegroundDisabled)",
+        color: "var(--webchat-colorNeutralForegroundDisabled)",
         cursor: "not-allowed"
       }
     },
     "webchat-fluent__suggested-action__image": {
-      width: "1em",
-      height: "1em",
-      fontSize: "20px",
-      translate: "0 -1px"
+      height: "12px"
     }
   };
   function SuggestedAction({
@@ -3390,22 +3373,44 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
   }
   var SuggestedAction_default = (0, import_react15.memo)(SuggestedAction);
 
+  // src/components/suggestedActions/private/computeSuggestedActionText.ts
+  function computeSuggestedActionText(cardAction) {
+    const { title } = cardAction;
+    const { type, value } = cardAction;
+    if (type === "messageBack") {
+      return title || cardAction.displayText;
+    } else if (title) {
+      return title;
+    } else if (typeof value === "string") {
+      return value;
+    }
+    return JSON.stringify(value);
+  }
+
   // src/components/suggestedActions/index.tsx
-  var { useLocalizer: useLocalizer2, useStyleSet: useStyleSet2, useSuggestedActions: useSuggestedActions2 } = import_botframework_webchat_component2.hooks;
+  var { useLocalizer: useLocalizer2, useStyleOptions, useStyleSet: useStyleSet2, useSuggestedActions: useSuggestedActions2 } = import_botframework_webchat_component2.hooks;
   var styles6 = {
     "webchat-fluent__suggested-actions": {
       alignItems: "flex-end",
       alignSelf: "flex-end",
       display: "flex",
-      flexDirection: "column",
       gap: "8px",
       "&:not(:empty)": {
         paddingBlockEnd: "8px",
         paddingInlineStart: "4px"
+      },
+      "&.webchat-fluent__suggested-actions--flow": {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        justifyContent: "flex-end"
+      },
+      "&.webchat-fluent__suggested-actions--stacked": {
+        flexDirection: "column"
       }
     }
   };
-  function SuggestedActionStackedContainer(props) {
+  function SuggestedActionStackedOrFlowContainer(props) {
+    const [{ suggestedActionLayout }] = useStyleOptions();
     const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet2();
     const classNames = useStyles(styles6);
     return /* @__PURE__ */ import_react16.default.createElement(
@@ -3414,7 +3419,15 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
         "aria-label": props["aria-label"],
         "aria-live": "polite",
         "aria-orientation": "vertical",
-        className: (0, import_classnames3.default)(classNames["webchat-fluent__suggested-actions"], suggestedActionsStyleSet + "", props.className),
+        className: (0, import_classnames3.default)(
+          classNames["webchat-fluent__suggested-actions"],
+          suggestedActionsStyleSet + "",
+          {
+            "webchat-fluent__suggested-actions--flow": suggestedActionLayout === "flow",
+            "webchat-fluent__suggested-actions--stacked": suggestedActionLayout !== "flow"
+          },
+          props.className
+        ),
         role: "toolbar"
       },
       !!props.children && !!import_react16.default.Children.count(props.children) && props.children
@@ -3445,7 +3458,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
       );
     });
     return /* @__PURE__ */ import_react16.default.createElement(
-      SuggestedActionStackedContainer,
+      SuggestedActionStackedOrFlowContainer,
       {
         "aria-label": localize("SUGGESTED_ACTIONS_LABEL_ALT"),
         className: classNames["webchat-fluent__suggested-actions"]
@@ -3522,7 +3535,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
         color: "var(--webchat-colorCompoundBrandForeground1Pressed)"
       },
       '&[aria-disabled="true"]': {
-        color: " var(--webchat-colorNeutralForegroundDisabled)",
+        color: "var(--webchat-colorNeutralForegroundDisabled)",
         cursor: "not-allowed"
       }
     },
@@ -3578,7 +3591,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
   ToolbarSeparator.displayName = "ToolbarSeparator";
 
   // src/components/sendbox/AddAttachmentButton.tsx
-  var { useLocalizer: useLocalizer3, useStyleOptions } = import_botframework_webchat_api2.hooks;
+  var { useLocalizer: useLocalizer3, useStyleOptions: useStyleOptions2 } = import_botframework_webchat_api2.hooks;
   var styles8 = {
     "webchat-fluent__sendbox__add-attachment": {
       display: "grid"
@@ -3594,7 +3607,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
     const inputRef = (0, import_react19.useRef)(null);
     const classNames = useStyles(styles8);
     const localize = useLocalizer3();
-    const [{ uploadAccept, uploadMultiple }] = useStyleOptions();
+    const [{ uploadAccept, uploadMultiple }] = useStyleOptions2();
     const onFilesAddedRef = useRefFrom(props.onFilesAdded);
     const handleClick = (0, import_react19.useCallback)(() => inputRef.current?.click(), [inputRef]);
     const handleFileChange = (0, import_react19.useCallback)(
@@ -3775,7 +3788,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
         width: "8px"
       },
       "&::-webkit-scrollbar-track": {
-        backgroundColor: " var(--webchat-colorNeutralBackground5)",
+        backgroundColor: "var(--webchat-colorNeutralBackground5)",
         borderRadius: "16px"
       },
       "&::-webkit-scrollbar-thumb": {
@@ -3880,7 +3893,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
   }
 
   // src/components/sendbox/index.tsx
-  var { useStyleOptions: useStyleOptions2, useMakeThumbnail, useLocalizer: useLocalizer7, useSendBoxAttachments, useSendMessage } = import_botframework_webchat_component4.hooks;
+  var { useStyleOptions: useStyleOptions3, useMakeThumbnail, useLocalizer: useLocalizer7, useSendBoxAttachments, useSendMessage } = import_botframework_webchat_component4.hooks;
   var styles12 = {
     "webchat-fluent__sendbox": {
       color: "var(--webchat-colorNeutralForeground1)",
@@ -3939,7 +3952,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
     const inputRef = (0, import_react27.useRef)(null);
     const [message, setMessage] = (0, import_react27.useState)("");
     const [attachments, setAttachments] = useSendBoxAttachments();
-    const [{ maxMessageLength }] = useStyleOptions2();
+    const [{ hideTelephoneKeypadButton, hideUploadButton, maxMessageLength }] = useStyleOptions3();
     const isMessageLengthExceeded = !!maxMessageLength && message.length > maxMessageLength;
     const classNames = useStyles(styles12);
     const localize = useLocalizer7();
@@ -3947,7 +3960,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
     const makeThumbnail = useMakeThumbnail();
     const errorMessageId = useUniqueId("webchat-fluent__sendbox__error-message-id");
     const [errorRef, errorMessage] = useSubmitError_default({ message, attachments });
-    const [telephoneKeypadShown, setTelephoneKeypadShown] = useShown();
+    const [telephoneKeypadShown] = useShown();
     const attachmentsRef = useRefFrom(attachments);
     const messageRef = useRefFrom(message);
     const handleSendBoxClick = (0, import_react27.useCallback)(
@@ -3994,11 +4007,9 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
       [attachmentsRef, messageRef, sendMessage, setAttachments, setMessage, isMessageLengthExceeded, errorRef, inputRef]
     );
     const handleTelephoneKeypadButtonClick = (0, import_react27.useCallback)(
-      (dtmf) => {
-        sendMessage(`/DTMF ${dtmf}`);
-        setTelephoneKeypadShown(false);
-      },
-      [sendMessage, setTelephoneKeypadShown]
+      // TODO: We need more official way of sending DTMF.
+      (dtmf) => sendMessage(`/DTMF ${dtmf}`),
+      [sendMessage]
     );
     const aria = {
       "aria-invalid": "false",
@@ -4034,7 +4045,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
         })
       },
       `${message.length}/${maxMessageLength}`
-    ), /* @__PURE__ */ import_react27.default.createElement(Toolbar, null, /* @__PURE__ */ import_react27.default.createElement(TelephoneKeypadToolbarButton_default, null), /* @__PURE__ */ import_react27.default.createElement(AddAttachmentButton_default, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ import_react27.default.createElement(ToolbarSeparator, null), /* @__PURE__ */ import_react27.default.createElement(
+    ), /* @__PURE__ */ import_react27.default.createElement(Toolbar, null, !hideTelephoneKeypadButton && /* @__PURE__ */ import_react27.default.createElement(TelephoneKeypadToolbarButton_default, null), !hideUploadButton && /* @__PURE__ */ import_react27.default.createElement(AddAttachmentButton_default, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ import_react27.default.createElement(ToolbarSeparator, null), /* @__PURE__ */ import_react27.default.createElement(
       ToolbarButton,
       {
         "aria-label": localize("TEXT_INPUT_SEND_BUTTON_ALT"),
@@ -4057,7 +4068,7 @@ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter
   var FluentThemeProvider_default = (0, import_react28.memo)(FluentThemeProvider);
 
   // src/index.ts
-  injectMeta("botframework-webchat-fluent-theme:version", "4.17.0-main.20240411.ff34969");
+  injectMeta("botframework-webchat-fluent-theme:version", "4.17.0-main.20240416.e3f5401");
 
   // src/bundle.ts
   globalThis.WebChat = {