Merge branch 'master' into cwhitten/welcome-page-debug

microsoft · Apr 24, 2019 · b68336c · b68336c
2 parents 4b16476 + e45b24f
commit b68336c
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 6 deletions.
diff --git a/packages/app/client/src/data/sagas/chatSagas.ts b/packages/app/client/src/data/sagas/chatSagas.ts
@@ -223,7 +223,7 @@ export function* diffWithPreviousBotState(currentBotState: Activity): Iterable<a
       return value;
     })
   );
-  botStateClone.valueType = 'https://www.botframework.com/schemas/diff';
+  botStateClone.valueType = ValueTypes.Diff;
   // values that were added
   rhs.forEach(path => {
     buildDiff('+', path, botStateClone.value, botStateClone.value);

diff --git a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.scss b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.scss
@@ -120,24 +120,32 @@ button.bot-state-object {
   margin: 5px 16px;
   min-width: initial;
   background: transparent;
-  color: var(--webchat-buttons-color);
+  color: var(--bot-state-button-color);
   font-weight: bold;
 
   &:active {
-    color: var(--webchat-buttons-color-focus);
+    color: var(--bot-state-button-color-focus);
   }
 
   &[aria-selected="false"] {
-    color: var(--webchat-buttons-color);
+    color: var(--bot-state-button-color);
   }
 
   &:hover:not([disabled]), &:focus {
     background: transparent;
-    color: var(--webchat-buttons-color-focus);
+    color: var(--bot-state-button-color-focus);
   }
 
   &[aria-selected="true"] {
-    color: var(--webchat-buttons-color-focus);
+    color: var(--bot-state-button-color-focus);
+
+    &[data-diff-indicator-index='0'] {
+      color: var(--bot-state-button-color);
+
+      &:before {
+        background: var(--bot-state-diff-indicator-color);
+      }
+    }
 
     &:before {
       content: '';

diff --git a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx
@@ -186,10 +186,15 @@ export class Chat extends Component<ChatProps, ChatState> {
         </ActivityWrapper>
       );
     } else if (valueType === ValueTypes.BotState) {
+      const diffIndicatorIndex =
+        this.state.highlightedActivities.length > 1
+          ? this.state.highlightedActivities.findIndex(activity => areActivitiesEqual(activity, card.activity))
+          : -1;
       return (
         <PrimaryButton
           className={styles.botStateObject}
           data-activity-id={card.activity.id}
+          data-diff-indicator-index={diffIndicatorIndex}
           onKeyDown={this.onItemRendererKeyDown}
           onClick={this.onItemRendererClick}
           onContextMenu={this.onContextMenu}

diff --git a/packages/app/client/src/ui/styles/themes/dark.css b/packages/app/client/src/ui/styles/themes/dark.css
@@ -53,6 +53,11 @@ html {
   --webchat-sa-border: solid 1px var(--neutral-4);
   --webchat-sa-text: #3794FF;
 
+  /* bot state button */
+  --bot-state-button-color: var(--neutral-6);
+  --bot-state-button-color-focus: var(--neutral-1);
+  --bot-state-diff-indicator-color: #A1260D;
+
   /* Log panel custom colors */
   --log-panel-timestamp: #47B07F;
   --log-panel-link: #9CDCFE;

diff --git a/packages/app/client/src/ui/styles/themes/high-contrast.css b/packages/app/client/src/ui/styles/themes/high-contrast.css
@@ -53,6 +53,11 @@ html {
   --webchat-sa-border: solid 1px var(--neutral-4);
   --webchat-sa-text: #3794FF;
 
+  /* bot state button */
+  --bot-state-button-color: var(--neutral-6);
+  --bot-state-button-color-focus: var(--neutral-1);
+  --bot-state-diff-indicator-color: #BE1100;
+
   /* Log panel custom colors */
   --log-panel-timestamp: #47B07F;
   --log-panel-link: #9CDCFE;

diff --git a/packages/app/client/src/ui/styles/themes/light.css b/packages/app/client/src/ui/styles/themes/light.css
@@ -51,6 +51,11 @@ html {
   --webchat-sa-border: none;
   --webchat-sa-text: #3794FF;
 
+  /* bot state button */
+  --bot-state-button-color: var(--neutral-7);
+  --bot-state-button-color-focus: var(--neutral-14);
+  --bot-state-diff-indicator-color: #BE1100;
+
   /* Log panel custom colors */
   --log-panel-timestamp: #47B07F;
   --log-panel-link: #007ACC;