🔖 feat: Conversation Bookmarks (#3344)

* feat: add tags property in Conversation model * feat: add ConversationTag model * feat: add the tags parameter to getConvosByPage * feat: add API route to ConversationTag * feat: add types of ConversationTag * feat: add data access functions for conversation tags * feat: add Bookmark table component * feat: Add an action to bookmark * feat: add Bookmark nav component * fix: failed test * refactor: made 'Saved' tag a constant * feat: add new bookmark to current conversation * chore: Add comment * fix: delete tag from conversations when it's deleted * fix: Update the query cache when the tag title is changed. * chore: fix typo * refactor: add description of rebuilding bookmarks * chore: remove unused variables * fix: position when adding a new bookmark * refactor: add comment, rename a function * refactor: add a unique constraint in ConversationTag * chore: add localizations
2026-01-16 15:35:31 +01:00 · 2024-07-29 07:45:59 -07:00 · 2024-07-29 07:45:59 -07:00 · e565e0faab
commit e565e0faab
parent d4d56281e3
65 changed files with 3751 additions and 36 deletions
--- a/client/src/components/Chat/Menus/Bookmarks/BookmarkMenuItems.tsx
+++ b/client/src/components/Chat/Menus/Bookmarks/BookmarkMenuItems.tsx
@ -0,0 +1,77 @@
+import { useCallback } from 'react';
+import { BookmarkPlusIcon } from 'lucide-react';
+import type { FC } from 'react';
+import type { TConversation } from 'librechat-data-provider';
+import { BookmarkItems, BookmarkEditDialog } from '~/components/Bookmarks';
+import { useTagConversationMutation } from '~/data-provider';
+import { NotificationSeverity } from '~/common';
+import { useToastContext } from '~/Providers';
+import { useLocalize } from '~/hooks';
+
+export const BookmarkMenuItems: FC<{
+  conversation: TConversation;
+  tags: string[];
+  setTags: (tags: string[]) => void;
+  setConversation: (conversation: TConversation) => void;
+}> = ({ conversation, tags, setTags, setConversation }) => {
+  const { showToast } = useToastContext();
+  const localize = useLocalize();
+
+  const { mutateAsync } = useTagConversationMutation(conversation?.conversationId ?? '');
+  const handleSubmit = useCallback(
+    async (tag: string): Promise<void> => {
+      if (tags !== undefined && conversation?.conversationId) {
+        const newTags = tags.includes(tag) ? tags.filter((t) => t !== tag) : [...tags, tag];
+        await mutateAsync(
+          {
+            conversationId: conversation.conversationId,
+            tags: newTags,
+          },
+          {
+            onSuccess: (newTags: string[]) => {
+              setTags(newTags);
+              setConversation({ ...conversation, tags: newTags });
+            },
+            onError: () => {
+              showToast({
+                message: 'Error adding bookmark',
+                severity: NotificationSeverity.ERROR,
+              });
+            },
+          },
+        );
+      }
+    },
+    [tags, conversation],
+  );
+
+  return (
+    <BookmarkItems
+      tags={tags}
+      handleSubmit={handleSubmit}
+      header={
+        <div>
+          <BookmarkEditDialog
+            conversation={conversation}
+            tags={tags}
+            setTags={setTags}
+            trigger={
+              <div
+                role="menuitem"
+                className="group m-1.5 flex cursor-pointer gap-2 rounded px-1 !pr-3.5 pb-2.5 pt-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"
+                tabIndex={-1}
+              >
+                <div className="flex grow items-center justify-between gap-2">
+                  <div className="flex items-center gap-2">
+                    <BookmarkPlusIcon className="size-4" />
+                    <div className="break-all">{localize('com_ui_bookmarks_new')}</div>
+                  </div>
+                </div>
+              </div>
+            }
+          />
+        </div>
+      }
+    />
+  );
+};