🧭 feat: Add a Fisheye Navigation Rail to Search Results

client/src/components/Chat/Messages/SearchMessage.tsx

@@ -1,6 +1,7 @@
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { useAtomValue } from 'jotai';
 import { useRecoilValue } from 'recoil';
+import type { TMessage } from 'librechat-data-provider';
 import type { TMessageProps, TMessageIcon } from '~/common';
 import MinimalHoverButtons from '~/components/Chat/Messages/MinimalHoverButtons';
 import MessageTimestamp from '~/components/Chat/Messages/ui/MessageTimestamp';
@@ -39,7 +40,51 @@ const MessageBody = ({ message, messageLabel, fontSize }) => (
   </div>
 );
 
-export default function SearchMessage({ message }: Pick<TMessageProps, 'message'>) {
+function searchFilesEqual(prev?: TMessage['files'], next?: TMessage['files']) {
+  if (prev === next) {
+    return true;
+  }
+  const prevLen = prev?.length ?? 0;
+  const nextLen = next?.length ?? 0;
+  if (prevLen !== nextLen) {
+    return false;
+  }
+  return prev?.every((file, index) => file.file_id === next?.[index]?.file_id) ?? true;
+}
+
+/**
+ * Field-level comparator for `memo(SearchMessage)`. The virtualized `rowRenderer`
+ * closure and the file-remap `useMemo` in the Search route can hand a fresh
+ * `message` object with identical content on every parent render, so a shallow
+ * compare would defeat the memo — compare only the fields that drive the row.
+ */
+export function areSearchMessagePropsEqual(
+  prev: Pick<TMessageProps, 'message'>,
+  next: Pick<TMessageProps, 'message'>,
+): boolean {
+  const a = prev.message;
+  const b = next.message;
+  if (a === b) {
+    return true;
+  }
+  if (!a || !b) {
+    return a === b;
+  }
+  return (
+    a.messageId === b.messageId &&
+    a.text === b.text &&
+    a.content === b.content &&
+    a.createdAt === b.createdAt &&
+    a.isCreatedByUser === b.isCreatedByUser &&
+    a.sender === b.sender &&
+    a.model === b.model &&
+    a.endpoint === b.endpoint &&
+    a.iconURL === b.iconURL &&
+    searchFilesEqual(a.files, b.files)
+  );
+}
+
+function SearchMessage({ message }: Pick<TMessageProps, 'message'>) {
   const fontSize = useAtomValue(fontSizeAtom);
   const UsernameDisplay = useRecoilValue<boolean>(store.UsernameDisplay);
   const { user } = useAuthContext();
@@ -86,3 +131,5 @@ export default function SearchMessage({ message }: Pick<TMessageProps, 'message'
     </div>
   );
 }
+
+export default memo(SearchMessage, areSearchMessagePropsEqual);