@@ -83,9 +83,64 @@ const spinnerStyles = StyleSheet.create({
8383 } ,
8484} ) ;
8585
86+ function ErrorBanner ( {
87+ message,
88+ onDismiss,
89+ } : {
90+ message : string | null ;
91+ onDismiss : ( ) => void ;
92+ } ) {
93+ if ( ! message ) return null ;
94+ return (
95+ < View style = { errorBannerStyles . container } >
96+ < Text style = { errorBannerStyles . message } numberOfLines = { 3 } >
97+ { message }
98+ </ Text >
99+ < TouchableOpacity
100+ onPress = { onDismiss }
101+ style = { errorBannerStyles . closeButton }
102+ >
103+ < Text style = { errorBannerStyles . closeText } > ✕</ Text >
104+ </ TouchableOpacity >
105+ </ View >
106+ ) ;
107+ }
108+
109+ const errorBannerStyles = StyleSheet . create ( {
110+ container : {
111+ backgroundColor : '#FEE2E2' ,
112+ borderLeftWidth : 4 ,
113+ borderLeftColor : '#EF4444' ,
114+ borderRadius : 8 ,
115+ marginHorizontal : 16 ,
116+ marginVertical : 8 ,
117+ paddingVertical : 10 ,
118+ paddingLeft : 12 ,
119+ paddingRight : 8 ,
120+ flexDirection : 'row' ,
121+ alignItems : 'center' ,
122+ } ,
123+ message : {
124+ flex : 1 ,
125+ color : '#991B1B' ,
126+ fontSize : 14 ,
127+ lineHeight : 20 ,
128+ } ,
129+ closeButton : {
130+ padding : 4 ,
131+ marginLeft : 8 ,
132+ } ,
133+ closeText : {
134+ color : '#991B1B' ,
135+ fontSize : 16 ,
136+ fontWeight : '600' ,
137+ } ,
138+ } ) ;
139+
86140function App ( ) {
87141 const [ userInput , setUserInput ] = useState ( '' ) ;
88142 const [ isTextInputFocused , setIsTextInputFocused ] = useState ( false ) ;
143+ const [ error , setError ] = useState < string | null > ( null ) ;
89144 const textInputRef = useRef < TextInput > ( null ) ;
90145 const scrollViewRef = useRef < ScrollView > ( null ) ;
91146
@@ -98,9 +153,7 @@ function App() {
98153 // } });
99154
100155 useEffect ( ( ) => {
101- if ( llm . error ) {
102- console . log ( 'LLM error:' , llm . error ) ;
103- }
156+ if ( llm . error ) setError ( String ( llm . error ) ) ;
104157 } , [ llm . error ] ) ;
105158
106159 const sendMessage = async ( ) => {
@@ -111,7 +164,7 @@ function App() {
111164 try {
112165 await llm . sendMessage ( userInput ) ;
113166 } catch ( e ) {
114- console . error ( e ) ;
167+ setError ( e instanceof Error ? e . message : String ( e ) ) ;
115168 }
116169 } ;
117170
@@ -123,11 +176,12 @@ function App() {
123176 keyboardVerticalOffset = { Platform . OS === 'ios' ? 100 : 0 }
124177 >
125178 < Spinner
126- visible = { ! llm . isReady }
179+ visible = { ! llm . isReady && ! llm . error }
127180 textContent = { `Loading model ${ ( llm . downloadProgress * 100 ) . toFixed ( 0 ) } %` }
128181 />
129182
130183 < SafeAreaView style = { styles . content } >
184+ < ErrorBanner message = { error } onDismiss = { ( ) => setError ( null ) } />
131185 { llm . messageHistory . length > 0 || llm . isGenerating ? (
132186 < ScrollView
133187 ref = { scrollViewRef }
0 commit comments