botframework-webchat-component 4.18.1-main.20260518.2a3d1d3 → 4.18.2

package/hook.js

@@ -1,3 +0,0 @@
-// This is required for Webpack 4 which does not support named exports.
-// eslint-disable-next-line no-undef
-module.exports = require('./dist/botframework-webchat-component.hook.js');

package/src/Activity/AttachmentRow.tsx

@@ -1,56 +0,0 @@
-import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import cx from 'classnames';
-import React, { memo } from 'react';
-import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
-
-import ScreenReaderText from '../ScreenReaderText';
-import Bubble from './Bubble';
-
-import styles from './StackedLayout.module.css';
-
-const attachmentRowPropsSchema = pipe(
-  object({
-    attachedAlt: string(),
-    children: optional(reactNode()),
-    fromUser: boolean(),
-    hasAvatar: boolean(),
-    hasNub: boolean(),
-    showBubble: optional(boolean())
-  }),
-  readonly()
-);
-
-type AttachmentRowProps = InferInput<typeof attachmentRowPropsSchema>;
-
-function AttachmentRow(props: AttachmentRowProps) {
-  const {
-    attachedAlt,
-    children,
-    fromUser,
-    hasAvatar,
-    hasNub,
-    showBubble = true
-  } = validateProps(attachmentRowPropsSchema, props);
-  const classNames = useStyles(styles);
-
-  return (
-    <div aria-roledescription="attachment" className={classNames['stacked-layout__attachment-row']} role="group">
-      <ScreenReaderText text={attachedAlt} />
-      {showBubble ? (
-        <Bubble
-          className={classNames['stacked-layout__attachment']}
-          fromUser={fromUser}
-          nub={hasAvatar || hasNub ? 'hidden' : false}
-        >
-          {children}
-        </Bubble>
-      ) : (
-        <div className={cx(classNames['stacked-layout__attachment'])}>{children}</div>
-      )}
-    </div>
-  );
-}
-
-export default memo(AttachmentRow);
-export { attachmentRowPropsSchema, type AttachmentRowProps };

package/src/Activity/Bubble.module.css

