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

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

@@ -0,0 +1,67 @@
+import { hooks } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
+import classNames from 'classnames';
+import React, { memo, useCallback } from 'react';
+import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import useStyleSet from '../../../hooks/useStyleSet';
+import useShowModal from '../../../providers/ModalDialog/useShowModal';
+import LocalizedString from '../../../Utils/LocalizedString';
+import ActivityButton from './ActivityButton';
+import CodeContent from './CodeContent';
+
+const CODE_ICON_URL = `data:image/svg+xml;utf8,${encodeURIComponent('<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.94 4.05a.75.75 0 0 0-1.38-.6l-5.5 12.5a.75.75 0 1 0 1.38.6l5.5-12.5Zm1.35 9.8a.75.75 0 0 1-.13-1.06L16.3 10l-2.14-2.8a.75.75 0 0 1 1.18-.9l2.5 3.24c.21.27.21.65 0 .92l-2.5 3.25a.75.75 0 0 1-1.05.13Zm-8.58-7.7c.33.26.39.73.13 1.06L3.7 10l2.14 2.8a.75.75 0 1 1-1.18.9l-2.5-3.24a.75.75 0 0 1 0-.92l2.5-3.25a.75.75 0 0 1 1.05-.13Z" fill="currentColor"></path></svg>')}`;
+
+const { useLocalizer } = hooks;
+
+const activityViewCodeButtonPropsSchema = pipe(
+  object({
+    className: optional(string()),
+    code: string(),
+    language: optional(string()),
+    isAIGenerated: boolean(),
+    title: string()
+  }),
+  readonly()
+);
+
+type ActivityViewCodeButtonProps = InferInput<typeof activityViewCodeButtonPropsSchema>;
+
+const ActivityViewCodeButton = (props: ActivityViewCodeButtonProps) => {
+  const { className, code, language, title, isAIGenerated } = validateProps(activityViewCodeButtonPropsSchema, props);
+
+  const [{ activityButton, viewCodeDialog }] = useStyleSet();
+  const showModal = useShowModal();
+  const localize = useLocalizer();
+
+  const showCodeModal = useCallback(() => {
+    showModal(
+      () => (
+        <CodeContent code={code} language={language} title={title}>
+          {isAIGenerated && (
+            <div className={'webchat__view-code-dialog__footer'}>
+              <LocalizedString linkClassName={'webchat__view-code-dialog__link'} stringIds="ACTIVITY_CODE_CAUTION" />
+            </div>
+          )}
+        </CodeContent>
+      ),
+      {
+        className: classNames('webchat__view-code-dialog', viewCodeDialog),
+        'aria-label': localize('ACTIVITY_CODE_ALT', title ?? '')
+      }
+    );
+  }, [code, isAIGenerated, language, localize, showModal, title, viewCodeDialog]);
+
+  return (
+    <ActivityButton
+      className={classNames(activityButton, 'webchat__activity-button', className)}
+      data-testid="view code button"
+      iconURL={CODE_ICON_URL}
+      onClick={showCodeModal}
+      text={localize('VIEW_CODE_BUTTON_TEXT')}
+    />
+  );
+};
+
+export default memo(ActivityViewCodeButton);
+export { activityViewCodeButtonPropsSchema, type ActivityViewCodeButtonProps };

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

@@ -1,18 +1,29 @@
+import { validateProps } from 'botframework-webchat-api/internal';
 import classNames from 'classnames';
-import React, { Fragment, memo } from 'react';
+import React, { Fragment, memo, useMemo } from 'react';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
 import useRenderMarkdownAsHTML from '../../../hooks/useRenderMarkdownAsHTML';
 import useStyleSet from '../../../hooks/useStyleSet';
 
