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

package/src/hooks/index.ts

@@ -1,3 +1,5 @@
+import { useTransformHTMLContent } from '../providers/HTMLContentTransformCOR/index';
+import useShouldReduceMotion from '../providers/ReducedMotion/useShouldReduceMotion';
 import useDictateAbortable from './useDictateAbortable';
 import useFocus from './useFocus';
 import useMakeThumbnail from './useMakeThumbnail';
@@ -40,9 +42,11 @@ export {
   useSendFiles,
   // We are overwriting the `useSendMessage` hook from bf-wc-api and adding thumbnailing support.
   useSendMessage,
+  useShouldReduceMotion,
   useStyleSet,
   useTextBoxSubmit,
   useTextBoxValue,
+  useTransformHTMLContent,
   useTypingIndicatorVisible,
   useWebSpeechPonyfill
 };

package/src/hooks/internal/codeHighlighter/index.ts

@@ -0,0 +1,3 @@
+export { CodeHighlighterComposer, useCodeHighlighter, type HighlightCodeFn } from './private/CodeHighlighterComposer';
+
+export { defaultHighlightCode } from './private/defaultHighlightCode';

package/src/hooks/internal/codeHighlighter/private/CodeHighlighterComposer.tsx

@@ -0,0 +1,32 @@
+import { createContext, useContext, memo } from 'react';
+
+import createCodeHighlighterComposer from './createCodeHighlighterComposer';
+import { defaultHighlightCode } from './defaultHighlightCode';
+
+export type HighlightCodeFn = (
+  code: string,
+  language?: string | undefined,
+  options?:
+    | {
+        theme: string;
+      }
+    | undefined
+) => string | DocumentFragment;
+
+export type CodeHighlighterContextType = {
+  highlightCode: HighlightCodeFn;
+};
+
+const CodeHighlighterContext = createContext<CodeHighlighterContextType>(
+  Object.freeze({
+    highlightCode: defaultHighlightCode
+  })
+);
+
+export function useCodeHighlighter() {
+  return useContext(CodeHighlighterContext).highlightCode;
+}
+
+export const CodeHighlighterComposer = memo(createCodeHighlighterComposer(CodeHighlighterContext));
+
+CodeHighlighterComposer.displayName = 'CodeHighlighterComposer';

package/src/hooks/internal/codeHighlighter/private/createCodeHighlighterComposer.tsx

@@ -0,0 +1,32 @@
+import React, { type ReactNode, useCallback, useMemo } from 'react';
+
+import { useCodeHighlighter, type CodeHighlighterContextType, type HighlightCodeFn } from './CodeHighlighterComposer';
+
+const createCodeHighlighterComposer =
+  ({ Provider }: React.Context<CodeHighlighterContextType>) =>
+  ({ children, highlightCode }: Readonly<{ children: ReactNode; highlightCode: HighlightCodeFn }>) => {
+    const previousCodeHighlighter = useCodeHighlighter();
+
+    const safeHighlightCode = useCallback<HighlightCodeFn>(
+      (...args) => {
+        try {
+          return highlightCode(...args);
+        } catch (error) {
+          console.warn(`botframework-webchat: Failed to highlight code using ${highlightCode.name}`, error);
+          return previousCodeHighlighter(...args);
+        }
+      },
+      [highlightCode, previousCodeHighlighter]
+    );
+
+    const CodeHighlighterContextValue = useMemo(
+      () => ({
+        highlightCode: safeHighlightCode
+      }),
+      [safeHighlightCode]
+    );
+
+    return <Provider value={CodeHighlighterContextValue}>{children}</Provider>;
+  };
+
+export default createCodeHighlighterComposer;

package/src/hooks/internal/codeHighlighter/private/defaultHighlightCode.tsx

@@ -0,0 +1,22 @@
+import type { HighlightCodeFn } from './CodeHighlighterComposer';
+
+export const defaultHighlightCode: HighlightCodeFn = (source, language) => {
+  try {
+    const fragment = document.createDocumentFragment();
+    const pre = document.createElement('pre');
+    const code = document.createElement('code');
+
+    code.textContent = source;
+
+    // Follow commonmark convention
+    language && code.classList.add(`language-${language}`);
+
+    pre.append(code);
+    fragment.append(pre);
+
+    return fragment;
+  } catch (error) {
+    console.warn(`botframework-webchat: Failed to display code`, error);
+    return '<pre></pre>';
+  }
+};

