Skip to content

Conversation

@ChinmayKarnik
Copy link

@ChinmayKarnik ChinmayKarnik commented Dec 31, 2025

Pass Page HTML Context to Concierge from Side Panel

Summary

Implements HTML context capture for Concierge when accessed via side panel, enabling better contextual assistance by providing sanitized page structure.

Fixes #78564

Implementation

Core Files

  • src/libs/PageContextUtils.ts - New utility for capturing and sanitizing page HTML
  • src/libs/API/parameters/AddCommentOrAttachmentParams.ts - Added pageHTML parameter
  • src/libs/actions/Report.ts - Capture logic in addActions() function
  • src/pages/home/ReportScreen.tsx - Pass isInSidePanel prop
  • src/pages/home/report/ReportFooter.tsx - Wire isInSidePanel to addComment

Key Features

Platform-specific: Only captures on web (Platform.OS === 'web')
Context-aware: Only when sending from side panel to Concierge or admin rooms
Secure: Excludes passwords, hidden elements, side panel content, and modals
Optimized: Whitelist approach - keeps only semantic elements (button, a, h1-h6, nav, input, etc.)
Lightweight: Strips classes, styles, data-*, SVG content - only essential attributes (href, aria-label, placeholder, type, for)
Size-limited: Maximum 50KB payload with automatic truncation

How It Works

  1. User views a page (e.g., workspace settings)
  2. Opens Concierge via side panel
  3. Types a message and sends
  4. System captures page HTML using document.body
  5. Sanitizes HTML to remove noise (classes, styles, etc.)
  6. Sends clean HTML as pageHTML parameter to API
  7. Concierge receives structured page context

Testing

Tested on web platform:

  1. Navigate to workspace settings page
  2. Open Concierge side panel
  3. Send a test message
  4. Verified pageHTML parameter in network request contains sanitized HTML

Screenshot:
Screenshot 2025-12-31 at 9 54 34 AM

Code Quality

  • ✅ No TypeScript errors
  • ✅ Follows existing patterns in Report.ts
  • ✅ Uses whitelist approach for security
  • ✅ Minimal performance impact (only processes DOM when sending from side panel)

- Created PageContextUtils with HTML sanitization to capture semantic page structure
- Added pageHTML parameter to AddCommentOrAttachmentParams
- Modified Report.addActions to capture page context when in side panel and talking to Concierge/admin rooms
- Updated ReportScreen and ReportFooter to pass isInSidePanel prop
- Captures only semantic HTML (buttons, links, forms, headings, etc.)
- Excludes sensitive data, side panel content, and visual noise
- Implements 50KB size limit with automatic truncation
@github-actions
Copy link
Contributor

github-actions bot commented Dec 31, 2025

All contributors have signed the CLA ✍️ ✅
Posted by the CLA Assistant Lite bot.

@ChinmayKarnik
Copy link
Author

I have read the CLA Document and I hereby sign the CLA

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[$250] Pass Page Context to Concierge from Side Panel

1 participant