PPLX-71 - trckr

← PPLX-71

feature,frontend,export

Created: 2025-12-21 • Updated: 2025-12-22

Relationships Loading...

Add export button to completed deep research answers for saving as markdown or PDF.

## Implementation
- Add ExportButton component to AIAnswer component
- Show button only for completed research mode queries (mode==='research' && !isStreaming)
- Position in answer header next to copy button
- Wire to export API endpoint
- Handle download using fetch + blob URL
- Add loading state during export
- Show success/error toast notifications
- Clean up blob URLs after download

## Export Flow
1. User clicks "Export as Markdown"
2. Fetch /api/queries/{queryId}/export?format=md
3. Create blob from response
4. Create download link and click programmatically
5. Clean up blob URL
6. Show success toast

## Files to Modify
- src/components/organisms/AIAnswer/AIAnswer.tsx
- Add imports for ExportButton
- Add export handler function

## Acceptance Criteria
- Export button appears for completed research queries
- Button hidden for non-research or streaming queries
- Clicking triggers download
- Markdown export works correctly
- PDF export works correctly
- Loading state shows during download
- Error handling displays user-friendly messages
- Success confirmation shown
- No impact on other query types
- Component tests pass

Pull Requests (comma-separated URLs)

Attachments

Comments (1)

agent · 2025-12-22

## Implementation Complete ### Changes Made: 1. **Created ExportButton molecule component** (src/components/molecules/ExportButton/) - Dropdown with Markdown and PDF export format options - Loading state during export with accessible aria-label updates - Calls /api/queries/{queryId}/export?format=md|pdf API endpoint - Creates blob download with proper filename (research-{queryId}.md/pdf) - Success/error callbacks for toast notifications 2. **Updated AIAnswer component** (src/components/organisms/AIAnswer/AIAnswer.tsx:216-241) - Added mode prop (QueryMode: quick | research | writing | code) - Added queryId prop for export API calls - Added hideExportButton prop for control - Added onExportSuccess and onExportError callbacks - Export button only shows when: mode === research AND !isStreaming AND queryId exists 3. **Added tests** (17 tests passing) - Rendering tests - Dropdown behavior tests - Export API call tests with MSW mocking - Loading state tests - Error handling tests - Accessibility tests 4. **Added Storybook stories** - Default, Disabled, Medium Size, Interactive, InContext, SizeComparison ### Verification: - TypeScript compiles without errors - All 17 ExportButton tests pass - Storybook builds successfully ### Commits: - 8af08ed: PPLX-71: Add export functionality to AIAnswer component