stream-chat-react-native-core 9.9.4 → 9.10.0-beta.1

package/src/ai-components/services/media-picker-service/expo.ts

@@ -0,0 +1,148 @@
+import { Image, Platform } from 'react-native';
+
+import type { ImagePickerAsset } from 'expo-image-picker';
+
+import {
+  AbstractMediaPickerService,
+  type MediaAsset,
+  type PickMediaOpts,
+} from './AbstractMediaPickerService';
+
+let internalService = undefined;
+
+try {
+  internalService = require('expo-image-picker');
+} catch (_error) {
+  /* do nothing */
+}
+
+type Size = {
+  height?: number;
+  width?: number;
+};
+
+class ExpoMediaPickerService extends AbstractMediaPickerService {
+  pickMedia = async ({ maxNumberOfFiles = 3 }: PickMediaOpts = {}) => {
+    try {
+      let permissionGranted = true;
+      if (Platform.OS === 'ios') {
+        const permissionCheck = await internalService!.getMediaLibraryPermissionsAsync();
+        const canRequest = permissionCheck.canAskAgain;
+        permissionGranted = permissionCheck.granted;
+        if (!permissionGranted) {
+          if (canRequest) {
+            const response = await internalService!.requestMediaLibraryPermissionsAsync();
+            permissionGranted = response.granted;
+          } else {
+            return { askToOpenSettings: true, cancelled: true };
+          }
+        }
+      }
+      if (permissionGranted) {
+        const result = await internalService!.launchImageLibraryAsync({
+          allowsMultipleSelection: true,
+          mediaTypes: 'images',
+          preferredAssetRepresentationMode: 'current',
+          selectionLimit: maxNumberOfFiles,
+        });
+
+        const canceled = result.canceled;
+
+        if (!canceled) {
+          const assets = result.assets.map((asset: ImagePickerAsset) => ({
+            ...asset,
+            name: asset.fileName,
+            size: asset.fileSize,
+            type: asset.mimeType,
+            uri: asset.uri,
+          }));
+          this.appendAssets(assets);
+          return { assets, cancelled: false };
+        } else {
+          return { cancelled: true };
+        }
+      }
+      return { cancelled: true };
+    } catch (error) {
+      console.log('Error while picking image', error);
+      return { cancelled: true };
+    }
+  };
+
+  takeMedia = async ({ compressionQuality = 1 }) => {
+    try {
+      const permissionCheck = await internalService!.getCameraPermissionsAsync();
+      const canRequest = permissionCheck.canAskAgain;
+      let permissionGranted = permissionCheck.granted;
+      if (!permissionGranted) {
+        if (canRequest) {
+          const response = await internalService!.requestCameraPermissionsAsync();
+          permissionGranted = response.granted;
+        } else {
+          return { askToOpenSettings: true, cancelled: true };
+        }
+      }
+
+      if (permissionGranted) {
+        const result = await internalService!.launchCameraAsync({
+          mediaTypes: 'images',
+          quality: Math.min(Math.max(0, compressionQuality), 1),
+        });
+        if (!result || !result.assets || !result.assets.length || result.canceled) {
+          return { cancelled: true };
+        }
+        // since we only support single photo upload for now we will only be focusing on 0'th element.
+        const photo = result.assets[0];
+        if (!photo) {
+          return { cancelled: true };
+        }
+        if (photo && photo.mimeType.includes('image') && photo.height && photo.width && photo.uri) {
+          let size: Size = {};
+          if (Platform.OS === 'android') {
+            const getSize = (): Promise<Size> =>
+              new Promise((resolve) => {
+                Image.getSize(photo.uri, (width, height) => {
+                  resolve({ height, width });
+                });
+              });
+
+            try {
+              const { height, width } = await getSize();
+              size.height = height;
+              size.width = width;
+            } catch (e) {
+              console.warn('Error get image size of picture caputred from camera ', e);
+            }
+          } else {
+            size = {
+              height: photo.height,
+              width: photo.width,
+            };
+          }
+          const clearFilter = new RegExp('[.:]', 'g');
+          const date = new Date().toISOString().replace(clearFilter, '_');
+          const asset: MediaAsset = {
+            name: 'image_' + date + '.' + photo.uri.split('.').pop(),
+            size: photo.fileSize,
+            type: photo.mimeType,
+            uri: photo.uri,
+            height: size.height!,
+            width: size.width!,
+          };
+          this.appendAssets([asset]);
+          return {
+            cancelled: false,
+            asset,
+          };
+        }
+      }
+    } catch (error) {
+      console.log(error);
+    }
+    return { cancelled: true };
+  };
+}
+
+const MediaPickerService = internalService ? ExpoMediaPickerService : undefined;
+
+export { MediaPickerService };

