@linktr.ee/messaging-react 3.3.13 → 3.3.14-rc-1782375842

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-D31aF4s2.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-BjCg538O.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.d.ts

@@ -1,6 +1,7 @@
 import { Attachment } from 'stream-chat';
 import { Channel } from 'stream-chat';
 import { ChannelFilters } from 'stream-chat';
+import { ChannelMemberResponse } from 'stream-chat';
 import { ChannelSort } from 'stream-chat';
 import { ComponentType } from 'react';
 import { default as default_2 } from 'react';
@@ -148,7 +149,7 @@ export declare const ChannelView: default_2.NamedExoticComponent<ChannelViewProp
  * Props that MessagingShell passes through to ChannelView.
  * ChannelViewProps is the source of truth for these props.
  */
-declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'renderMessage' | 'onMessageLinkClick' | 'showChannelInfo'>;
+declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderHeaderTitleBadges' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'renderMessage' | 'onMessageLinkClick' | 'showChannelInfo'>;
 
 /**
  * ChannelView component props
@@ -250,6 +251,14 @@ export declare interface ChannelViewProps {
      * and filter by starred/pinned status.
      */
     showStarButton?: boolean;
+    /**
+     * Custom badges rendered inline after the participant name in the channel
+     * header title.
+     */
+    renderHeaderTitleBadges?: (context: {
+        channel: Channel;
+        participant?: ChannelMemberResponse;
+    }) => React.ReactNode;
     /**
      * Show the channel actions menu (the `...` popover) in the header, which
      * exposes the block/report/delete moderation actions. Defaults to true.

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-BHFdqj7Z.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-Y0Zo_toW.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.3.13",
+  "version": "3.3.14-rc-1782375842",
   "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-1782375842",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/ChannelView.stories.tsx

@@ -270,6 +270,27 @@ DmAgentHeader.parameters = {
   },
 }
 
+export const WithHeaderTitleBadges: StoryFn<TemplateProps> = Template.bind({})
+WithHeaderTitleBadges.args = {
+  showBackButton: false,
+  renderHeaderTitleBadges: ({ participant }) => (
+    <span
+      aria-label={`${participant?.user?.name ?? 'Participant'} is a customer`}
+      className="flex size-4 items-center justify-center rounded-full bg-[#E8F8EF] text-[10px] font-semibold text-[#136C3A]"
+    >
+      $
+    </span>
+  ),
+}
+WithHeaderTitleBadges.parameters = {
+  docs: {
+    description: {
+      story:
+        'Renders custom badges inline after the participant name in the channel header via renderHeaderTitleBadges.',
+    },
+  },
+}
+
 export const RestrictedOfficialChannel: StoryFn<TemplateProps> = Template.bind(
   {}
 )

package/src/components/ChannelView.tsx

@@ -52,6 +52,7 @@ const CustomChannelHeader: React.FC<{
   customChannelActions?: React.ReactNode
   renderChannelActions?: React.ReactNode
   showChannelInfo?: boolean
+  renderHeaderTitleBadges?: ChannelViewProps['renderHeaderTitleBadges']
 }> = ({
   onBack,
   showBackButton,
@@ -68,6 +69,7 @@ const CustomChannelHeader: React.FC<{
   customChannelActions,
   renderChannelActions,
   showChannelInfo = true,
+  renderHeaderTitleBadges,
 }) => {
   const { channel } = useChannelStateContext()
 
@@ -84,6 +86,10 @@ const CustomChannelHeader: React.FC<{
   const participantName = resolveParticipantDisplayName(participant?.user)
   const participantImage = participant?.user?.image
   const isStarred = useChannelStar(channel)
+  const headerTitleBadges = renderHeaderTitleBadges?.({
+    channel,
+    participant,
+  })
 
   const handleStarClick = async () => {
     try {
@@ -127,8 +133,11 @@ const CustomChannelHeader: React.FC<{
             dmAgentEnabled={dmAgentEnabled}
             size={48}
           />
-          <p className="text-center text-xs font-medium text-black/90">
-            {participantName}
+          <p className="flex max-w-full items-center justify-center gap-1 text-center text-xs font-medium text-black/90">
+            <span className="truncate">{participantName}</span>
+            {headerTitleBadges && (
+              <span className="shrink-0">{headerTitleBadges}</span>
+            )}
           </p>
           {dmAgentEnabled && (
             <div className="flex items-center gap-1 text-[10px] leading-3 text-black/55">
@@ -202,8 +211,11 @@ const CustomChannelHeader: React.FC<{
             size={48}
           />
           <div className="min-w-0">
-            <h1 className="font-medium text-black/90 truncate">
-              {participantName}
+            <h1 className="flex min-w-0 items-center gap-1 font-medium text-black/90">
+              <span className="truncate">{participantName}</span>
+              {headerTitleBadges && (
+                <span className="shrink-0">{headerTitleBadges}</span>
+              )}
             </h1>
             {dmAgentEnabled && (
               <div className="mt-0.5 flex items-center gap-1 text-[10px] leading-3 text-black/55">
@@ -280,6 +292,7 @@ const ChannelViewInner: React.FC<{
   showStarButton?: boolean
   chatbotVotingEnabled?: boolean
   renderChannelBanner?: () => React.ReactNode
+  renderHeaderTitleBadges?: ChannelViewProps['renderHeaderTitleBadges']
   customChannelActions?: React.ReactNode
   renderChannelActions?: React.ReactNode
   renderMessage?: (
@@ -308,6 +321,7 @@ const ChannelViewInner: React.FC<{
   showStarButton = false,
   chatbotVotingEnabled = false,
   renderChannelBanner,
+  renderHeaderTitleBadges,
   customChannelActions,
   renderChannelActions,
   renderMessage,
@@ -395,6 +409,7 @@ const ChannelViewInner: React.FC<{
               onReportParticipantClick={onReportParticipantClick}
               customChannelActions={customChannelActions}
               renderChannelActions={renderChannelActions}
+              renderHeaderTitleBadges={renderHeaderTitleBadges}
             />
           </div>
 
@@ -464,6 +479,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     showStarButton = false,
     chatbotVotingEnabled = false,
     renderChannelBanner,
+    renderHeaderTitleBadges,
     customChannelActions,
     renderChannelActions,
     renderMessage,
@@ -579,6 +595,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
               dmAgentEnabled={dmAgentEnabled}
               chatbotVotingEnabled={chatbotVotingEnabled}
               renderChannelBanner={renderChannelBanner}
+              renderHeaderTitleBadges={renderHeaderTitleBadges}
               customChannelActions={customChannelActions}
               renderChannelActions={renderChannelActions}
               renderMessage={renderMessage}

package/src/components/MessagingShell/index.tsx

@@ -31,6 +31,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   onMessageSent,
   chatbotVotingEnabled = false,
   viewerLanguage,
+  renderHeaderTitleBadges,
   renderChannelBanner,
   customChannelActions,
   renderChannelActions,
@@ -255,6 +256,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           onMessageSent={onMessageSent}
           chatbotVotingEnabled={chatbotVotingEnabled}
           viewerLanguage={viewerLanguage}
+          renderHeaderTitleBadges={renderHeaderTitleBadges}
           customChannelActions={customChannelActions}
           renderChannelActions={renderChannelActions}
           renderMessage={renderMessage}

package/src/types.ts

@@ -6,6 +6,7 @@ import type { ComponentType } from 'react'
 import type {
   Channel,
   ChannelFilters,
+  ChannelMemberResponse,
   ChannelSort,
   LocalMessage,
   SendMessageAPIResponse,
@@ -209,6 +210,15 @@ export interface ChannelViewProps {
    */
   showStarButton?: boolean
 
+  /**
+   * Custom badges rendered inline after the participant name in the channel
+   * header title.
+   */
+  renderHeaderTitleBadges?: (context: {
+    channel: Channel
+    participant?: ChannelMemberResponse
+  }) => React.ReactNode
+
   /**
    * Show the channel actions menu (the `...` popover) in the header, which
    * exposes the block/report/delete moderation actions. Defaults to true.
@@ -330,6 +340,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'onMessageSent'
   | 'chatbotVotingEnabled'
   | 'viewerLanguage'
+  | 'renderHeaderTitleBadges'
   | 'renderChannelBanner'
   | 'customChannelActions'
   | 'renderChannelActions'