= memo(({ activity, contentType = 'text/plain', text }: Props) => {
+const generatedBadgeStyle = {
+ '&.webchat__text-content__generated-badge': {
+ color: `var(${CustomPropertyNames.ColorSubtle})`,
+ fontSize: `var(${CustomPropertyNames.FontSizeSmall})`
+ }
+};
+
+const TextContent = memo(({ activity, contentType = 'text/plain', text }: Props) => {
const supportMarkdown = !!useRenderMarkdownAsHTML('message activity');
+ const localize = useLocalizer();
+ const generatedBadgeClassName = useStyleToEmotionObject()(generatedBadgeStyle) + '';
+
+ const generatedBadge = useMemo(
+ () =>
+ isAIGeneratedActivity(activity) && (
+
+ {localize('ACTIVITY_CONTENT_CAUTION')}
+
+ ),
+ [activity, generatedBadgeClassName, localize]
+ );
return text ? (
contentType === 'text/markdown' && supportMarkdown ? (
-
+
+ {generatedBadge}
+
) : (
-
+ {generatedBadge}
)
) : null;
});
-TextContent.defaultProps = { contentType: 'text/plain' };
TextContent.displayName = 'TextContent';
export default TextContent;
diff --git a/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx b/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx
index 1e73429684..c3b702cd44 100644
--- a/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx
+++ b/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx
@@ -9,7 +9,7 @@ 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, type MouseEventHandler, type ReactNode } from 'react';
import { useRefFrom } from 'use-ref-from';
import { LinkDefinitionItem, LinkDefinitions } from '../../../LinkDefinition/index';
@@ -35,6 +35,7 @@ type Entry = {
type Props = Readonly<{
activity: WebChatActivity;
+ children?: ReactNode | undefined;
markdown: string;
}>;
@@ -42,7 +43,7 @@ function isCitationURL(url: string): boolean {
return onErrorResumeNext(() => new URL(url))?.protocol === 'cite:';
}
-const MarkdownTextContent = memo(({ activity, markdown }: Props) => {
+const MarkdownTextContent = memo(({ activity, children, markdown }: Props) => {
const [
{
citationModalDialog: citationModalDialogStyleSet,
@@ -212,6 +213,7 @@ const MarkdownTextContent = memo(({ activity, markdown }: Props) => {
dangerouslySetInnerHTML={dangerouslySetInnerHTML}
onClick={handleClick}
/>
+ {children}
{!!entries.length && (
accessoryComponentType={messageSensitivityLabelProps && MessageSensitivityLabel}
diff --git a/packages/component/src/Attachment/Text/private/PlainTextContent.tsx b/packages/component/src/Attachment/Text/private/PlainTextContent.tsx
index feb2790083..e7e674cce7 100644
--- a/packages/component/src/Attachment/Text/private/PlainTextContent.tsx
+++ b/packages/component/src/Attachment/Text/private/PlainTextContent.tsx
@@ -1,11 +1,11 @@
import classNames from 'classnames';
-import React, { type FC, Fragment, memo } from 'react';
+import React, { Fragment, memo, type ReactNode } from 'react';
import useStyleSet from '../../../hooks/useStyleSet';
-type Props = Readonly<{ text: string }>;
+type Props = Readonly<{ children?: ReactNode | undefined; text: string }>;
-const PlainTextContent: FC = memo(({ text }: Props) => {
+const PlainTextContent = memo(({ children, text }: Props) => {
const [{ textContent: textContentStyleSet }] = useStyleSet();
return (
@@ -18,6 +18,13 @@ const PlainTextContent: FC = memo(({ text }: Props) => {
{line.trim()}
))}
+ {children && (
+
+ {children}
+
+ )}
);
});
diff --git a/packages/component/src/Attachment/Text/private/isAIGeneratedActivity.ts b/packages/component/src/Attachment/Text/private/isAIGeneratedActivity.ts
new file mode 100644
index 0000000000..5a43c99ec4
--- /dev/null
+++ b/packages/component/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'));
+}
diff --git a/packages/fluent-theme/src/components/activity/ActivityDecorator.module.css b/packages/fluent-theme/src/components/activity/ActivityDecorator.module.css
index 8c7ad441d9..75e3a9c5e5 100644
--- a/packages/fluent-theme/src/components/activity/ActivityDecorator.module.css
+++ b/packages/fluent-theme/src/components/activity/ActivityDecorator.module.css
@@ -42,6 +42,11 @@
&:has(:global(.webchat__bubble--from-user)) :global(.webchat__bubble) {
margin-block-end: var(--webchat-spacingVerticalM);
}
+
+ /* Hide generated badge as it is in the copilot header */
+ :global(.webchat__bubble .webchat__text-content .webchat__text-content__generated-badge) {
+ display: none;
+ }
}
/* Decorator copilot variant which has bot message */
@@ -147,6 +152,30 @@
min-height: auto;
padding-block: var(--webchat__bubble--block-padding);
padding-inline: var(--webchat__bubble--inline-padding);
+
+ &:empty {
+ padding-block-end: 0;
+ }
+
+ +:global(.webchat__text-content) {
+ margin-top: calc(var(--webchat__bubble--block-padding) * -1);
+ }
+}
+
+/* Message bubble text content generated badge */
+:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble .webchat__text-content__generated-badge) {
+ align-items: center;
+ align-self: flex-start;
+ background-color: var(--webchat-colorNeutralBackground5);
+ border-radius: var(--webchat-borderRadiusMedium);
+ box-sizing: border-box;
+ color: var(--webchat-colorNeutralForeground3);
+ cursor: default;
+ display: inline-flex;
+ font-size: var(--webchat-fontSizeBase100);
+ height: 16px;
+ line-height: var(--webchat-lineHeightBase100);
+ padding-inline: var(--webchat-spacingHorizontalXS);
}
/* Message bubble attachment content */