@kesha-antonov/react-native-chat 4.1.0 → 4.3.0

package/lib/Message/styles.js

@@ -1,18 +1,18 @@
 import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
+    // The row spans the full width so a long-press anywhere beside the bubble
+    // still opens the reactions / context menu (Telegram-style). The 70% cap
+    // lives on the bubble itself (see `wrapper` in Bubble/styles).
     container: {
         flexDirection: 'row',
         alignItems: 'flex-end',
-        maxWidth: '70%',
+        marginHorizontal: 8,
     },
     container_left: {
         justifyContent: 'flex-start',
-        marginLeft: 8,
     },
     container_right: {
         justifyContent: 'flex-end',
-        marginRight: 8,
-        alignSelf: 'flex-end',
     },
 });
 //# sourceMappingURL=styles.js.map

package/lib/Message/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Message/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,eAAe,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,UAAU;QACtB,QAAQ,EAAE,KAAK;KAChB;IACD,cAAc,EAAE;QACd,cAAc,EAAE,YAAY;QAC5B,UAAU,EAAE,CAAC;KACd;IACD,eAAe,EAAE;QACf,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,CAAC;QACd,SAAS,EAAE,UAAU;KACtB;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Message/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,eAAe,UAAU,CAAC,MAAM,CAAC;IAC/B,0EAA0E;IAC1E,yEAAyE;IACzE,+DAA+D;IAC/D,SAAS,EAAE;QACT,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,UAAU;QACtB,gBAAgB,EAAE,CAAC;KACpB;IACD,cAAc,EAAE;QACd,cAAc,EAAE,YAAY;KAC7B;IACD,eAAe,EAAE;QACf,cAAc,EAAE,UAAU;KAC3B;CACF,CAAC,CAAA"}

package/lib/MessageAudio.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
-export declare function MessageAudio(): React.JSX.Element;
+import { IMessage, MessageAudioProps } from './Models';
+export declare function MessageAudio<TMessage extends IMessage = IMessage>({ currentMessage, position, containerStyle, audioStyle, }: Partial<MessageAudioProps<TMessage>>): React.JSX.Element | null;
 //# sourceMappingURL=MessageAudio.d.ts.map

