From e59d7d8886359cda2ae8ae093676c1687e0fdb73 Mon Sep 17 00:00:00 2001
From: zeye <zeye@microsoft.com>
Date: Wed, 8 Jan 2020 13:23:26 +0800
Subject: [PATCH 01/11] render fallback node

---
 .../visual-designer/src/schema/uischemaRenderer.tsx    | 10 +++++++---
 .../visual-designer/src/widgets/ActionCard.tsx         |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx
index 24499b4954..ebcf330e40 100644
--- a/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx
+++ b/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx
@@ -2,9 +2,11 @@
 // Licensed under the MIT License.
 
 import React from 'react';
-import { BaseSchema } from '@bfc/shared';
+import { BaseSchema, generateSDKTitle } from '@bfc/shared';
 import get from 'lodash/get';
 
+import { ActionCard } from '../widgets/ActionCard';
+
 import { uiSchema } from './uischema';
 import { UIWidget, UI_WIDGET_KEY, UIWidgetProp } from './uischema.types';
 
@@ -40,12 +42,14 @@ const renderWidget = (inputData, schema: UIWidget, contextProps = {}): JSX.Eleme
   return <Widget data={inputData} {...contextProps} {...props} />;
 };
 
-const renderFallbackElement = (data: BaseSchema) => <></>;
+const renderFallbackElement = (data: BaseSchema, context) => {
+  return <ActionCard data={data} title={generateSDKTitle(data)} menu={context.menu} onClick={context.onClick} />;
+};
 
 export const renderSDKType = (data: BaseSchema, context?: { menu: JSX.Element; onClick }): JSX.Element => {
   const $type = get(data, '$type');
   const schema: UIWidget = get(uiSchema, $type);
-  if (!schema) return renderFallbackElement(data);
+  if (!schema) return renderFallbackElement(data, context);
 
   return renderWidget(data, schema, context);
 };
diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx
index a8200df902..5cc39b81de 100644
--- a/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx
+++ b/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx
@@ -10,8 +10,8 @@ import { ObiColors } from '../constants/ElementColors';
 
 export interface ActionCardProps extends WidgetContainerProps {
   title: string;
-  icon: string;
-  content: string | number | JSX.Element;
+  icon?: string;
+  content?: string | number | JSX.Element;
   menu: JSX.Element;
   colors?: {
     theme: string;

From 3f5eeda070dacb0e75574cdb420c6f6f89aeb52c Mon Sep 17 00:00:00 2001
From: zeye <zeye@microsoft.com>
Date: Wed, 8 Jan 2020 13:49:43 +0800
Subject: [PATCH 02/11] fix the problem in a more schema-driven way

---
 .../extensions/visual-designer/src/schema/uischema.ts |  3 +++
 .../visual-designer/src/schema/uischema.types.ts      |  6 +++++-
 .../visual-designer/src/schema/uischemaRenderer.tsx   | 11 ++---------
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.ts b/Composer/packages/extensions/visual-designer/src/schema/uischema.ts
index 49761bc551..620105afaf 100644
--- a/Composer/packages/extensions/visual-designer/src/schema/uischema.ts
+++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.ts
@@ -8,6 +8,9 @@ import { ActionCard } from '../widgets/ActionCard';
 import { UISchema } from './uischema.types';
 
 export const uiSchema: UISchema = {
+  default: {
+    'ui:widget': ActionCard,
+  },
   [SDKTypes.EditArray]: {
     'ui:widget': ActionCard,
     content: data => `${data.changeType} {${data.itemsProperty || '?'}}`,
diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.types.ts b/Composer/packages/extensions/visual-designer/src/schema/uischema.types.ts
index 9c4262e02b..465d09b1a2 100644
--- a/Composer/packages/extensions/visual-designer/src/schema/uischema.types.ts
+++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.types.ts
@@ -4,9 +4,13 @@
 import { FC, ComponentClass } from 'react';
 import { BaseSchema, SDKTypes } from '@bfc/shared';
 
+export enum UISchemaBuiltinKeys {
+  default = 'default',
+}
+
 /** schema */
 export type UISchema = {
-  [key in SDKTypes]?: UIWidget;
+  [key in SDKTypes | UISchemaBuiltinKeys]?: UIWidget;
 };
 
 /** widget */
diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx
index ebcf330e40..d7d5fa73f4 100644
--- a/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx
+++ b/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx
@@ -2,11 +2,9 @@
 // Licensed under the MIT License.
 
 import React from 'react';
-import { BaseSchema, generateSDKTitle } from '@bfc/shared';
+import { BaseSchema } from '@bfc/shared';
 import get from 'lodash/get';
 
-import { ActionCard } from '../widgets/ActionCard';
-
 import { uiSchema } from './uischema';
 import { UIWidget, UI_WIDGET_KEY, UIWidgetProp } from './uischema.types';
 
@@ -42,14 +40,9 @@ const renderWidget = (inputData, schema: UIWidget, contextProps = {}): JSX.Eleme
   return <Widget data={inputData} {...contextProps} {...props} />;
 };
 
-const renderFallbackElement = (data: BaseSchema, context) => {
-  return <ActionCard data={data} title={generateSDKTitle(data)} menu={context.menu} onClick={context.onClick} />;
-};
-
 export const renderSDKType = (data: BaseSchema, context?: { menu: JSX.Element; onClick }): JSX.Element => {
   const $type = get(data, '$type');
-  const schema: UIWidget = get(uiSchema, $type);
-  if (!schema) return renderFallbackElement(data, context);
+  const schema = get(uiSchema, $type, uiSchema.default);
 
   return renderWidget(data, schema, context);
 };

From b40b7ee5b55e17c435bfb87a916a28ddb613f981 Mon Sep 17 00:00:00 2001
From: zeye <zeye@microsoft.com>
Date: Wed, 8 Jan 2020 13:51:50 +0800
Subject: [PATCH 03/11] revert unnecessary changes

---
 .../extensions/visual-designer/src/widgets/ActionCard.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx
index 5cc39b81de..a8200df902 100644
--- a/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx
+++ b/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx
@@ -10,8 +10,8 @@ import { ObiColors } from '../constants/ElementColors';
 
 export interface ActionCardProps extends WidgetContainerProps {
   title: string;
-  icon?: string;
-  content?: string | number | JSX.Element;
+  icon: string;
+  content: string | number | JSX.Element;
   menu: JSX.Element;
   colors?: {
     theme: string;

From def5d0e0e1f73513428e7409ee511259cf4ce98c Mon Sep 17 00:00:00 2001
From: zeye <zeye@microsoft.com>
Date: Wed, 8 Jan 2020 17:25:50 +0800
Subject: [PATCH 04/11] extend builtin props: id, data, onEvent

---
 .../src/schema/uischema.types.ts              |  6 +++++
 .../src/schema/uischemaRenderer.tsx           | 24 ++++++++++++-------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.types.ts b/Composer/packages/extensions/visual-designer/src/schema/uischema.types.ts
index 465d09b1a2..546980b1ab 100644
--- a/Composer/packages/extensions/visual-designer/src/schema/uischema.types.ts
+++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.types.ts
@@ -4,6 +4,8 @@
 import { FC, ComponentClass } from 'react';
 import { BaseSchema, SDKTypes } from '@bfc/shared';
 
+import { NodeEventTypes } from '../constants/NodeEventTypes';
+
 export enum UISchemaBuiltinKeys {
   default = 'default',
 }
@@ -23,8 +25,12 @@ export interface UIWidget {
 
 export type WidgetComponent<T extends WidgetContainerProps> = FC<T> | ComponentClass<T, any>;
 
+export type WidgetEventHandler = (eventName: NodeEventTypes, eventData?: any) => void;
+
 export interface WidgetContainerProps {
+  id: string;
   data: BaseSchema;
+  onEvent: WidgetEventHandler;
   [propKey: string]: any;
 }
 
diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx
index d7d5fa73f4..a088031c80 100644
--- a/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx
+++ b/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx
@@ -1,12 +1,12 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React from 'react';
+import React, { FC } from 'react';
 import { BaseSchema } from '@bfc/shared';
 import get from 'lodash/get';
 
 import { uiSchema } from './uischema';
-import { UIWidget, UI_WIDGET_KEY, UIWidgetProp } from './uischema.types';
+import { UIWidget, UI_WIDGET_KEY, UIWidgetProp, WidgetEventHandler } from './uischema.types';
 
 const buildWidgetProp = (data: BaseSchema, rawPropValue: UIWidgetProp) => {
   if (typeof rawPropValue === 'function') {
@@ -35,14 +35,20 @@ const parseWidgetSchema = (data: BaseSchema, widgetSchema: UIWidget) => {
   };
 };
 
-const renderWidget = (inputData, schema: UIWidget, contextProps = {}): JSX.Element => {
-  const { Widget, props } = parseWidgetSchema(inputData, schema);
-  return <Widget data={inputData} {...contextProps} {...props} />;
-};
+export interface UISchemaRendererProps {
+  /** The uniq id of current schema data. Usually a json path. */
+  id: string;
+
+  /** Declarative json with a $type field. */
+  data: BaseSchema;
 
-export const renderSDKType = (data: BaseSchema, context?: { menu: JSX.Element; onClick }): JSX.Element => {
+  /** Handle UI events */
+  onEvent: WidgetEventHandler;
+}
+
+export const UISchemaRenderer: FC<UISchemaRendererProps> = ({ id, data, onEvent, ...contextProps }): JSX.Element => {
   const $type = get(data, '$type');
   const schema = get(uiSchema, $type, uiSchema.default);
-
-  return renderWidget(data, schema, context);
+  const { Widget, props } = parseWidgetSchema(data, schema);
+  return <Widget id={id} data={data} onEvent={onEvent} {...contextProps} {...props} />;
 };

From 132aed221edb9223c67c641fde1b94ba15a95178 Mon Sep 17 00:00:00 2001
From: zeye <zeye@microsoft.com>
Date: Wed, 8 Jan 2020 17:27:49 +0800
Subject: [PATCH 05/11] migrate widget ActionCard to new base props

---
 .../visual-designer/src/widgets/ActionCard.tsx     | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx
index a8200df902..f75b60d525 100644
--- a/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx
+++ b/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx
@@ -7,6 +7,7 @@ import { generateSDKTitle } from '@bfc/shared';
 import { FormCard } from '../components/nodes/templates/FormCard';
 import { WidgetContainerProps, WidgetComponent } from '../schema/uischema.types';
 import { ObiColors } from '../constants/ElementColors';
+import { NodeEventTypes } from '../constants/NodeEventTypes';
 
 export interface ActionCardProps extends WidgetContainerProps {
   title: string;
@@ -17,7 +18,6 @@ export interface ActionCardProps extends WidgetContainerProps {
     theme: string;
     icon: string;
   };
-  onClick: () => any;
 }
 
 const DefaultCardColor = {
@@ -26,17 +26,25 @@ const DefaultCardColor = {
 };
 
 export const ActionCard: WidgetComponent<ActionCardProps> = ({
+  id,
   data,
+  onEvent,
   title,
   icon,
   content,
   menu,
-  onClick,
   colors = DefaultCardColor,
 }) => {
   const header = generateSDKTitle(data, title);
   const nodeColors = { themeColor: colors.theme, iconColor: colors.icon };
   return (
-    <FormCard header={header} corner={menu} icon={icon} label={content} nodeColors={nodeColors} onClick={onClick} />
+    <FormCard
+      header={header}
+      corner={menu}
+      icon={icon}
+      label={content}
+      nodeColors={nodeColors}
+      onClick={() => onEvent(NodeEventTypes.Focus, { id })}
+    />
   );
 };

From aa3247eb9645205b3228fbaf8fc126847ffb57ec Mon Sep 17 00:00:00 2001
From: zeye <zeye@microsoft.com>
Date: Wed, 8 Jan 2020 17:34:14 +0800
Subject: [PATCH 06/11] retire DefaultRenderer

---
 .../src/components/nodes/index.tsx               |  1 -
 .../components/nodes/steps/DefaultRenderer.tsx   | 16 ----------------
 .../src/components/renderers/ElementRenderer.tsx |  4 ++--
 .../visual-designer/src/widgets/ActionCard.tsx   |  5 ++---
 4 files changed, 4 insertions(+), 22 deletions(-)
 delete mode 100644 Composer/packages/extensions/visual-designer/src/components/nodes/steps/DefaultRenderer.tsx

diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/index.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/index.tsx
index 15dcc39c9f..14c303c116 100644
--- a/Composer/packages/extensions/visual-designer/src/components/nodes/index.tsx
+++ b/Composer/packages/extensions/visual-designer/src/components/nodes/index.tsx
@@ -3,7 +3,6 @@
 
 export * from './steps/ActivityRenderer';
 export * from './steps/BeginDialog';
-export * from './steps/DefaultRenderer';
 export * from './steps/ReplaceDialog';
 export * from './steps/ChoiceInput';
 export * from './steps/TextInput';
diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/steps/DefaultRenderer.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/steps/DefaultRenderer.tsx
deleted file mode 100644
index a40a063063..0000000000
--- a/Composer/packages/extensions/visual-designer/src/components/nodes/steps/DefaultRenderer.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React, { FC } from 'react';
-
-import { NodeProps } from '../nodeProps';
-import { renderSDKType } from '../../../schema/uischemaRenderer';
-import { NodeMenu } from '../../menus/NodeMenu';
-import { NodeEventTypes } from '../../../constants/NodeEventTypes';
-
-export const DefaultRenderer: FC<NodeProps> = ({ id, data, onEvent }) => {
-  return renderSDKType(data, {
-    menu: <NodeMenu id={id} onEvent={onEvent} />,
-    onClick: () => onEvent(NodeEventTypes.Focus, { id }),
-  });
-};
diff --git a/Composer/packages/extensions/visual-designer/src/components/renderers/ElementRenderer.tsx b/Composer/packages/extensions/visual-designer/src/components/renderers/ElementRenderer.tsx
index ec5ef11b60..7612a8f448 100644
--- a/Composer/packages/extensions/visual-designer/src/components/renderers/ElementRenderer.tsx
+++ b/Composer/packages/extensions/visual-designer/src/components/renderers/ElementRenderer.tsx
@@ -11,7 +11,6 @@ import { AttrNames } from '../../constants/ElementAttributes';
 import { NodeRendererContext } from '../../store/NodeRendererContext';
 import { SelectionContext } from '../../store/SelectionContext';
 import {
-  DefaultRenderer,
   BeginDialog,
   ReplaceDialog,
   ActivityRenderer,
@@ -24,6 +23,7 @@ import { ConditionNode } from '../nodes/steps/ConditionNode';
 import { ForeachDetail } from '../nodes/steps/ForeachDetail';
 import { ForeachPageDetail } from '../nodes/steps/ForeachPageDetail';
 import { NodeProps, defaultNodeProps } from '../nodes/nodeProps';
+import { UISchemaRenderer } from '../../schema/uischemaRenderer';
 
 const rendererByObiType = {
   [ObiTypes.BeginDialog]: BeginDialog,
@@ -37,7 +37,7 @@ const rendererByObiType = {
   [ObiTypes.UserAnswers]: UserInput,
   [ObiTypes.InvalidPromptBrick]: InvalidPromptBrick,
 };
-const DEFAULT_RENDERER = DefaultRenderer;
+const DEFAULT_RENDERER = UISchemaRenderer;
 
 function chooseRendererByType($type): FC<NodeProps> | ComponentClass<NodeProps> {
   const renderer = rendererByObiType[$type] || DEFAULT_RENDERER;
diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx
index f75b60d525..fc01237ecd 100644
--- a/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx
+++ b/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx
@@ -8,12 +8,12 @@ import { FormCard } from '../components/nodes/templates/FormCard';
 import { WidgetContainerProps, WidgetComponent } from '../schema/uischema.types';
 import { ObiColors } from '../constants/ElementColors';
 import { NodeEventTypes } from '../constants/NodeEventTypes';
+import { NodeMenu } from '../components/menus/NodeMenu';
 
 export interface ActionCardProps extends WidgetContainerProps {
   title: string;
   icon: string;
   content: string | number | JSX.Element;
-  menu: JSX.Element;
   colors?: {
     theme: string;
     icon: string;
@@ -32,7 +32,6 @@ export const ActionCard: WidgetComponent<ActionCardProps> = ({
   title,
   icon,
   content,
-  menu,
   colors = DefaultCardColor,
 }) => {
   const header = generateSDKTitle(data, title);
@@ -40,7 +39,7 @@ export const ActionCard: WidgetComponent<ActionCardProps> = ({
   return (
     <FormCard
       header={header}
-      corner={menu}
+      corner={<NodeMenu id={id} onEvent={onEvent} />}
       icon={icon}
       label={content}
       nodeColors={nodeColors}

From 9144e6ee9fcfb4757169df8e93c8fa9164b0bc25 Mon Sep 17 00:00:00 2001
From: zeye <zeye@microsoft.com>
Date: Thu, 9 Jan 2020 18:52:40 +0800
Subject: [PATCH 07/11] make ActivityRenderer a widget

---
 .../src/components/nodes/index.tsx            |  1 -
 .../nodes/steps/ActivityRenderer.tsx          | 35 ------------
 .../components/renderers/ElementRenderer.tsx  | 12 +---
 .../src/widgets/ActivityRenderer.tsx          | 55 +++++++++++++++++++
 4 files changed, 57 insertions(+), 46 deletions(-)
 delete mode 100644 Composer/packages/extensions/visual-designer/src/components/nodes/steps/ActivityRenderer.tsx
 create mode 100644 Composer/packages/extensions/visual-designer/src/widgets/ActivityRenderer.tsx

diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/index.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/index.tsx
index 14c303c116..cee9d240e0 100644
--- a/Composer/packages/extensions/visual-designer/src/components/nodes/index.tsx
+++ b/Composer/packages/extensions/visual-designer/src/components/nodes/index.tsx
@@ -1,7 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-export * from './steps/ActivityRenderer';
 export * from './steps/BeginDialog';
 export * from './steps/ReplaceDialog';
 export * from './steps/ChoiceInput';
diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/steps/ActivityRenderer.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/steps/ActivityRenderer.tsx
deleted file mode 100644
index 1bcb8248b6..0000000000
--- a/Composer/packages/extensions/visual-designer/src/components/nodes/steps/ActivityRenderer.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React from 'react';
-import formatMessage from 'format-message';
-import { generateSDKTitle } from '@bfc/shared';
-
-import { NodeEventTypes } from '../../../constants/NodeEventTypes';
-import { getElementColor, ElementIcon } from '../../../utils/obiPropertyResolver';
-import { NodeMenu } from '../../menus/NodeMenu';
-import { FormCard } from '../templates/FormCard';
-import { NodeProps, defaultNodeProps } from '../nodeProps';
-import { useLgTemplate } from '../../../utils/hooks';
-
-export const ActivityRenderer: React.FC<NodeProps> = props => {
-  const { id, data, onEvent } = props;
-  const templateText = useLgTemplate(data.activity, data.$designer && data.$designer.id);
-
-  const nodeColors = getElementColor(data.$type);
-  const header = formatMessage('Activity');
-  return (
-    <FormCard
-      header={generateSDKTitle(data, header)}
-      label={templateText}
-      icon={ElementIcon.MessageBot}
-      corner={<NodeMenu id={id} onEvent={onEvent} />}
-      nodeColors={nodeColors}
-      onClick={() => {
-        onEvent(NodeEventTypes.Focus, { id });
-      }}
-    />
-  );
-};
-
-ActivityRenderer.defaultProps = defaultNodeProps;
diff --git a/Composer/packages/extensions/visual-designer/src/components/renderers/ElementRenderer.tsx b/Composer/packages/extensions/visual-designer/src/components/renderers/ElementRenderer.tsx
index 7612a8f448..9403d61328 100644
--- a/Composer/packages/extensions/visual-designer/src/components/renderers/ElementRenderer.tsx
+++ b/Composer/packages/extensions/visual-designer/src/components/renderers/ElementRenderer.tsx
@@ -10,15 +10,7 @@ import { ObiTypes } from '../../constants/ObiTypes';
 import { AttrNames } from '../../constants/ElementAttributes';
 import { NodeRendererContext } from '../../store/NodeRendererContext';
 import { SelectionContext } from '../../store/SelectionContext';
-import {
-  BeginDialog,
-  ReplaceDialog,
-  ActivityRenderer,
-  ChoiceInput,
-  BotAsks,
-  UserInput,
-  InvalidPromptBrick,
-} from '../nodes/index';
+import { BeginDialog, ReplaceDialog, ChoiceInput, BotAsks, UserInput, InvalidPromptBrick } from '../nodes/index';
 import { ConditionNode } from '../nodes/steps/ConditionNode';
 import { ForeachDetail } from '../nodes/steps/ForeachDetail';
 import { ForeachPageDetail } from '../nodes/steps/ForeachPageDetail';
@@ -31,7 +23,7 @@ const rendererByObiType = {
   [ObiTypes.ForeachDetail]: ForeachDetail,
   [ObiTypes.ForeachPageDetail]: ForeachPageDetail,
   [ObiTypes.ReplaceDialog]: ReplaceDialog,
-  [ObiTypes.SendActivity]: ActivityRenderer,
+  [ObiTypes.SendActivity]: UISchemaRenderer,
   [ObiTypes.ChoiceInputDetail]: ChoiceInput,
   [ObiTypes.BotAsks]: BotAsks,
   [ObiTypes.UserAnswers]: UserInput,
diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ActivityRenderer.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ActivityRenderer.tsx
new file mode 100644
index 0000000000..b3e460def8
--- /dev/null
+++ b/Composer/packages/extensions/visual-designer/src/widgets/ActivityRenderer.tsx
@@ -0,0 +1,55 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { generateSDKTitle } from '@bfc/shared';
+import get from 'lodash/get';
+
+import { NodeEventTypes } from '../constants/NodeEventTypes';
+import { ElementIcon } from '../utils/obiPropertyResolver';
+import { NodeMenu } from '../components/menus/NodeMenu';
+import { FormCard } from '../components/nodes/templates/FormCard';
+import { useLgTemplate } from '../utils/hooks';
+import { WidgetContainerProps } from '../schema/uischema.types';
+import { ObiColors } from '../constants/ElementColors';
+
+export interface ActivityRenderer extends WidgetContainerProps {
+  /** indicates which field contains lg activity. ('activity', 'prompt', 'invalidPropmt'...) */
+  field: string;
+  colors?: {
+    theme: string;
+    icon: string;
+  };
+}
+
+const DefaultThemeColor = {
+  theme: ObiColors.BlueMagenta20,
+  icon: ObiColors.BlueMagenta30,
+};
+
+export const ActivityRenderer: React.FC<ActivityRenderer> = ({
+  id,
+  data,
+  onEvent,
+  field,
+  colors = DefaultThemeColor,
+}) => {
+  const designerId = get(data, '$designer.id');
+  const activityTemplate = get(data, field, '');
+
+  const templateText = useLgTemplate(activityTemplate, designerId);
+  const nodeColors = { themeColor: colors.theme, iconColor: colors.icon };
+
+  return (
+    <FormCard
+      header={generateSDKTitle(data)}
+      label={templateText}
+      icon={ElementIcon.MessageBot}
+      corner={<NodeMenu id={id} onEvent={onEvent} />}
+      nodeColors={nodeColors}
+      onClick={() => {
+        onEvent(NodeEventTypes.Focus, { id });
+      }}
+    />
+  );
+};

From ff186fa110b3fc42d8f5ee257aba18a36cb84466 Mon Sep 17 00:00:00 2001
From: zeye <zeye@microsoft.com>
Date: Thu, 9 Jan 2020 18:54:09 +0800
Subject: [PATCH 08/11] make 'icon' customizable

---
 .../visual-designer/src/widgets/ActivityRenderer.tsx          | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ActivityRenderer.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ActivityRenderer.tsx
index b3e460def8..9fd5dd66f9 100644
--- a/Composer/packages/extensions/visual-designer/src/widgets/ActivityRenderer.tsx
+++ b/Composer/packages/extensions/visual-designer/src/widgets/ActivityRenderer.tsx
@@ -16,6 +16,7 @@ import { ObiColors } from '../constants/ElementColors';
 export interface ActivityRenderer extends WidgetContainerProps {
   /** indicates which field contains lg activity. ('activity', 'prompt', 'invalidPropmt'...) */
   field: string;
+  icon: ElementIcon;
   colors?: {
     theme: string;
     icon: string;
@@ -32,6 +33,7 @@ export const ActivityRenderer: React.FC<ActivityRenderer> = ({
   data,
   onEvent,
   field,
+  icon = ElementIcon.MessageBot,
   colors = DefaultThemeColor,
 }) => {
   const designerId = get(data, '$designer.id');
@@ -44,7 +46,7 @@ export const ActivityRenderer: React.FC<ActivityRenderer> = ({
     <FormCard
       header={generateSDKTitle(data)}
       label={templateText}
-      icon={ElementIcon.MessageBot}
+      icon={icon}
       corner={<NodeMenu id={id} onEvent={onEvent} />}
       nodeColors={nodeColors}
       onClick={() => {

From b161c15b8e2c8bf7627fbedada014a6f2dcb7619 Mon Sep 17 00:00:00 2001
From: zeye <zeye@microsoft.com>
Date: Thu, 9 Jan 2020 19:10:50 +0800
Subject: [PATCH 09/11] update sdk demp

---
 .../extensions/visual-designer/demo/src/index.js       |  2 +-
 .../visual-designer/demo/src/stories/VisualSDKDemo.js  | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/Composer/packages/extensions/visual-designer/demo/src/index.js b/Composer/packages/extensions/visual-designer/demo/src/index.js
index 34e853d250..c9f24d18fe 100644
--- a/Composer/packages/extensions/visual-designer/demo/src/index.js
+++ b/Composer/packages/extensions/visual-designer/demo/src/index.js
@@ -36,7 +36,7 @@ const DemoMaps = {
 
 class Demo extends Component {
   state = {
-    selectedItem: DemoMaps.VisualEditorDemo.key,
+    selectedItem: DemoMaps.VisualSDKDemo.key,
   };
 
   renderNav() {
diff --git a/Composer/packages/extensions/visual-designer/demo/src/stories/VisualSDKDemo.js b/Composer/packages/extensions/visual-designer/demo/src/stories/VisualSDKDemo.js
index af63d7d274..b3bab73ad5 100644
--- a/Composer/packages/extensions/visual-designer/demo/src/stories/VisualSDKDemo.js
+++ b/Composer/packages/extensions/visual-designer/demo/src/stories/VisualSDKDemo.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { seedNewDialog, SDKTypes } from '@bfc/shared';
 
-import { renderSDKType } from '../../../src/schema/uischemaRenderer';
+import { UISchemaRenderer } from '../../../src/schema/uischemaRenderer';
 import { EdgeMenu } from '../../../src/components/menus/EdgeMenu';
 import { JsonBlock } from '../components/json-block';
 
@@ -14,13 +14,17 @@ export class VisualSDKDemo extends Component {
 
   seedInitialActions() {
     const initialTypes = [
+      SDKTypes.SendActivity,
       SDKTypes.EditArray,
       SDKTypes.InitProperty,
       SDKTypes.SetProperties,
       SDKTypes.SetProperty,
       SDKTypes.DeleteProperties,
       SDKTypes.DeleteProperty,
+      SDKTypes.BeginDialog,
       SDKTypes.EndDialog,
+      SDKTypes.RepeatDialog,
+      SDKTypes.ReplaceDialog,
       SDKTypes.CancelAllDialogs,
       SDKTypes.EmitEvent,
     ];
@@ -58,7 +62,9 @@ export class VisualSDKDemo extends Component {
             }}
           />
         </div>
-        <div className="action-preview--visual">{renderSDKType(action)}</div>
+        <div className="action-preview--visual">
+          <UISchemaRenderer id={`actions[${index}]`} data={action} onEvent={() => null} />
+        </div>
       </div>
     );
   }

From f66e21fdde6a77f9021364b35cef9e61f58c7886 Mon Sep 17 00:00:00 2001
From: zeye <zeye@microsoft.com>
Date: Thu, 9 Jan 2020 19:11:05 +0800
Subject: [PATCH 10/11] register 'SendActivity' in uischema

---
 .../visual-designer/src/schema/uischema.ts           | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.ts b/Composer/packages/extensions/visual-designer/src/schema/uischema.ts
index 620105afaf..9d88caf654 100644
--- a/Composer/packages/extensions/visual-designer/src/schema/uischema.ts
+++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.ts
@@ -4,6 +4,9 @@
 import { SDKTypes } from '@bfc/shared';
 
 import { ActionCard } from '../widgets/ActionCard';
+import { ActivityRenderer } from '../widgets/ActivityRenderer';
+import { ElementIcon } from '../utils/obiPropertyResolver';
+import { ObiColors } from '../constants/ElementColors';
 
 import { UISchema } from './uischema.types';
 
@@ -11,6 +14,15 @@ export const uiSchema: UISchema = {
   default: {
     'ui:widget': ActionCard,
   },
+  [SDKTypes.SendActivity]: {
+    'ui:widget': ActivityRenderer,
+    field: 'activity',
+    icon: ElementIcon.MessageBot,
+    colors: {
+      theme: ObiColors.BlueMagenta20,
+      icon: ObiColors.BlueMagenta30,
+    },
+  },
   [SDKTypes.EditArray]: {
     'ui:widget': ActionCard,
     content: data => `${data.changeType} {${data.itemsProperty || '?'}}`,

From 55d5ac640ea42443668b4f1b9e6ebd6e0ed1af25 Mon Sep 17 00:00:00 2001
From: Ze Ye <zeye@microsoft.com>
Date: Fri, 10 Jan 2020 00:27:06 +0800
Subject: [PATCH 11/11] drive ReplaceDialog, BeginDialog

---
 .../src/schema/{uischema.ts => uischema.tsx}  | 11 ++++
 .../src/widgets/DialogRefCard.tsx             | 63 +++++++++++++++++++
 2 files changed, 74 insertions(+)
 rename Composer/packages/extensions/visual-designer/src/schema/{uischema.ts => uischema.tsx} (87%)
 create mode 100644 Composer/packages/extensions/visual-designer/src/widgets/DialogRefCard.tsx

diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.ts b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx
similarity index 87%
rename from Composer/packages/extensions/visual-designer/src/schema/uischema.ts
rename to Composer/packages/extensions/visual-designer/src/schema/uischema.tsx
index 9d88caf654..667af73b7d 100644
--- a/Composer/packages/extensions/visual-designer/src/schema/uischema.ts
+++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx
@@ -2,9 +2,11 @@
 // Licensed under the MIT License.
 
 import { SDKTypes } from '@bfc/shared';
+import React from 'react';
 
 import { ActionCard } from '../widgets/ActionCard';
 import { ActivityRenderer } from '../widgets/ActivityRenderer';
+import { DialogRefCard } from '../widgets/DialogRefCard';
 import { ElementIcon } from '../utils/obiPropertyResolver';
 import { ObiColors } from '../constants/ElementColors';
 
@@ -23,6 +25,15 @@ export const uiSchema: UISchema = {
       icon: ObiColors.BlueMagenta30,
     },
   },
+  [SDKTypes.BeginDialog]: {
+    'ui:widget': DialogRefCard,
+    dialog: data => data.dialog,
+  },
+  [SDKTypes.ReplaceDialog]: {
+    'ui:widget': DialogRefCard,
+    dialog: data => data.dialog,
+    getRefContent: data => dialogRef => <>Switch to {dialogRef}</>,
+  },
   [SDKTypes.EditArray]: {
     'ui:widget': ActionCard,
     content: data => `${data.changeType} {${data.itemsProperty || '?'}}`,
diff --git a/Composer/packages/extensions/visual-designer/src/widgets/DialogRefCard.tsx b/Composer/packages/extensions/visual-designer/src/widgets/DialogRefCard.tsx
new file mode 100644
index 0000000000..59850494de
--- /dev/null
+++ b/Composer/packages/extensions/visual-designer/src/widgets/DialogRefCard.tsx
@@ -0,0 +1,63 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { generateSDKTitle } from '@bfc/shared';
+
+import { FormCard } from '../components/nodes/templates/FormCard';
+import { WidgetContainerProps, WidgetComponent } from '../schema/uischema.types';
+import { ObiColors } from '../constants/ElementColors';
+import { NodeEventTypes } from '../constants/NodeEventTypes';
+import { NodeMenu } from '../components/menus/NodeMenu';
+import get from 'lodash/get';
+
+export interface DialogRefCardProps extends WidgetContainerProps {
+  dialog: string | object;
+  getRefContent?: (dialogRef: JSX.Element) => JSX.Element;
+  colors?: {
+    theme: string;
+    icon: string;
+  };
+}
+
+const DefaultCardColor = {
+  theme: ObiColors.AzureGray3,
+  icon: ObiColors.AzureGray2,
+};
+
+export const DialogRefCard: WidgetComponent<DialogRefCardProps> = ({
+  id,
+  data,
+  onEvent,
+  dialog,
+  getRefContent,
+  colors = DefaultCardColor,
+}) => {
+  const header = generateSDKTitle(data);
+  const nodeColors = { themeColor: colors.theme, iconColor: colors.icon };
+  const calleeDialog = typeof dialog === 'object' ? get(dialog, '$ref') : dialog;
+  const dialogRef = (
+    <span
+      css={{
+        cursor: 'pointer',
+        color: 'blue',
+      }}
+      onClick={e => {
+        e.stopPropagation();
+        onEvent(NodeEventTypes.OpenDialog, { caller: id, callee: calleeDialog });
+      }}
+    >
+      {calleeDialog}
+    </span>
+  );
+  return (
+    <FormCard
+      header={header}
+      corner={<NodeMenu id={id} onEvent={onEvent} />}
+      label={typeof getRefContent === 'function' ? getRefContent(dialogRef) : dialogRef}
+      nodeColors={nodeColors}
+      onClick={() => onEvent(NodeEventTypes.Focus, { id })}
+    />
+  );
+};