-type Props = Readonly<{
-  headerText?: string;
-  markdown: string;
-}>;
+const citationModalContentPropsSchema = pipe(
+  object({
+    headerText: optional(string()),
+    markdown: string()
+  }),
+  readonly()
+);
+
+type CitationModalContentProps = InferInput<typeof citationModalContentPropsSchema>;
+
+function CitationModalContent(props: CitationModalContentProps) {
+  const { headerText, markdown } = validateProps(citationModalContentPropsSchema, props);
 
-const CitationModalContent = memo(({ headerText, markdown }: Props) => {
   const [{ renderMarkdown: renderMarkdownStyleSet }] = useStyleSet();
   const renderMarkdownAsHTML = useRenderMarkdownAsHTML('citation modal');
 
+  const html = useMemo(() => ({ __html: renderMarkdownAsHTML(markdown) }), [markdown, renderMarkdownAsHTML]);
+
   return (
     <Fragment>
       {headerText && <h2 className="webchat__citation-modal-dialog__header">{headerText}</h2>}
@@ -25,15 +36,14 @@ const CitationModalContent = memo(({ headerText, markdown }: Props) => {
           )}
           // The content rendered by `renderMarkdownAsHTML` is sanitized.
           // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{ __html: renderMarkdownAsHTML(markdown) }}
+          dangerouslySetInnerHTML={html}
         />
       ) : (
         <div className={classNames('webchat__render-markdown', renderMarkdownStyleSet + '')}>{markdown}</div>
       )}
     </Fragment>
   );
-});
-
-CitationModalContent.displayName = 'CitationModalContent';
+}
 
-export default CitationModalContent;
+export default memo(CitationModalContent);
+export { citationModalContentPropsSchema, type CitationModalContentProps };

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

@@ -0,0 +1,41 @@
+import { validateProps } from 'botframework-webchat-api/internal';
+import classNames from 'classnames';
+import React, { Fragment, memo } from 'react';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import useCodeBlockTag from '../../../providers/CustomElements/useCodeBlockTagName';
+import reactNode from '../../../types/internal/reactNode';
+
+const codeContentPropsSchema = pipe(
+  object({
+    children: optional(reactNode()),
+    className: optional(string()),
+    code: string(),
+    language: string(),
+    title: string()
+  }),
+  readonly()
+);
+
+type CodeContentProps = InferInput<typeof codeContentPropsSchema>;
+
+function CodeContent(props: CodeContentProps) {
+  const { children, className, code, language, title } = validateProps(codeContentPropsSchema, props);
+
+  const [, CodeBlock] = useCodeBlockTag();
+
+  return (
+    <Fragment>
+      <div className={'webchat__view-code-dialog__header'}>
+        <h2 className={'webchat__view-code-dialog__title'}>{title}</h2>
+      </div>
+      <CodeBlock className={classNames('webchat__view-code-dialog__body', className)} language={language}>
+        <code>{code}</code>
+      </CodeBlock>
+      {children}
+    </Fragment>
+  );
+}
+
+export default memo(CodeContent);
+export { codeContentPropsSchema, type CodeContentProps };

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

