@connectycube/react-ui-kit 0.0.20 → 0.1.0

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

@@ -0,0 +1,174 @@
+import type React from 'react';
+import { ChangeEvent, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import TextareaAutosize, { type TextareaAutosizeProps, type TextareaHeightChangeMeta } from 'react-textarea-autosize';
+import { SendHorizontal, type LucideProps } from 'lucide-react';
+import { Label, type LabelProps } from './label';
+import { cn } from './utils';
+
+interface ChatInputSendProps extends LabelProps {
+  onSend: () => void;
+  iconElement?: React.ReactNode;
+  iconProps?: LucideProps;
+}
+
+interface ChatInputProps extends TextareaAutosizeProps, React.ComponentProps<'textarea'> {
+  key?: string;
+  children?: React.ReactNode;
+  pending?: boolean;
+  draft?: string;
+  onSend?: (value?: string) => void;
+  onDraft?: (value?: string) => void;
+  onTyping?: (typing?: boolean) => void;
+  onHeightGrow?: (data: { height: number; shift: number }) => void;
+  hideChatInputSend?: boolean;
+  chatInputSendProps?: ChatInputSendProps;
+  containerProps?: React.ComponentProps<'div'>;
+}
+
+function ChatInputSendBase(
+  { onSend = () => {}, iconElement, iconProps, ...props }: ChatInputSendProps,
+  ref: React.ForwardedRef<HTMLLabelElement>
+) {
+  return (
+    <Label
+      ref={ref}
+      {...props}
+      onClick={onSend}
+      className={cn('group rounded-full py-2 pl-2.5 pr-1.5 cursor-pointer bg-ring/90 hover:bg-ring', props?.className)}
+    >
+      {iconElement || (
+        <SendHorizontal
+          {...iconProps}
+          className={cn(
+            'size-7 text-background group-hover:scale-110 transition-all duration-200 ease-out',
+            iconProps?.className
+          )}
+        />
+      )}
+    </Label>
+  );
+}
+
+const ChatInputSend = forwardRef<HTMLLabelElement, ChatInputSendProps>(ChatInputSendBase);
+
+ChatInputSend.displayName = 'ChatInputSend';
+
+function ChatInputBase(
+  {
+    key,
+    pending = false,
+    draft,
+    onSend = () => {},
+    onDraft = () => {},
+    onTyping = () => {},
+    onHeightGrow = () => {},
+    hideChatInputSend = false,
+    chatInputSendProps,
+    containerProps,
+    children,
+    ...props
+  }: ChatInputProps,
+  ref: React.ForwardedRef<HTMLTextAreaElement>
+) {
+  const [value, setValue] = useState<string>();
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const textareaHeightRef = useRef<number>(0);
+  const typingRef = useRef<boolean>(false);
+  const typingTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const handleStopTyping = () => {
+    typingRef.current = false;
+    onTyping(false);
+
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+      typingTimeoutRef.current = undefined;
+    }
+  };
+  const handleOnChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    const { data } = event.nativeEvent as InputEvent;
+
+    setValue(event.target.value);
+
+    if (!typingRef.current && typeof data === 'string' && data.length > 0) {
+      typingRef.current = true;
+      onTyping(true);
+    }
+
+    clearTimeout(typingTimeoutRef.current);
+    typingTimeoutRef.current = setTimeout(handleStopTyping, 5000);
+  };
+  const handleOnSend = async () => {
+    handleStopTyping();
+
+    if (typeof value === 'string' && value.length > 0) {
+      onSend(value.trim());
+      setValue('');
+      textareaRef.current?.focus();
+    }
+  };
+  const handleOnHeightChange = (height: number, meta: TextareaHeightChangeMeta) => {
+    if (!height && !meta) return;
+
+    if (height !== textareaHeightRef.current) {
+      const shift = height > textareaHeightRef.current ? meta.rowHeight : -meta.rowHeight;
+
+      onHeightGrow({ height, shift });
+    }
+
+    textareaHeightRef.current = height;
+  };
+  const handleOnKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Enter' && event.shiftKey === false) {
+      event.preventDefault();
+      props.onKeyDown?.(event);
+      handleOnSend();
+    }
+  };
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+
+    handleStopTyping();
+    queueMicrotask(() => setValue(draft));
+    textarea?.focus();
+
+    return () => {
+      onDraft(textarea?.value);
+    };
+  }, [key]);
+
+  useImperativeHandle(ref, () => textareaRef.current!, [textareaRef]);
+
+  return (
+    <div {...containerProps} className={cn('flex items-end gap-2', containerProps?.className)}>
+      <TextareaAutosize
+        key={key}
+        ref={textareaRef}
+        autoFocus
+        minRows={1}
+        maxRows={8}
+        {...props}
+        value={value}
+        onChange={handleOnChange}
+        onKeyDown={handleOnKeyDown}
+        onHeightChange={handleOnHeightChange}
+        className={cn(
+          'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-11 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring',
+          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+          'resize-none py-2.5',
+          pending && 'pointer-events-none bg-muted-foreground border-ring ring-ring/50 animate-pulse',
+          props?.className
+        )}
+      />
+      {!hideChatInputSend && <ChatInputSend onSend={handleOnSend} {...chatInputSendProps} />}
+      {children}
+    </div>
+  );
+}
+
+const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(ChatInputBase);
+
+ChatInput.displayName = 'ChatInput';
+
+export { ChatInput };

