Skip to content

FEATURE_README.md

Latest commit

 

History

History
345 lines (273 loc) · 11.3 KB

FEATURE_README.md

File metadata and controls

345 lines (273 loc) · 11.3 KB

Code Context Feature - Complete Implementation

🎯 Overview

This feature adds the ability for users to attach code context (repository URLs or zip files) to their chat sessions, enabling AI assistants to provide more relevant and context-aware responses.

✨ What's New

User-Facing Features

  • ✅ Upload zip files containing code
  • ✅ Add repository URLs (GitHub, GitLab, etc.)
  • ✅ View context information (type, source, file count)
  • ✅ Remove context from sessions
  • ✅ Visual badges showing context status
  • ✅ Automatic code file extraction and filtering

Technical Implementation

  • ✅ 3 new REST API endpoints
  • ✅ Enhanced data models with context support
  • ✅ Smart file processing (30+ supported extensions)
  • ✅ Complete UI with modal dialog
  • ✅ Full authentication and authorization
  • ✅ Comprehensive error handling

📁 Documentation Files

File Purpose
QUICK_START_GUIDE.md User guide with step-by-step instructions
CODE_CONTEXT_FEATURE.md Complete technical documentation
CONTEXT_FEATURE_SUMMARY.md Implementation summary and overview
test_context_feature.py Automated test script

🚀 Quick Start

For Users

  1. Start the application:

    docker-compose up

  2. Open the UI:

    • Navigate to: http://localhost:8000/static/chat_sessions.html

  3. Add context:

    • Login → Select/Create session
    • Click "+ Add Code Context"
    • Choose: Repository URL or Upload Zip
    • Done!

📖 Read: QUICK_START_GUIDE.md for detailed user instructions

For Developers

  1. Review the implementation:

    # Models
app/models/chat_sessions.py       # CodeContext model

# Schemas
app/schemas/chat_sessions.py      # API schemas

# Endpoints
app/routers/chat_sessions.py      # Context endpoints

# UI
app/static/chat_sessions.html     # Complete interface

  2. Run tests:

    python3 test_context_feature.py

  3. Test manually:

    # Add repository
curl -X POST "http://localhost:8000/chat/sessions/{id}/context/repository" \
  -H "Authorization: Bearer TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"repository_url": "https://github.com/user/repo"}'

# Upload zip
curl -X POST "http://localhost:8000/chat/sessions/{id}/context/upload" \
  -H "Authorization: Bearer TOKEN" \
  -F "file=@code.zip"

📖 Read: CODE_CONTEXT_FEATURE.md for technical details

🏗️ Architecture

┌─────────────────────────────────────────────────────────────┐
│                        User Interface                        │
│  (chat_sessions.html - Modal Dialog + JavaScript)           │
└────────────────────────┬────────────────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────────────────┐
│                      REST API Layer                          │
│  POST /chat/sessions/{id}/context/upload                    │
│  POST /chat/sessions/{id}/context/repository                │
│  DELETE /chat/sessions/{id}/context                         │
└────────────────────────┬────────────────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────────────────┐
│                    Business Logic                            │
│  • Zip file extraction and validation                       │
│  • File type filtering (30+ extensions)                     │
│  • URL validation                                            │
│  • File size checking (1MB limit)                           │
└────────────────────────┬────────────────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────────────────┐
│                    Data Layer (MongoDB)                      │
│  ChatSession.context = {                                     │
│    type: "repository" | "zip",                              │
│    source: string,                                           │
│    files: [{ path, content, size }],                        │
│    added_at: datetime                                        │
│  }                                                           │
└─────────────────────────────────────────────────────────────┘

🔧 Technical Details

Supported File Extensions

Python, JavaScript, TypeScript, JSX, TSX, Java, C, C++, C#, Go, Rust, Ruby, PHP, Swift, Kotlin, Scala, SQL, HTML, CSS, JSON, XML, YAML, Markdown, Shell scripts, and more.

API Endpoints

1. Upload Zip File

POST /chat/sessions/{session_id}/context/upload
Content-Type: multipart/form-data
Authorization: Bearer {token}

Body: file (zip file)

Response: ChatSessionResponse with context

2. Add Repository URL

POST /chat/sessions/{session_id}/context/repository
Content-Type: application/json
Authorization: Bearer {token}

Body: {"repository_url": "https://github.com/user/repo"}

Response: ChatSessionResponse with context

3. Remove Context

DELETE /chat/sessions/{session_id}/context
Authorization: Bearer {token}

Response: {"message": "Context removed successfully"}

Database Schema