package/lib/MessageAudio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageAudio.d.ts","sourceRoot":"","sources":["../src/MessageAudio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AActC,wBAAgB,YAAY,sBAa3B"}
+{"version":3,"file":"MessageAudio.d.ts","sourceRoot":"","sources":["../src/MessageAudio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAQ1C,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAwEtD,wBAAgB,YAAY,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EAAG,EAClE,cAAc,EACd,QAAiB,EACjB,cAAc,EACd,UAAU,GACX,EAAE,OAAO,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,4BAetC"}

package/lib/MessageAudio.js

@@ -1,24 +1,126 @@
-import React, { useMemo } from 'react';
-import { View, StyleSheet, Text } from 'react-native';
-import { Color } from './Color';
+import React, { useCallback } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Icon } from './components/Icon';
+import { MediaCard } from './components/MediaCard';
+import { PauseIcon, PlayIcon } from './components/MediaControls';
+import { getMediaPalette } from './components/mediaPalette';
+import { WaveformPlayer, isWaveformAvailable } from './components/WaveformPlayer';
+import { useThemedStyles } from './hooks/useTheme';
+// Optional inline player. Resolved through a try/catch require so the bundle
+// works whether or not the consumer installed `expo-audio` (Metro treats
+// try/catch-wrapped requires as optional dependencies). When present, audio
+// messages get a real play/pause control with a progress bar; otherwise they
+// fall back to a tappable MediaCard that opens the audio in the system player.
+let expoAudio = null;
+try {
+    expoAudio = require('expo-audio');
+}
+catch {
+    expoAudio = null;
+}
+const isExpoAudioAvailable = !!(expoAudio?.useAudioPlayer && expoAudio?.useAudioPlayerStatus);
+const formatTime = (seconds) => {
+    if (!Number.isFinite(seconds) || seconds < 0)
+        seconds = 0;
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+};
+// Only mounted when expo-audio resolved, so the hooks below always run in a
+// stable order.
+const ExpoAudioPlayer = ({ uri, position }) => {
+    const player = expoAudio.useAudioPlayer(uri);
+    const status = expoAudio.useAudioPlayerStatus(player);
+    const styles = useThemedStyles(position === 'right' ? createRightStyles : createLeftStyles);
+    const isPlaying = !!status?.playing;
+    const duration = status?.duration ?? 0;
+    const currentTime = status?.currentTime ?? 0;
+    const progress = duration > 0 ? Math.min(1, currentTime / duration) : 0;
+    const togglePlayback = useCallback(() => {
+        if (status?.playing) {
+            player.pause();
+        }
+        else {
+            if (status?.didJustFinish || (duration > 0 && currentTime >= duration))
+                player.seekTo(0);
+            player.play();
+        }
+    }, [player, status, duration, currentTime]);
+    return (<View style={styles.audioRow}>
+      <Pressable onPress={togglePlayback} accessibilityRole='button' accessibilityLabel={isPlaying ? 'pause' : 'play'} style={styles.playCircle}>
+        {isPlaying
+            ? <Icon name='pause' color={styles.glyphColor.color} size={14} fallback={<PauseIcon color={styles.glyphColor.color} size={14}/>}/>
+            : <Icon name='play' color={styles.glyphColor.color} size={14} fallback={<PlayIcon color={styles.glyphColor.color} size={14}/>}/>}
+      </Pressable>
+      <View style={styles.track}>
+        {/* progress fill width is a runtime value, so it stays inline */}
+        <View style={[styles.trackFill, { width: `${progress * 100}%` }]}/>
+      </View>
+      <Text style={styles.time}>
+        {formatTime(currentTime > 0 ? currentTime : duration)}
+      </Text>
+    </View>);
+};
+export function MessageAudio({ currentMessage, position = 'left', containerStyle, audioStyle, }) {
+    const uri = currentMessage?.audio;
+    if (!uri)
+        return null;
+    return (<View style={[styles.container, containerStyle]}>
+      {isWaveformAvailable
+            ? <WaveformPlayer uri={uri} position={position} duration={currentMessage?.duration}/>
+            : isExpoAudioAvailable
+                ? <ExpoAudioPlayer uri={uri} position={position}/>
+                : <MediaCard kind='audio' uri={uri} position={position} style={audioStyle}/>}
+    </View>);
+}
+const makeStyles = (theme, position) => {
+    const palette = getMediaPalette(theme, position);
+    return StyleSheet.create({
+        // Carries the glyph color out of JSX and into the stylesheet.
+        glyphColor: {
+            color: palette.glyph,
+        },
+        audioRow: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingVertical: 6,
+            paddingHorizontal: 8,
+            minWidth: 200,
+            gap: 10,
+        },
+        playCircle: {
+            width: 36,
+            height: 36,
+            borderRadius: 18,
+            backgroundColor: palette.control,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        track: {
+            flex: 1,
+            height: 3,
+            borderRadius: 2,
+            backgroundColor: palette.track,
+            overflow: 'hidden',
+        },
+        trackFill: {
+            height: 3,
+            borderRadius: 2,
+            backgroundColor: palette.progress,
+        },
+        time: {
+            fontSize: 12,
+            color: palette.meta,
+            minWidth: 34,
+            textAlign: 'right',
+        },
+    });
+};
+const createLeftStyles = (theme) => makeStyles(theme, 'left');
+const createRightStyles = (theme) => makeStyles(theme, 'right');
 const styles = StyleSheet.create({
     container: {
-        padding: 10,
-    },
-    text: {
-        color: Color.alizarin,
-        fontWeight: '600',
+        overflow: 'hidden',
     },
 });
-export function MessageAudio() {
-    const content = useMemo(() => (<View style={styles.container}>
-      <Text style={styles.text}>
-        {'Audio is not implemented by Chat.'}
-      </Text>
-      <Text style={styles.text}>
-        {'\nYou need to provide your own implementation by using renderMessageAudio prop.'}
-      </Text>
-    </View>), []);
-    return content;
-}
 //# sourceMappingURL=MessageAudio.js.map

