🔖 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

client/src/components/Chat/Header.tsx

@@ -6,6 +6,7 @@ import type { ContextType } from '~/common';
 import { EndpointsMenu, ModelSpecsMenu, PresetsMenu, HeaderNewChat } from './Menus';
 import ExportAndShareMenu from './ExportAndShareMenu';
 import HeaderOptions from './Input/HeaderOptions';
+import BookmarkMenu from './Menus/BookmarkMenu';
 import AddMultiConvo from './AddMultiConvo';
 import { useMediaQuery } from '~/hooks';
 
@@ -37,6 +38,7 @@ export default function Header() {
               className="pl-0"
             />
           )}
+          <BookmarkMenu />
           <AddMultiConvo />
         </div>
         {!isSmallScreen && (

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;

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>
+      }
+    />
+  );
+};