botframework-webchat-component 4.18.1 → 4.19.0

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

@@ -1,142 +1,218 @@
+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 {
-  getOrgSchemaMessage,
-  onErrorResumeNext,
-  parseClaim,
+  orgSchemaClaimSchema,
   type OrgSchemaClaim,
-  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';
+  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';
 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 useRenderMarkdownAsHTML from '../../../hooks/useRenderMarkdownAsHTML';
-import useStyleSet from '../../../hooks/useStyleSet';
+import getFirstBaseOfSoftwareSourceCode from '../../../Utils/orgSchema/getFirstBaseOfSoftwareSourceCode';
+import useSanitizeHrefCallback from '../../../hooks/internal/useSanitizeHrefCallback';
+import useStreamingMarkdownWithDefinitions, {
+  type MarkdownLinkDefinition
+} from '../../../hooks/useStreamingMarkdownWithDefinitions';
 import useShowModal from '../../../providers/ModalDialog/useShowModal';
-import { type PropsOf } from '../../../types/PropsOf';
+import ActivityCopyButton from './ActivityCopyButton';
+import ActivityViewCodeButton from './ActivityViewCodeButton';
 import CitationModalContext from './CitationModalContent';
 import MessageSensitivityLabel, { type MessageSensitivityLabelProps } from './MessageSensitivityLabel';
+import isAIGeneratedActivity from './isAIGeneratedActivity';
 import isHTMLButtonElement from './isHTMLButtonElement';
 
-const { useLocalizer } = hooks;
+import textContentStyles from '../TextContent.module.css';
+import citationModalStyles from './CitationModal.module.css';
+
+const { useLocalizer, useStyleOptions } = hooks;
 
 type Entry = {
   claim?: OrgSchemaClaim | undefined;
-  handleClick?: (() => void) | undefined;
+  /** Do not use the key as URL, it is not sanitized. */
   key: string;
-  markdownDefinition: Definition;
-  url?: string | undefined;
-};
+  markdownDefinition: MarkdownLinkDefinition;
+} & (
+  | {
+      // Inline citation.
+      handleClick: () => void;
+      sanitizedHref?: undefined;
+    }
+  | {
+      // Citation link.
+      handleClick?: undefined;
+      sanitizedHref: string;
+    }
+);
 
-type Props = Readonly<{
-  activity: WebChatActivity;
-  markdown: string;
-}>;
+const markdownTextContentPropsSchema = pipe(
+  object({
+    activity: custom<WebChatActivity>(() => true),
+    children: optional(reactNode()),
+    markdown: string()
+  }),
+  readonly()
+);
+
+type MarkdownTextContentProps = InferInput<typeof markdownTextContentPropsSchema>;
 
 function isCitationURL(url: string): boolean {
   return onErrorResumeNext(() => new URL(url))?.protocol === 'cite:';
 }
 
-const MarkdownTextContent = memo(({ activity, markdown }: Props) => {
-  const [
-    {
-      citationModalDialog: citationModalDialogStyleSet,
-      renderMarkdown: renderMarkdownStyleSet,
-      textContent: textContentStyleSet
-    }
-  ] = useStyleSet();
+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 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, text, altText) => {
+    (title: string | undefined, text: string, altText: string | undefined) => {
       showModal(() => <CitationModalContext headerText={title} markdown={text} />, {
         'aria-label': altText || title || citationModalDialogLabel,
-        className: classNames('webchat__citation-modal-dialog', citationModalDialogStyleSet)
+        className: citationModalClassNames['citation-modal-dialog']
       });
     },
-    [citationModalDialogStyleSet, citationModalDialogLabel, showModal]
+    [citationModalClassNames, citationModalDialogLabel, showModal]
   );
 
+  const sanitizeHref = useSanitizeHrefCallback();
+
   const entries = useMemo<readonly Entry[]>(
     () =>
       Object.freeze(
-        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'])
-                ? () =>
+        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: () =>
                     showClaimModal(
-                      rootLevelClaim.name ?? markdownDefinition.title,
-                      rootLevelClaim.text,
-                      rootLevelClaim.alternateName
-                    )
-                : undefined,
-              markdownDefinition
-            };
-          }
-
-          return {
-            key: markdownDefinition.url,
-            markdownDefinition,
-            url: markdownDefinition.url
-          };
-        })
+                      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)
       ),
-    [graph, markdownDefinitions, messageThing, showClaimModal]
+    [graph, markdownDefinitions, messageThing, sanitizeHref, showClaimModal]
   );
 
   const entriesRef = useRefFrom(entries);
