chore: Suggest prompts in llm demo apps (#984)

## Description

This change add suggestions in llm apps to make it easier for testing.
Also changes color in hamburger in llm navigation.

### Introduces a breaking change?

- [ ] Yes
- [x] No

### Type of change

- [ ] Bug fix (change which fixes an issue)
- [ ] New feature (change which adds functionality)
- [ ] Documentation update (improves or adds clarity to existing
documentation)
- [x] Other (chores, tests, code style improvements etc.)

### Tested on

- [x] iOS
- [ ] Android

### Testing instructions

- [x] Test if suggestions appear correctly in llm apps
- [x] Check that hamburger icons are now visible in llm demo apps.

### Screenshots

<img width="375" height="843" alt="image"
src="https://github.com/user-attachments/assets/49b59057-61ed-41af-ae61-a6733e51a0b9"
/>

### Related issues

Closes #957 

### Checklist

- [x] I have performed a self-review of my code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have updated the documentation accordingly
- [x] My changes generate no new warnings

### Additional notes

<!-- Include any additional information, assumptions, or context that
reviewers might need to understand this PR. -->

Author: msluszniak

apps/bare_rn/App.tsx

@@ -9,6 +9,7 @@ import {
   StyleSheet,
   Text,
   TextInput,
+  TouchableOpacity,
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
@@ -176,6 +177,22 @@ function App() {
                 <Text style={styles.welcomeSubtitle}>
                   What can I help you with?
                 </Text>
+                <View style={styles.suggestionsContainer}>
+                  {[
+                    'Explain quantum computing in simple terms',
+                    'Write a short poem about coding',
+                    'What are the benefits of on-device AI?',
+                    'Give me 3 fun facts about space',
+                  ].map((prompt, i) => (
+                    <TouchableOpacity
+                      key={i}
+                      style={styles.suggestionChip}
+                      onPress={() => setUserInput(prompt)}
+                    >
+                      <Text style={styles.suggestionChipText}>{prompt}</Text>
+                    </TouchableOpacity>
+                  ))}
+                </View>
               </View>
             </TouchableWithoutFeedback>
           )}
@@ -253,6 +270,25 @@ const styles = StyleSheet.create({
     color: ColorPalette.blueDark,
     textAlign: 'center',
   },
+  suggestionsContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    gap: 8,
+    paddingTop: 16,
+  },
+  suggestionChip: {
+    borderWidth: 1,
+    borderColor: ColorPalette.blueLight,
+    borderRadius: 20,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    backgroundColor: '#fafbff',
+  },
+  suggestionChipText: {
+    fontSize: 13,
+    color: ColorPalette.primary,
+  },
   messageBubble: {
     maxWidth: '80%',
     padding: 12,

apps/bare_rn/ios/Podfile.lock

@@ -2717,7 +2717,7 @@ SPEC CHECKSUMS:
   React-Mapbuffer: 94f4264de2cb156960cd82b338a403f4653f2fd9
   React-microtasksnativemodule: 6c4ee39a36958c39c97b074d28f360246a335e84
   react-native-background-downloader: 114f96122822fa97b06ea0f2250b8e8270696995
-  react-native-executorch: 86764f0bd936e8ff18fdb30c36343bb01aab54da
+  react-native-executorch: 517da022131a15a98ea5337f02a88e7807a1ec3d
   react-native-safe-area-context: befb5404eb8a16fdc07fa2bebab3568ecabcbb8a
   React-NativeModulesApple: ebf2ce72b35870036900d6498b33724386540a71
   React-oscompat: eb0626e8ba1a2c61673c991bf9dc21834898475d

apps/llm/app/_layout.tsx

@@ -8,6 +8,7 @@ import {
   DrawerContentComponentProps,
   DrawerContentScrollView,
   DrawerItemList,
+  DrawerToggleButton,
 } from '@react-navigation/drawer';
 import { GeneratingContext } from '../context';
 
@@ -55,6 +56,9 @@ export default function _layout() {
           drawerInactiveTintColor: '#888',
           headerTintColor: ColorPalette.primary,
           headerTitleStyle: { color: ColorPalette.primary },
+          headerLeft: () => (
+            <DrawerToggleButton tintColor={ColorPalette.primary} />
+          ),
         }}
       >
         <Drawer.Screen

apps/llm/app/llm/index.tsx

@@ -20,6 +20,14 @@ import Messages from '../../components/Messages';
 import { useIsFocused } from '@react-navigation/native';
 import { GeneratingContext } from '../../context';
 import Spinner from '../../components/Spinner';
+import SuggestedPrompts from '../../components/SuggestedPrompts';
+
+const SUGGESTED_PROMPTS = [
+  'Explain quantum computing in simple terms',
+  'Write a short poem about coding',
+  'What are the benefits of on-device AI?',
+  'Give me 3 fun facts about space',
+];
 
 export default function LLMScreenWrapper() {
   const isFocused = useIsFocused();
@@ -88,6 +96,10 @@ function LLMScreen() {
               <Text style={styles.bottomHelloText}>
                 What can I help you with?
               </Text>
+              <SuggestedPrompts
+                prompts={SUGGESTED_PROMPTS}
+                onSelect={setUserInput}
+              />
             </View>
           )}
 
@@ -113,6 +125,7 @@ function LLMScreen() {
               placeholderTextColor={'#C1C6E5'}
               multiline={true}
               ref={textInputRef}
+              value={userInput}
               onChangeText={(text: string) => setUserInput(text)}
             />
             {userInput && (

apps/llm/app/llm_structured_output/index.tsx

@@ -12,6 +12,14 @@ import {
 } from 'react-native';
 import SendIcon from '../../assets/icons/send_icon.svg';
 import Spinner from '../../components/Spinner';
+import SuggestedPrompts from '../../components/SuggestedPrompts';
+
+const SUGGESTED_PROMPTS = [
+  "I'm John. Is this damaged? I offer $100.",
+  "Hi, I'm Alice! How old is it? Offering $250 USD.",
+  "I'm Bob. Does it have warranty? I'll pay €50.",
+  "Name's Sara. What condition? My bid is $75.",
+];
 import {
   useLLM,
   fixAndValidateStructuredOutput,
@@ -169,6 +177,10 @@ function LLMScreen() {
                 I can parse user's questions! Introduce yourself, ask questions
                 and offer a price for some product.
               </Text>
+              <SuggestedPrompts
+                prompts={SUGGESTED_PROMPTS}
+                onSelect={setUserInput}
+              />
             </View>
           )}
 
@@ -198,6 +210,7 @@ function LLMScreen() {
               placeholderTextColor={'#C1C6E5'}
               multiline={true}
               ref={textInputRef}
+              value={userInput}
               onChangeText={(text: string) => setUserInput(text)}
             />
             {userInput && (

apps/llm/app/llm_tool_calling/index.tsx

@@ -31,6 +31,14 @@ import * as Calendar from 'expo-calendar';
 import { executeTool, TOOL_DEFINITIONS_PHONE } from '../../utils/tools';
 import { useIsFocused } from '@react-navigation/native';
 import { GeneratingContext } from '../../context';
+import SuggestedPrompts from '../../components/SuggestedPrompts';
+
+const SUGGESTED_PROMPTS = [
+  'What events do I have today?',
+  'Add a meeting tomorrow at 2pm',
+  'Set screen brightness to 50%',
+  'What do I have scheduled this week?',
+];
 
 export default function LLMToolCallingScreenWrapper() {
   const isFocused = useIsFocused();
@@ -191,6 +199,10 @@ function LLMToolCallingScreen() {
               <Text style={styles.bottomHelloText}>
                 I can use calendar! Ask me to check it or add an event for you!
               </Text>
+              <SuggestedPrompts
+                prompts={SUGGESTED_PROMPTS}
+                onSelect={setUserInput}
+              />
             </View>
           )}
 
@@ -239,6 +251,7 @@ function LLMToolCallingScreen() {
               placeholderTextColor={'#C1C6E5'}
               multiline={true}
               ref={textInputRef}
+              value={userInput}
               onChangeText={(text: string) => setUserInput(text)}
             />
             {userInput && (

apps/llm/app/multimodal_llm/index.tsx

@@ -20,6 +20,14 @@ import ColorPalette from '../../colors';
 import Messages from '../../components/Messages';
 import Spinner from '../../components/Spinner';
 import { GeneratingContext } from '../../context';
+import SuggestedPrompts from '../../components/SuggestedPrompts';
+
+const SUGGESTED_PROMPTS = [
+  "What's in this image?",
+  'Describe this scene in detail',
+  'What objects can you see?',
+  'What text appears in this image?',
+];
 
 export default function MultimodalLLMScreenWrapper() {
   const isFocused = useIsFocused();
@@ -108,6 +116,10 @@ function MultimodalLLMScreen() {
               <Text style={styles.bottomHelloText}>
                 Pick an image and ask me anything about it.
               </Text>
+              <SuggestedPrompts
+                prompts={SUGGESTED_PROMPTS}
+                onSelect={setUserInput}
+              />
             </View>
           )}
 
@@ -152,6 +164,7 @@ function MultimodalLLMScreen() {
               placeholder={imageUri ? 'Ask about the image…' : 'Your message'}
               placeholderTextColor="#C1C6E5"
               multiline
+              value={userInput}
               onChangeText={setUserInput}
             />
 

apps/llm/components/SuggestedPrompts.tsx

@@ -0,0 +1,47 @@
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import ColorPalette from '../colors';
+
+interface Props {
+  prompts: string[];
+  onSelect: (prompt: string) => void;
+}
+
+export default function SuggestedPrompts({ prompts, onSelect }: Props) {
+  return (
+    <View style={styles.container}>
+      {prompts.map((prompt, i) => (
+        <TouchableOpacity
+          key={i}
+          style={styles.chip}
+          onPress={() => onSelect(prompt)}
+        >
+          <Text style={styles.chipText}>{prompt}</Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    gap: 8,
+    paddingHorizontal: 16,
+    paddingTop: 16,
+  },
+  chip: {
+    borderWidth: 1,
+    borderColor: ColorPalette.blueLight,
+    borderRadius: 20,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    backgroundColor: '#fafbff',
+  },
+  chipText: {
+    fontFamily: 'regular',
+    fontSize: 13,
+    color: ColorPalette.primary,
+  },
+});