@kesha-antonov/react-native-chat 4.1.0

package/lib/MessagesContainer/types.d.ts

@@ -0,0 +1,91 @@
+import { RefObject } from 'react';
+import { FlatListProps, StyleProp, ViewStyle } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
+import { ScrollEvent } from 'react-native-reanimated';
+import { DayProps } from '../Day';
+import { LoadEarlierMessagesProps } from '../LoadEarlierMessages';
+import { MessageProps } from '../Message';
+import { User, IMessage, Reply } from '../Models';
+import { ReactionsProps } from '../Reactions';
+import { ReplyProps } from '../Reply';
+import { TypingIndicatorProps } from '../TypingIndicator/types';
+/**
+ * Typed AnimatedFlatList component that preserves generic type parameter.
+ * Uses react-native-gesture-handler's FlatList which respects keyboardShouldPersistTaps.
+ */
+export declare const AnimatedFlatList: <TMessage>(props: FlatListProps<TMessage> & {
+    ref?: RefObject<FlatList<TMessage>>;
+}) => React.ReactElement;
+export type AnimatedListProps<TMessage extends IMessage = IMessage> = Partial<Omit<FlatListProps<TMessage>, 'onScroll'> & {
+    onScroll?: (event: ScrollEvent) => void;
+}>;
+export type AnimatedList<TMessage> = FlatList<TMessage>;
+export interface MessagesContainerProps<TMessage extends IMessage = IMessage> extends Omit<TypingIndicatorProps, 'style'> {
+    /** Ref for the FlatList message container */
+    forwardRef?: RefObject<AnimatedList<TMessage>>;
+    /** Messages to display */
+    messages?: TMessage[];
+    /** Format to use for rendering dates; default is 'll' */
+    dateFormat?: string;
+    /** Format to use for rendering relative times */
+    dateFormatCalendar?: object;
+    /** User sending the messages: { _id, name, avatar } */
+    user?: User;
+    /** Additional props for FlatList */
+    listProps?: AnimatedListProps<TMessage>;
+    /** Reverses display order of messages; default is true */
+    isInverted?: boolean;
+    /** Controls whether or not the message bubbles appear at the top of the chat */
+    isAlignedTop?: boolean;
+    /** Enables the isScrollToBottomEnabled Component */
+    isScrollToBottomEnabled?: boolean;
+    /** Scroll to bottom wrapper style */
+    scrollToBottomStyle?: StyleProp<ViewStyle>;
+    /** Scroll to bottom content style */
+    scrollToBottomContentStyle?: StyleProp<ViewStyle>;
+    /** Distance from bottom before showing scroll to bottom button */
+    scrollToBottomOffset?: number;
+    /** Custom component to render when messages are empty */
+    renderChatEmpty?: () => React.ReactNode;
+    /** Custom footer component on the ListView, e.g. 'User is typing...' */
+    renderFooter?: (props: MessagesContainerProps<TMessage>) => React.ReactNode;
+    /** Custom message container */
+    renderMessage?: (props: MessageProps<TMessage>) => React.ReactElement;
+    /** Custom day above a message */
+    renderDay?: (props: DayProps) => React.ReactNode;
+    /** Custom "Load earlier messages" button */
+    renderLoadEarlier?: (props: LoadEarlierMessagesProps) => React.ReactNode;
+    /** Custom typing indicator */
+    renderTypingIndicator?: () => React.ReactNode;
+    /** Scroll to bottom custom component */
+    scrollToBottomComponent?: () => React.ReactNode;
+    /** Callback when quick reply is sent */
+    onQuickReply?: (replies: Reply[]) => void;
+    /** Props to pass to the LoadEarlierMessages component. The LoadEarlierMessages button is only visible when isAvailable is true. Includes isAvailable (controls button visibility), isInfiniteScrollEnabled (infinite scroll up when reach the top of messages container, automatically call onPress function if it exists - not yet supported for web), onPress (callback when button is pressed), isLoading (display loading indicator), label (override default "Load earlier messages" text), and styling props (containerStyle, wrapperStyle, textStyle, activityIndicatorStyle, activityIndicatorColor, activityIndicatorSize). */
+    loadEarlierMessagesProps?: LoadEarlierMessagesProps;
+    /** Style for TypingIndicator component */
+    typingIndicatorStyle?: StyleProp<ViewStyle>;
+    /** Enable animated day label that appears on scroll; default is true */
+    isDayAnimationEnabled?: boolean;
+    /** Reply functionality configuration */
+    reply?: ReplyProps<TMessage>;
+    /** Emoji reactions configuration */
+    reactions?: ReactionsProps<TMessage>;
+}
+export interface State {
+    showScrollBottom: boolean;
+    hasScrolled: boolean;
+}
+interface ViewLayout {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export type DaysPositions = {
+    [key: string]: ViewLayout & {
+        createdAt: number;
+    };
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/lib/MessagesContainer/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/MessagesContainer/types.ts"],"names":[],"mappings":"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"}

package/lib/MessagesContainer/types.js

@@ -0,0 +1,10 @@
+import { FlatList } from 'react-native-gesture-handler';
+import Animated from 'react-native-reanimated';
+/** Animated FlatList created from react-native-gesture-handler's FlatList */
+const RNGHAnimatedFlatList = Animated.createAnimatedComponent(FlatList);
+/**
+ * Typed AnimatedFlatList component that preserves generic type parameter.
+ * Uses react-native-gesture-handler's FlatList which respects keyboardShouldPersistTaps.
+ */
+export const AnimatedFlatList = RNGHAnimatedFlatList;
+//# sourceMappingURL=types.js.map

package/lib/MessagesContainer/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/MessagesContainer/types.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAA;AACvD,OAAO,QAAyB,MAAM,yBAAyB,CAAA;AAU/D,6EAA6E;AAC7E,MAAM,oBAAoB,GAAG,QAAQ,CAAC,uBAAuB,CAAC,QAAQ,CAAC,CAAA;AAEvE;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,oBAIT,CAAA"}

package/lib/Models.d.ts

@@ -0,0 +1,67 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+export interface LeftRightStyle<T> {
+    left?: StyleProp<T>;
+    right?: StyleProp<T>;
+}
+type renderFunction = (x: unknown) => React.ReactNode;
+export interface User {
+    _id: string | number;
+    name?: string;
+    avatar?: string | number | renderFunction;
+}
+export interface Reply {
+    title: string;
+    value: string;
+    messageId?: number | string;
+}
+export interface QuickReplies {
+    type: 'radio' | 'checkbox';
+    values: Reply[];
+    keepIt?: boolean;
+}
+export interface ReplyMessage extends Pick<IMessage, '_id' | 'text' | 'user' | 'audio' | 'image'> {
+}
+export interface MessageReaction {
+    /** The emoji character (e.g. '👍') */
+    emoji: string;
+    /** IDs of the users who reacted with this emoji */
+    userIds: (string | number)[];
+}
+export interface IMessage {
+    _id: string | number;
+    text: string;
+    createdAt: Date | number;
+    user: User;
+    image?: string;
+    video?: string;
+    audio?: string;
+    system?: boolean;
+    sent?: boolean;
+    received?: boolean;
+    pending?: boolean;
+    /** True while this message's text is still being streamed in (shows a typing cursor) */
+    streaming?: boolean;
+    quickReplies?: QuickReplies;
+    replyMessage?: ReplyMessage;
+    reactions?: MessageReaction[];
+    location?: {
+        latitude: number;
+        longitude: number;
+    };
+}
+export type IChatMessage = IMessage;
+export interface MessageVideoProps<TMessage extends IMessage> {
+    currentMessage: TMessage;
+    containerStyle?: StyleProp<ViewStyle>;
+    videoStyle?: StyleProp<ViewStyle>;
+    videoProps?: object;
+}
+export interface MessageAudioProps<TMessage extends IMessage> {
+    currentMessage: TMessage;
+    containerStyle?: StyleProp<ViewStyle>;
+    audioStyle?: StyleProp<ViewStyle>;
+    audioProps?: object;
+}
+export {};
+//# sourceMappingURL=Models.d.ts.map

package/lib/Models.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Models.d.ts","sourceRoot":"","sources":["../src/Models.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAEnD,MAAM,MAAM,IAAI,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;AAErD,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAA;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAA;CACrB;AAED,KAAK,cAAc,GAAG,CAAC,CAAC,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;AAErD,MAAM,WAAW,IAAI;IACnB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,cAAc,CAAA;CAC1C;AAED,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC5B;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,OAAO,GAAG,UAAU,CAAA;IAC1B,MAAM,EAAE,KAAK,EAAE,CAAA;IACf,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;CAAG;AAEpG,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;CAC7B;AAED,MAAM,WAAW,QAAQ;IACvB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,IAAI,GAAG,MAAM,CAAA;IACxB,IAAI,EAAE,IAAI,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,SAAS,CAAC,EAAE,eAAe,EAAE,CAAA;IAC7B,QAAQ,CAAC,EAAE;QACT,QAAQ,EAAE,MAAM,CAAA;QAChB,SAAS,EAAE,MAAM,CAAA;KAClB,CAAA;CACF;AAED,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAA;AAEnC,MAAM,WAAW,iBAAiB,CAAC,QAAQ,SAAS,QAAQ;IAC1D,cAAc,EAAE,QAAQ,CAAA;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACrC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACjC,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,iBAAiB,CAAC,QAAQ,SAAS,QAAQ;IAC1D,cAAc,EAAE,QAAQ,CAAA;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACrC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACjC,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB"}

package/lib/Models.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Models.js.map

package/lib/Models.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Models.js","sourceRoot":"","sources":["../src/Models.ts"],"names":[],"mappings":""}

package/lib/QuickReplies.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { IMessage, Reply } from './Models';
+export interface QuickRepliesProps<TMessage extends IMessage = IMessage> {
+    nextMessage?: TMessage;
+    currentMessage: TMessage;
+    color?: string;
+    sendText?: string;
+    quickReplyStyle?: StyleProp<ViewStyle>;
+    quickReplyTextStyle?: StyleProp<TextStyle>;
+    quickReplyContainerStyle?: StyleProp<ViewStyle>;
+    onQuickReply?(reply: Reply[]): void;
+    renderQuickReplySend?(): React.ReactNode;
+}
+export declare function QuickReplies({ currentMessage, nextMessage, color, quickReplyStyle, quickReplyTextStyle, quickReplyContainerStyle, onQuickReply, sendText, renderQuickReplySend, }: QuickRepliesProps<IMessage>): React.JSX.Element | null;
+//# sourceMappingURL=QuickReplies.d.ts.map

package/lib/QuickReplies.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickReplies.d.ts","sourceRoot":"","sources":["../src/QuickReplies.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAC7D,OAAO,EAGL,SAAS,EACT,SAAS,EACT,SAAS,EACH,MAAM,cAAc,CAAA;AAI5B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AA+B1C,MAAM,WAAW,iBAAiB,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ;IACrE,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,cAAc,EAAE,QAAQ,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACtC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC1C,wBAAwB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC/C,YAAY,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IACnC,oBAAoB,CAAC,IAAI,KAAK,CAAC,SAAS,CAAA;CACzC;AAQD,wBAAgB,YAAY,CAAE,EAC5B,cAAc,EACd,WAAW,EACX,KAAwB,EACxB,eAAe,EACf,mBAAmB,EACnB,wBAAwB,EACxB,YAAY,EACZ,QAAiB,EACjB,oBAAoB,GACrB,EAAE,iBAAiB,CAAC,QAAQ,CAAC,4BA6G7B"}

package/lib/QuickReplies.js

@@ -0,0 +1,107 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import { Color } from './Color';
+import { TouchableOpacity } from './components/TouchableOpacity';
+import { warning } from './logging';
+import stylesCommon from './styles';
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        maxWidth: 300,
+    },
+    quickReply: {
+        borderWidth: 1,
+        maxWidth: 200,
+        paddingVertical: 7,
+        paddingHorizontal: 12,
+        minHeight: 50,
+        borderRadius: 13,
+        margin: 3,
+    },
+    quickReplyText: {
+        overflow: 'visible',
+    },
+    sendLink: {
+        borderWidth: 0,
+    },
+    sendLinkText: {
+        color: Color.defaultBlue,
+        fontWeight: '600',
+        fontSize: 17,
+    },
+});
+const sameReply = (currentReply) => (reply) => currentReply.value === reply.value;
+const diffReply = (currentReply) => (reply) => currentReply.value !== reply.value;
+export function QuickReplies({ currentMessage, nextMessage, color = Color.peterRiver, quickReplyStyle, quickReplyTextStyle, quickReplyContainerStyle, onQuickReply, sendText = 'Send', renderQuickReplySend, }) {
+    const { type } = currentMessage.quickReplies;
+    const [replies, setReplies] = useState([]);
+    const shouldComponentDisplay = useMemo(() => {
+        const hasReplies = !!currentMessage && !!currentMessage.quickReplies;
+        const hasNext = !!nextMessage && !!nextMessage._id;
+        const keepIt = currentMessage.quickReplies.keepIt;
+        if (hasReplies && !hasNext)
+            return true;
+        if (hasReplies && hasNext && keepIt)
+            return true;
+        return false;
+    }, [currentMessage, nextMessage]);
+    const handleSend = useCallback((repliesData) => () => {
+        onQuickReply?.(repliesData.map((reply) => ({
+            ...reply,
+            messageId: currentMessage._id,
+        })));
+    }, [onQuickReply, currentMessage]);
+    const handlePress = useCallback((reply) => () => {
+        if (currentMessage) {
+            const { type } = currentMessage.quickReplies;
+            switch (type) {
+                case 'radio': {
+                    handleSend([reply])();
+                    return;
+                }
+                case 'checkbox': {
+                    if (replies.find(sameReply(reply)))
+                        setReplies(replies.filter(diffReply(reply)));
+                    else
+                        setReplies([...replies, reply]);
+                    return;
+                }
+                default: {
+                    warning(`onQuickReply unknown type: ${type}`);
+                }
+            }
+        }
+    }, [replies, currentMessage, handleSend]);
+    const renderSendButton = useMemo(() => {
+        if (!replies.length)
+            return null;
+        return (<TouchableOpacity style={[stylesCommon.centerItems, styles.quickReply, styles.sendLink]} onPress={handleSend(replies)}>
+        {renderQuickReplySend?.() || (<Text style={styles.sendLinkText}>{sendText}</Text>)}
+      </TouchableOpacity>);
+    }, [replies, handleSend, renderQuickReplySend, sendText]);
+    if (!shouldComponentDisplay)
+        return null;
+    return (<View style={[styles.container, quickReplyContainerStyle]}>
+      {currentMessage.quickReplies.values.map((reply, index) => {
+            const selected = type === 'checkbox' && replies.find(sameReply(reply));
+            return (<TouchableOpacity onPress={handlePress(reply)} style={[
+                    stylesCommon.centerItems,
+                    styles.quickReply,
+                    quickReplyStyle,
+                    { borderColor: color },
+                    selected && { backgroundColor: color },
+                ]} key={`${reply.value}-${index}`}>
+              <Text numberOfLines={10} ellipsizeMode='tail' style={[
+                    styles.quickReplyText,
+                    { color: selected ? Color.white : color },
+                    quickReplyTextStyle,
+                ]}>
+                {reply.title}
+              </Text>
+            </TouchableOpacity>);
+        })}
+      {renderSendButton}
+    </View>);
+}
+//# sourceMappingURL=QuickReplies.js.map