package/lib/MessageAudio.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageAudio.js","sourceRoot":"","sources":["../src/MessageAudio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAG,IAAI,EAAE,MAAM,cAAc,CAAA;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,OAAO,EAAE,EAAE;KACZ;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK,CAAC,QAAQ;QACrB,UAAU,EAAE,KAAK;KAClB;CACF,CAAC,CAAA;AAEF,MAAM,UAAU,YAAY;IAC1B,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAC5B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CACvB;QAAA,CAAC,mCAAmC,CACtC;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CACvB;QAAA,CAAC,iFAAiF,CACpF;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,OAAO,CAAA;AAChB,CAAC"}
+{"version":3,"file":"MessageAudio.js","sourceRoot":"","sources":["../src/MessageAudio.tsx"],"names":[],"mappings":"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"}

package/lib/MessageLocation.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IMessage, MessageLocationProps } from './Models';
+/**
+ * Default renderer for location messages. Dependency-free: shows a styled map
+ * card and opens the coordinates in the system maps app on tap (override via
+ * the `onPress` prop or `renderMessageLocation`).
+ */
+export declare function MessageLocation<TMessage extends IMessage = IMessage>({ currentMessage, position, containerStyle, locationStyle, onPress, }: Partial<MessageLocationProps<TMessage>>): React.JSX.Element | null;
+//# sourceMappingURL=MessageLocation.d.ts.map

package/lib/MessageLocation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageLocation.d.ts","sourceRoot":"","sources":["../src/MessageLocation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAM1C,OAAO,EAAE,QAAQ,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAUzD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EAAG,EACrE,cAAc,EACd,QAAiB,EACjB,cAAc,EACd,aAAa,EACb,OAAO,GACR,EAAE,OAAO,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC,4BAyCzC"}

package/lib/MessageLocation.js

@@ -0,0 +1,85 @@
+import React, { useCallback } from 'react';
+import { Linking, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Icon } from './components/Icon';
+import { PinIcon } from './components/MediaControls';
+import { useLabels } from './hooks/useLabels';
+import { useThemedStyles } from './hooks/useTheme';
+const buildMapsUrl = (latitude, longitude) => Platform.select({
+    ios: `https://maps.apple.com/?ll=${latitude},${longitude}&q=${latitude},${longitude}`,
+    android: `geo:${latitude},${longitude}?q=${latitude},${longitude}`,
+    default: `https://www.google.com/maps/search/?api=1&query=${latitude},${longitude}`,
+});
+/**
+ * Default renderer for location messages. Dependency-free: shows a styled map
+ * card and opens the coordinates in the system maps app on tap (override via
+ * the `onPress` prop or `renderMessageLocation`).
+ */
+export function MessageLocation({ currentMessage, position = 'left', containerStyle, locationStyle, onPress, }) {
+    const styles = useThemedStyles(position === 'right' ? createRightStyles : createLeftStyles);
+    const labels = useLabels();
+    const location = currentMessage?.location;
+    const handlePress = useCallback(() => {
+        if (!location)
+            return;
+        if (onPress) {
+            onPress(location);
+            return;
+        }
+        Linking.openURL(buildMapsUrl(location.latitude, location.longitude)).catch(() => { });
+    }, [location, onPress]);
+    if (!location)
+        return null;
+    const coords = `${location.latitude.toFixed(5)}, ${location.longitude.toFixed(5)}`;
+    return (<View style={[styles.container, containerStyle]}>
+      <Pressable onPress={handlePress} accessibilityRole='button' accessibilityLabel={labels.openLocationAccessibility} style={[styles.card, locationStyle]}>
+        <View style={styles.map}>
+          <Icon name='pin' color='#fff' size={26} fallback={<PinIcon color='#fff' size={26}/>}/>
+        </View>
+        <View style={styles.meta}>
+          <Text style={styles.title} numberOfLines={1}>{labels.location}</Text>
+          <Text style={styles.coords} numberOfLines={1}>{coords}</Text>
+        </View>
+      </Pressable>
+    </View>);
+}
+const makeStyles = (theme, position) => {
+    const overlay = position === 'right' ? theme.colors.outgoingOverlay : theme.colors.reactionBackground;
+    const titleColor = position === 'right' ? theme.colors.outgoingText : theme.colors.incomingText;
+    const metaColor = position === 'right' ? theme.colors.outgoingMeta : theme.colors.incomingMeta;
+    return StyleSheet.create({
+        container: {
+            overflow: 'hidden',
+        },
+        card: {
+            width: 220,
+            borderRadius: 12,
+            overflow: 'hidden',
+            margin: 6,
+            backgroundColor: overlay,
+        },
+        map: {
+            height: 110,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: theme.colors.accent,
+            opacity: 0.85,
+        },
+        meta: {
+            paddingHorizontal: 12,
+            paddingVertical: 8,
+        },
+        title: {
+            fontSize: 14,
+            fontWeight: '600',
+            color: titleColor,
+        },
+        coords: {
+            marginTop: 2,
+            fontSize: 12,
+            color: metaColor,
+        },
+    });
+};
+const createLeftStyles = (theme) => makeStyles(theme, 'left');
+const createRightStyles = (theme) => makeStyles(theme, 'right');
+//# sourceMappingURL=MessageLocation.js.map

