fix: Adaptive card rendering issue in Webchat & Rerender on appId change

Composer/packages/client/src/components/WebChat/WebChatComposer.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import React from 'react';
-import { createStyleSet, Components } from 'botframework-webchat-component';
+import { createStyleSet, Components } from 'botframework-webchat';
 import { CommunicationColors, NeutralColors } from '@uifabric/fluent-theme';
 
 import { ConversationService } from './utils/conversationService';

Composer/packages/client/src/components/WebChat/WebChatPanel.tsx

@@ -20,7 +20,7 @@ import { dispatcherState } from '../../recoilModel';
 import { ConversationService } from './utils/conversationService';
 import { WebChatHeader } from './WebChatHeader';
 import { WebChatComposer } from './WebChatComposer';
-import { BotSecrets, ChatData, RestartOption } from './types';
+import { BotSecret, ChatData, RestartOption } from './types';
 
 const BASEPATH = process.env.PUBLIC_URL || 'http://localhost:3000/';
 // TODO: Refactor to include Webchat header component as a part of WebchatComposer to avoid this variable.
@@ -30,7 +30,7 @@ export interface WebChatPanelProps {
   botData: {
     projectId: string;
     botUrl: string;
-    secrets: BotSecrets;
+    secret: BotSecret;
     botName: string;
     activeLocale: string;
     botStatus: BotStatus;
@@ -53,7 +53,7 @@ export const WebChatPanel: React.FC<WebChatPanelProps> = ({
     setActiveTabInDebugPanel,
     setWebChatPanelVisibility,
   } = useRecoilValue(dispatcherState);
-  const { projectId, botUrl, secrets, botName, activeLocale, botStatus } = botData;
+  const { projectId, botUrl, secret, botName, activeLocale, botStatus } = botData;
   const [chats, setChatData] = useState<Record<string, ChatData>>({});
   const [currentConversation, setCurrentConversation] = useState<string>('');
   const [currentRestartOption, onSetRestartOption] = useState<RestartOption>(RestartOption.NewUserID);
@@ -134,7 +134,7 @@ export const WebChatPanel: React.FC<WebChatPanelProps> = ({
     if (botUrl) {
       setCurrentConversation('');
     }
-  }, [botUrl]);
+  }, [botUrl, secret]);
 
   useEffect(() => {
     setIsRestartButtonDisabled(botStatus !== BotStatus.connected);
@@ -161,7 +161,7 @@ export const WebChatPanel: React.FC<WebChatPanelProps> = ({
       const startConversation = async () => {
         const chatData: ChatData = await conversationService.startNewConversation(
           botUrl,
-          secrets,
+          secret,
           projectId,
           activeLocale
         );
@@ -191,7 +191,7 @@ export const WebChatPanel: React.FC<WebChatPanelProps> = ({
             oldChatData,
             requireNewUserId,
             activeLocale,
-            secrets
+            secret
           );
 
           TelemetryClient.track('WebChatConversationRestarted', {

Composer/packages/client/src/components/WebChat/__tests__/WebchatPanel.test.tsx

@@ -44,7 +44,7 @@ describe('<WebchatPanel />', () => {
       botData: {
         projectId: '123-12',
         botUrl: 'http://localhost:3989/api/messages',
-        secrets: {
+        secret: {
           msAppId: '',
           msPassword: '',
         },

Composer/packages/client/src/components/WebChat/types.ts

@@ -7,7 +7,7 @@ export type User = {
   role: string;
 };
 
-export type BotSecrets = { msAppId: string; msPassword: string };
+export type BotSecret = { msAppId: string; msPassword: string };
 export type ChannelService = 'public' | 'usgov';
 
 export type WebChatMode = 'livechat' | 'transcript';

Composer/packages/client/src/components/WebChat/utils/WebChatTypes.d.ts

@@ -6,6 +6,7 @@ declare module 'botframework-webchat' {
   export const renderWebChat: any;
   export const createDirectLine: (options: any) => any;
   export const hooks: any;
+  export const createStyleSet: any;
   export const Components: {
     AdaptiveCardContent: any;
     AudioCardContent: any;

Composer/packages/client/src/components/WebChat/utils/conversationService.ts

@@ -8,7 +8,7 @@ import { createDirectLine } from 'botframework-webchat';
 import moment from 'moment';
 import formatMessage from 'format-message';
 
-import { BotSecrets, WebChatMode, User, ChatData, StartConversationPayload } from '../types';
+import { BotSecret, WebChatMode, User, ChatData, StartConversationPayload } from '../types';
 
 export const getDateTimeFormatted = (): string => {
   return moment().local().format('YYYY-MM-DD HH:mm:ss');
@@ -36,7 +36,7 @@ export class ConversationService {
     newConversationId: string,
     userId: string,
     activeLocale: string,
-    secrets: BotSecrets
+    secret: BotSecret
   ) {
     const url = `${this.directlineHostUrl}/conversations/${oldConversationId}/updateConversation`;
     return axios.put(
@@ -45,8 +45,8 @@ export class ConversationService {
         conversationId: newConversationId,
         userId,
         locale: activeLocale,
-        msaAppId: secrets.msAppId,
-        msaPassword: secrets.msPassword,
+        msaAppId: secret.msAppId,
+        msaPassword: secret.msPassword,
       },
       {
         headers: {
@@ -105,7 +105,7 @@ export class ConversationService {
 
   public async startNewConversation(
     botUrl: string,
-    secrets: BotSecrets,
+    secret: BotSecret,
     projectId: string,
     activeLocale: string
   ): Promise<ChatData> {
@@ -117,8 +117,8 @@ export class ConversationService {
       channelServiceType: 'public',
       members: [user],
       mode: webChatMode,
-      msaAppId: secrets.msAppId,
-      msaPassword: secrets.msPassword,
+      msaAppId: secret.msAppId,
+      msaPassword: secret.msPassword,
       locale: activeLocale,
     });
 
@@ -134,7 +134,7 @@ export class ConversationService {
     const webChatStore: unknown = createWebChatStore({});
     return {
       directline,
-      webChatMode: webChatMode,
+      webChatMode,
       projectId,
       user,
       conversationId,
@@ -146,7 +146,7 @@ export class ConversationService {
     oldChatData: ChatData,
     requireNewUserID: boolean,
     activeLocale: string,
-    secrets: BotSecrets
+    secret: BotSecret
   ) {
     if (oldChatData.directline) {
       oldChatData.directline.end();
@@ -164,7 +164,7 @@ export class ConversationService {
       conversationId,
       user.id,
       activeLocale,
-      secrets
+      secret
     );
     const { endpointId } = resp.data;
     const directline = await this.fetchDirectLineObject(conversationId, {

Composer/packages/client/src/recoilModel/selectors/project.ts

@@ -74,7 +74,7 @@ export type TreeDataPerProject = {
 type WebChatEssentials = {
   projectId: string;
   botName: string;
-  secrets: { msAppId: string; msPassword: string };
+  secret: { msAppId: string; msPassword: string };
   botUrl: string;
   activeLocale: string;
   botStatus: BotStatus;
@@ -371,7 +371,7 @@ export const webChatEssentialsSelector = selectorFamily<WebChatEssentials, strin
   key: 'webChatEssentialsSelector',
   get: (projectId: string) => ({ get }) => {
     const settings = get(settingsState(projectId));
-    const secrets = {
+    const secret = {
       msAppId: settings.MicrosoftAppId || '',
       msPassword: settings.MicrosoftAppPassword || '',
     };
@@ -384,7 +384,7 @@ export const webChatEssentialsSelector = selectorFamily<WebChatEssentials, strin
     return {
       projectId,
       botName,
-      secrets,
+      secret: secret,
       botUrl,
       activeLocale,
       botStatus,

Composer/packages/client/src/utils/luUtil.ts

@@ -21,7 +21,6 @@ export function getReferredLuFiles(luFiles: LuFile[], dialogs: DialogInfo[], che
   return luFiles.filter((file) => {
     const idWithoutLocale = getBaseName(file.id);
     const contentNotEmpty = (checkContent && !!file.content) || !checkContent;
-    console.log('Content', dialogs);
     return dialogs.some((dialog) => dialog.luFile === idWithoutLocale && contentNotEmpty);
   });
 }