package/lib/QuickReplies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickReplies.js","sourceRoot":"","sources":["../src/QuickReplies.tsx"],"names":[],"mappings":"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"}

package/lib/Reactions/MessageReactions.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { IMessage } from '../Models';
+import { MessageReactionsDisplayProps } from './types';
+export declare const MessageReactions: <TMessage extends IMessage = IMessage>(props: MessageReactionsDisplayProps<TMessage>) => React.ReactElement | null;
+//# sourceMappingURL=MessageReactions.d.ts.map

package/lib/Reactions/MessageReactions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageReactions.d.ts","sourceRoot":"","sources":["../../src/Reactions/MessageReactions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AACpC,OAAO,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAA;AAEtD,eAAO,MAAM,gBAAgB,GAAI,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EACnE,OAAO,4BAA4B,CAAC,QAAQ,CAAC,KAC5C,KAAK,CAAC,YAAY,GAAG,IAwDvB,CAAA"}

package/lib/Reactions/MessageReactions.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Color } from '../Color';
+export const MessageReactions = (props) => {
+    const { reactions, currentUserId, position, onReactionPress, containerStyle, reactionStyle, reactionActiveStyle, reactionTextStyle, reactionCountStyle, } = props;
+    if (!reactions || reactions.length === 0)
+        return null;
+    return (<View style={[
+            styles.container,
+            position === 'right' ? styles.containerRight : styles.containerLeft,
+            containerStyle,
+        ]}>
+      {reactions.map(reaction => {
+            const isActive = currentUserId != null && reaction.userIds.includes(currentUserId);
+            const count = reaction.userIds.length;
+            return (<Pressable key={reaction.emoji} onPress={() => onReactionPress?.(reaction.emoji)} style={({ pressed }) => [
+                    styles.pill,
+                    isActive ? styles.pillActive : styles.pillInactive,
+                    isActive ? reactionActiveStyle : reactionStyle,
+                    pressed && styles.pillPressed,
+                ]}>
+            <Text style={[styles.emoji, reactionTextStyle]}>{reaction.emoji}</Text>
+            {count > 1 && (<Text style={[
+                        styles.count,
+                        isActive && styles.countActive,
+                        reactionCountStyle,
+                    ]}>
+                {count}
+              </Text>)}
+          </Pressable>);
+        })}
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        marginTop: 3,
+        gap: 4,
+    },
+    containerLeft: {
+        justifyContent: 'flex-start',
+        paddingLeft: 4,
+    },
+    containerRight: {
+        justifyContent: 'flex-end',
+        paddingRight: 4,
+    },
+    pill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: 12,
+        paddingHorizontal: 7,
+        paddingVertical: 3,
+        borderWidth: 1,
+    },
+    pillInactive: {
+        backgroundColor: 'rgba(0, 0, 0, 0.06)',
+        borderColor: 'transparent',
+    },
+    pillActive: {
+        backgroundColor: 'rgba(0, 132, 255, 0.15)',
+        borderColor: Color.defaultBlue,
+    },
+    pillPressed: {
+        opacity: 0.7,
+    },
+    emoji: {
+        fontSize: 15,
+        lineHeight: 20,
+    },
+    count: {
+        fontSize: 12,
+        marginLeft: 3,
+        color: Color.black,
+        lineHeight: 20,
+    },
+    countActive: {
+        color: Color.defaultBlue,
+        fontWeight: '600',
+    },
+});
+//# sourceMappingURL=MessageReactions.js.map

