@connectycube/react-ui-kit 0.0.20 → 0.1.0

package/src/components/attachment.tsx

@@ -5,25 +5,21 @@ import { Spinner } from './spinner';
 import { cn, getRandomString } from './utils';
 
 interface AttachmentProps {
+  pending?: boolean;
   uid?: string;
   url?: string;
   mimeType?: string;
-  pending?: 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'> {}
 
-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;
@@ -110,7 +106,7 @@ function AttachmentVideoBase(
     }
   };
 
-  useImperativeHandle(ref, () => playerRef.current!, []);
+  useImperativeHandle(ref, () => playerRef.current || ({} as HTMLVideoElement), []);
 
   return (
     <div
@@ -228,7 +224,13 @@ function AttachmentFailed({
 
 AttachmentFailed.displayName = 'AttachmentFailed';
 
-function AttachmentBase({ mimeType, ...props }: AttachmentProps) {
+function AttachmentBase({
+  mimeType,
+  onReady = () => {},
+  containerProps = {},
+  linkProps = {},
+  ...props
+}: AttachmentProps) {
   const [type = ''] = mimeType?.split('/') || [];
 
   if (!props.url) {
@@ -237,13 +239,13 @@ 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} />;
   }
 }
 

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 };

package/src/components/chat-input.tsx

@@ -0,0 +1,172 @@
+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, Omit<React.ComponentProps<'textarea'>, 'style'> {
+  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(
+            '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(
+  {
+    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);
+    };
+  }, [props.key]);
+
+  useImperativeHandle(ref, () => textareaRef.current || ({} as HTMLTextAreaElement), []);
+
+  return (
+    <div {...containerProps} className={cn('flex items-end gap-2', containerProps?.className)}>
+      <TextareaAutosize
+        name="textarea-autosize"
+        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, type ChatInputProps };

package/src/components/chat-list.tsx

@@ -0,0 +1,164 @@
+import React, { useRef, useEffect, useState, useImperativeHandle, forwardRef, useCallback } from 'react';
+import { Virtualizer, VirtualizerProps, type VirtualizerHandle } from 'virtua';
+import { FilePickerDropzone, type FilePickerDropzoneProps } from './file-picker';
+import { QuickActions, type QuickActionsProps } from './quick-actions';
+import { Spinner } from './spinner';
+import { cn } from './utils';
+
+interface ChatListProps extends VirtualizerProps {
+  key: string;
+  loading?: boolean;
+  textareaMeasurement: { height: number; shift: number };
+  offsetToReach?: number;
+  onScrollStartReached?: () => void;
+  onScrollEndReached?: () => void;
+  onListReset?: (prev: string | undefined, next: string | undefined) => void;
+  onListCreate?: () => void;
+  onListGrow?: () => void;
+  enableFilePickerDropzone?: boolean;
+  containerProps?: React.ComponentProps<'div'>;
+  filePickerDropzoneProps?: FilePickerDropzoneProps;
+  quickActionsProps?: QuickActionsProps;
+  quickActionsVisible?: boolean;
+  minItemsCount?: number;
+}
+
+interface ChatListHandle extends VirtualizerHandle {
+  scrollToBottom: (force?: boolean) => void;
+}
+
+function DefaultChatListWrapper({ children, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div {...props} className={cn('relative size-full min-h-0', props?.className)}>
+      {children}
+    </div>
+  );
+}
+
+function ChatListBase(
+  {
+    key,
+    loading = false,
+    textareaMeasurement,
+    offsetToReach = 200,
+    onScrollStartReached,
+    onScrollEndReached,
+    onListReset,
+    onListCreate,
+    onListGrow,
+    enableFilePickerDropzone = true,
+    containerProps,
+    filePickerDropzoneProps,
+    quickActionsProps,
+    children,
+    quickActionsVisible,
+    minItemsCount = 1,
+    ...props
+  }: ChatListProps,
+  ref: React.ForwardedRef<ChatListHandle>
+) {
+  const ChatListWrapper = enableFilePickerDropzone ? FilePickerDropzone : DefaultChatListWrapper;
+  const chatListWrapperProps = enableFilePickerDropzone ? filePickerDropzoneProps : containerProps;
+  const itemsCount = Array.isArray(children) ? children.length : Array.isArray(props.data) ? props.data.length : 0;
+  const itemsCountRef = useRef<number>(0);
+  const keyRef = useRef<string | undefined>(undefined);
+  const [shouldPrependMessages, setShouldPrependMessages] = useState<boolean>(false);
+  const [isPreparing, setIsPreparing] = useState<boolean>(false);
+  const virtuaRef = useRef<VirtualizerHandle>(null);
+  const prepareNextVirtualizer = () => {
+    queueMicrotask(() => {
+      setIsPreparing(true);
+      queueMicrotask(() => setIsPreparing(false));
+    });
+  };
+  const handleOnScroll = async (offset: number) => {
+    props.onScroll?.(offset);
+
+    if (!virtuaRef.current) return;
+
+    if (typeof onScrollStartReached === 'function' && offset < offsetToReach) {
+      setShouldPrependMessages(true);
+      onScrollStartReached();
+    }
+
+    if (
+      typeof onScrollEndReached === 'function' &&
+      virtuaRef.current.viewportSize + offset + offsetToReach > virtuaRef.current.scrollSize
+    ) {
+      onScrollEndReached();
+    }
+  };
+  const scrollToBottom = useCallback(
+    (force: boolean = false) => {
+      if (!virtuaRef.current) return;
+
+      if (force || virtuaRef.current.scrollSize - virtuaRef.current.scrollOffset < virtuaRef.current.viewportSize * 2) {
+        queueMicrotask(() => virtuaRef.current?.scrollToIndex(itemsCount - 1, { align: 'start' }));
+      }
+    },
+    [itemsCount]
+  );
+
+  useEffect(() => {
+    if (key !== keyRef.current) {
+      prepareNextVirtualizer();
+      onListReset?.(keyRef.current, key);
+      keyRef.current = key;
+      itemsCountRef.current = 0;
+    }
+  }, [key, onListReset]);
+
+  useEffect(() => {
+    if (itemsCountRef.current === 0 && itemsCount > 0) {
+      prepareNextVirtualizer();
+      onListCreate?.();
+      itemsCountRef.current = itemsCount;
+      scrollToBottom(true);
+    }
+
+    if (itemsCount > itemsCountRef.current) {
+      onListGrow?.();
+      itemsCountRef.current = itemsCount;
+
+      if (shouldPrependMessages) {
+        queueMicrotask(() => setShouldPrependMessages(false));
+      }
+
+      scrollToBottom();
+    }
+  }, [itemsCount, shouldPrependMessages, onListCreate, onListGrow, scrollToBottom]);
+
+  useEffect(() => {
+    virtuaRef.current?.scrollBy(textareaMeasurement.shift);
+  }, [textareaMeasurement]);
+
+  useImperativeHandle(ref, () => ({ ...(virtuaRef.current || ({} as VirtualizerHandle)), scrollToBottom }), [
+    scrollToBottom,
+  ]);
+
+  if (isPreparing) {
+    return null;
+  }
+
+  if (minItemsCount >= itemsCount) {
+    return quickActionsVisible ? <QuickActions {...quickActionsProps} /> : <Spinner loading layout="centered" />;
+  }
+
+  return (
+    <ChatListWrapper {...chatListWrapperProps}>
+      <Spinner loading={loading} className="my-5" />
+      <div className="flex flex-col h-full overflow-y-auto px-2">
+        <div className="grow" />
+        <Virtualizer ref={virtuaRef} onScroll={handleOnScroll} shift={shouldPrependMessages} {...props}>
+          {children}
+        </Virtualizer>
+      </div>
+    </ChatListWrapper>
+  );
+}
+
+const ChatList = forwardRef<ChatListHandle, ChatListProps>(ChatListBase);
+
+ChatList.displayName = 'ChatList';
+
+export { ChatList, type ChatListProps, type ChatListHandle };

package/src/components/checkbox.tsx

@@ -0,0 +1,40 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon, type LucideProps } from 'lucide-react';
+import { cn } from './utils';
+
+interface CheckboxProps extends CheckboxPrimitive.CheckboxProps {
+  iconElement?: React.ReactNode;
+  iconProps?: LucideProps;
+  indicatorProps?: CheckboxPrimitive.CheckboxIndicatorProps;
+}
+
+function CheckboxBase(
+  { iconElement, iconProps, indicatorProps, ...props }: CheckboxProps,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) {
+  return (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      {...props}
+      className={cn(
+        'peer border-input dark:bg-input/30 data-[state=checked]:bg-ring data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-ring data-[state=checked]:border-ring focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        props?.className
+      )}
+    >
+      <CheckboxPrimitive.Indicator
+        {...indicatorProps}
+        className={cn('flex items-center justify-center text-current transition-none', indicatorProps?.className)}
+      >
+        {iconElement || <CheckIcon {...iconProps} className={cn('size-3.5', iconProps?.className)} />}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(CheckboxBase);
+
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox, type CheckboxProps };