@linktr.ee/messaging-react 3.13.4 → 3.14.0-rc-1784604876

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-34_jzKSz.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CBSdgfCs.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -1312,6 +1312,15 @@ export declare interface MessageMetadata {
     attachment_mime_type?: string;
     attachment_thumbnail?: string;
     attachment_detail?: string;
+    /**
+     * The client surface a linker send was composed from, when it needs to be
+     * distinguished server-side. A plain reply carries no `sent_from`; a single
+     * reply composed inside stack-detail channel mode sets `'stack_detail'` so the
+     * backend can leave stack removal confirm-gated (client-owned) instead of
+     * silently removing the conversation from its stack. Composes with
+     * `custom_type` — it identifies the send context, not the message kind. (MES-1266)
+     */
+    sent_from?: 'stack_detail';
 }
 
 export declare const MessageVoteButtons: default_2.FC<MessageVoteButtonsProps>;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as p, m as d, n as v, p as C, q as A, s as k, t as F, u as b, v as P, w as f, x, o as y, y as z, z as B, B as S, D as q, E as D, G as E, H as V, I as w } from "./index-Cw1ij-Py.js";
+import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as p, m as d, n as v, p as C, q as A, s as k, t as F, u as b, v as P, w as f, x, o as y, y as z, z as B, B as S, D as q, E as D, G as E, H as V, I as w } from "./index-0uNeCMZl.js";
 export {
   e as ActionButton,
   t as Avatar,

package/dist/testing.d.ts

@@ -53,6 +53,15 @@ export declare interface MessageMetadata {
     attachment_mime_type?: string;
     attachment_thumbnail?: string;
     attachment_detail?: string;
+    /**
+     * The client surface a linker send was composed from, when it needs to be
+     * distinguished server-side. A plain reply carries no `sent_from`; a single
+     * reply composed inside stack-detail channel mode sets `'stack_detail'` so the
+     * backend can leave stack removal confirm-gated (client-owned) instead of
+     * silently removing the conversation from its stack. Composes with
+     * `custom_type` — it identifies the send context, not the message kind. (MES-1266)
+     */
+    sent_from?: 'stack_detail';
 }
 
 /**

package/package.json

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

package/src/components/CustomMessageInput/CustomMessageInput.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { renderWithProviders, screen } from '../../test/utils'
 
@@ -276,4 +276,101 @@ describe('CustomMessageInput', () => {
     expect(screen.queryByText(/should not show/i)).not.toBeInTheDocument()
     expect(screen.getByTestId('stream-message-input')).toBeInTheDocument()
   })
+
+  // MES-1303: the floating composer overlays the message list, so growing it
+  // reserves space via padding-bottom but never moves the viewport. The resize
+  // observer re-pins the thread to the latest message when the composer grows —
+  // but only if the user was already at the bottom.
+  describe('re-pins the thread when the floating composer grows (MES-1303)', () => {
+    // Render the floating composer inside the real layout structure so its
+    // `parentElement` is `.messaging-channel-layout` and it can find the Stream
+    // scroll container the way it does in ChannelView.
+    const renderInLayout = () =>
+      renderWithProviders(
+        <div className="messaging-channel-layout">
+          <div className="messaging-channel-message-list--floating">
+            <div
+              className="str-chat__message-list-scroll"
+              data-testid="scroller"
+            />
+          </div>
+          <CustomMessageInput
+            composerInput={() => <div data-testid="custom-composer" />}
+          />
+        </div>
+      )
+
+    // Force jsdom's zero-valued scroll geometry to a chosen shape. jsdom has no
+    // layout engine, so setProperty can't grow scrollHeight the way a browser
+    // reflow would; we set the post-growth geometry directly.
+    const setScrollGeometry = (
+      el: HTMLElement,
+      { scrollHeight, clientHeight, scrollTop }: Record<string, number>
+    ) => {
+      Object.defineProperty(el, 'scrollHeight', {
+        value: scrollHeight,
+        configurable: true,
+      })
+      Object.defineProperty(el, 'clientHeight', {
+        value: clientHeight,
+        configurable: true,
+      })
+      el.scrollTop = scrollTop
+    }
+
+    let resizeCallback: ResizeObserverCallback | undefined
+
+    beforeEach(() => {
+      mockChannelData = {}
+      resizeCallback = undefined
+      vi.stubGlobal(
+        'ResizeObserver',
+        class {
+          constructor(cb: ResizeObserverCallback) {
+            resizeCallback = cb
+          }
+          observe() {}
+          unobserve() {}
+          disconnect() {}
+        }
+      )
+    })
+
+    afterEach(() => {
+      vi.unstubAllGlobals()
+    })
+
+    it('scrolls to the bottom when the user was already at the bottom', () => {
+      renderInLayout()
+      const scroller = screen.getByTestId('scroller')
+
+      // At the bottom: scrollHeight - scrollTop - clientHeight = 0.
+      setScrollGeometry(scroller, {
+        scrollHeight: 560,
+        clientHeight: 300,
+        scrollTop: 260,
+      })
+
+      resizeCallback?.([], {} as ResizeObserver)
+
+      expect(scroller.scrollTop).toBe(560)
+    })
+
+    it('leaves the scroll position alone when the user has scrolled up', () => {
+      renderInLayout()
+      const scroller = screen.getByTestId('scroller')
+
+      // Scrolled up reading history: distance from bottom (600px) is well over
+      // the threshold.
+      setScrollGeometry(scroller, {
+        scrollHeight: 1000,
+        clientHeight: 300,
+        scrollTop: 100,
+      })
+
+      resizeCallback?.([], {} as ResizeObserver)
+
+      expect(scroller.scrollTop).toBe(100)
+    })
+  })
 })

package/src/components/CustomMessageInput/index.tsx

@@ -23,6 +23,14 @@ import { CustomLinkPreviewList } from '../CustomLinkPreviewList'
  */
 const ComposerLockedContext = React.createContext(false)
 
+/**
+ * Distance from the bottom (px) still treated as "pinned to the latest
+ * message". Small enough not to fire mid-scrollback, larger than sub-pixel
+ * rounding drift. Used to decide whether a growing composer should re-pin the
+ * thread to the bottom (MES-1303).
+ */
+const COMPOSER_REPIN_THRESHOLD_PX = 40
+
 /**
  * Read the composer's locked (frozen-channel) state from inside a custom
  * composer supplied via `composerInput`. Returns true when the channel is
@@ -170,10 +178,30 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
     }
 
     const updateComposerHeight = () => {
+      // The floating composer overlays the message list; growing it only
+      // reserves space via padding-bottom, which never moves the viewport, so
+      // a taller composer creeps up over the last message (MES-1303). Capture
+      // whether the thread is pinned to the latest message *before* the padding
+      // grows, then re-pin afterwards. Guarded on `wasAtBottom` so we never
+      // yank a user who has scrolled up to read history.
+      const scroller = layout.querySelector<HTMLElement>(
+        '.str-chat__message-list-scroll'
+      )
+      const wasAtBottom = scroller
+        ? scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight <
+          COMPOSER_REPIN_THRESHOLD_PX
+        : false
+
       layout.style.setProperty(
         '--messaging-composer-height',
         `${composer.offsetHeight + 16}px`
       )
+
+      // Reading scrollHeight forces a synchronous reflow, so it reflects the
+      // padding-bottom we just set; scrolling to it pins the true bottom.
+      if (wasAtBottom && scroller) {
+        scroller.scrollTop = scroller.scrollHeight
+      }
     }
 
     updateComposerHeight()

package/src/stream-custom-data.ts

@@ -48,6 +48,15 @@ export interface MessageMetadata {
   attachment_mime_type?: string
   attachment_thumbnail?: string
   attachment_detail?: string
+  /**
+   * The client surface a linker send was composed from, when it needs to be
+   * distinguished server-side. A plain reply carries no `sent_from`; a single
+   * reply composed inside stack-detail channel mode sets `'stack_detail'` so the
+   * backend can leave stack removal confirm-gated (client-owned) instead of
+   * silently removing the conversation from its stack. Composes with
+   * `custom_type` — it identifies the send context, not the message kind. (MES-1266)
+   */
+  sent_from?: 'stack_detail'
 }
 
 /**