@connectycube/react-ui-kit 0.0.19 → 0.0.22

package/gen/components/chat-bubble.jsx

@@ -0,0 +1,141 @@
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { Avatar } from './avatar';
+import { FormattedDate } from './formatted-date';
+import { StatusSent } from './status-sent';
+import { cn } from './utils';
+
+function ChatBubbleBase({ onView = () => {}, isLast, children, ...props }, ref) {
+  const [setRef, inView] = useInView();
+  const messageRef = useRef(null);
+  const setRefs = useCallback(
+    (node) => {
+      messageRef.current = node;
+      setRef(node);
+    },
+    [setRef]
+  );
+
+  useEffect(() => {
+    if (inView) {
+      onView();
+    }
+  }, [inView, onView]);
+
+  useImperativeHandle(ref, () => messageRef.current || {}, []);
+
+  return (
+    <div ref={setRefs} {...props} className={cn('mt-2', isLast && 'mb-2', inView && 'view', props?.className)}>
+      {children}
+    </div>
+  );
+}
+
+const ChatBubble = forwardRef(ChatBubbleBase);
+
+function ChatBubbleMessageBase(
+  {
+    fromMe,
+    sameSenderAbove,
+    title,
+    senderName,
+    senderAvatar,
+    date = new Date(),
+    language = 'en',
+    statusSent,
+    avatarProps,
+    bubbleProps,
+    titleProps,
+    formattedDateProps,
+    statusSentProps,
+    children,
+    ...props
+  },
+  ref
+) {
+  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(ChatBubbleMessageBase));
+
+ChatBubbleMessage.displayName = 'ChatBubbleMessage';
+
+function ChatBubbleInfoBase(
+  { info = '', iconElement, date = new Date(), language = 'en', infoProps, formattedDateProps, ...props },
+  ref
+) {
+  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(ChatBubbleInfoBase));
+
+ChatBubbleInfo.displayName = 'ChatBubbleInfo';
+
+export { ChatBubbleMessage, ChatBubbleInfo };

package/gen/components/chat-input.jsx

@@ -0,0 +1,152 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+import { SendHorizontal } from 'lucide-react';
+import { Label } from './label';
+import { cn } from './utils';
+
+function ChatInputSendBase({ onSend = () => {}, iconElement, iconProps, ...props }, ref) {
+  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(ChatInputSendBase);
+
+ChatInputSend.displayName = 'ChatInputSend';
+
+function ChatInputBase(
+  {
+    pending = false,
+    draft,
+    onSend = () => {},
+    onDraft = () => {},
+    onTyping = () => {},
+    onHeightGrow = () => {},
+    hideChatInputSend = false,
+    chatInputSendProps,
+    containerProps,
+    children,
+    ...props
+  },
+  ref
+) {
+  const [value, setValue] = useState();
+  const textareaRef = useRef(null);
+  const textareaHeightRef = useRef(0);
+  const typingRef = useRef(false);
+  const typingTimeoutRef = useRef(undefined);
+  const handleStopTyping = () => {
+    typingRef.current = false;
+    onTyping(false);
+
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+      typingTimeoutRef.current = undefined;
+    }
+  };
+  const handleOnChange = (event) => {
+    const { data } = event.nativeEvent;
+
+    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, meta) => {
+    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) => {
+    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 || {}, []);
+
+  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(ChatInputBase);
+
+ChatInput.displayName = 'ChatInput';
+
+export { ChatInput };

package/gen/components/chat-list.jsx

@@ -0,0 +1,151 @@
+import React, { useRef, useEffect, useState, useImperativeHandle, forwardRef, useCallback } from 'react';
+import { Virtualizer } from 'virtua';
+import { FilePickerDropzone } from './file-picker';
+import { QuickActions } from './quick-actions';
+import { Spinner } from './spinner';
+import { cn } from './utils';
+
+function DefaultChatListWrapper({ children, ...props }) {
+  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
+  },
+  ref
+) {
+  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(0);
+  const keyRef = useRef(undefined);
+  const [shouldPrependMessages, setShouldPrependMessages] = useState(false);
+  const [isPreparing, setIsPreparing] = useState(false);
+  const virtuaRef = useRef(null);
+  const prepareNextVirtualizer = () => {
+    queueMicrotask(() => {
+      setIsPreparing(true);
+      queueMicrotask(() => setIsPreparing(false));
+    });
+  };
+  const handleOnScroll = async (offset) => {
+    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 = 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 || {}),
+      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(ChatListBase);
+
+ChatList.displayName = 'ChatList';
+
+export { ChatList };

package/gen/components/checkbox.jsx

@@ -0,0 +1,30 @@
+import { forwardRef } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from 'lucide-react';
+import { cn } from './utils';
+
+function CheckboxBase({ iconElement, iconProps, indicatorProps, ...props }, ref) {
+  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(CheckboxBase);
+
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };

package/gen/components/dialog-item.jsx

@@ -60,7 +60,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
       )}
