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

package/src/providers/ChatHistoryDOM/useActivityElementRef.ts

@@ -0,0 +1,6 @@
+import { type RefObject } from 'react';
+import { useChatHistoryDOMContext } from './private/ChatHistoryDOMContext';
+
+export default function useActivityElementMapRef(): RefObject<Map<string, HTMLElement>> {
+  return useChatHistoryDOMContext().activityElementRef;
+}

package/src/providers/CustomElements/CustomElementsComposer.tsx

@@ -0,0 +1,58 @@
+import mathRandom from 'math-random';
+import React, { memo, useCallback, useMemo, type ReactNode } from 'react';
+
+import useReactCodeBlockClass from './customElements/CodeBlock';
+import { CodeBlockCopyButtonElement } from './customElements/CodeBlockCopyButton';
+import CustomElementsContext from './private/CustomElementsContext';
+
+type CustomElementsComposerProps = Readonly<{
+  children?: ReactNode | undefined;
+}>;
+
+const CustomElementsComposer = ({ children }: CustomElementsComposerProps) => {
+  // eslint-disable-next-line no-magic-numbers
+  const hash = useMemo(() => mathRandom().toString(36).substring(2, 7), []);
+
+  const registerCustomElement = useCallback(
+    (tagName: string, customElementConstructor: CustomElementConstructor): string => {
+      const fullTagName = `webchat-${hash}--${tagName}` as const;
+
+      customElements.define(
+        fullTagName,
+        class extends customElementConstructor {
+          static get observedAttributes(): readonly string[] {
+            return Object.freeze(
+              'observedAttributes' in customElementConstructor
+                ? (customElementConstructor.observedAttributes as string[])
+                : []
+            );
+          }
+        }
+      );
+
+      return fullTagName;
+    },
+    [hash]
+  );
+
+  const codeBlockCopyButtonTagName = useMemo(
+    () => registerCustomElement('code-block-copy-button', CodeBlockCopyButtonElement),
+    [registerCustomElement]
+  );
+
+  const CodeBlockClass = useReactCodeBlockClass(codeBlockCopyButtonTagName);
+
+  const codeBlockTagName = useMemo(
+    () => registerCustomElement('code-block', CodeBlockClass),
+    [CodeBlockClass, registerCustomElement]
+  );
+
+  const context = useMemo(
+    () => Object.freeze({ codeBlockTagName, codeBlockCopyButtonTagName }),
+    [codeBlockTagName, codeBlockCopyButtonTagName]
+  );
+
+  return <CustomElementsContext.Provider value={context}>{children}</CustomElementsContext.Provider>;
+};
+
+export default memo(CustomElementsComposer);

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

