botframework-webchat-component 4.18.0 → 4.18.1-hotfix.20260127.b53acdf

package/dist/botframework-webchat-component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/__w/1/s/BotFramework-WebChat/packages/component/dist/botframework-webchat-component.js","../src/index.ts","../src/ReactWebChat.tsx","../src/BasicWebChat.tsx","../src/hooks/internal/styleToEmotionObject/private/createStyleToEmotionObjectComposer.tsx","../src/hooks/internal/useEmotion.ts","../src/Utils/createCSSKey.js","../src/Utils/activityAltText.ts","../src/LiveRegion/LiveRegionActivity.tsx","../src/Attachment/Text/private/MessageSensitivityLabel.tsx","../src/Attachment/Text/private/MarkdownTextContent.tsx","../src/Attachment/Text/private/PlainTextContent.tsx","../src/Attachment/HTMLVideoContent.tsx","../src/Transcript/useActivityAccessibleName.ts","../src/Styles/useCustomPropertiesClassName.ts","../src/Composer.tsx"],"names":["useCSSKey","random","value","sharedEmotionInstances","useEmotion","nonce","container","emotion","useMemo","sharedEmotion","sheet","createEmotion","activity","suggestedActionsAccessKey"],"mappings":"AAAA,+NAAgG,sDAAyD,sDAAgF,kECA3K,6FCAxC,4EACJ,6DCGY,gGACP,kCAE6E,0CCNzE,8HCDD,iGCEP,SAEZA,EAAAA,CAAAA,CAA6B,CAClC,OAAOC,kCAAAA,CAAO,CACX,QAAA,CAAS,EAAE,CAAA,CACX,MAAA,CAAO,CAAA,CAAG,CAAC,CAAA,CACX,OAAA,CAAQ,MAAA,CAAQC,CAAAA,EAAS,MAAA,CAAO,YAAA,CAAaA,CAAAA,CAAM,UAAA,CAAW,CAAC,CAAA,CAAI,EAAE,CAAC,CAC3E,CDLA,IAAMC,EAAAA,CAAyB,CAAC,CAAA,CAEjB,SAARC,EAAAA,CAA4BC,CAAAA,CAAgBC,CAAAA,CAAkB,CACnE,IAAMC,CAAAA,CAAUC,4BAAAA,CAAQ,CAAA,EAAM,CAC5B,IAAMC,CAAAA,CAAgBN,EAAAA,CAAuB,IAAA,CAC3C,CAAC,CAAE,KAAA,CAAAO,CAAM,CAAA,CAAA,EAAMA,CAAAA,CAAM,KAAA,GAAUL,CAAAA,EAASK,CAAAA,CAAM,SAAA,GAAcJ,CAC9D,CAAA,CACMC,CAAAA,CAAUE,CAAAA,EAAA,IAAA,CAAAA,CAAAA,CAAiBE,sCAAAA,CAAgB,SAAA,CAAAL,CAAAA,CAAW,GAAA,CAAK,CAAA,aAAA,EAAgBN,EAAAA,CAAa,CAAC,CAAA,CAAA;AEsHxE;AClFFY;ACfqC;AC4Fc;AA+GjB;AClNjC;ACvBjB;ACFa;AC0CwB,CAAA;AAAA;AAEyB,EAAA;AACA,EAAA;AACA,EAAA;AACzB,EAAA;AACA,EAAA;AACqB,EAAA;AAChB,EAAA;AACI,EAAA;AACsB,EAAA;AACR,EAAA;AACQ,EAAA;AACA,EAAA;AACN,EAAA;AACA,EAAA;AACZ,EAAA;AACU,EAAA;AACZ,EAAA;AACR,EAAA;AAAA;AC2F/CC;AfzHqlD","file":"/__w/1/s/BotFramework-WebChat/packages/component/dist/botframework-webchat-component.js","sourcesContent":[null,"import { hooks as apiHooks, concatMiddleware, localize } from 'botframework-webchat-api';\nimport { type WebChatActivity } from 'botframework-webchat-core';\n\nimport ReactWebChat, { ReactWebChatProps } from './ReactWebChat';\n\nimport Composer, { ComposerProps } from './Composer';\n\nimport AccessKeySinkSurface from './Utils/AccessKeySink/Surface';\n\nimport BasicConnectivityStatus from './BasicConnectivityStatus';\nimport BasicToaster from './BasicToaster';\nimport BasicTranscript from './BasicTranscript';\nimport BasicWebChat, { BasicWebChatProps } from './BasicWebChat';\nimport BasicSendBox from './SendBox/BasicSendBox';\nimport BasicSendBoxToolbar from './SendBoxToolbar/BasicSendBoxToolbar';\n\nimport Avatar from './Activity/Avatar';\nimport Bubble from './Activity/Bubble';\nimport SpeakActivity from './Activity/Speak';\nimport SendStatus from './ActivityStatus/SendStatus/SendStatus';\nimport Timestamp from './ActivityStatus/Timestamp';\nimport ErrorBox from './ErrorBox';\n\nimport LocalizedString from './Utils/LocalizedString';\n\nimport AudioContent from './Attachment/AudioContent';\nimport FileContent from './Attachment/FileContent';\nimport HTMLVideoContent from './Attachment/HTMLVideoContent';\nimport ImageContent from './Attachment/ImageContent';\nimport TextContent from './Attachment/Text/TextContent';\nimport VideoContent from './Attachment/VideoContent';\nimport VimeoContent from './Attachment/VimeoContent';\nimport YouTubeContent from './Attachment/YouTubeContent';\n\nimport DictationInterims from './SendBox/DictationInterims';\nimport MicrophoneButton from './SendBox/MicrophoneButton';\nimport SendButton from './SendBox/SendButton';\nimport SuggestedActions from './SendBox/SuggestedActions';\nimport SendTextBox from './SendBox/TextBox';\nimport UploadButton from './SendBoxToolbar/UploadButton';\nimport MonochromeImageMasker from './Utils/MonochromeImageMasker';\n\nimport createCoreAttachmentMiddleware from './Attachment/createMiddleware';\nimport createCoreActivityMiddleware from './Middleware/Activity/createCoreMiddleware';\nimport createCoreActivityStatusMiddleware from './Middleware/ActivityStatus/createCoreMiddleware';\nimport createStyleSet from './Styles/createStyleSet';\nimport getTabIndex from './Utils/TypeFocusSink/getTabIndex';\nimport Context from './hooks/internal/WebChatUIContext';\nimport {\n  type HTMLContentTransformEnhancer,\n  type HTMLContentTransformFunction,\n  type HTMLContentTransformMiddleware,\n  type HTMLContentTransformRequest\n} from './providers/HTMLContentTransformCOR/index';\nimport ThemeProvider from './providers/Theme/ThemeProvider';\nimport testIds from './testIds';\nimport withEmoji from './withEmoji/withEmoji';\n\nimport * as componentHooks from './hooks/index';\n\nexport { type SendBoxFocusOptions } from './hooks/index';\n\nconst hooks = {\n  ...apiHooks,\n  ...componentHooks\n};\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\nconst Components = {\n  BasicWebChat,\n  Composer,\n  ThemeProvider,\n\n  // Components for restructuring BasicWebChat\n  AccessKeySinkSurface,\n  BasicConnectivityStatus,\n  BasicSendBox,\n  BasicSendBoxToolbar,\n  BasicToaster,\n  BasicTranscript,\n\n  // Components for recomposing activities and attachments\n  AudioContent,\n  FileContent,\n  HTMLVideoContent,\n  ImageContent,\n  TextContent,\n  VideoContent,\n  VimeoContent,\n  YouTubeContent,\n\n  // Components for recomposing transcript\n  Avatar,\n  Bubble,\n  ErrorBox,\n  SendStatus,\n  SpeakActivity,\n  Timestamp,\n\n  // Components for recomposing send box\n  DictationInterims,\n  MicrophoneButton,\n  SendButton,\n  SendTextBox,\n  SuggestedActions,\n  UploadButton,\n\n  // Components for localization\n  LocalizedString,\n\n  // Components for theming\n  MonochromeImageMasker\n};\n\nexport default ReactWebChat;\n\nexport {\n  buildInfo,\n  Components,\n  concatMiddleware,\n  Context,\n  createCoreActivityMiddleware,\n  createCoreActivityStatusMiddleware,\n  createCoreAttachmentMiddleware,\n  createStyleSet,\n  getTabIndex,\n  hooks,\n  localize,\n  testIds,\n  version,\n  withEmoji\n};\n\nexport type {\n  BasicWebChatProps,\n  ComposerProps,\n  HTMLContentTransformEnhancer,\n  HTMLContentTransformFunction,\n  HTMLContentTransformMiddleware,\n  HTMLContentTransformRequest,\n  ReactWebChatProps,\n  WebChatActivity\n};\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport BasicWebChat from './BasicWebChat';\nimport Composer, { ComposerProps } from './Composer';\n\n// Please keep this file as simple as possible. This is for setting up the surface (a.k.a. <Composer>) and <BasicWebChat> only.\n\n// Web developers may choose to put things before/after <BasicWebChat> while still inside the surface.\n// For example,\n// - They can hide our default send box and built their own using hooks\n// - They can run hooks outside of activity/attachment middleware\n//   - They will put <Composer> as very top of their page, and allow buttons on their existing page to send message to bot\n\n// Subset of landmark roles: https://w3.org/TR/wai-aria/#landmark_roles\nconst ARIA_LANDMARK_ROLES = ['complementary', 'contentinfo', 'form', 'main', 'region'];\n\ntype ReactWebChatProps = Readonly<\n  Omit<ComposerProps, 'children'> & {\n    className?: string;\n    role?: 'complementary' | 'contentinfo' | 'form' | 'main' | 'region';\n  }\n>;\n\nconst ReactWebChat = ({ className, role, ...composerProps }: ReactWebChatProps) => (\n  <Composer {...composerProps}>\n    <BasicWebChat className={className} role={role} />\n  </Composer>\n);\n\nReactWebChat.defaultProps = {\n  className: undefined,\n  role: undefined,\n  ...Composer.defaultProps\n};\n\nconst {\n  // Excluding \"children\" from ComposerProps.\n  children: _,\n  ...composerPropTypesWithoutChildren\n} = Composer.propTypes;\n\nReactWebChat.propTypes = {\n  className: PropTypes.string,\n  // Ignoring deficiencies with TypeScript/PropTypes inference.\n  // @ts-ignore\n  role: PropTypes.oneOf(ARIA_LANDMARK_ROLES),\n  ...composerPropTypesWithoutChildren\n};\n\nexport default ReactWebChat;\n\nexport type { ReactWebChatProps };\n","/* eslint no-magic-numbers: [\"error\", { \"ignore\": [0, 1, 2] }] */\n/* eslint react/no-unsafe: off */\n\nimport { SendBoxMiddlewareProxy, hooks } from 'botframework-webchat-api';\nimport { validateProps } from 'botframework-webchat-api/internal';\nimport classNames from 'classnames';\nimport React, { memo } from 'react';\nimport { fallback, literal, object, optional, pipe, readonly, string, union, type InferInput } from 'valibot';\n\nimport BasicConnectivityStatus from './BasicConnectivityStatus';\nimport BasicToaster from './BasicToaster';\nimport BasicTranscript from './BasicTranscript';\nimport { useStyleToEmotionObject } from './hooks/internal/styleToEmotionObject';\nimport useStyleSet from './hooks/useStyleSet';\nimport AccessKeySinkSurface from './Utils/AccessKeySink/Surface';\n\nconst { useStyleOptions } = hooks;\n\nconst ROOT_STYLE = {\n  display: 'flex',\n  flexDirection: 'column'\n};\n\nconst CONNECTIVITY_STATUS_STYLE = {\n  flexShrink: 0\n};\n\nconst SEND_BOX_CSS = {\n  flexShrink: 0\n};\n\nconst TOASTER_STYLE = {\n  flexShrink: 0\n};\n\nconst TRANSCRIPT_STYLE = {\n  '.webchat__basic-transcript': {\n    flex: 1\n  }\n};\n\nconst basicWebChatPropsSchema = pipe(\n  object({\n    className: optional(string()),\n    role: fallback(\n      optional(\n        // Subset of landmark roles: https://w3.org/TR/wai-aria/#landmark_roles\n        union([literal('complementary'), literal('contentinfo'), literal('form'), literal('main'), literal('region')])\n      ),\n      // Fallback to \"complementary\" if specified is not a valid landmark role.\n      'complementary'\n    )\n  }),\n  readonly()\n);\n\ntype BasicWebChatProps = InferInput<typeof basicWebChatPropsSchema>;\n\nfunction BasicWebChat(props: BasicWebChatProps) {\n  const { className, role } = validateProps(basicWebChatPropsSchema, props, 'strict');\n\n  const [{ root: rootStyleSet }] = useStyleSet();\n  const [options] = useStyleOptions();\n  const styleToEmotionObject = useStyleToEmotionObject();\n\n  const connectivityStatusClassName = styleToEmotionObject(CONNECTIVITY_STATUS_STYLE) + '';\n  const rootClassName = styleToEmotionObject(ROOT_STYLE) + '';\n  const sendBoxClassName = styleToEmotionObject(SEND_BOX_CSS) + '';\n  const toasterClassName = styleToEmotionObject(TOASTER_STYLE) + '';\n  const transcriptClassName = styleToEmotionObject(TRANSCRIPT_STYLE) + '';\n\n  return (\n    <AccessKeySinkSurface\n      className={classNames('webchat__surface', rootClassName, rootStyleSet + '', className)}\n      role={role}\n    >\n      {!options.hideToaster && <BasicToaster className={toasterClassName} />}\n      <BasicTranscript className={transcriptClassName} />\n      <BasicConnectivityStatus className={connectivityStatusClassName} />\n      <SendBoxMiddlewareProxy className={sendBoxClassName} request={undefined} />\n    </AccessKeySinkSurface>\n  );\n}\n\nexport default memo(BasicWebChat);\nexport { basicWebChatPropsSchema, type BasicWebChatProps };\n","import React, { type ReactNode, useCallback } from 'react';\nimport { useRefFrom } from 'use-ref-from';\nimport useEmotion from '../../useEmotion';\nimport { type StyleToEmotionObjectContextType } from './StyleToEmotionObjectComposer';\nimport { hooks } from 'botframework-webchat-api';\n\nconst { useStyleOptions } = hooks;\n\nconst createStyleToEmotionObjectComposer =\n  ({ Provider }: React.Context<StyleToEmotionObjectContextType>) =>\n  ({ children, nonce }: Readonly<{ children: ReactNode; nonce: string }>) => {\n    const [{ stylesRoot }] = useStyleOptions();\n\n    const emotion = useEmotion(nonce, stylesRoot);\n    const styleToEmotionObject = useCallback(style => emotion.css(style), [emotion]);\n\n    const styleToEmotionObjectRef = useRefFrom(styleToEmotionObject);\n\n    return <Provider value={styleToEmotionObjectRef}>{styleToEmotionObject && children}</Provider>;\n  };\n\nexport default createStyleToEmotionObjectComposer;\n","import createEmotion from '@emotion/css/create-instance';\nimport { useEffect, useMemo } from 'react';\nimport createCSSKey from '../../Utils/createCSSKey';\n\nconst sharedEmotionInstances = [];\n\nexport default function useEmotion(nonce?: string, container?: Node) {\n  const emotion = useMemo(() => {\n    const sharedEmotion = sharedEmotionInstances.find(\n      ({ sheet }) => sheet.nonce === nonce && sheet.container === container\n    );\n    const emotion = sharedEmotion ?? createEmotion({ container, key: `webchat--css-${createCSSKey()}`, nonce });\n\n    sharedEmotionInstances.push(emotion);\n\n    return emotion;\n  }, [container, nonce]);\n\n  useEffect(\n    () => () => {\n      const index = sharedEmotionInstances.lastIndexOf(emotion);\n\n      // Reduce ref count for the specific emotion instance.\n      ~index && sharedEmotionInstances.splice(index, 1);\n\n      if (!sharedEmotionInstances.includes(emotion) && emotion.sheet?.tags) {\n        // No more hooks use this emotion object, we can clean up the container for stuff we added.\n        for (const child of emotion.sheet.tags) {\n          child.remove();\n        }\n      }\n    },\n    [emotion]\n  );\n\n  return emotion;\n}\n","/* eslint no-magic-numbers: [\"error\", { \"ignore\": [0, 2, 5, 26, 65] }] */\n\nimport random from 'math-random';\n\nexport default function useCSSKey() {\n  return random()\n    .toString(26)\n    .substr(2, 5)\n    .replace(/\\d/gu, value => String.fromCharCode(value.charCodeAt(0) + 65));\n}\n","import textFormatToContentType from './textFormatToContentType';\n\nfunction walk<T extends Node>(document: Document, walker: (node: T) => string[]): string[] {\n  const nodes: T[] = [].slice.call(document.childNodes);\n  const results: string[] = [];\n\n  while (nodes.length) {\n    const node = nodes.shift();\n    const { childNodes } = node;\n\n    results.push(...(walker(node) || []));\n    nodes.unshift(...[].slice.call(childNodes));\n  }\n\n  return results;\n}\n\n// From https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements\nconst HTML_INLINE_TAGS = [\n  'A',\n  'ABBR',\n  'ACRONYM',\n  'AUDIO',\n  'B',\n  'BDI',\n  'BDO',\n  'BIG',\n  'BR',\n  'BUTTON',\n  'CANVAS',\n  'CITE',\n  'CODE',\n  'DATA',\n  'DATALIST',\n  'DEL',\n  'DFN',\n  'EM',\n  'EMBED',\n  'I',\n  'IFRAME',\n  'IMG',\n  'INPUT',\n  'INS',\n  'KBD',\n  'LABEL',\n  'MAP',\n  'MARK',\n  'METER',\n  'NOSCRIPT',\n  'OBJECT',\n  'OUTPUT',\n  'PICTURE',\n  'PROGRESS',\n  'Q',\n  'RUBY',\n  'S',\n  'SAMP',\n  'SCRIPT',\n  'SELECT',\n  'SLOT',\n  'SMALL',\n  'SPAN',\n  'STRONG',\n  'SUB',\n  'SUP',\n  'SVG',\n  'TEMPLATE',\n  'TEXTAREA',\n  'TIME',\n  'U',\n  'TT',\n  'VAR',\n  'VIDEO',\n  'WBR'\n];\n\n/**\n * Computes all text from a given HTML document as flattened array. This is best-effort.\n *\n * @param {Document} document - HTML document to computes texts from.\n */\nfunction htmlTextAlternatives(document: Document): string[] {\n  // TODO: [P2] #3923 Revisit this logic with W3C standard, we could do a better text alternatives computation.\n  //       For example, <abbr title=\"...\"> is not computed.\n  //       https://www.w3.org/TR/accname-1.1/#mapping_additional_nd_name\n  return walk<HTMLElement>(document, node => {\n    const { nodeType, tagName, textContent } = node;\n\n    if (nodeType === Node.TEXT_NODE) {\n      return [textContent];\n    } else if (tagName === 'IMG') {\n      return [node.getAttribute('alt')];\n    } else if (!HTML_INLINE_TAGS.includes(tagName)) {\n      return ['\\n'];\n    }\n  });\n}\n\n/**\n * Returns the text alternatives for a message activity.\n *\n * @param {object} activity - Activity to compute the text alternatives.\n * @param {function} renderMarkdownAsHTML - Callback function to render Markdown as HTML string.\n */\nexport default function activityAltText(\n  activity: any,\n  renderMarkdownAsHTML?: (markdown: string) => string\n): false | string {\n  if (activity.type !== 'message') {\n    return false;\n  }\n\n  const fallbackText = activity?.channelData?.['webchat:fallback-text'];\n\n  if (typeof fallbackText === 'string') {\n    // If `fallbackText` is an empty string, we will treat the activity as presentational and skip narrating it (return false).\n    return fallbackText || false;\n  }\n\n  const text = activity?.channelData?.messageBack?.displayText || activity.text;\n\n  if (!text) {\n    // We will continue to narrate the activity, as empty.\n    return '';\n  }\n\n  if (renderMarkdownAsHTML && textFormatToContentType(activity.textFormat) === 'text/markdown') {\n    return htmlTextAlternatives(new DOMParser().parseFromString(renderMarkdownAsHTML(text), 'text/html'))\n      .join('')\n      .replace(/\\n{2,}/gu, '\\n')\n      .trim();\n  }\n\n  return text;\n}\n","/* eslint no-magic-numbers: [\"error\", { \"ignore\": [2] }] */\n\nimport { hooks } from 'botframework-webchat-api';\nimport { validateProps } from 'botframework-webchat-api/internal';\nimport classNames from 'classnames';\nimport React, { Fragment, useMemo } from 'react';\nimport { any, object, pipe, readonly, type InferInput } from 'valibot';\n\nimport { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';\nimport useRenderMarkdownAsHTML from '../hooks/useRenderMarkdownAsHTML';\nimport activityAltText from '../Utils/activityAltText';\nimport LiveRegionAttachments from './private/LiveRegionAttachments';\nimport LiveRegionSuggestedActions from './private/LiveRegionSuggestedActions';\n\nconst { useAvatarForBot, useLocalizer } = hooks;\n\nconst ROOT_STYLE = {\n  '&.webchat__live-region-activity': {\n    color: 'transparent',\n    height: 1,\n    opacity: 0,\n    overflow: 'hidden',\n    position: 'absolute',\n    top: 0,\n    whiteSpace: 'nowrap',\n    width: 1\n  }\n};\n\nconst liveRegionActivityPropsSchema = pipe(\n  object({\n    activity: any()\n  }),\n  readonly()\n);\n\ntype LiveRegionActivityProps = InferInput<typeof liveRegionActivityPropsSchema>;\n\nfunction LiveRegionActivity(props: LiveRegionActivityProps) {\n  const { activity } = validateProps(liveRegionActivityPropsSchema, props);\n\n  const [{ initials: botInitials }] = useAvatarForBot();\n  const {\n    from: { role },\n    type\n  } = activity;\n  const fallbackText: string | undefined =\n    type === 'message' ? activity.channelData['webchat:fallback-text'] : undefined;\n  const localize = useLocalizer();\n  const renderMarkdownAsHTML = useRenderMarkdownAsHTML('accessible name');\n  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';\n  const textAlt = useMemo(() => activityAltText(activity, renderMarkdownAsHTML), [activity, renderMarkdownAsHTML]);\n\n  const greetingAlt: string = (\n    role === 'user' ? localize('ACTIVITY_YOU_SAID_ALT') : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '')\n  ).replace(/\\s{2,}/gu, ' ');\n  const validFallbackText = fallbackText && typeof fallbackText === 'string';\n\n  return (\n    <article aria-atomic={true} className={classNames('webchat__live-region-activity', rootClassName)}>\n      <div>{greetingAlt}</div>\n      {validFallbackText ? (\n        <div>{fallbackText}</div>\n      ) : (\n        <Fragment>\n          <div>{textAlt}</div>\n          {type === 'message' && (\n            <Fragment>\n              {!!activity.suggestedActions && (\n                <LiveRegionSuggestedActions suggestedActions={activity.suggestedActions} />\n              )}\n              <LiveRegionAttachments activity={activity} />\n            </Fragment>\n          )}\n        </Fragment>\n      )}\n    </article>\n  );\n}\n\nexport default LiveRegionActivity;\nexport { liveRegionActivityPropsSchema, type LiveRegionActivityProps };\n","import { validateProps } from 'botframework-webchat-api/internal';\nimport classNames from 'classnames';\nimport React, { memo, useMemo } from 'react';\nimport { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';\n\nimport ShieldIcon from './ShieldIcon';\n\nconst messageSensitivityLabelPropsSchema = pipe(\n  object({\n    className: optional(string()),\n    color: optional(string()),\n    isEncrypted: optional(boolean()),\n    name: optional(string()),\n    title: optional(string())\n  }),\n  readonly()\n);\n\ntype MessageSensitivityLabelProps = InferInput<typeof messageSensitivityLabelPropsSchema>;\n\nfunction MessageSensitivityLabel(props: MessageSensitivityLabelProps) {\n  const { className, color, isEncrypted, name, title } = validateProps(messageSensitivityLabelPropsSchema, props);\n\n  return (\n    <div\n      className={classNames(\n        'webchat__link-definitions__message-sensitivity-label',\n        {\n          'webchat__link-definitions__message-sensitivity-label--is-encrypted': isEncrypted\n        },\n        className\n      )}\n      title={useMemo(() => [name, title].filter(Boolean).join('\\n\\n'), [name, title])}\n    >\n      <ShieldIcon\n        className=\"webchat__link-definitions__message-sensitivity-label-icon\"\n        fillColor={color}\n        hasLock={isEncrypted}\n      />\n      <span className=\"webchat__link-definitions__message-sensitivity-label-text\">{name}</span>\n    </div>\n  );\n}\n\nexport default memo(MessageSensitivityLabel);\nexport { messageSensitivityLabelPropsSchema, type MessageSensitivityLabelProps };\n","import { hooks } from 'botframework-webchat-api';\nimport { validateProps } from 'botframework-webchat-api/internal';\nimport {\n  getOrgSchemaMessage,\n  onErrorResumeNext,\n  parseClaim,\n  type OrgSchemaClaim,\n  type WebChatActivity\n} from 'botframework-webchat-core';\nimport classNames from 'classnames';\nimport type { Definition } from 'mdast';\nimport { fromMarkdown } from 'mdast-util-from-markdown';\nimport React, { memo, useCallback, useMemo, useRef, type MouseEventHandler } from 'react';\nimport { useRefFrom } from 'use-ref-from';\nimport { custom, object, optional, pipe, readonly, string, type InferInput } from 'valibot';\n\nimport ActivityFeedback from '../../../ActivityFeedback/ActivityFeedback';\nimport { LinkDefinitionItem, LinkDefinitions } from '../../../LinkDefinition/index';\nimport dereferenceBlankNodes from '../../../Utils/JSONLinkedData/dereferenceBlankNodes';\nimport useRenderMarkdownAsHTML from '../../../hooks/useRenderMarkdownAsHTML';\nimport useStyleSet from '../../../hooks/useStyleSet';\nimport useShowModal from '../../../providers/ModalDialog/useShowModal';\nimport { type PropsOf } from '../../../types/PropsOf';\nimport reactNode from '../../../types/internal/reactNode';\nimport ActivityCopyButton from './ActivityCopyButton';\nimport ActivityViewCodeButton from './ActivityViewCodeButton';\nimport CitationModalContext from './CitationModalContent';\nimport MessageSensitivityLabel, { type MessageSensitivityLabelProps } from './MessageSensitivityLabel';\nimport isAIGeneratedActivity from './isAIGeneratedActivity';\nimport isBasedOnSoftwareSourceCode from './isBasedOnSoftwareSourceCode';\nimport isHTMLButtonElement from './isHTMLButtonElement';\n\nconst { useLocalizer, useStyleOptions } = hooks;\n\ntype Entry = {\n  claim?: OrgSchemaClaim | undefined;\n  handleClick?: (() => void) | undefined;\n  key: string;\n  markdownDefinition: Definition;\n  url?: string | undefined;\n};\n\nconst markdownTextContentPropsSchema = pipe(\n  object({\n    activity: custom<WebChatActivity>(() => true),\n    children: optional(reactNode()),\n    markdown: string()\n  }),\n  readonly()\n);\n\ntype MarkdownTextContentProps = InferInput<typeof markdownTextContentPropsSchema>;\n\nfunction isCitationURL(url: string): boolean {\n  return onErrorResumeNext(() => new URL(url))?.protocol === 'cite:';\n}\n\nfunction MarkdownTextContent(props: MarkdownTextContentProps) {\n  const { activity, children, markdown } = validateProps(markdownTextContentPropsSchema, props);\n\n  const [{ feedbackActionsPlacement }] = useStyleOptions();\n  const [\n    {\n      citationModalDialog: citationModalDialogStyleSet,\n      renderMarkdown: renderMarkdownStyleSet,\n      textContent: textContentStyleSet\n    }\n  ] = useStyleSet();\n  const contentRef = useRef<HTMLDivElement>(null);\n  const localize = useLocalizer();\n  const graph = useMemo(() => dereferenceBlankNodes(activity.entities || []), [activity.entities]);\n  const renderMarkdownAsHTML = useRenderMarkdownAsHTML('message activity');\n  const showModal = useShowModal();\n\n  const messageThing = useMemo(() => getOrgSchemaMessage(graph), [graph]);\n\n  const citationModalDialogLabel = localize('CITATION_MODEL_DIALOG_ALT');\n\n  if (!renderMarkdownAsHTML) {\n    throw new Error('botframework-webchat: assert failed for renderMarkdownAsHTML');\n  }\n\n  const dangerouslySetInnerHTML = useMemo(\n    () => ({ __html: markdown ? renderMarkdownAsHTML(markdown) : '' }),\n    [renderMarkdownAsHTML, markdown]\n  );\n\n  const markdownDefinitions = useMemo(\n    () => fromMarkdown(markdown).children.filter((node): node is Definition => node.type === 'definition'),\n    [markdown]\n  );\n\n  const showClaimModal = useCallback(\n    (title, text, altText) => {\n      showModal(() => <CitationModalContext headerText={title} markdown={text} />, {\n        'aria-label': altText || title || citationModalDialogLabel,\n        className: classNames('webchat__citation-modal-dialog', citationModalDialogStyleSet)\n      });\n    },\n    [citationModalDialogStyleSet, citationModalDialogLabel, showModal]\n  );\n\n  const entries = useMemo<readonly Entry[]>(\n    () =>\n      Object.freeze(\n        markdownDefinitions.map<Entry>(markdownDefinition => {\n          const messageCitation = messageThing?.citation\n            ?.map(parseClaim)\n            .find(({ position }) => '' + position === markdownDefinition.identifier);\n\n          if (messageCitation) {\n            return {\n              claim: messageCitation,\n              key: markdownDefinition.url,\n              handleClick:\n                messageCitation?.appearance && !messageCitation.appearance.url\n                  ? () =>\n                      showClaimModal(\n                        messageCitation.appearance.name ?? markdownDefinition.title,\n                        messageCitation.appearance.text,\n                        messageCitation.alternateName\n                      )\n                  : undefined,\n              markdownDefinition,\n              url: messageCitation?.appearance ? messageCitation.appearance.url : markdownDefinition.url\n            };\n          }\n\n          const rootLevelClaim = graph\n            .filter(({ type }) => type === 'https://schema.org/Claim')\n            .map(parseClaim)\n            .find(({ '@id': id }) => id === markdownDefinition.url);\n\n          if (rootLevelClaim) {\n            return {\n              claim: rootLevelClaim,\n              key: markdownDefinition.url,\n              handleClick: isCitationURL(rootLevelClaim['@id'])\n                ? () =>\n                    showClaimModal(\n                      rootLevelClaim.name ?? markdownDefinition.title,\n                      rootLevelClaim.text,\n                      rootLevelClaim.alternateName\n                    )\n                : undefined,\n              markdownDefinition\n            };\n          }\n\n          return {\n            key: markdownDefinition.url,\n            markdownDefinition,\n            url: markdownDefinition.url\n          };\n        })\n      ),\n    [graph, markdownDefinitions, messageThing, showClaimModal]\n  );\n\n  const entriesRef = useRefFrom(entries);\n\n  const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n    event => {\n      // Find out what <button> is being clicked.\n      const targetElement = event.target as HTMLElement;\n      const buttonElement: HTMLButtonElement | undefined = isHTMLButtonElement(targetElement)\n        ? targetElement\n        : (targetElement.closest('button') as HTMLButtonElement | undefined);\n\n      if (!buttonElement || !targetElement.contains(buttonElement)) {\n        return;\n      }\n\n      const entry = entriesRef.current.find(({ key }) => key === buttonElement.value);\n\n      if (entry?.handleClick) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        entry.handleClick();\n      }\n    },\n    [entriesRef]\n  );\n\n  const messageSensitivityLabelProps = useMemo<PropsOf<typeof MessageSensitivityLabel> | undefined>(() => {\n    const usageInfo = messageThing?.usageInfo;\n\n    if (usageInfo) {\n      const { pattern } = usageInfo;\n      const encryptionStatus = !!usageInfo.keywords?.find(keyword => keyword === 'encrypted-content');\n\n      return {\n        color:\n          pattern &&\n          pattern.inDefinedTermSet === 'https://www.w3.org/TR/css-color-4/' &&\n          pattern.name === 'color' &&\n          pattern.termCode,\n        isEncrypted: encryptionStatus,\n        name: usageInfo.name,\n        title: usageInfo.description\n      };\n    }\n  }, [messageThing]);\n\n  // The main text of the citation entry (e.g. the title of the document). Used as the content of the main link and, if it exists, the header of the popup window.\n  const getEntryMainText = (entry: Entry) =>\n    entry.claim?.name ?? entry.claim?.appearance?.name ?? entry.markdownDefinition.title;\n\n  // Optional alternate name for the entry, used as a subtitle beneath the link\n  const getEntryBadgeName = (entry: Entry) => entry.claim?.appearance?.usageInfo?.name;\n\n  // Secondary text describing the citation, used in the a11y description (i.e. the div's title attribute)\n  const getEntryDescription = (entry: Entry) => entry.claim?.appearance?.usageInfo?.description;\n\n  return (\n    <div\n      className={classNames('webchat__text-content', 'webchat__text-content--is-markdown', textContentStyleSet + '')}\n    >\n      <div\n        className={classNames('webchat__text-content__markdown', renderMarkdownStyleSet + '')}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={dangerouslySetInnerHTML}\n        onClick={handleClick}\n        ref={contentRef}\n      />\n      {children}\n      {!!entries.length && (\n        <LinkDefinitions<MessageSensitivityLabelProps>\n          accessoryComponentType={messageSensitivityLabelProps && MessageSensitivityLabel}\n          accessoryProps={messageSensitivityLabelProps}\n        >\n          {entries.map(entry => (\n            <LinkDefinitionItem\n              badgeName={getEntryBadgeName(entry)}\n              badgeTitle={`${getEntryBadgeName(entry) ?? ''}\\n\\n${getEntryDescription(entry) ?? ''}`.trim()}\n              identifier={entry.markdownDefinition.label}\n              key={entry.key}\n              onClick={entry.handleClick}\n              text={getEntryMainText(entry)}\n              url={entry.url}\n            />\n          ))}\n        </LinkDefinitions>\n      )}\n      <div className=\"webchat__text-content__activity-actions\">\n        {activity.type === 'message' && isBasedOnSoftwareSourceCode(messageThing) && messageThing.isBasedOn.text ? (\n          <ActivityViewCodeButton\n            className=\"webchat__text-content__activity-view-code-button\"\n            code={messageThing.isBasedOn.text}\n            isAIGenerated={isAIGeneratedActivity(activity)}\n            language={messageThing.isBasedOn.programmingLanguage}\n            title={messageThing.isBasedOn.programmingLanguage}\n          />\n        ) : null}\n        {activity.type === 'message' && activity.text && messageThing?.keywords?.includes('AllowCopy') ? (\n          <ActivityCopyButton className=\"webchat__text-content__activity-copy-button\" targetRef={contentRef} />\n        ) : null}\n        {activity.type === 'message' && feedbackActionsPlacement === 'activity-actions' && (\n          <ActivityFeedback activity={activity} />\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport default memo(MarkdownTextContent);\nexport { markdownTextContentPropsSchema, type MarkdownTextContentProps };\n","import { validateProps } from 'botframework-webchat-api/internal';\nimport classNames from 'classnames';\nimport React, { Fragment, memo } from 'react';\nimport { object, optional, pipe, readonly, string, type InferInput } from 'valibot';\n\nimport useStyleSet from '../../../hooks/useStyleSet';\nimport reactNode from '../../../types/internal/reactNode';\n\nconst plainTextContentPropsSchema = pipe(\n  object({\n    children: optional(reactNode()),\n    text: string()\n  }),\n  readonly()\n);\n\ntype PlainTextContentProps = InferInput<typeof plainTextContentPropsSchema>;\n\nfunction PlainTextContent(props: PlainTextContentProps) {\n  const { children, text } = validateProps(plainTextContentPropsSchema, props);\n\n  const [{ textContent: textContentStyleSet }] = useStyleSet();\n\n  return (\n    <Fragment>\n      {(text || '').split('\\n').map(line => (\n        <p\n          className={classNames('webchat__text-content', 'webchat__text-content--is-plain', textContentStyleSet + '')}\n          key={line}\n        >\n          {line.trim()}\n        </p>\n      ))}\n      {children && (\n        <div\n          className={classNames('webchat__text-content', 'webchat__text-content--children', textContentStyleSet + '')}\n        >\n          {children}\n        </div>\n      )}\n    </Fragment>\n  );\n}\n\nexport default memo(PlainTextContent);\nexport { plainTextContentPropsSchema, type PlainTextContentProps };\n","import { validateProps } from 'botframework-webchat-api/internal';\nimport React, { memo } from 'react';\nimport { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';\n\nimport useStyleSet from '../hooks/useStyleSet';\n\nconst htmlVideoContentPropsSchema = pipe(\n  object({\n    alt: optional(string()),\n    autoPlay: optional(boolean()),\n    loop: optional(boolean()),\n    poster: optional(string()),\n    src: string()\n  }),\n  readonly()\n);\n\ntype HTMLVideoContentProps = InferInput<typeof htmlVideoContentPropsSchema>;\n\nfunction HTMLVideoContent(props: HTMLVideoContentProps) {\n  const { alt, autoPlay = false, loop = false, poster, src } = validateProps(htmlVideoContentPropsSchema, props);\n\n  const [{ videoContent: videoContentStyleSet }] = useStyleSet();\n\n  return (\n    <video\n      aria-label={alt}\n      autoPlay={autoPlay}\n      className={videoContentStyleSet}\n      controls={true}\n      loop={loop}\n      poster={poster}\n      src={src}\n    />\n  );\n}\n\nexport default memo(HTMLVideoContent);\nexport { htmlVideoContentPropsSchema, type HTMLVideoContentProps };\n","import { hooks } from 'botframework-webchat-api';\nimport { useEffect, useMemo, useState } from 'react';\nimport type { RefObject } from 'react';\nimport type { WebChatActivity } from 'botframework-webchat-core';\n\nimport { SEND_FAILED } from '../types/internal/SendStatus';\nimport activityAltText from '../Utils/activityAltText';\nimport tabbableElements from '../Utils/tabbableElements';\nimport useRenderMarkdownAsHTML from '../hooks/useRenderMarkdownAsHTML';\nimport useValueRef from '../hooks/internal/useValueRef';\n\nenum InteractiveType {\n  LINK,\n  WIDGET\n}\n\nconst { useAvatarForBot, useGetKeyByActivity, useLocalizer, useSendStatusByActivityKey } = hooks;\n\nconst ACTIVITY_NUM_ATTACHMENTS_ALT_IDS = {\n  few: 'ACTIVITY_NUM_ATTACHMENTS_FEW_ALT',\n  many: 'ACTIVITY_NUM_ATTACHMENTS_MANY_ALT',\n  one: 'ACTIVITY_NUM_ATTACHMENTS_ONE_ALT',\n  other: 'ACTIVITY_NUM_ATTACHMENTS_OTHER_ALT',\n  two: 'ACTIVITY_NUM_ATTACHMENTS_TWO_ALT'\n};\n\n/**\n * Computes accessible name of an activity during transcript navigation.\n *\n * This text should be kept simple and short.\n *\n * Due to a bug in Safari, accessible name for active descendant must be a string but not a DOM element.\n */\nexport default function useActivityAccessibleName(activity: WebChatActivity, bodyRef: RefObject<HTMLElement>) {\n  const [{ initials: botInitials }] = useAvatarForBot();\n  const [interactiveType, setInteractiveType] = useState<InteractiveType | false>(false);\n  const [sendStatusByActivityKey] = useSendStatusByActivityKey();\n  const fromSelf = activity.from?.role === 'user';\n  const getKeyByActivity = useGetKeyByActivity();\n  const localize = useLocalizer();\n  const localizeWithPlural = useLocalizer({ plural: true });\n  const numAttachments = activity.type === 'message' ? activity.attachments?.length || 0 : 0;\n  const renderMarkdownAsHTML = useRenderMarkdownAsHTML();\n\n  /** \"Click to interact.\" */\n  const activityInteractiveFootNoteAlt = localize('ACTIVITY_INTERACTIVE_FOOTNOTE_ALT');\n  /** \"Message is interactive.\" */\n  const activityInteractiveReasonInteractiveContentAlt = localize(\n    'ACTIVITY_INTERACTIVE_REASON_INTERACTIVE_CONTENT_ALT'\n  );\n  /** \"One or more links in the message.\" */\n  const activityInteractiveReasonLinkAlt = localize('ACTIVITY_INTERACTIVE_REASON_LINK_ALT');\n  /** \"Send failed.\" */\n  const activityInteractiveReasonSendFailedAlt = localize('ACTIVITY_INTERACTIVE_REASON_SEND_FAILED_ALT');\n  const activityKey = useMemo(() => getKeyByActivity(activity), [activity, getKeyByActivity]);\n  const greetingAlt = useMemo(\n    () =>\n      (fromSelf ? localize('ACTIVITY_YOU_SAID_ALT') : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '')).replace(\n        /\\s{2,}/gu,\n        ' '\n      ),\n    [botInitials, fromSelf, localize]\n  );\n  const interactiveTypeRef = useValueRef(interactiveType);\n  const messageTextAlt = useMemo(\n    () => activityAltText(activity, renderMarkdownAsHTML),\n    [activity, renderMarkdownAsHTML]\n  );\n  const numAttachmentsAlt = useMemo(\n    () => (numAttachments ? localizeWithPlural(ACTIVITY_NUM_ATTACHMENTS_ALT_IDS, numAttachments) : ''),\n    [localizeWithPlural, numAttachments]\n  );\n\n  const isSendFailed = useMemo(\n    () => sendStatusByActivityKey.get(activityKey) === SEND_FAILED,\n    [activityKey, sendStatusByActivityKey]\n  );\n\n  const accessibleName = useMemo(\n    // We are concatenating in a single string for Safari. If we split it up, Safari will only narrate the first section.\n    () =>\n      [\n        greetingAlt,\n        messageTextAlt,\n        numAttachmentsAlt,\n        isSendFailed ? activityInteractiveReasonSendFailedAlt : '',\n        interactiveType === InteractiveType.LINK\n          ? activityInteractiveReasonLinkAlt\n          : interactiveType === InteractiveType.WIDGET\n            ? activityInteractiveReasonInteractiveContentAlt\n            : '',\n        interactiveType || isSendFailed ? activityInteractiveFootNoteAlt : ''\n      ]\n        .filter(Boolean)\n        .join(' '),\n    [\n      activityInteractiveFootNoteAlt,\n      activityInteractiveReasonInteractiveContentAlt,\n      activityInteractiveReasonLinkAlt,\n      activityInteractiveReasonSendFailedAlt,\n      greetingAlt,\n      interactiveType,\n      isSendFailed,\n      messageTextAlt,\n      numAttachmentsAlt\n    ]\n  );\n\n  useEffect(() => {\n    const hasLinks = !!bodyRef.current?.querySelector('a');\n    const hasWidgets = !!tabbableElements(bodyRef.current).length;\n\n    interactiveTypeRef.current !== hasWidgets &&\n      setInteractiveType(hasLinks ? InteractiveType.LINK : hasWidgets ? InteractiveType.WIDGET : false);\n  }, [bodyRef, interactiveTypeRef, setInteractiveType]);\n\n  return [accessibleName];\n}\n","import { hooks } from 'botframework-webchat-api';\nimport { makeCreateStyles } from 'botframework-webchat-styles';\nimport random from 'math-random';\nimport { useMemo } from 'react';\nimport CustomPropertyNames from './CustomPropertyNames';\nimport useInjectStyles from '../hooks/internal/useInjectStyles';\nimport useNonce from '../hooks/internal/useNonce';\n\nconst { useStyleOptions } = hooks;\n\nconst webchatCustomPropertiesClass = 'webchat__css-custom-properties';\n\nexport default function useCustomPropertiesClassName() {\n  const [styleOptions] = useStyleOptions();\n  const nonce = useNonce();\n\n  const [styles, classNameState] = useMemo(() => {\n    const {\n      accent,\n      avatarSize,\n      borderAnimationColor1,\n      borderAnimationColor2,\n      borderAnimationColor3,\n      bubbleAttachmentMaxWidth,\n      bubbleAttachmentMinWidth,\n      bubbleImageMaxHeight,\n      bubbleImageMinHeight,\n      bubbleMessageMaxWidth,\n      bubbleMessageMinWidth,\n      bubbleMinHeight,\n      fontSizeSmall,\n      markdownExternalLinkIconImage,\n      paddingRegular,\n      primaryFont,\n      subtle,\n      timestampColor\n    } = styleOptions;\n\n    // eslint-disable-next-line no-magic-numbers\n    const randomClass = `wc-${Math.ceil(random() * Number.MAX_SAFE_INTEGER).toString(36)}` as const;\n\n    const contents = `\n.${webchatCustomPropertiesClass}.${randomClass} {\n  display: contents;\n  ${CustomPropertyNames.BorderAnimationColor1}: ${borderAnimationColor1};\n  ${CustomPropertyNames.BorderAnimationColor2}: ${borderAnimationColor2};\n  ${CustomPropertyNames.BorderAnimationColor3}: ${borderAnimationColor3};\n  ${CustomPropertyNames.ColorAccent}: ${accent};\n  ${CustomPropertyNames.ColorSubtle}: ${subtle};\n  ${CustomPropertyNames.ColorTimestamp}: ${timestampColor || subtle};\n  ${CustomPropertyNames.FontPrimary}: ${primaryFont};\n  ${CustomPropertyNames.FontSizeSmall}: ${fontSizeSmall};\n  ${CustomPropertyNames.IconURLExternalLink}: ${markdownExternalLinkIconImage};\n  ${CustomPropertyNames.MaxHeightImageBubble}: ${bubbleImageMaxHeight}px;\n  ${CustomPropertyNames.MaxWidthAttachmentBubble}: ${bubbleAttachmentMaxWidth}px;\n  ${CustomPropertyNames.MinWidthAttachmentBubble}: ${bubbleAttachmentMinWidth}px;\n  ${CustomPropertyNames.MaxWidthMessageBubble}: ${bubbleMessageMaxWidth}px;\n  ${CustomPropertyNames.MinWidthMessageBubble}: ${bubbleMessageMinWidth}px;\n  ${CustomPropertyNames.MinHeightBubble}: ${bubbleMinHeight}px;\n  ${CustomPropertyNames.MinHeightImageBubble}: ${bubbleImageMinHeight}px;\n  ${CustomPropertyNames.PaddingRegular}: ${paddingRegular}px;\n  ${CustomPropertyNames.SizeAvatar}: ${avatarSize}px;\n}\n`;\n    const [style] = makeCreateStyles(contents)();\n\n    style.dataset.webchatInjected = 'component';\n\n    return [Object.freeze([style]), Object.freeze([`${webchatCustomPropertiesClass} ${randomClass}`] as const)];\n  }, [styleOptions]);\n\n  useInjectStyles(styles, nonce);\n\n  return classNameState;\n}\n","import type {\n  ComposerProps as APIComposerProps,\n  SendBoxMiddleware,\n  SendBoxToolbarMiddleware\n} from 'botframework-webchat-api';\nimport {\n  Composer as APIComposer,\n  hooks,\n  initSendBoxMiddleware,\n  initSendBoxToolbarMiddleware,\n  WebSpeechPonyfillFactory\n} from 'botframework-webchat-api';\nimport { DecoratorComposer, type DecoratorMiddleware } from 'botframework-webchat-api/decorator';\nimport { singleToArray } from 'botframework-webchat-core';\nimport classNames from 'classnames';\nimport MarkdownIt from 'markdown-it';\nimport PropTypes from 'prop-types';\nimport React, { memo, useCallback, useMemo, useRef, useState, type ReactNode } from 'react';\nimport { Composer as SayComposer } from 'react-say';\n\nimport createDefaultAttachmentMiddleware from './Attachment/createMiddleware';\nimport BuiltInDecorator from './BuiltInDecorator';\nimport Dictation from './Dictation';\nimport ErrorBox from './ErrorBox';\nimport {\n  speechSynthesis as bypassSpeechSynthesis,\n  SpeechSynthesisUtterance as BypassSpeechSynthesisUtterance\n} from './hooks/internal/BypassSpeechSynthesisPonyfill';\nimport { StyleToEmotionObjectComposer, useStyleToEmotionObject } from './hooks/internal/styleToEmotionObject';\nimport UITracker from './hooks/internal/UITracker';\nimport useInjectStyles from './hooks/internal/useInjectStyles';\nimport WebChatUIContext from './hooks/internal/WebChatUIContext';\nimport { FocusSendBoxScope } from './hooks/sendBoxFocus';\nimport { ScrollRelativeTranscriptScope } from './hooks/transcriptScrollRelative';\nimport createDefaultActivityMiddleware from './Middleware/Activity/createCoreMiddleware';\nimport createDefaultActivityStatusMiddleware from './Middleware/ActivityStatus/createCoreMiddleware';\nimport createDefaultAttachmentForScreenReaderMiddleware from './Middleware/AttachmentForScreenReader/createCoreMiddleware';\nimport createDefaultAvatarMiddleware from './Middleware/Avatar/createCoreMiddleware';\nimport createDefaultCardActionMiddleware from './Middleware/CardAction/createCoreMiddleware';\nimport createDefaultScrollToEndButtonMiddleware from './Middleware/ScrollToEndButton/createScrollToEndButtonMiddleware';\nimport createDefaultToastMiddleware from './Middleware/Toast/createCoreMiddleware';\nimport createDefaultTypingIndicatorMiddleware from './Middleware/TypingIndicator/createCoreMiddleware';\nimport CustomElementsComposer from './providers/CustomElements/CustomElementsComposer';\nimport HTMLContentTransformComposer from './providers/HTMLContentTransformCOR/HTMLContentTransformComposer';\nimport { type HTMLContentTransformMiddleware } from './providers/HTMLContentTransformCOR/private/HTMLContentTransformContext';\nimport SendBoxComposer from './providers/internal/SendBox/SendBoxComposer';\nimport { LiveRegionTwinComposer } from './providers/LiveRegionTwin';\nimport ModalDialogComposer from './providers/ModalDialog/ModalDialogComposer';\nimport ReducedMotionComposer from './providers/ReducedMotion/ReducedMotionComposer';\nimport useTheme from './providers/Theme/useTheme';\nimport createDefaultSendBoxMiddleware from './SendBox/createMiddleware';\nimport createDefaultSendBoxToolbarMiddleware from './SendBoxToolbar/createMiddleware';\nimport createStyleSet from './Styles/createStyleSet';\nimport useCustomPropertiesClassName from './Styles/useCustomPropertiesClassName';\nimport { type ContextOf } from './types/ContextOf';\nimport { type FocusTranscriptInit } from './types/internal/FocusTranscriptInit';\nimport addTargetBlankToHyperlinksMarkdown from './Utils/addTargetBlankToHyperlinksMarkdown';\nimport downscaleImageToDataURL from './Utils/downscaleImageToDataURL';\nimport mapMap from './Utils/mapMap';\n\nconst { useGetActivityByKey, useReferenceGrammarID, useStyleOptions, useTrackException } = hooks;\n\nconst node_env = process.env.node_env || process.env.NODE_ENV;\n\nfunction styleSetToEmotionObjects(styleToEmotionObject, styleSet) {\n  return mapMap(styleSet, (style, key) => (key === 'options' ? style : styleToEmotionObject(style)));\n}\n\ntype ComposerCoreUIProps = Readonly<{ children?: ReactNode | undefined }>;\n\nconst ROOT_STYLE = {\n  '&.webchat__css-custom-properties': {\n    '& .webchat__live-region': {\n      color: 'transparent',\n      height: 1,\n      overflow: 'hidden',\n      position: 'absolute',\n      top: 0,\n      whiteSpace: 'nowrap',\n      width: 1\n    }\n  }\n};\n\nconst ComposerCoreUI = memo(({ children }: ComposerCoreUIProps) => {\n  const [{ internalLiveRegionFadeAfter }] = useStyleOptions();\n  const [customPropertiesClassName] = useCustomPropertiesClassName();\n  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';\n  const trackException = useTrackException();\n\n  const dictationOnError = useCallback(\n    (errorEvent: SpeechRecognitionErrorEvent) => {\n      // Ignore aborted error as it is likely user clicking on the microphone button to abort recognition.\n      if (errorEvent.error !== 'aborted') {\n        const nativeError = new Error('Speech recognition failed');\n\n        nativeError.cause = errorEvent;\n\n        trackException(nativeError, false);\n        console.error(nativeError);\n      }\n    },\n    [trackException]\n  );\n\n  return (\n    <div className={classNames('webchat', 'webchat__css-custom-properties', rootClassName, customPropertiesClassName)}>\n      <CustomElementsComposer>\n        <FocusSendBoxScope>\n          <ScrollRelativeTranscriptScope>\n            <LiveRegionTwinComposer className=\"webchat__live-region\" fadeAfter={internalLiveRegionFadeAfter}>\n              <ModalDialogComposer>\n                {/* When <SendBoxComposer> is finalized, it will be using an independent instance that lives inside <BasicSendBox>. */}\n                <SendBoxComposer>\n                  {children}\n                  <Dictation onError={dictationOnError} />\n                </SendBoxComposer>\n              </ModalDialogComposer>\n            </LiveRegionTwinComposer>\n          </ScrollRelativeTranscriptScope>\n        </FocusSendBoxScope>\n      </CustomElementsComposer>\n    </div>\n  );\n});\n\nComposerCoreUI.displayName = 'ComposerCoreUI';\n\ntype ComposerCoreProps = Readonly<{\n  children?: ReactNode;\n  decoratorMiddleware?: readonly DecoratorMiddleware[] | undefined;\n  extraStyleSet?: any;\n  htmlContentTransformMiddleware?: readonly HTMLContentTransformMiddleware[] | undefined;\n  nonce?: string;\n  renderMarkdown?: (\n    markdown: string,\n    newLineOptions: { markdownRespectCRLF: boolean },\n    linkOptions: { externalLinkAlt: string }\n  ) => string;\n  styleSet?: any;\n  styles?: readonly HTMLStyleElement[];\n  suggestedActionsAccessKey?: boolean | string;\n  webSpeechPonyfillFactory?: WebSpeechPonyfillFactory;\n}>;\n\nconst ComposerCore = ({\n  children,\n  extraStyleSet,\n  nonce,\n  renderMarkdown,\n  styles,\n  styleSet,\n  suggestedActionsAccessKey,\n  webSpeechPonyfillFactory\n}: ComposerCoreProps) => {\n  const [dictateAbortable, setDictateAbortable] = useState();\n  const [referenceGrammarID] = useReferenceGrammarID();\n  const [styleOptions] = useStyleOptions();\n  const focusTranscriptCallbacksRef = useRef<((init: FocusTranscriptInit) => Promise<void>)[]>([]);\n  const internalMarkdownIt = useMemo(() => new MarkdownIt(), []);\n  const scrollToCallbacksRef = useRef([]);\n  const scrollToEndCallbacksRef = useRef([]);\n\n  const internalRenderMarkdownInline = useMemo(\n    () => markdown => {\n      const tree = internalMarkdownIt.parseInline(markdown);\n\n      // TODO: Use \"betterLink\" plugin.\n      // We should add rel=\"noopener noreferrer\" and target=\"_blank\"\n      const patchedTree = addTargetBlankToHyperlinksMarkdown(tree);\n\n      return internalMarkdownIt.renderer.render(patchedTree);\n    },\n    [internalMarkdownIt]\n  );\n\n  const styleToEmotionObject = useStyleToEmotionObject();\n\n  const patchedStyleSet = useMemo(\n    () =>\n      styleSetToEmotionObjects(styleToEmotionObject, {\n        ...(styleSet || createStyleSet(styleOptions)),\n        ...extraStyleSet\n      }),\n    [extraStyleSet, styleOptions, styleSet, styleToEmotionObject]\n  );\n\n  const webSpeechPonyfill = useMemo(() => {\n    const ponyfill = webSpeechPonyfillFactory && webSpeechPonyfillFactory({ referenceGrammarID });\n    const { speechSynthesis, SpeechSynthesisUtterance } = ponyfill || {};\n\n    return {\n      ...ponyfill,\n      speechSynthesis: speechSynthesis || bypassSpeechSynthesis,\n      SpeechSynthesisUtterance: SpeechSynthesisUtterance || BypassSpeechSynthesisUtterance\n    };\n  }, [referenceGrammarID, webSpeechPonyfillFactory]);\n\n  const scrollPositionObserversRef = useRef([]);\n\n  const dispatchScrollPosition = useCallback(\n    event => scrollPositionObserversRef.current.forEach(observer => observer(event)),\n    [scrollPositionObserversRef]\n  );\n\n  const observeScrollPosition = useCallback(\n    observer => {\n      scrollPositionObserversRef.current = [...scrollPositionObserversRef.current, observer];\n\n      return () => {\n        scrollPositionObserversRef.current = scrollPositionObserversRef.current.filter(target => target !== observer);\n      };\n    },\n    [scrollPositionObserversRef]\n  );\n\n  const transcriptFocusObserversRef = useRef([]);\n  const [numTranscriptFocusObservers, setNumTranscriptFocusObservers] = useState(0);\n\n  const getActivityByKey = useGetActivityByKey();\n\n  const dispatchTranscriptFocusByActivityKey = useMemo(() => {\n    let prevActivityKey: string | symbol | undefined = Symbol();\n\n    return activityKey => {\n      if (activityKey !== prevActivityKey) {\n        prevActivityKey = activityKey;\n\n        const event = { activity: getActivityByKey(activityKey) };\n\n        transcriptFocusObserversRef.current.forEach(observer => observer(event));\n      }\n    };\n  }, [getActivityByKey, transcriptFocusObserversRef]);\n\n  const observeTranscriptFocus = useCallback(\n    observer => {\n      transcriptFocusObserversRef.current = [...transcriptFocusObserversRef.current, observer];\n      setNumTranscriptFocusObservers(transcriptFocusObserversRef.current.length);\n\n      return () => {\n        transcriptFocusObserversRef.current = transcriptFocusObserversRef.current.filter(target => target !== observer);\n        setNumTranscriptFocusObservers(transcriptFocusObserversRef.current.length);\n      };\n    },\n    [transcriptFocusObserversRef, setNumTranscriptFocusObservers]\n  );\n\n  useInjectStyles(styles, nonce);\n\n  const context = useMemo<ContextOf<typeof WebChatUIContext>>(\n    () => ({\n      dictateAbortable,\n      dispatchScrollPosition,\n      dispatchTranscriptFocusByActivityKey,\n      focusTranscriptCallbacksRef,\n      internalMarkdownItState: [internalMarkdownIt],\n      internalRenderMarkdownInline,\n      nonce,\n      numTranscriptFocusObservers,\n      observeScrollPosition,\n      observeTranscriptFocus,\n      renderMarkdown,\n      scrollToCallbacksRef,\n      scrollToEndCallbacksRef,\n      setDictateAbortable,\n      styleSet: patchedStyleSet,\n      suggestedActionsAccessKey,\n      webSpeechPonyfill\n    }),\n    [\n      dictateAbortable,\n      dispatchScrollPosition,\n      dispatchTranscriptFocusByActivityKey,\n      focusTranscriptCallbacksRef,\n      internalMarkdownIt,\n      internalRenderMarkdownInline,\n      nonce,\n      numTranscriptFocusObservers,\n      observeScrollPosition,\n      observeTranscriptFocus,\n      patchedStyleSet,\n      renderMarkdown,\n      scrollToCallbacksRef,\n      scrollToEndCallbacksRef,\n      setDictateAbortable,\n      suggestedActionsAccessKey,\n      webSpeechPonyfill\n    ]\n  );\n\n  return (\n    <SayComposer ponyfill={webSpeechPonyfill}>\n      <WebChatUIContext.Provider value={context}>\n        <ComposerCoreUI>{children}</ComposerCoreUI>\n      </WebChatUIContext.Provider>\n    </SayComposer>\n  );\n};\n\nComposerCore.defaultProps = {\n  extraStyleSet: undefined,\n  nonce: undefined,\n  renderMarkdown: undefined,\n  styleSet: undefined,\n  suggestedActionsAccessKey: 'A a Å å',\n  webSpeechPonyfillFactory: undefined\n};\n\nComposerCore.propTypes = {\n  extraStyleSet: PropTypes.any,\n  nonce: PropTypes.string,\n  renderMarkdown: PropTypes.func,\n  styleSet: PropTypes.any,\n  suggestedActionsAccessKey: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.string]),\n  webSpeechPonyfillFactory: PropTypes.func\n};\n\ntype ComposerProps = APIComposerProps & ComposerCoreProps;\n\nconst Composer = ({\n  activityMiddleware,\n  activityStatusMiddleware,\n  attachmentForScreenReaderMiddleware,\n  attachmentMiddleware,\n  avatarMiddleware,\n  cardActionMiddleware,\n  children,\n  decoratorMiddleware,\n  extraStyleSet,\n  htmlContentTransformMiddleware,\n  renderMarkdown,\n  scrollToEndButtonMiddleware,\n  sendBoxMiddleware: sendBoxMiddlewareFromProps,\n  sendBoxToolbarMiddleware: sendBoxToolbarMiddlewareFromProps,\n  styleOptions,\n  styleSet,\n  suggestedActionsAccessKey,\n  toastMiddleware,\n  typingIndicatorMiddleware,\n  webSpeechPonyfillFactory,\n  ...composerProps\n}: ComposerProps) => {\n  const { nonce, onTelemetry } = composerProps;\n  const theme = useTheme();\n\n  const patchedActivityMiddleware = useMemo(\n    () => [...singleToArray(activityMiddleware), ...theme.activityMiddleware, ...createDefaultActivityMiddleware()],\n    [activityMiddleware, theme.activityMiddleware]\n  );\n\n  const patchedActivityStatusMiddleware = useMemo(\n    () => [\n      ...singleToArray(activityStatusMiddleware),\n      ...theme.activityStatusMiddleware,\n      ...createDefaultActivityStatusMiddleware()\n    ],\n    [activityStatusMiddleware, theme.activityStatusMiddleware]\n  );\n\n  const patchedAttachmentForScreenReaderMiddleware = useMemo(\n    () => [\n      ...singleToArray(attachmentForScreenReaderMiddleware),\n      ...theme.attachmentForScreenReaderMiddleware,\n      ...createDefaultAttachmentForScreenReaderMiddleware()\n    ],\n    [attachmentForScreenReaderMiddleware, theme.attachmentForScreenReaderMiddleware]\n  );\n\n  const patchedAttachmentMiddleware = useMemo(\n    () => [\n      ...singleToArray(attachmentMiddleware),\n      ...theme.attachmentMiddleware,\n      ...createDefaultAttachmentMiddleware()\n    ],\n    [attachmentMiddleware, theme.attachmentMiddleware]\n  );\n\n  const patchedAvatarMiddleware = useMemo(\n    () => [...singleToArray(avatarMiddleware), ...theme.avatarMiddleware, ...createDefaultAvatarMiddleware()],\n    [avatarMiddleware, theme.avatarMiddleware]\n  );\n\n  const patchedCardActionMiddleware = useMemo(\n    () => [\n      ...singleToArray(cardActionMiddleware),\n      ...theme.cardActionMiddleware,\n      ...createDefaultCardActionMiddleware()\n    ],\n    [cardActionMiddleware, theme.cardActionMiddleware]\n  );\n\n  const patchedToastMiddleware = useMemo(\n    () => [...singleToArray(toastMiddleware), ...theme.toastMiddleware, ...createDefaultToastMiddleware()],\n    [toastMiddleware, theme.toastMiddleware]\n  );\n\n  const patchedTypingIndicatorMiddleware = useMemo(\n    () => [\n      ...singleToArray(typingIndicatorMiddleware),\n      ...theme.typingIndicatorMiddleware,\n      ...createDefaultTypingIndicatorMiddleware()\n    ],\n    [typingIndicatorMiddleware, theme.typingIndicatorMiddleware]\n  );\n\n  const defaultScrollToEndButtonMiddleware = useMemo(() => createDefaultScrollToEndButtonMiddleware(), []);\n\n  const patchedScrollToEndButtonMiddleware = useMemo(\n    () => [\n      ...singleToArray(scrollToEndButtonMiddleware),\n      ...theme.scrollToEndButtonMiddleware,\n      ...defaultScrollToEndButtonMiddleware\n    ],\n    [defaultScrollToEndButtonMiddleware, scrollToEndButtonMiddleware, theme.scrollToEndButtonMiddleware]\n  );\n\n  const patchedStyleOptions = useMemo(\n    () => ({ ...theme.styleOptions, ...styleOptions }),\n    [styleOptions, theme.styleOptions]\n  );\n\n  const sendBoxMiddleware = useMemo<readonly SendBoxMiddleware[]>(\n    () =>\n      Object.freeze([\n        ...initSendBoxMiddleware(sendBoxMiddlewareFromProps, undefined),\n        ...initSendBoxMiddleware(theme.sendBoxMiddleware, undefined),\n        ...createDefaultSendBoxMiddleware()\n      ]),\n    [sendBoxMiddlewareFromProps, theme.sendBoxMiddleware]\n  );\n\n  const sendBoxToolbarMiddleware = useMemo<readonly SendBoxToolbarMiddleware[]>(\n    () =>\n      Object.freeze([\n        ...initSendBoxToolbarMiddleware(sendBoxToolbarMiddlewareFromProps, undefined),\n        ...initSendBoxToolbarMiddleware(theme.sendBoxToolbarMiddleware, undefined),\n        ...createDefaultSendBoxToolbarMiddleware()\n      ]),\n    [sendBoxToolbarMiddlewareFromProps, theme.sendBoxToolbarMiddleware]\n  );\n\n  return (\n    <APIComposer\n      activityMiddleware={patchedActivityMiddleware}\n      activityStatusMiddleware={patchedActivityStatusMiddleware}\n      attachmentForScreenReaderMiddleware={patchedAttachmentForScreenReaderMiddleware}\n      attachmentMiddleware={patchedAttachmentMiddleware}\n      avatarMiddleware={patchedAvatarMiddleware}\n      cardActionMiddleware={patchedCardActionMiddleware}\n      downscaleImageToDataURL={downscaleImageToDataURL}\n      // Under dev server of create-react-app, \"NODE_ENV\" will be set to \"development\".\n      {...(node_env === 'development' ? { internalErrorBoxClass: ErrorBox } : {})}\n      nonce={nonce}\n      scrollToEndButtonMiddleware={patchedScrollToEndButtonMiddleware}\n      sendBoxMiddleware={sendBoxMiddleware}\n      sendBoxToolbarMiddleware={sendBoxToolbarMiddleware}\n      styleOptions={patchedStyleOptions}\n      toastMiddleware={patchedToastMiddleware}\n      typingIndicatorMiddleware={patchedTypingIndicatorMiddleware}\n      {...composerProps}\n    >\n      <StyleToEmotionObjectComposer nonce={nonce}>\n        <HTMLContentTransformComposer middleware={htmlContentTransformMiddleware}>\n          <ReducedMotionComposer>\n            <BuiltInDecorator>\n              <DecoratorComposer middleware={decoratorMiddleware}>\n                <ComposerCore\n                  extraStyleSet={extraStyleSet}\n                  nonce={nonce}\n                  renderMarkdown={renderMarkdown}\n                  styleSet={styleSet}\n                  styles={theme.styles}\n                  suggestedActionsAccessKey={suggestedActionsAccessKey}\n                  webSpeechPonyfillFactory={webSpeechPonyfillFactory}\n                >\n                  {children}\n                  {onTelemetry && <UITracker />}\n                </ComposerCore>\n              </DecoratorComposer>\n            </BuiltInDecorator>\n          </ReducedMotionComposer>\n        </HTMLContentTransformComposer>\n      </StyleToEmotionObjectComposer>\n    </APIComposer>\n  );\n};\n\nComposer.defaultProps = {\n  ...APIComposer.defaultProps,\n  ...ComposerCore.defaultProps,\n  children: undefined\n};\n\nComposer.propTypes = {\n  ...APIComposer.propTypes,\n  ...ComposerCore.propTypes,\n  children: PropTypes.any\n};\n\nexport default Composer;\nexport type { ComposerProps };\n"]}