b4b508ff5a
- 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
109 lines
3.9 KiB
Markdown
109 lines
3.9 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
cd mobile-app
|
|
pnpm install
|
|
```
|
|
|
|
### Run the App
|
|
|
|
```bash
|
|
# 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:11434` for 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.
|