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

package/src/Attachment/Text/private/MarkdownTextContent.tsx

@@ -1,218 +1,142 @@
-import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import { hooks } from 'botframework-webchat-api';
-import { getOrgSchemaMessage, onErrorResumeNext, type WebChatActivity } from 'botframework-webchat-core';
 import {
-  orgSchemaClaimSchema,
+  getOrgSchemaMessage,
+  onErrorResumeNext,
+  parseClaim,
   type OrgSchemaClaim,
-  type OrgSchemaCreativeWork,
-  type OrgSchemaSoftwareSourceCode
-} from 'botframework-webchat-core/org-schema.js';
-import cx from 'classnames';
-import React, { memo, useCallback, useMemo, useRef, type MouseEventHandler } from 'react';
+  type WebChatActivity
+} from 'botframework-webchat-core';
+import classNames from 'classnames';
+import type { Definition } from 'mdast';
+import { fromMarkdown } from 'mdast-util-from-markdown';
+import React, { memo, useCallback, useMemo, type MouseEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
-import { custom, object, optional, parse, pipe, readonly, string, type InferInput } from 'valibot';
 
-import ActivityFeedback from '../../../ActivityFeedback/ActivityFeedback';
 import { LinkDefinitionItem, LinkDefinitions } from '../../../LinkDefinition/index';
 import dereferenceBlankNodes from '../../../Utils/JSONLinkedData/dereferenceBlankNodes';
-import getFirstBaseOfSoftwareSourceCode from '../../../Utils/orgSchema/getFirstBaseOfSoftwareSourceCode';
-import useSanitizeHrefCallback from '../../../hooks/internal/useSanitizeHrefCallback';
-import useStreamingMarkdownWithDefinitions, {
-  type MarkdownLinkDefinition
-} from '../../../hooks/useStreamingMarkdownWithDefinitions';
+import useRenderMarkdownAsHTML from '../../../hooks/useRenderMarkdownAsHTML';
+import useStyleSet from '../../../hooks/useStyleSet';
 import useShowModal from '../../../providers/ModalDialog/useShowModal';
-import ActivityCopyButton from './ActivityCopyButton';
-import ActivityViewCodeButton from './ActivityViewCodeButton';
+import { type PropsOf } from '../../../types/PropsOf';
 import CitationModalContext from './CitationModalContent';
 import MessageSensitivityLabel, { type MessageSensitivityLabelProps } from './MessageSensitivityLabel';
-import isAIGeneratedActivity from './isAIGeneratedActivity';
 import isHTMLButtonElement from './isHTMLButtonElement';
 
-import textContentStyles from '../TextContent.module.css';
-import citationModalStyles from './CitationModal.module.css';
-
-const { useLocalizer, useStyleOptions } = hooks;
+const { useLocalizer } = hooks;
 
 type Entry = {
   claim?: OrgSchemaClaim | undefined;
-  /** Do not use the key as URL, it is not sanitized. */
+  handleClick?: (() => void) | undefined;
   key: string;
-  markdownDefinition: MarkdownLinkDefinition;
-} & (
-  | {
-      // Inline citation.
-      handleClick: () => void;
-      sanitizedHref?: undefined;
-    }
-  | {
-      // Citation link.
-      handleClick?: undefined;
-      sanitizedHref: string;
-    }
-);
+  markdownDefinition: Definition;
+  url?: string | undefined;
+};
 
-const markdownTextContentPropsSchema = pipe(
-  object({
-    activity: custom<WebChatActivity>(() => true),
-    children: optional(reactNode()),
-    markdown: string()
-  }),
-  readonly()
-);
-
-type MarkdownTextContentProps = InferInput<typeof markdownTextContentPropsSchema>;
+type Props = Readonly<{
+  activity: WebChatActivity;
+  markdown: string;
+}>;
 
 function isCitationURL(url: string): boolean {
   return onErrorResumeNext(() => new URL(url))?.protocol === 'cite:';
 }
 
