PSMessages

Danh sách tin nhắn của một cuộc hội thoại

navigation.navigate('PSMessagesScreen', {
  targetThreadId: targetThreadId,
  targetUserId: targetUserId,
  targetMessageId: targetMessageId,
});

RN CLI

import {PSMessages} from '@communi/chat-react-native';

Expo

import {PSMessages} from '@piscale/chat-expo';

export const PSMessagesScreen = ({...}: {...}) => {
    return <PSMessages {...props} />;
}

type PSMessagesProps = PSMessageNavigationContextValue & {
  targetThreadId?: string | undefined;
  targetUserId?: string | undefined;
  targetMessageId?: number | undefined;
  startCommand?: string | undefined;
  screenContext?: string | undefined;
  messagesStyles?: PSMessagesStyles;
  isExportUserId?: boolean;
  customizedMessageItemFactory?:
    | null
    | ((message: PSMessageModel) => React.JSX.Element | null)
    | undefined;
};

Ghi chú

targetThreadId && targetUserId không thể cùng null

export type PSMessageNavigationContextValue = {
  onBackPress?: null | (() => void) | undefined;
  onCompleteLeaveThread?: null | (() => void) | undefined;
  onThreadProfilePress?: null | ((threadId: string) => void) | undefined;
  onUrlPress?: null | ((url: string) => void) | undefined;
  onEmailPress?: null | ((email: string) => void) | undefined;
  onPhoneNumberPress?: null | ((phoneNumber: string) => void) | undefined;
  onForwardMessage?:
    | null
    | ((threadId: string, messageIds: number[]) => void)
    | undefined;
  onMessagesPinnedPress?: null | ((threadId: string) => void) | undefined;
  onViewFilePress?: null | ((filePath: string) => void) | undefined;
  onUserPress?:
    | null
    | ((psUserId: string, currentThreadPartnerId?: string, userId?: string) => void)
    | undefined;
  onShareMessagePress?: null | ((message: PSMessageModel) => void) | undefined;
  onChatBotActionPress?: null | ((uri?: string, label?: string, payload?: string) => void) | undefined;
  onCommentPress?: null | ((threadId: string) => void);
  onParentThreadPress?: null | ((threadId: string) => void);
  onSearchMessagePress?: null | ((threadId: string) => void);
};

Tên	Mô tả	*	Bắt buộc
targetThreadId	Tham số xác định id của cuộc hội thoại		✗
targetUserId	Tham số xác định piscale_user_id của đối tác trong cuộc hội thoại 1-1		✗
targetMessageId	Tham số xác định id của message để cuộn tới		✗
startCommand	Tham số xác định command của message sẽ tự động được gửi khi bắt đầu vào cuộc hội thoại chat với bot		✗
screenContext	Tham số xác định ngữ cảnh của màn hình hiện tại		✗
messagesStyles	Tham số xác định style cho các thành phần UI PSMessagesStyles		✗
customizedMessageItemFactory	Tham số hỗ trợ render các loại message tuỳ chỉnh từ phía App		✗
onBackPress	Tham số gọi lại khi cần back về state trước		✗
onCompleteLeaveThread	Tham số gọi lại khi rời nhóm hoặc xoá trò chuyện		✗
onThreadProfilePress	Tham số gọi lại khi cần chuyển hướng tới PSThreadProfile		✗
onUrlPress	Tham số gọi lại khi user nhấn vào link trong tin nhắn		✗
onEmailPress	Tham số gọi lại khi user nhấn vào email trong tin nhắn		✗
onPhoneNumberPress	Tham số gọi lại khi user nhấn vào phone number trong tin nhắn		✗
onForwardMessage	Tham số gọi lại khi cần chuyển hướng tới PSForwardMessage		✗
onMessagesPinnedPress	Tham số gọi lại khi cần chuyển hướng tới PSMessagesPinned		✗
onViewFilePress	Tham số gọi lại khi user nhấn vào file trong tin nhắn		✗
onUserPress	Tham số gọi lại khi user nhấn vào avatar hoặc mention trong tin nhắn. Với 3 parameters là psUserId, currentThreadPartnerId, userId. Với psUserId currentThreadPartnerId là id user lưu trong hệ thống chat, userId là id user hệ thống của bạn (lưu ý: để đảm bảo userId luôn được trả về ở đây bạn cần set isExportUserId = true props của PSMessages). VD 1 use case thông thường handle onUserPress tham khảo		✗
onShareMessagePress	Tham số gọi lại khi user muốn share tin nhắn		✗
onChatBotActionPress	Tham số gọi lại khi user nhấn vào action của Bot trong tin nhắn		✗
onCommentPress	Tham số gọi lại khi cần chuyển hướng tới cuộc hội thoại chủ đề (SubThread)		✗
onParentThreadPress	Tham số gọi lại khi cần chuyển hướng tới cuộc hội thoại cha		✗
onSearchMessagePress	Tham số gọi lại khi cần chuyển hướng tới PSSearchMessage		✗

