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