🔖 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/Bookmarks/BookmarkEditDialog.tsx

@@ -0,0 +1,69 @@
+import React, { useRef, useState } from 'react';
+import { DialogTrigger } from '@radix-ui/react-dialog';
+import { TConversationTag, TConversation } from 'librechat-data-provider';
+import DialogTemplate from '~/components/ui/DialogTemplate';
+import { Dialog, DialogButton } from '~/components/ui/';
+import BookmarkForm from './BookmarkForm';
+import { useLocalize } from '~/hooks';
+import { Spinner } from '../svg';
+
+type BookmarkEditDialogProps = {
+  bookmark?: TConversationTag;
+  conversation?: TConversation;
+  tags?: string[];
+  setTags?: (tags: string[]) => void;
+  trigger: React.ReactNode;
+};
+const BookmarkEditDialog = ({
+  bookmark,
+  conversation,
+  tags,
+  setTags,
+  trigger,
+}: BookmarkEditDialogProps) => {
+  const localize = useLocalize();
+  const [isLoading, setIsLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const handleSubmitForm = () => {
+    if (formRef.current) {
+      formRef.current.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+      <DialogTemplate
+        title="Bookmark"
+        className="w-11/12 sm:w-1/4"
+        showCloseButton={false}
+        main={
+          <BookmarkForm
+            conversation={conversation}
+            onOpenChange={setOpen}
+            setIsLoading={setIsLoading}
+            bookmark={bookmark}
+            formRef={formRef}
+            setTags={setTags}
+            tags={tags}
+          />
+        }
+        buttons={
+          <div className="mb-6 md:mb-2">
+            <DialogButton
+              disabled={isLoading}
+              onClick={handleSubmitForm}
+              className="bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600"
+            >
+              {isLoading ? <Spinner /> : localize('com_ui_save')}
+            </DialogButton>
+          </div>
+        }
+      />
+    </Dialog>
+  );
+};
+
+export default BookmarkEditDialog;

client/src/components/Bookmarks/BookmarkForm.tsx

@@ -0,0 +1,195 @@
+import React, { useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import type {
+  TConversationTag,
+  TConversation,
+  TConversationTagRequest,
+} from 'librechat-data-provider';
+import { cn, removeFocusOutlines, defaultTextProps } from '~/utils/';
+import { useBookmarkContext } from '~/Providers/BookmarkContext';
+import { useConversationTagMutation } from '~/data-provider';
+import { Checkbox, Label, TextareaAutosize } from '~/components/ui/';
+import { NotificationSeverity } from '~/common';
+import { useToastContext } from '~/Providers';
+import { useLocalize } from '~/hooks';
+
+type TBookmarkFormProps = {
+  bookmark?: TConversationTag;
+  conversation?: TConversation;
+  onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
+  formRef: React.RefObject<HTMLFormElement>;
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  tags?: string[];
+  setTags?: (tags: string[]) => void;
+};
+const BookmarkForm = ({
+  bookmark,
+  conversation,
+  onOpenChange,
+  formRef,
+  setIsLoading,
+  tags,
+  setTags,
+}: TBookmarkFormProps) => {
+  const { showToast } = useToastContext();
+  const localize = useLocalize();
+  const mutation = useConversationTagMutation(bookmark?.tag);
+  const { bookmarks } = useBookmarkContext();
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    getValues,
+    control,
+    formState: { errors },
+  } = useForm<TConversationTagRequest>({
+    defaultValues: {
+      tag: bookmark?.tag || '',
+      description: bookmark?.description || '',
+      conversationId: conversation?.conversationId || '',
+      addToConversation: conversation ? true : false,
+    },
+  });
+
+  useEffect(() => {
+    if (bookmark) {
+      setValue('tag', bookmark.tag || '');
+      setValue('description', bookmark.description || '');
+    }
+  }, [bookmark, setValue]);
+
+  const onSubmit = (data: TConversationTagRequest) => {
+    if (mutation.isLoading) {
+      return;
+    }
+    if (data.tag === bookmark?.tag && data.description === bookmark?.description) {
+      return;
+    }
+
+    setIsLoading(true);
+    mutation.mutate(data, {
+      onSuccess: () => {
+        showToast({
+          message: bookmark
+            ? localize('com_ui_bookmarks_update_success')
+            : localize('com_ui_bookmarks_create_success'),
+        });
+        setIsLoading(false);
+        onOpenChange(false);
+        if (setTags && data.addToConversation) {
+          const newTags = [...(tags || []), data.tag].filter(
+            (tag) => tag !== undefined,
+          ) as string[];
+          setTags(newTags);
+        }
+      },
+      onError: () => {
+        showToast({
+          message: bookmark
+            ? localize('com_ui_bookmarks_update_error')
+            : localize('com_ui_bookmarks_create_error'),
+          severity: NotificationSeverity.ERROR,
+        });
+        setIsLoading(false);
+      },
+    });
+  };
+
+  return (
+    <form
+      ref={formRef}
+      className="mt-6"
+      aria-label="Bookmark form"
+      method="POST"
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <div className="flex w-full flex-col items-center gap-2">
+        <div className="grid w-full items-center gap-2">
+          <Label htmlFor="bookmark-tag" className="text-left text-sm font-medium">
+            {localize('com_ui_bookmarks_title')}
+          </Label>
+          <input
+            type="text"
+            id="bookmark-tag"
+            aria-label="Bookmark"
+            {...register('tag', {
+              required: 'tag is required',
+              maxLength: {
+                value: 128,
+                message: localize('com_auth_password_max_length'),
+              },
+              validate: (value) => {
+                return (
+                  value === bookmark?.tag ||
+                  bookmarks.every((bookmark) => bookmark.tag !== value) ||
+                  'tag must be unique'
+                );
+              },
+            })}
+            aria-invalid={!!errors.tag}
+            className={cn(
+              defaultTextProps,
+              'flex h-10 max-h-10 w-full resize-none border-gray-100 px-3 py-2 dark:border-gray-600',
+              removeFocusOutlines,
+            )}
+            placeholder=" "
+          />
+          {errors.tag && <span className="text-sm text-red-500">{errors.tag.message}</span>}
+        </div>
+
+        <div className="grid w-full items-center gap-2">
+          <Label htmlFor="bookmark-description" className="text-left text-sm font-medium">
+            {localize('com_ui_bookmarks_description')}
+          </Label>
+          <TextareaAutosize
+            {...register('description', {
+              maxLength: {
+                value: 1048,
+                message: 'Maximum 1048 characters',
+              },
+            })}
+            id="bookmark-description"
+            disabled={false}
+            className={cn(
+              defaultTextProps,
+              'flex max-h-[138px] min-h-[100px] w-full resize-none px-3 py-2',
+            )}
+          />
+        </div>
+        {conversation && (
+          <div className="flex w-full items-center">
+            <Controller
+              name="addToConversation"
+              control={control}
+              render={({ field }) => (
+                <Checkbox
+                  {...field}
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                  className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
+                  value={field?.value?.toString()}
+                />
+              )}
+            />
+            <label
+              className="form-check-label text-token-text-primary w-full cursor-pointer"
+              htmlFor="addToConversation"
+              onClick={() =>
+                setValue('addToConversation', !getValues('addToConversation'), {
+                  shouldDirty: true,
+                })
+              }
+            >
+              <div className="flex select-none items-center">
+                {localize('com_ui_bookmarks_add_to_conversation')}
+              </div>
+            </label>
+          </div>
+        )}
+      </div>
+    </form>
+  );
+};
+
+export default BookmarkForm;

client/src/components/Bookmarks/BookmarkItem.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { BookmarkFilledIcon, BookmarkIcon } from '@radix-ui/react-icons';
+import type { FC } from 'react';
+import { Spinner } from '~/components/svg';
+import { cn } from '~/utils';
+
+type MenuItemProps = {
+  tag: string;
+  selected: boolean;
+  count?: number;
+  handleSubmit: (tag: string) => Promise<void>;
+  icon?: React.ReactNode;
+  highlightSelected?: boolean;
+};
+
+const BookmarkItem: FC<MenuItemProps> = ({
+  tag,
+  selected,
+  count,
+  handleSubmit,
+  icon,
+  highlightSelected,
+  ...rest
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const clickHandler = async () => {
+    setIsLoading(true);
+    await handleSubmit(tag);
+    setIsLoading(false);
+  };
+  return (
+    <div
+      role="menuitem"
+      className={cn(
+        'group m-1.5 flex cursor-pointer gap-2 rounded px-1 py-2.5 !pr-3 text-sm !opacity-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50',
+        'hover:bg-black/5 dark:hover:bg-white/5',
+        highlightSelected && selected && 'bg-black/5 dark:bg-white/5',
+      )}
+      tabIndex={-1}
+      {...rest}
+      onClick={clickHandler}
+    >
+      <div className="flex grow items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          {icon ? (
+            icon
+          ) : isLoading ? (
+            <Spinner className="size-4" />
+          ) : selected ? (
+            <BookmarkFilledIcon className="size-4" />
+          ) : (
+            <BookmarkIcon className="size-4" />
+          )}
+          <div className="break-all">{tag}</div>
+        </div>
+
+        {count !== undefined && (
+          <div className="flex items-center justify-end">
+            <span
+              className={cn(
+                'ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200',
+                'dark:bg-gray-800 dark:text-white dark:ring-gray-100/50',
+              )}
+              aria-hidden="true"
+            >
+              {count}
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+export default BookmarkItem;

client/src/components/Bookmarks/BookmarkItems.tsx

@@ -0,0 +1,30 @@
+import type { FC } from 'react';
+import { useBookmarkContext } from '~/Providers/BookmarkContext';
+import BookmarkItem from './BookmarkItem';
+
+const BookmarkItems: FC<{
+  tags: string[];
+  handleSubmit: (tag: string) => Promise<void>;
+  header: React.ReactNode;
+  highlightSelected?: boolean;
+}> = ({ tags, handleSubmit, header, highlightSelected }) => {
+  const { bookmarks } = useBookmarkContext();
+  return (
+    <>
+      {header}
+      <div className="my-1.5 h-px bg-black/10 dark:bg-white/10" role="none" />
+      {bookmarks.length > 0 &&
+        bookmarks.map((bookmark) => (
+          <BookmarkItem
+            key={bookmark.tag}
+            tag={bookmark.tag}
+            selected={tags.includes(bookmark.tag)}
+            count={bookmark.count}
+            handleSubmit={handleSubmit}
+            highlightSelected={highlightSelected}
+          />
+        ))}
+    </>
+  );
+};
+export default BookmarkItems;

client/src/components/Bookmarks/DeleteBookmarkButton.tsx

@@ -0,0 +1,49 @@
+import { useCallback } from 'react';
+import type { FC } from 'react';
+import { useDeleteConversationTagMutation } from '~/data-provider';
+import TooltipIcon from '~/components/ui/TooltipIcon';
+import { NotificationSeverity } from '~/common';
+import { useToastContext } from '~/Providers';
+import { TrashIcon } from '~/components/svg';
+import { Label } from '~/components/ui';
+import { useLocalize } from '~/hooks';
+
+const DeleteBookmarkButton: FC<{ bookmark: string }> = ({ bookmark }) => {
+  const localize = useLocalize();
+  const { showToast } = useToastContext();
+
+  const deleteBookmarkMutation = useDeleteConversationTagMutation({
+    onSuccess: () => {
+      showToast({
+        message: localize('com_ui_bookmarks_delete_success'),
+      });
+    },
+    onError: () => {
+      showToast({
+        message: localize('com_ui_bookmarks_delete_error'),
+        severity: NotificationSeverity.ERROR,
+      });
+    },
+  });
+
+  const confirmDelete = useCallback(async () => {
+    await deleteBookmarkMutation.mutateAsync(bookmark);
+  }, [bookmark, deleteBookmarkMutation]);
+
+  return (
+    <TooltipIcon
+      disabled={false}
+      appendLabel={false}
+      title="Delete Bookmark"
+      confirmMessage={
+        <Label htmlFor="bookmark" className="text-left text-sm font-medium">
+          {localize('com_ui_bookmark_delete_confirm')} : {bookmark}
+        </Label>
+      }
+      confirm={confirmDelete}
+      className="hover:text-gray-300 focus-visible:bg-gray-100 focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 dark:focus-visible:bg-gray-600"
+      icon={<TrashIcon className="size-4" />}
+    />
+  );
+};
+export default DeleteBookmarkButton;

client/src/components/Bookmarks/EditBookmarkButton.tsx

@@ -0,0 +1,33 @@
+import type { FC } from 'react';
+import type { TConversationTag } from 'librechat-data-provider';
+import BookmarkEditDialog from './BookmarkEditDialog';
+import { EditIcon } from '~/components/svg';
+import { useLocalize } from '~/hooks';
+
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '~/components/ui';
+const EditBookmarkButton: FC<{ bookmark: TConversationTag }> = ({ bookmark }) => {
+  const localize = useLocalize();
+  return (
+    <BookmarkEditDialog
+      bookmark={bookmark}
+      trigger={
+        <button className="size-4 hover:text-gray-300 focus-visible:bg-gray-100 focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 dark:focus-visible:bg-gray-600">
+          <TooltipProvider delayDuration={250}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span>
+                  <EditIcon />
+                </span>
+              </TooltipTrigger>
+              <TooltipContent side="top" sideOffset={0}>
+                {localize('com_ui_edit')}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </button>
+      }
+    />
+  );
+};
+
+export default EditBookmarkButton;

client/src/components/Bookmarks/index.ts

@@ -0,0 +1,6 @@
+export { default as DeleteBookmarkButton } from './DeleteBookmarkButton';
+export { default as EditBookmarkButton } from './EditBookmarkButton';
+export { default as BookmarkEditDialog } from './BookmarkEditDialog';
+export { default as BookmarkItems } from './BookmarkItems';
+export { default as BookmarkItem } from './BookmarkItem';
+export { default as BookmarkForm } from './BookmarkForm';