@@ -1,131 +0,0 @@
-:global(.webchat) .bubble {
-  display: flex;
-  position: relative;
-
-  --webchat__bubble--background: var(--webchat__background--bubble);
-  --webchat__bubble--border-color: var(--webchat__border-color--bubble);
-  --webchat__bubble--border-radius: var(--webchat__border-radius--bubble);
-  --webchat__bubble--border-style: var(--webchat__border-style--bubble);
-  --webchat__bubble--border-width: var(--webchat__border-width--bubble);
-  --webchat__bubble--border-width: var(--webchat__border-width--bubble);
-  --webchat__bubble--color: var(--webchat__color--bubble);
-  --webchat__bubble--nub-size: var(--webchat__size--bubble-nub);
-  --webchat__bubble--nub-space: var(--webchat__space--bubble-nub);
-
-  --webchat__bubble--nub-border-radius: min(
-    var(--webchat__bubble--border-radius),
-    calc(var(--webchat__bubble--nub-space) * -1)
-  );
-  --webchat__bubble--nub-inset-block: auto calc(-1 * var(--webchat__bubble--nub-space));
-  --webchat__bubble--nub-inset-inline: calc(
-      var(--webchat__bubble--border-width) -
-      var(--webchat__bubble--nub-size) +
-      var(--webchat__padding--regular)
-    )
-    auto;
-
-  &.bubble--nub-on-top {
-    --webchat__bubble--nub-border-radius: min(var(--webchat__bubble--border-radius), var(--webchat__bubble--nub-space));
-    --webchat__bubble--nub-inset-block: var(--webchat__bubble--nub-space) auto;
-  }
-  &.bubble--from-user {
-    --webchat__bubble--background: var(--webchat__background--bubble-user);
-    --webchat__bubble--border-color: var(--webchat__border-color--bubble-user);
-    --webchat__bubble--border-radius: var(--webchat__border-radius--bubble-user);
-    --webchat__bubble--border-style: var(--webchat__border-style--bubble-user);
-    --webchat__bubble--border-width: var(--webchat__border-width--bubble-user);
-    --webchat__bubble--border-width: var(--webchat__border-width--bubble-user);
-    --webchat__bubble--color: var(--webchat__color--bubble-user);
-    --webchat__bubble--nub-size: var(--webchat__size--bubble-nub-user);
-    --webchat__bubble--nub-space: var(--webchat__space--bubble-nub-user);
-
-    --webchat__bubble--nub-inset-inline: auto
-      calc(var(--webchat__bubble--border-width) - var(--webchat__bubble--nub-size) + var(--webchat__padding--regular));
-  }
-
-  .bubble__content {
-    flex-grow: 1;
-    margin-inline: 0;
-    /* This is for hiding content outside of the bubble, for example, content outside of border radius */
-    overflow: hidden;
-    transition-duration: var(--webchat__transition-duration);
-    transition-property: margin-inline-start, margin-inline-end;
-    word-break: var(--webchat__word-break--message-activity);
-  }
-
-  .bubble__nub {
-    overflow: hidden; /* This style is for IE11 because it doesn't respect SVG viewport */
-    position: absolute;
-  }
-
-  &:dir(rtl) .bubble__nub {
-    transform: scale(-1, 1);
-  }
-
-  .bubble__nub-pad {
-    flex-shrink: 0;
-    transition-duration: var(--webchat__transition-duration);
-    transition-property: width;
-    width: 0;
-  }
-
-  &.bubble--hide-nub,
-  &.bubble--show-nub {
-    .bubble__nub-pad {
-      width: var(--webchat__padding--regular);
-    }
-  }
-
-  .bubble__content {
-    background: var(--webchat__bubble--background);
-    border-color: var(--webchat__bubble--border-color);
-    border-radius: var(--webchat__bubble--border-radius);
-    border-style: var(--webchat__bubble--border-style);
-    border-width: var(--webchat__bubble--border-width);
-    color: var(--webchat__bubble--color);
-    min-height: calc(var(--webchat__min-height--bubble) - var(--webchat__bubble--border-width) * 2);
-  }
-
-  .bubble__nub {
-    height: var(--webchat__bubble--nub-size);
-    inset-block: var(--webchat__bubble--nub-inset-block);
-    inset-inline: var(--webchat__bubble--nub-inset-inline);
-    width: var(--webchat__bubble--nub-size);
-  }
-
-  .bubble__nub-outline {
-    fill: var(--webchat__bubble--background);
-    stroke-width: var(--webchat__bubble--border-width);
-    stroke: var(--webchat__bubble--border-color);
-  }
-
-  /* Bot bubble styles (not from user) - nub on inline-start side */
-  &:not(.bubble--from-user) {
-    /* Adjust border radius when nub is shown */
-    &.bubble--show-nub {
-      &:not(.bubble--nub-on-top) .bubble__content {
-        border-end-start-radius: var(--webchat__bubble--nub-border-radius);
-      }
-
-      &.bubble--nub-on-top .bubble__content {
-        border-start-start-radius: var(--webchat__bubble--nub-border-radius);
-      }
-    }
-  }
-
-  /* User bubble styles - nub on inline-end side */
-  &.bubble--from-user {
-    flex-direction: row-reverse;
-
-    /* Adjust border radius when nub is shown */
-    &.bubble--show-nub {
-      &:not(.bubble--nub-on-top) .bubble__content {
-        border-end-end-radius: var(--webchat__bubble--nub-border-radius);
-      }
-
-      &.bubble--nub-on-top .bubble__content {
-        border-start-end-radius: var(--webchat__bubble--nub-border-radius);
-      }
-    }
-  }
-}

package/src/Activity/CarouselFilmStrip.module.css

