microsoft · OEvgeny · Jul 4, 2025 · Jun 26, 2025 · Jun 26, 2025 · Jun 26, 2025
@@ -101,6 +101,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 - Resolved [#5463](https://github.com/microsoft/BotFramework-WebChat/issues/5463). Added attachment preview for `sendAttachmentOn: "send"`, in PR [#5464](https://github.com/microsoft/BotFramework-WebChat/pull/5464), by [@compulim](https://github.com/compulim), in PR [#5492](https://github.com/microsoft/BotFramework-WebChat/pull/5492), by [@OEvgeny](https://github.com/OEvgeny)
    - Attaching files will no longer remove previously attached files
    - Updated Fluent theme to use the new attachment preview feature
+- Added collapsible activity and activity with abstract handling, in PR [#5506](https://github.com/microsoft/BotFramework-WebChat/pull/5506), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Changed
 

@@ -23,7 +23,7 @@
         await pageConditions.minNumActivitiesShown(2);
         await pageConditions.scrollToBottomCompleted();
 
-        const messageRole = document.querySelector('.webchat__stacked-layout__message-row').getAttribute('role');
+        const messageRole = document.querySelector('.stacked-layout__message-row').getAttribute('role');
 
         expect(messageRole).toEqual('group');
       });

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Collapsible activity (copilot, dark)</title>
+    <script>
+      location = './collapsible?variant=copilot&fluent-theme=dark';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Collapsible activity (copilot)</title>
+    <script>
+      location = './collapsible?variant=copilot';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Collapsible activity (fluent, dark)</title>
+    <script>
+      location = './collapsible?variant=fluent&fluent-theme=dark';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Collapsible activity (fluent)</title>
+    <script>
+      location = './collapsible?variant=fluent';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -846,7 +846,7 @@
           await host.snapshot('local');
           await host.sendKeys('ENTER');
           // hide timestamp to not fail snapshot if is not relative
-          sendbox.parentElement.parentElement.parentElement.parentElement.querySelector('.webchat__basic-transcript__activity:last-child .webchat__stacked-layout__status').style.opacity = 0
+          sendbox.parentElement.parentElement.parentElement.parentElement.querySelector('.webchat__basic-transcript__activity:last-child .stacked-layout__status').style.opacity = 0;
           await host.snapshot('local');
           await host.sendShiftTab();
           await host.snapshot('local');

@@ -1,9 +1,9 @@
 <!doctype html>
 <html>
   <head>
-    <title>Two Chat panes side-by-side (dark): streaming (right)</title>
+    <title>Two Chat panes side-by-side: streaming (right)</title>
     <script>
-      location = './?transcript=0&transcript=4&theme=fluent-dark';
+      location = './?transcript=0&transcript=4';
     </script>
   </head>
   <body></body>

@@ -2,12 +2,14 @@
 
 export { default as DecoratorComposer } from './decorator/DecoratorComposer';
 export { type DecoratorMiddleware } from './decorator/types';
+export { default as useDecoratorRequest, type InferDecoratorRequest } from './decorator/useDecoratorRequest';
 
 // ActivityBorderDecorator
 
 export {
   default as ActivityBorderDecorator,
   createActivityBorderMiddleware,
+  ActivityBorderDecoratorRequest,
   type ActivityBorderDecoratorProps
 } from './decorator/ActivityBorder/ActivityBorderDecorator';
 

@@ -7,6 +7,7 @@ import {
   createActivityBorderMiddleware,
   type ActivityBorderDecoratorMiddlewareRequest
 } from './private/ActivityBorderDecoratorMiddleware';
+import ActivityBorderDecoratorRequestContext from './private/ActivityBorderDecoratorRequestContext';
 
 const supportedActivityRoles: ActivityBorderDecoratorMiddlewareRequest['from'][] = [
   'bot',
@@ -39,12 +40,17 @@ function ActivityBorderDecorator({ activity, children }: ActivityBorderDecorator
     };
   }, [activity]);
 
