@linktr.ee/messaging-react 3.5.6-rc-1783038662 → 3.5.6-rc-1783049700

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/assets/index.css +1 -1
  2. package/package.json +2 -2
  3. package/src/styles.css +31 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@linktr.ee/messaging-react",
3
- "version": "3.5.6-rc-1783038662",
3
+ "version": "3.5.6-rc-1783049700",
4
4
  "description": "React messaging components built on messaging-core for web applications",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
@@ -38,7 +38,7 @@
38
38
  },
39
39
  "dependencies": {
40
40
  "@linktr.ee/component-library": "11.8.6",
41
- "@linktr.ee/messaging-core": "2.3.0-rc-1783038662",
41
+ "@linktr.ee/messaging-core": "2.3.0-rc-1783049700",
42
42
  "@phosphor-icons/react": "^2.1.10"
43
43
  },
44
44
  "devDependencies": {
package/src/styles.css CHANGED
@@ -564,10 +564,31 @@
564
564
  letter-spacing: 0.14px;
565
565
  }
566
566
 
567
- .str-chat__li--single .str-chat__message-bubble,
568
- .str-chat__li--top .str-chat__message-bubble,
569
- .str-chat__li--middle .str-chat__message-bubble,
570
- .str-chat__li--bottom .str-chat__message-bubble {
567
+ /* Keep every bubble a full pill regardless of its position in a same-author
568
+ run. stream-chat-react's default theme flattens the inner corners of
569
+ grouped bubbles (bottom-/top-inline-end for `--me`, inline-start for
570
+ `--other`) via `.str-chat__li--{top,middle,bottom} .str-chat__message--{me,other}
571
+ .str-chat__message-bubble` rules at specificity (0,3,0). We prepend the
572
+ `.str-chat` root class to reach (0,4,0) so this wins independently of
573
+ stylesheet load order and restores the fully-rounded pill from the Figma
574
+ spec — only the trailing bubble's tail (`::after`, below) breaks the pill. */
575
+ .str-chat .str-chat__li--single .str-chat__message--me .str-chat__message-bubble,
576
+ .str-chat .str-chat__li--top .str-chat__message--me .str-chat__message-bubble,
577
+ .str-chat .str-chat__li--middle .str-chat__message--me .str-chat__message-bubble,
578
+ .str-chat .str-chat__li--bottom .str-chat__message--me .str-chat__message-bubble,
579
+ .str-chat
580
+ .str-chat__li--single
581
+ .str-chat__message--other
582
+ .str-chat__message-bubble,
583
+ .str-chat .str-chat__li--top .str-chat__message--other .str-chat__message-bubble,
584
+ .str-chat
585
+ .str-chat__li--middle
586
+ .str-chat__message--other
587
+ .str-chat__message-bubble,
588
+ .str-chat
589
+ .str-chat__li--bottom
590
+ .str-chat__message--other
591
+ .str-chat__message-bubble {
571
592
  border-radius: var(--str-chat__message-bubble-border-radius);
572
593
  }
573
594
 
@@ -695,9 +716,11 @@
695
716
  height: 1.4375rem;
696
717
  background-color: var(--str-chat__message-bubble-background-color);
697
718
  pointer-events: none;
698
- -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='M19 0H4q0 14-4 21l1 2C14 22 19 6 19 0'/%3E%3C/svg%3E")
719
+ transform: scaleX(-1);
720
+ transform-origin: center;
721
+ -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")
699
722
  no-repeat center / 100% 100%;
700
- 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='M19 0H4q0 14-4 21l1 2C14 22 19 6 19 0'/%3E%3C/svg%3E")
723
+ 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")
701
724
  no-repeat center / 100% 100%;
702
725
  }
703
726
  }
@@ -716,11 +739,9 @@
716
739
  height: 1.4375rem;
717
740
  background-color: var(--str-chat__own-message-bubble-background-color);
718
741
  pointer-events: none;
719
- transform: scaleX(-1);
720
- transform-origin: center;
721
- -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='M19 0H4q0 14-4 21l1 2C14 22 19 6 19 0'/%3E%3C/svg%3E")
742
+ -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")
722
743
  no-repeat center / 100% 100%;
723
- 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='M19 0H4q0 14-4 21l1 2C14 22 19 6 19 0'/%3E%3C/svg%3E")
744
+ 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")
724
745
  no-repeat center / 100% 100%;
725
746
  }
726
747
  }