package/lib/Reactions/MessageReactions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageReactions.js","sourceRoot":"","sources":["../../src/Reactions/MessageReactions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEhE,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAIhC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,KAA6C,EAClB,EAAE;IAC7B,MAAM,EACJ,SAAS,EACT,aAAa,EACb,QAAQ,EACR,eAAe,EACf,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,GACnB,GAAG,KAAK,CAAA;IAET,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC;QACtC,OAAO,IAAI,CAAA;IAEb,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,MAAM,CAAC,SAAS;YAChB,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa;YACnE,cAAc;SACf,CAAC,CAEF;MAAA,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACxB,MAAM,QAAQ,GAAG,aAAa,IAAI,IAAI,IAAI,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAA;YAClF,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAA;YAErC,OAAO,CACL,CAAC,SAAS,CACR,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CACpB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,eAAe,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CACjD,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;oBACtB,MAAM,CAAC,IAAI;oBACX,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY;oBAClD,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,aAAa;oBAC9C,OAAO,IAAI,MAAM,CAAC,WAAW;iBAC9B,CAAC,CAEF;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,IAAI,CACtE;YAAA,CAAC,KAAK,GAAG,CAAC,IAAI,CACZ,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;wBACL,MAAM,CAAC,KAAK;wBACZ,QAAQ,IAAI,MAAM,CAAC,WAAW;wBAC9B,kBAAkB;qBACnB,CAAC,CAEF;gBAAA,CAAC,KAAK,CACR;cAAA,EAAE,IAAI,CAAC,CACR,CACH;UAAA,EAAE,SAAS,CAAC,CACb,CAAA;QACH,CAAC,CAAC,CACJ;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,aAAa,EAAE,KAAK;QACpB,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,CAAC;QACZ,GAAG,EAAE,CAAC;KACP;IACD,aAAa,EAAE;QACb,cAAc,EAAE,YAAY;QAC5B,WAAW,EAAE,CAAC;KACf;IACD,cAAc,EAAE;QACd,cAAc,EAAE,UAAU;QAC1B,YAAY,EAAE,CAAC;KAChB;IACD,IAAI,EAAE;QACJ,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,CAAC;QACpB,eAAe,EAAE,CAAC;QAClB,WAAW,EAAE,CAAC;KACf;IACD,YAAY,EAAE;QACZ,eAAe,EAAE,qBAAqB;QACtC,WAAW,EAAE,aAAa;KAC3B;IACD,UAAU,EAAE;QACV,eAAe,EAAE,yBAAyB;QAC1C,WAAW,EAAE,KAAK,CAAC,WAAW;KAC/B;IACD,WAAW,EAAE;QACX,OAAO,EAAE,GAAG;KACb;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,EAAE;KACf;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,CAAC;QACb,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,UAAU,EAAE,EAAE;KACf;IACD,WAAW,EAAE;QACX,KAAK,EAAE,KAAK,CAAC,WAAW;QACxB,UAAU,EAAE,KAAK;KAClB;CACF,CAAC,CAAA"}

