@linktr.ee/messaging-react 3.37.1 → 3.38.0-rc-1786343622

package/src/styles.css

@@ -1,3 +1,48 @@
+/* =====================================================================
+   WHEN TO EDIT THIS FILE  (read before adding anything)
+
+   Tailwind on the JSX is the default. This stylesheet is the escape hatch
+   for what Tailwind can't reach. DO NOT append new rules to the bottom by
+   reflex — most styling belongs on the element in JSX, not here.
+
+   Before adding a rule, ask: "Am I styling our own JSX with plain
+   utilities (flex/grid, gap, padding, font, color, radius)?"
+     → YES: put Tailwind classes on that element. Nothing goes here.
+     → NO, because one of the following: add it here, grouped with the
+       related block (never at EOF).
+
+   Legitimate reasons a style lives HERE, not in Tailwind:
+   1. It targets stream-chat-react's internal DOM (`.str-chat__*`). We don't
+      render that markup, so there's no JSX to put a class on.
+   2. Tailwind can't express it: `::before`/`::after` generated content,
+      `::backdrop`, `@starting-style`, top-layer dialog transitions, layered
+      `backdrop-filter` masks/gradients, SVG-mask data URIs, `oklch(from …)`
+      relative color, or gnarly `:has()`/compound-state selectors.
+   3. It must ship unconditionally in the built stylesheet — e.g. the
+      media-viewer / dialog chrome — so consumers get it without adding our
+      `src` to their Tailwind `content` glob. See #gotcha below.
+
+   NOT reasons to add a rule here:
+   - "It has variants / state." A variant matrix is plain Tailwind — resolve
+     the class list per case in JSX (see the chatbot indicator in
+     MessageTag.tsx: base string + a ternary over the resolved variant).
+   - "A test asserts on the class name." Don't keep styling-only classes as
+     test hooks. Assert on behavior instead — visible copy, roles, child
+     order, or a `data-*` attribute — and style with Tailwind.
+
+   #gotcha — why Tailwind-on-JSX isn't automatic here: this file has no
+   `@tailwind` directives, so the shipped `dist/assets/index.css` contains
+   ONLY these hand-written rules (plus the stream import) — NO Tailwind
+   utilities. Utility classes in our JSX render only because the *consumer's*
+   Tailwind build scans our `src`. So utilities are correct for our
+   components, but chrome that must render even for a non-Tailwind consumer
+   has to be hand-written CSS.
+
+   When you DO move a rule to Tailwind: prefer `text-[12px]` over `text-xs`
+   when the source sets font-size without a matching line-height — Tailwind's
+   `text-xs`/`text-sm` also set line-height and will silently change it.
+   ===================================================================== */
+
 /* Stream Chat base styles */
 @import 'stream-chat-react/dist/css/v2/index.css';
 
@@ -264,14 +309,12 @@
   }
 }
 
-/* Full-screen media viewer dialog. Drives ImageViewer / VideoViewer /
-   PdfViewer chrome with plain CSS so the package ships self-contained
-   styles — consumers don't need to wire our dist into their Tailwind
-   `content` glob for the lightbox to render correctly. */
+/* Full-screen media viewer dialog (ImageViewer / VideoViewer / PdfViewer).
+   Only the `<dialog>` surface, backdrop, and open/close transitions live here
+   — they use `::backdrop` / `@starting-style`, which Tailwind can't express.
+   The chrome inside (buttons, counter, body, media) is Tailwind on the JSX. */
 .mes-media-viewer {
   --transition-duration: 0.15s;
-  --mes-media-viewer-padding: 64px 24px;
-  --mes-media-viewer-max-w: min(96vw, 1400px);
 
   border: none;
   padding: 0;
@@ -320,155 +363,6 @@
   }
 }
 
