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

package/src/Attachment/Text/private/ActivityButton.module.css

@@ -1,45 +0,0 @@
-:global(.webchat) .activity-button {
-  align-items: center;
-  appearance: none;
-  background: #fff;
-  border-radius: 4px;
-  border: 1px solid #d1d1d1;
-  color: #242424;
-  display: flex;
-  gap: 4px;
-  justify-content: center;
-  padding: 5px 12px;
-
-  &:hover {
-    background: #f5f5f5;
-    border: 1px solid #c7c7c7;
-    color: #242424;
-  }
-
-  &:active {
-    background: #e0e0e0;
-    border: 1px solid #b3b3b3;
-    color: #242424;
-  }
-
-  &:focus-visible {
-    background: #fff;
-    outline: 2px solid #000;
-    outline-offset: -2px;
-  }
-
-  &[aria-disabled='true'] {
-    background: #f0f0f0;
-    border: 1px solid #e0e0e0;
-    color: #bdbdbd;
-    cursor: not-allowed;
-  }
-
-  .activity-button__icon {
-    height: 20px;
-    width: 20px;
-
-    --webchat__component-icon--color: #707070;
-    --webchat__component-icon--size: 20px;
-  }
-}

package/src/Attachment/Text/private/ActivityButton.tsx

@@ -1,71 +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, { forwardRef, memo, useCallback } from 'react';
-import { useRefFrom } from 'use-ref-from';
-import { boolean, custom, function_, is, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
-
-import { ComponentIcon, componentIconPropsSchema } from '../../../Icon';
-
-import styles from './ActivityButton.module.css';
-
-const activityButtonPropsSchema = pipe(
-  object({
-    'aria-controls': optional(string()),
-    'aria-expanded': optional(boolean()),
-    'aria-pressed': optional(boolean()),
-    children: optional(reactNode()),
-    className: optional(string()),
-    'data-testid': optional(string()),
-    disabled: optional(boolean()),
-    icon: componentIconPropsSchema.entries.icon,
-    onClick: optional(custom<() => void>(value => is(function_(), value))),
-    text: optional(string())
-  }),
-  readonly()
-);
-
-type ActivityButtonProps = InferInput<typeof activityButtonPropsSchema>;
-
-const ActivityButton = forwardRef<HTMLButtonElement, ActivityButtonProps>((props, ref) => {
-  const {
-    'aria-controls': ariaControls,
-    'aria-expanded': ariaExpanded,
-    'aria-pressed': ariaPressed,
-    children,
-    className,
-    'data-testid': dataTestId,
-    disabled,
-    icon,
-    onClick,
-    text
-  } = validateProps(activityButtonPropsSchema, props);
-
-  const classNames = useStyles(styles);
-  const onClickRef = useRefFrom(onClick);
-
-  const handleClick = useCallback(() => onClickRef.current?.(), [onClickRef]);
-
-  return (
-    <button
-      aria-controls={ariaControls}
-      aria-disabled={disabled ? 'true' : undefined}
-      aria-expanded={ariaExpanded}
-      aria-pressed={ariaPressed}
-      className={cx(classNames['activity-button'], className)}
-      data-testid={dataTestId}
-      onClick={disabled ? undefined : handleClick}
-      ref={ref}
-      // eslint-disable-next-line no-magic-numbers
-      tabIndex={disabled ? -1 : undefined}
-      type="button"
-    >
-      {icon && <ComponentIcon appearance="text" className={classNames['activity-button__icon']} icon={icon} />}
-      {text && <span className="activity-button__text">{text}</span>}
-      {children}
-    </button>
-  );
-});
-
-export default memo(ActivityButton);
-export { activityButtonPropsSchema, type ActivityButtonProps };

package/src/Attachment/Text/private/ActivityCopyButton.module.css

@@ -1,45 +0,0 @@
-:global(.webchat) .activity-copy-button {
-  overflow: clip;
-  position: relative;
-
-  @supports not (overflow: clip) {
-    overflow: hidden;
-  }
-
-  .activity-copy-button__copied-text {
-    align-items: center;
-    background-color: #fff;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    position: absolute;
-    visibility: hidden;
-    width: 100%;
-  }
-
-  &.activity-copy-button--copied {
-    .activity-copy-button__copied-text {
-      animation: webchat__activity-copy-button__copied-animation 0.7s linear;
-    }
-
-    .activity-button__icon,
-    .activity-button__text {
-      visibility: hidden;
-    }
-  }
-}
-
-:global(.webchat) .activity-copy-button__copy-announcement {
-  pointer-events: none;
-}
-
-@keyframes webchat__activity-copy-button__copied-animation {
-  0% {
-    /* This is set during the animation only hence shouldn't spill when hidden from the above tree */
-    visibility: visible;
-  }
-
-  100% {
-    visibility: unset;
-  }
-}

package/src/Attachment/Text/private/ActivityCopyButton.tsx

@@ -1,109 +0,0 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import { hooks } from 'botframework-webchat-api';
-import cx from 'classnames';
-import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { instance, nullable, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
-
-import { useQueueStaticElement } from '../../../providers/LiveRegionTwin';
-import refObject from '../../../types/internal/refObject';
-import ActivityButton from './ActivityButton';
-
-import styles from './ActivityCopyButton.module.css';
-
-const { useLocalizer, useUIState } = hooks;
-
-const activityCopyButtonPropsSchema = pipe(
-  object({
-    className: optional(string()),
-    targetRef: refObject(nullable(instance(HTMLElement)))
-  }),
-  readonly()
-);
-
-type ActivityCopyButtonProps = InferInput<typeof activityCopyButtonPropsSchema>;
-
-const ActivityCopyButton = (props: ActivityCopyButtonProps) => {
-  const { className, targetRef } = validateProps(activityCopyButtonPropsSchema, props);
-
-  const classNames = useStyles(styles);
-  const [permissionGranted, setPermissionGranted] = useState(false);
-  const [uiState] = useUIState();
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const localize = useLocalizer();
-  const queueStaticElement = useQueueStaticElement();
-
-  const copiedText = localize('COPY_BUTTON_COPIED_TEXT');
-  const copyText = localize('COPY_BUTTON_TEXT');
-  const disabled = !permissionGranted || uiState === 'disabled';
-
-  useEffect(() => {
-    const { current } = buttonRef;
-
-    if (current) {
-      const handleAnimationEnd = () =>
-        current.classList.remove(...classNames['activity-copy-button--copied'].split(/\s+/gu));
-
-      current.addEventListener('animationend', handleAnimationEnd);
-
-      return () => current.removeEventListener('animationend', handleAnimationEnd);
-    }
-  }, [buttonRef, classNames]);
-
-  const handleClick = useCallback(() => {
-    const htmlText = targetRef.current?.outerHTML;
-    const plainText = targetRef.current?.textContent;
-
-    navigator.clipboard
-      ?.write([
-        new ClipboardItem({
-          ...(htmlText ? { 'text/html': new Blob([htmlText], { type: 'text/html' }) } : {}),
-          ...(plainText ? { 'text/plain': new Blob([plainText], { type: 'text/plain' }) } : {})
-        })
-      ])
-      .catch(error => console.error(`botframework-webchat-fluent-theme: Failed to copy to clipboard.`, error));
-
-    buttonRef.current?.classList.remove(...classNames['activity-copy-button--copied'].split(/\s+/gu));
-
-    // Reading `offsetWidth` will trigger a reflow and this is critical for resetting the animation.
-    // https://css-tricks.com/restart-css-animation/#aa-update-another-javascript-method-to-restart-a-css-animation
-    buttonRef.current?.offsetWidth;
-
-    buttonRef.current?.classList.add(...classNames['activity-copy-button--copied'].split(/\s+/gu));
-
-    queueStaticElement(<div className={classNames['activity-copy-button__copy-announcement']}>{copiedText}</div>);
-  }, [classNames, copiedText, queueStaticElement, targetRef]);
-
-  useEffect(() => {
-    let unmounted = false;
-
-    (async function () {
-      if ((await navigator.permissions.query({ name: 'clipboard-write' as any })).state === 'granted') {
-        unmounted || setPermissionGranted(true);
-      }
-    })();
-
-    return () => {
-      unmounted = true;
-    };
-  }, [setPermissionGranted]);
-
-  return (
-    <ActivityButton
-      className={cx(classNames['activity-copy-button'], className)}
-      data-testid="copy button"
-      disabled={disabled}
-      icon="copy"
-      onClick={handleClick}
-      ref={buttonRef}
-      text={copyText}
-    >
-      <span className={classNames['activity-copy-button__copied-text']}>{copiedText}</span>
-    </ActivityButton>
-  );
-};
-
-ActivityCopyButton.displayName = 'ActivityCopyButton';
-
-export default memo(ActivityCopyButton);
-export { activityCopyButtonPropsSchema, type ActivityCopyButtonProps };

package/src/Attachment/Text/private/ActivityViewCodeButton.tsx

@@ -1,66 +0,0 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import { hooks } from 'botframework-webchat-api';
-import React, { memo, useCallback } from 'react';
-import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
-
-import useShowModal from '../../../providers/ModalDialog/useShowModal';
-import LocalizedString from '../../../Utils/LocalizedString';
-import ActivityButton from './ActivityButton';
-import CodeContent from './CodeContent';
-
-import styles from './ViewCodeDialog.module.css';
-
-const { useLocalizer } = hooks;
-
-const activityViewCodeButtonPropsSchema = pipe(
-  object({
-    className: optional(string()),
-    code: string(),
-    language: optional(string()),
-    isAIGenerated: boolean(),
-    title: optional(string())
-  }),
-  readonly()
-);
-
-type ActivityViewCodeButtonProps = InferInput<typeof activityViewCodeButtonPropsSchema>;
-
-const ActivityViewCodeButton = (props: ActivityViewCodeButtonProps) => {
-  const { className, code, language, title, isAIGenerated } = validateProps(activityViewCodeButtonPropsSchema, props);
-  const classNames = useStyles(styles);
-
-  const showModal = useShowModal();
-  const localize = useLocalizer();
-
-  const showCodeModal = useCallback(() => {
-    showModal(
-      () => (
-        <CodeContent code={code} language={language} title={title}>
-          {isAIGenerated && (
-            <div className={classNames['view-code-dialog__footer']}>
-              <LocalizedString linkClassName={'view-code-dialog__link'} stringIds="ACTIVITY_CODE_CAUTION" />
-            </div>
-          )}
-        </CodeContent>
-      ),
-      {
-        className: classNames['view-code-dialog'],
-        'aria-label': localize('ACTIVITY_CODE_ALT', title ?? '')
-      }
-    );
-  }, [code, isAIGenerated, language, localize, showModal, title, classNames]);
-
-  return (
-    <ActivityButton
-      className={className}
-      data-testid="view code button"
-      icon="view-code"
-      onClick={showCodeModal}
-      text={localize('VIEW_CODE_BUTTON_TEXT')}
-    />
-  );
-};
-
-export default memo(ActivityViewCodeButton);
-export { activityViewCodeButtonPropsSchema, type ActivityViewCodeButtonProps };

package/src/Attachment/Text/private/CitationModal.module.css

@@ -1,9 +0,0 @@
-:global(.webchat) .citation-modal-dialog {
-  .citation-modal-dialog__header {
-    cursor: default;
-  }
-
-  .citation-modal-dialog__body {
-    line-height: 20px;
-  }
-}

package/src/Attachment/Text/private/CodeContent.tsx

@@ -1,44 +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, { Fragment, memo } from 'react';
-import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
-
-import useCodeBlockTag from '../../../providers/CustomElements/useCodeBlockTagName';
-
-import styles from './ViewCodeDialog.module.css';
-
-const codeContentPropsSchema = pipe(
-  object({
-    children: optional(reactNode()),
-    className: optional(string()),
-    code: string(),
-    language: string(),
-    title: string()
-  }),
-  readonly()
-);
-
-type CodeContentProps = InferInput<typeof codeContentPropsSchema>;
-
-function CodeContent(props: CodeContentProps) {
-  const { children, className, code, language, title } = validateProps(codeContentPropsSchema, props);
-
-  const [, CodeBlock] = useCodeBlockTag();
-  const classNames = useStyles(styles);
-
-  return (
-    <Fragment>
-      <div className={classNames['view-code-dialog__header']}>
-        <h2 className={classNames['view-code-dialog__title']}>{title}</h2>
-      </div>
-      <CodeBlock className={cx(classNames['view-code-dialog__body'], className)} language={language}>
-        <code>{code}</code>
-      </CodeBlock>
-      {children}
-    </Fragment>
-  );
-}
-
-export default memo(CodeContent);
-export { codeContentPropsSchema, type CodeContentProps };

package/src/Attachment/Text/private/Markdownable.tsx

@@ -1,39 +0,0 @@
-import React, { memo, useMemo } from 'react';
-import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
-
-import { useRenderMarkdownAsHTML } from '../../../hooks';
-
-const markdownablePropsSchema = pipe(
-  object({
-    className: optional(string()),
-    id: optional(string()),
-    text: string()
-  }),
-  readonly()
-);
-
-type MarkdownableProps = InferInput<typeof markdownablePropsSchema>;
-
-function Markdownable({ className, id, text }: MarkdownableProps) {
-  const renderMarkdownAsHTML = useRenderMarkdownAsHTML('message activity');
-
-  const innerHTML = useMemo<Readonly<{ __html: string }> | undefined>(
-    () => Object.freeze({ __html: renderMarkdownAsHTML?.(text) }),
-    [text, renderMarkdownAsHTML]
-  );
-
-  return innerHTML ? (
-    // "id" is required for "aria-labelledby"
-    // eslint-disable-next-line react/forbid-dom-props, react/no-danger
-    <span className={className} dangerouslySetInnerHTML={innerHTML} id={id} />
-  ) : (
-    // "id" is required for "aria-labelledby"
-    // eslint-disable-next-line react/forbid-dom-props
-    <span className={className} id={id}>
-      {text}
-    </span>
-  );
-}
-
-export default memo(Markdownable);
-export { markdownablePropsSchema, type MarkdownableProps };

package/src/Attachment/Text/private/ViewCodeDialog.module.css

@@ -1,59 +0,0 @@
-:global(.webchat) .view-code-dialog {
-  box-sizing: border-box;
-  display: grid;
-  height: 100%;
-  max-height: 100vh;
-  overflow: hidden;
-  padding: 1rem;
-  place-items: center;
-}
-
-:global(.webchat) .view-code-dialog :global(.webchat__modal-dialog__box) {
-  display: flex;
-  flex-direction: column;
-  max-height: 100%;
-  max-width: 100%;
-  position: relative;
-}
-
-:global(.webchat) .view-code-dialog :global(.webchat__modal-dialog__close-button-layout) {
-  position: absolute;
-  right: 0;
-}
-
-:global(.webchat) .view-code-dialog :global(.webchat__modal-dialog__body) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--webchat__padding--regular);
-  overflow: hidden;
-}
-
-:global(.webchat) .view-code-dialog__header {
-  align-items: center;
-  display: flex;
-  padding-inline-end: 30px;
-}
-
-:global(.webchat) .view-code-dialog__title {
-  margin: 0 auto 0 0;
-  text-transform: capitalize;
-}
-
-:global(.webchat) .view-code-dialog .view-code-dialog__body {
-  border: none;
-  border-radius: 0;
-  overflow: auto;
-  height: 100%;
-}
-
-:global(.webchat) .view-code-dialog :global(.code-block__body) {
-  display: block;
-  /* TODO: align with the rest of code blocks */
-  line-height: normal;
-  padding: 16px 0;
-}
-
-:global(.webchat) .view-code-dialog__footer {
-  color: var(--webchat__color--subtle);
-  line-height: 20px;
-}

