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

package/src/hooks/internal/useMemoized.spec.jsx

@@ -0,0 +1,159 @@
+/** @jest-environment @happy-dom/jest-environment */
+
+/* eslint no-magic-numbers: "off" */
+
+import React from 'react';
+import { render } from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import useMemoized from './useMemoized';
+
+const testHook = fun => {
+  let state;
+  const UseComponent = ({ useTest }) => {
+    useTest();
+    return null;
+  };
+  const TestComponent = () => {
+    state = React.useState();
+    const [useTest] = state;
+    if (useTest) {
+      return <UseComponent useTest={useTest} />;
+    }
+
+    return <React.Fragment />;
+  };
+
+  const root = document.createElement('div');
+  render(<TestComponent />, root);
+
+  return (...args) => {
+    const [_useTest, setTest] = state;
+    return new Promise(resolve => {
+      act(() => {
+        setTest(() => () => resolve(fun(...args)));
+      });
+    });
+  };
+};
+
+test('useMemoized should cache result across runs', async () => {
+  const expensiveSum = jest.fn((x, y) => x + y);
+
+  const render = testHook(doMemoChecks => {
+    // Start a run, all calls to sum() will be cached.
+    const sum = useMemoized(expensiveSum, []);
+    doMemoChecks(sum);
+  });
+
+  await render(sum => {
+    expect(sum(1, 2)).toBe(3); // Not cached, return 3.
+    expect(sum(1, 2)).toBe(3); // Cached, return 3.
+    expect(sum(2, 4)).toBe(6); // Not cached, return 6.
+    expect(sum(1, 2)).toBe(3); // Cached, return 3. This is cached because it is inside the same run.
+  });
+  expect(expensiveSum).toHaveBeenCalledTimes(2);
+
+  expect(expensiveSum.mock.calls[0]).toEqual([1, 2]);
+  expect(expensiveSum.mock.calls[1]).toEqual([2, 4]);
+
+  // After the run, 1 + 2 = 3, and 2 + 4 = 6 is cached.
+
+  // Start another run with previous cache
+  await render(sum => {
+    expect(sum(1, 2)).toBe(3); // Cached from previous run, return 3.
+    expect(sum(3, 6)).toBe(9); // Not cached, return 9.
+  });
+
+  expect(expensiveSum).toHaveBeenCalledTimes(3);
+  expect(expensiveSum.mock.calls[2]).toEqual([3, 6]);
+
+  // After the run, only 1 + 2 = 3 and 3 + 6 = 9 is cached. 2 + 4 is dropped.
+
+  // Start another run with previous cache
+  await render(sum => {
+    expect(sum(2, 4)).toBe(6); // Not cached, return 6
+  });
+
+  expect(expensiveSum).toHaveBeenCalledTimes(4);
+  expect(expensiveSum.mock.calls[3]).toEqual([2, 4]);
+});
+
+test('useMemoized should flush cache if deps change', async () => {
+  const expensiveSum = jest.fn((x, y) => x + y);
+
+  const render = testHook((doMemoChecks, deps) => {
+    // Start a run, all calls to sum() will be cached.
+    const sum = useMemoized(expensiveSum, deps);
+    doMemoChecks(sum);
+  });
+
+  // Start a run, all calls to sum() will be cached.
+  await render(
+    sum => {
+      expect(sum(1, 2)).toBe(3); // Not cached, return 3.
+      expect(sum(1, 2)).toBe(3); // Cached, return 3.
+      expect(sum(2, 4)).toBe(6); // Not cached, return 6.
+      expect(sum(1, 2)).toBe(3); // Cached, return 3. This is cached because it is inside the same run.
+    },
+    [{}]
+  );
+
+  expect(expensiveSum).toHaveBeenCalledTimes(2);
+
+  expect(expensiveSum.mock.calls[0]).toEqual([1, 2]);
+  expect(expensiveSum.mock.calls[1]).toEqual([2, 4]);
+
+  // Start another run without the previous cache
+  await render(
+    sum => {
+      expect(sum(1, 2)).toBe(3); // Not cached, deps changed
+      expect(sum(3, 6)).toBe(9); // Not cached, return 9.
+    },
+    [null]
+  );
+
+  expect(expensiveSum).toHaveBeenCalledTimes(4);
+  expect(expensiveSum.mock.calls[2]).toEqual([1, 2]);
+  expect(expensiveSum.mock.calls[3]).toEqual([3, 6]);
+
+  // After the run, only 1 + 2 = 3 and 3 + 6 = 9 is cached. 2 + 4 is dropped.
+
+  // Start another run with previous cache
+  await render(
+    sum => {
+      expect(sum(1, 2)).toBe(3); // Cached from previous run, return 3.
+      expect(sum(2, 4)).toBe(6); // Not cached, return 6
+    },
+    [null]
+  );
+
+  expect(expensiveSum).toHaveBeenCalledTimes(5);
+  expect(expensiveSum.mock.calls[4]).toEqual([2, 4]);
+});
+
+test('useMemoized should not share cache across hooks', async () => {
+  const expensiveSum = jest.fn((x, y) => x + y);
+
+  const render = testHook(doMemoChecks => {
+    // Start a run, all calls to sum() will be cached.
+    const sum1 = useMemoized(expensiveSum, []);
+    doMemoChecks(sum1);
+    const sum2 = useMemoized(expensiveSum, []);
+    doMemoChecks(sum2);
+  });
+
+  // Start a run, all calls to sum() will be cached.
+  await render(sum => {
+    expect(sum(1, 2)).toBe(3); // Not cached, return 3.
+    expect(sum(1, 2)).toBe(3); // Cached, return 3.
+    expect(sum(2, 4)).toBe(6); // Not cached, return 6.
+    expect(sum(1, 2)).toBe(3); // Cached, return 3. This is cached because it is inside the same run.
+  });
+
+  expect(expensiveSum).toHaveBeenCalledTimes(4);
+
+  expect(expensiveSum.mock.calls[0]).toEqual([1, 2]);
+  expect(expensiveSum.mock.calls[1]).toEqual([2, 4]);
+  expect(expensiveSum.mock.calls[2]).toEqual(expensiveSum.mock.calls[0]);
+  expect(expensiveSum.mock.calls[3]).toEqual(expensiveSum.mock.calls[1]);
+});

