botframework-webchat-component 4.18.2 → 4.19.0

package/src/providers/ActivityLogicalGrouping/ActivityLogicalGroupingComposer.ts

@@ -0,0 +1,100 @@
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { createElement, memo, useCallback, useMemo, useRef } from 'react';
+import { object, optional, pipe, readonly, type InferInput } from 'valibot';
+
+import ActivityLogicalGroupingContext, {
+  type ActivityLogicalGroupingContextType,
+  type GroupState,
+  type LogicalGrouping
+} from './private/ActivityLogicalGroupingContext';
+import useStateWithOptimisticRef from './private/useStateWithOptimisticRef';
+
+const activityLogicalGroupingComposerPropsSchema = pipe(
+  object({
+    children: optional(reactNode())
+  }),
+  readonly()
+);
+
+type ActivityLogicalGroupingComposerProps = InferInput<typeof activityLogicalGroupingComposerPropsSchema>;
+
+const ActivityLogicalGroupingComposer = (props: ActivityLogicalGroupingComposerProps) => {
+  const { children } = validateProps(activityLogicalGroupingComposerPropsSchema, props);
+
+  const logicalGroupingsRef = useRef<Map<string, LogicalGrouping>>(new Map());
+  const [_activityToGroupMap, setActivityToGroupMap, activityToGroupMapRef] = useStateWithOptimisticRef<
+    ReadonlyMap<string, string | undefined>
+  >(new Map());
+
+  const addLogicalGrouping = useCallback(
+    (grouping: LogicalGrouping) => {
+      const prevGroupingKeys = logicalGroupingsRef.current.get(grouping.key)?.activityKeys ?? [];
+
+      logicalGroupingsRef.current.set(grouping.key, grouping);
+
+      const toRemoveSet = new Set(prevGroupingKeys).difference(new Set(grouping.activityKeys));
+      const toAddSet = new Set(grouping.activityKeys).difference(new Set(prevGroupingKeys));
+
+      setActivityToGroupMap(
+        new Map(
+          [].concat(
+            Array.from(activityToGroupMapRef.current).filter(([, value]) => !!value && !toRemoveSet.has(value)),
+            Array.from(toAddSet).map(activityKey => [activityKey, grouping.key] as const)
+          )
+        )
+      );
+    },
+    [activityToGroupMapRef, setActivityToGroupMap]
+  );
+
+  const removeLogicalGrouping = useCallback(
+    (key: string) => {
+      logicalGroupingsRef.current.delete(key);
+      setActivityToGroupMap(new Map([...activityToGroupMapRef.current].filter(([, value]) => value !== key)));
+    },
+    [activityToGroupMapRef, setActivityToGroupMap]
+  );
+
+  const getLogicalGroupKey = useCallback(
+    (activityKey: string): string | undefined => activityToGroupMapRef.current.get(activityKey),
+    [activityToGroupMapRef]
+  );
+
+  const getGroupState = useCallback(
+    (groupKey: string): GroupState | undefined => {
+      const group = logicalGroupingsRef.current.get(groupKey);
+      return group?.getGroupState?.();
+    },
+    [logicalGroupingsRef]
+  );
+
+  const getGroupBoundaries = useCallback(
+    (groupKey: string): [string, string] => {
+      const group = logicalGroupingsRef.current.get(groupKey);
+      if (!group || !group.activityKeys.length) {
+        return [undefined, undefined];
+      }
+      // eslint-disable-next-line no-magic-numbers
+      return [group.activityKeys.at(0), group.activityKeys.at(-1)];
+    },
+    [logicalGroupingsRef]
+  );
+
+  const contextValue: ActivityLogicalGroupingContextType = useMemo(
+    () => ({
+      addLogicalGrouping,
+      getLogicalGroupKey,
+      getGroupState,
+      getGroupBoundaries,
+      removeLogicalGrouping
+    }),
+    [addLogicalGrouping, getLogicalGroupKey, getGroupState, getGroupBoundaries, removeLogicalGrouping]
+  );
+
+  return createElement(ActivityLogicalGroupingContext.Provider, { value: contextValue }, children);
+};
+
+ActivityLogicalGroupingComposer.displayName = 'ActivityLogicalGroupingComposer';
+
+export default memo(ActivityLogicalGroupingComposer);
+export { activityLogicalGroupingComposerPropsSchema, type ActivityLogicalGroupingComposerProps };