package/src/ai-components/services/media-picker-service/hooks/useMediaPickerState.ts

@@ -0,0 +1,14 @@
+import { useStateStore } from '@stream-io/state-store/react-bindings';
+
+import type { AbstractMediaPickerService } from '../AbstractMediaPickerService';
+import { type MediaPickerState } from '../AbstractMediaPickerService';
+
+export const selector = (nextState: MediaPickerState) => ({
+  attachments: nextState.assets,
+});
+
+export const useMediaPickerState = ({
+  service,
+}: {
+  service: AbstractMediaPickerService | undefined;
+}) => useStateStore(service?.state, selector);

package/src/ai-components/services/media-picker-service/index.ts

@@ -0,0 +1,4 @@
+import { MediaPickerService as ExpoMediaPickerService } from './expo';
+import { MediaPickerService as RNCLIMediaPickerService } from './rncli';
+
+export const MediaPickerService = RNCLIMediaPickerService ?? ExpoMediaPickerService;

package/src/ai-components/services/media-picker-service/optional-modules.d.ts

@@ -0,0 +1,25 @@
+// The image picker libraries are optional peer dependencies (`react-native-image-picker` for React
+// Native CLI apps, `expo-image-picker` for Expo apps) and are not installed in this package. Only
+// the asset shapes the media picker services read are declared here.
+
+declare module 'react-native-image-picker' {
+  export type Asset = {
+    fileName?: string;
+    fileSize?: number;
+    height?: number;
+    type?: string;
+    uri?: string;
+    width?: number;
+  };
+}
+
+declare module 'expo-image-picker' {
+  export type ImagePickerAsset = {
+    fileName?: string | null;
+    fileSize?: number;
+    height: number;
+    mimeType?: string;
+    uri: string;
+    width: number;
+  };
+}

package/src/ai-components/services/media-picker-service/rncli.ts

