@linktr.ee/messaging-react 3.4.2 → 3.4.3-rc-1782553322

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-tI-4cxV1.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.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-12HxQ_GM.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.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 g, f as r, L as l, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as C, o as v, p as A, q as k, s as F, 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, E as D } from "./index-CjwQ2Hj3.js";
+import { a as e, b as t, C as i, c as o, d as n, e as m, F as g, f as r, L as l, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as C, o as v, p as A, q as k, s as F, 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, E as D } from "./index-Dv13-2iu.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

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

package/src/components/ChannelView.stories.tsx

@@ -251,18 +251,20 @@ Default.parameters = {
   },
 }
 
-export const ParticipantNameTrigger: StoryFn<TemplateProps> = Template.bind({})
-ParticipantNameTrigger.args = {
+export const ParticipantIdentityTrigger: StoryFn<TemplateProps> = Template.bind(
+  {}
+)
+ParticipantIdentityTrigger.args = {
   showBackButton: false,
   onParticipantNameClick: () =>
     // eslint-disable-next-line no-alert
-    window.alert('Participant name clicked — open Thread content'),
+    window.alert('Participant details clicked — open Thread content'),
 }
-ParticipantNameTrigger.parameters = {
+ParticipantIdentityTrigger.parameters = {
   docs: {
     description: {
       story:
-        'Header with `onParticipantNameClick` set: the participant name renders as a button with a trailing caret (both the mobile and desktop header layouts). Click the name to fire the callback (shows an alert here). With the prop omitted (see Default) the name is plain, non-interactive text.',
+        'Header with `onParticipantNameClick` set: the participant avatar and name render as one button with a trailing caret in both the mobile and desktop header layouts. Click the identity block to fire the callback (shows an alert here). With the prop omitted (see Default) the header remains non-interactive.',
     },
   },
 }

package/src/components/ChannelView.test.tsx

@@ -208,6 +208,16 @@ describe('ChannelView', () => {
       name: /view details for linker/i,
     })
     expect(buttons.length).toBeGreaterThanOrEqual(1)
+    expect(buttons[0]).toHaveClass(
+      'appearance-none',
+      'border-0',
+      'bg-transparent',
+      'p-0'
+    )
+
+    const avatars = screen.getAllByTestId('avatar')
+    expect(avatars.length).toBeGreaterThanOrEqual(1)
+    expect(avatars[0].closest('button')).toBe(buttons[0])
 
     buttons[0].click()
     expect(onParticipantNameClick).toHaveBeenCalledTimes(1)

package/src/components/ChannelView.tsx

@@ -97,6 +97,12 @@ const CustomChannelHeader: React.FC<{
     channel,
     participant,
   })
+  const participantTitle = (
+    <>
+      <span className="min-w-0 truncate">{participantName}</span>
+      {headerTitleBadges && <span className="shrink-0">{headerTitleBadges}</span>}
+    </>
+  )
 
   const handleStarClick = async () => {
     try {
@@ -132,40 +138,52 @@ const CustomChannelHeader: React.FC<{
           )}
         </div>
         <div className="flex flex-col gap-1 items-center">
-          <Avatar
-            id={participant?.user?.id || channel.id || 'unknown'}
-            name={participantName}
-            image={participantImage}
-            starred={showStarButton && isStarred}
-            dmAgentEnabled={dmAgentEnabled}
-            size={48}
-          />
           {onParticipantNameClick ? (
             <button
               type="button"
               onClick={onParticipantNameClick}
               aria-label={`View details for ${participantName}`}
-              className="flex max-w-full items-center gap-0.5 rounded text-center text-xs font-medium text-black/90 transition-opacity hover:opacity-70"
+              className="flex max-w-full flex-col items-center gap-1 appearance-none rounded border-0 bg-transparent p-0 text-center text-xs font-medium text-black/90 transition-opacity hover:opacity-70 focus-ring focus-visible:outline-none"
             >
-              <span className="min-w-0 truncate">{participantName}</span>
-              {headerTitleBadges && (
-                <span className="shrink-0">{headerTitleBadges}</span>
+              <Avatar
+                id={participant?.user?.id || channel.id || 'unknown'}
+                name={participantName}
+                image={participantImage}
+                starred={showStarButton && isStarred}
+                dmAgentEnabled={dmAgentEnabled}
+                size={48}
+              />
+              <span className="flex max-w-full items-center gap-0.5">
+                {participantTitle}
+                <CaretRightIcon className="size-3 shrink-0" weight="bold" />
+              </span>
+              {dmAgentEnabled && (
+                <div className="flex items-center gap-1 text-[10px] leading-3 text-black/55">
+                  <SparkleIcon className="size-3 shrink-0 text-black/55" />
+                  <span>{DM_AGENT_HEADER_HELPER_TEXT}</span>
+                </div>
               )}
-              <CaretRightIcon className="size-3 shrink-0" weight="bold" />
             </button>
           ) : (
-            <p className="flex max-w-full items-center justify-center gap-1 text-center text-xs font-medium text-black/90">
-              <span className="min-w-0 truncate">{participantName}</span>
-              {headerTitleBadges && (
-                <span className="shrink-0">{headerTitleBadges}</span>
+            <>
+              <Avatar
+                id={participant?.user?.id || channel.id || 'unknown'}
+                name={participantName}
+                image={participantImage}
+                starred={showStarButton && isStarred}
+                dmAgentEnabled={dmAgentEnabled}
+                size={48}
+              />
+              <p className="flex max-w-full items-center justify-center gap-1 text-center text-xs font-medium text-black/90">
+                {participantTitle}
+              </p>
+              {dmAgentEnabled && (
+                <div className="flex items-center gap-1 text-[10px] leading-3 text-black/55">
+                  <SparkleIcon className="size-3 shrink-0 text-black/55" />
+                  <span>{DM_AGENT_HEADER_HELPER_TEXT}</span>
+                </div>
               )}
-            </p>
-          )}
-          {dmAgentEnabled && (
-            <div className="flex items-center gap-1 text-[10px] leading-3 text-black/55">
-              <SparkleIcon className="size-3 shrink-0 text-black/55" />
-              <span>{DM_AGENT_HEADER_HELPER_TEXT}</span>
-            </div>
+            </>
           )}
         </div>
         <div className="flex justify-end items-center gap-2">
@@ -223,44 +241,62 @@ const CustomChannelHeader: React.FC<{
               <ArrowLeftIcon className="size-5 text-black/90" />
             </button>
           )}
-          {/* Avatar */}
-          <Avatar
-            id={participant?.user?.id || channel.id || 'unknown'}
-            name={participantName}
-            image={participantImage}
-            starred={showStarButton && isStarred}
-            dmAgentEnabled={dmAgentEnabled}
-            size={48}
-          />
-          <div className="min-w-0">
-            {onParticipantNameClick ? (
-              <button
-                type="button"
-                onClick={onParticipantNameClick}
-                aria-label={`View details for ${participantName}`}
-                className="flex min-w-0 max-w-full items-center gap-1 rounded font-medium text-black/90 transition-opacity hover:opacity-70"
-              >
-                <span className="min-w-0 truncate">{participantName}</span>
-                {headerTitleBadges && (
-                  <span className="shrink-0">{headerTitleBadges}</span>
+          {onParticipantNameClick ? (
+            <button
+              type="button"
+              onClick={onParticipantNameClick}
+              aria-label={`View details for ${participantName}`}
+              className="flex min-w-0 max-w-full items-center gap-4 appearance-none rounded border-0 bg-transparent p-0 text-left text-black/90 transition-opacity hover:opacity-70 focus-ring focus-visible:outline-none"
+            >
+              <Avatar
+                id={participant?.user?.id || channel.id || 'unknown'}
+                name={participantName}
+                image={participantImage}
+                starred={showStarButton && isStarred}
+                dmAgentEnabled={dmAgentEnabled}
+                size={48}
+              />
+              <div className="min-w-0">
+                <h1 className="flex min-w-0 items-center gap-1 font-medium text-black/90">
+                  {participantTitle}
+                  <CaretRightIcon className="size-4 shrink-0" weight="bold" />
+                </h1>
+                {dmAgentEnabled && (
+                  <div className="mt-0.5 flex items-center gap-1 text-[10px] leading-3 text-black/55">
+                    <SparkleIcon className="size-3 shrink-0 text-black/55" />
+                    <span className="truncate">
+                      {DM_AGENT_HEADER_HELPER_TEXT}
+                    </span>
+                  </div>
                 )}
-                <CaretRightIcon className="size-4 shrink-0" weight="bold" />
-              </button>
-            ) : (
-              <h1 className="flex min-w-0 items-center gap-1 font-medium text-black/90">
-                <span className="min-w-0 truncate">{participantName}</span>
-                {headerTitleBadges && (
-                  <span className="shrink-0">{headerTitleBadges}</span>
+              </div>
+            </button>
+          ) : (
+            <>
+              {/* Avatar */}
+              <Avatar
+                id={participant?.user?.id || channel.id || 'unknown'}
+                name={participantName}
+                image={participantImage}
+                starred={showStarButton && isStarred}
+                dmAgentEnabled={dmAgentEnabled}
+                size={48}
+              />
+              <div className="min-w-0">
+                <h1 className="flex min-w-0 items-center gap-1 font-medium text-black/90">
+                  {participantTitle}
+                </h1>
+                {dmAgentEnabled && (
+                  <div className="mt-0.5 flex items-center gap-1 text-[10px] leading-3 text-black/55">
+                    <SparkleIcon className="size-3 shrink-0 text-black/55" />
+                    <span className="truncate">
+                      {DM_AGENT_HEADER_HELPER_TEXT}
+                    </span>
+                  </div>
                 )}
-              </h1>
-            )}
-            {dmAgentEnabled && (
-              <div className="mt-0.5 flex items-center gap-1 text-[10px] leading-3 text-black/55">
-                <SparkleIcon className="size-3 shrink-0 text-black/55" />
-                <span className="truncate">{DM_AGENT_HEADER_HELPER_TEXT}</span>
               </div>
-            )}
-          </div>
+            </>
+          )}
         </div>
         <div className="flex items-center gap-2">
           {showStarButton && (