@@ -1,155 +0,0 @@
-:global(.webchat) .carousel-filmstrip {
-  display: flex;
-  flex-direction: column;
-  -ms-overflow-style: none;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  position: relative; /* This is to keep screen reader text in the destinated area. */
-  touch-action: manipulation;
-  -webkit-overflow-scrolling: touch;
-
-  /* Browser quirks: Firefox has no way to hide scrollbar and while keeping it in function */
-  /* https://developer.mozilla.org/en-US/docs/Web/CSS/overflow */
-  @supports (-moz-appearance: none) {
-    margin-block-end: -17px;
-  }
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  .carousel-filmstrip__bubble {
-    max-width: var(--webchat__max-width--message-bubble);
-    min-width: var(--webchat__min-width--message-bubble);
-    transition-duration: var(--webchat__transition-duration);
-    transition-property: max-width;
-  }
-
-  &.carousel-filmstrip--hide-nub,
-  &.carousel-filmstrip--show-nub,
-  &.carousel-filmstrip--hide-avatar,
-  &.carousel-filmstrip--show-avatar {
-    .carousel-filmstrip__bubble {
-      max-width: calc(var(--webchat__max-width--message-bubble) + var(--webchat__padding--regular));
-    }
-  }
-
-  .carousel-filmstrip__alignment-pad {
-    flex-shrink: 0;
-    transition-duration: var(--webchat__transition-duration);
-    transition-property: width;
-    width: var(--webchat__padding--regular);
-  }
-
-  &.carousel-filmstrip--extra-trailing .carousel-filmstrip__alignment-pad {
-    width: calc(var(--webchat__padding--regular) * 2);
-  }
-
-  &:not(.carousel-filmstrip--no-message) .carousel-filmstrip__attachments {
-    margin-block-start: var(--webchat__padding--regular);
-  }
-
-  .carousel-filmstrip__attachments {
-    display: flex;
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .carousel-filmstrip__avatar {
-    flex-shrink: 0;
-  }
-
-  .carousel-filmstrip__avatar-gutter {
-    align-items: flex-end;
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
-    transition-duration: var(--webchat__transition-duration);
-    transition-property: width;
-  }
-
-  &.carousel-filmstrip--hide-avatar,
-  &.carousel-filmstrip--show-avatar {
-    .carousel-filmstrip__avatar-gutter {
-      width: var(--webchat__size--avatar);
-    }
-  }
-
-  &:not(.carousel-filmstrip--top-callout) .carousel-filmstrip__avatar-gutter {
-    justify-content: flex-end;
-  }
-
-  .carousel-filmstrip__complimentary {
-    display: flex;
-  }
-
-  .carousel-filmstrip__complimentary-content {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-  }
-
-  .carousel-filmstrip__content {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-  }
-
-  .carousel-filmstrip__filler {
-    flex-grow: 10000;
-    flex-shrink: 1;
-  }
-
-  .carousel-filmstrip__main {
-    display: flex;
-  }
-
-  .carousel-filmstrip__message {
-    display: flex;
-  }
-
-  .carousel-filmstrip__nub-pad {
-    flex-shrink: 0;
-    transition-duration: var(--webchat__transition-duration);
-    transition-property: width;
-    width: 0;
-  }
-
-  &.carousel-filmstrip--hide-avatar,
-  &.carousel-filmstrip--show-avatar,
-  &.carousel-filmstrip--hide-nub,
-  &.carousel-filmstrip--show-nub {
-    .carousel-filmstrip__nub-pad {
-      width: var(--webchat__padding--regular);
-    }
-  }
-
-  .carousel-filmstrip__status {
-    display: flex;
-  }
-
-  .carousel-filmstrip__avatar-gutter {
-    margin-inline-start: var(--webchat__padding--regular);
-  }
-
-  &.carousel-filmstrip .carousel-filmstrip__attachments {
-    margin-inline-start: calc(-1 * var(--webchat__padding--regular));
-  }
-
-  &.carousel-filmstrip--hide-avatar,
-  &.carousel-filmstrip--show-avatar {
-    .carousel-filmstrip__attachments {
-      margin-inline-start: calc(-1 * (var(--webchat__size--avatar) + var(--webchat__padding--regular) * 2));
-    }
-  }
-
-  &.carousel-filmstrip--hide-nub,
-  &.carousel-filmstrip--show-nub {
-    &:not(.carousel-filmstrip--hide-avatar.carousel-filmstrip--show-avatar) {
-      .carousel-filmstrip__attachments {
-        margin-inline-start: calc(-1 * var(--webchat__padding--regular) * 2);
-      }
-    }
-  }
-}

package/src/Activity/CarouselFilmStripAttachment.module.css

@@ -1,38 +0,0 @@
-:global(.webchat) .carousel-filmstrip-attachment {
-  max-width: var(--webchat__max-width--attachment-bubble);
-  min-width: var(--webchat__min-width--attachment-bubble);
-  padding-inline-start: var(--webchat__padding--regular);
-  transition-duration: var(--webchat__transition-duration);
-  transition-property: max-width, min-width;
-
-  &:focus {
-    outline: 0;
-  }
-
-  &:focus .carousel-filmstrip-attachment--focus {
-    border-color: var(--webchat__color--transcript-visual-keyboard-indicator);
-    border-style: var(--webchat__border-style--transcript-visual-keyboard-indicator);
-    border-width: var(--webchat__border-width--transcript-visual-keyboard-indicator);
-    box-sizing: border-box;
-    height: calc(100% - var(--webchat__border-width--transcript-visual-keyboard-indicator));
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    pointer-events: none;
-    position: absolute;
-    width: calc(100% - var(--webchat__border-width--transcript-visual-keyboard-indicator));
-  }
-
-  &.carousel-filmstrip-attachment--hide-avatar,
-  &.carousel-filmstrip-attachment--show-avatar {
-    &:first-child {
-      padding-inline-start: calc(var(--webchat__size--avatar) + var(--webchat__padding--regular) * 2);
-    }
-  }
-
-  &.carousel-filmstrip-attachment--hide-nub,
-  &.carousel-filmstrip-attachment--show-nub {
-    &:not(.carousel-filmstrip-attachment--hide-avatar.carousel-filmstrip-attachment--show-avatar):first-child {
-      padding-inline-start: calc(var(--webchat__padding--regular) * 2);
-    }
-  }
-}

package/src/Activity/CarouselLayout.module.css

@@ -1,30 +0,0 @@
-:global(.webchat) .carousel-layout {
-  overflow: hidden;
-  position: relative;
-
-  :global(.react-film__flipper) {
-    :global(.react-film__flipper__body) {
-      background-color: var(--webchat__background--transcript-overlay-button);
-      color: var(--webchat__color--transcript-overlay-button);
-      outline: 0;
-    }
-
-    &:disabled,
-    &[aria-disabled='true'] {
-      :global(.react-film__flipper__body) {
-        background-color: var(--webchat__background--transcript-overlay-button-disabled);
-        color: var(--webchat__color--transcript-overlay-button-disabled);
-      }
-    }
-
-    &:focus :global(.react-film__flipper__body) {
-      background-color: var(--webchat__background--transcript-overlay-button-focus);
-      color: var(--webchat__color--transcript-overlay-button-focus, var(--webchat__color--transcript-overlay-button));
-    }
-
-    &:hover :global(.react-film__flipper__body) {
-      background-color: var(--webchat__background--transcript-overlay-button-hover);
-      color: var(--webchat__color--transcript-overlay-button-hover, var(--webchat__color--transcript-overlay-button));
-    }
-  }
-}

package/src/Activity/CodeBlockContent.module.css

@@ -1,40 +0,0 @@
-:global(.webchat) .code-block-content {
-  border: var(--webchat__border-width--bubble) var(--webchat__border-style--bubble) var(--webchat__border-color--bubble);
-  border-radius: var(--webchat__border-radius--bubble);
-  display: block;
-  font-family: var(--webchat__font--primary);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  margin: 0 calc(var(--webchat__border-width--bubble) * -1) calc(var(--webchat__border-width--bubble) * -1);
-  overflow: hidden;
-  position: relative;
-
-  @supports (overflow: clip) {
-    overflow: clip;
-  }
-}
-
-:global(.webchat) .code-block-content__header {
-  align-items: center;
-  display: flex;
-  gap: var(--webchat__padding--regular);
-  justify-content: space-between;
-  padding: var(--webchat__padding--regular);
-}
-
-:global(.webchat) .code-block-content__title {
-  font-weight: 600;
-
-  &::first-letter {
-    text-transform: uppercase;
-  }
-}
-
-:global(.webchat) .code-block-content .code-block-content__code-block {
-  border: none;
-  margin: 0;
-  max-height: 360px;
-  overflow-y: auto;
-  padding: var(--webchat__padding--regular) 8px var(--webchat__padding--regular) var(--webchat__padding--regular);
-}

package/src/Activity/CodeBlockContent.tsx

@@ -1,42 +0,0 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import cx from 'classnames';
-import React, { memo } from 'react';
-import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
-
-import useCodeBlockTag from '../providers/CustomElements/useCodeBlockTagName';
-
-import styles from './CodeBlockContent.module.css';
-
-const codeBlockContentPropsSchema = pipe(
-  object({
-    code: string(),
-    language: optional(string()),
-    title: optional(string())
-  }),
-  readonly()
-);
-
-type CodeBlockContentProps = InferInput<typeof codeBlockContentPropsSchema>;
-
-function CodeBlockContent(props: CodeBlockContentProps) {
-  const { code, language, title } = validateProps(codeBlockContentPropsSchema, props);
-  const classNames = useStyles(styles);
-  const [, CodeBlock] = useCodeBlockTag();
-
-  return (
-    <div className={classNames['code-block-content']}>
-      {title && (
-        <div className={cx(classNames['code-block-content__header'])}>
-          <div className={cx(classNames['code-block-content__title'])}>{title}</div>
-        </div>
-      )}
-      <CodeBlock className={cx(classNames['code-block-content__code-block'])} language={language}>
-        <code>{code}</code>
-      </CodeBlock>
-    </div>
-  );
-}
-
-export default memo(CodeBlockContent);
-export { codeBlockContentPropsSchema, type CodeBlockContentProps };

package/src/Activity/CollapsibleContent.module.css

@@ -1,43 +0,0 @@
-:global(.webchat) .collapsible-content {
-  display: grid;
-
-  &[open] .collapsible-content__chevron {
-    transform: rotate(180deg);
-  }
-
-  &[open] .collapsible-content__summary {
-    margin-block-end: 0;
-  }
-}
-
-:global(.webchat) .collapsible-content__summary {
-  cursor: pointer;
-  display: inline-flex;
-  font-family: var(--webchat__font--primary);
-  gap: calc(var(--webchat__padding--regular) / 2);
-  justify-self: self-start;
-  list-style: none;
-  margin: var(--webchat__padding--regular);
-  padding: 0;
-
-  &::-webkit-details-marker {
-    display: none;
-  }
-
-  &:focus-visible {
-    outline-offset: 3px;
-  }
-}
-
-:global(.webchat) .collapsible-content__summary-text {
-  flex: auto;
-}
-
-:global(.webchat) .collapsible-content__chevron {
-  transition: transform var(--webchat__transition-duration) var(--webchat__transition-easing);
-}
-
-:global(.webchat) .collapsible-content__content {
-  display: flex;
-  flex-direction: column;
-}

package/src/Activity/CollapsibleContent.tsx

@@ -1,68 +0,0 @@
-import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import cx from 'classnames';
-import random from 'math-random';
-import React, { memo, ReactEventHandler, useCallback, useRef, useState } from 'react';
-import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
-
-import { ComponentIcon } from '../Icon';
-import styles from './CollapsibleContent.module.css';
-
-const collapsibleContentPropsSchema = pipe(
-  object({
-    children: reactNode(),
-    summary: reactNode(),
-    summaryClassName: optional(string())
-  }),
-  readonly()
-);
-
-type CollapsibleContentProps = InferInput<typeof collapsibleContentPropsSchema>;
-
-function uniqueId(count = Infinity) {
-  return (
-    random()
-      // eslint-disable-next-line no-magic-numbers
-      .toString(36)
-      // eslint-disable-next-line no-magic-numbers
-      .substring(2, 2 + count)
-  );
-}
-
-function CollapsibleContent(props: CollapsibleContentProps) {
-  const { children, summary, summaryClassName } = validateProps(collapsibleContentPropsSchema, props);
-  const [id] = useState(() => `webchat-collapsible-content-${uniqueId()}`);
-  const classNames = useStyles(styles);
-  const summaryRef = useRef<HTMLElement>(null);
-
-  const handleToggle = useCallback<ReactEventHandler<HTMLDetailsElement>>(event => {
-    const summary = summaryRef.current;
-    const details = event.target;
-    if (summary && details && details instanceof HTMLDetailsElement) {
-      const isDetailsOpen = details.open.toString();
-      summary.setAttribute('aria-expanded', isDetailsOpen);
-      summary.setAttribute('aria-pressed', isDetailsOpen);
-    }
-  }, []);
-
-  return (
-    // eslint-disable-next-line react/forbid-dom-props
-    <details className={cx(classNames['collapsible-content'])} id={id} onToggle={handleToggle}>
-      <summary
-        aria-controls={id}
-        aria-expanded="false"
-        aria-pressed="false"
-        className={cx(classNames['collapsible-content__summary'], summaryClassName)}
-        ref={summaryRef}
-        role="button"
-      >
-        {summary && <span className={classNames['collapsible-content__summary-text']}>{summary}</span>}
-        <ComponentIcon appearance="text" className={classNames['collapsible-content__chevron']} icon="chevron" />
-      </summary>
-      <div className={classNames['collapsible-content__content']}>{children}</div>
-    </details>
-  );
-}
-
-export default memo(CollapsibleContent);
-export { collapsibleContentPropsSchema, type CollapsibleContentProps };

package/src/Activity/SayAlt.module.css

@@ -1,4 +0,0 @@
-:global(.webchat) .say-alt {
-  color: Red;
-  margin: 0;
-}

package/src/Activity/SayAlt.tsx

@@ -1,25 +0,0 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import React, { memo } from 'react';
-import { literal, object, pipe, readonly, string, union, type InferInput } from 'valibot';
-
-import styles from './SayAlt.module.css';
-
-const sayAltPropsSchema = pipe(
-  object({
-    speak: union([literal(false), string()])
-  }),
-  readonly()
-);
-
-type SayAltProps = InferInput<typeof sayAltPropsSchema>;
-
-const SayAlt = (props: SayAltProps) => {
-  const { speak } = validateProps(sayAltPropsSchema, props);
-  const classNames = useStyles(styles);
-
-  return !!speak && <pre className={classNames['say-alt']}>{speak}</pre>;
-};
-
-export default memo(SayAlt);
-export { sayAltPropsSchema, type SayAltProps };