@linktr.ee/messaging-react 3.37.0-rc-1786190741 → 3.37.0

package/dist/index.d.ts

@@ -28,7 +28,7 @@ import { StreamChatServiceConfig } from '@linktr.ee/messaging-core';
 export declare const ActionButton: ({ variant, className, children, ...rest }: ActionButtonProps) => JSX_2.Element;
 
 export declare interface ActionButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'default' | 'danger';
+    variant?: "default" | "danger";
 }
 
 export declare type AttachmentSourceType = 'image' | 'audio' | 'video' | 'document';

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 h, k as L, l as d, m as p, R as C, n as v, p as A, q as k, s as F, t as b, u as P, v as f, w as x, x as y, o as z, y as B, z as S, B as q, D, E, G as R, H as V, I as w } from "./index-BOBIiAuD.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 h, k as L, l as d, m as p, R as C, n as v, p as A, q as k, s as F, t as b, u as P, v as f, w as x, x as y, o as z, y as B, z as S, B as q, D, E, G as R, H as V, I as w } from "./index-DGmVyxHy.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.37.0-rc-1786190741",
+  "version": "3.37.0",
   "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.4.0-rc-1786190741",
+    "@linktr.ee/messaging-core": "^2.4.0",
     "@linktr.ee/messaging-taxonomy": "^0.9.0",
     "@phosphor-icons/react": "^2.1.10"
   },

package/src/components/ActionButton/ActionButton.stories.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 
 import ActionButton from '.'
 
+
 type ComponentProps = React.ComponentProps<typeof ActionButton>
 
 const meta: Meta<ComponentProps> = {
@@ -43,3 +44,4 @@ Disabled.args = {
   variant: 'default',
   disabled: true,
 }
+

package/src/components/ActionButton/ActionButton.test.tsx

@@ -1,94 +1,89 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, it, expect, vi } from 'vitest';
 
-import { renderWithProviders, screen, userEvent } from '../../test/utils'
+import { renderWithProviders, screen, userEvent } from '../../test/utils';
 
-import ActionButton from '.'
+import ActionButton from '.';
 
 describe('ActionButton', () => {
   describe('Rendering', () => {
     it('renders with children text', () => {
-      renderWithProviders(<ActionButton>Click me</ActionButton>)
-      expect(
-        screen.getByRole('button', { name: 'Click me' })
-      ).toBeInTheDocument()
-    })
-  })
+      renderWithProviders(<ActionButton>Click me</ActionButton>);
+      expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+    });
+  });
 
   describe('Disabled State', () => {
     it('is disabled when disabled prop is true', () => {
-      renderWithProviders(<ActionButton disabled>Disabled</ActionButton>)
-      const button = screen.getByRole('button')
-      expect(button).toBeDisabled()
-    })
+      renderWithProviders(<ActionButton disabled>Disabled</ActionButton>);
+      const button = screen.getByRole('button');
+      expect(button).toBeDisabled();
+    });
 
     it('does not trigger onClick when disabled', async () => {
-      const handleClick = vi.fn()
-      const user = userEvent.setup()
-
+      const handleClick = vi.fn();
+      const user = userEvent.setup();
+      
       renderWithProviders(
         <ActionButton disabled onClick={handleClick}>
           Disabled
         </ActionButton>
-      )
+      );
 
-      const button = screen.getByRole('button')
-      await user.click(button)
+      const button = screen.getByRole('button');
+      await user.click(button);
 
-      expect(handleClick).not.toHaveBeenCalled()
-    })
-  })
+      expect(handleClick).not.toHaveBeenCalled();
+    });
+  });
 
   describe('Click Handling', () => {
     it('calls onClick when clicked', async () => {
-      const handleClick = vi.fn()
-      const user = userEvent.setup()
-
-      renderWithProviders(
-        <ActionButton onClick={handleClick}>Click me</ActionButton>
-      )
+      const handleClick = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(<ActionButton onClick={handleClick}>Click me</ActionButton>);
 
-      const button = screen.getByRole('button')
-      await user.click(button)
+      const button = screen.getByRole('button');
+      await user.click(button);
 
-      expect(handleClick).toHaveBeenCalledTimes(1)
-    })
-  })
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+  });
 
   describe('Type Attribute', () => {
     it('has button type by default', () => {
-      renderWithProviders(<ActionButton>Default Type</ActionButton>)
-      const button = screen.getByRole('button')
-      expect(button).toHaveAttribute('type', 'button')
-    })
+      renderWithProviders(<ActionButton>Default Type</ActionButton>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('type', 'button');
+    });
 
     it('can have submit type', () => {
-      renderWithProviders(<ActionButton type="submit">Submit</ActionButton>)
-      const button = screen.getByRole('button')
-      expect(button).toHaveAttribute('type', 'submit')
-    })
-  })
+      renderWithProviders(<ActionButton type="submit">Submit</ActionButton>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('type', 'submit');
+    });
+  });
 
   describe('Accessibility', () => {
     it('is keyboard accessible', async () => {
-      const handleClick = vi.fn()
-      const user = userEvent.setup()
+      const handleClick = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(<ActionButton onClick={handleClick}>Press me</ActionButton>);
 
-      renderWithProviders(
-        <ActionButton onClick={handleClick}>Press me</ActionButton>
-      )
-
-      const button = screen.getByRole('button')
-      button.focus()
-      await user.keyboard('{Enter}')
+      const button = screen.getByRole('button');
+      button.focus();
+      await user.keyboard('{Enter}');
 
-      expect(handleClick).toHaveBeenCalledTimes(1)
-    })
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
 
     it('can be focused', () => {
-      renderWithProviders(<ActionButton>Focus me</ActionButton>)
-      const button = screen.getByRole('button')
-      button.focus()
-      expect(button).toHaveFocus()
-    })
-  })
-})
+      renderWithProviders(<ActionButton>Focus me</ActionButton>);
+      const button = screen.getByRole('button');
+      button.focus();
+      expect(button).toHaveFocus();
+    });
+  });
+});
+

