@codewithvincent/react-native-love-chat 0.1.0

package/dist/components/InputToolbar.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { IMessage } from '../types';
+interface InputToolbarProps {
+    onSend?: (messages: any[]) => void;
+    text?: string;
+    onTextChanged?: (text: string) => void;
+    renderComposer?: (props: any) => React.ReactNode;
+    renderSend?: (props: any) => React.ReactNode;
+    user: any;
+    placeholder?: string;
+    onPressAttachment?: (type: string) => void;
+    replyMessage?: IMessage | null;
+    onClearReply?: () => void;
+    renderUploadFooter?: (props: any) => React.ReactNode;
+}
+declare const InputToolbar: (props: InputToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export default InputToolbar;

package/dist/components/InputToolbar.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const Composer_1 = __importDefault(require("./Composer"));
+const theme_1 = require("../utils/theme");
+const Icons_1 = require("./Icons");
+const UploadFooter_1 = __importDefault(require("./UploadFooter"));
+const FooterReplyPreview_1 = __importDefault(require("./FooterReplyPreview"));
+const InputToolbar = (props) => {
+    const theme = (0, theme_1.useTheme)();
+    const { onSend, text, renderComposer, renderSend, user, onPressAttachment, replyMessage, onClearReply, renderUploadFooter, ...rest } = props;
+    const [showUploadFooter, setShowUploadFooter] = (0, react_1.useState)(false);
+    const [keyboardHeight] = (0, react_1.useState)(new react_native_1.Animated.Value(0));
+    (0, react_1.useEffect)(() => {
+        const showSub = react_native_1.Keyboard.addListener(react_native_1.Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow', e => {
+            react_native_1.Animated.timing(keyboardHeight, {
+                toValue: e.endCoordinates.height,
+                duration: e.duration || 250,
+                useNativeDriver: false,
+            }).start();
+            setShowUploadFooter(false);
+        });
+        const hideSub = react_native_1.Keyboard.addListener(react_native_1.Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide', e => {
+            react_native_1.Animated.timing(keyboardHeight, {
+                toValue: 0,
+                duration: e.duration || 250,
+                useNativeDriver: false,
+            }).start();
+        });
+        return () => {
+            showSub.remove();
+            hideSub.remove();
+        };
+    }, []);
+    const handleSend = () => {
+        if (text && text.trim().length > 0) {
+            const message = {
+                _id: Math.round(Math.random() * 1000000),
+                text: text.trim(),
+                createdAt: new Date(),
+                user: user,
+                replyTo: replyMessage,
+            };
+            onSend === null || onSend === void 0 ? void 0 : onSend([message]);
+            onClearReply === null || onClearReply === void 0 ? void 0 : onClearReply();
+        }
+    };
+    const toggleUploadFooter = () => {
+        if (showUploadFooter) {
+            setShowUploadFooter(false);
+            react_native_1.Keyboard.dismiss();
+        }
+        else {
+            setShowUploadFooter(true);
+            react_native_1.Keyboard.dismiss();
+        }
+    };
+    const handleActionPress = (type) => {
+        onPressAttachment === null || onPressAttachment === void 0 ? void 0 : onPressAttachment(type);
+        setShowUploadFooter(false);
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [replyMessage && ((0, jsx_runtime_1.jsx)(FooterReplyPreview_1.default, { chatMessage: replyMessage, clearReply: onClearReply, userId: user._id })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, { borderTopColor: theme.colors.borderGray, backgroundColor: theme.colors.white }], children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: toggleUploadFooter, style: styles.addButton, children: (0, jsx_runtime_1.jsx)(Icons_1.PlusIcon, { size: 24, color: theme.colors.darkRed }) }), renderComposer ? (renderComposer(props)) : ((0, jsx_runtime_1.jsx)(Composer_1.default, { ...rest, text: text, onSend: handleSend, textInputProps: {
+                            onFocus: () => setShowUploadFooter(false)
+                        } })), renderSend ? (renderSend({ ...props, onSend: handleSend })) : ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: handleSend, style: styles.sendButton, disabled: !text || text.trim().length === 0, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.sendIconWrapper, { backgroundColor: theme.colors.darkRed }, (!text || text.trim().length === 0) && { backgroundColor: theme.colors.gray }], children: (0, jsx_runtime_1.jsx)(Icons_1.SendIcon, { size: 18, color: theme.colors.white }) }) }))] }), showUploadFooter && (renderUploadFooter ? (renderUploadFooter({
+                onActionPress: handleActionPress,
+                theme,
+            })) : ((0, jsx_runtime_1.jsx)(UploadFooter_1.default, { onActionPress: handleActionPress })))] }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        borderTopWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderTopColor: theme_1.defaultTheme.colors.borderGray,
+        backgroundColor: theme_1.defaultTheme.colors.white,
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        paddingVertical: 6,
+        paddingHorizontal: 8,
+    },
+    addButton: {
+        paddingHorizontal: 8,
+        paddingVertical: 10,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 0,
+    },
+    sendButton: {
+        paddingHorizontal: 8,
+        paddingVertical: 10,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 0,
+    },
+    sendIconWrapper: {
+        backgroundColor: theme_1.defaultTheme.colors.darkRed,
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    disabledSendWrapper: {
+        backgroundColor: theme_1.defaultTheme.colors.gray,
+    },
+});
+exports.default = InputToolbar;

