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

package/src/providers/CustomElements/customElements/CodeBlock.ts

@@ -1,230 +0,0 @@
-/* eslint-disable class-methods-use-this */
-import { hooks } from 'botframework-webchat-api';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import { ReactNode, useMemo, useRef } from 'react';
-
-import { useCodeHighlighter } from '../../../hooks/internal/codeHighlighter';
-import { defaultHighlightCode, HighlightCodeFn } from '../../../hooks/internal/codeHighlighter/index';
-import parseDocumentFragmentFromString from '../../../Utils/parseDocumentFragmentFromString';
-
-import styles from './CodeBlock.module.css';
-
-const { useStyleOptions, useLocalizer } = hooks;
-
-class CodeBlock extends HTMLElement {
-  static observedAttributes = ['theme', 'language'];
-
-  copyButtonElement: HTMLElement;
-
-  #connected = false;
-  #originalFragment: DocumentFragment = undefined;
-  #updateTask?: Promise<void>;
-
-  get code() {
-    return this.querySelector('code')?.textContent ?? '';
-  }
-
-  get theme() {
-    return this.getAttribute('theme');
-  }
-
-  set theme(value: string) {
-    this.setAttribute('theme', value);
-  }
-
-  get language() {
-    return this.getAttribute('language');
-  }
-  set language(value: string) {
-    this.setAttribute('language', value);
-  }
-
-  get options() {
-    const { theme } = this;
-    return theme ? { theme } : undefined;
-  }
-
-  connectedCallback() {
-    this.#connected = true;
-    this.scheduleUpdate();
-  }
-
-  disconnectedCallback() {
-    this.#connected = false;
-  }
-
-  attributeChangedCallback(_name: string, oldValue: string, newValue: string) {
-    const updated = !Object.is(oldValue, newValue);
-
-    this.#connected && updated && this.scheduleUpdate();
-  }
-
-  scheduleUpdate() {
-    if (this.#updateTask) {
-      return;
-    }
-
-    this.#updateTask = Promise.resolve().then(() => {
-      this.#updateTask = undefined;
-      this.update();
-    });
-  }
-
-  update() {
-    const { code, language, options, ownerDocument: document } = this;
-
-    if (!code) {
-      return;
-    }
-
-    if (!this.#originalFragment) {
-      this.#originalFragment = document.createDocumentFragment();
-      this.#originalFragment.replaceChildren(...this.children);
-    }
-
-    const result = this.highlightCode(code, language, options);
-    const highlightedCodeFragment =
-      result instanceof DocumentFragment ? result : parseDocumentFragmentFromString(result);
-
-    highlightedCodeFragment.insertBefore(this.copyButtonElement, highlightedCodeFragment.firstChild);
-
-    this.replaceChildren(highlightedCodeFragment);
-
-    if (this.copyButtonElement) {
-      this.copyButtonElement.dataset.value = code;
-    }
-  }
-
-  highlightCode(...args: Parameters<HighlightCodeFn>) {
-    return defaultHighlightCode(...args);
-  }
-}
-
-export type CodeBlockProps = Readonly<{
-  children?: ReactNode | undefined;
-  className?: string | undefined;
-  language?: string | undefined;
-  theme?: string | undefined;
-}>;
-
-type CodeBlockReactProps = Readonly<{
-  codeBlockTheme: 'github-light-default' | 'github-dark-default';
-  copyButtonAltCopied: string;
-  copyButtonAltCopy: string;
-  copyButtonTagName: string;
-  highlightCode: HighlightCodeFn;
-}>;
-
-const useCodeBlockProps = (copyButtonTagName: string) => {
-  const highlightCode = useCodeHighlighter();
-  const localize = useLocalizer();
-  const [{ codeBlockTheme }] = useStyleOptions();
-  const copyButtonAltCopied = localize('COPY_BUTTON_COPIED_TEXT');
-  const copyButtonAltCopy = localize('COPY_BUTTON_TEXT');
-  const propsChangedEventTarget = useMemo<EventTarget>(() => new EventTarget(), []);
-  const propsRef = useRef<CodeBlockReactProps>();
-
-  useMemo(() => {
-    propsRef.current = Object.freeze({
-      codeBlockTheme,
-      copyButtonAltCopied,
-      copyButtonAltCopy,
-      copyButtonTagName,
-      highlightCode
-    });
-
-    propsChangedEventTarget.dispatchEvent(new CustomEvent('change'));
-  }, [
-    codeBlockTheme,
-    copyButtonAltCopied,
-    copyButtonAltCopy,
-    copyButtonTagName,
-    highlightCode,
-    propsChangedEventTarget
-  ]);
-
-  return useMemo(
-    () => Object.freeze([propsChangedEventTarget, propsRef] as const),
-    [propsChangedEventTarget, propsRef]
-  );
-};
-
-export default function useReactCodeBlockClass(copyButtonTagName: string): typeof HTMLElement {
-  const [codeBlockTarget, codeBlockPropsRef] = useCodeBlockProps(copyButtonTagName);
-
-  const classNames = useStyles(styles);
-
-  return useMemo<typeof HTMLElement>(
-    () =>
-      class ReactCodeBlock extends CodeBlock {
-        static observedAttributes = CodeBlock.observedAttributes;
-
-        #prevProps: CodeBlockReactProps | undefined;
-
-        get #props() {
-          return codeBlockPropsRef.current;
-        }
-
-        #handlePropsChange = () => {
-          const props = this.#props;
-          const prevProps = this.#prevProps;
-
-          this.#prevProps = props;
-
-          this.setAttribute('theme', props.codeBlockTheme);
-
-          if (prevProps?.highlightCode !== props.highlightCode) {
-            this.scheduleUpdate();
-          }
-
-          if (prevProps?.copyButtonTagName !== props.copyButtonTagName || !this.copyButtonElement) {
-            const { ownerDocument: document } = this;
-
-            this.copyButtonElement = document.createElement(props.copyButtonTagName);
-            this.scheduleUpdate();
-          }
-
-          this.copyButtonElement.dataset.altCopy = props.copyButtonAltCopy;
-          this.copyButtonElement.dataset.altCopied = props.copyButtonAltCopied;
-        };
-
-        connectedCallback(): void {
-          this.classList.add(...classNames['code-block'].split(/\s+/gu));
-          codeBlockTarget.addEventListener('change', this.#handlePropsChange);
-
-          this.#handlePropsChange();
-          super.connectedCallback();
-        }
-
-        update(): void {
-          super.update();
-
-          const body = this.querySelector('pre');
-          body?.classList.add(...classNames['code-block__body'].split(/\s+/gu));
-
-          const theme = this.options?.theme;
-          theme &&
-            body?.classList.add(
-              ...(classNames[`code-block__theme--${theme}`] ?? `code-block__theme--${theme}`).split(/\s+/gu)
-            );
-        }
-
-        disconnectedCallback(): void {
-          codeBlockTarget.removeEventListener('change', this.#handlePropsChange);
-
-          super.disconnectedCallback();
-        }
-
-        highlightCode(...args: Parameters<HighlightCodeFn>) {
-          const [, language, options] = args;
-
-          if (!language || !options) {
-            return defaultHighlightCode(...args);
-          }
-
-          return this.#props.highlightCode(...args);
-        }
-      },
-    [classNames, codeBlockPropsRef, codeBlockTarget]
-  );
-}