package/src/components/ActionButton/index.tsx

@@ -1,32 +1,33 @@
-import classNames from 'classnames'
-import React from 'react'
+import classNames from "classnames";
+import React from "react";
 
-export interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'default' | 'danger'
+export interface ActionButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "danger";
 }
 
 const ActionButton = ({
-  variant = 'default',
+  variant = "default",
   className,
   children,
   ...rest
 }: ActionButtonProps) => {
-  const isDanger = variant === 'danger'
+  const isDanger = variant === "danger";
   return (
     <button
       type="button"
       className={classNames(
-        'flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left text-sm transition-colors focus-ring disabled:cursor-not-allowed disabled:opacity-60',
+        "flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left text-sm transition-colors focus-ring disabled:cursor-not-allowed disabled:opacity-60",
         isDanger
-          ? 'text-danger hover:bg-danger/50'
-          : 'text-charcoal hover:bg-sand',
-        className
+          ? "text-danger hover:bg-danger/50"
+          : "text-charcoal hover:bg-sand",
+        className,
       )}
       {...rest}
     >
       {children}
     </button>
-  )
-}
+  );
+};
 
-export default ActionButton
+export default ActionButton;

package/src/components/AttachmentCard/AttachmentCard.stories.tsx

@@ -184,7 +184,9 @@ export const AllVariants: StoryFn = () => {
         variant: 'dark',
         mimeType: 'image/png',
         detail: '1.1 MB',
-        thumbnail: <AttachmentThumbnail mimeType="image/png" variant="dark" />,
+        thumbnail: (
+          <AttachmentThumbnail mimeType="image/png" variant="dark" />
+        ),
       },
     },
     {

package/src/components/AttachmentCard/MediaPlayer.tsx

@@ -7,7 +7,11 @@ import { renderTypeIcon } from './utils/icons'
 import { getSourceType } from './utils/mimeType'
 
 type TouchEventUnion =
-  MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent
+  | MouseEvent
+  | TouchEvent
+  | React.MouseEvent
+  | React.TouchEvent
+
 
 const getClientXFromEvent = (e: TouchEventUnion): number => {
   if ('touches' in e) {
@@ -190,20 +194,14 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
       className={`relative cursor-pointer overflow-hidden bg-black ${aspectClass}`}
       style={aspectStyle}
       onClick={(e) => {
-        if (onContainerClick) {
-          onContainerClick(e)
-          return
-        }
+        if (onContainerClick) { onContainerClick(e); return }
         if (manualPlayRequired) return
         if (controls) setPlaying((p) => !p)
       }}
       onKeyDown={(e) => {
         if (e.key !== 'Enter' && e.key !== ' ') return
         e.preventDefault()
-        if (onContainerClick) {
-          onContainerClick(e as unknown as React.MouseEvent)
-          return
-        }
+        if (onContainerClick) { onContainerClick(e as unknown as React.MouseEvent); return }
         if (manualPlayRequired) return
         if (controls) setPlaying((p) => !p)
       }}

package/src/components/AttachmentCard/index.tsx

@@ -61,14 +61,10 @@ const AttachmentCard: React.FC<AttachmentCardProps> = ({
       )}
     >
       {topLeft ? (
-        <div className="pointer-events-auto absolute left-3 top-3 z-50">
-          {topLeft}
-        </div>
+        <div className="pointer-events-auto absolute left-3 top-3 z-50">{topLeft}</div>
       ) : null}
       {topRight ? (
-        <div className="pointer-events-auto absolute right-3 top-3 z-50">
-          {topRight}
-        </div>
+        <div className="pointer-events-auto absolute right-3 top-3 z-50">{topRight}</div>
       ) : null}
 
       {thumbnail}

package/src/components/Avatar/Avatar.stories.tsx

@@ -9,8 +9,8 @@ const meta: Meta<ComponentProps> = {
   title: 'Avatar',
   component: Avatar,
   parameters: {
-    layout: 'centered',
-  },
+    layout: 'centered'
+  }
 }
 export default meta
 
@@ -138,23 +138,11 @@ export const DifferentColors: StoryFn = () => {
 // pravatar avatar flake doesn't diff the whole grid.
 export const MixedAvatars: StoryFn = () => {
   const users = [
-    {
-      id: 'user-1',
-      name: 'Alice Anderson',
-      image: 'https://i.pravatar.cc/150?img=1',
-    },
+    { id: 'user-1', name: 'Alice Anderson', image: 'https://i.pravatar.cc/150?img=1' },
     { id: 'user-2', name: 'Bob Brown' },
-    {
-      id: 'user-3',
-      name: 'Carol Chen',
-      image: 'https://i.pravatar.cc/150?img=3',
-    },
+    { id: 'user-3', name: 'Carol Chen', image: 'https://i.pravatar.cc/150?img=3' },
     { id: 'user-4', name: 'David Davis' },
-    {
-      id: 'user-5',
-      name: 'Emma Evans',
-      image: 'https://i.pravatar.cc/150?img=5',
-    },
+    { id: 'user-5', name: 'Emma Evans', image: 'https://i.pravatar.cc/150?img=5' },
     { id: 'user-6', name: 'Frank Foster' },
   ]
 

package/src/components/Avatar/index.tsx

@@ -47,12 +47,18 @@ export const Avatar = ({
   const aiBorderWidth = size >= 40 ? 2 : 1
 
   const borderStyle =
-    shape === 'circle' ? { borderRadius: '50%' } : { borderRadius: '1rem' }
+    shape === 'circle'
+      ? { borderRadius: '50%' }
+      : { borderRadius: '1rem' }
 
   const avatarInner = (
     <div className="h-full w-full overflow-hidden" style={borderStyle}>
       {image ? (
-        <img src={image} alt="" className="h-full w-full object-cover" />
+        <img
+          src={image}
+          alt=""
+          className="h-full w-full object-cover"
+        />
       ) : (
         <div
           aria-hidden="true"
@@ -69,16 +75,17 @@ export const Avatar = ({
 
   return (
     <div
-      className={classNames('relative flex-shrink-0', className)}
-      style={
-        {
-          '--str-chat__avatar-size': `${size}px`,
-          width: `${size}px`,
-          height: `${size}px`,
-          backgroundColor: image ? undefined : bgColor,
-          ...borderStyle,
-        } as React.CSSProperties
-      }
+      className={classNames(
+        'relative flex-shrink-0',
+        className
+      )}
+      style={{
+        '--str-chat__avatar-size': `${size}px`,
+        width: `${size}px`,
+        height: `${size}px`,
+        backgroundColor: image ? undefined : bgColor,
+        ...borderStyle,
+      } as React.CSSProperties}
     >
       {starred && (
         <div
@@ -90,7 +97,10 @@ export const Avatar = ({
       )}
       <div
         data-testid="avatar-ring"
-        className={classNames('h-full w-full', 'bg-transparent')}
+        className={classNames(
+          'h-full w-full',
+          'bg-transparent'
+        )}
         style={{
           ...borderStyle,
           ...(dmAgentEnabled && {

package/src/components/ChannelView.test.tsx

@@ -345,10 +345,12 @@ describe('ChannelView', () => {
     const firstHandler = vi.fn()
     const secondHandler = vi.fn()
     const { rerender: rerenderChannel } = renderWithProviders(
-      <ChannelView channel={createChannel()} onBroadcastClick={firstHandler} />
+      <ChannelView
+        channel={createChannel()}
+        onBroadcastClick={firstHandler}
+      />
     )
-    const firstMessageOverride =
-      activeComponentOverrides.Message as React.ComponentType
+    const firstMessageOverride = activeComponentOverrides.Message as React.ComponentType
     const MessageRowHarness = ({
       Message,
     }: {
@@ -361,10 +363,12 @@ describe('ChannelView', () => {
     expect(customMessageMounts).toHaveBeenCalledOnce()
 
     rerenderChannel(
-      <ChannelView channel={createChannel()} onBroadcastClick={secondHandler} />
+      <ChannelView
+        channel={createChannel()}
+        onBroadcastClick={secondHandler}
+      />
     )
-    const secondMessageOverride =
-      activeComponentOverrides.Message as React.ComponentType
+    const secondMessageOverride = activeComponentOverrides.Message as React.ComponentType
 
     expect(secondMessageOverride).toBe(firstMessageOverride)
     rerenderMessageRow(<MessageRowHarness Message={secondMessageOverride} />)

package/src/components/CustomMessage/CustomMessage.stories.tsx

@@ -26,10 +26,7 @@ import { createMockStreamChatClient } from '../../testing/createMockStreamChatCl
 import type { BroadcastNameResolver } from '../../types'
 import CustomTypingIndicator from '../CustomTypingIndicator'
 
-import {
-  BroadcastNameContext,
-  buildBroadcastNamesById,
-} from './BroadcastNameContext'
+import { BroadcastNameContext, buildBroadcastNamesById } from './BroadcastNameContext'
 import { CustomMessageActions } from './CustomMessageActions'
 
 import { CustomMessage } from './index'
@@ -310,9 +307,7 @@ BroadcastStatus.args = {
   ],
 }
 
-export const BroadcastStatusNonLatest: StoryFn<TemplateProps> = Template.bind(
-  {}
-)
+export const BroadcastStatusNonLatest: StoryFn<TemplateProps> = Template.bind({})
 BroadcastStatusNonLatest.args = {
   messages: [
     {

package/src/components/CustomMessage/CustomMessage.test.tsx

@@ -130,11 +130,9 @@ describe('CustomMessage', () => {
     )
 
     rerender(<CustomMessage onBroadcastClick={secondHandler} />)
-    screen
-      .getByRole('button', {
-        name: 'View broadcast July 9th Class attendees',
-      })
-      .click()
+    screen.getByRole('button', {
+      name: 'View broadcast July 9th Class attendees',
+    }).click()
 
     expect(firstHandler).not.toHaveBeenCalled()
     expect(secondHandler).toHaveBeenCalledWith({

package/src/components/CustomMessage/LockedAttachment/LockedAttachment.test.tsx

@@ -21,10 +21,7 @@ describe('LockedAttachment (characterization)', () => {
 
     it('media mode: renders a preview toggle when a source fetcher is wired', () => {
       renderWithProviders(
-        <MediaCard
-          isDraft
-          onFetchSource={vi.fn().mockResolvedValue(undefined)}
-        />
+        <MediaCard isDraft onFetchSource={vi.fn().mockResolvedValue(undefined)} />
       )
       expect(
         screen.getByRole('button', { name: 'Toggle preview' })
@@ -91,7 +88,9 @@ describe('LockedAttachment (characterization)', () => {
         <MediaCard isMine={false} amountText="$5" onUnlockClick={vi.fn()} />
       )
       expect(screen.getByTestId('locked-attachment')).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'Unlock' })).toBeInTheDocument()
+      expect(
+        screen.getByRole('button', { name: 'Unlock' })
+      ).toBeInTheDocument()
     })
   })
 

package/src/components/CustomMessage/LockedAttachment/components/Text/Card.tsx

@@ -24,7 +24,7 @@ const DraftTextCard: React.FC<TextCardDraftProps> = ({
   onDismiss,
 }) => (
   <TextShell isMine className="pr-8">
-    {renderedText || <SkeletonTextLines variant="dark" />}
+      {renderedText || <SkeletonTextLines variant="dark" />}
     <PriceLockRow>
       <span className={amountText ? 'text-white/55' : 'text-white/30'}>
         {amountText || placeholderAmountText}
@@ -100,7 +100,9 @@ const OtherTextCard: React.FC<TextCardOtherProps> = ({
     )
   }
 
-  const ariaLabel = isUnlocking ? 'Unlocking message.' : 'Unlock this message.'
+  const ariaLabel = isUnlocking
+    ? 'Unlocking message.'
+    : 'Unlock this message.'
 
   return (
     <TextShell isMine={false}>

package/src/components/CustomMessage/LockedAttachment/components/_shared/CardBody.tsx

@@ -55,15 +55,12 @@ const CardBody: React.FC<CardBodyProps> = ({
         <div className="flex min-w-0 flex-1 flex-col gap-1">
           {displayTitle.trim() !== '' && (
             <p
-              className={classNames(
-                'truncate text-base font-medium leading-6',
-                {
-                  'text-black/90': !isDark && !titleDimmed,
-                  'text-black/30': !isDark && titleDimmed,
-                  'text-white/30': isDark && titleDimmed,
-                  'text-white': isDark && !titleDimmed,
-                }
-              )}
+              className={classNames('truncate text-base font-medium leading-6', {
+                'text-black/90': !isDark && !titleDimmed,
+                'text-black/30': !isDark && titleDimmed,
+                'text-white/30': isDark && titleDimmed,
+                'text-white': isDark && !titleDimmed,
+              })}
             >
               {displayTitle}
             </p>

package/src/components/CustomMessage/LockedAttachment/components/_shared/CardThumbnail.tsx

@@ -36,7 +36,9 @@ export const isGalleryCard = (
  * otherwise auto-detects the icon from `mimeType`. Returned as a ready node so
  * every card shares the same size/tone treatment.
  */
-export const galleryBodyIcon = (variant: CardVariant): React.ReactNode => (
+export const galleryBodyIcon = (
+  variant: CardVariant
+): React.ReactNode => (
   <ImagesIcon
     className={
       variant === 'dark'

package/src/components/CustomMessage/LockedAttachment/components/_shared/GalleryThumbnail.tsx

@@ -4,7 +4,10 @@ import React, { useState } from 'react'
 
 import { optimizeMessagingAttachmentUrl } from '../../../../../utils/cdnImageUrl'
 import { AttachmentThumbnail, getSourceType } from '../../../../AttachmentCard'
-import type { LockedAttachmentGalleryItem, PaymentStatus } from '../../types'
+import type {
+  LockedAttachmentGalleryItem,
+  PaymentStatus,
+} from '../../types'
 
 import { LockBadge } from './LockBadge'
 import type { CardVariant } from './MediaShell'

package/src/components/CustomMessage/LockedAttachment/components/_shared/PurchaseStatusBadge.tsx

@@ -54,6 +54,7 @@ const PurchaseStatusBadge: React.FC<PurchaseStatusBadgeProps> = ({
     )
   }
 
+
   if (paymentStatus === 'failed' || paymentStatus === 'refunded') {
     return (
       <React.Fragment>

package/src/components/CustomMessage/LockedAttachment/components/_shared/SingleThumbnail.tsx

@@ -2,7 +2,10 @@ import classNames from 'classnames'
 import React from 'react'
 
 import { optimizeMessagingAttachmentUrl } from '../../../../../utils/cdnImageUrl'
-import { AttachmentThumbnail, renderTypeIcon } from '../../../../AttachmentCard'
+import {
+  AttachmentThumbnail,
+  renderTypeIcon,
+} from '../../../../AttachmentCard'
 import type { LockedAttachmentSource, PaymentStatus } from '../../types'
 
 import { LockBadge } from './LockBadge'

package/src/components/CustomMessage/LockedAttachment/components/_shared/SkeletonTextLines.tsx

@@ -15,16 +15,11 @@ export interface SkeletonTextLinesProps {
  * support opacity modifiers on the `current` color — `bg-current/30` silently
  * produces no CSS rule at all.
  */
-const SkeletonTextLines: React.FC<SkeletonTextLinesProps> = ({
-  variant = 'dark',
-}) => {
+const SkeletonTextLines: React.FC<SkeletonTextLinesProps> = ({ variant = 'dark' }) => {
   const colour = variant === 'dark' ? 'bg-white/25' : 'bg-black/15'
 
   return (
-    <div
-      className="flex flex-col gap-2 str-chat__message-text my-1 animate-pulse"
-      aria-hidden
-    >
+    <div className="flex flex-col gap-2 str-chat__message-text my-1 animate-pulse" aria-hidden>
       <div className={classNames('h-3 w-40 rounded-full', colour)} />
       <div className={classNames('h-3 w-24 rounded-full', colour)} />
     </div>

package/src/components/CustomMessage/LockedAttachment/types.ts

@@ -39,7 +39,6 @@ export interface LockedAttachmentContextValue {
   ) => Promise<LockedAttachmentSource | void>
 }
 
-export const defaultLockedAttachmentContextValue: LockedAttachmentContextValue =
-  {
-    isUnlocking: () => false,
-  }
+export const defaultLockedAttachmentContextValue: LockedAttachmentContextValue = {
+  isUnlocking: () => false,
+}