package/lib/Reactions/ReactionPicker.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IMessage } from '../Models';
+import { ReactionPickerProps } from './types';
+/**
+ * Lightweight quick-picker shown on long-press: a floating row of emojis
+ * anchored to the pressed bubble. For a full emoji browser, pass a custom
+ * component via `reactions.renderReactionPicker` (see the example app).
+ */
+export declare const ReactionPicker: <TMessage extends IMessage = IMessage>(props: ReactionPickerProps<TMessage>) => React.ReactElement | null;
+//# sourceMappingURL=ReactionPicker.d.ts.map

package/lib/Reactions/ReactionPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionPicker.d.ts","sourceRoot":"","sources":["../../src/Reactions/ReactionPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAU1C,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAO7C;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EACjE,OAAO,mBAAmB,CAAC,QAAQ,CAAC,KACnC,KAAK,CAAC,YAAY,GAAG,IA+EvB,CAAA"}

package/lib/Reactions/ReactionPicker.js

@@ -0,0 +1,84 @@
+import React, { useCallback } from 'react';
+import { Dimensions, Modal, Pressable, StyleSheet, Text, View, } from 'react-native';
+const PICKER_HEIGHT = 54;
+const EMOJI_BUTTON_SIZE = 46;
+const PICKER_PADDING_H = 8;
+const PICKER_VERTICAL_OFFSET = 8;
+/**
+ * Lightweight quick-picker shown on long-press: a floating row of emojis
+ * anchored to the pressed bubble. For a full emoji browser, pass a custom
+ * component via `reactions.renderReactionPicker` (see the example app).
+ */
+export const ReactionPicker = (props) => {
+    const { visible, emojis, onSelect, onDismiss, position, pageX = 0, pageY = 0, bubbleWidth = 0, bubbleHeight = 0, pickerContainerStyle, pickerEmojiStyle, } = props;
+    const { width: screenWidth } = Dimensions.get('window');
+    const pickerWidth = emojis.length * EMOJI_BUTTON_SIZE + PICKER_PADDING_H * 2;
+    const showAbove = pageY >= PICKER_HEIGHT + PICKER_VERTICAL_OFFSET;
+    const pickerTop = showAbove
+        ? pageY - PICKER_HEIGHT - PICKER_VERTICAL_OFFSET
+        : pageY + bubbleHeight + PICKER_VERTICAL_OFFSET;
+    let pickerLeft;
+    if (position === 'right')
+        pickerLeft = pageX + bubbleWidth - pickerWidth;
+    else
+        pickerLeft = pageX;
+    pickerLeft = Math.max(8, Math.min(pickerLeft, screenWidth - pickerWidth - 8));
+    const handleSelect = useCallback((emoji) => {
+        onSelect(emoji);
+        onDismiss();
+    }, [onSelect, onDismiss]);
+    if (!visible)
+        return null;
+    return (<Modal transparent visible={visible} onRequestClose={onDismiss} animationType='fade' statusBarTranslucent>
+      <Pressable style={StyleSheet.absoluteFill} onPress={onDismiss}/>
+
+      <View style={[
+            styles.picker,
+            {
+                top: pickerTop,
+                left: pickerLeft,
+                width: pickerWidth,
+            },
+            pickerContainerStyle,
+        ]}>
+        {emojis.map(emoji => (<Pressable key={emoji} onPress={() => handleSelect(emoji)} style={({ pressed }) => [
+                styles.emojiButton,
+                pressed && styles.emojiButtonPressed,
+            ]}>
+            <Text style={[styles.emoji, pickerEmojiStyle]}>{emoji}</Text>
+          </Pressable>))}
+      </View>
+    </Modal>);
+};
+const styles = StyleSheet.create({
+    picker: {
+        position: 'absolute',
+        height: PICKER_HEIGHT,
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: '#ffffff',
+        borderRadius: PICKER_HEIGHT / 2,
+        paddingHorizontal: PICKER_PADDING_H,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.15,
+        shadowRadius: 12,
+        elevation: 8,
+    },
+    emojiButton: {
+        width: EMOJI_BUTTON_SIZE,
+        height: EMOJI_BUTTON_SIZE,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: EMOJI_BUTTON_SIZE / 2,
+    },
+    emojiButtonPressed: {
+        backgroundColor: 'rgba(0, 0, 0, 0.07)',
+        transform: [{ scale: 1.2 }],
+    },
+    emoji: {
+        fontSize: 26,
+        lineHeight: 32,
+    },
+});
+//# sourceMappingURL=ReactionPicker.js.map