-function isCitingInline(claim: OrgSchemaClaim): claim is OrgSchemaClaim & {
-  appearance: [OrgSchemaCreativeWork & { readonly url: never[] }];
-} {
-  return !!claim.appearance.length && !claim.appearance[0].url.length;
-}
-
-function MarkdownTextContent(props: MarkdownTextContentProps) {
-  const { activity, children, markdown } = validateProps(markdownTextContentPropsSchema, props);
-
-  const citationModalClassNames = useStyles(citationModalStyles);
-  const textContentClassNames = useStyles(textContentStyles);
-
-  const [{ feedbackActionsPlacement }] = useStyleOptions();
-  const contentRef = useRef<HTMLDivElement>(null);
+const MarkdownTextContent = memo(({ activity, markdown }: Props) => {
+  const [
+    {
+      citationModalDialog: citationModalDialogStyleSet,
+      renderMarkdown: renderMarkdownStyleSet,
+      textContent: textContentStyleSet
+    }
+  ] = useStyleSet();
   const localize = useLocalizer();
   const graph = useMemo(() => dereferenceBlankNodes(activity.entities || []), [activity.entities]);
+  const renderMarkdownAsHTML = useRenderMarkdownAsHTML('message activity');
   const showModal = useShowModal();
 
-  const { definitions: markdownDefinitions } = useStreamingMarkdownWithDefinitions(
-    contentRef,
-    markdown,
-    activity.type === 'message'
-  );
-
   const messageThing = useMemo(() => getOrgSchemaMessage(graph), [graph]);
 
   const citationModalDialogLabel = localize('CITATION_MODEL_DIALOG_ALT');
 
+  if (!renderMarkdownAsHTML) {
+    throw new Error('botframework-webchat: assert failed for renderMarkdownAsHTML');
+  }
+
+  const dangerouslySetInnerHTML = useMemo(
+    () => ({ __html: markdown ? renderMarkdownAsHTML(markdown) : '' }),
+    [renderMarkdownAsHTML, markdown]
+  );
+
+  const markdownDefinitions = useMemo(
+    () => fromMarkdown(markdown).children.filter((node): node is Definition => node.type === 'definition'),
+    [markdown]
+  );
+
   const showClaimModal = useCallback(
-    (title: string | undefined, text: string, altText: string | undefined) => {
+    (title, text, altText) => {
       showModal(() => <CitationModalContext headerText={title} markdown={text} />, {
         'aria-label': altText || title || citationModalDialogLabel,
-        className: citationModalClassNames['citation-modal-dialog']
+        className: classNames('webchat__citation-modal-dialog', citationModalDialogStyleSet)
       });
     },
-    [citationModalClassNames, citationModalDialogLabel, showModal]
+    [citationModalDialogStyleSet, citationModalDialogLabel, showModal]
   );
 
-  const sanitizeHref = useSanitizeHrefCallback();
-
   const entries = useMemo<readonly Entry[]>(
     () =>
       Object.freeze(
-        markdownDefinitions
-          .map<Entry | undefined>(markdownDefinition => {
-            let messageCitation: OrgSchemaClaim | undefined = messageThing?.citation
-              .map(claim => parse(orgSchemaClaimSchema, claim))
-              .find(({ position }) => '' + position[0] === markdownDefinition.identifier);
-
-            if (!messageCitation) {
-              const rootLevelClaim = graph
-                .filter(({ type }) => type === 'https://schema.org/Claim')
-                .map(claim => parse(orgSchemaClaimSchema, claim))
-                .find(claim => claim['@id'] === markdownDefinition.url);
-
-              if (rootLevelClaim) {
-                console.warn(
-                  'botframework-webchat: Root-level `Claim` thing is deprecated, please use `Message[@id=""].citation[@type="Claim"]` instead. It will be removed on or after 2027-08-29.'
-                );
-
-                messageCitation = parse(orgSchemaClaimSchema, {
-                  '@context': 'https://schema.org',
-                  '@id': markdownDefinition.url,
-                  '@type': 'Claim',
-                  alternateName: rootLevelClaim.alternateName,
-                  appearance: [
-                    isCitationURL(rootLevelClaim['@id'])
-                      ? {
-                          '@type': 'DigitalDocument',
-                          name: rootLevelClaim.name,
-                          text: rootLevelClaim.text
-                        }
-                      : {
-                          '@type': 'DigitalDocument',
-                          url: markdownDefinition.url
-                        }
-                  ]
-                } satisfies InferInput<typeof orgSchemaClaimSchema>);
-              }
-            }
-
-            const { url } = markdownDefinition;
-            const { sanitizedHref } = sanitizeHref(markdownDefinition.url);
-
-            // After HTML content transform (or sanitization), the link could be gone.
-            // In that case, Markdown will not render the link. We also need to remove it from citation.
-            if (messageCitation) {
-              // For inline citation, the URL is an opaque string to us.
-              // We don't care if it's sanitized or not.
-              if (isCitingInline(messageCitation)) {
-                const { appearance } = messageCitation;
-
-                return {
-                  claim: messageCitation,
-                  key: url,
-                  handleClick: () =>
+        markdownDefinitions.map<Entry>(markdownDefinition => {
+          const messageCitation = messageThing?.citation
+            ?.map(parseClaim)
+            .find(({ position }) => '' + position === markdownDefinition.identifier);
+
+          if (messageCitation) {
+            return {
+              claim: messageCitation,
+              key: markdownDefinition.url,
+              handleClick:
+                messageCitation?.appearance && !messageCitation.appearance.url
+                  ? () =>
+                      showClaimModal(
+                        messageCitation.appearance.name ?? markdownDefinition.title,
+                        messageCitation.appearance.text,
+                        messageCitation.alternateName
+                      )
+                  : undefined,
+              markdownDefinition,
+              url: messageCitation?.appearance ? messageCitation.appearance.url : markdownDefinition.url
+            };
+          }
+
+          const rootLevelClaim = graph
+            .filter(({ type }) => type === 'https://schema.org/Claim')
+            .map(parseClaim)
+            .find(({ '@id': id }) => id === markdownDefinition.url);
+
+          if (rootLevelClaim) {
+            return {
+              claim: rootLevelClaim,
+              key: markdownDefinition.url,
+              handleClick: isCitationURL(rootLevelClaim['@id'])
+                ? () =>
                     showClaimModal(
-                      appearance[0]?.name[0] ?? markdownDefinition.title,
-                      appearance[0]?.text[0],
-                      messageCitation.alternateName[0]
-                    ),
-                  markdownDefinition
-                };
-              }
-
-              // Not inline citation, we care about the URL.
-              // Warn if it break single source of truth principle, we still use the URL from Markdown.
-              if (messageCitation.appearance[0]?.url[0] && messageCitation.appearance[0]?.url[0] !== url) {
-                console.warn(
-                  'botframework-webchat: When "Message.citation[].url" is set in entities, it must match its corresponding URL in Markdown link reference definition',
-                  {
-                    citation: messageCitation,
-                    markdownDefinition,
-                    url: {
-                      citation: messageCitation.appearance[0]?.url[0],
-                      markdown: url
-                    }
-                  }
-                );
-              }
-
-              if (sanitizedHref) {
-                // URL is sanitized and is not inline citation.
-                return {
-                  claim: messageCitation,
-                  key: markdownDefinition.url,
-                  markdownDefinition,
-                  sanitizedHref: markdownDefinition.url // Single source of truth.
-                };
-              }
-
-              // Not sanitized and not inline, remove it from citation.
-              return;
-            }
-
-            return (
-              sanitizedHref && {
-                key: markdownDefinition.url,
-                markdownDefinition,
-                sanitizedHref
-              }
-            );
-          })
-          .filter(Boolean)
+                      rootLevelClaim.name ?? markdownDefinition.title,
+                      rootLevelClaim.text,
+                      rootLevelClaim.alternateName
+                    )
+                : undefined,
+              markdownDefinition
+            };
+          }
+
+          return {
+            key: markdownDefinition.url,
+            markdownDefinition,
+            url: markdownDefinition.url
+          };
+        })
       ),
-    [graph, markdownDefinitions, messageThing, sanitizeHref, showClaimModal]
+    [graph, markdownDefinitions, messageThing, showClaimModal]
   );
 
   const entriesRef = useRefFrom(entries);
@@ -241,49 +165,46 @@ function MarkdownTextContent(props: MarkdownTextContentProps) {
     [entriesRef]
   );
 
-  const messageSensitivityLabelProps = useMemo<MessageSensitivityLabelProps | undefined>(() => {
-    const usageInfo = messageThing?.usageInfo[0];
+  const messageSensitivityLabelProps = useMemo<PropsOf<typeof MessageSensitivityLabel> | undefined>(() => {
+    const usageInfo = messageThing?.usageInfo;
 
     if (usageInfo) {
-      const [firstPattern] = usageInfo.pattern;
-      const encryptionStatus = !!usageInfo.keywords.find(keyword => keyword === 'encrypted-content');
+      const { pattern } = usageInfo;
+      const encryptionStatus = !!usageInfo.keywords?.find(keyword => keyword === 'encrypted-content');
 
       return {
         color:
-          firstPattern &&
-          firstPattern.inDefinedTermSet[0] === 'https://www.w3.org/TR/css-color-4/' &&
-          firstPattern.name[0] === 'color' &&
-          firstPattern.termCode[0],
+          pattern &&
+          pattern.inDefinedTermSet === 'https://www.w3.org/TR/css-color-4/' &&
+          pattern.name === 'color' &&
+          pattern.termCode,
         isEncrypted: encryptionStatus,
-        name: usageInfo.name[0],
-        title: usageInfo.description[0]
-      } satisfies MessageSensitivityLabelProps;
+        name: usageInfo.name,
+        title: usageInfo.description
+      };
     }
   }, [messageThing]);
 
   // The main text of the citation entry (e.g. the title of the document). Used as the content of the main link and, if it exists, the header of the popup window.
-  const getEntryMainText = (entry: Entry): string | undefined =>
-    entry.claim?.name[0] ?? entry.claim?.appearance[0]?.name[0] ?? (entry.markdownDefinition.title || undefined);
+  const getEntryMainText = (entry: Entry) =>
+    entry.claim?.name ?? entry.claim?.appearance?.name ?? entry.markdownDefinition.title;
 
   // Optional alternate name for the entry, used as a subtitle beneath the link
-  const getEntryBadgeName = (entry: Entry): string | undefined => entry.claim?.appearance[0]?.usageInfo[0]?.name[0];
+  const getEntryBadgeName = (entry: Entry) => entry.claim?.appearance?.usageInfo?.name;
 
   // Secondary text describing the citation, used in the a11y description (i.e. the div's title attribute)
-  const getEntryDescription = (entry: Entry): string | undefined =>
-    entry.claim?.appearance[0]?.usageInfo[0]?.description[0];
-
-  const firstSoftwareSourceCodeBase = useMemo<OrgSchemaSoftwareSourceCode | undefined>(() => {
-    const firstSoftwareSourceCodeBase = getFirstBaseOfSoftwareSourceCode(messageThing);
-
-    if (firstSoftwareSourceCodeBase?.programmingLanguage[0]) {
-      return firstSoftwareSourceCodeBase;
-    }
-  }, [messageThing]);
+  const getEntryDescription = (entry: Entry) => entry.claim?.appearance?.usageInfo?.description;
 
   return (
-    <div className={cx(textContentClassNames['text-content'], textContentClassNames['text-content--is-markdown'])}>
-      <div className={cx(textContentClassNames['text-content__markdown'])} onClick={handleClick} ref={contentRef} />
-      {children}
+    <div
+      className={classNames('webchat__text-content', 'webchat__text-content--is-markdown', textContentStyleSet + '')}
+    >
+      <div
+        className={classNames('webchat__text-content__markdown', renderMarkdownStyleSet + '')}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={dangerouslySetInnerHTML}
+        onClick={handleClick}
+      />
       {!!entries.length && (
         <LinkDefinitions<MessageSensitivityLabelProps>
           accessoryComponentType={messageSensitivityLabelProps && MessageSensitivityLabel}
@@ -296,34 +217,16 @@ function MarkdownTextContent(props: MarkdownTextContentProps) {
               identifier={entry.markdownDefinition.label}
               key={entry.key}
               onClick={entry.handleClick}
-              sanitizedHref={entry.sanitizedHref}
               text={getEntryMainText(entry)}
+              url={entry.url}
             />
           ))}
         </LinkDefinitions>
       )}
-      <div className={textContentClassNames['text-content__activity-actions']}>
-        {activity.type === 'message' &&
-        firstSoftwareSourceCodeBase?.text &&
-        !messageThing?.keywords.includes('Collapsible') ? (
-          <ActivityViewCodeButton
-            className="text-content__activity-view-code-button"
-            code={firstSoftwareSourceCodeBase.text[0]}
-            isAIGenerated={isAIGeneratedActivity(activity)}
-            language={firstSoftwareSourceCodeBase.programmingLanguage[0]}
-            title={firstSoftwareSourceCodeBase.programmingLanguage[0]}
-          />
-        ) : null}
-        {activity.type === 'message' && activity.text && messageThing?.keywords.includes('AllowCopy') ? (
-          <ActivityCopyButton className="text-content__activity-copy-button" targetRef={contentRef} />
-        ) : null}
-        {activity.type === 'message' && feedbackActionsPlacement === 'activity-actions' && (
-          <ActivityFeedback activity={activity} />
-        )}
-      </div>
     </div>
   );
-}
+});
+
+MarkdownTextContent.displayName = 'MarkdownTextContent';
 
