egg/Task_Reporter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
44822a561af4343b6dc769fd04cb882ec6321531
Task_Reporter/openspec/changes/archive/2025-12-08-improve-file-display-and-timezone/tasks.md
egg 44822a561a feat: Improve file display, timezone handling, and LOT management 
Changes:
- Fix datetime serialization with UTC 'Z' suffix for correct timezone display
- Add PDF upload support with extension fallback for MIME detection
- Fix LOT add/remove by creating new list for SQLAlchemy JSON change detection
- Add file message components (FileMessage, ImageLightbox, UploadPreview)
- Add multi-file upload support with progress tracking
- Link uploaded files to chat messages via message_id
- Include file attachments in AI report generation
- Update specs for file-storage, realtime-messaging, and ai-report-generation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-08 12:39:15 +08:00

5.2 KiB
Raw Blame History

Tasks: Improve File Display and Timezone

Phase 1: Database & Backend Foundation

T-1.1: Database Migration

  • Add message_id column to tr_room_files table (nullable FK to tr_messages)
  • Create Alembic migration script
  • Test migration on dev database

T-1.2: File Upload API Update

  • Modify POST /api/rooms/{room_id}/files to create associated message
  • Create message with message_type=image_ref or file_ref
  • Store message_id in file record
  • Return message_id in response
  • Update WebSocket broadcast to include message

T-1.3: File Metadata API Update

  • Add message_id to file metadata response
  • Add thumbnail_url field for image files
  • Ensure timestamps are formatted in GMT+8

T-1.4: File Deletion Cascade

  • Update DELETE endpoint to soft-delete associated message
  • Broadcast both file_deleted and message_deleted events

Phase 2: Frontend File Display

T-2.1: File Message Component

  • Create FileMessage.tsx component
  • Support image_ref type with thumbnail
  • Support file_ref type with icon
  • Display caption, sender, timestamp
  • Add download button

T-2.2: File Type Icons

  • Create file icon mapping (PDF, Excel, text, generic)
  • Use appropriate colors (red for PDF, green for Excel, etc.)
  • Display file size in human-readable format

T-2.3: Image Lightbox Component

  • Create ImageLightbox.tsx modal component
  • Support keyboard navigation (ESC to close)
  • Add loading state
  • Add download button
  • Constrain image to viewport

T-2.4: Integrate File Messages in Chat

  • Update RoomDetail.tsx to render FileMessage for image_ref/file_ref
  • Lazy load images for performance
  • Handle click to open lightbox

Phase 3: Upload Experience

T-3.1: Upload Preview Component

  • Create UploadPreview.tsx component
  • Show thumbnail for images before upload
  • Show file info (name, size, icon) for documents
  • Add caption/description input field
  • Add cancel and send buttons

T-3.2: Update ActionBar Upload Flow

  • Modify file selection to show preview instead of immediate upload
  • Integrate UploadPreview into input area
  • Handle upload progress in preview
  • Clear preview after successful upload

Phase 4: AI Report Context

T-4.1: Report Data Service Update

  • Modify report_data_service.py to fetch file context
  • Join files with their associated messages
  • Include surrounding messages (1 before, 1 after)
  • Format file entries with context for AI prompt

T-4.2: Update AI Prompt

  • Modify prompt to explain file context format
  • Include file captions and context in prompt

T-4.3: Update DOCX Assembly

  • Add captions below embedded images
  • Include file context in attachments section

Phase 5: Timezone Fixes

T-5.1: Audit Timezone Usage

  • Review all timestamp displays in frontend
  • Identify any remaining GMT+0 usages
  • Document locations needing fixes

T-5.2: Apply GMT+8 Consistently

  • Update file drawer timestamps to use formatDateTimeGMT8
  • Update report metadata timestamps
  • Update any API responses returning timestamps
  • Verify backend returns ISO strings (UTC is fine, frontend converts)

Phase 6: Migration & Testing

T-6.1: Data Migration for Existing Files

  • Create script to generate messages for orphan files
  • Associate existing files with generated messages
  • Preserve original upload timestamps

T-6.2: Testing

  • Test file upload creates message (API verified)
  • Test image thumbnail display in chat (component verified)
  • Test lightbox open/close/download (component verified)
  • Test non-image file display with icons (component verified)
  • Test upload preview flow (component verified)
  • Test AI report includes file context (code verified)
  • Test all timestamps in GMT+8 (code verified)
  • Build verification (frontend builds successfully)

Implementation Summary

Files Modified/Created:

Backend:

  • app/modules/file_storage/models.py - Added message_id FK column
  • app/modules/file_storage/schemas.py - Added message_id, thumbnail_url fields
  • app/modules/file_storage/services/file_service.py - Updated upload/delete to create/cascade messages
  • app/modules/file_storage/router.py - Updated broadcasts with message_id
  • app/modules/realtime/schemas.py - Added MessageDeletedBroadcast, updated file broadcasts
  • app/modules/report_generation/services/report_data_service.py - Added file context fetching
  • app/modules/report_generation/services/docx_service.py - GMT+8 timestamps, captions
  • app/modules/report_generation/prompts.py - GMT+8 timestamps, file context format
  • alembic/versions/a1b2c3d4e5f6_add_message_id_to_room_files.py - Migration
  • scripts/migrate_orphan_files.py - Data migration script

Frontend:

  • frontend/src/types/index.ts - Updated types with message_id, thumbnail_url
  • frontend/src/components/chat/FileMessage.tsx - New component for file messages
  • frontend/src/components/chat/ImageLightbox.tsx - New lightbox component
  • frontend/src/components/chat/UploadPreview.tsx - New upload preview component
  • frontend/src/pages/RoomDetail.tsx - Integrated FileMessage, UploadPreview