05 - Streaming Chat & Interpretation

Overview

Implement the Reading Interpretation Chat (streaming content) using React Native + Reanimated + Markdown streaming.

Design Constraints

• OLED Noir Background: Use true black (#000000).
• Typography: High-contrast, elegant serif (Playfair Display) for interpretation content. Clean Sans-Serif (Inter) for chat UI chrome.
• Noir/Minimalist: Clean bubbles, subtle shadow (no borders), deep-indigo/black theme.
• Ritual Pacing: The chat shouldn't blast text. It should feel measured and intentional — a respite from high-intensity apps.

React Native / Expo Implementation

1. Chat Container: Minimalist, OLED-noir background. Auto-scroll to bottom as content streams.
2. Streaming: Use fetch with ReadableStream to stream Markdown content. Render with react-native-markdown-display.
3. Typing Effect: Variable-speed typewriter (20-30ms per char). Start fast, slow down as the reading progresses to emphasize gravity. If user interrupts, stop the stream.
4. Haptic: Subtle tick vibration every ~5th character streamed via expo-haptics.
5. Voice/TTS: If user taps "Listen," play audio stream from TTS API. Handle background audio pause/resume. Fluid, liquid morphing animation for the Voice button states (idle/playing).
6. State: currentMessageIndex, chatMessages (array).

Context

• The web app uses a custom TypewriterMarkdown.tsx and ChatUserInput.tsx for message sending/retry logic.

Deliverables

• src/components/Chat/ChatBubble.tsx
• src/components/Chat/TypewriterText.tsx
• src/components/Chat/ChatInput.tsx

AI Developer Prompt

"Implement the InterpretationChat component. Use a dark mode/OLED noir background. The interpretation text must be rendered in Playfair Display (serif). Implement a Markdown streaming typewriter effect (20-30ms per char) that starts fast and slows down over time. Add subtle haptic ticks via expo-haptics during streaming. Build a custom Voice TTS button that morphs fluidly between states (idle/playing). The chat container must auto-scroll to the bottom during the stream. Support user interruption to stop the stream."