package/src/hooks/internal/useMemoized.ts

@@ -0,0 +1,77 @@
+import { useEffect, useMemo, useRef, type DependencyList } from 'react';
+import { useRefFrom } from 'use-ref-from';
+
+type Cache<TArgs, TResult> = { args: TArgs[]; result: TResult };
+type Fn<TArgs, TResult> = (...args: TArgs[]) => TResult;
+
+/**
+ * `useMemoized` will memoize multiple calls to the same memoize function.
+ *
+ * @param {Fn<TArgs, TResult>} fn - The function to be memoized.
+ * @param {DependencyList} deps - Dependencies to detect for chagnes.
+ */
+export default function useMemoized<TFinal, TArgs>(fn: Fn<TArgs, TFinal>, deps: DependencyList): Fn<TArgs, TFinal> {
+  if (typeof fn !== 'function') {
+    throw new Error('The first argument must be a function.');
+  } else if (!Array.isArray(deps)) {
+    throw new Error('The second argument must be an array.');
+  }
+
+  // Hook-style inline fn: changing it won't trigger updates unless deps change
+  const fnRef = useRefFrom<Fn<TArgs, TFinal>>(fn);
+  // Use both caches to read cached values, but store only
+  // to the next cache, so we could distingish between values
+  // added during render discarding value cached previously
+  const cacheRef = useRef<Cache<TArgs, TFinal>[]>();
+  const nextCacheRef = useRef<Cache<TArgs, TFinal>[]>();
+
+  const memoizedFn = useMemo(
+    () => {
+      // Empty both caches on fresh run to avoid leakage of
+      // previously cached values into new memoizedFn calls
+      cacheRef.current = [];
+      nextCacheRef.current = [];
+
+      const memoizedFn = (...args) => {
+        const fn = fnRef.current;
+        const cache = cacheRef.current;
+        const nextCache = nextCacheRef.current;
+
+        const cached = cache.find(
+          ({ args: cachedArgs }) =>
+            // index is guarented to be a number here
+            // eslint-disable-next-line security/detect-object-injection
+            args.length === cachedArgs.length && args.every((arg, index) => Object.is(arg, cachedArgs[index]))
+        );
+        if (cached) {
+          cached.args = args;
+          nextCache.push(cached);
+          return cached.result;
+        }
+
+        const nextCached = {
+          args,
+          result: fn(...args)
+        };
+        nextCache.push(nextCached);
+        cache.push(nextCached);
+
+        return nextCached.result;
+      };
+
+      return memoizedFn;
+    },
+    // Concat our deps with passed deps, so the memo callback runs when anything changes
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    [fnRef, cacheRef, nextCacheRef, ...deps]
+  );
+
+  useEffect(() => {
+    // At the end of each render turn around caches so that
+    // we keep only used in this render call cached values
+    cacheRef.current = nextCacheRef.current;
+    nextCacheRef.current = [];
+  });
+
+  return memoizedFn;
+}

package/src/hooks/internal/useObserveFocusVisible.ts

