Righting Sentences - React Frontend Migration

Purpose

Replace the single-file ui.html with a React application for better state management, markdown rendering, file uploads, and maintainability.

---

Current Backend Status (Complete)

• FastAPI app running on port 8080
• 4 models working: gpt-4o, gpt-5.2-pro, claude-sonnet-4-5-20250929, gemini-3-flash-preview
• Honeypot logging to GCS
• Google OAuth authentication
• Firestore for conversations/messages

---

React Frontend Requirements

Core Features

1. Chat Interface
   • Message input with send button
   • Streaming responses displayed in real-time
   • User messages on right, assistant on left
2. Markdown Rendering
   • * → bullets, # → headings, code blocks, and so forth
   • Use react-markdown with remark-gfm
3. Output
   • Copy button on each assistant message
   • Copy entire conversation option
4. Model Selection
   • Dropdown integrated with "New Chat" button
   • Model locked once conversation has messages
   • Show current model in header
5. Conversation Management
   • Sidebar with 10 most recent conversations
   • Auto-generated titles from first message
   • Delete button for each conversation
   • Clear/New Chat button
6. File Upload (Phase 2)
   • Drag-and-drop or click to upload
   • Support: PDF, TXT, DOCX, images
   • Parse and include in message context

---

Technical Stack

frontend/
├── package.json
├── vite.config.js
├── index.html
├── src/
│   ├── main.jsx
│   ├── App.jsx
│   ├── api.js                 # API calls to backend
│   ├── components/
│   │   ├── ChatView.jsx       # Main chat area
│   │   ├── MessageBubble.jsx  # Single message with markdown
│   │   ├── MessageInput.jsx   # Input + send button
│   │   ├── Sidebar.jsx        # Conversation list
│   │   ├── ModelSelector.jsx  # Model dropdown
│   │   └── Header.jsx         # Top bar with model info
│   └── styles/
│       └── index.css          # Tailwind or plain CSS

Dependencies:

• react, react-dom
• react-markdown, remark-gfm (markdown)
• react-icons (copy icon, delete icon)
• Vite for build

---

Development Phases

Phase 1: Basic Chat (Replace ui.html)

1. Create Vite React project in frontend/ directory
2. Set API layer (api.js) to match existing endpoints
3. Build components: Sidebar, ChatView, MessageBubble, MessageInput
4. Add markdown rendering
5. Add copy button
6. Style with system-aware theming (respects OS light/dark mode via prefers-color-scheme)

Phase 2: Model & Conversation Improvements

1. ModelSelector integrated with New Chat
2. Lock model dropdown when conversation has messages
3. Delete conversation button
4. Auto-title generation (already works on backend)

Phase 3: File Upload

1. File upload feature with drag and drop
2. Backend endpoint for file parsing
3. Parsed content included in message context

---

Backend Updates

• CORS configuration

For File Upload (Phase 3)

<syntaxhighlight lang="python">

1. New endpoint in messaging.py

@router.post("/upload") async def upload_file(file: UploadFile):

   # Parse PDF, DOCX, TXT, images (OCR)
   # Return extracted text

</syntaxhighlight>

---

Files to Create/Modify

Action	Path
CREATE	frontend/, the entire React app
MODIFY	app/main.py to include the React app endpoints
DELETE	app/ui.html after React is working
MODIFY	app/api_routes/messaging.py - add file upload endpoint (Phase 3)

---

Development Workflow

1. Run backend: uvicorn app.main:app --reload --port 8080
2. Run frontend dev: cd frontend && npm run dev (port 5173)
3. Vite proxies API calls to backend
4. For production: npm run build → serve from FastAPI

---

Next Steps

1. Create React project structure
2. Add API layer
3. Build core components
4. Test with backend
5. Deploy to Cloud Run