+  const requestValue = useMemo(() => Object.freeze({ request }), [request]);
+
   return (
-    <ActivityBorderDecoratorMiddlewareProxy fallbackComponent={PassthroughFallback} request={request}>
-      {children}
-    </ActivityBorderDecoratorMiddlewareProxy>
+    <ActivityBorderDecoratorRequestContext.Provider value={requestValue}>
+      <ActivityBorderDecoratorMiddlewareProxy fallbackComponent={PassthroughFallback} request={request}>
+        {children}
+      </ActivityBorderDecoratorMiddlewareProxy>
+    </ActivityBorderDecoratorRequestContext.Provider>
   );
 }
 
 export default memo(ActivityBorderDecorator);
 export { createActivityBorderMiddleware, type ActivityBorderDecoratorProps };
+export { ActivityBorderDecoratorRequestContext as ActivityBorderDecoratorRequest };
@@ -0,0 +1,18 @@
+import { createContext } from 'react';
+import { ActivityBorderDecoratorMiddlewareRequest } from './ActivityBorderDecoratorMiddleware';
+
+type ActivityBorderDecoratorRequestContextType = Readonly<{
+  request: ActivityBorderDecoratorMiddlewareRequest;
+}>;
+
+const ActivityBorderDecoratorRequestContext = createContext<ActivityBorderDecoratorRequestContextType>(
+  Object.freeze({
+    request: Object.freeze({
+      from: undefined,
+      livestreamingState: undefined
+    })
+  })
+);
+
+export default ActivityBorderDecoratorRequestContext;
+export { type ActivityBorderDecoratorRequestContextType };
@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+import { ActivityBorderDecoratorRequest } from './ActivityBorder/ActivityBorderDecorator';
+
+export default function useDecoratorRequest(type: typeof ActivityBorderDecoratorRequest) {
+  const request = useContext(type)?.request;
+
+  if (!request) {
+    throw new Error(`useDecoratorRequest must be used within a ${type}Provider`);
+  }
+
+  return request;
+}
+
+export type InferDecoratorRequest<T extends typeof ActivityBorderDecoratorRequest> =
+  T extends React.Context<infer U> ? (U extends { request: infer R } ? R : never) : never;
@@ -1,6 +1,6 @@
 import { StrictStyleOptions, StyleOptions } from 'botframework-webchat-api';
 import * as apiDecorator from 'botframework-webchat-api/decorator';
-import { WebChatDecorator } from 'botframework-webchat-component/decorator';
+import * as componentDecorator from 'botframework-webchat-component/decorator';
 import * as internal from 'botframework-webchat-component/internal';
 import { Constants, createStore, createStoreWithDevTools, createStoreWithOptions } from 'botframework-webchat-core';
 
