🚀 feat: Shared Links (#2772)

* ✨ feat(types): add necessary types for shared link feature * ✨ feat: add shared links functions to data service Added functions for retrieving, creating, updating, and deleting shared links and shared messages. * ✨ feat: Add useGetSharedMessages hook to fetch shared messages by shareId Adds a new hook `useGetSharedMessages` which fetches shared messages based on the provided shareId. * ✨ feat: Add share schema and data access functions to API models * ✨ feat: Add share endpoint to API The GET /api/share/${shareId} is exposed to the public, so authentication is not required. Other paths require authentication. * ♻️ refactor(utils): generalize react-query cache manipulation functions 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. * ✨ feat(shared-link): add functions to manipulate shared link cache list implemented new utility functions to handle additions, updates, and deletions in the shared link cache list. * ✨ feat: Add mutations and queries for shared links * ✨ feat(shared-link): add `Share` button to conversation 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. * ♻️ refactor(hooks): generalize useNavScrolling for broader use - 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`. * ✨ feat(settings): add shared links listing table with delete functionality in settings - Integrated a delete button for each shared link in the table, allowing users to remove links as needed. * ♻️ refactor(components): separate `EndpointIcon` from `Icon` component for standalone use * ♻️ refactor: update useGetSharedMessages to return TSharedLink - 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. * ✨ feat(shared link): add UI for displaying shared conversations without 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. * 🔧 chore: Add translations Translate labels only. Messages remain in English as they are possibly subject to change. * ♻️ refactor: add icon and tooltip props to EditMenuButton component * 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. * ♻️irefactor: added DropdownMenu for Export and Share * ♻️ refactor: renamed component names more intuitive * More accurate naming of the dropdown menu. * When the export button is closed, the parent dropdown menu is also closed. * 🌍 chore: updated translations * 🐞 Fix: OpenID Profile Image Download (#2757) * Add fetch requirement Fixes - error: [openidStrategy] downloadImage: Error downloading image at URL "https://graph.microsoft.com/v1.0/me/photo/$value": TypeError: response.buffer is not a function * Update openidStrategy.js --------- Co-authored-by: Danny Avila <[email protected]> * 🚑 fix(export): Issue exporting Conversation with Assistants (#2769) * 🚑 fix(export): use content as text if content is present in the message If the endpoint is assistants, the text of the message goes into content, not message.text. * refactor(ExportModel): TypeScript, remove unused code --------- Co-authored-by: Yuichi Ohneda <[email protected]> * 📤style: export button icon (#2752) * refactor(ShareDialog): logic and styling * refactor(ExportAndShareMenu): imports order and icon update * chore: imports * chore: imports/render logic * feat: message branching * refactor: add optional config to useGetStartupConfig * refactor: disable endpoints query * chore: fix search view styling gradient in light mode * style: ShareView gradient styling * refactor(Share): use select queries * style: shared link table buttons * localization and dark text styling * style: fix clipboard button layout shift app-wide and add localization for copy code * support assistants message content in shared links, add useCopyToClipboard, add copy buttons to Search Messages and Shared Link Messages * add localizations * comparisons --------- Co-authored-by: Yuichi Ohneda <[email protected]> Co-authored-by: bsu3338 <[email protected]> Co-authored-by: Fuegovic <[email protected]>
danny-avila · Aug 5, 2024 · d48bc18 · d48bc18
1 parent d48b8f7
commit d48bc18
Show file tree

Hide file tree

Showing 78 changed files with 4,683 additions and 317 deletions.
diff --git a/api/models/Share.js b/api/models/Share.js
@@ -0,0 +1,89 @@
+const crypto = require('crypto');
+const { getMessages } = require('./Message');
+const SharedLink = require('./schema/shareSchema');
+const logger = require('~/config/winston');
+
+module.exports = {
+  SharedLink,
+  getSharedMessages: async (shareId) => {
+    try {
+      const share = await SharedLink.findOne({ shareId })
+        .populate({
+          path: 'messages',
+          select: '-_id -__v -user',
+        })
+        .select('-_id -__v -user')
+        .lean();
+
+      if (!share || !share.conversationId || !share.isPublic) {
+        return null;
+      }
+
+      return share;
+    } catch (error) {
+      logger.error('[getShare] Error getting share link', error);
+      return { message: 'Error getting share link' };
+    }
+  },
+
+  getSharedLinks: async (user, pageNumber = 1, pageSize = 25, isPublic = true) => {
+    const query = { user, isPublic };
+    try {
+      const totalConvos = (await SharedLink.countDocuments(query)) || 1;
+      const totalPages = Math.ceil(totalConvos / pageSize);
+      const shares = await SharedLink.find(query)
+        .sort({ updatedAt: -1 })
+        .skip((pageNumber - 1) * pageSize)
+        .limit(pageSize)
+        .select('-_id -__v -user')
+        .lean();
+
+      return { sharedLinks: shares, pages: totalPages, pageNumber, pageSize };
+    } catch (error) {
+      logger.error('[getShareByPage] Error getting shares', error);
+      return { message: 'Error getting shares' };
+    }
+  },
+
+  createSharedLink: async (user, { conversationId, ...shareData }) => {
+    const share = await SharedLink.findOne({ conversationId }).select('-_id -__v -user').lean();
+    if (share) {
+      return share;
+    }
+
+    try {
+      const shareId = crypto.randomUUID();
+      const messages = await getMessages({ conversationId });
+      const update = { ...shareData, shareId, messages, user };
+      return await SharedLink.findOneAndUpdate({ conversationId: conversationId, user }, update, {
+        new: true,
+        upsert: true,
+      });
+    } catch (error) {
+      logger.error('[saveShareMessage] Error saving conversation', error);
+      return { message: 'Error saving conversation' };
+    }
+  },
+
+  updateSharedLink: async (user, { conversationId, ...shareData }) => {
+    const share = await SharedLink.findOne({ conversationId }).select('-_id -__v -user').lean();
+    if (!share) {
+      return { message: 'Share not found' };
+    }
+    // update messages to the latest
+    const messages = await getMessages({ conversationId });
+    const update = { ...shareData, messages, user };
+    return await SharedLink.findOneAndUpdate({ conversationId: conversationId, user }, update, {
+      new: true,
+      upsert: false,
+    });
+  },
+
+  deleteSharedLink: async (user, { shareId }) => {
+    const share = await SharedLink.findOne({ shareId, user });
+    if (!share) {
+      return { message: 'Share not found' };
+    }
+    return await SharedLink.findOneAndDelete({ shareId, user });
+  },
+};
diff --git a/api/models/schema/shareSchema.js b/api/models/schema/shareSchema.js
@@ -0,0 +1,38 @@
+const mongoose = require('mongoose');
+
+const shareSchema = mongoose.Schema(
+  {
+    conversationId: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      index: true,
+    },
+    user: {
+      type: String,
+      index: true,
+    },
+    messages: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Message' }],
+    shareId: {
+      type: String,
+      index: true,
+    },
+    isPublic: {
+      type: Boolean,
+      default: false,
+    },
+    isVisible: {
+      type: Boolean,
+      default: false,
+    },
+    isAnonymous: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  { timestamps: true },
+);
+
+module.exports = mongoose.model('SharedLink', shareSchema);
diff --git a/api/server/index.js b/api/server/index.js
@@ -85,6 +85,7 @@ const startServer = async () => {
   app.use('/api/assistants', routes.assistants);
   app.use('/api/files', await routes.files.initialize());
   app.use('/images/', validateImageRequest, routes.staticRoute);
+  app.use('/api/share', routes.share);
 
   app.use((req, res) => {
     res.status(404).sendFile(path.join(app.locals.paths.dist, 'index.html'));

diff --git a/api/server/routes/index.js b/api/server/routes/index.js
@@ -18,6 +18,7 @@ const config = require('./config');
 const assistants = require('./assistants');
 const files = require('./files');
 const staticRoute = require('./static');
+const share = require('./share');
 
 module.exports = {
   search,
@@ -40,4 +41,5 @@ module.exports = {
   assistants,
   files,
   staticRoute,
+  share,
 };
diff --git a/api/server/routes/share.js b/api/server/routes/share.js
@@ -0,0 +1,75 @@
+const express = require('express');
+
+const {
+  getSharedMessages,
+  createSharedLink,
+  updateSharedLink,
+  getSharedLinks,
+  deleteSharedLink,
+} = require('~/models/Share');
+const requireJwtAuth = require('~/server/middleware/requireJwtAuth');
+const router = express.Router();
+
+/**
+ * Shared messages
+ * this route does not require authentication
+ */
+router.get('/:shareId', async (req, res) => {
+  const share = await getSharedMessages(req.params.shareId);
+
+  if (share) {
+    res.status(200).json(share);
+  } else {
+    res.status(404).end();
+  }
+});
+
+/**
+ * Shared links
+ */
+router.get('/', requireJwtAuth, async (req, res) => {
+  let pageNumber = req.query.pageNumber || 1;
+  pageNumber = parseInt(pageNumber, 10);
+
+  if (isNaN(pageNumber) || pageNumber < 1) {
+    return res.status(400).json({ error: 'Invalid page number' });
+  }
+
+  let pageSize = req.query.pageSize || 25;
+  pageSize = parseInt(pageSize, 10);
+
+  if (isNaN(pageSize) || pageSize < 1) {
+    return res.status(400).json({ error: 'Invalid page size' });
+  }
+  const isPublic = req.query.isPublic === 'true';
+  res.status(200).send(await getSharedLinks(req.user.id, pageNumber, pageSize, isPublic));
+});
+
+router.post('/', requireJwtAuth, async (req, res) => {
+  const created = await createSharedLink(req.user.id, req.body);
+  if (created) {
+    res.status(200).json(created);
+  } else {
+    res.status(404).end();
+  }
+});
+
+router.patch('/', requireJwtAuth, async (req, res) => {
+  const updated = await updateSharedLink(req.user.id, req.body);
+  if (updated) {
+    res.status(200).json(updated);
+  } else {
+    res.status(404).end();
+  }
+});
+
+router.delete('/:shareId', requireJwtAuth, async (req, res) => {
+  const deleted = await deleteSharedLink(req.user.id, { shareId: req.params.shareId });
+  if (deleted) {
+    res.status(200).json(deleted);
+  } else {
+    res.status(404).end();
+  }
+});
+
+module.exports = router;
diff --git a/client/src/Providers/ShareContext.tsx b/client/src/Providers/ShareContext.tsx
@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+type TShareContext = { isSharedConvo?: boolean };
+
+export const ShareContext = createContext<TShareContext>({} as TShareContext);
+export const useShareContext = () => useContext(ShareContext);
diff --git a/client/src/Providers/index.ts b/client/src/Providers/index.ts
@@ -1,6 +1,7 @@
 export { default as ToastProvider } from './ToastContext';
 export { default as AssistantsProvider } from './AssistantsContext';
 export * from './ChatContext';
+export * from './ShareContext';
 export * from './ToastContext';
 export * from './SearchContext';
 export * from './FileMapContext';

diff --git a/client/src/components/Chat/ExportAndShareMenu.tsx b/client/src/components/Chat/ExportAndShareMenu.tsx
@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import { Upload } from 'lucide-react';
+import { useRecoilValue } from 'recoil';
+import { useLocation } from 'react-router-dom';
+import type { TConversation } from 'librechat-data-provider';
+import DropDownMenu from '../Conversations/DropDownMenu';
+import ShareButton from '../Conversations/ShareButton';
+import HoverToggle from '../Conversations/HoverToggle';
+import ExportButton from './ExportButton';
+import store from '~/store';
+
+export default function ExportAndShareMenu() {
+  const location = useLocation();
+
+  const activeConvo = useRecoilValue(store.conversationByIndex(0));
+  const globalConvo = useRecoilValue(store.conversation) ?? ({} as TConversation);
+  const [isPopoverActive, setIsPopoverActive] = useState(false);
+  let conversation: TConversation | null | undefined;
+  if (location.state?.from?.pathname.includes('/chat')) {
+    conversation = globalConvo;
+  } else {
+    conversation = activeConvo;
+  }
+
+  const exportable =
+    conversation &&
+    conversation.conversationId &&
+    conversation.conversationId !== 'new' &&
+    conversation.conversationId !== 'search';
+
+  if (!exportable) {
+    return <></>;
+  }
+
+  const isActiveConvo = exportable;
+
+  return (
+    <HoverToggle
+      isActiveConvo={!!isActiveConvo}
+      isPopoverActive={isPopoverActive}
+      setIsPopoverActive={setIsPopoverActive}
+    >
+      <DropDownMenu
+        icon={<Upload />}
+        tooltip="Export/Share"
+        className="pointer-cursor relative z-50 flex h-[40px] min-w-4 flex-none flex-col items-center justify-center rounded-md border border-gray-100 bg-white px-3 text-left hover:bg-gray-50 focus:outline-none focus:ring-0 focus:ring-offset-0 radix-state-open:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:radix-state-open:bg-gray-700 sm:text-sm"
+      >
+        {conversation && conversation.conversationId && (
+          <>
+            <ExportButton conversation={conversation} setPopoverActive={setIsPopoverActive} />
+            <ShareButton
+              conversationId={conversation.conversationId}
+              title={conversation.title ?? ''}
+              appendLabel={true}
+              className="mb-[3.5px]"
+              setPopoverActive={setIsPopoverActive}
+            />
+          </>
+        )}
+      </DropDownMenu>
+    </HoverToggle>
+  );
+}
diff --git a/client/src/components/Chat/ExportButton.tsx b/client/src/components/Chat/ExportButton.tsx
@@ -1,68 +1,41 @@
 import React from 'react';
 
 import { useState } from 'react';
-import { useLocation } from 'react-router-dom';
 import type { TConversation } from 'librechat-data-provider';
 import { Upload } from 'lucide-react';
-import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui';
 import { useLocalize } from '~/hooks';
 import { ExportModal } from '../Nav';
-import { useRecoilValue } from 'recoil';
-import store from '~/store';
 
-function ExportButton() {
+function ExportButton({
+  conversation,
+  setPopoverActive,
+}: {
+  conversation: TConversation;
+  setPopoverActive: (value: boolean) => void;
+}) {
   const localize = useLocalize();
-  const location = useLocation();
 
   const [showExports, setShowExports] = useState(false);
 
-  const activeConvo = useRecoilValue(store.conversationByIndex(0));
-  const globalConvo = useRecoilValue(store.conversation) ?? ({} as TConversation);
-
-  let conversation: TConversation | null | undefined;
-  if (location.state?.from?.pathname.includes('/chat')) {
-    conversation = globalConvo;
-  } else {
-    conversation = activeConvo;
-  }
-
   const clickHandler = () => {
-    if (exportable) {
-      setShowExports(true);
-    }
+    setShowExports(true);
   };
 
-  const exportable =
-    conversation &&
-    conversation.conversationId &&
-    conversation.conversationId !== 'new' &&
-    conversation.conversationId !== 'search';
+  const onOpenChange = (value: boolean) => {
+    setShowExports(value);
+    setPopoverActive(value);
+  };
 
   return (
     <>
-      {exportable && (
-        <div className="flex gap-1 gap-2 pr-1">
-          <TooltipProvider delayDuration={50}>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  className="btn btn-neutral btn-small relative flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-lg"
-                  onClick={clickHandler}
-                >
-                  <div className="flex w-full items-center justify-center gap-2">
-                    <Upload size={16} />
-                  </div>
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="right" sideOffset={5}>
-                {localize('com_nav_export_conversation')}
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </div>
-      )}
+      <button
+        onClick={clickHandler}
+        className="group m-1.5 flex w-full cursor-pointer items-center gap-2 rounded p-2.5 text-sm hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 dark:focus-visible:bg-gray-600"
+      >
+        <Upload size={16} /> {localize('com_nav_export')}
+      </button>
       {showExports && (
-        <ExportModal open={showExports} onOpenChange={setShowExports} conversation={conversation} />
+        <ExportModal open={showExports} onOpenChange={onOpenChange} conversation={conversation} />
       )}
     </>
   );