🔖 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
2025-12-17 17:00:15 +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/SidePanel/Bookmarks/BookmarkTableRow.tsx
+++ b/client/src/components/SidePanel/Bookmarks/BookmarkTableRow.tsx
@ -0,0 +1,135 @@
+import { useRef } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import type { FC } from 'react';
+import type { Identifier, XYCoord } from 'dnd-core';
+import type { TConversationTag } from 'librechat-data-provider';
+import { DeleteBookmarkButton, EditBookmarkButton } from '~/components/Bookmarks';
+import { useConversationTagMutation } from '~/data-provider';
+import { NotificationSeverity } from '~/common';
+import { useToastContext } from '~/Providers';
+import { useLocalize } from '~/hooks';
+import { cn } from '~/utils';
+
+export const ItemTypes = {
+  CARD: 'card',
+};
+
+export interface BookmarkItemProps {
+  position: number;
+  moveRow: (dragIndex: number, hoverIndex: number) => void;
+  row: TConversationTag;
+}
+
+interface DragItem {
+  index: number;
+  id: string;
+  type: string;
+}
+
+const BookmarkTableRow: FC<BookmarkItemProps> = ({ position, moveRow, row, ...rest }) => {
+  const ref = useRef<HTMLTableRowElement>(null);
+
+  const mutation = useConversationTagMutation(row.tag);
+  const localize = useLocalize();
+  const { showToast } = useToastContext();
+
+  const handleDrop = (item: DragItem) => {
+    const data = {
+      ...row,
+      position: item.index,
+    };
+    mutation.mutate(data, {
+      onError: () => {
+        showToast({
+          message: localize('com_endpoint_preset_save_error'),
+          severity: NotificationSeverity.ERROR,
+        });
+      },
+    });
+  };
+
+  const [{ handlerId }, drop] = useDrop<DragItem, void, { handlerId: Identifier | null }>({
+    accept: ItemTypes.CARD,
+    collect(monitor) {
+      return {
+        handlerId: monitor.getHandlerId(),
+      };
+    },
+    drop(item: DragItem, monitor) {
+      handleDrop(item);
+    },
+    hover(item: DragItem, monitor) {
+      if (!ref.current) {
+        return;
+      }
+      const dragIndex = item.index;
+      const hoverIndex = position;
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+
+      const hoverBoundingRect = ref.current?.getBoundingClientRect();
+
+      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+
+      const clientOffset = monitor.getClientOffset();
+
+      const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
+
+      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+        return;
+      }
+      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+        return;
+      }
+
+      moveRow(dragIndex, hoverIndex);
+
+      item.index = hoverIndex;
+    },
+  });
+
+  const [{ isDragging }, drag] = useDrag({
+    type: ItemTypes.CARD,
+    item: () => {
+      return { id: row.tag, index: position };
+    },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  if (position > 0) {
+    drag(drop(ref));
+  }
+
+  return (
+    <tr
+      className={cn(
+        'group cursor-pointer gap-2 rounded text-sm hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5',
+        isDragging ? 'opacity-0' : 'opacity-100',
+      )}
+      key={row.tag}
+      ref={ref}
+      data-handler-id={handlerId}
+      role="menuitem"
+      tabIndex={-1}
+      {...rest}
+    >
+      <td className="w-96 py-2 pl-6 pr-3">{row.tag}</td>
+      <td className={cn('w-28 py-2 pl-4 pr-3 sm:pl-6')}>
+        <span className="py-1">{row.count}</span>
+      </td>
+      <td className="flex-grow py-2 pl-4 pr-4 sm:pl-6">
+        {position > 0 && (
+          <div className="flex w-full items-center justify-end gap-2 py-1 text-gray-400">
+            <EditBookmarkButton bookmark={row} />
+            <DeleteBookmarkButton bookmark={row.tag} />
+          </div>
+        )}
+      </td>
+    </tr>
+  );
+};
+
+export default BookmarkTableRow;