botframework-webchat-fluent-theme 4.17.0-main.20240425.edca85d → 4.17.0-main.20240502.a8ff179
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/botframework-webchat-fluent-theme.css.map +1 -0
- package/dist/{index.d.mts → botframework-webchat-fluent-theme.d.mts} +7 -1
- package/dist/{index.d.ts → botframework-webchat-fluent-theme.d.ts} +7 -1
- package/dist/botframework-webchat-fluent-theme.development.css.map +1 -1
- package/dist/botframework-webchat-fluent-theme.development.d.ts +2 -0
- package/dist/botframework-webchat-fluent-theme.development.js +2 -2424
- package/dist/botframework-webchat-fluent-theme.development.js.map +1 -1
- package/dist/botframework-webchat-fluent-theme.js +3 -0
- package/dist/botframework-webchat-fluent-theme.js.map +1 -0
- package/dist/botframework-webchat-fluent-theme.mjs +3 -0
- package/dist/botframework-webchat-fluent-theme.mjs.map +1 -0
- package/dist/botframework-webchat-fluent-theme.production.min.css.map +1 -1
- package/dist/botframework-webchat-fluent-theme.production.min.d.ts +2 -0
- package/dist/botframework-webchat-fluent-theme.production.min.js +2 -10
- package/dist/botframework-webchat-fluent-theme.production.min.js.map +1 -1
- package/package.json +17 -12
- package/src/components/dropZone/{index.tsx → DropZone.tsx} +2 -2
- package/src/components/dropZone/index.ts +1 -0
- package/src/components/{sendbox → sendBox}/AddAttachmentButton.tsx +1 -1
- package/src/components/{sendbox/index.tsx → sendBox/SendBox.tsx} +52 -13
- package/src/components/{sendbox → sendBox}/TelephoneKeypadToolbarButton.tsx +2 -2
- package/src/components/sendBox/index.tsx +1 -0
- package/src/components/suggestedActions/SuggestedAction.tsx +4 -2
- package/src/components/suggestedActions/{index.tsx → SuggestedActions.tsx} +19 -9
- package/src/components/suggestedActions/index.ts +1 -0
- package/src/components/suggestedActions/private/rovingFocus.tsx +180 -0
- package/src/components/telephoneKeypad/Surrogate.tsx +2 -2
- package/src/components/telephoneKeypad/private/TelephoneKeypad.tsx +4 -7
- package/src/components/{Theme.tsx → theme/Theme.tsx} +1 -1
- package/src/components/theme/index.ts +1 -0
- package/src/icons/AddDocumentIcon.tsx +4 -2
- package/src/icons/AttachmentIcon.tsx +4 -2
- package/src/icons/InfoSmallIcon.tsx +19 -15
- package/src/icons/SendIcon.tsx +4 -2
- package/src/icons/{TelephoneKeypad.tsx → TelephoneKeypadIcon.tsx} +4 -2
- package/src/icons/index.ts +5 -0
- package/src/index.ts +11 -4
- package/src/private/FluentThemeProvider.tsx +3 -3
- package/src/styles/index.ts +4 -0
- package/src/types/index.ts +1 -0
- package/dist/index.css.map +0 -1
- package/dist/index.js +0 -1151
- package/dist/index.js.map +0 -1
- package/dist/index.mjs +0 -1115
- package/dist/index.mjs.map +0 -1
- package/src/components/DropZone.tsx +0 -3
- package/src/components/SendBox.tsx +0 -3
- package/src/components/SuggestedActions.tsx +0 -3
- package/src/components/TelephoneKeypad.tsx +0 -1
- package/src/styles.ts +0 -4
- /package/src/components/dropZone/{index.module.css → DropZone.module.css} +0 -0
- /package/src/components/{sendbox → sendBox}/AddAttachmentButton.module.css +0 -0
- /package/src/components/{sendbox → sendBox}/Attachments.module.css +0 -0
- /package/src/components/{sendbox → sendBox}/Attachments.tsx +0 -0
- /package/src/components/{sendbox → sendBox}/ErrorMessage.module.css +0 -0
- /package/src/components/{sendbox → sendBox}/ErrorMessage.tsx +0 -0
- /package/src/components/{sendbox/index.module.css → sendBox/SendBox.module.css} +0 -0
- /package/src/components/{sendbox → sendBox}/TextArea.module.css +0 -0
- /package/src/components/{sendbox → sendBox}/TextArea.tsx +0 -0
- /package/src/components/{sendbox → sendBox}/Toolbar.module.css +0 -0
- /package/src/components/{sendbox → sendBox}/Toolbar.tsx +0 -0
- /package/src/components/{sendbox → sendBox}/private/useSubmitError.ts +0 -0
- /package/src/components/{sendbox → sendBox}/private/useUniqueId.ts +0 -0
- /package/src/components/suggestedActions/{index.module.css → SuggestedActions.module.css} +0 -0
- /package/src/components/{Theme.module.css → theme/Theme.module.css} +0 -0
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
"use strict";var Dt=Object.create;var Y=Object.defineProperty;var Pt=Object.getOwnPropertyDescriptor;var Rt=Object.getOwnPropertyNames;var Kt=Object.getPrototypeOf,zt=Object.prototype.hasOwnProperty;var Ot=(e,t)=>{for(var o in t)Y(e,o,{get:t[o],enumerable:!0})},Fe=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of Rt(t))!zt.call(e,n)&&n!==o&&Y(e,n,{get:()=>t[n],enumerable:!(r=Pt(t,n))||r.enumerable});return e};var i=(e,t,o)=>(o=e!=null?Dt(Kt(e)):{},Fe(t||!e||!e.__esModule?Y(o,"default",{value:e,enumerable:!0}):o,e)),Ut=e=>Fe(Y({},"__esModule",{value:!0}),e);var sr={};Ot(sr,{FluentThemeProvider:()=>At,buildInfo:()=>ar,testIds:()=>f});module.exports=Ut(sr);var Mt=require("inject-meta-tag");var Ft=require("botframework-webchat-component"),U=i(require("react"));var M=i(require("react"));var Ae=require("react"),Me=(0,Ae.createContext)(new Proxy({},{get(){throw new Error("botframework-webchat: This hook can only used under its corresponding <Provider>.")}}));Me.displayName="TelephoneKeypad.Context";var q=Me;var Zt=(0,M.memo)(({children:e})=>{let[t,o]=(0,M.useState)(!1),r=(0,M.useMemo)(()=>Object.freeze({setShown:o,shown:t}),[o,t]);return M.default.createElement(q.Provider,{value:r},e)}),ce=Zt;var ee=i(require("react"));var Pe=require("botframework-webchat-component"),Re=i(require("classnames")),l=i(require("react")),ge=require("use-ref-from");var N=i(require("react")),Ie=require("use-ref-from");var He={"telephone-keypad__button":"r","telephone-keypad__button__ruby":"e","telephone-keypad__button__text":"o","telephone-keypad--horizontal":"l"};var Wt=".webchat-fluent .r{-webkit-user-select:none;align-items:center;-webkit-appearance:none;appearance:none;background-color:#fff;border-radius:100%;border:solid 1px var(--webchat-colorNeutralStroke1);color:var(--webchat-colorGray200);font-weight:var(--webchat-fontWeightSemibold);cursor:pointer;display:flex;flex-direction:column;height:60px;opacity:.7;padding:0;position:relative;touch-action:none;user-select:none;width:60px}.webchat-fluent .r:hover{background-color:var(--webchat-colorGray30)}.webchat-fluent .e{color:var(--webchat-colorGray190);font-size:10px}.webchat-fluent .o{font-size:24px;margin-top:8px}.webchat-fluent .l .r{height:32px;justify-content:center;margin:8px 4px;width:32px}.webchat-fluent .l .e{display:none}.webchat-fluent .l .o{font-size:20px;margin-top:0}.webchat-fluent .c{align-items:center;background:var(--webchat-colorNeutralBackground1);border:none;border-radius:var(--webchat-borderRadiusXLarge);display:flex;flex-direction:column;font-family:var(--webchat-fontFamilyBase);justify-content:center}.webchat-fluent .n{box-sizing:border-box;display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);justify-items:center;padding:16px;width:100%}.webchat-fluent .d{align-items:center;color:var(--webchat-colorNeutralForeground4);display:flex;font-size:12px;gap:6px;margin-block-end:6px}.webchat-fluent .i{color:var(--webchat-colorBrandForegroundLink);text-decoration-color:transparent}.webchat-fluent .i:target{color:var(--webchat-colorBrandForegroundLinkSelected)}.webchat-fluent .i:hover{color:var(--webchat-colorBrandForegroundLinkHover);text-decoration:underline 1px currentColor}.webchat-fluent .i:active{color:var(--webchat-colorBrandForegroundLinkPressed)}.webchat-fluent .i:focus-visible{outline:none;text-decoration:underline 1px double var(--webchat-colorStrokeFocus2)}.webchat-fluent.a{display:contents;--webchat-colorNeutralForeground1: var(--colorNeutralForeground1, #242424);--webchat-colorNeutralForeground2: var(--colorNeutralForeground2, #424242);--webchat-colorNeutralForeground4: var(--colorNeutralForeground4, #707070);--webchat-colorNeutralForeground2BrandHover: var(--colorNeutralForeground2BrandHover, #02729c);--webchat-colorNeutralForeground2BrandPressed: var(--colorNeutralForeground2BrandPressed, #01678c);--webchat-colorNeutralForeground2BrandSelected: var(--colorNeutralForeground2BrandSelected, #067191);--webchat-colorNeutralForegroundDisabled: var(--colorNeutralForegroundDisabled, #bdbdbd);--webchat-colorNeutralBackground1: var(--colorNeutralBackground1, #ffffff);--webchat-colorNeutralBackground4: var(--colorNeutralBackground4, #f0f0f0);--webchat-colorNeutralBackground5: var(--colorNeutralBackground5, #ebebeb);--webchat-colorNeutralStroke1: var(--colorNeutralStroke1, #d1d1d1);--webchat-colorNeutralStroke2: var(--colorNeutralStroke2, #e0e0e0);--webchat-colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected, #bdbdbd);--webchat-colorStrokeFocus2: var(--colorStrokeFocus2, #000000);--webchat-colorBrandStroke2: var(--colorBrandStroke2, #9edcf7);--webchat-colorBrandForeground2Hover: var(--colorBrandForeground2Hover, #015a7a);--webchat-colorBrandForeground2Pressed: var(--colorBrandForeground2Pressed, #01384d);--webchat-colorBrandForegroundLink: var(--colorBrandForegroundLink, #01678c);--webchat-colorBrandForegroundLinkHover: var(--colorBrandForegroundLinkHover, #015a7a);--webchat-colorBrandForegroundLinkPressed: var(--colorBrandForegroundLinkPressed, #014259);--webchat-colorBrandForegroundLinkSelected: var(--colorBrandForegroundLinkSelected, #01678c);--webchat-colorBrandBackground2Hover: var(--colorBrandBackground2Hover, #bee7fa);--webchat-colorBrandBackground2Pressed: var(--colorBrandBackground2Pressed, #7fd2f5);--webchat-colorCompoundBrandForeground1Hover: var(--colorCompoundBrandForeground1Hover, #02729c);--webchat-colorStatusDangerForeground1: var(--colorStatusDangerForeground1, #b10e1c);--webchat-colorGray30: var(--colorGray30, #edebe9);--webchat-colorGray160: var(--colorGray160, #323130);--webchat-colorGray190: var(--colorGray190, #201f1e);--webchat-colorGray200: var(--colorGray200, #1b1a19);--webchat-borderRadiusSmall: var(--borderRadiusSmall, 2px);--webchat-borderRadiusLarge: var(--borderRadiusLarge, 6px);--webchat-borderRadiusXLarge: var(--borderRadiusXLarge, 8px);--webchat-shadow16: var(--shadow16, 0 6.4px 14.4px 0 rgba(0, 0, 0, .132), 0 1.2px 3.6px 0 rgba(0, 0, 0, .108));--webchat-spacingHorizontalMNudge: var(--spacingHorizontalMNudge, 10px);--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);--webchat-fontWeightSemibold: var(--fontWeightSemibold, 600);--webchat-strokeWidthThicker: var(--strokeWidthThicker, 3px);--webchat-durationUltraFast: var(--durationUltraFast, 0);--webchat-durationNormal: var(--durationNormal, .2s);--webchat-curveAccelerateMid: var(--curveAccelerateMid, cubic-bezier(1,0,1,1));--webchat-curveDecelerateMid: var(--curveDecelerateMid, cubic-bezier(0,0,0,1))}@media (prefers-reduced-motion){.webchat-fluent.a{--webchat-durationUltraFast: .01ms;--webchat-durationNormal: .01ms}}.webchat-fluent .b{background-color:var(--webchat-colorNeutralBackground4);border-radius:inherit;cursor:copy;display:grid;gap:8px;inset:0;place-content:center;place-items:center;position:absolute}.webchat-fluent .u{background-color:#e00;color:#fff}.webchat-fluent .h{height:36px;pointer-events:none;width:36px}.webchat-fluent .s{align-items:center;background:transparent;border-radius:8px;border:1px solid var(--webchat-colorBrandStroke2);color:currentColor;cursor:pointer;display:flex;font-size:12px;gap:4px;padding:4px 8px;text-align:start;transition:all .15s ease-out}@media (hover: hover){.webchat-fluent .s:not([aria-disabled=true]):hover{background-color:var(--webchat-colorBrandBackground2Hover);color:var(--webchat-colorBrandForeground2Hover)}}.webchat-fluent .s:not([aria-disabled=true]):active{background-color:var(--webchat-colorBrandBackground2Pressed);color:var(--webchat-colorBrandForeground2Pressed)}.webchat-fluent .s[aria-disabled=true]{color:var(--webchat-colorNeutralForegroundDisabled);cursor:not-allowed}.webchat-fluent .g{font-size:12px;height:1em;width:1em}.webchat-fluent .p{align-items:flex-end;align-self:flex-end;display:flex;flex-direction:column;gap:8px}.webchat-fluent .p:not(:empty){padding-block-end:8px;padding-inline-start:4px}.webchat-fluent .p.w{flex-direction:row;flex-wrap:wrap;justify-content:flex-end}.webchat-fluent .p.v{flex-direction:column}.webchat-fluent .f{display:flex;gap:4px;margin-inline-start:auto}.webchat-fluent .x{align-items:center;-webkit-appearance:none;appearance:none;aspect-ratio:1;background:transparent;border-radius:var(--webchat-borderRadiusSmall);border:none;color:currentColor;cursor:pointer;display:flex;justify-content:center;padding:3px;width:32px}.webchat-fluent .x>svg{font-size:20px;pointer-events:none}.webchat-fluent .x.k{color:var(--webchat-colorNeutralForeground2BrandSelected)}@media (hover: hover){.webchat-fluent .x:not([aria-disabled=true]):hover{color:var(--webchat-colorNeutralForeground2BrandHover)}}.webchat-fluent .x:not([aria-disabled=true]):active{color:var(--webchat-colorNeutralForeground2BrandPressed)}.webchat-fluent .x[aria-disabled=true]{color:var(--webchat-colorNeutralForegroundDisabled);cursor:not-allowed}.webchat-fluent .m{align-self:center;border-inline-end:1px solid var(--webchat-colorNeutralStroke2);height:28px}.webchat-fluent .m:is(:first-child,:last-child,:only-child){display:none}.webchat-fluent .B{display:grid}.webchat-fluent .F{font-size:0;height:0;opacity:0;width:0}.webchat-fluent .y{border-radius:var(--webchat-borderRadiusLarge);border:1px solid var(--webchat-colorNeutralStroke1);cursor:default;padding:6px 8px;width:fit-content}.webchat-fluent .N{color:transparent;font-size:0;height:0;left:0;position:absolute;top:0;width:0}.webchat-fluent .S{display:grid;grid-template-areas:\"main\";max-height:200px;overflow:hidden}.webchat-fluent .z{height:0;visibility:collapse}.webchat-fluent .L{border:none;font:inherit;grid-area:main;outline:inherit;overflow-wrap:anywhere;resize:inherit;scrollbar-gutter:stable}.webchat-fluent .H{overflow:hidden;visibility:hidden;white-space:pre-wrap}.webchat-fluent .W{background-color:inherit;color:currentColor;height:100%;padding:0}.webchat-fluent .P{scrollbar-color:unset;scrollbar-width:unset;-moz-scrollbar-color:var(--webchat-colorNeutralBackground5) var(--webchat-colorNeutralForeground2);-moz-scrollbar-width:thin}.webchat-fluent .P::-webkit-scrollbar{width:8px}.webchat-fluent .P::-webkit-scrollbar-track{background-color:var(--webchat-colorNeutralBackground5);border-radius:16px}.webchat-fluent .P::-webkit-scrollbar-thumb{background-color:var(--webchat-colorNeutralForeground2);border-radius:16px}.webchat-fluent .P::-webkit-scrollbar-corner{background-color:var(--webchat-colorNeutralBackground5)}.webchat-fluent .R{color:var(--webchat-colorNeutralForeground1);font-family:var(--webchat-fontFamilyBase);padding:0 10px 10px;text-rendering:optimizeLegibility;--webchat-sendbox-attachment-area-active: ;--webchat-sendbox-border-radius: var(--webchat-borderRadiusLarge)}.webchat-fluent .G{background-color:var(--webchat-colorNeutralBackground1);border-radius:var(--webchat-sendbox-border-radius);border:1px solid var(--webchat-colorNeutralStroke1);display:grid;font-family:var(--webchat-fontFamilyBase);font-size:14px;gap:6px;grid-template:[telephone-keypad-start] \"text-area\" [telephone-keypad-end] var(--webchat-sendbox-attachment-area-active) \"controls\" / [telephone-keypad] 1fr;line-height:20px;padding:8px;position:relative}.webchat-fluent .G:has(.t){--webchat-sendbox-attachment-area-active: \"attachment\" }.webchat-fluent .G:focus-within{border-color:var(--webchat-colorNeutralStroke1Selected)}.webchat-fluent .G:after{border-bottom-left-radius:var(--webchat-sendbox-border-radius);border-bottom-right-radius:var(--webchat-sendbox-border-radius);border-bottom:var(--webchat-strokeWidthThicker) solid var(--webchat-colorCompoundBrandForeground1Hover);bottom:-1px;clip-path:inset(calc(100% - var(--webchat-strokeWidthThicker)) 50% 0 50%);content:\"\";height:var(--webchat-sendbox-border-radius);left:-1px;position:absolute;right:-1px;transition:clip-path var(--webchat-durationUltraFast) var(--webchat-curveAccelerateMid)}.webchat-fluent .G:focus-within:after{clip-path:inset(calc(100% - var(--webchat-strokeWidthThicker)) 0 0 0);transition:clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid)}.webchat-fluent .G>.D{grid-area:text-area}.webchat-fluent .G>.t{grid-area:attachment}.webchat-fluent .G>.M{grid-area:controls}.webchat-fluent .G>.U{grid-area:telephone-keypad}.webchat-fluent .C{background-color:transparent;border:none;flex:auto;font-family:var(--webchat-fontFamilyBase);font-size:14px;line-height:20px;outline:none;padding:4px 4px 0;resize:none}.webchat-fluent .j{align-items:center;display:flex;padding-inline-start:4px}.webchat-fluent .T{color:var(--webchat-colorNeutralForeground4);cursor:default;font-family:var(--webchat-fontFamilyNumeric);font-size:10px;line-height:14px;margin-inline-end:4px}.webchat-fluent .I{color:var(--webchat-colorStatusDangerForeground1)}\n/*! For license information please see botframework-webchat-fluent-theme.css.LEGAL.txt */\n";function J(){if(globalThis.document){let e=document.createElement("style");e.append(document.createTextNode(Wt)),document.head.appendChild(e)}}var Le=require("react");function Xt(e){return(0,Le.useMemo)(()=>Object.freeze(Object.fromEntries(Object.entries(e).map(([t,o])=>[t,`${t} ${o}`]))),[e])}var m=Xt;var De=(0,N.memo)((0,N.forwardRef)(({button:e,"data-testid":t,onClick:o,ruby:r},n)=>{let u=m(He),p=(0,Ie.useRefFrom)(o),a=(0,N.useCallback)(()=>p.current?.(),[p]);return N.default.createElement("button",{className:u["telephone-keypad__button"],"data-testid":t,onClick:a,ref:n,type:"button"},N.default.createElement("span",{className:u["telephone-keypad__button__text"]},e==="star"?"\u2217":e==="pound"?"#":e),!!r&&N.default.createElement("ruby",{className:u["telephone-keypad__button__ruby"]},r))}));De.displayName="TelephoneKeypad.Button";var w=De;var Gt={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"},f=Gt;var Q=require("react");function S(){let{setShown:e,shown:t}=(0,Q.useContext)(q);return(0,Q.useMemo)(()=>Object.freeze([t,e]),[t,e])}var ue={"telephone-keypad":"c","telephone-keypad__box":"n","telephone-keypad__info-message":"d","telephone-keypad__info-message-link":"i"};var j=i(require("react"));function Vt(e){return j.default.createElement("svg",{"aria-hidden":"true",className:e.className,height:"1em",viewBox:"0 0 20 20",width:"1em",xmlns:"http://www.w3.org/2000/svg"},j.default.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"}))}var me=(0,j.memo)(Vt);var W=i(require("react"));function Yt(e){return W.default.createElement("svg",{"aria-hidden":"true",className:e.className,height:"1em",viewBox:"0 0 20 20",width:"1em",xmlns:"http://www.w3.org/2000/svg"},W.default.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"}))}var pe=(0,W.memo)(Yt);var X=i(require("react"));function qt(e){return X.default.createElement("svg",{"aria-hidden":"true",className:e.className,height:"1em",viewBox:"0 0 16 16",width:"1em",xmlns:"http://www.w3.org/2000/svg"},X.default.createElement("path",{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",fill:"currentColor"}))}var be=(0,X.memo)(qt);var G=i(require("react"));function Jt(e){return G.default.createElement("svg",{"aria-hidden":"true",className:e.className,height:"1em",viewBox:"0 0 20 20",width:"1em",xmlns:"http://www.w3.org/2000/svg"},G.default.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"}))}var fe=(0,G.memo)(Jt);var $=i(require("react"));function Qt(e){return $.default.createElement("svg",{"aria-hidden":"true",className:e.className,height:"1em",viewBox:"0 0 20 20",width:"1em",xmlns:"http://www.w3.org/2000/svg"},$.default.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"}))}var he=(0,$.memo)(Qt);var{LocalizedString:eo}=Pe.Components,Ke=(0,l.memo)(({children:e,isHorizontal:t})=>{let o=m(ue);return t?null:l.default.createElement("div",{className:o["telephone-keypad__box"]},e)});Ke.displayName="TelephoneKeypad:Orientation";var ze=(0,l.memo)(({autoFocus:e,className:t,onButtonClick:o,isHorizontal:r})=>{let n=(0,ge.useRefFrom)(e),u=m(ue),p=(0,l.useRef)(null),a=(0,ge.useRefFrom)(o),[,b]=S(),x=(0,l.useCallback)(()=>a.current?.("1"),[a]),s=(0,l.useCallback)(()=>a.current?.("2"),[a]),d=(0,l.useCallback)(()=>a.current?.("3"),[a]),g=(0,l.useCallback)(()=>a.current?.("4"),[a]),y=(0,l.useCallback)(()=>a.current?.("5"),[a]),A=(0,l.useCallback)(()=>a.current?.("6"),[a]),C=(0,l.useCallback)(()=>a.current?.("7"),[a]),F=(0,l.useCallback)(()=>a.current?.("8"),[a]),_=(0,l.useCallback)(()=>a.current?.("9"),[a]),B=(0,l.useCallback)(()=>a.current?.("0"),[a]),P=(0,l.useCallback)(()=>a.current?.("star"),[a]),z=(0,l.useCallback)(()=>a.current?.("pound"),[a]),le=(0,l.useCallback)(de=>{de.key==="Escape"&&b(!1)},[b]);return(0,l.useEffect)(()=>{n.current&&p.current?.focus()},[n,p]),l.default.createElement("div",{className:(0,Re.default)(u["telephone-keypad"],t),onKeyDown:le},l.default.createElement(Ke,{isHorizontal:r},l.default.createElement(w,{button:"1","data-testid":f.sendBoxTelephoneKeypadButton1,onClick:x,ref:p}),l.default.createElement(w,{button:"2","data-testid":f.sendBoxTelephoneKeypadButton2,onClick:s,ruby:"ABC"}),l.default.createElement(w,{button:"3","data-testid":f.sendBoxTelephoneKeypadButton3,onClick:d,ruby:"DEF"}),l.default.createElement(w,{button:"4","data-testid":f.sendBoxTelephoneKeypadButton4,onClick:g,ruby:"GHI"}),l.default.createElement(w,{button:"5","data-testid":f.sendBoxTelephoneKeypadButton5,onClick:y,ruby:"JKL"}),l.default.createElement(w,{button:"6","data-testid":f.sendBoxTelephoneKeypadButton6,onClick:A,ruby:"MNO"}),l.default.createElement(w,{button:"7","data-testid":f.sendBoxTelephoneKeypadButton7,onClick:C,ruby:"PQRS"}),l.default.createElement(w,{button:"8","data-testid":f.sendBoxTelephoneKeypadButton8,onClick:F,ruby:"TUV"}),l.default.createElement(w,{button:"9","data-testid":f.sendBoxTelephoneKeypadButton9,onClick:_,ruby:"WXYZ"}),l.default.createElement(w,{button:"star","data-testid":f.sendBoxTelephoneKeypadButtonStar,onClick:P}),l.default.createElement(w,{button:"0","data-testid":f.sendBoxTelephoneKeypadButton0,onClick:B,ruby:"+"}),l.default.createElement(w,{button:"pound","data-testid":f.sendBoxTelephoneKeypadButtonPound,onClick:z})),l.default.createElement("div",{className:u["telephone-keypad__info-message"]},l.default.createElement(be,null),l.default.createElement(eo,{linkClassName:u["telephone-keypad__info-message-link"],stringIds:"TELEPHONE_KEYPAD_INPUT_MESSAGE"})))});ze.displayName="TelephoneKeypad";var Oe=ze;var Ue=(0,ee.memo)(e=>S()[0]?ee.default.createElement(Oe,{...e}):null);Ue.displayName="TelephoneKeypad.Surrogate";var xe=Ue;var je=i(require("react")),We=i(require("classnames"));var Ze={theme:"a"};var oo="webchat-fluent";function te(e){let t=m(Ze);return je.default.createElement("div",{className:(0,We.default)(oo,t.theme)},e.children)}var Ct=require("botframework-webchat-component"),O=i(require("classnames")),c=i(require("react")),Se=require("use-ref-from");var $e=require("botframework-webchat-component"),Ve=i(require("classnames")),T=i(require("react")),Ye=require("use-ref-from");var Xe={"sendbox__attachment-drop-zone":"b","sendbox__attachment-drop-zone--droppable":"u","sendbox__attachment-drop-zone-icon":"h"};var{useLocalizer:no}=$e.hooks,ao=e=>{e.preventDefault()},Ge=e=>!!e.dataTransfer?.types?.some(t=>t.toLowerCase()==="files");function so(e,t){let o=e.parentNode;for(;o;){if(o===t)return!0;o=o.parentNode}return!1}var qe=e=>{let[t,o]=(0,T.useState)(!1),r=m(Xe),n=(0,T.useRef)(null),u=no(),p=(0,Ye.useRefFrom)(e.onFilesAdded);(0,T.useEffect)(()=>{let b=0,x=d=>{b++,Ge(d)&&o(n.current&&(d.target===n.current||d.target instanceof HTMLElement&&so(d.target,n.current))?"droppable":"visible")},s=()=>--b<=0&&o(!1);return document.addEventListener("dragenter",x,!1),document.addEventListener("dragleave",s,!1),()=>{document.removeEventListener("dragenter",x),document.removeEventListener("dragleave",s)}},[o]);let a=(0,T.useCallback)(b=>{b.preventDefault(),o(!1),Ge(b.nativeEvent)&&p.current([...b.dataTransfer.files])},[p,o]);return t?T.default.createElement("div",{className:(0,Ve.default)(r["sendbox__attachment-drop-zone"],{[r["sendbox__attachment-drop-zone--droppable"]]:t==="droppable"}),"data-testid":f.sendBoxDropZone,onDragOver:ao,onDrop:a,ref:n},T.default.createElement(me,{className:r["sendbox__attachment-drop-zone-icon"]}),u("TEXT_INPUT_DROP_ZONE")):null};qe.displayName="DropZone";var ye=(0,T.memo)(qe);var st=require("botframework-webchat-component"),lt=i(require("classnames")),E=i(require("react"));var rt=require("botframework-webchat-component"),nt=i(require("classnames")),L=i(require("react"));var Je={"suggested-action":"s","suggested-action__image":"g"};var H=i(require("react")),io=e=>e.preventDefault(),co=(0,H.forwardRef)(({"aria-hidden":e,children:t,disabled:o,onClick:r,tabIndex:n,...u},p)=>{let a=(0,H.useRef)(null);return H.default.createElement("button",{"aria-disabled":o?"true":"false","aria-hidden":e,onClick:o?io:r,ref:p||a,tabIndex:n,...o&&{"aria-disabled":"true",tabIndex:-1},...u,type:"button"},t)}),Qe=(0,H.memo)(co);var h=i(require("react")),et=(0,h.createContext)({itemEffector:()=>{throw new Error("botframework-webchat-fluent-theme rovingFocus: no provider for RovingFocusContext.")}});function uo(e){let t=(0,h.useRef)(0),o=(0,h.useRef)([]),r=(0,h.useCallback)(({current:s},d)=>s&&(s.tabIndex=t.current===d?0:-1),[t]),n=(0,h.useCallback)(s=>{let d;typeof s=="number"?d=s:d=s(t.current),d&&!o.current.at(d)?.current&&(d=0),t.current!==d&&(t.current=d,o.current.forEach((g,y)=>r(g,y)),o.current.at(d)?.current?.focus())},[r,o,t]),u=(0,h.useCallback)(s=>{let{target:d}=s,g=o.current.findIndex(({current:y})=>y===d);g!==-1&&n(g)},[o,n]),p=(0,h.useCallback)(s=>d=>{let g=!e.direction,y=/up|down/iu.test(s)&&e.direction==="vertical",A=/left|right/iu.test(s)&&e.direction==="horizontal",C=/right|down/iu.test(s),F=g||y||A?C?1:-1:0,_=o.current.map((P,z)=>z),B=_.indexOf(d)+F;return _.at(B)??0},[e.direction]),a=(0,h.useCallback)(s=>{let{key:d}=s;switch(d){case"Up":case"ArrowUp":case"Left":case"ArrowLeft":case"Down":case"ArrowDown":case"Right":case"ArrowRight":n(p(d));break;case"Home":n(0);break;case"End":n(-1);break;case"Escape":e.onEscapeKey?.();break;default:return}s.preventDefault(),s.stopPropagation()},[n,p,e]),b=(0,h.useCallback)((s,d)=>{let{current:g}=s;return o.current[Number(d)]=s,g.addEventListener("focus",u),g.addEventListener("keydown",a),r(s,d),()=>{g.removeEventListener("focus",u),g.removeEventListener("keydown",a),delete o.current[Number(d)]}},[u,a,r,o]),x=(0,h.useMemo)(()=>({itemEffector:b}),[b]);return h.default.createElement(et.Provider,{value:x},e.children)}function tt(e){let t=(0,h.useRef)(null),{itemEffector:o}=(0,h.useContext)(et);return(0,h.useEffect)(()=>o(t,e)),t}var ot=(0,h.memo)(uo);var{useDisabled:mo,useFocus:po,usePerformCardAction:bo,useScrollToEnd:fo,useStyleSet:ho,useSuggestedActions:go}=rt.hooks;function xo({buttonText:e,className:t,displayText:o,image:r,imageAlt:n,itemIndex:u,text:p,type:a,value:b}){let[x,s]=go(),[{suggestedAction:d}]=ho(),[g]=mo(),y=po(),A=tt(u),C=bo(),F=m(Je),_=fo(),B=(0,L.useCallback)(({target:P})=>{(async function(){await y("sendBoxWithoutKeyboard"),C({displayText:o,text:p,type:a,value:b},{target:P}),a==="openUrl"&&s([]),_()})()},[o,y,C,_,s,p,a,b]);return L.default.createElement(Qe,{className:(0,nt.default)(F["suggested-action"],d+"",(t||"")+""),disabled:g,onClick:B,ref:A,type:"button"},r&&L.default.createElement("img",{alt:n,className:F["suggested-action__image"],src:r}),L.default.createElement("span",null,e))}var at=(0,L.memo)(xo);function ve(e){let{title:t}=e,{type:o,value:r}=e;return o==="messageBack"?t||e.displayText:t||(typeof r=="string"?r:JSON.stringify(r))}var we={"suggested-actions":"p","suggested-actions--flow":"w","suggested-actions--stacked":"v"};var{useFocus:vo,useLocalizer:wo,useStyleOptions:To,useStyleSet:ko,useSuggestedActions:_o}=st.hooks;function Bo(e){let[{suggestedActionLayout:t}]=To(),[{suggestedActions:o}]=ko(),r=m(we);return E.default.createElement("div",{"aria-label":e["aria-label"],"aria-live":"polite","aria-orientation":"vertical",className:(0,lt.default)(r["suggested-actions"],o+"",{[r["suggested-actions--flow"]]:t==="flow",[r["suggested-actions--stacked"]]:t!=="flow"},e.className),role:"toolbar"},!!e.children&&!!E.default.Children.count(e.children)&&e.children)}function No(){let e=m(we),t=wo(),[o]=_o(),r=vo(),n=(0,E.useCallback)(()=>{r("sendBox")},[r]),u=o.map((p,a)=>{let{displayText:b,image:x,imageAltText:s,text:d,type:g,value:y}=p;return o?.length?E.default.createElement(at,{buttonText:ve(p),displayText:b,image:x,imageAlt:x&&(s||d),itemIndex:a,key:a,text:d,type:g,value:y}):null});return E.default.createElement(ot,{onEscapeKey:n},E.default.createElement(Bo,{"aria-label":t("SUGGESTED_ACTIONS_LABEL_ALT"),className:e["suggested-actions"]},u))}var Te=(0,E.memo)(No);var it=require("botframework-webchat-component"),k=i(require("react")),ct=require("use-ref-from");var re=i(require("classnames")),I=i(require("react"));var oe={sendbox__toolbar:"f","sendbox__toolbar-button":"x","sendbox__toolbar-button--selected":"k","sendbox__toolbar-separator":"m"};var Eo=e=>e.preventDefault(),R=(0,I.memo)(e=>{let t=m(oe);return I.default.createElement("button",{"aria-label":e["aria-label"],className:(0,re.default)(t["sendbox__toolbar-button"],e.className,{[t["sendbox__toolbar-button--selected"]]:e.selected}),"data-testid":e["data-testid"],onClick:e.disabled?Eo:e.onClick,type:e.type==="submit"?"submit":"button",...e.disabled&&{"aria-disabled":"true",tabIndex:-1}},e.children)});R.displayName="ToolbarButton";var ke=(0,I.memo)(e=>{let t=m(oe);return I.default.createElement("div",{className:(0,re.default)(t.sendbox__toolbar,e.className)},e.children)});ke.displayName="Toolbar";var _e=(0,I.memo)(e=>{let t=m(oe);return I.default.createElement("div",{"aria-orientation":"vertical",className:(0,re.default)(t["sendbox__toolbar-separator"],e.className),role:"separator"})});_e.displayName="ToolbarSeparator";var dt={"sendbox__add-attachment":"B","sendbox__add-attachment-input":"F"};var{useLocalizer:Fo,useStyleOptions:Ao}=it.hooks;function Mo(e){let t=(0,k.useRef)(null),o=m(dt),r=Fo(),[{uploadAccept:n,uploadMultiple:u}]=Ao(),p=(0,ct.useRefFrom)(e.onFilesAdded),a=(0,k.useCallback)(()=>t.current?.click(),[t]),b=(0,k.useCallback)(({target:{files:x}})=>{x&&(p.current?.([...x]),t.current&&(t.current.value=""))},[t,p]);return k.default.createElement("div",{className:o["sendbox__add-attachment"]},k.default.createElement("input",{accept:n,"aria-disabled":e.disabled,"aria-hidden":"true",className:o["sendbox__add-attachment-input"],multiple:u,onInput:e.disabled?void 0:b,readOnly:e.disabled,ref:t,role:"button",tabIndex:-1,type:"file"}),k.default.createElement(R,{"aria-label":r("TEXT_INPUT_UPLOAD_BUTTON_ALT"),"data-testid":f.sendBoxUploadButton,onClick:a},k.default.createElement(pe,null)))}var ut=(0,k.memo)(Mo);var pt=require("botframework-webchat-component"),ne=i(require("react")),bt=i(require("classnames"));var mt={sendbox__attachment:"y"};var{useLocalizer:Lo}=pt.hooks,Io={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 Do({attachments:e,className:t}){let o=m(mt),r=Lo({plural:!0});return e.length?ne.default.createElement("div",{className:(0,bt.default)(o.sendbox__attachment,t)},r(Io,e.length)):null}var ft=(0,ne.memo)(Do);var ae=i(require("react"));var ht={"sendbox__error-message":"N"};function Ro(e){let t=m(ht);return ae.default.createElement("span",{className:t["sendbox__error-message"],id:e.id,role:"alert"},e.error)}var gt=(0,ae.memo)(Ro);var K=i(require("react")),xt=require("botframework-webchat-component");var{useLocalizer:Ko}=xt.hooks,yt=(0,K.memo)(()=>{let[e,t]=S(),o=Ko(),r=(0,K.useCallback)(()=>t(n=>!n),[t]);return K.default.createElement(R,{"aria-label":o("TEXT_INPUT_TELEPHONE_KEYPAD_BUTTON_ALT"),"data-testid":f.sendBoxTelephoneKeypadToolbarButton,onClick:r,selected:e},K.default.createElement(he,null))});yt.displayName="SendBox.TelephoneKeypadToolbarButton";var vt=yt;var se=i(require("classnames")),D=i(require("react"));var wt={"sendbox__text-area":"S","sendbox__text-area--hidden":"z","sendbox__text-area-shared":"L","sendbox__text-area-doppelganger":"H","sendbox__text-area-input":"W","sendbox__text-area-input--scroll":"P"};var Tt=(0,D.forwardRef)((e,t)=>{let o=m(wt),r=(0,D.useCallback)(n=>{!n.shiftKey&&n.key==="Enter"&&(n.preventDefault(),"form"in n.target&&n.target.form instanceof HTMLFormElement&&n.target?.form?.requestSubmit())},[]);return D.default.createElement("div",{className:(0,se.default)(o["sendbox__text-area"],{[o["sendbox__text-area--hidden"]]:e.hidden},e.className),role:e.hidden?"hidden":void 0},D.default.createElement("div",{className:(0,se.default)(o["sendbox__text-area-doppelganger"],o["sendbox__text-area-shared"],o["sendbox__text-area-input--scroll"])},e.value||e.placeholder," "),D.default.createElement("textarea",{"aria-label":e["aria-label"],className:(0,se.default)(o["sendbox__text-area-input"],o["sendbox__text-area-shared"],o["sendbox__text-area-input--scroll"]),"data-testid":e["data-testid"],onInput:e.onInput,onKeyDown:r,placeholder:e.placeholder,ref:t,rows:e.startRows??1,tabIndex:e.hidden?-1:void 0,value:e.value}))});Tt.displayName="TextArea";var kt=Tt;var _t=require("botframework-webchat-component"),Be=require("react"),Bt=require("use-ref-from"),{useConnectivityStatus:Oo,useLocalizer:Uo}=_t.hooks,Zo=({attachments:e,message:t})=>{let[o]=Oo(),r=Uo(),n=(0,Bt.useRefFrom)(o!=="connected"&&o!=="reconnected"?"offline":!t&&!e.length?"empty":void 0),u=(0,Be.useMemo)(()=>Object.freeze(new Map().set("empty",r("SEND_BOX_IS_EMPTY_TOOLTIP_ALT")).set("offline",r("CONNECTIVITY_STATUS_ALT_FATAL"))),[r]);return(0,Be.useMemo)(()=>Object.freeze([n,n.current&&u.get(n.current)]),[u,n])},Nt=Zo;var St=require("react");function Ne(e){let t=(0,St.useMemo)(()=>Math.random().toString(36).substr(2,5),[]);return e=e?`${e}--`:"",`${e}${t}`}var Et={sendbox:"R",sendbox__sendbox:"G","sendbox__attachment--in-grid":"t","sendbox__text-area--in-grid":"D","sendbox__sendbox-controls--in-grid":"M","sendbox__telephone-keypad--in-grid":"U","sendbox__sendbox-text":"C","sendbox__sendbox-controls":"j","sendbox__text-counter":"T","sendbox__text-counter--error":"I"};var{useFocus:Wo,useLocalizer:Xo,useMakeThumbnail:Go,useRegisterFocusSendBox:$o,useSendBoxAttachments:Vo,useSendMessage:Yo,useStyleOptions:qo}=Ct.hooks;function Jo(e){let t=(0,c.useRef)(null),[o,r]=(0,c.useState)(""),[n,u]=Vo(),[{hideTelephoneKeypadButton:p,hideUploadButton:a,maxMessageLength:b}]=qo(),x=!!b&&o.length>b,s=m(Et),d=Xo(),g=Yo(),y=Go(),A=Ne("sendbox__error-message-id"),[C,F]=Nt({message:o,attachments:n}),[_]=S(),B=Wo();$o((0,c.useCallback)(({noKeyboard:v,waitUntil:ie})=>{t.current&&(v?ie((async()=>{let Z=t.current?.getAttribute("readonly");t.current?.setAttribute("readonly","true"),await new Promise(V=>setTimeout(V,0)),t.current?.focus(),typeof Z!="string"?t.current?.removeAttribute("readonly"):t.current?.setAttribute("readonly",Z)})()):t.current?.focus())},[t]));let P=(0,Se.useRefFrom)(n),z=(0,Se.useRefFrom)(o),le=(0,c.useCallback)(v=>{"tabIndex"in v.target&&typeof v.target.tabIndex=="number"&&v.target.tabIndex>=0||B("sendBox")},[B]),de=(0,c.useCallback)(v=>r(v.currentTarget.value),[r]),Ce=(0,c.useCallback)(async v=>{let ie=Object.freeze(await Promise.all(v.map(Z=>y(Z).then(V=>Object.freeze({blob:Z,...V&&{thumbnailURL:V}})))));u(ie)},[y,u]),Ht=(0,c.useCallback)(v=>{v.preventDefault(),C.current!=="empty"&&!x&&(g(z.current,void 0,{attachments:P.current}),r(""),u([])),B("sendBox")},[P,z,g,u,r,x,C,B]),Lt=(0,c.useCallback)(v=>g(`/DTMF ${v}`),[g]),It={"aria-invalid":"false",...F&&{"aria-invalid":"true","aria-errormessage":A}};return c.default.createElement("form",{...It,className:(0,O.default)(s.sendbox,e.className),onSubmit:Ht},c.default.createElement(Te,null),c.default.createElement("div",{className:(0,O.default)(s.sendbox__sendbox),onClickCapture:le},c.default.createElement(kt,{"aria-label":d(x?"TEXT_INPUT_LENGTH_EXCEEDED_ALT":"TEXT_INPUT_ALT"),className:(0,O.default)(s["sendbox__sendbox-text"],s["sendbox__text-area--in-grid"]),"data-testid":f.sendBoxTextBox,hidden:_,onInput:de,placeholder:e.placeholder??d("TEXT_INPUT_PLACEHOLDER"),ref:t,value:o}),c.default.createElement(xe,{autoFocus:!0,className:s["sendbox__telephone-keypad--in-grid"],isHorizontal:!1,onButtonClick:Lt}),c.default.createElement(ft,{attachments:n,className:s["sendbox__attachment--in-grid"]}),c.default.createElement("div",{className:(0,O.default)(s["sendbox__sendbox-controls"],s["sendbox__sendbox-controls--in-grid"])},!_&&b&&c.default.createElement("div",{className:(0,O.default)(s["sendbox__text-counter"],{[s["sendbox__text-counter--error"]]:x})},`${o.length}/${b}`),c.default.createElement(ke,null,!p&&c.default.createElement(vt,null),!a&&c.default.createElement(ut,{onFilesAdded:Ce}),c.default.createElement(_e,null),c.default.createElement(R,{"aria-label":d("TEXT_INPUT_SEND_BUTTON_ALT"),"data-testid":f.sendBoxSendButton,disabled:x||_,type:"submit"},c.default.createElement(fe,null)))),c.default.createElement(ye,{onFilesAdded:Ce}),c.default.createElement(gt,{error:F,id:A})))}var Ee=(0,c.memo)(Jo);var{ThemeProvider:Qo}=Ft.Components,er=[()=>()=>()=>Ee],tr=({children:e})=>U.default.createElement(te,null,U.default.createElement(ce,null,U.default.createElement(Qo,{sendBoxMiddleware:er},e))),At=(0,U.memo)(tr);var or="tsup",rr="commonjs",nr="4.17.0-main.20240502.a8ff179",ar={buildTool:or,moduleFormat:rr,version:nr};(0,Mt.injectMetaTag)("botframework-webchat:fluent-theme","version=4.17.0-main.20240502.a8ff179; build-tool=tsup; module-format=commonjs");J();
|
|
2
|
+
/*! For license information please see botframework-webchat-fluent-theme.js.LEGAL.txt */
|
|
3
|
+
//# sourceMappingURL=botframework-webchat-fluent-theme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/private/FluentThemeProvider.tsx","../src/components/telephoneKeypad/Provider.tsx","../src/components/telephoneKeypad/private/Context.ts","../src/components/telephoneKeypad/Surrogate.tsx","../src/components/telephoneKeypad/private/TelephoneKeypad.tsx","../src/components/telephoneKeypad/private/Button.tsx","../src/components/telephoneKeypad/private/Button.module.css","../src/styles/injectStyle.ts","../src/styles/useStyles.ts","../src/testIds.ts","../src/components/telephoneKeypad/useShown.ts","../src/components/telephoneKeypad/private/TelephoneKeypad.module.css","../src/icons/AddDocumentIcon.tsx","../src/icons/AttachmentIcon.tsx","../src/icons/InfoSmallIcon.tsx","../src/icons/SendIcon.tsx","../src/icons/TelephoneKeypadIcon.tsx","../src/components/theme/Theme.tsx","../src/components/theme/Theme.module.css","../src/components/sendBox/SendBox.tsx","../src/components/dropZone/DropZone.tsx","../src/components/dropZone/DropZone.module.css","../src/components/suggestedActions/SuggestedActions.tsx","../src/components/suggestedActions/SuggestedAction.tsx","../src/components/suggestedActions/SuggestedAction.module.css","../src/components/suggestedActions/AccessibleButton.tsx","../src/components/suggestedActions/private/rovingFocus.tsx","../src/components/suggestedActions/private/computeSuggestedActionText.ts","../src/components/suggestedActions/SuggestedActions.module.css","../src/components/sendBox/AddAttachmentButton.tsx","../src/components/sendBox/Toolbar.tsx","../src/components/sendBox/Toolbar.module.css","../src/components/sendBox/AddAttachmentButton.module.css","../src/components/sendBox/Attachments.tsx","../src/components/sendBox/Attachments.module.css","../src/components/sendBox/ErrorMessage.tsx","../src/components/sendBox/ErrorMessage.module.css","../src/components/sendBox/TelephoneKeypadToolbarButton.tsx","../src/components/sendBox/TextArea.tsx","../src/components/sendBox/TextArea.module.css","../src/components/sendBox/private/useSubmitError.ts","../src/components/sendBox/private/useUniqueId.ts","../src/components/sendBox/SendBox.module.css"],"sourcesContent":["import { injectMetaTag } from 'inject-meta-tag';\n\nimport FluentThemeProvider from './private/FluentThemeProvider';\nimport { injectStyle } from './styles';\nimport testIds from './testIds';\n\nconst buildTool = process.env['build_tool'];\nconst moduleFormat = process.env['module_format'];\nconst version = process.env['npm_package_version'];\n\nconst buildInfo = { buildTool, moduleFormat, version };\n\ninjectMetaTag(\n 'botframework-webchat:fluent-theme',\n `version=${process.env['npm_package_version']}; build-tool=${process.env['build_tool']}; module-format=${process.env['module_format']}`\n);\n\ninjectStyle();\n\nexport { FluentThemeProvider, buildInfo, testIds };\n","import { Components } from 'botframework-webchat-component';\nimport React, { memo, type ReactNode } from 'react';\n\nimport { TelephoneKeypadProvider } from '../components/telephoneKeypad';\nimport { WebChatTheme } from '../components/theme';\nimport { SendBox } from '../components/sendBox';\n\nconst { ThemeProvider } = Components;\n\ntype Props = Readonly<{ children?: ReactNode | undefined }>;\n\nconst sendBoxMiddleware = [() => () => () => SendBox];\n\nconst FluentThemeProvider = ({ children }: Props) => (\n <WebChatTheme>\n <TelephoneKeypadProvider>\n <ThemeProvider sendBoxMiddleware={sendBoxMiddleware}>{children}</ThemeProvider>\n </TelephoneKeypadProvider>\n </WebChatTheme>\n);\n\nexport default memo(FluentThemeProvider);\n","import React, { memo, useMemo, useState, type ReactNode } from 'react';\n\nimport Context from './private/Context';\n\ntype Props = Readonly<{ children?: ReactNode | undefined }>;\n\nconst Provider = memo(({ children }: Props) => {\n const [shown, setShown] = useState(false);\n\n const context = useMemo(\n () =>\n Object.freeze({\n setShown,\n shown\n }),\n [setShown, shown]\n );\n\n return <Context.Provider value={context}>{children}</Context.Provider>;\n});\n\nexport default Provider;\n","import { createContext, type Dispatch, type SetStateAction } from 'react';\n\ntype ContextType = Readonly<{\n setShown: Dispatch<SetStateAction<boolean>>;\n shown: boolean;\n}>;\n\nconst Context = createContext<ContextType>(\n new Proxy({} as ContextType, {\n get() {\n throw new Error('botframework-webchat: This hook can only used under its corresponding <Provider>.');\n }\n })\n);\n\nContext.displayName = 'TelephoneKeypad.Context';\n\nexport default Context;\n","import React, { memo } from 'react';\n\nimport type { PropsOf } from '../../types';\nimport TelephoneKeypad from './private/TelephoneKeypad';\nimport useShown from './useShown';\n\ntype Props = PropsOf<typeof TelephoneKeypad>;\n\nconst TelephoneKeypadSurrogate = memo((props: Props) => (useShown()[0] ? <TelephoneKeypad {...props} /> : null));\n\nTelephoneKeypadSurrogate.displayName = 'TelephoneKeypad.Surrogate';\n\nexport default TelephoneKeypadSurrogate;\n","import { Components } from 'botframework-webchat-component';\nimport cx from 'classnames';\nimport React, { memo, useCallback, useEffect, useRef, type KeyboardEventHandler, type ReactNode } from 'react';\nimport { useRefFrom } from 'use-ref-from';\n\nimport Button from './Button';\n// import HorizontalDialPadController from './HorizontalDialPadController';\nimport testIds from '../../../testIds';\nimport { type DTMF } from '../types';\nimport useShown from '../useShown';\nimport styles from './TelephoneKeypad.module.css';\nimport { useStyles } from '../../../styles';\nimport { InfoSmallIcon } from '../../../icons';\n\nconst { LocalizedString } = Components;\n\ntype Props = Readonly<{\n autoFocus?: boolean | undefined;\n className?: string | undefined;\n isHorizontal: boolean;\n onButtonClick: (button: DTMF) => void;\n}>;\n\nconst Orientation = memo(\n ({ children, isHorizontal }: Readonly<{ children?: ReactNode | undefined; isHorizontal: boolean }>) => {\n const classNames = useStyles(styles);\n\n return isHorizontal ? null : ( // <HorizontalDialPadController>{children}</HorizontalDialPadController>\n <div className={classNames['telephone-keypad__box']}>{children}</div>\n );\n }\n);\n\nOrientation.displayName = 'TelephoneKeypad:Orientation';\n\nconst TelephoneKeypad = memo(({ autoFocus, className, onButtonClick, isHorizontal }: Props) => {\n const autoFocusRef = useRefFrom(autoFocus);\n const classNames = useStyles(styles);\n const firstButtonRef = useRef<HTMLButtonElement>(null);\n const onButtonClickRef = useRefFrom(onButtonClick);\n const [, setShown] = useShown();\n\n const handleButton1Click = useCallback(() => onButtonClickRef.current?.('1'), [onButtonClickRef]);\n const handleButton2Click = useCallback(() => onButtonClickRef.current?.('2'), [onButtonClickRef]);\n const handleButton3Click = useCallback(() => onButtonClickRef.current?.('3'), [onButtonClickRef]);\n const handleButton4Click = useCallback(() => onButtonClickRef.current?.('4'), [onButtonClickRef]);\n const handleButton5Click = useCallback(() => onButtonClickRef.current?.('5'), [onButtonClickRef]);\n const handleButton6Click = useCallback(() => onButtonClickRef.current?.('6'), [onButtonClickRef]);\n const handleButton7Click = useCallback(() => onButtonClickRef.current?.('7'), [onButtonClickRef]);\n const handleButton8Click = useCallback(() => onButtonClickRef.current?.('8'), [onButtonClickRef]);\n const handleButton9Click = useCallback(() => onButtonClickRef.current?.('9'), [onButtonClickRef]);\n const handleButton0Click = useCallback(() => onButtonClickRef.current?.('0'), [onButtonClickRef]);\n const handleButtonStarClick = useCallback(() => onButtonClickRef.current?.('star'), [onButtonClickRef]);\n const handleButtonPoundClick = useCallback(() => onButtonClickRef.current?.('pound'), [onButtonClickRef]);\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n event => {\n if (event.key === 'Escape') {\n // TODO: Should send focus to the send box.\n setShown(false);\n }\n },\n [setShown]\n );\n\n useEffect(() => {\n autoFocusRef.current && firstButtonRef.current?.focus();\n }, [autoFocusRef, firstButtonRef]);\n\n return (\n <div className={cx(classNames['telephone-keypad'], className)} onKeyDown={handleKeyDown}>\n <Orientation isHorizontal={isHorizontal}>\n <Button\n button=\"1\"\n data-testid={testIds.sendBoxTelephoneKeypadButton1}\n onClick={handleButton1Click}\n ref={firstButtonRef}\n />\n <Button\n button=\"2\"\n data-testid={testIds.sendBoxTelephoneKeypadButton2}\n onClick={handleButton2Click}\n ruby=\"ABC\"\n />\n <Button\n button=\"3\"\n data-testid={testIds.sendBoxTelephoneKeypadButton3}\n onClick={handleButton3Click}\n ruby=\"DEF\"\n />\n <Button\n button=\"4\"\n data-testid={testIds.sendBoxTelephoneKeypadButton4}\n onClick={handleButton4Click}\n ruby=\"GHI\"\n />\n <Button\n button=\"5\"\n data-testid={testIds.sendBoxTelephoneKeypadButton5}\n onClick={handleButton5Click}\n ruby=\"JKL\"\n />\n <Button\n button=\"6\"\n data-testid={testIds.sendBoxTelephoneKeypadButton6}\n onClick={handleButton6Click}\n ruby=\"MNO\"\n />\n <Button\n button=\"7\"\n data-testid={testIds.sendBoxTelephoneKeypadButton7}\n onClick={handleButton7Click}\n ruby=\"PQRS\"\n />\n <Button\n button=\"8\"\n data-testid={testIds.sendBoxTelephoneKeypadButton8}\n onClick={handleButton8Click}\n ruby=\"TUV\"\n />\n <Button\n button=\"9\"\n data-testid={testIds.sendBoxTelephoneKeypadButton9}\n onClick={handleButton9Click}\n ruby=\"WXYZ\"\n />\n <Button button=\"star\" data-testid={testIds.sendBoxTelephoneKeypadButtonStar} onClick={handleButtonStarClick} />\n <Button button=\"0\" data-testid={testIds.sendBoxTelephoneKeypadButton0} onClick={handleButton0Click} ruby=\"+\" />\n <Button\n button=\"pound\"\n data-testid={testIds.sendBoxTelephoneKeypadButtonPound}\n onClick={handleButtonPoundClick}\n />\n </Orientation>\n <div className={classNames['telephone-keypad__info-message']}>\n <InfoSmallIcon />\n <LocalizedString\n linkClassName={classNames['telephone-keypad__info-message-link']}\n stringIds=\"TELEPHONE_KEYPAD_INPUT_MESSAGE\"\n />\n </div>\n </div>\n );\n});\n\nTelephoneKeypad.displayName = 'TelephoneKeypad';\n\nexport default TelephoneKeypad;\n","import React, { forwardRef, memo, useCallback, type Ref } from 'react';\n\nimport { useRefFrom } from 'use-ref-from';\n\nimport { type DTMF } from '../types';\n\nimport styles from './Button.module.css';\nimport { useStyles } from '../../../styles';\n\ntype Props = Readonly<{\n button: DTMF;\n ['data-testid']?: string | undefined;\n onClick?: (() => void) | undefined;\n ruby?: string | undefined;\n}>;\n\nconst Button = memo(\n // As we are all TypeScript, internal components do not need propTypes.\n // eslint-disable-next-line react/prop-types\n forwardRef(({ button, 'data-testid': dataTestId, onClick, ruby }: Props, ref: Ref<HTMLButtonElement>) => {\n const classNames = useStyles(styles);\n const onClickRef = useRefFrom(onClick);\n\n const handleClick = useCallback(() => onClickRef.current?.(), [onClickRef]);\n\n return (\n <button\n className={classNames['telephone-keypad__button']}\n data-testid={dataTestId}\n onClick={handleClick}\n ref={ref}\n type=\"button\"\n >\n <span className={classNames['telephone-keypad__button__text']}>\n {button === 'star' ? '\\u2217' : button === 'pound' ? '#' : button}\n </span>\n {!!ruby && <ruby className={classNames['telephone-keypad__button__ruby']}>{ruby}</ruby>}\n </button>\n );\n })\n);\n\nButton.displayName = 'TelephoneKeypad.Button';\n\nexport default Button;\n","\n:global(.webchat-fluent) .telephone-keypad__button {\n -webkit-user-select: none;\n align-items: center;\n appearance: none;\n /* backgroundColor: isDarkTheme() || isHighContrastTheme() ? black : white, */\n background-color: White;\n border-radius: 100%;\n\n /* Whitelabel styles */\n /* border: `solid 1px ${isHighContrastTheme() ? white : isDarkTheme() ? gray160 : gray40}`, */\n /* color: inherit; */\n\n border: solid 1px var(--webchat-colorNeutralStroke1);\n color: var(--webchat-colorGray200);\n font-weight: var(--webchat-fontWeightSemibold);\n\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 &:hover {\n /* backgroundColor: isHighContrastTheme() ? gray210 : isDarkTheme() ? gray150 : gray30 */\n background-color: var(--webchat-colorGray30)\n }\n}\n\n:global(.webchat-fluent) .telephone-keypad__button__ruby {\n /* color: isHighContrastTheme() ? white : isDarkTheme() ? gray40 : gray160, */\n color: var(--webchat-colorGray190);\n font-size: 10px;\n}\n\n:global(.webchat-fluent) .telephone-keypad__button__text {\n font-size: 24px;\n margin-top: 8px;\n}\n\n:global(.webchat-fluent) .telephone-keypad--horizontal {\n & .telephone-keypad__button {\n height: 32px;\n justify-content: center;\n margin: 8px 4px;\n width: 32px;\n };\n\n .telephone-keypad__button__ruby {\n display: none;\n }\n\n & .telephone-keypad__button__text {\n font-size: 20px;\n margin-top: 0;\n }\n}\n","export const injectedStyles = '@--INJECTED-STYLES-CONTENT--@';\n\nexport default function injectStyles() {\n if (globalThis.document) {\n const style = document.createElement('style');\n style.append(document.createTextNode(injectedStyles));\n document.head.appendChild(style);\n }\n}\n","import { useMemo } from 'react';\n\nfunction useStyles<T extends CSSModuleClasses>(styles: T): T {\n // @ts-expect-error: entries/fromEntries don't allow to specify keys type\n return useMemo(\n () =>\n Object.freeze(\n Object.fromEntries(\n Object.entries(styles).map(([baseClassName, resultClassName]) => [\n baseClassName,\n `${baseClassName} ${resultClassName}`\n ])\n )\n ),\n [styles]\n );\n}\n\nexport default useStyles;\n","const testIds = {\n sendBoxDropZone: 'send box drop zone',\n sendBoxSendButton: 'send box send button',\n sendBoxTextBox: 'send box text area',\n sendBoxTelephoneKeypadButton1: `send box telephone keypad button 1`,\n sendBoxTelephoneKeypadButton2: `send box telephone keypad button 2`,\n sendBoxTelephoneKeypadButton3: `send box telephone keypad button 3`,\n sendBoxTelephoneKeypadButton4: `send box telephone keypad button 4`,\n sendBoxTelephoneKeypadButton5: `send box telephone keypad button 5`,\n sendBoxTelephoneKeypadButton6: `send box telephone keypad button 6`,\n sendBoxTelephoneKeypadButton7: `send box telephone keypad button 7`,\n sendBoxTelephoneKeypadButton8: `send box telephone keypad button 8`,\n sendBoxTelephoneKeypadButton9: `send box telephone keypad button 9`,\n sendBoxTelephoneKeypadButton0: `send box telephone keypad button 0`,\n sendBoxTelephoneKeypadButtonStar: `send box telephone keypad button star`,\n sendBoxTelephoneKeypadButtonPound: `send box telephone keypad button pound`,\n sendBoxTelephoneKeypadToolbarButton: 'send box telephone keypad toolbar button',\n sendBoxUploadButton: 'send box upload button'\n};\n\nexport default testIds;\n","import { useContext, useMemo, type Dispatch, type SetStateAction } from 'react';\n\nimport Context from './private/Context';\n\nexport default function useShown(): readonly [boolean, Dispatch<SetStateAction<boolean>>] {\n const { setShown, shown } = useContext(Context);\n\n return useMemo(() => Object.freeze([shown, setShown]), [shown, setShown]);\n}\n","\n:global(.webchat-fluent) .telephone-keypad {\n /* Commented out whitelabel styles for now. */\n /* background: getHighContrastDarkThemeColor(highContrastColor: black, darkThemeColor: gray190, string, defaultColor: gray10), */\n /* borderRadius: '8px 8px 0px 0px; */\n /* boxShadow: '-3px 0px 7px 0px rgba(0, 0, 0, 0.13), -0.6px 0px 1.8px 0px rgba(0, 0, 0, 0.10)', */\n\n align-items: center;\n background: var(--webchat-colorNeutralBackground1);\n /* border: isHighContrastTheme() ? `1px solid ${white}` : none; */\n border: none;\n border-radius: var(--webchat-borderRadiusXLarge);\n /* boxShadow: var(--shadow16); */\n display: flex;\n flex-direction: column;\n font-family: var(--webchat-fontFamilyBase);\n justify-content: center;\n /* margin: var(--spacingHorizontalMNudge)' */\n}\n\n:global(.webchat-fluent) .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\n:global(.webchat-fluent) .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\n:global(.webchat-fluent) .telephone-keypad__info-message-link {\n color: var(--webchat-colorBrandForegroundLink);\n text-decoration-color: transparent;\n\n &:target {\n color: var(--webchat-colorBrandForegroundLinkSelected);\n }\n &:hover {\n color: var(--webchat-colorBrandForegroundLinkHover);\n text-decoration: underline 1px currentColor;\n }\n &:active {\n color: var(--webchat-colorBrandForegroundLinkPressed);\n }\n &:focus-visible {\n outline: none;\n text-decoration: underline 1px double var(--webchat-colorStrokeFocus2);\n }\n}\n","import React, { memo } from 'react';\n\nfunction AddDocumentIcon(props: Readonly<{ readonly className?: string }>) {\n return (\n <svg\n aria-hidden=\"true\"\n className={props.className}\n height=\"1em\"\n viewBox=\"0 0 20 20\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n 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\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport default memo(AddDocumentIcon);\n","import React, { memo } from 'react';\n\nfunction AttachmentIcon(props: Readonly<{ readonly className?: string }>) {\n return (\n <svg\n aria-hidden=\"true\"\n className={props.className}\n height=\"1em\"\n viewBox=\"0 0 20 20\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n 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\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport default memo(AttachmentIcon);\n","import React, { memo } from 'react';\n\nfunction InfoSmallIcon(props: Readonly<{ readonly className?: string }>) {\n return (\n <svg\n aria-hidden=\"true\"\n className={props.className}\n height=\"1em\"\n viewBox=\"0 0 16 16\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n 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\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport default memo(InfoSmallIcon);\n","import React, { memo } from 'react';\n\nfunction SendIcon(props: Readonly<{ readonly className?: string }>) {\n return (\n <svg\n aria-hidden=\"true\"\n className={props.className}\n height=\"1em\"\n viewBox=\"0 0 20 20\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n 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\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport default memo(SendIcon);\n","import React, { memo } from 'react';\n\nfunction TelephoneKeypadIcon(props: Readonly<{ readonly className?: string }>) {\n return (\n <svg\n aria-hidden=\"true\"\n className={props.className}\n height=\"1em\"\n viewBox=\"0 0 20 20\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n 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\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n\nexport default memo(TelephoneKeypadIcon);\n","import React, { type ReactNode } from 'react';\nimport cx from 'classnames';\nimport styles from './Theme.module.css';\nimport { useStyles } from '../../styles';\n\nexport const rootClassName = 'webchat-fluent';\n\nexport default function WebchatTheme(props: Readonly<{ readonly children: ReactNode | undefined }>) {\n const classNames = useStyles(styles);\n return <div className={cx(rootClassName, classNames['theme'])}>{props.children}</div>;\n}\n","\n:global(.webchat-fluent).theme {\n display: contents;\n\n --webchat-colorNeutralForeground1: var(--colorNeutralForeground1, #242424);\n --webchat-colorNeutralForeground2: var(--colorNeutralForeground2, #424242);\n --webchat-colorNeutralForeground4: var(--colorNeutralForeground4, #707070);\n\n --webchat-colorNeutralForeground2BrandHover: var(--colorNeutralForeground2BrandHover, #02729c);\n --webchat-colorNeutralForeground2BrandPressed: var(--colorNeutralForeground2BrandPressed, #01678c);\n --webchat-colorNeutralForeground2BrandSelected: var(--colorNeutralForeground2BrandSelected, #067191);\n\n --webchat-colorNeutralForegroundDisabled: var(--colorNeutralForegroundDisabled, #bdbdbd);\n\n --webchat-colorNeutralBackground1: var(--colorNeutralBackground1, #ffffff);\n --webchat-colorNeutralBackground4: var(--colorNeutralBackground4, #f0f0f0);\n --webchat-colorNeutralBackground5: var(--colorNeutralBackground5, #ebebeb);\n\n --webchat-colorNeutralStroke1: var(--colorNeutralStroke1, #d1d1d1);\n --webchat-colorNeutralStroke2: var(--colorNeutralStroke2, #e0e0e0);\n --webchat-colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected, #bdbdbd);\n \n --webchat-colorStrokeFocus2: var(--colorStrokeFocus2, #000000);\n\n --webchat-colorBrandStroke2: var(--colorBrandStroke2, #9edcf7);\n\n --webchat-colorBrandForeground2Hover: var(--colorBrandForeground2Hover, #015a7a);\n --webchat-colorBrandForeground2Pressed: var(--colorBrandForeground2Pressed, #01384d);\n\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\n --webchat-colorBrandBackground2Hover: var(--colorBrandBackground2Hover, #bee7fa);\n --webchat-colorBrandBackground2Pressed: var(--colorBrandBackground2Pressed, #7fd2f5);\n\n --webchat-colorCompoundBrandForeground1Hover: var(--colorCompoundBrandForeground1Hover, #02729c);\n\n --webchat-colorStatusDangerForeground1: var(--colorStatusDangerForeground1, #b10e1c);\n\n /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/colors.ts */\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\n /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts */\n --webchat-borderRadiusSmall: var(--borderRadiusSmall, 2px);\n --webchat-borderRadiusLarge: var(--borderRadiusLarge, 6px);\n --webchat-borderRadiusXLarge: var(--borderRadiusXLarge, 8px);\n\n /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/utils/shadows.ts */\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\n /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts */\n --webchat-spacingHorizontalMNudge: var(--spacingHorizontalMNudge, 10px);\n\n /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */\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\n /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */\n --webchat-fontWeightSemibold: var(--fontWeightSemibold, 600);\n \n --webchat-strokeWidthThicker: var(--strokeWidthThicker, 3px);\n\n --webchat-durationUltraFast: var(--durationUltraFast, 0);\n --webchat-durationNormal: var(--durationNormal, 200ms);\n\n --webchat-curveAccelerateMid: var(--curveAccelerateMid, cubic-bezier(1,0,1,1));\n --webchat-curveDecelerateMid: var(--curveDecelerateMid, cubic-bezier(0,0,0,1));\n}\n\n@media (prefers-reduced-motion) {\n :global(.webchat-fluent).theme {\n --webchat-durationUltraFast: 0.01ms;\n --webchat-durationNormal: 0.01ms;\n }\n}","import { hooks, type SendBoxFocusOptions } from 'botframework-webchat-component';\nimport cx from 'classnames';\nimport React, { memo, useCallback, useRef, useState, type FormEventHandler, type MouseEventHandler } from 'react';\nimport { useRefFrom } from 'use-ref-from';\nimport { SendIcon } from '../../icons';\nimport testIds from '../../testIds';\nimport { DropZone } from '../dropZone';\nimport { SuggestedActions } from '../suggestedActions';\nimport { TelephoneKeypadSurrogate, useTelephoneKeypadShown, type DTMF } from '../telephoneKeypad';\nimport AddAttachmentButton from './AddAttachmentButton';\nimport Attachments from './Attachments';\nimport ErrorMessage from './ErrorMessage';\nimport TelephoneKeypadToolbarButton from './TelephoneKeypadToolbarButton';\nimport TextArea from './TextArea';\nimport { Toolbar, ToolbarButton, ToolbarSeparator } from './Toolbar';\nimport useSubmitError from './private/useSubmitError';\nimport useUniqueId from './private/useUniqueId';\nimport styles from './SendBox.module.css';\nimport { useStyles } from '../../styles';\n\nconst {\n useFocus,\n useLocalizer,\n useMakeThumbnail,\n useRegisterFocusSendBox,\n useSendBoxAttachments,\n useSendMessage,\n useStyleOptions\n} = hooks;\n\nfunction SendBox(\n props: Readonly<{\n className?: string | undefined;\n placeholder?: string | undefined;\n }>\n) {\n const inputRef = useRef<HTMLTextAreaElement>(null);\n const [message, setMessage] = useState('');\n const [attachments, setAttachments] = useSendBoxAttachments();\n const [{ hideTelephoneKeypadButton, hideUploadButton, maxMessageLength }] = useStyleOptions();\n const isMessageLengthExceeded = !!maxMessageLength && message.length > maxMessageLength;\n const classNames = useStyles(styles);\n const localize = useLocalizer();\n const sendMessage = useSendMessage();\n const makeThumbnail = useMakeThumbnail();\n const errorMessageId = useUniqueId('sendbox__error-message-id');\n const [errorRef, errorMessage] = useSubmitError({ message, attachments });\n const [telephoneKeypadShown] = useTelephoneKeypadShown();\n const setFocus = useFocus();\n\n useRegisterFocusSendBox(\n useCallback(\n ({ noKeyboard, waitUntil }: SendBoxFocusOptions) => {\n if (!inputRef.current) {\n return;\n }\n if (noKeyboard) {\n waitUntil(\n (async () => {\n const previousReadOnly = inputRef.current?.getAttribute('readonly');\n inputRef.current?.setAttribute('readonly', 'true');\n // TODO: [P2] We should update this logic to handle quickly-successive `focusCallback`.\n // If a succeeding `focusCallback` is being called, the `setTimeout` should run immediately.\n // Or the second `focusCallback` should not set `readonly` to `true`.\n // eslint-disable-next-line no-restricted-globals\n await new Promise(resolve => setTimeout(resolve, 0));\n inputRef.current?.focus();\n if (typeof previousReadOnly !== 'string') {\n inputRef.current?.removeAttribute('readonly');\n } else {\n inputRef.current?.setAttribute('readonly', previousReadOnly);\n }\n })()\n );\n } else {\n inputRef.current?.focus();\n }\n },\n [inputRef]\n )\n );\n\n const attachmentsRef = useRefFrom(attachments);\n const messageRef = useRefFrom(message);\n\n const handleSendBoxClick = useCallback<MouseEventHandler>(\n event => {\n if ('tabIndex' in event.target && typeof event.target.tabIndex === 'number' && event.target.tabIndex >= 0) {\n return;\n }\n\n setFocus('sendBox');\n },\n [setFocus]\n );\n\n const handleMessageChange: React.FormEventHandler<HTMLTextAreaElement> = useCallback(\n event => setMessage(event.currentTarget.value),\n [setMessage]\n );\n\n const handleAddFiles = useCallback(\n async (inputFiles: File[]) => {\n const newAttachments = Object.freeze(\n await Promise.all(\n inputFiles.map(file =>\n makeThumbnail(file).then(thumbnailURL =>\n Object.freeze({\n blob: file,\n ...(thumbnailURL && { thumbnailURL })\n })\n )\n )\n )\n );\n\n setAttachments(newAttachments);\n\n // TODO: Currently in the UX, we have no way to remove attachments.\n // Keep concatenating doesn't make sense in current UX.\n // When end-user can remove attachment, we should enable the code again.\n // setAttachments(attachments => attachments.concat(newAttachments));\n },\n [makeThumbnail, setAttachments]\n );\n\n const handleFormSubmit: FormEventHandler<HTMLFormElement> = useCallback(\n event => {\n event.preventDefault();\n\n if (errorRef.current !== 'empty' && !isMessageLengthExceeded) {\n sendMessage(messageRef.current, undefined, { attachments: attachmentsRef.current });\n\n setMessage('');\n setAttachments([]);\n }\n\n setFocus('sendBox');\n },\n [attachmentsRef, messageRef, sendMessage, setAttachments, setMessage, isMessageLengthExceeded, errorRef, setFocus]\n );\n\n const handleTelephoneKeypadButtonClick = useCallback(\n // TODO: We need more official way of sending DTMF.\n (dtmf: DTMF) => sendMessage(`/DTMF ${dtmf}`),\n [sendMessage]\n );\n\n const aria = {\n 'aria-invalid': 'false' as const,\n ...(errorMessage && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId\n })\n };\n\n return (\n <form {...aria} className={cx(classNames['sendbox'], props.className)} onSubmit={handleFormSubmit}>\n <SuggestedActions />\n <div className={cx(classNames['sendbox__sendbox'])} onClickCapture={handleSendBoxClick}>\n <TextArea\n aria-label={isMessageLengthExceeded ? localize('TEXT_INPUT_LENGTH_EXCEEDED_ALT') : localize('TEXT_INPUT_ALT')}\n className={cx(classNames['sendbox__sendbox-text'], classNames['sendbox__text-area--in-grid'])}\n data-testid={testIds.sendBoxTextBox}\n hidden={telephoneKeypadShown}\n onInput={handleMessageChange}\n placeholder={props.placeholder ?? localize('TEXT_INPUT_PLACEHOLDER')}\n ref={inputRef}\n value={message}\n />\n <TelephoneKeypadSurrogate\n autoFocus={true}\n className={classNames['sendbox__telephone-keypad--in-grid']}\n isHorizontal={false}\n onButtonClick={handleTelephoneKeypadButtonClick}\n />\n <Attachments attachments={attachments} className={classNames['sendbox__attachment--in-grid']} />\n <div className={cx(classNames['sendbox__sendbox-controls'], classNames['sendbox__sendbox-controls--in-grid'])}>\n {!telephoneKeypadShown && maxMessageLength && (\n <div\n className={cx(classNames['sendbox__text-counter'], {\n [classNames['sendbox__text-counter--error']]: isMessageLengthExceeded\n })}\n >\n {`${message.length}/${maxMessageLength}`}\n </div>\n )}\n <Toolbar>\n {!hideTelephoneKeypadButton && <TelephoneKeypadToolbarButton />}\n {!hideUploadButton && <AddAttachmentButton onFilesAdded={handleAddFiles} />}\n <ToolbarSeparator />\n <ToolbarButton\n aria-label={localize('TEXT_INPUT_SEND_BUTTON_ALT')}\n data-testid={testIds.sendBoxSendButton}\n disabled={isMessageLengthExceeded || telephoneKeypadShown}\n type=\"submit\"\n >\n <SendIcon />\n </ToolbarButton>\n </Toolbar>\n </div>\n <DropZone onFilesAdded={handleAddFiles} />\n <ErrorMessage error={errorMessage} id={errorMessageId} />\n </div>\n </form>\n );\n}\n\nexport default memo(SendBox);\n","import { hooks } from 'botframework-webchat-component';\nimport cx from 'classnames';\nimport React, { memo, useCallback, useEffect, useRef, useState, type DragEventHandler } from 'react';\nimport { useRefFrom } from 'use-ref-from';\n\nimport { AddDocumentIcon } from '../../icons';\nimport testIds from '../../testIds';\nimport styles from './DropZone.module.css';\nimport { useStyles } from '../../styles';\n\nconst { useLocalizer } = hooks;\n\nconst handleDragOver: DragEventHandler<HTMLDivElement> = event => {\n // This is for preventing the browser from opening the dropped file in a new tab.\n event.preventDefault();\n};\n\n// Notes: For files dragging from outside of browser, it only tell us if it is a \"File\" instead of \"text/plain\" or \"text/uri-list\".\n// For images dragging inside of browser, it only tell us that it is \"text/plain\", \"text/uri-list\" and \"text/html\". But not \"image/*\".\n// So we cannot whitelist what is droppable.\n// We are using case-insensitive of type \"files\" so we can drag in WebDriver.\nconst isFilesTransferEvent = (event: DragEvent) =>\n !!event.dataTransfer?.types?.some(type => type.toLowerCase() === 'files');\n\nfunction isDescendantOf(target: Node, ancestor: Node): boolean {\n let current = target.parentNode;\n\n while (current) {\n if (current === ancestor) {\n return true;\n }\n\n current = current.parentNode;\n }\n\n return false;\n}\n\nconst DropZone = (props: { readonly onFilesAdded: (files: File[]) => void }) => {\n const [dropZoneState, setDropZoneState] = useState<false | 'visible' | 'droppable'>(false);\n const classNames = useStyles(styles);\n const dropZoneRef = useRef<HTMLDivElement>(null);\n const localize = useLocalizer();\n const onFilesAddedRef = useRefFrom(props.onFilesAdded);\n\n useEffect(() => {\n let entranceCounter = 0;\n\n const handleDragEnter = (event: DragEvent) => {\n entranceCounter++;\n\n if (isFilesTransferEvent(event)) {\n setDropZoneState(\n dropZoneRef.current &&\n (event.target === dropZoneRef.current ||\n (event.target instanceof HTMLElement && isDescendantOf(event.target, dropZoneRef.current)))\n ? 'droppable'\n : 'visible'\n );\n }\n };\n\n const handleDragLeave = () => --entranceCounter <= 0 && setDropZoneState(false);\n\n document.addEventListener('dragenter', handleDragEnter, false);\n document.addEventListener('dragleave', handleDragLeave, false);\n\n return () => {\n document.removeEventListener('dragenter', handleDragEnter);\n document.removeEventListener('dragleave', handleDragLeave);\n };\n }, [setDropZoneState]);\n\n const handleDrop = useCallback<DragEventHandler<HTMLDivElement>>(\n event => {\n event.preventDefault();\n\n setDropZoneState(false);\n\n if (!isFilesTransferEvent(event.nativeEvent)) {\n return;\n }\n\n onFilesAddedRef.current([...event.dataTransfer.files]);\n },\n [onFilesAddedRef, setDropZoneState]\n );\n\n return dropZoneState ? (\n <div\n className={cx(classNames['sendbox__attachment-drop-zone'], {\n [classNames['sendbox__attachment-drop-zone--droppable']]: dropZoneState === 'droppable'\n })}\n data-testid={testIds.sendBoxDropZone}\n onDragOver={handleDragOver}\n onDrop={handleDrop}\n ref={dropZoneRef}\n >\n <AddDocumentIcon className={classNames['sendbox__attachment-drop-zone-icon']} />\n {localize('TEXT_INPUT_DROP_ZONE')}\n </div>\n ) : null;\n};\n\nDropZone.displayName = 'DropZone';\n\nexport default memo(DropZone);\n",":global(.webchat-fluent) .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\n:global(.webchat-fluent) .sendbox__attachment-drop-zone--droppable {\n background-color: #e00;\n color: White\n}\n\n:global(.webchat-fluent) .sendbox__attachment-drop-zone-icon {\n height: 36px;\n /* Set \"pointer-events: none\" to ignore dragging over the icon. Otherwise, when dragging over the icon; it would disable the \"--droppable\" modifier.*/\n pointer-events: none;\n width: 36px\n}\n","import { hooks } from 'botframework-webchat-component';\nimport cx from 'classnames';\nimport React, { memo, useCallback, type ReactNode } from 'react';\nimport SuggestedAction from './SuggestedAction';\nimport computeSuggestedActionText from './private/computeSuggestedActionText';\nimport styles from './SuggestedActions.module.css';\nimport { useStyles } from '../../styles';\nimport RovingFocusProvider from './private/rovingFocus';\n\nconst { useFocus, useLocalizer, useStyleOptions, useStyleSet, useSuggestedActions } = hooks;\n\nfunction SuggestedActionStackedOrFlowContainer(\n props: Readonly<{\n 'aria-label'?: string | undefined;\n children?: ReactNode | undefined;\n className?: string | undefined;\n }>\n) {\n const [{ suggestedActionLayout }] = useStyleOptions();\n const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet();\n const classNames = useStyles(styles);\n\n return (\n <div\n aria-label={props['aria-label']}\n aria-live=\"polite\"\n aria-orientation=\"vertical\"\n className={cx(\n classNames['suggested-actions'],\n suggestedActionsStyleSet + '',\n {\n [classNames['suggested-actions--flow']]: suggestedActionLayout === 'flow',\n [classNames['suggested-actions--stacked']]: suggestedActionLayout !== 'flow'\n },\n props.className\n )}\n role=\"toolbar\"\n >\n {!!props.children && !!React.Children.count(props.children) && props.children}\n </div>\n );\n}\n\nfunction SuggestedActions() {\n const classNames = useStyles(styles);\n const localize = useLocalizer();\n const [suggestedActions] = useSuggestedActions();\n const focus = useFocus();\n\n const handleEscapeKey = useCallback(() => {\n focus('sendBox');\n }, [focus]);\n\n const children = suggestedActions.map((cardAction, index) => {\n const { displayText, image, imageAltText, text, type, value } = cardAction as {\n displayText?: string;\n image?: string;\n imageAltText?: string;\n text?: string;\n type:\n | 'call'\n | 'downloadFile'\n | 'imBack'\n | 'messageBack'\n | 'openUrl'\n | 'playAudio'\n | 'playVideo'\n | 'postBack'\n | 'showImage'\n | 'signin';\n value?: { [key: string]: any } | string;\n };\n\n if (!suggestedActions?.length) {\n return null;\n }\n\n return (\n <SuggestedAction\n buttonText={computeSuggestedActionText(cardAction)}\n displayText={displayText}\n image={image}\n // Image alt text should use `imageAltText` field and fallback to `text` field.\n // https://github.com/microsoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md#image-alt-text\n imageAlt={image && (imageAltText || text)}\n itemIndex={index}\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n text={text}\n type={type}\n value={value}\n />\n );\n });\n\n return (\n <RovingFocusProvider onEscapeKey={handleEscapeKey}>\n <SuggestedActionStackedOrFlowContainer\n aria-label={localize('SUGGESTED_ACTIONS_LABEL_ALT')}\n className={classNames['suggested-actions']}\n >\n {children}\n </SuggestedActionStackedOrFlowContainer>\n </RovingFocusProvider>\n );\n}\n\nexport default memo(SuggestedActions);\n","import { hooks } from 'botframework-webchat-component';\nimport { type DirectLineCardAction } from 'botframework-webchat-core';\nimport cx from 'classnames';\nimport React, { MouseEventHandler, memo, useCallback } from 'react';\nimport styles from './SuggestedAction.module.css';\nimport { useStyles } from '../../styles';\nimport AccessibleButton from './AccessibleButton';\nimport { useRovingFocusItemRef } from './private/rovingFocus';\n\nconst { useDisabled, useFocus, usePerformCardAction, useScrollToEnd, useStyleSet, useSuggestedActions } = hooks;\n\ntype SuggestedActionProps = Readonly<{\n buttonText: string | undefined;\n className?: string | undefined;\n displayText?: string | undefined;\n image?: string | undefined;\n imageAlt?: string | undefined;\n itemIndex: number;\n text?: string | undefined;\n type?:\n | 'call'\n | 'downloadFile'\n | 'imBack'\n | 'messageBack'\n | 'openUrl'\n | 'playAudio'\n | 'playVideo'\n | 'postBack'\n | 'showImage'\n | 'signin';\n value?: any;\n}>;\n\nfunction SuggestedAction({\n buttonText,\n className,\n displayText,\n image,\n imageAlt,\n itemIndex,\n text,\n type,\n value\n}: SuggestedActionProps) {\n const [_, setSuggestedActions] = useSuggestedActions();\n const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();\n const [disabled] = useDisabled();\n const focus = useFocus();\n const focusRef = useRovingFocusItemRef<HTMLButtonElement>(itemIndex);\n const performCardAction = usePerformCardAction();\n const classNames = useStyles(styles);\n const scrollToEnd = useScrollToEnd();\n\n const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n ({ target }) => {\n (async function () {\n // We need to focus to the send box before we are performing this card action.\n // The will make sure the focus is always on Web Chat.\n // Otherwise, the focus may momentarily send to `document.body` and screen reader will be confused.\n await focus('sendBoxWithoutKeyboard');\n\n // TODO: [P3] #XXX We should not destruct DirectLineCardAction into React props and pass them in. It makes typings difficult.\n // Instead, we should pass a \"cardAction\" props.\n performCardAction({ displayText, text, type, value } as DirectLineCardAction, { target });\n\n // Since \"openUrl\" action do not submit, the suggested action buttons do not hide after click.\n type === 'openUrl' && setSuggestedActions([]);\n\n scrollToEnd();\n })();\n },\n [displayText, focus, performCardAction, scrollToEnd, setSuggestedActions, text, type, value]\n );\n\n return (\n <AccessibleButton\n className={cx(classNames['suggested-action'], suggestedActionStyleSet + '', (className || '') + '')}\n disabled={disabled}\n onClick={handleClick}\n ref={focusRef}\n type=\"button\"\n >\n {image && <img alt={imageAlt} className={classNames['suggested-action__image']} src={image} />}\n <span>{buttonText}</span>\n </AccessibleButton>\n );\n}\n\nexport default memo(SuggestedAction);\n",":global(.webchat-fluent) .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 &:not([aria-disabled=\"true\"]):hover {\n background-color: var(--webchat-colorBrandBackground2Hover);\n color: var(--webchat-colorBrandForeground2Hover)\n }\n }\n &:not([aria-disabled=\"true\"]):active {\n background-color: var(--webchat-colorBrandBackground2Pressed);\n color: var(--webchat-colorBrandForeground2Pressed)\n }\n &[aria-disabled=\"true\"] {\n color: var(--webchat-colorNeutralForegroundDisabled);\n cursor: not-allowed\n }\n}\n\n:global(.webchat-fluent) .suggested-action__image {\n font-size: 12px;\n height: 1em;\n width: 1em;\n}\n","import React, { MouseEventHandler, ReactNode, forwardRef, memo, useRef } from 'react';\n\nconst preventDefaultHandler: MouseEventHandler<HTMLButtonElement> = event => event.preventDefault();\n\ntype AccessibleButtonProps = Readonly<{\n className?: string | undefined;\n 'aria-hidden'?: boolean;\n children?: ReactNode;\n disabled?: boolean;\n onClick?: MouseEventHandler<HTMLButtonElement>;\n tabIndex?: number;\n type: 'button';\n}>;\n\n// Differences between <button> and <AccessibleButton>:\n// - Disable behavior\n// - When the widget is disabled\n// - Set \"aria-disabled\" attribute to \"true\"\n// - Set \"readonly\" attribute\n// - Set \"tabIndex\" to -1\n// - Remove \"onClick\" handler\n// - Why this is needed\n// - Browser compatibility: when the widget is disabled, different browser send focus to different places\n// - When the widget become disabled, it's reasonable to keep the focus on the same widget for an extended period of time\n// - When the user presses TAB after the current widget is disabled, it should jump to the next non-disabled widget\n\n// Developers using this accessible widget will need to:\n// - Style the disabled widget themselves, using CSS query `:disabled, [aria-disabled=\"true\"] {}`\n// - Modify all code that check disabled through \"disabled\" attribute to use aria-disabled=\"true\" instead\n// - aria-disabled=\"true\" is the source of truth\n// - If the widget is contained by a <form>, the developer need to filter out some `onSubmit` event caused by this widget\n\nconst AccessibleButton = forwardRef<HTMLButtonElement, AccessibleButtonProps>(\n ({ 'aria-hidden': ariaHidden, children, disabled, onClick, tabIndex, ...props }, forwardedRef) => {\n const targetRef = useRef<HTMLButtonElement>(null);\n\n const ref = forwardedRef || targetRef;\n\n return (\n <button\n aria-disabled={disabled ? 'true' : 'false'}\n aria-hidden={ariaHidden}\n onClick={disabled ? preventDefaultHandler : onClick}\n ref={ref}\n tabIndex={tabIndex}\n {...(disabled && {\n 'aria-disabled': 'true',\n tabIndex: -1\n })}\n {...props}\n type=\"button\"\n >\n {children}\n </button>\n );\n }\n);\n\nexport default memo(AccessibleButton);\n","/* eslint-disable no-magic-numbers */\nimport React, {\n type MutableRefObject,\n createContext,\n memo,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef\n} from 'react';\n\ntype ItemRef = MutableRefObject<HTMLElement | undefined>;\n\ntype RovingFocusContextType = {\n itemEffector: <T extends HTMLElement>(ref: MutableRefObject<T | null>, index: number) => () => void;\n};\n\nconst RovingFocusContext = createContext<RovingFocusContextType>({\n itemEffector: () => {\n // This will be implemented when using in <RovingFocusProvider>.\n throw new Error('botframework-webchat-fluent-theme rovingFocus: no provider for RovingFocusContext.');\n }\n});\n\nfunction RovingFocusProvider(\n props: Readonly<{\n children?: React.ReactNode | undefined;\n direction?: 'vertical' | 'horizontal' | undefined;\n onEscapeKey?: () => void;\n }>\n) {\n const activeItemIndexRef = useRef(0);\n const itemRefsRef = useRef<ItemRef[]>([]);\n\n const updateItemTabIndex = useCallback(\n ({ current }: ItemRef, index: number) =>\n current && (current.tabIndex = activeItemIndexRef.current === index ? 0 : -1),\n [activeItemIndexRef]\n );\n\n const setActiveItemIndex = useCallback(\n (valueOrFunction: number | ((value: number) => number)) => {\n // All calls to this function is expected to be under event handlers (post-rendering).\n let nextActiveItemIndex;\n\n if (typeof valueOrFunction === 'number') {\n nextActiveItemIndex = valueOrFunction;\n } else {\n nextActiveItemIndex = valueOrFunction(activeItemIndexRef.current);\n }\n\n // If the index points to no item, fallback to the first item.\n // This makes sure at least one of the item in the container is selected.\n if (nextActiveItemIndex && !itemRefsRef.current.at(nextActiveItemIndex)?.current) {\n nextActiveItemIndex = 0;\n }\n\n if (activeItemIndexRef.current !== nextActiveItemIndex) {\n activeItemIndexRef.current = nextActiveItemIndex;\n\n itemRefsRef.current.forEach((ref, index) => updateItemTabIndex(ref, index));\n itemRefsRef.current.at(nextActiveItemIndex)?.current?.focus();\n }\n },\n [updateItemTabIndex, itemRefsRef, activeItemIndexRef]\n );\n\n const handleFocus = useCallback(\n event => {\n const { target } = event;\n\n const index = itemRefsRef.current.findIndex(({ current }) => current === target);\n\n // prevent focusing the last element, if we didn't found the element focused\n if (index !== -1) {\n setActiveItemIndex(index);\n }\n },\n [itemRefsRef, setActiveItemIndex]\n );\n\n const handleSetNextActive = useCallback(\n (key: string) =>\n (currentIndex: number): number => {\n const isUnidirectional = !props.direction;\n const isVerticalMove = /up|down/iu.test(key) && props.direction === 'vertical';\n const isHorizontalMove = /left|right/iu.test(key) && props.direction === 'horizontal';\n const isForwardMove = /right|down/iu.test(key);\n const direction = isUnidirectional || isVerticalMove || isHorizontalMove ? (isForwardMove ? 1 : -1) : 0;\n // The `itemRefsRef` array could be a sparse array.\n // Thus, the next item may not be immediately next to the current one.\n const itemIndices = itemRefsRef.current.map((_, index) => index);\n const nextIndex = itemIndices.indexOf(currentIndex) + direction;\n\n return itemIndices.at(nextIndex) ?? 0;\n },\n [props.direction]\n );\n\n const handleKeyDown = useCallback<(event: KeyboardEvent) => void>(\n event => {\n const { key } = event;\n\n switch (key) {\n case 'Up':\n case 'ArrowUp':\n case 'Left':\n case 'ArrowLeft':\n case 'Down':\n case 'ArrowDown':\n case 'Right':\n case 'ArrowRight':\n setActiveItemIndex(handleSetNextActive(key));\n break;\n\n case 'Home':\n setActiveItemIndex(0);\n break;\n\n case 'End':\n setActiveItemIndex(-1);\n break;\n\n case 'Escape':\n props.onEscapeKey?.();\n break;\n\n default:\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n },\n [setActiveItemIndex, handleSetNextActive, props]\n );\n\n const itemEffector = useCallback(\n (ref, index) => {\n const { current } = ref;\n\n itemRefsRef.current[Number(index)] = ref;\n\n current.addEventListener('focus', handleFocus);\n current.addEventListener('keydown', handleKeyDown);\n\n updateItemTabIndex(ref, index);\n\n return () => {\n current.removeEventListener('focus', handleFocus);\n current.removeEventListener('keydown', handleKeyDown);\n\n delete itemRefsRef.current[Number(index)];\n };\n },\n [handleFocus, handleKeyDown, updateItemTabIndex, itemRefsRef]\n );\n\n const value = useMemo<RovingFocusContextType>(\n () => ({\n itemEffector\n }),\n [itemEffector]\n );\n\n return <RovingFocusContext.Provider value={value}>{props.children}</RovingFocusContext.Provider>;\n}\n\nexport function useRovingFocusItemRef<T extends HTMLElement>(itemIndex: number): MutableRefObject<T | null> {\n const ref = useRef<T>(null);\n\n const { itemEffector } = useContext(RovingFocusContext);\n\n useEffect(() => itemEffector(ref, itemIndex));\n\n return ref;\n}\n\nexport default memo(RovingFocusProvider);\n","import type { DirectLineCardAction } from 'botframework-webchat-core';\n\n// Please refer to this article to find out how to compute the \"button text\" for suggested action.\n// https://github.com/Microsoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md#card-action\nexport default function computeSuggestedActionText(cardAction: DirectLineCardAction) {\n // \"CardAction\" must contains at least image or title.\n const { title } = cardAction as { title?: string };\n const { type, value } = cardAction;\n\n if (type === 'messageBack') {\n return title || cardAction.displayText;\n } else if (title) {\n return title;\n } else if (typeof value === 'string') {\n return value;\n }\n\n return JSON.stringify(value);\n}\n\n// TODO: [P1] This is copied from botframework-webchat-component. Think about what we should do to eliminate duplications.\n","\n:global(.webchat-fluent) .suggested-actions {\n align-items: flex-end;\n align-self: flex-end;\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n &:not(:empty) {\n padding-block-end: 8px;\n padding-inline-start: 4px\n }\n\n &.suggested-actions--flow {\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: flex-end;\n }\n\n &.suggested-actions--stacked {\n flex-direction: column\n }\n}\n","import { hooks } from 'botframework-webchat-component';\nimport React, { useCallback, useRef, type ChangeEventHandler, memo } from 'react';\nimport { useRefFrom } from 'use-ref-from';\nimport { AttachmentIcon } from '../../icons';\nimport testIds from '../../testIds';\nimport { ToolbarButton } from './Toolbar';\nimport styles from './AddAttachmentButton.module.css';\nimport { useStyles } from '../../styles';\n\nconst { useLocalizer, useStyleOptions } = hooks;\n\nfunction AddAttachmentButton(\n props: Readonly<{\n disabled?: boolean | undefined;\n onFilesAdded: ((files: File[]) => void) | undefined;\n }>\n) {\n const inputRef = useRef<HTMLInputElement>(null);\n const classNames = useStyles(styles);\n const localize = useLocalizer();\n const [{ uploadAccept, uploadMultiple }] = useStyleOptions();\n const onFilesAddedRef = useRefFrom(props.onFilesAdded);\n\n const handleClick = useCallback(() => inputRef.current?.click(), [inputRef]);\n\n const handleFileChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n ({ target: { files } }) => {\n if (files) {\n onFilesAddedRef.current?.([...files]);\n\n if (inputRef.current) {\n inputRef.current.value = '';\n }\n }\n },\n [inputRef, onFilesAddedRef]\n );\n\n return (\n <div className={classNames['sendbox__add-attachment']}>\n <input\n accept={uploadAccept}\n aria-disabled={props.disabled}\n aria-hidden=\"true\"\n className={classNames['sendbox__add-attachment-input']}\n multiple={uploadMultiple}\n onInput={props.disabled ? undefined : handleFileChange}\n readOnly={props.disabled}\n ref={inputRef}\n role=\"button\"\n tabIndex={-1}\n type=\"file\"\n />\n <ToolbarButton\n aria-label={localize('TEXT_INPUT_UPLOAD_BUTTON_ALT')}\n data-testid={testIds.sendBoxUploadButton}\n onClick={handleClick}\n >\n <AttachmentIcon />\n </ToolbarButton>\n </div>\n );\n}\n\nexport default memo(AddAttachmentButton);\n","import cx from 'classnames';\nimport React, { memo, type MouseEventHandler, type ReactNode } from 'react';\nimport styles from './Toolbar.module.css';\nimport { useStyles } from '../../styles';\n\nconst preventDefaultHandler: MouseEventHandler<HTMLButtonElement> = event => event.preventDefault();\n\nexport const ToolbarButton = memo(\n (\n props: Readonly<{\n 'aria-label'?: string | undefined;\n children?: ReactNode | undefined;\n className?: string | undefined;\n 'data-testid'?: string | undefined;\n disabled?: boolean | undefined;\n onClick?: MouseEventHandler<HTMLButtonElement> | undefined;\n selected?: boolean | undefined;\n type?: 'button' | 'submit' | undefined;\n }>\n ) => {\n const classNames = useStyles(styles);\n\n return (\n <button\n aria-label={props['aria-label']}\n className={cx(classNames['sendbox__toolbar-button'], props.className, {\n [classNames['sendbox__toolbar-button--selected']]: props.selected\n })}\n data-testid={props['data-testid']}\n onClick={props.disabled ? preventDefaultHandler : props.onClick}\n type={props.type === 'submit' ? 'submit' : 'button'}\n {...(props.disabled && {\n 'aria-disabled': 'true',\n tabIndex: -1\n })}\n >\n {props.children}\n </button>\n );\n }\n);\n\nToolbarButton.displayName = 'ToolbarButton';\n\nexport const Toolbar = memo((props: Readonly<{ children?: ReactNode | undefined; className?: string | undefined }>) => {\n const classNames = useStyles(styles);\n\n return <div className={cx(classNames['sendbox__toolbar'], props.className)}>{props.children}</div>;\n});\n\nToolbar.displayName = 'Toolbar';\n\nexport const ToolbarSeparator = memo(\n (props: Readonly<{ children?: ReactNode | undefined; className?: string | undefined }>) => {\n const classNames = useStyles(styles);\n\n return (\n <div\n aria-orientation=\"vertical\"\n className={cx(classNames['sendbox__toolbar-separator'], props.className)}\n role=\"separator\"\n />\n );\n }\n);\n\nToolbarSeparator.displayName = 'ToolbarSeparator';\n",":global(.webchat-fluent) .sendbox__toolbar {\n display: flex;\n gap: 4px;\n margin-inline-start: auto;\n}\n\n:global(.webchat-fluent) .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 > svg {\n font-size: 20px;\n pointer-events: none;\n }\n\n &.sendbox__toolbar-button--selected {\n color: var(--webchat-colorNeutralForeground2BrandSelected);\n }\n @media (hover: hover) {\n &:not([aria-disabled=\"true\"]):hover {\n color: var(--webchat-colorNeutralForeground2BrandHover);\n }\n }\n &:not([aria-disabled=\"true\"]):active {\n color: var(--webchat-colorNeutralForeground2BrandPressed);\n }\n &[aria-disabled=\"true\"] {\n color: var(--webchat-colorNeutralForegroundDisabled);\n cursor: not-allowed;\n }\n}\n\n:global(.webchat-fluent) .sendbox__toolbar-separator {\n align-self: center;\n border-inline-end: 1px solid var(--webchat-colorNeutralStroke2);\n height: 28px;\n\n &:first-child, &:last-child, &:only-child {\n display: none\n }\n}\n",":global(.webchat-fluent) .sendbox__add-attachment {\n display: grid\n}\n\n:global(.webchat-fluent) .sendbox__add-attachment-input {\n font-size: 0;\n height: 0;\n opacity: 0;\n width: 0;\n}\n","import { hooks } from 'botframework-webchat-component';\nimport React, { memo } from 'react';\nimport cx from 'classnames';\nimport styles from './Attachments.module.css';\nimport { useStyles } from '../../styles';\n\nconst { useLocalizer } = hooks;\n\nconst attachmentsPluralStringIds = {\n one: 'TEXT_INPUT_ATTACHMENTS_ONE',\n two: 'TEXT_INPUT_ATTACHMENTS_TWO',\n few: 'TEXT_INPUT_ATTACHMENTS_FEW',\n many: 'TEXT_INPUT_ATTACHMENTS_MANY',\n other: 'TEXT_INPUT_ATTACHMENTS_OTHER'\n};\n\nfunction Attachments({\n attachments,\n className\n}: Readonly<{\n readonly attachments: readonly Readonly<{ blob: Blob | File; thumbnailURL?: URL | undefined }>[];\n readonly className?: string | undefined;\n}>) {\n const classNames = useStyles(styles);\n const localizeWithPlural = useLocalizer({ plural: true });\n\n return attachments.length ? (\n <div className={cx(classNames['sendbox__attachment'], className)}>\n {localizeWithPlural(attachmentsPluralStringIds, attachments.length)}\n </div>\n ) : null;\n}\n\nexport default memo(Attachments);\n",":global(.webchat-fluent) .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","import React, { memo } from 'react';\nimport styles from './ErrorMessage.module.css';\nimport { useStyles } from '../../styles';\n\nfunction ErrorMessage(props: Readonly<{ id: string; error?: string | undefined }>) {\n const classNames = useStyles(styles);\n return (\n // eslint-disable-next-line react/forbid-dom-props\n <span className={classNames['sendbox__error-message']} id={props.id} role=\"alert\">\n {props.error}\n </span>\n );\n}\n\nexport default memo(ErrorMessage);\n",":global(.webchat-fluent) .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","import React, { memo, useCallback } from 'react';\n\nimport { hooks } from 'botframework-webchat-component';\nimport { TelephoneKeypadIcon } from '../../icons';\nimport testIds from '../../testIds';\nimport { useTelephoneKeypadShown } from '../telephoneKeypad';\nimport { ToolbarButton } from './Toolbar';\n\nconst { useLocalizer } = hooks;\n\nconst TelephoneKeypadToolbarButton = memo(() => {\n const [telephoneKeypadShown, setTelephoneKeypadShown] = useTelephoneKeypadShown();\n const localize = useLocalizer();\n\n const handleClick = useCallback(() => setTelephoneKeypadShown(shown => !shown), [setTelephoneKeypadShown]);\n\n return (\n <ToolbarButton\n aria-label={localize('TEXT_INPUT_TELEPHONE_KEYPAD_BUTTON_ALT')}\n data-testid={testIds.sendBoxTelephoneKeypadToolbarButton}\n onClick={handleClick}\n selected={telephoneKeypadShown}\n >\n <TelephoneKeypadIcon />\n </ToolbarButton>\n );\n});\n\nTelephoneKeypadToolbarButton.displayName = 'SendBox.TelephoneKeypadToolbarButton';\n\nexport default TelephoneKeypadToolbarButton;\n","import cx from 'classnames';\nimport React, { forwardRef, useCallback, type FormEventHandler, type KeyboardEventHandler } from 'react';\nimport { useStyles } from '../../styles';\nimport styles from './TextArea.module.css';\n\nconst TextArea = forwardRef<\n HTMLTextAreaElement,\n Readonly<{\n 'aria-label'?: string | undefined;\n className?: string | undefined;\n 'data-testid'?: string | undefined;\n\n /**\n * `true`, if the text area should be hidden but stay in the DOM, otherwise, `false`.\n *\n * Keeping the element in the DOM while making it invisible to users and PWDs is useful in these scenarios:\n *\n * - When the DTMF keypad is going away, we need to send focus to the text area before we unmount DTMF keypad,\n * This ensures the flow of focus did not sent to document body\n */\n hidden?: boolean | undefined;\n onInput?: FormEventHandler<HTMLTextAreaElement> | undefined;\n placeholder?: string | undefined;\n startRows?: number | undefined;\n value?: string | undefined;\n }>\n>((props, ref) => {\n const classNames = useStyles(styles);\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(event => {\n // Shift+Enter adds a new line\n // Enter requests related form submission\n if (!event.shiftKey && event.key === 'Enter') {\n event.preventDefault();\n\n if ('form' in event.target && event.target.form instanceof HTMLFormElement) {\n event.target?.form?.requestSubmit();\n }\n }\n }, []);\n\n return (\n <div\n className={cx(\n classNames['sendbox__text-area'],\n {\n [classNames['sendbox__text-area--hidden']]: props.hidden\n },\n props.className\n )}\n role={props.hidden ? 'hidden' : undefined}\n >\n <div\n className={cx(\n classNames['sendbox__text-area-doppelganger'],\n classNames['sendbox__text-area-shared'],\n classNames['sendbox__text-area-input--scroll']\n )}\n >\n {props.value || props.placeholder}{' '}\n </div>\n <textarea\n aria-label={props['aria-label']}\n className={cx(\n classNames['sendbox__text-area-input'],\n classNames['sendbox__text-area-shared'],\n classNames['sendbox__text-area-input--scroll']\n )}\n data-testid={props['data-testid']}\n onInput={props.onInput}\n onKeyDown={handleKeyDown}\n placeholder={props.placeholder}\n ref={ref}\n rows={props.startRows ?? 1}\n // eslint-disable-next-line no-magic-numbers\n tabIndex={props.hidden ? -1 : undefined}\n value={props.value}\n />\n </div>\n );\n});\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n",":global(.webchat-fluent) .sendbox__text-area {\n display: grid;\n grid-template-areas: 'main';\n max-height: 200px;\n overflow: hidden;\n}\n\n:global(.webchat-fluent) .sendbox__text-area--hidden {\n /* TODO: Not perfect way of hiding the text box. */\n height: 0;\n visibility: collapse;\n}\n\n:global(.webchat-fluent) .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\n:global(.webchat-fluent) .sendbox__text-area-doppelganger {\n overflow: hidden;\n visibility: hidden;\n white-space: pre-wrap;\n}\n\n:global(.webchat-fluent) .sendbox__text-area-input {\n background-color: inherit;\n color: currentColor;\n height: 100%;\n padding: 0;\n}\n\n:global(.webchat-fluent) .sendbox__text-area-input--scroll {\n /* Edge uses -webkit-scrollbar if scrollbar-* is not set */\n scrollbar-color: unset;\n scrollbar-width: unset;\n /* Firefox */\n -moz-scrollbar-color: var(--webchat-colorNeutralBackground5) var(--webchat-colorNeutralForeground2);\n -moz-scrollbar-width: thin;\n\n /* Chrome, Edge, and Safari */\n &::-webkit-scrollbar {\n width: 8px\n }\n\n &::-webkit-scrollbar-track {\n background-color: var(--webchat-colorNeutralBackground5);\n border-radius: 16px\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: var(--webchat-colorNeutralForeground2);\n border-radius: 16px\n }\n\n &::-webkit-scrollbar-corner {\n background-color: var(--webchat-colorNeutralBackground5);\n }\n}\n","import { hooks } from 'botframework-webchat-component';\nimport { RefObject, useMemo } from 'react';\nimport { useRefFrom } from 'use-ref-from';\n\nconst { useConnectivityStatus, useLocalizer } = hooks;\n\ntype ErrorMessageStringMap = ReadonlyMap<SendError, string>;\n\ntype SendError = 'empty' | 'offline';\n\nconst useSubmitError = ({\n attachments,\n message\n}: Readonly<{\n attachments: readonly Readonly<{ blob: Blob | File; thumbnailURL?: URL | undefined }>[];\n message: string;\n}>) => {\n const [connectivityStatus] = useConnectivityStatus();\n const localize = useLocalizer();\n\n const submitErrorRef = useRefFrom<'empty' | 'offline' | undefined>(\n connectivityStatus !== 'connected' && connectivityStatus !== 'reconnected'\n ? 'offline'\n : !message && !attachments.length\n ? 'empty'\n : undefined\n );\n\n const errorMessageStringMap = useMemo<ErrorMessageStringMap>(\n () =>\n Object.freeze(\n new Map<SendError, string>()\n .set('empty', localize('SEND_BOX_IS_EMPTY_TOOLTIP_ALT'))\n // TODO: [P0] We should add a new string for \"Cannot send message while offline.\"\n .set('offline', localize('CONNECTIVITY_STATUS_ALT_FATAL'))\n ),\n [localize]\n );\n\n return useMemo<Readonly<[RefObject<SendError | undefined>, string | undefined]>>(\n () => Object.freeze([submitErrorRef, submitErrorRef.current && errorMessageStringMap.get(submitErrorRef.current)]),\n [errorMessageStringMap, submitErrorRef]\n );\n};\n\nexport default useSubmitError;\n","/* eslint no-magic-numbers: [\"error\", { \"ignore\": [2, 5, 36] }] */\n\nimport { useMemo } from 'react';\n// TODO: fix math-random fails to import crypto\n// import random from 'math-random';\n\nexport default function useUniqueId(prefix?: string): string {\n const id = useMemo(() => Math.random().toString(36).substr(2, 5), []);\n\n prefix = prefix ? `${prefix}--` : '';\n\n return `${prefix}${id}`;\n}\n",":global(.webchat-fluent) .sendbox {\n color: var(--webchat-colorNeutralForeground1);\n font-family: var(--webchat-fontFamilyBase);\n padding: 0 10px 10px;\n text-rendering: optimizeLegibility;\n\n --webchat-sendbox-attachment-area-active: ;\n --webchat-sendbox-border-radius: var(--webchat-borderRadiusLarge);\n}\n\n:global(.webchat-fluent) .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:\n [telephone-keypad-start] 'text-area' [telephone-keypad-end]\n var(--webchat-sendbox-attachment-area-active)\n 'controls' / [telephone-keypad] 1fr\n ;\n line-height: 20px;\n padding: 8px;\n position: relative;\n\n &:has(.sendbox__attachment--in-grid) {\n --webchat-sendbox-attachment-area-active: 'attachment'\n }\n\n &:focus-within {\n border-color: var(--webchat-colorNeutralStroke1Selected);\n }\n\n &::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\n &: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\n > .sendbox__text-area--in-grid {\n grid-area: text-area;\n }\n\n > .sendbox__attachment--in-grid {\n grid-area: attachment;\n }\n\n > .sendbox__sendbox-controls--in-grid {\n grid-area: controls;\n }\n\n > .sendbox__telephone-keypad--in-grid {\n grid-area: telephone-keypad;\n }\n}\n\n:global(.webchat-fluent) .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\n:global(.webchat-fluent) .sendbox__sendbox-controls {\n align-items: center;\n display: flex;\n padding-inline-start: 4px;\n}\n\n:global(.webchat-fluent) .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\n:global(.webchat-fluent) .sendbox__text-counter--error {\n color: var(--webchat-colorStatusDangerForeground1);\n}\n"],"mappings":"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","names":["src_exports","__export","FluentThemeProvider_default","buildInfo","testIds_default","__toCommonJS","import_inject_meta_tag","import_botframework_webchat_component","import_react","import_react","import_react","Context","Context_default","Provider","children","shown","setShown","context","React","Context_default","Provider_default","import_react","import_botframework_webchat_component","import_classnames","import_react","import_use_ref_from","import_react","import_use_ref_from","Button_default","telephone-keypad__button","telephone-keypad__button__ruby","telephone-keypad__button__text","telephone-keypad--horizontal","injectedStyles","injectStyles","style","import_react","useStyles","styles","baseClassName","resultClassName","useStyles_default","Button","button","dataTestId","onClick","ruby","ref","classNames","useStyles_default","Button_default","onClickRef","handleClick","React","testIds","testIds_default","import_react","useShown","setShown","shown","Context_default","TelephoneKeypad_default","telephone-keypad","telephone-keypad__box","telephone-keypad__info-message","telephone-keypad__info-message-link","import_react","AddDocumentIcon","props","React","AddDocumentIcon_default","import_react","AttachmentIcon","props","React","AttachmentIcon_default","import_react","InfoSmallIcon","props","React","InfoSmallIcon_default","import_react","SendIcon","props","React","SendIcon_default","import_react","TelephoneKeypadIcon","props","React","TelephoneKeypadIcon_default","LocalizedString","Orientation","children","isHorizontal","classNames","useStyles_default","TelephoneKeypad_default","React","TelephoneKeypad","autoFocus","className","onButtonClick","autoFocusRef","firstButtonRef","onButtonClickRef","setShown","useShown","handleButton1Click","handleButton2Click","handleButton3Click","handleButton4Click","handleButton5Click","handleButton6Click","handleButton7Click","handleButton8Click","handleButton9Click","handleButton0Click","handleButtonStarClick","handleButtonPoundClick","handleKeyDown","event","cx","Button_default","testIds_default","InfoSmallIcon_default","TelephoneKeypadSurrogate","props","useShown","React","TelephoneKeypad_default","Surrogate_default","import_react","import_classnames","Theme_default","theme","rootClassName","WebchatTheme","props","classNames","useStyles_default","Theme_default","React","cx","import_botframework_webchat_component","import_classnames","import_react","import_use_ref_from","import_botframework_webchat_component","import_classnames","import_react","import_use_ref_from","DropZone_default","sendbox__attachment-drop-zone","sendbox__attachment-drop-zone--droppable","sendbox__attachment-drop-zone-icon","useLocalizer","handleDragOver","event","isFilesTransferEvent","type","isDescendantOf","target","ancestor","current","DropZone","props","dropZoneState","setDropZoneState","classNames","useStyles_default","DropZone_default","dropZoneRef","localize","onFilesAddedRef","entranceCounter","handleDragEnter","handleDragLeave","handleDrop","React","cx","testIds_default","AddDocumentIcon_default","import_botframework_webchat_component","import_classnames","import_react","import_botframework_webchat_component","import_classnames","import_react","SuggestedAction_default","suggested-action","suggested-action__image","import_react","preventDefaultHandler","event","AccessibleButton","ariaHidden","children","disabled","onClick","tabIndex","props","forwardedRef","targetRef","React","AccessibleButton_default","import_react","RovingFocusContext","RovingFocusProvider","props","activeItemIndexRef","itemRefsRef","updateItemTabIndex","current","index","setActiveItemIndex","valueOrFunction","nextActiveItemIndex","ref","handleFocus","event","target","handleSetNextActive","key","currentIndex","isUnidirectional","isVerticalMove","isHorizontalMove","isForwardMove","direction","itemIndices","_","nextIndex","handleKeyDown","itemEffector","value","React","useRovingFocusItemRef","itemIndex","rovingFocus_default","useDisabled","useFocus","usePerformCardAction","useScrollToEnd","useStyleSet","useSuggestedActions","SuggestedAction","buttonText","className","displayText","image","imageAlt","itemIndex","text","type","value","_","setSuggestedActions","suggestedActionStyleSet","disabled","focus","focusRef","useRovingFocusItemRef","performCardAction","classNames","useStyles_default","SuggestedAction_default","scrollToEnd","handleClick","target","React","AccessibleButton_default","cx","computeSuggestedActionText","cardAction","title","type","value","SuggestedActions_default","suggested-actions","suggested-actions--flow","suggested-actions--stacked","useFocus","useLocalizer","useStyleOptions","useStyleSet","useSuggestedActions","SuggestedActionStackedOrFlowContainer","props","suggestedActionLayout","suggestedActionsStyleSet","classNames","useStyles_default","SuggestedActions_default","React","cx","SuggestedActions","localize","suggestedActions","focus","handleEscapeKey","children","cardAction","index","displayText","image","imageAltText","text","type","value","SuggestedAction_default","computeSuggestedActionText","rovingFocus_default","import_botframework_webchat_component","import_react","import_use_ref_from","import_classnames","import_react","Toolbar_default","sendbox__toolbar","sendbox__toolbar-button","sendbox__toolbar-button--selected","sendbox__toolbar-separator","preventDefaultHandler","event","ToolbarButton","props","classNames","useStyles_default","Toolbar_default","React","cx","Toolbar","ToolbarSeparator","AddAttachmentButton_default","sendbox__add-attachment","sendbox__add-attachment-input","useLocalizer","useStyleOptions","AddAttachmentButton","props","inputRef","classNames","useStyles_default","AddAttachmentButton_default","localize","uploadAccept","uploadMultiple","onFilesAddedRef","handleClick","handleFileChange","files","React","ToolbarButton","testIds_default","AttachmentIcon_default","import_botframework_webchat_component","import_react","import_classnames","Attachments_default","sendbox__attachment","useLocalizer","attachmentsPluralStringIds","Attachments","attachments","className","classNames","useStyles_default","Attachments_default","localizeWithPlural","React","cx","import_react","ErrorMessage_default","sendbox__error-message","ErrorMessage","props","classNames","useStyles_default","ErrorMessage_default","React","import_react","import_botframework_webchat_component","useLocalizer","TelephoneKeypadToolbarButton","telephoneKeypadShown","setTelephoneKeypadShown","useShown","localize","handleClick","shown","React","ToolbarButton","testIds_default","TelephoneKeypadIcon_default","TelephoneKeypadToolbarButton_default","import_classnames","import_react","TextArea_default","sendbox__text-area","sendbox__text-area--hidden","sendbox__text-area-shared","sendbox__text-area-doppelganger","sendbox__text-area-input","sendbox__text-area-input--scroll","TextArea","props","ref","classNames","useStyles_default","TextArea_default","handleKeyDown","event","React","cx","import_botframework_webchat_component","import_react","import_use_ref_from","useConnectivityStatus","useLocalizer","useSubmitError","attachments","message","connectivityStatus","localize","submitErrorRef","errorMessageStringMap","useSubmitError_default","import_react","useUniqueId","prefix","id","SendBox_default","sendbox","sendbox__sendbox","sendbox__attachment--in-grid","sendbox__text-area--in-grid","sendbox__sendbox-controls--in-grid","sendbox__telephone-keypad--in-grid","sendbox__sendbox-text","sendbox__sendbox-controls","sendbox__text-counter","sendbox__text-counter--error","useFocus","useLocalizer","useMakeThumbnail","useRegisterFocusSendBox","useSendBoxAttachments","useSendMessage","useStyleOptions","SendBox","props","inputRef","message","setMessage","attachments","setAttachments","hideTelephoneKeypadButton","hideUploadButton","maxMessageLength","isMessageLengthExceeded","classNames","useStyles_default","SendBox_default","localize","sendMessage","makeThumbnail","errorMessageId","useUniqueId","errorRef","errorMessage","useSubmitError_default","telephoneKeypadShown","useShown","setFocus","noKeyboard","waitUntil","previousReadOnly","resolve","attachmentsRef","messageRef","handleSendBoxClick","event","handleMessageChange","handleAddFiles","inputFiles","newAttachments","file","thumbnailURL","handleFormSubmit","handleTelephoneKeypadButtonClick","dtmf","aria","React","cx","SuggestedActions_default","TextArea_default","testIds_default","Surrogate_default","Attachments_default","Toolbar","TelephoneKeypadToolbarButton_default","AddAttachmentButton_default","ToolbarSeparator","ToolbarButton","SendIcon_default","DropZone_default","ErrorMessage_default","ThemeProvider","sendBoxMiddleware","SendBox_default","FluentThemeProvider","children","React","WebchatTheme","Provider_default","FluentThemeProvider_default","buildTool","moduleFormat","version","buildInfo","injectStyles"]}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import{injectMetaTag as Ur}from"inject-meta-tag";import{Components as Dr}from"botframework-webchat-component";import be,{memo as Pr}from"react";import dt,{memo as it,useMemo as ct,useState as ut}from"react";import{createContext as lt}from"react";var he=lt(new Proxy({},{get(){throw new Error("botframework-webchat: This hook can only used under its corresponding <Provider>.")}}));he.displayName="TelephoneKeypad.Context";var D=he;var mt=it(({children:e})=>{let[t,o]=ut(!1),r=ct(()=>Object.freeze({setShown:o,shown:t}),[o,t]);return dt.createElement(D.Provider,{value:r},e)}),j=mt;import zt,{memo as Ot}from"react";import{Components as It}from"botframework-webchat-component";import Dt from"classnames";import f,{memo as Be,useCallback as v,useEffect as Pt,useRef as Rt}from"react";import{useRefFrom as _e}from"use-ref-from";import W,{forwardRef as gt,memo as xt,useCallback as yt}from"react";import{useRefFrom as vt}from"use-ref-from";var ge={"telephone-keypad__button":"r","telephone-keypad__button__ruby":"e","telephone-keypad__button__text":"o","telephone-keypad--horizontal":"l"};var bt=".webchat-fluent .r{-webkit-user-select:none;align-items:center;-webkit-appearance:none;appearance:none;background-color:#fff;border-radius:100%;border:solid 1px var(--webchat-colorNeutralStroke1);color:var(--webchat-colorGray200);font-weight:var(--webchat-fontWeightSemibold);cursor:pointer;display:flex;flex-direction:column;height:60px;opacity:.7;padding:0;position:relative;touch-action:none;user-select:none;width:60px}.webchat-fluent .r:hover{background-color:var(--webchat-colorGray30)}.webchat-fluent .e{color:var(--webchat-colorGray190);font-size:10px}.webchat-fluent .o{font-size:24px;margin-top:8px}.webchat-fluent .l .r{height:32px;justify-content:center;margin:8px 4px;width:32px}.webchat-fluent .l .e{display:none}.webchat-fluent .l .o{font-size:20px;margin-top:0}.webchat-fluent .c{align-items:center;background:var(--webchat-colorNeutralBackground1);border:none;border-radius:var(--webchat-borderRadiusXLarge);display:flex;flex-direction:column;font-family:var(--webchat-fontFamilyBase);justify-content:center}.webchat-fluent .n{box-sizing:border-box;display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);justify-items:center;padding:16px;width:100%}.webchat-fluent .d{align-items:center;color:var(--webchat-colorNeutralForeground4);display:flex;font-size:12px;gap:6px;margin-block-end:6px}.webchat-fluent .i{color:var(--webchat-colorBrandForegroundLink);text-decoration-color:transparent}.webchat-fluent .i:target{color:var(--webchat-colorBrandForegroundLinkSelected)}.webchat-fluent .i:hover{color:var(--webchat-colorBrandForegroundLinkHover);text-decoration:underline 1px currentColor}.webchat-fluent .i:active{color:var(--webchat-colorBrandForegroundLinkPressed)}.webchat-fluent .i:focus-visible{outline:none;text-decoration:underline 1px double var(--webchat-colorStrokeFocus2)}.webchat-fluent.a{display:contents;--webchat-colorNeutralForeground1: var(--colorNeutralForeground1, #242424);--webchat-colorNeutralForeground2: var(--colorNeutralForeground2, #424242);--webchat-colorNeutralForeground4: var(--colorNeutralForeground4, #707070);--webchat-colorNeutralForeground2BrandHover: var(--colorNeutralForeground2BrandHover, #02729c);--webchat-colorNeutralForeground2BrandPressed: var(--colorNeutralForeground2BrandPressed, #01678c);--webchat-colorNeutralForeground2BrandSelected: var(--colorNeutralForeground2BrandSelected, #067191);--webchat-colorNeutralForegroundDisabled: var(--colorNeutralForegroundDisabled, #bdbdbd);--webchat-colorNeutralBackground1: var(--colorNeutralBackground1, #ffffff);--webchat-colorNeutralBackground4: var(--colorNeutralBackground4, #f0f0f0);--webchat-colorNeutralBackground5: var(--colorNeutralBackground5, #ebebeb);--webchat-colorNeutralStroke1: var(--colorNeutralStroke1, #d1d1d1);--webchat-colorNeutralStroke2: var(--colorNeutralStroke2, #e0e0e0);--webchat-colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected, #bdbdbd);--webchat-colorStrokeFocus2: var(--colorStrokeFocus2, #000000);--webchat-colorBrandStroke2: var(--colorBrandStroke2, #9edcf7);--webchat-colorBrandForeground2Hover: var(--colorBrandForeground2Hover, #015a7a);--webchat-colorBrandForeground2Pressed: var(--colorBrandForeground2Pressed, #01384d);--webchat-colorBrandForegroundLink: var(--colorBrandForegroundLink, #01678c);--webchat-colorBrandForegroundLinkHover: var(--colorBrandForegroundLinkHover, #015a7a);--webchat-colorBrandForegroundLinkPressed: var(--colorBrandForegroundLinkPressed, #014259);--webchat-colorBrandForegroundLinkSelected: var(--colorBrandForegroundLinkSelected, #01678c);--webchat-colorBrandBackground2Hover: var(--colorBrandBackground2Hover, #bee7fa);--webchat-colorBrandBackground2Pressed: var(--colorBrandBackground2Pressed, #7fd2f5);--webchat-colorCompoundBrandForeground1Hover: var(--colorCompoundBrandForeground1Hover, #02729c);--webchat-colorStatusDangerForeground1: var(--colorStatusDangerForeground1, #b10e1c);--webchat-colorGray30: var(--colorGray30, #edebe9);--webchat-colorGray160: var(--colorGray160, #323130);--webchat-colorGray190: var(--colorGray190, #201f1e);--webchat-colorGray200: var(--colorGray200, #1b1a19);--webchat-borderRadiusSmall: var(--borderRadiusSmall, 2px);--webchat-borderRadiusLarge: var(--borderRadiusLarge, 6px);--webchat-borderRadiusXLarge: var(--borderRadiusXLarge, 8px);--webchat-shadow16: var(--shadow16, 0 6.4px 14.4px 0 rgba(0, 0, 0, .132), 0 1.2px 3.6px 0 rgba(0, 0, 0, .108));--webchat-spacingHorizontalMNudge: var(--spacingHorizontalMNudge, 10px);--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);--webchat-fontWeightSemibold: var(--fontWeightSemibold, 600);--webchat-strokeWidthThicker: var(--strokeWidthThicker, 3px);--webchat-durationUltraFast: var(--durationUltraFast, 0);--webchat-durationNormal: var(--durationNormal, .2s);--webchat-curveAccelerateMid: var(--curveAccelerateMid, cubic-bezier(1,0,1,1));--webchat-curveDecelerateMid: var(--curveDecelerateMid, cubic-bezier(0,0,0,1))}@media (prefers-reduced-motion){.webchat-fluent.a{--webchat-durationUltraFast: .01ms;--webchat-durationNormal: .01ms}}.webchat-fluent .b{background-color:var(--webchat-colorNeutralBackground4);border-radius:inherit;cursor:copy;display:grid;gap:8px;inset:0;place-content:center;place-items:center;position:absolute}.webchat-fluent .u{background-color:#e00;color:#fff}.webchat-fluent .h{height:36px;pointer-events:none;width:36px}.webchat-fluent .s{align-items:center;background:transparent;border-radius:8px;border:1px solid var(--webchat-colorBrandStroke2);color:currentColor;cursor:pointer;display:flex;font-size:12px;gap:4px;padding:4px 8px;text-align:start;transition:all .15s ease-out}@media (hover: hover){.webchat-fluent .s:not([aria-disabled=true]):hover{background-color:var(--webchat-colorBrandBackground2Hover);color:var(--webchat-colorBrandForeground2Hover)}}.webchat-fluent .s:not([aria-disabled=true]):active{background-color:var(--webchat-colorBrandBackground2Pressed);color:var(--webchat-colorBrandForeground2Pressed)}.webchat-fluent .s[aria-disabled=true]{color:var(--webchat-colorNeutralForegroundDisabled);cursor:not-allowed}.webchat-fluent .g{font-size:12px;height:1em;width:1em}.webchat-fluent .p{align-items:flex-end;align-self:flex-end;display:flex;flex-direction:column;gap:8px}.webchat-fluent .p:not(:empty){padding-block-end:8px;padding-inline-start:4px}.webchat-fluent .p.w{flex-direction:row;flex-wrap:wrap;justify-content:flex-end}.webchat-fluent .p.v{flex-direction:column}.webchat-fluent .f{display:flex;gap:4px;margin-inline-start:auto}.webchat-fluent .x{align-items:center;-webkit-appearance:none;appearance:none;aspect-ratio:1;background:transparent;border-radius:var(--webchat-borderRadiusSmall);border:none;color:currentColor;cursor:pointer;display:flex;justify-content:center;padding:3px;width:32px}.webchat-fluent .x>svg{font-size:20px;pointer-events:none}.webchat-fluent .x.k{color:var(--webchat-colorNeutralForeground2BrandSelected)}@media (hover: hover){.webchat-fluent .x:not([aria-disabled=true]):hover{color:var(--webchat-colorNeutralForeground2BrandHover)}}.webchat-fluent .x:not([aria-disabled=true]):active{color:var(--webchat-colorNeutralForeground2BrandPressed)}.webchat-fluent .x[aria-disabled=true]{color:var(--webchat-colorNeutralForegroundDisabled);cursor:not-allowed}.webchat-fluent .m{align-self:center;border-inline-end:1px solid var(--webchat-colorNeutralStroke2);height:28px}.webchat-fluent .m:is(:first-child,:last-child,:only-child){display:none}.webchat-fluent .B{display:grid}.webchat-fluent .F{font-size:0;height:0;opacity:0;width:0}.webchat-fluent .y{border-radius:var(--webchat-borderRadiusLarge);border:1px solid var(--webchat-colorNeutralStroke1);cursor:default;padding:6px 8px;width:fit-content}.webchat-fluent .N{color:transparent;font-size:0;height:0;left:0;position:absolute;top:0;width:0}.webchat-fluent .S{display:grid;grid-template-areas:\"main\";max-height:200px;overflow:hidden}.webchat-fluent .z{height:0;visibility:collapse}.webchat-fluent .L{border:none;font:inherit;grid-area:main;outline:inherit;overflow-wrap:anywhere;resize:inherit;scrollbar-gutter:stable}.webchat-fluent .H{overflow:hidden;visibility:hidden;white-space:pre-wrap}.webchat-fluent .W{background-color:inherit;color:currentColor;height:100%;padding:0}.webchat-fluent .P{scrollbar-color:unset;scrollbar-width:unset;-moz-scrollbar-color:var(--webchat-colorNeutralBackground5) var(--webchat-colorNeutralForeground2);-moz-scrollbar-width:thin}.webchat-fluent .P::-webkit-scrollbar{width:8px}.webchat-fluent .P::-webkit-scrollbar-track{background-color:var(--webchat-colorNeutralBackground5);border-radius:16px}.webchat-fluent .P::-webkit-scrollbar-thumb{background-color:var(--webchat-colorNeutralForeground2);border-radius:16px}.webchat-fluent .P::-webkit-scrollbar-corner{background-color:var(--webchat-colorNeutralBackground5)}.webchat-fluent .R{color:var(--webchat-colorNeutralForeground1);font-family:var(--webchat-fontFamilyBase);padding:0 10px 10px;text-rendering:optimizeLegibility;--webchat-sendbox-attachment-area-active: ;--webchat-sendbox-border-radius: var(--webchat-borderRadiusLarge)}.webchat-fluent .G{background-color:var(--webchat-colorNeutralBackground1);border-radius:var(--webchat-sendbox-border-radius);border:1px solid var(--webchat-colorNeutralStroke1);display:grid;font-family:var(--webchat-fontFamilyBase);font-size:14px;gap:6px;grid-template:[telephone-keypad-start] \"text-area\" [telephone-keypad-end] var(--webchat-sendbox-attachment-area-active) \"controls\" / [telephone-keypad] 1fr;line-height:20px;padding:8px;position:relative}.webchat-fluent .G:has(.t){--webchat-sendbox-attachment-area-active: \"attachment\" }.webchat-fluent .G:focus-within{border-color:var(--webchat-colorNeutralStroke1Selected)}.webchat-fluent .G:after{border-bottom-left-radius:var(--webchat-sendbox-border-radius);border-bottom-right-radius:var(--webchat-sendbox-border-radius);border-bottom:var(--webchat-strokeWidthThicker) solid var(--webchat-colorCompoundBrandForeground1Hover);bottom:-1px;clip-path:inset(calc(100% - var(--webchat-strokeWidthThicker)) 50% 0 50%);content:\"\";height:var(--webchat-sendbox-border-radius);left:-1px;position:absolute;right:-1px;transition:clip-path var(--webchat-durationUltraFast) var(--webchat-curveAccelerateMid)}.webchat-fluent .G:focus-within:after{clip-path:inset(calc(100% - var(--webchat-strokeWidthThicker)) 0 0 0);transition:clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid)}.webchat-fluent .G>.D{grid-area:text-area}.webchat-fluent .G>.t{grid-area:attachment}.webchat-fluent .G>.M{grid-area:controls}.webchat-fluent .G>.U{grid-area:telephone-keypad}.webchat-fluent .C{background-color:transparent;border:none;flex:auto;font-family:var(--webchat-fontFamilyBase);font-size:14px;line-height:20px;outline:none;padding:4px 4px 0;resize:none}.webchat-fluent .j{align-items:center;display:flex;padding-inline-start:4px}.webchat-fluent .T{color:var(--webchat-colorNeutralForeground4);cursor:default;font-family:var(--webchat-fontFamilyNumeric);font-size:10px;line-height:14px;margin-inline-end:4px}.webchat-fluent .I{color:var(--webchat-colorStatusDangerForeground1)}\n/*! For license information please see botframework-webchat-fluent-theme.css.LEGAL.txt */\n";function P(){if(globalThis.document){let e=document.createElement("style");e.append(document.createTextNode(bt)),document.head.appendChild(e)}}import{useMemo as ft}from"react";function ht(e){return ft(()=>Object.freeze(Object.fromEntries(Object.entries(e).map(([t,o])=>[t,`${t} ${o}`]))),[e])}var i=ht;var xe=xt(gt(({button:e,"data-testid":t,onClick:o,ruby:r},a)=>{let d=i(ge),c=vt(o),n=yt(()=>c.current?.(),[c]);return W.createElement("button",{className:d["telephone-keypad__button"],"data-testid":t,onClick:n,ref:a,type:"button"},W.createElement("span",{className:d["telephone-keypad__button__text"]},e==="star"?"\u2217":e==="pound"?"#":e),!!r&&W.createElement("ruby",{className:d["telephone-keypad__button__ruby"]},r))}));xe.displayName="TelephoneKeypad.Button";var y=xe;var wt={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"},m=wt;import{useContext as Tt,useMemo as kt}from"react";function k(){let{setShown:e,shown:t}=Tt(D);return kt(()=>Object.freeze([t,e]),[t,e])}var X={"telephone-keypad":"c","telephone-keypad__box":"n","telephone-keypad__info-message":"d","telephone-keypad__info-message-link":"i"};import ye,{memo as Bt}from"react";function Nt(e){return ye.createElement("svg",{"aria-hidden":"true",className:e.className,height:"1em",viewBox:"0 0 20 20",width:"1em",xmlns:"http://www.w3.org/2000/svg"},ye.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"}))}var G=Bt(Nt);import ve,{memo as St}from"react";function Et(e){return ve.createElement("svg",{"aria-hidden":"true",className:e.className,height:"1em",viewBox:"0 0 20 20",width:"1em",xmlns:"http://www.w3.org/2000/svg"},ve.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"}))}var $=St(Et);import we,{memo as Ct}from"react";function Ft(e){return we.createElement("svg",{"aria-hidden":"true",className:e.className,height:"1em",viewBox:"0 0 16 16",width:"1em",xmlns:"http://www.w3.org/2000/svg"},we.createElement("path",{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",fill:"currentColor"}))}var V=Ct(Ft);import Te,{memo as At}from"react";function Mt(e){return Te.createElement("svg",{"aria-hidden":"true",className:e.className,height:"1em",viewBox:"0 0 20 20",width:"1em",xmlns:"http://www.w3.org/2000/svg"},Te.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"}))}var Y=At(Mt);import ke,{memo as Ht}from"react";function Lt(e){return ke.createElement("svg",{"aria-hidden":"true",className:e.className,height:"1em",viewBox:"0 0 20 20",width:"1em",xmlns:"http://www.w3.org/2000/svg"},ke.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"}))}var q=Ht(Lt);var{LocalizedString:Kt}=It,Ne=Be(({children:e,isHorizontal:t})=>{let o=i(X);return t?null:f.createElement("div",{className:o["telephone-keypad__box"]},e)});Ne.displayName="TelephoneKeypad:Orientation";var Se=Be(({autoFocus:e,className:t,onButtonClick:o,isHorizontal:r})=>{let a=_e(e),d=i(X),c=Rt(null),n=_e(o),[,u]=k(),b=v(()=>n.current?.("1"),[n]),s=v(()=>n.current?.("2"),[n]),l=v(()=>n.current?.("3"),[n]),p=v(()=>n.current?.("4"),[n]),g=v(()=>n.current?.("5"),[n]),N=v(()=>n.current?.("6"),[n]),_=v(()=>n.current?.("7"),[n]),B=v(()=>n.current?.("8"),[n]),w=v(()=>n.current?.("9"),[n]),T=v(()=>n.current?.("0"),[n]),S=v(()=>n.current?.("star"),[n]),C=v(()=>n.current?.("pound"),[n]),O=v(U=>{U.key==="Escape"&&u(!1)},[u]);return Pt(()=>{a.current&&c.current?.focus()},[a,c]),f.createElement("div",{className:Dt(d["telephone-keypad"],t),onKeyDown:O},f.createElement(Ne,{isHorizontal:r},f.createElement(y,{button:"1","data-testid":m.sendBoxTelephoneKeypadButton1,onClick:b,ref:c}),f.createElement(y,{button:"2","data-testid":m.sendBoxTelephoneKeypadButton2,onClick:s,ruby:"ABC"}),f.createElement(y,{button:"3","data-testid":m.sendBoxTelephoneKeypadButton3,onClick:l,ruby:"DEF"}),f.createElement(y,{button:"4","data-testid":m.sendBoxTelephoneKeypadButton4,onClick:p,ruby:"GHI"}),f.createElement(y,{button:"5","data-testid":m.sendBoxTelephoneKeypadButton5,onClick:g,ruby:"JKL"}),f.createElement(y,{button:"6","data-testid":m.sendBoxTelephoneKeypadButton6,onClick:N,ruby:"MNO"}),f.createElement(y,{button:"7","data-testid":m.sendBoxTelephoneKeypadButton7,onClick:_,ruby:"PQRS"}),f.createElement(y,{button:"8","data-testid":m.sendBoxTelephoneKeypadButton8,onClick:B,ruby:"TUV"}),f.createElement(y,{button:"9","data-testid":m.sendBoxTelephoneKeypadButton9,onClick:w,ruby:"WXYZ"}),f.createElement(y,{button:"star","data-testid":m.sendBoxTelephoneKeypadButtonStar,onClick:S}),f.createElement(y,{button:"0","data-testid":m.sendBoxTelephoneKeypadButton0,onClick:T,ruby:"+"}),f.createElement(y,{button:"pound","data-testid":m.sendBoxTelephoneKeypadButtonPound,onClick:C})),f.createElement("div",{className:d["telephone-keypad__info-message"]},f.createElement(V,null),f.createElement(Kt,{linkClassName:d["telephone-keypad__info-message-link"],stringIds:"TELEPHONE_KEYPAD_INPUT_MESSAGE"})))});Se.displayName="TelephoneKeypad";var Ee=Se;var Ce=Ot(e=>k()[0]?zt.createElement(Ee,{...e}):null);Ce.displayName="TelephoneKeypad.Surrogate";var J=Ce;import Zt from"react";import jt from"classnames";var Fe={theme:"a"};var Wt="webchat-fluent";function R(e){let t=i(Fe);return Zt.createElement("div",{className:jt(Wt,t.theme)},e.children)}import{hooks as _r}from"botframework-webchat-component";import L from"classnames";import h,{memo as Br,useCallback as A,useRef as Nr,useState as Sr}from"react";import{useRefFrom as rt}from"use-ref-from";import{hooks as Gt}from"botframework-webchat-component";import $t from"classnames";import Me,{memo as Vt,useCallback as Yt,useEffect as qt,useRef as Jt,useState as Qt}from"react";import{useRefFrom as eo}from"use-ref-from";var Ae={"sendbox__attachment-drop-zone":"b","sendbox__attachment-drop-zone--droppable":"u","sendbox__attachment-drop-zone-icon":"h"};var{useLocalizer:to}=Gt,oo=e=>{e.preventDefault()},He=e=>!!e.dataTransfer?.types?.some(t=>t.toLowerCase()==="files");function ro(e,t){let o=e.parentNode;for(;o;){if(o===t)return!0;o=o.parentNode}return!1}var Le=e=>{let[t,o]=Qt(!1),r=i(Ae),a=Jt(null),d=to(),c=eo(e.onFilesAdded);qt(()=>{let u=0,b=l=>{u++,He(l)&&o(a.current&&(l.target===a.current||l.target instanceof HTMLElement&&ro(l.target,a.current))?"droppable":"visible")},s=()=>--u<=0&&o(!1);return document.addEventListener("dragenter",b,!1),document.addEventListener("dragleave",s,!1),()=>{document.removeEventListener("dragenter",b),document.removeEventListener("dragleave",s)}},[o]);let n=Yt(u=>{u.preventDefault(),o(!1),He(u.nativeEvent)&&c.current([...u.dataTransfer.files])},[c,o]);return t?Me.createElement("div",{className:$t(r["sendbox__attachment-drop-zone"],{[r["sendbox__attachment-drop-zone--droppable"]]:t==="droppable"}),"data-testid":m.sendBoxDropZone,onDragOver:oo,onDrop:n,ref:a},Me.createElement(G,{className:r["sendbox__attachment-drop-zone-icon"]}),d("TEXT_INPUT_DROP_ZONE")):null};Le.displayName="DropZone";var Q=Vt(Le);import{hooks as Ao}from"botframework-webchat-component";import Mo from"classnames";import H,{memo as Ho,useCallback as Lo}from"react";import{hooks as yo}from"botframework-webchat-component";import vo from"classnames";import te,{memo as wo,useCallback as To}from"react";var Ie={"suggested-action":"s","suggested-action__image":"g"};import ao,{forwardRef as so,memo as lo,useRef as io}from"react";var co=e=>e.preventDefault(),uo=so(({"aria-hidden":e,children:t,disabled:o,onClick:r,tabIndex:a,...d},c)=>{let n=io(null);return ao.createElement("button",{"aria-disabled":o?"true":"false","aria-hidden":e,onClick:o?co:r,ref:c||n,tabIndex:a,...o&&{"aria-disabled":"true",tabIndex:-1},...d,type:"button"},t)}),De=lo(uo);import mo,{createContext as po,memo as bo,useCallback as F,useContext as fo,useEffect as ho,useMemo as go,useRef as ee}from"react";var Pe=po({itemEffector:()=>{throw new Error("botframework-webchat-fluent-theme rovingFocus: no provider for RovingFocusContext.")}});function xo(e){let t=ee(0),o=ee([]),r=F(({current:s},l)=>s&&(s.tabIndex=t.current===l?0:-1),[t]),a=F(s=>{let l;typeof s=="number"?l=s:l=s(t.current),l&&!o.current.at(l)?.current&&(l=0),t.current!==l&&(t.current=l,o.current.forEach((p,g)=>r(p,g)),o.current.at(l)?.current?.focus())},[r,o,t]),d=F(s=>{let{target:l}=s,p=o.current.findIndex(({current:g})=>g===l);p!==-1&&a(p)},[o,a]),c=F(s=>l=>{let p=!e.direction,g=/up|down/iu.test(s)&&e.direction==="vertical",N=/left|right/iu.test(s)&&e.direction==="horizontal",_=/right|down/iu.test(s),B=p||g||N?_?1:-1:0,w=o.current.map((S,C)=>C),T=w.indexOf(l)+B;return w.at(T)??0},[e.direction]),n=F(s=>{let{key:l}=s;switch(l){case"Up":case"ArrowUp":case"Left":case"ArrowLeft":case"Down":case"ArrowDown":case"Right":case"ArrowRight":a(c(l));break;case"Home":a(0);break;case"End":a(-1);break;case"Escape":e.onEscapeKey?.();break;default:return}s.preventDefault(),s.stopPropagation()},[a,c,e]),u=F((s,l)=>{let{current:p}=s;return o.current[Number(l)]=s,p.addEventListener("focus",d),p.addEventListener("keydown",n),r(s,l),()=>{p.removeEventListener("focus",d),p.removeEventListener("keydown",n),delete o.current[Number(l)]}},[d,n,r,o]),b=go(()=>({itemEffector:u}),[u]);return mo.createElement(Pe.Provider,{value:b},e.children)}function Re(e){let t=ee(null),{itemEffector:o}=fo(Pe);return ho(()=>o(t,e)),t}var Ke=bo(xo);var{useDisabled:ko,useFocus:_o,usePerformCardAction:Bo,useScrollToEnd:No,useStyleSet:So,useSuggestedActions:Eo}=yo;function Co({buttonText:e,className:t,displayText:o,image:r,imageAlt:a,itemIndex:d,text:c,type:n,value:u}){let[b,s]=Eo(),[{suggestedAction:l}]=So(),[p]=ko(),g=_o(),N=Re(d),_=Bo(),B=i(Ie),w=No(),T=To(({target:S})=>{(async function(){await g("sendBoxWithoutKeyboard"),_({displayText:o,text:c,type:n,value:u},{target:S}),n==="openUrl"&&s([]),w()})()},[o,g,_,w,s,c,n,u]);return te.createElement(De,{className:vo(B["suggested-action"],l+"",(t||"")+""),disabled:p,onClick:T,ref:N,type:"button"},r&&te.createElement("img",{alt:a,className:B["suggested-action__image"],src:r}),te.createElement("span",null,e))}var ze=wo(Co);function oe(e){let{title:t}=e,{type:o,value:r}=e;return o==="messageBack"?t||e.displayText:t||(typeof r=="string"?r:JSON.stringify(r))}var re={"suggested-actions":"p","suggested-actions--flow":"w","suggested-actions--stacked":"v"};var{useFocus:Io,useLocalizer:Do,useStyleOptions:Po,useStyleSet:Ro,useSuggestedActions:Ko}=Ao;function zo(e){let[{suggestedActionLayout:t}]=Po(),[{suggestedActions:o}]=Ro(),r=i(re);return H.createElement("div",{"aria-label":e["aria-label"],"aria-live":"polite","aria-orientation":"vertical",className:Mo(r["suggested-actions"],o+"",{[r["suggested-actions--flow"]]:t==="flow",[r["suggested-actions--stacked"]]:t!=="flow"},e.className),role:"toolbar"},!!e.children&&!!H.Children.count(e.children)&&e.children)}function Oo(){let e=i(re),t=Do(),[o]=Ko(),r=Io(),a=Lo(()=>{r("sendBox")},[r]),d=o.map((c,n)=>{let{displayText:u,image:b,imageAltText:s,text:l,type:p,value:g}=c;return o?.length?H.createElement(ze,{buttonText:oe(c),displayText:u,image:b,imageAlt:b&&(s||l),itemIndex:n,key:n,text:l,type:p,value:g}):null});return H.createElement(Ke,{onEscapeKey:a},H.createElement(zo,{"aria-label":t("SUGGESTED_ACTIONS_LABEL_ALT"),className:e["suggested-actions"]},d))}var ne=Ho(Oo);import{hooks as Wo}from"botframework-webchat-component";import z,{useCallback as Ue,useRef as Xo,memo as Go}from"react";import{useRefFrom as $o}from"use-ref-from";import ae from"classnames";import se,{memo as le}from"react";var K={sendbox__toolbar:"f","sendbox__toolbar-button":"x","sendbox__toolbar-button--selected":"k","sendbox__toolbar-separator":"m"};var Zo=e=>e.preventDefault(),E=le(e=>{let t=i(K);return se.createElement("button",{"aria-label":e["aria-label"],className:ae(t["sendbox__toolbar-button"],e.className,{[t["sendbox__toolbar-button--selected"]]:e.selected}),"data-testid":e["data-testid"],onClick:e.disabled?Zo:e.onClick,type:e.type==="submit"?"submit":"button",...e.disabled&&{"aria-disabled":"true",tabIndex:-1}},e.children)});E.displayName="ToolbarButton";var de=le(e=>{let t=i(K);return se.createElement("div",{className:ae(t.sendbox__toolbar,e.className)},e.children)});de.displayName="Toolbar";var ie=le(e=>{let t=i(K);return se.createElement("div",{"aria-orientation":"vertical",className:ae(t["sendbox__toolbar-separator"],e.className),role:"separator"})});ie.displayName="ToolbarSeparator";var Oe={"sendbox__add-attachment":"B","sendbox__add-attachment-input":"F"};var{useLocalizer:Vo,useStyleOptions:Yo}=Wo;function qo(e){let t=Xo(null),o=i(Oe),r=Vo(),[{uploadAccept:a,uploadMultiple:d}]=Yo(),c=$o(e.onFilesAdded),n=Ue(()=>t.current?.click(),[t]),u=Ue(({target:{files:b}})=>{b&&(c.current?.([...b]),t.current&&(t.current.value=""))},[t,c]);return z.createElement("div",{className:o["sendbox__add-attachment"]},z.createElement("input",{accept:a,"aria-disabled":e.disabled,"aria-hidden":"true",className:o["sendbox__add-attachment-input"],multiple:d,onInput:e.disabled?void 0:u,readOnly:e.disabled,ref:t,role:"button",tabIndex:-1,type:"file"}),z.createElement(E,{"aria-label":r("TEXT_INPUT_UPLOAD_BUTTON_ALT"),"data-testid":m.sendBoxUploadButton,onClick:n},z.createElement($,null)))}var Ze=Go(qo);import{hooks as Qo}from"botframework-webchat-component";import er,{memo as tr}from"react";import or from"classnames";var je={sendbox__attachment:"y"};var{useLocalizer:rr}=Qo,nr={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 ar({attachments:e,className:t}){let o=i(je),r=rr({plural:!0});return e.length?er.createElement("div",{className:or(o.sendbox__attachment,t)},r(nr,e.length)):null}var We=tr(ar);import lr,{memo as dr}from"react";var Xe={"sendbox__error-message":"N"};function ir(e){let t=i(Xe);return lr.createElement("span",{className:t["sendbox__error-message"],id:e.id,role:"alert"},e.error)}var Ge=dr(ir);import $e,{memo as cr,useCallback as ur}from"react";import{hooks as mr}from"botframework-webchat-component";var{useLocalizer:pr}=mr,Ve=cr(()=>{let[e,t]=k(),o=pr(),r=ur(()=>t(a=>!a),[t]);return $e.createElement(E,{"aria-label":o("TEXT_INPUT_TELEPHONE_KEYPAD_BUTTON_ALT"),"data-testid":m.sendBoxTelephoneKeypadToolbarButton,onClick:r,selected:e},$e.createElement(q,null))});Ve.displayName="SendBox.TelephoneKeypadToolbarButton";var Ye=Ve;import ce from"classnames";import ue,{forwardRef as fr,useCallback as hr}from"react";var qe={"sendbox__text-area":"S","sendbox__text-area--hidden":"z","sendbox__text-area-shared":"L","sendbox__text-area-doppelganger":"H","sendbox__text-area-input":"W","sendbox__text-area-input--scroll":"P"};var Je=fr((e,t)=>{let o=i(qe),r=hr(a=>{!a.shiftKey&&a.key==="Enter"&&(a.preventDefault(),"form"in a.target&&a.target.form instanceof HTMLFormElement&&a.target?.form?.requestSubmit())},[]);return ue.createElement("div",{className:ce(o["sendbox__text-area"],{[o["sendbox__text-area--hidden"]]:e.hidden},e.className),role:e.hidden?"hidden":void 0},ue.createElement("div",{className:ce(o["sendbox__text-area-doppelganger"],o["sendbox__text-area-shared"],o["sendbox__text-area-input--scroll"])},e.value||e.placeholder," "),ue.createElement("textarea",{"aria-label":e["aria-label"],className:ce(o["sendbox__text-area-input"],o["sendbox__text-area-shared"],o["sendbox__text-area-input--scroll"]),"data-testid":e["data-testid"],onInput:e.onInput,onKeyDown:r,placeholder:e.placeholder,ref:t,rows:e.startRows??1,tabIndex:e.hidden?-1:void 0,value:e.value}))});Je.displayName="TextArea";var Qe=Je;import{hooks as gr}from"botframework-webchat-component";import{useMemo as et}from"react";import{useRefFrom as xr}from"use-ref-from";var{useConnectivityStatus:yr,useLocalizer:vr}=gr,wr=({attachments:e,message:t})=>{let[o]=yr(),r=vr(),a=xr(o!=="connected"&&o!=="reconnected"?"offline":!t&&!e.length?"empty":void 0),d=et(()=>Object.freeze(new Map().set("empty",r("SEND_BOX_IS_EMPTY_TOOLTIP_ALT")).set("offline",r("CONNECTIVITY_STATUS_ALT_FATAL"))),[r]);return et(()=>Object.freeze([a,a.current&&d.get(a.current)]),[d,a])},tt=wr;import{useMemo as Tr}from"react";function me(e){let t=Tr(()=>Math.random().toString(36).substr(2,5),[]);return e=e?`${e}--`:"",`${e}${t}`}var ot={sendbox:"R",sendbox__sendbox:"G","sendbox__attachment--in-grid":"t","sendbox__text-area--in-grid":"D","sendbox__sendbox-controls--in-grid":"M","sendbox__telephone-keypad--in-grid":"U","sendbox__sendbox-text":"C","sendbox__sendbox-controls":"j","sendbox__text-counter":"T","sendbox__text-counter--error":"I"};var{useFocus:Er,useLocalizer:Cr,useMakeThumbnail:Fr,useRegisterFocusSendBox:Ar,useSendBoxAttachments:Mr,useSendMessage:Hr,useStyleOptions:Lr}=_r;function Ir(e){let t=Nr(null),[o,r]=Sr(""),[a,d]=Mr(),[{hideTelephoneKeypadButton:c,hideUploadButton:n,maxMessageLength:u}]=Lr(),b=!!u&&o.length>u,s=i(ot),l=Cr(),p=Hr(),g=Fr(),N=me("sendbox__error-message-id"),[_,B]=tt({message:o,attachments:a}),[w]=k(),T=Er();Ar(A(({noKeyboard:x,waitUntil:Z})=>{t.current&&(x?Z((async()=>{let M=t.current?.getAttribute("readonly");t.current?.setAttribute("readonly","true"),await new Promise(I=>setTimeout(I,0)),t.current?.focus(),typeof M!="string"?t.current?.removeAttribute("readonly"):t.current?.setAttribute("readonly",M)})()):t.current?.focus())},[t]));let S=rt(a),C=rt(o),O=A(x=>{"tabIndex"in x.target&&typeof x.target.tabIndex=="number"&&x.target.tabIndex>=0||T("sendBox")},[T]),U=A(x=>r(x.currentTarget.value),[r]),fe=A(async x=>{let Z=Object.freeze(await Promise.all(x.map(M=>g(M).then(I=>Object.freeze({blob:M,...I&&{thumbnailURL:I}})))));d(Z)},[g,d]),nt=A(x=>{x.preventDefault(),_.current!=="empty"&&!b&&(p(C.current,void 0,{attachments:S.current}),r(""),d([])),T("sendBox")},[S,C,p,d,r,b,_,T]),at=A(x=>p(`/DTMF ${x}`),[p]),st={"aria-invalid":"false",...B&&{"aria-invalid":"true","aria-errormessage":N}};return h.createElement("form",{...st,className:L(s.sendbox,e.className),onSubmit:nt},h.createElement(ne,null),h.createElement("div",{className:L(s.sendbox__sendbox),onClickCapture:O},h.createElement(Qe,{"aria-label":l(b?"TEXT_INPUT_LENGTH_EXCEEDED_ALT":"TEXT_INPUT_ALT"),className:L(s["sendbox__sendbox-text"],s["sendbox__text-area--in-grid"]),"data-testid":m.sendBoxTextBox,hidden:w,onInput:U,placeholder:e.placeholder??l("TEXT_INPUT_PLACEHOLDER"),ref:t,value:o}),h.createElement(J,{autoFocus:!0,className:s["sendbox__telephone-keypad--in-grid"],isHorizontal:!1,onButtonClick:at}),h.createElement(We,{attachments:a,className:s["sendbox__attachment--in-grid"]}),h.createElement("div",{className:L(s["sendbox__sendbox-controls"],s["sendbox__sendbox-controls--in-grid"])},!w&&u&&h.createElement("div",{className:L(s["sendbox__text-counter"],{[s["sendbox__text-counter--error"]]:b})},`${o.length}/${u}`),h.createElement(de,null,!c&&h.createElement(Ye,null),!n&&h.createElement(Ze,{onFilesAdded:fe}),h.createElement(ie,null),h.createElement(E,{"aria-label":l("TEXT_INPUT_SEND_BUTTON_ALT"),"data-testid":m.sendBoxSendButton,disabled:b||w,type:"submit"},h.createElement(Y,null)))),h.createElement(Q,{onFilesAdded:fe}),h.createElement(Ge,{error:B,id:N})))}var pe=Br(Ir);var{ThemeProvider:Rr}=Dr,Kr=[()=>()=>()=>pe],zr=({children:e})=>be.createElement(R,null,be.createElement(j,null,be.createElement(Rr,{sendBoxMiddleware:Kr},e))),Or=Pr(zr);var Zr="tsup",jr="esmodules",Wr="4.17.0-main.20240502.a8ff179",xl={buildTool:Zr,moduleFormat:jr,version:Wr};Ur("botframework-webchat:fluent-theme","version=4.17.0-main.20240502.a8ff179; build-tool=tsup; module-format=esmodules");P();export{Or as FluentThemeProvider,xl as buildInfo,m as testIds};
|
|
2
|
+
/*! For license information please see botframework-webchat-fluent-theme.mjs.LEGAL.txt */
|
|
3
|
+
//# sourceMappingURL=botframework-webchat-fluent-theme.mjs.map
|