botframework-webchat-component 4.18.1-main.20260511.8fcd02a → 4.18.1

package/src/hooks/useStreamingMarkdownWithDefinitions.ts

@@ -1,193 +0,0 @@
-import { cx } from '@emotion/css';
-import { hooks } from 'botframework-webchat-api';
-import type { Definition } from 'mdast';
-import { fromMarkdown } from 'mdast-util-from-markdown';
-import { useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import { useRefFrom } from 'use-ref-from';
-
-import { useTransformHTMLContent } from '../providers/HTMLContentTransformCOR/index';
-import parseDocumentFragmentFromString from '../Utils/parseDocumentFragmentFromString';
-import useWebChatUIContext from './internal/useWebChatUIContext';
-
-import styles from './RenderMarkdown.module.css';
-
-const { useLocalizer, useStyleOptions } = hooks;
-
-type MarkdownLinkDefinition = Readonly<{
-  identifier: string;
-  label?: string;
-  title?: string;
-  url: string;
-}>;
-
-type StreamingNextOptions = Readonly<{
-  container: HTMLElement;
-  containerClassName?: string | undefined;
-  transformFragment?: ((fragment: DocumentFragment) => DocumentFragment) | undefined;
-}>;
-
-type StreamingNextResult = Readonly<{
-  definitions: readonly MarkdownLinkDefinition[];
-}>;
-
-type StreamingRenderer = Readonly<{
-  finalize: (options: StreamingNextOptions) => StreamingNextResult;
-  next: (chunk: string, options: StreamingNextOptions) => void;
-  reset: () => void;
-}>;
-
-const EMPTY_DEFINITIONS: readonly MarkdownLinkDefinition[] = Object.freeze([]);
-
-export default function useStreamingMarkdownWithDefinitions(
-  containerRef: Readonly<{ current: HTMLDivElement | null }>,
-  markdown: string,
-  finalize = false
-): { readonly definitions: readonly MarkdownLinkDefinition[] } {
-  const { renderMarkdown } = useWebChatUIContext();
-  const [styleOptions] = useStyleOptions();
-  const localize = useLocalizer();
-  const transformHTMLContent = useTransformHTMLContent();
-  const styleOptionsRef = useRefFrom(styleOptions);
-
-  const classNames = useStyles(styles);
-
-  const externalLinkAlt = localize('MARKDOWN_EXTERNAL_LINK_ALT');
-
-  const containerClassName = useMemo(
-    () =>
-      cx(classNames['render-markdown'], {
-        [classNames['render-markdown--message-activity']]: true
-      }),
-    [classNames]
-  );
-
-  const hasStreamingSupport = !!renderMarkdown?.createStreamingRenderer;
-
-  const previousMarkdownRef = useRef('');
-
-  const streamingRenderer = useMemo<StreamingRenderer | undefined>(() => {
-    previousMarkdownRef.current = '';
-
-    if (renderMarkdown?.createStreamingRenderer) {
-      return renderMarkdown.createStreamingRenderer(styleOptionsRef.current, { externalLinkAlt });
-    }
-
-    return undefined;
-  }, [externalLinkAlt, renderMarkdown, styleOptionsRef]);
-
-  const [definitions, setDefinitions] = useState<readonly MarkdownLinkDefinition[]>(EMPTY_DEFINITIONS);
-
-  // Reset definitions and markdown ref when the streaming renderer changes.
-  // This must run before the main streaming effect so that a fresh renderer
-  // starts clean, but the streaming effect can still set definitions on the same commit.
-  useLayoutEffect(() => {
-    previousMarkdownRef.current = '';
-
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setDefinitions(EMPTY_DEFINITIONS);
-  }, [streamingRenderer]);
-
-  useLayoutEffect(() => {
-    if (!streamingRenderer) {
-      return;
-    }
-
-    const container = containerRef.current;
-
-    if (!container) {
-      return;
-    }
-
-    if (!markdown) {
-      streamingRenderer.reset();
-      previousMarkdownRef.current = '';
-      container.textContent = '';
-
-      return;
-    }
-
-    const prev = previousMarkdownRef.current;
-    const isAppendOnly = !!prev && markdown.startsWith(prev);
-
-    if (!isAppendOnly) {
-      streamingRenderer.reset();
-    }
-
-    const chunk = isAppendOnly ? markdown.slice(prev.length) : markdown;
-    const options: StreamingNextOptions = {
-      container,
-      containerClassName,
-      transformFragment: transformHTMLContent
-    };
-
-    previousMarkdownRef.current = markdown;
-
-    if (finalize) {
-      if (chunk) {
-        streamingRenderer.next(chunk, options);
-      }
-
-      const { definitions } = streamingRenderer.finalize(options);
-
-      setDefinitions(definitions);
-    } else {
-      streamingRenderer.next(chunk, options);
-    }
-  }, [containerClassName, containerRef, finalize, markdown, streamingRenderer, transformHTMLContent]);
-
-  const fallbackHTML = useMemo<string | undefined>(() => {
-    if (hasStreamingSupport || !renderMarkdown || !markdown) {
-      return undefined;
-    }
-
-    return renderMarkdown(markdown, styleOptionsRef.current, { externalLinkAlt });
-  }, [externalLinkAlt, hasStreamingSupport, markdown, renderMarkdown, styleOptionsRef]);
-
-  const fallbackDefinitions = useMemo(
-    () =>
-      hasStreamingSupport
-        ? EMPTY_DEFINITIONS
-        : fromMarkdown(markdown).children.filter((node): node is Definition => node.type === 'definition'),
-    [hasStreamingSupport, markdown]
-  );
-
-  useLayoutEffect(() => {
-    if (streamingRenderer || fallbackHTML === undefined) {
-      return;
-    }
-
-    const container = containerRef.current;
-
-    if (!container) {
-      return;
-    }
-
-    const documentFragment = transformHTMLContent(parseDocumentFragmentFromString(fallbackHTML));
-    const wrapper = document.createElement('div');
-
-    wrapper.className = containerClassName || '';
-    wrapper.append(...documentFragment.childNodes);
-
-    container.textContent = '';
-    container.appendChild(wrapper);
-  }, [containerClassName, containerRef, fallbackHTML, streamingRenderer, transformHTMLContent]);
-
-  useLayoutEffect(() => {
-    if (streamingRenderer || fallbackHTML !== undefined) {
-      return;
-    }
-
-    const container = containerRef.current;
-
-    if (!container) {
-      return;
-    }
-
-    container.textContent = '';
-  }, [containerRef, fallbackHTML, streamingRenderer]);
-
-  return Object.freeze({ definitions: definitions ?? fallbackDefinitions });
-}
-
-export { type MarkdownLinkDefinition };

package/src/providers/ActivityLogicalGrouping/ActivityLogicalGroupingComposer.ts

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

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

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

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

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

package/src/providers/ActivityLogicalGrouping/useGetGroupState.ts

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

package/src/providers/ActivityLogicalGrouping/useGetLogicalGroupBoundaries.ts

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

package/src/providers/ActivityLogicalGrouping/useGetLogicalGroupKey.ts

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

package/src/providers/ActivityLogicalGrouping/useRemoveLogicalGrouping.ts

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

package/src/providers/ChatHistoryDOM/ChatHistoryDOMComposer.tsx

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

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

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

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

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