botframework-webchat-component 4.18.1 → 4.19.0

package/src/Activity/StackedLayout.module.css

@@ -0,0 +1,233 @@
+:global(.webchat) .stacked-layout {
+  font-family: var(--webchat__font--primary);
+  margin-inline: var(--webchat__padding--regular);
+  position: relative; /* This is to keep screen reader text in the destinated area. */
+
+  .stacked-layout__attachment-row,
+  .stacked-layout__main,
+  .stacked-layout__message-row,
+  .stacked-layout__status {
+    display: flex;
+  }
+
+  .stacked-layout__alignment-pad {
+    flex-shrink: 0;
+    transition-duration: var(--webchat__transition-duration);
+    transition-property: width;
+    width: 0;
+  }
+
+  &.stacked-layout--extra-trailing .stacked-layout__alignment-pad {
+    width: var(--webchat__padding--regular);
+  }
+
+  .stacked-layout__title {
+    color: var(--webchat__color--subtle);
+    font-size: 1.1em;
+    margin-block: var(--webchat__padding--regular);
+    margin-inline: var(--webchat__padding--regular);
+  }
+
+  .stacked-layout__bubble > .stacked-layout__title:not(:last-child) {
+    margin-block-end: 0;
+  }
+
+  .stacked-layout__attachment {
+    max-width: var(--webchat__max-width--attachment-bubble);
+    min-width: var(--webchat__min-width--attachment-bubble);
+    transition-duration: var(--webchat__transition-duration);
+    transition-property: max-width, min-width;
+    width: 100%;
+  }
+
+  .stacked-layout__attachment-list {
+    display: flex;
+    flex-direction: column;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .stacked-layout__attachment-row {
+    margin-block-start: var(--webchat__padding--regular);
+    width: 100%;
+  }
+
+  &.stacked-layout--no-message .stacked-layout__attachment-list .stacked-layout__attachment-row:first-child {
+    margin-block-start: 0;
+  }
+
+  .stacked-layout__avatar-gutter {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    transition-duration: var(--webchat__transition-duration);
+    transition-property: width;
+    width: 0;
+  }
+
+  &.stacked-layout--from-user {
+    .stacked-layout__attachment-row,
+    .stacked-layout__main,
+    .stacked-layout__message-row,
+    .stacked-layout__status {
+      flex-direction: row-reverse;
+    }
+  }
+
+  .stacked-layout__content {
+    flex: 1;
+
+    /* This is for bottom aligning an avatar with a message bubble shorter than the avatar. */
+    /* Related to the test at activityGrouping.avatarMiddleware.atBottom.js. */
+    display: flex;
+    flex-direction: column;
+
+    /* This "overflow: hidden" is to make sure text overflow will get clipped correctly. */
+    /* Related to the test at basic.js "long URLs with keep-all". */
+    overflow: hidden;
+  }
+
+  .stacked-layout__message {
+    max-width: var(--webchat__max-width--message-bubble);
+    min-width: var(--webchat__min-width--message-bubble);
+    overflow: hidden;
+    transition-duration: var(--webchat__transition-duration);
+    transition-property: max-width;
+  }
+
+  .stacked-layout__message-row {
+    display: flex;
+    gap: var(--webchat__padding--regular);
+  }
+
+  .stacked-layout__message-status {
+    --webchat__component-icon--size: 19px;
+
+    box-sizing: border-box;
+    color: var(--webchat__color--subtle);
+    display: grid;
+    font-size: 1.1em;
+    grid-template-areas: 'message-status-icon';
+    height: 1lh;
+    margin-block-start: var(--webchat__padding--regular);
+    margin-inline-start: var(--webchat__padding--regular);
+    place-self: start;
+    width: 1em;
+
+    &:has(+ :global(.text-content)) {
+      font-size: 1em;
+    }
+
+    > * {
+      grid-area: message-status-icon;
+    }
+  }
+
+  .stacked-layout__message-status-unset-icon,
+  .stacked-layout__message-status-complete-icon,
+  .stacked-layout__message-status-loader {
+    visibility: hidden;
+  }
+
+  .stacked-layout__message-status--unset .stacked-layout__message-status-unset-icon {
+    visibility: unset;
+  }
+
+  .stacked-layout__message-status--incomplete .stacked-layout__message-status-loader {
+    visibility: unset;
+  }
+
+  .stacked-layout__message-status--published .stacked-layout__message-status-complete-icon {
+    visibility: unset;
+  }
+
+  .stacked-layout__bubble {
+    display: grid;
+    grid-template: 'content' 1fr / 1fr;
+
+    > * {
+      grid-column: content;
+    }
+
+    > .stacked-layout__message-status {
+      grid-area: status;
+    }
+
+    &:has(.stacked-layout__message-status) {
+      grid-template:
+        'status content'
+        '. content'
+        / min-content auto;
+    }
+  }
+
+  .stacked-layout__nub-pad {
+    flex-shrink: 0;
+    transition-duration: var(--webchat__transition-duration);
+    transition-property: width;
+    width: 0;
+  }
+
+  &.stacked-layout--hide-avatar,
+  &.stacked-layout--show-avatar {
+    &.stacked-layout--activity .stacked-layout__avatar-gutter {
+      width: var(--webchat__size--avatar);
+    }
+  }
+
+  &.stacked-layout--hide-avatar,
+  &.stacked-layout--show-avatar,
+  &.stacked-layout--hide-nub,
+  &.stacked-layout--show-nub {
+    &.stacked-layout--activity .stacked-layout__attachment {
+      max-width: calc(var(--webchat__max-width--attachment-bubble) + var(--webchat__padding--regular));
+      min-width: calc(var(--webchat__min-width--attachment-bubble) + var(--webchat__padding--regular));
+    }
+
+    &.stacked-layout--activity .stacked-layout__message {
+      max-width: calc(var(--webchat__max-width--message-bubble) + var(--webchat__padding--regular));
+      min-width: calc(var(--webchat__min-width--message-bubble) + var(--webchat__padding--regular));
+    }
+
+    &.stacked-layout--activity .stacked-layout__nub-pad {
+      width: var(--webchat__padding--regular);
+    }
+  }
+
+  &:not(.stacked-layout--top-callout) {
+    .stacked-layout__avatar-gutter,
+    .stacked-layout__content {
+      justify-content: flex-end;
+    }
+  }
+
+  &.stacked-layout--group {
+    &.stacked-layout--hide-avatar,
+    &.stacked-layout--show-avatar {
+      > .stacked-layout__main > .stacked-layout__avatar-gutter {
+        margin-inline-end: var(--webchat__padding--regular);
+        width: var(--webchat__size--avatar);
+      }
+    }
+
+    .stacked-layout__message-status {
+      display: none;
+    }
+
+    &:has(.stacked-layout__bubble .stacked-layout__message-status--incomplete),
+    &:has(.stacked-layout__bubble .stacked-layout__message-status--published) {
+      .stacked-layout__bubble {
+        grid-template:
+          'status content'
+          '. content'
+          / min-content auto;
+      }
+
+      .stacked-layout__message-status {
+        display: grid;
+      }
+    }
+  }
+}