-export default memo(MarkdownTextContent);
-export { markdownTextContentPropsSchema, type MarkdownTextContentProps };
+export default MarkdownTextContent;

package/src/Attachment/Text/private/MessageSensitivityLabel.tsx

@@ -1,51 +1,38 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import cx from 'classnames';
+import classNames from 'classnames';
 import React, { memo, useMemo } from 'react';
-import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
 import ShieldIcon from './ShieldIcon';
 
-import styles from '../../../LinkDefinition/LinkDefinitions.module.css';
-
-const messageSensitivityLabelPropsSchema = pipe(
-  object({
-    className: optional(string()),
-    color: optional(string()),
-    isEncrypted: optional(boolean()),
-    name: optional(string()),
-    title: optional(string())
-  }),
-  readonly()
-);
-
-type MessageSensitivityLabelProps = InferInput<typeof messageSensitivityLabelPropsSchema>;
-
-function MessageSensitivityLabel(props: MessageSensitivityLabelProps) {
-  const { className, color, isEncrypted, name, title } = validateProps(messageSensitivityLabelPropsSchema, props);
-
-  const classNames = useStyles(styles);
-
-  return (
-    <div
-      className={cx(
-        classNames['link-definitions__message-sensitivity-label'],
-        {
-          'link-definitions__message-sensitivity-label--is-encrypted': isEncrypted
-        },
-        className
-      )}
-      title={useMemo(() => [name, title].filter(Boolean).join('\n\n'), [name, title])}
-    >
-      <ShieldIcon
-        className={classNames['link-definitions__message-sensitivity-label-icon']}
-        fillColor={color}
-        hasLock={isEncrypted}
-      />
-      <span className={classNames['link-definitions__message-sensitivity-label-text']}>{name}</span>
-    </div>
-  );
-}
-
-export default memo(MessageSensitivityLabel);
-export { messageSensitivityLabelPropsSchema, type MessageSensitivityLabelProps };
+type MessageSensitivityLabelProps = Readonly<{
+  className?: string | undefined;
+  color?: string | undefined;
+  isEncrypted?: boolean | undefined;
+  name?: string | undefined;
+  title?: string | undefined;
+}>;
+
+const MessageSensitivityLabel = memo(({ className, color, isEncrypted, name, title }: MessageSensitivityLabelProps) => (
+  <div
+    className={classNames(
+      'webchat__link-definitions__message-sensitivity-label',
+      {
+        'webchat__link-definitions__message-sensitivity-label--is-encrypted': isEncrypted
+      },
+      className
+    )}
+    title={useMemo(() => [name, title].filter(Boolean).join('\n\n'), [name, title])}
+  >
+    <ShieldIcon
+      className="webchat__link-definitions__message-sensitivity-label-icon"
+      fillColor={color}
+      hasLock={isEncrypted}
+    />
+    <span className="webchat__link-definitions__message-sensitivity-label-text">{name}</span>
+  </div>
+));
+
+MessageSensitivityLabel.displayName = 'MessageSensitivityLabel';
+
+export default MessageSensitivityLabel;
+
+export type { MessageSensitivityLabelProps };

