@linktr.ee/messaging-react 1.8.8 → 1.9.1-rc-1764214654

package/package.json

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

package/src/components/Avatar/index.tsx

@@ -9,6 +9,7 @@ export interface AvatarProps {
   image?: string
   size?: number
   className?: string
+  shape?: 'squircle' | 'circle'
 }
 
 /**
@@ -19,6 +20,7 @@ export const Avatar: React.FC<AvatarProps> = ({
   image,
   size = 40,
   className,
+  shape = 'squircle',
 }) => {
   const emoji = getAvatarEmoji(id)
 
@@ -31,15 +33,21 @@ export const Avatar: React.FC<AvatarProps> = ({
 
   const fontSizeClass = getFontSizeClass()
 
+  const borderStyle =
+    shape === 'circle'
+      ? { borderRadius: '50%' }
+      : {
+          borderRadius: '33%',
+          'corner-shape': 'superellipse(1.3)',
+        }
+
   return (
     <div
       className={classNames('flex-shrink-0 overflow-hidden', className)}
       style={{
         width: `${size}px`,
         height: `${size}px`,
-        borderRadius: '33%',
-        // @ts-expect-error - corner-shape is not recognized by react types
-        'corner-shape': 'superellipse(1.3)',
+        ...borderStyle,
       }}
     >
       {image ? (

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -114,7 +114,7 @@ const CustomChannelPreview: React.FC<
               {lastMessageText}
             </p>
             {unreadCount > 0 && (
-              <span className="bg-primary text-white text-xs px-2 py-0.5 rounded-full min-w-[20px] text-center flex-shrink-0">
+              <span className="bg-[#7f22fe] text-white text-xs px-2 py-0.5 rounded-full min-w-[20px] text-center flex-shrink-0">
                 {unreadCount > 99 ? '99+' : unreadCount}
               </span>
             )}

package/src/components/ChannelView.tsx

@@ -315,7 +315,7 @@ const ChannelInfoDialog: React.FC<{
                 name={participantName}
                 image={participantImage}
                 size={88}
-                className="!rounded-full"
+                shape="circle"
               />
               <div className="flex flex-col min-w-0 flex-1">
                 <p className="truncate text-base font-semibold text-charcoal">

package/src/components/FaqList/index.tsx

@@ -51,13 +51,14 @@ export const FaqList: React.FC<FaqListProps> = ({
               name={avatarName || 'Account'}
               image={avatarImage}
               size={24}
+              shape="circle"
             />
           </div>
         )}
 
         {/* FAQs with grey background */}
         <div
