@linktr.ee/messaging-react 3.4.3-rc-1782553325 → 3.4.3-rc-1782553894

package/dist/index.cjs

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

package/package.json

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

package/src/components/ChannelView.test.tsx

@@ -191,6 +191,14 @@ describe('ChannelView', () => {
       screen.queryByRole('button', { name: /view info for/i })
     ).not.toBeInTheDocument()
     expect(screen.getAllByText('Linker').length).toBeGreaterThanOrEqual(1)
+
+    const avatars = screen.getAllByTestId('avatar')
+    expect(avatars.length).toBeGreaterThanOrEqual(1)
+    expect(avatars[0].parentElement).toHaveClass(
+      'rounded-[12px]',
+      'px-1',
+      'py-0.5'
+    )
   })
 
   it('renders the participant name as a button that fires onParticipantNameClick', () => {

package/src/components/ChannelView.tsx

@@ -97,6 +97,10 @@ const CustomChannelHeader: React.FC<{
     channel,
     participant,
   })
+  const mobileParticipantIdentityClassName =
+    'flex max-w-full flex-col items-center gap-1 rounded-[12px] px-1 py-0.5 text-center text-xs font-medium text-black/90'
+  const desktopParticipantIdentityClassName =
+    'flex min-w-0 max-w-full items-center gap-4 rounded-[12px] px-1 py-0.5 text-left text-black/90'
   const participantTitle = (
     <>
       <span className="min-w-0 truncate">{participantName}</span>
@@ -143,7 +147,10 @@ const CustomChannelHeader: React.FC<{
               type="button"
               onClick={onParticipantNameClick}
               aria-label={`View details for ${participantName}`}
-              className="flex max-w-full flex-col items-center gap-1 appearance-none rounded-[12px] border-0 bg-transparent px-1 py-0.5 text-center text-xs font-medium text-black/90 transition-opacity hover:opacity-70 focus-ring focus-visible:outline-none"
+              className={classNames(
+                mobileParticipantIdentityClassName,
+                'appearance-none border-0 bg-transparent transition-opacity hover:opacity-70 focus-ring focus-visible:outline-none'
+              )}
             >
               <Avatar
                 id={participant?.user?.id || channel.id || 'unknown'}
@@ -165,7 +172,7 @@ const CustomChannelHeader: React.FC<{
               )}
             </button>
           ) : (
-            <>
+            <div className={mobileParticipantIdentityClassName}>
               <Avatar
                 id={participant?.user?.id || channel.id || 'unknown'}
                 name={participantName}
@@ -174,8 +181,12 @@ const CustomChannelHeader: React.FC<{
                 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">
+              <p className="flex max-w-full items-center justify-center gap-0.5">
                 {participantTitle}
+                <CaretRightIcon
+                  className="invisible size-3 shrink-0"
+                  weight="bold"
+                />
               </p>
               {dmAgentEnabled && (
                 <div className="flex items-center gap-1 text-[10px] leading-3 text-black/55">
@@ -183,7 +194,7 @@ const CustomChannelHeader: React.FC<{
                   <span>{DM_AGENT_HEADER_HELPER_TEXT}</span>
                 </div>
               )}
-            </>
+            </div>
           )}
         </div>
         <div className="flex justify-end items-center gap-2">
@@ -246,7 +257,10 @@ const CustomChannelHeader: React.FC<{
               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-[12px] border-0 bg-transparent px-1 py-0.5 text-left text-black/90 transition-opacity hover:opacity-70 focus-ring focus-visible:outline-none"
+              className={classNames(
+                desktopParticipantIdentityClassName,
+                'appearance-none border-0 bg-transparent transition-opacity hover:opacity-70 focus-ring focus-visible:outline-none'
+              )}
             >
               <Avatar
                 id={participant?.user?.id || channel.id || 'unknown'}
@@ -272,8 +286,7 @@ const CustomChannelHeader: React.FC<{
               </div>
             </button>
           ) : (
-            <>
-              {/* Avatar */}
+            <div className={desktopParticipantIdentityClassName}>
               <Avatar
                 id={participant?.user?.id || channel.id || 'unknown'}
                 name={participantName}
@@ -285,6 +298,10 @@ const CustomChannelHeader: React.FC<{
               <div className="min-w-0">
                 <h1 className="flex min-w-0 items-center gap-1 font-medium text-black/90">
                   {participantTitle}
+                  <CaretRightIcon
+                    className="invisible 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">
@@ -295,7 +312,7 @@ const CustomChannelHeader: React.FC<{
                   </div>
                 )}
               </div>
-            </>
+            </div>
           )}
         </div>
         <div className="flex items-center gap-2">