-/* Top chrome bar — splits the counter (left) from the close + actions
-   (right). Sits absolutely positioned over the body so it doesn't push
-   the centered media down.
-   `pointer-events: none` on the row lets clicks fall through the
-   negative space; the counter / actions re-enable `pointer-events`
-   on themselves so the buttons stay interactive. */
-.mes-media-viewer__chrome {
-  position: absolute;
-  inset: 12px 12px auto 12px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.mes-media-viewer__counter {
-  pointer-events: auto;
-  display: inline-flex;
-  align-items: center;
-  padding: 6px 12px;
-  border-radius: 9999px;
-  background-color: rgba(255, 255, 255, 0.12);
-  color: white;
-  font-size: 13px;
-  line-height: 1;
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-}
-
-.mes-media-viewer__actions {
-  pointer-events: auto;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  margin-left: auto;
-}
-
-/* Shared circular icon button used by the close action, the download
-   action, and any consumer that drops a button into the chrome.
-   Defined once so every viewer-chrome button stays visually
-   consistent and so consumers can rely on a stable selector. */
-.mes-media-viewer__action {
-  width: 40px;
-  height: 40px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: 0;
-  border-radius: 9999px;
-  background-color: rgba(255, 255, 255, 0.12);
-  color: white;
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-
-.mes-media-viewer__action:hover,
-.mes-media-viewer__action:focus-visible {
-  background-color: rgba(255, 255, 255, 0.22);
-  outline: none;
-}
-
-.mes-media-viewer__action[disabled] {
-  opacity: 0.4;
-  cursor: default;
-}
-
-/* Carousel prev/next chrome — only rendered when a viewer carries
-   more than one item. Positioned absolutely against the dialog so the
-   buttons hug the viewport edges, mid-height. */
-.mes-media-viewer__nav {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 48px;
-  height: 48px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: 0;
-  border-radius: 9999px;
-  background-color: rgba(255, 255, 255, 0.12);
-  color: white;
-  cursor: pointer;
-  z-index: 1;
-  transition: background-color 0.15s ease;
-}
-
-.mes-media-viewer__nav:hover,
-.mes-media-viewer__nav:focus-visible {
-  background-color: rgba(255, 255, 255, 0.22);
-  outline: none;
-}
-
-.mes-media-viewer__nav--prev {
-  left: 16px;
-}
-
-.mes-media-viewer__nav--next {
-  right: 16px;
-}
-
-/* Flex-centered body. */
-.mes-media-viewer__body {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  padding: var(--mes-media-viewer-padding);
-  box-sizing: border-box;
-}
-
-/* Image: contained at reasonable max dimensions, never bigger than the
-   available body. `object-fit: contain` keeps aspect ratio. */
-.mes-media-viewer__image {
-  display: block;
-  max-width: var(--mes-media-viewer-max-w);
-  max-height: calc(100dvh - 128px);
-  width: auto;
-  height: auto;
-  object-fit: contain;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-/* Video: keeps native controls; let the height grow up to the bounded
-   box and width track the intrinsic aspect ratio. */
-.mes-media-viewer__video {
-  display: block;
-  max-width: var(--mes-media-viewer-max-w);
-  max-height: calc(100dvh - 128px);
-  width: auto;
-  height: auto;
-  background: black;
-}
-
-/* PDF iframe: native browser PDF rendering owns the inside, so we just
-   bound the frame and give it an opaque background. */
-.mes-media-viewer__iframe {
-  display: block;
-  width: var(--mes-media-viewer-max-w);
-  height: calc(100dvh - 128px);
-  background: white;
-  border: 0;
-}
 
 /* Textarea composer focus styles */
 .mes-textarea-composer-container:has(.mes-textarea-composer:focus) {
@@ -515,17 +409,6 @@
   position: relative;
 }
 
-.sent-message-broadcast-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  background: none;
-  border: 0;
-  padding: 0;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-}
 
 .str-chat__li .str-chat__message-inner {
   grid-column-gap: 4px;
@@ -732,14 +615,6 @@
   .sent-message-broadcast-name {
   color: var(--sent-message-broadcast-name-color);
 }
-.str-chat__li
-  .str-chat__message--me
-  .sent-message-status-row
-  .sent-message-broadcast-link
-  .sent-message-broadcast-name {
-  text-decoration: underline;
-  text-decoration-skip-ink: auto;
-}
 .str-chat__li .str-chat__message--me .sent-message-status--failed {
   color: var(--str-chat__message-error-color, #d92d20);
 }
@@ -763,126 +638,6 @@
   padding: 0;
 }
 
-/* Custom message tag styles */
-.message-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 0;
-  font-size: 12px;
-  line-height: 2;
-  font-weight: 500;
-}
-
-.message-tag__icon {
-  display: flex;
-  align-items: center;
-}
-
-.message-tag--tip {
-  background-color: transparent;
-  color: #016630;
-}
-
-.message-chatbot-indicator {
-  display: inline-flex;
-  align-items: center;
-  font-size: 10px;
-  font-weight: 400;
-  line-height: 16px;
-  letter-spacing: 0.2px;
-}
-
-.message-chatbot-indicator--text {
-  width: 100%;
-  gap: 6px;
-  margin-top: 12px;
-  padding-inline: 16px;
-}
-
-.message-chatbot-indicator--receiver {
-  justify-content: flex-start;
-  color: rgba(0, 0, 0, 0.3);
-}
-
-.message-chatbot-indicator--sender {
-  justify-content: flex-end;
-}
-
-.message-chatbot-indicator--sender.message-chatbot-indicator--text {
-  justify-content: flex-start;
-  color: rgba(255, 255, 255, 0.55);
-}
-
-.message-chatbot-indicator--attachment {
-  gap: 8px;
-  color: rgba(0, 0, 0, 0.3);
-}
-
-.message-chatbot-indicator__icon {
-  display: inline-flex;
-  align-items: center;
-  line-height: 1;
-}
-
-.message-chatbot-indicator__label {
-  text-align: left;
-}
-
-/* Message vote buttons (chatbot feedback) */
-.message-vote-buttons {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.message-vote-button {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: none;
-  border-radius: 50%;
-  background-color: transparent;
-  color: #737373;
-  cursor: pointer;
-  transition:
-    background-color 0.15s,
-    color 0.15s;
-}
-
-.message-vote-button:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: #737373;
-}
-
-.message-vote-button[data-tooltip]::after {
-  content: attr(data-tooltip);
-  position: absolute;
-  bottom: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: rgba(0, 0, 0, 0.85);
-  color: #fff;
-  font-size: 12px;
-  line-height: 1;
-  padding: 4px 8px;
-  border-radius: 4px;
-  white-space: nowrap;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.15s 0s;
-}
-
-.message-vote-button[data-tooltip]:hover::after,
-.message-vote-button[data-tooltip]:focus-visible::after {
-  opacity: 1;
-  transition-delay: 300ms;
-}
-
 .str-chat__message
   .str-chat__message-inner
   .str-chat__message-bubble
@@ -903,7 +658,7 @@
    .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. */
+   spec — only the trailing bubble's rendered `MessageTail` breaks the pill. */
 .str-chat
   .str-chat__li--single
   .str-chat__message--me
@@ -1051,75 +806,12 @@
   margin-bottom: 0;
 }
 
-.str-chat__li--single,
-.str-chat__li--bottom {
-  .str-chat__message {
-    margin-block-end: 0.875rem;
-  }
-
-  /* `: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.3125rem);
-      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.3125rem);
-      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%;
-    }
-  }
+/* Trailing bubble of a same-author run gets extra spacing. The bubble tail
+   itself is now a rendered `MessageTail` element (see CustomMessage /
+   StreamAttachmentMessage), not a pseudo-element. */
+.str-chat__li--single .str-chat__message,
+.str-chat__li--bottom .str-chat__message {
+  margin-block-end: 0.875rem;
 }
 
 /* Derived accent surface for `LinkAttachment` cards. `--accent` is the raw
@@ -1212,19 +904,6 @@
   margin-top: 4px;
 }
 
-/* Standalone tip message (tip without text) */
-.message-tip-standalone {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 10px 14px;
-  border-radius: 18px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #016e1a;
-  background-color: #dbf0e0;
-}
-
 /** Remove padding from the text inside the locked attachment text shell,
     and inherit TextShell's explicit colour — stream-chat-react's own
     `MessageText` sets its own (black) colour that only gets overridden by

package/src/types.ts

@@ -296,13 +296,6 @@ export interface ChannelViewProps {
    */
   showChannelInfo?: boolean
 
-  /**
-   * Enable thumbs up/down voting on chatbot messages.
-   * When true, vote buttons render below chatbot (DM Agent) messages.
-   * Votes are persisted as Stream Chat reactions (vote_up / vote_down).
-   * Defaults to false.
-   */
-  chatbotVotingEnabled?: boolean
   /**
    * Language code used to pick translated message text from Stream Chat i18n.
    * Falls back to message.text when no matching translation exists.
@@ -443,7 +436,6 @@ export type ChannelViewPassthroughProps = Pick<
   | 'onReportParticipantClick'
   | 'dmAgentEnabled'
   | 'onMessageSent'
-  | 'chatbotVotingEnabled'
   | 'viewerLanguage'
   | 'renderChannelBanner'
   | 'customChannelActions'