botframework-webchat-component 4.18.1-main.20260518.2a3d1d3 → 4.18.2

package/src/decorator/private/WebChatDecorator.tsx

@@ -1,64 +0,0 @@
-/* eslint-disable prefer-arrow-callback */
-import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import {
-  createActivityBorderMiddleware,
-  DecoratorComposer,
-  type DecoratorMiddleware
-} from 'botframework-webchat-api/decorator.js';
-import React, { Fragment, memo } from 'react';
-import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
-
-import DecoratorStylesheet from '../stylesheet/DecoratorStylesheet';
-import BorderFlair from './BorderFlair';
-import BorderLoader from './BorderLoader';
-
-const middleware: readonly DecoratorMiddleware[] = Object.freeze([
-  createActivityBorderMiddleware(function FluentBorderFlair({ request, Next, ...props }) {
-    if (request.modality.has('audio') && request.from === 'bot') {
-      return (
-        <BorderFlair showFlair={true}>
-          <Next {...props} />
-        </BorderFlair>
-      );
-    }
-    return <Next {...props} />;
-  }),
-  createActivityBorderMiddleware(function BorderFlairDecorator({ request, Next, ...props }) {
-    return (
-      <BorderFlair showFlair={props.showFlair ?? request.livestreamingState === 'completing'}>
-        <Next {...props} showFlair={false} />
-      </BorderFlair>
-    );
-  }),
-  createActivityBorderMiddleware(function BorderLoaderDecorator({ request, Next, ...props }) {
-    return (
-      <BorderLoader showLoader={props.showLoader ?? request.livestreamingState === 'preparing'}>
-        <Next {...props} showLoader={false} />
-      </BorderLoader>
-    );
-  })
-]);
-
-const webChatDecoratorPropsSchema = pipe(
-  object({
-    children: optional(reactNode()),
-    nonce: optional(string())
-  }),
-  readonly()
-);
-
-type WebChatDecoratorProps = InferInput<typeof webChatDecoratorPropsSchema>;
-
-function WebChatDecorator(props: WebChatDecoratorProps) {
-  const { children, nonce } = validateProps(webChatDecoratorPropsSchema, props);
-
-  return (
-    <Fragment>
-      <DecoratorStylesheet nonce={nonce} />
-      <DecoratorComposer middleware={middleware}>{children}</DecoratorComposer>
-    </Fragment>
-  );
-}
-
-export default memo(WebChatDecorator);
-export { webChatDecoratorPropsSchema, type WebChatDecoratorProps };

package/src/decorator/stylesheet/DecoratorStylesheet.tsx

@@ -1,33 +0,0 @@
-// TODO: [P2] This component can be replaced by `bindProps`.
-import { InjectStyleElements } from '@msinternal/botframework-webchat-styles/react';
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { useStyleOptions } from 'botframework-webchat-api/hook.js';
-import React, { memo, type FunctionComponent } from 'react';
-import { never, object, optional, pipe, readonly, string, undefinedable, type InferInput } from 'valibot';
-
-import createDecoratorStyleElements from './createDecoratorStyleElements';
-
-const decoratorStylesheetPropsSchema = pipe(
-  object({
-    children: optional(never()),
-    nonce: undefinedable(string())
-  }),
-  readonly()
-);
-
-type DecoratorStylesheetProps = InferInput<typeof decoratorStylesheetPropsSchema>;
-
-const styleElements = createDecoratorStyleElements('component/decorator');
-
-function DecoratorStylesheet(props: DecoratorStylesheetProps) {
-  const { nonce } = validateProps(decoratorStylesheetPropsSchema, props);
-
-  const [{ stylesRoot }] = useStyleOptions();
-
-  return <InjectStyleElements at={stylesRoot} nonce={nonce} styleElements={styleElements} />;
-}
-
-DecoratorStylesheet.displayName = 'DecoratorStylesheet';
-
-export default memo(DecoratorStylesheet as FunctionComponent<DecoratorStylesheetProps>);
-export { decoratorStylesheetPropsSchema, type DecoratorStylesheetProps };

package/src/decorator/stylesheet/createDecoratorStyleElements.ts

@@ -1,8 +0,0 @@
-import { makeCreateStyles } from '@msinternal/botframework-webchat-styles';
-
-const decoratorStyleContent = '@--DECORATOR-STYLES-CONTENT--@';
-
-const createDecoratorStyleElements = makeCreateStyles(decoratorStyleContent);
-
-export default createDecoratorStyleElements;
-export { decoratorStyleContent };

package/src/env.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="@msinternal/botframework-webchat-styles/env" />
-
-// For adding things to `globalThis`, TypeScript need `var`, not `const` or `let`.
-/* eslint-disable no-var */
-declare global {
-  var WEB_CHAT_BUILD_INFO_BUILD_TOOL: string | undefined;
-  var WEB_CHAT_BUILD_INFO_MODULE_FORMAT: string | undefined;
-  var WEB_CHAT_BUILD_INFO_VERSION: string | undefined;
-}
-
-export {};

package/src/hooks/RenderMarkdown.module.css

