Mobile Application

Relevant source files

The following files were used as context for generating this wiki page:

• mobile-app/package.json
• mobile-app/src/screens/ChatScreen.tsx
• monGARS_structure.txt
• README.md
• webapp/static/js/src/ui/chatUi.js

The monGARS mobile application, named mongars-mobile, is a client for the main monGARS AI assistant, built using React Native. It provides a native mobile interface for users to interact with the chat and embedding functionalities of the backend service. The application is a distinct entity from the Django-based web interface, located in its own mobile-app/ directory within the project structure.

The application is built with TypeScript and leverages a modern stack of libraries for state management, navigation, and UI rendering. Key technologies include Zustand for global state, React Navigation for screen transitions, and Axios for HTTP communication with the monGARS API. It is designed to provide a responsive and performant user experience for chat interactions on both iOS and Android platforms.

Sources: mobile-app/package.json:2, monGARS_structure.txt, README.md

Architecture and Core Technologies

The mobile application's architecture is centered around React Native, enabling cross-platform development. State is managed centrally using Zustand, and communication with the backend is handled via asynchronous service calls.

Core Dependencies

The application relies on several key libraries to function, as defined in its package.json.

Library	Version	Description
react	18.2.0	Core library for building the user interface.
react-native	0.74.3	Framework for building native apps using React.
zustand	4.5.2	A small, fast, and scalable state-management solution. Used for the global chatStore.
@react-navigation/native	6.1.17	Solution for routing and navigation between screens.
@shopify/flash-list	1.6.3	A performant list view component, used for rendering chat messages.
axios	1.7.4	Promise-based HTTP client for making API requests to the backend.
react-native-config	1.5.0	Manages environment-specific configuration variables.
@react-native-async-storage/async-storage	1.23.1	Asynchronous, unencrypted, persistent, key-value storage system. Likely used for persisting the auth token.

Sources: mobile-app/package.json:14-30

State Management

Global application state is managed by a Zustand store, which is accessed via the useChatStore hook. This store holds the authentication token, chat messages, loading status, and error information. Components subscribe to this store to react to state changes and dispatch actions.

The diagram below illustrates the main states the UI can be in, based on the data from useChatStore.

Sources: mobile-app/src/screens/ChatScreen.tsx:70-78, 99-105

Key Components

The user interface is composed of several React components, with ChatScreen acting as the central orchestrator.

Component Hierarchy

The ChatScreen component organizes the main chat interface, rendering child components for message display, input, and navigation.

Sources: mobile-app/src/screens/ChatScreen.tsx:10-13, 114-120

ChatScreen.tsx

This is the primary screen of the application. Its responsibilities include:

• Initialization: On mount, it calls the initialize action from useChatStore to set up the initial state, likely fetching the auth token and conversation history.
• State Subscription: It subscribes to useChatStore to get messages, loading, error, and token.
• Conditional Rendering:
  • If no token is available, it displays an EmptyState component prompting the user to log in via the Settings screen.
  • It shows an ActivityIndicator if loading is true.
  • It displays an error banner if an error is present in the store.
• Message Display: It renders the list of messages using a performant @shopify/flash-list, with each message rendered by a MessageBubble component.
• Sending Messages: It passes the handleSend callback to the Composer component, which calls the sendMessage action from the store.

Sources: mobile-app/src/screens/ChatScreen.tsx:68-122

Composer.tsx

This component provides the text input field and send button for the user to compose and send messages. It receives an onSend prop from ChatScreen and calls it with the message content and selected mode ('chat' or 'embedding').

Sources: mobile-app/src/screens/ChatScreen.tsx:12, 120

HeaderActions

This component is rendered in the navigation header and provides buttons for the user to navigate to the Diagnostics and Settings screens.

Sources: mobile-app/src/screens/ChatScreen.tsx:46-58

Features

Chat and Embedding

The mobile app supports two primary interaction modes, which are passed to the sendMessage function:

1. chat: Standard conversational interaction with the AI.
2. embedding: Sends text to the backend to generate vector embeddings.

This dual-mode functionality mirrors the capabilities of the web application, indicating a shared backend API design.

The following sequence diagram illustrates the flow of sending a message from the user interface to the state management layer.

Sources: mobile-app/src/screens/ChatScreen.tsx:92-95, webapp/static/js/src/ui/chatUi.js:306-343

Authentication

Authentication is handled via a token system. The ChatScreen checks for the presence of a token in the useChatStore. If the token is missing, the UI directs the user to the Settings screen to log in, indicating that the login flow and token storage are managed outside the main chat view.

Sources: mobile-app/src/screens/ChatScreen.tsx:77, 107-112

Navigation

The app uses @react-navigation/native for screen transitions. The ChatScreen includes header buttons that navigate to two other screens:

• Diagnostics: Likely displays connection status and other technical information.
• Settings: Where the user can log in and manage their authentication token.

Sources: mobile-app/src/screens/ChatScreen.tsx:81-84

Build and Development

The package.json file defines the scripts for running, testing, and linting the mobile application.

Script	Description
start	Starts the Metro bundler with a reset cache.
ios	Builds and runs the app on an iOS simulator.
android	Builds and runs the app on an Android emulator or connected device.
lint	Runs ESLint to check the TypeScript source code for style and errors.
test	Executes the test suite using Jest.
typecheck	Runs the TypeScript compiler to check for type errors without emitting files.
pod-install	Installs CocoaPods dependencies for the iOS project.

Sources: mobile-app/package.json:5-12

The project is configured for testing with Jest and @testing-library/react-native, with a defined code coverage threshold.

Sources: mobile-app/package.json:53-76