@linktr.ee/messaging-react 3.3.9-rc-1781246558 → 3.3.9-rc-1781246583

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CR0b7198.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.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.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;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-B_8de68T.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.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.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;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 n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-BYerDRXA.js";
+import { a as e, b as t, C as i, c as n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-DGVCJzwy.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.3.9-rc-1781246558",
+  "version": "3.3.9-rc-1781246583",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -34,10 +34,7 @@
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build --stats-json",
     "chromatic:ci:feature": "chromatic --ci --exit-zero-on-changes --exit-once-uploaded",
-    "chromatic:ci:main": "chromatic --ci --auto-accept-changes",
-    "verdaccio:start": "./.verdaccio/start.sh",
-    "verdaccio:stop": "./.verdaccio/stop.sh",
-    "verdaccio:publish": "npm publish --userconfig ./.verdaccio/local-dev-npmrc --registry http://localhost:4873 --no-workspaces ."
+    "chromatic:ci:main": "chromatic --ci --auto-accept-changes"
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",

package/src/components/CustomLinkPreviewList/CustomLinkPreviewCard.stories.tsx

@@ -2,6 +2,8 @@ import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 import { LinkPreview, LinkPreviewStatus } from 'stream-chat'
 
+import LinkAttachment from '../LinkAttachment'
+
 import CustomLinkPreviewCard from './CustomLinkPreviewCard'
 
 type ComponentProps = React.ComponentProps<typeof CustomLinkPreviewCard>
@@ -61,3 +63,105 @@ VeryLongUrl.args = {
     image_url: '/image-thumbnail.jpg',
   }),
 }
+
+// --- Comparison canvas (MES-912) ---------------------------------------------
+// Renders the *live* composer preview card (`CustomLinkPreviewCard`, as it sits
+// inside the composer input box) next to the design-system link cards
+// (`LinkAttachment.Composer / .Sent / .Received`) so positioning, width, and
+// chrome can be compared against the Figma composer node (10746-54094) before
+// deciding the fix. One shared sample link matches the Figma frame.
+
+const SAMPLE_TITLE = "Nike Pegasus 42 Men's Road Running Shoes"
+const SAMPLE_URL =
+  'https://www.nike.com/au/t/nike-pegasus-42-mens-road-running-shoes-Pl3sezvp/IB1873-020?nikemt=true&cp=31067279846_search_&Macro=--x-23072937532---c-----9071341-00198729628312&dplnk=member&gclsrc=aw.ds&gad_source=1&gad_campaignid=23068820834&gbraid=0AAAABBYosgo460aiaIhdlaGXB0_BsezYf&gclid=EAIaIQobChMI8bHF64iBlQMVApSmAx0lXwqsEAQYASABEgLoufD_BwE'
+const SAMPLE_IMAGE = '/image-thumbnail.jpg'
+
+const Panel = ({
+  label,
+  children,
+}: {
+  label: string
+  children: React.ReactNode
+}) => (
+  <div className="flex flex-col gap-2">
+    <span className="text-xs font-medium text-black/40">{label}</span>
+    {children}
+  </div>
+)
+
+/**
+ * Mimics `CustomMessageInputInner`'s `central-container` (white rounded input
+ * box) with the gift action button beside it, so the live composer preview is
+ * shown exactly as it sits in the composer. Mirrors the Figma composer layout.
+ */
+const MockComposer = ({ children }: { children: React.ReactNode }) => (
+  // Width approximates a desktop/web inbox composer (the real composer's input
+  // box is `w-full` with no max-width), so a fixed 280px card no longer fills it.
+  <div className="flex w-[500px] items-end gap-4">
+    <div className="flex size-12 shrink-0 items-center justify-center rounded-full bg-white 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)]">
+      <span className="text-lg" aria-hidden>
+        🎁
+      </span>
+    </div>
+    <div className="central-container flex w-full min-w-0 flex-col gap-2 rounded-[1.5rem] bg-white p-2 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)]">
+      {/* Matches CustomLinkPreviewList wrapper */}
+      <div className="mb-4 flex w-full flex-col items-stretch gap-2">
+        {children}
+      </div>
+      <div className="flex">
+        <div className="ml-2 mr-4 w-full self-center text-sm text-black/30">
+          Send a message
+        </div>
+        <div className="mt-auto flex size-8 shrink-0 items-center justify-center rounded-full bg-[#121110] text-white">
+          ↑
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+export const Comparison: StoryFn = () => (
+  <div className="flex min-h-screen w-full flex-wrap items-start gap-12 bg-[#F9F7F4] p-12">
+    <Panel label="Composer (live — CustomLinkPreviewCard, inside input box)">
+      <MockComposer>
+        <CustomLinkPreviewCard
+          link={makePreview({
+            og_scrape_url: SAMPLE_URL,
+            title: SAMPLE_TITLE,
+            image_url: SAMPLE_IMAGE,
+          })}
+          onDismiss={() => {}}
+        />
+      </MockComposer>
+    </Panel>
+
+    <Panel label="Composer (design system — LinkAttachment.Composer)">
+      <LinkAttachment.Composer
+        layout="featured"
+        title={SAMPLE_TITLE}
+        url={SAMPLE_URL}
+        thumbnailUrl={SAMPLE_IMAGE}
+        onDismiss={() => {}}
+      />
+    </Panel>
+
+    <Panel label="In-conversation sent (LinkAttachment.Sent)">
+      <LinkAttachment.Sent
+        layout="featured"
+        title={SAMPLE_TITLE}
+        url={SAMPLE_URL}
+        thumbnailUrl={SAMPLE_IMAGE}
+      />
+    </Panel>
+
+    <Panel label="In-conversation received (LinkAttachment.Received)">
+      <LinkAttachment.Received
+        layout="featured"
+        title={SAMPLE_TITLE}
+        url={SAMPLE_URL}
+        thumbnailUrl={SAMPLE_IMAGE}
+      />
+    </Panel>
+  </div>
+)
+Comparison.parameters = { layout: 'fullscreen' }

package/src/components/CustomLinkPreviewList/CustomLinkPreviewCard.tsx

@@ -23,7 +23,7 @@ const CustomLinkPreviewCard: React.FC<CustomLinkPreviewCardProps> = ({
       href={og_scrape_url}
       target="_blank"
       rel="noopener noreferrer"
-      className="relative block w-[280px] max-w-full rounded-[24px] bg-[#121110] p-2 no-underline transition-opacity hover:opacity-90"
+      className="relative block w-full rounded-[24px] bg-[#121110] p-2 no-underline transition-opacity hover:opacity-90"
     >
       {image_url && (
         <img
@@ -42,11 +42,11 @@ const CustomLinkPreviewCard: React.FC<CustomLinkPreviewCardProps> = ({
       </button>
       <div className="p-2">
         {title && (
-          <div className="text-[14px] font-medium leading-5 text-white">
+          <div className="truncate text-[14px] font-medium leading-5 text-white">
             {title}
           </div>
         )}
-        <div className="text-[12px] leading-4 text-white/55">
+        <div className="truncate text-[12px] leading-4 text-white/55">
           {og_scrape_url}
         </div>
       </div>

package/src/components/CustomLinkPreviewList/index.tsx

@@ -32,7 +32,7 @@ export const CustomLinkPreviewList = () => {
   if (!showLinkPreviews) return null
 
   return (
-    <div className="flex flex-col items-center w-full gap-2 mb-4">
+    <div className="flex flex-col items-stretch w-full gap-2 mb-4">
       {stateLinkPreviews.map((linkPreview) => (
         <CustomLinkPreviewCard
           key={linkPreview.og_scrape_url}