package/dist/components/Message.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { IMessage, IUser } from '../types';
+interface MessageProps {
+    currentMessage: IMessage;
+    nextMessage?: IMessage;
+    previousMessage?: IMessage;
+    user: IUser;
+    renderBubble?: (props: any) => React.ReactNode;
+    onLongPress?: (context: any, message: IMessage) => void;
+    onPress?: (context: any, message: IMessage) => void;
+    onReply?: (message: IMessage) => void;
+    onReaction?: (message: IMessage, reaction: string) => void;
+    onDeleteMessage?: (message: IMessage) => void;
+    onDownloadFile?: (message: IMessage) => void;
+    renderMessageText?: (props: any) => React.ReactNode;
+    renderMessageImage?: (props: any) => React.ReactNode;
+    renderMessageVideo?: (props: any) => React.ReactNode;
+    renderMessageAudio?: (props: any) => React.ReactNode;
+}
+declare const Message: (props: MessageProps) => import("react/jsx-runtime").JSX.Element;
+export default Message;

package/dist/components/Message.js

@@ -0,0 +1,131 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const ReanimatedSwipeable_1 = __importDefault(require("react-native-gesture-handler/ReanimatedSwipeable"));
+const Bubble_1 = __importDefault(require("./Bubble"));
+const MessageStatus_1 = __importDefault(require("./MessageStatus"));
+const theme_1 = require("../utils/theme");
+const ReplyPreview_1 = __importDefault(require("./ReplyPreview"));
+const ImageCard_1 = __importDefault(require("./media/ImageCard"));
+const VideoCard_1 = __importDefault(require("./media/VideoCard"));
+const AudioCard_1 = __importDefault(require("./media/AudioCard"));
+const FileCard_1 = __importDefault(require("./media/FileCard"));
+const ReactionBubble_1 = __importDefault(require("./ReactionBubble"));
+const Message = (props) => {
+    var _a, _b, _c;
+    const [isFullScreen, setFullScreen] = (0, react_1.useState)(false);
+    const theme = (0, theme_1.useTheme)();
+    const { currentMessage, user, onLongPress, onPress, renderBubble, onReply, onReaction, onDeleteMessage, onDownloadFile, } = props;
+    const isMine = currentMessage.user._id === user._id || currentMessage.isMine;
+    const swipeableRef = (0, react_1.useRef)(null);
+    const fileType = (_a = currentMessage.fileType) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    const isMedia = !!(currentMessage.image || currentMessage.video || currentMessage.audio || fileType === 'image' || fileType === 'video' || fileType === 'file' || fileType === 'audio');
+    const timestamp = new Date(currentMessage.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    const handleLongPress = () => {
+        onLongPress === null || onLongPress === void 0 ? void 0 : onLongPress(null, currentMessage);
+    };
+    const handlePress = () => {
+        onPress === null || onPress === void 0 ? void 0 : onPress(null, currentMessage);
+        if (!isMedia)
+            return;
+        if (currentMessage.image || fileType === 'image') {
+            setFullScreen(!isFullScreen);
+        }
+    };
+    const handleReactionPress = (reaction) => {
+        if (reaction && onReaction) {
+            onReaction(currentMessage, reaction);
+        }
+    };
+    const handleSwipeReply = () => {
+        var _a;
+        (_a = swipeableRef.current) === null || _a === void 0 ? void 0 : _a.close();
+        onReply === null || onReply === void 0 ? void 0 : onReply(currentMessage);
+    };
+    const renderLeftActions = () => {
+        // Invisible view for swipe action trigger
+        return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: 50 } });
+    };
+    const renderContent = () => {
+        if (currentMessage.image || fileType === 'image') {
+            if (props.renderMessageImage)
+                return props.renderMessageImage(props);
+            return ((0, jsx_runtime_1.jsx)(ImageCard_1.default, { uri: currentMessage.image || currentMessage.fileUrl || '', time: timestamp, setFullScreen: setFullScreen, isFullScreen: isFullScreen }));
+        }
+        if (currentMessage.video || fileType === 'video') {
+            if (props.renderMessageVideo)
+                return props.renderMessageVideo(props);
+            return ((0, jsx_runtime_1.jsx)(VideoCard_1.default, { file: { uri: currentMessage.video || currentMessage.fileUrl || '' }, time: timestamp, onLongPress: handleLongPress }));
+        }
+        if (currentMessage.audio || fileType === 'audio') {
+            if (props.renderMessageAudio)
+                return props.renderMessageAudio(props);
+            return (0, jsx_runtime_1.jsx)(AudioCard_1.default, { uri: currentMessage.audio || currentMessage.fileUrl || '', isMine: !!isMine });
+        }
+        if (fileType === 'file') {
+            return (0, jsx_runtime_1.jsx)(FileCard_1.default, { fileName: currentMessage.fileName || 'File', isMine: !!isMine, time: timestamp });
+        }
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: currentMessage.text ? (props.renderMessageText ? (props.renderMessageText(props)) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.text, isMine ? { color: theme.colors.ownMessageText } : { color: theme.colors.otherMessageText }], children: currentMessage.text }))) : null }));
+    };
+    // Reactions logic
+    const reactions = ['👍', '❤️', '😂', '😮', '😢', '🤲'];
+    const myReaction = (_c = (_b = currentMessage.reactions) === null || _b === void 0 ? void 0 : _b.find((r) => r.userId === user._id)) === null || _c === void 0 ? void 0 : _c.emoji;
+    const bubbleContent = ((0, jsx_runtime_1.jsxs)(Bubble_1.default, { isOwnMessage: !!isMine, isMedia: isMedia, children: [currentMessage.replyTo && ((0, jsx_runtime_1.jsx)(ReplyPreview_1.default, { replyTo: currentMessage.replyTo })), renderContent(), !isMedia && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.footer, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.time, isMine ? styles.timeMine : { color: theme.colors.timestamp }], children: timestamp }), isMine && (0, jsx_runtime_1.jsx)(MessageStatus_1.default, { status: currentMessage.status, isMine: !!isMine })] }))] }));
+    const messageView = ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, isMine ? styles.containerMine : styles.containerOther], children: (0, jsx_runtime_1.jsx)(ReactionBubble_1.default, { reactions: reactions, isMine: !!isMine, selectedReaction: myReaction, onReactionPress: handleReactionPress, onPress: handlePress, onLongPress: handleLongPress, bubbleStyle: styles.reactionPopup, onReply: () => onReply === null || onReply === void 0 ? void 0 : onReply(currentMessage), onDelete: onDeleteMessage ? () => onDeleteMessage(currentMessage) : undefined, onDownload: onDownloadFile ? () => onDownloadFile(currentMessage) : undefined, isFile: isMedia, children: renderBubble ? renderBubble({
+                ...props,
+                isMine,
+                children: renderContent(),
+            }) : bubbleContent }) }));
+    if (onReply) {
+        return ((0, jsx_runtime_1.jsx)(ReanimatedSwipeable_1.default, { ref: swipeableRef, onSwipeableOpen: handleSwipeReply, renderLeftActions: renderLeftActions, leftThreshold: 40, overshootLeft: false, children: messageView }));
+    }
+    return messageView;
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        marginBottom: 10,
+        flexDirection: 'row',
+        paddingHorizontal: 8,
+    },
+    containerMine: {
+        justifyContent: 'flex-end',
+    },
+    containerOther: {
+        justifyContent: 'flex-start',
+    },
+    text: {
+        fontSize: 16,
+        lineHeight: 20,
+    },
+    textMine: {
+        color: theme_1.defaultTheme.colors.ownMessageText,
+    },
+    textOther: {
+        color: theme_1.defaultTheme.colors.otherMessageText,
+    },
+    footer: {
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        marginTop: 4,
+    },
+    time: {
+        fontSize: 10,
+        marginRight: 4,
+    },
+    timeMine: {
+        color: 'rgba(255, 255, 255, 0.7)',
+    },
+    timeOther: {
+        color: '#aaa',
+    },
+    reactionPopup: {
+        backgroundColor: '#202A30',
+    }
+});
+exports.default = Message;

