🧠 feat: User Memories for Conversational Context (#7760)

* 🧠 feat: User Memories for Conversational Context chore: mcp typing, use `t` WIP: first pass, Memories UI - Added MemoryViewer component for displaying, editing, and deleting user memories. - Integrated data provider hooks for fetching, updating, and deleting memories. - Implemented pagination and loading states for better user experience. - Created unit tests for MemoryViewer to ensure functionality and interaction with data provider. - Updated translation files to include new UI strings related to memories. chore: move mcp-related files to own directory chore: rename librechat-mcp to librechat-api WIP: first pass, memory processing and data schemas chore: linting in fileSearch.js query description chore: rename librechat-api to @librechat/api across the project WIP: first pass, functional memory agent feat: add MemoryEditDialog and MemoryViewer components for managing user memories - Introduced MemoryEditDialog for editing memory entries with validation and toast notifications. - Updated MemoryViewer to support editing and deleting memories, including pagination and loading states. - Enhanced data provider to handle memory updates with optional original key for better management. - Added new localization strings for memory-related UI elements. feat: add memory permissions management - Implemented memory permissions in the backend, allowing roles to have specific permissions for using, creating, updating, and reading memories. - Added new API endpoints for updating memory permissions associated with roles. - Created a new AdminSettings component for managing memory permissions in the frontend. - Integrated memory permissions into the existing roles and permissions schemas. - Updated the interface to include memory settings and permissions. - Enhanced the MemoryViewer component to conditionally render admin settings based on user roles. - Added localization support for memory permissions in the translation files. feat: move AdminSettings component to a new position in MemoryViewer for better visibility refactor: clean up commented code in MemoryViewer component feat: enhance MemoryViewer with search functionality and improve MemoryEditDialog integration - Added a search input to filter memories in the MemoryViewer component. - Refactored MemoryEditDialog to accept children for better customization. - Updated MemoryViewer to utilize the new EditMemoryButton and DeleteMemoryButton components for editing and deleting memories. - Improved localization support by adding new strings for memory filtering and deletion confirmation. refactor: optimize memory filtering in MemoryViewer using match-sorter - Replaced manual filtering logic with match-sorter for improved search functionality. - Enhanced performance and readability of the filteredMemories computation. feat: enhance MemoryEditDialog with triggerRef and improve updateMemory mutation handling feat: implement access control for MemoryEditDialog and MemoryViewer components refactor: remove commented out code and create runMemory method refactor: rename role based files feat: implement access control for memory usage in AgentClient refactor: simplify checkVisionRequest method in AgentClient by removing commented-out code refactor: make `agents` dir in api package refactor: migrate Azure utilities to TypeScript and consolidate imports refactor: move sanitizeFilename function to a new file and update imports, add related tests refactor: update LLM configuration types and consolidate Azure options in the API package chore: linting chore: import order refactor: replace getLLMConfig with getOpenAIConfig and remove unused LLM configuration file chore: update winston-daily-rotate-file to version 5.0.0 and add object-hash dependency in package-lock.json refactor: move primeResources and optionalChainWithEmptyCheck functions to resources.ts and update imports refactor: move createRun function to a new run.ts file and update related imports fix: ensure safeAttachments is correctly typed as an array of TFile chore: add node-fetch dependency and refactor fetch-related functions into packages/api/utils, removing the old generators file refactor: enhance TEndpointOption type by using Pick to streamline endpoint fields and add new properties for model parameters and client options feat: implement initializeOpenAIOptions function and update OpenAI types for enhanced configuration handling fix: update types due to new TEndpointOption typing fix: ensure safe access to group parameters in initializeOpenAIOptions function fix: remove redundant API key validation comment in initializeOpenAIOptions function refactor: rename initializeOpenAIOptions to initializeOpenAI for consistency and update related documentation refactor: decouple req.body fields and tool loading from initializeAgentOptions chore: linting refactor: adjust column widths in MemoryViewer for improved layout refactor: simplify agent initialization by creating loadAgent function and removing unused code feat: add memory configuration loading and validation functions WIP: first pass, memory processing with config feat: implement memory callback and artifact handling feat: implement memory artifacts display and processing updates feat: add memory configuration options and schema validation for validKeys fix: update MemoryEditDialog and MemoryViewer to handle memory state and display improvements refactor: remove padding from BookmarkTable and MemoryViewer headers for consistent styling WIP: initial tokenLimit config and move Tokenizer to @librechat/api refactor: update mongoMeili plugin methods to use callback for better error handling feat: enhance memory management with token tracking and usage metrics - Added token counting for memory entries to enforce limits and provide usage statistics. - Updated memory retrieval and update routes to include total token usage and limit. - Enhanced MemoryEditDialog and MemoryViewer components to display memory usage and token information. - Refactored memory processing functions to handle token limits and provide feedback on memory capacity. feat: implement memory artifact handling in attachment handler - Enhanced useAttachmentHandler to process memory artifacts when receiving updates. - Introduced handleMemoryArtifact utility to manage memory updates and deletions. - Updated query client to reflect changes in memory state based on incoming data. refactor: restructure web search key extraction logic - Moved the logic for extracting API keys from the webSearchAuth configuration into a dedicated function, getWebSearchKeys. - Updated webSearchKeys to utilize the new function for improved clarity and maintainability. - Prevents build time errors feat: add personalization settings and memory preferences management - Introduced a new Personalization tab in settings to manage user memory preferences. - Implemented API endpoints and client-side logic for updating memory preferences. - Enhanced user interface components to reflect personalization options and memory usage. - Updated permissions to allow users to opt out of memory features. - Added localization support for new settings and messages related to personalization. style: personalization switch class feat: add PersonalizationIcon and align Side Panel UI feat: implement memory creation functionality - Added a new API endpoint for creating memory entries, including validation for key and value. - Introduced MemoryCreateDialog component for user interface to facilitate memory creation. - Integrated token limit checks to prevent exceeding user memory capacity. - Updated MemoryViewer to include a button for opening the memory creation dialog. - Enhanced localization support for new messages related to memory creation. feat: enhance message processing with configurable window size - Updated AgentClient to use a configurable message window size for processing messages. - Introduced messageWindowSize option in memory configuration schema with a default value of 5. - Improved logic for selecting messages to process based on the configured window size. chore: update librechat-data-provider version to 0.7.87 in package.json and package-lock.json chore: remove OpenAPIPlugin and its associated tests chore: remove MIGRATION_README.md as migration tasks are completed ci: fix backend tests chore: remove unused translation keys from localization file chore: remove problematic test file and unused var in AgentClient chore: remove unused import and import directly for JSDoc * feat: add api package build stage in Dockerfile for improved modularity * docs: reorder build steps in contributing guide for clarity
2025-12-19 18:00:15 +01:00 · 2025-06-07 18:52:22 -04:00 · 2025-06-07 18:52:22 -04:00 · 29ef91b4dd
commit 29ef91b4dd
parent cd7dd576c1
170 changed files with 5700 additions and 3632 deletions
--- a/client/src/components/Chat/Messages/Content/ContentParts.tsx
+++ b/client/src/components/Chat/Messages/Content/ContentParts.tsx
@ -9,6 +9,7 @@ import type {
 } from 'librechat-data-provider';
 import { ThinkingButton } from '~/components/Artifacts/Thinking';
 import { MessageContext, SearchContext } from '~/Providers';
+import MemoryArtifacts from './MemoryArtifacts';
 import Sources from '~/components/Web/Sources';
 import useLocalize from '~/hooks/useLocalize';
 import { mapAttachments } from '~/utils/map';
@ -72,6 +73,7 @@ const ContentParts = memo(

      return hasThinkPart && allThinkPartsHaveContent;
    }, [content]);
+
    if (!content) {
      return null;
    }