@@ -0,0 +1,142 @@
+import { AppState, Image, PermissionsAndroid, Platform } from 'react-native';
+import type { Asset } from 'react-native-image-picker';
+
+import {
+  AbstractMediaPickerService,
+  type MediaAsset,
+  type PickMediaOpts,
+} from './AbstractMediaPickerService';
+
+let internalService = undefined;
+
+try {
+  internalService = require('react-native-image-picker');
+} catch (_error) {
+  /* do nothing */
+}
+
+class RNCLIMediaPickerService extends AbstractMediaPickerService {
+  pickMedia = async ({ maxNumberOfFiles = 3 }: PickMediaOpts = {}) => {
+    try {
+      const result = await internalService!.launchImageLibrary({
+        assetRepresentationMode: 'current',
+        mediaType: 'photo',
+        selectionLimit: maxNumberOfFiles,
+      });
+      const canceled = result.didCancel;
+      const errorCode = result.errorCode;
+
+      if (Platform.OS === 'ios' && errorCode === 'permission') {
+        return { askToOpenSettings: true, cancelled: true };
+      }
+      if (!canceled) {
+        const assets = result.assets.map((asset: Asset) => ({
+          ...asset,
+          name: asset.fileName,
+          size: asset.fileSize,
+          type: asset.type,
+          uri: asset.uri,
+        }));
+        this.appendAssets(assets);
+        return { assets, cancelled: false };
+      } else {
+        return { cancelled: true };
+      }
+    } catch (error) {
+      console.log('Error picking image: ', error);
+      return { cancelled: true };
+    }
+  };
+
+  takeMedia = async ({ compressionQuality = Platform.OS === 'ios' ? 0.8 : 1 }) => {
+    if (Platform.OS === 'android') {
+      const cameraPermissions = await PermissionsAndroid.check(
+        PermissionsAndroid.PERMISSIONS.CAMERA,
+      );
+      if (!cameraPermissions) {
+        const androidPermissionStatus = await PermissionsAndroid.request(
+          PermissionsAndroid.PERMISSIONS.CAMERA,
+        );
+        if (androidPermissionStatus === PermissionsAndroid.RESULTS.DENIED) {
+          return { cancelled: true };
+        } else if (androidPermissionStatus === PermissionsAndroid.RESULTS.NEVER_ASK_AGAIN) {
+          return { askToOpenSettings: true, cancelled: true };
+        }
+      }
+    }
+    try {
+      const result = await internalService!.launchCamera({
+        mediaType: 'photo',
+        quality: Math.min(Math.max(0, compressionQuality), 1),
+      });
+      if (!result || !result.assets || !result.assets.length || result.didCancel) {
+        return {
+          cancelled: true,
+        };
+      }
+      const asset = result.assets[0];
+      if (!asset) {
+        return {
+          cancelled: true,
+        };
+      }
+      if (asset.height && asset.width && asset.uri) {
+        let size: { height?: number; width?: number } = {};
+        if (Platform.OS === 'android') {
+          // Height and width returned by ImagePicker are incorrect on Android.
+          const getSize = (): Promise<{ height: number; width: number }> =>
+            new Promise((resolve) => {
+              Image.getSize(asset.uri, (width, height) => {
+                resolve({ height, width });
+              });
+            });
+
+          try {
+            const { height, width } = await getSize();
+            size.height = height;
+            size.width = width;
+          } catch (e) {
+            // do nothing
+            console.warn('Error while getting image size of picture captured from camera ', e);
+          }
+        } else {
+          size = {
+            height: asset.height,
+            width: asset.width,
+          };
+        }
+        const clearFilter = new RegExp('[.:]', 'g');
+        const date = new Date().toISOString().replace(clearFilter, '_');
+        const localAsset: MediaAsset = {
+          name: 'image_' + date + '.' + asset.uri.split('.').pop(),
+          size: asset.fileSize,
+          type: asset.type,
+          uri: asset.uri,
+          ...size,
+        };
+        this.appendAssets([localAsset]);
+        return {
+          cancelled: false,
+          asset: localAsset,
+        };
+      }
+    } catch (e: unknown) {
+      if (e instanceof Error) {
+        // on iOS: if it was in inactive state, then the user had just denied the permissions
+        if (Platform.OS === 'ios' && AppState.currentState === 'active') {
+          const cameraPermissionDeniedMsg = 'User did not grant camera permission.';
+          // Open settings when the user did not allow camera permissions
+          if (e.message === cameraPermissionDeniedMsg) {
+            return { askToOpenSettings: true, cancelled: true };
+          }
+        }
+      }
+    }
+
+    return { cancelled: true };
+  };
+}
+
+const MediaPickerService = internalService ? RNCLIMediaPickerService : undefined;
+
+export { MediaPickerService };

package/src/ai-components/store/bottom-sheet/store.ts

@@ -0,0 +1,30 @@
+import { Keyboard } from 'react-native';
+
+import { StateStore } from '@stream-io/state-store';
+
+export type BottomSheetState = {
+  open: boolean;
+  height: number;
+};
+
+const DEFAULT_STATE: BottomSheetState = {
+  open: false,
+  height: Number.MAX_SAFE_INTEGER,
+};
+
+export const sheetStore = new StateStore<BottomSheetState>(DEFAULT_STATE);
+
+const openSheet = () => {
+  Keyboard.dismiss();
+  sheetStore.partialNext({ open: true });
+};
+
+const closeSheet = () => sheetStore.partialNext(DEFAULT_STATE);
+
+const setHeight = (height: number) => sheetStore.partialNext({ height });
+
+export const sheetStoreApi = {
+  openSheet,
+  closeSheet,
+  setHeight,
+};

package/src/ai-components/store/bottom-sheet/useBottomSheetState.ts

@@ -0,0 +1,10 @@
+import { useStateStore } from '@stream-io/state-store/react-bindings';
+
+import { type BottomSheetState, sheetStore } from './store';
+
+const selector = ({ open, height }: BottomSheetState) => ({
+  open,
+  height,
+});
+
+export const useBottomSheetState = () => useStateStore(sheetStore, selector);

package/src/ai-components/store/composer/store.ts

@@ -0,0 +1,12 @@
+import { StateStore } from '@stream-io/state-store';
+
+export type ComposerState = {
+  text: string;
+  custom?: Record<string, unknown>;
+};
+
+const DEFAULT_STATE: ComposerState = {
+  text: '',
+};
+
+export const createNewComposerStore = () => new StateStore<ComposerState>(DEFAULT_STATE);