package/src/providers/CustomElements/customElements/CodeBlockCopyButton.module.css

@@ -1,63 +0,0 @@
-:global(.webchat) .code-block-copy-button {
-  align-items: center;
-  appearance: none;
-  background: #fff;
-  border-radius: 4px;
-  border: 1px solid #d1d1d1;
-  color: #242424;
-  display: grid;
-  float: right; /* Use "inline-end" after we update Chromium in Docker */
-  gap: 4px;
-  justify-content: center;
-  margin-inline-start: var(--webchat__padding--regular);
-  padding: 3px;
-}
-
-:global(.webchat) .code-block-copy-button:hover {
-  background: #f5f5f5;
-  border: 1px solid #c7c7c7;
-  color: #242424;
-}
-
-:global(.webchat) .code-block-copy-button:active {
-  background: #e0e0e0;
-  border: 1px solid #b3b3b3;
-  color: #242424;
-}
-
-:global(.webchat) .code-block-copy-button:focus-visible {
-  background: #fff;
-  outline: 2px solid #000;
-  outline-offset: -2px;
-}
-
-:global(.webchat) .code-block-copy-button[aria-disabled='true'] {
-  background: #f0f0f0;
-  border: 1px solid #e0e0e0;
-  color: #bdbdbd;
-  cursor: not-allowed;
-}
-
-:global(.webchat) .code-block-copy-button__icon {
-  grid-column: 1;
-  grid-row: 1;
-  --webchat__component-icon--color: #707070;
-  --webchat__component-icon--size: 16px;
-}
-
-:global(.webchat) .code-block-copy-button__icon--copied {
-  opacity: 0;
-}
-
-:global(.webchat) .code-block-copy-button--copied .code-block-copy-button__icon {
-  animation: code-block-copy-button__copied-animation 0.5s linear;
-}
-
-@keyframes code-block-copy-button__copied-animation {
-  0% {
-    opacity: 100%;
-  }
-  100% {
-    opacity: unset;
-  }
-}

