@connectycube/react-ui-kit 0.0.19 → 0.0.20

package/gen/index.js

@@ -14,6 +14,10 @@ export { Badge } from './components/badge';
 
 export { Button } from './components/button';
 
+export { CallMessage } from './components/call-message';
+
+export { ChatMessage } from './components/chat-message';
+
 export { DialogItem } from './components/dialog-item';
 
 export { DismissLayer } from './components/dismiss-layer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectycube/react-ui-kit",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Simple React UI Kit generator with TSX/JSX",
   "homepage": "https://github.com/ConnectyCube/react-ui-kit#readme",
   "bugs": {
@@ -71,11 +71,9 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "execa": "^9.6.0",
-    "fs-extra": "^11.3.2",
     "linkify-react": "^4.3.2",
-    "lucide-react": "^0.555.0",
-    "prompts": "^2.4.2",
+    "lucide-react": "^0.561.0",
+    "react-intersection-observer": "^10.0.0",
     "tailwind-merge": "^3.4.0"
   },
   "peerDependencies": {
@@ -85,25 +83,28 @@
   "devDependencies": {
     "@babel/core": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@eslint/js": "^9.39.1",
+    "@eslint/js": "^9.39.2",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.3.0",
     "@stylistic/eslint-plugin": "^5.6.1",
-    "@types/node": "^24.10.1",
+    "@types/node": "^25.0.1",
     "@types/react": "^19.2.7",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
+    "execa": "^9.6.1",
     "fast-glob": "^3.3.3",
+    "fs-extra": "^11.3.2",
     "globals": "^16.5.0",
-    "prettier": "^3.6.2",
+    "prettier": "^3.7.4",
+    "prompts": "^2.4.2",
     "rollup": "^4.53.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.48.0"
+    "typescript-eslint": "^8.49.0"
   },
   "engines": {
     "node": ">=18"

package/src/components/attachment.tsx

@@ -8,25 +8,22 @@ interface AttachmentProps {
   uid?: string;
   url?: string;
   mimeType?: string;
-  uploading?: boolean;
+  pending?: boolean;
   onReady?: (skipOnce?: boolean) => void;
   linkProps?: AttachmentLinkProps;
   containerProps?: React.ComponentProps<'div'>;
 }
 
 interface AttachmentLinkProps
-  extends React.ComponentProps<'a'>,
-    Omit<AttachmentProps, 'containerProps' & 'mimeType' & 'onReady'> {
+  extends React.ComponentProps<'a'>, Omit<AttachmentProps, 'containerProps' & 'mimeType' & 'onReady'> {
   children?: React.ReactNode;
 }
 
 interface AttachmentImageProps
-  extends React.ComponentProps<'img'>,
-    Omit<AttachmentProps, 'containerProps' & 'mimeType'> {}
+  extends React.ComponentProps<'img'>, Omit<AttachmentProps, 'containerProps' & 'mimeType'> {}
 
 interface AttachmentAudioProps
-  extends React.ComponentProps<'audio'>,
-    Omit<AttachmentProps, 'linkProps' & 'mimeType' & 'onReady'> {}
+  extends React.ComponentProps<'audio'>, Omit<AttachmentProps, 'linkProps' & 'mimeType' & 'onReady'> {}
 
 interface AttachmentVideoProps extends React.ComponentProps<'video'>, Omit<AttachmentProps, 'linkProps' & 'mimeType'> {
   maxSize?: number;
@@ -43,7 +40,7 @@ interface AttachmentFailedProps extends LucideProps, Omit<AttachmentProps, 'link
 }
 
 function AttachmentLinkBase(
-  { url, uploading = false, children, ...props }: AttachmentLinkProps,
+  { url, pending = false, children, ...props }: AttachmentLinkProps,
   ref: React.ForwardedRef<HTMLAnchorElement>
 ) {
   return (
@@ -54,12 +51,12 @@ function AttachmentLinkBase(
       {...props}
       href={url}
       className={cn(
-        'group relative min-h-12 min-w-12 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',
+        '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={uploading} layout="overlay" />
+      <Spinner loading={pending} layout="overlay" />
     </a>
   );
 }
@@ -69,7 +66,7 @@ const AttachmentLink = forwardRef<HTMLAnchorElement, AttachmentLinkProps>(Attach
 AttachmentLink.displayName = 'AttachmentLink';
 
 function AttachmentAudioBase(
-  { uid, url, uploading = false, containerProps, ...props }: AttachmentAudioProps,
+  { uid, url, pending = false, containerProps, ...props }: AttachmentAudioProps,
   ref: React.ForwardedRef<HTMLAudioElement>
 ) {
   const audioId = `attachment_audio_${uid || getRandomString()}`;
@@ -77,10 +74,10 @@ function AttachmentAudioBase(
   return (
     <div
       {...containerProps}
-      className={cn('relative min-h-12 min-w-12 w-full rounded-md overflow-hidden', containerProps?.className)}
+      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={uploading} layout="overlay" />
+      <Spinner loading={pending} layout="overlay" />
     </div>
   );
 }
@@ -88,7 +85,7 @@ function AttachmentAudioBase(
 const AttachmentAudio = forwardRef<HTMLAudioElement, AttachmentAudioProps>(AttachmentAudioBase);
 
 function AttachmentVideoBase(
-  { uid, url, maxSize = 360, uploading = false, onReady = () => {}, containerProps, ...props }: AttachmentVideoProps,
+  { uid, url, maxSize = 360, pending = false, onReady = () => {}, containerProps, ...props }: AttachmentVideoProps,
   ref: React.ForwardedRef<HTMLVideoElement>
 ) {
   const videoId = `attachment_video_${uid || getRandomString()}`;
@@ -131,7 +128,7 @@ function AttachmentVideoBase(
         onCanPlay={handleCanPlay}
         className={cn('size-full', props?.className)}
       />
-      <Spinner loading={uploading} layout="overlay" />
+      <Spinner loading={pending} layout="overlay" />
     </div>
   );
 }
@@ -141,7 +138,7 @@ const AttachmentVideo = forwardRef<HTMLVideoElement, AttachmentVideoProps>(Attac
 AttachmentVideo.displayName = 'AttachmentVideo';
 
 function AttachmentImageBase(
-  { uid, url, uploading = false, onReady = () => {}, linkProps, ...props }: AttachmentImageProps,
+  { uid, url, pending = false, onReady = () => {}, linkProps, ...props }: AttachmentImageProps,
   ref: React.ForwardedRef<HTMLImageElement>
 ) {
   const imageId = `attachment_image_${uid || getRandomString()}`;
@@ -151,7 +148,7 @@ function AttachmentImageBase(
   };
 
   return (
-    <AttachmentLink href={url} uploading={uploading} {...linkProps}>
+    <AttachmentLink href={url} pending={pending} {...linkProps}>
       <img
         ref={ref}
         src={url}
@@ -159,7 +156,7 @@ function AttachmentImageBase(
         alt="attachment"
         {...props}
         className={cn(
-          'rounded-md object-cover min-h-12 min-w-12 max-h-[360px] group-hover:scale-103 transition-transform duration-300 ease-out',
+          '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}
@@ -172,28 +169,28 @@ const AttachmentImage = forwardRef<HTMLImageElement, AttachmentImageProps>(Attac
 
 AttachmentImage.displayName = 'AttachmentImage';
 
-function AttachmentFile({ url, name, uploading = false, iconElement, linkProps, ...props }: AttachmentFileProps) {
+function AttachmentFile({ url, name, pending = false, iconElement, linkProps, ...props }: AttachmentFileProps) {
   const fileId = `attachment_file_${props.id || getRandomString()}`;
 
   return (
     <AttachmentLink
       href={url}
-      uploading={uploading}
+      pending={pending}
       {...linkProps}
-      className={cn('flex-row gap-2 px-2', linkProps?.className)}
+      className={cn('flex-row gap-1.5 p-2 hover:shadow', linkProps?.className)}
     >
       {iconElement || (
         <File
           id={fileId}
           {...props}
           className={cn(
-            'size-6 shrink-0 text-foreground/85 group-hover:text-foreground duration-300 ease-out',
+            '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/85 group-hover:text-foreground duration-300 ease-out">
+        <span className="font-medium line-clamp-1 break-all text-foreground/80 group-hover:text-foreground duration-300 ease-out">
           {name}
         </span>
       )}
@@ -205,7 +202,7 @@ AttachmentFile.displayName = 'AttachmentFile';
 
 function AttachmentFailed({
   name = 'Unknown file',
-  uploading = false,
+  pending = false,
   iconElement,
   containerProps,
   ...props
@@ -216,7 +213,7 @@ function AttachmentFailed({
     <div
       {...containerProps}
       className={cn(
-        'relative min-h-12 min-w-12 w-full flex flex-row items-center justify-center gap-2 px-2 bg-red-600/10 rounded-md overflow-hidden',
+        '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
       )}
     >
@@ -224,7 +221,7 @@ function AttachmentFailed({
         <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={uploading} layout="overlay" />
+      <Spinner loading={pending} layout="overlay" />
     </div>
   );
 }
@@ -252,6 +249,8 @@ function AttachmentBase({ mimeType, ...props }: AttachmentProps) {
 
 const Attachment = memo(AttachmentBase);
 
+Attachment.displayName = 'Attachment';
+
 export {
   Attachment,
   AttachmentLink,

package/src/components/avatar.tsx

@@ -7,6 +7,7 @@ import { cn } from './utils';
 interface AvatarProps extends AvatarPrimitive.AvatarProps {
   src?: string | undefined;
   name?: string | undefined;
+  fallbackIconElement?: React.ReactNode | undefined;
   online?: boolean | undefined;
   presence?: PresenceStatus;
   onlineProps?: React.ComponentProps<'div'>;
@@ -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 };