henricook · May 25, 2025
diff --git a/api/models/Conversation.js b/api/models/Conversation.js
@@ -112,6 +112,22 @@ module.exports = {
         update.expiredAt = null;
       }
 
+      // Auto-assign pinnedOrder when pinning a conversation
+      if (update.isPinned === true && update.pinnedOrder === undefined) {
+        const maxOrder = await Conversation.findOne(
+          { user: req.user.id, isPinned: true },
+          'pinnedOrder',
+        )
+          .sort({ pinnedOrder: -1 })
+          .lean();
+        update.pinnedOrder = (maxOrder?.pinnedOrder ?? -1) + 1;
+      }
+
+      // Clear pinnedOrder when unpinning
+      if (update.isPinned === false) {
+        update.pinnedOrder = undefined;
+      }
+
       /** @type {{ $set: Partial<TConversation>; $unset?: Record<keyof TConversation, number> }} */
       const updateOperation = { $set: update };
       if (metadata && metadata.unsetFields && Object.keys(metadata.unsetFields).length > 0) {
@@ -197,7 +213,7 @@ module.exports = {
     try {
       const convos = await Conversation.find(query)
         .select(
-          'conversationId endpoint title createdAt updatedAt user model agent_id assistant_id spec iconURL',
+          'conversationId endpoint title createdAt updatedAt user model agent_id assistant_id spec iconURL tags isPinned pinnedOrder',
         )
         .sort({ updatedAt: order === 'asc' ? 1 : -1 })
         .limit(limit + 1)

diff --git a/api/server/routes/convos.js b/api/server/routes/convos.js
@@ -10,6 +10,7 @@ const {
   configMiddleware,
 } = require('~/server/middleware');
 const { getConvosByCursor, deleteConvos, getConvo, saveConvo } = require('~/models/Conversation');
+const { Conversation } = require('~/db/models');
 const { forkConversation, duplicateConversation } = require('~/server/utils/import/fork');
 const { storage, importFileFilter } = require('~/server/routes/files/multer');
 const { deleteAllSharedLinks, deleteConvoSharedLink } = require('~/models');
@@ -239,4 +240,42 @@ router.post('/duplicate', async (req, res) => {
   }
 });
 
+/**
+ * PUT /reorder-pinned
+ * Reorders pinned conversations by updating their pinnedOrder values
+ * @route PUT /reorder-pinned
+ * @param {string[]} req.body.conversationIds - Array of conversation IDs in the new order
+ * @returns {object} 200 - success response - application/json
+ */
+router.put('/reorder-pinned', async (req, res) => {
+  const { conversationIds } = req.body;
+
+  if (!Array.isArray(conversationIds)) {
+    return res.status(400).json({ error: 'conversationIds must be an array' });
+  }
+
+  try {
+    const bulkOps = conversationIds.map((conversationId, index) => ({
+      updateOne: {
+        filter: { conversationId, user: req.user.id, isPinned: true },
+        update: { pinnedOrder: index },
+      },
+    }));
+
+    const result = await Conversation.bulkWrite(bulkOps);
+
+    if (result.modifiedCount === 0) {
+      return res.status(404).json({ error: 'No pinned conversations found to reorder' });
+    }
+
+    res.status(200).json({
+      message: 'Pinned conversations reordered successfully',
+      modifiedCount: result.modifiedCount,
+    });
+  } catch (error) {
+    logger.error('Error reordering pinned conversations', error);
+    res.status(500).send('Error reordering pinned conversations');
+  }
+});
+
 module.exports = router;
diff --git a/client/src/components/Conversations/Conversations.tsx b/client/src/components/Conversations/Conversations.tsx
@@ -1,10 +1,11 @@
-import { useMemo, memo, type FC, useCallback } from 'react';
+import { type FC, memo, useCallback, useMemo } from 'react';
 import throttle from 'lodash/throttle';
 import { Spinner, useMediaQuery } from '@librechat/client';
-import { List, AutoSizer, CellMeasurer, CellMeasurerCache } from 'react-virtualized';
+import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
 import { TConversation } from 'librechat-data-provider';
-import { useLocalize, TranslationKeys } from '~/hooks';
-import { groupConversationsByDate } from '~/utils';
+import { TranslationKeys, useLocalize } from '~/hooks';
+import { dateKeys, groupConversationsByDate } from '~/utils';
+import PinnedConversations from './PinnedConversations';
 import Convo from './Convo';
 
 interface ConversationsProps {
@@ -90,9 +91,27 @@ const Conversations: FC<ConversationsProps> = ({
     [filteredConversations],
   );
 
+  const { pinnedConversations, nonPinnedGroupedConversations } = useMemo(() => {
+    const pinned: TConversation[] = [];
+    const nonPinned: [string, TConversation[]][] = [];
+
+    groupedConversations.forEach(([groupName, convos]) => {
+      if (groupName === dateKeys.pinned) {
+        pinned.push(...convos);
+      } else {
+        nonPinned.push([groupName, convos]);
+      }
+    });
+
+    return {
+      pinnedConversations: pinned,
+      nonPinnedGroupedConversations: nonPinned,
+    };
+  }, [groupedConversations]);
+
   const flattenedItems = useMemo(() => {
     const items: FlattenedItem[] = [];
-    groupedConversations.forEach(([groupName, convos]) => {
+    nonPinnedGroupedConversations.forEach(([groupName, convos]) => {
       items.push({ type: 'header', groupName });
       items.push(...convos.map((convo) => ({ type: 'convo' as const, convo })));
     });
@@ -101,7 +120,7 @@ const Conversations: FC<ConversationsProps> = ({
       items.push({ type: 'loading' } as any);
     }
     return items;
-  }, [groupedConversations, isLoading]);
+  }, [nonPinnedGroupedConversations, isLoading]);
 
   const cache = useMemo(
     () =>
@@ -187,26 +206,33 @@ const Conversations: FC<ConversationsProps> = ({
           <span className="ml-2 text-text-primary">{localize('com_ui_loading')}</span>
         </div>
       ) : (
-        <div className="flex-1">
-          <AutoSizer>
-            {({ width, height }) => (
-              <List
-                ref={containerRef as React.RefObject<List>}
-                width={width}
-                height={height}
-                deferredMeasurementCache={cache}
-                rowCount={flattenedItems.length}
-                rowHeight={getRowHeight}
-                rowRenderer={rowRenderer}
-                overscanRowCount={10}
-                className="outline-none"
-                style={{ outline: 'none' }}
-                aria-label="Conversations"
-                onRowsRendered={handleRowsRendered}
-                tabIndex={-1}
-              />
-            )}
-          </AutoSizer>
+        <div className="flex flex-1 flex-col">
+          {/* Pinned Conversations */}
+          <PinnedConversations pinnedConversations={pinnedConversations} toggleNav={toggleNav} />
+
+          {/* Regular Conversations */}
+          <div className="flex-1">
+            <AutoSizer>
+              {({ width, height }) => (
+                <List
+                  ref={containerRef as React.RefObject<List>}
+                  width={width}
+                  height={height}
+                  deferredMeasurementCache={cache}
+                  rowCount={flattenedItems.length}
+                  rowHeight={getRowHeight}
+                  rowRenderer={rowRenderer}
+                  overscanRowCount={10}
+                  className="outline-none"
+                  style={{ outline: 'none' }}
+                  role="list"
+                  aria-label="Conversations"
+                  onRowsRendered={handleRowsRendered}
+                  tabIndex={-1}
+                />
+              )}
+            </AutoSizer>
+          </div>
         </div>
       )}
     </div>

diff --git a/client/src/components/Conversations/Convo.tsx b/client/src/components/Conversations/Convo.tsx
@@ -127,6 +127,7 @@ export default function Conversation({ conversation, retainView, toggleNav }: Co
     conversationId,
     isPopoverActive,
     setIsPopoverActive,
+    conversation,
   };
 
   return (

diff --git a/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx b/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
@@ -1,13 +1,15 @@
-import { useState, useId, useRef, memo, useCallback, useMemo } from 'react';
+import type { MouseEvent } from 'react';
+import { memo, useCallback, useId, useMemo, useRef, useState } from 'react';
 import * as Menu from '@ariakit/react/menu';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { DropdownPopup, Spinner, useToastContext } from '@librechat/client';
-import { Ellipsis, Share2, Copy, Archive, Pen, Trash } from 'lucide-react';
-import type { MouseEvent } from 'react';
+import { Archive, Copy, Ellipsis, Pen, Pin, PinOff, Share2, Trash } from 'lucide-react';
+import type { TConversation } from 'librechat-data-provider';
 import {
+  useArchiveConvoMutation,
   useDuplicateConversationMutation,
   useGetStartupConfig,
-  useArchiveConvoMutation,
+  usePinConversationMutation,
 } from '~/data-provider';
 import { useLocalize, useNavigateToConvo, useNewConvo } from '~/hooks';
 import { NotificationSeverity } from '~/common';
@@ -24,6 +26,7 @@ function ConvoOptions({
   isPopoverActive,
   setIsPopoverActive,
   isActiveConvo,
+  conversation,
 }: {
   conversationId: string | null;
   title: string | null;
@@ -32,6 +35,7 @@ function ConvoOptions({
   isPopoverActive: boolean;
   setIsPopoverActive: React.Dispatch<React.SetStateAction<boolean>>;
   isActiveConvo: boolean;
+  conversation?: TConversation;
 }) {
   const localize = useLocalize();
   const { index } = useChatContext();
@@ -49,6 +53,7 @@ function ConvoOptions({
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
 
   const archiveConvoMutation = useArchiveConvoMutation();
+  const pinConvoMutation = usePinConversationMutation();
 
   const duplicateConversation = useDuplicateConversationMutation({
     onSuccess: (data) => {
@@ -75,6 +80,7 @@ function ConvoOptions({
 
   const isDuplicateLoading = duplicateConversation.isLoading;
   const isArchiveLoading = archiveConvoMutation.isLoading;
+  const isPinned = conversation?.isPinned ?? false;
 
   const handleShareClick = useCallback(() => {
     setShowShareDialog(true);
@@ -122,6 +128,42 @@ function ConvoOptions({
     localize,
   ]);
 
+  const handlePinClick = useCallback(() => {
+    const convoId = conversationId ?? '';
+    if (!convoId) {
+      return;
+    }
+
+    pinConvoMutation.mutate(
+      { conversationId: convoId, isPinned: !isPinned },
+      {
+        onSuccess: () => {
+          retainView();
+          setIsPopoverActive(false);
+          showToast({
+            message: isPinned ? localize('com_ui_unpinned') : localize('com_ui_pinned'),
+            status: 'success',
+          });
+        },
+        onError: () => {
+          showToast({
+            message: localize('com_ui_pin_error'),
+            severity: NotificationSeverity.ERROR,
+            showIcon: true,
+          });
+        },
+      },
+    );
+  }, [
+    conversationId,
+    isPinned,
+    pinConvoMutation,
+    retainView,
+    setIsPopoverActive,
+    showToast,
+    localize,
+  ]);
+
   const handleDuplicateClick = useCallback(() => {
     duplicateConversation.mutate({
       conversationId: conversationId ?? '',
@@ -139,6 +181,15 @@ function ConvoOptions({
         ref: shareButtonRef,
         render: (props) => <button {...props} />,
       },
+      {
+        label: isPinned ? localize('com_ui_unpin') : localize('com_ui_pin'),
+        onClick: handlePinClick,
+        icon: isPinned ? (
+          <PinOff className="icon-sm mr-2 text-text-primary" />
+        ) : (
+          <Pin className="icon-sm mr-2 text-text-primary" />
+        ),
+      },
       {
         label: localize('com_ui_rename'),
         onClick: renameHandler,
@@ -177,6 +228,8 @@ function ConvoOptions({
       localize,
       handleShareClick,
       startupConfig,
+      isPinned,
+      handlePinClick,
       renameHandler,
       handleDuplicateClick,
       isDuplicateLoading,