Jump to content

Righting Sentences - React Frontend Migration

From Saxton Publishing Technical Documentation

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
Retrieved from "https://docs.saxtonpublishing.com/index.php?title=Righting_Sentences_-_React_Frontend_Migration&oldid=91"