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

package/dist/index.mjs

@@ -0,0 +1,1375 @@
+// src/index.ts
+import { injectMetaTag } from "inject-meta-tag";
+
+// src/private/FluentThemeProvider.tsx
+import { Components } from "botframework-webchat-component";
+import React21, { memo as memo15 } from "react";
+
+// src/components/telephoneKeypad/Provider.tsx
+import React, { memo, useMemo, useState } from "react";
+
+// src/components/telephoneKeypad/private/Context.ts
+import { createContext } from "react";
+var Context = createContext(
+  new Proxy({}, {
+    get() {
+      throw new Error("botframework-webchat: This hook can only used under its corresponding <Provider>.");
+    }
+  })
+);
+Context.displayName = "TelephoneKeypad.Context";
+var Context_default = Context;
+
+// src/components/telephoneKeypad/Provider.tsx
+var Provider = memo(({ children }) => {
+  const [shown, setShown] = useState(false);
+  const context = useMemo(
+    () => Object.freeze({
+      setShown,
+      shown
+    }),
+    [setShown, shown]
+  );
+  return /* @__PURE__ */ React.createElement(Context_default.Provider, { value: context }, children);
+});
+var Provider_default = Provider;
+
+// src/components/telephoneKeypad/Surrogate.tsx
+import React4, { memo as memo4 } from "react";
+
+// src/components/telephoneKeypad/private/TelephoneKeypad.tsx
+import React3, { memo as memo3, useCallback as useCallback2, useEffect, useRef } from "react";
+import { useRefFrom as useRefFrom2 } from "use-ref-from";
+
+// src/styles/index.ts
+import { useMemo as useMemo3 } from "react";
+
+// src/private/useStyleToEmotionObject.ts
+import createEmotion from "@emotion/css/create-instance";
+import { useMemo as useMemo2 } from "react";
+var { random } = Math;
+var emotionPool = {};
+var nonce = "";
+function createCSSKey() {
+  return random().toString(26).substr(2, 5).replace(/\d/gu, (value) => String.fromCharCode(value.charCodeAt(0) + 65));
+}
+function useStyleToEmotionObject() {
+  return useMemo2(() => {
+    const emotion = (
+      // Prefix "id-" to prevent object injection attack.
+      emotionPool[`id-${nonce}`] || (emotionPool[`id-${nonce}`] = createEmotion({ key: `webchat--css-${createCSSKey()}`, nonce }))
+    );
+    return (style) => emotion.css(style);
+  }, []);
+}
+
+// src/styles/index.ts
+function useStyles(styles13) {
+  const getClassName = useStyleToEmotionObject();
+  return useMemo3(
+    () => Object.freeze(
+      Object.fromEntries(Object.entries(styles13).map(([cls, style]) => [cls, `${cls} ${getClassName(style)}`]))
+    ),
+    [styles13, getClassName]
+  );
+}
+
+// src/components/telephoneKeypad/private/Button.tsx
+import React2, { forwardRef, memo as memo2, useCallback } from "react";
+import { useRefFrom } from "use-ref-from";
+var styles = {
+  "webchat__telephone-keypad__button": {
+    "-webkit-user-select": "none",
+    alignItems: "center",
+    appearance: "none",
+    // backgroundColor: isDarkTheme() || isHighContrastTheme() ? black : white,
+    backgroundColor: "White",
+    borderRadius: "100%",
+    // Whitelabel styles
+    // border: `solid 1px ${isHighContrastTheme() ? white : isDarkTheme() ? gray160 : gray40}`,
+    // color: 'inherit',
+    border: "solid 1px var(--webchat-colorNeutralStroke1)",
+    color: "var(--webchat-colorGray200)",
+    fontWeight: "var(--webchat-fontWeightSemibold)",
+    cursor: "pointer",
+    display: "flex",
+    flexDirection: "column",
+    height: 60,
+    opacity: 0.7,
+    padding: 0,
+    position: "relative",
+    touchAction: "none",
+    userSelect: "none",
+    width: 60,
+    "&:hover": {
+      // backgroundColor: isHighContrastTheme() ? gray210 : isDarkTheme() ? gray150 : gray30
+      backgroundColor: "var(--webchat-colorGray30)"
+    }
+  },
+  "webchat__telephone-keypad__button__ruby": {
+    // color: isHighContrastTheme() ? white : isDarkTheme() ? gray40 : gray160,
+    color: "var(--webchat-colorGray190)",
+    fontSize: 10
+  },
+  "webchat__telephone-keypad__button__text": {
+    fontSize: 24,
+    marginTop: 8
+  },
+  "webchat__telephone-keypad--horizontal": {
+    "& .webchat__telephone-keypad__button": {
+      height: 32,
+      width: 32,
+      margin: "8px 4px",
+      justifyContent: "center"
+    },
+    "webchat__telephone-keypad__button__ruby": {
+      display: "none"
+    },
+    "& .webchat__telephone-keypad__button__text": {
+      fontSize: 20,
+      marginTop: 0
+    }
+  }
+};
+var Button = memo2(
+  // As we are all TypeScript, internal components do not need propTypes.
+  // eslint-disable-next-line react/prop-types
+  forwardRef(({ button, "data-testid": dataTestId, onClick, ruby }, ref) => {
+    const classNames = useStyles(styles);
+    const onClickRef = useRefFrom(onClick);
+    const handleClick = useCallback(() => onClickRef.current?.(), [onClickRef]);
+    return /* @__PURE__ */ React2.createElement(
+      "button",
+      {
+        className: classNames["webchat__telephone-keypad__button"],
+        "data-testid": dataTestId,
+        onClick: handleClick,
+        ref,
+        type: "button"
+      },
+      /* @__PURE__ */ React2.createElement("span", { className: classNames["webchat__telephone-keypad__button__text"] }, button === "star" ? "\u2217" : button === "pound" ? "#" : button),
+      !!ruby && /* @__PURE__ */ React2.createElement("ruby", { className: classNames["webchat__telephone-keypad__button__ruby"] }, ruby)
+    );
+  })
+);
+Button.displayName = "TelephoneKeypad.Button";
+var Button_default = Button;
+
+// src/testIds.ts
+var testIds = {
+  sendBoxDropZone: "send box drop zone",
+  sendBoxSendButton: "send box send button",
+  sendBoxTextBox: "send box text area",
+  sendBoxTelephoneKeypadButton1: `send box telephone keypad button 1`,
+  sendBoxTelephoneKeypadButton2: `send box telephone keypad button 2`,
+  sendBoxTelephoneKeypadButton3: `send box telephone keypad button 3`,
+  sendBoxTelephoneKeypadButton4: `send box telephone keypad button 4`,
+  sendBoxTelephoneKeypadButton5: `send box telephone keypad button 5`,
+  sendBoxTelephoneKeypadButton6: `send box telephone keypad button 6`,
+  sendBoxTelephoneKeypadButton7: `send box telephone keypad button 7`,
+  sendBoxTelephoneKeypadButton8: `send box telephone keypad button 8`,
+  sendBoxTelephoneKeypadButton9: `send box telephone keypad button 9`,
+  sendBoxTelephoneKeypadButton0: `send box telephone keypad button 0`,
+  sendBoxTelephoneKeypadButtonStar: `send box telephone keypad button star`,
+  sendBoxTelephoneKeypadButtonPound: `send box telephone keypad button pound`,
+  sendBoxTelephoneKeypadToolbarButton: "send box telephone keypad toolbar button",
+  sendBoxUploadButton: "send box upload button"
+};
+var testIds_default = testIds;
+
+// src/components/telephoneKeypad/useShown.ts
+import { useContext, useMemo as useMemo4 } from "react";
+function useShown() {
+  const { setShown, shown } = useContext(Context_default);
+  return useMemo4(() => Object.freeze([shown, setShown]), [shown, setShown]);
+}
+
+// src/components/telephoneKeypad/private/TelephoneKeypad.tsx
+var styles2 = {
+  "webchat__telephone-keypad": {
+    /* Commented out whitelabel styles for now. */
+    // background: getHighContrastDarkThemeColor(highContrastColor: black, darkThemeColor: gray190, string, defaultColor: gray10),
+    // borderRadius: '8px 8px 0px 0px',
+    // boxShadow: '-3px 0px 7px 0px rgba(0, 0, 0, 0.13), -0.6px 0px 1.8px 0px rgba(0, 0, 0, 0.10)',
+    alignItems: "center",
+    background: "var(--webchat-colorNeutralBackground1)",
+    // border: isHighContrastTheme() ? `1px solid ${white}` : 'none',
+    border: "none",
+    borderRadius: "var(--webchat-borderRadiusXLarge)",
+    // boxShadow: 'var(--shadow16)',
+    display: "flex",
+    flexDirection: "column",
+    fontFamily: "var(--webchat-fontFamilyBase)",
+    justifyContent: "center"
+    // margin: 'var(--spacingHorizontalMNudge)'
+  },
+  "webchat__telephone-keypad__box": {
+    boxSizing: "border-box",
+    display: "grid",
+    gap: "16px",
+    gridTemplateColumns: "repeat(3, 1fr)",
+    gridTemplateRows: "repeat(4, 1fr)",
+    justifyItems: "center",
+    padding: "16px",
+    width: "100%"
+  }
+};
+var Orientation = memo3(
+  ({ children, isHorizontal }) => {
+    const classNames = useStyles(styles2);
+    return isHorizontal ? (
+      // <HorizontalDialPadController>{children}</HorizontalDialPadController>
+      false
+    ) : /* @__PURE__ */ React3.createElement("div", { className: classNames["webchat__telephone-keypad__box"] }, children);
+  }
+);
+Orientation.displayName = "TelephoneKeypad:Orientation";
+var TelephoneKeypad = memo3(({ autoFocus, onButtonClick, isHorizontal }) => {
+  const autoFocusRef = useRefFrom2(autoFocus);
+  const classNames = useStyles(styles2);
+  const firstButtonRef = useRef(null);
+  const onButtonClickRef = useRefFrom2(onButtonClick);
+  const [, setShown] = useShown();
+  const handleButton1Click = useCallback2(() => onButtonClickRef.current?.("1"), [onButtonClickRef]);
+  const handleButton2Click = useCallback2(() => onButtonClickRef.current?.("2"), [onButtonClickRef]);
+  const handleButton3Click = useCallback2(() => onButtonClickRef.current?.("3"), [onButtonClickRef]);
+  const handleButton4Click = useCallback2(() => onButtonClickRef.current?.("4"), [onButtonClickRef]);
+  const handleButton5Click = useCallback2(() => onButtonClickRef.current?.("5"), [onButtonClickRef]);
+  const handleButton6Click = useCallback2(() => onButtonClickRef.current?.("6"), [onButtonClickRef]);
+  const handleButton7Click = useCallback2(() => onButtonClickRef.current?.("7"), [onButtonClickRef]);
+  const handleButton8Click = useCallback2(() => onButtonClickRef.current?.("8"), [onButtonClickRef]);
+  const handleButton9Click = useCallback2(() => onButtonClickRef.current?.("9"), [onButtonClickRef]);
+  const handleButton0Click = useCallback2(() => onButtonClickRef.current?.("0"), [onButtonClickRef]);
+  const handleButtonStarClick = useCallback2(() => onButtonClickRef.current?.("star"), [onButtonClickRef]);
+  const handleButtonPoundClick = useCallback2(() => onButtonClickRef.current?.("pound"), [onButtonClickRef]);
+  const handleKeyDown = useCallback2(
+    (event) => {
+      if (event.key === "Escape") {
+        setShown(false);
+      }
+    },
+    [setShown]
+  );
+  useEffect(() => {
+    autoFocusRef.current && firstButtonRef.current?.focus();
+  }, [autoFocusRef, firstButtonRef]);
+  return /* @__PURE__ */ React3.createElement("div", { className: classNames["webchat__telephone-keypad"], onKeyDown: handleKeyDown }, /* @__PURE__ */ React3.createElement(Orientation, { isHorizontal }, /* @__PURE__ */ React3.createElement(
+    Button_default,
+    {
+      button: "1",
+      "data-testid": testIds_default.sendBoxTelephoneKeypadButton1,
+      onClick: handleButton1Click,
+      ref: firstButtonRef
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    Button_default,
+    {
+      button: "2",
+      "data-testid": testIds_default.sendBoxTelephoneKeypadButton2,
+      onClick: handleButton2Click,
+      ruby: "ABC"
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    Button_default,
+    {
+      button: "3",
+      "data-testid": testIds_default.sendBoxTelephoneKeypadButton3,
+      onClick: handleButton3Click,
+      ruby: "DEF"
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    Button_default,
+    {
+      button: "4",
+      "data-testid": testIds_default.sendBoxTelephoneKeypadButton4,
+      onClick: handleButton4Click,
+      ruby: "GHI"
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    Button_default,
+    {
+      button: "5",
+      "data-testid": testIds_default.sendBoxTelephoneKeypadButton5,
+      onClick: handleButton5Click,
+      ruby: "JKL"
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    Button_default,
+    {
+      button: "6",
+      "data-testid": testIds_default.sendBoxTelephoneKeypadButton6,
+      onClick: handleButton6Click,
+      ruby: "MNO"
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    Button_default,
+    {
+      button: "7",
+      "data-testid": testIds_default.sendBoxTelephoneKeypadButton7,
+      onClick: handleButton7Click,
+      ruby: "PQRS"
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    Button_default,
+    {
+      button: "8",
+      "data-testid": testIds_default.sendBoxTelephoneKeypadButton8,
+      onClick: handleButton8Click,
+      ruby: "TUV"
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    Button_default,
+    {
+      button: "9",
+      "data-testid": testIds_default.sendBoxTelephoneKeypadButton9,
+      onClick: handleButton9Click,
+      ruby: "WXYZ"
+    }
+  ), /* @__PURE__ */ React3.createElement(Button_default, { button: "star", "data-testid": testIds_default.sendBoxTelephoneKeypadButtonStar, onClick: handleButtonStarClick }), /* @__PURE__ */ React3.createElement(Button_default, { button: "0", "data-testid": testIds_default.sendBoxTelephoneKeypadButton0, onClick: handleButton0Click, ruby: "+" }), /* @__PURE__ */ React3.createElement(
+    Button_default,
+    {
+      button: "pound",
+      "data-testid": testIds_default.sendBoxTelephoneKeypadButtonPound,
+      onClick: handleButtonPoundClick
+    }
+  )));
+});
+TelephoneKeypad.displayName = "TelephoneKeypad";
+var TelephoneKeypad_default = TelephoneKeypad;
+
+// src/components/telephoneKeypad/Surrogate.tsx
+var TelephoneKeypadSurrogate = memo4((props) => useShown()[0] ? /* @__PURE__ */ React4.createElement(TelephoneKeypad_default, { ...props }) : false);
+TelephoneKeypadSurrogate.displayName = "TelephoneKeypad.Surrogate";
+var Surrogate_default = TelephoneKeypadSurrogate;
+
+// src/components/Theme.tsx
+import React5 from "react";
+var styles3 = {
+  "webchat-fluent__theme": {
+    display: "contents",
+    "--webchat-colorNeutralForeground1": "var(--colorNeutralForeground1, #242424)",
+    "--webchat-colorNeutralForeground2": "var(--colorNeutralForeground2, #424242)",
+    "--webchat-colorNeutralForeground4": "var(--colorNeutralForeground4, #707070)",
+    "--webchat-colorNeutralForegroundDisabled": "var(--colorNeutralForegroundDisabled, #bdbdbd)",
+    "--webchat-colorNeutralBackground1": "var(--colorNeutralBackground1, #ffffff)",
+    "--webchat-colorNeutralBackground4": "var(--colorNeutralBackground4, #f0f0f0)",
+    "--webchat-colorNeutralBackground5": "var(--colorNeutralBackground5, #ebebeb)",
+    "--webchat-colorSubtleBackgroundHover": "var(--colorSubtleBackgroundHover, #f5f5f5)",
+    "--webchat-colorSubtleBackgroundPressed": "var(--colorSubtleBackgroundPressed, #e0e0e0)",
+    "--webchat-colorNeutralStroke1": "var(--colorNeutralStroke1, #d1d1d1)",
+    "--webchat-colorNeutralStroke2": "var(--colorNeutralStroke2, #e0e0e0)",
+    "--webchat-colorNeutralStroke1Selected": "var(--colorNeutralStroke1Selected, #bdbdbd)",
+    "--webchat-colorBrandStroke2": "var(--colorBrandStroke2, #9edcf7)",
+    "--webchat-colorBrandForeground2Hover": "var(--colorBrandForeground2Hover, #015a7a)",
+    "--webchat-colorBrandForeground2Pressed": "var(--colorBrandForeground2Pressed, #01384d)",
+    "--webchat-colorBrandBackground2Hover": "var(--colorBrandBackground2Hover, #bee7fa)",
+    "--webchat-colorBrandBackground2Pressed": "var(--colorBrandBackground2Pressed, #7fd2f5)",
+    "--webchat-colorCompoundBrandForeground1": "var(--colorCompoundBrandForeground1, #077fab)",
+    "--webchat-colorCompoundBrandForeground1Hover": "var(--colorCompoundBrandForeground1Hover, #02729c)",
+    "--webchat-colorCompoundBrandForeground1Pressed": "var(--colorCompoundBrandForeground1Pressed, #01678c)",
+    "--webchat-colorStatusDangerForeground1": "var(--colorStatusDangerForeground1, #b10e1c)",
+    // 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)",
+    "--webchat-borderRadiusLarge": "var(--borderRadiusLarge, 6px)",
+    "--webchat-borderRadiusXLarge": "var(--borderRadiusXLarge, 8px)",
+    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/utils/shadows.ts
+    "--webchat-shadow16": "var(--shadow16, 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108))",
+    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts
+    "--webchat-spacingHorizontalMNudge": "var(--spacingHorizontalMNudge, 10px)",
+    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts
+    "--webchat-fontFamilyBase": `var(--fontFamilyBase, 'Segoe UI)', 'Segoe UI Web (West European))', -apple-system,
+      BlinkMacSystemFont, Roboto, 'Helvetica Neue)', sans-serif)`,
+    "--webchat-fontFamilyNumeric": `var(--fontFamilyNumeric, Bahnschrift, 'Segoe UI)', 'Segoe UI Web (West European))',
+      -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue)', sans-serif)`,
+    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts
+    "--webchat-fontWeightSemibold": "var(--fontWeightSemibold, 600)"
+  }
+};
+function WebchatTheme(props) {
+  const classNames = useStyles(styles3);
+  return /* @__PURE__ */ React5.createElement("div", { className: classNames["webchat-fluent__theme"] }, props.children);
+}
+
+// src/components/sendbox/index.tsx
+import { hooks as hooks8 } from "botframework-webchat-component";
+import cx6 from "classnames";
+import React20, { memo as memo14, useCallback as useCallback8, useRef as useRef6, useState as useState3 } from "react";
+import { useRefFrom as useRefFrom6 } from "use-ref-from";
+
+// src/icons/SendIcon.tsx
+import React6 from "react";
+function SendIcon(props) {
+  return /* @__PURE__ */ React6.createElement(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: props.className,
+      fill: "currentColor",
+      height: "1em",
+      viewBox: "0 0 20 20",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React6.createElement(
+      "path",
+      {
+        d: "M2.18 2.11a.5.5 0 0 1 .54-.06l15 7.5a.5.5 0 0 1 0 .9l-15 7.5a.5.5 0 0 1-.7-.58L3.98 10 2.02 2.63a.5.5 0 0 1 .16-.52Zm2.7 8.39-1.61 6.06L16.38 10 3.27 3.44 4.88 9.5h6.62a.5.5 0 1 1 0 1H4.88Z",
+        fill: "currentColor"
+      }
+    )
+  );
+}
+
+// src/components/dropZone/index.tsx
+import { hooks } from "botframework-webchat-api";
+import cx from "classnames";
+import React8, { memo as memo5, useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { useRefFrom as useRefFrom3 } from "use-ref-from";
+
+// src/icons/AddDocumentIcon.tsx
+import React7 from "react";
+function AddDocumentIcon(props) {
+  return /* @__PURE__ */ React7.createElement(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: props.className,
+      fill: "currentColor",
+      height: "1em",
+      viewBox: "0 0 20 20",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React7.createElement(
+      "path",
+      {
+        d: "M6 2a2 2 0 0 0-2 2v5.2c.32-.08.66-.15 1-.18V4a1 1 0 0 1 1-1h4v3.5c0 .83.67 1.5 1.5 1.5H15v8a1 1 0 0 1-1 1h-3.6c-.18.36-.4.7-.66 1H14a2 2 0 0 0 2-2V7.41c0-.4-.16-.78-.44-1.06l-3.91-3.91A1.5 1.5 0 0 0 10.59 2H6Zm8.8 5h-3.3a.5.5 0 0 1-.5-.5V3.2L14.8 7ZM10 14.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm-4-2a.5.5 0 0 0-1 0V14H3.5a.5.5 0 0 0 0 1H5v1.5a.5.5 0 0 0 1 0V15h1.5a.5.5 0 0 0 0-1H6v-1.5Z",
+        fill: "currentColor"
+      }
+    )
+  );
+}
+
+// src/components/dropZone/index.tsx
+var { useLocalizer } = hooks;
+var styles4 = {
+  "webchat-fluent__sendbox__attachment-drop-zone": {
+    backgroundColor: "var(--webchat-colorNeutralBackground4)",
+    borderRadius: "inherit",
+    cursor: "copy",
+    display: "grid",
+    gap: "8px",
+    inset: "0",
+    placeContent: "center",
+    placeItems: "center",
+    position: "absolute"
+  },
+  "webchat-fluent__sendbox__attachment-drop-zone--droppable": {
+    backgroundColor: "#e00",
+    color: "White"
+  },
+  "webchat-fluent__sendbox__attachment-drop-zone-icon": {
+    height: "36px",
+    // Set "pointer-events: none" to ignore dragging over the icon. Otherwise, when dragging over the icon, it would disable the "--droppable" modifier.
+    pointerEvents: "none",
+    width: "36px"
+  }
+};
+var handleDragOver = (event) => {
+  event.preventDefault();
+};
+var isFilesTransferEvent = (event) => !!event.dataTransfer?.types?.some((type) => type.toLowerCase() === "files");
+function isDescendantOf(target, ancestor) {
+  let current = target.parentNode;
+  while (current) {
+    if (current === ancestor) {
+      return true;
+    }
+    current = current.parentNode;
+  }
+  return false;
+}
+var DropZone = (props) => {
+  const [dropZoneState, setDropZoneState] = useState2(false);
+  const classNames = useStyles(styles4);
+  const dropZoneRef = useRef2(null);
+  const localize = useLocalizer();
+  const onFilesAddedRef = useRefFrom3(props.onFilesAdded);
+  useEffect2(() => {
+    let entranceCounter = 0;
+    const handleDragEnter = (event) => {
+      entranceCounter++;
+      if (isFilesTransferEvent(event)) {
+        setDropZoneState(
+          dropZoneRef.current && (event.target === dropZoneRef.current || event.target instanceof HTMLElement && isDescendantOf(event.target, dropZoneRef.current)) ? "droppable" : "visible"
+        );
+      }
+    };
+    const handleDragLeave = () => --entranceCounter <= 0 && setDropZoneState(false);
+    document.addEventListener("dragenter", handleDragEnter, false);
+    document.addEventListener("dragleave", handleDragLeave, false);
+    return () => {
+      document.removeEventListener("dragenter", handleDragEnter);
+      document.removeEventListener("dragleave", handleDragLeave);
+    };
+  }, [setDropZoneState]);
+  const handleDrop = useCallback3(
+    (event) => {
+      event.preventDefault();
+      setDropZoneState(false);
+      if (!isFilesTransferEvent(event.nativeEvent)) {
+        return;
+      }
+      onFilesAddedRef.current([...event.dataTransfer.files]);
+    },
+    [onFilesAddedRef, setDropZoneState]
+  );
+  return dropZoneState ? /* @__PURE__ */ React8.createElement(
+    "div",
+    {
+      className: cx(classNames["webchat-fluent__sendbox__attachment-drop-zone"], {
+        [classNames["webchat-fluent__sendbox__attachment-drop-zone--droppable"]]: dropZoneState === "droppable"
+      }),
+      "data-testid": testIds_default.sendBoxDropZone,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      ref: dropZoneRef
+    },
+    /* @__PURE__ */ React8.createElement(AddDocumentIcon, { className: classNames["webchat-fluent__sendbox__attachment-drop-zone-icon"] }),
+    localize("TEXT_INPUT_DROP_ZONE")
+  ) : null;
+};
+DropZone.displayName = "DropZone";
+var dropZone_default = memo5(DropZone);
+
+// src/components/DropZone.tsx
+var DropZone_default = dropZone_default;
+
+// src/components/suggestedActions/index.tsx
+import { hooks as hooks3 } from "botframework-webchat-component";
+import cx3 from "classnames";
+import React11, { memo as memo8 } from "react";
+
+// src/components/suggestedActions/SuggestedAction.tsx
+import { hooks as hooks2 } from "botframework-webchat-component";
+import cx2 from "classnames";
+import React10, { memo as memo7, useCallback as useCallback4, useRef as useRef4 } from "react";
+
+// src/components/suggestedActions/AccessibleButton.tsx
+import React9, { forwardRef as forwardRef2, memo as memo6, useRef as useRef3 } from "react";
+var preventDefaultHandler = (event) => event.preventDefault();
+var AccessibleButton = forwardRef2(
+  ({ "aria-hidden": ariaHidden, children, disabled, onClick, tabIndex, ...props }, forwardedRef) => {
+    const targetRef = useRef3(null);
+    const ref = forwardedRef || targetRef;
+    return /* @__PURE__ */ React9.createElement(
+      "button",
+      {
+        "aria-disabled": disabled ? "true" : "false",
+        "aria-hidden": ariaHidden,
+        onClick: disabled ? preventDefaultHandler : onClick,
+        ref,
+        tabIndex,
+        ...disabled && {
+          "aria-disabled": "true",
+          tabIndex: -1
+        },
+        ...props,
+        type: "button"
+      },
+      children
+    );
+  }
+);
+var AccessibleButton_default = memo6(AccessibleButton);
+
+// src/components/suggestedActions/SuggestedAction.tsx
+var { useDisabled, useFocus, usePerformCardAction, useScrollToEnd, useStyleSet, useSuggestedActions } = hooks2;
+var styles5 = {
+  "webchat-fluent__suggested-action": {
+    alignItems: "center",
+    background: "transparent",
+    border: "1px solid var(--webchat-colorBrandStroke2)",
+    borderRadius: "8px",
+    cursor: "pointer",
+    display: "flex",
+    fontSize: "12px",
+    gap: "4px",
+    padding: "4px 8px 4px",
+    textAlign: "start",
+    transition: "all .15s ease-out",
+    "@media (hover: hover)": {
+      '&:not([aria-disabled="true"]):hover': {
+        backgroundColor: "var(--webchat-colorBrandBackground2Hover)",
+        color: "var(--webchat-colorBrandForeground2Hover)"
+      }
+    },
+    '&:not([aria-disabled="true"]):active': {
+      backgroundColor: "var(--webchat-colorBrandBackground2Pressed)",
+      color: "var(--webchat-colorBrandForeground2Pressed)"
+    },
+    '&[aria-disabled="true"]': {
+      color: "var(--webchat-colorNeutralForegroundDisabled)",
+      cursor: "not-allowed"
+    }
+  },
+  "webchat-fluent__suggested-action__image": {
+    height: "12px"
+  }
+};
+function SuggestedAction({
+  buttonText,
+  className,
+  displayText,
+  image,
+  imageAlt,
+  text,
+  type,
+  value
+}) {
+  const [_, setSuggestedActions] = useSuggestedActions();
+  const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();
+  const [disabled] = useDisabled();
+  const focus = useFocus();
+  const focusRef = useRef4(null);
+  const performCardAction = usePerformCardAction();
+  const classNames = useStyles(styles5);
+  const scrollToEnd = useScrollToEnd();
+  const handleClick = useCallback4(
+    ({ target }) => {
+      (async function() {
+        await focus("sendBoxWithoutKeyboard");
+        performCardAction({ displayText, text, type, value }, { target });
+        type === "openUrl" && setSuggestedActions([]);
+        scrollToEnd();
+      })();
+    },
+    [displayText, focus, performCardAction, scrollToEnd, setSuggestedActions, text, type, value]
+  );
+  return /* @__PURE__ */ React10.createElement(
+    AccessibleButton_default,
+    {
+      className: cx2(
+        classNames["webchat-fluent__suggested-action"],
+        suggestedActionStyleSet + "",
+        (className || "") + ""
+      ),
+      disabled,
+      onClick: handleClick,
+      ref: focusRef,
+      type: "button"
+    },
+    image && /* @__PURE__ */ React10.createElement("img", { alt: imageAlt, className: classNames["webchat-fluent__suggested-action__image"], src: image }),
+    /* @__PURE__ */ React10.createElement("span", null, buttonText)
+  );
+}
+var SuggestedAction_default = memo7(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, useStyleOptions, useStyleSet: useStyleSet2, useSuggestedActions: useSuggestedActions2 } = hooks3;
+var styles6 = {
+  "webchat-fluent__suggested-actions": {
+    alignItems: "flex-end",
+    alignSelf: "flex-end",
+    display: "flex",
+    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 SuggestedActionStackedOrFlowContainer(props) {
+  const [{ suggestedActionLayout }] = useStyleOptions();
+  const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet2();
+  const classNames = useStyles(styles6);
+  return /* @__PURE__ */ React11.createElement(
+    "div",
+    {
+      "aria-label": props["aria-label"],
+      "aria-live": "polite",
+      "aria-orientation": "vertical",
+      className: cx3(
+        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 && !!React11.Children.count(props.children) && props.children
+  );
+}
+function SuggestedActions() {
+  const classNames = useStyles(styles6);
+  const localize = useLocalizer2();
+  const [suggestedActions] = useSuggestedActions2();
+  const children = suggestedActions.map((cardAction, index) => {
+    const { displayText, image, imageAltText, text, type, value } = cardAction;
+    if (!suggestedActions?.length) {
+      return null;
+    }
+    return /* @__PURE__ */ React11.createElement(
+      SuggestedAction_default,
+      {
+        buttonText: computeSuggestedActionText(cardAction),
+        displayText,
+        image,
+        imageAlt: image && (imageAltText || text),
+        itemIndex: index,
+        key: index,
+        text,
+        type,
+        value
+      }
+    );
+  });
+  return /* @__PURE__ */ React11.createElement(
+    SuggestedActionStackedOrFlowContainer,
+    {
+      "aria-label": localize("SUGGESTED_ACTIONS_LABEL_ALT"),
+      className: classNames["webchat-fluent__suggested-actions"]
+    },
+    children
+  );
+}
+var suggestedActions_default = memo8(SuggestedActions);
+
+// src/components/SuggestedActions.tsx
+var SuggestedActions_default = suggestedActions_default;
+
+// src/components/sendbox/AddAttachmentButton.tsx
+import { hooks as hooks4 } from "botframework-webchat-api";
+import React14, { useCallback as useCallback5, useRef as useRef5, memo as memo10 } from "react";
+import { useRefFrom as useRefFrom4 } from "use-ref-from";
+
+// src/icons/AttachmentIcon.tsx
+import React12 from "react";
+function AttachmentIcon(props) {
+  return /* @__PURE__ */ React12.createElement(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: props.className,
+      fill: "currentColor",
+      height: "1em",
+      viewBox: "0 0 20 20",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React12.createElement(
+      "path",
+      {
+        d: "m4.83 10.48 5.65-5.65a3 3 0 0 1 4.25 4.24L8 15.8a1.5 1.5 0 0 1-2.12-2.12l6-6.01a.5.5 0 1 0-.7-.71l-6 6.01a2.5 2.5 0 0 0 3.53 3.54l6.71-6.72a4 4 0 1 0-5.65-5.66L4.12 9.78a.5.5 0 0 0 .7.7Z",
+        fill: "currentColor"
+      }
+    )
+  );
+}
+
+// src/components/sendbox/Toolbar.tsx
+import cx4 from "classnames";
+import React13, { memo as memo9 } from "react";
+var styles7 = {
+  "webchat-fluent__sendbox__toolbar": {
+    display: "flex",
+    gap: "4px",
+    marginInlineStart: "auto"
+  },
+  "webchat-fluent__sendbox__toolbar-button": {
+    alignItems: "center",
+    appearance: "none",
+    aspectRatio: "1",
+    background: "transparent",
+    border: "none",
+    borderRadius: "var(--webchat-borderRadiusSmall)",
+    cursor: "pointer",
+    display: "flex",
+    justifyContent: "center",
+    padding: "3px",
+    width: "32px",
+    "> svg": {
+      fontSize: "20px",
+      pointerEvents: "none"
+    },
+    "@media (hover: hover)": {
+      '&:not([aria-disabled="true"]):hover': {
+        backgroundColor: "var(--webchat-colorSubtleBackgroundHover)",
+        color: "var(--webchat-colorCompoundBrandForeground1Hover)"
+      }
+    },
+    '&:not([aria-disabled="true"]):active': {
+      backgroundColor: "var(--webchat-colorSubtleBackgroundPressed)",
+      color: "var(--webchat-colorCompoundBrandForeground1Pressed)"
+    },
+    '&[aria-disabled="true"]': {
+      color: "var(--webchat-colorNeutralForegroundDisabled)",
+      cursor: "not-allowed"
+    }
+  },
+  "webchat-fluent__sendbox__toolbar-separator": {
+    alignSelf: "center",
+    borderInlineEnd: "1px solid var(--webchat-colorNeutralStroke2)",
+    height: "28px",
+    "&:first-child, &:last-child, &:only-child": {
+      display: "none"
+    }
+  }
+};
+var preventDefaultHandler2 = (event) => event.preventDefault();
+var ToolbarButton = memo9(
+  (props) => {
+    const classNames = useStyles(styles7);
+    return /* @__PURE__ */ React13.createElement(
+      "button",
+      {
+        "aria-label": props["aria-label"],
+        className: cx4(classNames["webchat-fluent__sendbox__toolbar-button"], props.className),
+        "data-testid": props["data-testid"],
+        onClick: props.disabled ? preventDefaultHandler2 : props.onClick,
+        type: props.type === "submit" ? "submit" : "button",
+        ...props.disabled && {
+          "aria-disabled": "true",
+          tabIndex: -1
+        }
+      },
+      props.children
+    );
+  }
+);
+ToolbarButton.displayName = "ToolbarButton";
+var Toolbar = memo9((props) => {
+  const classNames = useStyles(styles7);
+  return /* @__PURE__ */ React13.createElement("div", { className: cx4(classNames["webchat-fluent__sendbox__toolbar"], props.className) }, props.children);
+});
+Toolbar.displayName = "Toolbar";
+var ToolbarSeparator = memo9(
+  (props) => {
+    const classNames = useStyles(styles7);
+    return /* @__PURE__ */ React13.createElement(
+      "div",
+      {
+        "aria-orientation": "vertical",
+        className: cx4(classNames["webchat-fluent__sendbox__toolbar-separator"], props.className),
+        role: "separator"
+      }
+    );
+  }
+);
+ToolbarSeparator.displayName = "ToolbarSeparator";
+
+// src/components/sendbox/AddAttachmentButton.tsx
+var { useLocalizer: useLocalizer3, useStyleOptions: useStyleOptions2 } = hooks4;
+var styles8 = {
+  "webchat-fluent__sendbox__add-attachment": {
+    display: "grid"
+  },
+  "webchat-fluent__sendbox__add-attachment-input": {
+    fontSize: 0,
+    height: 0,
+    opacity: 0,
+    width: 0
+  }
+};
+function AddAttachmentButton(props) {
+  const inputRef = useRef5(null);
+  const classNames = useStyles(styles8);
+  const localize = useLocalizer3();
+  const [{ uploadAccept, uploadMultiple }] = useStyleOptions2();
+  const onFilesAddedRef = useRefFrom4(props.onFilesAdded);
+  const handleClick = useCallback5(() => inputRef.current?.click(), [inputRef]);
+  const handleFileChange = useCallback5(
+    ({ target: { files } }) => {
+      if (files) {
+        onFilesAddedRef.current?.([...files]);
+        if (inputRef.current) {
+          inputRef.current.value = "";
+        }
+      }
+    },
+    [inputRef, onFilesAddedRef]
+  );
+  return /* @__PURE__ */ React14.createElement("div", { className: classNames["webchat-fluent__sendbox__add-attachment"] }, /* @__PURE__ */ React14.createElement(
+    "input",
+    {
+      accept: uploadAccept,
+      "aria-disabled": props.disabled,
+      "aria-hidden": "true",
+      className: classNames["webchat-fluent__sendbox__add-attachment-input"],
+      multiple: uploadMultiple,
+      onInput: props.disabled ? void 0 : handleFileChange,
+      readOnly: props.disabled,
+      ref: inputRef,
+      role: "button",
+      tabIndex: -1,
+      type: "file"
+    }
+  ), /* @__PURE__ */ React14.createElement(
+    ToolbarButton,
+    {
+      "aria-label": localize("TEXT_INPUT_UPLOAD_BUTTON_ALT"),
+      "data-testid": testIds_default.sendBoxUploadButton,
+      onClick: handleClick
+    },
+    /* @__PURE__ */ React14.createElement(AttachmentIcon, null)
+  ));
+}
+var AddAttachmentButton_default = memo10(AddAttachmentButton);
+
+// src/components/sendbox/Attachments.tsx
+import { hooks as hooks5 } from "botframework-webchat-api";
+import React15, { memo as memo11 } from "react";
+var { useLocalizer: useLocalizer4 } = hooks5;
+var styles9 = {
+  "webchat-fluent__sendbox__attachment": {
+    border: "1px solid var(--webchat-colorNeutralStroke1)",
+    borderRadius: "var(--webchat-borderRadiusLarge)",
+    cursor: "default",
+    padding: "6px 8px",
+    width: "fit-content"
+  }
+};
+var attachmentsPluralStringIds = {
+  one: "TEXT_INPUT_ATTACHMENTS_ONE",
+  two: "TEXT_INPUT_ATTACHMENTS_TWO",
+  few: "TEXT_INPUT_ATTACHMENTS_FEW",
+  many: "TEXT_INPUT_ATTACHMENTS_MANY",
+  other: "TEXT_INPUT_ATTACHMENTS_OTHER"
+};
+function Attachments({
+  attachments
+}) {
+  const classNames = useStyles(styles9);
+  const localizeWithPlural = useLocalizer4({ plural: true });
+  return attachments.length ? /* @__PURE__ */ React15.createElement("div", { className: classNames["webchat-fluent__sendbox__attachment"] }, localizeWithPlural(attachmentsPluralStringIds, attachments.length)) : null;
+}
+var Attachments_default = memo11(Attachments);
+
+// src/components/sendbox/ErrorMessage.tsx
+import React16, { memo as memo12 } from "react";
+var styles10 = {
+  "webchat-fluent___sendbox__error-message": {
+    fontSize: 0,
+    height: 0,
+    width: 0,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    color: "transparent"
+  }
+};
+function ErrorMessage(props) {
+  const classNames = useStyles(styles10);
+  return (
+    // eslint-disable-next-line react/forbid-dom-props
+    /* @__PURE__ */ React16.createElement("span", { className: classNames["webchat-fluent___sendbox__error-message"], id: props.id, role: "alert" }, props.error)
+  );
+}
+var ErrorMessage_default = memo12(ErrorMessage);
+
+// src/components/sendbox/TelephoneKeypadToolbarButton.tsx
+import React18, { memo as memo13, useCallback as useCallback6 } from "react";
+import { hooks as hooks6 } from "botframework-webchat-api";
+
+// src/icons/TelephoneKeypad.tsx
+import React17 from "react";
+function TelephoneKeypadIcon(props) {
+  return /* @__PURE__ */ React17.createElement(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: props.className,
+      fill: "currentColor",
+      height: "1em",
+      viewBox: "0 0 20 20",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React17.createElement(
+      "path",
+      {
+        d: "M6 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm0 4a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM7.25 12a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM10 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM11.25 8a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM10 13.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM11.25 16a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM14 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM15.25 8a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM14 13.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z",
+        fill: "currentColor"
+      }
+    )
+  );
+}
+
+// src/components/sendbox/TelephoneKeypadToolbarButton.tsx
+var { useLocalizer: useLocalizer5 } = hooks6;
+var TelephoneKeypadToolbarButton = memo13(() => {
+  const [, setTelephoneKeypadShown] = useShown();
+  const localize = useLocalizer5();
+  const handleClick = useCallback6(() => setTelephoneKeypadShown((shown) => !shown), [setTelephoneKeypadShown]);
+  return /* @__PURE__ */ React18.createElement(
+    ToolbarButton,
+    {
+      "aria-label": localize("TEXT_INPUT_TELEPHONE_KEYPAD_BUTTON_ALT"),
+      "data-testid": testIds_default.sendBoxTelephoneKeypadToolbarButton,
+      onClick: handleClick
+    },
+    /* @__PURE__ */ React18.createElement(TelephoneKeypadIcon, null)
+  );
+});
+TelephoneKeypadToolbarButton.displayName = "SendBox.TelephoneKeypadToolbarButton";
+var TelephoneKeypadToolbarButton_default = TelephoneKeypadToolbarButton;
+
+// src/components/sendbox/TextArea.tsx
+import cx5 from "classnames";
+import React19, { forwardRef as forwardRef3, useCallback as useCallback7 } from "react";
+var styles11 = {
+  "webchat-fluent__sendbox__text-area": {
+    display: "grid",
+    gridTemplateAreas: `'main'`,
+    maxHeight: "200px",
+    overflow: "hidden"
+  },
+  "webchat-fluent__sendbox__text-area--hidden": {
+    // TODO: Not perfect way of hiding the text box.
+    height: 0,
+    visibility: "collapse"
+  },
+  "webchat-fluent__sendbox__text-area-shared": {
+    border: "none",
+    font: "inherit",
+    gridArea: "main",
+    outline: "inherit",
+    overflowWrap: "anywhere",
+    resize: "inherit",
+    scrollbarGutter: "stable"
+  },
+  "webchat-fluent__sendbox__text-area-doppelganger": {
+    overflow: "hidden",
+    visibility: "hidden",
+    whiteSpace: "pre-wrap"
+  },
+  "webchat-fluent__sendbox__text-area-input": {
+    height: "100%",
+    padding: 0
+  },
+  "webchat-fluent__sendbox__text-area-input--scroll": {
+    /* Firefox */
+    MozScrollbarColor: "var(--webchat-colorNeutralBackground5) var(--webchat-colorNeutralForeground2)",
+    MozScrollbarWidth: "thin",
+    /* Chrome, Edge, and Safari */
+    "&::-webkit-scrollbar": {
+      width: "8px"
+    },
+    "&::-webkit-scrollbar-track": {
+      backgroundColor: "var(--webchat-colorNeutralBackground5)",
+      borderRadius: "16px"
+    },
+    "&::-webkit-scrollbar-thumb": {
+      backgroundColor: "var(--webchat-colorNeutralForeground2)",
+      borderRadius: "16px"
+    },
+    "&::-webkit-scrollbar-corner": {
+      backgroundColor: "var(--webchat-colorNeutralBackground5)"
+    }
+  }
+};
+var TextArea = forwardRef3((props, ref) => {
+  const classNames = useStyles(styles11);
+  const handleKeyDown = useCallback7((event) => {
+    if (!event.shiftKey && event.key === "Enter") {
+      event.preventDefault();
+      if ("form" in event.target && event.target.form instanceof HTMLFormElement) {
+        event.target?.form?.requestSubmit();
+      }
+    }
+  }, []);
+  return /* @__PURE__ */ React19.createElement(
+    "div",
+    {
+      className: cx5(
+        classNames["webchat-fluent__sendbox__text-area"],
+        {
+          [classNames["webchat-fluent__sendbox__text-area--hidden"]]: props.hidden
+        },
+        props.className
+      ),
+      role: props.hidden ? "hidden" : void 0
+    },
+    /* @__PURE__ */ React19.createElement(
+      "div",
+      {
+        className: cx5(
+          classNames["webchat-fluent__sendbox__text-area-doppelganger"],
+          classNames["webchat-fluent__sendbox__text-area-shared"],
+          classNames["webchat-fluent__sendbox__text-area-input--scroll"]
+        )
+      },
+      props.value || props.placeholder,
+      " "
+    ),
+    /* @__PURE__ */ React19.createElement(
+      "textarea",
+      {
+        "aria-label": props["aria-label"],
+        className: cx5(
+          classNames["webchat-fluent__sendbox__text-area-input"],
+          classNames["webchat-fluent__sendbox__text-area-shared"],
+          classNames["webchat-fluent__sendbox__text-area-input--scroll"]
+        ),
+        "data-testid": props["data-testid"],
+        onInput: props.onInput,
+        onKeyDown: handleKeyDown,
+        placeholder: props.placeholder,
+        ref,
+        rows: props.startRows ?? 1,
+        tabIndex: props.hidden ? -1 : void 0,
+        value: props.value
+      }
+    )
+  );
+});
+TextArea.displayName = "TextArea";
+var TextArea_default = TextArea;
+
+// src/components/sendbox/private/useSubmitError.ts
+import { hooks as hooks7 } from "botframework-webchat-component";
+import { useMemo as useMemo5 } from "react";
+import { useRefFrom as useRefFrom5 } from "use-ref-from";
+var { useConnectivityStatus, useLocalizer: useLocalizer6 } = hooks7;
+var useSubmitError = ({
+  attachments,
+  message
+}) => {
+  const [connectivityStatus] = useConnectivityStatus();
+  const localize = useLocalizer6();
+  const submitErrorRef = useRefFrom5(
+    connectivityStatus !== "connected" && connectivityStatus !== "reconnected" ? "offline" : !message && !attachments.length ? "empty" : void 0
+  );
+  const errorMessageStringMap = useMemo5(
+    () => Object.freeze(
+      (/* @__PURE__ */ new Map()).set("empty", localize("SEND_BOX_IS_EMPTY_TOOLTIP_ALT")).set("offline", localize("CONNECTIVITY_STATUS_ALT_FATAL"))
+    ),
+    [localize]
+  );
+  return useMemo5(
+    () => Object.freeze([submitErrorRef, submitErrorRef.current && errorMessageStringMap.get(submitErrorRef.current)]),
+    [errorMessageStringMap, submitErrorRef]
+  );
+};
+var useSubmitError_default = useSubmitError;
+
+// src/components/sendbox/private/useUniqueId.ts
+import { useMemo as useMemo6 } from "react";
+function useUniqueId(prefix) {
+  const id = useMemo6(() => Math.random().toString(36).substr(2, 5), []);
+  prefix = prefix ? `${prefix}--` : "";
+  return `${prefix}${id}`;
+}
+
+// src/components/sendbox/index.tsx
+var { useStyleOptions: useStyleOptions3, useMakeThumbnail, useLocalizer: useLocalizer7, useSendBoxAttachments, useSendMessage } = hooks8;
+var styles12 = {
+  "webchat-fluent__sendbox": {
+    color: "var(--webchat-colorNeutralForeground1)",
+    fontFamily: "var(--webchat-fontFamilyBase)",
+    padding: "0 10px 10px",
+    textRendering: "optimizeLegibility"
+  },
+  "webchat-fluent__sendbox__sendbox": {
+    backgroundColor: "var(--webchat-colorNeutralBackground1)",
+    border: "1px solid var(--webchat-colorNeutralStroke1)",
+    borderRadius: "var(--webchat-borderRadiusLarge)",
+    display: "grid",
+    fontFamily: "var(--webchat-fontFamilyBase)",
+    fontSize: "14px",
+    gap: "6px",
+    lineHeight: "20px",
+    padding: "8px",
+    position: "relative",
+    "&:focus-within": {
+      borderColor: "var(--webchat-colorNeutralStroke1Selected)",
+      // TODO clarify with design the color:
+      // - Teams is using colorCompoundBrandForeground1
+      // - Fluent is using colorCompoundBrandStroke
+      // - we are using colorCompoundBrandForeground1Hover
+      boxShadow: "inset 0 -6px 0 -3px var(--webchat-colorCompoundBrandForeground1Hover)"
+    }
+  },
+  "webchat-fluent__sendbox__sendbox-text": {
+    backgroundColor: "transparent",
+    border: "none",
+    flex: "auto",
+    fontFamily: "var(--webchat-fontFamilyBase)",
+    fontSize: "14px",
+    lineHeight: "20px",
+    outline: "none",
+    padding: "4px 4px 0",
+    resize: "none"
+  },
+  "webchat-fluent__sendbox__sendbox-controls": {
+    alignItems: "center",
+    display: "flex",
+    paddingInlineStart: "4px"
+  },
+  "webchat-fluent__sendbox__text-counter": {
+    color: "var(--webchat-colorNeutralForeground4)",
+    cursor: "default",
+    fontFamily: "var(--webchat-fontFamilyNumeric)",
+    fontSize: "10px",
+    lineHeight: "14px"
+  },
+  "webchat-fluent__sendbox__text-counter--error": {
+    color: "var(--webchat-colorStatusDangerForeground1)"
+  }
+};
+function SendBox(props) {
+  const inputRef = useRef6(null);
+  const [message, setMessage] = useState3("");
+  const [attachments, setAttachments] = useSendBoxAttachments();
+  const [{ hideTelephoneKeypadButton, hideUploadButton, maxMessageLength }] = useStyleOptions3();
+  const isMessageLengthExceeded = !!maxMessageLength && message.length > maxMessageLength;
+  const classNames = useStyles(styles12);
+  const localize = useLocalizer7();
+  const sendMessage = useSendMessage();
+  const makeThumbnail = useMakeThumbnail();
+  const errorMessageId = useUniqueId("webchat-fluent__sendbox__error-message-id");
+  const [errorRef, errorMessage] = useSubmitError_default({ message, attachments });
+  const [telephoneKeypadShown] = useShown();
+  const attachmentsRef = useRefFrom6(attachments);
+  const messageRef = useRefFrom6(message);
+  const handleSendBoxClick = useCallback8(
+    (event) => {
+      if ("tabIndex" in event.target && typeof event.target.tabIndex === "number" && event.target.tabIndex >= 0) {
+        return;
+      }
+      inputRef.current?.focus();
+    },
+    [inputRef]
+  );
+  const handleMessageChange = useCallback8(
+    (event) => setMessage(event.currentTarget.value),
+    [setMessage]
+  );
+  const handleAddFiles = useCallback8(
+    async (inputFiles) => {
+      const newAttachments = Object.freeze(
+        await Promise.all(
+          inputFiles.map(
+            (file) => makeThumbnail(file).then(
+              (thumbnailURL) => Object.freeze({
+                blob: file,
+                ...thumbnailURL && { thumbnailURL }
+              })
+            )
+          )
+        )
+      );
+      setAttachments(newAttachments);
+    },
+    [makeThumbnail, setAttachments]
+  );
+  const handleFormSubmit = useCallback8(
+    (event) => {
+      event.preventDefault();
+      if (errorRef.current !== "empty" && !isMessageLengthExceeded) {
+        sendMessage(messageRef.current, void 0, { attachments: attachmentsRef.current });
+        setMessage("");
+        setAttachments([]);
+      }
+      inputRef.current?.focus();
+    },
+    [attachmentsRef, messageRef, sendMessage, setAttachments, setMessage, isMessageLengthExceeded, errorRef, inputRef]
+  );
+  const handleTelephoneKeypadButtonClick = useCallback8(
+    // TODO: We need more official way of sending DTMF.
+    (dtmf) => sendMessage(`/DTMF ${dtmf}`),
+    [sendMessage]
+  );
+  const aria = {
+    "aria-invalid": "false",
+    ...errorMessage && {
+      "aria-invalid": "true",
+      "aria-errormessage": errorMessageId
+    }
+  };
+  return /* @__PURE__ */ React20.createElement("form", { ...aria, className: cx6(classNames["webchat-fluent__sendbox"], props.className), onSubmit: handleFormSubmit }, /* @__PURE__ */ React20.createElement(SuggestedActions_default, null), /* @__PURE__ */ React20.createElement("div", { className: cx6(classNames["webchat-fluent__sendbox__sendbox"]), onClickCapture: handleSendBoxClick }, /* @__PURE__ */ React20.createElement(
+    Surrogate_default,
+    {
+      autoFocus: true,
+      isHorizontal: false,
+      onButtonClick: handleTelephoneKeypadButtonClick
+    }
+  ), /* @__PURE__ */ React20.createElement(
+    TextArea_default,
+    {
+      "aria-label": isMessageLengthExceeded ? localize("TEXT_INPUT_LENGTH_EXCEEDED_ALT") : localize("TEXT_INPUT_ALT"),
+      className: classNames["webchat-fluent__sendbox__sendbox-text"],
+      "data-testid": testIds_default.sendBoxTextBox,
+      hidden: telephoneKeypadShown,
+      onInput: handleMessageChange,
+      placeholder: props.placeholder ?? localize("TEXT_INPUT_PLACEHOLDER"),
+      ref: inputRef,
+      value: message
+    }
+  ), /* @__PURE__ */ React20.createElement(Attachments_default, { attachments }), /* @__PURE__ */ React20.createElement("div", { className: cx6(classNames["webchat-fluent__sendbox__sendbox-controls"]) }, maxMessageLength && /* @__PURE__ */ React20.createElement(
+    "div",
+    {
+      className: cx6(classNames["webchat-fluent__sendbox__text-counter"], {
+        [classNames["webchat-fluent__sendbox__text-counter--error"]]: isMessageLengthExceeded
+      })
+    },
+    `${message.length}/${maxMessageLength}`
+  ), /* @__PURE__ */ React20.createElement(Toolbar, null, !hideTelephoneKeypadButton && /* @__PURE__ */ React20.createElement(TelephoneKeypadToolbarButton_default, null), !hideUploadButton && /* @__PURE__ */ React20.createElement(AddAttachmentButton_default, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ React20.createElement(ToolbarSeparator, null), /* @__PURE__ */ React20.createElement(
+    ToolbarButton,
+    {
+      "aria-label": localize("TEXT_INPUT_SEND_BUTTON_ALT"),
+      "data-testid": testIds_default.sendBoxSendButton,
+      disabled: isMessageLengthExceeded,
+      type: "submit"
+    },
+    /* @__PURE__ */ React20.createElement(SendIcon, null)
+  ))), /* @__PURE__ */ React20.createElement(DropZone_default, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ React20.createElement(ErrorMessage_default, { error: errorMessage, id: errorMessageId })));
+}
+var sendbox_default = memo14(SendBox);
+
+// src/components/SendBox.tsx
+var SendBox_default = sendbox_default;
+
+// src/private/FluentThemeProvider.tsx
+var { ThemeProvider } = Components;
+var sendBoxMiddleware = [() => () => () => SendBox_default];
+var FluentThemeProvider = ({ children }) => /* @__PURE__ */ React21.createElement(WebchatTheme, null, /* @__PURE__ */ React21.createElement(Provider_default, null, /* @__PURE__ */ React21.createElement(ThemeProvider, { sendBoxMiddleware }, children)));
+var FluentThemeProvider_default = memo15(FluentThemeProvider);
+
+// src/index.ts
+injectMetaTag("botframework-webchat-fluent-theme:version", "4.17.0-main.20240416.e3f5401");
+export {
+  FluentThemeProvider_default as FluentThemeProvider,
+  testIds_default as testIds
+};
+//# sourceMappingURL=index.mjs.map