botframework-webchat-fluent-theme 4.17.0-main.20240425.edca85d → 4.17.0-main.20240501.533c151

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.
package/dist/index.js DELETED
@@ -1,1151 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
-
30
- // src/index.ts
31
- var src_exports = {};
32
- __export(src_exports, {
33
- FluentThemeProvider: () => FluentThemeProvider_default,
34
- testIds: () => testIds_default
35
- });
36
- module.exports = __toCommonJS(src_exports);
37
- var import_inject_meta_tag = require("inject-meta-tag");
38
-
39
- // src/private/FluentThemeProvider.tsx
40
- var import_botframework_webchat_component10 = require("botframework-webchat-component");
41
- var import_react27 = __toESM(require("react"));
42
-
43
- // src/components/telephoneKeypad/Provider.tsx
44
- var import_react2 = __toESM(require("react"));
45
-
46
- // src/components/telephoneKeypad/private/Context.ts
47
- var import_react = require("react");
48
- var Context = (0, import_react.createContext)(
49
- new Proxy({}, {
50
- get() {
51
- throw new Error("botframework-webchat: This hook can only used under its corresponding <Provider>.");
52
- }
53
- })
54
- );
55
- Context.displayName = "TelephoneKeypad.Context";
56
- var Context_default = Context;
57
-
58
- // src/components/telephoneKeypad/Provider.tsx
59
- var Provider = (0, import_react2.memo)(({ children }) => {
60
- const [shown, setShown] = (0, import_react2.useState)(false);
61
- const context = (0, import_react2.useMemo)(
62
- () => Object.freeze({
63
- setShown,
64
- shown
65
- }),
66
- [setShown, shown]
67
- );
68
- return /* @__PURE__ */ import_react2.default.createElement(Context_default.Provider, { value: context }, children);
69
- });
70
- var Provider_default = Provider;
71
-
72
- // src/components/telephoneKeypad/Surrogate.tsx
73
- var import_react8 = __toESM(require("react"));
74
-
75
- // src/components/telephoneKeypad/private/TelephoneKeypad.tsx
76
- var import_react7 = __toESM(require("react"));
77
- var import_classnames = __toESM(require("classnames"));
78
- var import_use_ref_from2 = require("use-ref-from");
79
- var import_botframework_webchat_component = require("botframework-webchat-component");
80
-
81
- // src/components/telephoneKeypad/private/Button.tsx
82
- var import_react4 = __toESM(require("react"));
83
- var import_use_ref_from = require("use-ref-from");
84
-
85
- // src/components/telephoneKeypad/private/Button.module.css
86
- var Button_default = {
87
- "telephone-keypad__button": "Button_telephone-keypad__button",
88
- "telephone-keypad__button__ruby": "Button_telephone-keypad__button__ruby",
89
- "telephone-keypad__button__text": "Button_telephone-keypad__button__text",
90
- "telephone-keypad--horizontal": "Button_telephone-keypad--horizontal"
91
- };
92
-
93
- // src/styles/injectStyle.ts
94
- var injectedStyles = "/* src/components/telephoneKeypad/private/Button.module.css */\n.webchat-fluent .Button_telephone-keypad__button {\n -webkit-user-select: none;\n align-items: center;\n appearance: none;\n background-color: White;\n border-radius: 100%;\n border: solid 1px var(--webchat-colorNeutralStroke1);\n color: var(--webchat-colorGray200);\n font-weight: var(--webchat-fontWeightSemibold);\n cursor: pointer;\n display: flex;\n flex-direction: column;\n height: 60px;\n opacity: 0.7;\n padding: 0;\n position: relative;\n touch-action: none;\n user-select: none;\n width: 60px;\n}\n.webchat-fluent .Button_telephone-keypad__button:hover {\n background-color: var(--webchat-colorGray30);\n}\n.webchat-fluent .Button_telephone-keypad__button__ruby {\n color: var(--webchat-colorGray190);\n font-size: 10px;\n}\n.webchat-fluent .Button_telephone-keypad__button__text {\n font-size: 24px;\n margin-top: 8px;\n}\n.webchat-fluent .Button_telephone-keypad--horizontal .Button_telephone-keypad__button {\n height: 32px;\n justify-content: center;\n margin: 8px 4px;\n width: 32px;\n}\n.webchat-fluent .Button_telephone-keypad--horizontal .Button_telephone-keypad__button__ruby {\n display: none;\n}\n.webchat-fluent .Button_telephone-keypad--horizontal .Button_telephone-keypad__button__text {\n font-size: 20px;\n margin-top: 0;\n}\n\n/* src/components/telephoneKeypad/private/TelephoneKeypad.module.css */\n.webchat-fluent .TelephoneKeypad_telephone-keypad {\n align-items: center;\n background: var(--webchat-colorNeutralBackground1);\n border: none;\n border-radius: var(--webchat-borderRadiusXLarge);\n display: flex;\n flex-direction: column;\n font-family: var(--webchat-fontFamilyBase);\n justify-content: center;\n}\n.webchat-fluent .TelephoneKeypad_telephone-keypad__box {\n box-sizing: border-box;\n display: grid;\n gap: 16px;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(4, 1fr);\n justify-items: center;\n padding: 16px;\n width: 100%;\n}\n.webchat-fluent .TelephoneKeypad_telephone-keypad__info-message {\n align-items: center;\n color: var(--webchat-colorNeutralForeground4);\n display: flex;\n font-size: 12px;\n gap: 6px;\n margin-block-end: 6px;\n}\n.webchat-fluent .TelephoneKeypad_telephone-keypad__info-message-link {\n color: var(--webchat-colorBrandForegroundLink);\n text-decoration-color: transparent;\n}\n.webchat-fluent .TelephoneKeypad_telephone-keypad__info-message-link:target {\n color: var(--webchat-colorBrandForegroundLinkSelected);\n}\n.webchat-fluent .TelephoneKeypad_telephone-keypad__info-message-link:hover {\n color: var(--webchat-colorBrandForegroundLinkHover);\n text-decoration: underline 1px currentColor;\n}\n.webchat-fluent .TelephoneKeypad_telephone-keypad__info-message-link:active {\n color: var(--webchat-colorBrandForegroundLinkPressed);\n}\n.webchat-fluent .TelephoneKeypad_telephone-keypad__info-message-link:focus-visible {\n outline: none;\n text-decoration: underline 1px double var(--webchat-colorStrokeFocus2);\n}\n\n/* src/components/Theme.module.css */\n.webchat-fluent.Theme_theme {\n display: contents;\n --webchat-colorNeutralForeground1: var(--colorNeutralForeground1, #242424);\n --webchat-colorNeutralForeground2: var(--colorNeutralForeground2, #424242);\n --webchat-colorNeutralForeground4: var(--colorNeutralForeground4, #707070);\n --webchat-colorNeutralForeground2BrandHover: var(--colorNeutralForeground2BrandHover, #02729c);\n --webchat-colorNeutralForeground2BrandPressed: var(--colorNeutralForeground2BrandPressed, #01678c);\n --webchat-colorNeutralForeground2BrandSelected: var(--colorNeutralForeground2BrandSelected, #067191);\n --webchat-colorNeutralForegroundDisabled: var(--colorNeutralForegroundDisabled, #bdbdbd);\n --webchat-colorNeutralBackground1: var(--colorNeutralBackground1, #ffffff);\n --webchat-colorNeutralBackground4: var(--colorNeutralBackground4, #f0f0f0);\n --webchat-colorNeutralBackground5: var(--colorNeutralBackground5, #ebebeb);\n --webchat-colorNeutralStroke1: var(--colorNeutralStroke1, #d1d1d1);\n --webchat-colorNeutralStroke2: var(--colorNeutralStroke2, #e0e0e0);\n --webchat-colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected, #bdbdbd);\n --webchat-colorStrokeFocus2: var(--colorStrokeFocus2, #000000);\n --webchat-colorBrandStroke2: var(--colorBrandStroke2, #9edcf7);\n --webchat-colorBrandForeground2Hover: var(--colorBrandForeground2Hover, #015a7a);\n --webchat-colorBrandForeground2Pressed: var(--colorBrandForeground2Pressed, #01384d);\n --webchat-colorBrandForegroundLink: var(--colorBrandForegroundLink, #01678c);\n --webchat-colorBrandForegroundLinkHover: var(--colorBrandForegroundLinkHover, #015a7a);\n --webchat-colorBrandForegroundLinkPressed: var(--colorBrandForegroundLinkPressed, #014259);\n --webchat-colorBrandForegroundLinkSelected: var(--colorBrandForegroundLinkSelected, #01678c);\n --webchat-colorBrandBackground2Hover: var(--colorBrandBackground2Hover, #bee7fa);\n --webchat-colorBrandBackground2Pressed: var(--colorBrandBackground2Pressed, #7fd2f5);\n --webchat-colorCompoundBrandForeground1Hover: var(--colorCompoundBrandForeground1Hover, #02729c);\n --webchat-colorStatusDangerForeground1: var(--colorStatusDangerForeground1, #b10e1c);\n --webchat-colorGray30: var(--colorGray30, #edebe9);\n --webchat-colorGray160: var(--colorGray160, #323130);\n --webchat-colorGray190: var(--colorGray190, #201f1e);\n --webchat-colorGray200: var(--colorGray200, #1b1a19);\n --webchat-borderRadiusSmall: var(--borderRadiusSmall, 2px);\n --webchat-borderRadiusLarge: var(--borderRadiusLarge, 6px);\n --webchat-borderRadiusXLarge: var(--borderRadiusXLarge, 8px);\n --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));\n --webchat-spacingHorizontalMNudge: var(--spacingHorizontalMNudge, 10px);\n --webchat-fontFamilyBase: var(--fontFamilyBase, \"Segoe UI\", \"Segoe UI Web (West European)\", -apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", sans-serif);\n --webchat-fontFamilyNumeric: var(--fontFamilyNumeric, Bahnschrift, \"Segoe UI\", \"Segoe UI Web (West European)\", -apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", sans-serif);\n --webchat-fontWeightSemibold: var(--fontWeightSemibold, 600);\n --webchat-strokeWidthThicker: var(--strokeWidthThicker, 3px);\n --webchat-durationUltraFast: var(--durationUltraFast, 0);\n --webchat-durationNormal: var(--durationNormal, 200ms);\n --webchat-curveAccelerateMid: var(--curveAccelerateMid, cubic-bezier(1,0,1,1));\n --webchat-curveDecelerateMid: var(--curveDecelerateMid, cubic-bezier(0,0,0,1));\n}\n@media (prefers-reduced-motion) {\n .webchat-fluent.Theme_theme {\n --webchat-durationUltraFast: 0.01ms;\n --webchat-durationNormal: 0.01ms;\n }\n}\n\n/* src/components/dropZone/index.module.css */\n.webchat-fluent .dropZone_sendbox__attachment-drop-zone {\n background-color: var(--webchat-colorNeutralBackground4);\n border-radius: inherit;\n cursor: copy;\n display: grid;\n gap: 8px;\n inset: 0;\n place-content: center;\n place-items: center;\n position: absolute;\n}\n.webchat-fluent .dropZone_sendbox__attachment-drop-zone--droppable {\n background-color: #e00;\n color: White;\n}\n.webchat-fluent .dropZone_sendbox__attachment-drop-zone-icon {\n height: 36px;\n pointer-events: none;\n width: 36px;\n}\n\n/* src/components/suggestedActions/SuggestedAction.module.css */\n.webchat-fluent .SuggestedAction_suggested-action {\n align-items: center;\n background: transparent;\n border-radius: 8px;\n border: 1px solid var(--webchat-colorBrandStroke2);\n color: currentColor;\n cursor: pointer;\n display: flex;\n font-size: 12px;\n gap: 4px;\n padding: 4px 8px 4px;\n text-align: start;\n transition: all .15s ease-out;\n}\n@media (hover: hover) {\n .webchat-fluent .SuggestedAction_suggested-action:not([aria-disabled=true]):hover {\n background-color: var(--webchat-colorBrandBackground2Hover);\n color: var(--webchat-colorBrandForeground2Hover);\n }\n}\n.webchat-fluent .SuggestedAction_suggested-action:not([aria-disabled=true]):active {\n background-color: var(--webchat-colorBrandBackground2Pressed);\n color: var(--webchat-colorBrandForeground2Pressed);\n}\n.webchat-fluent .SuggestedAction_suggested-action[aria-disabled=true] {\n color: var(--webchat-colorNeutralForegroundDisabled);\n cursor: not-allowed;\n}\n.webchat-fluent .SuggestedAction_suggested-action__image {\n font-size: 12px;\n height: 1em;\n width: 1em;\n}\n\n/* src/components/suggestedActions/index.module.css */\n.webchat-fluent .suggestedActions_suggested-actions {\n align-items: flex-end;\n align-self: flex-end;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.webchat-fluent .suggestedActions_suggested-actions:not(:empty) {\n padding-block-end: 8px;\n padding-inline-start: 4px;\n}\n.webchat-fluent .suggestedActions_suggested-actions.suggestedActions_suggested-actions--flow {\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: flex-end;\n}\n.webchat-fluent .suggestedActions_suggested-actions.suggestedActions_suggested-actions--stacked {\n flex-direction: column;\n}\n\n/* src/components/sendbox/Toolbar.module.css */\n.webchat-fluent .Toolbar_sendbox__toolbar {\n display: flex;\n gap: 4px;\n margin-inline-start: auto;\n}\n.webchat-fluent .Toolbar_sendbox__toolbar-button {\n align-items: center;\n appearance: none;\n aspect-ratio: 1;\n background: transparent;\n border-radius: var(--webchat-borderRadiusSmall);\n border: none;\n color: currentColor;\n cursor: pointer;\n display: flex;\n justify-content: center;\n padding: 3px;\n width: 32px;\n}\n.webchat-fluent .Toolbar_sendbox__toolbar-button > svg {\n font-size: 20px;\n pointer-events: none;\n}\n.webchat-fluent .Toolbar_sendbox__toolbar-button.Toolbar_sendbox__toolbar-button--selected {\n color: var(--webchat-colorNeutralForeground2BrandSelected);\n}\n@media (hover: hover) {\n .webchat-fluent .Toolbar_sendbox__toolbar-button:not([aria-disabled=true]):hover {\n color: var(--webchat-colorNeutralForeground2BrandHover);\n }\n}\n.webchat-fluent .Toolbar_sendbox__toolbar-button:not([aria-disabled=true]):active {\n color: var(--webchat-colorNeutralForeground2BrandPressed);\n}\n.webchat-fluent .Toolbar_sendbox__toolbar-button[aria-disabled=true] {\n color: var(--webchat-colorNeutralForegroundDisabled);\n cursor: not-allowed;\n}\n.webchat-fluent .Toolbar_sendbox__toolbar-separator {\n align-self: center;\n border-inline-end: 1px solid var(--webchat-colorNeutralStroke2);\n height: 28px;\n}\n.webchat-fluent .Toolbar_sendbox__toolbar-separator:is(:first-child, :last-child, :only-child) {\n display: none;\n}\n\n/* src/components/sendbox/AddAttachmentButton.module.css */\n.webchat-fluent .AddAttachmentButton_sendbox__add-attachment {\n display: grid;\n}\n.webchat-fluent .AddAttachmentButton_sendbox__add-attachment-input {\n font-size: 0;\n height: 0;\n opacity: 0;\n width: 0;\n}\n\n/* src/components/sendbox/Attachments.module.css */\n.webchat-fluent .Attachments_sendbox__attachment {\n border-radius: var(--webchat-borderRadiusLarge);\n border: 1px solid var(--webchat-colorNeutralStroke1);\n cursor: default;\n padding: 6px 8px;\n width: fit-content;\n}\n\n/* src/components/sendbox/ErrorMessage.module.css */\n.webchat-fluent .ErrorMessage_sendbox__error-message {\n color: transparent;\n font-size: 0;\n height: 0;\n left: 0;\n position: absolute;\n top: 0;\n width: 0;\n}\n\n/* src/components/sendbox/TextArea.module.css */\n.webchat-fluent .TextArea_sendbox__text-area {\n display: grid;\n grid-template-areas: \"main\";\n max-height: 200px;\n overflow: hidden;\n}\n.webchat-fluent .TextArea_sendbox__text-area--hidden {\n height: 0;\n visibility: collapse;\n}\n.webchat-fluent .TextArea_sendbox__text-area-shared {\n border: none;\n font: inherit;\n grid-area: main;\n outline: inherit;\n overflow-wrap: anywhere;\n resize: inherit;\n scrollbar-gutter: stable;\n}\n.webchat-fluent .TextArea_sendbox__text-area-doppelganger {\n overflow: hidden;\n visibility: hidden;\n white-space: pre-wrap;\n}\n.webchat-fluent .TextArea_sendbox__text-area-input {\n background-color: inherit;\n color: currentColor;\n height: 100%;\n padding: 0;\n}\n.webchat-fluent .TextArea_sendbox__text-area-input--scroll {\n scrollbar-color: unset;\n scrollbar-width: unset;\n -moz-scrollbar-color: var(--webchat-colorNeutralBackground5) var(--webchat-colorNeutralForeground2);\n -moz-scrollbar-width: thin;\n}\n.webchat-fluent .TextArea_sendbox__text-area-input--scroll::-webkit-scrollbar {\n width: 8px;\n}\n.webchat-fluent .TextArea_sendbox__text-area-input--scroll::-webkit-scrollbar-track {\n background-color: var(--webchat-colorNeutralBackground5);\n border-radius: 16px;\n}\n.webchat-fluent .TextArea_sendbox__text-area-input--scroll::-webkit-scrollbar-thumb {\n background-color: var(--webchat-colorNeutralForeground2);\n border-radius: 16px;\n}\n.webchat-fluent .TextArea_sendbox__text-area-input--scroll::-webkit-scrollbar-corner {\n background-color: var(--webchat-colorNeutralBackground5);\n}\n\n/* src/components/sendbox/index.module.css */\n.webchat-fluent .sendbox_sendbox {\n color: var(--webchat-colorNeutralForeground1);\n font-family: var(--webchat-fontFamilyBase);\n padding: 0 10px 10px;\n text-rendering: optimizeLegibility;\n --webchat-sendbox-attachment-area-active: ;\n --webchat-sendbox-border-radius: var(--webchat-borderRadiusLarge);\n}\n.webchat-fluent .sendbox_sendbox__sendbox {\n background-color: var(--webchat-colorNeutralBackground1);\n border-radius: var(--webchat-sendbox-border-radius);\n border: 1px solid var(--webchat-colorNeutralStroke1);\n display: grid;\n font-family: var(--webchat-fontFamilyBase);\n font-size: 14px;\n gap: 6px;\n grid-template: [telephone-keypad-start] \"text-area\" [telephone-keypad-end] var(--webchat-sendbox-attachment-area-active) \"controls\" / [telephone-keypad] 1fr;\n line-height: 20px;\n padding: 8px;\n position: relative;\n}\n.webchat-fluent .sendbox_sendbox__sendbox:has(.sendbox_sendbox__attachment--in-grid) {\n --webchat-sendbox-attachment-area-active: \"attachment\" ;\n}\n.webchat-fluent .sendbox_sendbox__sendbox:focus-within {\n border-color: var(--webchat-colorNeutralStroke1Selected);\n}\n.webchat-fluent .sendbox_sendbox__sendbox::after {\n border-bottom-left-radius: var(--webchat-sendbox-border-radius);\n border-bottom-right-radius: var(--webchat-sendbox-border-radius);\n border-bottom: var(--webchat-strokeWidthThicker) solid var(--webchat-colorCompoundBrandForeground1Hover);\n bottom: -1px;\n clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 50% 0 50%);\n content: \"\";\n height: var(--webchat-sendbox-border-radius);\n left: -1px;\n position: absolute;\n right: -1px;\n transition: clip-path var(--webchat-durationUltraFast) var(--webchat-curveAccelerateMid);\n}\n.webchat-fluent .sendbox_sendbox__sendbox:focus-within::after {\n clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 0 0 0);\n transition: clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);\n}\n.webchat-fluent .sendbox_sendbox__sendbox > .sendbox_sendbox__text-area--in-grid {\n grid-area: text-area;\n}\n.webchat-fluent .sendbox_sendbox__sendbox > .sendbox_sendbox__attachment--in-grid {\n grid-area: attachment;\n}\n.webchat-fluent .sendbox_sendbox__sendbox > .sendbox_sendbox__sendbox-controls--in-grid {\n grid-area: controls;\n}\n.webchat-fluent .sendbox_sendbox__sendbox > .sendbox_sendbox__telephone-keypad--in-grid {\n grid-area: telephone-keypad;\n}\n.webchat-fluent .sendbox_sendbox__sendbox-text {\n background-color: transparent;\n border: none;\n flex: auto;\n font-family: var(--webchat-fontFamilyBase);\n font-size: 14px;\n line-height: 20px;\n outline: none;\n padding: 4px 4px 0;\n resize: none;\n}\n.webchat-fluent .sendbox_sendbox__sendbox-controls {\n align-items: center;\n display: flex;\n padding-inline-start: 4px;\n}\n.webchat-fluent .sendbox_sendbox__text-counter {\n color: var(--webchat-colorNeutralForeground4);\n cursor: default;\n font-family: var(--webchat-fontFamilyNumeric);\n font-size: 10px;\n line-height: 14px;\n margin-inline-end: 4px;\n}\n.webchat-fluent .sendbox_sendbox__text-counter--error {\n color: var(--webchat-colorStatusDangerForeground1);\n}\n";
95
- function injectStyles() {
96
- if (globalThis.document) {
97
- const style = document.createElement("style");
98
- style.append(document.createTextNode(injectedStyles));
99
- document.head.appendChild(style);
100
- }
101
- }
102
-
103
- // src/styles/useStyles.ts
104
- var import_react3 = require("react");
105
- function useStyles(styles) {
106
- return (0, import_react3.useMemo)(
107
- () => Object.freeze(
108
- Object.fromEntries(
109
- Object.entries(styles).map(([baseClassName, resultClassName]) => [
110
- baseClassName,
111
- `${baseClassName} ${resultClassName}`
112
- ])
113
- )
114
- ),
115
- [styles]
116
- );
117
- }
118
- var useStyles_default = useStyles;
119
-
120
- // src/components/telephoneKeypad/private/Button.tsx
121
- var Button = (0, import_react4.memo)(
122
- // As we are all TypeScript, internal components do not need propTypes.
123
- // eslint-disable-next-line react/prop-types
124
- (0, import_react4.forwardRef)(({ button, "data-testid": dataTestId, onClick, ruby }, ref) => {
125
- const classNames = useStyles_default(Button_default);
126
- const onClickRef = (0, import_use_ref_from.useRefFrom)(onClick);
127
- const handleClick = (0, import_react4.useCallback)(() => onClickRef.current?.(), [onClickRef]);
128
- return /* @__PURE__ */ import_react4.default.createElement(
129
- "button",
130
- {
131
- className: classNames["telephone-keypad__button"],
132
- "data-testid": dataTestId,
133
- onClick: handleClick,
134
- ref,
135
- type: "button"
136
- },
137
- /* @__PURE__ */ import_react4.default.createElement("span", { className: classNames["telephone-keypad__button__text"] }, button === "star" ? "\u2217" : button === "pound" ? "#" : button),
138
- !!ruby && /* @__PURE__ */ import_react4.default.createElement("ruby", { className: classNames["telephone-keypad__button__ruby"] }, ruby)
139
- );
140
- })
141
- );
142
- Button.displayName = "TelephoneKeypad.Button";
143
- var Button_default2 = Button;
144
-
145
- // src/testIds.ts
146
- var testIds = {
147
- sendBoxDropZone: "send box drop zone",
148
- sendBoxSendButton: "send box send button",
149
- sendBoxTextBox: "send box text area",
150
- sendBoxTelephoneKeypadButton1: `send box telephone keypad button 1`,
151
- sendBoxTelephoneKeypadButton2: `send box telephone keypad button 2`,
152
- sendBoxTelephoneKeypadButton3: `send box telephone keypad button 3`,
153
- sendBoxTelephoneKeypadButton4: `send box telephone keypad button 4`,
154
- sendBoxTelephoneKeypadButton5: `send box telephone keypad button 5`,
155
- sendBoxTelephoneKeypadButton6: `send box telephone keypad button 6`,
156
- sendBoxTelephoneKeypadButton7: `send box telephone keypad button 7`,
157
- sendBoxTelephoneKeypadButton8: `send box telephone keypad button 8`,
158
- sendBoxTelephoneKeypadButton9: `send box telephone keypad button 9`,
159
- sendBoxTelephoneKeypadButton0: `send box telephone keypad button 0`,
160
- sendBoxTelephoneKeypadButtonStar: `send box telephone keypad button star`,
161
- sendBoxTelephoneKeypadButtonPound: `send box telephone keypad button pound`,
162
- sendBoxTelephoneKeypadToolbarButton: "send box telephone keypad toolbar button",
163
- sendBoxUploadButton: "send box upload button"
164
- };
165
- var testIds_default = testIds;
166
-
167
- // src/components/telephoneKeypad/useShown.ts
168
- var import_react5 = require("react");
169
- function useShown() {
170
- const { setShown, shown } = (0, import_react5.useContext)(Context_default);
171
- return (0, import_react5.useMemo)(() => Object.freeze([shown, setShown]), [shown, setShown]);
172
- }
173
-
174
- // src/components/telephoneKeypad/private/TelephoneKeypad.module.css
175
- var TelephoneKeypad_default = {
176
- "telephone-keypad": "TelephoneKeypad_telephone-keypad",
177
- "telephone-keypad__box": "TelephoneKeypad_telephone-keypad__box",
178
- "telephone-keypad__info-message": "TelephoneKeypad_telephone-keypad__info-message",
179
- "telephone-keypad__info-message-link": "TelephoneKeypad_telephone-keypad__info-message-link"
180
- };
181
-
182
- // src/icons/InfoSmallIcon.tsx
183
- var import_react6 = __toESM(require("react"));
184
- var InfoSmallIcon_default = (0, import_react6.memo)((props) => /* @__PURE__ */ import_react6.default.createElement(
185
- "svg",
186
- {
187
- "aria-hidden": "true",
188
- className: props.className,
189
- height: "1em",
190
- viewBox: "0 0 16 16",
191
- width: "1em",
192
- xmlns: "http://www.w3.org/2000/svg"
193
- },
194
- /* @__PURE__ */ import_react6.default.createElement(
195
- "path",
196
- {
197
- d: "M8.5 7.5a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3Zm.25-2a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z",
198
- fill: "currentColor"
199
- }
200
- )
201
- ));
202
-
203
- // src/components/telephoneKeypad/private/TelephoneKeypad.tsx
204
- var { LocalizedString } = import_botframework_webchat_component.Components;
205
- var Orientation = (0, import_react7.memo)(
206
- ({ children, isHorizontal }) => {
207
- const classNames = useStyles_default(TelephoneKeypad_default);
208
- return isHorizontal ? (
209
- // <HorizontalDialPadController>{children}</HorizontalDialPadController>
210
- false
211
- ) : /* @__PURE__ */ import_react7.default.createElement("div", { className: classNames["telephone-keypad__box"] }, children);
212
- }
213
- );
214
- Orientation.displayName = "TelephoneKeypad:Orientation";
215
- var TelephoneKeypad = (0, import_react7.memo)(({ autoFocus, className, onButtonClick, isHorizontal }) => {
216
- const autoFocusRef = (0, import_use_ref_from2.useRefFrom)(autoFocus);
217
- const classNames = useStyles_default(TelephoneKeypad_default);
218
- const firstButtonRef = (0, import_react7.useRef)(null);
219
- const onButtonClickRef = (0, import_use_ref_from2.useRefFrom)(onButtonClick);
220
- const [, setShown] = useShown();
221
- const handleButton1Click = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("1"), [onButtonClickRef]);
222
- const handleButton2Click = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("2"), [onButtonClickRef]);
223
- const handleButton3Click = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("3"), [onButtonClickRef]);
224
- const handleButton4Click = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("4"), [onButtonClickRef]);
225
- const handleButton5Click = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("5"), [onButtonClickRef]);
226
- const handleButton6Click = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("6"), [onButtonClickRef]);
227
- const handleButton7Click = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("7"), [onButtonClickRef]);
228
- const handleButton8Click = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("8"), [onButtonClickRef]);
229
- const handleButton9Click = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("9"), [onButtonClickRef]);
230
- const handleButton0Click = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("0"), [onButtonClickRef]);
231
- const handleButtonStarClick = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("star"), [onButtonClickRef]);
232
- const handleButtonPoundClick = (0, import_react7.useCallback)(() => onButtonClickRef.current?.("pound"), [onButtonClickRef]);
233
- const handleKeyDown = (0, import_react7.useCallback)(
234
- (event) => {
235
- if (event.key === "Escape") {
236
- setShown(false);
237
- }
238
- },
239
- [setShown]
240
- );
241
- (0, import_react7.useEffect)(() => {
242
- autoFocusRef.current && firstButtonRef.current?.focus();
243
- }, [autoFocusRef, firstButtonRef]);
244
- return /* @__PURE__ */ import_react7.default.createElement("div", { className: (0, import_classnames.default)(classNames["telephone-keypad"], className), onKeyDown: handleKeyDown }, /* @__PURE__ */ import_react7.default.createElement(Orientation, { isHorizontal }, /* @__PURE__ */ import_react7.default.createElement(
245
- Button_default2,
246
- {
247
- button: "1",
248
- "data-testid": testIds_default.sendBoxTelephoneKeypadButton1,
249
- onClick: handleButton1Click,
250
- ref: firstButtonRef
251
- }
252
- ), /* @__PURE__ */ import_react7.default.createElement(
253
- Button_default2,
254
- {
255
- button: "2",
256
- "data-testid": testIds_default.sendBoxTelephoneKeypadButton2,
257
- onClick: handleButton2Click,
258
- ruby: "ABC"
259
- }
260
- ), /* @__PURE__ */ import_react7.default.createElement(
261
- Button_default2,
262
- {
263
- button: "3",
264
- "data-testid": testIds_default.sendBoxTelephoneKeypadButton3,
265
- onClick: handleButton3Click,
266
- ruby: "DEF"
267
- }
268
- ), /* @__PURE__ */ import_react7.default.createElement(
269
- Button_default2,
270
- {
271
- button: "4",
272
- "data-testid": testIds_default.sendBoxTelephoneKeypadButton4,
273
- onClick: handleButton4Click,
274
- ruby: "GHI"
275
- }
276
- ), /* @__PURE__ */ import_react7.default.createElement(
277
- Button_default2,
278
- {
279
- button: "5",
280
- "data-testid": testIds_default.sendBoxTelephoneKeypadButton5,
281
- onClick: handleButton5Click,
282
- ruby: "JKL"
283
- }
284
- ), /* @__PURE__ */ import_react7.default.createElement(
285
- Button_default2,
286
- {
287
- button: "6",
288
- "data-testid": testIds_default.sendBoxTelephoneKeypadButton6,
289
- onClick: handleButton6Click,
290
- ruby: "MNO"
291
- }
292
- ), /* @__PURE__ */ import_react7.default.createElement(
293
- Button_default2,
294
- {
295
- button: "7",
296
- "data-testid": testIds_default.sendBoxTelephoneKeypadButton7,
297
- onClick: handleButton7Click,
298
- ruby: "PQRS"
299
- }
300
- ), /* @__PURE__ */ import_react7.default.createElement(
301
- Button_default2,
302
- {
303
- button: "8",
304
- "data-testid": testIds_default.sendBoxTelephoneKeypadButton8,
305
- onClick: handleButton8Click,
306
- ruby: "TUV"
307
- }
308
- ), /* @__PURE__ */ import_react7.default.createElement(
309
- Button_default2,
310
- {
311
- button: "9",
312
- "data-testid": testIds_default.sendBoxTelephoneKeypadButton9,
313
- onClick: handleButton9Click,
314
- ruby: "WXYZ"
315
- }
316
- ), /* @__PURE__ */ import_react7.default.createElement(Button_default2, { button: "star", "data-testid": testIds_default.sendBoxTelephoneKeypadButtonStar, onClick: handleButtonStarClick }), /* @__PURE__ */ import_react7.default.createElement(Button_default2, { button: "0", "data-testid": testIds_default.sendBoxTelephoneKeypadButton0, onClick: handleButton0Click, ruby: "+" }), /* @__PURE__ */ import_react7.default.createElement(
317
- Button_default2,
318
- {
319
- button: "pound",
320
- "data-testid": testIds_default.sendBoxTelephoneKeypadButtonPound,
321
- onClick: handleButtonPoundClick
322
- }
323
- )), /* @__PURE__ */ import_react7.default.createElement("div", { className: classNames["telephone-keypad__info-message"] }, /* @__PURE__ */ import_react7.default.createElement(InfoSmallIcon_default, null), /* @__PURE__ */ import_react7.default.createElement(
324
- LocalizedString,
325
- {
326
- linkClassName: classNames["telephone-keypad__info-message-link"],
327
- stringIds: "TELEPHONE_KEYPAD_INPUT_MESSAGE"
328
- }
329
- )));
330
- });
331
- TelephoneKeypad.displayName = "TelephoneKeypad";
332
- var TelephoneKeypad_default2 = TelephoneKeypad;
333
-
334
- // src/components/telephoneKeypad/Surrogate.tsx
335
- var TelephoneKeypadSurrogate = (0, import_react8.memo)((props) => useShown()[0] ? /* @__PURE__ */ import_react8.default.createElement(TelephoneKeypad_default2, { ...props }) : false);
336
- TelephoneKeypadSurrogate.displayName = "TelephoneKeypad.Surrogate";
337
- var Surrogate_default = TelephoneKeypadSurrogate;
338
-
339
- // src/components/Theme.tsx
340
- var import_react9 = __toESM(require("react"));
341
- var import_classnames2 = __toESM(require("classnames"));
342
-
343
- // src/components/Theme.module.css
344
- var Theme_default = {
345
- theme: "Theme_theme"
346
- };
347
-
348
- // src/components/Theme.tsx
349
- var rootClassName = "webchat-fluent";
350
- function WebchatTheme(props) {
351
- const classNames = useStyles_default(Theme_default);
352
- return /* @__PURE__ */ import_react9.default.createElement("div", { className: (0, import_classnames2.default)(rootClassName, classNames["theme"]) }, props.children);
353
- }
354
-
355
- // src/components/sendbox/index.tsx
356
- var import_botframework_webchat_component9 = require("botframework-webchat-component");
357
- var import_classnames9 = __toESM(require("classnames"));
358
- var import_react26 = __toESM(require("react"));
359
- var import_use_ref_from6 = require("use-ref-from");
360
-
361
- // src/icons/SendIcon.tsx
362
- var import_react10 = __toESM(require("react"));
363
- function SendIcon(props) {
364
- return /* @__PURE__ */ import_react10.default.createElement(
365
- "svg",
366
- {
367
- "aria-hidden": "true",
368
- className: props.className,
369
- height: "1em",
370
- viewBox: "0 0 20 20",
371
- width: "1em",
372
- xmlns: "http://www.w3.org/2000/svg"
373
- },
374
- /* @__PURE__ */ import_react10.default.createElement(
375
- "path",
376
- {
377
- 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",
378
- fill: "currentColor"
379
- }
380
- )
381
- );
382
- }
383
-
384
- // src/components/dropZone/index.tsx
385
- var import_botframework_webchat_component2 = require("botframework-webchat-component");
386
- var import_classnames3 = __toESM(require("classnames"));
387
- var import_react12 = __toESM(require("react"));
388
- var import_use_ref_from3 = require("use-ref-from");
389
-
390
- // src/icons/AddDocumentIcon.tsx
391
- var import_react11 = __toESM(require("react"));
392
- function AddDocumentIcon(props) {
393
- return /* @__PURE__ */ import_react11.default.createElement(
394
- "svg",
395
- {
396
- "aria-hidden": "true",
397
- className: props.className,
398
- height: "1em",
399
- viewBox: "0 0 20 20",
400
- width: "1em",
401
- xmlns: "http://www.w3.org/2000/svg"
402
- },
403
- /* @__PURE__ */ import_react11.default.createElement(
404
- "path",
405
- {
406
- 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",
407
- fill: "currentColor"
408
- }
409
- )
410
- );
411
- }
412
-
413
- // src/components/dropZone/index.module.css
414
- var dropZone_default = {
415
- "sendbox__attachment-drop-zone": "dropZone_sendbox__attachment-drop-zone",
416
- "sendbox__attachment-drop-zone--droppable": "dropZone_sendbox__attachment-drop-zone--droppable",
417
- "sendbox__attachment-drop-zone-icon": "dropZone_sendbox__attachment-drop-zone-icon"
418
- };
419
-
420
- // src/components/dropZone/index.tsx
421
- var { useLocalizer } = import_botframework_webchat_component2.hooks;
422
- var handleDragOver = (event) => {
423
- event.preventDefault();
424
- };
425
- var isFilesTransferEvent = (event) => !!event.dataTransfer?.types?.some((type) => type.toLowerCase() === "files");
426
- function isDescendantOf(target, ancestor) {
427
- let current = target.parentNode;
428
- while (current) {
429
- if (current === ancestor) {
430
- return true;
431
- }
432
- current = current.parentNode;
433
- }
434
- return false;
435
- }
436
- var DropZone = (props) => {
437
- const [dropZoneState, setDropZoneState] = (0, import_react12.useState)(false);
438
- const classNames = useStyles_default(dropZone_default);
439
- const dropZoneRef = (0, import_react12.useRef)(null);
440
- const localize = useLocalizer();
441
- const onFilesAddedRef = (0, import_use_ref_from3.useRefFrom)(props.onFilesAdded);
442
- (0, import_react12.useEffect)(() => {
443
- let entranceCounter = 0;
444
- const handleDragEnter = (event) => {
445
- entranceCounter++;
446
- if (isFilesTransferEvent(event)) {
447
- setDropZoneState(
448
- dropZoneRef.current && (event.target === dropZoneRef.current || event.target instanceof HTMLElement && isDescendantOf(event.target, dropZoneRef.current)) ? "droppable" : "visible"
449
- );
450
- }
451
- };
452
- const handleDragLeave = () => --entranceCounter <= 0 && setDropZoneState(false);
453
- document.addEventListener("dragenter", handleDragEnter, false);
454
- document.addEventListener("dragleave", handleDragLeave, false);
455
- return () => {
456
- document.removeEventListener("dragenter", handleDragEnter);
457
- document.removeEventListener("dragleave", handleDragLeave);
458
- };
459
- }, [setDropZoneState]);
460
- const handleDrop = (0, import_react12.useCallback)(
461
- (event) => {
462
- event.preventDefault();
463
- setDropZoneState(false);
464
- if (!isFilesTransferEvent(event.nativeEvent)) {
465
- return;
466
- }
467
- onFilesAddedRef.current([...event.dataTransfer.files]);
468
- },
469
- [onFilesAddedRef, setDropZoneState]
470
- );
471
- return dropZoneState ? /* @__PURE__ */ import_react12.default.createElement(
472
- "div",
473
- {
474
- className: (0, import_classnames3.default)(classNames["sendbox__attachment-drop-zone"], {
475
- [classNames["sendbox__attachment-drop-zone--droppable"]]: dropZoneState === "droppable"
476
- }),
477
- "data-testid": testIds_default.sendBoxDropZone,
478
- onDragOver: handleDragOver,
479
- onDrop: handleDrop,
480
- ref: dropZoneRef
481
- },
482
- /* @__PURE__ */ import_react12.default.createElement(AddDocumentIcon, { className: classNames["sendbox__attachment-drop-zone-icon"] }),
483
- localize("TEXT_INPUT_DROP_ZONE")
484
- ) : null;
485
- };
486
- DropZone.displayName = "DropZone";
487
- var dropZone_default2 = (0, import_react12.memo)(DropZone);
488
-
489
- // src/components/DropZone.tsx
490
- var DropZone_default = dropZone_default2;
491
-
492
- // src/components/suggestedActions/index.tsx
493
- var import_botframework_webchat_component4 = require("botframework-webchat-component");
494
- var import_classnames5 = __toESM(require("classnames"));
495
- var import_react15 = __toESM(require("react"));
496
-
497
- // src/components/suggestedActions/SuggestedAction.tsx
498
- var import_botframework_webchat_component3 = require("botframework-webchat-component");
499
- var import_classnames4 = __toESM(require("classnames"));
500
- var import_react14 = __toESM(require("react"));
501
-
502
- // src/components/suggestedActions/SuggestedAction.module.css
503
- var SuggestedAction_default = {
504
- "suggested-action": "SuggestedAction_suggested-action",
505
- "suggested-action__image": "SuggestedAction_suggested-action__image"
506
- };
507
-
508
- // src/components/suggestedActions/AccessibleButton.tsx
509
- var import_react13 = __toESM(require("react"));
510
- var preventDefaultHandler = (event) => event.preventDefault();
511
- var AccessibleButton = (0, import_react13.forwardRef)(
512
- ({ "aria-hidden": ariaHidden, children, disabled, onClick, tabIndex, ...props }, forwardedRef) => {
513
- const targetRef = (0, import_react13.useRef)(null);
514
- const ref = forwardedRef || targetRef;
515
- return /* @__PURE__ */ import_react13.default.createElement(
516
- "button",
517
- {
518
- "aria-disabled": disabled ? "true" : "false",
519
- "aria-hidden": ariaHidden,
520
- onClick: disabled ? preventDefaultHandler : onClick,
521
- ref,
522
- tabIndex,
523
- ...disabled && {
524
- "aria-disabled": "true",
525
- tabIndex: -1
526
- },
527
- ...props,
528
- type: "button"
529
- },
530
- children
531
- );
532
- }
533
- );
534
- var AccessibleButton_default = (0, import_react13.memo)(AccessibleButton);
535
-
536
- // src/components/suggestedActions/SuggestedAction.tsx
537
- var { useDisabled, useFocus, usePerformCardAction, useScrollToEnd, useStyleSet, useSuggestedActions } = import_botframework_webchat_component3.hooks;
538
- function SuggestedAction({
539
- buttonText,
540
- className,
541
- displayText,
542
- image,
543
- imageAlt,
544
- text,
545
- type,
546
- value
547
- }) {
548
- const [_, setSuggestedActions] = useSuggestedActions();
549
- const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();
550
- const [disabled] = useDisabled();
551
- const focus = useFocus();
552
- const focusRef = (0, import_react14.useRef)(null);
553
- const performCardAction = usePerformCardAction();
554
- const classNames = useStyles_default(SuggestedAction_default);
555
- const scrollToEnd = useScrollToEnd();
556
- const handleClick = (0, import_react14.useCallback)(
557
- ({ target }) => {
558
- (async function() {
559
- await focus("sendBoxWithoutKeyboard");
560
- performCardAction({ displayText, text, type, value }, { target });
561
- type === "openUrl" && setSuggestedActions([]);
562
- scrollToEnd();
563
- })();
564
- },
565
- [displayText, focus, performCardAction, scrollToEnd, setSuggestedActions, text, type, value]
566
- );
567
- return /* @__PURE__ */ import_react14.default.createElement(
568
- AccessibleButton_default,
569
- {
570
- className: (0, import_classnames4.default)(classNames["suggested-action"], suggestedActionStyleSet + "", (className || "") + ""),
571
- disabled,
572
- onClick: handleClick,
573
- ref: focusRef,
574
- type: "button"
575
- },
576
- image && /* @__PURE__ */ import_react14.default.createElement("img", { alt: imageAlt, className: classNames["suggested-action__image"], src: image }),
577
- /* @__PURE__ */ import_react14.default.createElement("span", null, buttonText)
578
- );
579
- }
580
- var SuggestedAction_default2 = (0, import_react14.memo)(SuggestedAction);
581
-
582
- // src/components/suggestedActions/private/computeSuggestedActionText.ts
583
- function computeSuggestedActionText(cardAction) {
584
- const { title } = cardAction;
585
- const { type, value } = cardAction;
586
- if (type === "messageBack") {
587
- return title || cardAction.displayText;
588
- } else if (title) {
589
- return title;
590
- } else if (typeof value === "string") {
591
- return value;
592
- }
593
- return JSON.stringify(value);
594
- }
595
-
596
- // src/components/suggestedActions/index.module.css
597
- var suggestedActions_default = {
598
- "suggested-actions": "suggestedActions_suggested-actions",
599
- "suggested-actions--flow": "suggestedActions_suggested-actions--flow",
600
- "suggested-actions--stacked": "suggestedActions_suggested-actions--stacked"
601
- };
602
-
603
- // src/components/suggestedActions/index.tsx
604
- var { useLocalizer: useLocalizer2, useStyleOptions, useStyleSet: useStyleSet2, useSuggestedActions: useSuggestedActions2 } = import_botframework_webchat_component4.hooks;
605
- function SuggestedActionStackedOrFlowContainer(props) {
606
- const [{ suggestedActionLayout }] = useStyleOptions();
607
- const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet2();
608
- const classNames = useStyles_default(suggestedActions_default);
609
- return /* @__PURE__ */ import_react15.default.createElement(
610
- "div",
611
- {
612
- "aria-label": props["aria-label"],
613
- "aria-live": "polite",
614
- "aria-orientation": "vertical",
615
- className: (0, import_classnames5.default)(
616
- classNames["suggested-actions"],
617
- suggestedActionsStyleSet + "",
618
- {
619
- [classNames["suggested-actions--flow"]]: suggestedActionLayout === "flow",
620
- [classNames["suggested-actions--stacked"]]: suggestedActionLayout !== "flow"
621
- },
622
- props.className
623
- ),
624
- role: "toolbar"
625
- },
626
- !!props.children && !!import_react15.default.Children.count(props.children) && props.children
627
- );
628
- }
629
- function SuggestedActions() {
630
- const classNames = useStyles_default(suggestedActions_default);
631
- const localize = useLocalizer2();
632
- const [suggestedActions] = useSuggestedActions2();
633
- const children = suggestedActions.map((cardAction, index) => {
634
- const { displayText, image, imageAltText, text, type, value } = cardAction;
635
- if (!suggestedActions?.length) {
636
- return null;
637
- }
638
- return /* @__PURE__ */ import_react15.default.createElement(
639
- SuggestedAction_default2,
640
- {
641
- buttonText: computeSuggestedActionText(cardAction),
642
- displayText,
643
- image,
644
- imageAlt: image && (imageAltText || text),
645
- itemIndex: index,
646
- key: index,
647
- text,
648
- type,
649
- value
650
- }
651
- );
652
- });
653
- return /* @__PURE__ */ import_react15.default.createElement(
654
- SuggestedActionStackedOrFlowContainer,
655
- {
656
- "aria-label": localize("SUGGESTED_ACTIONS_LABEL_ALT"),
657
- className: classNames["suggested-actions"]
658
- },
659
- children
660
- );
661
- }
662
- var suggestedActions_default2 = (0, import_react15.memo)(SuggestedActions);
663
-
664
- // src/components/SuggestedActions.tsx
665
- var SuggestedActions_default = suggestedActions_default2;
666
-
667
- // src/components/sendbox/AddAttachmentButton.tsx
668
- var import_botframework_webchat_component5 = require("botframework-webchat-component");
669
- var import_react18 = __toESM(require("react"));
670
- var import_use_ref_from4 = require("use-ref-from");
671
-
672
- // src/icons/AttachmentIcon.tsx
673
- var import_react16 = __toESM(require("react"));
674
- function AttachmentIcon(props) {
675
- return /* @__PURE__ */ import_react16.default.createElement(
676
- "svg",
677
- {
678
- "aria-hidden": "true",
679
- className: props.className,
680
- height: "1em",
681
- viewBox: "0 0 20 20",
682
- width: "1em",
683
- xmlns: "http://www.w3.org/2000/svg"
684
- },
685
- /* @__PURE__ */ import_react16.default.createElement(
686
- "path",
687
- {
688
- 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",
689
- fill: "currentColor"
690
- }
691
- )
692
- );
693
- }
694
-
695
- // src/components/sendbox/Toolbar.tsx
696
- var import_classnames6 = __toESM(require("classnames"));
697
- var import_react17 = __toESM(require("react"));
698
-
699
- // src/components/sendbox/Toolbar.module.css
700
- var Toolbar_default = {
701
- sendbox__toolbar: "Toolbar_sendbox__toolbar",
702
- "sendbox__toolbar-button": "Toolbar_sendbox__toolbar-button",
703
- "sendbox__toolbar-button--selected": "Toolbar_sendbox__toolbar-button--selected",
704
- "sendbox__toolbar-separator": "Toolbar_sendbox__toolbar-separator"
705
- };
706
-
707
- // src/components/sendbox/Toolbar.tsx
708
- var preventDefaultHandler2 = (event) => event.preventDefault();
709
- var ToolbarButton = (0, import_react17.memo)(
710
- (props) => {
711
- const classNames = useStyles_default(Toolbar_default);
712
- return /* @__PURE__ */ import_react17.default.createElement(
713
- "button",
714
- {
715
- "aria-label": props["aria-label"],
716
- className: (0, import_classnames6.default)(classNames["sendbox__toolbar-button"], props.className, {
717
- [classNames["sendbox__toolbar-button--selected"]]: props.selected
718
- }),
719
- "data-testid": props["data-testid"],
720
- onClick: props.disabled ? preventDefaultHandler2 : props.onClick,
721
- type: props.type === "submit" ? "submit" : "button",
722
- ...props.disabled && {
723
- "aria-disabled": "true",
724
- tabIndex: -1
725
- }
726
- },
727
- props.children
728
- );
729
- }
730
- );
731
- ToolbarButton.displayName = "ToolbarButton";
732
- var Toolbar = (0, import_react17.memo)((props) => {
733
- const classNames = useStyles_default(Toolbar_default);
734
- return /* @__PURE__ */ import_react17.default.createElement("div", { className: (0, import_classnames6.default)(classNames["sendbox__toolbar"], props.className) }, props.children);
735
- });
736
- Toolbar.displayName = "Toolbar";
737
- var ToolbarSeparator = (0, import_react17.memo)(
738
- (props) => {
739
- const classNames = useStyles_default(Toolbar_default);
740
- return /* @__PURE__ */ import_react17.default.createElement(
741
- "div",
742
- {
743
- "aria-orientation": "vertical",
744
- className: (0, import_classnames6.default)(classNames["sendbox__toolbar-separator"], props.className),
745
- role: "separator"
746
- }
747
- );
748
- }
749
- );
750
- ToolbarSeparator.displayName = "ToolbarSeparator";
751
-
752
- // src/components/sendbox/AddAttachmentButton.module.css
753
- var AddAttachmentButton_default = {
754
- "sendbox__add-attachment": "AddAttachmentButton_sendbox__add-attachment",
755
- "sendbox__add-attachment-input": "AddAttachmentButton_sendbox__add-attachment-input"
756
- };
757
-
758
- // src/components/sendbox/AddAttachmentButton.tsx
759
- var { useLocalizer: useLocalizer3, useStyleOptions: useStyleOptions2 } = import_botframework_webchat_component5.hooks;
760
- function AddAttachmentButton(props) {
761
- const inputRef = (0, import_react18.useRef)(null);
762
- const classNames = useStyles_default(AddAttachmentButton_default);
763
- const localize = useLocalizer3();
764
- const [{ uploadAccept, uploadMultiple }] = useStyleOptions2();
765
- const onFilesAddedRef = (0, import_use_ref_from4.useRefFrom)(props.onFilesAdded);
766
- const handleClick = (0, import_react18.useCallback)(() => inputRef.current?.click(), [inputRef]);
767
- const handleFileChange = (0, import_react18.useCallback)(
768
- ({ target: { files } }) => {
769
- if (files) {
770
- onFilesAddedRef.current?.([...files]);
771
- if (inputRef.current) {
772
- inputRef.current.value = "";
773
- }
774
- }
775
- },
776
- [inputRef, onFilesAddedRef]
777
- );
778
- return /* @__PURE__ */ import_react18.default.createElement("div", { className: classNames["sendbox__add-attachment"] }, /* @__PURE__ */ import_react18.default.createElement(
779
- "input",
780
- {
781
- accept: uploadAccept,
782
- "aria-disabled": props.disabled,
783
- "aria-hidden": "true",
784
- className: classNames["sendbox__add-attachment-input"],
785
- multiple: uploadMultiple,
786
- onInput: props.disabled ? void 0 : handleFileChange,
787
- readOnly: props.disabled,
788
- ref: inputRef,
789
- role: "button",
790
- tabIndex: -1,
791
- type: "file"
792
- }
793
- ), /* @__PURE__ */ import_react18.default.createElement(
794
- ToolbarButton,
795
- {
796
- "aria-label": localize("TEXT_INPUT_UPLOAD_BUTTON_ALT"),
797
- "data-testid": testIds_default.sendBoxUploadButton,
798
- onClick: handleClick
799
- },
800
- /* @__PURE__ */ import_react18.default.createElement(AttachmentIcon, null)
801
- ));
802
- }
803
- var AddAttachmentButton_default2 = (0, import_react18.memo)(AddAttachmentButton);
804
-
805
- // src/components/sendbox/Attachments.tsx
806
- var import_botframework_webchat_component6 = require("botframework-webchat-component");
807
- var import_react19 = __toESM(require("react"));
808
- var import_classnames7 = __toESM(require("classnames"));
809
-
810
- // src/components/sendbox/Attachments.module.css
811
- var Attachments_default = {
812
- sendbox__attachment: "Attachments_sendbox__attachment"
813
- };
814
-
815
- // src/components/sendbox/Attachments.tsx
816
- var { useLocalizer: useLocalizer4 } = import_botframework_webchat_component6.hooks;
817
- var attachmentsPluralStringIds = {
818
- one: "TEXT_INPUT_ATTACHMENTS_ONE",
819
- two: "TEXT_INPUT_ATTACHMENTS_TWO",
820
- few: "TEXT_INPUT_ATTACHMENTS_FEW",
821
- many: "TEXT_INPUT_ATTACHMENTS_MANY",
822
- other: "TEXT_INPUT_ATTACHMENTS_OTHER"
823
- };
824
- function Attachments({
825
- attachments,
826
- className
827
- }) {
828
- const classNames = useStyles_default(Attachments_default);
829
- const localizeWithPlural = useLocalizer4({ plural: true });
830
- return attachments.length ? /* @__PURE__ */ import_react19.default.createElement("div", { className: (0, import_classnames7.default)(classNames["sendbox__attachment"], className) }, localizeWithPlural(attachmentsPluralStringIds, attachments.length)) : null;
831
- }
832
- var Attachments_default2 = (0, import_react19.memo)(Attachments);
833
-
834
- // src/components/sendbox/ErrorMessage.tsx
835
- var import_react20 = __toESM(require("react"));
836
-
837
- // src/components/sendbox/ErrorMessage.module.css
838
- var ErrorMessage_default = {
839
- "sendbox__error-message": "ErrorMessage_sendbox__error-message"
840
- };
841
-
842
- // src/components/sendbox/ErrorMessage.tsx
843
- function ErrorMessage(props) {
844
- const classNames = useStyles_default(ErrorMessage_default);
845
- return (
846
- // eslint-disable-next-line react/forbid-dom-props
847
- /* @__PURE__ */ import_react20.default.createElement("span", { className: classNames["sendbox__error-message"], id: props.id, role: "alert" }, props.error)
848
- );
849
- }
850
- var ErrorMessage_default2 = (0, import_react20.memo)(ErrorMessage);
851
-
852
- // src/components/sendbox/TelephoneKeypadToolbarButton.tsx
853
- var import_react22 = __toESM(require("react"));
854
- var import_botframework_webchat_component7 = require("botframework-webchat-component");
855
-
856
- // src/icons/TelephoneKeypad.tsx
857
- var import_react21 = __toESM(require("react"));
858
- function TelephoneKeypadIcon(props) {
859
- return /* @__PURE__ */ import_react21.default.createElement(
860
- "svg",
861
- {
862
- "aria-hidden": "true",
863
- className: props.className,
864
- height: "1em",
865
- viewBox: "0 0 20 20",
866
- width: "1em",
867
- xmlns: "http://www.w3.org/2000/svg"
868
- },
869
- /* @__PURE__ */ import_react21.default.createElement(
870
- "path",
871
- {
872
- 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",
873
- fill: "currentColor"
874
- }
875
- )
876
- );
877
- }
878
-
879
- // src/components/sendbox/TelephoneKeypadToolbarButton.tsx
880
- var { useLocalizer: useLocalizer5 } = import_botframework_webchat_component7.hooks;
881
- var TelephoneKeypadToolbarButton = (0, import_react22.memo)(() => {
882
- const [telephoneKeypadShown, setTelephoneKeypadShown] = useShown();
883
- const localize = useLocalizer5();
884
- const handleClick = (0, import_react22.useCallback)(() => setTelephoneKeypadShown((shown) => !shown), [setTelephoneKeypadShown]);
885
- return /* @__PURE__ */ import_react22.default.createElement(
886
- ToolbarButton,
887
- {
888
- "aria-label": localize("TEXT_INPUT_TELEPHONE_KEYPAD_BUTTON_ALT"),
889
- "data-testid": testIds_default.sendBoxTelephoneKeypadToolbarButton,
890
- onClick: handleClick,
891
- selected: telephoneKeypadShown
892
- },
893
- /* @__PURE__ */ import_react22.default.createElement(TelephoneKeypadIcon, null)
894
- );
895
- });
896
- TelephoneKeypadToolbarButton.displayName = "SendBox.TelephoneKeypadToolbarButton";
897
- var TelephoneKeypadToolbarButton_default = TelephoneKeypadToolbarButton;
898
-
899
- // src/components/sendbox/TextArea.tsx
900
- var import_classnames8 = __toESM(require("classnames"));
901
- var import_react23 = __toESM(require("react"));
902
-
903
- // src/components/sendbox/TextArea.module.css
904
- var TextArea_default = {
905
- "sendbox__text-area": "TextArea_sendbox__text-area",
906
- "sendbox__text-area--hidden": "TextArea_sendbox__text-area--hidden",
907
- "sendbox__text-area-shared": "TextArea_sendbox__text-area-shared",
908
- "sendbox__text-area-doppelganger": "TextArea_sendbox__text-area-doppelganger",
909
- "sendbox__text-area-input": "TextArea_sendbox__text-area-input",
910
- "sendbox__text-area-input--scroll": "TextArea_sendbox__text-area-input--scroll"
911
- };
912
-
913
- // src/components/sendbox/TextArea.tsx
914
- var TextArea = (0, import_react23.forwardRef)((props, ref) => {
915
- const classNames = useStyles_default(TextArea_default);
916
- const handleKeyDown = (0, import_react23.useCallback)((event) => {
917
- if (!event.shiftKey && event.key === "Enter") {
918
- event.preventDefault();
919
- if ("form" in event.target && event.target.form instanceof HTMLFormElement) {
920
- event.target?.form?.requestSubmit();
921
- }
922
- }
923
- }, []);
924
- return /* @__PURE__ */ import_react23.default.createElement(
925
- "div",
926
- {
927
- className: (0, import_classnames8.default)(
928
- classNames["sendbox__text-area"],
929
- {
930
- [classNames["sendbox__text-area--hidden"]]: props.hidden
931
- },
932
- props.className
933
- ),
934
- role: props.hidden ? "hidden" : void 0
935
- },
936
- /* @__PURE__ */ import_react23.default.createElement(
937
- "div",
938
- {
939
- className: (0, import_classnames8.default)(
940
- classNames["sendbox__text-area-doppelganger"],
941
- classNames["sendbox__text-area-shared"],
942
- classNames["sendbox__text-area-input--scroll"]
943
- )
944
- },
945
- props.value || props.placeholder,
946
- " "
947
- ),
948
- /* @__PURE__ */ import_react23.default.createElement(
949
- "textarea",
950
- {
951
- "aria-label": props["aria-label"],
952
- className: (0, import_classnames8.default)(
953
- classNames["sendbox__text-area-input"],
954
- classNames["sendbox__text-area-shared"],
955
- classNames["sendbox__text-area-input--scroll"]
956
- ),
957
- "data-testid": props["data-testid"],
958
- onInput: props.onInput,
959
- onKeyDown: handleKeyDown,
960
- placeholder: props.placeholder,
961
- ref,
962
- rows: props.startRows ?? 1,
963
- tabIndex: props.hidden ? -1 : void 0,
964
- value: props.value
965
- }
966
- )
967
- );
968
- });
969
- TextArea.displayName = "TextArea";
970
- var TextArea_default2 = TextArea;
971
-
972
- // src/components/sendbox/private/useSubmitError.ts
973
- var import_botframework_webchat_component8 = require("botframework-webchat-component");
974
- var import_react24 = require("react");
975
- var import_use_ref_from5 = require("use-ref-from");
976
- var { useConnectivityStatus, useLocalizer: useLocalizer6 } = import_botframework_webchat_component8.hooks;
977
- var useSubmitError = ({
978
- attachments,
979
- message
980
- }) => {
981
- const [connectivityStatus] = useConnectivityStatus();
982
- const localize = useLocalizer6();
983
- const submitErrorRef = (0, import_use_ref_from5.useRefFrom)(
984
- connectivityStatus !== "connected" && connectivityStatus !== "reconnected" ? "offline" : !message && !attachments.length ? "empty" : void 0
985
- );
986
- const errorMessageStringMap = (0, import_react24.useMemo)(
987
- () => Object.freeze(
988
- (/* @__PURE__ */ new Map()).set("empty", localize("SEND_BOX_IS_EMPTY_TOOLTIP_ALT")).set("offline", localize("CONNECTIVITY_STATUS_ALT_FATAL"))
989
- ),
990
- [localize]
991
- );
992
- return (0, import_react24.useMemo)(
993
- () => Object.freeze([submitErrorRef, submitErrorRef.current && errorMessageStringMap.get(submitErrorRef.current)]),
994
- [errorMessageStringMap, submitErrorRef]
995
- );
996
- };
997
- var useSubmitError_default = useSubmitError;
998
-
999
- // src/components/sendbox/private/useUniqueId.ts
1000
- var import_react25 = require("react");
1001
- function useUniqueId(prefix) {
1002
- const id = (0, import_react25.useMemo)(() => Math.random().toString(36).substr(2, 5), []);
1003
- prefix = prefix ? `${prefix}--` : "";
1004
- return `${prefix}${id}`;
1005
- }
1006
-
1007
- // src/components/sendbox/index.module.css
1008
- var sendbox_default = {
1009
- sendbox: "sendbox_sendbox",
1010
- sendbox__sendbox: "sendbox_sendbox__sendbox",
1011
- "sendbox__attachment--in-grid": "sendbox_sendbox__attachment--in-grid",
1012
- "sendbox__text-area--in-grid": "sendbox_sendbox__text-area--in-grid",
1013
- "sendbox__sendbox-controls--in-grid": "sendbox_sendbox__sendbox-controls--in-grid",
1014
- "sendbox__telephone-keypad--in-grid": "sendbox_sendbox__telephone-keypad--in-grid",
1015
- "sendbox__sendbox-text": "sendbox_sendbox__sendbox-text",
1016
- "sendbox__sendbox-controls": "sendbox_sendbox__sendbox-controls",
1017
- "sendbox__text-counter": "sendbox_sendbox__text-counter",
1018
- "sendbox__text-counter--error": "sendbox_sendbox__text-counter--error"
1019
- };
1020
-
1021
- // src/components/sendbox/index.tsx
1022
- var { useStyleOptions: useStyleOptions3, useMakeThumbnail, useLocalizer: useLocalizer7, useSendBoxAttachments, useSendMessage } = import_botframework_webchat_component9.hooks;
1023
- function SendBox(props) {
1024
- const inputRef = (0, import_react26.useRef)(null);
1025
- const [message, setMessage] = (0, import_react26.useState)("");
1026
- const [attachments, setAttachments] = useSendBoxAttachments();
1027
- const [{ hideTelephoneKeypadButton, hideUploadButton, maxMessageLength }] = useStyleOptions3();
1028
- const isMessageLengthExceeded = !!maxMessageLength && message.length > maxMessageLength;
1029
- const classNames = useStyles_default(sendbox_default);
1030
- const localize = useLocalizer7();
1031
- const sendMessage = useSendMessage();
1032
- const makeThumbnail = useMakeThumbnail();
1033
- const errorMessageId = useUniqueId("sendbox__error-message-id");
1034
- const [errorRef, errorMessage] = useSubmitError_default({ message, attachments });
1035
- const [telephoneKeypadShown] = useShown();
1036
- const attachmentsRef = (0, import_use_ref_from6.useRefFrom)(attachments);
1037
- const messageRef = (0, import_use_ref_from6.useRefFrom)(message);
1038
- const handleSendBoxClick = (0, import_react26.useCallback)(
1039
- (event) => {
1040
- if ("tabIndex" in event.target && typeof event.target.tabIndex === "number" && event.target.tabIndex >= 0) {
1041
- return;
1042
- }
1043
- inputRef.current?.focus();
1044
- },
1045
- [inputRef]
1046
- );
1047
- const handleMessageChange = (0, import_react26.useCallback)(
1048
- (event) => setMessage(event.currentTarget.value),
1049
- [setMessage]
1050
- );
1051
- const handleAddFiles = (0, import_react26.useCallback)(
1052
- async (inputFiles) => {
1053
- const newAttachments = Object.freeze(
1054
- await Promise.all(
1055
- inputFiles.map(
1056
- (file) => makeThumbnail(file).then(
1057
- (thumbnailURL) => Object.freeze({
1058
- blob: file,
1059
- ...thumbnailURL && { thumbnailURL }
1060
- })
1061
- )
1062
- )
1063
- )
1064
- );
1065
- setAttachments(newAttachments);
1066
- },
1067
- [makeThumbnail, setAttachments]
1068
- );
1069
- const handleFormSubmit = (0, import_react26.useCallback)(
1070
- (event) => {
1071
- event.preventDefault();
1072
- if (errorRef.current !== "empty" && !isMessageLengthExceeded) {
1073
- sendMessage(messageRef.current, void 0, { attachments: attachmentsRef.current });
1074
- setMessage("");
1075
- setAttachments([]);
1076
- }
1077
- inputRef.current?.focus();
1078
- },
1079
- [attachmentsRef, messageRef, sendMessage, setAttachments, setMessage, isMessageLengthExceeded, errorRef, inputRef]
1080
- );
1081
- const handleTelephoneKeypadButtonClick = (0, import_react26.useCallback)(
1082
- // TODO: We need more official way of sending DTMF.
1083
- (dtmf) => sendMessage(`/DTMF ${dtmf}`),
1084
- [sendMessage]
1085
- );
1086
- const aria = {
1087
- "aria-invalid": "false",
1088
- ...errorMessage && {
1089
- "aria-invalid": "true",
1090
- "aria-errormessage": errorMessageId
1091
- }
1092
- };
1093
- return /* @__PURE__ */ import_react26.default.createElement("form", { ...aria, className: (0, import_classnames9.default)(classNames["sendbox"], props.className), onSubmit: handleFormSubmit }, /* @__PURE__ */ import_react26.default.createElement(SuggestedActions_default, null), /* @__PURE__ */ import_react26.default.createElement("div", { className: (0, import_classnames9.default)(classNames["sendbox__sendbox"]), onClickCapture: handleSendBoxClick }, /* @__PURE__ */ import_react26.default.createElement(
1094
- TextArea_default2,
1095
- {
1096
- "aria-label": isMessageLengthExceeded ? localize("TEXT_INPUT_LENGTH_EXCEEDED_ALT") : localize("TEXT_INPUT_ALT"),
1097
- className: (0, import_classnames9.default)(classNames["sendbox__sendbox-text"], classNames["sendbox__text-area--in-grid"]),
1098
- "data-testid": testIds_default.sendBoxTextBox,
1099
- hidden: telephoneKeypadShown,
1100
- onInput: handleMessageChange,
1101
- placeholder: props.placeholder ?? localize("TEXT_INPUT_PLACEHOLDER"),
1102
- ref: inputRef,
1103
- value: message
1104
- }
1105
- ), /* @__PURE__ */ import_react26.default.createElement(
1106
- Surrogate_default,
1107
- {
1108
- autoFocus: true,
1109
- className: classNames["sendbox__telephone-keypad--in-grid"],
1110
- isHorizontal: false,
1111
- onButtonClick: handleTelephoneKeypadButtonClick
1112
- }
1113
- ), /* @__PURE__ */ import_react26.default.createElement(Attachments_default2, { attachments, className: classNames["sendbox__attachment--in-grid"] }), /* @__PURE__ */ import_react26.default.createElement("div", { className: (0, import_classnames9.default)(classNames["sendbox__sendbox-controls"], classNames["sendbox__sendbox-controls--in-grid"]) }, !telephoneKeypadShown && maxMessageLength && /* @__PURE__ */ import_react26.default.createElement(
1114
- "div",
1115
- {
1116
- className: (0, import_classnames9.default)(classNames["sendbox__text-counter"], {
1117
- [classNames["sendbox__text-counter--error"]]: isMessageLengthExceeded
1118
- })
1119
- },
1120
- `${message.length}/${maxMessageLength}`
1121
- ), /* @__PURE__ */ import_react26.default.createElement(Toolbar, null, !hideTelephoneKeypadButton && /* @__PURE__ */ import_react26.default.createElement(TelephoneKeypadToolbarButton_default, null), !hideUploadButton && /* @__PURE__ */ import_react26.default.createElement(AddAttachmentButton_default2, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ import_react26.default.createElement(ToolbarSeparator, null), /* @__PURE__ */ import_react26.default.createElement(
1122
- ToolbarButton,
1123
- {
1124
- "aria-label": localize("TEXT_INPUT_SEND_BUTTON_ALT"),
1125
- "data-testid": testIds_default.sendBoxSendButton,
1126
- disabled: isMessageLengthExceeded || telephoneKeypadShown,
1127
- type: "submit"
1128
- },
1129
- /* @__PURE__ */ import_react26.default.createElement(SendIcon, null)
1130
- ))), /* @__PURE__ */ import_react26.default.createElement(DropZone_default, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ import_react26.default.createElement(ErrorMessage_default2, { error: errorMessage, id: errorMessageId })));
1131
- }
1132
- var sendbox_default2 = (0, import_react26.memo)(SendBox);
1133
-
1134
- // src/components/SendBox.tsx
1135
- var SendBox_default = sendbox_default2;
1136
-
1137
- // src/private/FluentThemeProvider.tsx
1138
- var { ThemeProvider } = import_botframework_webchat_component10.Components;
1139
- var sendBoxMiddleware = [() => () => () => SendBox_default];
1140
- var FluentThemeProvider = ({ children }) => /* @__PURE__ */ import_react27.default.createElement(WebchatTheme, null, /* @__PURE__ */ import_react27.default.createElement(Provider_default, null, /* @__PURE__ */ import_react27.default.createElement(ThemeProvider, { sendBoxMiddleware }, children)));
1141
- var FluentThemeProvider_default = (0, import_react27.memo)(FluentThemeProvider);
1142
-
1143
- // src/index.ts
1144
- (0, import_inject_meta_tag.injectMetaTag)("botframework-webchat-fluent-theme:version", "4.17.0-main.20240425.edca85d");
1145
- injectStyles();
1146
- // Annotate the CommonJS export names for ESM import in node:
1147
- 0 && (module.exports = {
1148
- FluentThemeProvider,
1149
- testIds
1150
- });
1151
- //# sourceMappingURL=index.js.map