🔖 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-19 00:36:12 +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/BookmarkMenu.tsx
+++ b/client/src/components/Chat/Menus/BookmarkMenu.tsx
@ -0,0 +1,134 @@
+import { useEffect, useState, type FC } from 'react';
+import { useRecoilValue } from 'recoil';
+import { useLocation } from 'react-router-dom';
+import { TConversation } from 'librechat-data-provider';
+import { Content, Portal, Root, Trigger } from '@radix-ui/react-popover';
+import { BookmarkFilledIcon, BookmarkIcon } from '@radix-ui/react-icons';
+import { useConversationTagsQuery, useTagConversationMutation } from '~/data-provider';
+import { BookmarkMenuItems } from './Bookmarks/BookmarkMenuItems';
+import { BookmarkContext } from '~/Providers/BookmarkContext';
+import { Spinner } from '~/components';
+import { useLocalize } from '~/hooks';
+import { cn } from '~/utils';
+import store from '~/store';
+
+const SAVED_TAG = 'Saved';
+const BookmarkMenu: FC = () => {
+  const localize = useLocalize();
+  const location = useLocation();
+
+  const activeConvo = useRecoilValue(store.conversationByIndex(0));
+
+  const globalConvo = useRecoilValue(store.conversation) ?? ({} as TConversation);
+  const [tags, setTags] = useState<string[]>();
+
+  const [open, setIsOpen] = useState(false);
+  const [conversation, setConversation] = useState<TConversation>();
+
+  let thisConversation: TConversation | null | undefined;
+  if (location.state?.from?.pathname.includes('/chat')) {
+    thisConversation = globalConvo;
+  } else {
+    thisConversation = activeConvo;
+  }
+
+  const { mutateAsync, isLoading } = useTagConversationMutation(
+    thisConversation?.conversationId ?? '',
+  );
+
+  const { data } = useConversationTagsQuery();
+  useEffect(() => {
+    if (
+      (!conversation && thisConversation) ||
+      (conversation &&
+        thisConversation &&
+        conversation.conversationId !== thisConversation.conversationId)
+    ) {
+      setConversation(thisConversation);
+      setTags(thisConversation.tags ?? []);
+    }
+    if (tags === undefined && conversation) {
+      setTags(conversation.tags ?? []);
+    }
+  }, [thisConversation, conversation, tags]);
+
+  const isActiveConvo =
+    thisConversation &&
+    thisConversation.conversationId &&
+    thisConversation.conversationId !== 'new' &&
+    thisConversation.conversationId !== 'search';
+
+  if (!isActiveConvo) {
+    return <></>;
+  }
+
+  const onOpenChange = async (open: boolean) => {
+    if (!open) {
+      setIsOpen(open);
+      return;
+    }
+    if (open && tags && tags.length > 0) {
+      setIsOpen(open);
+    } else {
+      if (thisConversation && thisConversation.conversationId) {
+        await mutateAsync({
+          conversationId: thisConversation.conversationId,
+          tags: [SAVED_TAG],
+        });
+        setTags([SAVED_TAG]);
+        setConversation({ ...thisConversation, tags: [SAVED_TAG] });
+      }
+    }
+  };
+
+  return (
+    <Root open={open} onOpenChange={onOpenChange}>
+      <Trigger asChild>
+        <button
+          className={cn(
+            'pointer-cursor relative flex flex-col rounded-md border border-gray-100 bg-white text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-gray-700 dark:bg-gray-800 sm:text-sm',
+            'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-gray-700 dark:radix-state-open:bg-gray-700',
+            'z-50 flex h-[40px] min-w-4 flex-none items-center justify-center px-3 focus:ring-0 focus:ring-offset-0',
+          )}
+          title={localize('com_ui_bookmarks')}
+        >
+          {isLoading ? (
+            <Spinner />
+          ) : tags && tags.length > 0 ? (
+            <BookmarkFilledIcon className="icon-sm" />
+          ) : (
+            <BookmarkIcon className="icon-sm" />
+          )}
+        </button>
+      </Trigger>
+      <Portal>
+        <Content
+          className={cn(
+            'grid w-full',
+            'mt-2 min-w-[240px] overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-700 dark:text-white',
+            'max-h-[500px]',
+          )}
+          side="bottom"
+          align="start"
+        >
+          {data && conversation && (
+            // Display all bookmarks registered by the user and highlight the tags of the currently selected conversation
+            <BookmarkContext.Provider value={{ bookmarks: data }}>
+              <BookmarkMenuItems
+                // Currently selected conversation
+                conversation={conversation}
+                setConversation={setConversation}
+                // Tags in the conversation
+                tags={tags ?? []}
+                // Update tags in the conversation
+                setTags={setTags}
+              />
+            </BookmarkContext.Provider>
+          )}
+        </Content>
+      </Portal>
+    </Root>
+  );
+};
+
+export default BookmarkMenu;