diff --git a/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx b/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx index 1bdc8fa122..e8a3e6b08d 100644 --- a/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx @@ -47,6 +47,7 @@ export const SingleLineDiv = styled.div` export const TextDiv = styled.div` ${StandardFontCSS}; ${MultilineCSS}; + white-space: pre-wrap; line-height: 16px; display: inline-block; `; diff --git a/Composer/packages/extensions/visual-designer/src/utils/hooks.ts b/Composer/packages/extensions/visual-designer/src/utils/hooks.ts index acf156af71..0ac62702d2 100644 --- a/Composer/packages/extensions/visual-designer/src/utils/hooks.ts +++ b/Composer/packages/extensions/visual-designer/src/utils/hooks.ts @@ -7,6 +7,8 @@ import { LgTemplateRef } from '@bfc/shared'; import { NodeRendererContext } from '../store/NodeRendererContext'; +import { normalizeLgTemplate } from './normalizeLgTemplate'; + export const useLgTemplate = (str?: string, dialogId?: string) => { const { getLgTemplates } = useContext(NodeRendererContext); const [templateText, setTemplateText] = useState(''); @@ -33,8 +35,7 @@ export const useLgTemplate = (str?: string, dialogId?: string) => { } if (template && template.body) { - const [firstLine] = template.body.split('\n'); - setTemplateText(firstLine.startsWith('-') ? firstLine.substring(1) : firstLine); + setTemplateText(normalizeLgTemplate(template)); } else { setTemplateText(''); } diff --git a/Composer/packages/extensions/visual-designer/src/utils/normalizeLgTemplate.ts b/Composer/packages/extensions/visual-designer/src/utils/normalizeLgTemplate.ts new file mode 100644 index 0000000000..06ff15a07b --- /dev/null +++ b/Composer/packages/extensions/visual-designer/src/utils/normalizeLgTemplate.ts @@ -0,0 +1,16 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +import { LGTemplate } from 'botbuilder-lg'; + +export function normalizeLgTemplate(template: LGTemplate): string { + const templateTexts = template.body.split('\n').map(line => (line.startsWith('-') ? line.substring(1) : line)); + let showText = ''; + + if (templateTexts[0] && templateTexts[0].trim() === '[Activity') { + showText = templateTexts.find(text => text.includes('Text = '))?.split('Text = ')[1] || ''; + } else { + showText = templateTexts.join('\n'); + } + return showText; +} diff --git a/Composer/packages/server/assets/projects/ToDoBotWithLuisSample/ComposerDialogs/Main/Main.dialog b/Composer/packages/server/assets/projects/ToDoBotWithLuisSample/ComposerDialogs/Main/Main.dialog index d760ed5083..2145b05a40 100644 --- a/Composer/packages/server/assets/projects/ToDoBotWithLuisSample/ComposerDialogs/Main/Main.dialog +++ b/Composer/packages/server/assets/projects/ToDoBotWithLuisSample/ComposerDialogs/Main/Main.dialog @@ -314,7 +314,7 @@ { "$type": "Microsoft.SendActivity", "$designer": { - "id": "684852", + "id": "212971", "name": "Send a response" }, "activity": "${bfdactivity-212971()}" @@ -322,7 +322,7 @@ { "$type": "Microsoft.TextInput", "$designer": { - "id": "038757", + "id": "879447", "name": "Text input" }, "prompt": "${bfdprompt-879447()}", @@ -346,7 +346,7 @@ { "$type": "Microsoft.SendActivity", "$designer": { - "id": "593087", + "id": "056974", "name": "Send a response" }, "activity": "${bfdactivity-056974()}" @@ -356,7 +356,7 @@ { "$type": "Microsoft.SendActivity", "$designer": { - "id": "253146", + "id": "084161", "name": "Send a response" }, "activity": "${bfdactivity-084161()}"