package/src/Attachment/Text/private/isAIGeneratedActivity.ts

@@ -1,5 +0,0 @@
-import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
-
-export default function isAIGeneratedActivity(activity: undefined | WebChatActivity) {
-  return !!(activity && getOrgSchemaMessage(activity?.entities || [])?.keywords.includes('AIGeneratedContent'));
-}

package/src/Avatar/ImageAvatar.tsx

@@ -1,48 +0,0 @@
-import { hooks } from 'botframework-webchat-api';
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import classNames from 'classnames';
-import React, { memo } from 'react';
-import { boolean, object, pipe, readonly, type InferInput } from 'valibot';
-
-import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
-import useStyleSet from '../hooks/useStyleSet';
-
-const { useAvatarForBot, useAvatarForUser } = hooks;
-
-const ROOT_STYLE = {
-  '& .webchat__imageAvatar__image': {
-    width: '100%',
-    height: 'auto'
-  }
-};
-
-const imageAvatarPropsSchema = pipe(
-  object({
-    fromUser: boolean()
-  }),
-  readonly()
-);
-
-type ImageAvatarProps = InferInput<typeof imageAvatarPropsSchema>;
-
-const ImageAvatar = (props: ImageAvatarProps) => {
-  const { fromUser } = validateProps(imageAvatarPropsSchema, props);
-
-  const [{ image: avatarImageForBot }] = useAvatarForBot();
-  const [{ image: avatarImageForUser }] = useAvatarForUser();
-  const [{ imageAvatar: imageAvatarStyleSet }] = useStyleSet();
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
-
-  const avatarImage = fromUser ? avatarImageForUser : avatarImageForBot;
-
-  return (
-    !!avatarImage && (
-      <div className={classNames('webchat__imageAvatar', rootClassName, imageAvatarStyleSet + '')}>
-        <img alt="" className="webchat__imageAvatar__image" src={fromUser ? avatarImageForUser : avatarImageForBot} />
-      </div>
-    )
-  );
-};
-
-export default memo(ImageAvatar);
-export { imageAvatarPropsSchema, type ImageAvatarProps };

