Saxtonmd77: /* Next Steps */

2026-01-06T00:23:39Z

Next Steps

← Older revision		Revision as of 00:23, 6 January 2026
Line 137:		Line 137:
	== Next Steps ==		== Next Steps ==
	# Create React project structure		# Create React project structure
	# ~~Implement~~ API layer		# Add API layer
	# Build core components		# Build core components
	# Test with ~~existing~~ backend		# Test with backend
	# Deploy to Cloud Run		# Deploy to Cloud Run

Saxtonmd77: Created page with "== 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 conversat..."

2026-01-06T00:22:19Z

Created page with "== Purpose == Replace the single-file <code>ui.html</code> 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: <code>gpt-4o</code>, <code>gpt-5.2-pro</code>, <code>claude-sonnet-4-5-20250929</code>, <code>gemini-3-flash-preview</code> * Honeypot logging to GCS * Google OAuth authentication * Firestore for conversat..."

New page

== Purpose ==
Replace the single-file <code>ui.html</code> 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: <code>gpt-4o</code>, <code>gpt-5.2-pro</code>, <code>claude-sonnet-4-5-20250929</code>, <code>gemini-3-flash-preview</code>
* Honeypot logging to GCS
* Google OAuth authentication
* Firestore for conversations/messages

----

== React Frontend Requirements ==

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

----

== Technical Stack ==

<pre>
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
</pre>

'''Dependencies:'''
* <code>react</code>, <code>react-dom</code>
* <code>react-markdown</code>, <code>remark-gfm</code> (markdown)
* <code>react-icons</code> (copy icon, delete icon)
* Vite for build

----

== Development Phases ==

=== Phase 1: Basic Chat (Replace ui.html) ===
# Create Vite React project in <code>frontend/</code> directory
# Set API layer (<code>api.js</code>) to match existing endpoints
# Build components: Sidebar, ChatView, MessageBubble, MessageInput
# Add markdown rendering
# Add copy button
# Style with system-aware theming (respects OS light/dark mode via <code>prefers-color-scheme</code>)

=== Phase 2: Model & Conversation Improvements ===
# ModelSelector integrated with New Chat
# Lock model dropdown when conversation has messages
# Delete conversation button
# Auto-title generation (already works on backend)

=== Phase 3: File Upload ===
# File upload feature with drag and drop
# Backend endpoint for file parsing
# Parsed content included in message context

----

== Backend Updates ==

* CORS configuration

=== For File Upload (Phase 3) ===
<syntaxhighlight lang="python">
# 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 ==

{| class="wikitable"
! Action !! Path
|-
| CREATE || <code>frontend/</code>, the entire React app
|-
| MODIFY || <code>app/main.py</code> to include the React app endpoints
|-
| DELETE || <code>app/ui.html</code> after React is working
|-
| MODIFY || <code>app/api_routes/messaging.py</code> - add file upload endpoint (Phase 3)
|}

----

== Development Workflow ==

# Run backend: <code>uvicorn app.main:app --reload --port 8080</code>
# Run frontend dev: <code>cd frontend && npm run dev</code> (port 5173)
# Vite proxies API calls to backend
# For production: <code>npm run build</code> → serve from FastAPI

----

== Next Steps ==
# Create React project structure
# Implement API layer
# Build core components
# Test with existing backend
# Deploy to Cloud Run

Righting Sentences - React Frontend Migration - Revision history

Saxtonmd77: /* Next Steps */