fix: Update attachment template format to support PVA

Composer/.prettierignore

@@ -1,3 +1,2 @@
 node_modules
-lib
 dist

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

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { LgMetaData, LgTemplateRef, LgType } from '@bfc/shared';
+import { LgMetaData, LgTemplateRef, LgType, extractTemplateNameFromExpression } from '@bfc/shared';
 import { LgTemplate, MicrosoftIDialog, ShellApi } from '@botframework-composer/types';
 
 type SerializableLg = {
@@ -44,9 +44,8 @@ export const serializeLgTemplate = (
           ? (lgTemplate.properties[responseType] as string[])
           : ([lgTemplate.properties[responseType]] as string[]);
         for (const subTemplateItem of subTemplateItems) {
-          const matched = subTemplateItem.trim().match(exprRegex);
-          if (matched && matched.length > 1) {
-            const subTemplateId = matched[1];
+          const subTemplateId = extractTemplateNameFromExpression(subTemplateItem.trim());
+          if (subTemplateId) {
             const subTemplate = lgTemplates.find((x) => x.name === subTemplateId);
             if (subTemplate) {
               if (!serializableLg.relatedLgTemplateBodies) {

Composer/packages/lib/code-editor/src/lg/ModalityPivot.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { CodeEditorSettings, LgTemplate, TelemetryClient } from '@bfc/shared';
+import { CodeEditorSettings, LgTemplate, TelemetryClient, extractTemplateNameFromExpression } from '@bfc/shared';
 import { FluentTheme, FontSizes } from '@uifabric/fluent-theme';
 import formatMessage from 'format-message';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
@@ -20,11 +20,7 @@ import mergeWith from 'lodash/mergeWith';
 
 import { LGOption } from '../utils';
 import { ItemWithTooltip } from '../components/ItemWithTooltip';
-import {
-  extractTemplateNameFromExpression,
-  getTemplateId,
-  structuredResponseToString,
-} from '../utils/structuredResponse';
+import { getTemplateId, structuredResponseToString } from '../utils/structuredResponse';
 
 import { AttachmentModalityEditor } from './modalityEditors/AttachmentModalityEditor';
 import { SpeechModalityEditor } from './modalityEditors/SpeechModalityEditor';

Composer/packages/lib/code-editor/src/lg/constants.ts

@@ -22,7 +22,7 @@ export type LgCardTemplateType = typeof lgCardAttachmentTemplates[number];
 export const cardTemplates: Record<LgCardTemplateType, string> = {
   adaptive: `> To learn more Adaptive Cards format, read the documentation at
 > https://docs.microsoft.com/en-us/adaptive-cards/getting-started/bots
-- \`\`\`\${json({
+- \${{
   "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
   "version": "1.2",
   "type": "AdaptiveCard",
@@ -34,7 +34,7 @@ export const cardTemplates: Record<LgCardTemplateType, string> = {
       "isSubtle": false
     }
   ]
-})}\`\`\``,
+}}`,
   hero: `[HeroCard
   title =
   subtitle =

Composer/packages/lib/code-editor/src/lg/modalityEditors/AttachmentModalityEditor.tsx

@@ -4,14 +4,13 @@
 import formatMessage from 'format-message';
 import React from 'react';
 import { IDropdownOption, DropdownMenuItemType } from 'office-ui-fabric-react/lib/Dropdown';
-import { CodeEditorSettings } from '@bfc/shared';
+import { CodeEditorSettings, extractTemplateNameFromExpression } from '@bfc/shared';
 
 import {
   AttachmentsStructuredResponseItem,
   AttachmentLayoutStructuredResponseItem,
   CommonModalityEditorProps,
 } from '../types';
-import { extractTemplateNameFromExpression } from '../../utils/structuredResponse';
 
 import { ModalityEditorContainer } from './ModalityEditorContainer';
 import { AttachmentArrayEditor } from './AttachmentArrayEditor';
@@ -46,7 +45,11 @@ const AttachmentModalityEditor = React.memo(
       (newItems: string[]) => {
         setItems(newItems);
         onUpdateResponseTemplate({
-          Attachments: { kind: 'Attachments', value: newItems.map((item) => `\${${item}()}`), valueType: 'direct' },
+          Attachments: {
+            kind: 'Attachments',
+            value: newItems.map((item) => `\${json(${item}())}`),
+            valueType: 'direct',
+          },
         });
       },
       [setItems, onUpdateResponseTemplate]

Composer/packages/lib/code-editor/src/utils/structuredResponse.ts

@@ -1,7 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+/* eslint-disable security/detect-unsafe-regex */
 
-import { LgTemplate } from '@bfc/shared';
+import { LgTemplate, extractTemplateNameFromExpression } from '@bfc/shared';
 
 import { activityTemplateType } from '../lg/constants';
 import {
@@ -20,7 +21,6 @@ import {
 } from '../lg/types';
 
 const subTemplateNameRegex = /\${(.*)}/;
-const templateNameExtractRegex = /\${(.*)(\(.*\))\s*}/;
 const defaultIndent = '    ';
 
 const getStructuredResponseHelper = (value: unknown, kind: 'Text' | 'Speak' | 'Attachments') => {
@@ -113,14 +113,6 @@ export const getStructuredResponseFromTemplate = (lgTemplate?: LgTemplate): Part
   return Object.keys(structuredResponse).length ? structuredResponse : undefined;
 };
 
-/**
- * Extracts template name from an LG expression
- * ${templateName(params)} => templateName
- * @param expression Expression to extract template name from.
- */
-export const extractTemplateNameFromExpression = (expression: string): string | undefined =>
-  expression.match(templateNameExtractRegex)?.[1]?.trim();
-
 export const structuredResponseToString = (structuredResponse: PartialStructuredResponse): string => {
   const keys = Object.keys(structuredResponse);
 

Composer/packages/lib/shared/src/lgUtils/index.ts

@@ -7,4 +7,9 @@ export { default as LgTemplateRef } from './models/LgTemplateRef';
 export { default as LgType } from './models/LgType';
 export { extractLgTemplateRefs } from './parsers/parseLgTemplateRef';
 export { LgNamePattern } from './parsers/lgPatterns';
-export { TemplateBodyItem, parseTemplateBody, templateBodyItemsToString } from './stringBuilders/lgStringUtils';
+export {
+  TemplateBodyItem,
+  parseTemplateBody,
+  templateBodyItemsToString,
+  extractTemplateNameFromExpression,
+} from './stringBuilders/lgStringUtils';

Composer/packages/lib/shared/src/lgUtils/stringBuilders/lgStringUtils.ts

@@ -106,3 +106,17 @@ export const templateBodyItemsToString = (items: TemplateBodyItem[]) =>
       }
     })
     .join('\n');
+
+const templateNameExtractRegex = /\${(?<templateName>.*)(\(.*\))\s*}/;
+const jsonTemplateNameExtractRegex = /\${json\((?<templateName>.*)(\(.*\))\s*}/;
+
+/**
+ * Extracts template name from an LG expression
+ * ${templateName(params)} => templateName
+ * ${json(templateName(params))} => templateName
+ * @param expression Expression to extract template name from.
+ */
+export const extractTemplateNameFromExpression = (expression: string): string | undefined =>
+  expression.startsWith('${json(')
+    ? expression.match(jsonTemplateNameExtractRegex)?.groups?.templateName?.trim()
+    : expression.match(templateNameExtractRegex)?.groups?.templateName?.trim();

Composer/packages/ui-plugins/lg/src/LgWidget/useLgTemplate.ts

@@ -1,13 +1,11 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { LgTemplateRef, parseTemplateBody } from '@bfc/shared';
+import { LgTemplateRef, parseTemplateBody, extractTemplateNameFromExpression } from '@bfc/shared';
 import { LgTemplate, useShellApi } from '@bfc/extension-client';
 
 import { locateLgTemplatePosition } from '../locateLgTemplatePosition';
 
-const exprRegex = /^\${(.*)\(\)}$/;
-
 const getAttachmentDisplayText = (template: LgTemplate) => {
   const cardType = template.properties?.$type as string;
   const title = (template.properties?.title as string) ?? '';
@@ -31,10 +29,9 @@ const getLgTemplateTextData = (
         if (responseType === 'Text' || responseType === 'Speak') {
           const subTemplateItem = template.properties[responseType];
           if (subTemplateItem && typeof subTemplateItem === 'string') {
-            const matched = subTemplateItem.trim().match(exprRegex);
+            const subTemplateId = extractTemplateNameFromExpression(subTemplateItem.trim());
             //If it's a template
-            if (matched && matched.length > 1) {
-              const subTemplateId = matched[1];
+            if (subTemplateId) {
               const subTemplate = templates.find((x) => x.name === subTemplateId);
               // If found template and it matches auto-generated names
               if (subTemplate) {
@@ -57,10 +54,9 @@ const getLgTemplateTextData = (
             : [template.properties[responseType]]) as string[];
           const subTemplateItem = subTemplateItems[0];
           if (subTemplateItem && typeof subTemplateItem === 'string') {
-            const matched = subTemplateItem.trim().match(exprRegex);
-            //If it's a template
-            if (matched && matched.length > 1) {
-              const subTemplateId = matched[1];
+            const subTemplateId = extractTemplateNameFromExpression(subTemplateItem.trim());
+            // If it's a template
+            if (subTemplateId) {
               const subTemplate = templates.find((x) => x.name === subTemplateId);
               if (subTemplate) {
                 acc[responseType] = {