Skip to content

HTML_IFRAME_STATUS.md

Latest commit

 

History

History
107 lines (81 loc) · 3.61 KB

HTML_IFRAME_STATUS.md

File metadata and controls

107 lines (81 loc) · 3.61 KB

HTML Iframe Rendering - Implementation Status

✅ Backend Implementation (Complete & Tested)

Code Interpreter Service

  • File: code-interpreter/server.py
  • Changes: Added HTML file detection (.html extension)
  • MIME Type: Returns text/html for HTML files
  • Dependencies: Plotly added to requirements.txt
  • Status: ✅ Tested with direct curl - working correctly

Test Results:

curl -X POST http://localhost:5001/execute -H "Content-Type: application/json" \
  -d '{"code": "import plotly.graph_objects as go\nfig = go.Figure(data=[go.Bar(x=[\"A\",\"B\",\"C\"], y=[10,20,15])])\nfig.write_html(\"chart.html\")", "files": []}'

Response:
{"error":null,"files":[{"id":"chart.html","name":"chart.html","type":"text/html"}],"session_id":"...","stdout":"...","success":true}

✅ Frontend Implementation (Complete - Not Deployed)

Component: HTMLAttachment

  • File: client/src/components/Chat/Messages/Content/Parts/Attachment.tsx
  • Features:
    • Detects .html file extensions
    • Renders in sandboxed iframe
    • Styled container with filename header
    • 600px height for visibility
    • Smooth fade-in animation
    • Security: sandbox="allow-scripts allow-same-origin"

Code Added:

const HTMLAttachment = memo(({ attachment }: { attachment: TAttachment }) => {
  // ... iframe rendering with styled container
});

Integration:

  • Updated Attachment component to detect HTML files
  • Updated AttachmentGroup to group and render HTML attachments separately

⚠️ Deployment Issue

Problem: Frontend changes are in source code but not in the running Docker container.

Why:

  • Using pre-built image: ghcr.io/danny-avila/librechat-dev:latest
  • Build tools (vite) not available in production container
  • Client source is mounted (./client/src:/app/client/src:ro) but dist not rebuilt

Attempted Solutions:

  1. ❌ Build inside container - vite not available
  2. ❌ Build on host - missing dependencies/configuration issues
  3. ✅ Solution: Mount client src and rebuild, OR use agents endpoint

🧪 How to Test

Option 1: Test with Agents (Recommended)

  1. In LibreChat, create or use an Agent with "Execute Code" capability
  2. Ask: "Create a Plotly bar chart and save it as chart.html"
  3. Expected: HTML file should render in iframe (once frontend is deployed)

Option 2: Rebuild Frontend

cd /Users/simo/librechat
# Install deps if not done
cd client && npm install

# Build (needs resolution of package issues)
npm run build

# Restart container
docker compose restart api

Option 3: Development Mode

Run vite dev server locally to test changes without full rebuild.

📋 Next Steps

  1. Resolve frontend build: Need to successfully compile client with our changes
  2. Test with Agents: Use agents endpoint with execute_code capability
  3. Verify iframe rendering: Confirm HTML files display in iframe
  4. Test interactivity: Ensure Plotly charts are fully interactive

🔍 Configuration Status

  • ✅ Code interpreter running on port 5001
  • ✅ API configured with CODE_INTERPRETER_URL=http://code-interpreter:5000
  • ✅ Agents endpoint has execute_code capability enabled
  • ✅ Volume mounts in docker-compose.override.yml
  • ⚠️ Frontend needs rebuild or dev mode

📝 Files Modified

Backend:

  • code-interpreter/server.py - HTML detection
  • code-interpreter/requirements.txt - Added plotly
  • code-interpreter/Dockerfile - Rebuilt with plotly

Frontend:

  • client/src/components/Chat/Messages/Content/Parts/Attachment.tsx - HTML rendering

Configuration:

  • docker-compose.override.yml - Volume mounts