fix: ask for permissions even if denied at some point (tool calling example app)

apps/llm/app.json

@@ -50,7 +50,8 @@
       "supportsTablet": true,
       "bundleIdentifier": "com.anonymous.llm",
       "infoPlist": {
-        "NSMicrophoneUsageDescription": "This app needs access to your microphone to record audio."
+        "NSMicrophoneUsageDescription": "This app needs access to your microphone to record audio.",
+        "NSCalendarsUsageDescription": "This app needs access to your calendar to manage events."
       },
       "entitlements": {
         "com.apple.developer.kernel.increased-memory-limit": true

apps/llm/app/llm_tool_calling/index.tsx

@@ -9,6 +9,9 @@ import {
   TouchableOpacity,
   TouchableWithoutFeedback,
   View,
+  Linking,
+  Alert,
+  AppState,
 } from 'react-native';
 import SWMIcon from '../../assets/icons/swm_icon.svg';
 import SendIcon from '../../assets/icons/send_icon.svg';
@@ -36,6 +39,8 @@ export default function LLMToolCallingScreenWrapper() {
 function LLMToolCallingScreen() {
   const [isTextInputFocused, setIsTextInputFocused] = useState(false);
   const [userInput, setUserInput] = useState('');
+  const [hasCalendarPermission, setHasCalendarPermission] = useState(true);
+  const [hasBrightnessPermission, setHasBrightnessPermission] = useState(true);
   const textInputRef = useRef<TextInput>(null);
   const { setGlobalGenerating } = useContext(GeneratingContext);
 
@@ -65,25 +70,78 @@ function LLMToolCallingScreen() {
     }
   }, [llm.error]);
 
-  // PERMISSIONS
+  const requestCalendarPermission = async () => {
+    const { status, canAskAgain } =
+      await Calendar.getCalendarPermissionsAsync();
+
+    if (status === Calendar.PermissionStatus.GRANTED) {
+      setHasCalendarPermission(true);
+      return;
+    }
+
+    if (status === Calendar.PermissionStatus.UNDETERMINED || canAskAgain) {
+      const { status: nextStatus } =
+        await Calendar.requestCalendarPermissionsAsync();
+      setHasCalendarPermission(
+        nextStatus === Calendar.PermissionStatus.GRANTED
+      );
+      return;
+    }
+
+    setHasCalendarPermission(false);
+    Alert.alert(
+      'Calendar Permission Required',
+      'To read or add events, the app requires "Full Access" to your calendar. Please enable this in your device settings.',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { text: 'Open Settings', onPress: () => Linking.openSettings() },
+      ]
+    );
+  };
+
+  const requestBrightnessPermission = async () => {
+    const { status, canAskAgain } = await Brightness.getPermissionsAsync();
+
+    if (status === Brightness.PermissionStatus.GRANTED) {
+      setHasBrightnessPermission(true);
+      return;
+    }
+
+    if (status === Brightness.PermissionStatus.UNDETERMINED || canAskAgain) {
+      const { status: nextStatus } = await Brightness.requestPermissionsAsync();
+      setHasBrightnessPermission(
+        nextStatus === Brightness.PermissionStatus.GRANTED
+      );
+      return;
+    }
+
+    setHasBrightnessPermission(false);
+    Alert.alert(
+      'Brightness Permission Required',
+      'To change screen brightness, the app requires permission. Please enable this in your device settings.',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { text: 'Open Settings', onPress: () => Linking.openSettings() },
+      ]
+    );
+  };
+
   useEffect(() => {
-    (async () => {
-      const { status } = await Calendar.requestCalendarPermissionsAsync();
-      if (status !== 'granted') {
-        console.log(
-          'No access to calendar! We need this to use app correctly!'
-        );
-      }
-    })();
-
-    (async () => {
-      const { status } = await Brightness.requestPermissionsAsync();
-      if (status !== 'granted') {
-        console.log(
-          'No access to brightness! We need this to use app correctly!'
-        );
+    requestCalendarPermission();
+    requestBrightnessPermission();
+  }, []);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', (nextAppState) => {
+      if (nextAppState === 'active') {
+        requestCalendarPermission();
+        requestBrightnessPermission();
       }
-    })();
+    });
+
+    return () => {
+      subscription.remove();
+    };
   }, []);
 
   const sendMessage = async () => {
@@ -99,17 +157,13 @@ function LLMToolCallingScreen() {
   return !llm.isReady ? (
     <Spinner
       visible={!llm.isReady}
-      textContent={`Loading the model ${(llm.downloadProgress * 100).toFixed(
-        0
-      )} %`}
+      textContent={`Loading the model ${(llm.downloadProgress * 100).toFixed(0)} %`}
     />
   ) : (
     <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
       <View style={styles.container}>
         <KeyboardAvoidingView
-          style={{
-            ...styles.container,
-          }}
+          style={{ ...styles.container }}
           collapsable={false}
           behavior={Platform.OS === 'ios' ? 'padding' : undefined}
           keyboardVerticalOffset={Platform.OS === 'ios' ? 120 : 40}
@@ -135,6 +189,29 @@ function LLMToolCallingScreen() {
             </View>
           )}
 
+          {!hasCalendarPermission && (
+            <TouchableOpacity
+              style={styles.permissionBanner}
+              onPress={requestCalendarPermission}
+            >
+              <Text style={styles.permissionBannerText}>
+                Calendar access is required.{' '}
+                <Text style={styles.permissionBannerLink}>Grant Access</Text>
+              </Text>
+            </TouchableOpacity>
+          )}
+          {!hasBrightnessPermission && (
+            <TouchableOpacity
+              style={styles.permissionBanner}
+              onPress={requestBrightnessPermission}
+            >
+              <Text style={styles.permissionBannerText}>
+                Brightness access is required.{' '}
+                <Text style={styles.permissionBannerLink}>Grant Access</Text>
+              </Text>
+            </TouchableOpacity>
+          )}
+
           <View style={styles.bottomContainer}>
             <TextInput
               autoCorrect={false}
@@ -229,4 +306,19 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'flex-end',
   },
+  permissionBanner: {
+    backgroundColor: '#FFF3CD',
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    alignItems: 'center',
+  },
+  permissionBannerText: {
+    fontFamily: 'regular',
+    fontSize: 13,
+    color: '#856404',
+  },
+  permissionBannerLink: {
+    fontFamily: 'medium',
+    color: ColorPalette.blueDark,
+  },
 });

