@connectycube/react-ui-kit 0.0.18 → 0.0.20

package/src/components/avatar.tsx

@@ -7,7 +7,8 @@ import { cn } from './utils';
 interface AvatarProps extends AvatarPrimitive.AvatarProps {
   src?: string | undefined;
   name?: string | undefined;
-  online?: boolean;
+  fallbackIconElement?: React.ReactNode | undefined;
+  online?: boolean | undefined;
   presence?: PresenceStatus;
   onlineProps?: React.ComponentProps<'div'>;
   presenceProps?: PresenceBadgeProps;
@@ -26,6 +27,7 @@ function AvatarBase(
   {
     src,
     name = 'NA',
+    fallbackIconElement,
     online,
     presence,
     className,
@@ -50,7 +52,7 @@ function AvatarBase(
         {...fallbackProps}
         className={cn('bg-muted size-full rounded-full flex items-center justify-center', fallbackProps?.className)}
       >
-        {initials}
+        {fallbackIconElement || initials}
       </AvatarPrimitive.Fallback>
       {online && (
         <div

package/src/components/call-message.tsx

@@ -0,0 +1,75 @@
+import type React from 'react';
+import { forwardRef, memo } from 'react';
+import { Phone, PhoneIncoming, PhoneMissed, PhoneOutgoing, type LucideProps } from 'lucide-react';
+import { FormattedDate, type FormattedDateProps } from './formatted-date';
+import { cn } from './utils';
+
+interface CallMessageProps extends React.ComponentProps<'div'> {
+  signal?: 'reject' | 'notAnswer' | 'hungUp' | 'cancel' | undefined;
+  info?: string | undefined;
+  duration?: number | undefined;
+  fromMe: boolean;
+  isLast: boolean;
+  iconElement?: React.ReactNode;
+  iconProps?: LucideProps;
+  infoProps?: React.ComponentProps<'span'>;
+  formattedDateProps?: FormattedDateProps;
+}
+
+function formatDuration(seconds: number): string {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = seconds % 60;
+  const pad = (num: number) => String(num).padStart(2, '0');
+
+  return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;
+}
+
+function CallMessageBase(
+  {
+    signal,
+    info,
+    duration = 0,
+    fromMe = false,
+    isLast = false,
+    iconElement,
+    iconProps,
+    infoProps,
+    formattedDateProps,
+    ...props
+  }: CallMessageProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const CallIcon =
+    signal === 'hungUp' ? Phone : fromMe ? (signal === 'reject' ? PhoneIncoming : PhoneOutgoing) : PhoneMissed;
+
+  return (
+    <div
+      ref={ref}
+      {...props}
+      className={cn(
+        'flex items-center justify-center gap-2 rounded-full w-fit bg-ring/20 mx-auto px-3 py-1.5',
+        isLast ? 'my-2' : 'mt-2',
+        props?.className
+      )}
+    >
+      {iconElement || (
+        <CallIcon
+          {...iconProps}
+          className={cn('size-4', signal === 'hungUp' ? 'text-green-500' : 'text-red-500', iconProps?.className)}
+        />
+      )}
+      <span
+        {...infoProps}
+        className={cn('text-sm mb-px', infoProps?.className)}
+      >{`${info}${duration ? ` - ${formatDuration(duration)}` : ''}`}</span>
+      <FormattedDate distanceToNow {...formattedDateProps} />
+    </div>
+  );
+}
+
+const CallMessage = memo(forwardRef<HTMLDivElement, CallMessageProps>(CallMessageBase));
+
+CallMessage.displayName = 'CallMessage';
+
+export { CallMessage, type CallMessageProps };

package/src/components/chat-message.tsx

@@ -0,0 +1,138 @@
+import type React from 'react';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { Attachment, type AttachmentProps } from './attachment';
+import { Avatar, type AvatarProps } from './avatar';
+import { FormattedDate, type FormattedDateProps } from './formatted-date';
+import { LinkifyText, type LinkifyTextProps } from './linkify-text';
+import { LinkPreview, type LinkPreviewProps } from './link-preview';
+import { StatusSent, type StatusSentProps } from './status-sent';
+import { cn } from './utils';
+
+interface ChatMessageProps extends React.ComponentProps<'div'> {
+  isLast: boolean;
+  fromMe: boolean;
+  sameSenderAbove: boolean;
+  title?: string;
+  senderName?: string;
+  senderAvatar?: string;
+  attachmentElement?: React.ReactNode;
+  linkifyTextElement?: React.ReactNode;
+  linkPreviewElement?: React.ReactNode;
+  onView?: () => void;
+  avatarProps?: AvatarProps;
+  bubbleProps?: React.ComponentProps<'div'>;
+  titleProps?: React.ComponentProps<'span'>;
+  formattedDateProps?: FormattedDateProps;
+  statusSentProps?: StatusSentProps;
+  attachmentProps?: AttachmentProps;
+  linkifyTextProps?: LinkifyTextProps;
+  linkPreviewProps?: LinkPreviewProps;
+}
+
+function ChatMessageBase(
+  {
+    isLast,
+    fromMe,
+    sameSenderAbove,
+    title,
+    senderName,
+    senderAvatar,
+    attachmentElement,
+    linkifyTextElement,
+    linkPreviewElement,
+    onView = () => {},
+    avatarProps,
+    bubbleProps,
+    titleProps,
+    formattedDateProps,
+    statusSentProps,
+    attachmentProps,
+    linkifyTextProps,
+    linkPreviewProps,
+    children,
+    ...props
+  }: ChatMessageProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const [setRef, inView] = useInView();
+  const messageRef = useRef<HTMLDivElement>(null);
+  const setRefs = useCallback(
+    (node: HTMLDivElement) => {
+      messageRef.current = node;
+      setRef(node);
+    },
+    [setRef]
+  );
+  const hasAvatar = Boolean((avatarProps || senderAvatar) && !sameSenderAbove);
+  const hasAvatarMargin = Boolean((avatarProps || senderAvatar) && sameSenderAbove);
+  const hasThinMarginTop = hasAvatarMargin || Boolean(fromMe && sameSenderAbove);
+
+  useEffect(() => {
+    if (inView) {
+      onView();
+    }
+  }, [inView, onView]);
+
+  useImperativeHandle(ref, () => messageRef.current!, []);
+
+  return (
+    <div
+      ref={setRefs}
+      {...props}
+      className={cn(
+        `flex relative text-left whitespace-pre-wrap`,
+        fromMe ? 'self-end flex-row-reverse ml-12' : `self-start mr-12`,
+        isLast && 'mb-2',
+        hasThinMarginTop ? 'mt-1' : 'mt-2',
+        inView && 'view',
+        props?.className
+      )}
+    >
+      {hasAvatar && (
+        <Avatar
+          name={senderName}
+          src={senderAvatar}
+          imageProps={{ className: 'bg-ring/30' }}
+          fallbackProps={{ className: 'bg-ring/30' }}
+          {...avatarProps}
+          className={cn('mt-1 mr-1', avatarProps?.className)}
+        />
+      )}
+
+      <div
+        className={cn(
+          'relative flex flex-col min-w-42 max-w-120 rounded-xl px-2 pt-2 pb-6',
+          fromMe ? 'bg-blue-200' : 'bg-gray-200',
+          hasAvatarMargin && 'ml-9',
+          bubbleProps?.className
+        )}
+      >
+        {(title || senderName) && (
+          <span
+            {...titleProps}
+            className={cn(
+              'font-semibold',
+              title && 'mb-1 py-1.5 text-xs text-muted-foreground italic border-b',
+              titleProps?.className
+            )}
+          >
+            {title || senderName}
+          </span>
+        )}
+        {children}
+        {attachmentElement || (attachmentProps ? <Attachment {...attachmentProps} /> : null)}
+        {linkifyTextElement || (linkifyTextProps ? <LinkifyText {...linkifyTextProps} /> : null)}
+        {linkPreviewElement || (linkPreviewProps ? <LinkPreview {...linkPreviewProps} /> : null)}
+        <div className="absolute bottom-1 right-2 flex items-center gap-1 italic">
+          <FormattedDate distanceToNow {...formattedDateProps} />
+          <StatusSent {...statusSentProps} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const ChatMessage = memo(forwardRef<HTMLDivElement, ChatMessageProps>(ChatMessageBase));
+
+export { ChatMessage, type ChatMessageProps };

package/src/components/connectycube-ui/attachment.tsx

@@ -0,0 +1,269 @@
+import type React from 'react';
+import { forwardRef, memo, useImperativeHandle, useRef, useState } from 'react';
+import { File, FileXCorner, type LucideProps } from 'lucide-react';
+import { Spinner } from './spinner';
+import { cn, getRandomString } from './utils';
+
+interface AttachmentProps {
+  uid?: string;
+  url?: string;
+  mimeType?: string;
+  pending?: boolean;
+  onReady?: (skipOnce?: boolean) => void;
+  linkProps?: AttachmentLinkProps;
+  containerProps?: React.ComponentProps<'div'>;
+}
+
+interface AttachmentLinkProps
+  extends React.ComponentProps<'a'>, Omit<AttachmentProps, 'containerProps' & 'mimeType' & 'onReady'> {
+  children?: React.ReactNode;
+}
+
+interface AttachmentImageProps
+  extends React.ComponentProps<'img'>, Omit<AttachmentProps, 'containerProps' & 'mimeType'> {}
+
+interface AttachmentAudioProps
+  extends React.ComponentProps<'audio'>, Omit<AttachmentProps, 'linkProps' & 'mimeType' & 'onReady'> {}
+
+interface AttachmentVideoProps extends React.ComponentProps<'video'>, Omit<AttachmentProps, 'linkProps' & 'mimeType'> {
+  maxSize?: number;
+}
+
+interface AttachmentFileProps extends LucideProps, Omit<AttachmentProps, 'containerProps' & 'mimeType'> {
+  name?: string | undefined;
+  iconElement?: React.ReactNode;
+}
+
+interface AttachmentFailedProps extends LucideProps, Omit<AttachmentProps, 'linkProps' & 'mimeType'> {
+  name?: string | undefined;
+  iconElement?: React.ReactNode;
+}
+
+function AttachmentLinkBase(
+  { url, pending = false, children, ...props }: AttachmentLinkProps,
+  ref: React.ForwardedRef<HTMLAnchorElement>
+) {
+  return (
+    <a
+      ref={ref}
+      target="_blank"
+      rel="noopener noreferrer"
+      {...props}
+      href={url}
+      className={cn(
+        'group relative min-h-8 min-w-8 w-full flex items-center justify-center rounded-md overflow-hidden bg-ring/10 hover:bg-ring/20 transition-color duration-300 ease-out cursor-pointer',
+        props?.className
+      )}
+    >
+      {children}
+      <Spinner loading={pending} layout="overlay" />
+    </a>
+  );
+}
+
+const AttachmentLink = forwardRef<HTMLAnchorElement, AttachmentLinkProps>(AttachmentLinkBase);
+
+AttachmentLink.displayName = 'AttachmentLink';
+
+function AttachmentAudioBase(
+  { uid, url, pending = false, containerProps, ...props }: AttachmentAudioProps,
+  ref: React.ForwardedRef<HTMLAudioElement>
+) {
+  const audioId = `attachment_audio_${uid || getRandomString()}`;
+
+  return (
+    <div
+      {...containerProps}
+      className={cn('relative min-h-8 min-w-8 w-full rounded-md overflow-hidden', containerProps?.className)}
+    >
+      <audio ref={ref} src={url} id={audioId} controls {...props} />
+      <Spinner loading={pending} layout="overlay" />
+    </div>
+  );
+}
+
+const AttachmentAudio = forwardRef<HTMLAudioElement, AttachmentAudioProps>(AttachmentAudioBase);
+
+function AttachmentVideoBase(
+  { uid, url, maxSize = 360, pending = false, onReady = () => {}, containerProps, ...props }: AttachmentVideoProps,
+  ref: React.ForwardedRef<HTMLVideoElement>
+) {
+  const videoId = `attachment_video_${uid || getRandomString()}`;
+  const videoMaxSize = `${maxSize}px`;
+  const playerRef = useRef<HTMLVideoElement>(null);
+  const [style, setStyle] = useState<React.CSSProperties>({
+    maxHeight: videoMaxSize,
+    maxWidth: videoMaxSize,
+  });
+  const handleCanPlay = (event: React.SyntheticEvent<HTMLVideoElement, Event>) => {
+    const player = playerRef.current;
+
+    if (player) {
+      const { videoWidth, videoHeight } = player;
+      const ratio = videoWidth / videoHeight || 1;
+      const height = ratio < 1 ? videoMaxSize : `${Math.round(maxSize / ratio)}px`;
+      const width = ratio < 1 ? `${Math.round(maxSize * ratio)}px` : videoMaxSize;
+
+      setStyle({ height, width, maxHeight: height, maxWidth: width });
+      props.onCanPlay?.(event);
+      onReady();
+    }
+  };
+
+  useImperativeHandle(ref, () => playerRef.current!, []);
+
+  return (
+    <div
+      {...containerProps}
+      className={cn('relative min-h-20 w-full rounded-md overflow-hidden', containerProps?.className)}
+    >
+      <video
+        id={videoId}
+        ref={playerRef}
+        src={url}
+        controls
+        preload="metadata"
+        style={style}
+        {...props}
+        onCanPlay={handleCanPlay}
+        className={cn('size-full', props?.className)}
+      />
+      <Spinner loading={pending} layout="overlay" />
+    </div>
+  );
+}
+
+const AttachmentVideo = forwardRef<HTMLVideoElement, AttachmentVideoProps>(AttachmentVideoBase);
+
+AttachmentVideo.displayName = 'AttachmentVideo';
+
+function AttachmentImageBase(
+  { uid, url, pending = false, onReady = () => {}, linkProps, ...props }: AttachmentImageProps,
+  ref: React.ForwardedRef<HTMLImageElement>
+) {
+  const imageId = `attachment_image_${uid || getRandomString()}`;
+  const handleLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    props.onLoad?.(event);
+    onReady();
+  };
+
+  return (
+    <AttachmentLink href={url} pending={pending} {...linkProps}>
+      <img
+        ref={ref}
+        src={url}
+        id={imageId}
+        alt="attachment"
+        {...props}
+        className={cn(
+          'rounded-md object-cover min-h-8 min-w-8 max-h-[360px] group-hover:scale-102 transition-transform duration-300 ease-out',
+          props?.className
+        )}
+        onLoad={handleLoad}
+      />
+    </AttachmentLink>
+  );
+}
+
+const AttachmentImage = forwardRef<HTMLImageElement, AttachmentImageProps>(AttachmentImageBase);
+
+AttachmentImage.displayName = 'AttachmentImage';
+
+function AttachmentFile({ url, name, pending = false, iconElement, linkProps, ...props }: AttachmentFileProps) {
+  const fileId = `attachment_file_${props.id || getRandomString()}`;
+
+  return (
+    <AttachmentLink
+      href={url}
+      pending={pending}
+      {...linkProps}
+      className={cn('flex-row gap-1.5 p-2 hover:shadow', linkProps?.className)}
+    >
+      {iconElement || (
+        <File
+          id={fileId}
+          {...props}
+          className={cn(
+            'size-5 shrink-0 text-foreground/80 group-hover:text-foreground duration-300 ease-out',
+            props?.className
+          )}
+        />
+      )}
+      {name && (
+        <span className="font-medium line-clamp-1 break-all text-foreground/80 group-hover:text-foreground duration-300 ease-out">
+          {name}
+        </span>
+      )}
+    </AttachmentLink>
+  );
+}
+
+AttachmentFile.displayName = 'AttachmentFile';
+
+function AttachmentFailed({
+  name = 'Unknown file',
+  pending = false,
+  iconElement,
+  containerProps,
+  ...props
+}: AttachmentFailedProps) {
+  const failedId = `attachment_failed_${props.id || getRandomString()}`;
+
+  return (
+    <div
+      {...containerProps}
+      className={cn(
+        'relative min-h-8 min-w-8 w-full flex flex-row items-center justify-center gap-2 px-2 bg-red-600/10 rounded-md overflow-hidden',
+        containerProps?.className
+      )}
+    >
+      {iconElement || (
+        <FileXCorner id={failedId} {...props} className={cn('size-6 shrink-0 text-red-600', props?.className)} />
+      )}
+      <span className="font-medium line-clamp-1 break-all text-red-600">{name}</span>
+      <Spinner loading={pending} layout="overlay" />
+    </div>
+  );
+}
+
+AttachmentFailed.displayName = 'AttachmentFailed';
+
+function AttachmentBase({ mimeType, ...props }: AttachmentProps) {
+  const [type = ''] = mimeType?.split('/') || [];
+
+  if (!props.url) {
+    return <AttachmentFailed {...props} />;
+  }
+
+  switch (type) {
+    case 'image':
+      return <AttachmentImage {...props} />;
+    case 'video':
+      return <AttachmentVideo {...props} />;
+    case 'audio':
+      return <AttachmentAudio {...props} />;
+    default:
+      return <AttachmentFile name={mimeType} {...props} />;
+  }
+}
+
+const Attachment = memo(AttachmentBase);
+
+Attachment.displayName = 'Attachment';
+
+export {
+  Attachment,
+  AttachmentLink,
+  AttachmentImage,
+  AttachmentAudio,
+  AttachmentVideo,
+  AttachmentFile,
+  AttachmentFailed,
+  type AttachmentLinkProps,
+  type AttachmentImageProps,
+  type AttachmentAudioProps,
+  type AttachmentVideoProps,
+  type AttachmentFileProps,
+  type AttachmentFailedProps,
+  type AttachmentProps,
+};

package/src/components/connectycube-ui/chat-message.tsx

@@ -0,0 +1,138 @@
+import type React from 'react';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { Attachment, type AttachmentProps } from './attachment';
+import { Avatar, type AvatarProps } from './avatar';
+import { FormattedDate, type FormattedDateProps } from './formatted-date';
+import { LinkifyText, type LinkifyTextProps } from './linkify-text';
+import { LinkPreview, type LinkPreviewProps } from './link-preview';
+import { StatusSent, type StatusSentProps } from './status-sent';
+import { cn } from './utils';
+
+interface ChatMessageProps extends React.ComponentProps<'div'> {
+  isLast: boolean;
+  fromMe: boolean;
+  sameSenderAbove: boolean;
+  title?: string;
+  senderName?: string;
+  senderAvatar?: string;
+  attachmentElement?: React.ReactNode;
+  linkifyTextElement?: React.ReactNode;
+  linkPreviewElement?: React.ReactNode;
+  onView?: () => void;
+  avatarProps?: AvatarProps;
+  bubbleProps?: React.ComponentProps<'div'>;
+  titleProps?: React.ComponentProps<'span'>;
+  formattedDateProps?: FormattedDateProps;
+  statusSentProps?: StatusSentProps;
+  attachmentProps?: AttachmentProps;
+  linkifyTextProps?: LinkifyTextProps;
+  linkPreviewProps?: LinkPreviewProps;
+}
+
+function ChatMessageBase(
+  {
+    isLast,
+    fromMe,
+    sameSenderAbove,
+    title,
+    senderName,
+    senderAvatar,
+    attachmentElement,
+    linkifyTextElement,
+    linkPreviewElement,
+    onView = () => {},
+    avatarProps,
+    bubbleProps,
+    titleProps,
+    formattedDateProps,
+    statusSentProps,
+    attachmentProps,
+    linkifyTextProps,
+    linkPreviewProps,
+    children,
+    ...props
+  }: ChatMessageProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const [setRef, inView] = useInView();
+  const messageRef = useRef<HTMLDivElement>(null);
+  const setRefs = useCallback(
+    (node: HTMLDivElement) => {
+      messageRef.current = node;
+      setRef(node);
+    },
+    [setRef]
+  );
+  const hasAvatar = Boolean((avatarProps || senderAvatar) && !sameSenderAbove);
+  const hasAvatarMargin = Boolean((avatarProps || senderAvatar) && sameSenderAbove);
+  const hasThinMarginTop = hasAvatarMargin || Boolean(fromMe && sameSenderAbove);
+
+  useEffect(() => {
+    if (inView) {
+      onView();
+    }
+  }, [inView, onView]);
+
+  useImperativeHandle(ref, () => messageRef.current!, []);
+
+  return (
+    <div
+      ref={setRefs}
+      {...props}
+      className={cn(
+        `flex relative text-left whitespace-pre-wrap`,
+        fromMe ? 'self-end flex-row-reverse ml-12' : `self-start mr-12`,
+        isLast && 'mb-2',
+        hasThinMarginTop ? 'mt-1' : 'mt-2',
+        inView && 'view',
+        props?.className
+      )}
+    >
+      {hasAvatar && (
+        <Avatar
+          name={senderName}
+          src={senderAvatar}
+          imageProps={{ className: 'bg-ring/30' }}
+          fallbackProps={{ className: 'bg-ring/30' }}
+          {...avatarProps}
+          className={cn('mt-1 mr-1', avatarProps?.className)}
+        />
+      )}
+
+      <div
+        className={cn(
+          'relative flex flex-col min-w-42 max-w-120 rounded-xl px-2 pt-2 pb-6',
+          fromMe ? 'bg-blue-200' : 'bg-gray-200',
+          hasAvatarMargin && 'ml-9',
+          bubbleProps?.className
+        )}
+      >
+        {(title || senderName) && (
+          <span
+            {...titleProps}
+            className={cn(
+              'font-semibold',
+              title && 'mb-1 py-1.5 text-xs text-muted-foreground italic border-b',
+              titleProps?.className
+            )}
+          >
+            {title || senderName}
+          </span>
+        )}
+        {children}
+        {attachmentElement || (attachmentProps ? <Attachment {...attachmentProps} /> : null)}
+        {linkifyTextElement || (linkifyTextProps ? <LinkifyText {...linkifyTextProps} /> : null)}
+        {linkPreviewElement || (linkPreviewProps ? <LinkPreview {...linkPreviewProps} /> : null)}
+        <div className="absolute bottom-1 right-2 flex items-center gap-1 italic">
+          <FormattedDate distanceToNow {...formattedDateProps} />
+          <StatusSent {...statusSentProps} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const ChatMessage = memo(forwardRef<HTMLDivElement, ChatMessageProps>(ChatMessageBase));
+
+export { ChatMessage, type ChatMessageProps };