Add React Native mobile app for opencode #1593
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
Author
Mobile App Updates• Projects (different servers) |
Feat: Add mobile app package
Adds a new `packages/mobile` directory with the initial setup for an Expo-based React Native application.
This commit introduces the following:
- New `packages/mobile` directory with a basic Expo project structure.
- Includes essential dependencies for mobile development, such as React Native navigation, UI libraries, and database support.
- Configures TypeScript, ESLint, and Babel for a modern development experience.
- Initial implementation of Unistyles for the App for theming
- Initial implementation of the UpdateNotificationManager to handle over-the-air updates using expo-updates.
- Added Haptics dependency to enable Haptics accross the App
- Configures Drizzle ORM with Expo SQLite for persistence
This enables developers to start building cross-platform mobile applications using a pre-configured and optimized environment.
The business value is in providing a starting point that significantly reduces setup time and ensures consistency across mobile projects.
- Modified: `bun.lock` to include `packages/mobile` dependencies
- Created: `packages/mobile/.gitignore`
- Created: `packages/mobile/.watchmanconfig`
- Created: `packages/mobile/README.md`
- Created: `packages/mobile/app.config.ts`
- Created: `packages/mobile/app/_layout.tsx`
- Created: `packages/mobile/app/index.tsx`
- Created: `packages/mobile/assets/fonts/SpaceMono-Regular.ttf`
- Created: `packages/mobile/assets/images/*`
- Created: `packages/mobile/babel.config.js`
- Created: `packages/mobile/index.ts`
- Created: `packages/mobile/tsconfig.json`
- Created: `packages/mobile/eslint.config.js`
- Created: `packages/mobile/src/*`
- Created: `packages/mobile/drizzle/*`
- Created: `packages/mobile/eas.json`
This commit adds the `react-native-sse` package to the mobile app. This package will be used to establish Server-Sent Events (SSE) connections, enabling real-time data streaming from the server to the app. The following changes were made: - Added `react-native-sse` as a dependency in `packages/mobile/package.json`. - Updated `bun.lock` to include the new dependency and its dependencies. - Moved utility functions from component files into `src/config/theme.ts` to increase reusability.
Introduces a new `services/api` directory with modules for interacting with both the local Drizzle database and the remote REST API. This change enables data fetching and manipulation across the mobile application using TanStack Query for state management and caching.
Key changes include:
- Unified query keys (`keys.ts`) for consistent caching across local and remote data.
- Local API services (`local/`) using Drizzle for database interactions. Includes services for `sessions`, `messages`, `config`, and `files`.
- Remote API services (`remote/`) using Axios for REST API calls. Includes services for `sessions`, `messages`, `files`, `config`, and `streaming`.
- A `sync` service to coordinate data synchronization between local and remote data sources.
- Definition of database types in `db/types.ts` for strong typing.
This structure facilitates efficient data management, reduces redundancy, and enhances the mobile application's ability to synchronize and manage data from multiple sources.
This commit introduces the basic navigation structure for the mobile app using Expo Router. It implements tab-based navigation for "Home" and "Settings" screens, and sets up a modal chat screen. Key changes: - Created tab layouts using `expo-router` for Home and Settings. - Implemented a custom bottom tab bar using the `BottomTabs` component. - Added a chat screen accessible via a modal. - Configured root layout to include a root provider. - Removed the default index page. These changes lay the foundation for future feature development by providing a structured way to navigate the app.
This commit introduces the initial implementation of the home page, including connection status display and server configuration functionality. Key changes include: - Created a new `HomePage` component in `src/components/pages/home.tsx` as the main view for the home tab. - Added `ConnectionStatus` and `ConnectionSheet` components in `src/components/molecules/home/` to manage server connection settings. - Implemented bottom sheet modal for setting server hostname and port. - Added API integration to test and save server connection settings. - Implemented basic UI elements such as recent sessions, quick actions (new session, search) on the home page. - Added `DataSyncProvider` to handle session synchronization with the remote server - Integrated necessary API calls via `useRemoteSessionsQuery` to fetch and sync remote sessions. These changes enhance user experience by providing a centralized location for managing the OpenCode server connection and accessing recent sessions.
This commit introduces the chat page, allowing users to view messages and send new ones within a specific session. Key changes include: - Created ChatPage component to display messages using a FlatList and MessageItem components. - Integrated with local and remote message APIs to fetch and send messages. - Implemented message synchronization logic to keep local data up-to-date with remote data. - Added a ThemedMarked component for rendering messages using markdown. - Added a message input component for the user to type and send messages. - Implemented navigation from the home page to the chat page. - Modified the theme context provider to always use dark theme. These changes enable real-time communication within a session, improving user engagement.
This commit integrates the streaming service to provide real-time updates to the chat interface, improving user experience by displaying messages as they are processed.
Key changes:
- Implemented streaming connection and event handling in `ChatPage` to listen for message updates and session events.
- Added a `pendingUserMessages` state to instantly display user messages while waiting for server response.
- Updated the `handleSendMessage` function to create a local user message and send remote message with provider and model based on user settings.
- Implemented a timeout to clear streaming state.
- Refactored `MessageItem` to display pending content.
- Added typing indicator to show when the system is processing.
- Modified the remote message service to include `providerID`, `modelID`, and parts in the send message request.
- Updated subscription logic to correctly identify events related to the current session.
These changes provide a more responsive and interactive chat experience by leveraging real-time updates and immediate display of user input.
Files modified:
- `packages/mobile/src/components/pages/chat.tsx`
- `packages/mobile/src/services/api/local/messages.ts`
- `packages/mobile/src/services/api/remote/messages.ts`
- `packages/mobile/src/services/api/remote/streaming.ts`
- `packages/mobile/src/components/molecules/chat/index.ts` (removed)
This commit refactors the chat page to improve real-time message streaming and local storage handling. Instead of refreshing the entire message list on every streaming event, message parts are now individually written to local SQLite, enabling more granular updates and a smoother user experience. Key changes include: - Adds `@gorhom/bottom-sheet` and `react-native-marked` dependencies for enhanced UI and Markdown rendering. - Modifies SQLite schema to support message parts, allowing partial updates. - Introduces `useUpsertLocalMessagePartMutation` to upsert message parts in local SQLite. - Updates `ChatPage` to handle streaming events by writing message parts directly to SQLite. - Removes unnecessary message list refreshing and pending user message states. - Updates query client configuration to disable refetching by default for better real-time behaviour. - Simplifies message creation - role is determined by streaming event, not local database. These changes enable real-time message streaming, reduce unnecessary data fetching, and improve the chat's responsiveness.
Updates the bun version to 1.2.15 in the EAS configuration file (eas.json). This change ensures that the correct bun version is used during the build process, potentially resolving compatibility issues or enabling access to newer bun features.
This commit refactors the home screen to enhance the user experience and overall aesthetics of the application. It introduces several UI/UX improvements. Key changes include: - Replace basic texts with brand icons for better visual appeal in `ConnectionStatus`, `QuickActions`, and `RecentSessionsHeader` using the `Feather` icon library. - Enhance the styling of `SessionItem` to provide a richer and more intuitive representation of user sessions, including status icons and improved layout. - Update the chat page to use feather icons, improve text readability and message styling. - Enhance home page with new empty states and animation effects to improve user engagement. These changes aim to provide a more polished and engaging user interface, making the application more intuitive and visually appealing.
Adjusts the chat input styling for better usability. - Reduces the padding around the message input to `sm`. - Changes send button icon to "arrow-up" and increases the size. - Disables the send button when the input is empty and always uses `brand` mode. - Sets `size` to `auto` for send button. - Sets padding, alignItems and justifyContent to 0 and center respectively to the button style to better center the icon. These changes improve the visual appearance and user experience of the chat input, ensuring that the send button is only active when there is content to send.
This commit introduces a floating header and input area to the chat screen using `react-native-reanimated` and `react-native-keyboard-controller` for better user experience. The header and input now use BlurView to provide a frosted glass effect, enhancing the visual appeal and separating them from the chat content. KeyboardAvoidingView ensures the input remains visible when the keyboard is active. The ChatHeader and MessageInput components were updated to leverage BlurView and absolute positioning.
On Android, the keyboard was covering the message input field in the chat screen, making it difficult for users to type messages. This change wraps the entire chat screen in a KeyboardAvoidingView component, which automatically adjusts the layout to avoid overlapping the keyboard. This ensures that the input field remains visible and accessible when the keyboard is active. Modified: - `packages/mobile/src/components/pages/chat.tsx`: Added KeyboardAvoidingView to prevent keyboard occlusion. Removed unused imports and related keyboard handling logic.
This commit introduces a fully functional chat screen with real-time message streaming capabilities.
It includes several new components:
- ChatHeader: Displays the session title and a menu button.
- MessageInput: Allows users to type and send messages.
- MessageItem: Renders individual messages with markdown support.
- TypingIndicator: Shows a visual indicator when the assistant is typing.
The chat screen utilizes a FlatList for efficient message rendering and implements a mechanism to display streaming messages as they are received. Local message parts are now stored using SQLite in order to allow partial messages to be displayed as they are downloaded. It also implements a fallback mechanism to display remote messages if no local content is available.
The app now displays a dedicated empty state component to guide new users when the conversation is empty.
The commits remove the console logs and implements a timeout in `handleSendMessage` to clear streaming state as fallback, and also removes the role from local creation of messages.
This feature provides a more engaging and responsive user experience by displaying messages as they are being generated.
This commit enhances the chat user experience by implementing keyboard-aware scrolling and automatic scrolling to the bottom on various events such as message sending and streaming completion. It also ensures that the keyboard is dismissed when the user starts scrolling. - Adds keyboard height state and effects to adjust padding and scroll position when the keyboard appears/disappears. - Implements `scrollToBottom` to scroll the FlatList to the bottom. - Calls `scrollToBottom` after sending a message and after streaming completes to keep the latest messages in view. - Adds `onScrollBeginDrag` to dismiss the keyboard when the user starts scrolling. - Adds `maintainVisibleContentPosition` to maintain the position of visible content during updates. - Modifies `paddingBottom` of `contentContainerStyle` to adjust to keyboard height
This commit introduces a generic `BottomSheet` component to replace the direct usage of `BottomSheetModal` from `@gorhom/bottom-sheet`. This change promotes reusability and simplifies the codebase by centralizing the styling and common properties of bottom sheets.
Key changes:
- Created a new `BottomSheet` component in `packages/mobile/src/components/ui/primitives/bottom-sheet.tsx` which wraps the `BottomSheetModal` component and provides default styling and props.
- Replaced the direct usage of `BottomSheetModal` in `packages/mobile/src/components/molecules/home/connection-sheet.tsx` with the new `BottomSheet` component.
- Updated imports in `packages/mobile/src/components/ui/primitives/index.tsx` to include the new `BottomSheet` component.
- Removed the `renderBackdrop` function from `ConnectionSheet` as the backdrop is now handled by the generic `BottomSheet`.
This refactor improves code maintainability and allows for easier customization of bottom sheet components across the application.
This commit introduces the EnhancedMessageItem component to display richer chat messages, including tool outputs and file content. It combines local and remote message parts, handles tool statuses (pending, running, error), and renders different types of tool outputs like file content, bash commands, to-do lists, diffs, and web fetch results. Key changes: - Added EnhancedMessageItem component to render messages with tool outputs and file content. - Created message-renderers.tsx to house components like FileContentRenderer, BashRenderer, TodoListRenderer, DiffRenderer, and WebFetchRenderer for different tool output types. - Modified ChatPage to use EnhancedMessageItem instead of MessageItem. - Updated local messages API to persist synthetic flags, and also include tool and file types to message parts. - Updated session's updatedAt timestamp on message or message part upsert to ensure latest activity updates. This enhancement allows users to see the results of agent actions directly within the chat interface, improving transparency and understanding of the agent's reasoning process.
Refactors the message display to use smaller padding for short messages, improving readability and visual appeal. It also refactors the session sync logic to preserve the remote timestamp during upsert operations. This ensures that the local session's `updatedAt` value accurately reflects the last update time from the remote server. Key changes: - Modifies `EnhancedMessageItem` to use smaller padding for short text-only messages - Modifies `DataSyncProvider` to pass `preserveRemoteTimestamp` to the `upsertLocalSession` mutation - Modifies `SessionRepository.upsertSession` to optionally preserve remote timestamps - Modifies `useUpsertLocalSessionMutation` to accept and pass the `preserveRemoteTimestamp` option These changes enhance the user experience and ensure accurate data synchronization.
Refactors the message renderers to provide better visual cues for different tool states. This change enhances the user experience by making it easier to distinguish between pending, running, completed, and error states of tools within the chat interface. Specifically, it modifies the background and mode (color scheme) of various renderers like FileContentRenderer, BashRenderer, TodoListRenderer, DiffRenderer, and WebFetchRenderer to align with their respective states. It also fixes an issue where error messages were not visible enough.
Adds session management capabilities, enabling users to create, switch between, and delete chat sessions. This allows users to organize their conversations and maintain context across different topics. Key changes: - Implemented a `SessionManager` service to handle session creation, deletion, and navigation. - Added a "New Session" button to the `ChatHeader` in `packages/mobile/src/components/molecules/chat/chat-header.tsx`, allowing users to start a new session directly from the chat screen. - Introduced `SessionDialog` in `packages/mobile/src/components/molecules/session/session-dialog.tsx` to manage and switch between existing sessions. This dialog is accessible from the home screen. - Integrated session management into the home page (`packages/mobile/src/components/pages/home.tsx`), allowing users to view, switch, and delete sessions. - Added a new `useSessionManager` hook to manage sessions, providing the ability to create new sessions and navigate to specific session routes, in `packages/mobile/src/services/session-manager.ts` - Added a new file `packages/mobile/src/utils/id.ts` with a utility function to generate unique IDs for sessions. The session list is now persisted in the local database, allowing users to resume previous conversations. Remote session creation is now supported.
This commit refactors the EnhancedMessageItem component to improve message rendering and code structure. It streamlines the way message parts are processed and rendered by:
- Simplifying part sorting to only sort by time for chronological rendering.
- Removing the specific filtering for text, tool, and file parts.
- Introducing a renderPart function with a switch statement based on part type.
- Adding local content rendering at the beginning for user messages.
- Rendering all parts in chronological order using the new renderPart function.
These changes consolidate the rendering logic, improve code readability, and ensure that message parts are displayed in the correct order.
This commit refactors the search input functionality on the home screen for improved modularity and maintainability. - Introduced new `IsolatedSearchInput` and `SearchInput` components to encapsulate search input logic. `IsolatedSearchInput` uses debouncing to control the `onSearch` callback execution, whereas `SearchInput` calls the `onSearch` immediately. The `SearchInput` also utilizes `useImperativeHandle` to expose a `clear` method to parent components via `ref`. - Removed the search input from the `QuickActions` component in `packages/mobile/src/components/molecules/home/quick-actions.tsx`. This simplifies the `QuickActions` component, making it solely responsible for actions related to creating new sessions. - Modified the `HomePage` component in `packages/mobile/src/components/pages/home.tsx` to remove the handleSearch function. - Added a new `WorkingSearchInput` and `TestSearchInput` in the packages/mobile/src/components/molecules/home directory. - Updated chat page to scale the `EmptyState` message so the text does not appear backwards. - Updated Input.tsx to be able to accept a ref. This decoupling promotes a separation of concerns, making the codebase easier to understand and test. This allows for easier reuse of the search input component in other parts of the application.
This commit removes the session dialog and the associated "View All" button from the home page.
The session dialog was previously used to display all sessions, but it has been deemed unnecessary.
This change simplifies the home page UI and removes a feature that was not frequently used.
- Removed `SessionDialog` component and its ref from `HomePage`.
- Removed `onViewAll` prop and usage from `RecentSessionsHeader`.
- Removed `handleViewAllSessions` function from `HomePage`.
This commit fixes an issue where long filenames and URLs in the chat message renderers would overflow their containers. To address this, the `FileContentRenderer` and `DiffRenderer` components are updated to include `numberOfLines={1}` and `ellipsizeMode="head"` props to the filename `Text` component. The `WebFetchRenderer` component is updated to include `ellipsizeMode="middle"` to the URL `Text` component. This ensures that filenames and URLs are truncated with an ellipsis when they exceed the available space, improving the layout and readability of chat messages.
This commit implements back navigation in the chat header. It introduces a back button using the expo-router's `useRouter` hook to navigate back to the previous screen when pressed. The changes include: - Added a back button with a chevron-left icon to the left of the session title. - Implemented `handleBackPress` function to trigger the router's `back()` method. - Modified the layout to accommodate the back button. This improves the user experience by providing a clear way to navigate back from the chat screen, which is especially useful when the chat screen is accessed from different parts of the application.
This commit enhances the reliability of server connections and synchronization by: - Adding a retry mechanism to the connection process in `connection-sheet.tsx`. It now attempts to connect up to 3 times with exponential backoff. This resolves issues where initial connection attempts might fail due to temporary network instability. - Ensuring server connection settings are saved before attempting to update the API client in `connection-sheet.tsx`. This ensures the settings are persisted for use during the connection attempt. - Updating the API client's base URL immediately after a successful connection in `client.ts` to avoid race conditions. Also ensures the connection settings are saved. - Adding timeout to ping requests - Adding a full sync mutation to the `HomePage` that syncs both remote and local sessions on refresh, using the `sync.ts` file. - Implementing remote session syncing from remote to local database in `sync.ts`. Adds the logic to store sessions from the remote server to the local database. - Fixing session syncing to remote in `sync.ts`. Now correctly marks synced sessions in the local DB as synced by setting `isSynced` to true. - Adding `View All` button to `RecentSessionsHeader` component. These changes aim to improve the user experience by making the app more resilient to network issues and ensuring data consistency between the local and remote databases.
Refactors the chat page to use a new architecture based on a `useChatState` hook and `ChatService` for managing chat state and syncing messages.
Key changes:
- Replaces the old `ChatPage` component with a new `ChatPage` that uses `useChatState` to manage messages, streaming state, and session information.
- Introduces `useChatState` hook to encapsulate all chat logic, including local/remote data fetching and real-time updates.
- Uses `ChatService` to handle remote message syncing, sending messages, and calculating metrics.
- Removes complex `useEffect` hooks in `ChatPage` and moves their functionality into the `useChatState` hook and services.
- Implements real-time updates using Server-Sent Events (SSE) via `SSEService`.
- Switches to storing all message content in local database and syncing using ChatService.
- Improves performance by memoizing components and using optimized FlatList.
- Improves error handling by displaying error messages and handling recoverable errors during sync.
- Modifies the theme to update secondary color to purple.
Files modified:
- `packages/mobile/app/(app)/chat/[sessionId]/index.tsx`: Switched to the new `ChatPage` component.
- `packages/mobile/src/components/molecules/chat/enhanced-message-item.tsx`: Updated to fetch all message content from the local SQLite database and display tool statuses.
- `packages/mobile/src/components/molecules/chat/message-renderers.tsx`: Adjusted status indicator text.
- `packages/mobile/src/components/molecules/home/connection-sheet.tsx`: Added a `displayName` to `ConnectionSheet`.
- `packages/mobile/src/components/pages/chat.tsx`: Removed and replaced with `chat-new.tsx`.
- `packages/mobile/src/components/pages/chat-new.tsx`: Created a new, refactored chat page.
- `packages/mobile/src/config/theme.ts`: Updated theme secondary color to purple.
- `packages/mobile/src/hooks/use-chat-state.ts`: Created new hook for managing chat state.
- `packages/mobile/src/services/api/local/messages.ts`: Updated to use remote timestamps for message order.
- `packages/mobile/src/services/api/remote/messages.ts`: Added logs and debug info for remote query result.
- `packages/mobile/src/services/chat-service.ts`: Created a new chat service to handle syncing and message sending.
- `packages/mobile/src/services/sse-service.ts`: Created a new SSE service to handle streaming and real-time updates.
- `packages/mobile/src/types/opencode-types.ts`: Added comprehensive data types.
This change improves performance, reliability, and maintainability by streamlining chat logic and leveraging local storage and real-time updates efficiently.
This commit significantly refactors the chat page for improved performance and stability by addressing several key issues: - **Reduces unnecessary re-renders:** Introduces `StreamingMessageList` and `useSimpleChatState` to isolate streaming-related logic and data fetching. This prevents the main chat page component from re-rendering during message streaming, leading to a much smoother user experience. - **Adds `MessageList` component**: Adds new component to be used to render message list to allow for external scrolling. - **Optimizes UI updates:** Adds throttling to UI updates during streaming using `useRef` and `setTimeout` to reduce visual lagging. - **Removes console logging:** Removes various `console.log` statements for cleaner output and prevent any performance impact from logging. - **Streamlines local sync:** Simplifies SSE and remote message synchronization, which avoids blocking the main thread during message updates. - **Fixes race conditions**: Fixes bug where message text would disappear when pressing the send button, and avoids setting local state immediately. - **Error Handling:** Adds catch blocks to prevent errors from crashing the app. The changes primarily affect `src/components/pages/chat-new.tsx`, where the main logic is moved to child components `src/components/molecules/chat/streaming-message-list.tsx` and `src/hooks/use-simple-chat-state.ts`.
Implement a welcome screen to guide new users with no connected projects.
The welcome screen includes a clear call to action to connect their first project.
- Added `WelcomeScreen` component in `src/components/molecules/home` to display a welcome message and a button to connect a project.
- Modified `app/(app)/tabs/home/index.tsx` to conditionally render the `WelcomeScreen` if no projects are connected.
- Updated `ProjectConnectionSheetOptimized` and `ProjectConnectionSheet` to use `size="lg"` for the connect button.
- Reduced the `opencode` title size in `src/components/molecules/home/home-header-optimized.tsx` to `lg`.
🤖 Generated with [opencode](https://opencode.ai) Co-Authored-By: opencode <[email protected]>
This commit introduces several improvements to enhance the user experience and data consistency: - Adds a "Retry" button to the streaming message list. This allows users to manually refetch message parts if the initial load fails, ensuring they can always access the conversation content. - Implements session deduplication in the `SessionsListOptimized` component. This prevents duplicate sessions from appearing in the list, providing a cleaner and more accurate representation of the user's active sessions. - Modifies the welcome screen text for a more concise first-time user introduction. - Removes console logs in `sse-service.ts` to clean up the console output. These changes improve data integrity, reduce potential user frustration, and streamline the application's welcome flow.
This commit introduces a comprehensive plan to align the mobile app's message handling with the TUI implementation. The existing mobile app API types were incomplete, causing data loss and inconsistent behavior. Key changes include: - Add `MOBILE_API_ALIGNMENT_PLAN.md` that outlines the new API alignment plan. - Create complete TypeScript type definitions matching the API schema in `src/services/api/remote/messages.ts`. - Modify `src/services/chat-service.ts` to improve error handling and safe stringify/parse data. - Add `sequence` column to `message_parts` table to ensure proper ordering within messages. - Fetch all messages and parts in a single query in `src/services/api/local/messages.ts` to avoid N+1 problem. - Modify `src/components/molecules/chat/streaming-message-list.tsx` to fetch messages with parts directly from the database. These changes will ensure that the mobile app receives complete data from the API, similar to the TUI, leading to enhanced tool information, cost tracking, error handling, and overall improved user experience.
Updates the database schema to store `time_created` as an integer representing milliseconds since epoch for better sorting and precision. Transforms remote messages and parts from the server into their local database representation for mobile client usage.
Specifically:
- Migrates the `messages` table to use integer storage for `time_created`, ensuring compatibility with SQLite's `unixepoch('subsec')` function.
- Modify the `timeCreated` field type to store milliseconds instead of a Date object to have more control over how messages are ordered when displayed.
- Updates the local message/part transformation logic to convert remote time representations to milliseconds.
- Fixes the SSE message handling so that messages get upserted to the database, and the cache is properly updated.
- Adds logging and improves ordering of messages.
- Implemented more robust transformations of incoming remote messages and parts, improving time sync precision, especially important for live streaming and message sequencing.
Enhance the streaming message list component to support various message part types including tool status, files, snapshots, and patches. This provides more detailed information about the agent's actions and improves the user experience by displaying relevant metadata and status updates.
- Skip "step-start" and "step-finish" parts to reduce UI clutter.
- Enhance the ToolPartRenderer to include tool status, execution time, error details, and call IDs.
- Enhance the FilePartRenderer to display file metadata like source type, path, name, and range.
- Add SnapshotRenderer to display snapshot references.
- Add PatchRenderer to display code patches.
Adds an expandable feature to the generic tool output renderer for tools that produce small text outputs, such as "task", "glob", "grep", and "list". This improvement enhances readability by initially collapsing lengthy outputs, allowing users to expand them when needed. The changes include the introduction of a new `GenericToolOutputRenderer` component with `isExpanded` state and conditional rendering for the expand/collapse functionality. This affects the display of tool outputs within the chat interface, improving the user experience when dealing with verbose tool results.
🤖 Generated with [opencode](https://opencode.ai) Co-Authored-By: opencode <[email protected]>
Adds expandable functionality to command outputs in BashRenderer: - Shows command output in an expandable box if longer than 200 chars - Adds Show more/Show less toggle for long outputs - Trims whitespace from output - Always shows the command itself 🤖 Generated with [opencode](https://opencode.ai) Co-Authored-By: opencode <[email protected]>
This commit introduces major UI enhancements to the chat screen, focusing on user experience and functionality.
Key changes:
- **Commands Sheet:** Implement a BottomSheet for accessing commands like "Share," "Compact," and "Help," providing quick actions for managing conversations.
- **Models Sheet:** Integrate a BottomSheet for selecting AI models, enabling users to switch models easily.
- **Model Selection Fallback:** Implement robust model selection with fallback to session defaults, user defaults, and finally to hardcoded defaults ensuring selection consistency.
- **Simplified Chat State Hook:** Introduce a useSimpleChatState hook which provides core functionality.
- **Streamlined Message Input:** Model selection is now displayed inline, removing the need for additional buttons.
Drizzle schema changes:
- The `models` table is created with provider information.
- The `sessions` table has a new `model_id` column.
- Deleted old and unnecessary migration files.
- Updated table creation logic in `drizzle/0000_colorful_wild_child.sql`.
- Updated the message `time_created` default to `unixepoch('subsec') * 1000`.
These changes improve chat management and personalization, giving users more control over the chat experience.
Refactors the chat page to improve component separation and state management. Key changes: - Moves state management for the message list, chat input, and chat header into their respective components. - This reduces re-renders on the main chat page. - Centralizes refresh logic in StreamingMessageList - Simplifies message sending and model selection using useSimpleChatState - Adds `update:production` script to package.json to allow for production EAS updates - Adds DiffRenderer component for displaying file diffs in chat messages.
This commit migrates the existing BottomSheet component to use the `BottomSheetModal` component from `@gorhom/bottom-sheet`, providing improved modal presentation and control. Additionally, it refactors the chat input and command/model sheets to use the new BottomSheetModal and improves keyboard handling. Key changes: - Replaced direct BottomSheet imports with BottomSheetModal. - Introduced `BottomSheetModal` component for project connection and list sheets, and chat input's command and model selection. - Added keyboard behavior props to control the interaction between the keyboard and the bottom sheet. - Modified the chat input to pass BottomSheetRefs to command and model sheets. - Removed redundant BottomSheet component. - Added "fillParent" option to the commands sheet and "extend" to the models sheet to fix keyboard covering. - Adjusted padding and content container styles in command and model sheets for better visual appearance and keyboard interaction. - Removed memoization for BottomSheetInput to fix keyboard issues. - Ensured appropriate bottom inset and keyboard handling for a smoother user experience. These changes streamline the modal presentation and offer a better user experience, especially regarding keyboard interactions within the application.
This commit refactors how chat messages are rendered and displayed in the mobile app. - Replaces the complex rendering logic in with a new component for managing the list. - Introduces , , and to handle rendering individual message parts based on their type. - Moves renderers in to . - Changes the chat page to use the new rendering setup. - Removes the now obsolete file. These changes improve code organization, maintainability, and rendering performance by breaking down complex logic into smaller, reusable components. It also simplifies the rendering process and makes it easier to add new message types and renderers in the future.
This commit introduces several new renderers to display the output of various tools within the chat interface. These renderers enhance the user experience by providing structured and informative visualizations of tool execution results. Specifically, the following renderers were added: - `GlobRenderer`: Displays the results of file globbing operations, allowing users to see which files match a given pattern. Supports expansion/collapsing for large lists. - `GrepRenderer`: Visualizes the output of grep commands, highlighting the matched text within the context of the file and line number. Supports expansion/collapsing for multiple matches. - `ListRenderer`: Presents a directory listing, showing files and subdirectories with their types and sizes. Supports expansion/collapsing for large lists. - `PatchRenderer`: Displays information about applied patches, including the hash and list of changed files. - `TodoReadRenderer`: Renders a list of TODO items with their status (pending, in progress, completed, cancelled) and priority. - `TaskRenderer`: Shows details about agent tasks, including the description, prompt, and result. Supports expansion/collapsing for long prompts/results. The `FileContentRenderer` was also updated to truncate long files. The `MessagePartRenderer` was updated to include `patch` as a type of tool. These changes provide users with clearer and more actionable insights from the tools used within the chat application.
This commit renames the `current_mode` column in the `user_settings` table to `current_agent`. This change aligns the column name with its intended purpose of representing the current agent used in the application, improving code clarity and maintainability. - Renamed `current_mode` column to `current_agent` in the `user_settings` table. - Updated related queries and mutations to reflect the new column name. - Adjusted UI components to display and interact with agents instead of modes.
- Add query to get models by usage frequency from sessions table - Display "Recently Used" section at top of models list - Show usage count badges for frequent models - Maintain existing provider grouping for remaining models - Remove duplicates between frequent and provider sections 🤖 Generated with [opencode](https://opencode.ai) Co-Authored-By: opencode <[email protected]>
nitishxyz
force-pushed
the
nitishxyz/opencode-mobile
branch
from
8d968e2 to
ccb1301
Compare
github-actions
bot
force-pushed
the
dev
branch
from
f16de3d to
cc0d460
Compare
github-actions
bot
force-pushed
the
dev
branch
from
772b621 to
eb855e1
Compare
github-actions
bot
force-pushed
the
dev
branch
3 times, most recently
from
f1dc981 to
3e15a39
Compare
github-actions
bot
force-pushed
the
dev
branch
3 times, most recently
from
f8ee907 to
6a9856d
Compare
|
How is the progress ? Looks promising, especially with voice-to-text and text-to-voice interface. So I can continue building on the way to the office :) |
|
I would join you guys, what kind of help do you need? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
• Add comprehensive React Native mobile application with Expo framework
• Implement chat interface with real-time messaging and session management
• Integrate with opencode API for seamless mobile access to AI assistant functionality
• Add README with instructions to run the app.
More Info
What is done