@droppii-org/chat-mobile 0.2.0

package/src/screens/chat-detail/ChatComposer.tsx

@@ -0,0 +1,412 @@
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Keyboard,
+  Platform,
+  StyleSheet,
+  TextInput,
+  type NativeSyntheticEvent,
+  type TextInputContentSizeChangeEventData,
+} from 'react-native';
+import Reanimated, {
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import {
+  useKeyboardState,
+  useReanimatedKeyboardAnimation,
+} from 'react-native-keyboard-controller';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { KContainer, KImage, KColors, KSpacingValue } from '@droppii/libs';
+import { ChatQuickActions } from './ChatQuickActions';
+import { ChatAttachmentPanel } from './ChatAttachmentPanel';
+import { getAttachmentPanelHeight } from './constants';
+import type { ChatComposerProps } from './types';
+
+const ACCESSORY_ANIMATION_MS = 250;
+const ACCESSORY_SETTLE_MS = 150;
+const IS_IOS = Platform.OS === 'ios';
+const INPUT_FONT_SIZE = 16;
+const INPUT_LINE_HEIGHT = 22.4;
+const INPUT_MAX_HEIGHT = INPUT_LINE_HEIGHT * 5;
+
+export const ChatComposer = memo(
+  ({
+    value,
+    placeholder = 'Nhập tin nhắn...',
+    onChangeText,
+    onSend,
+    onPressAttach,
+    onPressEmoji,
+    quickActions,
+    attachmentActions,
+    onQuickActionPress,
+    onAttachmentAction,
+    renderQuickAction,
+    renderAttachmentAction,
+    attachmentColumns,
+  }: ChatComposerProps) => {
+    const hasAttachmentActions = !!attachmentActions?.length;
+    const inputRef = useRef<TextInput>(null);
+    const isSwitchingToAttachmentRef = useRef(false);
+    const [isAttachmentOpen, setIsAttachmentOpen] = useState(false);
+    const [isInputFocused, setIsInputFocused] = useState(false);
+    const [isInputWrapped, setIsInputWrapped] = useState(false);
+    const insets = useSafeAreaInsets();
+
+    const isKeyboardVisible = useKeyboardState((state) => state.isVisible);
+    const keyboardHeight = useKeyboardState((state) => state.height);
+    const { progress: keyboardProgress } = useReanimatedKeyboardAnimation();
+
+    const panelHeight = useMemo(
+      () =>
+        hasAttachmentActions
+          ? getAttachmentPanelHeight(
+              attachmentActions.length,
+              attachmentColumns
+            )
+          : 0,
+      [attachmentActions, attachmentColumns, hasAttachmentActions]
+    );
+
+    const attachmentHeightSV = useSharedValue(0);
+    const panelHeightSV = useSharedValue(panelHeight);
+    const switchKeyboardHeightSV = useSharedValue(0);
+    const isKeyboardToAttachmentSwitchSV = useSharedValue(false);
+
+    useEffect(() => {
+      panelHeightSV.value = panelHeight;
+    }, [panelHeight, panelHeightSV]);
+
+    const openAttachment = useCallback(() => {
+      attachmentHeightSV.value = withTiming(panelHeight, {
+        duration: ACCESSORY_ANIMATION_MS,
+      });
+      setIsAttachmentOpen(true);
+    }, [attachmentHeightSV, panelHeight]);
+
+    const closeAttachment = useCallback(() => {
+      attachmentHeightSV.value = withTiming(0, {
+        duration: ACCESSORY_ANIMATION_MS,
+      });
+      setIsAttachmentOpen(false);
+    }, [attachmentHeightSV]);
+
+    const finishKeyboardToAttachmentSwitch = useCallback(() => {
+      if (!isSwitchingToAttachmentRef.current) {
+        return;
+      }
+
+      isSwitchingToAttachmentRef.current = false;
+      isKeyboardToAttachmentSwitchSV.value = false;
+
+      const targetHeight = panelHeightSV.value;
+      const startHeight = switchKeyboardHeightSV.value;
+
+      if (Math.abs(startHeight - targetHeight) < 1) {
+        attachmentHeightSV.value = targetHeight;
+        return;
+      }
+
+      attachmentHeightSV.value = withTiming(targetHeight, {
+        duration: ACCESSORY_SETTLE_MS,
+      });
+    }, [
+      attachmentHeightSV,
+      isKeyboardToAttachmentSwitchSV,
+      panelHeightSV,
+      switchKeyboardHeightSV,
+    ]);
+
+    useEffect(() => {
+      if (!isKeyboardVisible && isSwitchingToAttachmentRef.current) {
+        finishKeyboardToAttachmentSwitch();
+      }
+    }, [finishKeyboardToAttachmentSwitch, isKeyboardVisible]);
+
+    useAnimatedReaction(
+      () => ({
+        switching: isKeyboardToAttachmentSwitchSV.value,
+        progress: keyboardProgress.value,
+      }),
+      (current, previous) => {
+        if (
+          current.switching &&
+          current.progress === 0 &&
+          (previous?.progress ?? 1) > 0
+        ) {
+          runOnJS(finishKeyboardToAttachmentSwitch)();
+        }
+      },
+      [finishKeyboardToAttachmentSwitch]
+    );
+
+    useEffect(() => {
+      if (isSwitchingToAttachmentRef.current) {
+        return;
+      }
+
+      if (isKeyboardVisible && isAttachmentOpen) {
+        closeAttachment();
+      }
+    }, [closeAttachment, isAttachmentOpen, isKeyboardVisible]);
+
+    const accessorySlotStyle = useAnimatedStyle(() => {
+      if (isKeyboardToAttachmentSwitchSV.value) {
+        return {
+          height: switchKeyboardHeightSV.value * (1 - keyboardProgress.value),
+        };
+      }
+
+      return {
+        height: attachmentHeightSV.value,
+      };
+    });
+
+    const handleSend = useCallback(() => {
+      onSend?.();
+    }, [onSend]);
+
+    const handleToggleAttachment = useCallback(() => {
+      if (!hasAttachmentActions) {
+        return;
+      }
+
+      if (isAttachmentOpen) {
+        closeAttachment();
+        return;
+      }
+
+      onPressAttach?.();
+      inputRef.current?.blur();
+
+      if (isKeyboardVisible && keyboardHeight > 0) {
+        isSwitchingToAttachmentRef.current = true;
+        switchKeyboardHeightSV.value = keyboardHeight;
+        isKeyboardToAttachmentSwitchSV.value = true;
+        setIsAttachmentOpen(true);
+        Keyboard.dismiss();
+        return;
+      }
+
+      openAttachment();
+    }, [
+      closeAttachment,
+      isAttachmentOpen,
+      isKeyboardVisible,
+      keyboardHeight,
+      isKeyboardToAttachmentSwitchSV,
+      onPressAttach,
+      hasAttachmentActions,
+      openAttachment,
+      switchKeyboardHeightSV,
+    ]);
+
+    const handleInputFocus = useCallback(() => {
+      setIsInputFocused(true);
+
+      if (!isAttachmentOpen) {
+        return;
+      }
+
+      closeAttachment();
+    }, [closeAttachment, isAttachmentOpen]);
+
+    const handleInputBlur = useCallback(() => {
+      setIsInputFocused(false);
+    }, []);
+
+    const handleInputContentSizeChange = useCallback(
+      (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+        const { height } = event.nativeEvent.contentSize;
+        setIsInputWrapped(height > INPUT_LINE_HEIGHT + 4);
+      },
+      []
+    );
+
+    const isMultilineInput = useMemo(() => {
+      if (!value) {
+        return false;
+      }
+
+      return value.includes('\n') || isInputWrapped;
+    }, [isInputWrapped, value]);
+
+    useEffect(() => {
+      if (!value) {
+        setIsInputWrapped(false);
+      }
+    }, [value]);
+
+    const renderEmojiNode = useCallback(
+      () => (
+        <KContainer.Touchable
+          marginR="0.5rem"
+          onPress={onPressEmoji}
+          activeOpacity={0.7}
+        >
+          <KImage.VectorIcons
+            name="sticker-o"
+            size={22}
+            color={KColors.gray.normal}
+          />
+        </KContainer.Touchable>
+      ),
+      [onPressEmoji]
+    );
+
+    const inputRowStyle = useMemo(
+      () => ({
+        paddingBottom:
+          isAttachmentOpen || isKeyboardVisible ? 8 : insets.bottom + 12,
+      }),
+      [insets.bottom, isAttachmentOpen, isKeyboardVisible]
+    );
+
+    return (
+      <KContainer.View background={'rgba(131, 137, 157, 0.05)'}>
+        <ChatQuickActions
+          actions={quickActions}
+          onActionPress={onQuickActionPress}
+          renderAction={renderQuickAction}
+        />
+
+        <KContainer.View
+          row
+          alignItems
+          paddingH="0.75rem"
+          paddingT="0.75rem"
+          paddingB="0.75rem"
+          style={inputRowStyle}
+        >
+          {hasAttachmentActions ? (
+            <KContainer.Touchable
+              onPress={handleToggleAttachment}
+              center
+              br="round"
+            >
+              <KImage.VectorIcons
+                name={isAttachmentOpen ? 'close-circle-o' : 'plus-circle-o'}
+                size={24}
+                color={
+                  isAttachmentOpen
+                    ? KColors.palette.primary.w400
+                    : KColors.palette.gray.w600
+                }
+              />
+            </KContainer.Touchable>
+          ) : null}
+
+          <KContainer.View
+            flex
+            marginL={hasAttachmentActions ? '0.75rem' : undefined}
+            style={styles.inputWrapper}
+          >
+            <KContainer.View
+              row
+              alignItems={isMultilineInput ? 'flex-end' : 'center'}
+              brW={1}
+              brC={
+                isInputFocused
+                  ? KColors.palette.primary.w400
+                  : KColors.palette.gray.w100
+              }
+              background={KColors.white}
+              paddingL="0.75rem"
+              style={styles.inputContainer}
+            >
+              <KContainer.View marginR="0.75rem">
+                <KImage.VectorIcons
+                  name="chat-suggest-o"
+                  size={24}
+                  color={KColors.gray.normal}
+                />
+              </KContainer.View>
+
+              <TextInput
+                ref={inputRef}
+                placeholder={placeholder}
+                placeholderTextColor={KColors.palette.gray.w200}
+                value={value}
+                onChangeText={onChangeText}
+                onFocus={handleInputFocus}
+                onBlur={handleInputBlur}
+                onContentSizeChange={handleInputContentSizeChange}
+                multiline
+                blurOnSubmit={false}
+                scrollEnabled
+                allowFontScaling={false}
+                underlineColorAndroid={KColors.transparent}
+                selectionColor={KColors.selector}
+                textAlignVertical={isMultilineInput ? 'top' : 'center'}
+                style={[styles.textInput]}
+              />
+
+              {renderEmojiNode()}
+            </KContainer.View>
+          </KContainer.View>
+
+          <KContainer.Touchable
+            onPress={handleSend}
+            width={40}
+            height={40}
+            center
+            br="round"
+            background={KColors.palette.primary.w400}
+            marginL="0.75rem"
+          >
+            <KImage.VectorIcons
+              name="send"
+              provider="MaterialCommunityIcons"
+              size={20}
+              color={KColors.white}
+            />
+          </KContainer.Touchable>
+        </KContainer.View>
+
+        {hasAttachmentActions ? (
+          <Reanimated.View
+            style={[styles.accessorySlot, accessorySlotStyle]}
+            pointerEvents={isAttachmentOpen ? 'auto' : 'none'}
+          >
+            <ChatAttachmentPanel
+              actions={attachmentActions}
+              columns={attachmentColumns}
+              onActionPress={onAttachmentAction}
+              renderAction={renderAttachmentAction}
+            />
+          </Reanimated.View>
+        ) : null}
+      </KContainer.View>
+    );
+  }
+);
+
+ChatComposer.displayName = 'ChatComposer';
+
+const styles = StyleSheet.create({
+  accessorySlot: {
+    overflow: 'hidden',
+    backgroundColor: KColors.palette.gray.w25,
+  },
+  inputWrapper: {
+    overflow: 'hidden',
+  },
+  inputContainer: {
+    borderRadius: KSpacingValue['1.25rem'],
+    minHeight: 48,
+    paddingVertical: IS_IOS ? 4 : 0,
+  },
+  textInput: {
+    flex: 1,
+    maxHeight: INPUT_MAX_HEIGHT,
+    fontSize: INPUT_FONT_SIZE,
+    lineHeight: INPUT_LINE_HEIGHT,
+    color: KColors.palette.gray.w900,
+    paddingVertical: IS_IOS ? 0 : 4,
+    paddingHorizontal: IS_IOS ? 2 : 0,
+    marginVertical: IS_IOS ? 0 : -8,
+  },
+});

package/src/screens/chat-detail/ChatDay.tsx

@@ -0,0 +1,73 @@
+import { memo, useMemo } from 'react';
+import { KContainer, KLabel } from '@droppii/libs';
+import type { DayProps } from 'react-native-gifted-chat';
+import { CHAT_BUBBLE_COLORS } from './constants';
+
+const formatTime = (date: Date) =>
+  date.toLocaleTimeString('vi-VN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+
+const formatDayLabel = (createdAt: Date | number): string | null => {
+  const date = new Date(createdAt);
+  if (Number.isNaN(date.getTime())) {
+    return null;
+  }
+
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  const messageDay = new Date(date);
+  messageDay.setHours(0, 0, 0, 0);
+
+  if (messageDay.getTime() === today.getTime()) {
+    return `${formatTime(date)} Hôm nay`;
+  }
+
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+
+  if (messageDay.getTime() === yesterday.getTime()) {
+    return `${formatTime(date)} Hôm qua`;
+  }
+
+  if (messageDay.getFullYear() === today.getFullYear()) {
+    return `${formatTime(date)} ${date.toLocaleDateString('vi-VN', {
+      day: 'numeric',
+      month: 'long',
+    })}`;
+  }
+
+  return `${formatTime(date)} ${date.toLocaleDateString('vi-VN', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  })}`;
+};
+
+export const ChatDay = memo(
+  ({ createdAt, containerStyle, wrapperStyle }: DayProps) => {
+    const dateStr = useMemo(
+      () => (createdAt == null ? null : formatDayLabel(createdAt)),
+      [createdAt]
+    );
+
+    if (!dateStr) {
+      return null;
+    }
+
+    return (
+      <KContainer.View center marginV="0.5rem" style={containerStyle}>
+        <KContainer.View style={wrapperStyle}>
+          <KLabel.Text typo="TextXsNormal" color={CHAT_BUBBLE_COLORS.dayLabel}>
+            {dateStr}
+          </KLabel.Text>
+        </KContainer.View>
+      </KContainer.View>
+    );
+  }
+);
+
+ChatDay.displayName = 'ChatDay';

package/src/screens/chat-detail/ChatDetail.tsx

@@ -0,0 +1,118 @@
+import { memo, useState, useCallback } from 'react';
+import { StyleSheet } from 'react-native';
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
+import { KContainer } from '@droppii/libs';
+import ChatDetailHeader from './ChatDetailHeader';
+import { ChatList } from './ChatList';
+import { ChatComposer } from './ChatComposer';
+import type { ChatDetailProps } from './types';
+
+const ChatDetail = memo(
+  ({
+    title,
+    subtitle,
+    avatarUri,
+    avatarFullName,
+    chatType,
+    showAddMember,
+    onBack,
+    onPressSearch,
+    onPressAddMember,
+    onPressMenu,
+    onPressAvatar,
+    messages = [],
+    currentUserId,
+    renderChat,
+    onLoadEarlier,
+    isLoading,
+    isLoadingEarlier,
+    hasMoreEarlier,
+    quickActions,
+    inputValue,
+    inputPlaceholder,
+    onChangeInput,
+    onSend,
+    onPressAttach,
+    onPressEmoji,
+    attachmentActions,
+    onQuickActionPress,
+    onAttachmentAction,
+    renderQuickAction,
+    renderAttachmentAction,
+    attachmentColumns,
+  }: ChatDetailProps) => {
+    const [internalInput, setInternalInput] = useState('');
+
+    const handleChangeInput = useCallback(
+      (text: string) => {
+        if (onChangeInput) {
+          onChangeInput(text);
+          return;
+        }
+        setInternalInput(text);
+      },
+      [onChangeInput]
+    );
+
+    const currentInput = inputValue ?? internalInput;
+
+    return (
+      <KContainer.Page flex edges={['bottom']}>
+        <ChatDetailHeader
+          title={title}
+          subtitle={subtitle}
+          avatarUri={avatarUri}
+          avatarFullName={avatarFullName}
+          chatType={chatType}
+          showAddMember={showAddMember}
+          onBack={onBack}
+          onPressSearch={onPressSearch}
+          onPressAddMember={onPressAddMember}
+          onPressMenu={onPressMenu}
+          onPressAvatar={onPressAvatar}
+        />
+
+        <KeyboardAvoidingView
+          style={styles.keyboardAvoiding}
+          behavior="padding"
+        >
+          <ChatList
+            messages={messages}
+            currentUserId={currentUserId}
+            renderChat={renderChat}
+            onLoadEarlier={onLoadEarlier}
+            isLoading={isLoading}
+            isLoadingEarlier={isLoadingEarlier}
+            hasMoreEarlier={hasMoreEarlier}
+          />
+
+          <ChatComposer
+            value={currentInput}
+            placeholder={inputPlaceholder}
+            onChangeText={handleChangeInput}
+            onSend={onSend}
+            onPressAttach={onPressAttach}
+            onPressEmoji={onPressEmoji}
+            quickActions={quickActions}
+            attachmentActions={attachmentActions}
+            onQuickActionPress={onQuickActionPress}
+            onAttachmentAction={onAttachmentAction}
+            renderQuickAction={renderQuickAction}
+            renderAttachmentAction={renderAttachmentAction}
+            attachmentColumns={attachmentColumns}
+          />
+        </KeyboardAvoidingView>
+      </KContainer.Page>
+    );
+  }
+);
+
+ChatDetail.displayName = 'ChatDetail';
+
+const styles = StyleSheet.create({
+  keyboardAvoiding: {
+    flex: 1,
+  },
+});
+
+export default ChatDetail;

package/src/screens/chat-detail/ChatDetailHeader.tsx

@@ -0,0 +1,114 @@
+import { memo, useMemo } from 'react';
+import {
+  KNavigation,
+  KContainer,
+  KImage,
+  KLabel,
+  KColors,
+} from '@droppii/libs';
+import { Avatar } from '../../components/Avatar';
+import type { ChatDetailHeaderProps } from './types';
+
+const ChatDetailHeader = memo(
+  ({
+    title,
+    subtitle,
+    avatarUri,
+    avatarFullName,
+    showAddMember = false,
+    onBack,
+    onPressSearch,
+    onPressAddMember,
+    onPressMenu,
+    onPressAvatar,
+  }: ChatDetailHeaderProps) => {
+    const rightButtons = useMemo(() => {
+      const buttons = [
+        {
+          id: 'search',
+          index: 2,
+          icon: {
+            vectorName: 'search-o',
+          },
+          onPress: onPressSearch,
+        },
+        {
+          id: 'menu',
+          index: 0,
+          icon: {
+            vectorName: 'align-justify-o',
+          },
+          onPress: onPressMenu,
+        },
+      ];
+
+      if (showAddMember) {
+        buttons.splice(1, 0, {
+          id: 'add-member',
+          index: 1,
+          icon: {
+            vectorName: 'user-add-o',
+          },
+          onPress: onPressAddMember,
+        });
+      }
+
+      return buttons;
+    }, [onPressSearch, onPressAddMember, onPressMenu, showAddMember]);
+
+    const leftNode = useMemo(
+      () => (
+        <KContainer.View row alignItems marginR="0.25rem">
+          <KContainer.Touchable onPress={onBack} height={40} width={40} center>
+            <KImage.VectorIcons
+              name="arrow-left-o"
+              size={24}
+              color={KColors.primary.normal}
+            />
+          </KContainer.Touchable>
+
+          <Avatar
+            source={avatarUri}
+            fullName={avatarFullName ?? title}
+            size="md"
+            onPress={onPressAvatar}
+          />
+        </KContainer.View>
+      ),
+      [avatarFullName, avatarUri, onBack, onPressAvatar, title]
+    );
+
+    const subTitleNode = useMemo(() => {
+      if (!subtitle) {
+        return null;
+      }
+
+      return (
+        <KLabel.Text
+          typo="TextSmNormal"
+          color={KColors.palette.gray.w500}
+          numberOfLines={1}
+        >
+          {subtitle}
+        </KLabel.Text>
+      );
+    }, [subtitle]);
+
+    return (
+      <KNavigation.Header
+        theme="light"
+        alignment="left"
+        size="small"
+        leftNode={leftNode}
+        title={title}
+        subTitle={subTitleNode}
+        initRightButtons={rightButtons}
+        shadow
+      />
+    );
+  }
+);
+
+ChatDetailHeader.displayName = 'ChatDetailHeader';
+
+export default ChatDetailHeader;