package/src/providers/ActivityLogicalGrouping/index.ts

@@ -0,0 +1,7 @@
+export { default as ActivityLogicalGroupingComposer } from './ActivityLogicalGroupingComposer';
+export { default as useAddLogicalGrouping } from './useAddLogicalGrouping';
+export { default as useRemoveLogicalGrouping } from './useRemoveLogicalGrouping';
+export { default as useGetLogicalGroupKey } from './useGetLogicalGroupKey';
+export { default as useGetGroupState } from './useGetGroupState';
+export type { ActivityLogicalGroupingComposerProps } from './ActivityLogicalGroupingComposer';
+export type { LogicalGrouping, GroupState } from './private/ActivityLogicalGroupingContext';

package/src/providers/ActivityLogicalGrouping/private/ActivityLogicalGroupingContext.ts

@@ -0,0 +1,31 @@
+import createContextAndHook from '../../createContextAndHook';
+
+type GroupState = Readonly<{
+  isCollapsed: boolean;
+}>;
+
+type LogicalGrouping = Readonly<{
+  activityKeys: string[];
+  getGroupState?: () => GroupState;
+  key: string;
+}>;
+
+type ActivityLogicalGroupingContextType = Readonly<{
+  addLogicalGrouping: (grouping: LogicalGrouping) => void;
+  getGroupBoundaries: (groupKey: string) => [string | undefined, string | undefined];
+  getGroupState: (groupKey: string) => GroupState | undefined;
+  getLogicalGroupKey: (activityKey: string) => string | undefined;
+  removeLogicalGrouping: (key: string) => void;
+}>;
+
+const { contextComponentType, useContext } = createContextAndHook<ActivityLogicalGroupingContextType>(
+  'ActivityLogicalGroupingContext'
+);
+
+export default contextComponentType;
+export {
+  useContext as useActivityLogicalGroupingContext,
+  type ActivityLogicalGroupingContextType,
+  type GroupState,
+  type LogicalGrouping
+};

package/src/providers/ActivityLogicalGrouping/private/useStateWithOptimisticRef.ts

@@ -0,0 +1,13 @@
+import { useCallback, useRef, useState } from 'react';
+
+export default function useStateWithOptimisticRef<T>(initialState: T | (() => T)) {
+  const [state, setState] = useState(initialState);
+  const stateRef = useRef<T>(state);
+
+  const setStateWithRefUpdate = useCallback((newState: T) => {
+    setState(newState);
+    stateRef.current = newState;
+  }, []);
+
+  return [state, setStateWithRefUpdate, stateRef] as const;
+}

package/src/providers/ActivityLogicalGrouping/useAddLogicalGrouping.ts

@@ -0,0 +1,5 @@
+import { useActivityLogicalGroupingContext, type LogicalGrouping } from './private/ActivityLogicalGroupingContext';
+
+export default function useAddLogicalGrouping(): (grouping: LogicalGrouping) => void {
+  return useActivityLogicalGroupingContext().addLogicalGrouping;
+}

package/src/providers/ActivityLogicalGrouping/useGetGroupState.ts

@@ -0,0 +1,5 @@
+import { useActivityLogicalGroupingContext, type GroupState } from './private/ActivityLogicalGroupingContext';
+
+export default function useGetGroupState(): (groupKey: string) => GroupState | undefined {
+  return useActivityLogicalGroupingContext().getGroupState;
+}

package/src/providers/ActivityLogicalGrouping/useGetLogicalGroupBoundaries.ts

@@ -0,0 +1,5 @@
+import { useActivityLogicalGroupingContext } from './private/ActivityLogicalGroupingContext';
+
+export default function useGetLogicalGroupBoundaries(): (groupKey: string) => [string | undefined, string | undefined] {
+  return useActivityLogicalGroupingContext().getGroupBoundaries;
+}

