leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Philip Cesar Garay
2025-07-31 21:25:33 +08:00
parent 5cfbc81e3a
commit 84fc719a10
307 changed files with 46470 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ChatInterface.js
+294
View File
@@ -0,0 +1,294 @@
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);
}
};