package/lib/Reactions/ReactionPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionPicker.js","sourceRoot":"","sources":["../../src/Reactions/ReactionPicker.tsx"],"names":[],"mappings":"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"}

package/lib/Reactions/index.d.ts

@@ -0,0 +1,6 @@
+export * from './types';
+export { MessageReactions } from './MessageReactions';
+export { ReactionPicker } from './ReactionPicker';
+/** Default set of emojis shown in the reaction quick-picker */
+export declare const DEFAULT_REACTION_EMOJIS: string[];
+//# sourceMappingURL=index.d.ts.map

package/lib/Reactions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Reactions/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,+DAA+D;AAC/D,eAAO,MAAM,uBAAuB,EAAE,MAAM,EAAyC,CAAA"}

package/lib/Reactions/index.js

@@ -0,0 +1,6 @@
+export * from './types';
+export { MessageReactions } from './MessageReactions';
+export { ReactionPicker } from './ReactionPicker';
+/** Default set of emojis shown in the reaction quick-picker */
+export const DEFAULT_REACTION_EMOJIS = ['👍', '❤️', '😂', '😮', '😢', '👎'];
+//# sourceMappingURL=index.js.map

package/lib/Reactions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Reactions/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,+DAA+D;AAC/D,MAAM,CAAC,MAAM,uBAAuB,GAAa,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAA"}