apps/llm/utils/tools.ts

@@ -81,6 +81,10 @@ export const TOOL_DEFINITIONS_PHONE = [
 
 const brightness = async (call: ToolCall) => {
   console.log('Changing brightness!', call);
+  const { status } = await Brightness.getPermissionsAsync();
+  if (status !== Brightness.PermissionStatus.GRANTED) {
+    return 'Brightness permission denied. Inform the user they need to grant brightness access in the app.';
+  }
   if (
     'targetBrightness' in call.arguments &&
     typeof call.arguments.targetBrightness === 'number'
@@ -104,6 +108,10 @@ const brightness = async (call: ToolCall) => {
 
 const readCalendar = async (call: ToolCall) => {
   console.log('Reading calendar!', call);
+  const { status } = await Calendar.getCalendarPermissionsAsync();
+  if (status !== Calendar.PermissionStatus.GRANTED) {
+    return 'Calendar permission denied. Inform the user they need to grant calendar access in the app.';
+  }
 
   let startTime = Date.parse(
     'timeStart' in call.arguments &&
@@ -190,6 +198,10 @@ const readCalendar = async (call: ToolCall) => {
 
 const addEventToCalendar = async (call: ToolCall) => {
   console.log('Adding event to calendar!', call);
+  const { status } = await Calendar.getCalendarPermissionsAsync();
+  if (status !== Calendar.PermissionStatus.GRANTED) {
+    return 'Calendar permission denied. Inform the user they need to grant calendar access in the app.';
+  }
   if (
     'time' in call.arguments &&
     typeof call.arguments.time === 'string' &&