@linktr.ee/messaging-react 3.14.4-rc-1784706159 → 3.14.4

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DlUa6O7r.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-BZNP-Xf_.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.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-CP0I8AHU.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-BiiMPaUs.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.14.4-rc-1784706159",
+  "version": "3.14.4",
   "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.3.0-rc-1784706159",
+    "@linktr.ee/messaging-core": "^2.2.0",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/CustomLinkPreviewList/index.tsx

@@ -40,7 +40,7 @@ export const CustomLinkPreviewList = () => {
     // block so it keeps its intrinsic height and the container scrolls — a
     // bare flex-column child would be shrunk on the column axis and its
     // fixed-height hero would spill out of the collapsed card box.
-    <div className="messaging-link-preview-list flex min-h-0 flex-col items-stretch w-full gap-2 overflow-y-auto overscroll-contain">
+    <div className="messaging-link-preview-list flex min-h-0 flex-col items-stretch w-full gap-2 mb-4 overflow-y-auto overscroll-contain">
       {stateLinkPreviews.map((linkPreview) => (
         <div key={linkPreview.og_scrape_url} className="w-full shrink-0">
           <CustomLinkPreviewCard link={linkPreview} onDismiss={handleDismiss} />

package/src/components/CustomMessageInput/index.tsx

@@ -79,76 +79,39 @@ const CustomMessageInputInner: React.FC = () => {
     // content height and the squeeze never reaches the preview list. Stream's
     // <MessageInput> renders its Input directly (context providers only, no
     // wrapper element), so this is a direct flex item of that row.
-    //
-    // The container itself carries no padding of its own: it used to (p-2),
-    // but that inset now lives on the textarea as padding instead, so the
-    // textarea's actual (clickable) box is as large as the container — save
-    // for the small margin and the send button on the right (MES-1325).
-    // Visually nothing moves; the container ends up exactly the size of the
-    // textarea + send button row it contains.
-    //
-    // Some hosts portal staged-media thumbnails (e.g. ComposerPendingMediaPortal,
-    // see this component's stories) straight into `.central-container` rather
-    // than through this React tree, bypassing the two wrappers below. The
-    // `[&>:not(...)]:p-2` variant restores the container's old inset for any
-    // such foreign direct child, without re-adding it to our own wrappers.
     <div
-      className="central-container flex min-h-0 flex-col min-w-0 w-full self-stretch bg-white rounded-[1.5rem] shadow-[0_4px_16px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.04)] [&>:not(.messaging-composer-previews):not(.messaging-composer-row)]:p-2"
+      className="central-container flex min-h-0 flex-col gap-2 min-w-0 w-full self-stretch p-2 bg-white rounded-[1.5rem] shadow-[0_4px_16px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.04)]"
       data-dd-privacy="mask"
     >
-      {/* empty:hidden collapses this row (padding, gap, and all) when none of
-          the previews below have anything to render, so an idle composer has
-          no leftover top inset before the textarea row. */}
-      <div className="messaging-composer-previews empty:hidden flex min-h-0 flex-col gap-2 px-2 pt-2">
-        <QuotedMessagePreview />
-        <CustomLinkPreviewList />
-        <AttachmentPreviewList />
-      </div>
-      <div className="messaging-composer-row flex shrink-0 items-start">
-        <TextareaComposer
-          aria-disabled={disabled || undefined}
-          // TextareaComposer wraps the real <textarea> in its own div, so
-          // `containerClassName` (not `className`) is what joins the row's
-          // flex layout; `leading-[0]` drops the line-height space an
-          // inline-level parent otherwise reserves, keeping that wrapper
-          // exactly the textarea's height rather than stretched by the row
-          // (items-start above is a second guard against that same stretch).
-          containerClassName="min-w-0 flex-1 leading-[0]"
-          // bg-transparent: the container has no padding to inset it behind
-          // anymore, so an opaque textarea would paint over its rounded corners.
-          className="w-full resize-none bg-transparent py-3.5 pl-4 pr-4 outline-none leading-5 placeholder:text-black/30 text-sm"
-          // While this might usually be considered an anti-pattern, in most
-          // cases, when a message thread is rendered, we want the input to
-          // gain focus automatically.
-          // eslint-disable-next-line jsx-a11y/no-autofocus
-          autoFocus={!disabled}
-          // Enter sends (Shift+Enter inserts a newline), so label the
-          // on-screen keyboard's return key accordingly.
-          enterKeyHint="send"
-          maxRows={4}
-          readOnly={disabled}
-          tabIndex={disabled ? -1 : undefined}
-        />
-        {/* The container no longer has its own p-2, so this inset — and the
-            mt-auto that anchors the button to the bottom as the textarea
-            grows — lives on a wrapper instead of the button's own
-            className: a host-supplied SendButton can (and, per our own
-            stories, does) spread its own className over the one we pass in,
-            which would otherwise silently drop this spacing. */}
-        <div className="mt-auto mb-2 mr-2 shrink-0">
-          <SendButton
-            sendMessage={handleSubmit}
-            aria-label="Send"
-            // before:-inset-2 extends the button's clickable area to 48x48
-            // (MES-1325) via an invisible pseudo-element — clicks on it still
-            // land on the button itself — without growing the 32x32 circle
-            // `size-8`/`rounded-full`/`bg-[#121110]` visually describe.
-            className="str-chat__send-button relative flex justify-center items-center rounded-full size-8 bg-[#121110] disabled:bg-[#F1F0EE] disabled:text-black/20 text-white focus-ring before:absolute before:-inset-2 before:content-['']"
-            data-testid="send-button"
-            disabled={isSendDisabled}
-            type="button"
+      <QuotedMessagePreview />
+      <CustomLinkPreviewList />
+      <AttachmentPreviewList />
+      <div className="flex shrink-0">
+        <div className="w-full ml-2 mr-4 self-center leading-[0]">
+          <TextareaComposer
+            aria-disabled={disabled || undefined}
+            className="w-full resize-none outline-none leading-5 placeholder:text-black/30 text-sm"
+            // While this might usually be considered an anti-pattern, in most
+            // cases, when a message thread is rendered, we want the input to
+            // gain focus automatically.
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus={!disabled}
+            // Enter sends (Shift+Enter inserts a newline), so label the
+            // on-screen keyboard's return key accordingly.
+            enterKeyHint="send"
+            maxRows={4}
+            readOnly={disabled}
+            tabIndex={disabled ? -1 : undefined}
           />
         </div>
+        <SendButton
+          sendMessage={handleSubmit}
+          aria-label="Send"
+          className="str-chat__send-button mt-auto flex justify-center items-center flex-shrink-0 rounded-full size-8 bg-[#121110] disabled:bg-[#F1F0EE] disabled:text-black/20 text-white focus-ring"
+          data-testid="send-button"
+          disabled={isSendDisabled}
+          type="button"
+        />
       </div>
     </div>
   )

package/src/utils/formatRelativeTime.test.ts

@@ -95,16 +95,32 @@ describe('formatRelativeTime', () => {
   })
 
   describe('Date format', () => {
-    it('should return MM/DD/YY format for messages more than 4 weeks ago', () => {
+    // The absolute-date branch intentionally uses the runtime locale
+    // (toLocaleDateString(undefined, …)), so assertions avoid a fixed
+    // string that would depend on the test runner's ambient ICU locale.
+    // Instead we assert the locale-independent behaviour: a spelled-out
+    // month (alphabetic) rather than the old all-numeric M/D/YY, plus the
+    // day and 2-digit year in any order.
+    const numericDatePattern = /^\d{1,2}\/\d{1,2}\/\d{2}$/
+
+    it('should return a spelled-month date for messages more than 4 weeks ago', () => {
       mockDate('2024-02-15T12:00:00Z')
       const date = new Date('2024-01-01T12:00:00Z')
-      expect(formatRelativeTime(date)).toBe('1/1/24')
+      const result = formatRelativeTime(date)
+      expect(result).not.toMatch(numericDatePattern)
+      expect(result).toMatch(/\p{L}/u) // spelled-out month
+      expect(result).toMatch(/\b1\b/) // day
+      expect(result).toMatch(/24/) // 2-digit year
     })
 
-    it('should return MM/DD/YY format for messages from last year', () => {
+    it('should return a spelled-month date for messages from last year', () => {
       mockDate('2024-01-15T12:00:00Z')
       const date = new Date('2023-12-01T12:00:00Z')
-      expect(formatRelativeTime(date)).toBe('12/1/23')
+      const result = formatRelativeTime(date)
+      expect(result).not.toMatch(numericDatePattern)
+      expect(result).toMatch(/\p{L}/u) // spelled-out month
+      expect(result).toMatch(/\b1\b/) // day
+      expect(result).toMatch(/23/) // 2-digit year
     })
   })
 

package/src/utils/formatRelativeTime.ts

@@ -54,10 +54,10 @@ export const formatRelativeTime = (date: Date): string => {
     return `${weeks}w`
   }
 
-  // More than 4 weeks - show date as MM/DD/YY
-  return date.toLocaleDateString('en-US', {
-    month: 'numeric',
+  // More than 4 weeks - show locale-aware date with spelled-out month
+  return date.toLocaleDateString(undefined, {
     day: 'numeric',
+    month: 'short',
     year: '2-digit',
   })
 }