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, + }, +});