botframework-webchat-component 4.18.2 → 4.19.0

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

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

@@ -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)[]
+): 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

@@ -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 { 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

@@ -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,31 @@
+/// <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]]);
+});

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

@@ -0,0 +1,19 @@
+import pick from './pick';
+
+export default function group<T>(
+  ungrouped: Iterable<T>,
+  getItemsOfSameGroup: (item: T) => Iterable<T> | undefined
+): readonly (readonly T[])[] {
+  let processing: readonly T[] = Array.from(ungrouped);
+  const result: (readonly T[])[] = [];
+
+  while (processing.length) {
+    const [value] = processing;
+    const [left, right] = pick<T>(processing, [value, ...(getItemsOfSameGroup(value) || [])]);
+
+    processing = left;
+    result.push(right);
+  }
+
+  return Object.freeze(result);
+}

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

@@ -0,0 +1,35 @@
+/// <reference types="jest" />
+
+import pick from './pick';
+
+test('when no item should return empty', () => {
+  expect(pick([], [])).toEqual([[], []]);
+});
+
+test('when picking non-existing item should return empty', () => {
+  expect(pick([], [1])).toEqual([[], []]);
+});
+
+test('when picking an item should remove item', () => {
+  expect(pick([1], [1])).toEqual([[], [1]]);
+});
+
+test('when item do not exist should not remove item', () => {
+  expect(pick([1], [2])).toEqual([[1], []]);
+});
+
+test('when item exist should remove item', () => {
+  expect(pick([1, 2, 3], [2])).toEqual([[1, 3], [2]]);
+});
+
+test('when not picking anything should return all items', () => {
+  expect(pick([1, 2, 3], [])).toEqual([[1, 2, 3], []]);
+});
+
+test('when picking two items should pick properly', () => {
+  expect(pick([1, 2, 3], [2, 3])).toEqual([[1], [2, 3]]);
+});
+
+test('when picking undefined', () => {
+  expect(pick([1], undefined)).toEqual([[1], []]);
+});

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

@@ -0,0 +1,20 @@
+export default function pick<T>(array: Iterable<T>, pick: Iterable<T>): readonly [readonly T[], readonly T[]] {
+  if (!pick) {
+    return Object.freeze([Object.freeze(Array.from(array)), Object.freeze([])]);
+  }
+
+  const pickArray = Array.from(pick);
+
+  const left: T[] = [];
+  const right: T[] = [];
+
+  for (const item of Array.from(array)) {
+    if (pickArray.includes(item)) {
+      right.push(item);
+    } else {
+      left.push(item);
+    }
+  }
+
+  return Object.freeze([Object.freeze(left), Object.freeze(right)]);
+}

package/src/providers/GroupedRenderingActivities/useGroupedRenderingActivities.ts

@@ -0,0 +1,6 @@
+import { type GroupedRenderingActivities } from './GroupedRenderingActivities';
+import { useGroupedRenderingActivitiesContext } from './private/GroupedRenderingActivitiesContext';
+
+export default function useGroupedRenderingActivities(): readonly [readonly GroupedRenderingActivities[]] {
+  return useGroupedRenderingActivitiesContext().groupedRenderingActivitiesState;
+}

package/src/providers/GroupedRenderingActivities/useNumRenderingActivities.ts

@@ -0,0 +1,5 @@
+import { useGroupedRenderingActivitiesContext } from './private/GroupedRenderingActivitiesContext';
+
+export default function useNumRenderingActivities(): readonly [number] {
+  return useGroupedRenderingActivitiesContext().numRenderingActivitiesState;
+}

package/src/providers/HTMLContentTransformCOR/HTMLContentTransformComposer.tsx

@@ -0,0 +1,41 @@
+import React, { memo, useMemo, type ReactNode } from 'react';
+
+import HTMLContentTransformContext, {
+  type HTMLContentTransformContextType,
+  type HTMLContentTransformFunction,
+  type HTMLContentTransformMiddleware
+} from './private/HTMLContentTransformContext';
+
+type HTMLContentTransformComposerProps = Readonly<{
+  children?: ReactNode | undefined;
+  middleware?: readonly HTMLContentTransformMiddleware[] | undefined;
+}>;
+
+const HTMLContentTransformComposer = memo(({ children, middleware }: HTMLContentTransformComposerProps) => {
+  const transform = useMemo<HTMLContentTransformFunction>(() => {
+    const enhancers = (middleware || []).map(enhancer => enhancer()).reverse();
+
+    return enhancers.reduce(
+      (chain: HTMLContentTransformFunction, fn) => fn(chain),
+      fragment => {
+        // With bundle or sanitizer installed, it should not fall into this code.
+
+        const result = document.createDocumentFragment();
+        const paragraph = document.createElement('p');
+
+        paragraph.textContent = fragment.documentFragment.firstElementChild.outerHTML;
+        result.append(paragraph);
+
+        return result;
+      }
+    );
+  }, [middleware]);
+
+  const context = useMemo<HTMLContentTransformContextType>(() => Object.freeze({ transform }), [transform]);
+
+  return <HTMLContentTransformContext.Provider value={context}>{children}</HTMLContentTransformContext.Provider>;
+});
+
+HTMLContentTransformComposer.displayName = 'HTMLContentTransformComposer';
+
+export default HTMLContentTransformComposer;

package/src/providers/HTMLContentTransformCOR/index.ts

@@ -0,0 +1,8 @@
+export {
+  type HTMLContentTransformEnhancer,
+  type HTMLContentTransformFunction,
+  type HTMLContentTransformMiddleware,
+  type HTMLContentTransformRequest
+} from './private/HTMLContentTransformContext';
+
+export { default as useTransformHTMLContent } from './useTransformHTMLContent';

package/src/providers/HTMLContentTransformCOR/private/HTMLContentTransformContext.ts

@@ -0,0 +1,34 @@
+import { createContext } from 'react';
+
+export type HTMLContentTransformRequest = Readonly<{
+  allowedTags: ReadonlyMap<
+    string,
+    Readonly<{
+      // TODO: Ultimately, we could allowlist a cherry-picked instance of element, but not all elements sharing the same tag name.
+      attributes: ReadonlySet<string>;
+    }>
+  >;
+  codeBlockTagName: string;
+  documentFragment: DocumentFragment;
+  externalLinkAlt: string;
+}>;
+
+export type HTMLContentTransformFunction = (request: HTMLContentTransformRequest) => DocumentFragment;
+
+export type HTMLContentTransformEnhancer = (next: HTMLContentTransformFunction) => HTMLContentTransformFunction;
+
+export type HTMLContentTransformMiddleware = () => HTMLContentTransformEnhancer;
+
+export type HTMLContentTransformContextType = Readonly<{
+  transform: HTMLContentTransformFunction;
+}>;
+
+const HTMLContentTransformContext = createContext<HTMLContentTransformContextType>(
+  new Proxy({} as HTMLContentTransformContextType, {
+    get() {
+      throw new Error('botframework-webchat: This hook can only be used under <HTMLContentTransformComposer>.');
+    }
+  })
+);
+
+export default HTMLContentTransformContext;

package/src/providers/HTMLContentTransformCOR/private/useHTMLContentTransformContext.ts

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