@developer_tribe/react-native-comnyx 0.14.0 → 0.15.0

package/lib/typescript/src/types/LocalizationKeys.d.ts

@@ -51,6 +51,5 @@ export type LocalizationKeys = {
     'chat.media.pick.title': string;
     'chat.media.pick.photo': string;
     'chat.media.pick.video': string;
-    'chat.media.pick.cancel': string;
 };
 //# sourceMappingURL=LocalizationKeys.d.ts.map

package/lib/typescript/src/types/LocalizationKeys.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LocalizationKeys.d.ts","sourceRoot":"","sources":["../../../../src/types/LocalizationKeys.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,MAAM,CAAC;IAC/B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,4BAA4B,EAAE,MAAM,CAAC;IACrC,6BAA6B,EAAE,MAAM,CAAC;IACtC,2BAA2B,EAAE,MAAM,CAAC;IACpC,2BAA2B,EAAE,MAAM,CAAC;IACpC,gCAAgC,EAAE,MAAM,CAAC;IACzC,mCAAmC,EAAE,MAAM,CAAC;IAC5C,iCAAiC,EAAE,MAAM,CAAC;IAC1C,iCAAiC,EAAE,MAAM,CAAC;IAC1C,wCAAwC,EAAE,MAAM,CAAC;IACjD,wCAAwC,EAAE,MAAM,CAAC;IACjD,4CAA4C,EAAE,MAAM,CAAC;IACrD,yCAAyC,EAAE,MAAM,CAAC;IAClD,wCAAwC,EAAE,MAAM,CAAC;IACjD,+BAA+B,EAAE,MAAM,CAAC;IACxC,6BAA6B,EAAE,MAAM,CAAC;IACtC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,wBAAwB,EAAE,MAAM,CAAC;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,gCAAgC,EAAE,MAAM,CAAC;IACzC,sCAAsC,EAAE,MAAM,CAAC;IAC/C,kBAAkB,EAAE,MAAM,CAAC;IAC3B,2BAA2B,EAAE,MAAM,CAAC;IACpC,gCAAgC,EAAE,MAAM,CAAC;IACzC,4BAA4B,EAAE,MAAM,CAAC;IACrC,iCAAiC,EAAE,MAAM,CAAC;IAC1C,4BAA4B,EAAE,MAAM,CAAC;IACrC,iCAAiC,EAAE,MAAM,CAAC;IAC1C,oBAAoB,EAAE,MAAM,CAAC;IAC7B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,2BAA2B,EAAE,MAAM,CAAC;IACpC,iCAAiC,EAAE,MAAM,CAAC;IAC1C,4BAA4B,EAAE,MAAM,CAAC;IACrC,kCAAkC,EAAE,MAAM,CAAC;IAC3C,qCAAqC,EAAE,MAAM,CAAC;IAC9C,sBAAsB,EAAE,MAAM,CAAC;IAC/B,0BAA0B,EAAE,MAAM,CAAC;IACnC,uBAAuB,EAAE,MAAM,CAAC;IAChC,uBAAuB,EAAE,MAAM,CAAC;IAChC,uBAAuB,EAAE,MAAM,CAAC;IAChC,wBAAwB,EAAE,MAAM,CAAC;CAClC,CAAC"}
+{"version":3,"file":"LocalizationKeys.d.ts","sourceRoot":"","sources":["../../../../src/types/LocalizationKeys.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,MAAM,CAAC;IAC/B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,4BAA4B,EAAE,MAAM,CAAC;IACrC,6BAA6B,EAAE,MAAM,CAAC;IACtC,2BAA2B,EAAE,MAAM,CAAC;IACpC,2BAA2B,EAAE,MAAM,CAAC;IACpC,gCAAgC,EAAE,MAAM,CAAC;IACzC,mCAAmC,EAAE,MAAM,CAAC;IAC5C,iCAAiC,EAAE,MAAM,CAAC;IAC1C,iCAAiC,EAAE,MAAM,CAAC;IAC1C,wCAAwC,EAAE,MAAM,CAAC;IACjD,wCAAwC,EAAE,MAAM,CAAC;IACjD,4CAA4C,EAAE,MAAM,CAAC;IACrD,yCAAyC,EAAE,MAAM,CAAC;IAClD,wCAAwC,EAAE,MAAM,CAAC;IACjD,+BAA+B,EAAE,MAAM,CAAC;IACxC,6BAA6B,EAAE,MAAM,CAAC;IACtC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,wBAAwB,EAAE,MAAM,CAAC;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,gCAAgC,EAAE,MAAM,CAAC;IACzC,sCAAsC,EAAE,MAAM,CAAC;IAC/C,kBAAkB,EAAE,MAAM,CAAC;IAC3B,2BAA2B,EAAE,MAAM,CAAC;IACpC,gCAAgC,EAAE,MAAM,CAAC;IACzC,4BAA4B,EAAE,MAAM,CAAC;IACrC,iCAAiC,EAAE,MAAM,CAAC;IAC1C,4BAA4B,EAAE,MAAM,CAAC;IACrC,iCAAiC,EAAE,MAAM,CAAC;IAC1C,oBAAoB,EAAE,MAAM,CAAC;IAC7B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,2BAA2B,EAAE,MAAM,CAAC;IACpC,iCAAiC,EAAE,MAAM,CAAC;IAC1C,4BAA4B,EAAE,MAAM,CAAC;IACrC,kCAAkC,EAAE,MAAM,CAAC;IAC3C,qCAAqC,EAAE,MAAM,CAAC;IAC9C,sBAAsB,EAAE,MAAM,CAAC;IAC/B,0BAA0B,EAAE,MAAM,CAAC;IACnC,uBAAuB,EAAE,MAAM,CAAC;IAChC,uBAAuB,EAAE,MAAM,CAAC;IAChC,uBAAuB,EAAE,MAAM,CAAC;CACjC,CAAC"}

package/lib/typescript/src/version.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "0.14.0";
+export declare const VERSION = "0.15.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-native-comnyx",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "React Native chat component with integrated support panel, enabling real-time customer communication and efficient agent workflow management.",
   "source": "./src/index.ts",
   "main": "./src/index.ts",

package/src/NativeComnyxMediaPicker.ts

@@ -3,13 +3,7 @@ import type { MediaAsset } from './types/MediaTypes';
 
 const { ComnyxMediaPicker } = NativeModules;
 
-export async function pickMedia(): Promise<MediaAsset[]> {
-  if (!ComnyxMediaPicker) {
-    return [];
-  }
-  const results = await ComnyxMediaPicker.pickMedia();
-  if (!results || !Array.isArray(results) || results.length === 0) return [];
-
+function mapResults(results: any[]): MediaAsset[] {
   return results.map((result: any) => {
     const isImage =
       result.type === 'image' ||
@@ -29,6 +23,33 @@ export async function pickMedia(): Promise<MediaAsset[]> {
   });
 }
 
+export async function pickMedia(): Promise<MediaAsset[]> {
+  if (!ComnyxMediaPicker) {
+    return [];
+  }
+  const results = await ComnyxMediaPicker.pickMedia();
+  if (!results || !Array.isArray(results) || results.length === 0) return [];
+  return mapResults(results);
+}
+
+export async function pickImage(): Promise<MediaAsset[]> {
+  if (!ComnyxMediaPicker) {
+    return [];
+  }
+  const results = await ComnyxMediaPicker.pickImage();
+  if (!results || !Array.isArray(results) || results.length === 0) return [];
+  return mapResults(results);
+}
+
+export async function pickVideo(): Promise<MediaAsset[]> {
+  if (!ComnyxMediaPicker) {
+    return [];
+  }
+  const results = await ComnyxMediaPicker.pickVideo();
+  if (!results || !Array.isArray(results) || results.length === 0) return [];
+  return mapResults(results);
+}
+
 export async function openVideo(uri: string): Promise<void> {
   if (!ComnyxMediaPicker) {
     console.warn('[Comnyx] ComnyxMediaPicker native module is not available');

package/src/components/MediaPickerButton.tsx

@@ -1,12 +1,29 @@
-import { TouchableOpacity, Image } from 'react-native';
-import { useCallback } from 'react';
+import {
+  TouchableOpacity,
+  Image,
+  View,
+  Modal,
+  Animated,
+  Dimensions,
+  TouchableWithoutFeedback,
+  Platform,
+} from 'react-native';
+import { useState, useCallback, useRef } from 'react';
 import { useThemeColors } from '../hooks/useThemeColors';
 import { ScaledSheet } from './ScaledSheet';
 import { activeOpacity } from '../constants/activeOpacity';
-import { pickMedia } from '../NativeComnyxMediaPicker';
+import { pickImage, pickVideo } from '../NativeComnyxMediaPicker';
+import { AppText } from './AppText';
+import { useLocalize } from '../hooks/useLocalize';
 import type { MediaAsset } from '../types/MediaTypes';
 
 const paperclipIcon = require('../assets/attachment-01.png');
+const galleryIcon = require('../assets/gallery.png');
+const videoPlayIcon = require('../assets/video-play.png');
+
+const closeCircleIcon = require('../assets/x-circle.png');
+
+const SCREEN_HEIGHT = Dimensions.get('window').height;
 
 export function MediaPickerButton({
   onMediaSelected,
@@ -14,23 +31,166 @@ export function MediaPickerButton({
   onMediaSelected: (assets: MediaAsset[]) => void;
 }) {
   const themeColors = useThemeColors();
+  const localize = useLocalize();
+  const [visible, setVisible] = useState(false);
+  const slideAnim = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
+
+  const open = useCallback(() => {
+    setVisible(true);
+    Animated.spring(slideAnim, {
+      toValue: 0,
+      useNativeDriver: true,
+      bounciness: 4,
+      speed: 14,
+    }).start();
+  }, [slideAnim]);
+
+  const close = useCallback(() => {
+    Animated.timing(slideAnim, {
+      toValue: SCREEN_HEIGHT,
+      duration: 250,
+      useNativeDriver: true,
+    }).start(() => {
+      setVisible(false);
+    });
+  }, [slideAnim]);
+
+  const pendingAction = useRef<(() => void) | null>(null);
+
+  const dismissAndRun = useCallback(
+    (action: () => void) => {
+      slideAnim.setValue(SCREEN_HEIGHT);
+      if (Platform.OS === 'ios') {
+        // Defer action until Modal's onDismiss fires to avoid
+        // "Attempt to present on a VC which is already presenting"
+        pendingAction.current = action;
+        setVisible(false);
+      } else {
+        setVisible(false);
+        action();
+      }
+    },
+    [slideAnim]
+  );
 
-  const showPicker = useCallback(async () => {
-    const assets = await pickMedia();
-    if (assets.length > 0) onMediaSelected(assets);
-  }, [onMediaSelected]);
+  const handlePickImage = useCallback(async () => {
+    dismissAndRun(async () => {
+      try {
+        const assets = await pickImage();
+        if (assets.length > 0) onMediaSelected(assets);
+      } catch (e) {
+        console.error('[Comnyx] pickImage error:', e);
+      }
+    });
+  }, [dismissAndRun, onMediaSelected]);
+
+  const handlePickVideo = useCallback(async () => {
+    dismissAndRun(async () => {
+      try {
+        const assets = await pickVideo();
+        if (assets.length > 0) onMediaSelected(assets);
+      } catch (e) {
+        console.error('[Comnyx] pickVideo error:', e);
+      }
+    });
+  }, [dismissAndRun, onMediaSelected]);
 
   return (
-    <TouchableOpacity
-      style={styles.button}
-      onPress={showPicker}
-      activeOpacity={activeOpacity}
-    >
-      <Image
-        source={paperclipIcon}
-        style={[styles.icon, { tintColor: themeColors.text }]}
-      />
-    </TouchableOpacity>
+    <>
+      <TouchableOpacity
+        style={styles.button}
+        onPress={open}
+        activeOpacity={activeOpacity}
+      >
+        <Image
+          source={paperclipIcon}
+          style={[styles.icon, { tintColor: themeColors.text }]}
+        />
+      </TouchableOpacity>
+
+      <Modal
+        visible={visible}
+        transparent
+        animationType="none"
+        onRequestClose={close}
+        onDismiss={() => {
+          if (pendingAction.current) {
+            const action = pendingAction.current;
+            pendingAction.current = null;
+            action();
+          }
+        }}
+        statusBarTranslucent
+      >
+        <TouchableWithoutFeedback onPress={close}>
+          <View style={styles.overlay}>
+            <TouchableWithoutFeedback>
+              <Animated.View
+                style={[
+                  styles.sheet,
+                  {
+                    backgroundColor: themeColors.background,
+                    transform: [{ translateY: slideAnim }],
+                  },
+                ]}
+              >
+                <View style={styles.handle} />
+
+                <View style={styles.titleRow}>
+                  <AppText style={[styles.title, { color: themeColors.text }]}>
+                    {localize('chat.media.pick.title')}
+                  </AppText>
+                  {Platform.OS === 'android' && (
+                    <TouchableOpacity
+                      onPress={close}
+                      activeOpacity={activeOpacity}
+                      style={styles.closeButton}
+                    >
+                      <Image
+                        source={closeCircleIcon}
+                        style={styles.closeIcon}
+                      />
+                    </TouchableOpacity>
+                  )}
+                </View>
+
+                <TouchableOpacity
+                  style={styles.option}
+                  onPress={handlePickImage}
+                  activeOpacity={activeOpacity}
+                >
+                  <Image
+                    source={galleryIcon}
+                    style={[styles.optionIcon, { tintColor: themeColors.text }]}
+                  />
+                  <AppText
+                    style={[styles.optionText, { color: themeColors.text }]}
+                  >
+                    {localize('chat.media.pick.photo')}
+                  </AppText>
+                </TouchableOpacity>
+
+                <TouchableOpacity
+                  style={styles.option}
+                  onPress={handlePickVideo}
+                  activeOpacity={activeOpacity}
+                >
+                  <Image
+                    source={videoPlayIcon}
+                    style={[styles.optionIcon, { tintColor: themeColors.text }]}
+                  />
+                  <AppText
+                    style={[styles.optionText, { color: themeColors.text }]}
+                  >
+                    {localize('chat.media.pick.video')}
+                  </AppText>
+                </TouchableOpacity>
+              </Animated.View>
+            </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    </>
   );
 }
 
@@ -45,4 +205,65 @@ const styles = ScaledSheet.create({
     width: '28@vs',
     height: '28@vs',
   },
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    justifyContent: 'flex-end',
+  },
+  sheet: {
+    borderTopLeftRadius: '16@vs',
+    borderTopRightRadius: '16@vs',
+    paddingBottom: '34@vs',
+    paddingTop: '12@vs',
+    paddingHorizontal: '20@s',
+  },
+  handle: {
+    width: '36@s',
+    height: '4@vs',
+    backgroundColor: '#ccc',
+    borderRadius: '2@vs',
+    alignSelf: 'center',
+    marginBottom: '16@vs',
+  },
+  titleRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: '16@vs',
+  },
+  title: {
+    fontSize: '18@vs',
+    fontWeight: '600',
+  },
+  closeButton: {
+    padding: '4@vs',
+  },
+  closeIcon: {
+    width: '22@vs',
+    height: '22@vs',
+  },
+  optionIcon: {
+    width: '24@vs',
+    height: '24@vs',
+    marginRight: '12@s',
+  },
+  option: {
+    paddingVertical: '14@vs',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  optionText: {
+    fontSize: '16@vs',
+  },
+  cancelButton: {
+    marginTop: '8@vs',
+    paddingVertical: '14@vs',
+    alignItems: 'center',
+    borderTopWidth: 0.5,
+    borderTopColor: '#ddd',
+  },
+  cancelText: {
+    fontSize: '16@vs',
+    opacity: 0.6,
+  },
 });

package/src/components/MediaViewerModal.tsx

@@ -6,7 +6,7 @@ import {
   StatusBar,
   useWindowDimensions,
 } from 'react-native';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { AppText } from './AppText';
 import { ScaledSheet } from './ScaledSheet';
 import { activeOpacity } from '../constants/activeOpacity';
@@ -29,6 +29,12 @@ export function MediaViewerModal({
   const [imageError, setImageError] = useState(false);
   const isVideo = mediaType === 'video';
   const displayUri = isVideo ? thumbnailUri || undefined : mediaUri;
+  // Reset error state when URI or visibility changes
+  useEffect(() => {
+    if (visible) {
+      setImageError(false);
+    }
+  }, [visible, mediaUri]);
 
   const handlePlayVideo = () => {
     if (mediaUri) {
@@ -61,6 +67,7 @@ export function MediaViewerModal({
               source={{ uri: displayUri }}
               style={{ width, height: height * 0.9 }}
               resizeMode="contain"
+              resizeMethod="resize"
               onError={() => setImageError(true)}
             />
           ) : (

package/src/components/MessageItem.tsx

@@ -185,7 +185,6 @@ function TextMessageItem({
                     /https?:\/\/(?:[-\w.])+(?::[0-9]+)?(?:\/(?:[\w/_.])*(?:\?(?:[\w&=%.])*)?(?:#(?:[\w.])*)?)?/g,
                   color: '#0066CC',
                   navigate: (url) => {
-                    console.log('url', url);
                     if (url) {
                       Linking.openURL(url);
                     }