{"version":3,"file":"chatMessage.mjs","names":[],"sources":["../../../../package/common/chatMessage/chatMessage.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCheck, faCheckDouble, faCircleExclamation, faClock } from '@fortawesome/free-solid-svg-icons';\nimport type { IconDefinition } from '@fortawesome/fontawesome-svg-core';\n\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { ThemeColor } from '../themeProvider/color.types';\nimport { toneProps, useToneCheck } from '../styles/tone';\nimport { ChatMessageStatus, ChatMessageStyleType } from './chatMessage.types';\nimport type { ChatMessageLabels, ChatMessageProps } from './chatMessage.types';\nimport styles from './chatMessage.module.pcss';\n\nconst DEFAULT_LABELS: Required<ChatMessageLabels> = {\n  sending: 'Sending',\n  sent: 'Sent',\n  delivered: 'Delivered',\n  read: 'Read',\n  failed: 'Not sent',\n  you: 'You',\n};\n\n// Failed has no icon in the bubble: it is a notice under it, where it has the page's background\n// to stand out against rather than the bubble's own colour.\nconst ICON_BY_STATUS: Record<Exclude<ChatMessageStatus, ChatMessageStatus.Failed>, IconDefinition> = {\n  [ChatMessageStatus.Sending]: faClock,\n  [ChatMessageStatus.Sent]: faCheck,\n  [ChatMessageStatus.Delivered]: faCheckDouble,\n  [ChatMessageStatus.Read]: faCheckDouble,\n};\n\nconst CLASS_BY_STYLE: Record<ChatMessageStyleType, string> = {\n  [ChatMessageStyleType.Filled]: styles.chatMessageBubbleFilled,\n  [ChatMessageStyleType.Light]: styles.chatMessageBubbleLight,\n  [ChatMessageStyleType.Plain]: styles.chatMessageBubblePlain,\n};\n\n// So `actions={isFailed && <RetryButton />}` leaves no empty row behind when it is false.\nconst isShown = (node: ReactNode) => node != null && typeof node !== 'boolean' && node !== '';\n\nfunction ChatMessage(props: ChatMessageProps): ReactElement {\n  const {\n    children,\n    isOwn = false,\n    isContinued = false,\n    avatar,\n    author,\n    time,\n    status,\n    actions,\n    styleType = isOwn ? ChatMessageStyleType.Filled : ChatMessageStyleType.Light,\n    color = isOwn ? ThemeColor.Primary : ThemeColor.Neutral,\n    labels,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('ChatMessage', props);\n  const text = useLabels('ChatMessage', labels, DEFAULT_LABELS);\n  const tone = toneProps(color);\n  useToneCheck('ChatMessage', [color]);\n  const isFailed = status === ChatMessageStatus.Failed;\n  const statusIcon = status == null || isFailed ? null : ICON_BY_STATUS[status];\n  // Alignment is what tells an own message apart, and that is not read out.\n  const sender = isShown(author) ? author : isOwn ? text.you : null;\n\n  return (\n    <div\n      {...rest}\n      className={cx(\n        styles.chatMessage,\n        isOwn && styles.chatMessageOwn,\n        isContinued && styles.chatMessageContinued,\n        styleType === ChatMessageStyleType.Plain && styles.chatMessagePlain,\n        className,\n      )}\n      style={style}\n    >\n      {isShown(avatar) && (\n        <div className={cx(styles.chatMessageAvatar, classNames?.avatar)} style={slotStyles?.avatar}>\n          {avatar}\n        </div>\n      )}\n      <div className={cx(styles.chatMessageBody, classNames?.body)} style={slotStyles?.body}>\n        {sender != null && (\n          <div\n            className={cx(\n              styles.chatMessageAuthor,\n              (isContinued || !isShown(author)) && styles.chatMessageAuthorHidden,\n              classNames?.author,\n            )}\n            style={slotStyles?.author}\n          >\n            {sender}\n          </div>\n        )}\n        <div\n          className={cx(styles.chatMessageBubble, tone.className, CLASS_BY_STYLE[styleType], classNames?.bubble)}\n          style={{ ...tone.style, ...slotStyles?.bubble }}\n        >\n          <div className={cx(styles.chatMessageContent, typeof children === 'string' && styles.chatMessageContentText)}>\n            {children}\n          </div>\n          {(isShown(time) || statusIcon) && (\n            <span className={cx(styles.chatMessageMeta, classNames?.meta)} style={slotStyles?.meta}>\n              {time}\n              {status != null && statusIcon && (\n                <span\n                  role='img'\n                  aria-label={text[status]}\n                  className={cx(\n                    styles.chatMessageStatus,\n                    status === ChatMessageStatus.Read && styles.chatMessageStatusRead,\n                  )}\n                >\n                  <FontAwesomeIcon icon={statusIcon} />\n                </span>\n              )}\n            </span>\n          )}\n        </div>\n        {(isFailed || isShown(actions)) && (\n          <div className={cx(styles.chatMessageActions, classNames?.actions)} style={slotStyles?.actions}>\n            {isFailed && (\n              <span className={styles.chatMessageFailed}>\n                <FontAwesomeIcon icon={faCircleExclamation} className={styles.chatMessageFailedIcon} />\n                {text.failed}\n              </span>\n            )}\n            {actions}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport default ChatMessage;\n"],"mappings":"0pBAaA,IAAM,EAA8C,CAClD,QAAS,UACT,KAAM,OACN,UAAW,YACX,KAAM,OACN,OAAQ,WACR,IAAK,KACP,EAIM,EAA+F,EAClG,EAAkB,SAAU,GAC5B,EAAkB,MAAO,GACzB,EAAkB,WAAY,GAC9B,EAAkB,MAAO,CAC5B,EAEM,EAAuD,EAC1D,EAAqB,QAAS,EAAO,yBACrC,EAAqB,OAAQ,EAAO,wBACpC,EAAqB,OAAQ,EAAO,sBACvC,EAGM,EAAW,GAAoB,GAAQ,MAAQ,OAAO,GAAS,WAAa,IAAS,GAE3F,SAAS,EAAY,EAAuC,CAC1D,GAAM,CACJ,WACA,QAAQ,GACR,cAAc,GACd,SACA,SACA,OACA,SACA,UACA,YAAY,EAAQ,EAAqB,OAAS,EAAqB,MACvE,QAAQ,EAAQ,EAAW,QAAU,EAAW,QAChD,SACA,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,cAAe,CAAK,EACvC,EAAO,EAAU,cAAe,EAAQ,CAAc,EACtD,EAAO,EAAU,CAAK,EAC5B,EAAa,cAAe,CAAC,CAAK,CAAC,EACnC,IAAM,EAAW,IAAW,EAAkB,OACxC,EAAa,GAAU,MAAQ,EAAW,KAAO,EAAe,GAEhE,EAAS,EAAQ,CAAM,EAAI,EAAS,EAAQ,EAAK,IAAM,KAE7D,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,YACP,GAAS,EAAO,eAChB,GAAe,EAAO,qBACtB,IAAc,EAAqB,OAAS,EAAO,iBACnD,CACF,EACO,QATT,SAAA,CAWG,EAAQ,CAAM,GACb,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,kBAAmB,GAAY,MAAM,EAAG,MAAO,GAAY,OAClF,SAAA,CACE,CAAA,EAEP,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,gBAAiB,GAAY,IAAI,EAAG,MAAO,GAAY,KAAjF,SAAA,CACG,GAAU,MACT,EAAC,MAAD,CACE,UAAW,EACT,EAAO,mBACN,GAAe,CAAC,EAAQ,CAAM,IAAM,EAAO,wBAC5C,GAAY,MACd,EACA,MAAO,GAAY,OAElB,SAAA,CACE,CAAA,EAEP,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,kBAAmB,EAAK,UAAW,EAAe,GAAY,GAAY,MAAM,EACrG,MAAO,CAAE,GAAG,EAAK,MAAO,GAAG,GAAY,MAAO,EAFhD,SAAA,CAIE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,mBAAoB,OAAO,GAAa,UAAY,EAAO,sBAAsB,EACxG,UACE,CAAA,GACH,EAAQ,CAAI,GAAK,IACjB,EAAC,OAAD,CAAM,UAAW,EAAG,EAAO,gBAAiB,GAAY,IAAI,EAAG,MAAO,GAAY,KAAlF,SAAA,CACG,EACA,GAAU,MAAQ,GACjB,EAAC,OAAD,CACE,KAAK,MACL,aAAY,EAAK,GACjB,UAAW,EACT,EAAO,kBACP,IAAW,EAAkB,MAAQ,EAAO,qBAC9C,EAEA,SAAA,EAAC,EAAD,CAAiB,KAAM,CAAa,CAAA,CAChC,CAAA,CAEJ,CAEL,CAAA,CAAA,KACH,GAAY,EAAQ,CAAO,IAC3B,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,mBAAoB,GAAY,OAAO,EAAG,MAAO,GAAY,QAAvF,SAAA,CACG,GACC,EAAC,OAAD,CAAM,UAAW,EAAO,kBAAxB,SAAA,CACE,EAAC,EAAD,CAAiB,KAAM,EAAqB,UAAW,EAAO,qBAAwB,CAAA,EACrF,EAAK,MACF,CAEP,CAAA,EAAA,CACE,GAEJ,CACF,CAAA,CAAA,GAET"}