@@ -218,7 +218,6 @@ function useObserveFocusVisibleForModernBrowsers(
 
     if (
       // "msMatchesSelector" is vendor-prefixed version of "matches".
-      // eslint-disable-next-line dot-notation
       (current.matches || (current['msMatchesSelector'] as (selector: string) => boolean)).call(
         current,
         ':focus-visible'

package/src/hooks/internal/useStateRef.ts

@@ -5,7 +5,7 @@ import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
 export default function useStateRef<T>(
   initialValue?: T
 ): readonly [T, Dispatch<SetStateAction<T>>, MutableRefObject<T>] {
-  const [_, forceRender] = useState<{}>();
+  const [_, forceRender] = useState<unknown>();
   const valueRef: MutableRefObject<T> = useRef<T>(initialValue);
 
   const setter: Dispatch<SetStateAction<T>> = useCallback(

package/src/hooks/sendBoxFocus.ts

@@ -3,6 +3,10 @@ import { createPropagation } from 'use-propagate';
 
 export type SendBoxFocusOptions = WaitUntilable<{ noKeyboard: boolean }>;
 
-const { useListen: useRegisterFocusSendBox, usePropagate: useFocusSendBox } = createPropagation<SendBoxFocusOptions>();
+const {
+  PropagationScope: FocusSendBoxScope,
+  useListen: useRegisterFocusSendBox,
+  usePropagate: useFocusSendBox
+} = createPropagation<SendBoxFocusOptions>();
 
-export { useRegisterFocusSendBox, useFocusSendBox };
+export { FocusSendBoxScope, useRegisterFocusSendBox, useFocusSendBox };

package/src/hooks/transcriptScrollRelative.ts

@@ -0,0 +1,11 @@
+import { createPropagation } from 'use-propagate';
+
+export type TranscriptScrollRelativeOptions = { direction: 'down' | 'up'; displacement?: number };
+
+const {
+  PropagationScope: ScrollRelativeTranscriptScope,
+  useListen: useRegisterScrollRelativeTranscript,
+  usePropagate: useScrollRelativeTranscript
+} = createPropagation<TranscriptScrollRelativeOptions>();
+
+export { ScrollRelativeTranscriptScope, useRegisterScrollRelativeTranscript, useScrollRelativeTranscript };

package/src/hooks/useRenderMarkdownAsHTML.ts

@@ -2,8 +2,9 @@ import { cx } from '@emotion/css';
 import { hooks, StrictStyleOptions } from 'botframework-webchat-api';
 import { useMemo } from 'react';
 
-import parseDocumentFromString from '../Utils/parseDocumentFromString';
-import serializeDocumentIntoString from '../Utils/serializeDocumentIntoString';
+import { useTransformHTMLContent } from '../providers/HTMLContentTransformCOR/index';
+import parseDocumentFragmentFromString from '../Utils/parseDocumentFragmentFromString';
+import serializeDocumentFragmentIntoString from '../Utils/serializeDocumentFragmentIntoString';
 import useWebChatUIContext from './internal/useWebChatUIContext';
 import useStyleSet from './useStyleSet';
 
@@ -22,6 +23,7 @@ export default function useRenderMarkdownAsHTML(
   const [styleOptions] = useStyleOptions();
   const [{ renderMarkdown: renderMarkdownStyleSet }] = useStyleSet();
   const localize = useLocalizer();
+  const transformHTMLContent = useTransformHTMLContent();
 
   const externalLinkAlt = localize('MARKDOWN_EXTERNAL_LINK_ALT');
 
@@ -44,19 +46,19 @@ export default function useRenderMarkdownAsHTML(
     () =>
       renderMarkdown &&
       (markdown => {
-        const htmlAfterSanitization = renderMarkdown(markdown, styleOptions, { containerClassName, externalLinkAlt });
+        const html = renderMarkdown(markdown, styleOptions, { externalLinkAlt });
 
-        const documentAfterSanitization = parseDocumentFromString(htmlAfterSanitization);
+        const documentFragment = transformHTMLContent(parseDocumentFragmentFromString(html));
 
-        const rootElement = documentAfterSanitization.createElement('div');
+        const rootElement = document.createElement('div');
 
         containerClassName && rootElement.classList.add(...containerClassName.split(' ').filter(Boolean));
 
-        rootElement.append(...documentAfterSanitization.body.children);
-        documentAfterSanitization.body.append(rootElement);
+        rootElement.append(...documentFragment.childNodes);
+        documentFragment.append(rootElement);
 
-        return serializeDocumentIntoString(documentAfterSanitization);
+        return serializeDocumentFragmentIntoString(documentFragment);
       }),
-    [containerClassName, externalLinkAlt, renderMarkdown, styleOptions]
+    [containerClassName, externalLinkAlt, renderMarkdown, styleOptions, transformHTMLContent]
   );
 }

package/src/hooks/useScrollDown.ts

@@ -1,9 +1,8 @@
 import { useCallback } from 'react';
-
-import useScrollRelative from './internal/useScrollRelative';
+import { useScrollRelativeTranscript } from './transcriptScrollRelative';
 
 export default function useScrollDown(): (options?: { displacement: number }) => void {
-  const scrollRelative = useScrollRelative();
+  const scrollRelative = useScrollRelativeTranscript();
 
-  return useCallback((...args) => scrollRelative('down', ...args), [scrollRelative]);
+  return useCallback(options => scrollRelative({ direction: 'down', ...options }), [scrollRelative]);
 }

package/src/hooks/useScrollUp.ts

@@ -1,9 +1,8 @@
 import { useCallback } from 'react';
-
-import useScrollRelative from './internal/useScrollRelative';
+import { useScrollRelativeTranscript } from './transcriptScrollRelative';
 
 export default function useScrollUp(): (options?: { displacement: number }) => void {
-  const scrollRelative = useScrollRelative();
+  const scrollRelative = useScrollRelativeTranscript();
 
-  return useCallback((...args) => scrollRelative('up', ...args), [scrollRelative]);
+  return useCallback(options => scrollRelative({ direction: 'up', ...options }), [scrollRelative]);
 }

package/src/index.ts

@@ -38,6 +38,7 @@ import SendButton from './SendBox/SendButton';
 import SuggestedActions from './SendBox/SuggestedActions';
 import SendTextBox from './SendBox/TextBox';
 import UploadButton from './SendBoxToolbar/UploadButton';
+import MonochromeImageMasker from './Utils/MonochromeImageMasker';
 
 import createCoreAttachmentMiddleware from './Attachment/createMiddleware';
 import createCoreActivityMiddleware from './Middleware/Activity/createCoreMiddleware';
@@ -45,7 +46,14 @@ import createCoreActivityStatusMiddleware from './Middleware/ActivityStatus/crea
 import createStyleSet from './Styles/createStyleSet';
 import getTabIndex from './Utils/TypeFocusSink/getTabIndex';
 import Context from './hooks/internal/WebChatUIContext';
+import {
+  type HTMLContentTransformEnhancer,
+  type HTMLContentTransformFunction,
+  type HTMLContentTransformMiddleware,
+  type HTMLContentTransformRequest
+} from './providers/HTMLContentTransformCOR/index';
 import ThemeProvider from './providers/Theme/ThemeProvider';
+import testIds from './testIds';
 import withEmoji from './withEmoji/withEmoji';
 
 import * as componentHooks from './hooks/index';
@@ -103,16 +111,19 @@ const Components = {
   UploadButton,
 
   // Components for localization
-  LocalizedString
+  LocalizedString,
+
+  // Components for theming
+  MonochromeImageMasker
 };
 
 export default ReactWebChat;
 
 export {
-  Components,
-  Context,
   buildInfo,
+  Components,
   concatMiddleware,
+  Context,
   createCoreActivityMiddleware,
   createCoreActivityStatusMiddleware,
   createCoreAttachmentMiddleware,
@@ -120,8 +131,18 @@ export {
   getTabIndex,
   hooks,
   localize,
+  testIds,
   version,
   withEmoji
 };
 
-export type { BasicWebChatProps, ComposerProps, ReactWebChatProps, WebChatActivity };
+export type {
+  BasicWebChatProps,
+  ComposerProps,
+  HTMLContentTransformEnhancer,
+  HTMLContentTransformFunction,
+  HTMLContentTransformMiddleware,
+  HTMLContentTransformRequest,
+  ReactWebChatProps,
+  WebChatActivity
+};

package/src/internal.ts

@@ -1,4 +1,20 @@
-import parseDocumentFromString from './Utils/parseDocumentFromString';
-import serializeDocumentIntoString from './Utils/serializeDocumentIntoString';
+import {
+  CodeHighlighterComposer,
+  useCodeHighlighter,
+  type HighlightCodeFn
+} from './hooks/internal/codeHighlighter/index';
+import useInjectStyles from './hooks/internal/useInjectStyles';
+import { useLiveRegion } from './providers/LiveRegionTwin/index';
+import parseDocumentFragmentFromString from './Utils/parseDocumentFragmentFromString';
+import serializeDocumentFragmentIntoString from './Utils/serializeDocumentFragmentIntoString';
 
-export { parseDocumentFromString, serializeDocumentIntoString };
+export {
+  CodeHighlighterComposer,
+  parseDocumentFragmentFromString,
+  serializeDocumentFragmentIntoString,
+  useCodeHighlighter,
+  useInjectStyles,
+  useLiveRegion
+};
+
+export { type HighlightCodeFn };

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);