package/src/providers/CustomElements/customElements/CodeBlockCopyButton.tsx

@@ -1,108 +0,0 @@
-import cx from 'classnames';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import React, { memo, useCallback, useState } from 'react';
-import { useRefFrom } from 'use-ref-from';
-import { useStateWithRef } from 'use-state-with-ref';
-
-import { ComponentIcon } from '../../../Icon';
-import testIds from '../../../testIds';
-import wrapAsCustomElement from './wrapAsCustomElement';
-
-import styles from './CodeBlockCopyButton.module.css';
-
-export type CodeBlockCopyButtonProps = Readonly<{
-  className: string;
-  'data-alt-copied': string;
-  'data-alt-copy': string;
-  'data-value': string;
-}>;
-
-const CodeBlockCopyButton = memo(
-  ({
-    className,
-    'data-alt-copied': copiedAlt,
-    'data-alt-copy': copyAlt,
-    'data-value': value
-  }: CodeBlockCopyButtonProps) => {
-    const classNames = useStyles(styles);
-    const [disabled, setDisabled, disabledRef] = useStateWithRef(false);
-    const [pressed, setPressed] = useState(false);
-    const valueRef = useRefFrom(value);
-
-    const handleClick = useCallback(() => {
-      if (disabledRef.current) {
-        return;
-      }
-
-      let obsoleted = false;
-
-      (async () => {
-        try {
-          const { state } = await navigator.permissions.query({ name: 'clipboard-write' as any });
-
-          if (!obsoleted) {
-            if (state === 'granted') {
-              await navigator.clipboard?.write([
-                new ClipboardItem({ 'text/plain': new Blob([valueRef.current], { type: 'text/plain' }) })
-              ]);
-
-              obsoleted || setPressed(true);
-            } else if (state === 'denied') {
-              setDisabled(true);
-            }
-          }
-        } catch (error) {
-          console.warn('botframework-webchat: Failed to copy code block to clipboard.', error);
-        }
-      })();
-
-      return () => {
-        obsoleted = true;
-      };
-    }, [disabledRef, setDisabled, setPressed, valueRef]);
-
-    const handleAnimationEnd = useCallback(() => setPressed(false), [setPressed]);
-
-    return (
-      <button
-        aria-disabled={disabled}
-        aria-live="assertive"
-        aria-pressed={pressed ? 'true' : undefined}
-        className={cx(className, classNames['code-block-copy-button'], {
-          [classNames['code-block-copy-button--copied']]: pressed
-        })}
-        data-testid={testIds.codeBlockCopyButton}
-        onAnimationEnd={handleAnimationEnd}
-        onClick={handleClick}
-        type="button"
-      >
-        <ComponentIcon
-          aria-hidden={pressed ? 'true' : undefined}
-          aria-label={copyAlt}
-          className={cx(classNames['code-block-copy-button__icon'], classNames['code-block-copy-button__icon--copy'])}
-          icon={pressed ? 'copy-code-checkmark' : 'copy-code'}
-          role="img"
-        />
-        <div
-          aria-hidden={pressed ? undefined : 'true'}
-          aria-label={copiedAlt}
-          className={cx(classNames['code-block-copy-button__icon'], classNames['code-block-copy-button__icon--copied'])}
-          role="img"
-        />
-      </button>
-    );
-  }
-);
-
-CodeBlockCopyButton.displayName = 'CodeBlockCopyButton';
-
-const CodeBlockCopyButtonElement = wrapAsCustomElement(CodeBlockCopyButton, [
-  'className',
-  'data-alt-copied',
-  'data-alt-copy',
-  'data-value'
-]);
-
-export default CodeBlockCopyButton;
-
-export { CodeBlockCopyButtonElement };

