@linktr.ee/messaging-react 3.5.5-rc-1782988006 → 3.5.6-rc-1782993089

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.5.5-rc-1782988006",
+  "version": "3.5.6-rc-1782993089",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "2.3.0-rc-1782988006",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1782993089",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/CustomMessage/CustomMessage.stories.tsx

@@ -247,6 +247,33 @@ WithTipTag.args = {
   ],
 }
 
+export const ThreeConsecutiveSentMessages: StoryFn<TemplateProps> =
+  Template.bind({})
+ThreeConsecutiveSentMessages.args = {
+  messages: [
+    {
+      id: 'msg-1',
+      text: 'why is it that the sun',
+      user: storyUsers.visitor,
+    },
+    {
+      id: 'msg-2',
+      text: 'has rays',
+      user: storyUsers.creator,
+    },
+    {
+      id: 'msg-3',
+      text: 'how how how',
+      user: storyUsers.creator,
+    },
+    {
+      id: 'msg-4',
+      text: 'thanks for the note',
+      user: storyUsers.visitor,
+    },
+  ],
+}
+
 export const TipOnly: StoryFn<TemplateProps> = Template.bind({})
 TipOnly.args = {
   messages: [

package/src/styles.css

@@ -564,6 +564,13 @@
   letter-spacing: 0.14px;
 }
 
+.str-chat__li--single .str-chat__message-bubble,
+.str-chat__li--top .str-chat__message-bubble,
+.str-chat__li--middle .str-chat__message-bubble,
+.str-chat__li--bottom .str-chat__message-bubble {
+  border-radius: var(--str-chat__message-bubble-border-radius);
+}
+
 /* Chatbot reply markdown — restore semantics that consumer Tailwind preflight
    (or other resets) strip from the body of `.str-chat__message-text-inner`. */
 .str-chat__message-text-inner :where(h1, h2, h3, h4, h5, h6) {
@@ -674,10 +681,6 @@
     margin-block-end: 0.875rem;
   }
 
-  .str-chat__message--other .str-chat__message-bubble {
-    border-end-start-radius: 0;
-  }
-
   .str-chat__message--other
     .str-chat__message-bubble-wrapper
     > .str-chat__message-bubble:last-child {
@@ -688,8 +691,8 @@
       position: absolute;
       inset-block-end: 0;
       inset-inline-start: calc(-1 * 0.25rem);
-      width: 1.375rem;
-      height: 1.5rem;
+      width: 1.1875rem;
+      height: 1.4375rem;
       background-color: var(--str-chat__message-bubble-background-color);
       pointer-events: none;
       -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='25 22 20 23'%3E%3Cpath d='M45 22H30C30 32.1934 29.1413 37.2345 25.8323 43.4893C25.4732 44.168 25.9613 44.9917 26.7255 44.9178C39.8236 43.6506 44.6803 28.0737 45 22Z'/%3E%3C/svg%3E")
@@ -709,8 +712,8 @@
       position: absolute;
       inset-block-end: 0;
       inset-inline-end: calc(-1 * 0.25rem);
-      width: 1.375rem;
-      height: 1.5rem;
+      width: 1.1875rem;
+      height: 1.4375rem;
       background-color: var(--str-chat__own-message-bubble-background-color);
       pointer-events: none;
       transform: scaleX(-1);
@@ -722,11 +725,7 @@
     }
   }
 
-  .str-chat__message--me .str-chat__message-bubble {
-    border-end-end-radius: 0;
-  }
 }
-
 /* 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;