📬 docs: shareable_links feature page

pages/docs/features/shareable_links.mdx

@@ -0,0 +1,169 @@
+---
+title: Shareable Links
+description: Share your conversations with others using LibreChat's shareable links feature, complete with QR codes, branching messages, and artifacts support.
+---
+
+import Image from 'next/image'
+
+# Shareable Links
+
+## Overview
+
+Shareable Links in LibreChat allow you to share your conversations with others through automatically generated links and QR codes. Whether you're collaborating with teammates, showcasing AI interactions, or sharing generated artifacts, this feature makes it easy to allow others to view your conversations with the click of a button.
+
+## Key Features
+
+- **Easy Sharing**: Generate shareable links with just a few clicks
+- **QR Code Generation**: Quickly share conversations via QR codes for mobile access
+- **Conversation Branching**: Recipients can see branched conversations in your shared links
+- **Artifacts Support**: Shared conversations now include generated artifacts and interactive components
+- **Customizable Appearance**: Recipients can adjust language and theme preferences
+- **Link Management**: Centralized dashboard to manage all your shared links
+
+## How to Share a Conversation
+There are two ways to make a conversation shareable:
+
+### Option 1: From the Conversation Menu
+
+![Click share from conversation menu](/images/shared-links/share-from-menu.png)
+*Access the share option from the conversation menu*
+
+### Option 2: From the Share Button
+
+![Click the share button in conversation](/images/shared-links/share-button.png)
+*Use the dedicated share button in your active conversation*
+
+## Share Link Options
+
+When you create a shareable link, you'll see a modal with several options to customize how your conversation appears to recipients.
+
+<div style={{display: "flex", gap: "20px", alignItems: "flex-start", flexWrap: "wrap"}}>
+  <div style={{flex: "1", minWidth: "300px"}}>
+    ![Create share link modal](/images/shared-links/share-modal-create.png)
+    *Initial share link creation modal*
+  </div>
+  <div style={{flex: "1", minWidth: "300px"}}>
+    ![Share link modal with options](/images/shared-links/share-modal-options.png)
+    *Shared link configuration modal*
+  </div>
+</div>
+
+### Available Options:
+
+- **Refresh Link**: Generate a new URL for the shared conversation
+- **Generate QR code**: Create and show a QR code for easy mobile access
+- **Copy Link to clipboard**: Copy the shareable URL to your clipboard
+- **Delete Link**: Remove the shared link, revoking access to anyone who has it
+
+## QR Code Feature
+
+Generate QR codes for your shared conversations for easy mobile sharing. Simply scan the code with any smartphone camera to instantly access the conversation.
+
+<div style={{display: "flex", gap: "20px", alignItems: "flex-start", flexWrap: "wrap"}}>
+  <div style={{flex: "1", minWidth: "300px"}}>
+    ![QR code generation for shared link](/images/shared-links/qr-code.png)
+    *Generate QR codes for instant mobile access to shared conversations*
+  </div>
+  <div style={{flex: "1", minWidth: "300px"}}>
+    ![QR code download options](/images/shared-links/qr-code-download.png)
+    *QR code will link to the shared conversation URL*
+  </div>
+</div>
+
+This is particularly useful for:
+- Sharing during presentations
+- Quick mobile access
+- Offline sharing via printed materials
+- Conference or event demonstrations
+
+## Viewing Shared Conversations
+
+When someone opens your shared link, they'll see a clean, focused view of the conversation with all the context you chose to include.
+
+![View of a shared conversation](/images/shared-links/shared-view.png)
+*How recipients see your shared conversation*
+
+### Features Available to Recipients:
+
+- The date the shareable link was published
+- Ability to scroll through the entire conversation
+- Access to any included artifacts or generated content
+
+## Branching in Shared Conversations
+
+Conversation branches are preserved in shared links, allowing recipients to explore different conversation paths and see how the discussion evolved.
+
+<div style={{display: "flex", gap: "20px", alignItems: "flex-start", flexWrap: "wrap"}}>
+  <div style={{flex: "1", minWidth: "300px"}}>
+    ![Branching menu in shared conversations](/images/shared-links/branching-menu.png)
+    *Access different conversation branches using the branch navigation arrows*
+  </div>
+  <div style={{flex: "1", minWidth: "300px"}}>
+    ![Branching support in shared conversations](/images/shared-links/branching-support.png)
+    *Recipients can navigate through conversation branches in shared links*
+  </div>
+</div>
+
+This feature is essential for:
+- Demonstrating different AI approaches to the same problem
+- Illustrating how solutions and interactions can take multiple different paths depending on user input
+
+## Artifacts in Shared Conversations
+
+All artifacts generated during the conversation are fully functional in shared links, including React components, HTML code, and Mermaid diagrams.
+
+![Artifacts work in shared conversations](/images/shared-links/artifacts-support.png)
+*Generated artifacts remain interactive in shared conversations*
+
+Recipients can:
+- View interactive React components
+- See HTML previews
+- Examine Mermaid diagrams
+- Access the underlying code
+- Understand the context in which artifacts were generated
+
+## Customization Options for Recipients
+
+Recipients can customize their viewing experience by adjusting language and theme preferences to match their preferences.
+
+![Language and theme settings for shared links](/images/shared-links/recipient-settings.png)
+*Recipients can customize language and theme preferences*
+
+Available customizations:
+- **Theme selection**: Light, dark, or system preference
+- **Language**: View the interface in their preferred language
+
+## Managing Your Shared Links
+
+Access the Shared Links Management dashboard under the Data Controls section of the Settings menu to view and manage all your shared conversations in one place.
+
+<div style={{display: "flex", gap: "20px", alignItems: "flex-start", flexWrap: "wrap"}}>
+  <div style={{flex: "1", minWidth: "300px"}}>
+    ![Shared links management dashboard](/images/shared-links/management-modal.png)
+    *Centralized dashboard for managing all your shared links*
+  </div>
+  <div style={{flex: "1", minWidth: "300px"}}>
+    ![Shared link details and options](/images/shared-links/management-details.png)
+    *View details and manage individual shared links*
+  </div>
+</div>
+
+### Management Features:
+
+- **View all links**: See a list of all conversations you've shared
+- **Search & filter**: Quickly find and view the content of specific shared links
+- **Revoke access**: Delete links to immediately stop sharing
+
+## Frequently Asked Questions
+
+**Q: Can recipients respond to shared conversations?**
+A: No, shared links are read-only. Recipients can view the conversation but cannot add messages or interact with the AI.
+
+**Q: What happens if I delete a conversation after sharing it?**
+A: The shared link will no longer be accessible, and any user which navigates to that link will be served a page stating "Shared link not found".
+
+**Q: Can I edit a conversation after sharing it?**
+A: The shared link captures the conversation at the time of creation. Additional messages will not be reflected in the shared view - however, edits made to the existing messages will be shown.
+
+**Q: Do shared links work offline?**
+A: No, recipients need an internet connection to view shared conversations.