class CodeContext(BaseModel):
    type: str                          # "repository" or "zip"
    source: Optional[str]              # URL or filename
    files: Optional[List[Dict]]        # Extracted files
    added_at: datetime                 # Timestamp

class ChatSession(BaseModel):
    # ... existing fields
    context: Optional[CodeContext]     # NEW: Optional context

🎨 UI Components

Main Components

  1. Add Context Button - Green button in chat header
  2. Modal Dialog - Clean interface for adding context
  3. Context Badge - Visual indicator showing context type
  4. Context Info Panel - Displays context details

User Flow

Select Session → Click "+ Add Code Context" → Choose Method →
[Repository: Enter URL → Submit] OR [Zip: Choose File → Upload] →
Badge Appears → Context Available

✅ Testing

Automated Tests

python3 test_context_feature.py

Tests include:

  • Login authentication
  • Session creation
  • Zip file upload with sample code
  • Repository URL addition
  • Context removal
  • Session retrieval with context

Manual Testing Checklist

  • Login to chat sessions UI
  • Create new chat session
  • Click "+ Add Code Context" button appears
  • Upload zip file successfully
  • Badge appears showing "Zip"
  • View context details in modal
  • Remove context successfully
  • Add repository URL
  • Badge updates to "Repository"
  • Test with different file types

📊 Feature Metrics

Code Changes

  • Files Modified: 4 (models, schemas, routers, HTML)
  • Lines Added: ~800 lines
  • New Endpoints: 3 REST APIs
  • New UI Components: Modal + 5 interactive elements

Capabilities

  • Supported Languages: 30+
  • Max File Size: 1MB per file
  • File Type Detection: Automatic
  • Binary File Handling: Automatic skip

🔒 Security

  • ✅ Authentication required for all operations
  • ✅ User can only access their own sessions
  • ✅ File type validation
  • ✅ Size limits enforced
  • ✅ Safe UTF-8 decoding with error handling
  • ✅ URL validation

🚧 Future Enhancements

Planned Features

  1. GitHub Integration

    • OAuth authentication
    • Automatic repository cloning
    • Branch selection

  2. Enhanced File Management

    • File tree preview
    • Selective file inclusion
    • File search within context

  3. Context Analytics

    • Track file usage in chats
    • Most referenced files
    • Context effectiveness metrics

  4. Advanced Features

    • Multiple contexts per session
    • Context versioning
    • Shared contexts between users
    • Context templates

Easy Improvements

  • Add loading animations
  • Implement file preview before upload
  • Add context size limits per user
  • Enable context export/import
  • Add syntax highlighting for preview

📝 Files Modified

app/
├── models/
│   └── chat_sessions.py          ← Added CodeContext model
├── schemas/
│   └── chat_sessions.py          ← Added context schemas
├── routers/
│   └── chat_sessions.py          ← Added 3 endpoints
└── static/
    └── chat_sessions.html        ← Added UI components

New Files:
├── CODE_CONTEXT_FEATURE.md       ← Technical documentation
├── CONTEXT_FEATURE_SUMMARY.md    ← Implementation summary
├── QUICK_START_GUIDE.md          ← User guide
├── test_context_feature.py       ← Automated tests
└── FEATURE_README.md             ← This file

🤝 Contributing

To Extend This Feature

  1. Review existing code in app/routers/chat_sessions.py
  2. Follow the established patterns
  3. Add tests in test_context_feature.py
  4. Update relevant documentation

Code Style

  • Follow PEP 8 for Python
  • Use type hints
  • Add docstrings to functions
  • Include error handling

📞 Support

Documentation

Debugging

  1. Check server logs for errors
  2. Verify MongoDB connection
  3. Test endpoints with curl
  4. Run automated test script

Common Issues

  • Login fails: Check user credentials and token
  • Upload fails: Verify file is valid zip under size limit
  • No files extracted: Check file extensions are supported
  • Badge doesn't show: Refresh page, check browser console

🎉 Summary

The Code Context feature is now fully implemented and ready to use! It provides a seamless way for users to add their codebase to chat sessions, enabling more contextual and relevant AI interactions.

Key Benefits:

  • ✨ Easy to use - Just 2 clicks to add context
  • 🚀 Fast - Automatic file processing
  • 🔒 Secure - Full authentication
  • 📊 Smart - Filters non-code files automatically
  • 🎨 Beautiful - Clean, modern UI

Start using it today! Open http://localhost:8000/static/chat_sessions.html and try adding context to your chat sessions.

Built with ❤️ using FastAPI, MongoDB, and vanilla JavaScript