package/src/Attachment/Text/private/PlainTextContent.tsx

@@ -1,37 +1,27 @@
-import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import cx from 'classnames';
-import React, { Fragment, memo } from 'react';
-import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+import classNames from 'classnames';
+import React, { type FC, Fragment, memo } from 'react';
 
-import styles from '../TextContent.module.css';
+import useStyleSet from '../../../hooks/useStyleSet';
 
-const plainTextContentPropsSchema = pipe(
-  object({
-    children: optional(reactNode()),
-    text: string()
-  }),
-  readonly()
-);
+type Props = Readonly<{ text: string }>;
 
-type PlainTextContentProps = InferInput<typeof plainTextContentPropsSchema>;
-
-function PlainTextContent(props: PlainTextContentProps) {
-  const { children, text } = validateProps(plainTextContentPropsSchema, props);
-
-  const classNames = useStyles(styles);
+const PlainTextContent: FC<Props> = memo(({ text }: Props) => {
+  const [{ textContent: textContentStyleSet }] = useStyleSet();
 
   return (
     <Fragment>
       {(text || '').split('\n').map(line => (
-        <p className={cx(classNames['text-content'])} key={line}>
+        <p
+          className={classNames('webchat__text-content', 'webchat__text-content--is-plain', textContentStyleSet + '')}
+          key={line}
+        >
           {line.trim()}
         </p>
       ))}
-      {children && <div className={classNames['text-content']}>{children}</div>}
     </Fragment>
   );
-}
+});
+
+PlainTextContent.displayName = 'PlainTextContent';
 
-export default memo(PlainTextContent);
-export { plainTextContentPropsSchema, type PlainTextContentProps };
+export default PlainTextContent;