@connectycube/react-ui-kit 0.0.19 → 0.0.22

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

package/src/components/connectycube-ui/attachment.tsx

@@ -0,0 +1,269 @@
+import type React from 'react';
+import { forwardRef, memo, useImperativeHandle, useRef, useState } from 'react';
+import { File, FileXCorner, type LucideProps } from 'lucide-react';
+import { Spinner } from './spinner';
+import { cn, getRandomString } from './utils';
+
+interface AttachmentProps {
+  uid?: string;
+  url?: string;
+  mimeType?: string;
+  pending?: boolean;
+  onReady?: (skipOnce?: boolean) => void;
+  linkProps?: AttachmentLinkProps;
+  containerProps?: React.ComponentProps<'div'>;
+}
+
+interface AttachmentLinkProps
+  extends React.ComponentProps<'a'>, Omit<AttachmentProps, 'containerProps' & 'mimeType' & 'onReady'> {
+  children?: React.ReactNode;
+}
+
+interface AttachmentImageProps
+  extends React.ComponentProps<'img'>, Omit<AttachmentProps, 'containerProps' & 'mimeType'> {}
+
+interface AttachmentAudioProps
+  extends React.ComponentProps<'audio'>, Omit<AttachmentProps, 'linkProps' & 'mimeType' & 'onReady'> {}
+
+interface AttachmentVideoProps extends React.ComponentProps<'video'>, Omit<AttachmentProps, 'linkProps' & 'mimeType'> {
+  maxSize?: number;
+}
+
+interface AttachmentFileProps extends LucideProps, Omit<AttachmentProps, 'containerProps' & 'mimeType'> {
+  name?: string | undefined;
+  iconElement?: React.ReactNode;
+}
+
+interface AttachmentFailedProps extends LucideProps, Omit<AttachmentProps, 'linkProps' & 'mimeType'> {
+  name?: string | undefined;
+  iconElement?: React.ReactNode;
+}
+
+function AttachmentLinkBase(
+  { url, pending = false, children, ...props }: AttachmentLinkProps,
+  ref: React.ForwardedRef<HTMLAnchorElement>
+) {
+  return (
+    <a
+      ref={ref}
+      target="_blank"
+      rel="noopener noreferrer"
+      {...props}
+      href={url}
+      className={cn(
+        '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={pending} layout="overlay" />
+    </a>
+  );
+}
+
+const AttachmentLink = forwardRef<HTMLAnchorElement, AttachmentLinkProps>(AttachmentLinkBase);
+
+AttachmentLink.displayName = 'AttachmentLink';
+
+function AttachmentAudioBase(
+  { uid, url, pending = false, containerProps, ...props }: AttachmentAudioProps,
+  ref: React.ForwardedRef<HTMLAudioElement>
+) {
+  const audioId = `attachment_audio_${uid || getRandomString()}`;
+
+  return (
+    <div
+      {...containerProps}
+      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={pending} layout="overlay" />
+    </div>
+  );
+}
+
+const AttachmentAudio = forwardRef<HTMLAudioElement, AttachmentAudioProps>(AttachmentAudioBase);
+
+function AttachmentVideoBase(
+  { uid, url, maxSize = 360, pending = false, onReady = () => {}, containerProps, ...props }: AttachmentVideoProps,
+  ref: React.ForwardedRef<HTMLVideoElement>
+) {
+  const videoId = `attachment_video_${uid || getRandomString()}`;
+  const videoMaxSize = `${maxSize}px`;
+  const playerRef = useRef<HTMLVideoElement>(null);
+  const [style, setStyle] = useState<React.CSSProperties>({
+    maxHeight: videoMaxSize,
+    maxWidth: videoMaxSize,
+  });
+  const handleCanPlay = (event: React.SyntheticEvent<HTMLVideoElement, Event>) => {
+    const player = playerRef.current;
+
+    if (player) {
+      const { videoWidth, videoHeight } = player;
+      const ratio = videoWidth / videoHeight || 1;
+      const height = ratio < 1 ? videoMaxSize : `${Math.round(maxSize / ratio)}px`;
+      const width = ratio < 1 ? `${Math.round(maxSize * ratio)}px` : videoMaxSize;
+
+      setStyle({ height, width, maxHeight: height, maxWidth: width });
+      props.onCanPlay?.(event);
+      onReady();
+    }
+  };
+
+  useImperativeHandle(ref, () => playerRef.current!, []);
+
+  return (
+    <div
+      {...containerProps}
+      className={cn('relative min-h-20 w-full rounded-md overflow-hidden', containerProps?.className)}
+    >
+      <video
+        id={videoId}
+        ref={playerRef}
+        src={url}
+        controls
+        preload="metadata"
+        style={style}
+        {...props}
+        onCanPlay={handleCanPlay}
+        className={cn('size-full', props?.className)}
+      />
+      <Spinner loading={pending} layout="overlay" />
+    </div>
+  );
+}
+
+const AttachmentVideo = forwardRef<HTMLVideoElement, AttachmentVideoProps>(AttachmentVideoBase);
+
+AttachmentVideo.displayName = 'AttachmentVideo';
+
+function AttachmentImageBase(
+  { uid, url, pending = false, onReady = () => {}, linkProps, ...props }: AttachmentImageProps,
+  ref: React.ForwardedRef<HTMLImageElement>
+) {
+  const imageId = `attachment_image_${uid || getRandomString()}`;
+  const handleLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    props.onLoad?.(event);
+    onReady();
+  };
+
+  return (
+    <AttachmentLink href={url} pending={pending} {...linkProps}>
+      <img
+        ref={ref}
+        src={url}
+        id={imageId}
+        alt="attachment"
+        {...props}
+        className={cn(
+          '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}
+      />
+    </AttachmentLink>
+  );
+}
+
+const AttachmentImage = forwardRef<HTMLImageElement, AttachmentImageProps>(AttachmentImageBase);
+
+AttachmentImage.displayName = 'AttachmentImage';
+
+function AttachmentFile({ url, name, pending = false, iconElement, linkProps, ...props }: AttachmentFileProps) {
+  const fileId = `attachment_file_${props.id || getRandomString()}`;
+
+  return (
+    <AttachmentLink
+      href={url}
+      pending={pending}
+      {...linkProps}
+      className={cn('flex-row gap-1.5 p-2 hover:shadow', linkProps?.className)}
+    >
+      {iconElement || (
+        <File
+          id={fileId}
+          {...props}
+          className={cn(
+            '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/80 group-hover:text-foreground duration-300 ease-out">
+          {name}
+        </span>
+      )}
+    </AttachmentLink>
+  );
+}
+
+AttachmentFile.displayName = 'AttachmentFile';
+
+function AttachmentFailed({
+  name = 'Unknown file',
+  pending = false,
+  iconElement,
+  containerProps,
+  ...props
+}: AttachmentFailedProps) {
+  const failedId = `attachment_failed_${props.id || getRandomString()}`;
+
+  return (
+    <div
+      {...containerProps}
+      className={cn(
+        '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
+      )}
+    >
+      {iconElement || (
+        <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={pending} layout="overlay" />
+    </div>
+  );
+}
+
+AttachmentFailed.displayName = 'AttachmentFailed';
+
+function AttachmentBase({ mimeType, ...props }: AttachmentProps) {
+  const [type = ''] = mimeType?.split('/') || [];
+
+  if (!props.url) {
+    return <AttachmentFailed {...props} />;
+  }
+
+  switch (type) {
+    case 'image':
+      return <AttachmentImage {...props} />;
+    case 'video':
+      return <AttachmentVideo {...props} />;
+    case 'audio':
+      return <AttachmentAudio {...props} />;
+    default:
+      return <AttachmentFile name={mimeType} {...props} />;
+  }
+}
+
+const Attachment = memo(AttachmentBase);
+
+Attachment.displayName = 'Attachment';
+
+export {
+  Attachment,
+  AttachmentLink,
+  AttachmentImage,
+  AttachmentAudio,
+  AttachmentVideo,
+  AttachmentFile,
+  AttachmentFailed,
+  type AttachmentLinkProps,
+  type AttachmentImageProps,
+  type AttachmentAudioProps,
+  type AttachmentVideoProps,
+  type AttachmentFileProps,
+  type AttachmentFailedProps,
+  type AttachmentProps,
+};