@linktr.ee/messaging-react 1.0.0 → 1.0.1

package/src/components/ChannelView.tsx

@@ -0,0 +1,422 @@
+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 {
+  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';
+
+/**
+ * Custom message input component with render prop for actions
+ */
+const CustomMessageInput: React.FC<{
+  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, showBackButton, onShowInfo, canShowInfo }) => {
+  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 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">
+      <div className="flex items-center gap-3 min-w-0">
+        {showBackButton && onBack && (
+          <button
+            type="button"
+            onClick={onBack}
+            className="inline-flex items-center justify-center w-8 h-8 rounded-lg hover:bg-sand focus:outline-none focus:ring-2 focus:ring-primary transition-colors lg:hidden"
+            aria-label="Back to channel list"
+          >
+            <ArrowLeftIcon className="h-5 w-5 text-stone" weight="bold" />
+          </button>
+        )}
+        
+        {/* Avatar */}
+        <Avatar
+          id={participant?.user?.id || channel.id || 'unknown'}
+          name={participantName}
+          image={participantImage}
+          size={40}
+        />
+        
+        <div className="min-w-0">
+          <h1 className="text-lg font-semibold text-charcoal truncate">
+            {participantName}
+          </h1>
+        </div>
+      </div>
+
+      {canShowInfo && 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);
+
+  // Sync dialog open state with prop
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    if (isOpen) {
+      dialog.showModal();
+    } else {
+      dialog.close();
+    }
+  }, [isOpen]);
+
+  // Check if participant is blocked
+  const checkIsParticipantBlocked = useCallback(async () => {
+    if (!service || !participant?.user?.id) return;
+    
+    try {
+      const blockedUsers = await service.getBlockedUsers();
+      const isBlocked = blockedUsers.some(
+        (user: any) => user.blocked_user_id === participant.user.id,
+      );
+      setIsParticipantBlocked(isBlocked);
+    } catch (error) {
+      console.error('[ChannelInfoDialog] Failed to check blocked status:', error);
+    }
+  }, [service, participant?.user?.id]);
+
+  useEffect(() => {
+    if (isOpen) {
+      checkIsParticipantBlocked();
+    }
+  }, [isOpen, checkIsParticipantBlocked]);
+
+  const handleLeaveConversation = async () => {
+    if (isLeaving) return;
+
+    if (debug) {
+      console.log('[ChannelInfoDialog] Leave conversation', channel.cid);
+    }
+    setIsLeaving(true);
+
+    try {
+      const actingUserId = channel._client?.userID ?? null;
+      await channel.hide(actingUserId, false);
+
+      if (onLeaveConversation) {
+        await onLeaveConversation(channel);
+      }
+
+      onClose();
+    } catch (error) {
+      console.error('[ChannelInfoDialog] Failed to leave conversation', error);
+    } finally {
+      setIsLeaving(false);
+    }
+  };
+
+  const handleBlockUser = async () => {
+    if (isUpdatingBlockStatus || !service) return;
+
+    if (debug) {
+      console.log('[ChannelInfoDialog] Block member', participant?.user?.id);
+    }
+    setIsUpdatingBlockStatus(true);
+
+    try {
+      await service.blockUser(participant?.user?.id);
+
+      if (onBlockParticipant) {
+        await onBlockParticipant(participant?.user?.id);
+      }
+
+      onClose();
+    } catch (error) {
+      console.error('[ChannelInfoDialog] Failed to block member', error);
+    } finally {
+      setIsUpdatingBlockStatus(false);
+    }
+  };
+
+  const handleUnblockUser = async () => {
+    if (isUpdatingBlockStatus || !service) return;
+
+    if (debug) {
+      console.log('[ChannelInfoDialog] Unblock member', participant?.user?.id);
+    }
+    setIsUpdatingBlockStatus(true);
+
+    try {
+      await service.unBlockUser(participant?.user?.id);
+
+      if (onBlockParticipant) {
+        await onBlockParticipant(participant?.user?.id);
+      }
+
+      onClose();
+    } catch (error) {
+      console.error('[ChannelInfoDialog] Failed to unblock member', error);
+    } finally {
+      setIsUpdatingBlockStatus(false);
+    }
+  };
+
+  const handleReportUser = () => {
+    onClose();
+    window.open(
+      'https://linktr.ee/s/about/trust-center/report',
+      '_blank',
+      'noopener,noreferrer',
+    );
+  };
+
+  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 participantSecondary = participantEmail
+    ? participantEmail
+    : participantUsername
+      ? `linktr.ee/${participantUsername}`
+      : undefined;
+  const participantId = participant.user?.id || 'unknown';
+
+  return (
+    <dialog
+      ref={dialogRef}
+      className="mes-dialog"
+      onClose={onClose}
+      onClick={(e) => {
+        if (e.target === dialogRef.current) {
+          onClose();
+        }
+      }}
+    >
+      <div className="ml-auto flex h-full w-full flex-col bg-white shadow-max-elevation-light">
+        <div className="flex items-center justify-between border-b border-sand px-4 py-3">
+          <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">
+              <Avatar
+                id={participantId}
+                name={participantName}
+                image={participantImage}
+                size={64}
+              />
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-base font-semibold text-charcoal">
+                  {participantName}
+                </p>
+                {participantSecondary && (
+                  <p className="truncate text-sm text-stone">
+                    {participantSecondary}
+                  </p>
+                )}
+                {followerStatusLabel && (
+                  <span className="mt-2 inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700">
+                    {followerStatusLabel}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <ul className="flex flex-col gap-2 mt-2">
+            <li>
+              <ActionButton
+                onClick={handleLeaveConversation}
+                disabled={isLeaving}
+                aria-busy={isLeaving}
+              >
+                {isLeaving ? (
+                  <SpinnerGapIcon className="h-5 w-5 animate-spin" />
+                ) : (
+                  <SignOutIcon className="h-5 w-5" />
+                )}
+                <span>Leave Conversation</span>
+              </ActionButton>
+            </li>
+            <li>
+              {isParticipantBlocked ? (
+                <ActionButton
+                  onClick={handleUnblockUser}
+                  disabled={isUpdatingBlockStatus}
+                  aria-busy={isUpdatingBlockStatus}
+                >
+                  {isUpdatingBlockStatus ? (
+                    <SpinnerGapIcon className="h-5 w-5 animate-spin" />
+                  ) : (
+                    <ProhibitInsetIcon className="h-5 w-5" />
+                  )}
+                  <span>Unblock</span>
+                </ActionButton>
+              ) : (
+                <ActionButton
+                  onClick={handleBlockUser}
+                  disabled={isUpdatingBlockStatus}
+                  aria-busy={isUpdatingBlockStatus}
+                >
+                  {isUpdatingBlockStatus ? (
+                    <SpinnerGapIcon className="h-5 w-5 animate-spin" />
+                  ) : (
+                    <ProhibitInsetIcon className="h-5 w-5" />
+                  )}
+                  <span>Block</span>
+                </ActionButton>
+              )}
+            </li>
+            <li>
+              <ActionButton variant="danger" onClick={handleReportUser}>
+                <FlagIcon className="h-5 w-5" />
+                <span>Report</span>
+              </ActionButton>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </dialog>
+  );
+};
+
+/**
+ * Channel view component with message list and input
+ */
+export const ChannelView: React.FC<ChannelViewProps> = ({
+  channel,
+  onBack,
+  showBackButton = false,
+  renderMessageInputActions,
+  onLeaveConversation,
+  onBlockParticipant,
+  className,
+}) => {
+  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]);
+
+  // Get follower status label from channel data
+  const followerStatusLabel = React.useMemo(() => {
+    const channelExtraData = (channel.data ?? {}) as {
+      followerStatus?: string;
+      isFollower?: boolean;
+    };
+    return channelExtraData.followerStatus
+      ? String(channelExtraData.followerStatus)
+      : channelExtraData.isFollower
+        ? 'Subscribed to you'
+        : undefined;
+  }, [channel.data]);
+
+  return (
+    <div className={classNames('h-full flex flex-col', className)}>
+      <Channel channel={channel}>
+        <Window>
+          {/* Custom Channel Header */}
+          <div className="border-b border-sand bg-white px-4 py-3">
+            <CustomChannelHeader
+              onBack={onBack}
+              showBackButton={showBackButton}
+              onShowInfo={() => setShowInfo(true)}
+              canShowInfo={Boolean(participant)}
+            />
+          </div>
+
+          {/* Message List */}
+          <div className="flex-1 overflow-hidden">
+            <MessageList hideDeletedMessages hideNewMessageSeparator={false} />
+          </div>
+
+          {/* Message Input */}
+          <CustomMessageInput
+            renderActions={() => renderMessageInputActions?.(channel)}
+          />
+        </Window>
+      </Channel>
+
+      {/* Channel Info Dialog */}
+      <ChannelInfoDialog
+        isOpen={showInfo}
+        onClose={() => setShowInfo(false)}
+        participant={participant}
+        channel={channel}
+        followerStatusLabel={followerStatusLabel}
+        onLeaveConversation={onLeaveConversation}
+        onBlockParticipant={onBlockParticipant}
+      />
+    </div>
+  );
+};