@@ -1,4 +1,5 @@
 import { hooks } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
 import {
   getOrgSchemaMessage,
   onErrorResumeNext,
@@ -9,20 +10,27 @@ import {
 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 React, { memo, useCallback, useMemo, useRef, type MouseEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
+import { custom, object, optional, 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 useShowModal from '../../../providers/ModalDialog/useShowModal';
 import { type PropsOf } from '../../../types/PropsOf';
+import reactNode from '../../../types/internal/reactNode';
+import ActivityCopyButton from './ActivityCopyButton';
+import ActivityViewCodeButton from './ActivityViewCodeButton';
 import CitationModalContext from './CitationModalContent';
 import MessageSensitivityLabel, { type MessageSensitivityLabelProps } from './MessageSensitivityLabel';
+import isAIGeneratedActivity from './isAIGeneratedActivity';
+import isBasedOnSoftwareSourceCode from './isBasedOnSoftwareSourceCode';
 import isHTMLButtonElement from './isHTMLButtonElement';
 
-const { useLocalizer } = hooks;
+const { useLocalizer, useStyleOptions } = hooks;
 
 type Entry = {
   claim?: OrgSchemaClaim | undefined;
@@ -32,16 +40,25 @@ type Entry = {
   url?: string | undefined;
 };
 
-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) => {
+function MarkdownTextContent(props: MarkdownTextContentProps) {
+  const { activity, children, markdown } = validateProps(markdownTextContentPropsSchema, props);
+
+  const [{ feedbackActionsPlacement }] = useStyleOptions();
   const [
     {
       citationModalDialog: citationModalDialogStyleSet,
@@ -49,6 +66,7 @@ const MarkdownTextContent = memo(({ activity, markdown }: Props) => {
       textContent: textContentStyleSet
     }
   ] = useStyleSet();
+  const contentRef = useRef<HTMLDivElement>(null);
   const localize = useLocalizer();
   const graph = useMemo(() => dereferenceBlankNodes(activity.entities || []), [activity.entities]);
   const renderMarkdownAsHTML = useRenderMarkdownAsHTML('message activity');
@@ -204,7 +222,9 @@ const MarkdownTextContent = memo(({ activity, markdown }: Props) => {
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={dangerouslySetInnerHTML}
         onClick={handleClick}
+        ref={contentRef}
       />
+      {children}
       {!!entries.length && (
         <LinkDefinitions<MessageSensitivityLabelProps>
           accessoryComponentType={messageSensitivityLabelProps && MessageSensitivityLabel}
@@ -223,10 +243,26 @@ const MarkdownTextContent = memo(({ activity, markdown }: Props) => {
           ))}
         </LinkDefinitions>
       )}
+      <div className="webchat__text-content__activity-actions">
+        {activity.type === 'message' && isBasedOnSoftwareSourceCode(messageThing) && messageThing.isBasedOn.text ? (
+          <ActivityViewCodeButton
+            className="webchat__text-content__activity-view-code-button"
+            code={messageThing.isBasedOn.text}
+            isAIGenerated={isAIGeneratedActivity(activity)}
+            language={messageThing.isBasedOn.programmingLanguage}
+            title={messageThing.isBasedOn.programmingLanguage}
+          />
+        ) : null}
+        {activity.type === 'message' && activity.text && messageThing?.keywords?.includes('AllowCopy') ? (
+          <ActivityCopyButton className="webchat__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,33 @@
+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()),
+    text: string()
+  }),
+  readonly()
+);
+
+type MarkdownableProps = InferInput<typeof markdownablePropsSchema>;
+
+function Markdownable({ className, text }: MarkdownableProps) {
+  const renderMarkdownAsHTML = useRenderMarkdownAsHTML('message activity');
+
+  const innerHTML = useMemo<Readonly<{ __html: string }> | undefined>(
+    () => Object.freeze({ __html: renderMarkdownAsHTML?.(text) }),
+    [text, renderMarkdownAsHTML]
+  );
+
+  return innerHTML ? (
+    // eslint-disable-next-line react/no-danger
+    <span className={className} dangerouslySetInnerHTML={innerHTML} />
+  ) : (
+    <span className={className}>{text}</span>
+  );
+}
+
+export default memo(Markdownable);
+export { markdownablePropsSchema, type MarkdownableProps };

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

@@ -1,38 +1,46 @@
+import { validateProps } from 'botframework-webchat-api/internal';
 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';
 
-type MessageSensitivityLabelProps = Readonly<{
-  className?: string | undefined;
-  color?: string | undefined;
-  isEncrypted?: boolean | undefined;
-  name?: string | undefined;
-  title?: string | undefined;
-}>;
+const messageSensitivityLabelPropsSchema = pipe(
+  object({
+    className: optional(string()),
+    color: optional(string()),
+    isEncrypted: optional(boolean()),
+    name: optional(string()),
+    title: optional(string())
+  }),
+  readonly()
+);
 
-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>
-));
+type MessageSensitivityLabelProps = InferInput<typeof messageSensitivityLabelPropsSchema>;
 
-MessageSensitivityLabel.displayName = 'MessageSensitivityLabel';
+function MessageSensitivityLabel(props: MessageSensitivityLabelProps) {
+  const { className, color, isEncrypted, name, title } = validateProps(messageSensitivityLabelPropsSchema, props);
 
-export default MessageSensitivityLabel;
+  return (
+    <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>
+  );
+}
 
-export type { MessageSensitivityLabelProps };
+export default memo(MessageSensitivityLabel);
+export { messageSensitivityLabelPropsSchema, type MessageSensitivityLabelProps };

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

@@ -1,11 +1,24 @@
+import { validateProps } from 'botframework-webchat-api/internal';
 import classNames from 'classnames';
-import React, { type FC, Fragment, memo } from 'react';
+import React, { Fragment, memo } from 'react';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
 import useStyleSet from '../../../hooks/useStyleSet';
+import reactNode from '../../../types/internal/reactNode';
 
-type Props = Readonly<{ text: string }>;
+const plainTextContentPropsSchema = pipe(
+  object({
+    children: optional(reactNode()),
+    text: string()
+  }),
+  readonly()
+);
+
+type PlainTextContentProps = InferInput<typeof plainTextContentPropsSchema>;
+
+function PlainTextContent(props: PlainTextContentProps) {
+  const { children, text } = validateProps(plainTextContentPropsSchema, props);
 
-const PlainTextContent: FC<Props> = memo(({ text }: Props) => {
   const [{ textContent: textContentStyleSet }] = useStyleSet();
 
   return (
@@ -18,10 +31,16 @@ const PlainTextContent: FC<Props> = memo(({ text }: Props) => {
           {line.trim()}
         </p>
       ))}
+      {children && (
+        <div
+          className={classNames('webchat__text-content', 'webchat__text-content--children', textContentStyleSet + '')}
+        >
+          {children}
+        </div>
+      )}
     </Fragment>
   );
-});
-
-PlainTextContent.displayName = 'PlainTextContent';
+}
 
-export default PlainTextContent;
+export default memo(PlainTextContent);
+export { plainTextContentPropsSchema, type PlainTextContentProps };

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

@@ -1,42 +1,60 @@
+import { validateProps } from 'botframework-webchat-api/internal';
 import classNames from 'classnames';
-import React, { Fragment } from 'react';
+import React, { Fragment, memo } from 'react';
+import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
-type Props = Readonly<{
-  className?: string;
-  fillColor?: string;
-  hasLock?: boolean;
-}>;
+const shieldIconPropsSchema = pipe(
+  object({
+    className: optional(string()),
+    fillColor: optional(string()),
+    hasLock: optional(boolean())
+  }),
+  readonly()
+);
+
+type ShieldIconProps = InferInput<typeof shieldIconPropsSchema>;
 
-const ShieldIcon = ({ className, fillColor, hasLock }: Props) => (
-  <svg className={classNames(className)} height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-    {hasLock ? (
-      <Fragment>
-        {fillColor && (
+function ShieldIcon(props: ShieldIconProps) {
+  const { className, fillColor, hasLock } = validateProps(shieldIconPropsSchema, props);
+
+  return (
+    <svg
+      className={classNames(className)}
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {hasLock ? (
+        <Fragment>
+          {fillColor && (
+            <path
+              d="M8.35464 2.14678C8.15946 1.95123 7.84268 1.95105 7.64728 2.14638C6.40416 3.38902 5.02923 4 3.5 4C3.22386 4 3 4.22386 3 4.5V7.50126C3 10.4242 4.35378 12.4971 7 13.6523V10C7 9.06808 7.63739 8.28503 8.5 8.06301V8C8.5 6.34315 9.84315 5 11.5 5C12.0464 5 12.5587 5.14609 13 5.40135V4.5C13 4.22386 12.7761 4 12.5 4C10.9689 4 9.5947 3.38913 8.35464 2.14678ZM9.5 9V8C9.5 6.89543 10.3954 6 11.5 6C12.6046 6 13.5 6.89543 13.5 8V9H14C14.5523 9 15 9.44772 15 10V14C15 14.5523 14.5523 15 14 15H9C8.44771 15 8 14.5523 8 14V10C8 9.44772 8.44772 9 9 9H9.5ZM10.5 8V9H12.5V8C12.5 7.44772 12.0523 7 11.5 7C10.9477 7 10.5 7.44772 10.5 8ZM12.25 12C12.25 11.5858 11.9142 11.25 11.5 11.25C11.0858 11.25 10.75 11.5858 10.75 12C10.75 12.4142 11.0858 12.75 11.5 12.75C11.9142 12.75 12.25 12.4142 12.25 12Z"
+              fill={fillColor}
+            />
+          )}
           <path
-            d="M8.35464 2.14678C8.15946 1.95123 7.84268 1.95105 7.64728 2.14638C6.40416 3.38902 5.02923 4 3.5 4C3.22386 4 3 4.22386 3 4.5V7.50126C3 10.4242 4.35378 12.4971 7 13.6523V10C7 9.06808 7.63739 8.28503 8.5 8.06301V8C8.5 6.34315 9.84315 5 11.5 5C12.0464 5 12.5587 5.14609 13 5.40135V4.5C13 4.22386 12.7761 4 12.5 4C10.9689 4 9.5947 3.38913 8.35464 2.14678ZM9.5 9V8C9.5 6.89543 10.3954 6 11.5 6C12.6046 6 13.5 6.89543 13.5 8V9H14C14.5523 9 15 9.44772 15 10V14C15 14.5523 14.5523 15 14 15H9C8.44771 15 8 14.5523 8 14V10C8 9.44772 8.44772 9 9 9H9.5ZM10.5 8V9H12.5V8C12.5 7.44772 12.0523 7 11.5 7C10.9477 7 10.5 7.44772 10.5 8ZM12.25 12C12.25 11.5858 11.9142 11.25 11.5 11.25C11.0858 11.25 10.75 11.5858 10.75 12C10.75 12.4142 11.0858 12.75 11.5 12.75C11.9142 12.75 12.25 12.4142 12.25 12Z"
-            fill={fillColor}
+            d="M7.64728 2.14638C7.84268 1.95105 8.15946 1.95123 8.35464 2.14678C9.5947 3.38913 10.9689 4 12.5 4C12.7761 4 13 4.22386 13 4.5V5.40135C12.6963 5.22567 12.359 5.1017 12 5.04148V4.98121C10.5195 4.86895 9.18521 4.25528 8.00042 3.18917C6.81393 4.25491 5.47941 4.86879 4 4.98118V7.50126C4 8.9349 4.36269 10.0655 5.02127 10.9453C5.49089 11.5727 6.14168 12.1134 7 12.5478V13.6523C4.35378 12.4971 3 10.4242 3 7.50126V4.5C3 4.22386 3.22386 4 3.5 4C5.02923 4 6.40416 3.38902 7.64728 2.14638ZM9.5 8V9H9C8.44772 9 8 9.44772 8 10V14C8 14.5523 8.44771 15 9 15H14C14.5523 15 15 14.5523 15 14V10C15 9.44772 14.5523 9 14 9H13.5V8C13.5 6.89543 12.6046 6 11.5 6C10.3954 6 9.5 6.89543 9.5 8ZM10.5 9V8C10.5 7.44772 10.9477 7 11.5 7C12.0523 7 12.5 7.44772 12.5 8V9H10.5ZM11.5 11.25C11.9142 11.25 12.25 11.5858 12.25 12C12.25 12.4142 11.9142 12.75 11.5 12.75C11.0858 12.75 10.75 12.4142 10.75 12C10.75 11.5858 11.0858 11.25 11.5 11.25Z"
+            fill="currentcolor"
           />
-        )}
-        <path
-          d="M7.64728 2.14638C7.84268 1.95105 8.15946 1.95123 8.35464 2.14678C9.5947 3.38913 10.9689 4 12.5 4C12.7761 4 13 4.22386 13 4.5V5.40135C12.6963 5.22567 12.359 5.1017 12 5.04148V4.98121C10.5195 4.86895 9.18521 4.25528 8.00042 3.18917C6.81393 4.25491 5.47941 4.86879 4 4.98118V7.50126C4 8.9349 4.36269 10.0655 5.02127 10.9453C5.49089 11.5727 6.14168 12.1134 7 12.5478V13.6523C4.35378 12.4971 3 10.4242 3 7.50126V4.5C3 4.22386 3.22386 4 3.5 4C5.02923 4 6.40416 3.38902 7.64728 2.14638ZM9.5 8V9H9C8.44772 9 8 9.44772 8 10V14C8 14.5523 8.44771 15 9 15H14C14.5523 15 15 14.5523 15 14V10C15 9.44772 14.5523 9 14 9H13.5V8C13.5 6.89543 12.6046 6 11.5 6C10.3954 6 9.5 6.89543 9.5 8ZM10.5 9V8C10.5 7.44772 10.9477 7 11.5 7C12.0523 7 12.5 7.44772 12.5 8V9H10.5ZM11.5 11.25C11.9142 11.25 12.25 11.5858 12.25 12C12.25 12.4142 11.9142 12.75 11.5 12.75C11.0858 12.75 10.75 12.4142 10.75 12C10.75 11.5858 11.0858 11.25 11.5 11.25Z"
-          fill="currentcolor"
-        />
-      </Fragment>
-    ) : (
-      <Fragment>
-        {fillColor && (
+        </Fragment>
+      ) : (
+        <Fragment>
+          {fillColor && (
+            <path
+              d="M7.64728 2.14638C7.84268 1.95105 8.15946 1.95123 8.35464 2.14678C9.5947 3.38913 10.9689 4 12.5 4C12.7761 4 13 4.22386 13 4.5V7.50126C13 10.7196 11.3587 12.9075 8.15811 13.9743C8.05548 14.0086 7.94452 14.0086 7.84189 13.9743C4.64126 12.9075 3 10.7196 3 7.50126V4.5C3 4.22386 3.22386 4 3.5 4C5.02923 4 6.40416 3.38902 7.64728 2.14638Z"
+              fill={fillColor}
+            />
+          )}
           <path
-            d="M7.64728 2.14638C7.84268 1.95105 8.15946 1.95123 8.35464 2.14678C9.5947 3.38913 10.9689 4 12.5 4C12.7761 4 13 4.22386 13 4.5V7.50126C13 10.7196 11.3587 12.9075 8.15811 13.9743C8.05548 14.0086 7.94452 14.0086 7.84189 13.9743C4.64126 12.9075 3 10.7196 3 7.50126V4.5C3 4.22386 3.22386 4 3.5 4C5.02923 4 6.40416 3.38902 7.64728 2.14638Z"
-            fill={fillColor}
+            d="M7.64728 2.14638C7.84268 1.95105 8.15946 1.95123 8.35464 2.14678C9.5947 3.38913 10.9689 4 12.5 4C12.7761 4 13 4.22386 13 4.5V7.50126C13 10.7196 11.3587 12.9075 8.15811 13.9743C8.05548 14.0086 7.94452 14.0086 7.84189 13.9743C4.64126 12.9075 3 10.7196 3 7.50126V4.5C3 4.22386 3.22386 4 3.5 4C5.02923 4 6.40416 3.38902 7.64728 2.14638ZM8.00042 3.18917C6.81393 4.25491 5.47941 4.86879 4 4.98118V7.50126C4 8.9349 4.36269 10.0655 5.02127 10.9453C5.65858 11.7967 6.62953 12.4885 8 12.9715C9.37047 12.4885 10.3414 11.7967 10.9787 10.9453C11.6373 10.0655 12 8.9349 12 7.50126V4.98121C10.5195 4.86895 9.18521 4.25528 8.00042 3.18917Z"
+            fill="currentcolor"
           />
-        )}
-        <path
-          d="M7.64728 2.14638C7.84268 1.95105 8.15946 1.95123 8.35464 2.14678C9.5947 3.38913 10.9689 4 12.5 4C12.7761 4 13 4.22386 13 4.5V7.50126C13 10.7196 11.3587 12.9075 8.15811 13.9743C8.05548 14.0086 7.94452 14.0086 7.84189 13.9743C4.64126 12.9075 3 10.7196 3 7.50126V4.5C3 4.22386 3.22386 4 3.5 4C5.02923 4 6.40416 3.38902 7.64728 2.14638ZM8.00042 3.18917C6.81393 4.25491 5.47941 4.86879 4 4.98118V7.50126C4 8.9349 4.36269 10.0655 5.02127 10.9453C5.65858 11.7967 6.62953 12.4885 8 12.9715C9.37047 12.4885 10.3414 11.7967 10.9787 10.9453C11.6373 10.0655 12 8.9349 12 7.50126V4.98121C10.5195 4.86895 9.18521 4.25528 8.00042 3.18917Z"
-          fill="currentcolor"
-        />
-      </Fragment>
-    )}
-  </svg>
-);
+        </Fragment>
+      )}
+    </svg>
+  );
+}
 
-export default ShieldIcon;
+export default memo(ShieldIcon);
+export { shieldIconPropsSchema, type ShieldIconProps };

package/src/Attachment/Text/private/isAIGeneratedActivity.ts

@@ -0,0 +1,5 @@
+import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
+
+export default function isAIGeneratedActivity(activity: undefined | WebChatActivity) {
+  return !!(activity && getOrgSchemaMessage(activity?.entities || [])?.keywords?.includes('AIGeneratedContent'));
+}

package/src/Attachment/Text/private/isBasedOnSoftwareSourceCode.ts

@@ -0,0 +1,18 @@
+import { type OrgSchemaCreativeWork } from 'botframework-webchat-core';
+
+/**
+ * Type guard to check if the isBasedOn field is of type SoftwareSourceCode
+ * @param messageEntity The message entity to check
+ * @returns True if isBasedOn is of type SoftwareSourceCode, false otherwise
+ */
+export default function isBasedOnSoftwareSourceCode(
+  messageEntity?: OrgSchemaCreativeWork
+): messageEntity is OrgSchemaCreativeWork & { isBasedOn: SoftwareSourceCode } {
+  return messageEntity?.isBasedOn?.['@type'] === 'SoftwareSourceCode';
+}
+
+interface SoftwareSourceCode {
+  '@type': 'SoftwareSourceCode';
+  programmingLanguage: string;
+  text: string;
+}

package/src/Attachment/VideoAttachment.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import useStyleSet from '../hooks/useStyleSet';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import VideoContent from './VideoContent';
 
 const ROOT_STYLE = {

package/src/Attachment/VideoContent.tsx

@@ -1,5 +1,6 @@
-import PropTypes from 'prop-types';
-import React, { FC } from 'react';
+import { validateProps } from 'botframework-webchat-api/internal';
+import React, { memo } from 'react';
+import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
 import HTMLVideoContent from './HTMLVideoContent';
 import VimeoContent from './VimeoContent';
@@ -30,15 +31,22 @@ function parseURL(url) {
   return { hostname, pathname, search };
 }
 
-type VideoContentProps = {
-  alt?: string;
-  autoPlay?: boolean;
-  loop?: boolean;
-  poster?: string;
-  src: string;
-};
+const videoContentPropsSchema = pipe(
+  object({
+    alt: optional(string()),
+    autoPlay: optional(boolean()),
+    loop: optional(boolean()),
+    poster: optional(string()),
+    src: string()
+  }),
+  readonly()
+);
+
+type VideoContentProps = InferInput<typeof videoContentPropsSchema>;
+
+function VideoContent(props: VideoContentProps) {
+  const { alt, autoPlay = false, loop = false, poster, src } = validateProps(videoContentPropsSchema, props);
 
-const VideoContent: FC<VideoContentProps> = ({ alt, autoPlay, loop, poster, src }) => {
   const { hostname, pathname, search } = parseURL(src);
   const lastSegment = pathname.split('/').pop();
   const searchParams = new URLSearchParams(search);
@@ -59,21 +67,7 @@ const VideoContent: FC<VideoContentProps> = ({ alt, autoPlay, loop, poster, src
     default:
       return <HTMLVideoContent alt={alt} autoPlay={autoPlay} loop={loop} poster={poster} src={src} />;
   }
-};
-
-VideoContent.defaultProps = {
-  alt: '',
-  autoPlay: false,
-  loop: false,
-  poster: ''
-};
-
-VideoContent.propTypes = {
-  alt: PropTypes.string,
-  autoPlay: PropTypes.bool,
-  loop: PropTypes.bool,
-  poster: PropTypes.string,
-  src: PropTypes.string.isRequired
-};
+}
 
-export default VideoContent;
+export default memo(VideoContent);
+export { videoContentPropsSchema, type VideoContentProps };