package/src/providers/CustomElements/customElements/wrapAsCustomElement.ts

@@ -1,85 +0,0 @@
-import { createElement, type ComponentType } from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
-
-const ConnectionState = {
-  DISCONNECTED: 0,
-  CONNECTED: 1,
-  PENDING: 2
-};
-
-export default function wrapAsCustomElement<Props extends { [key: string]: string | undefined } & { children?: never }>(
-  component: ComponentType<Props>,
-  propKeys: (keyof Props)[]
-): typeof HTMLElement {
-  type AttributeName = keyof { [K in keyof Props as K extends 'className' ? 'class' : K]: Props[K] } & string;
-
-  const attributeNames = propKeys.map(key => (key === 'className' ? 'class' : key)) as AttributeName[];
-
-  return class ReactWrapper extends HTMLElement {
-    static get observedAttributes(): string[] {
-      return attributeNames;
-    }
-
-    #connected = ConnectionState.DISCONNECTED;
-
-    constructor() {
-      super();
-
-      const propMap = (this.#propMap = new Map<keyof Props, null | string | undefined>());
-
-      for (const key of attributeNames) {
-        const value = this.getAttribute(key);
-
-        typeof value === 'string' && propMap.set(key === 'class' ? 'className' : key, value);
-      }
-    }
-
-    #propMap: Map<keyof Props, string>;
-
-    #getProps(): Props {
-      const propEntries: [keyof Props, string][] = Array.from<[keyof Props, string]>(this.#propMap.entries());
-
-      return Object.freeze(Object.fromEntries(propEntries) as Props);
-    }
-
-    attributeChangedCallback(name: AttributeName, _oldValue: string, newValue: string) {
-      if (name === 'class') {
-        name = 'className';
-      }
-
-      const prevProps = new Map(this.#propMap);
-
-      if (typeof newValue === 'string') {
-        this.#propMap.set(name, newValue);
-      } else {
-        this.#propMap.delete(name);
-      }
-
-      const areEqual =
-        prevProps.size === this.#propMap.size &&
-        Array.from(new Set(prevProps.keys()).union(new Set(this.#propMap))).every((key: string) =>
-          Object.is(prevProps.get(key), this.#propMap.get(key))
-        );
-
-      // For every attribute change, browser will call this function again. It is not batched.
-      !areEqual &&
-        this.#connected === ConnectionState.CONNECTED &&
-        render(createElement(component, this.#getProps()), this);
-    }
-
-    connectedCallback() {
-      this.#connected !== ConnectionState.PENDING && render(createElement(component, this.#getProps()), this);
-      this.#connected = ConnectionState.CONNECTED;
-    }
-
-    async disconnectedCallback() {
-      this.#connected = ConnectionState.PENDING;
-      await Promise.resolve();
-      if (this.#connected === ConnectionState.PENDING) {
-        this.#connected = ConnectionState.DISCONNECTED;
-        unmountComponentAtNode(this);
-        this.replaceChildren();
-      }
-    }
-  };
-}

package/src/providers/CustomElements/private/CustomElementsContext.ts

@@ -1,15 +0,0 @@
-import { createContext } from 'react';
-
-export type CustomElementsContextType = Readonly<{ codeBlockTagName: string; codeBlockCopyButtonTagName: string }>;
-
-const CustomElementsContext = createContext<CustomElementsContextType>(
-  new Proxy({} as CustomElementsContextType, {
-    get() {
-      throw new Error('botframework-webchat: Cannot use this hook outside of <CustomElementsComposer>.');
-    }
-  })
-);
-
-CustomElementsContext.displayName = 'CustomElementsContext';
-
-export default CustomElementsContext;

package/src/providers/CustomElements/private/useCustomElementsContext.ts

@@ -1,6 +0,0 @@
-import { useContext } from 'react';
-import CustomElementsContext, { type CustomElementsContextType } from './CustomElementsContext';
-
-export default function useCustomElementsContext(): CustomElementsContextType {
-  return useContext(CustomElementsContext);
-}

package/src/providers/CustomElements/useCodeBlockCopyButtonTagName.ts

@@ -1,8 +0,0 @@
-import { useMemo } from 'react';
-import useCustomElementsContext from './private/useCustomElementsContext';
-
-export default function useCodeBlockCopyButtonTagName(): readonly [string] {
-  const { codeBlockCopyButtonTagName } = useCustomElementsContext();
-
-  return useMemo(() => Object.freeze([codeBlockCopyButtonTagName]), [codeBlockCopyButtonTagName]);
-}

package/src/providers/CustomElements/useCodeBlockTagName.ts

@@ -1,19 +0,0 @@
-import { createElement, memo, useMemo } from 'react';
-
-import { CodeBlockProps } from './customElements/CodeBlock';
-import useCustomElementsContext from './private/useCustomElementsContext';
-
-export default function useCodeBlockTag() {
-  const { codeBlockTagName } = useCustomElementsContext();
-
-  return useMemo(
-    () =>
-      Object.freeze([
-        codeBlockTagName,
-        memo((props: CodeBlockProps) =>
-          createElement(codeBlockTagName, { ...props, class: props.className, className: undefined })
-        )
-      ] as const),
-    [codeBlockTagName]
-  );
-}

package/src/providers/GroupedRenderingActivities/GroupedRenderingActivities.ts

@@ -1,10 +0,0 @@
-import { type WebChatActivity } from 'botframework-webchat-core';
-
-type GroupedRenderingActivities = Readonly<{
-  activities: readonly WebChatActivity[];
-  children: readonly GroupedRenderingActivities[];
-  key: string;
-  groupingName: string | undefined;
-}>;
-
-export { type GroupedRenderingActivities };

package/src/providers/GroupedRenderingActivities/GroupedRenderingActivitiesComposer.tsx

@@ -1,87 +0,0 @@
-import { hooks } from 'botframework-webchat-api';
-import { type WebChatActivity } from 'botframework-webchat-core';
-import { reactNode } from '@msinternal/botframework-webchat-react-valibot';
-import React, { memo, useMemo } from 'react';
-import { object, optional, parse, pipe, readonly, type InferOutput } from 'valibot';
-
-import useRenderingActivities from '../RenderingActivities/useRenderingActivities';
-import { type GroupedRenderingActivities } from './GroupedRenderingActivities';
-import GroupedRenderingActivitiesContext, {
-  type GroupedRenderingActivitiesContextType
-} from './private/GroupedRenderingActivitiesContext';
-
-const { useGetKeyByActivity, useGroupActivitiesByName, useStyleOptions } = hooks;
-
-const groupedRenderingActivitiesComposerPropsSchema = pipe(
-  object({
-    children: optional(reactNode())
-  }),
-  readonly()
-);
-
-type GroupedRenderingActivitiesComposerProps = InferOutput<typeof groupedRenderingActivitiesComposerPropsSchema>;
-
-const GroupedRenderingActivitiesComposer = (props: GroupedRenderingActivitiesComposerProps) => {
-  const { children } = parse(groupedRenderingActivitiesComposerPropsSchema, props);
-
-  const [{ groupActivitiesBy }] = useStyleOptions();
-  const [activities] = useRenderingActivities();
-  const getKeyByActivity = useGetKeyByActivity();
-  const groupActivitiesByName = useGroupActivitiesByName();
-
-  const numRenderingActivitiesState = useMemo<readonly [number]>(
-    () => Object.freeze([activities.length] as const),
-    [activities]
-  );
-
-  const groupedRenderingActivitiesState = useMemo<readonly [readonly GroupedRenderingActivities[]]>(() => {
-    const run = (
-      activities: readonly WebChatActivity[],
-      groups: readonly string[]
-    ): readonly GroupedRenderingActivities[] => {
-      const [name, ...nextNames] = groups;
-
-      if (typeof name === 'undefined') {
-        return Object.freeze([
-          Object.freeze({
-            activities,
-            children: Object.freeze([]),
-            key: getKeyByActivity(activities[0]),
-            groupingName: undefined
-          })
-        ]);
-      }
-
-      return Object.freeze(
-        groupActivitiesByName(activities, name).map(grouping =>
-          Object.freeze({
-            activities: grouping,
-            children: run(grouping, nextNames),
-            groupingName: name,
-            key: getKeyByActivity(grouping[0])
-          } satisfies GroupedRenderingActivities)
-        )
-      );
-    };
-
-    return Object.freeze([run(activities, groupActivitiesBy)]);
-  }, [activities, getKeyByActivity, groupActivitiesBy, groupActivitiesByName]);
-
-  const context = useMemo<GroupedRenderingActivitiesContextType>(
-    () =>
-      Object.freeze({
-        groupedRenderingActivitiesState,
-        numRenderingActivitiesState
-      }),
-    [groupedRenderingActivitiesState, numRenderingActivitiesState]
-  );
-
-  return (
-    <GroupedRenderingActivitiesContext.Provider value={context}>{children}</GroupedRenderingActivitiesContext.Provider>
-  );
-};
-
-GroupedRenderingActivitiesComposer.displayName = 'GroupedRenderingActivitiesComposer';
-
-export default memo(GroupedRenderingActivitiesComposer);
-export { type GroupedRenderingActivitiesComposerProps };

package/src/providers/GroupedRenderingActivities/private/GroupedRenderingActivitiesContext.ts

@@ -1,14 +0,0 @@
-import createContextAndHook from '../../createContextAndHook';
-import { type GroupedRenderingActivities } from '../GroupedRenderingActivities';
-
-type GroupedRenderingActivitiesContextType = Readonly<{
-  groupedRenderingActivitiesState: readonly [readonly GroupedRenderingActivities[]];
-  numRenderingActivitiesState: readonly [number];
-}>;
-
-const { contextComponentType, useContext } = createContextAndHook<GroupedRenderingActivitiesContextType>(
-  'GroupedRenderingActivitiesContext'
-);
-
-export default contextComponentType;
-export { useContext as useGroupedRenderingActivitiesContext, type GroupedRenderingActivitiesContextType };

package/src/providers/GroupedRenderingActivities/private/group.spec.ts

@@ -1,31 +0,0 @@
-/// <reference types="jest" />
-
-import group from './group';
-
-test('when nothing is passed should return empty array', () => {
-  expect(
-    group([], () => {
-      throw new Error('Should not call');
-    })
-  ).toEqual([]);
-});
-
-test('when a single item is passed should return it as grouped', () => {
-  expect(group([1], () => [1])).toEqual([[1]]);
-});
-
-test('when two separate items is passed should return it ungrouped', () => {
-  expect(group([1, 2], jest.fn().mockReturnValueOnce([1]).mockReturnValueOnce([2]))).toEqual([[1], [2]]);
-});
-
-test('with 3 items in 2 groups should return it grouped properly', () => {
-  expect(group([1, 2, 3], jest.fn().mockReturnValueOnce([1, 3]).mockReturnValueOnce([2]))).toEqual([[1, 3], [2]]);
-});
-
-test('when return items not in the array should be ignored', () => {
-  expect(group([1, 2], jest.fn().mockReturnValueOnce([1, 3]).mockReturnValueOnce([2]))).toEqual([[1], [2]]);
-});
-
-test('when grouping with undefined', () => {
-  expect(group([1, 2], () => undefined)).toEqual([[1], [2]]);
-});