🧠 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

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>

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;

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

client/src/components/SidePanel/Memories/index.ts

@@ -0,0 +1,2 @@
+export { default as MemoryViewer } from './MemoryViewer';
+export { default as MemoryEditDialog } from './MemoryEditDialog';