@@ -98,7 +98,10 @@ function DialogItemBase(
         <div {...footerProps} className={cn('flex items-start justify-between gap-1', footerProps?.className)}>
           <span
             {...lastMessageProps}
-            className={cn('text-sm text-left text-muted-foreground line-clamp-2', lastMessageProps?.className)}
+            className={cn(
+              'text-sm text-left text-muted-foreground break-all line-clamp-2',
+              lastMessageProps?.className
+            )}
           >
             {typingStatusText ||
               (draft ? (

package/gen/components/dialogs-list.jsx

@@ -0,0 +1,73 @@
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { VList } from 'virtua';
+import { PlaceholderText } from './placeholder-text';
+
+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
+  },
+  ref
+) {
+  const vListRef = useRef(null);
+  const skeletonList = Array.from({
+    length: pendingListLength,
+  }).map((_, i) => <PendingItem key={`pending_dialog_item_${i}`} />);
+  const handleOnScroll = async (offset) => {
+    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 || {}, []);
+
+  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(DialogsListBase);
+
+DialogsList.displayName = 'DialogsList';
+
+export { DialogsList };

package/gen/components/dismiss-layer.jsx

@@ -7,7 +7,7 @@ function DismissLayerBase(
 ) {
   const innerRef = useRef(null);
 
-  useImperativeHandle(ref, () => innerRef.current, []);
+  useImperativeHandle(ref, () => innerRef.current || {}, []);
 
   const handleClickOrTouch = useCallback(
     (e) => {

package/gen/components/file-picker.jsx

@@ -73,7 +73,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
       )}
     >
@@ -81,7 +81,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/gen/components/linkify-text.jsx

@@ -1,4 +1,4 @@
-import { forwardRef, memo, useMemo } from 'react';
+import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
 import Linkify from 'linkify-react';
 import { cn } from './utils';
 
@@ -6,8 +6,22 @@ const DEFAULT_LINKIFY_OPTIONS = {
   target: '_blank',
   rel: 'noopener noreferrer',
 };
+const DEFAULT_SKELETON_LINES_CLASS_NAMES = ['w-full', 'w-3/4', 'w-1/2'];
 
-function LinkifyTextBase({ text, linkifyProps, ...props }, ref) {
+function LinkifyTextBase(
+  {
+    text,
+    pending = false,
+    onReady = () => {},
+    linkifyProps,
+    skeletonContainerProps,
+    skeletonLineProps,
+    skeletonLinesClassNames = DEFAULT_SKELETON_LINES_CLASS_NAMES,
+    ...props
+  },
+  ref
+) {
+  const pendingRef = useRef(pending);
   const options = useMemo(
     () => ({
       ...DEFAULT_LINKIFY_OPTIONS,
@@ -17,6 +31,31 @@ function LinkifyTextBase({ text, linkifyProps, ...props }, ref) {
     [linkifyProps]
   );
 
+  useEffect(() => {
+    if (pendingRef.current && !pending) {
+      onReady();
+    }
+
+    pendingRef.current = pending;
+  }, [pending, onReady]);
+
+  if (pending) {
+    return (
+      <div
+        {...skeletonContainerProps}
+        className={cn('flex items-start flex-col size-full', skeletonContainerProps?.className)}
+      >
+        {skeletonLinesClassNames.map((width, index) => (
+          <span
+            {...skeletonLineProps}
+            key={`${width}_${index}`}
+            className={cn('bg-muted-foreground animate-pulse rounded-md my-1 h-4', skeletonLineProps?.className, width)}
+          ></span>
+        ))}
+      </div>
+    );
+  }
+
   return (
     <p ref={ref} {...props} className={cn('wrap-break-word text-base', props?.className)}>
       <Linkify options={options}>{text}</Linkify>

package/gen/components/placeholder-text.jsx

@@ -12,7 +12,11 @@ function PlaceholderTextBase({ title, titles = [], rowProps, ...props }, ref) {
       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>
       ))}