🚀feat: shared links #2659
🚀feat: shared links #2659
Conversation
Added functions for retrieving, creating, updating, and deleting shared links and shared messages.
…reId Adds a new hook `useGetSharedMessages` which fetches shared messages based on the provided shareId.
The GET /api/share/${shareId} is exposed to the public, so authentication is not required. Other paths require authentication.
Introduces generic functions for manipulating react-query cache entries, marking a refinement in how query cache data is managed. It aims to enhance the flexibility and reusability of the cache interaction patterns within our application. - Replaced specific index names with more generic terms in queries.ts, enhancing consistency across data handling functions. - Introduced new utility functions in collection.ts for adding, updating, and deleting data entries in an InfiniteData<TCollection>. These utility functions (`addData`, `updateData`, `deleteData`, `findPage`) are designed to be re-usable across different data types and collections. - Adapted existing conversation utility functions in convos.ts to leverage these new generic utilities.
implemented new utility functions to handle additions, updates, and deletions in the shared link cache list.
- Added a share button in each conversation in the conversation list. - Implemented functionality where clicking the share button triggers a POST request to the API. - The API checks if a share link was already created for the conversation today; if so, it returns the existing link. - If no link was created for today, the API will create a new share link and return it. - Each click on the share button results in a new API request, following the specification similar to ChatGPT's share link feature.
- Modified `useNavScrolling` to accept a generic type parameter `TData`, allowing it to be used with different data structures besides `ConversationListResponse`. - Updated instances in `Nav.tsx` and `ArchivedChatsTable.tsx` to explicitly specify `ConversationListResponse` as the type argument when invoking `useNavScrolling`.
…ality in settings - Integrated a delete button for each shared link in the table, allowing users to remove links as needed.
…t for standalone use
- Modified the useGetSharedMessages hook to return not only a list of TMessage but also the TSharedLink itself. - This change was necessary to support displaying the title and date in the Shared Message UI, which requires data from TSharedLink.
…ut authentication - Implemented a new UI component to display shared conversations, designed to be accessible without requiring authentication. - Reused components from the authenticated Messages module where possible. Copied and adapted components that could not be directly reused to fit the non-authenticated context.
Translate labels only. Messages remain in English as they are possibly subject to change.
|
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?
|
|
@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 |
* moved icon and popover to arguments so that EditMenuButton can be reused. * modified so that when a ShareButton is closed, the parent DropdownMenu is also closed.
* More accurate naming of the dropdown menu. * When the export button is closed, the parent dropdown menu is also closed.
|
@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. dropdown.mov |
…he backend API is unavailable
* display error message when API is down * add loading animation to Login form while fetching data * optimize startupConfig to fetch data only on initial render to prevent unnecessary API calls
…o feature/shared-link
|
Checking this out now, will resolve the conflict. Similar to the other PR, may close and open a new one. |
|
would like to support branching here, looking into it
|
|
Hey, the conflict is resolved.
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! |
|
Closing for #2772 |
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.
#2095
#1883
If this feature is deemed unnecessary, please feel free to reject it.
Change Type
Please delete any irrelevant options.
Changes
/share/${shareId}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
Sharebutton 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
client/src/utils/convos.tsto make them more generic. These processes are also necessary for shared links.useNavScrollingneeded to be used in the shared link table, so I introduced a generic type to make it more versatile.client/src/components/Endpoints/Icon.tsx. This is to display the endpoint icons in shared link view that do not require authentication.client/src/components/Endpoints/EndpointIcon.tsxhas 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 useEndpointIcon.tsx, I will refactor it.lucide-reactfor icons representing links and copying, but if it's better to use the icons undercomponents/svg, I will modify it.sharedlinksdocument in mongodb has two unused properties:isVisibleandisAnonymous.isAnonymouswas intended to share the user's icon and name when set to false, but it is not currently implemented.isVisibleis also not currently used, but was added because it was an attribute of OpenAI API, but it might be better to remove it.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 introducedcollection.ts.I haven't added unit tests for the components, but I have manually verified the following:
sharedlinksdocument withisPublic = falseis created in mongodb.isPublic == falseare not displayed even when accessing the shared link URL.sharedlinksdocument in mongodb toisPublic = true.Checklist
Please delete any irrelevant options.