package/lib/MessageLocation.js.map

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

package/lib/MessageText.d.ts

@@ -19,6 +19,17 @@ export type MessageTextProps<TMessage extends IMessage> = {
     hashtagUrl?: string;
     mentionUrl?: string;
     stripPrefix?: boolean;
+    /**
+     * Render the message body as markdown (great for AI/streamed replies). `true`
+     * forces markdown for every message, `false` disables it; when left unset,
+     * streamed messages render as markdown automatically. Uses the optional
+     * `react-native-streamdown` peer when installed (best handling of
+     * streaming-incomplete markdown), otherwise a built-in dependency-free renderer
+     * covering headings, lists, blockquotes, code, bold/italic/strikethrough and links.
+     */
+    markdown?: boolean;
+    /** Extra props forwarded to the Streamdown component (its own theming/rules API); only used when streamdown is installed. */
+    markdownProps?: Record<string, unknown>;
 };
-export declare function MessageText<TMessage extends IMessage>({ currentMessage, position, containerStyle, textStyle, linkStyle: linkStyleProp, customTextStyle, onPress: onPressProp, matchers, email, phone, url, hashtag, mention, hashtagUrl, mentionUrl, stripPrefix, }: MessageTextProps<TMessage>): React.JSX.Element;
+export declare function MessageText<TMessage extends IMessage>({ currentMessage, position, containerStyle, textStyle, linkStyle: linkStyleProp, customTextStyle, onPress: onPressProp, matchers, email, phone, url, hashtag, mention, hashtagUrl, mentionUrl, stripPrefix, markdown, markdownProps, }: MessageTextProps<TMessage>): React.JSX.Element;
 //# sourceMappingURL=MessageText.d.ts.map

