feat: new app (#188)

* new app ui

* refactor(expo-example): clean up SetupAdapter and chat settings

- Remove ProviderType, use model.provider for grouping instead
- Move display info (label, accentColor, icon) into SetupAdapter
- Add builtIn flag to indicate if model can be deleted
- Implement pending settings for new chats before first message
- Refactor addMessage to addMessages for atomic batch updates
- Replace Map.groupBy with manual implementation for compatibility

* feat(expo-example): add maxSteps setting for tool call iterations

- Add maxSteps to ChatSettings type and defaults
- Add UI control in settings sheet (1-20 range)
- Use maxSteps in streamText stopWhen condition

* feat: persist chats/models, hide mic when unavailable, handle unavailable provider

- Persist custom models and chats across reloads using atomWithStorage with AsyncStorage
- Hide microphone button when transcription is not available (iOS < 26)
- Add isAvailable() method to AppleTranscriptionModel
- Handle unavailable provider in ChatScreen with friendly message and model picker
- Grey out unavailable models in Choose Model sheet
- Add systemYellow color for warning states

* fix: restore provider name labels in Choose Model sheet

* fix: apply code review fixes for PR #188

## Summary of Fixes Applied

| Issue | Description | Status |
|-------|-------------|--------|
| #1 | Stale messages in handleSend | Not a bug - code already includes user message |
| #2 | ModelLifecycleManager cleanup | Fixed - added cleanup on unmount |
| #3 | Missing abort for streaming | Fixed - added AbortController + SDK abortSignal |
| #4 | Audio listener accumulation | Fixed - recreate recorder each session |
| #5 | Unnecessary `!` assertion | Skipped (style) |
| #6 | Silent error swallowing | Skipped (per request) |
| #7 | stopRecording not awaited | Fixed - made handlePress async |
| #8 | State update after delay | Skipped |
| #9 | setCurrentChatId inside setChats | Fixed - separated state updates |
| #10 | Incorrect date calculation | Fixed - use calendar days |
| #11 | No URL validation | Fixed - added `.gguf` check |
| #12 | Date serialization | Fixed - store as ISO strings |
| #13 | No duplicate check | Skipped |
| #14 | stopPropagation non-standard | Fixed - removed |

* refactor(expo-example): remove unnecessary useMemo/useCallback for React Compiler

React Compiler will auto-memoize these patterns:
- groupedChats derived state in CustomDrawerContent
- scrollToBottom, handleDelete, renderRightActions callbacks
- adaptersByProvider and enabledTools derived computations

* up

* docs: add PR screenshots

* docs: add agents.md style guide (#189)

* re-organize and clean-up

* refactor: extract ChatScreen into smaller components

- Split monolithic ChatScreen (~1300 lines) into focused components:
  ChatHeader, ChatMessages, ChatInputBar, ModelPickerSheet, SettingsSheet
- Add providerStore for centralized adapter/model management
- Change isAvailable() from async to sync using expo-file-system
- Add Suspense boundaries with fallback components for progressive loading
- Move download progress tracking to providerStore

* final ui fixes, god damn

Author: grabbou

.github/assets/choose-model.png

@@ -1,6 +1,8 @@
 MIT License
 
-Copyright (c) 2024 szymonrybczak
+Copyright (c) 2024-2025 Szymon Rybczak
+Copyright (c) 2025-present Callstack
+
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights

.github/assets/new-chat.png

@@ -0,0 +1,66 @@
+# Agent Style Guide
+
+## Commit Messages
+
+- Conventional Commits format `type(scope): description`
+- Types: `feat`, `fix`, `refactor`, `chore`, `docs`
+- Scope optional, use package name when relevant (e.g., `expo-example`, `llama`)
+- Lowercase, no period, imperative mood
+- Example: `feat(expo-example): add maxSteps setting for tool iterations`
+
+## Branch Naming
+
+- Format: `type/kebab-case-description`
+- Types: `feat/`, `fix/`, `refactor/`, `chore/`, `docs/`, `ci/`
+- Example: `feat/tool-calling`, `fix/streaming-first-char-missing`
+
+## Stacked PRs
+
+- Create feature branch from `main`
+- Atomic commits that can be reviewed independently
+- Reference related PRs in commit messages when building on unmerged work
+- One logical change per commit
+
+## Code Style
+
+- Package manager: `bun` (not npm/yarn)
+- No semicolons
+- Single quotes
+- Imports auto-sorted (ESLint enforced)
+- Run `bun lint` before committing
+
+## Project Structure
+
+- Monorepo with `packages/` (libraries) and `apps/` (example apps)
+- Packages: `@react-native-ai/apple`, `@react-native-ai/llama`, `@react-native-ai/mlc`
+- Example app: Expo SDK 54 in `apps/expo-example/`
+
+## Tech Stack
+
+- React 19.1 with React Compiler (no manual `useMemo`/`useCallback` needed)
+- React Native 0.81
+- Expo SDK 54 with native modules
+- Vercel AI SDK v6 (`ai` package) for model abstraction
+- TypeScript strict mode
+
+## UI & Styling
+
+- `@expo/ui` for SwiftUI-bridged components (Button, Slider, ContextMenu)
+- `expo-symbols` for SF Symbols icons
+- `expo-blur` and `expo-glass-effect` for glass morphism
+- `PlatformColor` for iOS semantic colors (no hardcoded colors)
+- `StyleSheet.create` for styles (no inline objects)
+- `react-native-reanimated` for animations
+
+## State Management
+
+- `jotai` for global state with atoms
+- `atomWithStorage` + AsyncStorage for persistence
+- Custom hooks (e.g., `useChatStore`) to expose store API
+
+## Patterns
+
+- Adapter pattern for AI providers (`SetupAdapter<TModel>` interface)
+- Prefer composition over configuration
+- Keep components focused, extract hooks for logic
+- Use `zod` for runtime validation

.github/assets/tools-settings.png

@@ -1,9 +1,6 @@
 module.exports = function (api) {
   api.cache(true)
   return {
-    presets: [
-      ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
-      'nativewind/babel',
-    ],
+    presets: ['babel-preset-expo'],
   }
 }

LICENSE

@@ -1,6 +1,5 @@
 // Learn more https://docs.expo.io/guides/customizing-metro
 const { getDefaultConfig } = require('expo/metro-config')
-const { withNativeWind } = require('nativewind/metro')
 const {
   wrapWithAudioAPIMetroConfig,
 } = require('react-native-audio-api/metro-config')
@@ -10,6 +9,4 @@ const config = getDefaultConfig(__dirname)
 // 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
 config.resolver.disableHierarchicalLookup = true
 
-module.exports = wrapWithAudioAPIMetroConfig(
-  withNativeWind(config, { input: './src/global.css' })
-)
+module.exports = wrapWithAudioAPIMetroConfig(config)

agents.md

@@ -12,42 +12,47 @@
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
     "@bottom-tabs/react-navigation": "^0.10.2",
+    "@expo/ui": "~0.2.0-beta.9",
+    "@lodev09/react-native-true-sheet": "^3.8.1",
     "@react-native-ai/apple": "workspace:*",
     "@react-native-ai/llama": "workspace:*",
-    "@react-native-picker/picker": "^2.11.4",
-    "@react-native-vector-icons/get-image": "^12.3.0",
-    "@react-native-vector-icons/material-icons": "^12.4.0",
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-native-picker/picker": "2.11.1",
     "@react-navigation/bottom-tabs": "^7.9.0",
+    "@react-navigation/drawer": "^7.7.13",
     "@react-navigation/native": "^7.1.16",
     "@react-navigation/native-stack": "^7.3.25",
     "@ungap/structured-clone": "^1.3.0",
     "ai": "^6.0.0",
-    "expo": "^54.0.8",
-    "expo-battery": "~10.0.7",
-    "expo-build-properties": "~1.0.8",
-    "expo-calendar": "~15.0.7",
-    "expo-clipboard": "~8.0.7",
-    "expo-document-picker": "~14.0.7",
-    "expo-status-bar": "~3.0.8",
+    "expo": "~54.0.33",
+    "expo-battery": "~10.0.8",
+    "expo-blur": "~15.0.8",
+    "expo-build-properties": "~1.0.10",
+    "expo-calendar": "~15.0.8",
+    "expo-clipboard": "~8.0.8",
+    "expo-document-picker": "~14.0.8",
+    "expo-file-system": "~19.0.21",
+    "expo-glass-effect": "~0.1.8",
+    "expo-status-bar": "~3.0.9",
+    "expo-symbols": "~1.0.8",
+    "jotai": "^2.12.2",
     "llama.rn": "^0.10.1",
-    "nativewind": "^4.1.23",
     "react": "19.1.0",
-    "react-native": "0.81.4",
+    "react-native": "0.81.5",
     "react-native-audio-api": "^0.7.1",
     "react-native-bottom-tabs": "^0.11.0",
+    "react-native-gesture-handler": "~2.28.0",
     "react-native-keyboard-controller": "1.18.5",
     "react-native-reanimated": "~4.1.0",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",
-    "react-native-worklets": "^0.6.1",
+    "react-native-worklets": "0.5.1",
     "web-streams-polyfill": "^4.1.0",
     "zod": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@types/react": "~19.1.0",
-    "prettier-plugin-tailwindcss": "^0.5.11",
-    "tailwindcss": "^3.4.17"
+    "@types/react": "~19.1.0"
   },
   "private": true
 }