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

@@ -0,0 +1,59 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import type { ConversationTagsResponse, TConversationTag } from 'librechat-data-provider';
+import { BookmarkContext, useBookmarkContext } from '~/Providers/BookmarkContext';
+import BookmarkTableRow from './BookmarkTableRow';
+import { useLocalize } from '~/hooks';
+import { cn } from '~/utils';
+
+const BookmarkTable = () => {
+  const localize = useLocalize();
+  const [rows, setRows] = useState<ConversationTagsResponse>([]);
+
+  const { bookmarks } = useBookmarkContext();
+  useEffect(() => {
+    setRows(bookmarks?.map((item) => ({ id: item.tag, ...item })) || []);
+  }, [bookmarks]);
+
+  const moveRow = useCallback((dragIndex: number, hoverIndex: number) => {
+    setRows((prevTags: TConversationTag[]) => {
+      const updatedRows = [...prevTags];
+      const [movedRow] = updatedRows.splice(dragIndex, 1);
+      updatedRows.splice(hoverIndex, 0, movedRow);
+      return updatedRows;
+    });
+  }, []);
+
+  const renderRow = useCallback((row: TConversationTag, position: number) => {
+    return <BookmarkTableRow key={row.tag} moveRow={moveRow} row={row} position={position} />;
+  }, []);
+
+  return (
+    <BookmarkContext.Provider value={{ bookmarks }}>
+      <div
+        className={cn(
+          'container',
+          'relative h-[300px] overflow-auto',
+          '-mx-4 w-auto ring-1 ring-gray-300 sm:mx-0 sm:rounded-lg',
+        )}
+      >
+        <table className="min-w-full divide-gray-300">
+          <thead className="sticky top-0 z-10 border-b bg-white">
+            <tr className="text-left text-sm font-semibold text-gray-900">
+              <th className="w-96 px-3 py-3.5 pl-6">
+                <div>{localize('com_ui_bookmarks_title')}</div>
+              </th>
+              <th className="w-28 px-3 py-3.5 sm:pl-6">
+                <div>{localize('com_ui_bookmarks_count')}</div>
+              </th>
+
+              <th className="flex-grow px-3 py-3.5 sm:pl-6"> </th>
+            </tr>
+          </thead>
+          <tbody className="text-sm">{rows.map((row, i) => renderRow(row, i))}</tbody>
+        </table>
+      </div>
+    </BookmarkContext.Provider>
+  );
+};
+
+export default BookmarkTable;