Relevant source files

The following files were used as context for generating this wiki page: - [components/export/exportSection.tsx](https://github.com/shubho0908/agentic-chat/blob/main/components/export/exportSection.tsx) - [lib/export/markdown-exporter.ts](https://github.com/shubho0908/agentic-chat/blob/main/lib/export/markdown-exporter.ts) - [components/export/conversationPdf.tsx](https://github.com/shubho0908/agentic-chat/blob/main/components/export/conversationPdf.tsx) - [README.md](https://github.com/shubho0908/agentic-chat/blob/main/README.md) - [lib/tools/deep-research/nodes/formatter.ts](https://github.com/shubho0908/agentic-chat/blob/main/lib/tools/deep-research/nodes/formatter.ts)

# Export & Sharing The **Export & Sharing** module provides users with tools to archive, download, and distribute conversation data. The system supports multiple formats including machine-readable JSON, human-readable Markdown, and professional PDF documents. Additionally, the platform supports public sharing through unique links enhanced by OpenGraph previews for social metadata. This module is designed to handle complex conversation trees, including message versioning, attachments, and metadata, ensuring that the exported data remains a faithful representation of the interactive chat experience. Sources: [README.md:126-132](), [components/export/exportSection.tsx:18-40]() ## Export Architecture and Workflow The export process is initiated via a client-side component that orchestrates data fetching and format-specific transformation. When a user selects a format and triggers the export, the system follows a structured pipeline to retrieve the conversation state and generate a downloadable file. ### Export Pipeline Flow The following diagram illustrates the sequence of operations from the user's click to the final file download. ```mermaid sequenceDiagram participant U as User Interface participant API as /api/conversations/[id]/export participant E as Export Orchestrator participant L as Format Libraries U->>API: GET Request for Conversation Data API-->>U: Return ExportConversation (JSON) U->>E: handleExport(data, format) alt format == 'markdown' E->>L: downloadMarkdown() else format == 'pdf' E->>L: downloadPDF(ConversationPDF) else format == 'json' E->>L: downloadJSON() end L-->>U: Browser Download Trigger ``` The export workflow begins with a fetch to a dedicated export endpoint which returns an `ExportConversation` object containing all messages, metadata, and attachment references. Sources: [components/export/exportSection.tsx:43-78]() ### Supported Export Formats | Format | Description | Features Included | |:---|:---|:---| | **JSON** | Machine-readable backup | Messages, Versions, Attachments, Metadata | | **Markdown** | Human-readable text | Formatting, Attachments, Edit History (Optional) | | **PDF** | Professional document | Styled layout, Page numbering, Metadata | Sources: [components/export/exportSection.tsx:21-38](), [README.md:127]() ## Markdown Export Implementation The Markdown exporter transforms the conversation into a structured document using standard Markdown syntax. It specifically handles the recursive nature of message versioning by utilizing HTML `

` and `

` tags to hide/show edit history. ### Document Structure 1. **H1 Title**: Uses the conversation title or "Untitled Conversation". 2. **Metadata Section**: Lists creation, update, and export timestamps, along with the user's name. 3. **Conversation Section**: Iterates through messages with H3 headers indicating the role (User/Assistant). 4. **Attachments**: Listed as nested bullet points with file size and type. 5. **Edit History**: Versions are encapsulated in a collapsible block. ```typescript // Example of version history formatting in Markdown if (includeVersions && message.versions && message.versions.length > 0) { lines.push(`

`); lines.push(`

📝 Edit History (${message.versions.length} versions)

\n`); // ... iteration through versions lines.push('

\n'); } ``` Sources: [lib/export/markdown-exporter.ts:7-40](), [lib/export/markdown-exporter.ts:68-79]() ## PDF Generation and Styling PDF exports are generated using the `@react-pdf/renderer` library, which allows for precise layout control using a CSS-like styling system. The `ConversationPDF` component defines a high-fidelity document structure suitable for printing. ### Layout Components * **StyleSheet**: Defines specific margins (40pt padding), font families (Helvetica), and semantic colors (#000000 for text, #666666 for metadata). * **Message Container**: Uses a light background (#fafafa) and a left border (2pt width) to distinguish message blocks. * **Pagination**: A fixed footer renders the current page number and total page count on every page. ```mermaid classDiagram class ConversationPDF { +ExportConversation conversation +boolean includeAttachments } class MessageComponent { +ExportMessage message +number index } class Styles { +page +header +messageContainer +footer } ConversationPDF *-- MessageComponent ConversationPDF ..> Styles ``` The PDF generation also includes logic to prevent awkward page breaks in long messages by using the `break` property on `View` components if content length exceeds 500 characters. Sources: [components/export/conversationPdf.tsx:4-78](), [components/export/conversationPdf.tsx:112-125]() ## Deep Research Report Formatting For autonomous research tasks, the platform utilizes a specialized `formatterNode` that enforces strict technical writing standards. These standards are significantly more rigorous than standard conversation exports, aimed at producing exhaustive "Deep Research" reports. ### Content Requirements Reports generated via this system are required to meet a minimum word count (often 8,000+ words) and follow a specific hierarchy: * **H1**: Prominent descriptive title. * **Table of Contents**: Mandatory for reports over 3,000 words. * **Section Hierarchy**: 8-12 major H2 sections with 3-6 H3 subsections each. * **Visual Elements**: Extensive use of tables for comparisons and code blocks for technical implementation details. Sources: [lib/tools/deep-research/nodes/formatter.ts:89-110](), [lib/tools/deep-research/nodes/formatter.ts:169-185]() ## Sharing and Metadata Public sharing is managed through an API that generates unique identifiers for conversations. To ensure high-quality presentation on social platforms and communication apps, the system includes a dedicated OpenGraph (OG) route. ### OpenGraph Previews The `/api/og` route dynamically generates images that include: * Conversation title. * A summary or snippet of the content. * Platform branding. These shared conversations allow for external viewing without requiring the recipient to have an active session, while the original creator retains management capabilities such as renaming or deleting the public link. Sources: [README.md:129-131](), [lib/tools/deep-research/nodes/formatter.ts:354-360]() ## Summary The Export & Sharing system provides a robust framework for data portability and collaboration. By leveraging format-specific libraries like `@react-pdf/renderer` and implementing structured Markdown generation with versioning support, the platform ensures that users can transition their digital conversations into permanent, professional-grade documentation. The integration of high-standard formatting for deep research further establishes the module as a tool for generating authoritative technical content.