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

package/src/ai-components/message-composer/ComposerView.tsx

@@ -0,0 +1,187 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Platform, StyleSheet, TextInput, View } from 'react-native';
+
+import Animated, { LinearTransition } from 'react-native-reanimated';
+
+import type { StateStore } from '@stream-io/state-store';
+
+import { ActionButton } from './ActionButton';
+import { BottomSheetContent } from './ActionSheet';
+
+import { AttachmentButton } from './AttachmentButton';
+
+import { MediaPreviewList } from './MediaPreviewList';
+
+import { BottomSheet } from '../components/BottomSheet';
+
+import { ComposerProvider, useMessageComposerContext, useTheme } from '../contexts';
+import type {
+  AbstractMediaPickerService,
+  MediaPickerState,
+} from '../services/media-picker-service/AbstractMediaPickerService';
+import { useComposerText } from '../store';
+import type { ComposerState } from '../store';
+import { useDictationState } from '../store/dictation/useDictationState';
+import { useDictationTranscript } from '../store/dictation/useDictationTranscript';
+
+export type BottomSheetOption = {
+  title: string;
+  action: () => void | Promise<void>;
+  subtitle?: string;
+  Icon?: React.ComponentType;
+};
+
+export type BottomSheetInsets = {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+};
+
+export type ComposerViewProps = {
+  onSendMessage: (opts: {
+    text: string;
+    attachments?: MediaPickerState['assets'];
+    custom?: Record<string, unknown>;
+  }) => Promise<void>;
+  bottomSheetOptions?: BottomSheetOption[];
+  isGenerating?: boolean;
+  stopGenerating?: () => Promise<void>;
+  bottomSheetInsets?: BottomSheetInsets;
+  mediaPickerService?: AbstractMediaPickerService;
+  state?: StateStore<ComposerState>;
+};
+
+export const ComposerViewUI = ({
+  bottomSheetOptions = [],
+  bottomSheetInsets,
+  isGenerating,
+  stopGenerating,
+}: ComposerViewProps) => {
+  const {
+    theme: {
+      composer: { container, containerRow, inputPillContainer, inputPill },
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  return (
+    <View pointerEvents={'box-none'} style={[styles.container, container]}>
+      <View style={[styles.row, containerRow]}>
+        <AttachmentButton />
+
+        <Animated.View
+          style={[styles.inputPillContainer, inputPillContainer]}
+          layout={LinearTransition.duration(150)}
+        >
+          <MediaPreviewList />
+          <View style={[styles.inputPill, inputPill]}>
+            <AIMessageInput />
+            <ActionButton isGenerating={isGenerating} stopGenerating={stopGenerating} />
+          </View>
+        </Animated.View>
+      </View>
+      <BottomSheet>
+        <BottomSheetContent
+          bottomSheetOptions={bottomSheetOptions}
+          bottomSheetInsets={bottomSheetInsets}
+        />
+      </BottomSheet>
+    </View>
+  );
+};
+
+export const AIMessageInput = () => {
+  const {
+    theme: {
+      colors: { grey_neutral },
+      composer: { textInput },
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  const { error, isRecording } = useDictationState();
+  const { text } = useComposerText();
+  const { transcript } = useDictationTranscript();
+  const { setText } = useMessageComposerContext();
+  const previousTranscript = useRef(transcript);
+
+  useEffect(() => {
+    const transcriptChanged = transcript !== previousTranscript.current;
+    previousTranscript.current = transcript;
+    if (!error && (isRecording || transcriptChanged)) {
+      setText(transcript);
+    }
+  }, [isRecording, transcript, error, setText]);
+
+  return (
+    <TextInput
+      value={text}
+      onChangeText={setText}
+      placeholder={'Ask anything'}
+      placeholderTextColor={grey_neutral}
+      style={[styles.textInput, textInput]}
+      multiline
+      underlineColorAndroid={'transparent'}
+    />
+  );
+};
+
+export const ComposerView = (props: ComposerViewProps) => (
+  <ComposerProvider
+    onSendMessage={props.onSendMessage}
+    mediaPickerService={props.mediaPickerService}
+    state={props.state}
+  >
+    <ComposerViewUI {...props} />
+  </ComposerProvider>
+);
+
+const useStyles = () => {
+  const { theme } = useTheme();
+
+  return useMemo(() => {
+    const { colors, composer } = theme;
+
+    const pillHeight = composer.inputPillHeight;
+
+    return StyleSheet.create({
+      container: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+      },
+      row: {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+      },
+      inputPill: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        maxHeight: pillHeight * 3,
+      },
+      inputPillContainer: {
+        flex: 1,
+        minHeight: pillHeight,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: pillHeight / 2,
+        backgroundColor: colors.white_smoke,
+        paddingHorizontal: 14,
+        paddingVertical: Platform.OS === 'ios' ? 10 : 6,
+        shadowColor: colors.black,
+        shadowOpacity: 0.08,
+        shadowOffset: { width: 0, height: 1 },
+        shadowRadius: 4,
+        elevation: 2,
+      },
+      textInput: {
+        flex: 1,
+        fontSize: 16,
+        color: colors.black,
+        paddingVertical: 0,
+        paddingHorizontal: 0,
+        marginRight: 24,
+      },
+    });
+  }, [theme]);
+};

package/src/ai-components/message-composer/MediaPreviewList.tsx

@@ -0,0 +1,84 @@
+import React, { useMemo } from 'react';
+import { Image, Pressable, ScrollView, StyleSheet } from 'react-native';
+import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated';
+
+import { useMessageComposerContext, useTheme } from '../contexts';
+import { Close } from '../internal/icons/Close';
+import { useMediaPickerState } from '../services/media-picker-service/hooks/useMediaPickerState';
+
+export const MediaPreviewList = () => {
+  const { mediaPickerService } = useMessageComposerContext();
+  const { attachments } = useMediaPickerState({ service: mediaPickerService }) ?? {};
+  const {
+    theme: {
+      colors: { white },
+      composer: {
+        mediaPreviewStyle,
+        mediaPreviewContentContainerStyle,
+        mediaPreviewImage,
+        mediaPreviewRemoveButton,
+      },
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  if (!attachments?.length) {
+    return null;
+  }
+
+  return (
+    <ScrollView
+      style={[styles.mediaPreviewStyle, mediaPreviewStyle]}
+      contentContainerStyle={[
+        styles.mediaPreviewContentContainerStyle,
+        mediaPreviewContentContainerStyle,
+      ]}
+      horizontal={true}
+    >
+      {(attachments ?? []).map((attachment, index) => (
+        <Animated.View
+          key={attachment.uri}
+          entering={FadeIn.duration(150)}
+          exiting={FadeOut.duration(150)}
+          layout={LinearTransition.duration(150)}
+        >
+          <Image
+            style={[styles.mediaPreviewImage, mediaPreviewImage]}
+            source={{ uri: attachment.uri }}
+            width={100}
+            height={100}
+          />
+          <Pressable
+            style={[styles.mediaPreviewRemoveButton, mediaPreviewRemoveButton]}
+            onPress={() => mediaPickerService?.removeAsset(index)}
+          >
+            <Close pathFill={white} />
+          </Pressable>
+        </Animated.View>
+      ))}
+    </ScrollView>
+  );
+};
+
+const useStyles = () => {
+  const { theme } = useTheme();
+
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        mediaPreviewStyle: {
+          width: '100%',
+        },
+        mediaPreviewContentContainerStyle: { flexGrow: 1, paddingBottom: 8 },
+        mediaPreviewImage: { borderRadius: 12, marginRight: 8 },
+        mediaPreviewRemoveButton: {
+          position: 'absolute',
+          top: 8,
+          right: 12,
+          backgroundColor: theme.colors.overlay,
+          borderRadius: 24,
+        },
+      }),
+    [theme],
+  );
+};

package/src/ai-components/message-composer/SpeechToTextButton.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated';
+
+import { useStateStore } from '@stream-io/state-store/react-bindings';
+
+import { useTheme } from '../contexts';
+import { Mic } from '../internal/icons/Mic';
+
+import { isDictationAvailable, warnIfDictationUnavailable } from '../native/AIDictation';
+import type { DictationStartOptions } from '../native-specs/NativeAIDictation';
+import { dictationStore, type DictationStoreState } from '../store';
+import { useDictation } from '../transcription/useDictation';
+
+const selector = ({ isRecording }: DictationStoreState) => ({
+  isRecording,
+});
+
+type SpeechToTextButtonProps = {
+  options?: DictationStartOptions;
+};
+
+/**
+ * Renders nothing when the native dictation module is not part of the build (see
+ * `isDictationAvailable`), so that pressing the button can never reach a missing module.
+ */
+export const SpeechToTextButton = (props: SpeechToTextButtonProps) => {
+  if (!isDictationAvailable()) {
+    warnIfDictationUnavailable();
+    return null;
+  }
+
+  return <AvailableSpeechToTextButton {...props} />;
+};
+
+const AvailableSpeechToTextButton = ({ options }: SpeechToTextButtonProps) => {
+  const {
+    theme: {
+      colors: { grey, accent_blue },
+      composer: { iconButton, micIcon },
+    },
+  } = useTheme();
+
+  const { cancel, toggle } = useDictation(options);
+  const { isRecording } = useStateStore(dictationStore, selector);
+
+  useEffect(() => {
+    return () => {
+      cancel();
+    };
+  }, [cancel]);
+
+  return (
+    <Animated.View
+      key={'mic-button'}
+      entering={ZoomIn.duration(250)}
+      exiting={ZoomOut.duration(250)}
+    >
+      <Pressable style={[styles.iconButton, iconButton]} onPress={toggle}>
+        <View style={[styles.micIcon, micIcon]}>
+          <Mic size={32} viewBox={`0 0 ${32} ${28}`} fill={isRecording ? accent_blue : grey} />
+        </View>
+      </Pressable>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  micIcon: {
+    width: 32,
+    height: 32,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/ai-components/message-composer/index.ts

@@ -0,0 +1,5 @@
+export * from './ComposerView';
+export * from './ActionButton';
+export * from './AttachmentButton';
+export * from './MediaPreviewList';
+export * from './SpeechToTextButton';

package/src/ai-components/message-composer/utils/withCloseSheet.ts

@@ -0,0 +1,11 @@
+import { sheetStoreApi } from '../../store';
+
+export const withCloseSheet = <T extends unknown[]>(
+  callback: (...args: T) => void | Promise<void> | unknown | Promise<unknown> | undefined,
+) => {
+  return async (...args: T) => {
+    const result = await callback(...args);
+    sheetStoreApi.closeSheet();
+    return result;
+  };
+};

package/src/ai-components/native/AIDictation.ts

@@ -0,0 +1,77 @@
+import { NativeEventEmitter, Platform } from 'react-native';
+
+import NativeAIDictation, {
+  type DictationError,
+  type DictationResult,
+  type DictationStartOptions,
+  type DictationState,
+} from '../native-specs/NativeAIDictation';
+
+// Event names emitted by the native module (see `AIDictation.mm` and `AIDictationModule.kt`).
+const ON_STATE_EVENT = 'AIDictationOnState';
+const ON_RESULT_EVENT = 'AIDictationOnResult';
+const ON_ERROR_EVENT = 'AIDictationOnError';
+
+let eventEmitter: NativeEventEmitter | undefined;
+const getEventEmitter = () => {
+  if (!eventEmitter && NativeAIDictation) {
+    eventEmitter = new NativeEventEmitter(NativeAIDictation);
+  }
+  return eventEmitter;
+};
+
+const noop = () => {};
+
+/**
+ * Whether the native dictation module is part of this build. It is always compiled in on Android,
+ * while on iOS it is opt-in: add `$StreamChatEnableDictation = true` to your
+ * `Podfile` (or use the `stream-chat-expo` config plugin) and run `pod install`.
+ */
+export const isDictationAvailable = () => NativeAIDictation != null;
+
+let hasWarnedAboutMissingModule = false;
+export const warnIfDictationUnavailable = () => {
+  if (!__DEV__ || hasWarnedAboutMissingModule || isDictationAvailable()) {
+    return;
+  }
+  hasWarnedAboutMissingModule = true;
+  console.warn(
+    Platform.OS === 'ios'
+      ? '[stream-chat-react-native/ai-components] Dictation is not compiled into this build, so the speech-to-text button is hidden. Add `$StreamChatEnableDictation = true` to your Podfile (Expo: add the `stream-chat-expo` config plugin) and run `pod install`.'
+      : '[stream-chat-react-native/ai-components] Dictation is not available in this build, so the speech-to-text button is hidden.',
+  );
+};
+
+// Low-level API
+export const AIDictation = {
+  start(options?: DictationStartOptions) {
+    NativeAIDictation?.start(options);
+  },
+  stop() {
+    NativeAIDictation?.stop();
+  },
+  cancel() {
+    NativeAIDictation?.cancel();
+  },
+  isRecording() {
+    return NativeAIDictation?.isRecording() ?? false;
+  },
+  addResultListener(listener: (result: DictationResult) => void) {
+    const sub = getEventEmitter()?.addListener(ON_RESULT_EVENT, (event) =>
+      listener(event as DictationResult),
+    );
+    return sub ? () => sub.remove() : noop;
+  },
+  addStateListener(listener: (payload: DictationState) => void) {
+    const sub = getEventEmitter()?.addListener(ON_STATE_EVENT, (event) =>
+      listener(event as DictationState),
+    );
+    return sub ? () => sub.remove() : noop;
+  },
+  addErrorListener(listener: (payload: DictationError) => void) {
+    const sub = getEventEmitter()?.addListener(ON_ERROR_EVENT, (event) =>
+      listener(event as DictationError),
+    );
+    return sub ? () => sub.remove() : noop;
+  },
+};

package/src/ai-components/native/PerfText.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+
+import { NativeHandlers } from '../../native';
+import type { ColorRange } from '../syntax-highlighting';
+
+export type PerfTextProps = {
+  text: string;
+  ranges: ColorRange[];
+  style?: StyleProp<ViewStyle>;
+  selectable?: boolean;
+  fontSize?: number;
+  lineHeight?: number;
+};
+
+export const PerfText = ({ style, fontSize, lineHeight, ranges, text }: PerfTextProps) => {
+  const PerfTextNative = NativeHandlers.PerfText;
+  if (!PerfTextNative) {
+    return null;
+  }
+
+  return (
+    <PerfTextNative
+      style={style}
+      text={text}
+      colorRanges={ranges as { color: number; end: number; start: number }[]}
+      fontFamily={'monospace'}
+      fontSize={fontSize}
+      lineHeight={lineHeight}
+    />
+  );
+};

package/src/ai-components/native-specs/NativeAIDictation.ts

@@ -0,0 +1,48 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+/**
+ * Codegen spec of the native dictation module.
+ *
+ * This file is duplicated (byte for byte) in `package/native-package/src/native/NativeAIDictation.ts`
+ * and `package/expo-package/src/native/NativeAIDictation.ts`, which are the copies codegen reads.
+ * `yarn validate-entry-isolation` fails if they drift apart.
+ *
+ * Events are delivered through `addListener`/`removeListeners` and a `NativeEventEmitter` (see
+ * `../native/AIDictation.ts`) rather than codegen `EventEmitter` properties, since the latter are
+ * not understood by the codegen of every React Native version the SDK supports (>= 0.76).
+ */
+
+export type DictationStartOptions = {
+  language?: string;
+  interimResults?: boolean;
+  silenceTimeoutMs?: number;
+};
+
+export type DictationResult = {
+  text: string;
+  isFinal: boolean;
+};
+
+export type DictationStateValue = 'idle' | 'starting' | 'listening' | 'stopping';
+export type DictationState = { state: DictationStateValue };
+
+export type DictationError = {
+  code: string;
+  message: string;
+};
+
+export interface Spec extends TurboModule {
+  start(options?: DictationStartOptions): void;
+  stop(): void;
+  cancel(): void;
+  isRecording(): boolean;
+
+  addListener(eventName: string): void;
+  removeListeners(count: number): void;
+}
+
+// `get` rather than `getEnforcing`: the module is only compiled in when dictation is enabled
+// (always on Android, opt-in on iOS), and importing the AI entry point
+// must not throw when it is absent.
+export default TurboModuleRegistry.get<Spec>('AIDictation');

package/src/ai-components/services/clipboard-service/expo.ts

@@ -0,0 +1,11 @@
+let Clipboard: { setString: (string: string) => void } | undefined;
+
+try {
+  Clipboard = require('expo-clipboard');
+} catch (_) {
+  // do nothing
+}
+
+export const setClipboardString = Clipboard
+  ? (string: string) => Clipboard?.setString(string)
+  : undefined;

package/src/ai-components/services/clipboard-service/index.ts

@@ -0,0 +1,4 @@
+import { setClipboardString as expoSetClipboardString } from './expo';
+import { setClipboardString as rncliSetClipboardString } from './rncli';
+
+export const setClipboardString = rncliSetClipboardString ?? expoSetClipboardString;

package/src/ai-components/services/clipboard-service/rncli.ts

@@ -0,0 +1,11 @@
+let Clipboard: { setString: (string: string) => void } | undefined;
+
+try {
+  Clipboard = require('@react-native-clipboard/clipboard').default;
+} catch (_) {
+  // do nothing
+}
+
+export const setClipboardString = Clipboard
+  ? (string: string) => (Clipboard ? Clipboard.setString(string) : {})
+  : undefined;

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

@@ -0,0 +1,2 @@
+export * from './media-picker-service';
+export * from './clipboard-service';

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

@@ -0,0 +1,62 @@
+import { StateStore } from '@stream-io/state-store';
+
+export type MediaAsset = {
+  uri: string;
+  width?: number;
+  height?: number;
+  name?: string;
+  size?: number;
+  type?: string;
+};
+
+export type MediaPickerState = {
+  assets: MediaAsset[];
+};
+
+export type PickMediaOpts = { maxNumberOfFiles?: number };
+export type PickMediaReturnType = {
+  assets?: MediaAsset[];
+  cancelled?: boolean;
+  askToOpenSettings?: boolean;
+};
+export type PickMediaApi = (opts: PickMediaOpts) => Promise<PickMediaReturnType>;
+
+export type TakeMediaOpts = { compressionQuality?: number };
+export type TakeMediaReturnType = {
+  asset?: MediaAsset;
+  cancelled?: boolean;
+  askToOpenSettings?: boolean;
+};
+export type TakeMediaApi = (opts: TakeMediaOpts) => Promise<TakeMediaReturnType>;
+
+export abstract class AbstractMediaPickerService {
+  public state: StateStore<MediaPickerState>;
+
+  constructor() {
+    this.state = new StateStore<MediaPickerState>({
+      assets: [],
+    });
+  }
+
+  abstract pickMedia: PickMediaApi;
+
+  abstract takeMedia: TakeMediaApi;
+
+  appendAssets = (assets: MediaAsset[]) => {
+    this.state.next((prevState) => ({
+      ...prevState,
+      assets: [...prevState.assets, ...assets],
+    }));
+  };
+
+  removeAsset = (index: number) => {
+    this.state.next((prevState) => ({
+      ...prevState,
+      assets: prevState.assets.filter((_, i) => i !== index),
+    }));
+  };
+
+  clearAssets = () => {
+    this.state.partialNext({ assets: [] });
+  };
+}