@linktr.ee/messaging-react 3.5.6-rc-1783064039 → 3.5.6-rc-1783100793

package/src/styles.css

@@ -8,10 +8,10 @@
   --str-chat__font-family: inherit;
 
   --str-chat__message-bubble-border-radius: 1.5rem;
-  --str-chat__message-bubble-background-color: #f1f0ee;
-  --str-chat__message-bubble-color: #181818;
+  --str-chat__message-bubble-background-color: #f2f1ef;
+  --str-chat__message-bubble-color: #000000;
 
-  --str-chat__own-message-bubble-background-color: #121110;
+  --str-chat__own-message-bubble-background-color: #1e2330;
   --str-chat__own-message-bubble-color: #fff;
 }
 
@@ -560,7 +560,8 @@
 
 .str-chat__message .str-chat__message-bubble {
   font-size: 0.875rem;
-  line-height: 1.25rem;
+  line-height: 1.3125rem;
+  letter-spacing: 0.14px;
 }
 
 /* Chatbot reply markdown — restore semantics that consumer Tailwind preflight
@@ -673,15 +674,83 @@
     margin-block-end: 0.875rem;
   }
 
+  /* Re-round the outer bottom corner of the trailing/standalone bubble
+     (bottom-inline-start for `--other`, bottom-inline-end for `--me`) that
+     stream's grouping flattens — matches main's merged-run shape where the
+     run reads as one column capped by a rounded bottom corner. The inner
+     corners stay flattened so consecutive bubbles still merge. */
   .str-chat__message--other .str-chat__message-bubble {
     border-end-start-radius: var(--str-chat__message-bubble-border-radius);
   }
-
   .str-chat__message--me .str-chat__message-bubble {
     border-end-end-radius: var(--str-chat__message-bubble-border-radius);
   }
-}
 
+  /* `:not([data-attachment-bubble])` keeps the tail off self-contained
+     attachment/media cards (see `MediaMessage`): those render their own
+     shadowed card inside a transparent bubble, so a tail tinted from the
+     text-bubble surface would hang off the card rather than read as part
+     of it. Only genuine text/message bubbles get a tail. */
+  .str-chat__message--other
+    .str-chat__message-bubble-wrapper
+    > .str-chat__message-bubble:last-child:not([data-attachment-bubble]) {
+    position: relative;
+    /* Form a stacking context so the `z-index: -1` tail below paints
+       *after* this bubble's own (opaque, same-color) background but
+       *behind* its in-flow content. Without this the tail would either
+       sit on top of content (a positioned pseudo-element paints above
+       in-flow siblings — switching to `::before` would NOT change that)
+       or drop behind the whole bubble. This matters most for the
+       zero-padding `MediaMessageRoot` bubble, whose media card reaches
+       the corner: the tail must tuck behind the card, not cover it. */
+    isolation: isolate;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline-start: calc(-1 * 0.25rem);
+      z-index: -1;
+      width: 1.25rem;
+      height: 1.4375rem;
+      background-color: var(--str-chat__message-bubble-background-color);
+      pointer-events: none;
+      transform: scaleX(-1);
+      transform-origin: center;
+      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='23' fill='none'%3E%3Cpath fill='black' d='M0 0H15C15 10.1934 15.859 15.2345 19.168 21.4893C19.527 22.168 19.039 22.9917 18.274 22.9178C5.176 21.6506 0.32 6.0737 0 0Z'/%3E%3C/svg%3E")
+        no-repeat center / 100% 100%;
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='23' fill='none'%3E%3Cpath fill='black' d='M0 0H15C15 10.1934 15.859 15.2345 19.168 21.4893C19.527 22.168 19.039 22.9917 18.274 22.9178C5.176 21.6506 0.32 6.0737 0 0Z'/%3E%3C/svg%3E")
+        no-repeat center / 100% 100%;
+    }
+  }
+
+  .str-chat__message--me
+    .str-chat__message-bubble-wrapper
+    > .str-chat__message-bubble:last-child:not([data-attachment-bubble]) {
+    position: relative;
+    /* See the `--other` rule above: stacking context so the tail tucks
+       behind in-flow content (e.g. the corner of a zero-padding
+       `MediaMessageRoot` card) instead of painting over it. */
+    isolation: isolate;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline-end: calc(-1 * 0.25rem);
+      z-index: -1;
+      width: 1.25rem;
+      height: 1.4375rem;
+      background-color: var(--str-chat__own-message-bubble-background-color);
+      pointer-events: none;
+      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='23' fill='none'%3E%3Cpath fill='black' d='M0 0H15C15 10.1934 15.859 15.2345 19.168 21.4893C19.527 22.168 19.039 22.9917 18.274 22.9178C5.176 21.6506 0.32 6.0737 0 0Z'/%3E%3C/svg%3E")
+        no-repeat center / 100% 100%;
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='23' fill='none'%3E%3Cpath fill='black' d='M0 0H15C15 10.1934 15.859 15.2345 19.168 21.4893C19.527 22.168 19.039 22.9917 18.274 22.9178C5.176 21.6506 0.32 6.0737 0 0Z'/%3E%3C/svg%3E")
+        no-repeat center / 100% 100%;
+    }
+  }
+
+}
 /* Locked attachment wrapper: stack card + text bubble in the correct direction */
 .str-chat__li .str-chat__message--me .str-chat__message-bubble-wrapper {
   display: flex;