package/src/Avatar/InitialsAvatar.tsx

@@ -1,55 +0,0 @@
-import { hooks } from 'botframework-webchat-api';
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import classNames from 'classnames';
-import React, { memo } from 'react';
-import { boolean, object, optional, pipe, readonly, type InferInput } from 'valibot';
-
-import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
-import useStyleSet from '../hooks/useStyleSet';
-
-const { useAvatarForBot, useAvatarForUser } = hooks;
-
-const ROOT_STYLE = {
-  alignItems: 'center',
-  display: 'flex',
-
-  '& .webchat__initialsAvatar__initials': {
-    justifyContent: 'center'
-  }
-};
-
-const initialsAvatarPropsSchema = pipe(
-  object({
-    fromUser: optional(boolean())
-  }),
-  readonly()
-);
-
-type InitialsAvatarProps = InferInput<typeof initialsAvatarPropsSchema>;
-
-function InitialsAvatar(props: InitialsAvatarProps) {
-  const { fromUser = false } = validateProps(initialsAvatarPropsSchema, props);
-
-  const [{ initials: avatarInitialsForBot }] = useAvatarForBot();
-  const [{ initials: avatarInitialsForUser }] = useAvatarForUser();
-  const [{ initialsAvatar: initialsAvatarStyleSet }] = useStyleSet();
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
-
-  return (
-    <div
-      className={classNames(
-        'webchat__initialsAvatar',
-        {
-          'webchat__initialsAvatar--fromUser': fromUser
-        },
-        rootClassName,
-        initialsAvatarStyleSet + ''
-      )}
-    >
-      <div className="webchat__initialsAvatar__initials">{fromUser ? avatarInitialsForUser : avatarInitialsForBot}</div>
-    </div>
-  );
-}
-
-export default memo(InitialsAvatar);
-export { initialsAvatarPropsSchema, type InitialsAvatarProps };