package/src/ai-components/store/composer/useComposerHasText.ts

@@ -0,0 +1,14 @@
+import { useStateStore } from '@stream-io/state-store/react-bindings';
+
+import { type ComposerState } from './store';
+
+import { useMessageComposerContext } from '../../contexts';
+
+const selector = ({ text }: ComposerState) => ({
+  hasText: !!text && text.length > 0,
+});
+
+export const useComposerHasText = () => {
+  const { state } = useMessageComposerContext();
+  return useStateStore(state, selector);
+};

package/src/ai-components/store/composer/useComposerText.ts

@@ -0,0 +1,14 @@
+import { useStateStore } from '@stream-io/state-store/react-bindings';
+
+import { type ComposerState } from './store';
+
+import { useMessageComposerContext } from '../../contexts';
+
+const selector = ({ text }: ComposerState) => ({
+  text,
+});
+
+export const useComposerText = () => {
+  const { state } = useMessageComposerContext();
+  return useStateStore(state, selector);
+};

package/src/ai-components/store/dictation/store.ts

@@ -0,0 +1,23 @@
+import { StateStore } from '@stream-io/state-store';
+
+import type { DictationError, DictationStateValue } from '../../native-specs/NativeAIDictation';
+
+export type DictationStoreState = {
+  state: DictationStateValue;
+  transcript: string;
+  isRecording: boolean;
+  error?: DictationError | null;
+};
+
+const DEFAULT_STATE: DictationStoreState = {
+  state: 'idle',
+  transcript: '',
+  isRecording: false,
+  error: null,
+};
+
+export const dictationStore = new StateStore<DictationStoreState>(DEFAULT_STATE);
+
+const reset = () => dictationStore.next(DEFAULT_STATE);
+
+export const dictationStoreApi = { reset };

package/src/ai-components/store/dictation/useDictationState.ts

@@ -0,0 +1,11 @@
+import { useStateStore } from '@stream-io/state-store/react-bindings';
+
+import { dictationStore, type DictationStoreState } from './store';
+
+const selector = ({ state, isRecording, error }: DictationStoreState) => ({
+  state,
+  isRecording,
+  error,
+});
+
+export const useDictationState = () => useStateStore(dictationStore, selector);

package/src/ai-components/store/dictation/useDictationTranscript.ts

@@ -0,0 +1,9 @@
+import { useStateStore } from '@stream-io/state-store/react-bindings';
+
+import { dictationStore, type DictationStoreState } from './store';
+
+const selector = ({ transcript }: DictationStoreState) => ({
+  transcript,
+});
+
+export const useDictationTranscript = () => useStateStore(dictationStore, selector);

package/src/ai-components/store/index.ts

@@ -0,0 +1,11 @@
+// bottom sheet
+export * from './bottom-sheet/store';
+export * from './bottom-sheet/useBottomSheetState';
+
+// message composer
+export * from './composer/store';
+export * from './composer/useComposerHasText';
+export * from './composer/useComposerText';
+
+// dictation
+export * from './dictation/store';

package/src/ai-components/syntax-highlighting/SyntaxHighlighter.tsx

