feat(react-native): expo config plugin for dictation (#19)

This PR adds an `Expo` config to be built together with the SDK and
ready to be used for the purposes of dictation permissions. It will add
both the `Android` permissions to `AndroidManifest.xml` as well as the
`iOS` permissions to `Info.plist`.

In addition to that, it also adds an `Expo` sample app to be used for
testing purposes.

Author: isekovanic

.changeset/tame-donkeys-clap.md

@@ -0,0 +1,10 @@
+---
+'ReactNativeChatGPTSample': patch
+'expochatgptsample': patch
+'@stream-io/chat-react-native-ai': patch
+---
+
+- Introduce expo config plugin for dictation permissions
+- Fix race condition when no permissions are yet present on ios dictation
+- Include Expo sample app as well
+- Fix wrong dependency graph resolution between RNCLI and Expo sample apps

examples/ExpoChatGPTSample/.gitignore

@@ -0,0 +1,40 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+ios/
+android/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example

examples/ExpoChatGPTSample/README.md

@@ -0,0 +1,29 @@
+# Expo Skia example
+
+Use [`expo-router`](https://docs.expo.dev/router/introduction/) with [`@shopify/react-native-skia`](https://shopify.github.io/react-native-skia/) to build beautiful, high-performance graphics applications across web and native.
+
+## Launch your own
+
+[![Launch with Expo](https://github.com/expo/examples/blob/master/.gh-assets/launch.svg?raw=true)](https://launch.expo.dev/?github=https://github.com/expo/examples/tree/master/with-skia)
+
+## 🚀 How to use
+
+```sh
+npx create-expo-app -e with-skia
+```
+
+- Load Skia components with `React.lazy` to ensure they aren't loaded on the server.
+- Using a custom suspensy component in `components/async-skia.tsx` to suspend the UI on web until the Skia WASM is fetched and loaded. This ensures errors and pending states are handled in React.
+- A postinstall script copies the `canvaskit.wasm` file to the `public` folder for web support. This must be hosted to work on web, use `eas deploy` to push to production.
+
+## Deploy
+
+Deploy on all platforms with Expo Application Services (EAS).
+
+- Deploy the website: `npx eas-cli deploy` — [Learn more](https://docs.expo.dev/eas/hosting/get-started/)
+- Deploy on iOS and Android using: `npx eas-cli build` — [Learn more](https://expo.dev/eas)
+
+## 📝 Notes
+
+- [Expo Router: Docs](https://docs.expo.dev/router/introduction/)
+- [React Native Skia: Docs](https://shopify.github.io/react-native-skia/)

examples/ExpoChatGPTSample/app.json

@@ -0,0 +1,35 @@
+{
+  "expo": {
+    "scheme": "skia",
+    "web": {
+      "output": "static"
+    },
+    "ios": {
+      "bundleIdentifier": "io.getstream.expochatgptsample",
+      "appleTeamId": "EHV7XZLAHA"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": "The app accesses your photos to let them share with others.",
+          "cameraPermission": "The app accesses your camera to let you take photos and share with others."
+        }
+      ],
+      [
+        "@stream-io/chat-react-native-ai",
+        {
+          "dictationMicrophoneUsageDescription": "$(PRODUCT_NAME) would like to access your microphone to capture your voice.",
+          "dictationSpeechRecognitionUsageDescription": "$(PRODUCT_NAME) would like to access speech recognition to transcribe your voice."
+        }
+      ]
+    ],
+    "name": "ExpoChatGPTSample",
+    "slug": "ExpoChatGPTSample",
+    "android": {
+      "permissions": ["android.permission.RECORD_AUDIO"],
+      "package": "io.getstream.expochatgptsample"
+    }
+  }
+}

examples/ExpoChatGPTSample/app/_layout.tsx

@@ -0,0 +1,57 @@
+import { Drawer } from 'expo-router/drawer';
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Chat, OverlayProvider, useCreateChatClient } from 'stream-chat-expo';
+import {
+  chatApiKey,
+  chatUserId,
+  chatUserName,
+  chatUserToken,
+} from '../chatConfig';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { AppProvider } from '../contexts/AppContext';
+import { StreamTheme } from '@stream-io/chat-react-native-ai';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import type { LocalMessage } from 'stream-chat';
+import { MenuDrawer } from '../screens/MenuDrawer';
+
+const isMessageAIGenerated = (message: LocalMessage) => !!message.ai_generated;
+
+export default function Layout() {
+  const chatClient = useCreateChatClient({
+    apiKey: chatApiKey,
+    tokenOrProvider: chatUserToken,
+    userData: { id: chatUserId, name: chatUserName },
+  });
+
+  if (!chatClient) {
+    return null;
+  }
+  return (
+    <SafeAreaProvider>
+      <AppProvider client={chatClient}>
+        <StreamTheme>
+          <GestureHandlerRootView style={styles.container}>
+            <OverlayProvider>
+              <Chat
+                client={chatClient}
+                isMessageAIGenerated={isMessageAIGenerated}
+              >
+                <Drawer
+                  drawerContent={MenuDrawer}
+                  screenOptions={{ drawerStyle: { width: 300 } }}
+                >
+                  <Drawer.Screen name={'index'} />
+                </Drawer>
+              </Chat>
+            </OverlayProvider>
+          </GestureHandlerRootView>
+        </StreamTheme>
+      </AppProvider>
+    </SafeAreaProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});

examples/ExpoChatGPTSample/app/index.tsx

@@ -0,0 +1,6 @@
+import { ChatContent } from '../screens/ChatContent';
+
+const Page = () => {
+  return <ChatContent />;
+};
+export default Page;

examples/ExpoChatGPTSample/babel.config.js

@@ -0,0 +1,10 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      '@babel/plugin-proposal-export-namespace-from',
+      'react-native-worklets/plugin',
+    ],
+  };
+};

examples/ExpoChatGPTSample/bottomSheetOptions.ts

@@ -0,0 +1,41 @@
+import { Alert } from 'react-native';
+import {
+  Copy,
+  DownloadArrow,
+  DownloadCloud,
+  Flag,
+  Edit,
+} from 'stream-chat-expo';
+
+export const bottomSheetOptions = [
+  {
+    title: 'Create Image',
+    subtitle: 'Visualize anything',
+    action: () => Alert.alert('Pressed on Create Image !'),
+    Icon: DownloadArrow,
+  },
+  {
+    title: 'Thinking',
+    subtitle: 'Think longer for better answers',
+    action: () => Alert.alert('Pressed on Thinking !'),
+    Icon: Flag,
+  },
+  {
+    title: 'Deep research',
+    subtitle: 'Get a detailed report',
+    action: () => Alert.alert('Pressed on Deep research !'),
+    Icon: DownloadCloud,
+  },
+  {
+    title: 'Web search',
+    subtitle: 'Find real-time news and info',
+    action: () => Alert.alert('Pressed on Web search !'),
+    Icon: Copy,
+  },
+  {
+    title: 'Study and learn',
+    subtitle: 'Learn a new concept',
+    action: () => Alert.alert('Pressed on Study and learn !'),
+    Icon: Edit,
+  },
+];

examples/ExpoChatGPTSample/chatConfig.ts

@@ -0,0 +1,5 @@
+export const chatApiKey = 'zcgvnykxsfm8';
+export const chatUserId = 'rn-ai-test-user-3';
+export const chatUserToken =
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicm4tYWktdGVzdC11c2VyLTMifQ.kOg3zLkzHc-b_5IyckQr-RixbebN-GDs7N3c570oA5A';
+export const chatUserName = 'Bob';

examples/ExpoChatGPTSample/components/async-skia.native.tsx

@@ -0,0 +1,4 @@
+// Skia is embedded in the native binary on native platforms.
+export function AsyncSkia({}) {
+  return null;
+}