package/dist/components/MessageList.d.ts

@@ -0,0 +1,6 @@
+import { ChatProps } from '../types';
+interface MessageListProps extends ChatProps {
+    inverted?: boolean;
+}
+declare const MessageList: (props: MessageListProps) => import("react/jsx-runtime").JSX.Element;
+export default MessageList;

package/dist/components/MessageList.js

@@ -0,0 +1,111 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const flash_list_1 = require("@shopify/flash-list");
+const Message_1 = __importDefault(require("./Message"));
+const utils_1 = require("../utils");
+const theme_1 = require("../utils/theme");
+const MessageList = (props) => {
+    const { messages, user, onLoadEarlier, loadEarlier, isLoadingEarlier } = props;
+    const listRef = (0, react_1.useRef)(null);
+    const isMounted = (0, react_1.useRef)(false);
+    const theme = (0, theme_1.useTheme)();
+    const listData = (0, react_1.useMemo)(() => {
+        return Array.isArray(messages) ? [...messages].reverse() : [];
+    }, [messages]);
+    // Automatic scrolling logic
+    (0, react_1.useEffect)(() => {
+        if (listData.length === 0)
+            return;
+        if (!isMounted.current) {
+            // Scenario 1: Initial mount - scroll to bottom immediately
+            isMounted.current = true;
+            // Use a small timeout to ensure list is ready
+            setTimeout(() => {
+                var _a;
+                (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollToEnd({ animated: false });
+            }, 0);
+        }
+        else {
+            // Scenario 2: New message added - smooth scroll to bottom
+            // We can also check if we are already at the bottom to avoid annoyance,
+            // but requirements state "always displays the most recent message".
+            setTimeout(() => {
+                var _a;
+                (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollToEnd({ animated: true });
+            }, 200);
+        }
+    }, [listData.length]);
+    const renderItem = (0, react_1.useCallback)(({ item, index }) => {
+        const previousMessage = listData[index - 1];
+        const nextMessage = listData[index + 1];
+        const messageProps = {
+            ...props,
+            currentMessage: item,
+            previousMessage,
+            nextMessage,
+            user,
+        };
+        if (props.renderMessage) {
+            return props.renderMessage(messageProps);
+        }
+        const showDateHeader = shouldRenderDateHeader(item, previousMessage);
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [showDateHeader && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.dateHeader, { backgroundColor: theme.colors.lightGrey }], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.dateText, { color: theme.colors.gray }], children: new Date(item.createdAt).toLocaleDateString(undefined, {
+                            year: 'numeric',
+                            month: 'short',
+                            day: 'numeric',
+                        }) }) })), (0, jsx_runtime_1.jsx)(Message_1.default, { ...messageProps })] }));
+    }, [listData, user, props]);
+    const keyExtractor = (0, react_1.useCallback)((item) => item._id.toString(), []);
+    const renderHeader = () => {
+        if (loadEarlier) {
+            return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.loadEarlierContainer, children: isLoadingEarlier ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: theme.colors.primary })) : ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onLoadEarlier, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.loadEarlierText, { color: theme.colors.darkRed }], children: "Load earlier messages" }) })) }));
+        }
+        return null;
+    };
+    return ((0, jsx_runtime_1.jsx)(flash_list_1.FlashList, { ref: listRef, data: listData, renderItem: renderItem, keyExtractor: keyExtractor, contentContainerStyle: styles.listContent, ListHeaderComponent: renderHeader, keyboardShouldPersistTaps: props.keyboardShouldPersistTaps, maintainVisibleContentPosition: {
+            autoscrollToBottomThreshold: 0.2,
+            animateAutoScrollToBottom: true,
+            startRenderingFromBottom: true,
+        }, onStartReached: loadEarlier ? onLoadEarlier : undefined, onStartReachedThreshold: 0.1, estimatedItemSize: 72, ...props.listViewProps }));
+};
+const shouldRenderDateHeader = (currentMessage, previousMessage) => {
+    if (!previousMessage)
+        return true;
+    return !(0, utils_1.isSameDay)(currentMessage, previousMessage);
+};
+const styles = react_native_1.StyleSheet.create({
+    listContent: {
+        paddingVertical: 10,
+        paddingHorizontal: 10,
+        paddingBottom: 20,
+    },
+    dateHeader: {
+        alignSelf: 'center',
+        backgroundColor: theme_1.defaultTheme.colors.lightGrey,
+        paddingVertical: 4,
+        paddingHorizontal: 12,
+        borderRadius: 16,
+        marginBottom: 16,
+        marginTop: 16,
+    },
+    dateText: {
+        fontSize: 12,
+        color: theme_1.defaultTheme.colors.gray,
+        fontWeight: '500',
+    },
+    loadEarlierContainer: {
+        alignItems: 'center',
+        paddingVertical: 10,
+    },
+    loadEarlierText: {
+        color: theme_1.defaultTheme.colors.darkRed,
+        fontWeight: '600',
+    },
+});
+exports.default = MessageList;

