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

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,36 @@
 
 .str-chat__message .str-chat__message-bubble {
   font-size: 0.875rem;
-  line-height: 1.25rem;
+  line-height: 1.3125rem;
+  letter-spacing: 0.14px;
+}
+
+/* Keep every bubble a full pill regardless of its position in a same-author
+   run. stream-chat-react's default theme flattens the inner corners of
+   grouped bubbles (bottom-/top-inline-end for `--me`, inline-start for
+   `--other`) via `.str-chat__li--{top,middle,bottom} .str-chat__message--{me,other}
+   .str-chat__message-bubble` rules at specificity (0,3,0). We prepend the
+   `.str-chat` root class to reach (0,4,0) so this wins independently of
+   stylesheet load order and restores the fully-rounded pill from the Figma
+   spec — only the trailing bubble's tail (`::after`, below) breaks the pill. */
+.str-chat .str-chat__li--single .str-chat__message--me .str-chat__message-bubble,
+.str-chat .str-chat__li--top .str-chat__message--me .str-chat__message-bubble,
+.str-chat .str-chat__li--middle .str-chat__message--me .str-chat__message-bubble,
+.str-chat .str-chat__li--bottom .str-chat__message--me .str-chat__message-bubble,
+.str-chat
+  .str-chat__li--single
+  .str-chat__message--other
+  .str-chat__message-bubble,
+.str-chat .str-chat__li--top .str-chat__message--other .str-chat__message-bubble,
+.str-chat
+  .str-chat__li--middle
+  .str-chat__message--other
+  .str-chat__message-bubble,
+.str-chat
+  .str-chat__li--bottom
+  .str-chat__message--other
+  .str-chat__message-bubble {
+  border-radius: var(--str-chat__message-bubble-border-radius);
 }
 
 /* Chatbot reply markdown — restore semantics that consumer Tailwind preflight
@@ -667,21 +696,87 @@
   margin-bottom: 0;
 }
 
+/* Roomier, even vertical gap between bubbles within a same-author run.
+   stream defaults grouped messages to 0.125rem (2px), which reads as
+   cramped now that each bubble is a full pill; the Figma grouped-message
+   spacing is closer to 6px. `.str-chat` prefix → (0,3,0) so it beats
+   stream's (0,2,0) grouping rule regardless of stylesheet load order. */
+.str-chat .str-chat__li--top .str-chat__message,
+.str-chat .str-chat__li--middle .str-chat__message {
+  margin-block-end: 0.375rem;
+}
+
 .str-chat__li--single,
 .str-chat__li--bottom {
   .str-chat__message {
     margin-block-end: 0.875rem;
   }
 
-  .str-chat__message--other .str-chat__message-bubble {
-    border-end-start-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 {
-    border-end-end-radius: var(--str-chat__message-bubble-border-radius);
+  .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;