package/lib/Reactions/types.d.ts

@@ -0,0 +1,79 @@
+import React from 'react';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { IMessage, MessageReaction } from '../Models';
+/** Props passed to the default (or custom) reactions-display component rendered below each bubble */
+export interface MessageReactionsDisplayProps<TMessage extends IMessage> {
+    message: TMessage;
+    reactions: MessageReaction[];
+    currentUserId?: string | number;
+    position: 'left' | 'right';
+    onReactionPress?: (emoji: string) => void;
+    containerStyle?: StyleProp<ViewStyle>;
+    reactionStyle?: StyleProp<ViewStyle>;
+    reactionActiveStyle?: StyleProp<ViewStyle>;
+    reactionTextStyle?: StyleProp<TextStyle>;
+    reactionCountStyle?: StyleProp<TextStyle>;
+}
+/** Props passed to the default (or custom) reaction-picker component shown on long-press */
+export interface ReactionPickerProps<TMessage extends IMessage> {
+    visible: boolean;
+    message: TMessage;
+    emojis: string[];
+    onSelect: (emoji: string) => void;
+    onDismiss: () => void;
+    position: 'left' | 'right';
+    /** Horizontal screen-coordinate of the bubble's top-left corner */
+    pageX?: number;
+    /** Vertical screen-coordinate of the bubble's top edge */
+    pageY?: number;
+    /** Measured width of the bubble container */
+    bubbleWidth?: number;
+    /** Measured height of the bubble container */
+    bubbleHeight?: number;
+    pickerContainerStyle?: StyleProp<ViewStyle>;
+    pickerEmojiStyle?: StyleProp<TextStyle>;
+}
+/**
+ * Top-level emoji-reactions configuration.
+ * Pass this as the `reactions` prop to `<Chat />`.
+ */
+export interface ReactionsProps<TMessage extends IMessage> {
+    /**
+     * Enable emoji reactions on messages.
+     * @default false
+     */
+    isEnabled?: boolean;
+    /**
+     * Emoji options shown in the quick picker.
+     * @default ['👍', '❤️', '😂', '😮', '😢', '👎']
+     */
+    emojis?: string[];
+    /**
+     * Called when the user selects an emoji in the picker or taps an existing
+     * reaction pill.  Toggle logic is left to the consumer.
+     */
+    onReactionPress?: (message: TMessage, emoji: string) => void;
+    /** Override the reactions-display component rendered below the bubble */
+    renderReactions?: (props: MessageReactionsDisplayProps<TMessage>) => React.ReactNode;
+    /**
+     * Override the emoji-picker component shown on long-press.
+     * Use this to provide a richer picker (e.g. a full emoji browser).
+     * See the example app for a `react-native-emoji-chooser` integration.
+     */
+    renderReactionPicker?: (props: ReactionPickerProps<TMessage>) => React.ReactNode;
+    /** Style for the container wrapping all reaction pills */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Style applied to every inactive reaction pill */
+    reactionStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the current-user's active reaction pill */
+    reactionActiveStyle?: StyleProp<ViewStyle>;
+    /** Style for the emoji text inside each pill */
+    reactionTextStyle?: StyleProp<TextStyle>;
+    /** Style for the count label inside each pill */
+    reactionCountStyle?: StyleProp<TextStyle>;
+    /** Style for the floating quick-picker panel */
+    pickerContainerStyle?: StyleProp<ViewStyle>;
+    /** Style for each emoji button inside the quick picker */
+    pickerEmojiStyle?: StyleProp<TextStyle>;
+}
+//# sourceMappingURL=types.d.ts.map