@linktr.ee/messaging-react 1.19.1 → 1.19.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.19.1",
+  "version": "1.19.3",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/Avatar/index.tsx

@@ -24,11 +24,11 @@ export const Avatar: React.FC<AvatarProps> = ({
 }) => {
   const emoji = getAvatarEmoji(id)
 
-  // Determine font size based on avatar size
   const getFontSizeClass = () => {
     if (size < 32) return 'text-xs'
     if (size < 56) return 'text-sm'
-    return 'text-lg'
+    if (size < 120) return 'text-lg'
+    return 'text-4xl'
   }
 
   const fontSizeClass = getFontSizeClass()

package/src/components/ChannelView.stories.tsx

@@ -248,6 +248,88 @@ WithMessageActions.parameters = {
   },
 }
 
+const WithStarButtonTemplate: StoryFn<ComponentProps> = (args) => {
+  const [client] = React.useState(() => {
+    const client = new StreamChat('mock-api-key', {
+      allowServerSideConnect: true,
+    })
+    client.userID = mockUser.id
+    client.user = mockUser
+    return client
+  })
+
+  const [channel, setChannel] = React.useState<ChannelType | null>(null)
+
+  useEffect(() => {
+    createMockChannel(client, true).then((mockChannel) => {
+      const updateChannelPin = (isStarred: boolean) => {
+        const member: ChannelMemberResponse = {
+          user: mockUser,
+          user_id: mockUser.id,
+          pinned_at: isStarred ? new Date().toISOString() : null,
+        }
+
+        client.dispatchEvent({
+          type: 'member.updated',
+          cid: mockChannel.cid,
+          member,
+          user: mockUser,
+        } as Event)
+      }
+
+      mockChannel.pin = async () => {
+        updateChannelPin(true)
+        return {} as QueryChannelAPIResponse
+      }
+
+      mockChannel.unpin = async () => {
+        updateChannelPin(false)
+        return {} as QueryChannelAPIResponse
+      }
+
+      setChannel(mockChannel)
+    })
+  }, [client])
+
+  if (!channel) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <Chat client={client}>
+      <div className="h-screen w-full bg-white">
+        <ChannelView {...args} channel={channel} />
+      </div>
+    </Chat>
+  )
+}
+
+export const WithStarButton: StoryFn<ComponentProps> =
+  WithStarButtonTemplate.bind({})
+WithStarButton.args = {
+  showBackButton: false,
+  showStarButton: true,
+  onLeaveConversation: (channel) =>
+    console.log('Leave conversation:', channel.id),
+  onBlockParticipant: (participantId) =>
+    console.log('Block participant:', participantId),
+}
+WithStarButton.argTypes = {
+  showStarButton: {
+    control: false,
+    table: {
+      disable: true,
+    },
+  },
+}
+WithStarButton.parameters = {
+  docs: {
+    description: {
+      story: 'Channel view with a star button that toggles pinned state.',
+    },
+  },
+}
+
 const EmptyTemplate: StoryFn<ComponentProps> = (args) => {
   const [client] = React.useState(() => {
     const client = new StreamChat('mock-api-key', {

package/src/components/ChannelView.tsx

@@ -151,8 +151,11 @@ const CustomChannelHeader: React.FC<{
               }
             >
               <StarIcon
-                className="size-5 text-black/90"
-                weight={isStarred ? 'fill' : 'regular'}
+                className={classNames('size-5', {
+                  'text-yellow-600': isStarred,
+                  'text-black/90': !isStarred,
+                })}
+                weight={isStarred ? 'duotone' : 'regular'}
               />
             </button>
           )}
@@ -202,8 +205,11 @@ const CustomChannelHeader: React.FC<{
               }
             >
               <StarIcon
-                className="size-5 text-black/90"
-                weight={isStarred ? 'fill' : 'regular'}
+                className={classNames('size-5', {
+                  'text-yellow-600': isStarred,
+                  'text-black/90': !isStarred,
+                })}
+                weight={isStarred ? 'duotone' : 'regular'}
               />
             </button>
           )}