Add a new Stroybook page for AdaptiveCard (#5859)

Author: Leah-Xia-Microsoft

common/config/rush/pnpm-lock.yaml

@@ -41,7 +41,9 @@
     "resize-observer-polyfill": "^1.5.1",
     "tslib": "^2.5.0",
     "browserslist": "^4.22.2",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "adaptivecards": "~3.0.5",
+    "adaptivecards-react": "~1.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.27.1",
@@ -116,6 +118,7 @@
     "ts-loader": "^8.0.12",
     "ts-node": "^10.9.2",
     "typescript": "5.4.5",
-    "webpack": "5.95.0"
+    "webpack": "5.95.0",
+    "swiper": "~11.2.7"
   }
-}
+}

common/config/rush/variants/stable/pnpm-lock.yaml

@@ -0,0 +1,67 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { FluentThemeProvider, MessageThread, MessageProps, MessageRenderer } from '@azure/communication-react';
+import { Action } from 'adaptivecards';
+import { AdaptiveCard } from 'adaptivecards-react';
+import React from 'react';
+import { ArgsFrom } from '../../../controlsUtils';
+import { GetHistoryWithAdaptiveCardMessages } from '../snippets/placeholdermessages';
+
+const storyControls = {
+  border: { control: 'text', name: 'Border' },
+  adaptiveCardTitle: { control: 'text', name: 'Adaptive Card Title' }
+};
+
+const CustomizedAdaptiveCardMessageStory = (args: ArgsFrom<typeof storyControls>): JSX.Element => {
+  const adaptiveCardMessageStyles = {
+    border: args.border,
+    borderRadius: '5px',
+    marginRight: '20px',
+    marginLeft: '40px'
+  };
+  const onRenderMessage = (messageProps: MessageProps, defaultOnRender?: MessageRenderer): JSX.Element => {
+    if (messageProps.message.messageType !== 'custom') {
+      return defaultOnRender ? defaultOnRender(messageProps) : <></>;
+    }
+    try {
+      // host config setup
+      const hostConfig = {
+        fontFamily: 'Times New Roman'
+      };
+
+      // parse the adaptive card from the message content
+      const adaptiveCard = JSON.parse(messageProps.message.content);
+
+      return (
+        <AdaptiveCard
+          payload={adaptiveCard}
+          hostConfig={hostConfig}
+          onExecuteAction={(action: Action) => console.log('onExecuteAction ' + action)}
+          onActionOpenUrl={(action: Action) => {
+            console.log('onActionOpenUrl' + action);
+          }}
+          onActionShowCard={(action: Action) => console.log('onActionShowCard' + action)}
+          onError={(error: any) => console.log('onError', error)}
+          style={adaptiveCardMessageStyles}
+        />
+      );
+    } catch (error) {
+      console.log('adaptive card error', messageProps.message, error);
+      // use default render in case if adaptive cards can't be parsed
+      return defaultOnRender ? defaultOnRender(messageProps) : <></>;
+    }
+  };
+
+  return (
+    <FluentThemeProvider>
+      <MessageThread
+        userId={'1'}
+        messages={GetHistoryWithAdaptiveCardMessages(args.adaptiveCardTitle)}
+        onRenderMessage={onRenderMessage}
+      />
+    </FluentThemeProvider>
+  );
+};
+
+export const CustomizedAdaptiveCardMessage = CustomizedAdaptiveCardMessageStory.bind({});

packages/storybook8/package.json

@@ -0,0 +1,18 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as CustomizedAdaptiveCardMessageStories from './index.stories';
+
+import MessageThreadWithAdaptiveCardExample from '!!raw-loader!./snippets/MessageWithAdaptiveCard.snippet.tsx';
+
+<Meta of={CustomizedAdaptiveCardMessageStories} />
+
+## Messages with Customized Adaptive Card
+
+The example below shows how to render an `adaptive card` message with `onRenderMessage` in `MessageThread`
+
+## Example
+
+<Canvas
+  of={CustomizedAdaptiveCardMessageStories.CustomAdaptiveCardMessageDocsOnly}
+  source={{ code: MessageThreadWithAdaptiveCardExample }}
+  layout="padded"
+/>