@ -103,6 +105,7 @@ const ContentParts = memo(
    return (
      <>
        <SearchContext.Provider value={{ searchResults }}>
+          <MemoryArtifacts attachments={attachments} />
          <Sources />
          {hasReasoningParts && (
            <div className="mb-5">
--- a/client/src/components/Chat/Messages/Content/MemoryArtifacts.tsx
+++ b/client/src/components/Chat/Messages/Content/MemoryArtifacts.tsx
@ -0,0 +1,143 @@
+import { Tools } from 'librechat-data-provider';
+import { useState, useRef, useMemo, useLayoutEffect, useEffect } from 'react';
+import type { MemoryArtifact, TAttachment } from 'librechat-data-provider';
+import MemoryInfo from './MemoryInfo';
+import { useLocalize } from '~/hooks';
+import { cn } from '~/utils';
+
+export default function MemoryArtifacts({ attachments }: { attachments?: TAttachment[] }) {
+  const localize = useLocalize();
+  const [showInfo, setShowInfo] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [contentHeight, setContentHeight] = useState<number | undefined>(0);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const prevShowInfoRef = useRef<boolean>(showInfo);
+
+  const memoryArtifacts = useMemo(() => {
+    const result: MemoryArtifact[] = [];
+    for (const attachment of attachments ?? []) {
+      if (attachment?.[Tools.memory] != null) {
+        result.push(attachment[Tools.memory]);
+      }
+    }
+    return result;
+  }, [attachments]);
+
+  useLayoutEffect(() => {
+    if (showInfo !== prevShowInfoRef.current) {
+      prevShowInfoRef.current = showInfo;
+      setIsAnimating(true);
+
+      if (showInfo && contentRef.current) {
+        requestAnimationFrame(() => {
+          if (contentRef.current) {
+            const height = contentRef.current.scrollHeight;
+            setContentHeight(height + 4);
+          }
+        });
+      } else {
+        setContentHeight(0);
+      }
+
+      const timer = setTimeout(() => {
+        setIsAnimating(false);
+      }, 400);
+
+      return () => clearTimeout(timer);
+    }
+  }, [showInfo]);
+
+  useEffect(() => {
+    if (!contentRef.current) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver((entries) => {
+      if (showInfo && !isAnimating) {
+        for (const entry of entries) {
+          if (entry.target === contentRef.current) {
+            setContentHeight(entry.contentRect.height + 4);
+          }
+        }
+      }
+    });
+    resizeObserver.observe(contentRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [showInfo, isAnimating]);
+
+  if (!memoryArtifacts || memoryArtifacts.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className="flex items-center">
+        <div className="inline-block">
+          <button
+            className="outline-hidden my-1 flex items-center gap-1 text-sm font-semibold text-text-secondary-alt transition-colors hover:text-text-primary"
+            type="button"
+            onClick={() => setShowInfo((prev) => !prev)}
+            aria-expanded={showInfo}
+            aria-label={localize('com_ui_memory_updated')}
+          >
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 18 18"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="mb-[-1px]"
+            >
+              <path
+                d="M6 3C4.89543 3 4 3.89543 4 5V13C4 14.1046 4.89543 15 6 15L6 3Z"
+                fill="currentColor"
+              />
+              <path
+                d="M7 3V15H8.18037L8.4899 13.4523C8.54798 13.1619 8.69071 12.8952 8.90012 12.6858L12.2931 9.29289C12.7644 8.82153 13.3822 8.58583 14 8.58578V3.5C14 3.22386 13.7761 3 13.5 3H7Z"
+                fill="currentColor"
+              />
+              <path
+                d="M11.3512 15.5297L9.73505 15.8529C9.38519 15.9229 9.07673 15.6144 9.14671 15.2646L9.46993 13.6484C9.48929 13.5517 9.53687 13.4628 9.60667 13.393L12.9996 10C13.5519 9.44771 14.4473 9.44771 14.9996 10C15.5519 10.5523 15.5519 11.4477 14.9996 12L11.6067 15.393C11.5369 15.4628 11.448 15.5103 11.3512 15.5297Z"
+                fill="currentColor"
+              />
+            </svg>
+            {localize('com_ui_memory_updated')}
+          </button>
+        </div>
+      </div>
+      <div
+        className="relative"
+        style={{
+          height: showInfo ? contentHeight : 0,
+          overflow: 'hidden',
+          transition:
+            'height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
+          opacity: showInfo ? 1 : 0,
+          transformOrigin: 'top',
+          willChange: 'height, opacity',
+          perspective: '1000px',
+          backfaceVisibility: 'hidden',
+          WebkitFontSmoothing: 'subpixel-antialiased',
+        }}
+      >
+        <div
+          className={cn(
+            'overflow-hidden rounded-xl border border-border-light bg-surface-primary-alt shadow-md',
+            showInfo && 'shadow-lg',
+          )}
+          style={{
+            transform: showInfo ? 'translateY(0) scale(1)' : 'translateY(-8px) scale(0.98)',
+            opacity: showInfo ? 1 : 0,
+            transition:
+              'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
+          }}
+        >
+          <div ref={contentRef}>
+            {showInfo && <MemoryInfo key="memory-info" memoryArtifacts={memoryArtifacts} />}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
--- a/client/src/components/Chat/Messages/Content/MemoryInfo.tsx
+++ b/client/src/components/Chat/Messages/Content/MemoryInfo.tsx
@ -0,0 +1,61 @@
+import type { MemoryArtifact } from 'librechat-data-provider';
+import { useLocalize } from '~/hooks';
+
+export default function MemoryInfo({ memoryArtifacts }: { memoryArtifacts: MemoryArtifact[] }) {
+  const localize = useLocalize();
+  if (memoryArtifacts.length === 0) {
+    return null;
+  }
+
+  // Group artifacts by type
+  const updatedMemories = memoryArtifacts.filter((artifact) => artifact.type === 'update');
+  const deletedMemories = memoryArtifacts.filter((artifact) => artifact.type === 'delete');
+
+  if (updatedMemories.length === 0 && deletedMemories.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-4 p-4">
+      {updatedMemories.length > 0 && (
+        <div>
+          <h4 className="mb-2 text-sm font-semibold text-text-primary">
+            {localize('com_ui_memory_updated_items')}
+          </h4>
+          <div className="space-y-2">
+            {updatedMemories.map((artifact, index) => (
+              <div key={`update-${index}`} className="rounded-lg p-3">
+                <div className="mb-1 text-xs font-medium uppercase tracking-wide text-text-secondary">
+                  {artifact.key}
+                </div>
+                <div className="whitespace-pre-wrap text-sm text-text-primary">
+                  {artifact.value}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {deletedMemories.length > 0 && (
+        <div>
+          <h4 className="mb-2 text-sm font-semibold text-text-primary">
+            {localize('com_ui_memory_deleted_items')}
+          </h4>
+          <div className="space-y-2">
+            {deletedMemories.map((artifact, index) => (
+              <div key={`delete-${index}`} className="rounded-lg p-3 opacity-60">
+                <div className="mb-1 text-xs font-medium uppercase tracking-wide text-text-secondary">
+                  {artifact.key}
+                </div>
+                <div className="text-sm italic text-text-secondary">
+                  {localize('com_ui_memory_deleted')}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/client/src/components/Nav/Settings.tsx
+++ b/client/src/components/Nav/Settings.tsx
@ -5,9 +5,27 @@ import { SettingsTabValues } from 'librechat-data-provider';
 import { useGetStartupConfig } from '~/data-provider';
 import type { TDialogProps } from '~/common';
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
-import { GearIcon, DataIcon, SpeechIcon, UserIcon, ExperimentIcon } from '~/components/svg';
-import { General, Chat, Speech, Beta, Commands, Data, Account, Balance } from './SettingsTabs';
+import {
+  GearIcon,
+  DataIcon,
+  SpeechIcon,
+  UserIcon,
+  ExperimentIcon,
+  PersonalizationIcon,
+} from '~/components/svg';
+import {
+  General,
+  Chat,
+  Speech,
+  Beta,
+  Commands,
+  Data,
+  Account,
+  Balance,
+  Personalization,
+} from './SettingsTabs';
 import { useMediaQuery, useLocalize, TranslationKeys } from '~/hooks';
+import usePersonalizationAccess from '~/hooks/usePersonalizationAccess';
 import { cn } from '~/utils';

 export default function Settings({ open, onOpenChange }: TDialogProps) {
@ -16,6 +34,7 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
  const localize = useLocalize();
  const [activeTab, setActiveTab] = useState(SettingsTabValues.GENERAL);
  const tabRefs = useRef({});
+  const { hasAnyPersonalizationFeature, hasMemoryOptOut } = usePersonalizationAccess();

  const handleKeyDown = (event: React.KeyboardEvent) => {
    const tabs: SettingsTabValues[] = [
@ -24,6 +43,7 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
      SettingsTabValues.BETA,
      SettingsTabValues.COMMANDS,
      SettingsTabValues.SPEECH,
+      ...(hasAnyPersonalizationFeature ? [SettingsTabValues.PERSONALIZATION] : []),
      SettingsTabValues.DATA,
      ...(startupConfig?.balance?.enabled ? [SettingsTabValues.BALANCE] : []),
      SettingsTabValues.ACCOUNT,
@ -80,6 +100,15 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
      icon: <SpeechIcon className="icon-sm" />,
      label: 'com_nav_setting_speech',
    },
+    ...(hasAnyPersonalizationFeature
+      ? [
+          {
+            value: SettingsTabValues.PERSONALIZATION,
+            icon: <PersonalizationIcon />,
+            label: 'com_nav_setting_personalization' as TranslationKeys,
+          },
+        ]
+      : []),
    {
      value: SettingsTabValues.DATA,
      icon: <DataIcon />,
@ -87,11 +116,11 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
    },
    ...(startupConfig?.balance?.enabled
      ? [
-        {
-          value: SettingsTabValues.BALANCE,
+          {
+            value: SettingsTabValues.BALANCE,
            icon: <DollarSign size={18} />,
-          label: 'com_nav_setting_balance' as TranslationKeys,
-        },
+            label: 'com_nav_setting_balance' as TranslationKeys,
+          },
        ]
      : ([] as { value: SettingsTabValues; icon: React.JSX.Element; label: TranslationKeys }[])),
    {
@ -213,6 +242,14 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
                    <Tabs.Content value={SettingsTabValues.SPEECH}>
                      <Speech />
                    </Tabs.Content>
+                    {hasAnyPersonalizationFeature && (
+                      <Tabs.Content value={SettingsTabValues.PERSONALIZATION}>
+                        <Personalization
+                          hasMemoryOptOut={hasMemoryOptOut}
+                          hasAnyPersonalizationFeature={hasAnyPersonalizationFeature}
+                        />
+                      </Tabs.Content>
+                    )}
                    <Tabs.Content value={SettingsTabValues.DATA}>
                      <Data />
                    </Tabs.Content>
--- a/client/src/components/Nav/SettingsTabs/Personalization.tsx
+++ b/client/src/components/Nav/SettingsTabs/Personalization.tsx
@ -0,0 +1,87 @@
+import { useState, useEffect } from 'react';
+import { useGetUserQuery, useUpdateMemoryPreferencesMutation } from '~/data-provider';
+import { useToastContext } from '~/Providers';
+import { Switch } from '~/components/ui';
+import { useLocalize } from '~/hooks';
+
+interface PersonalizationProps {
+  hasMemoryOptOut: boolean;
+  hasAnyPersonalizationFeature: boolean;
+}
+
+export default function Personalization({
+  hasMemoryOptOut,
+  hasAnyPersonalizationFeature,
+}: PersonalizationProps) {
+  const localize = useLocalize();
+  const { showToast } = useToastContext();
+  const { data: user } = useGetUserQuery();
+  const [referenceSavedMemories, setReferenceSavedMemories] = useState(true);
+
+  const updateMemoryPreferencesMutation = useUpdateMemoryPreferencesMutation({
+    onSuccess: () => {
+      showToast({
+        message: localize('com_ui_preferences_updated'),
+        status: 'success',
+      });
+    },
+    onError: () => {
+      showToast({
+        message: localize('com_ui_error_updating_preferences'),
+        status: 'error',
+      });
+      // Revert the toggle on error
+      setReferenceSavedMemories((prev) => !prev);
+    },
+  });
+
+  // Initialize state from user data
+  useEffect(() => {
+    if (user?.personalization?.memories !== undefined) {
+      setReferenceSavedMemories(user.personalization.memories);
+    }
+  }, [user?.personalization?.memories]);
+
+  const handleMemoryToggle = (checked: boolean) => {
+    setReferenceSavedMemories(checked);
+    updateMemoryPreferencesMutation.mutate({ memories: checked });
+  };
+
+  if (!hasAnyPersonalizationFeature) {
+    return (
+      <div className="flex flex-col gap-3 text-sm text-text-primary">
+        <div className="text-text-secondary">{localize('com_ui_no_personalization_available')}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3 text-sm text-text-primary">
+      {/* Memory Settings Section */}
+      {hasMemoryOptOut && (
+        <>
+          <div className="border-b border-border-medium pb-3">
+            <div className="text-base font-semibold">{localize('com_ui_memory')}</div>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="flex items-center gap-2">
+                {localize('com_ui_reference_saved_memories')}
+              </div>
+              <div className="mt-1 text-xs text-text-secondary">
+                {localize('com_ui_reference_saved_memories_description')}
+              </div>
+            </div>
+            <Switch
+              checked={referenceSavedMemories}
+              onCheckedChange={handleMemoryToggle}
+              disabled={updateMemoryPreferencesMutation.isLoading}
+              aria-label={localize('com_ui_reference_saved_memories')}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
--- a/client/src/components/Nav/SettingsTabs/index.ts
+++ b/client/src/components/Nav/SettingsTabs/index.ts
@ -7,3 +7,4 @@ export { RevokeKeysButton } from './Data/RevokeKeysButton';
 export { default as Account } from './Account/Account';
 export { default as Balance } from './Balance/Balance';
 export { default as Speech } from './Speech/Speech';
+export { default as Personalization } from './Personalization';
--- a/client/src/components/Prompts/Groups/FilterPrompts.tsx
+++ b/client/src/components/Prompts/Groups/FilterPrompts.tsx
@ -44,11 +44,11 @@ export default function FilterPrompts({
    const categoryOptions = categories
      ? [...categories]
      : [
-        {
-          value: SystemCategories.NO_CATEGORY,
-          label: localize('com_ui_no_category'),
-        },
-      ];
+          {
+            value: SystemCategories.NO_CATEGORY,
+            label: localize('com_ui_no_category'),
+          },
+        ];

    return [...baseOptions, ...categoryOptions];
  }, [categories, localize]);
--- a/client/src/components/Prompts/Groups/GroupSidePanel.tsx
+++ b/client/src/components/Prompts/Groups/GroupSidePanel.tsx
@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import PanelNavigation from '~/components/Prompts/Groups/PanelNavigation';
+import ManagePrompts from '~/components/Prompts/ManagePrompts';
 import { useMediaQuery, usePromptGroupsNav } from '~/hooks';
 import List from '~/components/Prompts/Groups/List';
 import { cn } from '~/utils';
@ -38,14 +39,17 @@ export default function GroupSidePanel({
      <div className="flex-grow overflow-y-auto">
        <List groups={promptGroups} isChatRoute={isChatRoute} isLoading={!!groupsQuery.isLoading} />
      </div>
-      <PanelNavigation
-        nextPage={nextPage}
-        prevPage={prevPage}
-        isFetching={isFetching}
-        hasNextPage={hasNextPage}
-        isChatRoute={isChatRoute}
-        hasPreviousPage={hasPreviousPage}
-      />
+      <div className="flex items-center justify-between">
+        {isChatRoute && <ManagePrompts className="select-none" />}
+        <PanelNavigation
+          nextPage={nextPage}
+          prevPage={prevPage}
+          isFetching={isFetching}
+          hasNextPage={hasNextPage}
+          isChatRoute={isChatRoute}
+          hasPreviousPage={hasPreviousPage}
+        />
+      </div>
    </div>
  );
 }
--- a/client/src/components/Prompts/Groups/PanelNavigation.tsx
+++ b/client/src/components/Prompts/Groups/PanelNavigation.tsx
@ -19,11 +19,13 @@ function PanelNavigation({
 }) {
  const localize = useLocalize();
  return (
-    <div className="my-1 flex justify-between">
-      <div className="mb-2 flex gap-2">
-        {!isChatRoute && <ThemeSelector returnThemeOnly={true} />}
-      </div>
-      <div className="mb-2 flex gap-2">
+    <>
+      <div className="flex gap-2">{!isChatRoute && <ThemeSelector returnThemeOnly={true} />}</div>
+      <div
+        className="flex items-center justify-between gap-2"
+        role="navigation"
+        aria-label="Pagination"
+      >
        <Button variant="outline" size="sm" onClick={() => prevPage()} disabled={!hasPreviousPage}>
          {localize('com_ui_prev')}
        </Button>
@ -36,7 +38,7 @@ function PanelNavigation({
          {localize('com_ui_next')}
        </Button>
      </div>
-    </div>
+    </>
  );
 }

--- a/client/src/components/Prompts/PromptsAccordion.tsx
+++ b/client/src/components/Prompts/PromptsAccordion.tsx
@ -1,19 +1,17 @@
 import PromptSidePanel from '~/components/Prompts/Groups/GroupSidePanel';
 import AutoSendPrompt from '~/components/Prompts/Groups/AutoSendPrompt';
 import FilterPrompts from '~/components/Prompts/Groups/FilterPrompts';
-import ManagePrompts from '~/components/Prompts/ManagePrompts';
 import { usePromptGroupsNav } from '~/hooks';

 export default function PromptsAccordion() {
  const groupsNav = usePromptGroupsNav();
  return (
    <div className="flex h-full w-full flex-col">
-      <PromptSidePanel className="lg:w-full xl:w-full" {...groupsNav}>
-        <div className="flex w-full flex-row items-center justify-between pt-2">
-          <ManagePrompts className="select-none" />
+      <PromptSidePanel className="mt-2 space-y-2 lg:w-full xl:w-full" {...groupsNav}>
+        <FilterPrompts setName={groupsNav.setName} className="items-center justify-center" />
+        <div className="flex w-full flex-row items-center justify-end">
          <AutoSendPrompt className="text-xs dark:text-white" />
        </div>
-        <FilterPrompts setName={groupsNav.setName} className="items-center justify-center" />
      </PromptSidePanel>
    </div>
  );
--- a/client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx
+++ b/client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx
@ -80,13 +80,13 @@ const BookmarkTable = () => {
            <TableHeader>
              <TableRow className="border-b border-border-light">
                <TableHead className="w-[70%] bg-surface-secondary py-3 text-left text-sm font-medium text-text-secondary">
-                  <div className="px-4">{localize('com_ui_bookmarks_title')}</div>
+                  <div>{localize('com_ui_bookmarks_title')}</div>
                </TableHead>
                <TableHead className="w-[30%] bg-surface-secondary py-3 text-left text-sm font-medium text-text-secondary">
-                  <div className="px-4">{localize('com_ui_bookmarks_count')}</div>
+                  <div>{localize('com_ui_bookmarks_count')}</div>
                </TableHead>
                <TableHead className="w-[40%] bg-surface-secondary py-3 text-left text-sm font-medium text-text-secondary">
-                  <div className="px-4">{localize('com_assistants_actions')}</div>
+                  <div>{localize('com_assistants_actions')}</div>
                </TableHead>
              </TableRow>
            </TableHeader>
--- a/client/src/components/SidePanel/Memories/AdminSettings.tsx
+++ b/client/src/components/SidePanel/Memories/AdminSettings.tsx
@ -0,0 +1,212 @@
+import * as Ariakit from '@ariakit/react';
+import { useMemo, useEffect, useState } from 'react';
+import { ShieldEllipsis } from 'lucide-react';
+import { useForm, Controller } from 'react-hook-form';
+import { Permissions, SystemRoles, roleDefaults, PermissionTypes } from 'librechat-data-provider';
+import type { Control, UseFormSetValue, UseFormGetValues } from 'react-hook-form';
+import { OGDialog, OGDialogTitle, OGDialogContent, OGDialogTrigger } from '~/components/ui';
+import { useUpdateMemoryPermissionsMutation } from '~/data-provider';
+import { Button, Switch, DropdownPopup } from '~/components/ui';
+import { useLocalize, useAuthContext } from '~/hooks';
+import { useToastContext } from '~/Providers';
+
+type FormValues = Record<Permissions, boolean>;
+
+type LabelControllerProps = {
+  label: string;
+  memoryPerm: Permissions;
+  control: Control<FormValues, unknown, FormValues>;
+  setValue: UseFormSetValue<FormValues>;
+  getValues: UseFormGetValues<FormValues>;
+};
+
+const LabelController: React.FC<LabelControllerProps> = ({ control, memoryPerm, label }) => (
+  <div className="mb-4 flex items-center justify-between gap-2">
+    {label}
+    <Controller
+      name={memoryPerm}
+      control={control}
+      render={({ field }) => (
+        <Switch
+          {...field}
+          checked={field.value}
+          onCheckedChange={field.onChange}
+          value={field.value.toString()}
+        />
+      )}
+    />
+  </div>
+);
+
+const AdminSettings = () => {
+  const localize = useLocalize();
+  const { user, roles } = useAuthContext();
+  const { showToast } = useToastContext();
+  const { mutate, isLoading } = useUpdateMemoryPermissionsMutation({
+    onSuccess: () => {
+      showToast({ status: 'success', message: localize('com_ui_saved') });
+    },
+    onError: () => {
+      showToast({ status: 'error', message: localize('com_ui_error_save_admin_settings') });
+    },
+  });
+
+  const [isRoleMenuOpen, setIsRoleMenuOpen] = useState(false);
+  const [selectedRole, setSelectedRole] = useState<SystemRoles>(SystemRoles.USER);
+
+  const defaultValues = useMemo(() => {
+    if (roles?.[selectedRole]?.permissions) {
+      return roles?.[selectedRole]?.permissions?.[PermissionTypes.MEMORIES];
+    }
+    return roleDefaults[selectedRole].permissions[PermissionTypes.MEMORIES];
+  }, [roles, selectedRole]);
+
+  const {
+    reset,
+    control,
+    setValue,
+    getValues,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm<FormValues>({
+    mode: 'onChange',
+    defaultValues,
+  });
+
+  useEffect(() => {
+    if (roles?.[selectedRole]?.permissions?.[PermissionTypes.MEMORIES]) {
+      reset(roles?.[selectedRole]?.permissions?.[PermissionTypes.MEMORIES]);
+    } else {
+      reset(roleDefaults[selectedRole].permissions[PermissionTypes.MEMORIES]);
+    }
+  }, [roles, selectedRole, reset]);
+
+  if (user?.role !== SystemRoles.ADMIN) {
+    return null;
+  }
+
+  const labelControllerData = [
+    {
+      memoryPerm: Permissions.USE,
+      label: localize('com_ui_memories_allow_use'),
+    },
+    {
+      memoryPerm: Permissions.CREATE,
+      label: localize('com_ui_memories_allow_create'),
+    },
+    {
+      memoryPerm: Permissions.UPDATE,
+      label: localize('com_ui_memories_allow_update'),
+    },
+    {
+      memoryPerm: Permissions.READ,
+      label: localize('com_ui_memories_allow_read'),
+    },
+    {
+      memoryPerm: Permissions.OPT_OUT,
+      label: localize('com_ui_memories_allow_opt_out'),
+    },
+  ];
+
+  const onSubmit = (data: FormValues) => {
+    mutate({ roleName: selectedRole, updates: data });
+  };
+
+  const roleDropdownItems = [
+    {
+      label: SystemRoles.USER,
+      onClick: () => {
+        setSelectedRole(SystemRoles.USER);
+      },
+    },
+    {
+      label: SystemRoles.ADMIN,
+      onClick: () => {
+        setSelectedRole(SystemRoles.ADMIN);
+      },
+    },
+  ];
+
+  return (
+    <OGDialog>
+      <OGDialogTrigger asChild>
+        <Button
+          size={'sm'}
+          variant={'outline'}
+          className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
+        >
+          <ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
+          {localize('com_ui_admin_settings')}
+        </Button>
+      </OGDialogTrigger>
+      <OGDialogContent className="w-1/4 border-border-light bg-surface-primary text-text-primary">
+        <OGDialogTitle>{`${localize('com_ui_admin_settings')} - ${localize(
+          'com_ui_memories',
+        )}`}</OGDialogTitle>
+        <div className="p-2">
+          {/* Role selection dropdown */}
+          <div className="flex items-center gap-2">
+            <span className="font-medium">{localize('com_ui_role_select')}:</span>
+            <DropdownPopup
+              unmountOnHide={true}
+              menuId="memory-role-dropdown"
+              isOpen={isRoleMenuOpen}
+              setIsOpen={setIsRoleMenuOpen}
+              trigger={
+                <Ariakit.MenuButton className="inline-flex w-1/4 items-center justify-center rounded-lg border border-border-light bg-transparent px-2 py-1 text-text-primary transition-all ease-in-out hover:bg-surface-tertiary">
+                  {selectedRole}
+                </Ariakit.MenuButton>
+              }
+              items={roleDropdownItems}
+              itemClassName="items-center justify-center"
+              sameWidth={true}
+            />
+          </div>
+          {/* Permissions form */}
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <div className="py-5">
+              {labelControllerData.map(({ memoryPerm, label }) => (
+                <div key={memoryPerm}>
+                  <LabelController
+                    control={control}
+                    memoryPerm={memoryPerm}
+                    label={label}
+                    getValues={getValues}
+                    setValue={setValue}
+                  />
+                  {selectedRole === SystemRoles.ADMIN && memoryPerm === Permissions.USE && (
+                    <>
+                      <div className="mb-2 max-w-full whitespace-normal break-words text-sm text-red-600">
+                        <span>{localize('com_ui_admin_access_warning')}</span>
+                        {'\n'}
+                        <a
+                          href="https://www.librechat.ai/docs/configuration/librechat_yaml/object_structure/interface"
+                          target="_blank"
+                          rel="noreferrer"
+                          className="text-blue-500 underline"
+                        >
+                          {localize('com_ui_more_info')}
+                        </a>
+                      </div>
+                    </>
+                  )}
+                </div>
+              ))}
+            </div>
+            <div className="flex justify-end">
+              <button
+                type="submit"
+                disabled={isSubmitting || isLoading}
+                className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600"
+              >
+                {localize('com_ui_save')}
+              </button>
+            </div>
+          </form>
+        </div>
+      </OGDialogContent>
+    </OGDialog>
+  );
+};
+
+export default AdminSettings;
--- a/client/src/components/SidePanel/Memories/MemoryCreateDialog.tsx
+++ b/client/src/components/SidePanel/Memories/MemoryCreateDialog.tsx
@ -0,0 +1,147 @@
+import React, { useState } from 'react';
+import { PermissionTypes, Permissions } from 'librechat-data-provider';
+import { OGDialog, OGDialogTemplate, Button, Label, Input } from '~/components/ui';
+import { useCreateMemoryMutation } from '~/data-provider';
+import { useLocalize, useHasAccess } from '~/hooks';
+import { useToastContext } from '~/Providers';
+import { Spinner } from '~/components/svg';
+
+interface MemoryCreateDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: React.ReactNode;
+  triggerRef?: React.MutableRefObject<HTMLButtonElement | null>;
+}
+
+export default function MemoryCreateDialog({
+  open,
+  onOpenChange,
+  children,
+  triggerRef,
+}: MemoryCreateDialogProps) {
+  const localize = useLocalize();
+  const { showToast } = useToastContext();
+
+  const hasCreateAccess = useHasAccess({
+    permissionType: PermissionTypes.MEMORIES,
+    permission: Permissions.CREATE,
+  });
+
+  const { mutate: createMemory, isLoading } = useCreateMemoryMutation({
+    onSuccess: () => {
+      showToast({
+        message: localize('com_ui_memory_created'),
+        status: 'success',
+      });
+      onOpenChange(false);
+      setKey('');
+      setValue('');
+      setTimeout(() => {
+        triggerRef?.current?.focus();
+      }, 0);
+    },
+    onError: (error: Error) => {
+      let errorMessage = localize('com_ui_error');
+
+      if (error && typeof error === 'object' && 'response' in error) {
+        const axiosError = error as any;
+        if (axiosError.response?.data?.error) {
+          errorMessage = axiosError.response.data.error;
+
+          // Check for duplicate key error
+          if (axiosError.response?.status === 409 || errorMessage.includes('already exists')) {
+            errorMessage = localize('com_ui_memory_key_exists');
+          }
+        }
+      } else if (error.message) {
+        errorMessage = error.message;
+      }
+
+      showToast({
+        message: errorMessage,
+        status: 'error',
+      });
+    },
+  });
+
+  const [key, setKey] = useState('');
+  const [value, setValue] = useState('');
+
+  const handleSave = () => {
+    if (!hasCreateAccess) {
+      return;
+    }
+
+    if (!key.trim() || !value.trim()) {
+      showToast({
+        message: localize('com_ui_field_required'),
+        status: 'error',
+      });
+      return;
+    }
+
+    createMemory({
+      key: key.trim(),
+      value: value.trim(),
+    });
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && e.ctrlKey && hasCreateAccess) {
+      handleSave();
+    }
+  };
+
+  return (
+    <OGDialog open={open} onOpenChange={onOpenChange} triggerRef={triggerRef}>
+      {children}
+      <OGDialogTemplate
+        title={localize('com_ui_create_memory')}
+        showCloseButton={false}
+        className="w-11/12 md:max-w-lg"
+        main={
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="memory-key" className="text-sm font-medium">
+                {localize('com_ui_key')}
+              </Label>
+              <Input
+                id="memory-key"
+                value={key}
+                onChange={(e) => setKey(e.target.value)}
+                onKeyDown={handleKeyPress}
+                placeholder={localize('com_ui_enter_key')}
+                className="w-full"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="memory-value" className="text-sm font-medium">
+                {localize('com_ui_value')}
+              </Label>
+              <textarea
+                id="memory-value"
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                onKeyDown={handleKeyPress}
+                placeholder={localize('com_ui_enter_value')}
+                className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                rows={3}
+              />
+            </div>
+          </div>
+        }
+        buttons={
+          <Button
+            type="button"
+            variant="submit"
+            onClick={handleSave}
+            disabled={isLoading || !key.trim() || !value.trim()}
+            className="text-white"
+          >
+            {isLoading ? <Spinner className="size-4" /> : localize('com_ui_create')}
+          </Button>
+        }
+      />
+    </OGDialog>
+  );
+}
--- a/client/src/components/SidePanel/Memories/MemoryEditDialog.tsx
+++ b/client/src/components/SidePanel/Memories/MemoryEditDialog.tsx
@ -0,0 +1,179 @@
+import React, { useState, useEffect } from 'react';
+import { PermissionTypes, Permissions } from 'librechat-data-provider';
+import type { TUserMemory } from 'librechat-data-provider';
+import { OGDialog, OGDialogTemplate, Button, Label, Input } from '~/components/ui';
+import { useUpdateMemoryMutation, useMemoriesQuery } from '~/data-provider';
+import { useLocalize, useHasAccess } from '~/hooks';
+import { useToastContext } from '~/Providers';
+import { Spinner } from '~/components/svg';
+
+interface MemoryEditDialogProps {
+  memory: TUserMemory | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: React.ReactNode;
+  triggerRef?: React.MutableRefObject<HTMLButtonElement | null>;
+}
+
+export default function MemoryEditDialog({
+  memory,
+  open,
+  onOpenChange,
+  children,
+  triggerRef,
+}: MemoryEditDialogProps) {
+  const localize = useLocalize();
+  const { showToast } = useToastContext();
+  const { data: memData } = useMemoriesQuery();
+
+  const hasUpdateAccess = useHasAccess({
+    permissionType: PermissionTypes.MEMORIES,
+    permission: Permissions.UPDATE,
+  });
+
+  const { mutate: updateMemory, isLoading } = useUpdateMemoryMutation({
+    onMutate: () => {
+      onOpenChange(false);
+      setTimeout(() => {
+        triggerRef?.current?.focus();
+      }, 0);
+    },
+    onSuccess: () => {
+      showToast({
+        message: localize('com_ui_saved'),
+        status: 'success',
+      });
+    },
+    onError: () => {
+      showToast({
+        message: localize('com_ui_error'),
+        status: 'error',
+      });
+    },
+  });
+
+  const [key, setKey] = useState('');
+  const [value, setValue] = useState('');
+  const [originalKey, setOriginalKey] = useState('');
+
+  useEffect(() => {
+    if (memory) {
+      setKey(memory.key);
+      setValue(memory.value);
+      setOriginalKey(memory.key);
+    }
+  }, [memory]);
+
+  const handleSave = () => {
+    if (!hasUpdateAccess || !memory) {
+      return;
+    }
+
+    if (!key.trim() || !value.trim()) {
+      showToast({
+        message: localize('com_ui_field_required'),
+        status: 'error',
+      });
+      return;
+    }
+
+    updateMemory({
+      key: key.trim(),
+      value: value.trim(),
+      ...(originalKey !== key.trim() && { originalKey }),
+    });
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && e.ctrlKey && hasUpdateAccess) {
+      handleSave();
+    }
+  };
+
+  return (
+    <OGDialog open={open} onOpenChange={onOpenChange} triggerRef={triggerRef}>
+      {children}
+      <OGDialogTemplate
+        title={hasUpdateAccess ? localize('com_ui_edit_memory') : localize('com_ui_view_memory')}
+        showCloseButton={false}
+        className="w-11/12 md:max-w-lg"
+        main={
+          <div className="space-y-4">
+            {memory && (
+              <div className="space-y-2">
+                <div className="flex items-center justify-between text-xs text-text-secondary">
+                  <div>
+                    {localize('com_ui_date')}:{' '}
+                    {new Date(memory.updated_at).toLocaleDateString(undefined, {
+                      month: 'short',
+                      day: 'numeric',
+                      year: 'numeric',
+                      hour: '2-digit',
+                      minute: '2-digit',
+                    })}
+                  </div>
+                  {/* Token Information */}
+                  {memory.tokenCount !== undefined && (
+                    <div>
+                      {memory.tokenCount.toLocaleString()}
+                      {memData?.tokenLimit && ` / ${memData.tokenLimit.toLocaleString()}`}{' '}
+                      {localize('com_ui_tokens')}
+                    </div>
+                  )}
+                </div>
+                {/* Overall Memory Usage */}
+                {memData?.tokenLimit && memData?.usagePercentage !== null && (
+                  <div className="text-xs text-text-secondary">
+                    {localize('com_ui_usage')}: {memData.usagePercentage}%{' '}
+                  </div>
+                )}
+              </div>
+            )}
+            <div className="space-y-2">
+              <Label htmlFor="memory-key" className="text-sm font-medium">
+                {localize('com_ui_key')}
+              </Label>
+              <Input
+                id="memory-key"
+                value={key}
+                onChange={(e) => hasUpdateAccess && setKey(e.target.value)}
+                onKeyDown={handleKeyPress}
+                placeholder={localize('com_ui_enter_key')}
+                className="w-full"
+                disabled={!hasUpdateAccess}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="memory-value" className="text-sm font-medium">
+                {localize('com_ui_value')}
+              </Label>
+              <textarea
+                id="memory-value"
+                value={value}
+                onChange={(e) => hasUpdateAccess && setValue(e.target.value)}
+                onKeyDown={handleKeyPress}
+                placeholder={localize('com_ui_enter_value')}
+                className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                rows={3}
+                disabled={!hasUpdateAccess}
+              />
+            </div>
+          </div>
+        }
+        buttons={
+          hasUpdateAccess ? (
+            <Button
+              type="button"
+              variant="submit"
+              onClick={handleSave}
+              disabled={isLoading || !key.trim() || !value.trim()}
+              className="text-white"
+            >
+              {isLoading ? <Spinner className="size-4" /> : localize('com_ui_save')}
+            </Button>
+          ) : null
+        }
+      />
+    </OGDialog>
+  );
+}
--- a/client/src/components/SidePanel/Memories/MemoryViewer.tsx
+++ b/client/src/components/SidePanel/Memories/MemoryViewer.tsx
@ -0,0 +1,428 @@
+/* Memories */
+import { useMemo, useState, useRef, useEffect } from 'react';
+import { Plus } from 'lucide-react';
+import { matchSorter } from 'match-sorter';
+import { SystemRoles, PermissionTypes, Permissions } from 'librechat-data-provider';
+import type { TUserMemory } from 'librechat-data-provider';
+import {
+  Table,
+  Input,
+  Label,
+  Button,
+  Switch,
+  TableRow,
+  OGDialog,
+  TableHead,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TooltipAnchor,
+  OGDialogTrigger,
+} from '~/components/ui';
+import {
+  useGetUserQuery,
+  useMemoriesQuery,
+  useDeleteMemoryMutation,
+  useUpdateMemoryPreferencesMutation,
+} from '~/data-provider';
+import { useLocalize, useAuthContext, useHasAccess } from '~/hooks';
+import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
+import { EditIcon, TrashIcon } from '~/components/svg';
+import MemoryCreateDialog from './MemoryCreateDialog';
+import MemoryEditDialog from './MemoryEditDialog';
+import Spinner from '~/components/svg/Spinner';
+import { useToastContext } from '~/Providers';
+import AdminSettings from './AdminSettings';
+
+export default function MemoryViewer() {
+  const localize = useLocalize();
+  const { user } = useAuthContext();
+  const { data: userData } = useGetUserQuery();
+  const { data: memData, isLoading } = useMemoriesQuery();
+  const { mutate: deleteMemory } = useDeleteMemoryMutation();
+  const { showToast } = useToastContext();
+  const [pageIndex, setPageIndex] = useState(0);
+  const [searchQuery, setSearchQuery] = useState('');
+  const pageSize = 10;
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [deletingKey, setDeletingKey] = useState<string | null>(null);
+  const [referenceSavedMemories, setReferenceSavedMemories] = useState(true);
+
+  const updateMemoryPreferencesMutation = useUpdateMemoryPreferencesMutation({
+    onSuccess: () => {
+      showToast({
+        message: localize('com_ui_preferences_updated'),
+        status: 'success',
+      });
+    },
+    onError: () => {
+      showToast({
+        message: localize('com_ui_error_updating_preferences'),
+        status: 'error',
+      });
+      setReferenceSavedMemories((prev) => !prev);
+    },
+  });
+
+  useEffect(() => {
+    if (userData?.personalization?.memories !== undefined) {
+      setReferenceSavedMemories(userData.personalization.memories);
+    }
+  }, [userData?.personalization?.memories]);
+
+  const handleMemoryToggle = (checked: boolean) => {
+    setReferenceSavedMemories(checked);
+    updateMemoryPreferencesMutation.mutate({ memories: checked });
+  };
+
+  const hasReadAccess = useHasAccess({
+    permissionType: PermissionTypes.MEMORIES,
+    permission: Permissions.READ,
+  });
+
+  const hasUpdateAccess = useHasAccess({
+    permissionType: PermissionTypes.MEMORIES,
+    permission: Permissions.UPDATE,
+  });
+
+  const hasCreateAccess = useHasAccess({
+    permissionType: PermissionTypes.MEMORIES,
+    permission: Permissions.CREATE,
+  });
+
+  const hasOptOutAccess = useHasAccess({
+    permissionType: PermissionTypes.MEMORIES,
+    permission: Permissions.OPT_OUT,
+  });
+
+  const memories: TUserMemory[] = useMemo(() => memData?.memories ?? [], [memData]);
+
+  const filteredMemories = useMemo(() => {
+    return matchSorter(memories, searchQuery, {
+      keys: ['key', 'value'],
+    });
+  }, [memories, searchQuery]);
+
+  const currentRows = useMemo(() => {
+    return filteredMemories.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  }, [filteredMemories, pageIndex]);
+
+  const getProgressBarColor = (percentage: number): string => {
+    if (percentage > 90) {
+      return 'stroke-red-500';
+    }
+    if (percentage > 75) {
+      return 'stroke-yellow-500';
+    }
+    return 'stroke-green-500';
+  };
+
+  const EditMemoryButton = ({ memory }: { memory: TUserMemory }) => {
+    const [open, setOpen] = useState(false);
+    const triggerRef = useRef<HTMLDivElement>(null);
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        setOpen(!open);
+      }
+    };
+
+    // Only show edit button if user has UPDATE permission
+    if (!hasUpdateAccess) {
+      return null;
+    }
+
+    return (
+      <MemoryEditDialog
+        open={open}
+        memory={memory}
+        onOpenChange={setOpen}
+        triggerRef={triggerRef as React.MutableRefObject<HTMLButtonElement | null>}
+      >
+        <OGDialogTrigger asChild>
+          <TooltipAnchor
+            ref={triggerRef}
+            role="button"
+            aria-label={localize('com_ui_edit')}
+            description={localize('com_ui_edit')}
+            tabIndex={0}
+            onClick={() => setOpen(!open)}
+            className="flex size-7 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-hover"
+            onKeyDown={handleKeyDown}
+          >
+            <EditIcon />
+          </TooltipAnchor>
+        </OGDialogTrigger>
+      </MemoryEditDialog>
+    );
+  };
+
+  const DeleteMemoryButton = ({ memory }: { memory: TUserMemory }) => {
+    const [open, setOpen] = useState(false);
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        event.stopPropagation();
+        setOpen(!open);
+      }
+    };
+
+    if (!hasUpdateAccess) {
+      return null;
+    }
+
+    const confirmDelete = async () => {
+      setDeletingKey(memory.key);
+      deleteMemory(memory.key, {
+        onSuccess: () => {
+          showToast({
+            message: localize('com_ui_deleted'),
+            status: 'success',
+          });
+          setOpen(false);
+        },
+        onError: () =>
+          showToast({
+            message: localize('com_ui_error'),
+            status: 'error',
+          }),
+        onSettled: () => setDeletingKey(null),
+      });
+    };
+
+    return (
+      <OGDialog open={open} onOpenChange={setOpen}>
+        <OGDialogTrigger asChild>
+          <TooltipAnchor
+            role="button"
+            aria-label={localize('com_ui_delete')}
+            description={localize('com_ui_delete')}
+            className="flex size-7 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-hover"
+            tabIndex={0}
+            onClick={() => setOpen(!open)}
+            onKeyDown={handleKeyDown}
+          >
+            {deletingKey === memory.key ? (
+              <Spinner className="size-4 animate-spin" />
+            ) : (
+              <TrashIcon className="size-4" />
+            )}
+          </TooltipAnchor>
+        </OGDialogTrigger>
+        <OGDialogTemplate
+          showCloseButton={false}
+          title={localize('com_ui_delete_memory')}
+          className="w-11/12 max-w-lg"
+          main={
+            <Label className="text-left text-sm font-medium">
+              {localize('com_ui_delete_confirm')} &quot;{memory.key}&quot;?
+            </Label>
+          }
+          selection={{
+            selectHandler: confirmDelete,
+            selectClasses:
+              'bg-red-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-800 text-white',
+            selectText: localize('com_ui_delete'),
+          }}
+        />
+      </OGDialog>
+    );
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex h-full w-full items-center justify-center p-4">
+        <Spinner />
+      </div>
+    );
+  }
+
+  if (!hasReadAccess) {
+    return (
+      <div className="flex h-full w-full items-center justify-center p-4">
+        <div className="text-center">
+          <p className="text-sm text-text-secondary">{localize('com_ui_no_read_access')}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      <div role="region" aria-label={localize('com_ui_memories')} className="mt-2 space-y-2">
+        <div className="flex items-center gap-4">
+          <Input
+            placeholder={localize('com_ui_memories_filter')}
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            aria-label={localize('com_ui_memories_filter')}
+          />
+        </div>
+        {/* Memory Usage and Toggle Display */}
+        {(memData?.tokenLimit || hasOptOutAccess) && (
+          <div className="flex items-center justify-between rounded-lg">
+            {/* Usage Display */}
+            {memData?.tokenLimit && (
+              <div className="flex items-center gap-2">
+                <div className="relative size-10">
+                  <svg className="size-10 -rotate-90 transform">
+                    <circle
+                      cx="20"
+                      cy="20"
+                      r="16"
+                      stroke="currentColor"
+                      strokeWidth="3"
+                      fill="none"
+                      className="text-gray-200 dark:text-gray-700"
+                    />
+                    <circle
+                      cx="20"
+                      cy="20"
+                      r="16"
+                      strokeWidth="3"
+                      fill="none"
+                      strokeDasharray={`${2 * Math.PI * 16}`}
+                      strokeDashoffset={`${2 * Math.PI * 16 * (1 - (memData.usagePercentage ?? 0) / 100)}`}
+                      className={`transition-all ${getProgressBarColor(memData.usagePercentage ?? 0)}`}
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <span className="text-xs font-medium">{memData.usagePercentage}%</span>
+                  </div>
+                </div>
+                <div className="text-sm text-text-secondary">{localize('com_ui_usage')}</div>
+              </div>
+            )}
+
+            {/* Memory Toggle */}
+            {hasOptOutAccess && (
+              <div className="flex items-center gap-2 text-xs">
+                <span>{localize('com_ui_use_memory')}</span>
+                <Switch
+                  checked={referenceSavedMemories}
+                  onCheckedChange={handleMemoryToggle}
+                  aria-label={localize('com_ui_reference_saved_memories')}
+                  disabled={updateMemoryPreferencesMutation.isLoading}
+                />
+              </div>
+            )}
+          </div>
+        )}
+        {/* Create Memory Button */}
+        {hasCreateAccess && (
+          <div className="flex w-full justify-end">
+            <MemoryCreateDialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
+              <OGDialogTrigger asChild>
+                <Button variant="outline" className="w-full bg-transparent">
+                  <Plus className="size-4" aria-hidden />
+                  {localize('com_ui_create_memory')}
+                </Button>
+              </OGDialogTrigger>
+            </MemoryCreateDialog>
+          </div>
+        )}
+        <div className="rounded-lg border border-border-light bg-transparent shadow-sm transition-colors">
+          <Table className="w-full table-fixed">
+            <TableHeader>
+              <TableRow className="border-b border-border-light hover:bg-surface-secondary">
+                <TableHead
+                  className={`${
+                    hasUpdateAccess ? 'w-[75%]' : 'w-[100%]'
+                  } bg-surface-secondary py-3 text-left text-sm font-medium text-text-secondary`}
+                >
+                  <div>{localize('com_ui_memory')}</div>
+                </TableHead>
+                {hasUpdateAccess && (
+                  <TableHead className="w-[25%] bg-surface-secondary py-3 text-center text-sm font-medium text-text-secondary">
+                    <div>{localize('com_assistants_actions')}</div>
+                  </TableHead>
+                )}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {currentRows.length ? (
+                currentRows.map((memory: TUserMemory, idx: number) => (
+                  <TableRow
+                    key={idx}
+                    className="border-b border-border-light hover:bg-surface-secondary"
+                  >
+                    <TableCell className={`${hasUpdateAccess ? 'w-[75%]' : 'w-[100%]'} px-4 py-4`}>
+                      <div
+                        className="overflow-hidden text-ellipsis whitespace-nowrap text-sm text-text-primary"
+                        title={memory.value}
+                      >
+                        {memory.value}
+                      </div>
+                    </TableCell>
+                    {hasUpdateAccess && (
+                      <TableCell className="w-[25%] px-4 py-4">
+                        <div className="flex justify-center gap-2">
+                          <EditMemoryButton memory={memory} />
+                          <DeleteMemoryButton memory={memory} />
+                        </div>
+                      </TableCell>
+                    )}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={hasUpdateAccess ? 2 : 1}
+                    className="h-24 text-center text-sm text-text-secondary"
+                  >
+                    {localize('com_ui_no_data')}
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+
+        {/* Pagination controls */}
+        {filteredMemories.length > pageSize && (
+          <div
+            className="flex items-center justify-end gap-2"
+            role="navigation"
+            aria-label="Pagination"
+          >
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setPageIndex((prev) => Math.max(prev - 1, 0))}
+              disabled={pageIndex === 0}
+              aria-label={localize('com_ui_prev')}
+            >
+              {localize('com_ui_prev')}
+            </Button>
+            <div className="text-sm" aria-live="polite">
+              {`${pageIndex + 1} / ${Math.ceil(filteredMemories.length / pageSize)}`}
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() =>
+                setPageIndex((prev) =>
+                  (prev + 1) * pageSize < filteredMemories.length ? prev + 1 : prev,
+                )
+              }
+              disabled={(pageIndex + 1) * pageSize >= filteredMemories.length}
+              aria-label={localize('com_ui_next')}
+            >
+              {localize('com_ui_next')}
+            </Button>
+          </div>
+        )}
+
+        {/* Admin Settings */}
+        {user?.role === SystemRoles.ADMIN && (
+          <div className="mt-4">
+            <AdminSettings />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/client/src/components/SidePanel/Memories/index.ts
+++ b/client/src/components/SidePanel/Memories/index.ts
@ -0,0 +1,2 @@
+export { default as MemoryViewer } from './MemoryViewer';
+export { default as MemoryEditDialog } from './MemoryEditDialog';
--- a/client/src/components/svg/PersonalizationIcon.tsx
+++ b/client/src/components/svg/PersonalizationIcon.tsx
@ -0,0 +1,19 @@
+export default function PersonalizationIcon({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={`icon-sm ${className}`}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 4C10.3431 4 9 5.34315 9 7C9 8.65685 10.3431 10 12 10C13.6569 10 15 8.65685 15 7C15 5.34315 13.6569 4 12 4ZM7 7C7 4.23858 9.23858 2 12 2C14.7614 2 17 4.23858 17 7C17 9.76142 14.7614 12 12 12C9.23858 12 7 9.76142 7 7ZM19.0277 15.6255C18.6859 15.5646 18.1941 15.6534 17.682 16.1829C17.4936 16.3777 17.2342 16.4877 16.9632 16.4877C16.6922 16.4877 16.4328 16.3777 16.2444 16.1829C15.7322 15.6534 15.2405 15.5646 14.8987 15.6255C14.5381 15.6897 14.2179 15.9384 14.0623 16.3275C13.8048 16.9713 13.9014 18.662 16.9632 20.4617C20.0249 18.662 20.1216 16.9713 19.864 16.3275C19.7084 15.9384 19.3882 15.6897 19.0277 15.6255ZM21.721 15.5847C22.5748 17.7191 21.2654 20.429 17.437 22.4892C17.1412 22.6484 16.7852 22.6484 16.4893 22.4892C12.6609 20.4291 11.3516 17.7191 12.2053 15.5847C12.6117 14.5689 13.4917 13.8446 14.5481 13.6565C15.3567 13.5125 16.2032 13.6915 16.9632 14.1924C17.7232 13.6915 18.5697 13.5125 19.3783 13.6565C20.4347 13.8446 21.3147 14.5689 21.721 15.5847ZM9.92597 14.2049C10.1345 14.7163 9.889 15.2999 9.3776 15.5084C7.06131 16.453 5.5 18.5813 5.5 20.9999C5.5 21.5522 5.05228 21.9999 4.5 21.9999C3.94772 21.9999 3.5 21.5522 3.5 20.9999C3.5 17.6777 5.641 14.8723 8.6224 13.6565C9.1338 13.448 9.71743 13.6935 9.92597 14.2049Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
--- a/client/src/components/svg/index.ts
+++ b/client/src/components/svg/index.ts
@ -61,3 +61,4 @@ export { default as BedrockIcon } from './BedrockIcon';
 export { default as ThumbUpIcon } from './ThumbUpIcon';
 export { default as ThumbDownIcon } from './ThumbDownIcon';
 export { default as XAIcon } from './XAIcon';
+export { default as PersonalizationIcon } from './PersonalizationIcon';
--- a/client/src/components/ui/OriginalDialog.tsx
+++ b/client/src/components/ui/OriginalDialog.tsx
@ -4,7 +4,7 @@ import { X } from 'lucide-react';
 import { cn } from '~/utils';

 interface OGDialogProps extends DialogPrimitive.DialogProps {
-  triggerRef?: React.RefObject<HTMLButtonElement | HTMLInputElement>;
+  triggerRef?: React.RefObject<HTMLButtonElement | HTMLInputElement | null>;
 }

 const Dialog = React.forwardRef<HTMLDivElement, OGDialogProps>(
--- a/client/src/components/ui/Table.tsx
+++ b/client/src/components/ui/Table.tsx
@ -32,7 +32,7 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <tfoot
    ref={ref}
-    className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
+    className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
    {...props}
  />
 ));
@ -43,7 +43,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
    <tr
      ref={ref}
      className={cn(
-        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b border-border-light transition-colors',
+        'border-b border-border-light transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
        className,
      )}
      {...props}
@ -59,7 +59,7 @@ const TableHead = React.forwardRef<
  <th
    ref={ref}
    className={cn(
-      'text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0',
+      'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
      className,
    )}
    {...props}
@ -83,7 +83,7 @@ const TableCaption = React.forwardRef<
  HTMLTableCaptionElement,
  React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption ref={ref} className={cn('text-muted-foreground mt-4 text-sm', className)} {...props} />
+  <caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
 ));
 TableCaption.displayName = 'TableCaption';

--- a/client/src/data-provider/Memories/index.ts
+++ b/client/src/data-provider/Memories/index.ts
@ -0,0 +1,2 @@
+/* Memories */
+export * from './queries';
--- a/client/src/data-provider/Memories/queries.ts
+++ b/client/src/data-provider/Memories/queries.ts
@ -0,0 +1,116 @@
+/* Memories */
+import { QueryKeys, MutationKeys, dataService } from 'librechat-data-provider';
+import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
+import type {
+  UseQueryOptions,
+  UseMutationOptions,
+  QueryObserverResult,
+} from '@tanstack/react-query';
+import type { TUserMemory, MemoriesResponse } from 'librechat-data-provider';
+
+export const useMemoriesQuery = (
+  config?: UseQueryOptions<MemoriesResponse>,
+): QueryObserverResult<MemoriesResponse> => {
+  return useQuery<MemoriesResponse>([QueryKeys.memories], () => dataService.getMemories(), {
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchOnMount: false,
+    ...config,
+  });
+};
+
+export const useDeleteMemoryMutation = () => {
+  const queryClient = useQueryClient();
+  return useMutation((key: string) => dataService.deleteMemory(key), {
+    onSuccess: () => {
+      queryClient.invalidateQueries([QueryKeys.memories]);
+    },
+  });
+};
+
+export type UpdateMemoryParams = { key: string; value: string; originalKey?: string };
+export const useUpdateMemoryMutation = (
+  options?: UseMutationOptions<TUserMemory, Error, UpdateMemoryParams>,
+) => {
+  const queryClient = useQueryClient();
+  return useMutation(
+    ({ key, value, originalKey }: UpdateMemoryParams) =>
+      dataService.updateMemory(key, value, originalKey),
+    {
+      ...options,
+      onSuccess: (...params) => {
+        queryClient.invalidateQueries([QueryKeys.memories]);
+        options?.onSuccess?.(...params);
+      },
+    },
+  );
+};
+
+export type UpdateMemoryPreferencesParams = { memories: boolean };
+export type UpdateMemoryPreferencesResponse = {
+  updated: boolean;
+  preferences: { memories: boolean };
+};
+
+export const useUpdateMemoryPreferencesMutation = (
+  options?: UseMutationOptions<
+    UpdateMemoryPreferencesResponse,
+    Error,
+    UpdateMemoryPreferencesParams
+  >,
+) => {
+  const queryClient = useQueryClient();
+  return useMutation<UpdateMemoryPreferencesResponse, Error, UpdateMemoryPreferencesParams>(
+    [MutationKeys.updateMemoryPreferences],
+    (preferences: UpdateMemoryPreferencesParams) =>
+      dataService.updateMemoryPreferences(preferences),
+    {
+      ...options,
+      onSuccess: (...params) => {
+        queryClient.invalidateQueries([QueryKeys.user]);
+        options?.onSuccess?.(...params);
+      },
+    },
+  );
+};
+
+export type CreateMemoryParams = { key: string; value: string };
+export type CreateMemoryResponse = { created: boolean; memory: TUserMemory };
+
+export const useCreateMemoryMutation = (
+  options?: UseMutationOptions<CreateMemoryResponse, Error, CreateMemoryParams>,
+) => {
+  const queryClient = useQueryClient();
+  return useMutation<CreateMemoryResponse, Error, CreateMemoryParams>(
+    ({ key, value }: CreateMemoryParams) => dataService.createMemory({ key, value }),
+    {
+      ...options,
+      onSuccess: (data, variables, context) => {
+        queryClient.setQueryData<MemoriesResponse>([QueryKeys.memories], (oldData) => {
+          if (!oldData) return oldData;
+
+          const newMemories = [...oldData.memories, data.memory];
+          const totalTokens = newMemories.reduce(
+            (sum, memory) => sum + (memory.tokenCount || 0),
+            0,
+          );
+          const tokenLimit = oldData.tokenLimit;
+          let usagePercentage = oldData.usagePercentage;
+
+          if (tokenLimit && tokenLimit > 0) {
+            usagePercentage = Math.min(100, Math.round((totalTokens / tokenLimit) * 100));
+          }
+
+          return {
+            ...oldData,
+            memories: newMemories,
+            totalTokens,
+            usagePercentage,
+          };
+        });
+
+        options?.onSuccess?.(data, variables, context);
+      },
+    },
+  );
+};
--- a/client/src/data-provider/tests/memories.test.ts
+++ b/client/src/data-provider/tests/memories.test.ts
@ -0,0 +1,19 @@
+import { dataService as _dataService } from 'librechat-data-provider';
+import axios from 'axios';
+
+jest.mock('axios');
+
+const mockedAxios = axios as jest.Mocked<typeof axios>;
+
+describe('getMemories', () => {
+  it('should fetch memories from /api/memories', async () => {
+    const mockData = [{ key: 'foo', value: 'bar', updated_at: '2024-05-01T00:00:00Z' }];
+
+    mockedAxios.get.mockResolvedValueOnce({ data: mockData } as any);
+
+    const result = await (_dataService as any).getMemories();
+
+    expect(mockedAxios.get).toHaveBeenCalledWith('/api/memories', expect.any(Object));
+    expect(result).toEqual(mockData);
+  });
+});
--- a/client/src/data-provider/index.ts
+++ b/client/src/data-provider/index.ts
@ -2,6 +2,8 @@ export * from './Auth';
 export * from './Agents';
 export * from './Endpoints';
 export * from './Files';
+/* Memories */
+export * from './Memories';
 export * from './Messages';
 export * from './Misc';
 export * from './Tools';
--- a/client/src/data-provider/roles.ts
+++ b/client/src/data-provider/roles.ts
@ -1,10 +1,15 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  QueryKeys,
+  dataService,
+  promptPermissionsSchema,
+  memoryPermissionsSchema,
+} from 'librechat-data-provider';
 import type {
+  UseQueryOptions,
  UseMutationResult,
  QueryObserverResult,
-  UseQueryOptions,
 } from '@tanstack/react-query';
-import { QueryKeys, dataService, promptPermissionsSchema } from 'librechat-data-provider';
 import type * as t from 'librechat-data-provider';

 export const useGetRole = (
@ -91,3 +96,39 @@ export const useUpdateAgentPermissionsMutation = (
    },
  );
 };
+
+export const useUpdateMemoryPermissionsMutation = (
+  options?: t.UpdateMemoryPermOptions,
+): UseMutationResult<
+  t.UpdatePermResponse,
+  t.TError | undefined,
+  t.UpdateMemoryPermVars,
+  unknown
+> => {
+  const queryClient = useQueryClient();
+  const { onMutate, onSuccess, onError } = options ?? {};
+  return useMutation(
+    (variables) => {
+      memoryPermissionsSchema.partial().parse(variables.updates);
+      return dataService.updateMemoryPermissions(variables);
+    },
+    {
+      onSuccess: (data, variables, context) => {
+        queryClient.invalidateQueries([QueryKeys.roles, variables.roleName]);
+        if (onSuccess) {
+          onSuccess(data, variables, context);
+        }
+      },
+      onError: (...args) => {
+        const error = args[0];
+        if (error != null) {
+          console.error('Failed to update memory permissions:', error);
+        }
+        if (onError) {
+          onError(...args);
+        }
+      },
+      onMutate,
+    },
+  );
+};
--- a/client/src/hooks/Nav/useSideNavLinks.ts
+++ b/client/src/hooks/Nav/useSideNavLinks.ts
@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { MessageSquareQuote, ArrowRightToLine, Settings2, Bookmark } from 'lucide-react';
+import { MessageSquareQuote, ArrowRightToLine, Settings2, Database, Bookmark } from 'lucide-react';
 import {
  isAssistantsEndpoint,
  isAgentsEndpoint,
@ -12,6 +12,7 @@ import type { TInterfaceConfig, TEndpointsConfig } from 'librechat-data-provider
 import type { NavLink } from '~/common';
 import AgentPanelSwitch from '~/components/SidePanel/Agents/AgentPanelSwitch';
 import BookmarkPanel from '~/components/SidePanel/Bookmarks/BookmarkPanel';
+import MemoryViewer from '~/components/SidePanel/Memories/MemoryViewer';
 import PanelSwitch from '~/components/SidePanel/Builder/PanelSwitch';
 import PromptsAccordion from '~/components/Prompts/PromptsAccordion';
 import Parameters from '~/components/SidePanel/Parameters/Panel';
@ -42,6 +43,14 @@ export default function useSideNavLinks({
    permissionType: PermissionTypes.BOOKMARKS,
    permission: Permissions.USE,
  });
+  const hasAccessToMemories = useHasAccess({
+    permissionType: PermissionTypes.MEMORIES,
+    permission: Permissions.USE,
+  });
+  const hasAccessToReadMemories = useHasAccess({
+    permissionType: PermissionTypes.MEMORIES,
+    permission: Permissions.READ,
+  });
  const hasAccessToAgents = useHasAccess({
    permissionType: PermissionTypes.AGENTS,
    permission: Permissions.USE,
@ -97,6 +106,16 @@ export default function useSideNavLinks({
      });
    }

+    if (hasAccessToMemories && hasAccessToReadMemories) {
+      links.push({
+        title: 'com_ui_memories',
+        label: '',
+        icon: Database,
+        id: 'memories',
+        Component: MemoryViewer,
+      });
+    }
+
    if (
      interfaceConfig.parameters === true &&
      isParamEndpoint(endpoint ?? '', endpointType ?? '') === true &&
@ -147,6 +166,8 @@ export default function useSideNavLinks({
    endpoint,
    hasAccessToAgents,
    hasAccessToPrompts,
+    hasAccessToMemories,
+    hasAccessToReadMemories,
    hasAccessToBookmarks,
    hasAccessToCreateAgents,
    hidePanel,
--- a/client/src/hooks/SSE/useAttachmentHandler.ts
+++ b/client/src/hooks/SSE/useAttachmentHandler.ts
@ -1,7 +1,8 @@
 import { useSetRecoilState } from 'recoil';
-import { QueryKeys } from 'librechat-data-provider';
 import type { QueryClient } from '@tanstack/react-query';
-import type { TAttachment, EventSubmission } from 'librechat-data-provider';
+import { QueryKeys, Tools } from 'librechat-data-provider';
+import type { TAttachment, EventSubmission, MemoriesResponse } from 'librechat-data-provider';
+import { handleMemoryArtifact } from '~/utils/memory';
 import store from '~/store';

 export default function useAttachmentHandler(queryClient?: QueryClient) {
@ -16,6 +17,18 @@ export default function useAttachmentHandler(queryClient?: QueryClient) {
      });
    }

+    if (queryClient && data.type === Tools.memory && data[Tools.memory]) {
+      const memoryArtifact = data[Tools.memory];
+
+      queryClient.setQueryData([QueryKeys.memories], (oldData: MemoriesResponse | undefined) => {
+        if (!oldData) {
+          return oldData;
+        }
+
+        return handleMemoryArtifact({ memoryArtifact, currentData: oldData }) || oldData;
+      });
+    }
+
    setAttachmentsMap((prevMap) => {
      const messageAttachments =
        (prevMap as Record<string, TAttachment[] | undefined>)[messageId] || [];
--- a/client/src/hooks/usePersonalizationAccess.ts
+++ b/client/src/hooks/usePersonalizationAccess.ts
@ -0,0 +1,16 @@
+import { PermissionTypes, Permissions } from 'librechat-data-provider';
+import useHasAccess from './Roles/useHasAccess';
+
+export default function usePersonalizationAccess() {
+  const hasMemoryOptOut = useHasAccess({
+    permissionType: PermissionTypes.MEMORIES,
+    permission: Permissions.OPT_OUT,
+  });
+
+  const hasAnyPersonalizationFeature = hasMemoryOptOut;
+
+  return {
+    hasMemoryOptOut,
+    hasAnyPersonalizationFeature,
+  };
+}
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@ -446,6 +446,7 @@
  "com_nav_setting_data": "Data controls",
  "com_nav_setting_general": "General",
  "com_nav_setting_speech": "Speech",
+  "com_nav_setting_personalization": "Personalization",
  "com_nav_settings": "Settings",
  "com_nav_shared_links": "Shared links",
  "com_nav_show_code": "Always show code when using code interpreter",
@ -659,10 +660,12 @@
  "com_ui_delete_confirm": "This will delete",
  "com_ui_delete_confirm_prompt_version_var": "This will delete the selected version for \"{{0}}.\" If no other versions exist, the prompt will be deleted.",
  "com_ui_delete_conversation": "Delete chat?",
+  "com_ui_delete_memory": "Delete Memory",
  "com_ui_delete_prompt": "Delete Prompt?",
  "com_ui_delete_shared_link": "Delete shared link?",
  "com_ui_delete_tool": "Delete Tool",
  "com_ui_delete_tool_confirm": "Are you sure you want to delete this tool?",
+  "com_ui_deleted": "Deleted",
  "com_ui_descending": "Desc",
  "com_ui_description": "Description",
  "com_ui_description_placeholder": "Optional: Enter a description to display for the prompt",
@ -770,6 +773,7 @@
  "com_ui_include_shadcnui_agent": "Include shadcn/ui instructions",
  "com_ui_input": "Input",
  "com_ui_instructions": "Instructions",
+  "com_ui_key": "Key",
  "com_ui_late_night": "Happy late night",
  "com_ui_latest_footer": "Every AI for Everyone.",
  "com_ui_latest_production_version": "Latest production version",
@ -783,6 +787,17 @@
  "com_ui_manage": "Manage",
  "com_ui_max_tags": "Maximum number allowed is {{0}}, using latest values.",
  "com_ui_mcp_servers": "MCP Servers",
+  "com_ui_memories": "Memories",
+  "com_ui_memories_filter": "Filter memories...",
+  "com_ui_memories_allow_use": "Allow using Memories",
+  "com_ui_memories_allow_create": "Allow creating Memories",
+  "com_ui_memories_allow_update": "Allow updating Memories",
+  "com_ui_memories_allow_read": "Allow reading Memories",
+  "com_ui_memories_allow_opt_out": "Allow users to opt out of Memories",
+  "com_ui_memory": "Memory",
+  "com_ui_usage": "Usage",
+  "com_ui_current": "Current",
+  "com_ui_tokens": "tokens",
  "com_ui_mention": "Mention an endpoint, assistant, or preset to quickly switch to it",
  "com_ui_min_tags": "Cannot remove more values, a minimum of {{0}} are required.",
  "com_ui_misc": "Misc.",
@ -800,7 +815,7 @@
  "com_ui_no_bookmarks": "it seems like you have no bookmarks yet. Click on a chat and add a new one",
  "com_ui_no_category": "No category",
  "com_ui_no_changes": "No changes to update",
-  "com_ui_no_data": "something needs to go here. was empty",
+  "com_ui_no_data": "No data available",
  "com_ui_no_terms_content": "No terms and conditions content to display",
  "com_ui_no_valid_items": "something needs to go here. was empty",
  "com_ui_none": "None",
@ -944,6 +959,8 @@
  "com_ui_version_var": "Version {{0}}",
  "com_ui_versions": "Versions",
  "com_ui_view_source": "View source chat",
+  "com_ui_view_memory": "View Memory",
+  "com_ui_no_read_access": "You don't have permission to view memories",
  "com_ui_web_search": "Web Search",
  "com_ui_web_search_api_subtitle": "Search the web for up-to-date information",
  "com_ui_web_search_cohere_key": "Enter Cohere API Key",
@ -970,5 +987,23 @@
  "com_ui_yes": "Yes",
  "com_ui_zoom": "Zoom",
  "com_user_message": "You",
-  "com_warning_resubmit_unsupported": "Resubmitting the AI message is not supported for this endpoint."
+  "com_warning_resubmit_unsupported": "Resubmitting the AI message is not supported for this endpoint.",
+  "com_ui_value": "Value",
+  "com_ui_edit_memory": "Edit Memory",
+  "com_ui_enter_key": "Enter key",
+  "com_ui_enter_value": "Enter value",
+  "com_ui_memory_updated": "Updated saved memory",
+  "com_ui_memory_updated_items": "Updated Memories",
+  "com_ui_memory_deleted_items": "Deleted Memories",
+  "com_ui_memory_deleted": "Memory deleted",
+  "com_ui_reference_saved_memories": "Reference saved memories",
+  "com_ui_reference_saved_memories_description": "Allow the assistant to reference and use your saved memories when responding",
+  "com_ui_no_personalization_available": "No personalization options are currently available",
+  "com_ui_preferences_updated": "Preferences updated successfully",
+  "com_ui_error_updating_preferences": "Error updating preferences",
+  "com_ui_use_memory": "Use memory",
+  "com_ui_create_memory": "Create Memory",
+  "com_ui_memory_created": "Memory created successfully",
+  "com_ui_memory_key_exists": "A memory with this key already exists. Please use a different key."
 }
+
--- a/client/src/utils/memory.ts
+++ b/client/src/utils/memory.ts
@ -0,0 +1,90 @@
+import type { MemoriesResponse, TUserMemory, MemoryArtifact } from 'librechat-data-provider';
+
+type HandleMemoryArtifactParams = {
+  memoryArtifact: MemoryArtifact;
+  currentData: MemoriesResponse;
+};
+
+/**
+ * Pure function to handle memory artifact updates
+ * @param params - Object containing memoryArtifact and currentData
+ * @returns Updated MemoriesResponse or undefined if no update needed
+ */
+export function handleMemoryArtifact({
+  memoryArtifact,
+  currentData,
+}: HandleMemoryArtifactParams): MemoriesResponse | undefined {
+  const { type, key, value, tokenCount = 0 } = memoryArtifact;
+
+  if (type === 'update' && !value) {
+    return undefined;
+  }
+
+  const memories = currentData.memories;
+  const existingIndex = memories.findIndex((m) => m.key === key);
+
+  if (type === 'delete') {
+    if (existingIndex === -1) {
+      return undefined;
+    }
+
+    const deletedMemory = memories[existingIndex];
+    const newMemories = [...memories];
+    newMemories.splice(existingIndex, 1);
+
+    const totalTokens = currentData.totalTokens - (deletedMemory.tokenCount || 0);
+    const usagePercentage = currentData.tokenLimit
+      ? Math.min(100, Math.round((totalTokens / currentData.tokenLimit) * 100))
+      : null;
+
+    return {
+      ...currentData,
+      memories: newMemories,
+      totalTokens,
+      usagePercentage,
+    };
+  }
+
+  if (type === 'update') {
+    const timestamp = new Date().toISOString();
+    let totalTokens = currentData.totalTokens;
+    let newMemories: TUserMemory[];
+
+    if (existingIndex >= 0) {
+      const oldTokenCount = memories[existingIndex].tokenCount || 0;
+      totalTokens = totalTokens - oldTokenCount + tokenCount;
+
+      newMemories = [...memories];
+      newMemories[existingIndex] = {
+        key,
+        value: value!,
+        tokenCount,
+        updated_at: timestamp,
+      };
+    } else {
+      totalTokens = totalTokens + tokenCount;
+      newMemories = [
+        ...memories,
+        {
+          key,
+          value: value!,
+          tokenCount,
+          updated_at: timestamp,
+        },
+      ];
+    }
+
+    const usagePercentage = currentData.tokenLimit
+      ? Math.min(100, Math.round((totalTokens / currentData.tokenLimit) * 100))
+      : null;
+
+    return {
+      ...currentData,
+      memories: newMemories,
+      totalTokens,
+      usagePercentage,
+    };
+  }
+
+  return undefined;
+}