musicland/src/components/ChatInterface.js

import { useState, useRef, useEffect, useGlobal, getGlobal } from "reactn";
import {
  Pressable,
  TextInput,
  View,
  Image,
  Text,
  Keyboard,
  FlatList,
} from "react-native";
import { responsiveHeight } from "../actions/responsiveSizes.js";
import { useDataFromRef } from "react-native-minuit/src/hooks";
import { useKeyboard } from "@react-native-community/hooks";
import moment from "moment";

import { Fonts, gutters, Palette } from "../styles";
import Style, { bubbleStyle } from "../styles/Style";

import firebase, { chatsRef } from "../config/firebase";

import { formatNameForConfidentiality } from "../helpers/index.js";
import useLayoutType from "../hooks/useLayoutType.js";

import TypingLoader from "./TypingLoader";
import Avatar from "./Avatar";
import RenderChatFile from "./RenderChatFile.js";
import HyperlinkContainer from "./HyperlinkContainer.js";

export default ({
  chatID = null,

  layout = "default", // default | taskSideBar

  containerStyle = {},
  messageListContainerStyle = {},
}) => {
  const [currentUID] = useGlobal("currentUID");
  const [currentProjectData] = useGlobal("currentProjectData");

  const [isTyping] = useState(false);

  const flatListRef = useRef();

  const { isNative } = useLayoutType();
  const { keyboardShown = false } = useKeyboard();

  const { data: messageList } = useDataFromRef({
    ref: chatID
      ? chatsRef
          .doc(chatID)
          .collection("messages")
          .orderBy("createdAt", "desc")
          .limit(50)
      : null,
    simpleRef: false,
    listener: true,
    condition: chatID,
    refreshArray: [chatID],
    documentID: "messageID",
  });

  let conversation = [
    isTyping ? { senderID: "minuit.ai", userTyping: true } : null,
    ...(messageList || []),
  ].filter((item) => item);

  if (layout === "default") {
    conversation = conversation.reverse();
  }

  useEffect(() => {
    if (flatListRef?.current && isNative && keyboardShown) {
      flatListRef?.current?.scrollToEnd?.({ animated: true });
    }
  }, [keyboardShown, isNative]);

  return (
    <View
      style={{
        height: responsiveHeight(85, true),
        ...containerStyle,
      }}
    >
      <View style={{ flex: 1, ...messageListContainerStyle }}>
        <FlatList
          ref={flatListRef}
          data={conversation}
          estimatedItemSize={50}
          scrollEnabled
          contentContainerStyle={{
            paddingBottom: responsiveHeight(40),
          }}
          showsVerticalScrollIndicator={false}
          keyExtractor={(item, index) =>
            item?.messageID
              ? `${item?.messageID?.toString()}-${index}`
              : `no-messageID-${index}`
          }
          renderItem={({
            item: {
              createdAt = null,
              senderID,
              senderName = "",
              senderProfilePicture = null,
              text = "",
              userTyping = false,
              files = [],
            },
            index,
          }) => {
            const isCurrentUser = senderID === currentUID;
            const isChatbot = senderID === "minuit.ai";

            const senderData =
              currentProjectData?.teamMembers?.[senderID] || {};

            const isDayChange =
              moment(createdAt?.toDate()).format("DD/MM/YYYY") !==
                moment(
                  conversation[index - 1]?.createdAt?.toDate() || new Date()
                ).format("DD/MM/YYYY") || !conversation[index - 1];

            return (
              <>
                {isDayChange && (
                  <View
                    style={{
                      ...Style.containerCenter,
                      marginBottom: gutters / 2,
                    }}
                  >
                    <Text
                      style={{
                        ...Fonts({
                          type: "default",
                          color: Palette.white,
                          style: { textAlign: "center", opacity: 0.5 },
                        }),
                      }}
                    >
                      {moment(createdAt?.toDate()).format(
                        "[Le] DD/MM/YYYY [à] HH:mm"
                      )}
                    </Text>

                    <View
                      style={{
                        ...Style.separatorHorizontal,
                        width: "100%",
                      }}
                    />
                  </View>
                )}

                <View
                  style={[
                    Style.containerRow,
                    {
                      flexDirection: isCurrentUser ? "row-reverse" : "row",
                      alignItems: "flex-end",
                      width: "100%",
                      marginBottom: gutters / 2,
                    },
                  ]}
                >
                  {!isCurrentUser && (
                    <View
                      style={{
                        ...Style.containerRound,
                        ...Style.containerCenter,
                        ...(isCurrentUser
                          ? {
                              marginLeft: gutters / 2,
                              backgroundColor: Palette.primary,
                            }
                          : {
                              marginRight: gutters / 2,
                              backgroundColor: "transparent",
                              borderColor: Palette.primary,
                              borderWidth: 1,
                            }),
                      }}
                    >
                      <Avatar
                        name={
                          isChatbot ? "m" : senderData?.name || senderName || ""
                        }
                        url={
                          senderData?.profilePictureURL ||
                          senderProfilePicture ||
                          null
                        }
                        size={35}
                      />
                    </View>
                  )}

                  <View
                    style={{
                      alignItems: isCurrentUser ? "flex-end" : "flex-start",
                    }}
                  >
                    {files?.map((props, index) => (
                      <RenderChatFile
                        key={index}
                        {...props}
                        containerStyle={{
                          marginBottom:
                            index !== files?.length - 1
                              ? gutters / 2
                              : text?.length > 0 || userTyping
                              ? gutters / 2
                              : 0,
                        }}
                      />
                    )) || null}

                    {(text?.length > 0 || userTyping) && (
                      <View
                        style={{
                          ...bubbleStyle({
                            isCurrentUser,
                            customStyle: {
                              marginBottom: files?.length > 0 ? gutters / 2 : 0,
                            },
                          }),
                        }}
                      >
                        {userTyping ? (
                          <TypingLoader />
                        ) : (
                          <HyperlinkContainer>
                            <Text
                              style={Fonts({
                                type: "default",
                                style: {
                                  color: Palette.white,
                                  textAlign: isCurrentUser ? "right" : "left",
                                  width: "100%",
                                },
                              })}
                            >
                              {text}
                            </Text>
                          </HyperlinkContainer>
                        )}
                      </View>
                    )}
                  </View>
                </View>
              </>
            );
          }}
        />
      </View>
    </View>
  );
};

export const onSendMessage = async ({
  chatID = null,
  projectID = null,
  message = "",
  setMessage = () => {},
  setIsTyping = () => {},
  customPayload = {},
}) => {
  try {
    const currentUID = getGlobal()?.currentUID || null;
    const { name = "", profilePictureURL = null } =
      getGlobal()?.currentUserData || {};

    if (message.length > 0 || customPayload?.files?.length > 0) {
      Keyboard.dismiss();
      setMessage("");

      const messageData = {
        projectID,
        createdAt: firebase.firestore.FieldValue.serverTimestamp(),
        senderID: currentUID,
        senderName: formatNameForConfidentiality({ name }),
        senderProfilePicture: profilePictureURL || null,
        text: message,
        ...customPayload,
      };

      await chatsRef.doc(chatID).collection("messages").add(messageData);
    }
  } catch (error) {
    console.log(error);
  } finally {
    setIsTyping(false);
  }
};