package/src/components/dialog-item.tsx

@@ -99,7 +99,7 @@ function DialogItemBase(
       onClick={onSelect}
       className={cn(
         'flex items-start gap-2 px-2 flex-1 cursor-pointer',
-        'transition-colors duration-200 ease-linear',
+        'transition-colors duration-200 ease-out',
         `${selected ? 'border-l-[0.25em] pl-1 border-l-ring bg-ring/20' : 'hover:bg-ring/5'}`,
         props?.className
       )}

package/src/components/dialogs-list.tsx

@@ -0,0 +1,84 @@
+import type React from 'react';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { VList, type VListHandle, type VListProps } from 'virtua';
+import { PlaceholderText } from './placeholder-text';
+
+interface DialogsListProps extends VListProps {
+  pending?: boolean;
+  pendingListLength?: number;
+  offsetToReach?: number;
+  placeholderVisible?: boolean;
+  placeholderTitles?: string[];
+  onScrollStartReached?: () => void;
+  onScrollEndReached?: () => void;
+}
+
+const PendingItem = () => (
+  <div className="flex flex-row gap-2 mx-2 border-b">
+    <div className="size-13 my-2 rounded-full bg-muted animate-pulse" />
+    <div className="flex-1 text-muted">
+      <div className="flex flex-row items-center justify-between h-6">
+        <div className="w-2/3 h-4 rounded-full bg-muted animate-pulse" />
+        <div className="w-1/6 h-3.5 rounded-full bg-muted animate-pulse" />
+      </div>
+      <div className="flex flex-col items-start justify-around h-10">
+        <div className="w-7/8 h-3.5 rounded-full bg-muted animate-pulse" />
+        <div className="w-5/6 h-3.5 rounded-full bg-muted animate-pulse" />
+      </div>
+    </div>
+  </div>
+);
+
+function DialogsListBase(
+  {
+    children,
+    pending,
+    pendingListLength = 5,
+    offsetToReach = 50,
+    placeholderVisible,
+    placeholderTitles = ['No dialogs yet.', 'Start a conversation!'],
+    onScrollStartReached,
+    onScrollEndReached,
+    ...props
+  }: DialogsListProps,
+  ref: React.ForwardedRef<VListHandle>
+) {
+  const vListRef = useRef<VListHandle>(null);
+  const skeletonList = Array.from({ length: pendingListLength }).map((_, i) => (
+    <PendingItem key={`pending_dialog_item_${i}`} />
+  ));
+  const handleOnScroll = async (offset: number) => {
+    props.onScroll?.(offset);
+
+    if (!vListRef.current) return;
+
+    if (typeof onScrollStartReached === 'function' && offset < offsetToReach) {
+      onScrollStartReached();
+    }
+
+    if (
+      typeof onScrollEndReached === 'function' &&
+      vListRef.current.viewportSize + offset + offsetToReach > vListRef.current.scrollSize
+    ) {
+      onScrollEndReached();
+    }
+  };
+
+  useImperativeHandle(ref, () => vListRef.current || ({} as VListHandle), []);
+
+  if (placeholderVisible) {
+    return <PlaceholderText titles={placeholderTitles} className="text-base text-muted" />;
+  }
+
+  return (
+    <VList ref={vListRef} onScroll={handleOnScroll} className="size-full overflow-y-scroll" {...props}>
+      {pending ? skeletonList : children}
+    </VList>
+  );
+}
+
+const DialogsList = forwardRef<VListHandle, DialogsListProps>(DialogsListBase);
+
+DialogsList.displayName = 'DialogsList';
+
+export { DialogsList, type DialogsListProps };

package/src/components/dismiss-layer.tsx

@@ -16,7 +16,7 @@ function DismissLayerBase(
 ) {
   const innerRef = useRef<HTMLDivElement>(null);
 
-  useImperativeHandle(ref, () => innerRef.current!, []);
+  useImperativeHandle(ref, () => innerRef.current || ({} as HTMLDivElement), []);
 
   const handleClickOrTouch = useCallback(
     (e: React.MouseEvent | React.TouchEvent) => {

package/src/components/file-picker.tsx

@@ -58,7 +58,7 @@ const handleFiles = (
 };
 
 interface FilePickerInputProps extends React.ComponentProps<'input'> {
-  onSelectFile: (files: File[]) => void;
+  onSelectFile?: (files: File[]) => void;
   onInvalidFile?: () => void;
   iconElement?: React.ReactNode;
   labelProps?: LabelProps;
@@ -97,7 +97,7 @@ function FilePickerInputBase(
       {...labelProps}
       htmlFor="file-uploader"
       className={cn(
-        'group p-2 rounded-full hover:bg-ring/10 transition-all duration-200 ease-in-out cursor-pointer',
+        'group p-2 rounded-full hover:bg-ring/10 transition-all duration-200 ease-out cursor-pointer',
         labelProps?.className
       )}
     >
@@ -105,7 +105,7 @@ function FilePickerInputBase(
         <Paperclip
           {...iconProps}
           className={cn(
-            'text-foreground group-hover:scale-110 transition-all duration-200 ease-in-out',
+            'text-foreground group-hover:scale-110 transition-all duration-200 ease-out',
             iconProps?.className
           )}
         />

package/src/components/placeholder-text.tsx

@@ -21,7 +21,11 @@ function PlaceholderTextBase(
       className={cn('absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2', props?.className)}
     >
       {rows.map((row, index) => (
-        <div key={`placeholder-text-${index}`} {...rowProps} className={cn('text-center', rowProps?.className)}>
+        <div
+          key={`placeholder-text-${index}`}
+          {...rowProps}
+          className={cn('text-center text-muted-foreground', rowProps?.className)}
+        >
           {row}
         </div>
       ))}

package/src/components/quick-actions.tsx

@@ -0,0 +1,74 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+import { cn } from './utils';
+
+interface QuickActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  description?: string;
+  actions?: string[];
+  onAction?: (action: string) => void;
+  containerProps?: React.ComponentProps<'div'>;
+  titleProps?: React.ComponentProps<'h2'>;
+  descriptionProps?: React.ComponentProps<'span'>;
+  actionProps?: React.ComponentProps<'div'>;
+}
+
+function QuickActionsBase(
+  {
+    title,
+    description,
+    actions = [],
+    onAction = () => {},
+    containerProps,
+    titleProps,
+    descriptionProps,
+    actionProps,
+    ...props
+  }: QuickActionsProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  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<HTMLDivElement, QuickActionsProps>(QuickActionsBase);
+
+QuickActions.displayName = 'QuickActions';
+
+export { QuickActions, type QuickActionsProps };

package/src/components/search.tsx

@@ -69,7 +69,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/src/components/status-call.tsx

@@ -0,0 +1,23 @@
+import { Phone, PhoneIncoming, PhoneMissed, PhoneOutgoing, type LucideProps } from 'lucide-react';
+import { cn } from './utils';
+
+interface StatusCallProps extends LucideProps {
+  fromMe?: boolean;
+  status?: 'reject' | 'notAnswer' | 'hungUp' | 'cancel' | undefined;
+}
+
+const StatusCall: React.FC<StatusCallProps> = ({ 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, type StatusCallProps };

package/src/components/stream-view.tsx

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

package/src/index.ts

@@ -23,12 +23,23 @@ export { Badge, type BadgeProps } from './components/badge';
 
 export { Button, type ButtonProps } from './components/button';
 
-export { CallMessage, type CallMessageProps } from './components/call-message';
+export {
+  ChatBubbleMessage,
+  ChatBubbleInfo,
+  type ChatBubbleMessageProps,
+  type ChatBubbleInfoProps,
+} from './components/chat-bubble';
+
+export { ChatInput, type ChatInputProps } from './components/chat-input';
+
+export { ChatList, type ChatListProps, type ChatListHandle } from './components/chat-list';
 
-export { ChatMessage, type ChatMessageProps } from './components/chat-message';
+export { Checkbox, type CheckboxProps } from './components/checkbox';
 
 export { DialogItem, type DialogItemProps } from './components/dialog-item';
 
+export { DialogsList, type DialogsListProps } from './components/dialogs-list';
+
 export { DismissLayer, type DismissLayerProps } from './components/dismiss-layer';
 
 export {
@@ -58,10 +69,14 @@ export {
   type PresenceBadgeProps,
 } from './components/presence';
 
+export { QuickActions, type QuickActionsProps } from './components/quick-actions';
+
 export { Search, type SearchProps } from './components/search';
 
 export { Spinner, type SpinnerProps } from './components/spinner';
 
+export { StatusCall, type StatusCallProps } from './components/status-call';
+
 export { StatusIndicator, type StatusName, type StatusIndicatorProps } from './components/status-indicator';
 
 export { StatusSent, type StatusSentProps } from './components/status-sent';

package/dist/types/components/call-message.d.ts

@@ -1,17 +0,0 @@
-import type React from 'react';
-import { type LucideProps } from 'lucide-react';
-import { type FormattedDateProps } from './formatted-date';
-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;
-}
-declare const CallMessage: React.NamedExoticComponent<Omit<CallMessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { CallMessage, type CallMessageProps };
-//# sourceMappingURL=call-message.d.ts.map

package/dist/types/components/call-message.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"call-message.d.ts","sourceRoot":"","sources":["../../../src/components/call-message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAoD,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAClG,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAG1E,UAAU,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAC5D,MAAM,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IAClE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IACzC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC;AAsDD,QAAA,MAAM,WAAW,iGAAsE,CAAC;AAIxF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAC"}

package/dist/types/components/chat-message.d.ts

@@ -1,30 +0,0 @@
-import type React from 'react';
-import { type AttachmentProps } from './attachment';
-import { type AvatarProps } from './avatar';
-import { type FormattedDateProps } from './formatted-date';
-import { type LinkifyTextProps } from './linkify-text';
-import { type LinkPreviewProps } from './link-preview';
-import { type StatusSentProps } from './status-sent';
-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;
-}
-declare const ChatMessage: React.NamedExoticComponent<Omit<ChatMessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { ChatMessage, type ChatMessageProps };
-//# sourceMappingURL=chat-message.d.ts.map

package/dist/types/components/chat-message.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chat-message.d.ts","sourceRoot":"","sources":["../../../src/components/chat-message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAGjE,UAAU,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAC5D,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC1C,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAyGD,QAAA,MAAM,WAAW,iGAAsE,CAAC;AAExF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAC"}

package/gen/components/call-message.jsx

@@ -1,62 +0,0 @@
-import { forwardRef, memo } from 'react';
-import { Phone, PhoneIncoming, PhoneMissed, PhoneOutgoing } from 'lucide-react';
-import { FormattedDate } from './formatted-date';
-import { cn } from './utils';
-
-function formatDuration(seconds) {
-  const h = Math.floor(seconds / 3600);
-  const m = Math.floor((seconds % 3600) / 60);
-  const s = seconds % 60;
-  const pad = (num) => 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
-  },
-  ref
-) {
-  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(CallMessageBase));
-
-CallMessage.displayName = 'CallMessage';
-
-export { CallMessage };