package/src/hooks/internal/createWaitUntilable.spec.ts

@@ -36,7 +36,7 @@ describe('with no waitUntil()', () => {
 });
 
 describe('With a single waitUntil()', () => {
-  let event: WaitUntilable<{}>;
+  let event: WaitUntilable<any>;
   let getPromise: () => Promise<void>;
   let promise: Promise<void>;
   let deferred: Deferred<void>;
@@ -59,7 +59,7 @@ describe('With a single waitUntil()', () => {
 });
 
 describe('With nested waitUntil()', () => {
-  let event: WaitUntilable<{}>;
+  let event: WaitUntilable<any>;
   let getPromise: () => Promise<void>;
   let promise: Promise<void>;
   let deferred1: Deferred<void>;

package/src/hooks/internal/createWaitUntilable.ts

@@ -1,6 +1,6 @@
 export type WaitUntilable<T> = T & { waitUntil: (promise: Promise<void>) => void };
 
-export default function createWaitUntilable<T extends object>(
+export default function createWaitUntilable<T extends Record<any, any>>(
   object: T
 ): readonly [WaitUntilable<T>, () => Promise<void>] {
   const allPromises: Promise<void>[] = [];

package/src/hooks/internal/styleToEmotionObject/index.ts

@@ -0,0 +1 @@
+export { useStyleToEmotionObject, StyleToEmotionObjectComposer } from './private/StyleToEmotionObjectComposer';

package/src/hooks/internal/styleToEmotionObject/private/StyleToEmotionObjectComposer.tsx

@@ -0,0 +1,20 @@
+import { createContext, createRef, type RefObject, useContext, memo } from 'react';
+import createStyleToEmotionObjectComposer from './createStyleToEmotionObjectComposer';
+
+export type StyleToEmotionObjectContextType = RefObject<(...args: unknown[]) => string>;
+
+const styleToEmotionObjectContext = createContext<StyleToEmotionObjectContextType>(
+  new Proxy(createRef(), {
+    get() {
+      throw new Error('StyleToEmotionObjectContext was used without StyleToEmotionObjectComposer');
+    }
+  })
+);
+
+export function useStyleToEmotionObject() {
+  return useContext(styleToEmotionObjectContext).current;
+}
+
+export const StyleToEmotionObjectComposer = memo(createStyleToEmotionObjectComposer(styleToEmotionObjectContext));
+
+StyleToEmotionObjectComposer.displayName = 'StyleToEmotionObjectComposer';

package/src/hooks/internal/styleToEmotionObject/private/createStyleToEmotionObjectComposer.tsx

@@ -0,0 +1,22 @@
+import React, { type ReactNode, useCallback } from 'react';
+import { useRefFrom } from 'use-ref-from';
+import useEmotion from '../../useEmotion';
+import { type StyleToEmotionObjectContextType } from './StyleToEmotionObjectComposer';
+import { hooks } from 'botframework-webchat-api';
+
+const { useStyleOptions } = hooks;
+
+const createStyleToEmotionObjectComposer =
+  ({ Provider }: React.Context<StyleToEmotionObjectContextType>) =>
+  ({ children, nonce }: Readonly<{ children: ReactNode; nonce: string }>) => {
+    const [{ stylesRoot }] = useStyleOptions();
+
+    const emotion = useEmotion(nonce, stylesRoot);
+    const styleToEmotionObject = useCallback(style => emotion.css(style), [emotion]);
+
+    const styleToEmotionObjectRef = useRefFrom(styleToEmotionObject);
+
+    return <Provider value={styleToEmotionObjectRef}>{styleToEmotionObject && children}</Provider>;
+  };
+
+export default createStyleToEmotionObjectComposer;

package/src/hooks/internal/useEmotion.ts

@@ -0,0 +1,37 @@
+import createEmotion from '@emotion/css/create-instance';
+import { useEffect, useMemo } from 'react';
+import createCSSKey from '../../Utils/createCSSKey';
+
+const sharedEmotionInstances = [];
+
+export default function useEmotion(nonce?: string, container?: Node) {
+  const emotion = useMemo(() => {
+    const sharedEmotion = sharedEmotionInstances.find(
+      ({ sheet }) => sheet.nonce === nonce && sheet.container === container
+    );
+    const emotion = sharedEmotion ?? createEmotion({ container, key: `webchat--css-${createCSSKey()}`, nonce });
+
+    sharedEmotionInstances.push(emotion);
+
+    return emotion;
+  }, [container, nonce]);
+
+  useEffect(
+    () => () => {
+      const index = sharedEmotionInstances.lastIndexOf(emotion);
+
+      // Reduce ref count for the specific emotion instance.
+      ~index && sharedEmotionInstances.splice(index, 1);
+
+      if (!sharedEmotionInstances.includes(emotion) && emotion.sheet?.tags) {
+        // No more hooks use this emotion object, we can clean up the container for stuff we added.
+        for (const child of emotion.sheet.tags) {
+          child.remove();
+        }
+      }
+    },
+    [emotion]
+  );
+
+  return emotion;
+}

package/src/hooks/internal/useFeedbackActions.ts

@@ -0,0 +1,114 @@
+import { getOrgSchemaMessage, OrgSchemaAction, parseAction, WebChatActivity } from 'botframework-webchat-core';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useRefFrom } from 'use-ref-from';
+import dereferenceBlankNodes from '../../Utils/JSONLinkedData/dereferenceBlankNodes';
+
+export default function useFeedbackActions(initialActivity: WebChatActivity): {
+  actions: readonly OrgSchemaAction[];
+  isCompleted: boolean;
+  markActionAsCompleted: (target: OrgSchemaAction) => void;
+  markActionAsSelected: (target: OrgSchemaAction) => void;
+  selectedAction: OrgSchemaAction;
+} {
+  // We can react to activity changes by throwing away our currentFeedbackActions, but saving some code for now.
+  useEffect(() => {
+    console.warn(
+      'botframework-webchat: useFeedbackActions() is skipping changes made to the activity.',
+      initialActivity
+    );
+  }, [initialActivity]);
+
+  const [actions, setActions] = useState<readonly OrgSchemaAction[]>(() => {
+    try {
+      const graph = dereferenceBlankNodes(initialActivity.entities || []);
+      const messageThing = getOrgSchemaMessage(graph);
+
+      const reactActions = Object.freeze(
+        (messageThing?.potentialAction || []).filter(
+          ({ '@type': type }) => type === 'LikeAction' || type === 'DislikeAction'
+        )
+      );
+
+      if (reactActions.length) {
+        return reactActions;
+      }
+
+      const voteActions = Object.freeze(
+        graph.filter(({ type }) => type === 'https://schema.org/VoteAction').map(parseAction)
+      );
+
+      if (voteActions.length) {
+        return voteActions;
+      }
+    } catch {
+      // Intentionally left blank.
+    }
+
+    return Object.freeze([]);
+  });
+
+  const isCompleted = useMemo<boolean>(
+    () => actions.some(action => action.actionStatus === 'CompletedActionStatus'),
+    [actions]
+  );
+
+  const isCompletedRef = useRefFrom(isCompleted);
+
+  const markActionAsSelected = useCallback(
+    (target: OrgSchemaAction) => {
+      if (isCompletedRef.current) {
+        return console.warn(
+          'botframework-webchat internal: useFeedbackActions().markActionAsSelected() must not be called after feedback is completed, ignoring the call.'
+        );
+      }
+
+      setActions(actions =>
+        Object.freeze(
+          actions.map(action =>
+            action === target
+              ? Object.freeze({ ...action, actionStatus: 'ActiveActionStatus' })
+              : action.actionStatus === 'ActiveActionStatus'
+                ? Object.freeze({ ...action, actionStatus: 'PotentialActionStatus' })
+                : action
+          )
+        )
+      );
+    },
+    [isCompletedRef, setActions]
+  );
+
+  const markActionAsCompleted = useCallback(
+    (target: OrgSchemaAction) => {
+      if (isCompletedRef.current) {
+        return console.warn(
+          'botframework-webchat internal: useFeedbackActions().markActionAsCompleted() must not be called after feedback is completed, ignoring the call.'
+        );
+      }
+
+      setActions(actions =>
+        Object.freeze(
+          actions.map(action =>
+            action === target ? Object.freeze({ ...action, actionStatus: 'CompletedActionStatus' }) : action
+          )
+        )
+      );
+    },
+    [isCompletedRef, setActions]
+  );
+
+  const selectedAction = useMemo(
+    () =>
+      actions.find(
+        ({ actionStatus }) => actionStatus === 'ActiveActionStatus' || actionStatus === 'CompletedActionStatus'
+      ),
+    [actions]
+  );
+
+  return {
+    actions,
+    isCompleted,
+    markActionAsCompleted,
+    markActionAsSelected,
+    selectedAction
+  };
+}

package/src/hooks/internal/useInjectStyles.ts

@@ -0,0 +1,86 @@
+import { hooks } from 'botframework-webchat-api';
+import { useEffect } from 'react';
+
+const { useStyleOptions } = hooks;
+
+type InjectedStylesElement = HTMLLinkElement | HTMLStyleElement;
+
+type InjectedStylesInstance = Readonly<{
+  nonce?: string;
+  root: Node;
+  styles: readonly InjectedStylesElement[];
+}>;
+
+const sharedInstances: InjectedStylesInstance[] = [];
+
+function arrayEqual<T>(x: readonly T[], y: readonly T[]): boolean {
+  if (x.length !== y.length) {
+    return false;
+  }
+
+  const set = new Set<T>(x);
+
+  for (const value of y) {
+    if (set.has(value)) {
+      set.delete(value);
+    } else {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export default function useInjectStyles(styles: readonly InjectedStylesElement[], nonce?: string) {
+  for (const style of styles) {
+    if (style.localName !== 'style' && !(style.localName === 'link' && style.getAttribute('rel') === 'stylesheet')) {
+      throw new Error(
+        `botframework-webchat: useInjectStyles() hook supports injecting <link rel="stylesheet"> or <style> only, got <${style.localName}>.`
+      );
+    }
+  }
+
+  const [{ stylesRoot: root }] = useStyleOptions();
+
+  useEffect(() => {
+    if (!root || !styles.length) {
+      return;
+    }
+
+    let instance = sharedInstances.find(
+      instance => arrayEqual(instance.styles, styles) && instance.root === root && instance.nonce === nonce
+    );
+
+    if (!instance) {
+      instance = {
+        nonce,
+        root,
+        styles: styles.some(style => style.parentNode)
+          ? // Deep clone is required for <style>body { ... }</style> (text node inside).
+            styles.map(style => style.cloneNode(true) as InjectedStylesElement)
+          : styles
+      };
+
+      for (const style of instance.styles) {
+        nonce ? style.setAttribute('nonce', nonce) : style.removeAttribute('nonce');
+
+        root.appendChild(style);
+      }
+    }
+
+    // Extraneous push is intentional. It is for ref counting.
+    sharedInstances.push(instance);
+
+    return () => {
+      const index = sharedInstances.lastIndexOf(instance);
+
+      ~index && sharedInstances.splice(index, 1);
+
+      if (!sharedInstances.includes(instance)) {
+        for (const style of instance.styles) {
+          style.remove();
+        }
+      }
+    };
+  }, [nonce, root, styles]);
+}

package/src/hooks/internal/useMemoWithPrevious.ts

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef } from 'react';
 
 import type { DependencyList } from 'react';
 
-export default function useMemoWithPrevious<T>(factory: (prevValue: T) => T, deps: DependencyList): T {
+export default function useMemoWithPrevious<T>(factory: (prevValue: T | undefined) => T, deps: DependencyList): T {
   const prevValueRef = useRef<T>();
   // We are building a `useMemo`-like hook, `deps` is passed as-is and `factory` is not one fo the dependencies.
   // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -1,7 +1,7 @@
-/** @jest-environment jsdom */
-/* eslint-disable react/prop-types */
-/* eslint-disable no-undef */
+/** @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';

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

@@ -2,7 +2,10 @@ import { createPropagation } from 'use-propagate';
 
 export type TranscriptScrollRelativeOptions = { direction: 'down' | 'up'; displacement?: number };
 
-const { useListen: useRegisterScrollRelativeTranscript, usePropagate: useScrollRelativeTranscript } =
-  createPropagation<TranscriptScrollRelativeOptions>();
+const {
+  PropagationScope: ScrollRelativeTranscriptScope,
+  useListen: useRegisterScrollRelativeTranscript,
+  usePropagate: useScrollRelativeTranscript
+} = createPropagation<TranscriptScrollRelativeOptions>();
 
-export { useRegisterScrollRelativeTranscript, useScrollRelativeTranscript };
+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/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 };