@@ -55,7 +55,7 @@ export default ReactWebChat;
 
 const decorator = Object.freeze({
   ...apiDecorator,
-  WebChatDecorator
+  ...componentDecorator
 });
 
 export {

@@ -0,0 +1,56 @@
+import { useStyles } from 'botframework-webchat-styles/react';
+import { reactNode, validateProps } from 'botframework-webchat-react-valibot';
+import cx from 'classnames';
+import React, { memo } from 'react';
+import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import ScreenReaderText from '../ScreenReaderText';
+import Bubble from './Bubble';
+
+import styles from './StackedLayout.module.css';
+
+const attachmentRowPropsSchema = pipe(
+  object({
+    attachedAlt: string(),
+    children: optional(reactNode()),
+    fromUser: boolean(),
+    hasAvatar: boolean(),
+    hasNub: boolean(),
+    showBubble: optional(boolean())
+  }),
+  readonly()
+);
+
+type AttachmentRowProps = InferInput<typeof attachmentRowPropsSchema>;
+
+function AttachmentRow(props: AttachmentRowProps) {
+  const {
+    attachedAlt,
+    children,
+    fromUser,
+    hasAvatar,
+    hasNub,
+    showBubble = true
+  } = validateProps(attachmentRowPropsSchema, props);
+  const classNames = useStyles(styles);
+
+  return (
+    <div aria-roledescription="attachment" className={classNames['stacked-layout__attachment-row']} role="group">
+      <ScreenReaderText text={attachedAlt} />
+      {showBubble ? (
+        <Bubble
+          className={classNames['stacked-layout__attachment']}
+          fromUser={fromUser}
+          nub={hasAvatar || hasNub ? 'hidden' : false}
+        >
+          {children}
+        </Bubble>
+      ) : (
+        <div className={cx(classNames['stacked-layout__attachment'])}>{children}</div>
+      )}
+    </div>
+  );
+}
+
+export default memo(AttachmentRow);
+export { attachmentRowPropsSchema, type AttachmentRowProps };
@@ -0,0 +1,38 @@
+:global(.webchat) .code-block-content {
+  border-block: var(--webchat__border-width--bubble) var(--webchat__border-style--bubble)
+    var(--webchat__border-color--bubble);
+  border-radius: var(--webchat__border-radius--bubble);
+  display: block;
+  font-family: var(--webchat__font--primary);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  margin-block-end: calc(var(--webchat__border-width--bubble) * -1);
+  overflow: hidden;
+  overflow: clip;
+  position: relative;
+}
+
+:global(.webchat) .code-block-content__header {
+  align-items: center;
+  display: flex;
+  gap: var(--webchat__padding--regular);
+  justify-content: space-between;
+  padding: var(--webchat__padding--regular);
+}
+
+:global(.webchat) .code-block-content__title {
+  font-weight: 600;
+
+  &::first-letter {
+    text-transform: uppercase;
+  }
+}
+
+:global(.webchat) .code-block-content__code-block {
+  border: none;
+  margin: 0;
+  max-height: 360px;
+  overflow-y: auto;
+  padding: var(--webchat__padding--regular) 8px var(--webchat__padding--regular) var(--webchat__padding--regular);
+}
@@ -0,0 +1,42 @@
+import { useStyles } from 'botframework-webchat-styles/react';
+import { validateProps } from 'botframework-webchat-react-valibot';
+import cx from 'classnames';
+import React, { memo } from 'react';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import useCodeBlockTag from '../providers/CustomElements/useCodeBlockTagName';
+
+import styles from './CodeBlockContent.module.css';
+
+const codeBlockContentPropsSchema = pipe(
+  object({
+    code: string(),
+    language: optional(string()),
+    title: optional(string())
+  }),
+  readonly()
+);
+
+type CodeBlockContentProps = InferInput<typeof codeBlockContentPropsSchema>;
+
+function CodeBlockContent(props: CodeBlockContentProps) {
+  const { code, language, title } = validateProps(codeBlockContentPropsSchema, props);
+  const classNames = useStyles(styles);
+  const [, CodeBlock] = useCodeBlockTag();
+
+  return (
+    <div className={classNames['code-block-content']}>
+      {title && (
+        <div className={cx(classNames['code-block-content__header'])}>
+          <div className={cx(classNames['code-block-content__title'])}>{title}</div>
+        </div>
+      )}
+      <CodeBlock className={cx(classNames['code-block-content__code-block'])} language={language}>
+        <code>{code}</code>
+      </CodeBlock>
+    </div>
+  );
+}
+
+export default memo(CodeBlockContent);
+export { codeBlockContentPropsSchema, type CodeBlockContentProps };
@@ -0,0 +1,29 @@
+:global(.webchat) .collapsible-content {
+  &[open] .collapsible-content__chevron {
+    transform: rotate(180deg);
+  }
+}
+
+:global(.webchat) .collapsible-content__summary {
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--webchat__font--primary);
+  gap: calc(var(--webchat__padding--regular) / 2);
+  list-style: none;
+  margin: var(--webchat__padding--regular);
+  padding: 0;
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &:focus-visible {
+    outline-offset: 3px;
+  }
+}
+
+:global(.webchat) .collapsible-content__content {
+  display: flex;
+  flex-direction: column;
+  margin-block-start: calc(var(--webchat__padding--regular) * -1);
+}