package/lib/MessageText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageText.d.ts","sourceRoot":"","sources":["../src/MessageText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAA;AACnD,OAAO,EAEL,SAAS,EACT,SAAS,EACT,SAAS,EAEH,MAAM,cAAc,CAAA;AAG5B,OAAO,EAAc,WAAW,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAChE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAEnD,MAAM,MAAM,gBAAgB,CAAC,QAAQ,SAAS,QAAQ,IAAI;IACxD,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC3B,cAAc,EAAE,QAAQ,CAAA;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IAC1C,SAAS,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACrC,SAAS,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACrC,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACtC,OAAO,CAAC,EAAE,CACR,OAAO,EAAE,QAAQ,EACjB,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,QAAQ,KACX,IAAI,CAAA;IAET,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;IACxB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,wBAAgB,WAAW,CAAC,QAAQ,SAAS,QAAQ,EAAE,EACrD,cAAc,EACd,QAAiB,EACjB,cAAc,EACd,SAAS,EACT,SAAS,EAAE,aAAa,EACxB,eAAe,EACf,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,KAAY,EACZ,KAAY,EACZ,GAAU,EACV,OAAe,EACf,OAAe,EACf,UAAU,EACV,UAAU,EACV,WAAmB,GACpB,EAAE,gBAAgB,CAAC,QAAQ,CAAC,qBAmD5B"}
+{"version":3,"file":"MessageText.d.ts","sourceRoot":"","sources":["../src/MessageText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAA;AACnD,OAAO,EAEL,SAAS,EACT,SAAS,EACT,SAAS,EAEH,MAAM,cAAc,CAAA;AAM5B,OAAO,EAAc,WAAW,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAChE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAGnD,MAAM,MAAM,gBAAgB,CAAC,QAAQ,SAAS,QAAQ,IAAI;IACxD,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC3B,cAAc,EAAE,QAAQ,CAAA;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IAC1C,SAAS,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACrC,SAAS,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACrC,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACtC,OAAO,CAAC,EAAE,CACR,OAAO,EAAE,QAAQ,EACjB,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,QAAQ,KACX,IAAI,CAAA;IAET,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;IACxB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6HAA6H;IAC7H,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACxC,CAAA;AAED,wBAAgB,WAAW,CAAC,QAAQ,SAAS,QAAQ,EAAE,EACrD,cAAc,EACd,QAAiB,EACjB,cAAc,EACd,SAAS,EACT,SAAS,EAAE,aAAa,EACxB,eAAe,EACf,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,KAAY,EACZ,KAAY,EACZ,GAAU,EACV,OAAe,EACf,OAAe,EACf,UAAU,EACV,UAAU,EACV,WAAmB,EACnB,QAAQ,EACR,aAAa,GACd,EAAE,gBAAgB,CAAC,QAAQ,CAAC,qBA8F5B"}

package/lib/MessageText.js

@@ -1,23 +1,46 @@
 import React, { useMemo, useCallback } from 'react';
 import { StyleSheet, View, Text } from 'react-native';
+import { BasicMarkdown } from './components/BasicMarkdown';
+import { MarkdownMessageText, isMarkdownAvailable } from './components/MarkdownMessageText';
 import { StreamingCursor } from './components/StreamingCursor';
+import { useThemedStyles } from './hooks/useTheme';
 import { LinkParser } from './linkParser';
-export function MessageText({ currentMessage, position = 'left', containerStyle, textStyle, linkStyle: linkStyleProp, customTextStyle, onPress: onPressProp, matchers, email = true, phone = true, url = true, hashtag = false, mention = false, hashtagUrl, mentionUrl, stripPrefix = false, }) {
+export function MessageText({ currentMessage, position = 'left', containerStyle, textStyle, linkStyle: linkStyleProp, customTextStyle, onPress: onPressProp, matchers, email = true, phone = true, url = true, hashtag = false, mention = false, hashtagUrl, mentionUrl, stripPrefix = false, markdown, markdownProps, }) {
+    const styles = useThemedStyles(createStyles);
     const linkStyle = useMemo(() => StyleSheet.flatten([
         styles.link,
+        position === 'left' && styles.link_left,
         linkStyleProp?.[position],
-    ]), [position, linkStyleProp]);
+    ]), [styles, position, linkStyleProp]);
     const style = useMemo(() => [
+        styles.text,
         styles[`text_${position}`],
         textStyle?.[position],
         customTextStyle,
-    ], [position, textStyle, customTextStyle]);
+    ], [styles, position, textStyle, customTextStyle]);
     const handlePress = useCallback((url, type) => {
         onPressProp?.(currentMessage, url, type);
     }, [onPressProp, currentMessage]);
     const isStreaming = !!currentMessage?.streaming;
+    // Render markdown when explicitly enabled, or when the message is being
+    // streamed (AI replies) and it wasn't explicitly disabled. Prefer
+    // react-native-streamdown when installed (best streaming-incomplete handling),
+    // otherwise fall back to the built-in dependency-free renderer.
+    const wantMarkdown = markdown !== false && (markdown === true || isStreaming);
+    if (wantMarkdown && isMarkdownAvailable)
+        return (<MarkdownMessageText text={currentMessage.text} isStreaming={isStreaming} textStyle={style} containerStyle={[styles.container, containerStyle?.[position]]} componentProps={markdownProps}/>);
+    if (wantMarkdown)
+        return (<View style={[styles.container, containerStyle?.[position]]}>
+        <BasicMarkdown text={currentMessage.text} textStyle={style} linkStyle={linkStyle} onLinkPress={onPressProp ? (link) => handlePress(link, 'url') : undefined}/>
+        {isStreaming && (<Text style={style}>
+            <StreamingCursor />
+          </Text>)}
+      </View>);
     const parsed = (<LinkParser text={currentMessage.text} matchers={matchers} email={email} phone={phone} url={url} hashtag={hashtag} mention={mention} hashtagUrl={hashtagUrl} mentionUrl={mentionUrl} stripPrefix={stripPrefix} linkStyle={linkStyle} textStyle={style} onPress={onPressProp ? handlePress : undefined} TextComponent={Text}/>);