@@ -165,46 +241,49 @@ const MarkdownTextContent = memo(({ activity, markdown }: Props) => {
     [entriesRef]
   );
 
-  const messageSensitivityLabelProps = useMemo<PropsOf<typeof MessageSensitivityLabel> | undefined>(() => {
-    const usageInfo = messageThing?.usageInfo;
+  const messageSensitivityLabelProps = useMemo<MessageSensitivityLabelProps | undefined>(() => {
+    const usageInfo = messageThing?.usageInfo[0];
 
     if (usageInfo) {
-      const { pattern } = usageInfo;
-      const encryptionStatus = !!usageInfo.keywords?.find(keyword => keyword === 'encrypted-content');
+      const [firstPattern] = usageInfo.pattern;
+      const encryptionStatus = !!usageInfo.keywords.find(keyword => keyword === 'encrypted-content');
 
       return {
         color:
-          pattern &&
-          pattern.inDefinedTermSet === 'https://www.w3.org/TR/css-color-4/' &&
-          pattern.name === 'color' &&
-          pattern.termCode,
+          firstPattern &&
+          firstPattern.inDefinedTermSet[0] === 'https://www.w3.org/TR/css-color-4/' &&
+          firstPattern.name[0] === 'color' &&
+          firstPattern.termCode[0],
         isEncrypted: encryptionStatus,
-        name: usageInfo.name,
-        title: usageInfo.description
-      };
+        name: usageInfo.name[0],
+        title: usageInfo.description[0]
+      } satisfies MessageSensitivityLabelProps;
     }
   }, [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) =>
-    entry.claim?.name ?? entry.claim?.appearance?.name ?? entry.markdownDefinition.title;
+  const getEntryMainText = (entry: Entry): string | undefined =>
+    entry.claim?.name[0] ?? entry.claim?.appearance[0]?.name[0] ?? (entry.markdownDefinition.title || undefined);
 
   // Optional alternate name for the entry, used as a subtitle beneath the link
-  const getEntryBadgeName = (entry: Entry) => entry.claim?.appearance?.usageInfo?.name;
+  const getEntryBadgeName = (entry: Entry): string | undefined => entry.claim?.appearance[0]?.usageInfo[0]?.name[0];
 
   // Secondary text describing the citation, used in the a11y description (i.e. the div's title attribute)
-  const getEntryDescription = (entry: Entry) => entry.claim?.appearance?.usageInfo?.description;
+  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]);
 
   return (
-    <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}
-      />
+    <div className={cx(textContentClassNames['text-content'], textContentClassNames['text-content--is-markdown'])}>
+      <div className={cx(textContentClassNames['text-content__markdown'])} onClick={handleClick} ref={contentRef} />
+      {children}
       {!!entries.length && (
         <LinkDefinitions<MessageSensitivityLabelProps>
           accessoryComponentType={messageSensitivityLabelProps && MessageSensitivityLabel}
@@ -217,16 +296,34 @@ const MarkdownTextContent = memo(({ activity, markdown }: Props) => {
               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 MarkdownTextContent;
+export default memo(MarkdownTextContent);
+export { markdownTextContentPropsSchema, type MarkdownTextContentProps };

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

@@ -0,0 +1,39 @@
+import React, { memo, useMemo } from 'react';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import { useRenderMarkdownAsHTML } from '../../../hooks';
+
+const markdownablePropsSchema = pipe(
+  object({
+    className: optional(string()),
+    id: optional(string()),
+    text: string()
+  }),
+  readonly()
+);
+
+type MarkdownableProps = InferInput<typeof markdownablePropsSchema>;
+
+function Markdownable({ className, id, text }: MarkdownableProps) {
+  const renderMarkdownAsHTML = useRenderMarkdownAsHTML('message activity');
+
+  const innerHTML = useMemo<Readonly<{ __html: string }> | undefined>(
+    () => Object.freeze({ __html: renderMarkdownAsHTML?.(text) }),
+    [text, renderMarkdownAsHTML]
+  );
+
+  return innerHTML ? (
+    // "id" is required for "aria-labelledby"
+    // eslint-disable-next-line react/forbid-dom-props, react/no-danger
+    <span className={className} dangerouslySetInnerHTML={innerHTML} id={id} />
+  ) : (
+    // "id" is required for "aria-labelledby"
+    // eslint-disable-next-line react/forbid-dom-props
+    <span className={className} id={id}>
+      {text}
+    </span>
+  );
+}
+
+export default memo(Markdownable);
+export { markdownablePropsSchema, type MarkdownableProps };

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

@@ -1,38 +1,51 @@
-import classNames from 'classnames';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
 import React, { memo, useMemo } from 'react';
+import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
 import ShieldIcon from './ShieldIcon';
 
-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 };
+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 };

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

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