🚀feat: shared links

[ohneda]

Summary

I implemented a shared link feature similar to ChatGPT.

I was aware of the discussions mentioned below, but I thought there might be a use case separate from exporting, so I decided to implement it. https://github.com/danny-avila/LibreChat/discussions/2095 https://github.com/danny-avila/LibreChat/discussions/1883 If this feature is deemed unnecessary, please feel free to reject it.

Change Type

Please delete any irrelevant options.

• [x] New feature (non-breaking change which adds functionality)

Changes

• Added Share to the conversation action list
• Conversations with a shared link can be viewed by anyone without authentication at /share/${shareId}
• Added "Shared links" to the Data section in Settings. You can view the list of shared links and delete them.

Specifications

The implementation largely follows the specifications of ChatGPT's SharedLink. The shared messages become a snapshot at the time the shared link is created. Even if messages are added after the shared link is created, they will not be shared. If you want to update the shared messages, click the Share button again and update the link. The messages used in the UI are also the same as in ChatGPT. If they are inappropriate, I will modify them to use different messages.

Key modifications

• Refactored the functions for adding, updating, and deleting cache in client/src/utils/convos.ts to make them more generic. These processes are also necessary for shared links.
  • Confirmed that all existing test cases pass.
• Similarly, useNavScrolling needed to be used in the shared link table, so I introduced a generic type to make it more versatile.
• Separated the JSX for Endpoints icons from client/src/components/Endpoints/Icon.tsx. This is to display the endpoint icons in shared link view that do not require authentication.
  • I confirmed that a similar client/src/components/Endpoints/EndpointIcon.tsx has already been created, but I wanted to use the same icons currently used in messages, so I made it a separate component. These may be inappropriate as duplicate code. If it's better to use EndpointIcon.tsx, I will refactor it.
• I used lucide-react for icons representing links and copying, but if it's better to use the icons under components/svg, I will modify it.
• The sharedlinks document in mongodb has two unused properties: isVisible and isAnonymous. isAnonymous was intended to share the user's icon and name when set to false, but it is not currently implemented.isVisible is also not currently used, but was added because it was an attribute of OpenAI API, but it might be better to remove it.
• Since the messages are subject to change, translations of the messages have been added to each language, leaving the English translation.

Regarding the view components for shared links

I wanted to reuse the view components of messages as much as possible, but I had to create new components for parts that couldn't be reused, such as those requiring authentication. Some places have duplicate code, but I didn't perform excessive refactoring to avoid potential conflicts with other commits.

Security concerns

I was careful not to include the conversation owner's information in the APIs used by views that do not require authentication. However, I am not fully aware of the specifications of all endpoints, so there may be some oversights. If you could point out any areas to double-check, I will conduct further verification.

Testing

I confirmed that the existing test cases pass for client/src/components/utils/convos.ts, which underwent a major refactoring. I also added unit tests for client/src/components/utils/sharedLink.ts, which uses the newly introduced collection.ts.

I haven't added unit tests for the components, but I have manually verified the following:

• A share button has been added to the conversation list in the navigation.
• Clicking the share button displays the shared link dialog.
• When the shared link dialog is displayed, a sharedlinks document with isPublic = false is created in mongodb.
• Conversations with isPublic == false are not displayed even when accessing the shared link URL.
• For conversations which don't have a shared link, the label of the share button is "Create link."
• Clicking "Create link" updates the sharedlinks document in mongodb to isPublic = true.
• Even if new messages are added to a conversation of a shared link, they are not displayed at the shared link URL.
• For conversations with an existing shared link, the label of the share button is "Update link".
• Clicking "Update link" updates the shared link messages to the latest state.
• A "Shared links" section has been added to Settings -> Data controls.
• Clicking the Manage button in Shared links displays a list of shared conversations.
• If there are no shared conversations, "You have no shared links." is displayed.
• Initially, 25 shared conversations are displayed.
• If there are many shared conversations, they are scrolled.
• After scrolling, the conversations are automatically paginated by 25.
• On the right side of each row in the list of shared conversations, a delete button is displayed, and a Tooltip is shown on mouseover.
• Clicking the delete button for a shared conversation immediately deletes it.

Checklist

Please delete any irrelevant options.

• [x] My code adheres to this project's style guidelines
• [x] I have performed a self-review of my own code
• [x] I have commented in any complex areas of my code
• [x] My changes do not introduce new warnings
• [x] I have written tests demonstrating that my changes are effective or that my feature works
• [x] Local unit tests pass with my changes

[danny-avila]

Thanks so much for this. I'm planning to cut a release today so I will include this as part of v0.7.3

Also this was recently added in the header. i would like to keep it as one icon so maybe a share icon, with a dropdown similar to the one for conversations that gives share/export options?

[ohneda]

@danny-avila Thanks for checking this out. That sounds like a good idea. How does this look? Do you have any ideas for icons?

[danny-avila]

@danny-avila Thanks for checking this out. That sounds like a good idea. How does this look? Do you have any ideas for icons?

Looks good! it can be this icon for the main button:

The export icon is fine, and the share icon can be this: https://lucide.dev/icons/share-2

[ohneda]

@danny-avila I changed the Export button in the message view to a dropdown menu that now displays both the Export and Share buttons. Please feel free to let me know if any other areas need to be improved or adjusted.

https://github.com/danny-avila/LibreChat/assets/283038/f7f6d734-cf1f-45bc-8f16-98ac24c7926d

[danny-avila]

Checking this out now, will resolve the conflict. Similar to the other PR, may close and open a new one.

[danny-avila]

would like to support branching here, looking into it

[ohneda]

Hey, the conflict is resolved.

would like to support branching here, looking into it

Does this mean you want to fork messages shared by others?

[danny-avila]

Hey, the conflict is resolved.

would like to support branching here, looking into it

Does this mean you want to fork messages shared by others?

No there can be message branches in a conversation, and I saw they were actually included in the response data but with no ability to view them. You had most of the logic built out so adding this feature was easy!

[danny-avila]

Closing for https://github.com/danny-avila/LibreChat/pull/2772/