@connectycube/react-ui-kit 0.0.19 → 0.0.22

package/gen/components/quick-actions.jsx

@@ -0,0 +1,62 @@
+import { forwardRef } from 'react';
+import { cn } from './utils';
+
+function QuickActionsBase(
+  {
+    title,
+    description,
+    actions = [],
+    onAction = () => {},
+    containerProps,
+    titleProps,
+    descriptionProps,
+    actionProps,
+    ...props
+  },
+  ref
+) {
+  if (!actions.length) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={ref}
+      {...containerProps}
+      className={cn('flex flex-col h-full overflow-y-auto py-2', containerProps?.className)}
+    >
+      <div className="grow" />
+      <div {...props} className={cn('grid gap-2 m-4', props?.className)}>
+        {title && (
+          <h2 {...titleProps} className={cn('font-medium text-foreground text-lg', titleProps?.className)}>
+            {title}
+          </h2>
+        )}
+        {description && (
+          <span {...descriptionProps} className={cn('text-sm text-muted-foreground mb-4', descriptionProps?.className)}>
+            {description}
+          </span>
+        )}
+        {actions.map((action, index) => (
+          <div
+            key={index}
+            {...actionProps}
+            className={cn(
+              'w-full border p-2 rounded-md wrap-break-word cursor-pointer overflow-hidden text-ellipsis bg-ring/5 hover:bg-ring/20 transition-colors duration-200 ease-out',
+              actionProps?.className
+            )}
+            onClick={() => onAction(action)}
+          >
+            {action}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const QuickActions = forwardRef(QuickActionsBase);
+
+QuickActions.displayName = 'QuickActions';
+
+export { QuickActions };

package/gen/components/search.jsx

@@ -58,7 +58,7 @@ function SearchBase(
           onClick={handleOnCancel}
           {...cancelIconProps}
           className={cn(
-            'absolute top-1/2 right-2 transform -translate-y-1/2 size-5 text-muted-foreground cursor-pointer hover:text-ring transition-all duration-300 ease-in-out',
+            'absolute top-1/2 right-2 transform -translate-y-1/2 size-5 text-muted-foreground cursor-pointer hover:text-ring transition-all duration-300 ease-out',
             value.length > 0 ? 'opacity-100 scale-100' : 'opacity-0 scale-75 pointer-events-none',
             cancelIconProps?.className
           )}

package/gen/components/status-call.jsx

@@ -0,0 +1,18 @@
+import { Phone, PhoneIncoming, PhoneMissed, PhoneOutgoing } from 'lucide-react';
+import { cn } from './utils';
+
+const StatusCall = ({ fromMe, status, ...props }) => {
+  const CallIcon =
+    status === 'hungUp' ? Phone : fromMe ? PhoneOutgoing : status === 'reject' ? PhoneIncoming : PhoneMissed;
+
+  return (
+    <CallIcon
+      {...props}
+      className={cn('size-4', status === 'hungUp' ? 'text-green-500' : 'text-red-500', props?.className)}
+    />
+  );
+};
+
+StatusCall.displayName = 'StatusCall';
+
+export { StatusCall };

package/gen/components/stream-view.jsx

@@ -9,7 +9,7 @@ function StreamViewBase({ id, stream, mirror, className, muted, ...props }, ref)
   const defaultClassName = 'size-full object-contain';
   const mirrorClassName = mirror ? 'scale-x-[-1]' : '';
 
-  useImperativeHandle(ref, () => innerRef.current);
+  useImperativeHandle(ref, () => innerRef.current || {}, []);
 
   useEffect(() => {
     if (innerRef.current && stream) {
@@ -116,13 +116,13 @@ function FullscreenStreamViewBase(
 
   useImperativeHandle(
     ref,
-    () =>
-      Object.assign(innerRef.current, {
-        isFullscreen,
-        isPictureInPicture,
-        toggleFullscreen,
-        togglePictureInPicture,
-      }),
+    () => ({
+      ...(innerRef.current || {}),
+      isFullscreen,
+      isPictureInPicture,
+      toggleFullscreen,
+      togglePictureInPicture,
+    }),
     [isFullscreen, isPictureInPicture, toggleFullscreen, togglePictureInPicture]
   );
 

package/gen/components/switch.jsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import { cn } from './utils';

package/gen/index.js

@@ -1,3 +1,5 @@
+export { AlertDialog } from './components/alert-dialog';
+
 export {
   Attachment,
   AttachmentLink,
@@ -14,8 +16,18 @@ export { Badge } from './components/badge';
 
 export { Button } from './components/button';
 
+export { ChatBubbleMessage, ChatBubbleInfo } from './components/chat-bubble';
+
+export { ChatInput } from './components/chat-input';
+
+export { ChatList } from './components/chat-list';
+
+export { Checkbox } from './components/checkbox';
+
 export { DialogItem } from './components/dialog-item';
 
+export { DialogsList } from './components/dialogs-list';
+
 export { DismissLayer } from './components/dismiss-layer';
 
 export { FilePickerInput, FilePickerDropzone } from './components/file-picker';
@@ -34,10 +46,14 @@ export { PlaceholderText } from './components/placeholder-text';
 
 export { Presence, PresenceBadge } from './components/presence';
 
+export { QuickActions } from './components/quick-actions';
+
 export { Search } from './components/search';
 
 export { Spinner } from './components/spinner';
 
+export { StatusCall } from './components/status-call';
+
 export { StatusIndicator } from './components/status-indicator';
 
 export { StatusSent } from './components/status-sent';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectycube/react-ui-kit",
-  "version": "0.0.19",
+  "version": "0.0.22",
   "description": "Simple React UI Kit generator with TSX/JSX",
   "homepage": "https://github.com/ConnectyCube/react-ui-kit#readme",
   "bugs": {
@@ -64,6 +64,7 @@
   "dependencies": {
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
@@ -71,12 +72,12 @@
     "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",
-    "tailwind-merge": "^3.4.0"
+    "lucide-react": "^0.562.0",
+    "react-intersection-observer": "^10.0.0",
+    "react-textarea-autosize": "^8.5.9",
+    "tailwind-merge": "^3.4.0",
+    "virtua": "^0.48.2"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -85,25 +86,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.3",
     "@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",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "execa": "^9.6.1",
     "fast-glob": "^3.3.3",
+    "fs-extra": "^11.3.3",
     "globals": "^16.5.0",
-    "prettier": "^3.6.2",
-    "rollup": "^4.53.3",
+    "prettier": "^3.7.4",
+    "prompts": "^2.4.2",
+    "rollup": "^4.53.5",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.48.0"
+    "typescript-eslint": "^8.50.0"
   },
   "engines": {
     "node": ">=18"

package/src/components/attachment.tsx

@@ -5,28 +5,21 @@ import { Spinner } from './spinner';
 import { cn, getRandomString } from './utils';
 
 interface AttachmentProps {
+  pending?: boolean;
   uid?: string;
   url?: string;
   mimeType?: string;
-  uploading?: boolean;
-  onReady?: (skipOnce?: boolean) => void;
+  onReady?: () => void;
   linkProps?: AttachmentLinkProps;
   containerProps?: React.ComponentProps<'div'>;
 }
 
-interface AttachmentLinkProps
-  extends React.ComponentProps<'a'>,
-    Omit<AttachmentProps, 'containerProps' & 'mimeType' & 'onReady'> {
-  children?: React.ReactNode;
-}
+interface AttachmentLinkProps extends React.ComponentProps<'a'>, Omit<AttachmentProps, 'containerProps' & 'mimeType'> {}
 
 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'> {}
+interface AttachmentAudioProps extends React.ComponentProps<'audio'>, Omit<AttachmentProps, 'linkProps' & 'mimeType'> {}
 
 interface AttachmentVideoProps extends React.ComponentProps<'video'>, Omit<AttachmentProps, 'linkProps' & 'mimeType'> {
   maxSize?: number;
@@ -43,7 +36,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 +47,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 +62,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 +70,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 +81,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()}`;
@@ -113,7 +106,7 @@ function AttachmentVideoBase(
     }
   };
 
-  useImperativeHandle(ref, () => playerRef.current!, []);
+  useImperativeHandle(ref, () => playerRef.current || ({} as HTMLVideoElement), []);
 
   return (
     <div
@@ -131,7 +124,7 @@ function AttachmentVideoBase(
         onCanPlay={handleCanPlay}
         className={cn('size-full', props?.className)}
       />
-      <Spinner loading={uploading} layout="overlay" />
+      <Spinner loading={pending} layout="overlay" />
     </div>
   );
 }
@@ -141,7 +134,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 +144,7 @@ function AttachmentImageBase(
   };
 
   return (
-    <AttachmentLink href={url} uploading={uploading} {...linkProps}>
+    <AttachmentLink href={url} pending={pending} {...linkProps}>
       <img
         ref={ref}
         src={url}
@@ -159,7 +152,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 +165,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 +198,7 @@ AttachmentFile.displayName = 'AttachmentFile';
 
 function AttachmentFailed({
   name = 'Unknown file',
-  uploading = false,
+  pending = false,
   iconElement,
   containerProps,
   ...props
@@ -216,7 +209,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,14 +217,20 @@ 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>
   );
 }
 
 AttachmentFailed.displayName = 'AttachmentFailed';
 
-function AttachmentBase({ mimeType, ...props }: AttachmentProps) {
+function AttachmentBase({
+  mimeType,
+  onReady = () => {},
+  containerProps = {},
+  linkProps = {},
+  ...props
+}: AttachmentProps) {
   const [type = ''] = mimeType?.split('/') || [];
 
   if (!props.url) {
@@ -240,18 +239,20 @@ function AttachmentBase({ mimeType, ...props }: AttachmentProps) {
 
   switch (type) {
     case 'image':
-      return <AttachmentImage {...props} />;
+      return <AttachmentImage onReady={onReady} linkProps={linkProps} {...props} />;
     case 'video':
-      return <AttachmentVideo {...props} />;
+      return <AttachmentVideo onReady={onReady} containerProps={containerProps} {...props} />;
     case 'audio':
-      return <AttachmentAudio {...props} />;
+      return <AttachmentAudio containerProps={containerProps} {...props} />;
     default:
-      return <AttachmentFile name={mimeType} {...props} />;
+      return <AttachmentFile name={mimeType} containerProps={containerProps} {...props} />;
   }
 }
 
 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/button.tsx

@@ -46,7 +46,7 @@ function ButtonBase(
     <Comp
       ref={ref}
       {...props}
-      className={cn(buttonVariants({ variant, size, className }), 'transition-all ease-in-out duration-300')}
+      className={cn(buttonVariants({ variant, size, className }), 'transition-all ease-out duration-300')}
     />
   );
 }

package/src/components/chat-bubble.tsx

@@ -0,0 +1,176 @@
+import type React from 'react';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { Avatar, type AvatarProps } from './avatar';
+import { FormattedDate, type FormattedDateProps } from './formatted-date';
+import { StatusSent, type StatusSentProps } from './status-sent';
+import { cn } from './utils';
+
+interface ChatBubbleProps extends React.ComponentProps<'div'> {
+  onView?: () => void;
+  isLast?: boolean;
+  date?: FormattedDateProps['date'];
+  language?: FormattedDateProps['language'];
+  formattedDateProps?: FormattedDateProps;
+}
+
+interface ChatBubbleMessageProps extends ChatBubbleProps {
+  fromMe: boolean;
+  sameSenderAbove: boolean;
+  title?: string;
+  senderName?: string;
+  senderAvatar?: AvatarProps['src'];
+  statusSent?: StatusSentProps['status'];
+  avatarProps?: AvatarProps;
+  bubbleProps?: React.ComponentProps<'div'>;
+  titleProps?: React.ComponentProps<'span'>;
+  statusSentProps?: StatusSentProps;
+}
+
+interface ChatBubbleInfoProps extends ChatBubbleProps {
+  info?: string | undefined;
+  iconElement?: React.ReactNode;
+  infoProps?: React.ComponentProps<'span'>;
+}
+
+function ChatBubbleBase(
+  { onView = () => {}, isLast, children, ...props }: ChatBubbleProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const [setRef, inView] = useInView();
+  const messageRef = useRef<HTMLDivElement>(null);
+  const setRefs = useCallback(
+    (node: HTMLDivElement) => {
+      messageRef.current = node;
+      setRef(node);
+    },
+    [setRef]
+  );
+
+  useEffect(() => {
+    if (inView) {
+      onView();
+    }
+  }, [inView, onView]);
+
+  useImperativeHandle(ref, () => messageRef.current || ({} as HTMLDivElement), []);
+
+  return (
+    <div ref={setRefs} {...props} className={cn('mt-2', isLast && 'mb-2', inView && 'view', props?.className)}>
+      {children}
+    </div>
+  );
+}
+
+const ChatBubble = forwardRef<HTMLDivElement, ChatBubbleProps>(ChatBubbleBase);
+
+function ChatBubbleMessageBase(
+  {
+    fromMe,
+    sameSenderAbove,
+    title,
+    senderName,
+    senderAvatar,
+    date = new Date(),
+    language = 'en',
+    statusSent,
+    avatarProps,
+    bubbleProps,
+    titleProps,
+    formattedDateProps,
+    statusSentProps,
+    children,
+    ...props
+  }: ChatBubbleMessageProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const hasAvatar = Boolean((avatarProps || senderAvatar) && !sameSenderAbove);
+  const hasAvatarMargin = Boolean((avatarProps || senderAvatar) && sameSenderAbove);
+
+  return (
+    <ChatBubble
+      ref={ref}
+      {...props}
+      className={cn(
+        `flex relative text-left whitespace-pre-wrap`,
+        fromMe ? 'self-end flex-row-reverse ml-12' : `self-start mr-12`,
+        sameSenderAbove && 'mt-1'
+      )}
+    >
+      {hasAvatar && (
+        <Avatar
+          name={senderName}
+          src={senderAvatar}
+          imageProps={{ className: 'bg-blue-200' }}
+          fallbackProps={{ className: 'bg-blue-200' }}
+          {...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 shadow-sm',
+          fromMe ? 'bg-gray-200' : 'bg-blue-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}
+        <div className="absolute bottom-1 right-2 flex items-center gap-1 italic">
+          <FormattedDate date={date} language={language} distanceToNow {...formattedDateProps} />
+          <StatusSent status={statusSent} {...statusSentProps} />
+        </div>
+      </div>
+    </ChatBubble>
+  );
+}
+
+const ChatBubbleMessage = memo(forwardRef<HTMLDivElement, ChatBubbleMessageProps>(ChatBubbleMessageBase));
+
+ChatBubbleMessage.displayName = 'ChatBubbleMessage';
+
+function ChatBubbleInfoBase(
+  {
+    info = '',
+    iconElement,
+    date = new Date(),
+    language = 'en',
+    infoProps,
+    formattedDateProps,
+    ...props
+  }: ChatBubbleInfoProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <ChatBubble
+      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 mt-2')}
+    >
+      {iconElement}
+      <span {...infoProps} className={cn('text-sm mb-px', infoProps?.className)}>
+        {info}
+      </span>
+      <FormattedDate date={date} language={language} distanceToNow {...formattedDateProps} />
+    </ChatBubble>
+  );
+}
+
+const ChatBubbleInfo = memo(forwardRef<HTMLDivElement, ChatBubbleInfoProps>(ChatBubbleInfoBase));
+
+ChatBubbleInfo.displayName = 'ChatBubbleInfo';
+
+export { ChatBubbleMessage, ChatBubbleInfo, type ChatBubbleMessageProps, type ChatBubbleInfoProps };