package/dist/components/MessageStatus.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    status?: 'pending' | 'sent' | 'delivered' | 'read';
+    isMine?: boolean;
+}
+declare const MessageStatus: ({ status, isMine }: Props) => import("react/jsx-runtime").JSX.Element;
+export default MessageStatus;

package/dist/components/MessageStatus.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const theme_1 = require("../utils/theme");
+const ClockIcon = ({ color }) => ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M12 6V12L16 14" })] }));
+const CheckIcon = ({ color }) => ((0, jsx_runtime_1.jsx)(react_native_svg_1.default, { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M20 6L9 17L4 12" }) }));
+const DoubleCheckIcon = ({ color }) => ((0, jsx_runtime_1.jsx)(react_native_svg_1.default, { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M7 12l5 5L22 7M2 12l5 5m5-5l5-5" }) }));
+const MessageStatus = ({ status, isMine }) => {
+    const theme = (0, theme_1.useTheme)();
+    if (!isMine)
+        return null;
+    switch (status) {
+        case 'pending':
+            return (0, jsx_runtime_1.jsx)(ClockIcon, { color: theme.colors.gray });
+        case 'sent':
+            return (0, jsx_runtime_1.jsx)(CheckIcon, { color: theme.colors.gray });
+        case 'delivered':
+            return (0, jsx_runtime_1.jsx)(DoubleCheckIcon, { color: theme.colors.gray });
+        case 'read':
+            return (0, jsx_runtime_1.jsx)(DoubleCheckIcon, { color: theme.colors.lightRed }); // Use theme color or blue
+        default:
+            return null;
+    }
+};
+exports.default = MessageStatus;

package/dist/components/ReactionBubble.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+export declare const computePositions: ({ pos, reactionsCount, isMine, screenW, screenH, popupItemWidth, popupHeight, menuWidth, menuItemCount, menuItemHeight, verticalGap, horizontalMargin, reactionCoreWidth, reactionHorizontalPadding, popupHorizontalPadding, }: {
+    pos: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    reactionsCount: number;
+    isMine: boolean;
+    screenW: number;
+    screenH: number;
+    popupItemWidth?: number;
+    popupHeight?: number;
+    menuWidth?: number;
+    menuItemCount?: number;
+    menuItemHeight?: number;
+    verticalGap?: number;
+    horizontalMargin?: number;
+    reactionCoreWidth?: number;
+    reactionHorizontalPadding?: number;
+    popupHorizontalPadding?: number;
+}) => {
+    emojiPanel: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    menu: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        above: boolean;
+    };
+};
+export type ReactionBubbleProps = {
+    reactions: string[];
+    isMine: boolean;
+    selectedReaction?: string;
+    onReactionPress: (reaction: string | undefined) => void;
+    style?: any;
+    bubbleStyle?: any;
+    reactionStyle?: any;
+    highlightColor?: string;
+    children: React.ReactNode;
+    onPress?: () => void;
+    onLongPress?: () => void;
+    onReply?: () => void;
+    onDelete?: () => void;
+    onDownload?: () => void;
+    isFile?: boolean;
+};
+export default function ReactionBubble({ reactions, selectedReaction, onReactionPress, style, bubbleStyle, reactionStyle, highlightColor, children, isMine, onPress, onLongPress, onReply, onDelete, onDownload, isFile, ...rest }: ReactionBubbleProps): import("react/jsx-runtime").JSX.Element;