@@ -0,0 +1,66 @@
+import React, { type PropsWithChildren, useMemo } from 'react';
+import { Platform, type ProcessedColorValue } from 'react-native';
+
+import './prism-config';
+
+// Imported by file: Metro does not tree-shake, so the package index (every highlighter variant,
+// including the async ones) and the style indexes (every bundled theme) would all be bundled.
+import SyntaxHighlighterHljs from 'react-syntax-highlighter/dist/esm/default-highlight';
+import SyntaxHighlighterPrism from 'react-syntax-highlighter/dist/esm/prism';
+import defaultStyle from 'react-syntax-highlighter/dist/esm/styles/hljs/default-style';
+import prismDefaultStyle from 'react-syntax-highlighter/dist/esm/styles/prism/prism';
+
+import type { NativeSyntaxHighlighterProps, SyntaxHighlighterStylesheet } from './types';
+import { DEFAULT_FONT_SIZE, generateNewStylesheet, nativeRenderer } from './utils';
+
+import { MarkdownReactiveScrollView } from '../components';
+
+export type ColorRange = {
+  start: number;
+  end: number;
+  color: ProcessedColorValue;
+};
+
+export const SyntaxHighlighter = ({
+  fontFamily = Platform.OS === 'ios' ? 'Courier' : 'Monospace',
+  fontSize = DEFAULT_FONT_SIZE,
+  children,
+  highlighter = 'highlightjs',
+  style = highlighter === 'prism' ? prismDefaultStyle : defaultStyle,
+  PreTag = MarkdownReactiveScrollView,
+  CodeTag = MarkdownReactiveScrollView,
+  ...rest
+}: PropsWithChildren<NativeSyntaxHighlighterProps>) => {
+  const { transformedStyle, defaultColor } = useMemo(
+    () =>
+      generateNewStylesheet({
+        stylesheet: style,
+        highlighter,
+      }),
+    [highlighter, style],
+  );
+  const renderer = useMemo(
+    () =>
+      nativeRenderer({
+        defaultColor: defaultColor as string,
+        fontFamily,
+        fontSize,
+      }),
+    [defaultColor, fontFamily, fontSize],
+  );
+
+  const Highlighter = highlighter === 'prism' ? SyntaxHighlighterPrism : SyntaxHighlighterHljs;
+
+  return (
+    <Highlighter
+      PreTag={PreTag}
+      CodeTag={CodeTag}
+      {...rest}
+      style={transformedStyle as SyntaxHighlighterStylesheet}
+      horizontal={true}
+      renderer={renderer}
+    >
+      {children}
+    </Highlighter>
+  );
+};

package/src/ai-components/syntax-highlighting/components/AndroidNativeRenderer.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { PerfText } from '../../components';
+import { flattenRowsToTextAndColorRanges } from '../utils';
+
+export const AndroidNativeRenderer = ({
+  rows,
+  stylesheet,
+  defaultColor,
+  fontFamily,
+  fontSize,
+  lineHeight = 17,
+}: {
+  rows: rendererNode[];
+  stylesheet: rendererProps['stylesheet'];
+  defaultColor: string;
+  fontFamily?: string;
+  fontSize: number;
+  lineHeight: number;
+}) => {
+  const { text, ranges } = flattenRowsToTextAndColorRanges(rows, {
+    stylesheet,
+    defaultColor,
+    fontFamily,
+    fontSize,
+  });
+
+  return <PerfText text={text} ranges={ranges} lineHeight={lineHeight} fontSize={fontSize} />;
+};

package/src/ai-components/syntax-highlighting/components/index.ts

@@ -0,0 +1 @@
+export * from './AndroidNativeRenderer';

package/src/ai-components/syntax-highlighting/index.ts

@@ -0,0 +1,11 @@
+/**
+ * This sub-library is a port/took inspiration from https://github.com/conorhastings/react-native-syntax-highlighter.
+ * We create our own since we don't want the version of https://github.com/react-syntax-highlighter/react-syntax-highlighter
+ * to be pinned to version 6 but rather use whatever we see fit.
+ */
+
+export * from './SyntaxHighlighter';
+export * from './prism-config';
+export * from './utils';
+
+export * from './types';

package/src/ai-components/syntax-highlighting/prism-config.ts

@@ -0,0 +1,4 @@
+// @ts-expect-error This negates the global variable set by react-syntax-highlighter
+global.Prism = { disableWorkerMessageHandler: true };
+
+export {};

package/src/ai-components/syntax-highlighting/types.ts

@@ -0,0 +1,26 @@
+import type React from 'react';
+import type { TextStyle } from 'react-native';
+import type { SyntaxHighlighterProps } from 'react-syntax-highlighter';
+
+export type RNStyle = TextStyle;
+export type RNSheet = Record<string, RNStyle>;
+
+export type SyntaxHighlighterStylesheet = NonNullable<NativeSyntaxHighlighterProps['style']>;
+
+export type ExtraSyntaxHighlighterProps = {
+  fontFamily?: string;
+  fontSize?: number;
+  highlighter?: 'highlightjs' | 'prism';
+};
+
+export type NativeSyntaxHighlighterProps = SyntaxHighlighterProps & ExtraSyntaxHighlighterProps;
+
+export type CSSP = React.CSSProperties;
+
+/** Options for unit conversion */
+export type ConvertOpts = {
+  /** base for `em` (defaults to 16) */
+  baseFontSize?: number;
+  /** root base for `rem` (defaults to baseFontSize) */
+  rootFontSize?: number;
+};