feat: make changes according to suggestions made by @a-ghorbani

.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
   root: true,
   extends: '@react-native',
+  ignorePatterns: ['coverage/'],
 };

src/components/ChatView/ChatView.tsx

@@ -17,6 +17,7 @@ import {oneOf} from '@flyerhq/react-native-link-preview';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {useComponentSize} from '../KeyboardAccessoryView/hooks';
+import {LoadingBubble} from '../LoadingBubble';
 
 import {usePrevious, useTheme} from '../../hooks';
 
@@ -81,6 +82,10 @@ export interface ChatProps extends ChatTopLevelProps {
    * When true, indicates that there are no more pages to load and
    * pagination will not be triggered. */
   isLastPage?: boolean;
+  /** Indicates if the AI is currently streaming tokens */
+  isStreaming?: boolean;
+  /** Indicates if the AI is currently thinking (processing but not yet streaming) */
+  isThinking?: boolean;
   /** Override the default localized copy. */
   l10nOverride?: Partial<
     Record<keyof (typeof l10n)[keyof typeof l10n], string>
@@ -116,6 +121,8 @@ export const ChatView = ({
   isAttachmentUploading,
   isLastPage,
   isStopVisible,
+  isStreaming = false,
+  isThinking = false,
   l10nOverride,
   locale = 'en',
   messages,
@@ -149,7 +156,6 @@ export const ChatView = ({
     flatListContentContainer,
     footer,
     footerLoadingPage,
-    header,
     keyboardAccessoryView,
   } = styles({theme});
 
@@ -359,6 +365,11 @@ export const ChatView = ({
     [footer, footerLoadingPage, isNextPageLoading, theme.colors.primary],
   );
 
+  const renderListHeaderComponent = React.useCallback(
+    () => (isThinking ? <LoadingBubble /> : null),
+    [isThinking],
+  );
+
   const renderScrollable = React.useCallback(
     (panHandlers: GestureResponderHandlers) => (
       <FlatList
@@ -374,8 +385,7 @@ export const ChatView = ({
         initialNumToRender={10}
         ListEmptyComponent={renderListEmptyComponent}
         ListFooterComponent={renderListFooterComponent}
-        ListHeaderComponent={<View />}
-        ListHeaderComponentStyle={header}
+        ListHeaderComponent={renderListHeaderComponent}
         maxToRenderPerBatch={6}
         onEndReachedThreshold={0.75}
         style={flatList}
@@ -397,12 +407,12 @@ export const ChatView = ({
       flatListContentContainer,
       flatListProps,
       handleEndReached,
-      header,
       insets.bottom,
       keyExtractor,
       renderItem,
       renderListEmptyComponent,
       renderListFooterComponent,
+      renderListHeaderComponent,
     ],
   );
 
@@ -428,6 +438,7 @@ export const ChatView = ({
                 {...{
                   ...unwrap(inputProps),
                   isAttachmentUploading,
+                  isStreaming,
                   onAttachmentPress,
                   onSendPress,
                   onStopPress,

src/components/Input/Input.tsx

@@ -23,6 +23,8 @@ export interface InputTopLevelProps {
    * managing media in dependencies we have no way of knowing if
    * something is uploading so you need to set this manually. */
   isAttachmentUploading?: boolean;
+  /** Whether the AI is currently streaming tokens */
+  isStreaming?: boolean;
   /** @see {@link AttachmentButtonProps.onPress} */
   onAttachmentPress?: () => void;
   /** Will be called on {@link SendButton} tap. Has {@link MessageType.PartialText} which can
@@ -49,6 +51,7 @@ export const Input = ({
   attachmentButtonProps,
   attachmentCircularActivityIndicatorProps,
   isAttachmentUploading,
+  isStreaming = false,
   onAttachmentPress,
   onSendPress,
   onStopPress,
@@ -84,6 +87,16 @@ export const Input = ({
     }
   };
 
+  const shouldShowSendButton = () => {
+    if (isStreaming || isStopVisible) {
+      return false;
+    }
+    if (sendButtonVisibilityMode === 'always') {
+      return true;
+    }
+    return sendButtonVisibilityMode === 'editing' && user && value.trim();
+  };
+
   return (
     <View style={container}>
       {user &&
@@ -114,10 +127,7 @@ export const Input = ({
         onChangeText={handleChangeText}
         value={value}
       />
-      {sendButtonVisibilityMode === 'always' ||
-      (sendButtonVisibilityMode === 'editing' && user && value.trim()) ? (
-        <SendButton onPress={handleSend} />
-      ) : null}
+      {shouldShowSendButton() ? <SendButton onPress={handleSend} /> : null}
       {isStopVisible && <StopButton onPress={onStopPress} />}
     </View>
   );

src/components/LoadingBubble/LoadingBubble.tsx

@@ -1,9 +1,15 @@
 import React, {useEffect, useRef} from 'react';
-import {View, Animated, StyleSheet} from 'react-native';
+import {View, Animated} from 'react-native';
 import {useTheme} from '../../hooks';
 import {Theme} from '../../utils/types';
+import {styles} from './styles';
 
-const LoadingDot = ({delay, theme}: {delay: number; theme: Theme}) => {
+interface LoadingDotProps {
+  delay: number;
+  theme: Theme;
+}
+
+const LoadingDot: React.FC<LoadingDotProps> = ({delay, theme}) => {
   const opacity = useRef(new Animated.Value(0.3)).current;
 
   useEffect(() => {
@@ -37,7 +43,7 @@ const LoadingDot = ({delay, theme}: {delay: number; theme: Theme}) => {
   );
 };
 
-export const LoadingBubble = () => {
+export const LoadingBubble: React.FC = () => {
   const theme = useTheme();
 
   return (
@@ -52,20 +58,3 @@ export const LoadingBubble = () => {
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    padding: 12,
-    borderRadius: 16,
-    alignSelf: 'flex-start',
-    marginVertical: 4,
-    marginHorizontal: 8,
-    gap: 4,
-  },
-  dot: {
-    width: 6,
-    height: 6,
-    borderRadius: 3,
-  },
-});

src/components/LoadingBubble/styles.ts

@@ -0,0 +1,18 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    padding: 8,
+    borderRadius: 16,
+    alignSelf: 'flex-start',
+    marginVertical: 8,
+    marginHorizontal: 12,
+    gap: 4,
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+  },
+});

src/screens/ChatScreen/ChatScreen.tsx

@@ -4,7 +4,6 @@ import {observer} from 'mobx-react';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 
 import {Bubble, ChatView} from '../../components';
-import {LoadingBubble} from '../../components/LoadingBubble';
 
 import {useChatSession} from '../../hooks';
 
@@ -25,10 +24,6 @@ const renderBubble = ({
   message: MessageType.Any;
   nextMessageInGroup: boolean;
 }) => {
-  // Check for our special loading message
-  if (message.id === 'loading-indicator') {
-    return <LoadingBubble />;
-  }
   return (
     <Bubble
       child={child}
@@ -44,27 +39,13 @@ export const ChatScreen: React.FC = observer(() => {
     null,
   );
   const l10n = React.useContext(L10nContext);
-  const baseMessages: MessageType.Any[] =
-    chatSessionStore.currentSessionMessages;
+  const messages = chatSessionStore.currentSessionMessages;
 
   const {handleSendPress, handleStopPress, inferencing, isStreaming} =
-    useChatSession(context, currentMessageInfo, baseMessages, user, assistant);
+    useChatSession(context, currentMessageInfo, messages, user, assistant);
 
-  // Add loading message if inferencing but not yet streaming
-  const messages = React.useMemo(() => {
-    if (!inferencing || isStreaming) {
-      return baseMessages;
-    }
-    return [
-      {
-        id: 'loading-indicator',
-        type: 'text',
-        text: '',
-        author: assistant,
-      } as MessageType.Text,
-      ...baseMessages,
-    ];
-  }, [baseMessages, inferencing, isStreaming]);
+  // Show loading bubble only during the thinking phase (inferencing but not streaming)
+  const isThinking = inferencing && !isStreaming;
 
   return (
     <SafeAreaProvider>
@@ -80,9 +61,11 @@ export const ChatScreen: React.FC = observer(() => {
         onStopPress={handleStopPress}
         user={user}
         isStopVisible={inferencing}
+        isThinking={isThinking}
+        isStreaming={isStreaming}
+        sendButtonVisibilityMode="editing"
         textInputProps={{
-          editable: !!context && !inferencing,
-          value: inferencing ? '' : undefined,
+          editable: !!context,
           placeholder: !context
             ? modelStore.isContextLoading
               ? l10n.loadingModel

src/screens/ModelsScreen/ModelSettings/__tests__/ModelSettings.test.tsx

@@ -85,7 +85,7 @@
     expect(mockProps.onChange).toHaveBeenCalledWith('addBosToken', false);
   });
 
   it('opens and closes the template dialog', async () => {
     const {getByText, queryByText} = render(<ModelSettings {...mockProps} />);
 
     // Open dialog
@@ -94,19 +94,27 @@
       fireEvent.press(editButton);
     });
 
-    // Check if dialog is visible
-    expect(getByText('Save')).toBeTruthy();
-    expect(getByText('Cancel')).toBeTruthy();
+    // Wait for dialog to be visible
+    await waitFor(() => {
+      expect(getByText('Save')).toBeTruthy();
+      expect(getByText('Cancel')).toBeTruthy();
+    });
 
     const cancelButton = getByText('Cancel');
     await act(async () => {
       fireEvent.press(cancelButton);
     });
 
-    await waitFor(() => {
-      expect(queryByText('Save')).toBeNull();
-    });
-  });
+    // Wait for dialog to be hidden
+    await waitFor(
+      () => {
+        expect(queryByText('Save')).toBeNull();
+      },
+      {
+        timeout: 10000,
+      },
+    );
+  }, 15000); 
 
   it('saves template changes', async () => {
     const {getByText, getByPlaceholderText} = render(

src/screens/ModelsScreen/__tests__/ModelsScreen.test.tsx

@@ -212,23 +212,36 @@
     expect(modelStore.resetModels).toHaveBeenCalled();
   });
 
   it('hides reset dialog on cancel', async () => {
     const {getByTestId, queryByTestId} = render(<ModelsScreen />, {
       withNavigation: true,
     });
 
+    // Open dialog
     const resetFab = getByTestId('reset-models-fab');
     await act(async () => {
       fireEvent.press(resetFab);
     });
 
+    // Wait for dialog to be visible
+    await waitFor(() => {
+      expect(getByTestId('reset-dialog')).toBeTruthy();
+    });
+
+    // Press cancel button
     const cancelButton = getByTestId('cancel-reset-button');
     await act(async () => {
       fireEvent.press(cancelButton);
     });
 
-    await waitFor(() => {
-      expect(queryByTestId('reset-dialog')).toBeNull();
-    });
-  });
+    // Wait for dialog to be hidden
+    await waitFor(
+      () => {
+        expect(queryByTestId('reset-dialog')).toBeNull();
+      },
+      {
+        timeout: 10000,
+      },
+    );
+  }, 15000);
 });

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@react-native/typescript-config/tsconfig.json",
   "compilerOptions": {
+    "jsx": "react",
     "noImplicitAny": false,
   }
 }