@linktr.ee/messaging-react 1.0.2 → 1.1.0-rc-1760927977

package/src/components/ChannelView.tsx

@@ -1,65 +1,78 @@
-import { FlagIcon } from "@phosphor-icons/react/dist/csr/Flag";
-import { ProhibitInsetIcon } from "@phosphor-icons/react/dist/csr/ProhibitInset";
-import { SignOutIcon } from "@phosphor-icons/react/dist/csr/SignOut";
-import { SpinnerGapIcon } from "@phosphor-icons/react/dist/csr/SpinnerGap";
-
-import { ArrowLeftIcon } from "@phosphor-icons/react/dist/csr/ArrowLeft";
-import { DotsThreeIcon } from "@phosphor-icons/react/dist/csr/DotsThree";
-
-import React, { useState, useCallback, useRef, useEffect } from 'react';
-import classNames from 'classnames';
+import {
+  ArrowLeftIcon,
+  DotsThreeIcon,
+  FlagIcon,
+  ProhibitInsetIcon,
+  SignOutIcon,
+  SpinnerGapIcon,
+} from '@phosphor-icons/react'
+import classNames from 'classnames'
+import React, { useState, useCallback, useRef, useEffect } from 'react'
+import { Channel as ChannelType, ChannelMemberResponse } from 'stream-chat'
 import {
   Channel,
   Window,
   MessageList,
   MessageInput,
   useChannelStateContext,
-} from 'stream-chat-react';
-import type { ChannelViewProps } from '../types';
-import { useMessagingContext } from '../providers/MessagingProvider';
-import { CloseButton } from './CloseButton';
-import { IconButton } from './IconButton';
-import ActionButton from './ActionButton';
-import { Avatar } from './Avatar';
+} from 'stream-chat-react'
+
+import { useMessagingContext } from '../providers/MessagingProvider'
+import type { ChannelViewProps } from '../types'
+
+import ActionButton from './ActionButton'
+import { Avatar } from './Avatar'
+import { CloseButton } from './CloseButton'
+import { IconButton } from './IconButton'
+
+// Custom user type with email and username
+type CustomUser = {
+  email?: string
+  username?: string
+}
+
+// Blocked user from Stream Chat API
+type BlockedUser = {
+  blocked_user_id: string
+}
 
 /**
  * Custom message input component with render prop for actions
  */
 const CustomMessageInput: React.FC<{
-  renderActions?: () => React.ReactNode;
+  renderActions?: () => React.ReactNode
 }> = ({ renderActions }) => (
   <div className="message-input flex items-center gap-2 p-4">
     {renderActions && renderActions()}
-    
+
     <div className="flex-1">
       <MessageInput focus maxRows={4} />
     </div>
   </div>
-);
+)
 
 /**
  * Custom channel header component
  */
 const CustomChannelHeader: React.FC<{
-  onBack?: () => void;
-  showBackButton: boolean;
-  onShowInfo?: () => void;
-  canShowInfo: boolean;
+  onBack?: () => void
+  showBackButton: boolean
+  onShowInfo?: () => void
+  canShowInfo: boolean
 }> = ({ onBack, showBackButton, onShowInfo, canShowInfo }) => {
-  const { channel } = useChannelStateContext();
-  
+  const { channel } = useChannelStateContext()
+
   // Get participant info (excluding current user)
   const participant = React.useMemo(() => {
-    const members = Object.values(channel.state.members || {});
-    return members.find(member => 
-      member.user?.id && member.user.id !== channel._client.userID
-    );
-  }, [channel._client.userID, channel.state.members]);
+    const members = Object.values(channel.state.members || {})
+    return members.find(
+      (member) => member.user?.id && member.user.id !== channel._client.userID
+    )
+  }, [channel._client.userID, channel.state.members])
 
