diff --git a/apps/bare_rn/App.tsx b/apps/bare_rn/App.tsx
index b36aaf0a6d..2e7925507c 100644
--- a/apps/bare_rn/App.tsx
+++ b/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() {
What can I help you with?
+
+ {[
+ '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) => (
+ setUserInput(prompt)}
+ >
+ {prompt}
+
+ ))}
+
)}
@@ -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,
diff --git a/apps/bare_rn/ios/Podfile.lock b/apps/bare_rn/ios/Podfile.lock
index 75d4644d60..71a6ec3475 100644
--- a/apps/bare_rn/ios/Podfile.lock
+++ b/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
diff --git a/apps/llm/app/_layout.tsx b/apps/llm/app/_layout.tsx
index 9977cce267..f04edee9a5 100644
--- a/apps/llm/app/_layout.tsx
+++ b/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: () => (
+
+ ),
}}
>
What can I help you with?
+
)}
@@ -113,6 +125,7 @@ function LLMScreen() {
placeholderTextColor={'#C1C6E5'}
multiline={true}
ref={textInputRef}
+ value={userInput}
onChangeText={(text: string) => setUserInput(text)}
/>
{userInput && (
diff --git a/apps/llm/app/llm_structured_output/index.tsx b/apps/llm/app/llm_structured_output/index.tsx
index 7439107e44..316787fb71 100644
--- a/apps/llm/app/llm_structured_output/index.tsx
+++ b/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.
+
)}
@@ -198,6 +210,7 @@ function LLMScreen() {
placeholderTextColor={'#C1C6E5'}
multiline={true}
ref={textInputRef}
+ value={userInput}
onChangeText={(text: string) => setUserInput(text)}
/>
{userInput && (
diff --git a/apps/llm/app/llm_tool_calling/index.tsx b/apps/llm/app/llm_tool_calling/index.tsx
index d1601bbf80..a65544081c 100644
--- a/apps/llm/app/llm_tool_calling/index.tsx
+++ b/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() {
I can use calendar! Ask me to check it or add an event for you!
+
)}
@@ -239,6 +251,7 @@ function LLMToolCallingScreen() {
placeholderTextColor={'#C1C6E5'}
multiline={true}
ref={textInputRef}
+ value={userInput}
onChangeText={(text: string) => setUserInput(text)}
/>
{userInput && (
diff --git a/apps/llm/app/multimodal_llm/index.tsx b/apps/llm/app/multimodal_llm/index.tsx
index 1781684a0d..5b7b8f735b 100644
--- a/apps/llm/app/multimodal_llm/index.tsx
+++ b/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() {
Pick an image and ask me anything about it.
+
)}
@@ -152,6 +164,7 @@ function MultimodalLLMScreen() {
placeholder={imageUri ? 'Ask about the image…' : 'Your message'}
placeholderTextColor="#C1C6E5"
multiline
+ value={userInput}
onChangeText={setUserInput}
/>
diff --git a/apps/llm/components/SuggestedPrompts.tsx b/apps/llm/components/SuggestedPrompts.tsx
new file mode 100644
index 0000000000..7f66379b48
--- /dev/null
+++ b/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 (
+
+ {prompts.map((prompt, i) => (
+ onSelect(prompt)}
+ >
+ {prompt}
+
+ ))}
+
+ );
+}
+
+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,
+ },
+});