package/src/providers/ActivityLogicalGrouping/useGetLogicalGroupKey.ts

@@ -0,0 +1,5 @@
+import { useActivityLogicalGroupingContext } from './private/ActivityLogicalGroupingContext';
+
+export default function useGetLogicalGroupKey(): (activityKey: string) => string | undefined {
+  return useActivityLogicalGroupingContext().getLogicalGroupKey;
+}

package/src/providers/ActivityLogicalGrouping/useRemoveLogicalGrouping.ts

@@ -0,0 +1,5 @@
+import { useActivityLogicalGroupingContext } from './private/ActivityLogicalGroupingContext';
+
+export default function useRemoveLogicalGrouping(): (key: string) => void {
+  return useActivityLogicalGroupingContext().removeLogicalGrouping;
+}

package/src/providers/ChatHistoryDOM/ChatHistoryDOMComposer.tsx

@@ -0,0 +1,18 @@
+import React, { memo, useMemo, useRef, type ReactNode } from 'react';
+import ChatHistoryDOMContext, { type ChatHistoryDOMContextType } from './private/ChatHistoryDOMContext';
+
+type ChatHistoryDOMComposerProps = Readonly<{
+  children?: ReactNode | undefined;
+}>;
+
+const ChatHistoryDOMComposer = ({ children }: ChatHistoryDOMComposerProps) => {
+  const activityElementRef = useRef<Map<string, HTMLElement>>(new Map());
+  const context = useMemo<ChatHistoryDOMContextType>(() => ({ activityElementRef }), [activityElementRef]);
+
+  return <ChatHistoryDOMContext.Provider value={context}>{children}</ChatHistoryDOMContext.Provider>;
+};
+
+ChatHistoryDOMComposer.displayName = 'ChatHistoryDOMComposer';
+
+export default memo(ChatHistoryDOMComposer);
+export { type ChatHistoryDOMComposerProps };

package/src/providers/ChatHistoryDOM/private/ChatHistoryDOMContext.ts

@@ -0,0 +1,11 @@
+import { type MutableRefObject } from 'react';
+import createContextAndHook from '../../createContextAndHook';
+
+type ChatHistoryDOMContextType = Readonly<{
+  activityElementRef: MutableRefObject<Map<string, HTMLElement>>;
+}>;
+
+const { contextComponentType, useContext } = createContextAndHook<ChatHistoryDOMContextType>('ChatHistoryDOMContext');
+
+export default contextComponentType;
+export { useContext as useChatHistoryDOMContext, type ChatHistoryDOMContextType };

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.module.css

@@ -0,0 +1,35 @@
+:global(.webchat) .code-block {
+  background: var(--webchat__background--code-block, inherit);
+  border: 1px solid #d1d1d1;
+  border-radius: 4px;
+  color: var(--webchat__color--code-block, currentColor);
+  display: block;
+  margin: 16px 0;
+  overflow: hidden;
+  padding: 4px 4px 4px 8px;
+  line-height: normal;
+}
+
+:global(.webchat) .code-block:has(.code-block__theme--github-dark-default) {
+  background: var(--webchat__background--code-block, #0d1117);
+  color: var(--webchat__color--code-block, #e6edf3);
+}
+
+:global(.webchat) .code-block:has(.code-block__theme--github-light-default) {
+  background: var(--webchat__background--code-block, #ffffff);
+  color: var(--webchat__color--code-block, #1f2328);
+}
+
+:global(.webchat) .code-block:has(.code-block__body:focus-visible):focus-within {
+  outline: 2px solid #000;
+  outline-offset: -2px;
+}
+
+:global(.webchat) .code-block__body {
+  margin: 0;
+  outline: none;
+  white-space: pre-wrap;
+  /* TODO: align with the rest of code blocks */
+  line-height: unset;
+  display: inline;
+}

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

@@ -0,0 +1,230 @@
+/* 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

@@ -0,0 +1,63 @@
+: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;
+  }
+}