-  const participantName = participant?.user?.name || 
-                          participant?.user?.id || 
-                          'Unknown member';
-  const participantImage = participant?.user?.image;
+  const participantName =
+    participant?.user?.name || participant?.user?.id || 'Unknown member'
+  const participantImage = participant?.user?.image
 
   return (
     <div className="flex items-center justify-between gap-3 min-h-12">
@@ -74,7 +87,7 @@ const CustomChannelHeader: React.FC<{
             <ArrowLeftIcon className="h-5 w-5 text-stone" weight="bold" />
           </button>
         )}
-        
+
         {/* Avatar */}
         <Avatar
           id={participant?.user?.id || channel.id || 'unknown'}
@@ -82,7 +95,7 @@ const CustomChannelHeader: React.FC<{
           image={participantImage}
           size={40}
         />
-        
+
         <div className="min-w-0">
           <h1 className="text-lg font-semibold text-charcoal truncate">
             {participantName}
@@ -91,168 +104,178 @@ const CustomChannelHeader: React.FC<{
       </div>
 
       {canShowInfo && onShowInfo && (
-        <IconButton
-          label="Chat info" 
-          onClick={onShowInfo}
-        >
+        <IconButton label="Chat info" onClick={onShowInfo}>
           <DotsThreeIcon className="h-6 w-6 text-charcoal" weight="bold" />
         </IconButton>
       )}
     </div>
-  );
-};
+  )
+}
 
 /**
  * Channel info dialog (matching original implementation)
  */
 const ChannelInfoDialog: React.FC<{
-  isOpen: boolean;
-  onClose: () => void;
-  participant: any;
-  channel: any;
-  followerStatusLabel?: string;
-  onLeaveConversation?: (channel: any) => void;
-  onBlockParticipant?: (participantId?: string) => void;
-}> = ({ isOpen, onClose, participant, channel, followerStatusLabel, onLeaveConversation, onBlockParticipant }) => {
-  const { service, debug } = useMessagingContext();
-  const dialogRef = useRef<HTMLDialogElement>(null);
-  const [isParticipantBlocked, setIsParticipantBlocked] = useState(false);
-  const [isLeaving, setIsLeaving] = useState(false);
-  const [isUpdatingBlockStatus, setIsUpdatingBlockStatus] = useState(false);
+  isOpen: boolean
+  onClose: () => void
+  participant: ChannelMemberResponse | undefined
+  channel: ChannelType
+  followerStatusLabel?: string
+  onLeaveConversation?: (channel: ChannelType) => void
+  onBlockParticipant?: (participantId?: string) => void
+}> = ({
+  isOpen,
+  onClose,
+  participant,
+  channel,
+  followerStatusLabel,
+  onLeaveConversation,
+  onBlockParticipant,
+}) => {
+  const { service, debug } = useMessagingContext()
+  const dialogRef = useRef<HTMLDialogElement>(null)
+  const [isParticipantBlocked, setIsParticipantBlocked] = useState(false)
+  const [isLeaving, setIsLeaving] = useState(false)
+  const [isUpdatingBlockStatus, setIsUpdatingBlockStatus] = useState(false)
 
   // Sync dialog open state with prop
   useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
+    const dialog = dialogRef.current
+    if (!dialog) return
 
     if (isOpen) {
-      dialog.showModal();
+      dialog.showModal()
     } else {
-      dialog.close();
+      dialog.close()
     }
-  }, [isOpen]);
+  }, [isOpen])
 
   // Check if participant is blocked
   const checkIsParticipantBlocked = useCallback(async () => {
-    if (!service || !participant?.user?.id) return;
-    
+    if (!service || !participant?.user?.id) return
+
     try {
-      const blockedUsers = await service.getBlockedUsers();
+      const blockedUsers = await service.getBlockedUsers()
       const isBlocked = blockedUsers.some(
-        (user: any) => user.blocked_user_id === participant.user.id,
-      );
-      setIsParticipantBlocked(isBlocked);
+        (user: BlockedUser) => user.blocked_user_id === participant?.user?.id
+      )
+      setIsParticipantBlocked(isBlocked)
     } catch (error) {
-      console.error('[ChannelInfoDialog] Failed to check blocked status:', error);
+      console.error(
+        '[ChannelInfoDialog] Failed to check blocked status:',
+        error
+      )
     }
-  }, [service, participant?.user?.id]);
+  }, [service, participant?.user?.id])
 
   useEffect(() => {
     if (isOpen) {
-      checkIsParticipantBlocked();
+      checkIsParticipantBlocked()
     }
-  }, [isOpen, checkIsParticipantBlocked]);
+  }, [isOpen, checkIsParticipantBlocked])
 
   const handleLeaveConversation = async () => {
-    if (isLeaving) return;
+    if (isLeaving) return
 
     if (debug) {
-      console.log('[ChannelInfoDialog] Leave conversation', channel.cid);
+      console.log('[ChannelInfoDialog] Leave conversation', channel.cid)
     }
-    setIsLeaving(true);
+    setIsLeaving(true)
 
     try {
-      const actingUserId = channel._client?.userID ?? null;
-      await channel.hide(actingUserId, false);
+      const actingUserId = channel._client?.userID ?? null
+      await channel.hide(actingUserId, false)
 
       if (onLeaveConversation) {
-        await onLeaveConversation(channel);
+        await onLeaveConversation(channel)
       }
 
-      onClose();
+      onClose()
     } catch (error) {
-      console.error('[ChannelInfoDialog] Failed to leave conversation', error);
+      console.error('[ChannelInfoDialog] Failed to leave conversation', error)
     } finally {
-      setIsLeaving(false);
+      setIsLeaving(false)
     }
-  };
+  }
 
   const handleBlockUser = async () => {
-    if (isUpdatingBlockStatus || !service) return;
+    if (isUpdatingBlockStatus || !service) return
 
     if (debug) {
-      console.log('[ChannelInfoDialog] Block member', participant?.user?.id);
+      console.log('[ChannelInfoDialog] Block member', participant?.user?.id)
     }
-    setIsUpdatingBlockStatus(true);
+    setIsUpdatingBlockStatus(true)
 
     try {
-      await service.blockUser(participant?.user?.id);
+      await service.blockUser(participant?.user?.id)
 
       if (onBlockParticipant) {
-        await onBlockParticipant(participant?.user?.id);
+        await onBlockParticipant(participant?.user?.id)
       }
 
-      onClose();
+      onClose()
     } catch (error) {
-      console.error('[ChannelInfoDialog] Failed to block member', error);
+      console.error('[ChannelInfoDialog] Failed to block member', error)
     } finally {
-      setIsUpdatingBlockStatus(false);
+      setIsUpdatingBlockStatus(false)
     }
-  };
+  }
 
   const handleUnblockUser = async () => {
-    if (isUpdatingBlockStatus || !service) return;
+    if (isUpdatingBlockStatus || !service) return
 
     if (debug) {
-      console.log('[ChannelInfoDialog] Unblock member', participant?.user?.id);
+      console.log('[ChannelInfoDialog] Unblock member', participant?.user?.id)
     }
-    setIsUpdatingBlockStatus(true);
+    setIsUpdatingBlockStatus(true)
 
     try {
-      await service.unBlockUser(participant?.user?.id);
+      await service.unBlockUser(participant?.user?.id)
 
       if (onBlockParticipant) {
-        await onBlockParticipant(participant?.user?.id);
+        await onBlockParticipant(participant?.user?.id)
       }
 
-      onClose();
+      onClose()
     } catch (error) {
-      console.error('[ChannelInfoDialog] Failed to unblock member', error);
+      console.error('[ChannelInfoDialog] Failed to unblock member', error)
     } finally {
-      setIsUpdatingBlockStatus(false);
+      setIsUpdatingBlockStatus(false)
     }
-  };
+  }
 
   const handleReportUser = () => {
-    onClose();
+    onClose()
     window.open(
       'https://linktr.ee/s/about/trust-center/report',
       '_blank',
-      'noopener,noreferrer',
-    );
-  };
+      'noopener,noreferrer'
+    )
+  }
 