PSMessagesStyles

type PSMessagesStyles = {
  actionsBar?: {
    style?: StyleProp<ViewStyle>;
    rightButton?: ({userId}: {userId?: string}) => React.ReactElement;
    isMenuRightButtonVisible?: boolean;
    isSearchRightButtonVisible?: boolean;
  };
  renderEmptyMessages?: (userId: string) => React.ReactElement;
  background?: {
    style?: StyleProp<ViewStyle>;
    imageProps?: ImagePropsBase;
  };
  messageActions?: {
    allowedActions?: PSMessageAction[];
    renderMessageMenuOptions?: ActionItem[];
  };
};

Tên	Mô tả	*	Bắt buộc
style	Custom style cho action bar		✗
rightButton	Nhận vào một component có props chứa userId để hiện thị các button phía góc trên bên phải màn hình cuộc hội thoại 1-1 ({userId}) => React.ReactElement		✗
isMenuRightButtonVisible	Tham số cấu hình ẩn hiển button menu phía góc trên bên phải màn hình. Mặc định là true		✗
isSearchRightButtonVisible	Tham số cấu hình ẩn hiển button search phía góc trên bên phải màn hình. Mặc định là true		✗
renderEmptyMessages	Nhận vào một component có props chứa userId để hiện thị empty view khi trong cuộc hội thoại 1-1 chưa có tin nhắn ({userId}) => React.ReactElement		✗
allowedActions	Tham số truyền vào danh sách các hành động được phép thực hiện khi long-press vào một tin nhắn. Mặc định là undefined có nghĩa được phép sử dụng tất cả các hành động có sẵn		✗
renderMessageMenuOptions	Tham số truyền vào cho phép custom thêm các hành động khi long-press vào một tin nhắn. Trong ActionItem ngoài id text icon onPress(message) còn có positionInMenuOptions cho phép xác định vị trí action đó trong list.		✗

Keyboard

Để phục vụ cho việc tuỳ chỉnh các UI liên quan đến chiều cao của Keyboard trên Android chúng tôi cần sử dụng SoftInputMode = SOFT_INPUT_ADJUST_NOTHING khi ở trong phạm vi PSMessagesScreen. Khi PSMessagesScreen có trạng thái là Paused cần khôi phục lại SoftInputMode = SOFT_INPUT_ADJUST_RESIZE;

RN CLI

import {PSKeyboard, SoftInputMode} from '@communi/chat-react-native';

Expo

import {PSKeyboard, SoftInputMode} from '@piscale/chat-expo';

import {Platform} from 'react-native';
import {useIsFocused} from '@react-navigation/native';

export const PSMessagesScreen = ({route, ...}: {...}) => {
  const isFocused = useIsFocused();

  React.useEffect(() => {
    if (Platform.OS === 'android') {
      if (isFocused) {
        PSKeyboard.setWindowSoftInputMode(
          SoftInputMode.SOFT_INPUT_ADJUST_NOTHING,
        );
      } else if (
        route.name === 'PSMessagesScreen' &&
        navigationRef?.getCurrentRoute()?.name !== 'PSMessagesScreen'
      ) {
        // khi gọi tuần tự pop và push PSMessagesScreen
        // thì screen được push sẽ created trc và screen được pop sẽ destroyed sau
        // vậy nên cần logic này để đảm bảo khi PSMessagesScreen.isFocused
        // thì inputMode = SoftInputMode.SOFT_INPUT_ADJUST_NOTHING
        PSKeyboard.setWindowSoftInputMode(
          SoftInputMode.SOFT_INPUT_ADJUST_RESIZE,
        );
      }
    }
  }, [isFocused, route.name]);

  return <PSMessages {...props} />;
}

Use case thông thường khi handle các props

onUserPress

const onUserPress = React.useCallback(
    (psUserId: string, currentThreadPartnerId?: string, userId?: string) => {

      // bạn có thể check điều kiện có cho phép chat 1-1 với user này không tại đây
      
      // nav sang màn chat 1-1 với user này bằng cách mở 1 PSMesssage khác
      if (psUserId !== currentThreadPartnerId) {
        // psUserId == currentThreadPartnerId khi đang trong cuộc hội thoại chat 1-1 
        // nav chat 1-1
        navigateToThreadDetails({
          targetUserId: psUserId,
        });
      }
    },
    [],
  );

info

hàm xử lý navigateToThreadDetails có thể tham khảo tại Navigation To Thread