@@ -0,0 +1,230 @@
+/* eslint-disable class-methods-use-this */
+import { hooks } from 'botframework-webchat-api';
+import { ReactNode, useMemo, useRef } from 'react';
+
+import { useStyleSet } from '../../../hooks';
+import { defaultHighlightCode, HighlightCodeFn } from '../../../hooks/internal/codeHighlighter';
+import { parseDocumentFragmentFromString, useCodeHighlighter } from '../../../internal';
+
+const { useStyleOptions, useLocalizer } = hooks;
+
+class CodeBlock extends HTMLElement {
+  static observedAttributes = ['theme', 'language'];
+
+  #connected = false;
+  #originalFragment: DocumentFragment = undefined;
+  #updateTask?: Promise<void>;
+
+  copyButtonElement: HTMLElement;
+
+  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);
+
+    const body = highlightedCodeFragment.querySelector('pre');
+
+    body?.classList.add('webchat__code-block__body');
+    options?.theme && body?.classList.add(`webchat__code-block__theme--${options.theme}`);
+
+    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<{
+  codeBlockClass: string | undefined;
+  codeBlockTheme: 'github-light-default' | 'github-dark-default';
+  copyButtonAltCopied: string;
+  copyButtonAltCopy: string;
+  copyButtonClassName: string;
+  copyButtonTagName: string;
+  highlightCode: HighlightCodeFn;
+}>;
+
+const useCodeBlockProps = (copyButtonTagName: string) => {
+  const highlightCode = useCodeHighlighter();
+  const localize = useLocalizer();
+  const [{ codeBlock: codeBlockClass, codeBlockCopyButton: copyButtonClassName }] = useStyleSet();
+  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({
+      codeBlockClass,
+      codeBlockTheme,
+      copyButtonAltCopied,
+      copyButtonAltCopy,
+      copyButtonClassName,
+      copyButtonTagName,
+      highlightCode
+    });
+
+    propsChangedEventTarget.dispatchEvent(new CustomEvent('change'));
+  }, [
+    codeBlockClass,
+    codeBlockTheme,
+    copyButtonAltCopied,
+    copyButtonAltCopy,
+    copyButtonClassName,
+    copyButtonTagName,
+    highlightCode,
+    propsChangedEventTarget
+  ]);
+
+  return useMemo(
+    () => Object.freeze([propsChangedEventTarget, propsRef] as const),
+    [propsChangedEventTarget, propsRef]
+  );
+};
+
+export default function useReactCodeBlockClass(copyButtonTagName: string) {
+  const [codeBlockTarget, codeBlockPropsRef] = useCodeBlockProps(copyButtonTagName);
+
+  return useMemo(
+    () =>
+      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;
+
+          if (prevProps?.codeBlockClass !== props?.codeBlockClass) {
+            prevProps?.codeBlockClass && this.classList.remove(prevProps.codeBlockClass);
+            props?.codeBlockClass && this.classList.add(props.codeBlockClass);
+          }
+
+          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.className = props.copyButtonClassName;
+          this.copyButtonElement.dataset.altCopy = props.copyButtonAltCopy;
+          this.copyButtonElement.dataset.altCopied = props.copyButtonAltCopied;
+        };
+
+        connectedCallback(): void {
+          this.classList.add('webchat__code-block');
+
+          codeBlockTarget.addEventListener('change', this.#handlePropsChange);
+
+          this.#handlePropsChange();
+          super.connectedCallback();
+        }
+
+        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);
+        }
+      },
+    [codeBlockPropsRef, codeBlockTarget]
+  );
+}

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

@@ -0,0 +1,101 @@
+import classNames from 'classnames';
+import React, { memo, useCallback, useState } from 'react';
+import { useRefFrom } from 'use-ref-from';
+import { useStateWithRef } from 'use-state-with-ref';
+import testIds from '../../../testIds';
+import wrapAsCustomElement from './wrapAsCustomElement';
+
+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 [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={classNames(className, 'webchat__code-block-copy-button', {
+          'webchat__code-block-copy-button--copied': pressed
+        })}
+        data-testid={testIds.codeBlockCopyButton}
+        onAnimationEnd={handleAnimationEnd}
+        onClick={handleClick}
+        type="button"
+      >
+        <div
+          aria-hidden={pressed ? 'true' : undefined}
+          aria-label={copyAlt}
+          className="webchat__code-block-copy-button__icon webchat__code-block-copy-button__icon--copy"
+          role="img"
+        />
+        <div
+          aria-hidden={pressed ? undefined : 'true'}
+          aria-label={copiedAlt}
+          className="webchat__code-block-copy-button__icon webchat__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

@@ -0,0 +1,85 @@
+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)[]
+) {
+  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

@@ -0,0 +1,15 @@
+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

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

package/src/providers/CustomElements/useCodeBlockCopyButtonTagName.ts

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,87 @@
+import { hooks } from 'botframework-webchat-api';
+import { type WebChatActivity } from 'botframework-webchat-core';
+import React, { memo, useMemo } from 'react';
+import { object, optional, parse, pipe, readonly, type InferOutput } from 'valibot';
+
+import reactNode from '../../types/internal/reactNode';
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,29 @@
+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]]);
+});