-  if (!participant) return null;
+  if (!participant) return null
 
-  const participantName = participant.user?.name || participant.user?.id || 'Unknown member';
-  const participantImage = participant.user?.image;
-  const participantEmail = participant.user?.email;
-  const participantUsername = participant.user?.username;
+  const participantName =
+    participant.user?.name || participant.user?.id || 'Unknown member'
+  const participantImage = participant.user?.image
+  const participantEmail = (participant.user as CustomUser)?.email
+  const participantUsername = (participant.user as CustomUser)?.username
   const participantSecondary = participantEmail
     ? participantEmail
     : participantUsername
       ? `linktr.ee/${participantUsername}`
-      : undefined;
-  const participantId = participant.user?.id || 'unknown';
+      : undefined
+  const participantId = participant.user?.id || 'unknown'
 
   return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     <dialog
       ref={dialogRef}
       className="mes-dialog"
       onClose={onClose}
       onClick={(e) => {
         if (e.target === dialogRef.current) {
-          onClose();
+          onClose()
         }
       }}
     >
@@ -261,7 +284,7 @@ const ChannelInfoDialog: React.FC<{
           <h2 className="text-base font-semibold text-charcoal">Chat info</h2>
           <CloseButton onClick={onClose} />
         </div>
-        
+
         <div className="flex-1 overflow-y-auto px-6 py-6">
           <div className="rounded-2xl bg-chalk p-4">
             <div className="flex items-center gap-4">
@@ -343,8 +366,8 @@ const ChannelInfoDialog: React.FC<{
         </div>
       </div>
     </dialog>
-  );
-};
+  )
+}
 
 /**
  * Channel view component with message list and input
@@ -358,28 +381,28 @@ export const ChannelView: React.FC<ChannelViewProps> = ({
   onBlockParticipant,
   className,
 }) => {
-  const [showInfo, setShowInfo] = useState(false);
+  const [showInfo, setShowInfo] = useState(false)
 
   // Get participant info for info dialog
   const participant = React.useMemo(() => {
-    const members = Object.values(channel.state.members || {});
-    return members.find(member => 
-      member.user?.id && member.user.id !== channel._client.userID
-    );
-  }, [channel._client.userID, channel.state.members]);
+    const members = Object.values(channel.state.members || {})
+    return members.find(
+      (member) => member.user?.id && member.user.id !== channel._client.userID
+    )
+  }, [channel._client.userID, channel.state.members])
 
   // Get follower status label from channel data
   const followerStatusLabel = React.useMemo(() => {
     const channelExtraData = (channel.data ?? {}) as {
-      followerStatus?: string;
-      isFollower?: boolean;
-    };
+      followerStatus?: string
+      isFollower?: boolean
+    }
     return channelExtraData.followerStatus
       ? String(channelExtraData.followerStatus)
       : channelExtraData.isFollower
         ? 'Subscribed to you'
-        : undefined;
-  }, [channel.data]);
+        : undefined
+  }, [channel.data])
 
   return (
     <div className={classNames('h-full flex flex-col', className)}>
@@ -418,5 +441,5 @@ export const ChannelView: React.FC<ChannelViewProps> = ({
         onBlockParticipant={onBlockParticipant}
       />
     </div>
-  );
-};
+  )
+}

package/src/components/CloseButton/index.tsx

@@ -1,10 +1,9 @@
-import { XIcon } from "@phosphor-icons/react/dist/csr/X";
-import React from "react";
+import { XIcon } from '@phosphor-icons/react'
 
-import { IconButton } from "../IconButton";
+import { IconButton } from '../IconButton'
 
 interface CloseButtonProps {
-  onClick: () => void;
+  onClick: () => void
 }
 
 export function CloseButton({ onClick }: CloseButtonProps) {
@@ -12,5 +11,5 @@ export function CloseButton({ onClick }: CloseButtonProps) {
     <IconButton label="Close" onClick={onClick} className="p-1">
       <XIcon className="h-5 w-5 text-stone" weight="bold" />
     </IconButton>
-  );
+  )
 }

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

@@ -1,8 +1,9 @@
+import { XIcon } from '@phosphor-icons/react'
 import type { Meta, StoryFn } from '@storybook/react'
-import { IconButton } from '.'
-import { XIcon } from '@phosphor-icons/react/dist/csr/X'
 import React from 'react'
 
+import { IconButton } from '.'
+
 type ComponentProps = React.ComponentProps<typeof IconButton>
 
 const meta: Meta<ComponentProps> = {
@@ -37,4 +38,3 @@ WithCustomClassName.args = {
   children: <XIcon className="h-6 w-6" />,
   className: 'bg-primary text-white size-12',
 }
-

package/src/components/Loading/Loading.stories.tsx

@@ -1,7 +1,8 @@
 import type { Meta, StoryFn } from '@storybook/react'
-import Loading from '.'
 import React from 'react'
 
+import Loading from '.'
+
 type ComponentProps = React.ComponentProps<typeof Loading>
 
 const meta: Meta<ComponentProps> = {

package/src/components/Loading/index.tsx

@@ -1,14 +1,13 @@
-import classNames from "classnames";
-import React from "react";
+import classNames from 'classnames'
 
 type LoadingProps = {
-  className?: string;
-  message?: string;
-};
+  className?: string
+  message?: string
+}
 
 const Loading = ({ className, message }: LoadingProps) => (
   <div
-    className={classNames("flex items-center justify-center h-full", className)}
+    className={classNames('flex items-center justify-center h-full', className)}
   >
     <svg viewBox="0 0 100 100" className="size-8 fill-pebble" stroke="none">
       <circle cx="6" cy="50" r="6">
@@ -44,7 +43,6 @@ const Loading = ({ className, message }: LoadingProps) => (
     </svg>
     {message && <span className="text-stone">{message}</span>}
   </div>
-);
-
-export default Loading;
+)
 
+export default Loading

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

@@ -1,7 +1,8 @@
 import type { Meta, StoryFn } from '@storybook/react'
-import { EmptyState } from './EmptyState'
 import React from 'react'
 
+import { EmptyState } from './EmptyState'
+
 
 type ComponentProps = React.ComponentProps<typeof EmptyState>
 

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

@@ -1,7 +1,8 @@
 import type { Meta, StoryFn } from '@storybook/react'
-import { ErrorState } from './ErrorState'
 import React from 'react'
 
+import { ErrorState } from './ErrorState'
+
 type ComponentProps = React.ComponentProps<typeof ErrorState>
 
 const meta: Meta<ComponentProps> = {

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

@@ -1,7 +1,8 @@
 import type { Meta, StoryFn } from '@storybook/react'
-import { LoadingState } from './LoadingState'
 import React from 'react'
 
+import { LoadingState } from './LoadingState'
+
 type ComponentProps = React.ComponentProps<typeof LoadingState>
 
 const meta: Meta<ComponentProps> = {

package/src/components/MessagingShell/LoadingState.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import Loading from '../Loading';
+import Loading from '../Loading'
 
 /**
  * Loading state component
@@ -7,9 +6,8 @@ import Loading from '../Loading';
 export const LoadingState = () => (
   <div className="flex items-center justify-center h-full">
     <div className="flex items-center">
-      <Loading className='w-6 h-6' />
+      <Loading className="w-6 h-6" />
       <span className="text-sm text-stone">Loading messages</span>
     </div>
   </div>
-);
-
+)