🗝️ feat: User Provided Credentials for MCP Servers (#7980)

* 🗝️ feat: Per-User Credentials for MCP Servers

chore: add aider to gitignore

feat: fill custom variables to MCP server

feat: replace placeholders with custom user MCP variables

feat: handle MCP install/uninstall (uses pluginauths)

feat: add MCP custom variables dialog to MCPSelect

feat: add MCP custom variables dialog to the side panel

feat: do not require to fill MCP credentials for in tools dialog

feat: add translations keys (en+cs) for custom MCP variables

fix: handle LIBRECHAT_USER_ID correctly during MCP var replacement

style: remove unused MCP translation keys

style: fix eslint for MCP custom vars

chore: move aider gitignore to AI section

* feat: Add Plugin Authentication Methods to data-schemas

* refactor: Replace PluginAuth model methods with new utility functions for improved code organization and maintainability

* refactor: Move IPluginAuth interface to types directory for better organization and update pluginAuth schema to use the new import

* refactor: Remove unused getUsersPluginsAuthValuesMap function and streamline PluginService.js; add new getPluginAuthMap function for improved plugin authentication handling

* chore: fix typing for optional tools property with GenericTool[] type

* chore: update librechat-data-provider version to 0.7.88

* refactor: optimize getUserMCPAuthMap function by reducing variable usage and improving server key collection logic

* refactor: streamline MCP tool creation by removing customUserVars parameter and enhancing user-specific authentication handling to avoid closure encapsulation

* refactor: extract processSingleValue function to streamline MCP environment variable processing and enhance readability

* refactor: enhance MCP tool processing logic by simplifying conditions and improving authentication handling for custom user variables

* ci: fix action tests

* chore: fix imports, remove comments

* chore: remove non-english translations

* fix: remove newline at end of translation.json file

---------

Co-authored-by: Aleš Kůtek <kutekales@gmail.com>

client/src/components/ui/MultiSelect.tsx

@@ -26,6 +26,11 @@ interface MultiSelectProps<T extends string> {
   selectItemsClassName?: string;
   selectedValues: T[];
   setSelectedValues: (values: T[]) => void;
+  renderItemContent?: (
+    value: T,
+    defaultContent: React.ReactNode,
+    isSelected: boolean,
+  ) => React.ReactNode;
 }
 
 function defaultRender<T extends string>(values: T[], placeholder?: string) {
@@ -54,9 +59,9 @@ export default function MultiSelect<T extends string>({
   selectItemsClassName,
   selectedValues = [],
   setSelectedValues,
+  renderItemContent,
 }: MultiSelectProps<T>) {
   const selectRef = useRef<HTMLButtonElement>(null);
-  // const [selectedValues, setSelectedValues] = React.useState<T[]>(defaultSelectedValues);
 
   const handleValueChange = (values: T[]) => {
     setSelectedValues(values);
@@ -105,23 +110,33 @@ export default function MultiSelect<T extends string>({
             popoverClassName,
           )}
         >
-          {items.map((value) => (
-            <SelectItem
-              key={value}
-              value={value}
-              className={cn(
-                'flex items-center gap-2 rounded-lg px-2 py-1.5 hover:cursor-pointer',
-                'scroll-m-1 outline-none transition-colors',
-                'hover:bg-black/[0.075] dark:hover:bg-white/10',
-                'data-[active-item]:bg-black/[0.075] dark:data-[active-item]:bg-white/10',
-                'w-full min-w-0 text-sm',
-                itemClassName,
-              )}
-            >
-              <SelectItemCheck className="text-primary" />
-              <span className="truncate">{value}</span>
-            </SelectItem>
-          ))}
+          {items.map((value) => {
+            const defaultContent = (
+              <>
+                <SelectItemCheck className="text-primary" />
+                <span className="truncate">{value}</span>
+              </>
+            );
+            const isCurrentItemSelected = selectedValues.includes(value);
+            return (
+              <SelectItem
+                key={value}
+                value={value}
+                className={cn(
+                  'flex items-center gap-2 rounded-lg px-2 py-1.5 hover:cursor-pointer',
+                  'scroll-m-1 outline-none transition-colors',
+                  'hover:bg-black/[0.075] dark:hover:bg-white/10',
+                  'data-[active-item]:bg-black/[0.075] dark:data-[active-item]:bg-white/10',
+                  'w-full min-w-0 text-sm',
+                  itemClassName,
+                )}
+              >
+                {renderItemContent
+                  ? renderItemContent(value, defaultContent, isCurrentItemSelected)
+                  : defaultContent}
+              </SelectItem>
+            );
+          })}
         </SelectPopover>
       </SelectProvider>
     </div>