-          className="flex-1 rounded-lg p-4 space-y-3"
+          className="flex-1 flex flex-col gap-3 rounded-lg p-4"
           style={{ backgroundColor: '#F1F0EE' }}
         >
           {headerText && (

package/src/components/IconButton/IconButton.stories.tsx

@@ -36,5 +36,5 @@ export const WithCustomClassName: StoryFn<ComponentProps> = Template.bind({})
 WithCustomClassName.args = {
   label: 'Custom styled button',
   children: <XIcon className="h-6 w-6" />,
-  className: 'bg-primary text-white size-12',
+  className: 'bg-[#7f22fe] text-white size-12',
 }

package/src/components/MessagingShell/EmptyState.stories.tsx

@@ -27,13 +27,9 @@ const Template: StoryFn<ComponentProps> = (args) => {
 export const NoChannels: StoryFn<ComponentProps> = Template.bind({})
 NoChannels.args = {
   hasChannels: false,
-  participantLabel: 'followers',
-  onStartConversation: () => console.log('Start conversation clicked'),
 }
 
 export const WithChannels: StoryFn<ComponentProps> = Template.bind({})
 WithChannels.args = {
   hasChannels: true,
-  participantLabel: 'participants',
-  onStartConversation: () => console.log('Start conversation clicked'),
 }

package/src/components/MessagingShell/EmptyState.tsx

@@ -5,9 +5,7 @@ import React from 'react'
  */
 export const EmptyState: React.FC<{
   hasChannels: boolean
-  onStartConversation?: () => void
-  participantLabel: string
-}> = ({ hasChannels, onStartConversation, participantLabel }) => (
+}> = ({ hasChannels }) => (
   <div className="messaging-empty-state flex items-center justify-center h-full p-8 text-balance">
     <div className="text-center max-w-sm">
       <div className="w-24 h-24 bg-primary-alt/10 rounded-full flex items-center justify-center mx-auto mb-6">
@@ -17,42 +15,10 @@ export const EmptyState: React.FC<{
       <h2 className="font-semibold text-charcoal">Welcome to Messages</h2>
 
       <p className="text-stone text-sm mb-6">
-        {hasChannels ? (
-          <>
-            Choose a conversation from the list or{' '}
-            {onStartConversation && (
-              <TextButton onClick={onStartConversation}>
-                start a new conversation with a {participantLabel.slice(0, -1)}.
-              </TextButton>
-            )}
-          </>
-        ) : (
-          onStartConversation && (
-            <>
-              <TextButton onClick={onStartConversation}>
-                Start a new conversation with one of your {participantLabel}
-              </TextButton>{' '}
-              to begin messaging.
-            </>
-          )
-        )}
+        {hasChannels
+          ? 'Choose a conversation from the list.'
+          : 'No conversations yet.'}
       </p>
     </div>
   </div>
 )
-
-const TextButton = ({
-  onClick,
-  children,
-}: {
-  onClick: () => void
-  children: React.ReactNode
-}) => (
-  <button
-    type="button"
-    onClick={onClick}
-    className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:text-primary-alt focus:outline-none focus:ring-2 focus:ring-primary"
-  >
-    {children}
-  </button>
-)

package/src/components/MessagingShell/ErrorState.tsx

@@ -21,7 +21,7 @@ export const ErrorState: React.FC<{
         <button
           type="button"
           onClick={onBack}
-          className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-primary hover:bg-primary-alt rounded-lg focus:outline-none focus:ring-2 focus:ring-primary transition-colors"
+          className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-[#7f22fe] hover:bg-primary-alt rounded-lg focus:outline-none focus:ring-2 focus:ring-primary transition-colors"
         >
           Go Back
         </button>

package/src/components/MessagingShell/index.tsx

@@ -44,7 +44,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   const [existingParticipantIds, setExistingParticipantIds] = useState<
     Set<string>
   >(new Set())
-  const [pickerKey, setPickerKey] = useState(0) // Key to force remount of ParticipantPicker
+  const [pickerKey, _setPickerKey] = useState(0) // Key to force remount of ParticipantPicker
   const [directConversationMode, setDirectConversationMode] = useState(false)
   const [directConversationError, setDirectConversationError] = useState<
     string | null
@@ -52,11 +52,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
 
   const participantPickerRef = useRef<HTMLDialogElement>(null)
 
-  const {
-    showStartConversation = false,
-    participantSource,
-    participantLabel = 'participants',
-  } = capabilities
+  const { participantSource, participantLabel = 'participants' } = capabilities
 
   // Create default filters and merge with provided filters
   const channelFilters = React.useMemo(() => {
@@ -276,14 +272,6 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
     setSelectedChannel(null)
   }, [directConversationMode])
 
-  const handleStartConversation = useCallback(() => {
-    if (participantSource) {
-      setPickerKey((prev) => prev + 1) // Increment key to force remount
-      setShowParticipantPicker(true)
-      participantPickerRef.current?.showModal()
-    }
-  }, [participantSource])
-
   const handleSelectParticipant = useCallback(
     async (participant: Participant) => {
       if (!service) return
@@ -460,13 +448,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
               />
             </div>
           ) : (
-            <EmptyState
-              hasChannels={hasChannels}
-              onStartConversation={
-                showStartConversation ? handleStartConversation : undefined
-              }
-              participantLabel={participantLabel}
-            />
+            <EmptyState hasChannels={hasChannels} />
           )}
         </div>
       </div>