- Single-screen chat interface with Timmy's sovereign AI personality - Text messaging with real-time AI responses via server chat API - Voice recording and playback with waveform visualization - Image sharing (camera + photo library) with full-screen viewer - File attachments via document picker - Dark arcane theme matching the Timmy Time dashboard - Custom app icon with glowing T circuit design - Timmy system prompt ported from dashboard prompts.py - Unit tests for chat utilities and message types
3.9 KiB
Timmy Chat — Mobile App
A sleek mobile chat interface for Timmy, the sovereign AI agent. Built with Expo SDK 54, React Native, TypeScript, and NativeWind (Tailwind CSS).
Features
- Text Chat — Send and receive messages with Timmy's full personality
- Voice Messages — Record and send voice notes via the mic button; playback with waveform UI
- Image Sharing — Take photos or pick from library; full-screen image viewer
- File Attachments — Send any document via the system file picker
- Dark Arcane Theme — Deep purple/indigo palette matching the Timmy Time dashboard
Screenshots
The app is a single-screen chat interface with:
- Header showing Timmy's status and a clear-chat button
- Message list with distinct user (teal) and Timmy (dark surface) bubbles
- Input bar with attachment (+), text field, and mic/send button
- Empty state with Timmy branding when no messages exist
Project Structure
mobile-app/
├── app/ # Expo Router screens
│ ├── _layout.tsx # Root layout with providers
│ └── (tabs)/
│ ├── _layout.tsx # Tab layout (hidden — single screen)
│ └── index.tsx # Main chat screen
├── components/
│ ├── chat-bubble.tsx # Message bubble (text, image, voice, file)
│ ├── chat-header.tsx # Header with Timmy status
│ ├── chat-input.tsx # Input bar (text, mic, attachments)
│ ├── empty-chat.tsx # Empty state welcome screen
│ ├── image-viewer.tsx # Full-screen image modal
│ └── typing-indicator.tsx # Animated dots while Timmy responds
├── lib/
│ └── chat-store.tsx # React Context chat state + API calls
├── server/
│ └── chat.ts # Server-side chat handler with Timmy's prompt
├── shared/
│ └── types.ts # ChatMessage type definitions
├── assets/images/ # App icons (custom generated)
├── theme.config.js # Color tokens (dark arcane palette)
├── tailwind.config.js # Tailwind/NativeWind configuration
└── tests/
└── chat.test.ts # Unit tests
Setup
Prerequisites
- Node.js 18+
- pnpm 9+
- Expo CLI (
npx expo) - iOS Simulator or Android Emulator (or physical device with Expo Go)
Install Dependencies
cd mobile-app
pnpm install
Run the App
# Start the Expo dev server
npx expo start
# Or run on specific platform
npx expo start --ios
npx expo start --android
npx expo start --web
Backend
The chat API endpoint (server/chat.ts) requires an LLM backend. The invokeLLM function should be wired to your preferred provider:
- Local Ollama — Point to
http://localhost:11434for local inference - OpenAI-compatible API — Any API matching the OpenAI chat completions format
The system prompt in server/chat.ts contains Timmy's full personality, agent roster, and behavioral rules ported from the dashboard's prompts.py.
Timmy's Personality
Timmy is a sovereign AI agent — grounded in Christian faith, powered by Bitcoin economics, committed to digital sovereignty. He speaks plainly, acts with intention, and never ends responses with generic chatbot phrases. His agent roster includes Echo, Mace, Forge, Seer, Helm, Quill, Pixel, Lyra, and Reel.
Theme
The app uses a dark arcane color palette:
| Token | Color | Usage |
|---|---|---|
primary |
#7c3aed |
Accent, user bubbles |
background |
#080412 |
Screen background |
surface |
#110a20 |
Cards, Timmy bubbles |
foreground |
#e8e0f0 |
Primary text |
muted |
#6b5f7d |
Secondary text |
border |
#1e1535 |
Dividers |
success |
#22c55e |
Status indicator |
error |
#ff4455 |
Recording state |
License
Same as the parent Timmy Time Dashboard project.