package/src/BuiltInDecorator.tsx

@@ -1,17 +0,0 @@
-import { LowPriorityDecoratorComposer } from 'botframework-webchat-api/internal.js';
-import React, { memo, type ReactNode } from 'react';
-
-import createDefaultActivityGroupingDecoratorMiddleware from './Middleware/ActivityGrouping/createDefaultActivityGroupingDecoratorMiddleware';
-
-const middleware = Object.freeze([...createDefaultActivityGroupingDecoratorMiddleware()] as const);
-
-type BuiltInDecoratorProps = Readonly<{
-  readonly children?: ReactNode | undefined;
-}>;
-
-function BuiltInDecorator({ children }: BuiltInDecoratorProps) {
-  return <LowPriorityDecoratorComposer middleware={middleware}>{children}</LowPriorityDecoratorComposer>;
-}
-
-export default memo(BuiltInDecorator);
-export { type BuiltInDecoratorProps };

package/src/ChatHistory/ChatHistoryBox.tsx

@@ -1,27 +0,0 @@
-import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import classNames from 'classnames';
-import React, { memo } from 'react';
-import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
-
-import { useStyleSet } from '../hooks';
-
-const chatHistoryBoxPropsSchema = pipe(
-  object({
-    children: optional(reactNode()),
-    className: optional(string())
-  }),
-  readonly()
-);
-
-type ChatHistoryBoxProps = InferInput<typeof chatHistoryBoxPropsSchema>;
-
-function ChatHistoryBox(props: ChatHistoryBoxProps) {
-  const { children, className } = validateProps(chatHistoryBoxPropsSchema, props);
-
-  const [{ chatHistoryBox }] = useStyleSet();
-
-  return <div className={classNames('webchat__chat-history-box', className, chatHistoryBox)}>{children}</div>;
-}
-
-export default memo(ChatHistoryBox);
-export { chatHistoryBoxPropsSchema, type ChatHistoryBoxProps };

package/src/ChatHistory/ChatHistoryToolbar.tsx

@@ -1,36 +0,0 @@
-import { hooks } from 'botframework-webchat-api';
-import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import classNames from 'classnames';
-import React, { memo } from 'react';
-import { object, optional, pipe, readonly, type InferInput } from 'valibot';
-
-const { useDirection } = hooks;
-
-const chatHistoryToolbarPropsSchema = pipe(
-  object({
-    children: optional(reactNode())
-  }),
-  readonly()
-);
-
-type ChatHistoryToolbarProps = InferInput<typeof chatHistoryToolbarPropsSchema>;
-
-function ChatHistoryToolbar(props: ChatHistoryToolbarProps) {
-  const { children } = validateProps(chatHistoryToolbarPropsSchema, props);
-
-  const [direction] = useDirection();
-
-  return (
-    <div
-      className={classNames(
-        'webchat__chat-history-box__toolbar',
-        direction === 'rtl' ? 'webchat__chat-history-box__toolbar--rtl' : ''
-      )}
-    >
-      {children}
-    </div>
-  );
-}
-
-export default memo(ChatHistoryToolbar);
-export { chatHistoryToolbarPropsSchema, type ChatHistoryToolbarProps };