botframework-webchat-fluent-theme 4.18.1-main.20240831.f4058ce → 4.18.1-main.20240912.54a6a40

package/src/components/theme/Theme.module.css

@@ -22,6 +22,9 @@
   --webchat-colorNeutralBackground5: var(--colorNeutralBackground5, #ebebeb);
   --webchat-colorNeutralBackground6: var(--colorNeutralBackground6, #e6e6e6);
 
+  --webchat-colorNeutralStencil1: var(--colorNeutralStencil1, #e6e6e6); /* #575757 for dark mode */
+  --webchat-colorNeutralStencil2: var(--colorNeutralStencil2, #fafafa); /* #333333 for dark mode */
+
   --webchat-colorTransparentBackground: var(--colorTransparentBackground, rgba(0, 0, 0, 0.4));
 
   --webchat-colorNeutralStrokeDisabled: var(--colorNeutralStrokeDisabled, #e0e0e0);
@@ -257,18 +260,26 @@
     display: none;
   }
 
-  :global(.webchat__bubble)::after, :global(.pre-chat-message-activity)::after {
-    content: '';
-    position: absolute;
-    inset: -2px;
-    border: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+  :global(.webchat__bubble)::after, 
+  :global(.pre-chat-message-activity)::after {
     border-radius: var(--webchat__bubble--border-radius);
+    content: '';
+    inset: 0;
+    outline-offset: 0;
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
     pointer-events: none;
+    position: absolute;
   }
 
   :global(.pre-chat-message-activity)::after {
-    inset: 0;
-    border-radius: var(--webchat-borderRadiusSmall);
+    border-radius: var(--webchat-borderRadiusMedium);
+    outline-offset: -3px;
+  }
+
+  :global(.liner-message-activity__text) {
+    border-radius: 20px;
+    outline-offset: 4px;
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
   }
 }
 
@@ -356,7 +367,7 @@
     outline-offset: calc(var(--webchat-strokeWidthThick) * -1);
   }
 
-  &:disabled {
+  &[aria-disabled="true"] {
     background: var(--webchat-colorNeutralBackgroundDisabled);
     border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStrokeDisabled);
     color: var(--webchat-colorNeutralForegroundDisabled);

package/src/private/FluentThemeProvider.tsx

@@ -21,9 +21,11 @@ const activityMiddleware: readonly ActivityMiddleware[] = Object.freeze([
     (...args) => {
       const activity = args[0]?.activity;
 
+      // TODO: Should show pre-chat only when it is the very first message in the chat history.
       if (isPreChatMessageActivity(activity)) {
         return () => <PreChatMessageActivity activity={activity} />;
       }
+
       if (isLinerMessageActivity(activity)) {
         return () => <LinerMessageActivity activity={activity} />;
       }

package/src/testIds.ts

@@ -1,7 +1,9 @@
 const testIds = {
   preChatMessageActivityStarterPromptsCardAction: 'pre-chat message activity starter prompts card action',
+  sendBoxContainer: 'send box container',
   sendBoxDropZone: 'send box drop zone',
   sendBoxSendButton: 'send box send button',
+  sendBoxSuggestedAction: 'send box suggested action',
   sendBoxTextBox: 'send box text area',
   sendBoxTelephoneKeypadButton1: `send box telephone keypad button 1`,
   sendBoxTelephoneKeypadButton2: `send box telephone keypad button 2`,