-    return (<View style={[styles.container, containerStyle?.[position]]}>
+    return (<View style={[
+            styles.container,
+            containerStyle?.[position],
+        ]}>
       {isStreaming
             ? (
             // Wrap in a Text so the caret flows inline after the last word and
@@ -29,23 +52,27 @@ export function MessageText({ currentMessage, position = 'left', containerStyle,
             : parsed}
     </View>);
 }
-const styles = StyleSheet.create({
+const createStyles = (theme) => StyleSheet.create({
     container: {
-        marginVertical: 5,
-        marginHorizontal: 10,
+        marginVertical: theme.spacing.bubblePaddingV,
+        marginHorizontal: theme.spacing.bubblePaddingH,
     },
     text: {
-        fontSize: 16,
-        lineHeight: 20,
+        fontSize: theme.typography.message.fontSize,
+        lineHeight: theme.typography.message.lineHeight,
+        fontWeight: theme.typography.message.fontWeight,
     },
     text_left: {
-        color: 'black',
+        color: theme.colors.incomingText,
     },
     text_right: {
-        color: 'white',
+        color: theme.colors.outgoingText,
     },
     link: {
         textDecorationLine: 'underline',
     },
+    link_left: {
+        color: theme.colors.accent,
+    },
 });
 //# sourceMappingURL=MessageText.js.map

package/lib/MessageText.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageText.js","sourceRoot":"","sources":["../src/MessageText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EACL,UAAU,EAIV,IAAI,EACJ,IAAI,EAAE,MAAM,cAAc,CAAA;AAE5B,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAyB,MAAM,cAAc,CAAA;AA2BhE,MAAM,UAAU,WAAW,CAA4B,EACrD,cAAc,EACd,QAAQ,GAAG,MAAM,EACjB,cAAc,EACd,SAAS,EACT,SAAS,EAAE,aAAa,EACxB,eAAe,EACf,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,KAAK,GAAG,IAAI,EACZ,KAAK,GAAG,IAAI,EACZ,GAAG,GAAG,IAAI,EACV,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,KAAK,EACf,UAAU,EACV,UAAU,EACV,WAAW,GAAG,KAAK,GACQ;IAC3B,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC;QACjD,MAAM,CAAC,IAAI;QACX,aAAa,EAAE,CAAC,QAAQ,CAAC;KAC1B,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAA;IAE9B,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;QAC1B,MAAM,CAAC,QAAQ,QAAQ,EAAE,CAAC;QAC1B,SAAS,EAAE,CAAC,QAAQ,CAAC;QACrB,eAAe;KAChB,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,CAAA;IAE1C,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,GAAW,EAAE,IAAc,EAAE,EAAE;QAC9D,WAAW,EAAE,CAAC,cAAc,EAAE,GAAG,EAAE,IAAI,CAAC,CAAA;IAC1C,CAAC,EAAE,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC,CAAA;IAEjC,MAAM,WAAW,GAAG,CAAC,CAAC,cAAc,EAAE,SAAS,CAAA;IAE/C,MAAM,MAAM,GAAG,CACb,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,cAAe,CAAC,IAAI,CAAC,CAC3B,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,SAAS,CAAC,CAAC,KAAK,CAAC,CACjB,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAC/C,aAAa,CAAC,CAAC,IAAI,CAAC,EACpB,CACH,CAAA;IAED,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC1D;MAAA,CAAC,WAAW;YACV,CAAC,CAAC;YACA,mEAAmE;YACnE,kCAAkC;YAClC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CACjB;YAAA,CAAC,MAAM,CACP;YAAA,CAAC,eAAe,CAAC,AAAD,EAClB;UAAA,EAAE,IAAI,CAAC,CACR;YACD,CAAC,CAAC,MAAM,CACZ;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,cAAc,EAAE,CAAC;QACjB,gBAAgB,EAAE,EAAE;KACrB;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,EAAE;KACf;IACD,SAAS,EAAE;QACT,KAAK,EAAE,OAAO;KACf;IACD,UAAU,EAAE;QACV,KAAK,EAAE,OAAO;KACf;IACD,IAAI,EAAE;QACJ,kBAAkB,EAAE,WAAW;KAChC;CACF,CAAC,CAAA"}
+{"version":3,"file":"MessageText.js","sourceRoot":"","sources":["../src/MessageText.tsx"],"names":[],"mappings":"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"}

package/lib/MessageVideo.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
-export declare function MessageVideo(): React.JSX.Element;
+import { IMessage, MessageVideoProps } from './Models';
+export declare function MessageVideo<TMessage extends IMessage = IMessage>({ currentMessage, position, containerStyle, videoStyle, videoProps, }: Partial<MessageVideoProps<TMessage>>): React.JSX.Element | null;
 //# sourceMappingURL=MessageVideo.d.ts.map

package/lib/MessageVideo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageVideo.d.ts","sourceRoot":"","sources":["../src/MessageVideo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AActC,wBAAgB,YAAY,sBAa3B"}
+{"version":3,"file":"MessageVideo.d.ts","sourceRoot":"","sources":["../src/MessageVideo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAA;AAK9E,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AA2JtD,wBAAgB,YAAY,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EAAG,EAClE,cAAc,EACd,QAAiB,EACjB,cAAc,EACd,UAAU,EACV,UAAU,GACX,EAAE,OAAO,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,4BAoCtC"}

package/lib/MessageVideo.js

@@ -1,24 +1,162 @@
-import React, { useMemo } from 'react';
-import { View, StyleSheet, Text } from 'react-native';
-import { Color } from './Color';
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { Pressable, StyleSheet, View, useWindowDimensions } from 'react-native';
+import { MediaCard } from './components/MediaCard';
+import { claimPlayback, releasePlayback } from './components/mediaPlayback';
+import { VideoNoteMeta, VideoNoteOverlay } from './components/VideoNoteOverlay';
+// Optional inline player. Resolved through a try/catch require so the bundle
+// works whether or not the consumer installed `expo-video` - Metro treats
+// try/catch-wrapped requires as optional dependencies and won't fail the build
+// when the module is absent. When present, messages render a real inline
+// player; otherwise they fall back to a tappable MediaCard.
+let expoVideo = null;
+try {
+    expoVideo = require('expo-video');
+}
+catch {
+    expoVideo = null;
+}
+const isExpoVideoAvailable = !!(expoVideo?.VideoView && expoVideo?.useVideoPlayer);
+// A Telegram round note is sized from the screen, not a fixed puck.
+const NOTE_WIDTH_RATIO = 0.62;
+const MAX_NOTE_SIZE = 260;
+// Only mounted when expo-video resolved, so the hooks below are always called
+// in a stable order.
+const ExpoVideoPlayer = ({ uri, style, videoProps, isNote, duration, noteSize }) => {
+    const player = expoVideo.useVideoPlayer(uri, (p) => {
+        // A note holds its first frame muted. It does NOT autoplay: every note in
+        // the list would otherwise decode and loop at once, and there would be no
+        // way to ever hear one.
+        p.loop = false;
+        if (isNote)
+            p.muted = true;
+    });
+    const VideoView = expoVideo.VideoView;
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [isMuted, setIsMuted] = useState(true);
+    const [progress, setProgress] = useState(0);
+    // A note counts as watched once it has been played through at least once.
+    const [isWatched, setIsWatched] = useState(false);
+    const playerId = useId();
+    const rafRef = useRef(null);
+    const stopRaf = useCallback(() => {
+        if (rafRef.current != null) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = null;
+        }
+    }, []);
+    const pause = useCallback(() => {
+        try {
+            player.pause();
+        }
+        catch {
+            // player already torn down
+        }
+        stopRaf();
+        setIsPlaying(false);
+    }, [player, stopRaf]);
+    // Drives the progress ring. expo-video has no per-frame callback, so the
+    // position is sampled on the display link while playing.
+    const tick = useCallback(() => {
+        const total = player.duration || duration || 0;
+        if (total > 0) {
+            const next = Math.min(1, (player.currentTime || 0) / total);
+            setProgress(next);
+            if (next >= 1) {
+                stopRaf();
+                releasePlayback(playerId);
+                setIsPlaying(false);
+                setProgress(0);
+                setIsMuted(true);
+                setIsWatched(true);
+                return;
+            }
+        }
+        rafRef.current = requestAnimationFrame(tick);
+    }, [player, duration, stopRaf, playerId]);
+    useEffect(() => () => {
+        stopRaf();
+        releasePlayback(playerId);
+    }, [stopRaf, playerId]);
+    // Tap a note to play it with sound, tap again to pause - the round note has no
+    // native controls, so this press target is its only affordance.
+    const togglePlayback = useCallback(() => {
+        if (!isNote)
+            return;
+        if (isPlaying) {
+            pause();
+            releasePlayback(playerId);
+            return;
+        }
+        player.muted = false;
+        setIsMuted(false);
+        if (progress <= 0)
+            player.currentTime = 0;
+        player.play();
+        setIsPlaying(true);
+        // Starting stops any other note or voice message, as Telegram does.
+        claimPlayback(playerId, pause);
+        stopRaf();
+        rafRef.current = requestAnimationFrame(tick);
+    }, [isNote, isPlaying, player, pause, playerId, tick, stopRaf, progress]);
+    const view = (<VideoView style={style} player={player} fullscreenOptions={{ enable: !isNote }} allowsPictureInPicture={!isNote} nativeControls={!isNote} contentFit='cover' {...videoProps}/>);
+    if (!isNote)
+        return view;
+    return (<View>
+      <Pressable onPress={togglePlayback} accessibilityRole='button' accessibilityLabel={isPlaying ? 'pause video note' : 'play video note'}>
+        {view}
+        <VideoNoteOverlay size={noteSize} progress={progress} isMuted={isMuted} isPlaying={isPlaying}/>
+      </Pressable>
+      {/* Telegram puts the length under the circle, on the chat background. */}
+      <VideoNoteMeta duration={duration} isWatched={isWatched}/>
+    </View>);
+};
+export function MessageVideo({ currentMessage, position = 'left', containerStyle, videoStyle, videoProps, }) {
+    const { width } = useWindowDimensions();
+    const noteSize = Math.min(width * NOTE_WIDTH_RATIO, MAX_NOTE_SIZE);
+    const uri = currentMessage?.video;
+    if (!uri)
+        return null;
+    const isNote = !!currentMessage?.videoNote;
+    const noteStyle = { width: noteSize, height: noteSize, borderRadius: noteSize / 2 };
+    return (<View style={[
+            styles.container,
+            isNote && styles.noteContainer,
+            // A note follows its sender's side; hardcoding flex-end detached an
+            // incoming note from the left edge of its row.
+            isNote && (position === 'right' ? styles.noteRight : styles.noteLeft),
+            containerStyle,
+        ]}>
+      {isExpoVideoAvailable
+            ? (<ExpoVideoPlayer uri={uri} style={[isNote ? [styles.note, noteStyle] : styles.video, videoStyle]} videoProps={videoProps} isNote={isNote} duration={currentMessage?.duration} noteSize={noteSize}/>)
+            : <MediaCard kind='video' uri={uri} position={position} style={[isNote && noteStyle, videoStyle]}/>}
+    </View>);
+}
 const styles = StyleSheet.create({
     container: {
-        padding: 10,
+        overflow: 'hidden',
+    },
+    // A round note floats without bubble chrome (the Bubble strips its
+    // background). It must not clip: the duration sits below the circle.
+    noteContainer: {
+        overflow: 'visible',
     },
-    text: {
-        color: Color.alizarin,
-        fontWeight: '600',
+    noteLeft: {
+        alignSelf: 'flex-start',
+    },
+    noteRight: {
+        alignSelf: 'flex-end',
+    },
+    video: {
+        width: 220,
+        height: 140,
+        borderRadius: 12,
+        margin: 6,
+        // Dark placeholder so the bubble reads as a video while the first frame
+        // loads, instead of flashing a white void.
+        backgroundColor: '#000',
+    },
+    note: {
+        backgroundColor: '#000',
     },
 });
-export function MessageVideo() {
-    const content = useMemo(() => (<View style={styles.container}>
-      <Text style={styles.text}>
-        {'Video is not implemented by Chat.'}
-      </Text>
-      <Text style={styles.text}>
-        {'\nYou need to provide your own implementation by using renderMessageVideo prop.'}
-      </Text>
-    </View>), []);
-    return content;
-}
 //# sourceMappingURL=MessageVideo.js.map