@@ -1,102 +0,0 @@
-:global(.webchat) .render-markdown {
-  display: contents;
-
-  /* Adaptive Cards context styles */
-  &.render-markdown--adaptive-cards > *:first-child {
-    margin-block-start: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 100%;
-  }
-
-  &.render-markdown--adaptive-cards > *:last-child {
-    margin-block-end: 0;
-  }
-
-  /* Message activity context styles */
-  &.render-markdown--message-activity > *:first-child {
-    margin-block-start: 0;
-  }
-
-  &.render-markdown--message-activity > *:last-child {
-    margin-block-end: 0;
-  }
-
-  /* External link icon */
-  :global(.render-markdown__external-link-icon) {
-    background-image: var(--webchat__icon-url--external-link);
-    height: 0.75em;
-    margin-inline-start: 0.25em;
-  }
-
-  /* Citation button */
-  :global(.render-markdown__citation) {
-    background: transparent;
-    border: 0;
-    cursor: pointer;
-    display: inline-block;
-    font-family: unset;
-    font-size: unset;
-    overflow: hidden;
-    padding: 0;
-    text-decoration: underline;
-    text-overflow: ellipsis;
-    vertical-align: bottom;
-    white-space: nowrap;
-
-    @media (forced-colors: active) {
-      color: LinkText;
-    }
-
-    @media not (forced-colors: active) {
-      color: var(--webchat__color--accent);
-    }
-  }
-
-  /* Pure identifier styles */
-  :global(.render-markdown__pure-identifier) {
-    display: inline-block;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    vertical-align: bottom;
-    white-space: nowrap;
-
-    &::before {
-      content: '[';
-    }
-
-    &::after {
-      content: ']';
-    }
-  }
-
-  /* Math block styles */
-  [data-math-type='block'] {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    margin-block-end: -4px;
-    outline-offset: 2px;
-    overflow-x: auto;
-    overflow-y: clip;
-    padding-block-end: 4px;
-    scrollbar-width: thin;
-  }
-
-  span[data-math-type='block'] {
-    display: inline-flex;
-  }
-
-  /* Math inline styles */
-  [data-math-type='inline'] {
-    align-items: center;
-    display: inline-flex;
-    flex-direction: column;
-  }
-
-  /* Math content wrapper */
-  :is([data-math-type='block'], [data-math-type='inline']) > span {
-    display: contents;
-  }
-}

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

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

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

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

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

@@ -1,22 +0,0 @@
-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/styleToEmotionObject/index.ts

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

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

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

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

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

@@ -1,120 +0,0 @@
-import { getOrgSchemaMessage, WebChatActivity } from 'botframework-webchat-core';
-import { OrgSchemaAction, orgSchemaActionSchema } from 'botframework-webchat-core/org-schema.js';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useRefFrom } from 'use-ref-from';
-import { parse } from 'valibot';
-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.includes('LikeAction') || type.includes('DislikeAction')
-        )
-      );
-
-      if (reactActions.length) {
-        return reactActions;
-      }
-
-      const voteActions = Object.freeze(
-        graph
-          .filter(({ type }) => type === 'https://schema.org/VoteAction')
-          .map(action => parse(orgSchemaActionSchema, action))
-      );
-
-      if (voteActions.length) {
-        return voteActions;
-      }
-    } catch {
-      // Intentionally left blank.
-    }
-
-    return Object.freeze([]);
-  });
-
-  const isCompleted = useMemo<boolean>(
-    () => actions.some(action => action.actionStatus[0] === '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'] } satisfies OrgSchemaAction)
-              : action.actionStatus[0] === 'ActiveActionStatus'
-                ? Object.freeze({ ...action, actionStatus: ['PotentialActionStatus'] } satisfies OrgSchemaAction)
-                : 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'] } satisfies OrgSchemaAction)
-              : action
-          )
-        )
-      );
-    },
-    [isCompletedRef, setActions]
-  );
-
-  const selectedAction = useMemo(
-    () =>
-      actions.find(
-        ({ actionStatus }) => actionStatus[0] === 'ActiveActionStatus' || actionStatus[0] === 'CompletedActionStatus'
-      ),
-    [actions]
-  );
-
-  return {
-    actions,
-    isCompleted,
-    markActionAsCompleted,
-    markActionAsSelected,
-    selectedAction
-  };
-}

package/src/hooks/internal/useNonce.ts

@@ -1,7 +0,0 @@
-import useWebChatUIContext from './useWebChatUIContext';
-
-export default function useNonce(): readonly [string | undefined] {
-  const { nonce } = useWebChatUIContext();
-
-  return Object.freeze([nonce]);
-}

package/src/hooks/internal/useSanitizeHrefCallback.ts

@@ -1,37 +0,0 @@
-import { useCallback } from 'react';
-import { useTransformHTMLContent } from '../../providers/HTMLContentTransformCOR';
-
-type LinkInfo = {
-  openInNewTab: boolean;
-  originalHref: string;
-  sanitizedHref: string | undefined;
-};
-
-export default function useSanitizeHrefCallback(): (href: string) => LinkInfo {
-  // Although clumsy, we are using HTML content transformer for sanitizing links.
-  // This make sure we have a single centralized facility for sanitization.
-  const transformHTMLContent = useTransformHTMLContent();
-
-  return useCallback(
-    href => {
-      const anchorElement = document.createElement('a');
-
-      anchorElement.setAttribute('href', href || '');
-
-      const fragment = document.createDocumentFragment();
-
-      fragment.append(anchorElement);
-
-      const transformedFragment = transformHTMLContent(fragment);
-
-      const transformedAnchorElement = transformedFragment.querySelector('a');
-
-      return {
-        openInNewTab: !!transformedAnchorElement?.getAttribute('target'),
-        originalHref: href,
-        sanitizedHref: transformedAnchorElement?.getAttribute('href') || undefined
-      };
-    },
-    [transformHTMLContent]
-  );
-}