package/src/components/CloseButton/index.tsx

@@ -0,0 +1,16 @@
+import { XIcon } from "@phosphor-icons/react/dist/csr/X";
+import React from "react";
+
+import { IconButton } from "../IconButton";
+
+interface CloseButtonProps {
+  onClick: () => void;
+}
+
+export function CloseButton({ onClick }: CloseButtonProps) {
+  return (
+    <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

@@ -0,0 +1,40 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import { IconButton } from '.'
+import { XIcon } from '@phosphor-icons/react/dist/csr/X'
+import React from 'react'
+
+type ComponentProps = React.ComponentProps<typeof IconButton>
+
+const meta: Meta<ComponentProps> = {
+  title: 'IconButton',
+  component: IconButton,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    onClick: { action: 'clicked' },
+  },
+}
+export default meta
+
+const Template: StoryFn<ComponentProps> = (args) => {
+  return (
+    <div className="p-12">
+      <IconButton {...args} />
+    </div>
+  )
+}
+
+export const Default: StoryFn<ComponentProps> = Template.bind({})
+Default.args = {
+  label: 'Close',
+  children: <XIcon className="h-5 w-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',
+}
+

package/src/components/IconButton/index.tsx

@@ -0,0 +1,32 @@
+import classNames from "classnames";
+import React from "react";
+
+interface IconButtonProps
+  extends Omit<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    "type" | "children"
+  > {
+  label: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function IconButton({ label, className, children, ...rest }: IconButtonProps) {
+  return (
+    <button
+      type="button"
+      className={classNames(
+        "rounded-full p-2 transition-colors focus-ring",
+        {
+          "cursor-not-allowed opacity-50": rest.disabled,
+          "hover:bg-sand": !rest.disabled,
+        },
+        className,
+      )}
+      {...rest}
+    >
+      <span className="sr-only">{label}</span>
+      {children}
+    </button>
+  );
+}

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import Loading from '.'
+import React from 'react'
+
+type ComponentProps = React.ComponentProps<typeof Loading>
+
+const meta: Meta<ComponentProps> = {
+  title: 'Loading',
+  component: Loading,
+  parameters: {
+    layout: 'centered',
+  },
+}
+export default meta
+
+const Template: StoryFn<ComponentProps> = (args) => {
+  return (
+      <Loading {...args} className='w-10 h-10' />
+  )
+}
+
+export const Default: StoryFn<ComponentProps> = Template.bind({})
+Default.args = {}
+

package/src/components/Loading/index.tsx

@@ -0,0 +1,50 @@
+import classNames from "classnames";
+import React from "react";
+
+type LoadingProps = {
+  className?: string;
+  message?: string;
+};
+
+const Loading = ({ className, message }: LoadingProps) => (
+  <div
+    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">
+        <animateTransform
+          attributeName="transform"
+          dur="1s"
+          type="translate"
+          values="0 15 ; 0 -15; 0 15"
+          repeatCount="indefinite"
+          begin="0.1"
+        />
+      </circle>
+      <circle cx="30" cy="50" r="6">
+        <animateTransform
+          attributeName="transform"
+          dur="1s"
+          type="translate"
+          values="0 10 ; 0 -10; 0 10"
+          repeatCount="indefinite"
+          begin="0.2"
+        />
+      </circle>
+      <circle cx="54" cy="50" r="6">
+        <animateTransform
+          attributeName="transform"
+          dur="1s"
+          type="translate"
+          values="0 5 ; 0 -5; 0 5"
+          repeatCount="indefinite"
+          begin="0.3"
+        />
+      </circle>
+    </svg>
+    {message && <span className="text-stone">{message}</span>}
+  </div>
+);
+
+export default Loading;
+

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

@@ -0,0 +1,38 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import { EmptyState } from './EmptyState'
+import React from 'react'
+
+
+type ComponentProps = React.ComponentProps<typeof EmptyState>
+
+const meta: Meta<ComponentProps> = {
+  title: 'States/EmptyState',
+  component: EmptyState,
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+export default meta
+
+const Template: StoryFn<ComponentProps> = (args) => {
+  return (
+    <div className="h-screen w-full bg-white">
+      <EmptyState {...args} />
+    </div>
+  )
+}
+
+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

@@ -0,0 +1,55 @@
+import React from 'react';
+
+/**
+ * Empty state component shown when no channel is selected
+ */
+export const EmptyState: React.FC<{
+  hasChannels: boolean;
+  onStartConversation?: () => void;
+  participantLabel: string;
+}> = ({ hasChannels, onStartConversation, participantLabel }) => (
+  <div className="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 bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-6">
+        <span className="text-4xl">💬</span>
+      </div>
+
+      <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.
+              </>
+          )
+        )}
+      </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>
+)