From f6cc394eabc3298916abfa898b16c5d415bacf0f Mon Sep 17 00:00:00 2001
From: andresgit <9771158+andresgit@users.noreply.github.com>
Date: Thu, 15 May 2025 16:35:48 +0300
Subject: [PATCH 01/26] =?UTF-8?q?=F0=9F=8E=A8=20feat:=20add=20`copy-tex`?=
 =?UTF-8?q?=20to=20improve=20copying=20KaTeX=20(#7308)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When selecting equations and using copy paste, uses the correct latex code.

Co-authored-by: Ruben Talstra <RubenTalstra1211@outlook.com>
---
 client/src/main.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/main.jsx b/client/src/main.jsx
index 4c7bde0270..53b483f8d2 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -6,6 +6,7 @@ import './style.css';
 import './mobile.css';
 import { ApiErrorBoundaryProvider } from './hooks/ApiErrorBoundaryContext';
 import 'katex/dist/katex.min.css';
+import 'katex/dist/contrib/copy-tex.js';
 
 const container = document.getElementById('root');
 const root = createRoot(container);

From 621fa6e1aa2330f9d8fa1da6a8706fabbd787202 Mon Sep 17 00:00:00 2001
From: matt burnett <mawburn@users.noreply.github.com>
Date: Thu, 15 May 2025 09:37:14 -0400
Subject: [PATCH 02/26] =?UTF-8?q?=F0=9F=94=83=20refactor:=20`AgentFooter`?=
 =?UTF-8?q?=20to=20conditionally=20render=20buttons=20based=20on=20`active?=
 =?UTF-8?q?Panel`=20(#7306)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SidePanel/Agents/AgentFooter.tsx          | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/client/src/components/SidePanel/Agents/AgentFooter.tsx b/client/src/components/SidePanel/Agents/AgentFooter.tsx
index 062f81d253..75f10a3851 100644
--- a/client/src/components/SidePanel/Agents/AgentFooter.tsx
+++ b/client/src/components/SidePanel/Agents/AgentFooter.tsx
@@ -50,10 +50,12 @@ export default function AgentFooter({
     return localize('com_ui_create');
   };
 
+  const showButtons = activePanel === Panel.builder;
+
   return (
     <div className="mx-1 mb-1 flex w-full flex-col gap-2">
-      {activePanel !== Panel.advanced && <AdvancedButton setActivePanel={setActivePanel} />}
-      {user?.role === SystemRoles.ADMIN && <AdminSettings />}
+      {showButtons && <AdvancedButton setActivePanel={setActivePanel} />}
+      {user?.role === SystemRoles.ADMIN && showButtons && <AdminSettings />}
       {/* Context Button */}
       <div className="flex items-center justify-end gap-2">
         <DeleteButton
@@ -63,13 +65,13 @@ export default function AgentFooter({
         />
         {(agent?.author === user?.id || user?.role === SystemRoles.ADMIN) &&
           hasAccessToShareAgents && (
-          <ShareAgent
-            agent_id={agent_id}
-            agentName={agent?.name ?? ''}
-            projectIds={agent?.projectIds ?? []}
-            isCollaborative={agent?.isCollaborative}
-          />
-        )}
+            <ShareAgent
+              agent_id={agent_id}
+              agentName={agent?.name ?? ''}
+              projectIds={agent?.projectIds ?? []}
+              isCollaborative={agent?.isCollaborative}
+            />
+          )}
         {agent && agent.author === user?.id && <DuplicateAgent agent_id={agent_id} />}
         {/* Submit Button */}
         <button

From 535e7798b36a9ef69ac10710c37a086a5f61c703 Mon Sep 17 00:00:00 2001
From: Ruben Talstra <RubenTalstra1211@outlook.com>
Date: Thu, 15 May 2025 15:38:58 +0200
Subject: [PATCH 03/26] =?UTF-8?q?=F0=9F=9A=80=20feat:=20Add=20`Cloudflare?=
 =?UTF-8?q?=20Turnstile`=20support=20(#5987)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🚀 feat: Add @marsidev/react-turnstile dependency to package.json and package-lock.json

* 🚀 feat: Integrate Cloudflare Turnstile configuration support in AppService and add schema validation

* 🚀 feat: Implemented Cloudflare Turnstile integration in Login and Registration forms

* 🚀 feat: Enhance AppService tests with additional mocks and configuration setups

* 🚀 feat: Comment out outdated config version warning tests in AppService.spec.js

* 🚀 feat: Remove outdated warning tests and add new checks for environment variables and API health

* 🔧 test: Update AppService.spec.js to use expect.anything() for paths validation

* 🔧 test: Refactor AppService.spec.js to streamline mocks and enhance clarity

* 🔧 chore: removed not needed test

* Potential fix for code scanning alert no. 5638: Ensure code is properly formatted, use insertion, deletion, or replacement to obtain desired formatting.

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* Potential fix for code scanning alert no. 5629: Ensure code is properly formatted, use insertion, deletion, or replacement to obtain desired formatting.

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* Potential fix for code scanning alert no. 5642: Ensure code is properly formatted, use insertion, deletion, or replacement to obtain desired formatting.

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* Update turnstile.js

* Potential fix for code scanning alert no. 5634: Ensure code is properly formatted, use insertion, deletion, or replacement to obtain desired formatting.

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* Potential fix for code scanning alert no. 5646: Ensure code is properly formatted, use insertion, deletion, or replacement to obtain desired formatting.

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* Potential fix for code scanning alert no. 5647: Ensure code is properly formatted, use insertion, deletion, or replacement to obtain desired formatting.

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

---------

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
---
 api/server/routes/config.js                 |  1 +
 api/server/services/AppService.js           |  4 +-
 api/server/services/AppService.spec.js      | 11 ++++++
 api/server/services/start/turnstile.js      | 35 ++++++++++++++++++
 client/package.json                         |  1 +
 client/src/components/Auth/LoginForm.tsx    | 26 ++++++++++++-
 client/src/components/Auth/Registration.tsx | 41 +++++++++++++++++----
 librechat.example.yaml                      |  7 ++++
 package-lock.json                           | 11 ++++++
 packages/data-provider/src/config.ts        | 19 ++++++++++
 10 files changed, 145 insertions(+), 11 deletions(-)
 create mode 100644 api/server/services/start/turnstile.js

diff --git a/api/server/routes/config.js b/api/server/routes/config.js
index ebafb05c30..583453fe4a 100644
--- a/api/server/routes/config.js
+++ b/api/server/routes/config.js
@@ -75,6 +75,7 @@ router.get('/', async function (req, res) {
         process.env.SHOW_BIRTHDAY_ICON === '',
       helpAndFaqURL: process.env.HELP_AND_FAQ_URL || 'https://librechat.ai',
       interface: req.app.locals.interfaceConfig,
+      turnstile: req.app.locals.turnstileConfig,
       modelSpecs: req.app.locals.modelSpecs,
       balance: req.app.locals.balance,
       sharedLinksEnabled,
diff --git a/api/server/services/AppService.js b/api/server/services/AppService.js
index 1ad3aaace6..5f119e67aa 100644
--- a/api/server/services/AppService.js
+++ b/api/server/services/AppService.js
@@ -12,6 +12,7 @@ const { initializeFirebase } = require('./Files/Firebase/initialize');
 const loadCustomConfig = require('./Config/loadCustomConfig');
 const handleRateLimits = require('./Config/handleRateLimits');
 const { loadDefaultInterface } = require('./start/interface');
+const { loadTurnstileConfig } = require('./start/turnstile');
 const { azureConfigSetup } = require('./start/azureOpenAI');
 const { processModelSpecs } = require('./start/modelSpecs');
 const { initializeS3 } = require('./Files/S3/initialize');
@@ -23,7 +24,6 @@ const { getMCPManager } = require('~/config');
 const paths = require('~/config/paths');
 
 /**
- *
  * Loads custom config and initializes app-wide variables.
  * @function AppService
  * @param {Express.Application} app - The Express application object.
@@ -74,6 +74,7 @@ const AppService = async (app) => {
   const socialLogins =
     config?.registration?.socialLogins ?? configDefaults?.registration?.socialLogins;
   const interfaceConfig = await loadDefaultInterface(config, configDefaults);
+  const turnstileConfig = loadTurnstileConfig(config, configDefaults);
 
   const defaultLocals = {
     ocr,
@@ -85,6 +86,7 @@ const AppService = async (app) => {
     availableTools,
     imageOutputType,
     interfaceConfig,
+    turnstileConfig,
     balance,
   };
 
diff --git a/api/server/services/AppService.spec.js b/api/server/services/AppService.spec.js
index 465ec9fdd6..81a017e41e 100644
--- a/api/server/services/AppService.spec.js
+++ b/api/server/services/AppService.spec.js
@@ -46,6 +46,12 @@ jest.mock('./ToolService', () => ({
     },
   }),
 }));
+jest.mock('./start/turnstile', () => ({
+  loadTurnstileConfig: jest.fn(() => ({
+    siteKey: 'default-site-key',
+    options: {},
+  })),
+}));
 
 const azureGroups = [
   {
@@ -86,6 +92,10 @@ const azureGroups = [
 
 describe('AppService', () => {
   let app;
+  const mockedTurnstileConfig = {
+    siteKey: 'default-site-key',
+    options: {},
+  };
 
   beforeEach(() => {
     app = { locals: {} };
@@ -107,6 +117,7 @@ describe('AppService', () => {
         sidePanel: true,
         presets: true,
       }),
+      turnstileConfig: mockedTurnstileConfig,
       modelSpecs: undefined,
       availableTools: {
         ExampleTool: {
diff --git a/api/server/services/start/turnstile.js b/api/server/services/start/turnstile.js
new file mode 100644
index 0000000000..ffd4545dae
--- /dev/null
+++ b/api/server/services/start/turnstile.js
@@ -0,0 +1,35 @@
+const { removeNullishValues } = require('librechat-data-provider');
+const { logger } = require('~/config');
+
+/**
+ * Loads and maps the Cloudflare Turnstile configuration.
+ *
+ * Expected config structure:
+ *
+ * turnstile:
+ *   siteKey: "your-site-key-here"
+ *   options:
+ *     language: "auto"    // "auto" or an ISO 639-1 language code (e.g. en)
+ *     size: "normal"      // Options: "normal", "compact", "flexible", or "invisible"
+ *
+ * @param {TCustomConfig | undefined} config - The loaded custom configuration.
+ * @param {TConfigDefaults} configDefaults - The custom configuration default values.
+ * @returns {TCustomConfig['turnstile']} The mapped Turnstile configuration.
+ */
+function loadTurnstileConfig(config, configDefaults) {
+  const { turnstile: customTurnstile = {} } = config ?? {};
+  const { turnstile: defaults = {} } = configDefaults;
+
+  /** @type {TCustomConfig['turnstile']} */
+  const loadedTurnstile = removeNullishValues({
+    siteKey: customTurnstile.siteKey ?? defaults.siteKey,
+    options: customTurnstile.options ?? defaults.options,
+  });
+
+  logger.info('Turnstile configuration loaded:\n' + JSON.stringify(loadedTurnstile, null, 2));
+  return loadedTurnstile;
+}
+
+module.exports = {
+  loadTurnstileConfig,
+};
diff --git a/client/package.json b/client/package.json
index 5fd9729a74..1b33c37919 100644
--- a/client/package.json
+++ b/client/package.json
@@ -34,6 +34,7 @@
     "@dicebear/collection": "^9.2.2",
     "@dicebear/core": "^9.2.2",
     "@headlessui/react": "^2.1.2",
+    "@marsidev/react-turnstile": "^1.1.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.2",
     "@radix-ui/react-checkbox": "^1.0.3",
diff --git a/client/src/components/Auth/LoginForm.tsx b/client/src/components/Auth/LoginForm.tsx
index 2cd62d08b9..030b6323f7 100644
--- a/client/src/components/Auth/LoginForm.tsx
+++ b/client/src/components/Auth/LoginForm.tsx
@@ -1,9 +1,10 @@
 import { useForm } from 'react-hook-form';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
+import { Turnstile } from '@marsidev/react-turnstile';
 import type { TLoginUser, TStartupConfig } from 'librechat-data-provider';
 import type { TAuthContext } from '~/common';
 import { useResendVerificationEmail, useGetStartupConfig } from '~/data-provider';
-import { useLocalize } from '~/hooks';
+import { ThemeContext, useLocalize } from '~/hooks';
 
 type TLoginFormProps = {
   onSubmit: (data: TLoginUser) => void;
@@ -14,6 +15,7 @@ type TLoginFormProps = {
 
 const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error, setError }) => {
   const localize = useLocalize();
+  const { theme } = useContext(ThemeContext);
   const {
     register,
     getValues,
@@ -21,9 +23,11 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
     formState: { errors },
   } = useForm<TLoginUser>();
   const [showResendLink, setShowResendLink] = useState<boolean>(false);
+  const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
 
   const { data: config } = useGetStartupConfig();
   const useUsernameLogin = config?.ldap?.username;
+  const validTheme = theme === 'dark' ? 'dark' : 'light';
 
   useEffect(() => {
     if (error && error.includes('422') && !showResendLink) {
@@ -159,11 +163,29 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
             {localize('com_auth_password_forgot')}
           </a>
         )}
+
+        {/* Render Turnstile only if enabled in startupConfig */}
+        {startupConfig.turnstile && (
+          <div className="my-4 flex justify-center">
+            <Turnstile
+              siteKey={startupConfig.turnstile.siteKey}
+              options={{
+                ...startupConfig.turnstile.options,
+                theme: validTheme,
+              }}
+              onSuccess={(token) => setTurnstileToken(token)}
+              onError={() => setTurnstileToken(null)}
+              onExpire={() => setTurnstileToken(null)}
+            />
+          </div>
+        )}
+
         <div className="mt-6">
           <button
             aria-label={localize('com_auth_continue')}
             data-testid="login-button"
             type="submit"
+            disabled={startupConfig.turnstile ? !turnstileToken : false}
             className="
             w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white
             transition-colors hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700
diff --git a/client/src/components/Auth/Registration.tsx b/client/src/components/Auth/Registration.tsx
index 047808ffea..ab5c945ac8 100644
--- a/client/src/components/Auth/Registration.tsx
+++ b/client/src/components/Auth/Registration.tsx
@@ -1,16 +1,18 @@
 import { useForm } from 'react-hook-form';
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
+import { Turnstile } from '@marsidev/react-turnstile';
 import { useNavigate, useOutletContext, useLocation } from 'react-router-dom';
 import { useRegisterUserMutation } from 'librechat-data-provider/react-query';
 import type { TRegisterUser, TError } from 'librechat-data-provider';
 import type { TLoginLayoutContext } from '~/common';
 import { ErrorMessage } from './ErrorMessage';
 import { Spinner } from '~/components/svg';
-import { useLocalize, TranslationKeys } from '~/hooks';
+import { useLocalize, TranslationKeys, ThemeContext } from '~/hooks';
 
 const Registration: React.FC = () => {
   const navigate = useNavigate();
   const localize = useLocalize();
+  const { theme } = useContext(ThemeContext);
   const { startupConfig, startupConfigError, isFetching } = useOutletContext<TLoginLayoutContext>();
 
   const {
@@ -24,10 +26,12 @@ const Registration: React.FC = () => {
   const [errorMessage, setErrorMessage] = useState<string>('');
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [countdown, setCountdown] = useState<number>(3);
+  const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
 
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
   const token = queryParams.get('token');
+  const validTheme = theme === 'dark' ? 'dark' : 'light';
 
   const registerUser = useRegisterUserMutation({
     onMutate: () => {
@@ -178,17 +182,38 @@ const Registration: React.FC = () => {
               validate: (value: string) =>
                 value === password || localize('com_auth_password_not_match'),
             })}
+
+            {/* Render Turnstile only if enabled in startupConfig */}
+            {startupConfig?.turnstile && (
+              <div className="my-4 flex justify-center">
+                <Turnstile
+                  siteKey={startupConfig.turnstile.siteKey}
+                  options={{
+                    ...startupConfig.turnstile.options,
+                    theme: validTheme,
+                  }}
+                  onSuccess={(token) => setTurnstileToken(token)}
+                  onError={() => setTurnstileToken(null)}
+                  onExpire={() => setTurnstileToken(null)}
+                />
+              </div>
+            )}
+
             <div className="mt-6">
               <button
-                disabled={Object.keys(errors).length > 0}
+                disabled={
+                  Object.keys(errors).length > 0 ||
+                  isSubmitting ||
+                  (startupConfig?.turnstile ? !turnstileToken : false)
+                }
                 type="submit"
                 aria-label="Submit registration"
                 className="
-            w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white
-            transition-colors hover:bg-green-700 focus:outline-none focus:ring-2
-            focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50
-            disabled:hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700
-          "
+                  w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white
+                  transition-colors hover:bg-green-700 focus:outline-none focus:ring-2
+                  focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50
+                  disabled:hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700
+                "
               >
                 {isSubmitting ? <Spinner /> : localize('com_auth_continue')}
               </button>
diff --git a/librechat.example.yaml b/librechat.example.yaml
index 0b4963cb2a..ae14b0faae 100644
--- a/librechat.example.yaml
+++ b/librechat.example.yaml
@@ -71,6 +71,13 @@ interface:
   multiConvo: true
   agents: true
 
+# Example Cloudflare turnstile (optional)
+#turnstile:
+#  siteKey: "your-site-key-here"
+#  options:
+#    language: "auto"    # "auto" or an ISO 639-1 language code (e.g. en)
+#    size: "normal"      # Options: "normal", "compact", "flexible", or "invisible"
+
 # Example Registration Object Structure (optional)
 registration:
   socialLogins: ['github', 'google', 'discord', 'openid', 'facebook', 'apple']
diff --git a/package-lock.json b/package-lock.json
index 5aa383170a..f4690d43c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1073,6 +1073,7 @@
         "@dicebear/collection": "^9.2.2",
         "@dicebear/core": "^9.2.2",
         "@headlessui/react": "^2.1.2",
+        "@marsidev/react-turnstile": "^1.1.0",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-alert-dialog": "^1.0.2",
         "@radix-ui/react-checkbox": "^1.0.3",
@@ -19729,6 +19730,16 @@
       "resolved": "client",
       "link": true
     },
+    "node_modules/@marsidev/react-turnstile": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@marsidev/react-turnstile/-/react-turnstile-1.1.0.tgz",
+      "integrity": "sha512-X7bP9ZYutDd+E+klPYF+/BJHqEyyVkN4KKmZcNRr84zs3DcMoftlMAuoKqNSnqg0HE7NQ1844+TLFSJoztCdSA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^17.0.2 || ^18.0.0 || ^19.0",
+        "react-dom": "^17.0.2 || ^18.0.0 || ^19.0"
+      }
+    },
     "node_modules/@microsoft/eslint-formatter-sarif": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@microsoft/eslint-formatter-sarif/-/eslint-formatter-sarif-3.1.0.tgz",
diff --git a/packages/data-provider/src/config.ts b/packages/data-provider/src/config.ts
index 978aea2520..bdac70a0c6 100644
--- a/packages/data-provider/src/config.ts
+++ b/packages/data-provider/src/config.ts
@@ -505,10 +505,28 @@ export const intefaceSchema = z
 export type TInterfaceConfig = z.infer<typeof intefaceSchema>;
 export type TBalanceConfig = z.infer<typeof balanceSchema>;
 
+export const turnstileOptionsSchema = z
+  .object({
+    language: z.string().default('auto'),
+    size: z.enum(['normal', 'compact', 'flexible', 'invisible']).default('normal'),
+  })
+  .default({
+    language: 'auto',
+    size: 'normal',
+  });
+
+export const turnstileSchema = z.object({
+  siteKey: z.string(),
+  options: turnstileOptionsSchema.optional(),
+});
+
+export type TTurnstileConfig = z.infer<typeof turnstileSchema>;
+
 export type TStartupConfig = {
   appTitle: string;
   socialLogins?: string[];
   interface?: TInterfaceConfig;
+  turnstile?: TTurnstileConfig;
   balance?: TBalanceConfig;
   discordLoginEnabled: boolean;
   facebookLoginEnabled: boolean;
@@ -578,6 +596,7 @@ export const configSchema = z.object({
   filteredTools: z.array(z.string()).optional(),
   mcpServers: MCPServersSchema.optional(),
   interface: intefaceSchema,
+  turnstile: turnstileSchema.optional(),
   fileStrategy: fileSourceSchema.default(FileSources.local),
   actions: z
     .object({

From fe311df96915ea341dc60568dcc5c348f4c0f8bf Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Thu, 15 May 2025 12:17:17 -0400
Subject: [PATCH 04/26] =?UTF-8?q?=F0=9F=94=84=20fix:=20Improve=20MCP=20Con?=
 =?UTF-8?q?nection=20Cleanup=20(#7400)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: linting for mcp related modules

* fix: update `isConnected` method to return a Promise and handle connection state asynchronously to properly handle/cleanup disconnected user connections
---
 packages/data-provider/src/mcp.ts |  7 +++++--
 packages/mcp/src/connection.ts    | 10 ++++++++--
 packages/mcp/src/manager.ts       | 14 +++++++-------
 packages/mcp/src/parsers.ts       | 10 +++++++++-
 4 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/packages/data-provider/src/mcp.ts b/packages/data-provider/src/mcp.ts
index 1fdb6c95f6..8f406fd391 100644
--- a/packages/data-provider/src/mcp.ts
+++ b/packages/data-provider/src/mcp.ts
@@ -85,7 +85,10 @@ export const SSEOptionsSchema = BaseOptionsSchema.extend({
 export const StreamableHTTPOptionsSchema = BaseOptionsSchema.extend({
   type: z.literal('streamable-http'),
   headers: z.record(z.string(), z.string()).optional(),
-  url: z.string().url().refine(
+  url: z
+    .string()
+    .url()
+    .refine(
       (val) => {
         const protocol = new URL(val).protocol;
         return protocol !== 'ws:' && protocol !== 'wss:';
@@ -93,7 +96,7 @@ export const StreamableHTTPOptionsSchema = BaseOptionsSchema.extend({
       {
         message: 'Streamable HTTP URL must not start with ws:// or wss://',
       },
-  ),
+    ),
 });
 
 export const MCPOptionsSchema = z.union([
diff --git a/packages/mcp/src/connection.ts b/packages/mcp/src/connection.ts
index 23b7062dd1..aff0e080ad 100644
--- a/packages/mcp/src/connection.ts
+++ b/packages/mcp/src/connection.ts
@@ -567,8 +567,14 @@ export class MCPConnection extends EventEmitter {
     return this.connectionState;
   }
 
-  public isConnected(): boolean {
-    return this.connectionState === 'connected';
+  public async isConnected(): Promise<boolean> {
+    try {
+      await this.client.ping();
+      return this.connectionState === 'connected';
+    } catch (error) {
+      this.logger?.error(`${this.getLogPrefix()} Ping failed:`, error);
+      return false;
+    }
   }
 
   public getLastError(): Error | null {
diff --git a/packages/mcp/src/manager.ts b/packages/mcp/src/manager.ts
index df74580994..8fe9074b8f 100644
--- a/packages/mcp/src/manager.ts
+++ b/packages/mcp/src/manager.ts
@@ -71,7 +71,7 @@ export class MCPManager {
           const connectionAttempt = this.initializeServer(connection, `[MCP][${serverName}]`);
           await Promise.race([connectionAttempt, connectionTimeout]);
 
-          if (connection.isConnected()) {
+          if (await connection.isConnected()) {
             initializedServers.add(i);
             this.connections.set(serverName, connection); // Store in app-level map
 
@@ -135,7 +135,7 @@ export class MCPManager {
     while (attempts < maxAttempts) {
       try {
         await connection.connect();
-        if (connection.isConnected()) {
+        if (await connection.isConnected()) {
           return;
         }
         throw new Error('Connection attempt succeeded but status is not connected');
@@ -200,7 +200,7 @@ export class MCPManager {
       }
       connection = undefined; // Force creation of a new connection
     } else if (connection) {
-      if (connection.isConnected()) {
+      if (await connection.isConnected()) {
         this.logger.debug(`[MCP][User: ${userId}][${serverName}] Reusing active connection`);
         // Update timestamp on reuse
         this.updateUserLastActivity(userId);
@@ -244,7 +244,7 @@ export class MCPManager {
       );
       await Promise.race([connectionAttempt, connectionTimeout]);
 
-      if (!connection.isConnected()) {
+      if (!(await connection.isConnected())) {
         throw new Error('Failed to establish connection after initialization attempt.');
       }
 
@@ -342,7 +342,7 @@ export class MCPManager {
   public async mapAvailableTools(availableTools: t.LCAvailableTools): Promise<void> {
     for (const [serverName, connection] of this.connections.entries()) {
       try {
-        if (connection.isConnected() !== true) {
+        if ((await connection.isConnected()) !== true) {
           this.logger.warn(
             `[MCP][${serverName}] Connection not established. Skipping tool mapping.`,
           );
@@ -375,7 +375,7 @@ export class MCPManager {
 
     for (const [serverName, connection] of this.connections.entries()) {
       try {
-        if (connection.isConnected() !== true) {
+        if ((await connection.isConnected()) !== true) {
           this.logger.warn(
             `[MCP][${serverName}] Connection not established. Skipping manifest loading.`,
           );
@@ -443,7 +443,7 @@ export class MCPManager {
         }
       }
 
-      if (!connection.isConnected()) {
+      if (!(await connection.isConnected())) {
         // This might happen if getUserConnection failed silently or app connection dropped
         throw new McpError(
           ErrorCode.InternalError, // Use InternalError for connection issues
diff --git a/packages/mcp/src/parsers.ts b/packages/mcp/src/parsers.ts
index b77c7efa19..3350148a59 100644
--- a/packages/mcp/src/parsers.ts
+++ b/packages/mcp/src/parsers.ts
@@ -1,5 +1,13 @@
 import type * as t from './types/mcp';
-const RECOGNIZED_PROVIDERS = new Set(['google', 'anthropic', 'openai', 'openrouter', 'xai', 'deepseek', 'ollama']);
+const RECOGNIZED_PROVIDERS = new Set([
+  'google',
+  'anthropic',
+  'openai',
+  'openrouter',
+  'xai',
+  'deepseek',
+  'ollama',
+]);
 const CONTENT_ARRAY_PROVIDERS = new Set(['google', 'anthropic', 'openai']);
 
 const imageFormatters: Record<string, undefined | t.ImageFormatter> = {

From 7a91f6ca62865b0e6b94b816e59f0f39382a9832 Mon Sep 17 00:00:00 2001
From: Ruben Talstra <RubenTalstra1211@outlook.com>
Date: Thu, 15 May 2025 22:25:10 +0200
Subject: [PATCH 05/26] =?UTF-8?q?=F0=9F=94=92=20feat:=20Add=20Content=20Se?=
 =?UTF-8?q?curity=20Policy=20using=20Helmet=20middleware=20(#7377)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🔒 feat: Add Content Security Policy using Helmet middleware

* 🔒 feat: Set trust proxy and refine Content Security Policy directives

* 🎨 feat: add `copy-tex` to improve copying KaTeX (#7308)

When selecting equations and using copy paste, uses the correct latex code.

Co-authored-by: Ruben Talstra <RubenTalstra1211@outlook.com>

* 🔃 refactor: `AgentFooter` to conditionally render buttons based on `activePanel` (#7306)

* 🚀 feat: Add `Cloudflare Turnstile` support (#5987)

* 🚀 feat: Add @marsidev/react-turnstile dependency to package.json and package-lock.json

* 🚀 feat: Integrate Cloudflare Turnstile configuration support in AppService and add schema validation

* 🚀 feat: Implemented Cloudflare Turnstile integration in Login and Registration forms

* 🚀 feat: Enhance AppService tests with additional mocks and configuration setups

* 🚀 feat: Comment out outdated config version warning tests in AppService.spec.js

* 🚀 feat: Remove outdated warning tests and add new checks for environment variables and API health

* 🔧 test: Update AppService.spec.js to use expect.anything() for paths validation

* 🔧 test: Refactor AppService.spec.js to streamline mocks and enhance clarity

* 🔧 chore: removed not needed test

* Potential fix for code scanning alert no. 5638: Ensure code is properly formatted, use insertion, deletion, or replacement to obtain desired formatting.

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* Potential fix for code scanning alert no. 5629: Ensure code is properly formatted, use insertion, deletion, or replacement to obtain desired formatting.

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* Potential fix for code scanning alert no. 5642: Ensure code is properly formatted, use insertion, deletion, or replacement to obtain desired formatting.

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* Update turnstile.js

* Potential fix for code scanning alert no. 5634: Ensure code is properly formatted, use insertion, deletion, or replacement to obtain desired formatting.

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* Potential fix for code scanning alert no. 5646: Ensure code is properly formatted, use insertion, deletion, or replacement to obtain desired formatting.

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* Potential fix for code scanning alert no. 5647: Ensure code is properly formatted, use insertion, deletion, or replacement to obtain desired formatting.

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

---------

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* 🔒 feat: Refactor Content Security Policy setup to use Helmet middleware with custom directives

* 🔒 feat: Enhance Content Security Policy to include Sandpack Bundler URL

* 🔒 feat: Update Content Security Policy and integrate Turnstile captcha support

---------

Co-authored-by: andresgit <9771158+andresgit@users.noreply.github.com>
Co-authored-by: matt burnett <mawburn@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
---
 api/package.json                            |  1 +
 api/server/index.js                         | 62 +++++++++++++++++----
 api/server/services/start/turnstile.js      | 11 +++-
 client/src/components/Auth/LoginForm.tsx    | 42 ++++----------
 client/src/components/Auth/Registration.tsx | 27 +++------
 package-lock.json                           | 10 ++++
 6 files changed, 93 insertions(+), 60 deletions(-)

diff --git a/api/package.json b/api/package.json
index bcf94a6cad..8782457dbc 100644
--- a/api/package.json
+++ b/api/package.json
@@ -71,6 +71,7 @@
     "firebase": "^11.0.2",
     "googleapis": "^126.0.1",
     "handlebars": "^4.7.7",
+    "helmet": "^8.1.0",
     "https-proxy-agent": "^7.0.6",
     "ioredis": "^5.3.2",
     "js-yaml": "^4.1.0",
diff --git a/api/server/index.js b/api/server/index.js
index cd0bdd3f88..3c8d3dd951 100644
--- a/api/server/index.js
+++ b/api/server/index.js
@@ -2,6 +2,7 @@ require('dotenv').config();
 const path = require('path');
 require('module-alias')({ base: path.resolve(__dirname, '..') });
 const cors = require('cors');
+const helmet = require('helmet');
 const axios = require('axios');
 const express = require('express');
 const compression = require('compression');
@@ -22,7 +23,15 @@ const staticCache = require('./utils/staticCache');
 const noIndex = require('./middleware/noIndex');
 const routes = require('./routes');
 
-const { PORT, HOST, ALLOW_SOCIAL_LOGIN, DISABLE_COMPRESSION, TRUST_PROXY } = process.env ?? {};
+const {
+  PORT,
+  HOST,
+  ALLOW_SOCIAL_LOGIN,
+  DISABLE_COMPRESSION,
+  TRUST_PROXY,
+  SANDPACK_BUNDLER_URL,
+  SANDPACK_STATIC_BUNDLER_URL,
+} = process.env ?? {};
 
 const port = Number(PORT) || 3080;
 const host = HOST || 'localhost';
@@ -38,6 +47,8 @@ const startServer = async () => {
 
   const app = express();
   app.disable('x-powered-by');
+  app.set('trust proxy', trusted_proxy);
+
   await AppService(app);
 
   const indexPath = path.join(app.locals.paths.dist, 'index.html');
@@ -49,23 +60,54 @@ const startServer = async () => {
   app.use(noIndex);
   app.use(errorController);
   app.use(express.json({ limit: '3mb' }));
-  app.use(mongoSanitize());
   app.use(express.urlencoded({ extended: true, limit: '3mb' }));
-  app.use(staticCache(app.locals.paths.dist));
-  app.use(staticCache(app.locals.paths.fonts));
-  app.use(staticCache(app.locals.paths.assets));
-  app.set('trust proxy', trusted_proxy);
+  app.use(mongoSanitize());
   app.use(cors());
   app.use(cookieParser());
+  app.use(
+    helmet({
+      contentSecurityPolicy: {
+        useDefaults: false,
+        directives: {
+          defaultSrc: ["'self'"],
+          scriptSrc: ["'self'", "'unsafe-inline'", 'https://challenges.cloudflare.com'],
+          styleSrc: ["'self'", "'unsafe-inline'"],
+          fontSrc: ["'self'", 'data:'],
+          objectSrc: ["'none'"],
+          imgSrc: ["'self'", 'data:'],
+          mediaSrc: ["'self'", 'data:', 'blob:'],
+          connectSrc: ["'self'"],
+          frameSrc: [
+            "'self'",
+            'https://challenges.cloudflare.com',
+            'https://codesandbox.io',
+            ...(SANDPACK_BUNDLER_URL ? [SANDPACK_BUNDLER_URL] : []),
+            ...(SANDPACK_STATIC_BUNDLER_URL ? [SANDPACK_STATIC_BUNDLER_URL] : []),
+          ],
+          frameAncestors: [
+            "'self'",
+            'https://codesandbox.io',
+            ...(SANDPACK_BUNDLER_URL ? [SANDPACK_BUNDLER_URL] : []),
+            ...(SANDPACK_STATIC_BUNDLER_URL ? [SANDPACK_STATIC_BUNDLER_URL] : []),
+          ],
+        },
+      },
+    }),
+  );
 
   if (!isEnabled(DISABLE_COMPRESSION)) {
     app.use(compression());
+  } else {
+    console.warn('Response compression has been disabled via DISABLE_COMPRESSION.');
   }
 
+  // Serve static assets with aggressive caching
+  app.use(staticCache(app.locals.paths.dist));
+  app.use(staticCache(app.locals.paths.fonts));
+  app.use(staticCache(app.locals.paths.assets));
+
   if (!ALLOW_SOCIAL_LOGIN) {
-    console.warn(
-      'Social logins are disabled. Set Environment Variable "ALLOW_SOCIAL_LOGIN" to true to enable them.',
-    );
+    console.warn('Social logins are disabled. Set ALLOW_SOCIAL_LOGIN=true to enable them.');
   }
 
   /* OAUTH */
@@ -128,7 +170,7 @@ const startServer = async () => {
   });
 
   app.listen(port, host, () => {
-    if (host == '0.0.0.0') {
+    if (host === '0.0.0.0') {
       logger.info(
         `Server listening on all interfaces at port ${port}. Use http://localhost:${port} to access it`,
       );
diff --git a/api/server/services/start/turnstile.js b/api/server/services/start/turnstile.js
index ffd4545dae..be9e5f83c7 100644
--- a/api/server/services/start/turnstile.js
+++ b/api/server/services/start/turnstile.js
@@ -26,7 +26,16 @@ function loadTurnstileConfig(config, configDefaults) {
     options: customTurnstile.options ?? defaults.options,
   });
 
-  logger.info('Turnstile configuration loaded:\n' + JSON.stringify(loadedTurnstile, null, 2));
+  const enabled = Boolean(loadedTurnstile.siteKey);
+
+  if (enabled) {
+    logger.info(
+      'Turnstile is ENABLED with configuration:\n' + JSON.stringify(loadedTurnstile, null, 2),
+    );
+  } else {
+    logger.info('Turnstile is DISABLED (no siteKey provided).');
+  }
+
   return loadedTurnstile;
 }
 
diff --git a/client/src/components/Auth/LoginForm.tsx b/client/src/components/Auth/LoginForm.tsx
index 030b6323f7..e34ec3c94d 100644
--- a/client/src/components/Auth/LoginForm.tsx
+++ b/client/src/components/Auth/LoginForm.tsx
@@ -16,6 +16,7 @@ type TLoginFormProps = {
 const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error, setError }) => {
   const localize = useLocalize();
   const { theme } = useContext(ThemeContext);
+
   const {
     register,
     getValues,
@@ -28,6 +29,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
   const { data: config } = useGetStartupConfig();
   const useUsernameLogin = config?.ldap?.username;
   const validTheme = theme === 'dark' ? 'dark' : 'light';
+  const requireCaptcha = Boolean(startupConfig.turnstile?.siteKey);
 
   useEffect(() => {
     if (error && error.includes('422') && !showResendLink) {
@@ -100,20 +102,12 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
                 },
               })}
               aria-invalid={!!errors.email}
-              className="
-                webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light
-                bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-none
-              "
+              className="peer w-full rounded-2xl border border-border-light bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary transition-colors duration-200 focus:border-green-500 focus:outline-none"
               placeholder=" "
             />
             <label
               htmlFor="email"
-              className="
-                absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200
-                peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100
-                peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-600 dark:peer-focus:text-green-500
-                rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4
-                "
+              className="absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-600 dark:peer-focus:text-green-500"
             >
               {useUsernameLogin
                 ? localize('com_auth_username').replace(/ \(.*$/, '')
@@ -135,20 +129,12 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
                 maxLength: { value: 128, message: localize('com_auth_password_max_length') },
               })}
               aria-invalid={!!errors.password}
-              className="
-                webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light
-                bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-none
-                "
+              className="peer w-full rounded-2xl border border-border-light bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary transition-colors duration-200 focus:border-green-500 focus:outline-none"
               placeholder=" "
             />
             <label
               htmlFor="password"
-              className="
-                absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200
-                peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100
-                peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-600 dark:peer-focus:text-green-500
-                rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4
-                "
+              className="absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-600 dark:peer-focus:text-green-500"
             >
               {localize('com_auth_password')}
             </label>
@@ -164,16 +150,15 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
           </a>
         )}
 
-        {/* Render Turnstile only if enabled in startupConfig */}
-        {startupConfig.turnstile && (
+        {requireCaptcha && (
           <div className="my-4 flex justify-center">
             <Turnstile
-              siteKey={startupConfig.turnstile.siteKey}
+              siteKey={startupConfig.turnstile!.siteKey}
               options={{
-                ...startupConfig.turnstile.options,
+                ...startupConfig.turnstile!.options,
                 theme: validTheme,
               }}
-              onSuccess={(token) => setTurnstileToken(token)}
+              onSuccess={setTurnstileToken}
               onError={() => setTurnstileToken(null)}
               onExpire={() => setTurnstileToken(null)}
             />
@@ -185,11 +170,8 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
             aria-label={localize('com_auth_continue')}
             data-testid="login-button"
             type="submit"
-            disabled={startupConfig.turnstile ? !turnstileToken : false}
-            className="
-            w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white
-            transition-colors hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700
-          "
+            disabled={requireCaptcha && !turnstileToken}
+            className="w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:opacity-50 disabled:hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700"
           >
             {localize('com_auth_continue')}
           </button>
diff --git a/client/src/components/Auth/Registration.tsx b/client/src/components/Auth/Registration.tsx
index ab5c945ac8..8e425da2c6 100644
--- a/client/src/components/Auth/Registration.tsx
+++ b/client/src/components/Auth/Registration.tsx
@@ -33,6 +33,9 @@ const Registration: React.FC = () => {
   const token = queryParams.get('token');
   const validTheme = theme === 'dark' ? 'dark' : 'light';
 
+  // only require captcha if we have a siteKey
+  const requireCaptcha = Boolean(startupConfig?.turnstile?.siteKey);
+
   const registerUser = useRegisterUserMutation({
     onMutate: () => {
       setIsSubmitting(true);
@@ -73,21 +76,13 @@ const Registration: React.FC = () => {
             validation,
           )}
           aria-invalid={!!errors[id]}
-          className="
-            webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light
-            bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-none
-          "
+          className="webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-none"
           placeholder=" "
           data-testid={id}
         />
         <label
           htmlFor={id}
-          className="
-            absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200
-            peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100
-            peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-500
-            rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4
-          "
+          className="absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-500 rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4"
         >
           {localize(label)}
         </label>
@@ -183,8 +178,7 @@ const Registration: React.FC = () => {
                 value === password || localize('com_auth_password_not_match'),
             })}
 
-            {/* Render Turnstile only if enabled in startupConfig */}
-            {startupConfig?.turnstile && (
+            {startupConfig?.turnstile?.siteKey && (
               <div className="my-4 flex justify-center">
                 <Turnstile
                   siteKey={startupConfig.turnstile.siteKey}
@@ -204,16 +198,11 @@ const Registration: React.FC = () => {
                 disabled={
                   Object.keys(errors).length > 0 ||
                   isSubmitting ||
-                  (startupConfig?.turnstile ? !turnstileToken : false)
+                  (requireCaptcha && !turnstileToken)
                 }
                 type="submit"
                 aria-label="Submit registration"
-                className="
-                  w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white
-                  transition-colors hover:bg-green-700 focus:outline-none focus:ring-2
-                  focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50
-                  disabled:hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700
-                "
+                className="w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50 disabled:hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700"
               >
                 {isSubmitting ? <Spinner /> : localize('com_auth_continue')}
               </button>
diff --git a/package-lock.json b/package-lock.json
index f4690d43c0..fd5e6ab75f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -87,6 +87,7 @@
         "firebase": "^11.0.2",
         "googleapis": "^126.0.1",
         "handlebars": "^4.7.7",
+        "helmet": "^8.1.0",
         "https-proxy-agent": "^7.0.6",
         "ioredis": "^5.3.2",
         "js-yaml": "^4.1.0",
@@ -31510,6 +31511,15 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/helmet": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/helmet/-/helmet-8.1.0.tgz",
+      "integrity": "sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/highlight.js": {
       "version": "11.8.0",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.8.0.tgz",

From 2f4a03b581ab72997299acf19e8986d8ca06412d Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Thu, 15 May 2025 17:46:48 -0400
Subject: [PATCH 06/26] =?UTF-8?q?=F0=9F=9B=A1=EF=B8=8F=20fix:=20Preset=20a?=
 =?UTF-8?q?nd=20Validation=20Logic=20for=20URL=20Query=20Params=20(#7407)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore(store/families): linting

* refactor: Update `createChatSearchParams` to use `tQueryParamsSchema` for allowed parameters and add `modelLabel` to schema

* refactor: Enhance `useQueryParams` to streamline parameter processing and improve submission handling

* chore: linting

* fix: Add `disableParams` option to conversation handling and related schemas to prevent search params from updating due to use of default preset

* fix: Update `createChatSearchParams` to correctly ignore `agent_id` when it matches `EPHEMERAL_AGENT_ID`

* chore: revert modelLabel addition to query params, as no longer necessary due to `disableParams`

* fix: Refine logic for `disableParams` to ensure correct handling of active preset comparison

* fix: Add `disableParams` option to `NewConversationParams` and update related hooks for preset handling

* fix: Refactor validation logic in `validateSettingDefinitions` to improve handling of `includeInput` and update conversation schema

* fix: Bump version of `librechat-data-provider` to 0.7.83
---
 client/src/common/types.ts                    |  1 +
 .../components/Chat/Input/HeaderOptions.tsx   | 26 ++++----
 client/src/hooks/Conversations/usePresets.ts  |  9 ++-
 client/src/hooks/Input/useQueryParams.ts      | 63 ++++++++++---------
 client/src/hooks/Input/useSelectMention.ts    |  8 ++-
 client/src/hooks/useNewConvo.ts               | 25 ++++++--
 client/src/store/families.ts                  | 45 ++++++-------
 client/src/utils/createChatSearchParams.ts    | 50 +++++----------
 package-lock.json                             |  2 +-
 packages/data-provider/package.json           |  2 +-
 packages/data-provider/src/config.ts          |  1 +
 packages/data-provider/src/generate.ts        |  5 +-
 packages/data-provider/src/schemas.ts         |  1 +
 13 files changed, 126 insertions(+), 112 deletions(-)

diff --git a/client/src/common/types.ts b/client/src/common/types.ts
index cd8b45f6b7..ab52bfb007 100644
--- a/client/src/common/types.ts
+++ b/client/src/common/types.ts
@@ -535,6 +535,7 @@ export type NewConversationParams = {
   buildDefault?: boolean;
   keepLatestMessage?: boolean;
   keepAddedConvos?: boolean;
+  disableParams?: boolean;
 };
 
 export type ConvoGenerator = (params: NewConversationParams) => void | t.TConversation;
diff --git a/client/src/components/Chat/Input/HeaderOptions.tsx b/client/src/components/Chat/Input/HeaderOptions.tsx
index 2dcca3c1f2..ac4b039768 100644
--- a/client/src/components/Chat/Input/HeaderOptions.tsx
+++ b/client/src/components/Chat/Input/HeaderOptions.tsx
@@ -79,19 +79,19 @@ export default function HeaderOptions({
               {!noSettings[endpoint] &&
                 interfaceConfig?.parameters === true &&
                 paramEndpoint === false && (
-                <TooltipAnchor
-                  id="parameters-button"
-                  aria-label={localize('com_ui_model_parameters')}
-                  description={localize('com_ui_model_parameters')}
-                  tabIndex={0}
-                  role="button"
-                  onClick={triggerAdvancedMode}
-                  data-testid="parameters-button"
-                  className="inline-flex size-10 items-center justify-center rounded-lg border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
-                >
-                  <Settings2 size={16} aria-label="Settings/Parameters Icon" />
-                </TooltipAnchor>
-              )}
+                  <TooltipAnchor
+                    id="parameters-button"
+                    aria-label={localize('com_ui_model_parameters')}
+                    description={localize('com_ui_model_parameters')}
+                    tabIndex={0}
+                    role="button"
+                    onClick={triggerAdvancedMode}
+                    data-testid="parameters-button"
+                    className="inline-flex size-10 items-center justify-center rounded-lg border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
+                  >
+                    <Settings2 size={16} aria-label="Settings/Parameters Icon" />
+                  </TooltipAnchor>
+                )}
             </div>
             {interfaceConfig?.parameters === true && paramEndpoint === false && (
               <OptionsPopover
diff --git a/client/src/hooks/Conversations/usePresets.ts b/client/src/hooks/Conversations/usePresets.ts
index 3c30cb6d65..a0ff9a2517 100644
--- a/client/src/hooks/Conversations/usePresets.ts
+++ b/client/src/hooks/Conversations/usePresets.ts
@@ -58,10 +58,11 @@ export default function usePresets() {
     }
     setDefaultPreset(defaultPreset);
     if (!conversation?.conversationId || conversation.conversationId === 'new') {
-      newConversation({ preset: defaultPreset, modelsData });
+      newConversation({ preset: defaultPreset, modelsData, disableParams: true });
     }
     hasLoaded.current = true;
     // dependencies are stable and only needed once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [presetsQuery.data, user, modelsData]);
 
   const setPresets = useCallback(
@@ -102,7 +103,7 @@ export default function usePresets() {
       if (data.defaultPreset && data.presetId !== _defaultPreset?.presetId) {
         message = `${toastTitle} ${localize('com_endpoint_preset_default')}`;
         setDefaultPreset(data);
-        newConversation({ preset: data });
+        newConversation({ preset: data, disableParams: true });
       } else if (preset.defaultPreset === false) {
         setDefaultPreset(null);
         message = `${toastTitle} ${localize('com_endpoint_preset_default_removed')}`;
@@ -185,6 +186,7 @@ export default function usePresets() {
     newPreset.iconURL = newPreset.iconURL ?? null;
     newPreset.modelLabel = newPreset.modelLabel ?? null;
     const isModular = isCurrentModular && isNewModular && shouldSwitch;
+    const disableParams = newPreset.defaultPreset === true;
     if (isExistingConversation && isModular) {
       const currentConvo = getDefaultConversation({
         /* target endpointType is necessary to avoid endpoint mixing */
@@ -205,11 +207,12 @@ export default function usePresets() {
         preset: currentConvo,
         keepLatestMessage: true,
         keepAddedConvos: true,
+        disableParams,
       });
       return;
     }
 
-    newConversation({ preset: newPreset, keepAddedConvos: isModular });
+    newConversation({ preset: newPreset, keepAddedConvos: isModular, disableParams });
   };
 
   const onChangePreset = (preset: TPreset) => {
diff --git a/client/src/hooks/Input/useQueryParams.ts b/client/src/hooks/Input/useQueryParams.ts
index 53bd4bc9ae..52794a745d 100644
--- a/client/src/hooks/Input/useQueryParams.ts
+++ b/client/src/hooks/Input/useQueryParams.ts
@@ -258,35 +258,6 @@ export default function useQueryParams({
     })();
   }, [methods, submitMessage, conversation]);
 
-  useEffect(() => {
-    // Only proceed if we've already processed URL parameters but haven't yet handled submission
-    if (
-      !processedRef.current ||
-      submissionHandledRef.current ||
-      settingsAppliedRef.current ||
-      !validSettingsRef.current ||
-      !conversation
-    ) {
-      return;
-    }
-
-    const allSettingsApplied = areSettingsApplied();
-
-    if (allSettingsApplied) {
-      settingsAppliedRef.current = true;
-
-      if (pendingSubmitRef.current) {
-        if (settingsTimeoutRef.current) {
-          clearTimeout(settingsTimeoutRef.current);
-          settingsTimeoutRef.current = null;
-        }
-
-        console.log('Settings fully applied, processing submission');
-        processSubmission();
-      }
-    }
-  }, [conversation, processSubmission, areSettingsApplied]);
-
   useEffect(() => {
     const processQueryParams = () => {
       const queryParams: Record<string, string> = {};
@@ -332,14 +303,15 @@ export default function useQueryParams({
 
       /** Mark processing as complete and clean up as needed */
       const success = () => {
-        const currentParams = new URLSearchParams(searchParams.toString());
+        const paramString = searchParams.toString();
+        const currentParams = new URLSearchParams(paramString);
         currentParams.delete('prompt');
         currentParams.delete('q');
         currentParams.delete('submit');
 
         setSearchParams(currentParams, { replace: true });
         processedRef.current = true;
-        console.log('Parameters processed successfully');
+        console.log('Parameters processed successfully', paramString);
         clearInterval(intervalId);
 
         // Only clean URL if there's no pending submission
@@ -417,4 +389,33 @@ export default function useQueryParams({
     queryClient,
     processSubmission,
   ]);
+
+  useEffect(() => {
+    // Only proceed if we've already processed URL parameters but haven't yet handled submission
+    if (
+      !processedRef.current ||
+      submissionHandledRef.current ||
+      settingsAppliedRef.current ||
+      !validSettingsRef.current ||
+      !conversation
+    ) {
+      return;
+    }
+
+    const allSettingsApplied = areSettingsApplied();
+
+    if (allSettingsApplied) {
+      settingsAppliedRef.current = true;
+
+      if (pendingSubmitRef.current) {
+        if (settingsTimeoutRef.current) {
+          clearTimeout(settingsTimeoutRef.current);
+          settingsTimeoutRef.current = null;
+        }
+
+        console.log('Settings fully applied, processing submission');
+        processSubmission();
+      }
+    }
+  }, [conversation, processSubmission, areSettingsApplied]);
 }
diff --git a/client/src/hooks/Input/useSelectMention.ts b/client/src/hooks/Input/useSelectMention.ts
index af61447480..a5be633da0 100644
--- a/client/src/hooks/Input/useSelectMention.ts
+++ b/client/src/hooks/Input/useSelectMention.ts
@@ -225,6 +225,7 @@ export default function useSelectMention({
       newPreset.iconURL = newPreset.iconURL ?? null;
       newPreset.modelLabel = newPreset.modelLabel ?? null;
       const isModular = isCurrentModular && isNewModular && shouldSwitch;
+      const disableParams = newPreset.defaultPreset === true;
       if (isExistingConversation && isModular) {
         template.endpointType = newEndpointType as EModelEndpoint | undefined;
         template.spec = null;
@@ -244,12 +245,17 @@ export default function useSelectMention({
           preset: newPreset,
           keepLatestMessage: true,
           keepAddedConvos: true,
+          disableParams,
         });
         return;
       }
 
       logger.info('conversation', 'Switching conversation to new preset', template);
-      newConversation({ preset: newPreset, keepAddedConvos: isModular });
+      newConversation({
+        preset: newPreset,
+        keepAddedConvos: isModular,
+        disableParams,
+      });
     },
     [
       modularChat,
diff --git a/client/src/hooks/useNewConvo.ts b/client/src/hooks/useNewConvo.ts
index 8867709a1e..ab2d177428 100644
--- a/client/src/hooks/useNewConvo.ts
+++ b/client/src/hooks/useNewConvo.ts
@@ -71,6 +71,7 @@ const useNewConvo = (index = 0) => {
         keepLatestMessage?: boolean,
         keepAddedConvos?: boolean,
         disableFocus?: boolean,
+        _disableParams?: boolean,
       ) => {
         const modelsConfig = modelsData ?? modelsQuery.data;
         const { endpoint = null } = conversation;
@@ -87,6 +88,12 @@ const useNewConvo = (index = 0) => {
             ? defaultPreset
             : preset;
 
+        const disableParams =
+          _disableParams ??
+          (activePreset?.presetId != null &&
+            activePreset.presetId &&
+            activePreset.presetId === defaultPreset?.presetId);
+
         if (buildDefaultConversation) {
           let defaultEndpoint = getDefaultEndpoint({
             convoSetup: activePreset ?? conversation,
@@ -148,6 +155,10 @@ const useNewConvo = (index = 0) => {
           });
         }
 
+        if (disableParams === true) {
+          conversation.disableParams = true;
+        }
+
         if (!(keepAddedConvos ?? false)) {
           clearAllConversations(true);
         }
@@ -160,7 +171,7 @@ const useNewConvo = (index = 0) => {
           );
           setConversation({
             ...conversation,
-            conversationId: 'new',
+            conversationId: Constants.NEW_CONVO as string,
           });
         } else {
           logger.log('conversation', 'Setting conversation from `useNewConvo`', conversation);
@@ -205,6 +216,7 @@ const useNewConvo = (index = 0) => {
       buildDefault = true,
       keepLatestMessage = false,
       keepAddedConvos = false,
+      disableParams,
     }: {
       template?: Partial<TConversation>;
       preset?: Partial<TPreset>;
@@ -213,6 +225,7 @@ const useNewConvo = (index = 0) => {
       disableFocus?: boolean;
       keepLatestMessage?: boolean;
       keepAddedConvos?: boolean;
+      disableParams?: boolean;
     } = {}) {
       pauseGlobalAudio();
       if (!saveBadgesState) {
@@ -282,17 +295,19 @@ const useNewConvo = (index = 0) => {
         keepLatestMessage,
         keepAddedConvos,
         disableFocus,
+        disableParams,
       );
     },
     [
-      pauseGlobalAudio,
-      startupConfig,
-      saveDrafts,
-      switchToConversation,
       files,
       setFiles,
+      saveDrafts,
       mutateAsync,
       resetBadges,
+      startupConfig,
+      saveBadgesState,
+      pauseGlobalAudio,
+      switchToConversation,
     ],
   );
 
diff --git a/client/src/store/families.ts b/client/src/store/families.ts
index 37e2eaa3d2..947b77a428 100644
--- a/client/src/store/families.ts
+++ b/client/src/store/families.ts
@@ -106,10 +106,13 @@ const conversationByIndex = atomFamily<TConversation | null, string | number>({
           JSON.stringify(newValue),
         );
 
+        const disableParams = newValue.disableParams === true;
         const shouldUpdateParams =
+          index === 0 &&
+          !disableParams &&
           newValue.createdAt === '' &&
           JSON.stringify(newValue) !== JSON.stringify(oldValue) &&
-          (oldValue as TConversation)?.conversationId === 'new';
+          (oldValue as TConversation)?.conversationId === Constants.NEW_CONVO;
 
         if (shouldUpdateParams) {
           const newParams = createChatSearchParams(newValue);
@@ -299,10 +302,10 @@ const conversationByKeySelector = selectorFamily({
   key: 'conversationByKeySelector',
   get:
     (index: string | number) =>
-      ({ get }) => {
-        const conversation = get(conversationByIndex(index));
-        return conversation;
-      },
+    ({ get }) => {
+      const conversation = get(conversationByIndex(index));
+      return conversation;
+    },
 });
 
 function useClearSubmissionState() {
@@ -361,24 +364,24 @@ const updateConversationSelector = selectorFamily({
   get: () => () => null as Partial<TConversation> | null,
   set:
     (conversationId: string) =>
-      ({ set, get }, newPartialConversation) => {
-        if (newPartialConversation instanceof DefaultValue) {
-          return;
-        }
+    ({ set, get }, newPartialConversation) => {
+      if (newPartialConversation instanceof DefaultValue) {
+        return;
+      }
 
-        const keys = get(conversationKeysAtom);
-        keys.forEach((key) => {
-          set(conversationByIndex(key), (prevConversation) => {
-            if (prevConversation && prevConversation.conversationId === conversationId) {
-              return {
-                ...prevConversation,
-                ...newPartialConversation,
-              };
-            }
-            return prevConversation;
-          });
+      const keys = get(conversationKeysAtom);
+      keys.forEach((key) => {
+        set(conversationByIndex(key), (prevConversation) => {
+          if (prevConversation && prevConversation.conversationId === conversationId) {
+            return {
+              ...prevConversation,
+              ...newPartialConversation,
+            };
+          }
+          return prevConversation;
         });
-      },
+      });
+    },
 });
 
 export default {
diff --git a/client/src/utils/createChatSearchParams.ts b/client/src/utils/createChatSearchParams.ts
index a25ce284cf..c279a5e8ff 100644
--- a/client/src/utils/createChatSearchParams.ts
+++ b/client/src/utils/createChatSearchParams.ts
@@ -1,6 +1,12 @@
-import { isAgentsEndpoint, isAssistantsEndpoint, Constants } from 'librechat-data-provider';
+import {
+  Constants,
+  isAgentsEndpoint,
+  tQueryParamsSchema,
+  isAssistantsEndpoint,
+} from 'librechat-data-provider';
 import type { TConversation, TPreset } from 'librechat-data-provider';
 
+const allowedParams = Object.keys(tQueryParamsSchema.shape);
 export default function createChatSearchParams(
   input: TConversation | TPreset | Record<string, string> | null,
 ): URLSearchParams {
@@ -10,25 +16,6 @@ export default function createChatSearchParams(
 
   const params = new URLSearchParams();
 
-  const allowedParams = [
-    'endpoint',
-    'model',
-    'temperature',
-    'presence_penalty',
-    'frequency_penalty',
-    'stop',
-    'top_p',
-    'max_tokens',
-    'topP',
-    'topK',
-    'maxOutputTokens',
-    'promptCache',
-    'region',
-    'maxTokens',
-    'agent_id',
-    'assistant_id',
-  ];
-
   if (input && typeof input === 'object' && !('endpoint' in input) && !('model' in input)) {
     Object.entries(input as Record<string, string>).forEach(([key, value]) => {
       if (value != null && allowedParams.includes(key)) {
@@ -64,20 +51,15 @@ export default function createChatSearchParams(
     params.set('model', conversation.model);
   }
 
-  const paramMap = {
-    temperature: conversation.temperature,
-    presence_penalty: conversation.presence_penalty,
-    frequency_penalty: conversation.frequency_penalty,
-    stop: conversation.stop,
-    top_p: conversation.top_p,
-    max_tokens: conversation.max_tokens,
-    topP: conversation.topP,
-    topK: conversation.topK,
-    maxOutputTokens: conversation.maxOutputTokens,
-    promptCache: conversation.promptCache,
-    region: conversation.region,
-    maxTokens: conversation.maxTokens,
-  };
+  const paramMap: Record<string, any> = {};
+  allowedParams.forEach((key) => {
+    if (key === 'agent_id' && conversation.agent_id === Constants.EPHEMERAL_AGENT_ID) {
+      return;
+    }
+    if (key !== 'endpoint' && key !== 'model') {
+      paramMap[key] = (conversation as any)[key];
+    }
+  });
 
   return Object.entries(paramMap).reduce((params, [key, value]) => {
     if (value != null) {
diff --git a/package-lock.json b/package-lock.json
index fd5e6ab75f..6d5d8b0d9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45306,7 +45306,7 @@
     },
     "packages/data-provider": {
       "name": "librechat-data-provider",
-      "version": "0.7.82",
+      "version": "0.7.83",
       "license": "ISC",
       "dependencies": {
         "axios": "^1.8.2",
diff --git a/packages/data-provider/package.json b/packages/data-provider/package.json
index 025dda23df..ca28fc2d4e 100644
--- a/packages/data-provider/package.json
+++ b/packages/data-provider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "librechat-data-provider",
-  "version": "0.7.82",
+  "version": "0.7.83",
   "description": "data services for librechat apps",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
diff --git a/packages/data-provider/src/config.ts b/packages/data-provider/src/config.ts
index bdac70a0c6..817620494f 100644
--- a/packages/data-provider/src/config.ts
+++ b/packages/data-provider/src/config.ts
@@ -52,6 +52,7 @@ export const excludedKeys = new Set([
   'model',
   'files',
   'spec',
+  'disableParams',
 ]);
 
 export enum SettingsViews {
diff --git a/packages/data-provider/src/generate.ts b/packages/data-provider/src/generate.ts
index 4a83c5aec6..c6a2eafbb0 100644
--- a/packages/data-provider/src/generate.ts
+++ b/packages/data-provider/src/generate.ts
@@ -358,7 +358,7 @@ export function validateSettingDefinitions(settings: SettingsConfiguration): voi
         // continue;
       }
       setting.includeInput =
-        setting.type === SettingTypes.Number ? setting.includeInput ?? true : false; // Default to true if type is number
+        setting.type === SettingTypes.Number ? (setting.includeInput ?? true) : false; // Default to true if type is number
     }
 
     if (setting.component === ComponentTypes.Slider && setting.type === SettingTypes.Number) {
@@ -445,7 +445,8 @@ export function validateSettingDefinitions(settings: SettingsConfiguration): voi
 
     // Validate optionType and conversation schema
     if (setting.optionType !== OptionTypes.Custom) {
-      const conversationSchema = tConversationSchema.shape[setting.key as keyof TConversation];
+      const conversationSchema =
+        tConversationSchema.shape[setting.key as keyof Omit<TConversation, 'disableParams'>];
       if (!conversationSchema) {
         errors.push({
           code: ZodIssueCode.custom,
diff --git a/packages/data-provider/src/schemas.ts b/packages/data-provider/src/schemas.ts
index d4f43785c6..d7fc2d23d8 100644
--- a/packages/data-provider/src/schemas.ts
+++ b/packages/data-provider/src/schemas.ts
@@ -745,6 +745,7 @@ export type TSetOption = (
 
 export type TConversation = z.infer<typeof tConversationSchema> & {
   presetOverride?: Partial<TPreset>;
+  disableParams?: boolean;
 };
 
 export const tSharedLinkSchema = z.object({

From 3152a1e536c9c49071a9bcea6b773d490e64b380 Mon Sep 17 00:00:00 2001
From: "Theo N. Truong" <644650+nhtruong@users.noreply.github.com>
Date: Thu, 15 May 2025 15:50:09 -0600
Subject: [PATCH 07/26] =?UTF-8?q?=F0=9F=8C=98=20fix:=20artifact=20of=20pre?=
 =?UTF-8?q?view=20text=20is=20illegible=20in=20dark=20mode=20(#7405)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/mobile.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/mobile.css b/client/src/mobile.css
index 8d5a3aeeb5..890053e221 100644
--- a/client/src/mobile.css
+++ b/client/src/mobile.css
@@ -139,9 +139,9 @@
     z-index: 66;
     top: 0;
     max-width: 320px;
-  
+
     /* max-width: 260px; */
-  
+
     bottom: 0;
     right: 0
     /* opacity: 0; */
@@ -341,7 +341,7 @@
 
 div[role="tabpanel"][data-state="active"][data-orientation="horizontal"][aria-labelledby^="radix-"][id^="radix-"][id$="-content-preview"] {
   scrollbar-gutter: stable !important;
-  background-color: rgba(21, 21, 21, 0.5) !important;
+  background-color: rgba(205, 205, 205, 0.66) !important;
 }
 
 div[role="tabpanel"][data-state="active"][data-orientation="horizontal"][aria-labelledby^="radix-"][id^="radix-"][id$="-content-preview"]::-webkit-scrollbar {

From 2a3bf259aa9a84fef4d89632706f668ee3c45322 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Thu, 15 May 2025 18:05:45 -0400
Subject: [PATCH 08/26] =?UTF-8?q?=F0=9F=8E=A8=20style:=20revert=20email=20?=
 =?UTF-8?q?and=20password=20classes=20in=20LoginForm=20changed=20in=20#737?=
 =?UTF-8?q?7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Auth/LoginForm.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Auth/LoginForm.tsx b/client/src/components/Auth/LoginForm.tsx
index e34ec3c94d..1e2aa9b3d9 100644
--- a/client/src/components/Auth/LoginForm.tsx
+++ b/client/src/components/Auth/LoginForm.tsx
@@ -102,12 +102,12 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
                 },
               })}
               aria-invalid={!!errors.email}
-              className="peer w-full rounded-2xl border border-border-light bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary transition-colors duration-200 focus:border-green-500 focus:outline-none"
+              className="webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-none"
               placeholder=" "
             />
             <label
               htmlFor="email"
-              className="absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-600 dark:peer-focus:text-green-500"
+              className="absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-600 dark:peer-focus:text-green-500 rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4"
             >
               {useUsernameLogin
                 ? localize('com_auth_username').replace(/ \(.*$/, '')
@@ -129,12 +129,12 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
                 maxLength: { value: 128, message: localize('com_auth_password_max_length') },
               })}
               aria-invalid={!!errors.password}
-              className="peer w-full rounded-2xl border border-border-light bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary transition-colors duration-200 focus:border-green-500 focus:outline-none"
+              className="webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-none"
               placeholder=" "
             />
             <label
               htmlFor="password"
-              className="absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-600 dark:peer-focus:text-green-500"
+              className="absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-600 dark:peer-focus:text-green-500 rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4"
             >
               {localize('com_auth_password')}
             </label>

From a92ac23c445165d95aeede6a2bff74b31f47276c Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Fri, 16 May 2025 09:16:32 -0400
Subject: [PATCH 09/26] =?UTF-8?q?=F0=9F=9B=A1=EF=B8=8F=20fix:=20Temporaril?=
 =?UTF-8?q?y=20Remove=20CSP=20until=20Configurable=20(#7419)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/server/index.js | 41 +----------------------------------------
 1 file changed, 1 insertion(+), 40 deletions(-)

diff --git a/api/server/index.js b/api/server/index.js
index 3c8d3dd951..9812fa530d 100644
--- a/api/server/index.js
+++ b/api/server/index.js
@@ -2,7 +2,6 @@ require('dotenv').config();
 const path = require('path');
 require('module-alias')({ base: path.resolve(__dirname, '..') });
 const cors = require('cors');
-const helmet = require('helmet');
 const axios = require('axios');
 const express = require('express');
 const compression = require('compression');
@@ -23,15 +22,7 @@ const staticCache = require('./utils/staticCache');
 const noIndex = require('./middleware/noIndex');
 const routes = require('./routes');
 
-const {
-  PORT,
-  HOST,
-  ALLOW_SOCIAL_LOGIN,
-  DISABLE_COMPRESSION,
-  TRUST_PROXY,
-  SANDPACK_BUNDLER_URL,
-  SANDPACK_STATIC_BUNDLER_URL,
-} = process.env ?? {};
+const { PORT, HOST, ALLOW_SOCIAL_LOGIN, DISABLE_COMPRESSION, TRUST_PROXY } = process.env ?? {};
 
 const port = Number(PORT) || 3080;
 const host = HOST || 'localhost';
@@ -64,36 +55,6 @@ const startServer = async () => {
   app.use(mongoSanitize());
   app.use(cors());
   app.use(cookieParser());
-  app.use(
-    helmet({
-      contentSecurityPolicy: {
-        useDefaults: false,
-        directives: {
-          defaultSrc: ["'self'"],
-          scriptSrc: ["'self'", "'unsafe-inline'", 'https://challenges.cloudflare.com'],
-          styleSrc: ["'self'", "'unsafe-inline'"],
-          fontSrc: ["'self'", 'data:'],
-          objectSrc: ["'none'"],
-          imgSrc: ["'self'", 'data:'],
-          mediaSrc: ["'self'", 'data:', 'blob:'],
-          connectSrc: ["'self'"],
-          frameSrc: [
-            "'self'",
-            'https://challenges.cloudflare.com',
-            'https://codesandbox.io',
-            ...(SANDPACK_BUNDLER_URL ? [SANDPACK_BUNDLER_URL] : []),
-            ...(SANDPACK_STATIC_BUNDLER_URL ? [SANDPACK_STATIC_BUNDLER_URL] : []),
-          ],
-          frameAncestors: [
-            "'self'",
-            'https://codesandbox.io',
-            ...(SANDPACK_BUNDLER_URL ? [SANDPACK_BUNDLER_URL] : []),
-            ...(SANDPACK_STATIC_BUNDLER_URL ? [SANDPACK_STATIC_BUNDLER_URL] : []),
-          ],
-        },
-      },
-    }),
-  );
 
   if (!isEnabled(DISABLE_COMPRESSION)) {
     app.use(compression());

From 353adceb0c9e1922e6a1ef16814e63c7c92d0a9a Mon Sep 17 00:00:00 2001
From: Sebastien Bruel <93573440+sbruel@users.noreply.github.com>
Date: Fri, 16 May 2025 23:18:52 +0900
Subject: [PATCH 10/26] =?UTF-8?q?=F0=9F=92=BD=20fix:=20Exclude=20index=20p?=
 =?UTF-8?q?age=20`/`=20from=20static=20cache=20settings=20(#7382)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Disable default static caching for app's index page

* Update index.html related environment variables in `.env.example`

* Fix linting

* Update index.spec.js

---------

Co-authored-by: Danny Avila <danacordially@gmail.com>
---
 .env.example                    |  6 +--
 api/server/index.js             |  9 +++-
 api/server/index.spec.js        | 78 +++++++++++++++++++++++++++++++++
 api/server/utils/staticCache.js |  1 +
 api/strategies/ldapStrategy.js  |  2 +-
 api/test/__mocks__/logger.js    |  2 +
 api/test/jestSetup.js           |  4 ++
 7 files changed, 96 insertions(+), 6 deletions(-)
 create mode 100644 api/server/index.spec.js

diff --git a/.env.example b/.env.example
index 096903299e..bd39f653bd 100644
--- a/.env.example
+++ b/.env.example
@@ -563,9 +563,9 @@ HELP_AND_FAQ_URL=https://librechat.ai
 #   users always get the latest version. Customize    #
 #   only if you understand caching implications.      #
 
-# INDEX_HTML_CACHE_CONTROL=no-cache, no-store, must-revalidate
-# INDEX_HTML_PRAGMA=no-cache
-# INDEX_HTML_EXPIRES=0
+# INDEX_CACHE_CONTROL=no-cache, no-store, must-revalidate
+# INDEX_PRAGMA=no-cache
+# INDEX_EXPIRES=0
 
 # no-cache: Forces validation with server before using cached version
 # no-store: Prevents storing the response entirely
diff --git a/api/server/index.js b/api/server/index.js
index 9812fa530d..f7548f840b 100644
--- a/api/server/index.js
+++ b/api/server/index.js
@@ -24,10 +24,13 @@ const routes = require('./routes');
 
 const { PORT, HOST, ALLOW_SOCIAL_LOGIN, DISABLE_COMPRESSION, TRUST_PROXY } = process.env ?? {};
 
-const port = Number(PORT) || 3080;
+// Allow PORT=0 to be used for automatic free port assignment
+const port = isNaN(Number(PORT)) ? 3080 : Number(PORT);
 const host = HOST || 'localhost';
 const trusted_proxy = Number(TRUST_PROXY) || 1; /* trust first proxy by default */
 
+const app = express();
+
 const startServer = async () => {
   if (typeof Bun !== 'undefined') {
     axios.defaults.headers.common['Accept-Encoding'] = 'gzip';
@@ -36,7 +39,6 @@ const startServer = async () => {
   logger.info('Connected to MongoDB');
   await indexSync();
 
-  const app = express();
   app.disable('x-powered-by');
   app.set('trust proxy', trusted_proxy);
 
@@ -179,3 +181,6 @@ process.on('uncaughtException', (err) => {
 
   process.exit(1);
 });
+
+// export app for easier testing purposes
+module.exports = app;
diff --git a/api/server/index.spec.js b/api/server/index.spec.js
new file mode 100644
index 0000000000..493229c2f4
--- /dev/null
+++ b/api/server/index.spec.js
@@ -0,0 +1,78 @@
+const fs = require('fs');
+const path = require('path');
+const request = require('supertest');
+const { MongoMemoryServer } = require('mongodb-memory-server');
+const mongoose = require('mongoose');
+
+describe('Server Configuration', () => {
+  // Increase the default timeout to allow for Mongo cleanup
+  jest.setTimeout(30_000);
+
+  let mongoServer;
+  let app;
+
+  /** Mocked fs.readFileSync for index.html */
+  const originalReadFileSync = fs.readFileSync;
+  beforeAll(() => {
+    fs.readFileSync = function (filepath, options) {
+      if (filepath.includes('index.html')) {
+        return '<!DOCTYPE html><html><head><title>LibreChat</title></head><body><div id="root"></div></body></html>';
+      }
+      return originalReadFileSync(filepath, options);
+    };
+  });
+
+  afterAll(() => {
+    // Restore original fs.readFileSync
+    fs.readFileSync = originalReadFileSync;
+  });
+
+  beforeAll(async () => {
+    mongoServer = await MongoMemoryServer.create();
+    process.env.MONGO_URI = mongoServer.getUri();
+    process.env.PORT = '0'; // Use a random available port
+    app = require('~/server');
+
+    // Wait for the app to be healthy
+    await healthCheckPoll(app);
+  });
+
+  afterAll(async () => {
+    await mongoServer.stop();
+    await mongoose.disconnect();
+  });
+
+  it('should return OK for /health', async () => {
+    const response = await request(app).get('/health');
+    expect(response.status).toBe(200);
+    expect(response.text).toBe('OK');
+  });
+
+  it('should not cache index page', async () => {
+    const response = await request(app).get('/');
+    expect(response.status).toBe(200);
+    expect(response.headers['cache-control']).toBe('no-cache, no-store, must-revalidate');
+    expect(response.headers['pragma']).toBe('no-cache');
+    expect(response.headers['expires']).toBe('0');
+  });
+});
+
+// Polls the /health endpoint every 30ms for up to 10 seconds to wait for the server to start completely
+async function healthCheckPoll(app, retries = 0) {
+  const maxRetries = Math.floor(10000 / 30); // 10 seconds / 30ms
+  try {
+    const response = await request(app).get('/health');
+    if (response.status === 200) {
+      return; // App is healthy
+    }
+  } catch (error) {
+    // Ignore connection errors during polling
+  }
+
+  if (retries < maxRetries) {
+    await new Promise((resolve) => setTimeout(resolve, 30));
+    await healthCheckPoll(app, retries + 1);
+  } else {
+    throw new Error('App did not become healthy within 10 seconds.');
+  }
+}
diff --git a/api/server/utils/staticCache.js b/api/server/utils/staticCache.js
index 23713ddf6f..5925a56be5 100644
--- a/api/server/utils/staticCache.js
+++ b/api/server/utils/staticCache.js
@@ -14,6 +14,7 @@ const staticCache = (staticPath) =>
         res.setHeader('Cache-Control', `public, max-age=${maxAge}, s-maxage=${sMaxAge}`);
       }
     },
+    index: false,
   });
 
 module.exports = staticCache;
diff --git a/api/strategies/ldapStrategy.js b/api/strategies/ldapStrategy.js
index 5ec279b982..beb9b8c2fd 100644
--- a/api/strategies/ldapStrategy.js
+++ b/api/strategies/ldapStrategy.js
@@ -23,7 +23,7 @@ const {
 
 // Check required environment variables
 if (!LDAP_URL || !LDAP_USER_SEARCH_BASE) {
-  return null;
+  module.exports = null;
 }
 
 const searchAttributes = [
diff --git a/api/test/__mocks__/logger.js b/api/test/__mocks__/logger.js
index 549c57d5a4..f9f6d78c87 100644
--- a/api/test/__mocks__/logger.js
+++ b/api/test/__mocks__/logger.js
@@ -8,6 +8,7 @@ jest.mock('winston', () => {
   mockFormatFunction.printf = jest.fn();
   mockFormatFunction.errors = jest.fn();
   mockFormatFunction.splat = jest.fn();
+  mockFormatFunction.json = jest.fn();
   return {
     format: mockFormatFunction,
     createLogger: jest.fn().mockReturnValue({
@@ -19,6 +20,7 @@ jest.mock('winston', () => {
     transports: {
       Console: jest.fn(),
       DailyRotateFile: jest.fn(),
+      File: jest.fn(),
     },
     addColors: jest.fn(),
   };
diff --git a/api/test/jestSetup.js b/api/test/jestSetup.js
index f84b90743a..ed92afd214 100644
--- a/api/test/jestSetup.js
+++ b/api/test/jestSetup.js
@@ -6,3 +6,7 @@ process.env.BAN_VIOLATIONS = 'true';
 process.env.BAN_DURATION = '7200000';
 process.env.BAN_INTERVAL = '20';
 process.env.CI = 'true';
+process.env.JWT_SECRET = 'test';
+process.env.JWT_REFRESH_SECRET = 'test';
+process.env.CREDS_KEY = 'test';
+process.env.CREDS_IV = 'test';

From 26780bddf058081e1471d4fc158377a9195466aa Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Fri, 16 May 2025 11:39:57 -0400
Subject: [PATCH 11/26] =?UTF-8?q?=E2=9C=A8=20feat:=20Add=20Normalization?=
 =?UTF-8?q?=20for=20MCP=20Server=20Names=20(#7421)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/server/services/MCP.js     |  4 +++-
 packages/mcp/src/index.ts      |  2 ++
 packages/mcp/src/utils.test.ts | 28 ++++++++++++++++++++++++++++
 packages/mcp/src/utils.ts      | 30 ++++++++++++++++++++++++++++++
 4 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 packages/mcp/src/utils.test.ts
 create mode 100644 packages/mcp/src/utils.ts

diff --git a/api/server/services/MCP.js b/api/server/services/MCP.js
index 1d4fc5112c..b9baef462e 100644
--- a/api/server/services/MCP.js
+++ b/api/server/services/MCP.js
@@ -1,5 +1,6 @@
 const { z } = require('zod');
 const { tool } = require('@langchain/core/tools');
+const { normalizeServerName } = require('librechat-mcp');
 const { Constants: AgentConstants, Providers } = require('@librechat/agents');
 const {
   Constants,
@@ -38,6 +39,7 @@ async function createMCPTool({ req, toolKey, provider: _provider }) {
   }
 
   const [toolName, serverName] = toolKey.split(Constants.mcp_delimiter);
+  const normalizedToolKey = `${toolName}${Constants.mcp_delimiter}${normalizeServerName(serverName)}`;
 
   if (!req.user?.id) {
     logger.error(
@@ -83,7 +85,7 @@ async function createMCPTool({ req, toolKey, provider: _provider }) {
 
   const toolInstance = tool(_call, {
     schema,
-    name: toolKey,
+    name: normalizedToolKey,
     description: description || '',
     responseFormat: AgentConstants.CONTENT_AND_ARTIFACT,
   });
diff --git a/packages/mcp/src/index.ts b/packages/mcp/src/index.ts
index ba1dcdf821..ba063ef1e3 100644
--- a/packages/mcp/src/index.ts
+++ b/packages/mcp/src/index.ts
@@ -1,5 +1,7 @@
 /* MCP */
 export * from './manager';
+/* Utilities */
+export * from './utils';
 /* Flow */
 export * from './flow/manager';
 /* types */
diff --git a/packages/mcp/src/utils.test.ts b/packages/mcp/src/utils.test.ts
new file mode 100644
index 0000000000..bc5d0ba7d4
--- /dev/null
+++ b/packages/mcp/src/utils.test.ts
@@ -0,0 +1,28 @@
+import { normalizeServerName } from './utils';
+
+describe('normalizeServerName', () => {
+  it('should not modify server names that already match the pattern', () => {
+    const result = normalizeServerName('valid-server_name.123');
+    expect(result).toBe('valid-server_name.123');
+  });
+
+  it('should normalize server names with non-ASCII characters', () => {
+    const result = normalizeServerName('我的服务');
+    // Should generate a fallback name with a hash
+    expect(result).toMatch(/^server_\d+$/);
+    expect(result).toMatch(/^[a-zA-Z0-9_.-]+$/);
+  });
+
+  it('should normalize server names with special characters', () => {
+    const result = normalizeServerName('server@name!');
+    // The actual result doesn't have the trailing underscore after trimming
+    expect(result).toBe('server_name');
+    expect(result).toMatch(/^[a-zA-Z0-9_.-]+$/);
+  });
+
+  it('should trim leading and trailing underscores', () => {
+    const result = normalizeServerName('!server-name!');
+    expect(result).toBe('server-name');
+    expect(result).toMatch(/^[a-zA-Z0-9_.-]+$/);
+  });
+});
diff --git a/packages/mcp/src/utils.ts b/packages/mcp/src/utils.ts
new file mode 100644
index 0000000000..f315976fcf
--- /dev/null
+++ b/packages/mcp/src/utils.ts
@@ -0,0 +1,30 @@
+/**
+ * Normalizes a server name to match the pattern ^[a-zA-Z0-9_.-]+$
+ * This is required for Azure OpenAI models with Tool Calling
+ */
+export function normalizeServerName(serverName: string): string {
+  // Check if the server name already matches the pattern
+  if (/^[a-zA-Z0-9_.-]+$/.test(serverName)) {
+    return serverName;
+  }
+
+  /** Replace non-matching characters with underscores.
+    This preserves the general structure while ensuring compatibility. 
+    Trims leading/trailing underscores
+    */
+  const normalized = serverName.replace(/[^a-zA-Z0-9_.-]/g, '_').replace(/^_+|_+$/g, '');
+
+  // If the result is empty (e.g., all characters were non-ASCII and got trimmed),
+  // generate a fallback name to ensure we always have a valid function name
+  if (!normalized) {
+    /** Hash of the original name to ensure uniqueness */
+    let hash = 0;
+    for (let i = 0; i < serverName.length; i++) {
+      hash = (hash << 5) - hash + serverName.charCodeAt(i);
+      hash |= 0; // Convert to 32bit integer
+    }
+    return `server_${Math.abs(hash)}`;
+  }
+
+  return normalized;
+}

From 844bbbb1620bdc8a2b2293116399738c21ef28b1 Mon Sep 17 00:00:00 2001
From: hofq <54744977+hofq@users.noreply.github.com>
Date: Sat, 17 May 2025 21:52:16 +0200
Subject: [PATCH 12/26] =?UTF-8?q?=F0=9F=93=8A=20feat:=20Improve=20Helm=20C?=
 =?UTF-8?q?hart=20(#3638)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Replaced Helm Charts with Blue Atlas Charts

* Fix Workflow

* improve docs

* update gitignore

* Update docs

* change values order, add hpa

* change tls example domain

* Default: Enable liveness and readiness

* chore: bump base chart

* apply requested changes

* add Release fix

* add: error handling

* chore: cleanup and testing

* fix: adjust Chart.yaml

---------

Co-authored-by: hofq <gregorspalme@protonmail.com>
Co-authored-by: Ruben Talstra <RubenTalstra1211@outlook.com>
---
 .github/workflows/helmcharts.yml              |   3 +
 .gitignore                                    |   7 +
 helm/librechat-rag-api/Chart.yaml             |  33 +++
 helm/librechat-rag-api/readme.md              |   4 +
 helm/librechat-rag-api/templates/_helpers.tpl |  65 +++++
 .../templates/configmap.yaml                  |   9 +
 .../templates/rag-deployment.yaml             |  94 +++++++
 helm/librechat-rag-api/templates/service.yaml |  17 ++
 .../templates/tests/test-connection.yaml      |  15 ++
 .../templates/vectordb-secret.yaml            |  12 +
 helm/librechat-rag-api/values.yaml            |  95 +++++++
 helm/librechat/.helmignore                    |  23 ++
 helm/librechat/Chart.yaml                     |  41 +++
 helm/librechat/readme.md                      |  37 +++
 helm/librechat/templates/NOTES.txt            |  22 ++
 helm/librechat/templates/_checks.yaml         |   4 +
 helm/librechat/templates/_helpers.tpl         |  65 +++++
 helm/librechat/templates/configmap-env.yaml   |  17 ++
 helm/librechat/templates/configmap.yaml       |  10 +
 helm/librechat/templates/deployment.yaml      | 104 ++++++++
 helm/librechat/templates/hpa.yaml             |  28 +++
 helm/librechat/templates/ingress.yaml         |  60 +++++
 .../templates/persistentvolumeclaim.yaml      |  16 ++
 helm/librechat/templates/service.yaml         |  17 ++
 .../templates/tests/test-connection.yaml      |  15 ++
 helm/librechat/values.yaml                    | 234 ++++++++++++++++++
 26 files changed, 1047 insertions(+)
 create mode 100755 helm/librechat-rag-api/Chart.yaml
 create mode 100755 helm/librechat-rag-api/readme.md
 create mode 100755 helm/librechat-rag-api/templates/_helpers.tpl
 create mode 100755 helm/librechat-rag-api/templates/configmap.yaml
 create mode 100755 helm/librechat-rag-api/templates/rag-deployment.yaml
 create mode 100755 helm/librechat-rag-api/templates/service.yaml
 create mode 100755 helm/librechat-rag-api/templates/tests/test-connection.yaml
 create mode 100755 helm/librechat-rag-api/templates/vectordb-secret.yaml
 create mode 100755 helm/librechat-rag-api/values.yaml
 create mode 100755 helm/librechat/.helmignore
 create mode 100755 helm/librechat/Chart.yaml
 create mode 100755 helm/librechat/readme.md
 create mode 100755 helm/librechat/templates/NOTES.txt
 create mode 100755 helm/librechat/templates/_checks.yaml
 create mode 100755 helm/librechat/templates/_helpers.tpl
 create mode 100755 helm/librechat/templates/configmap-env.yaml
 create mode 100755 helm/librechat/templates/configmap.yaml
 create mode 100755 helm/librechat/templates/deployment.yaml
 create mode 100755 helm/librechat/templates/hpa.yaml
 create mode 100755 helm/librechat/templates/ingress.yaml
 create mode 100755 helm/librechat/templates/persistentvolumeclaim.yaml
 create mode 100755 helm/librechat/templates/service.yaml
 create mode 100755 helm/librechat/templates/tests/test-connection.yaml
 create mode 100755 helm/librechat/values.yaml

diff --git a/.github/workflows/helmcharts.yml b/.github/workflows/helmcharts.yml
index bc715557e4..a8e3ef9b72 100644
--- a/.github/workflows/helmcharts.yml
+++ b/.github/workflows/helmcharts.yml
@@ -29,5 +29,8 @@ jobs:
 
       - name: Run chart-releaser
         uses: helm/chart-releaser-action@v1.6.0
+        with:
+          charts_dir: helm
+          skip_existing: true
         env:
           CR_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
diff --git a/.gitignore b/.gitignore
index a4d2d8fc7e..0b64a284b5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -113,4 +113,11 @@ uploads/
 
 # owner
 release/
+
+# Helm
+helm/librechat/Chart.lock
+helm/**/charts/
+helm/**/.values.yaml
+
 !/client/src/@types/i18next.d.ts
+
diff --git a/helm/librechat-rag-api/Chart.yaml b/helm/librechat-rag-api/Chart.yaml
new file mode 100755
index 0000000000..38d1470e49
--- /dev/null
+++ b/helm/librechat-rag-api/Chart.yaml
@@ -0,0 +1,33 @@
+apiVersion: v2
+name: librechat-rag-api
+description: A Helm chart for LibreChat
+
+# A chart can be either an 'application' or a 'library' chart.
+#
+# Application charts are a collection of templates that can be packaged into versioned archives
+# to be deployed.#
+# Library charts provide useful utilities or functions for the chart developer. They're included as
+# a dependency of application charts to inject those utilities and functions into the rendering
+# pipeline. Library charts do not define any templates and therefore cannot be deployed.
+type: application
+
+# This is the chart version. This version number should be incremented each time you make changes
+# to the chart and its templates, including the app version.
+# Versions are expected to follow Semantic Versioning (https://semver.org/)
+version: 0.5.2
+
+# This is the version number of the application being deployed. This version number should be
+# incremented each time you make changes to the application. Versions are not expected to
+# follow Semantic Versioning. They should reflect the version the application is using.
+# It is recommended to use it with quotes.
+
+# renovate: image=ghcr.io/danny-avila/librechat-rag-api-dev
+appVersion: "v0.4.0"
+
+home: https://www.librechat.ai
+
+dependencies:
+  - name: postgresql
+    version: "15.5.38"
+    condition: postgresql.enabled
+    repository: "https://charts.bitnami.com/bitnami"
\ No newline at end of file
diff --git a/helm/librechat-rag-api/readme.md b/helm/librechat-rag-api/readme.md
new file mode 100755
index 0000000000..bdddb2e3ba
--- /dev/null
+++ b/helm/librechat-rag-api/readme.md
@@ -0,0 +1,4 @@
+# Librechat RAG API Helm CHart
+
+> [!WARNING]  
+> This Helm-Chart is needed for LibreChat and Deployment information is documented in (the librechat chart)[../librechat/readme.md]
\ No newline at end of file
diff --git a/helm/librechat-rag-api/templates/_helpers.tpl b/helm/librechat-rag-api/templates/_helpers.tpl
new file mode 100755
index 0000000000..c8485cf7a9
--- /dev/null
+++ b/helm/librechat-rag-api/templates/_helpers.tpl
@@ -0,0 +1,65 @@
+
+
+
+
+{{/*
+Create chart name and version as used by the chart label.
+*/}}
+{{- define "rag.chart" -}}
+{{- printf "%s-%s" .Chart.Name .Chart.Version | replace "+" "_" | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+
+{{/*
+Create a default fully qualified app name.
+We truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec).
+If release name contains chart name it will be used as a full name.
+*/}}
+
+{{- define "rag.fullname" -}}
+{{- if $.Values.fullnameOverride }}
+{{- $.Values.fullnameOverride | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- $name := default .Chart.Name .Values.nameOverride }}
+{{- printf "%s-%s" .Release.Name $name | trunc 63 | trimSuffix "-" }}
+{{- end }}
+{{- end }}
+
+{{/*
+Common labels
+*/}}
+{{- define "rag.labels" -}}
+helm.sh/chart: {{ include "rag.chart" . }}
+{{ include "rag.selectorLabels" . }}
+{{- if .Chart.AppVersion }}
+app.kubernetes.io/version: {{ .Chart.AppVersion | quote }}
+{{- end }}
+app.kubernetes.io/managed-by: {{ .Release.Service }}
+{{- end }}
+
+
+{{/*
+RAG Selector labels
+*/}}
+{{- define "rag.selectorLabels" -}}
+app.kubernetes.io/name: {{ include "rag.fullname" . }}-rag
+app.kubernetes.io/instance: {{ .Release.Name }}
+{{- end }}
+
+{{/*
+Create the name of the service account to use
+*/}}
+{{- define "rag.serviceAccountName" -}}
+{{- if .Values.serviceAccount.create }}
+{{- default (include "rag.fullname" .) .Values.serviceAccount.name }}
+{{- else }}
+{{- default "default" .Values.serviceAccount.name }}
+{{- end }}
+{{- end }}
+
+
+{{- define "rag.dbsecretValue" -}}
+{{- $secret :=  .Values.postgresql.auth.existingSecret -}}
+{{- $key := "password" -}}
+{{- printf "%s" (include "exec" (dict "command" "kubectl" "args" (list "get" "secret" $secret "-o=jsonpath={.data." $key "}"))) | b64enc -}}
+{{- end -}}
\ No newline at end of file
diff --git a/helm/librechat-rag-api/templates/configmap.yaml b/helm/librechat-rag-api/templates/configmap.yaml
new file mode 100755
index 0000000000..9b70897482
--- /dev/null
+++ b/helm/librechat-rag-api/templates/configmap.yaml
@@ -0,0 +1,9 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: {{ include "rag.fullname" $ | lower}}-config
+data:
+  POSTGRES_DB: {{ .Values.postgresql.auth.database }}
+  POSTGRES_USER: {{ .Values.postgresql.auth.username }}
+  DB_HOST: {{ .Release.Name }}-postgresql.{{ .Release.Namespace | lower }}.svc.cluster.local
+  {{- toYaml .Values.rag.configEnv | nindent 2 }} 
\ No newline at end of file
diff --git a/helm/librechat-rag-api/templates/rag-deployment.yaml b/helm/librechat-rag-api/templates/rag-deployment.yaml
new file mode 100755
index 0000000000..dfe10dcedc
--- /dev/null
+++ b/helm/librechat-rag-api/templates/rag-deployment.yaml
@@ -0,0 +1,94 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: {{ include "rag.fullname" $ }}
+  labels:
+    {{- include "rag.labels" . | nindent 4 }}
+    rag-component: rag
+spec:
+  replicas: {{ .Values.rag.replicaCount }}
+  selector:
+    matchLabels:
+      {{- include "rag.selectorLabels" . | nindent 6 }}
+  template:
+    metadata:
+      annotations:
+        {{- with .Values.rag.podAnnotations }}
+        {{- toYaml . | nindent 8 }}
+        {{- end }}
+      labels:
+        {{- include "rag.selectorLabels" . | nindent 8 }}
+        {{- with .Values.rag.podLabels }}
+        {{- toYaml . | nindent 8 }}
+        {{- end }}
+    spec:
+      {{- with .Values.imagePullSecrets }}
+      imagePullSecrets:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      securityContext:
+        {{- toYaml .Values.podSecurityContext | nindent 8 }}
+      containers:
+        - name: {{ include "rag.fullname" $ }}-rag
+          securityContext:
+            {{- toYaml .Values.securityContext | nindent 12 }}
+          image: "{{ .Values.image.registry }}/{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
+          imagePullPolicy: {{ .Values.image.pullPolicy }}
+          ports:
+            - name: http
+              containerPort: {{ .Values.service.port }}
+              protocol: TCP
+          livenessProbe:
+            {{- toYaml .Values.livenessProbe | nindent 12 }}
+          readinessProbe:
+            {{- toYaml .Values.readinessProbe | nindent 12 }}
+          resources:
+            {{- toYaml .Values.resources | nindent 12 }}
+          envFrom:
+          - configMapRef:
+              name: {{ include "rag.fullname" $ }}-config
+          {{- if .Values.rag.existingSecret }}
+          - secretRef:
+              name: {{ .Values.rag.existingSecret }}
+          {{- end }}
+          env:
+          {{- if .Values.postgresql.auth.existingSecret }}
+          - name: POSTGRES_PASSWORD
+            valueFrom:
+              secretKeyRef:
+                name: {{ .Values.postgresql.auth.existingSecret }}
+                key: {{ .Values.postgresql.auth.existingSecretKey }}
+          {{- end }}
+          {{- if .Values.global.librechat.existingSecretName }}
+          - name: OPENAI_API_KEY
+            valueFrom:
+              secretKeyRef:
+                name: {{ .Values.global.librechat.existingSecretName }}
+                key: {{ .Values.global.librechat.existingSecretApiKey }}
+                optional: true
+          {{- end }}
+          {{- with .Values.volumeMounts }}
+          volumeMounts:
+            {{- toYaml . | nindent 12 }}
+          {{- end }}
+        {{- with .Values.extraContainers }}
+        {{ toYaml . | nindent 8 }}
+        {{- end }}
+
+
+      volumes:
+      {{- with .Values.volumes }}
+      {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.nodeSelector }}
+      nodeSelector:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.affinity }}
+      affinity:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.tolerations }}
+      tolerations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
diff --git a/helm/librechat-rag-api/templates/service.yaml b/helm/librechat-rag-api/templates/service.yaml
new file mode 100755
index 0000000000..98d28f1670
--- /dev/null
+++ b/helm/librechat-rag-api/templates/service.yaml
@@ -0,0 +1,17 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: {{ include "rag.fullname" . }}
+  labels:
+    {{- include "rag.labels" . | nindent 4 }}
+  annotations:
+  {{- toYaml .Values.service.annotations | nindent 4 }}
+spec:
+  type: {{ .Values.service.type }}
+  ports:
+    - port: {{ .Values.service.port }}
+      targetPort: http
+      protocol: TCP
+      name: http
+  selector:
+    {{- include "rag.selectorLabels" . | nindent 4 }}
diff --git a/helm/librechat-rag-api/templates/tests/test-connection.yaml b/helm/librechat-rag-api/templates/tests/test-connection.yaml
new file mode 100755
index 0000000000..8895ca2432
--- /dev/null
+++ b/helm/librechat-rag-api/templates/tests/test-connection.yaml
@@ -0,0 +1,15 @@
+apiVersion: v1
+kind: Pod
+metadata:
+  name: "{{ include "rag.fullname" . }}-test-connection"
+  labels:
+    {{- include "rag.labels" . | nindent 4 }}
+  annotations:
+    "helm.sh/hook": test
+spec:
+  containers:
+    - name: wget
+      image: busybox
+      command: ['wget']
+      args: ['{{ include "rag.fullname" . }}:{{ .Values.service.port }}']
+  restartPolicy: Never
diff --git a/helm/librechat-rag-api/templates/vectordb-secret.yaml b/helm/librechat-rag-api/templates/vectordb-secret.yaml
new file mode 100755
index 0000000000..8c3f8c1a4c
--- /dev/null
+++ b/helm/librechat-rag-api/templates/vectordb-secret.yaml
@@ -0,0 +1,12 @@
+{{ if not .Values.postgresql.auth.existingSecret }}
+apiVersion: v1
+kind: Secret
+metadata:
+  name: librechat-vectordb
+type: Opaque
+data:
+  # generate 32 chars long random string, base64 encode it and then double-quote the result string.
+  postgres-password: {{ randAlphaNum 32 | b64enc | quote }}
+  password: {{ randAlphaNum 32 | b64enc | quote }}
+  replication-password: {{ randAlphaNum 32 | b64enc | quote }}
+{{ end }}
\ No newline at end of file
diff --git a/helm/librechat-rag-api/values.yaml b/helm/librechat-rag-api/values.yaml
new file mode 100755
index 0000000000..4aec90b1d0
--- /dev/null
+++ b/helm/librechat-rag-api/values.yaml
@@ -0,0 +1,95 @@
+# Required as vectorDB for RAG
+# provide context-aware responses based on user-uploaded files
+rag:
+  enabled: true
+  existingSecret: ''
+  configEnv:
+    DB_PORT: '5432'
+    EMBEDDINGS_PROVIDER: openai
+
+image:
+  repository: danny-avila/librechat-rag-api-dev-lite # there is rag-api-dev and rag-api-dev-lite. currently only lite is docuimented
+  registry: ghcr.io
+  pullPolicy: IfNotPresent
+  # Overrides the image tag whose default is the chart appVersion.
+  tag: latest
+
+postgresql:
+  enabled: true
+  # nameOverride: vectordb
+  image:
+    registry: ghcr.io
+    repository: bat-bs/bitnami-pgvector
+    tag: pg16
+  auth:
+    database: librechat-vectordb
+    username: postgres
+    # define a secret with values for "postgres-password", "password" (user Password)  and "replication-password" or add values directly
+    existingSecret: librechat-vectordb
+    # postgres-password is needed to enable pgvector extension. If you enable it manually you can use "password" and user "librechat"
+    existingSecretKey: postgres-password
+
+imagePullSecrets: []
+nameOverride: ''
+fullnameOverride: ''
+
+podAnnotations: {}
+podLabels: {}
+
+podSecurityContext: {} # fsGroup: 2000
+
+securityContext: {}
+  # capabilities:
+  #   drop:
+  #   - ALL
+  # readOnlyRootFilesystem: true
+  # runAsNonRoot: true
+  # runAsUser: 1000
+
+service:
+  type: ClusterIP
+  port: 8000
+  annotations: {}
+
+
+resources: {}
+  # We usually recommend not to specify default resources and to leave this as a conscious
+  # choice for the user. This also increases chances charts run on environments with little
+  # resources, such as Minikube. If you do want to specify resources, uncomment the following
+  # lines, adjust them as necessary, and remove the curly braces after 'resources:'.
+  # limits:
+  #   cpu: 100m
+  #   memory: 128Mi
+  # requests:
+  #   cpu: 100m
+  #   memory: 128Mi
+
+# livenessProbe:
+#   httpGet:
+#     path: /
+#     port: http
+# readinessProbe:
+#   httpGet:
+#     path: /
+#     port: http
+
+# Additional volumes on the output Deployment definition.
+volumes: []
+# - name: foo
+#   secret:
+#     secretName: mysecret
+#     optional: false
+
+# Additional volumeMounts on the output Deployment definition.
+volumeMounts: []
+# - name: foo
+#   mountPath: "/etc/foo"
+#   readOnly: true
+
+nodeSelector: {}
+
+tolerations: []
+
+affinity: {}
+
+extraContainers: {}
\ No newline at end of file
diff --git a/helm/librechat/.helmignore b/helm/librechat/.helmignore
new file mode 100755
index 0000000000..0e8a0eb36f
--- /dev/null
+++ b/helm/librechat/.helmignore
@@ -0,0 +1,23 @@
+# Patterns to ignore when building packages.
+# This supports shell glob matching, relative path matching, and
+# negation (prefixed with !). Only one pattern per line.
+.DS_Store
+# Common VCS dirs
+.git/
+.gitignore
+.bzr/
+.bzrignore
+.hg/
+.hgignore
+.svn/
+# Common backup files
+*.swp
+*.bak
+*.tmp
+*.orig
+*~
+# Various IDEs
+.project
+.idea/
+*.tmproj
+.vscode/
diff --git a/helm/librechat/Chart.yaml b/helm/librechat/Chart.yaml
new file mode 100755
index 0000000000..5bdf6b3788
--- /dev/null
+++ b/helm/librechat/Chart.yaml
@@ -0,0 +1,41 @@
+apiVersion: v2
+name: librechat
+description: A Helm chart for LibreChat
+
+# A chart can be either an 'application' or a 'library' chart.
+#
+# Application charts are a collection of templates that can be packaged into versioned archives
+# to be deployed.#
+# Library charts provide useful utilities or functions for the chart developer. They're included as
+# a dependency of application charts to inject those utilities and functions into the rendering
+# pipeline. Library charts do not define any templates and therefore cannot be deployed.
+type: application
+
+# This is the chart version. This version number should be incremented each time you make changes
+# to the chart and its templates, including the app version.
+# Versions are expected to follow Semantic Versioning (https://semver.org/)
+version: 1.8.8
+
+# This is the version number of the application being deployed. This version number should be
+# incremented each time you make changes to the application. Versions are not expected to
+# follow Semantic Versioning. They should reflect the version the application is using.
+# It is recommended to use it with quotes.
+
+# renovate: image=ghcr.io/danny-avila/librechat
+appVersion: "v0.7.7"
+
+home: https://www.librechat.ai
+
+dependencies:
+  - name: mongodb
+    version: "16.3.0"
+    condition: mongodb.enabled
+    repository: "https://charts.bitnami.com/bitnami"
+  - name: meilisearch
+    version: "0.11.0"
+    condition: meilisearch.enabled
+    repository: "https://meilisearch.github.io/meilisearch-kubernetes"
+  - name: librechat-rag-api
+    version: "0.5.2"
+    condition: librechat-rag-api.enabled
+    repository: file://../librechat-rag-api
diff --git a/helm/librechat/readme.md b/helm/librechat/readme.md
new file mode 100755
index 0000000000..b557825c3c
--- /dev/null
+++ b/helm/librechat/readme.md
@@ -0,0 +1,37 @@
+# LibreChat Helm Chart
+This Librechat Helm Chart provides an easy, light weight template to deploy LibreChat on Kubernetes
+
+## Variables
+In this Chart, LibreChat will only work with environment Variables. You can Specify Vars and Secret using an existing Secret (This can be generated by [creating an Env File and converting it to a Kubernetes Secret](https://kubernetes.io/docs/reference/generated/kubectl/kubectl-commands#-em-secret-em-) `--from-env-file`)  
+
+## Setup
+
+1. Generate Variables
+Generate `CREDS_KEY`, `JWT_SECRET`, `JWT_REFRESH_SECRET`  and `MEILI_MASTER_KEY`  using `openssl rand -hex 32` and `CREDS_IV` using openssl rand -hex 16.
+place them in a secret like this (If you want to change the secret name, remember to change it in your helm values):
+```yaml
+apiVersion: v1
+kind: Secret
+metadata:
+  name: librechat-credentials-env
+  namespace: <librechat-chart-namespace>
+type: Opaque
+stringData:
+  CREDS_KEY: <generated value>
+  JWT_SECRET: <generated value>
+  JWT_REFRESH_SECRET: <generated value>
+  MEILI_MASTER_KEY: <generated value>
+```
+2. Add Credentials to the Secret
+Dependant of the Model you want to use, [create Credentials in your provider](https://docs.librechat.ai/install/configuration/ai_setup.html) and add them to the Secret:
+```yaml
+apiVersion: v1
+kind: Secret
+. . . .
+
+  OPENAI_API_KEY: <your secret value>
+```
+
+3. Apply the Secret to the Cluster
+
+4. Fill out values.yaml and apply the Chart to the Cluster
\ No newline at end of file
diff --git a/helm/librechat/templates/NOTES.txt b/helm/librechat/templates/NOTES.txt
new file mode 100755
index 0000000000..cf2232b58a
--- /dev/null
+++ b/helm/librechat/templates/NOTES.txt
@@ -0,0 +1,22 @@
+1. Get the application URL by running these commands:
+{{- if .Values.ingress.enabled }}
+{{- range $host := .Values.ingress.hosts }}
+  {{- range .paths }}
+  http{{ if $.Values.ingress.tls }}s{{ end }}://{{ $host.host }}{{ .path }}
+  {{- end }}
+{{- end }}
+{{- else if contains "NodePort" .Values.service.type }}
+  export NODE_PORT=$(kubectl get --namespace {{ .Release.Namespace }} -o jsonpath="{.spec.ports[0].nodePort}" services {{ include "librechat.fullname" . }})
+  export NODE_IP=$(kubectl get nodes --namespace {{ .Release.Namespace }} -o jsonpath="{.items[0].status.addresses[0].address}")
+  echo http://$NODE_IP:$NODE_PORT
+{{- else if contains "LoadBalancer" .Values.service.type }}
+     NOTE: It may take a few minutes for the LoadBalancer IP to be available.
+           You can watch the status of by running 'kubectl get --namespace {{ .Release.Namespace }} svc -w {{ include "librechat.fullname" . }}'
+  export SERVICE_IP=$(kubectl get svc --namespace {{ .Release.Namespace }} {{ include "librechat.fullname" . }} --template "{{"{{ range (index .status.loadBalancer.ingress 0) }}{{.}}{{ end }}"}}")
+  echo http://$SERVICE_IP:{{ .Values.service.port }}
+{{- else if contains "ClusterIP" .Values.service.type }}
+  export POD_NAME=$(kubectl get pods --namespace {{ .Release.Namespace }} -l "app.kubernetes.io/name={{ include "librechat.fullname" . }},app.kubernetes.io/instance={{ .Release.Name }}" -o jsonpath="{.items[0].metadata.name}")
+  export CONTAINER_PORT=$(kubectl get pod --namespace {{ .Release.Namespace }} $POD_NAME -o jsonpath="{.spec.containers[0].ports[0].containerPort}")
+  echo "Visit http://127.0.0.1:8080 to use your application"
+  kubectl --namespace {{ .Release.Namespace }} port-forward $POD_NAME 8080:$CONTAINER_PORT
+{{- end }}
diff --git a/helm/librechat/templates/_checks.yaml b/helm/librechat/templates/_checks.yaml
new file mode 100755
index 0000000000..fb982c2348
--- /dev/null
+++ b/helm/librechat/templates/_checks.yaml
@@ -0,0 +1,4 @@
+
+{{ if hasKey .Values.env }}
+  {{ fail "The Value env has been renamed and moved to librechat.configEnv. Refer to https://www.librechat.ai/docs/local/helm_chart#migrate for more information" }}
+{{ end }}
\ No newline at end of file
diff --git a/helm/librechat/templates/_helpers.tpl b/helm/librechat/templates/_helpers.tpl
new file mode 100755
index 0000000000..6d0476e894
--- /dev/null
+++ b/helm/librechat/templates/_helpers.tpl
@@ -0,0 +1,65 @@
+
+
+
+
+{{/*
+Create chart name and version as used by the chart label.
+*/}}
+{{- define "librechat.chart" -}}
+{{- printf "%s-%s" .Chart.Name .Chart.Version | replace "+" "_" | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+
+{{/*
+Create a default fully qualified app name.
+We truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec).
+If release name contains chart name it will be used as a full name.
+*/}}
+{{- define "librechat.fullname" -}}
+{{- if $.Values.fullnameOverride }}
+{{- $.Values.fullnameOverride | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- $name := default .Chart.Name .Values.nameOverride }}
+{{- printf "%s-%s" .Release.Name $name | trunc 63 | trimSuffix "-" }}
+{{- end }}
+{{- end }}
+
+{{/*
+Common labels
+*/}}
+{{- define "librechat.labels" -}}
+helm.sh/chart: {{ include "librechat.chart" . }}
+{{ include "librechat.selectorLabels" . }}
+{{- if .Chart.AppVersion }}
+app.kubernetes.io/version: {{ .Chart.AppVersion | quote }}
+{{- end }}
+app.kubernetes.io/managed-by: {{ .Release.Service }}
+{{- end }}
+
+{{/*
+Selector labels
+*/}}
+{{- define "librechat.selectorLabels" -}}
+app.kubernetes.io/name: {{ include "librechat.fullname" . }}
+app.kubernetes.io/instance: {{ .Release.Name }}
+{{- end }}
+
+
+{{/*
+RAG Selector labels
+*/}}
+{{- define "rag.selectorLabels" -}}
+app.kubernetes.io/name: {{ include "librechat.fullname" . }}-rag
+app.kubernetes.io/instance: {{ .Release.Name }}
+{{- end }}
+
+{{/*
+Create the name of the service account to use
+*/}}
+{{- define "librechat.serviceAccountName" -}}
+{{- if .Values.serviceAccount.create }}
+{{- default (include "librechat.fullname" .) .Values.serviceAccount.name }}
+{{- else }}
+{{- default "default" .Values.serviceAccount.name }}
+{{- end }}
+{{- end }}
diff --git a/helm/librechat/templates/configmap-env.yaml b/helm/librechat/templates/configmap-env.yaml
new file mode 100755
index 0000000000..0817ceeaff
--- /dev/null
+++ b/helm/librechat/templates/configmap-env.yaml
@@ -0,0 +1,17 @@
+kind: ConfigMap
+apiVersion: v1
+metadata:
+  name: {{ include "librechat.fullname" $ }}-configenv
+data:
+  {{- if (index .Values "librechat-rag-api" "enabled") }}
+  RAG_API_URL: http://{{ include "rag.fullname" (index .Subcharts "librechat-rag-api") | lower }}.{{ .Release.Namespace | lower }}.svc.cluster.local:8000 
+  {{- end }}
+  {{- if and (not (dig "configEnv" "MEILI_HOST" "" .Values.librechat)) .Values.meilisearch.enabled }}
+  MEILI_HOST: http://{{ include "meilisearch.fullname" .Subcharts.meilisearch }}.{{ .Release.Namespace | lower }}.svc.cluster.local:7700
+  {{- end }}
+  {{- if and (not (dig "configEnv" "MONGO_URI" "" .Values.librechat)) .Values.mongodb.enabled }}
+  MONGO_URI: mongodb://{{ include "mongodb.service.nameOverride" .Subcharts.mongodb }}.{{ .Release.Namespace | lower }}.svc.cluster.local:27017/LibreChat
+  {{- end }}
+  {{- if .Values.librechat.configEnv }}
+  {{- toYaml .Values.librechat.configEnv | nindent 2 }}
+  {{- end }}
\ No newline at end of file
diff --git a/helm/librechat/templates/configmap.yaml b/helm/librechat/templates/configmap.yaml
new file mode 100755
index 0000000000..dd80ce1bbb
--- /dev/null
+++ b/helm/librechat/templates/configmap.yaml
@@ -0,0 +1,10 @@
+{{- if .Values.librechat.configYamlContent }}
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: {{ include "librechat.fullname" $ }}-config
+data:
+  librechat.yaml: |
+{{ .Values.librechat.configYamlContent | toYaml | indent 4 }}
+
+{{- end }}
\ No newline at end of file
diff --git a/helm/librechat/templates/deployment.yaml b/helm/librechat/templates/deployment.yaml
new file mode 100755
index 0000000000..9f6e4f624f
--- /dev/null
+++ b/helm/librechat/templates/deployment.yaml
@@ -0,0 +1,104 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: {{ include "librechat.fullname" $ }}
+  labels:
+    {{- include "librechat.labels" . | nindent 4 }}
+spec:
+  replicas: {{ .Values.replicaCount }}
+  {{- if .Values.updateStrategy }}
+  strategy: {{- toYaml .Values.updateStrategy | nindent 4 }}
+  {{- end }}
+  selector:
+    matchLabels:
+      {{- include "librechat.selectorLabels" . | nindent 6 }}
+  template:
+    metadata:
+      annotations:
+        {{ if .Values.librechat.configYamlContent }}checksum/config: {{ include (print $.Template.BasePath "/configmap.yaml") . | sha256sum }}{{ end }}
+        checksum/configEnv: {{ include (print $.Template.BasePath "/configmap-env.yaml") . | sha256sum }}
+        {{- with .Values.podAnnotations }}
+        {{- toYaml . | nindent 8 }}
+        {{- end }}
+      labels:
+        {{- include "librechat.labels" . | nindent 8 }}
+        {{- with .Values.podLabels }}
+        {{- toYaml . | nindent 8 }}
+        {{- end }}
+    spec:
+      {{- with .Values.imagePullSecrets }}
+      imagePullSecrets:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      securityContext:
+        {{- toYaml .Values.podSecurityContext | nindent 8 }}
+      containers:
+        - name: {{ include "librechat.fullname" $ }}
+          securityContext:
+            {{- toYaml .Values.securityContext | nindent 12 }}
+          image: "{{ .Values.image.registry }}/{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
+          imagePullPolicy: {{ .Values.image.pullPolicy }}
+          ports:
+            - name: http
+              containerPort: {{ .Values.service.port }}
+              protocol: TCP
+          lifecycle:
+            {{- toYaml .Values.lifecycle | nindent 12 }}
+          livenessProbe:
+            {{- toYaml .Values.livenessProbe | nindent 12 }}
+          readinessProbe:
+            {{- toYaml .Values.readinessProbe | nindent 12 }}
+          resources:
+            {{- toYaml .Values.resources | nindent 12 }}
+          volumeMounts:
+          {{- if or .Values.librechat.configYamlContent .Values.librechat.existingConfigYaml }}
+          - name: config-yaml
+            mountPath: "/app/librechat.yaml"
+            subPath: "librechat.yaml"
+            readOnly: true
+          {{- end }}
+          {{- if .Values.librechat.imageVolume.enabled }}
+          - name: image-volume
+            mountPath: "/app/client/public/images"
+          {{- end }}
+          {{- if .Values.volumeMounts }}
+          {{- toYaml .Values.volumeMounts | nindent 10 }}
+          {{- end }}
+          envFrom:
+          - configMapRef:
+              name: {{ include "librechat.fullname" $ }}-configenv
+          {{- if .Values.global.librechat.existingSecretName }}
+          - secretRef:
+              name: {{ .Values.global.librechat.existingSecretName }}
+              optional: true
+          {{- end }}
+      volumes:
+      {{- if or .Values.librechat.configYamlContent .Values.librechat.existingConfigYaml }}
+      - name: config-yaml
+        configMap:
+        {{- if .Values.librechat.existingConfigYaml }}
+          name: {{ .Values.librechat.existingConfigYaml }}
+        {{- else if .Values.librechat.configYamlContent }}
+          name: {{ include "librechat.fullname" $ }}-config
+        {{- end }}
+      {{- end }}
+      {{- if .Values.librechat.imageVolume.enabled }}
+      - name: image-volume
+        persistentVolumeClaim:
+          claimName: {{ include "librechat.fullname" $ }}-images
+      {{- end }}
+      {{- if .Values.volumes }}
+      {{- toYaml .Values.volumes | nindent 6 }}
+      {{- end }}
+      {{- with .Values.nodeSelector }}
+      nodeSelector:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.affinity }}
+      affinity:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.tolerations }}
+      tolerations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
diff --git a/helm/librechat/templates/hpa.yaml b/helm/librechat/templates/hpa.yaml
new file mode 100755
index 0000000000..b01936cdcf
--- /dev/null
+++ b/helm/librechat/templates/hpa.yaml
@@ -0,0 +1,28 @@
+{{- if .Values.autoscaling.enabled }}
+apiVersion: autoscaling/v2beta1
+kind: HorizontalPodAutoscaler
+metadata:
+  name: {{ include "librechat.fullname" $ }}
+  labels:
+    {{- include "librechat.labels" . | nindent 4 }}
+spec:
+  scaleTargetRef:
+    apiVersion: apps/v1
+    kind: Deployment
+    name: {{ include "librechat.fullname" $ }}
+  minReplicas: {{ .Values.autoscaling.minReplicas }}
+  maxReplicas: {{ .Values.autoscaling.maxReplicas }}
+  metrics:
+    {{- if .Values.autoscaling.targetCPUUtilizationPercentage }}
+    - type: Resource
+      resource:
+        name: cpu
+        targetAverageUtilization: {{ .Values.autoscaling.targetCPUUtilizationPercentage }}
+    {{- end }}
+    {{- if .Values.autoscaling.targetMemoryUtilizationPercentage }}
+    - type: Resource
+      resource:
+        name: memory
+        targetAverageUtilization: {{ .Values.autoscaling.targetMemoryUtilizationPercentage }}
+    {{- end }}
+{{- end }}
\ No newline at end of file
diff --git a/helm/librechat/templates/ingress.yaml b/helm/librechat/templates/ingress.yaml
new file mode 100755
index 0000000000..c7646fcef1
--- /dev/null
+++ b/helm/librechat/templates/ingress.yaml
@@ -0,0 +1,60 @@
+{{- if .Values.ingress.enabled -}}
+{{- $svcPort := .Values.service.port -}}
+{{- if and .Values.ingress.className (not (semverCompare ">=1.18-0" .Capabilities.KubeVersion.GitVersion)) }}
+  {{- if not (hasKey .Values.ingress.annotations "kubernetes.io/ingress.class") }}
+  {{- $_ := set .Values.ingress.annotations "kubernetes.io/ingress.class" .Values.ingress.className}}
+  {{- end }}
+{{- end }}
+{{- if semverCompare ">=1.19-0" .Capabilities.KubeVersion.GitVersion -}}
+apiVersion: networking.k8s.io/v1
+{{- else if semverCompare ">=1.14-0" .Capabilities.KubeVersion.GitVersion -}}
+apiVersion: networking.k8s.io/v1beta1
+{{- else -}}
+apiVersion: extensions/v1beta1
+{{- end }}
+kind: Ingress
+metadata:
+  name: {{ include "librechat.fullname" $ }}
+  labels:
+    {{- include "librechat.labels" . | nindent 4 }}
+  {{- with .Values.ingress.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+spec:
+  {{- if and .Values.ingress.className (semverCompare ">=1.18-0" .Capabilities.KubeVersion.GitVersion) }}
+  ingressClassName: {{ .Values.ingress.className }}
+  {{- end }}
+  {{- if .Values.ingress.tls }}
+  tls:
+    {{- range .Values.ingress.tls }}
+    - hosts:
+        {{- range .hosts }}
+        - {{ . | quote }}
+        {{- end }}
+      secretName: {{ .secretName }}
+    {{- end }}
+  {{- end }}
+  rules:
+    {{- range .Values.ingress.hosts }}
+    - host: {{ .host | quote }}
+      http:
+        paths:
+          {{- range .paths }}
+          - path: {{ .path }}
+            {{- if and .pathType (semverCompare ">=1.18-0" $.Capabilities.KubeVersion.GitVersion) }}
+            pathType: {{ .pathType }}
+            {{- end }}
+            backend:
+              {{- if semverCompare ">=1.19-0" $.Capabilities.KubeVersion.GitVersion }}
+              service:
+                name: {{ include "librechat.fullname" $ }}
+                port:
+                  number: {{ $svcPort }}
+              {{- else }}
+              serviceName: {{ include "librechat.fullname" $ }}
+              servicePort: {{ $svcPort }}
+              {{- end }}
+          {{- end }}
+    {{- end }}
+{{- end }}
diff --git a/helm/librechat/templates/persistentvolumeclaim.yaml b/helm/librechat/templates/persistentvolumeclaim.yaml
new file mode 100755
index 0000000000..5e75336787
--- /dev/null
+++ b/helm/librechat/templates/persistentvolumeclaim.yaml
@@ -0,0 +1,16 @@
+{{- if .Values.librechat.imageVolume.enabled }}
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  name: {{ include "librechat.fullname" $ }}-images
+spec:
+  accessModes:
+    - {{ .Values.librechat.imageVolume.accessModes }}
+{{- if .Values.librechat.imageVolume.storageClassName }}
+  storageClassName: {{ .Values.librechat.imageVolume.storageClassName }}
+{{- end }}          
+  volumeMode: Filesystem
+  resources:
+    requests:
+      storage: {{ .Values.librechat.imageVolume.size }}
+{{- end }}
\ No newline at end of file
diff --git a/helm/librechat/templates/service.yaml b/helm/librechat/templates/service.yaml
new file mode 100755
index 0000000000..d2b778bb0b
--- /dev/null
+++ b/helm/librechat/templates/service.yaml
@@ -0,0 +1,17 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: {{ include "librechat.fullname" . }}
+  labels:
+    {{- include "librechat.labels" . | nindent 4 }}
+  annotations:
+  {{- toYaml .Values.service.annotations | nindent 4 }}
+spec:
+  type: {{ .Values.service.type }}
+  ports:
+    - port: {{ .Values.service.port }}
+      targetPort: http
+      protocol: TCP
+      name: http
+  selector:
+    {{- include "librechat.selectorLabels" . | nindent 4 }}
diff --git a/helm/librechat/templates/tests/test-connection.yaml b/helm/librechat/templates/tests/test-connection.yaml
new file mode 100755
index 0000000000..4bae2aa111
--- /dev/null
+++ b/helm/librechat/templates/tests/test-connection.yaml
@@ -0,0 +1,15 @@
+apiVersion: v1
+kind: Pod
+metadata:
+  name: "{{ include "librechat.fullname" . }}-test-connection"
+  labels:
+    {{- include "librechat.labels" . | nindent 4 }}
+  annotations:
+    "helm.sh/hook": test
+spec:
+  containers:
+    - name: wget
+      image: busybox
+      command: ['wget']
+      args: ['{{ include "librechat.fullname" . }}:{{ .Values.service.port }}']
+  restartPolicy: Never
diff --git a/helm/librechat/values.yaml b/helm/librechat/values.yaml
new file mode 100755
index 0000000000..5b8742d25e
--- /dev/null
+++ b/helm/librechat/values.yaml
@@ -0,0 +1,234 @@
+# Default values for librechat.
+# This is a YAML-formatted file.
+# Declare variables to be passed into your templates.
+
+replicaCount: 1
+
+
+
+global:
+   # existing Secret for all envs/ only Passwords. Can be locally generated with: kubectl create secret generic librechat-secret-envs --from-env-file=.env.example --dry-run=client -o yaml > secret-envs.yaml
+   # For better maintainabillity, you can put all vars directly in the config Section and only overwrite Secrets with this if nessesary.
+   # Required Values:
+   # - MEILI_MASTER_KEY
+  librechat:
+    existingSecretName: "librechat-credentials-env"
+    # Used for Setting the Right Key, can be something like AZURE_API_KEY, if Azure OpenAI is used
+    existingSecretApiKey: OPENAI_API_KEY
+
+librechat:
+  configEnv:
+    PLUGIN_MODELS: gpt-4,gpt-4-turbo-preview,gpt-4-0125-preview,gpt-4-1106-preview,gpt-4-0613,gpt-3.5-turbo,gpt-3.5-turbo-0125,gpt-3.5-turbo-1106,gpt-3.5-turbo-0613
+    DEBUG_PLUGINS: "true"
+    # IMPORTANT -- GENERATE your own: openssl rand -hex 32 and openssl rand -hex 16 for CREDS_IV. Best Practise: Put into Secret. See gloobal.librechat.existingSecretName
+    CREDS_KEY: 9e95d9894da7e68dd69c0046caf5343c8b1e80c89609b5a1e40e6568b5b23ce6
+    CREDS_IV: ac028c86ba23f4cd48165e0ca9f2c683
+    JWT_SECRET: 16f8c0ef4a5d391b26034086c628469d3f9f497f08163ab9b40137092f2909ef
+    JWT_REFRESH_SECRET: eaa5191f2914e30b9387fd84e254e4ba6fc51b4654968a9b0803b456a54b8418
+    # Set Config Params here
+    # ENV_NAME: env-value
+
+    # existing Secret for all envs/ only Passwords. Can be locally generated with: kubectl create secret generic librechat-secret-envs --from-env-file=.env.example --dry-run=client -o yaml > secret-envs.yaml
+    # For better maintainabillity, you can put all vars directly in the config Section and only overwrite Secrets with this if nessesary.
+    # Required Values:
+    # - MEILI_MASTER_KEY
+  existingSecretName: "librechat-credentials-env"
+  
+  # For adding a custom config yaml-file you can set the contents in this var. See https://www.librechat.ai/docs/configuration/librechat_yaml/example
+  configYamlContent: ""
+  # configYamlContent: |
+  #   version: 1.0.8
+
+  #   cache: true
+
+  #   interface:
+  #     # Privacy policy settings
+  #     privacyPolicy:
+  #       externalUrl: 'https://librechat.ai/privacy-policy'
+  #       openNewTab: true
+
+  #     # Terms of service
+  #     termsOfService:
+  #       externalUrl: 'https://librechat.ai/tos'
+  #       openNewTab: true
+
+  #   registration:
+  #     socialLogins: ["discord", "facebook", "github", "google", "openid"] 
+  #   endpoints:
+  #     azureOpenAI:
+  #      # Endpoint-level configuration
+  #      titleModel: "gpt-4o"
+  #      plugins: true
+  #      assistants: true
+  #      groups:
+  #           Group-level configuration
+  #         - group: "my-resource-sweden"
+  #           apiKey: "${SWEDEN_API_KEY}"
+  #           instanceName: "my-resource-sweden"
+  #           deploymentName: gpt-4-1106-preview
+  #           version: "2024-03-01-preview"
+  #           assistants: true
+  #           # Model-level configuration
+  #           models:
+  #             gpt-4o: true
+  #     custom:
+  #       # OpenRouter.ai
+  #       - name: "OpenRouter"
+  #         apiKey: "${OPENROUTER_KEY}"
+  #         baseURL: "https://openrouter.ai/api/v1"
+  #         models:
+  #           default: ["openai/gpt-3.5-turbo"]
+  #           fetch: true
+  #         titleConvo: true
+  #         titleModel: "gpt-3.5-turbo"
+  #         summarize: false
+  #         summaryModel: "gpt-3.5-turbo"
+  #         forcePrompt: false
+  #         modelDisplayLabel: "OpenRouter"
+
+  # name of existing Yaml configmap, key must be librechat.yaml
+  existingConfigYaml: ""
+
+  # Volume used to store image Files uploaded to the Web UI
+  imageVolume:
+    enabled: true
+    size: 10G
+    accessModes: ReadWriteOnce
+    # storageClassName: 
+
+# only lite RAG is supported
+librechat-rag-api:
+  enabled: false
+  # can be azure, openai, huggingface or huggingfacetei
+  embeddingsProvider: openai
+
+
+image:
+  repository: danny-avila/librechat
+  registry: ghcr.io
+  pullPolicy: IfNotPresent
+  # Overrides the image tag whose default is the chart appVersion.
+  tag: ""
+
+
+imagePullSecrets: []
+nameOverride: ""
+fullnameOverride: ""
+
+
+lifecycle: {}
+# # base for adding a custom banner // see https://github.com/danny-avila/LibreChat/pull/3952 for an example
+#   postStart:
+#     exec:
+#       command: ["/bin/sh", "-c", "npm run update-banner <displayFrom(Format: yyyy-mm-ddTHH:MM:SSZ)> <displayTo(Format: yyyy-mm-ddTHH:MM:SSZ)> <message> <isPublic(true/false)>"]
+
+
+
+podAnnotations: {}
+podLabels: {}
+
+podSecurityContext:
+  fsGroup: 2000
+
+securityContext:
+  capabilities:
+    drop:
+    - ALL
+  # readOnlyRootFilesystem: true # not supported yet
+  runAsNonRoot: true
+  runAsUser: 1000
+
+service:
+  type: ClusterIP
+  port: 3080
+  annotations: {}
+
+ingress:
+  enabled: true
+  className: ""
+  annotations: {}
+    # kubernetes.io/ingress.class: nginx
+    # kubernetes.io/tls-acme: "true"
+  hosts:
+    - host: chat.example.com
+      paths:
+        - path: /
+          pathType: ImplementationSpecific
+  tls: []
+  #  - secretName: chart-example-tls
+  #    hosts:
+  #      - chat.example.com
+
+resources: {}
+  # We usually recommend not to specify default resources and to leave this as a conscious
+  # choice for the user. This also increases chances charts run on environments with little
+  # resources, such as Minikube. If you do want to specify resources, uncomment the following
+  # lines, adjust them as necessary, and remove the curly braces after 'resources:'.
+  # limits:
+  #   cpu: 100m
+  #   memory: 128Mi
+  # requests:
+  #   cpu: 100m
+  #   memory: 128Mi
+
+
+autoscaling:
+  enabled: false
+  minReplicas: 1
+  maxReplicas: 100
+  targetCPUUtilizationPercentage: 80
+  # targetMemoryUtilizationPercentage: 80
+
+livenessProbe:
+  httpGet:
+    path: /health
+    port: http
+readinessProbe:
+  httpGet:
+    path: /health
+    port: http
+
+# Additional volumes on the output Deployment definition.
+volumes: []
+# - name: foo
+#   secret:
+#     secretName: mysecret
+#     optional: false
+
+# Additional volumeMounts on the output Deployment definition.
+volumeMounts: []
+# - name: foo
+#   mountPath: "/etc/foo"
+#   readOnly: true
+
+nodeSelector: {}
+
+tolerations: []
+
+affinity: {}
+
+# Strategy for LibreChat deployment updates
+updateStrategy:
+  type: RollingUpdate
+
+# MongoDB Parameters
+mongodb:
+  enabled: true
+  auth:
+    enabled: false
+  databases:
+   - LibreChat
+#  persistence: 
+#    size: 8Gi
+
+
+meilisearch:
+  enabled: true
+  persistence:
+    enabled: true
+    storageClass: ""
+  image: 
+    tag: "v1.7.3"
+  auth:
+    # Use an existing Kubernetes secret for the MEILI_MASTER_KEY
+    existingMasterKeySecret: "librechat-credentials-env"
\ No newline at end of file

From 9c9fe4e03a3592e6b39edccc1136a63c72b39066 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 19 May 2025 10:28:18 -0400
Subject: [PATCH 13/26] =?UTF-8?q?=F0=9F=93=9C=20docs:=20Unreleased=20Chang?=
 =?UTF-8?q?elog=20(#7434)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* action: update Unreleased changelog

* Update CHANGELOG.md

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Danny Avila <danny@librechat.ai>
---
 CHANGELOG.md | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index eb4c65c3ab..f39c86cfa0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,23 +5,38 @@ All notable changes to this project will be documented in this file.
 
 
 
+
 ## [Unreleased]
 
 ### ✨ New Features
 
 - ✨ feat: implement search parameter updates by **@mawburn** in [#7151](https://github.com/danny-avila/LibreChat/pull/7151)
 - 🎏 feat: Add MCP support for Streamable HTTP Transport by **@benverhees** in [#7353](https://github.com/danny-avila/LibreChat/pull/7353)
+- 🔒 feat: Add Content Security Policy using Helmet middleware by **@rubentalstra** in [#7377](https://github.com/danny-avila/LibreChat/pull/7377)
+- ✨ feat: Add Normalization for MCP Server Names by **@danny-avila** in [#7421](https://github.com/danny-avila/LibreChat/pull/7421)
+- 📊 feat: Improve Helm Chart by **@hofq** in [#3638](https://github.com/danny-avila/LibreChat/pull/3638)
+
+### 🌍 Internationalization
+
+- 🌍 i18n: Add `Danish` and `Czech` and `Catalan` localization support by **@rubentalstra** in [#7373](https://github.com/danny-avila/LibreChat/pull/7373)
+- 🌍 i18n: Update translation.json with latest translations by **@github-actions[bot]** in [#7375](https://github.com/danny-avila/LibreChat/pull/7375)
 
 ### 🔧 Fixes
 
 - 💬 fix: update aria-label for accessibility in ConvoLink component by **@berry-13** in [#7320](https://github.com/danny-avila/LibreChat/pull/7320)
 - 🔑 fix: use `apiKey` instead of `openAIApiKey` in OpenAI-like Config by **@danny-avila** in [#7337](https://github.com/danny-avila/LibreChat/pull/7337)
 - 🔄 fix: update navigation logic in `useFocusChatEffect` to ensure correct search parameters are used by **@mawburn** in [#7340](https://github.com/danny-avila/LibreChat/pull/7340)
+- 🔄 fix: Improve MCP Connection Cleanup by **@danny-avila** in [#7400](https://github.com/danny-avila/LibreChat/pull/7400)
+- 🛡️ fix: Preset and Validation Logic for URL Query Params by **@danny-avila** in [#7407](https://github.com/danny-avila/LibreChat/pull/7407)
+- 🌘 fix: artifact of preview text is illegible in dark mode by **@nhtruong** in [#7405](https://github.com/danny-avila/LibreChat/pull/7405)
+- 🛡️ fix: Temporarily Remove CSP until Configurable by **@danny-avila** in [#7419](https://github.com/danny-avila/LibreChat/pull/7419)
+- 💽 fix: Exclude index page `/` from static cache settings by **@sbruel** in [#7382](https://github.com/danny-avila/LibreChat/pull/7382)
 
 ### ⚙️ Other Changes
 
 - 📜 docs: CHANGELOG for release v0.7.8 by **@github-actions[bot]** in [#7290](https://github.com/danny-avila/LibreChat/pull/7290)
 - 📦 chore: Update API Package Dependencies by **@danny-avila** in [#7359](https://github.com/danny-avila/LibreChat/pull/7359)
+- 📜 docs: Unreleased Changelog by **@github-actions[bot]** in [#7321](https://github.com/danny-avila/LibreChat/pull/7321)
 
 
 
@@ -67,7 +82,6 @@ Changes from v0.7.8-rc1 to v0.7.8.
 
 ---
 ## [v0.7.8-rc1] - 
-## [v0.7.8-rc1] - 
 
 Changes from v0.7.7 to v0.7.8-rc1.
 

From 739b0d30128a983bded1f37e7ec0855f56967bde Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Mon, 19 May 2025 19:22:43 -0400
Subject: [PATCH 14/26] =?UTF-8?q?=F0=9F=9B=A1=EF=B8=8F=20chore:=20`multer`?=
 =?UTF-8?q?=20v2.0.0=20for=20CVE-2025-47935=20and=20CVE-2025-47944=20(#745?=
 =?UTF-8?q?4)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: bump multer to v2.0.0 to resolve CVE-2025-47935 and CVE-2025-47944

* chore: temp. remove helmet dependency to appease unused NPM package workflow
---
 api/package.json  |  3 +-
 package-lock.json | 70 +++++++++++++++++++++--------------------------
 2 files changed, 32 insertions(+), 41 deletions(-)

diff --git a/api/package.json b/api/package.json
index 8782457dbc..1f2e326f7c 100644
--- a/api/package.json
+++ b/api/package.json
@@ -71,7 +71,6 @@
     "firebase": "^11.0.2",
     "googleapis": "^126.0.1",
     "handlebars": "^4.7.7",
-    "helmet": "^8.1.0",
     "https-proxy-agent": "^7.0.6",
     "ioredis": "^5.3.2",
     "js-yaml": "^4.1.0",
@@ -87,7 +86,7 @@
     "mime": "^3.0.0",
     "module-alias": "^2.2.3",
     "mongoose": "^8.12.1",
-    "multer": "^1.4.5-lts.1",
+    "multer": "^2.0.0",
     "nanoid": "^3.3.7",
     "nodemailer": "^6.9.15",
     "ollama": "^0.5.0",
diff --git a/package-lock.json b/package-lock.json
index 6d5d8b0d9d..014bd4fe37 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -87,7 +87,6 @@
         "firebase": "^11.0.2",
         "googleapis": "^126.0.1",
         "handlebars": "^4.7.7",
-        "helmet": "^8.1.0",
         "https-proxy-agent": "^7.0.6",
         "ioredis": "^5.3.2",
         "js-yaml": "^4.1.0",
@@ -103,7 +102,7 @@
         "mime": "^3.0.0",
         "module-alias": "^2.2.3",
         "mongoose": "^8.12.1",
-        "multer": "^1.4.5-lts.1",
+        "multer": "^2.0.0",
         "nanoid": "^3.3.7",
         "nodemailer": "^6.9.15",
         "ollama": "^0.5.0",
@@ -830,6 +829,18 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
+    "api/node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
     "api/node_modules/mongodb": {
       "version": "6.14.2",
       "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-6.14.2.tgz",
@@ -975,6 +986,24 @@
         "url": "https://opencollective.com/mongoose"
       }
     },
+    "api/node_modules/multer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/multer/-/multer-2.0.0.tgz",
+      "integrity": "sha512-bS8rPZurbAuHGAnApbM9d4h1wSoYqrOqkE+6a64KLMK9yWU7gJXBDDVklKQ3TPi9DRb85cRs6yXaC0+cjxRtRg==",
+      "license": "MIT",
+      "dependencies": {
+        "append-field": "^1.0.0",
+        "busboy": "^1.0.0",
+        "concat-stream": "^1.5.2",
+        "mkdirp": "^0.5.4",
+        "object-assign": "^4.1.1",
+        "type-is": "^1.6.4",
+        "xtend": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 10.16.0"
+      }
+    },
     "api/node_modules/node-fetch": {
       "version": "2.6.7",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
@@ -31511,15 +31540,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/helmet": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/helmet/-/helmet-8.1.0.tgz",
-      "integrity": "sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
     "node_modules/highlight.js": {
       "version": "11.8.0",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.8.0.tgz",
@@ -36384,34 +36404,6 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
-    "node_modules/multer": {
-      "version": "1.4.5-lts.1",
-      "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.5-lts.1.tgz",
-      "integrity": "sha512-ywPWvcDMeH+z9gQq5qYHCCy+ethsk4goepZ45GLD63fOu0YcNecQxi64nDs3qluZB+murG3/D4dJ7+dGctcCQQ==",
-      "dependencies": {
-        "append-field": "^1.0.0",
-        "busboy": "^1.0.0",
-        "concat-stream": "^1.5.2",
-        "mkdirp": "^0.5.4",
-        "object-assign": "^4.1.1",
-        "type-is": "^1.6.4",
-        "xtend": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 6.0.0"
-      }
-    },
-    "node_modules/multer/node_modules/mkdirp": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-      "dependencies": {
-        "minimist": "^1.2.6"
-      },
-      "bin": {
-        "mkdirp": "bin/cmd.js"
-      }
-    },
     "node_modules/mustache": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",

From c79ee32006db3240ce8cfcb533278d189fa4ed67 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Fri, 16 May 2025 17:50:18 +0200
Subject: [PATCH 15/26] =?UTF-8?q?=F0=9F=96=BC=EF=B8=8F=20feat:=20Tool=20Ca?=
 =?UTF-8?q?ll=20and=20Loading=20UI=20Refresh,=20Image=20Resize=20Config=20?=
 =?UTF-8?q?(#7086)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ feat: Enhance Spinner component with customizable properties and improved animation

* 🔧 fix: Replace Loader with Spinner in RunCode component and update FilePreview to use Spinner for progress indication

* ✨ feat: Refactor icons in CodeProgress and CancelledIcon components; enhance animation and styling in ExecuteCode and ProgressText components

* ✨ feat: Refactor attachment handling in ExecuteCode component; replace individual attachment rendering with AttachmentGroup for improved structure

* ✨ feat: Refactor dialog components for improved accessibility and styling; integrate Skeleton loading state in Image component

* ✨ feat: Refactor ToolCall component to use ToolCallInfo for better structure; replace ToolPopover with AttachmentGroup; enhance ProgressText with error handling and improved UI elements

* 🔧 fix: Remove unnecessary whitespace in ProgressText

* 🔧 fix: Remove unnecessary margin from AgentFooter and AgentPanel components; clean up SidePanel imports

* ✨ feat: Enhance ToolCall and ToolCallInfo components with improved styling; update translations and add warning text color to Tailwind config

* 🔧 fix: Update import statement for useLocalize in ToolCallInfo component; fix: chatform transition

* ✨ feat: Refactor ToolCall and ToolCallInfo components for improved structure and styling; add optimized code block for better output display

* ✨ feat: Implement OpenAI image generation component; add progress tracking and localization for user feedback

* 🔧 fix: Adjust base duration values for image generation; optimize timing for quality settings

* chore: remove unnecessary space

* ✨ feat: Enhance OpenAI image generation with editing capabilities; update localization for progress feedback

* ✨ feat: Add download functionality to images; enhance DialogImage component with download button

* ✨ feat: Enhance image resizing functionality; support custom percentage and pixel dimensions in resizeImageBuffer
---
 .../tools/structured/OpenAIImageTools.js      |   2 +-
 api/server/services/Files/images/resize.js    |  29 +-
 api/server/services/Files/process.js          |   7 +-
 client/src/components/Chat/Input/ChatForm.tsx |   4 +-
 .../Chat/Input/Files/FilePreview.tsx          |  26 +-
 .../Chat/Input/Files/ImagePreview.tsx         |   2 +-
 .../Chat/Messages/Content/CancelledIcon.tsx   |  16 +-
 .../Chat/Messages/Content/CodeAnalyze.tsx     |  21 -
 .../Chat/Messages/Content/ContentParts.tsx    |   2 +-
 .../Chat/Messages/Content/DialogImage.tsx     |  72 ++--
 .../Chat/Messages/Content/FinishedIcon.tsx    |   5 +-
 .../Chat/Messages/Content/Image.tsx           | 106 ++---
 .../components/Chat/Messages/Content/Part.tsx |  20 +-
 .../Messages/Content/Parts/Attachment.tsx     | 124 +++++-
 .../Messages/Content/Parts/CodeProgress.tsx   |  90 -----
 .../Messages/Content/Parts/ExecuteCode.tsx    | 180 +++++++--
 .../Parts/OpenAIImageGen/OpenAIImageGen.tsx   | 205 ++++++++++
 .../Parts/OpenAIImageGen/ProgressText.tsx     |  62 +++
 .../Content/Parts/OpenAIImageGen/index.ts     |   1 +
 .../Chat/Messages/Content/Parts/Stdout.tsx    |   2 +-
 .../Chat/Messages/Content/Parts/index.ts      |  10 +
 .../Chat/Messages/Content/ProgressText.tsx    |  42 +-
 .../Chat/Messages/Content/ToolCall.tsx        | 230 ++++++-----
 .../Chat/Messages/Content/ToolCallInfo.tsx    |  74 ++++
 .../Chat/Messages/Content/ToolPopover.tsx     |  71 ----
 .../Conversations/Conversations.tsx           |   2 +-
 .../components/Messages/Content/CodeBlock.tsx |   2 +-
 .../components/Messages/Content/RunCode.tsx   |   5 +-
 .../SidePanel/Agents/AgentFooter.tsx          |   2 +-
 .../SidePanel/Agents/AgentPanel.tsx           |   2 +-
 .../components/SidePanel/Agents/Images.tsx    |   2 +-
 client/src/components/SidePanel/SidePanel.tsx |   1 -
 client/src/components/svg/Spinner.tsx         |  67 +++-
 client/src/components/ui/Button.tsx           |   2 +-
 client/src/components/ui/OriginalDialog.tsx   |   2 +-
 client/src/components/ui/PixelCard.tsx        | 375 ++++++++++++++++++
 client/src/components/ui/index.ts             |   3 +-
 client/src/locales/en/translation.json        |  11 +-
 client/src/style.css                          |  68 +++-
 client/src/utils/index.ts                     |   1 +
 client/src/utils/scaleImage.ts                |  21 +
 client/tailwind.config.cjs                    |   1 +
 librechat.example.yaml                        |   3 +
 packages/data-provider/src/file-config.ts     |   6 +
 44 files changed, 1452 insertions(+), 527 deletions(-)
 delete mode 100644 client/src/components/Chat/Messages/Content/Parts/CodeProgress.tsx
 create mode 100644 client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx
 create mode 100644 client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/ProgressText.tsx
 create mode 100644 client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/index.ts
 create mode 100644 client/src/components/Chat/Messages/Content/Parts/index.ts
 create mode 100644 client/src/components/Chat/Messages/Content/ToolCallInfo.tsx
 delete mode 100644 client/src/components/Chat/Messages/Content/ToolPopover.tsx
 create mode 100644 client/src/components/ui/PixelCard.tsx
 create mode 100644 client/src/utils/scaleImage.ts

diff --git a/api/app/clients/tools/structured/OpenAIImageTools.js b/api/app/clients/tools/structured/OpenAIImageTools.js
index 85941a779a..afea9dfd55 100644
--- a/api/app/clients/tools/structured/OpenAIImageTools.js
+++ b/api/app/clients/tools/structured/OpenAIImageTools.js
@@ -30,7 +30,7 @@ const DEFAULT_IMAGE_EDIT_DESCRIPTION =
 
 When to use \`image_edit_oai\`:
 - The user wants to modify, extend, or remix one **or more** uploaded images, either:
-  - Previously generated, or in the current request (both to be included in the \`image_ids\` array).
+- Previously generated, or in the current request (both to be included in the \`image_ids\` array).
 - Always when the user refers to uploaded images for editing, enhancement, remixing, style transfer, or combining elements.
 - Any current or existing images are to be used as visual guides.
 - If there are any files in the current request, they are more likely than not expected as references for image edit requests.
diff --git a/api/server/services/Files/images/resize.js b/api/server/services/Files/images/resize.js
index 50bec1ef3b..c2cdaacb63 100644
--- a/api/server/services/Files/images/resize.js
+++ b/api/server/services/Files/images/resize.js
@@ -5,9 +5,10 @@ const { EModelEndpoint } = require('librechat-data-provider');
  * Resizes an image from a given buffer based on the specified resolution.
  *
  * @param {Buffer} inputBuffer - The buffer of the image to be resized.
- * @param {'low' | 'high'} resolution - The resolution to resize the image to.
+ * @param {'low' | 'high' | {percentage?: number, px?: number}} resolution - The resolution to resize the image to.
  *                                      'low' for a maximum of 512x512 resolution,
- *                                      'high' for a maximum of 768x2000 resolution.
+ *                                      'high' for a maximum of 768x2000 resolution,
+ *                                      or a custom object with percentage or px values.
  * @param {EModelEndpoint} endpoint - Identifier for specific endpoint handling
  * @returns {Promise<{buffer: Buffer, width: number, height: number}>} An object containing the resized image buffer and its dimensions.
  * @throws Will throw an error if the resolution parameter is invalid.
@@ -17,10 +18,32 @@ async function resizeImageBuffer(inputBuffer, resolution, endpoint) {
   const maxShortSideHighRes = 768;
   const maxLongSideHighRes = endpoint === EModelEndpoint.anthropic ? 1568 : 2000;
 
+  let customPercent, customPx;
+  if (resolution && typeof resolution === 'object') {
+    if (typeof resolution.percentage === 'number') {
+      customPercent = resolution.percentage;
+    } else if (typeof resolution.px === 'number') {
+      customPx = resolution.px;
+    }
+  }
+
   let newWidth, newHeight;
   let resizeOptions = { fit: 'inside', withoutEnlargement: true };
 
-  if (resolution === 'low') {
+  if (customPercent != null || customPx != null) {
+    // percentage-based resize
+    const metadata = await sharp(inputBuffer).metadata();
+    if (customPercent != null) {
+      newWidth = Math.round(metadata.width * (customPercent / 100));
+      newHeight = Math.round(metadata.height * (customPercent / 100));
+    } else {
+      // pixel max on both sides
+      newWidth = Math.min(metadata.width, customPx);
+      newHeight = Math.min(metadata.height, customPx);
+    }
+    resizeOptions.width = newWidth;
+    resizeOptions.height = newHeight;
+  } else if (resolution === 'low') {
     resizeOptions.width = maxLowRes;
     resizeOptions.height = maxLowRes;
   } else if (resolution === 'high') {
diff --git a/api/server/services/Files/process.js b/api/server/services/Files/process.js
index 81a4f52855..e8aef7da85 100644
--- a/api/server/services/Files/process.js
+++ b/api/server/services/Files/process.js
@@ -693,7 +693,7 @@ const processOpenAIFile = async ({
 const processOpenAIImageOutput = async ({ req, buffer, file_id, filename, fileExt }) => {
   const currentDate = new Date();
   const formattedDate = currentDate.toISOString();
-  const _file = await convertImage(req, buffer, 'high', `${file_id}${fileExt}`);
+  const _file = await convertImage(req, buffer, undefined, `${file_id}${fileExt}`);
   const file = {
     ..._file,
     usage: 1,
@@ -838,8 +838,9 @@ function base64ToBuffer(base64String) {
 
 async function saveBase64Image(
   url,
-  { req, file_id: _file_id, filename: _filename, endpoint, context, resolution = 'high' },
+  { req, file_id: _file_id, filename: _filename, endpoint, context, resolution },
 ) {
+  const effectiveResolution = resolution ?? req.app.locals.fileConfig?.imageGeneration ?? 'high';
   const file_id = _file_id ?? v4();
   let filename = `${file_id}-${_filename}`;
   const { buffer: inputBuffer, type } = base64ToBuffer(url);
@@ -852,7 +853,7 @@ async function saveBase64Image(
     }
   }
 
-  const image = await resizeImageBuffer(inputBuffer, resolution, endpoint);
+  const image = await resizeImageBuffer(inputBuffer, effectiveResolution, endpoint);
   const source = req.app.locals.fileStrategy;
   const { saveBuffer } = getStrategyFunctions(source);
   const filepath = await saveBuffer({
diff --git a/client/src/components/Chat/Input/ChatForm.tsx b/client/src/components/Chat/Input/ChatForm.tsx
index 7067280001..23bece3626 100644
--- a/client/src/components/Chat/Input/ChatForm.tsx
+++ b/client/src/components/Chat/Input/ChatForm.tsx
@@ -206,8 +206,8 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
     <form
       onSubmit={methods.handleSubmit(submitMessage)}
       className={cn(
-        'mx-auto flex flex-row gap-3 sm:px-2',
-        maximizeChatSpace ? 'w-full max-w-full' : 'md:max-w-3xl xl:max-w-4xl',
+        'mx-auto flex w-full flex-row gap-3 transition-[max-width] duration-300 sm:px-2',
+        maximizeChatSpace ? 'max-w-full' : 'md:max-w-3xl xl:max-w-4xl',
         centerFormOnLanding &&
           (conversationId == null || conversationId === Constants.NEW_CONVO) &&
           !isSubmitting &&
diff --git a/client/src/components/Chat/Input/Files/FilePreview.tsx b/client/src/components/Chat/Input/Files/FilePreview.tsx
index 31226ac65a..400834a5b5 100644
--- a/client/src/components/Chat/Input/Files/FilePreview.tsx
+++ b/client/src/components/Chat/Input/Files/FilePreview.tsx
@@ -1,9 +1,8 @@
 import type { TFile } from 'librechat-data-provider';
 import type { ExtendedFile } from '~/common';
 import FileIcon from '~/components/svg/Files/FileIcon';
-import ProgressCircle from './ProgressCircle';
+import { Spinner } from '~/components';
 import SourceIcon from './SourceIcon';
-import { useProgress } from '~/hooks';
 import { cn } from '~/utils';
 
 const FilePreview = ({
@@ -19,28 +18,15 @@ const FilePreview = ({
   };
   className?: string;
 }) => {
-  const radius = 55;
-  const circumference = 2 * Math.PI * radius;
-  const progress = useProgress(
-    file?.['progress'] ?? 1,
-    0.001,
-    (file as ExtendedFile | undefined)?.size ?? 1,
-  );
-
-  const offset = circumference - progress * circumference;
-  const circleCSSProperties = {
-    transition: 'stroke-dashoffset 0.5s linear',
-  };
-
   return (
     <div className={cn('relative size-10 shrink-0 overflow-hidden rounded-xl', className)}>
       <FileIcon file={file} fileType={fileType} />
       <SourceIcon source={file?.source} isCodeFile={!!file?.['metadata']?.fileIdentifier} />
-      {progress < 1 && (
-        <ProgressCircle
-          circumference={circumference}
-          offset={offset}
-          circleCSSProperties={circleCSSProperties}
+      {typeof file?.['progress'] === 'number' && file?.['progress'] < 1 && (
+        <Spinner
+          bgOpacity={0.2}
+          color="white"
+          className="absolute inset-0 m-2.5 flex items-center justify-center"
         />
       )}
     </div>
diff --git a/client/src/components/Chat/Input/Files/ImagePreview.tsx b/client/src/components/Chat/Input/Files/ImagePreview.tsx
index 5d66d5ddb4..fe761da862 100644
--- a/client/src/components/Chat/Input/Files/ImagePreview.tsx
+++ b/client/src/components/Chat/Input/Files/ImagePreview.tsx
@@ -161,7 +161,7 @@ const ImagePreview = ({
       <OGDialog open={isModalOpen} onOpenChange={setIsModalOpen}>
         <OGDialogContent
           showCloseButton={false}
-          className={cn('w-11/12 overflow-x-auto bg-transparent p-0 sm:w-auto')}
+          className="w-11/12 overflow-x-auto bg-transparent p-0 sm:w-auto"
           disableScroll={false}
         >
           <img
diff --git a/client/src/components/Chat/Messages/Content/CancelledIcon.tsx b/client/src/components/Chat/Messages/Content/CancelledIcon.tsx
index 6006fb5c51..e6afa74356 100644
--- a/client/src/components/Chat/Messages/Content/CancelledIcon.tsx
+++ b/client/src/components/Chat/Messages/Content/CancelledIcon.tsx
@@ -1,17 +1,9 @@
+import { X } from 'lucide-react';
+
 export default function CancelledIcon() {
   return (
-    <div
-      className="absolute left-0 top-0 flex h-full w-full items-center justify-center rounded-full bg-gray-300 text-white"
-      style={{ opacity: 1, transform: 'none' }}
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 9" fill="none" width="8" height="9">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M7.32256 1.48447C7.59011 1.16827 7.55068 0.695034 7.23447 0.427476C6.91827 0.159918 6.44503 0.199354 6.17748 0.515559L4.00002 3.08892L1.82256 0.515559C1.555 0.199354 1.08176 0.159918 0.765559 0.427476C0.449355 0.695034 0.409918 1.16827 0.677476 1.48447L3.01755 4.25002L0.677476 7.01556C0.409918 7.33176 0.449354 7.805 0.765559 8.07256C1.08176 8.34011 1.555 8.30068 1.82256 7.98447L4.00002 5.41111L6.17748 7.98447C6.44503 8.30068 6.91827 8.34011 7.23447 8.07256C7.55068 7.805 7.59011 7.33176 7.32256 7.01556L4.98248 4.25002L7.32256 1.48447Z"
-          fill="currentColor"
-        />
-      </svg>
+    <div className="flex h-full w-full items-center justify-center rounded-full bg-transparent text-text-secondary">
+      <X className="size-4" />
     </div>
   );
 }
diff --git a/client/src/components/Chat/Messages/Content/CodeAnalyze.tsx b/client/src/components/Chat/Messages/Content/CodeAnalyze.tsx
index f0918240ba..139496c621 100644
--- a/client/src/components/Chat/Messages/Content/CodeAnalyze.tsx
+++ b/client/src/components/Chat/Messages/Content/CodeAnalyze.tsx
@@ -1,31 +1,23 @@
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { CodeInProgress } from './Parts/CodeProgress';
 import { useProgress, useLocalize } from '~/hooks';
 import ProgressText from './ProgressText';
-import FinishedIcon from './FinishedIcon';
 import MarkdownLite from './MarkdownLite';
 import store from '~/store';
 
-const radius = 56.08695652173913;
-const circumference = 2 * Math.PI * radius;
-
 export default function CodeAnalyze({
   initialProgress = 0.1,
   code,
   outputs = [],
-  isSubmitting,
 }: {
   initialProgress: number;
   code: string;
   outputs: Record<string, unknown>[];
-  isSubmitting: boolean;
 }) {
   const localize = useLocalize();
   const progress = useProgress(initialProgress);
   const showAnalysisCode = useRecoilValue(store.showCode);
   const [showCode, setShowCode] = useState(showAnalysisCode);
-  const offset = circumference - progress * circumference;
 
   const logs = outputs.reduce((acc, output) => {
     if (output['logs']) {
@@ -37,19 +29,6 @@ export default function CodeAnalyze({
   return (
     <>
       <div className="my-2.5 flex items-center gap-2.5">
-        <div className="relative h-5 w-5 shrink-0">
-          {progress < 1 ? (
-            <CodeInProgress
-              offset={offset}
-              radius={radius}
-              progress={progress}
-              isSubmitting={isSubmitting}
-              circumference={circumference}
-            />
-          ) : (
-            <FinishedIcon />
-          )}
-        </div>
         <ProgressText
           progress={progress}
           onClick={() => setShowCode((prev) => !prev)}
diff --git a/client/src/components/Chat/Messages/Content/ContentParts.tsx b/client/src/components/Chat/Messages/Content/ContentParts.tsx
index 3805e0bb41..b40014318d 100644
--- a/client/src/components/Chat/Messages/Content/ContentParts.tsx
+++ b/client/src/components/Chat/Messages/Content/ContentParts.tsx
@@ -3,10 +3,10 @@ import { useRecoilValue, useRecoilState } from 'recoil';
 import { ContentTypes } from 'librechat-data-provider';
 import type { TMessageContentParts, TAttachment, Agents } from 'librechat-data-provider';
 import { ThinkingButton } from '~/components/Artifacts/Thinking';
-import EditTextPart from './Parts/EditTextPart';
 import useLocalize from '~/hooks/useLocalize';
 import { mapAttachments } from '~/utils/map';
 import { MessageContext } from '~/Providers';
+import { EditTextPart } from './Parts';
 import store from '~/store';
 import Part from './Part';
 
diff --git a/client/src/components/Chat/Messages/Content/DialogImage.tsx b/client/src/components/Chat/Messages/Content/DialogImage.tsx
index c7cf734a7f..3418f5c9dc 100644
--- a/client/src/components/Chat/Messages/Content/DialogImage.tsx
+++ b/client/src/components/Chat/Messages/Content/DialogImage.tsx
@@ -1,42 +1,42 @@
-import * as Dialog from '@radix-ui/react-dialog';
+import { X, ArrowDownToLine } from 'lucide-react';
+import { Button, OGDialog, OGDialogContent } from '~/components';
 
-export default function DialogImage({ src = '', width = 1920, height = 1080 }) {
+export default function DialogImage({ isOpen, onOpenChange, src = '', downloadImage }) {
   return (
-    <Dialog.Portal>
-      <Dialog.Overlay
-        className="radix-state-open:animate-show fixed inset-0 z-[100] flex items-center justify-center overflow-hidden bg-black/90 dark:bg-black/80"
-        style={{ pointerEvents: 'auto' }}
+    <OGDialog open={isOpen} onOpenChange={onOpenChange}>
+      <OGDialogContent
+        showCloseButton={false}
+        className="h-full w-full rounded-none bg-transparent"
+        disableScroll={false}
+        overlayClassName="bg-surface-secondary"
       >
-        <Dialog.Close asChild>
-          <button
-            className="absolute right-4 top-4 text-gray-50 transition hover:text-gray-200"
-            type="button"
+        <div className="absolute left-0 right-0 top-0 flex items-center justify-between p-4">
+          <Button
+            onClick={() => onOpenChange(false)}
+            variant="ghost"
+            className="h-10 w-10 p-0 hover:bg-surface-hover"
           >
-            <svg
-              stroke="currentColor"
-              fill="none"
-              strokeWidth="2"
-              viewBox="0 0 24 24"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="h-5 w-5"
-              height="1em"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <line x1="18" y1="6" x2="6" y2="18" />
-              <line x1="6" y1="6" x2="18" y2="18" />
-            </svg>
-          </button>
-        </Dialog.Close>
-        <Dialog.Content
-          className="radix-state-open:animate-contentShow relative max-h-[85vh] max-w-[90vw] shadow-xl focus:outline-none"
-          tabIndex={-1}
-          style={{ pointerEvents: 'auto', aspectRatio: height > width ? 1 / 1.75 : 1.75 / 1 }}
-        >
-          <img src={src} alt="Uploaded image" className="h-full w-full object-contain" />
-        </Dialog.Content>
-      </Dialog.Overlay>
-    </Dialog.Portal>
+            <X className="size-6" />
+          </Button>
+          <Button onClick={() => downloadImage()} variant="ghost" className="h-10 w-10 p-0">
+            <ArrowDownToLine className="size-6" />
+          </Button>
+        </div>
+        <OGDialog open={isOpen} onOpenChange={onOpenChange}>
+          <OGDialogContent
+            showCloseButton={false}
+            className="w-11/12 overflow-x-auto rounded-none bg-transparent p-4 shadow-none sm:w-auto"
+            disableScroll={false}
+            overlayClassName="bg-transparent"
+          >
+            <img
+              src={src}
+              alt="Uploaded image"
+              className="max-w-screen h-full max-h-screen w-full object-contain"
+            />
+          </OGDialogContent>
+        </OGDialog>
+      </OGDialogContent>
+    </OGDialog>
   );
 }
diff --git a/client/src/components/Chat/Messages/Content/FinishedIcon.tsx b/client/src/components/Chat/Messages/Content/FinishedIcon.tsx
index 2d47833156..48660f8757 100644
--- a/client/src/components/Chat/Messages/Content/FinishedIcon.tsx
+++ b/client/src/components/Chat/Messages/Content/FinishedIcon.tsx
@@ -1,11 +1,10 @@
 export default function FinishedIcon() {
   return (
     <div
-      className="absolute left-0 top-0 flex h-full w-full items-center justify-center rounded-full bg-brand-purple text-white"
-      style={{ opacity: 1, transform: 'none' }}
+      className="flex size-4 items-center justify-center rounded-full bg-brand-purple text-white"
       data-projection-id="162"
     >
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 9" fill="none" width="8" height="9">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" fill="none" width="8" height="8">
         <path
           fillRule="evenodd"
           clipRule="evenodd"
diff --git a/client/src/components/Chat/Messages/Content/Image.tsx b/client/src/components/Chat/Messages/Content/Image.tsx
index 41ee52453f..4350926182 100644
--- a/client/src/components/Chat/Messages/Content/Image.tsx
+++ b/client/src/components/Chat/Messages/Content/Image.tsx
@@ -1,27 +1,8 @@
 import React, { useState, useRef, useMemo } from 'react';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
-import * as Dialog from '@radix-ui/react-dialog';
+import { cn, scaleImage } from '~/utils';
 import DialogImage from './DialogImage';
-import { cn } from '~/utils';
-
-const scaleImage = ({
-  originalWidth,
-  originalHeight,
-  containerRef,
-}: {
-  originalWidth?: number;
-  originalHeight?: number;
-  containerRef: React.RefObject<HTMLDivElement>;
-}) => {
-  const containerWidth = containerRef.current?.offsetWidth ?? 0;
-  if (containerWidth === 0 || originalWidth == null || originalHeight == null) {
-    return { width: 'auto', height: 'auto' };
-  }
-  const aspectRatio = originalWidth / originalHeight;
-  const scaledWidth = Math.min(containerWidth, originalWidth);
-  const scaledHeight = scaledWidth / aspectRatio;
-  return { width: `${scaledWidth}px`, height: `${scaledHeight}px` };
-};
+import { Skeleton } from '~/components';
 
 const Image = ({
   imagePath,
@@ -41,6 +22,7 @@ const Image = ({
   };
   className?: string;
 }) => {
+  const [isOpen, setIsOpen] = useState(false);
   const [isLoaded, setIsLoaded] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -56,39 +38,63 @@ const Image = ({
     [placeholderDimensions, height, width],
   );
 
+  const downloadImage = () => {
+    const link = document.createElement('a');
+    link.href = imagePath;
+    link.download = altText;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
   return (
-    <Dialog.Root>
-      <div ref={containerRef}>
-        <div
-          className={cn(
-            'relative mt-1 flex h-auto w-full max-w-lg items-center justify-center overflow-hidden bg-surface-active-alt text-text-secondary-alt',
-            className,
-          )}
+    <div ref={containerRef}>
+      <div
+        className={cn(
+          'relative mt-1 flex h-auto w-full max-w-lg items-center justify-center overflow-hidden rounded-lg border border-border-light text-text-secondary-alt shadow-md',
+          className,
+        )}
+      >
+        <button
+          type="button"
+          aria-label={`View ${altText} in dialog`}
+          onClick={() => setIsOpen(true)}
+          className="cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
         >
-          <Dialog.Trigger asChild>
-            <button type="button" aria-haspopup="dialog" aria-expanded="false">
-              <LazyLoadImage
-                alt={altText}
-                onLoad={handleImageLoad}
-                visibleByDefault={true}
-                className={cn(
-                  'opacity-100 transition-opacity duration-100',
-                  isLoaded ? 'opacity-100' : 'opacity-0',
-                )}
-                src={imagePath}
-                style={{
-                  width: scaledWidth,
-                  height: 'auto',
-                  color: 'transparent',
-                }}
-                placeholder={<div style={{ width: scaledWidth, height: scaledHeight }} />}
+          <LazyLoadImage
+            alt={altText}
+            onLoad={handleImageLoad}
+            visibleByDefault={true}
+            className={cn(
+              'opacity-100 transition-opacity duration-100',
+              isLoaded ? 'opacity-100' : 'opacity-0',
+            )}
+            src={imagePath}
+            style={{
+              width: `${scaledWidth}`,
+              height: 'auto',
+              color: 'transparent',
+              display: 'block',
+            }}
+            placeholder={
+              <Skeleton
+                className={cn('h-auto w-full', `h-[${scaledHeight}] w-[${scaledWidth}]`)}
+                aria-label="Loading image"
+                aria-busy="true"
               />
-            </button>
-          </Dialog.Trigger>
-        </div>
+            }
+          />
+        </button>
+        {isLoaded && (
+          <DialogImage
+            isOpen={isOpen}
+            onOpenChange={setIsOpen}
+            src={imagePath}
+            downloadImage={downloadImage}
+          />
+        )}
       </div>
-      {isLoaded && <DialogImage src={imagePath} height={height} width={width} />}
-    </Dialog.Root>
+    </div>
   );
 };
 
diff --git a/client/src/components/Chat/Messages/Content/Part.tsx b/client/src/components/Chat/Messages/Content/Part.tsx
index 8e6e5e09fa..e8d08040f7 100644
--- a/client/src/components/Chat/Messages/Content/Part.tsx
+++ b/client/src/components/Chat/Messages/Content/Part.tsx
@@ -7,17 +7,13 @@ import {
 } from 'librechat-data-provider';
 import { memo } from 'react';
 import type { TMessageContentParts, TAttachment } from 'librechat-data-provider';
+import { OpenAIImageGen, EmptyText, Reasoning, ExecuteCode, AgentUpdate, Text } from './Parts';
 import { ErrorMessage } from './MessageContent';
-import AgentUpdate from './Parts/AgentUpdate';
-import ExecuteCode from './Parts/ExecuteCode';
 import RetrievalCall from './RetrievalCall';
-import Reasoning from './Parts/Reasoning';
-import EmptyText from './Parts/EmptyText';
 import CodeAnalyze from './CodeAnalyze';
 import Container from './Container';
 import ToolCall from './ToolCall';
 import ImageGen from './ImageGen';
-import Text from './Parts/Text';
 import Image from './Image';
 
 type PartProps = {
@@ -93,8 +89,21 @@ const Part = memo(
           <ExecuteCode
             args={typeof toolCall.args === 'string' ? toolCall.args : ''}
             output={toolCall.output ?? ''}
+            initialProgress={toolCall.progress ?? 0.1}
+            attachments={attachments}
+          />
+        );
+      } else if (
+        isToolCall &&
+        (toolCall.name === 'image_gen_oai' || toolCall.name === 'image_edit_oai')
+      ) {
+        return (
+          <OpenAIImageGen
             initialProgress={toolCall.progress ?? 0.1}
             isSubmitting={isSubmitting}
+            toolName={toolCall.name}
+            args={typeof toolCall.args === 'string' ? toolCall.args : ''}
+            output={toolCall.output ?? ''}
             attachments={attachments}
           />
         );
@@ -118,7 +127,6 @@ const Part = memo(
             initialProgress={toolCall.progress ?? 0.1}
             code={code_interpreter.input}
             outputs={code_interpreter.outputs ?? []}
-            isSubmitting={isSubmitting}
           />
         );
       } else if (
diff --git a/client/src/components/Chat/Messages/Content/Parts/Attachment.tsx b/client/src/components/Chat/Messages/Content/Parts/Attachment.tsx
index e1aeb86a5e..d6b9b00b2c 100644
--- a/client/src/components/Chat/Messages/Content/Parts/Attachment.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/Attachment.tsx
@@ -1,9 +1,10 @@
-import { memo } from 'react';
+import { memo, useState, useEffect } from 'react';
 import { imageExtRegex } from 'librechat-data-provider';
 import type { TAttachment, TFile, TAttachmentMetadata } from 'librechat-data-provider';
 import FileContainer from '~/components/Chat/Input/Files/FileContainer';
 import Image from '~/components/Chat/Messages/Content/Image';
 import { useAttachmentLink } from './LogLink';
+import { cn } from '~/utils';
 
 const FileAttachment = memo(({ attachment }: { attachment: TAttachment }) => {
   const { handleDownload } = useAttachmentLink({
@@ -11,15 +12,68 @@ const FileAttachment = memo(({ attachment }: { attachment: TAttachment }) => {
     filename: attachment.filename,
   });
   const extension = attachment.filename.split('.').pop();
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setIsVisible(true), 50);
+    return () => clearTimeout(timer);
+  }, []);
 
   return (
-    <FileContainer
-      file={attachment}
-      onClick={handleDownload}
-      overrideType={extension}
-      containerClassName="max-w-fit"
-      buttonClassName="hover:cursor-pointer hover:bg-surface-secondary active:bg-surface-secondary focus:bg-surface-secondary hover:border-border-heavy active:border-border-heavy"
-    />
+    <div
+      className={cn(
+        'file-attachment-container',
+        'transition-all duration-300 ease-out',
+        isVisible ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-0',
+      )}
+      style={{
+        transformOrigin: 'center top',
+        willChange: 'opacity, transform',
+        WebkitFontSmoothing: 'subpixel-antialiased',
+      }}
+    >
+      <FileContainer
+        file={attachment}
+        onClick={handleDownload}
+        overrideType={extension}
+        containerClassName="max-w-fit"
+        buttonClassName="bg-surface-secondary hover:cursor-pointer hover:bg-surface-hover active:bg-surface-secondary focus:bg-surface-hover hover:border-border-heavy active:border-border-heavy"
+      />
+    </div>
+  );
+});
+
+const ImageAttachment = memo(({ attachment }: { attachment: TAttachment }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const { width, height, filepath = null } = attachment as TFile & TAttachmentMetadata;
+
+  useEffect(() => {
+    setIsLoaded(false);
+    const timer = setTimeout(() => setIsLoaded(true), 100);
+    return () => clearTimeout(timer);
+  }, [attachment]);
+
+  return (
+    <div
+      className={cn(
+        'image-attachment-container',
+        'transition-all duration-500 ease-out',
+        isLoaded ? 'scale-100 opacity-100' : 'scale-[0.98] opacity-0',
+      )}
+      style={{
+        transformOrigin: 'center top',
+        willChange: 'opacity, transform',
+        WebkitFontSmoothing: 'subpixel-antialiased',
+      }}
+    >
+      <Image
+        altText={attachment.filename}
+        imagePath={filepath ?? ''}
+        height={height ?? 0}
+        width={width ?? 0}
+        className="mb-4"
+      />
+    </div>
   );
 });
 
@@ -27,20 +81,56 @@ export default function Attachment({ attachment }: { attachment?: TAttachment })
   if (!attachment) {
     return null;
   }
+
   const { width, height, filepath = null } = attachment as TFile & TAttachmentMetadata;
   const isImage =
     imageExtRegex.test(attachment.filename) && width != null && height != null && filepath != null;
 
   if (isImage) {
-    return (
-      <Image
-        altText={attachment.filename}
-        imagePath={filepath}
-        height={height}
-        width={width}
-        className="mb-4"
-      />
-    );
+    return <ImageAttachment attachment={attachment} />;
   }
   return <FileAttachment attachment={attachment} />;
 }
+
+export function AttachmentGroup({ attachments }: { attachments?: TAttachment[] }) {
+  if (!attachments || attachments.length === 0) {
+    return null;
+  }
+
+  const fileAttachments: TAttachment[] = [];
+  const imageAttachments: TAttachment[] = [];
+
+  attachments.forEach((attachment) => {
+    const { width, height, filepath = null } = attachment as TFile & TAttachmentMetadata;
+    const isImage =
+      imageExtRegex.test(attachment.filename) &&
+      width != null &&
+      height != null &&
+      filepath != null;
+
+    if (isImage) {
+      imageAttachments.push(attachment);
+    } else {
+      fileAttachments.push(attachment);
+    }
+  });
+
+  return (
+    <>
+      {fileAttachments.length > 0 && (
+        <div className="my-2 flex flex-wrap items-center gap-2.5">
+          {fileAttachments.map((attachment, index) => (
+            <FileAttachment attachment={attachment} key={`file-${index}`} />
+          ))}
+        </div>
+      )}
+      {imageAttachments.length > 0 && (
+        <div className="mb-2 flex flex-wrap items-center">
+          {imageAttachments.map((attachment, index) => (
+            <ImageAttachment attachment={attachment} key={`image-${index}`} />
+          ))}
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/client/src/components/Chat/Messages/Content/Parts/CodeProgress.tsx b/client/src/components/Chat/Messages/Content/Parts/CodeProgress.tsx
deleted file mode 100644
index 6e70688cd6..0000000000
--- a/client/src/components/Chat/Messages/Content/Parts/CodeProgress.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import ProgressCircle from '~/components/Chat/Messages/Content/ProgressCircle';
-import CancelledIcon from '~/components/Chat/Messages/Content/CancelledIcon';
-
-export const CodeInProgress = ({
-  offset,
-  circumference,
-  radius,
-  isSubmitting,
-  progress,
-}: {
-  progress: number;
-  offset: number;
-  circumference: number;
-  radius: number;
-  isSubmitting: boolean;
-}) => {
-  if (progress < 1 && !isSubmitting) {
-    return <CancelledIcon />;
-  }
-  return (
-    <div
-      className="absolute left-0 top-0 flex h-full w-full items-center justify-center rounded-full bg-transparent text-white"
-      style={{ opacity: 1, transform: 'none' }}
-      data-projection-id="77"
-    >
-      <div className="absolute bottom-[1.5px] right-[1.5px]">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          xmlnsXlink="http://www.w3.org/1999/xlink"
-          viewBox="0 0 20 20"
-          width="20"
-          height="20"
-          style={{ transform: 'translate3d(0px, 0px, 0px)' }}
-          preserveAspectRatio="xMidYMid meet"
-        >
-          <defs>
-            <clipPath id="__lottie_element_11">
-              <rect width="20" height="20" x="0" y="0" />
-            </clipPath>
-          </defs>
-          <g clipPath="url(#__lottie_element_11)">
-            <g
-              style={{ display: 'block', transform: 'matrix(1,0,0,1,-2,-2)', opacity: 1 }}
-              className="slide-from-left"
-            >
-              <g opacity="1" transform="matrix(1,0,0,1,7.026679992675781,8.834091186523438)">
-                <path
-                  fill="rgb(177,98,253)"
-                  fillOpacity="1"
-                  d=" M1.2870399951934814,0.2207774966955185 C0.992609977722168,-0.07359249889850616 0.5152599811553955,-0.07359249889850616 0.22082999348640442,0.2207774966955185 C-0.07361000031232834,0.5151575207710266 -0.07361000031232834,0.992437481880188 0.22082999348640442,1.2868175506591797 C0.8473266959190369,1.9131841659545898 1.4738233089447021,2.53955078125 2.1003201007843018,3.16591739654541 C1.4738233089447021,3.7922842502593994 0.8473266959190369,4.4186506271362305 0.22082999348640442,5.045017719268799 C-0.07361000031232834,5.339417457580566 -0.07361000031232834,5.816617488861084 0.22082999348640442,6.11101770401001 C0.5152599811553955,6.405417442321777 0.992609977722168,6.405417442321777 1.2870399951934814,6.11101770401001 C2.091266632080078,5.306983947753906 2.895493268966675,4.502950668334961 3.6997199058532715,3.6989173889160156 C3.994119882583618,3.404517412185669 3.994119882583618,2.927217483520508 3.6997199058532715,2.6329174041748047 C2.895493268966675,1.8288708925247192 2.091266632080078,1.0248241424560547 1.2870399951934814,0.2207774966955185 C1.2870399951934814,0.2207774966955185 1.2870399951934814,0.2207774966955185 1.2870399951934814,0.2207774966955185 C1.2870399951934814,0.2207774966955185 1.2870399951934814,0.2207774966955185 1.2870399951934814,0.2207774966955185"
-                />
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  fillOpacity="0"
-                  stroke="rgb(177,98,253)"
-                  strokeOpacity="1"
-                  strokeWidth="0.201031"
-                  d=" M1.2870399951934814,0.2207774966955185 C0.992609977722168,-0.07359249889850616 0.5152599811553955,-0.07359249889850616 0.22082999348640442,0.2207774966955185 C-0.07361000031232834,0.5151575207710266 -0.07361000031232834,0.992437481880188 0.22082999348640442,1.2868175506591797 C0.8473266959190369,1.9131841659545898 1.4738233089447021,2.53955078125 2.1003201007843018,3.16591739654541 C1.4738233089447021,3.7922842502593994 0.8473266959190369,4.4186506271362305 0.22082999348640442,5.045017719268799 C-0.07361000031232834,5.339417457580566 -0.07361000031232834,5.816617488861084 0.22082999348640442,6.11101770401001 C0.5152599811553955,6.405417442321777 0.992609977722168,6.405417442321777 1.2870399951934814,6.11101770401001 C2.091266632080078,5.306983947753906 2.895493268966675,4.502950668334961 3.6997199058532715,3.6989173889160156 C3.994119882583618,3.404517412185669 3.994119882583618,2.927217483520508 3.6997199058532715,2.6329174041748047 C2.895493268966675,1.8288708925247192 2.091266632080078,1.0248241424560547 1.2870399951934814,0.2207774966955185 C1.2870399951934814,0.2207774966955185 1.2870399951934814,0.2207774966955185 1.2870399951934814,0.2207774966955185 C1.2870399951934814,0.2207774966955185 1.2870399951934814,0.2207774966955185 1.2870399951934814,0.2207774966955185"
-                />
-              </g>
-            </g>
-            <g
-              style={{ display: 'block', transform: 'matrix(1,0,0,1,-2,-2)', opacity: 1 }}
-              className="slide-to-down"
-            >
-              <g opacity="1" transform="matrix(1,0,0,1,11.79640007019043,13.512199401855469)">
-                <path
-                  fill="rgb(177,98,253)"
-                  fillOpacity="1"
-                  d=" M4.3225998878479,0 C3.1498000621795654,0 1.9769999980926514,0 0.8041999936103821,0 C0.36010000109672546,0 0,0.36000001430511475 0,0.804099977016449 C0,1.2482000589370728 0.36010000109672546,1.6081000566482544 0.8041999936103821,1.6081000566482544 C1.9769999980926514,1.6081000566482544 3.1498000621795654,1.6081000566482544 4.3225998878479,1.6081000566482544 C4.7667999267578125,1.6081000566482544 5.126800060272217,1.2482000589370728 5.126800060272217,0.804099977016449 C5.126800060272217,0.36000001430511475 4.7667999267578125,0 4.3225998878479,0 C4.3225998878479,0 4.3225998878479,0 4.3225998878479,0 C4.3225998878479,0 4.3225998878479,0 4.3225998878479,0"
-                />
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  fillOpacity="0"
-                  stroke="rgb(177,98,253)"
-                  strokeOpacity="1"
-                  strokeWidth="0.100515"
-                  d=" M4.3225998878479,0 C3.1498000621795654,0 1.9769999980926514,0 0.8041999936103821,0 C0.36010000109672546,0 0,0.36000001430511475 0,0.804099977016449 C0,1.2482000589370728 0.36010000109672546,1.6081000566482544 0.8041999936103821,1.6081000566482544 C1.9769999980926514,1.6081000566482544 3.1498000621795654,1.6081000566482544 4.3225998878479,1.6081000566482544 C4.7667999267578125,1.6081000566482544 5.126800060272217,1.2482000589370728 5.126800060272217,0.804099977016449 C5.126800060272217,0.36000001430511475 4.7667999267578125,0 4.3225998878479,0 C4.3225998878479,0 4.3225998878479,0 4.3225998878479,0 C4.3225998878479,0 4.3225998878479,0 4.3225998878479,0"
-                />
-              </g>
-            </g>
-          </g>
-        </svg>
-      </div>
-      <ProgressCircle radius={radius} circumference={circumference} offset={offset} />
-    </div>
-  );
-};
diff --git a/client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx b/client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx
index 40ad8c6a66..ffd392f01c 100644
--- a/client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/ExecuteCode.tsx
@@ -1,13 +1,12 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useRef, useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 import type { TAttachment } from 'librechat-data-provider';
 import ProgressText from '~/components/Chat/Messages/Content/ProgressText';
-import FinishedIcon from '~/components/Chat/Messages/Content/FinishedIcon';
 import MarkdownLite from '~/components/Chat/Messages/Content/MarkdownLite';
 import { useProgress, useLocalize } from '~/hooks';
-import { CodeInProgress } from './CodeProgress';
-import Attachment from './Attachment';
+import { AttachmentGroup } from './Attachment';
 import Stdout from './Stdout';
+import { cn } from '~/utils';
 import store from '~/store';
 
 interface ParsedArgs {
@@ -45,46 +44,101 @@ export function useParseArgs(args: string): ParsedArgs {
   }, [args]);
 }
 
-const radius = 56.08695652173913;
-const circumference = 2 * Math.PI * radius;
-
 export default function ExecuteCode({
   initialProgress = 0.1,
   args,
   output = '',
-  isSubmitting,
   attachments,
 }: {
   initialProgress: number;
   args: string;
   output?: string;
-  isSubmitting: boolean;
   attachments?: TAttachment[];
 }) {
   const localize = useLocalize();
   const showAnalysisCode = useRecoilValue(store.showCode);
   const [showCode, setShowCode] = useState(showAnalysisCode);
+  const codeContentRef = useRef<HTMLDivElement>(null);
+  const [contentHeight, setContentHeight] = useState<number | undefined>(0);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const hasOutput = output.length > 0;
+  const outputRef = useRef<string>(output);
+  const prevShowCodeRef = useRef<boolean>(showCode);
 
   const { lang, code } = useParseArgs(args);
   const progress = useProgress(initialProgress);
-  const offset = circumference - progress * circumference;
+
+  useEffect(() => {
+    if (output !== outputRef.current) {
+      outputRef.current = output;
+
+      if (showCode && codeContentRef.current) {
+        setTimeout(() => {
+          if (codeContentRef.current) {
+            const newHeight = codeContentRef.current.scrollHeight;
+            setContentHeight(newHeight);
+          }
+        }, 10);
+      }
+    }
+  }, [output, showCode]);
+
+  useEffect(() => {
+    if (showCode !== prevShowCodeRef.current) {
+      prevShowCodeRef.current = showCode;
+
+      if (showCode && codeContentRef.current) {
+        setIsAnimating(true);
+        requestAnimationFrame(() => {
+          if (codeContentRef.current) {
+            const height = codeContentRef.current.scrollHeight;
+            setContentHeight(height);
+          }
+
+          const timer = setTimeout(() => {
+            setIsAnimating(false);
+          }, 500);
+
+          return () => clearTimeout(timer);
+        });
+      } else if (!showCode) {
+        setIsAnimating(true);
+        setContentHeight(0);
+
+        const timer = setTimeout(() => {
+          setIsAnimating(false);
+        }, 500);
+
+        return () => clearTimeout(timer);
+      }
+    }
+  }, [showCode]);
+
+  useEffect(() => {
+    if (!codeContentRef.current) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      if (showCode && !isAnimating) {
+        for (const entry of entries) {
+          if (entry.target === codeContentRef.current) {
+            setContentHeight(entry.contentRect.height);
+          }
+        }
+      }
+    });
+
+    resizeObserver.observe(codeContentRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [showCode, isAnimating]);
 
   return (
     <>
-      <div className="my-2.5 flex items-center gap-2.5">
-        <div className="relative h-5 w-5 shrink-0">
-          {progress < 1 ? (
-            <CodeInProgress
-              offset={offset}
-              radius={radius}
-              progress={progress}
-              isSubmitting={isSubmitting}
-              circumference={circumference}
-            />
-          ) : (
-            <FinishedIcon />
-          )}
-        </div>
+      <div className="relative my-2.5 flex size-5 shrink-0 items-center gap-2.5">
         <ProgressText
           progress={progress}
           onClick={() => setShowCode((prev) => !prev)}
@@ -94,31 +148,71 @@ export default function ExecuteCode({
           isExpanded={showCode}
         />
       </div>
-      {showCode && (
-        <div className="code-analyze-block mb-3 mt-0.5 overflow-hidden rounded-xl bg-black">
-          <MarkdownLite
-            content={code ? `\`\`\`${lang}\n${code}\n\`\`\`` : ''}
-            codeExecution={false}
-          />
-          {output.length > 0 && (
-            <div className="bg-gray-700 p-4 text-xs">
-              <div
-                className="prose flex flex-col-reverse text-white"
-                style={{
-                  color: 'white',
-                }}
-              >
+      <div
+        className="relative mb-2"
+        style={{
+          height: showCode ? 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: showCode ? 1 : 0,
+          transformOrigin: 'top',
+          willChange: 'height, opacity',
+          perspective: '1000px',
+          backfaceVisibility: 'hidden',
+          WebkitFontSmoothing: 'subpixel-antialiased',
+        }}
+      >
+        <div
+          className={cn(
+            'code-analyze-block mt-0.5 overflow-hidden rounded-xl bg-surface-primary',
+            showCode && 'shadow-lg',
+          )}
+          ref={codeContentRef}
+          style={{
+            transform: showCode ? 'translateY(0) scale(1)' : 'translateY(-8px) scale(0.98)',
+            opacity: showCode ? 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)',
+          }}
+        >
+          {showCode && (
+            <div
+              style={{
+                transform: showCode ? 'translateY(0)' : 'translateY(-4px)',
+                opacity: showCode ? 1 : 0,
+                transition:
+                  'transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1)',
+              }}
+            >
+              <MarkdownLite
+                content={code ? `\`\`\`${lang}\n${code}\n\`\`\`` : ''}
+                codeExecution={false}
+              />
+            </div>
+          )}
+          {hasOutput && (
+            <div
+              className={cn(
+                'bg-surface-tertiary p-4 text-xs',
+                showCode ? 'border-t border-surface-primary-contrast' : '',
+              )}
+              style={{
+                transform: showCode ? 'translateY(0)' : 'translateY(-6px)',
+                opacity: showCode ? 1 : 0,
+                transition:
+                  'transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, opacity 0.45s cubic-bezier(0.19, 1, 0.22, 1) 0.05s',
+                boxShadow: showCode ? '0 -1px 0 rgba(0,0,0,0.05)' : 'none',
+              }}
+            >
+              <div className="prose flex flex-col-reverse">
                 <Stdout output={output} />
               </div>
             </div>
           )}
         </div>
-      )}
-      <div className="mb-2 flex flex-wrap items-center gap-2.5">
-        {attachments?.map((attachment, index) => (
-          <Attachment attachment={attachment} key={index} />
-        ))}
       </div>
+      {attachments && attachments.length > 0 && <AttachmentGroup attachments={attachments} />}
     </>
   );
 }
diff --git a/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx b/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx
new file mode 100644
index 0000000000..3237bc37f2
--- /dev/null
+++ b/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx
@@ -0,0 +1,205 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import type { TAttachment, TFile, TAttachmentMetadata } from 'librechat-data-provider';
+import Image from '~/components/Chat/Messages/Content/Image';
+import ProgressText from './ProgressText';
+import { PixelCard } from '~/components';
+import { scaleImage } from '~/utils';
+
+export default function OpenAIImageGen({
+  initialProgress = 0.1,
+  isSubmitting,
+  toolName,
+  args: _args = '',
+  output,
+  attachments,
+}: {
+  initialProgress: number;
+  isSubmitting: boolean;
+  toolName: string;
+  args: string | Record<string, unknown>;
+  output?: string | null;
+  attachments?: TAttachment[];
+}) {
+  const [progress, setProgress] = useState(initialProgress);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const error =
+    typeof output === 'string' && output.toLowerCase().includes('error processing tool');
+
+  const cancelled = (!isSubmitting && initialProgress < 1) || error === true;
+
+  let width: number | undefined;
+  let height: number | undefined;
+  let quality: 'low' | 'medium' | 'high' = 'high';
+
+  try {
+    const argsObj = typeof _args === 'string' ? JSON.parse(_args) : _args;
+
+    if (argsObj && typeof argsObj.size === 'string') {
+      const [w, h] = argsObj.size.split('x').map((v: string) => parseInt(v, 10));
+      if (!isNaN(w) && !isNaN(h)) {
+        width = w;
+        height = h;
+      }
+    } else if (argsObj && (typeof argsObj.size !== 'string' || !argsObj.size)) {
+      width = undefined;
+      height = undefined;
+    }
+
+    if (argsObj && typeof argsObj.quality === 'string') {
+      const q = argsObj.quality.toLowerCase();
+      if (q === 'low' || q === 'medium' || q === 'high') {
+        quality = q;
+      }
+    }
+  } catch (e) {
+    width = undefined;
+    height = undefined;
+  }
+
+  // Default to 1024x1024 if width and height are still undefined after parsing args and attachment metadata
+  const attachment = attachments?.[0];
+  const {
+    width: imageWidth,
+    height: imageHeight,
+    filepath = null,
+    filename = '',
+  } = (attachment as TFile & TAttachmentMetadata) || {};
+
+  let origWidth = width ?? imageWidth;
+  let origHeight = height ?? imageHeight;
+
+  if (origWidth === undefined || origHeight === undefined) {
+    origWidth = 1024;
+    origHeight = 1024;
+  }
+
+  const [dimensions, setDimensions] = useState({ width: 'auto', height: 'auto' });
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const updateDimensions = useCallback(() => {
+    if (origWidth && origHeight && containerRef.current) {
+      const scaled = scaleImage({
+        originalWidth: origWidth,
+        originalHeight: origHeight,
+        containerRef,
+      });
+      setDimensions(scaled);
+    }
+  }, [origWidth, origHeight]);
+
+  useEffect(() => {
+    if (isSubmitting) {
+      setProgress(initialProgress);
+
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+
+      let baseDuration = 20000;
+      if (quality === 'low') {
+        baseDuration = 10000;
+      } else if (quality === 'high') {
+        baseDuration = 50000;
+      }
+      // adding some jitter (±30% of base)
+      const jitter = Math.floor(baseDuration * 0.3);
+      const totalDuration = Math.floor(Math.random() * jitter) + baseDuration;
+      const updateInterval = 200;
+      const totalSteps = totalDuration / updateInterval;
+      let currentStep = 0;
+
+      intervalRef.current = setInterval(() => {
+        currentStep++;
+
+        if (currentStep >= totalSteps) {
+          clearInterval(intervalRef.current as NodeJS.Timeout);
+          setProgress(0.9);
+        } else {
+          const progressRatio = currentStep / totalSteps;
+          let mapRatio: number;
+          if (progressRatio < 0.8) {
+            mapRatio = Math.pow(progressRatio, 1.1);
+          } else {
+            const sub = (progressRatio - 0.8) / 0.2;
+            mapRatio = 0.8 + (1 - Math.pow(1 - sub, 2)) * 0.2;
+          }
+          const scaledProgress = 0.1 + mapRatio * 0.8;
+
+          setProgress(scaledProgress);
+        }
+      }, updateInterval);
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialProgress, quality]);
+
+  useEffect(() => {
+    if (initialProgress >= 1 || cancelled) {
+      setProgress(initialProgress);
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    }
+  }, [initialProgress, cancelled]);
+
+  useEffect(() => {
+    updateDimensions();
+
+    const resizeObserver = new ResizeObserver(() => {
+      updateDimensions();
+    });
+
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [updateDimensions]);
+
+  return (
+    <>
+      <div className="relative my-2.5 flex size-5 shrink-0 items-center gap-2.5">
+        <ProgressText progress={progress} error={cancelled} toolName={toolName} />
+      </div>
+
+      {/* {showInfo && hasInfo && (
+              <ToolCallInfo
+                key="tool-call-info"
+                input={args ?? ''}
+                output={output}
+                function_name={function_name}
+                pendingAuth={authDomain.length > 0 && !cancelled && initialProgress < 1}
+              />
+            )} */}
+
+      <div className="relative mb-2 flex w-full justify-start">
+        <div ref={containerRef} className="w-full max-w-lg">
+          {dimensions.width !== 'auto' && progress < 1 && (
+            <PixelCard
+              variant="default"
+              progress={progress}
+              randomness={0.6}
+              width={dimensions.width}
+              height={dimensions.height}
+            />
+          )}
+          <Image
+            altText={filename}
+            imagePath={filepath ?? ''}
+            width={dimensions.width}
+            height={dimensions.height}
+            placeholderDimensions={{ width: dimensions.width, height: dimensions.height }}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/ProgressText.tsx b/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/ProgressText.tsx
new file mode 100644
index 0000000000..6752352da6
--- /dev/null
+++ b/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/ProgressText.tsx
@@ -0,0 +1,62 @@
+import { useLocalize } from '~/hooks';
+import { cn } from '~/utils';
+
+export default function ProgressText({
+  progress,
+  error,
+  toolName = 'image_gen_oai',
+}: {
+  progress: number;
+  error?: boolean;
+  toolName: string;
+}) {
+  const localize = useLocalize();
+
+  const getText = () => {
+    if (error) {
+      return localize('com_ui_error');
+    }
+
+    if (toolName === 'image_edit_oai') {
+      if (progress >= 1) {
+        return localize('com_ui_image_edited');
+      }
+      if (progress >= 0.7) {
+        return localize('com_ui_final_touch');
+      }
+      if (progress >= 0.5) {
+        return localize('com_ui_adding_details');
+      }
+      if (progress >= 0.3) {
+        return localize('com_ui_edit_editing_image');
+      }
+      return localize('com_ui_getting_started');
+    }
+
+    if (progress >= 1) {
+      return localize('com_ui_image_created');
+    }
+    if (progress >= 0.7) {
+      return localize('com_ui_final_touch');
+    }
+    if (progress >= 0.5) {
+      return localize('com_ui_adding_details');
+    }
+    if (progress >= 0.3) {
+      return localize('com_ui_creating_image');
+    }
+    return localize('com_ui_getting_started');
+  };
+
+  const text = getText();
+
+  return (
+    <div
+      className={cn(
+        'progress-text-content pointer-events-none absolute left-0 top-0 inline-flex w-full items-center gap-2 overflow-visible whitespace-nowrap',
+      )}
+    >
+      <span className={`font-medium ${progress < 1 ? 'shimmer' : ''}`}>{text}</span>
+    </div>
+  );
+}
diff --git a/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/index.ts b/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/index.ts
new file mode 100644
index 0000000000..c5f60526f5
--- /dev/null
+++ b/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/index.ts
@@ -0,0 +1 @@
+export { default as OpenAIImageGen } from './OpenAIImageGen';
diff --git a/client/src/components/Chat/Messages/Content/Parts/Stdout.tsx b/client/src/components/Chat/Messages/Content/Parts/Stdout.tsx
index b79c333f72..562d85489a 100644
--- a/client/src/components/Chat/Messages/Content/Parts/Stdout.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/Stdout.tsx
@@ -17,7 +17,7 @@ const Stdout: React.FC<StdoutProps> = ({ output = '' }) => {
   return (
     processedContent && (
       <pre className="shrink-0">
-        <div>{processedContent}</div>
+        <div className="text-text-primary">{processedContent}</div>
       </pre>
     )
   );
diff --git a/client/src/components/Chat/Messages/Content/Parts/index.ts b/client/src/components/Chat/Messages/Content/Parts/index.ts
new file mode 100644
index 0000000000..8788201e65
--- /dev/null
+++ b/client/src/components/Chat/Messages/Content/Parts/index.ts
@@ -0,0 +1,10 @@
+export * from './Attachment';
+export * from './OpenAIImageGen';
+
+export { default as Text } from './Text';
+export { default as Reasoning } from './Reasoning';
+export { default as EmptyText } from './EmptyText';
+export { default as LogContent } from './LogContent';
+export { default as ExecuteCode } from './ExecuteCode';
+export { default as AgentUpdate } from './AgentUpdate';
+export { default as EditTextPart } from './EditTextPart';
diff --git a/client/src/components/Chat/Messages/Content/ProgressText.tsx b/client/src/components/Chat/Messages/Content/ProgressText.tsx
index 11ec4b291d..a74061e7bb 100644
--- a/client/src/components/Chat/Messages/Content/ProgressText.tsx
+++ b/client/src/components/Chat/Messages/Content/ProgressText.tsx
@@ -1,4 +1,8 @@
 import * as Popover from '@radix-ui/react-popover';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import CancelledIcon from './CancelledIcon';
+import FinishedIcon from './FinishedIcon';
+import { Spinner } from '~/components';
 import { cn } from '~/utils';
 
 const wrapperClass =
@@ -10,7 +14,7 @@ const Wrapper = ({ popover, children }: { popover: boolean; children: React.Reac
       <div className={wrapperClass}>
         <Popover.Trigger asChild>
           <div
-            className="progress-text-content absolute left-0 top-0 line-clamp-1 overflow-visible"
+            className="progress-text-content absolute left-0 top-0 overflow-visible whitespace-nowrap"
             style={{ opacity: 1, transform: 'none' }}
             data-projection-id="78"
           >
@@ -24,7 +28,7 @@ const Wrapper = ({ popover, children }: { popover: boolean; children: React.Reac
   return (
     <div className={wrapperClass}>
       <div
-        className="progress-text-content absolute left-0 top-0 line-clamp-1 overflow-visible"
+        className="progress-text-content absolute left-0 top-0 overflow-visible whitespace-nowrap"
         style={{ opacity: 1, transform: 'none' }}
         data-projection-id="78"
       >
@@ -43,6 +47,7 @@ export default function ProgressText({
   hasInput = true,
   popover = false,
   isExpanded = false,
+  error = false,
 }: {
   progress: number;
   onClick?: () => void;
@@ -52,33 +57,28 @@ export default function ProgressText({
   hasInput?: boolean;
   popover?: boolean;
   isExpanded?: boolean;
+  error?: boolean;
 }) {
   const text = progress < 1 ? (authText ?? inProgressText) : finishedText;
   return (
     <Wrapper popover={popover}>
       <button
         type="button"
-        className={cn('inline-flex items-center gap-1', hasInput ? '' : 'pointer-events-none')}
+        className={cn(
+          'inline-flex w-full items-center gap-2',
+          hasInput ? '' : 'pointer-events-none',
+        )}
         disabled={!hasInput}
-        onClick={onClick}
+        onClick={hasInput ? onClick : undefined}
       >
-        {text}
-        <svg
-          width="16"
-          height="17"
-          viewBox="0 0 16 17"
-          fill="none"
-          className={isExpanded ? 'rotate-180' : 'rotate-0'}
-        >
-          <path
-            className={hasInput ? '' : 'stroke-transparent'}
-            d="M11.3346 7.83203L8.00131 11.1654L4.66797 7.83203"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
+        {progress < 1 ? <Spinner /> : error ? <CancelledIcon /> : <FinishedIcon />}
+        <span className={`${progress < 1 ? 'shimmer' : ''}`}>{text}</span>
+        {hasInput &&
+          (isExpanded ? (
+            <ChevronUp className="size-4 translate-y-[1px]" />
+          ) : (
+            <ChevronDown className="size-4 translate-y-[1px]" />
+          ))}
       </button>
     </Wrapper>
   );
diff --git a/client/src/components/Chat/Messages/Content/ToolCall.tsx b/client/src/components/Chat/Messages/Content/ToolCall.tsx
index 509d420374..3d68c3fc16 100644
--- a/client/src/components/Chat/Messages/Content/ToolCall.tsx
+++ b/client/src/components/Chat/Messages/Content/ToolCall.tsx
@@ -1,22 +1,13 @@
-import { useMemo } from 'react';
-import * as Popover from '@radix-ui/react-popover';
-import { ShieldCheck, TriangleAlert } from 'lucide-react';
+import { useMemo, useState, useEffect, useRef, useLayoutEffect } from 'react';
+import { TriangleAlert } from 'lucide-react';
 import { actionDelimiter, actionDomainSeparator, Constants } from 'librechat-data-provider';
 import type { TAttachment } from 'librechat-data-provider';
-import useLocalize from '~/hooks/useLocalize';
-import ProgressCircle from './ProgressCircle';
-import InProgressCall from './InProgressCall';
-import Attachment from './Parts/Attachment';
-import CancelledIcon from './CancelledIcon';
+import { useLocalize, useProgress } from '~/hooks';
+import { AttachmentGroup } from './Parts';
+import ToolCallInfo from './ToolCallInfo';
 import ProgressText from './ProgressText';
-import FinishedIcon from './FinishedIcon';
-import ToolPopover from './ToolPopover';
-import WrenchIcon from './WrenchIcon';
-import { useProgress } from '~/hooks';
-import { logger } from '~/utils';
-
-const radius = 56.08695652173913;
-const circumference = 2 * Math.PI * radius;
+import { Button } from '~/components';
+import { logger, cn } from '~/utils';
 
 export default function ToolCall({
   initialProgress = 0.1,
@@ -37,11 +28,16 @@ export default function ToolCall({
   expires_at?: number;
 }) {
   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 { function_name, domain, isMCPToolCall } = useMemo(() => {
     if (typeof name !== 'string') {
       return { function_name: '', domain: null, isMCPToolCall: false };
     }
-
     if (name.includes(Constants.mcp_delimiter)) {
       const [func, server] = name.split(Constants.mcp_delimiter);
       return {
@@ -50,7 +46,6 @@ export default function ToolCall({
         isMCPToolCall: true,
       };
     }
-
     const [func, _domain] = name.includes(actionDelimiter)
       ? name.split(actionDelimiter)
       : [name, ''];
@@ -68,7 +63,6 @@ export default function ToolCall({
     if (typeof _args === 'string') {
       return _args;
     }
-
     try {
       return JSON.stringify(_args, null, 2);
     } catch (e) {
@@ -98,42 +92,8 @@ export default function ToolCall({
     }
   }, [auth]);
 
-  const progress = useProgress(error === true ? 1 : initialProgress);
+  const progress = useProgress(initialProgress);
   const cancelled = (!isSubmitting && progress < 1) || error === true;
-  const offset = circumference - progress * circumference;
-
-  const renderIcon = () => {
-    if (progress < 1 && authDomain.length > 0) {
-      return (
-        <div
-          className="absolute left-0 top-0 flex h-full w-full items-center justify-center rounded-full bg-transparent text-text-secondary"
-          style={{ opacity: 1, transform: 'none' }}
-          data-projection-id="849"
-        >
-          <div>
-            <ShieldCheck />
-          </div>
-        </div>
-      );
-    } else if (progress < 1) {
-      return (
-        <InProgressCall progress={progress} isSubmitting={isSubmitting} error={error}>
-          <div
-            className="absolute left-0 top-0 flex h-full w-full items-center justify-center rounded-full bg-transparent text-white"
-            style={{ opacity: 1, transform: 'none' }}
-            data-projection-id="849"
-          >
-            <div>
-              <WrenchIcon />
-            </div>
-            <ProgressCircle radius={radius} circumference={circumference} offset={offset} />
-          </div>
-        </InProgressCall>
-      );
-    }
-
-    return cancelled ? <CancelledIcon /> : <FinishedIcon />;
-  };
 
   const getFinishedText = () => {
     if (cancelled) {
@@ -148,51 +108,125 @@ export default function ToolCall({
     return localize('com_assistants_completed_function', { 0: function_name });
   };
 
+  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]);
+
   return (
-    <Popover.Root>
-      <div className="my-2.5 flex flex-wrap items-center gap-2.5">
-        <div className="flex w-full items-center gap-2.5">
-          <div className="relative h-5 w-5 shrink-0">{renderIcon()}</div>
-          <ProgressText
-            progress={cancelled ? 1 : progress}
-            inProgressText={localize('com_assistants_running_action')}
-            authText={
-              !cancelled && authDomain.length > 0 ? localize('com_ui_requires_auth') : undefined
-            }
-            finishedText={getFinishedText()}
-            hasInput={hasInfo}
-            popover={true}
-          />
-          {hasInfo && (
-            <ToolPopover
-              input={args ?? ''}
-              output={output}
-              domain={authDomain || (domain ?? '')}
-              function_name={function_name}
-              pendingAuth={authDomain.length > 0 && !cancelled && progress < 1}
-            />
-          )}
-        </div>
-        {auth != null && auth && progress < 1 && !cancelled && (
-          <div className="flex w-full flex-col gap-2.5">
-            <div className="mb-1 mt-2">
-              <a
-                className="inline-flex items-center justify-center gap-2 rounded-3xl bg-surface-tertiary px-4 py-2 text-sm font-medium hover:bg-surface-hover"
-                href={auth}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {localize('com_ui_sign_in_to_domain', { 0: authDomain })}
-              </a>
-            </div>
-            <p className="flex items-center text-xs text-text-secondary">
-              <TriangleAlert className="mr-1.5 inline-block h-4 w-4" />
-              {localize('com_assistants_allow_sites_you_trust')}
-            </p>
-          </div>
-        )}
+    <>
+      <div className="relative my-2.5 flex size-5 shrink-0 items-center gap-2.5">
+        <ProgressText
+          progress={progress}
+          onClick={() => setShowInfo((prev) => !prev)}
+          inProgressText={localize('com_assistants_running_action')}
+          authText={
+            !cancelled && authDomain.length > 0 ? localize('com_ui_requires_auth') : undefined
+          }
+          finishedText={getFinishedText()}
+          hasInput={hasInfo}
+          isExpanded={showInfo}
+          error={cancelled}
+        />
       </div>
-      {attachments?.map((attachment, index) => <Attachment attachment={attachment} key={index} />)}
-    </Popover.Root>
+      <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-secondary 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 && hasInfo && (
+              <ToolCallInfo
+                key="tool-call-info"
+                input={args ?? ''}
+                output={output}
+                domain={authDomain || (domain ?? '')}
+                function_name={function_name}
+                pendingAuth={authDomain.length > 0 && !cancelled && progress < 1}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+      {auth != null && auth && progress < 1 && !cancelled && (
+        <div className="flex w-full flex-col gap-2.5">
+          <div className="mb-1 mt-2">
+            <Button
+              className="font-mediu inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm"
+              variant="default"
+              rel="noopener noreferrer"
+              onClick={() => window.open(auth, '_blank', 'noopener,noreferrer')}
+            >
+              {localize('com_ui_sign_in_to_domain', { 0: authDomain })}
+            </Button>
+          </div>
+          <p className="flex items-center text-xs text-text-warning">
+            <TriangleAlert className="mr-1.5 inline-block h-4 w-4" />
+            {localize('com_assistants_allow_sites_you_trust')}
+          </p>
+        </div>
+      )}
+      {attachments && attachments.length > 0 && <AttachmentGroup attachments={attachments} />}
+    </>
   );
 }
diff --git a/client/src/components/Chat/Messages/Content/ToolCallInfo.tsx b/client/src/components/Chat/Messages/Content/ToolCallInfo.tsx
new file mode 100644
index 0000000000..fd0fe8e1db
--- /dev/null
+++ b/client/src/components/Chat/Messages/Content/ToolCallInfo.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { useLocalize } from '~/hooks';
+
+function OptimizedCodeBlock({ text, maxHeight = 320 }: { text: string; maxHeight?: number }) {
+  return (
+    <div
+      className="rounded-lg bg-surface-tertiary p-2 text-xs text-text-primary"
+      style={{
+        position: 'relative',
+        maxHeight,
+        overflow: 'auto',
+      }}
+    >
+      <pre className="m-0 whitespace-pre-wrap break-words" style={{ overflowWrap: 'break-word' }}>
+        <code>{text}</code>
+      </pre>
+    </div>
+  );
+}
+
+export default function ToolCallInfo({
+  input,
+  output,
+  domain,
+  function_name,
+  pendingAuth,
+}: {
+  input: string;
+  function_name: string;
+  output?: string | null;
+  domain?: string;
+  pendingAuth?: boolean;
+}) {
+  const localize = useLocalize();
+  const formatText = (text: string) => {
+    try {
+      return JSON.stringify(JSON.parse(text), null, 2);
+    } catch {
+      return text;
+    }
+  };
+
+  let title =
+    domain != null && domain
+      ? localize('com_assistants_domain_info', { 0: domain })
+      : localize('com_assistants_function_use', { 0: function_name });
+  if (pendingAuth === true) {
+    title =
+      domain != null && domain
+        ? localize('com_assistants_action_attempt', { 0: domain })
+        : localize('com_assistants_attempt_info');
+  }
+
+  return (
+    <div className="w-full p-2">
+      <div style={{ opacity: 1 }}>
+        <div className="mb-2 text-sm font-medium text-text-primary">{title}</div>
+        <div>
+          <OptimizedCodeBlock text={formatText(input)} maxHeight={250} />
+        </div>
+        {output && (
+          <>
+            <div className="my-2 text-sm font-medium text-text-primary">
+              {localize('com_ui_result')}
+            </div>
+            <div>
+              <OptimizedCodeBlock text={formatText(output)} maxHeight={250} />
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/components/Chat/Messages/Content/ToolPopover.tsx b/client/src/components/Chat/Messages/Content/ToolPopover.tsx
deleted file mode 100644
index 198f64b3e0..0000000000
--- a/client/src/components/Chat/Messages/Content/ToolPopover.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as Popover from '@radix-ui/react-popover';
-import useLocalize from '~/hooks/useLocalize';
-
-export default function ToolPopover({
-  input,
-  output,
-  domain,
-  function_name,
-  pendingAuth,
-}: {
-  input: string;
-  function_name: string;
-  output?: string | null;
-  domain?: string;
-  pendingAuth?: boolean;
-}) {
-  const localize = useLocalize();
-  const formatText = (text: string) => {
-    try {
-      return JSON.stringify(JSON.parse(text), null, 2);
-    } catch {
-      return text;
-    }
-  };
-
-  let title =
-    domain != null && domain
-      ? localize('com_assistants_domain_info', { 0: domain })
-      : localize('com_assistants_function_use', { 0: function_name });
-  if (pendingAuth === true) {
-    title =
-      domain != null && domain
-        ? localize('com_assistants_action_attempt', { 0: domain })
-        : localize('com_assistants_attempt_info');
-  }
-
-  return (
-    <Popover.Portal>
-      <Popover.Content
-        side="bottom"
-        align="start"
-        sideOffset={12}
-        alignOffset={-5}
-        className="w-18 min-w-[180px]  max-w-sm rounded-lg bg-surface-primary px-1"
-      >
-        <div tabIndex={-1}>
-          <div className="bg-token-surface-primary max-w-sm rounded-md p-2 shadow-[0_0_24px_0_rgba(0,0,0,0.05),inset_0_0.5px_0_0_rgba(0,0,0,0.05),0_2px_8px_0_rgba(0,0,0,0.05)]">
-            <div className="mb-2 text-sm font-medium text-text-primary">{title}</div>
-            <div className="bg-token-surface-secondary text-token-text-primary dark rounded-md text-xs">
-              <div className="max-h-32 overflow-y-auto rounded-md bg-surface-tertiary p-2">
-                <code className="!whitespace-pre-wrap ">{formatText(input)}</code>
-              </div>
-            </div>
-            {output != null && output && (
-              <>
-                <div className="mb-2 mt-2 text-sm font-medium text-text-primary">
-                  {localize('com_ui_result')}
-                </div>
-                <div className="bg-token-surface-secondary text-token-text-primary dark rounded-md text-xs">
-                  <div className="max-h-32 overflow-y-auto rounded-md bg-surface-tertiary p-2">
-                    <code className="!whitespace-pre-wrap ">{formatText(output)}</code>
-                  </div>
-                </div>
-              </>
-            )}
-          </div>
-        </div>
-      </Popover.Content>
-    </Popover.Portal>
-  );
-}
diff --git a/client/src/components/Conversations/Conversations.tsx b/client/src/components/Conversations/Conversations.tsx
index a0bf03e49d..46f217a83c 100644
--- a/client/src/components/Conversations/Conversations.tsx
+++ b/client/src/components/Conversations/Conversations.tsx
@@ -23,7 +23,7 @@ const LoadingSpinner = memo(() => {
 
   return (
     <div className="mx-auto mt-2 flex items-center justify-center gap-2">
-      <Spinner className="h-4 w-4 text-text-primary" />
+      <Spinner className="text-text-primary" />
       <span className="animate-pulse text-text-primary">{localize('com_ui_loading')}</span>
     </div>
   );
diff --git a/client/src/components/Messages/Content/CodeBlock.tsx b/client/src/components/Messages/Content/CodeBlock.tsx
index df80c90ecb..d48c8042b7 100644
--- a/client/src/components/Messages/Content/CodeBlock.tsx
+++ b/client/src/components/Messages/Content/CodeBlock.tsx
@@ -3,9 +3,9 @@ import { InfoIcon } from 'lucide-react';
 import { Tools } from 'librechat-data-provider';
 import React, { useRef, useState, useMemo, useEffect } from 'react';
 import type { CodeBarProps } from '~/common';
-import LogContent from '~/components/Chat/Messages/Content/Parts/LogContent';
 import ResultSwitcher from '~/components/Messages/Content/ResultSwitcher';
 import { useToolCallsMapContext, useMessageContext } from '~/Providers';
+import { LogContent } from '~/components/Chat/Messages/Content/Parts';
 import RunCode from '~/components/Messages/Content/RunCode';
 import Clipboard from '~/components/svg/Clipboard';
 import CheckMark from '~/components/svg/CheckMark';
diff --git a/client/src/components/Messages/Content/RunCode.tsx b/client/src/components/Messages/Content/RunCode.tsx
index e80c589bd1..10adb7df3f 100644
--- a/client/src/components/Messages/Content/RunCode.tsx
+++ b/client/src/components/Messages/Content/RunCode.tsx
@@ -1,6 +1,6 @@
 import debounce from 'lodash/debounce';
 import { Tools, AuthType } from 'librechat-data-provider';
-import { TerminalSquareIcon, Loader } from 'lucide-react';
+import { TerminalSquareIcon } from 'lucide-react';
 import React, { useMemo, useCallback, useEffect } from 'react';
 import type { CodeBarProps } from '~/common';
 import { useVerifyAgentToolAuth, useToolCallMutation } from '~/data-provider';
@@ -9,6 +9,7 @@ import { useLocalize, useCodeApiKeyForm } from '~/hooks';
 import { useMessageContext } from '~/Providers';
 import { cn, normalizeLanguage } from '~/utils';
 import { useToastContext } from '~/Providers';
+import { Spinner } from '~/components';
 
 const RunCode: React.FC<CodeBarProps> = React.memo(({ lang, codeRef, blockIndex }) => {
   const localize = useLocalize();
@@ -91,7 +92,7 @@ const RunCode: React.FC<CodeBarProps> = React.memo(({ lang, codeRef, blockIndex
         disabled={execute.isLoading}
       >
         {execute.isLoading ? (
-          <Loader className="animate-spin" size={18} />
+          <Spinner className="animate-spin" size={18} />
         ) : (
           <TerminalSquareIcon size={18} />
         )}
diff --git a/client/src/components/SidePanel/Agents/AgentFooter.tsx b/client/src/components/SidePanel/Agents/AgentFooter.tsx
index 75f10a3851..ce99e1189f 100644
--- a/client/src/components/SidePanel/Agents/AgentFooter.tsx
+++ b/client/src/components/SidePanel/Agents/AgentFooter.tsx
@@ -53,7 +53,7 @@ export default function AgentFooter({
   const showButtons = activePanel === Panel.builder;
 
   return (
-    <div className="mx-1 mb-1 flex w-full flex-col gap-2">
+    <div className="mb-1 flex w-full flex-col gap-2">
       {showButtons && <AdvancedButton setActivePanel={setActivePanel} />}
       {user?.role === SystemRoles.ADMIN && showButtons && <AdminSettings />}
       {/* Context Button */}
diff --git a/client/src/components/SidePanel/Agents/AgentPanel.tsx b/client/src/components/SidePanel/Agents/AgentPanel.tsx
index 23ede096a1..1cddf15180 100644
--- a/client/src/components/SidePanel/Agents/AgentPanel.tsx
+++ b/client/src/components/SidePanel/Agents/AgentPanel.tsx
@@ -220,7 +220,7 @@ export default function AgentPanel({
         className="scrollbar-gutter-stable h-auto w-full flex-shrink-0 overflow-x-hidden"
         aria-label="Agent configuration form"
       >
-        <div className="mx-1 mt-2 flex w-full flex-wrap gap-2">
+        <div className="mt-2 flex w-full flex-wrap gap-2">
           <div className="w-full">
             <AgentSelect
               createMutation={create}
diff --git a/client/src/components/SidePanel/Agents/Images.tsx b/client/src/components/SidePanel/Agents/Images.tsx
index 9ae8867688..2ee8b754a4 100644
--- a/client/src/components/SidePanel/Agents/Images.tsx
+++ b/client/src/components/SidePanel/Agents/Images.tsx
@@ -105,7 +105,7 @@ export function AvatarMenu({
       >
         <div
           role="menuitem"
-          className="group m-1.5 flex cursor-pointer gap-2 rounded p-2.5 text-sm hover:bg-gray-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-800 dark:hover:bg-white/5"
+          className="group m-1.5 flex cursor-pointer gap-2 rounded-lg p-2.5 text-sm hover:bg-gray-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-800 dark:hover:bg-white/5"
           tabIndex={-1}
           data-orientation="vertical"
           onClick={onItemClick}
diff --git a/client/src/components/SidePanel/SidePanel.tsx b/client/src/components/SidePanel/SidePanel.tsx
index 48080a612c..71cddfc8d4 100644
--- a/client/src/components/SidePanel/SidePanel.tsx
+++ b/client/src/components/SidePanel/SidePanel.tsx
@@ -9,7 +9,6 @@ import { useGetEndpointsQuery } from '~/data-provider';
 import NavToggle from '~/components/Nav/NavToggle';
 import { cn, getEndpointField } from '~/utils';
 import { useChatContext } from '~/Providers';
-
 import Nav from './Nav';
 
 const defaultMinSize = 20;
diff --git a/client/src/components/svg/Spinner.tsx b/client/src/components/svg/Spinner.tsx
index 99728da34b..6f09a40ede 100644
--- a/client/src/components/svg/Spinner.tsx
+++ b/client/src/components/svg/Spinner.tsx
@@ -1,20 +1,67 @@
 import { cn } from '~/utils/';
 
-export default function Spinner({ className = 'm-auto', size = '1em' }) {
+interface SpinnerProps {
+  className?: string;
+  size?: string | number;
+  color?: string;
+  bgOpacity?: number;
+  speed?: number;
+}
+
+export default function Spinner({
+  className = 'm-auto',
+  size = 20,
+  color = 'currentColor',
+  bgOpacity = 0.1,
+  speed = 0.75,
+}: SpinnerProps) {
+  const cssVars = {
+    '--spinner-speed': `${speed}s`,
+  } as React.CSSProperties;
+
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
+      className={cn(className, 'spinner')}
       width={size}
       height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={cn('animate-spin', className)}
+      viewBox="0 0 40 40"
+      xmlns="http://www.w3.org/2000/svg"
+      style={cssVars}
     >
-      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+      <defs>
+        <style type="text/css">{`
+          .spinner {
+            transform-origin: center;
+            overflow: visible;
+            animation: spinner-rotate var(--spinner-speed) linear infinite;
+          }
+          @keyframes spinner-rotate {
+            to { transform: rotate(360deg); }
+          }
+        `}</style>
+      </defs>
+
+      <circle
+        cx="20"
+        cy="20"
+        r="14.5"
+        pathLength="100"
+        strokeWidth="5"
+        fill="none"
+        stroke={color}
+        strokeOpacity={bgOpacity}
+      />
+      <circle
+        cx="20"
+        cy="20"
+        r="14.5"
+        pathLength="100"
+        strokeWidth="5"
+        fill="none"
+        stroke={color}
+        strokeDasharray="25 75"
+        strokeLinecap="round"
+      />
     </svg>
   );
 }
diff --git a/client/src/components/ui/Button.tsx b/client/src/components/ui/Button.tsx
index 35b2d103b7..1b2284507f 100644
--- a/client/src/components/ui/Button.tsx
+++ b/client/src/components/ui/Button.tsx
@@ -14,7 +14,7 @@ const buttonVariants = cva(
         outline:
           'text-text-primary border border-border-light bg-background hover:bg-accent hover:text-accent-foreground',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        ghost: 'hover:bg-surface-hover hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
         // hardcoded text color because of WCAG contrast issues (text-white)
         submit: 'bg-surface-submit text-white hover:bg-surface-submit-hover',
diff --git a/client/src/components/ui/OriginalDialog.tsx b/client/src/components/ui/OriginalDialog.tsx
index c7b4c1f4c1..83405b1a60 100644
--- a/client/src/components/ui/OriginalDialog.tsx
+++ b/client/src/components/ui/OriginalDialog.tsx
@@ -32,7 +32,7 @@ const DialogPortal = DialogPrimitive.Portal;
 
 const DialogClose = DialogPrimitive.Close;
 
-const DialogOverlay = React.forwardRef<
+export const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
diff --git a/client/src/components/ui/PixelCard.tsx b/client/src/components/ui/PixelCard.tsx
new file mode 100644
index 0000000000..aabed69fb4
--- /dev/null
+++ b/client/src/components/ui/PixelCard.tsx
@@ -0,0 +1,375 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { cn } from '~/utils';
+
+class Pixel {
+  width: number;
+  height: number;
+  ctx: CanvasRenderingContext2D;
+  x: number;
+  y: number;
+  color: string;
+  speed: number;
+  size: number;
+  sizeStep: number;
+  minSize: number;
+  maxSizeInteger: number;
+  maxSize: number;
+  delay: number;
+  counter: number;
+  counterStep: number;
+  isIdle: boolean;
+  isReverse: boolean;
+  isShimmer: boolean;
+  activationThreshold: number;
+
+  constructor(
+    canvas: HTMLCanvasElement,
+    context: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+    color: string,
+    speed: number,
+    delay: number,
+    activationThreshold: number,
+  ) {
+    this.width = canvas.width;
+    this.height = canvas.height;
+    this.ctx = context;
+    this.x = x;
+    this.y = y;
+    this.color = color;
+    this.speed = this.random(0.1, 0.9) * speed;
+    this.size = 0;
+    this.sizeStep = Math.random() * 0.4;
+    this.minSize = 0.5;
+    this.maxSizeInteger = 2;
+    this.maxSize = this.random(this.minSize, this.maxSizeInteger);
+    this.delay = delay;
+    this.counter = 0;
+    this.counterStep = Math.random() * 4 + (this.width + this.height) * 0.01;
+    this.isIdle = false;
+    this.isReverse = false;
+    this.isShimmer = false;
+    this.activationThreshold = activationThreshold;
+  }
+
+  private random(min: number, max: number) {
+    return Math.random() * (max - min) + min;
+  }
+
+  private draw() {
+    const offset = this.maxSizeInteger * 0.5 - this.size * 0.5;
+    this.ctx.fillStyle = this.color;
+    this.ctx.fillRect(this.x + offset, this.y + offset, this.size, this.size);
+  }
+
+  appear() {
+    this.isIdle = false;
+    if (this.counter <= this.delay) {
+      this.counter += this.counterStep;
+      return;
+    }
+    if (this.size >= this.maxSize) {
+      this.isShimmer = true;
+    }
+    if (this.isShimmer) {
+      this.shimmer();
+    } else {
+      this.size += this.sizeStep;
+    }
+    this.draw();
+  }
+
+  appearWithProgress(progress: number) {
+    const diff = progress - this.activationThreshold;
+    if (diff <= 0) {
+      this.isIdle = true;
+      return;
+    }
+    if (this.counter <= this.delay) {
+      this.counter += this.counterStep;
+      this.isIdle = false;
+      return;
+    }
+    if (this.size >= this.maxSize) {
+      this.isShimmer = true;
+    }
+    if (this.isShimmer) {
+      this.shimmer();
+    } else {
+      this.size += this.sizeStep;
+    }
+    this.isIdle = false;
+    this.draw();
+  }
+
+  disappear() {
+    this.isShimmer = false;
+    this.counter = 0;
+    if (this.size <= 0) {
+      this.isIdle = true;
+      return;
+    }
+    this.size -= 0.1;
+    this.draw();
+  }
+
+  private shimmer() {
+    if (this.size >= this.maxSize) {
+      this.isReverse = true;
+    } else if (this.size <= this.minSize) {
+      this.isReverse = false;
+    }
+    this.size += this.isReverse ? -this.speed : this.speed;
+  }
+}
+
+const getEffectiveSpeed = (value: number, reducedMotion: boolean) => {
+  const parsed = parseInt(String(value), 10);
+  const throttle = 0.001;
+  if (parsed <= 0 || reducedMotion) {
+    return 0;
+  }
+  if (parsed >= 100) {
+    return 100 * throttle;
+  }
+  return parsed * throttle;
+};
+
+const clamp = (n: number, min = 0, max = 1) => Math.min(Math.max(n, min), max);
+
+const VARIANTS = {
+  default: { gap: 5, speed: 35, colors: '#f8fafc,#f1f5f9,#cbd5e1', noFocus: false },
+  blue: { gap: 10, speed: 25, colors: '#e0f2fe,#7dd3fc,#0ea5e9', noFocus: false },
+  yellow: { gap: 3, speed: 20, colors: '#fef08a,#fde047,#eab308', noFocus: false },
+  pink: { gap: 6, speed: 80, colors: '#fecdd3,#fda4af,#e11d48', noFocus: true },
+} as const;
+
+interface PixelCardProps {
+  variant?: keyof typeof VARIANTS;
+  gap?: number;
+  speed?: number;
+  colors?: string;
+  noFocus?: boolean;
+  className?: string;
+  progress?: number;
+  randomness?: number;
+  width?: string;
+  height?: string;
+}
+
+export default function PixelCard({
+  variant = 'default',
+  gap,
+  speed,
+  colors,
+  noFocus,
+  className = '',
+  progress,
+  randomness = 0.3,
+  width,
+  height,
+}: PixelCardProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const pixelsRef = useRef<Pixel[]>([]);
+  const animationRef = useRef<number>();
+  const timePrevRef = useRef(performance.now());
+  const progressRef = useRef<number | undefined>(progress);
+  const reducedMotion = useRef(
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+  ).current;
+
+  const cfg = VARIANTS[variant];
+  const g = gap ?? cfg.gap;
+  const s = speed ?? cfg.speed;
+  const palette = colors ?? cfg.colors;
+  const disableFocus = noFocus ?? cfg.noFocus;
+
+  const updateCanvasOpacity = useCallback(() => {
+    if (!canvasRef.current) {
+      return;
+    }
+    if (progressRef.current === undefined) {
+      canvasRef.current.style.opacity = '1';
+      return;
+    }
+    const fadeStart = 0.9;
+    const alpha =
+      progressRef.current >= fadeStart ? 1 - (progressRef.current - fadeStart) / 0.1 : 1;
+    canvasRef.current.style.opacity = String(clamp(alpha));
+  }, []);
+
+  const animate = useCallback(
+    (method: keyof Pixel) => {
+      animationRef.current = requestAnimationFrame(() => animate(method));
+
+      const now = performance.now();
+      const elapsed = now - timePrevRef.current;
+      if (elapsed < 1000 / 60) {
+        return;
+      }
+      timePrevRef.current = now - (elapsed % (1000 / 60));
+
+      const ctx = canvasRef.current?.getContext('2d');
+      if (!ctx || !canvasRef.current) {
+        return;
+      }
+
+      ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+
+      let idle = true;
+      for (const p of pixelsRef.current) {
+        if (method === 'appearWithProgress') {
+          progressRef.current !== undefined
+            ? p.appearWithProgress(progressRef.current)
+            : (p.isIdle = true);
+        } else {
+          // @ts-ignore dynamic dispatch
+          p[method]();
+        }
+        if (!p.isIdle) {
+          idle = false;
+        }
+      }
+
+      updateCanvasOpacity();
+      if (idle) {
+        cancelAnimationFrame(animationRef.current!);
+      }
+    },
+    [updateCanvasOpacity],
+  );
+
+  const startAnim = useCallback(
+    (m: keyof Pixel) => {
+      cancelAnimationFrame(animationRef.current!);
+      animationRef.current = requestAnimationFrame(() => animate(m));
+    },
+    [animate],
+  );
+
+  const initPixels = useCallback(() => {
+    if (!containerRef.current || !canvasRef.current) {
+      return;
+    }
+
+    const { width: cw, height: ch } = containerRef.current.getBoundingClientRect();
+    const ctx = canvasRef.current.getContext('2d');
+    canvasRef.current.width = Math.floor(cw);
+    canvasRef.current.height = Math.floor(ch);
+
+    const cols = palette.split(',');
+    const px: Pixel[] = [];
+
+    const cx = cw / 2;
+    const cy = ch / 2;
+    const maxDist = Math.hypot(cx, cy);
+
+    for (let x = 0; x < cw; x += g) {
+      for (let y = 0; y < ch; y += g) {
+        const color = cols[Math.floor(Math.random() * cols.length)];
+        const distNorm = Math.hypot(x - cx, y - cy) / maxDist;
+        const threshold = clamp(distNorm * (1 - randomness) + Math.random() * randomness);
+        const delay = reducedMotion ? 0 : distNorm * maxDist;
+        if (!ctx) {
+          continue;
+        }
+        px.push(
+          new Pixel(
+            canvasRef.current,
+            ctx,
+            x,
+            y,
+            color,
+            getEffectiveSpeed(s, reducedMotion),
+            delay,
+            threshold,
+          ),
+        );
+      }
+    }
+    pixelsRef.current = px;
+
+    if (progressRef.current !== undefined) {
+      startAnim('appearWithProgress');
+    }
+  }, [g, palette, s, randomness, reducedMotion, startAnim]);
+
+  useEffect(() => {
+    progressRef.current = progress;
+    if (progress !== undefined) {
+      startAnim('appearWithProgress');
+    }
+  }, [progress, startAnim]);
+
+  useEffect(() => {
+    if (progress === undefined) {
+      cancelAnimationFrame(animationRef.current!);
+    }
+  }, [progress]);
+
+  useEffect(() => {
+    initPixels();
+    const obs = new ResizeObserver(initPixels);
+    containerRef.current && obs.observe(containerRef.current);
+    return () => {
+      obs.disconnect();
+      cancelAnimationFrame(animationRef.current!);
+    };
+  }, [initPixels]);
+
+  const hoverIn = () => progressRef.current === undefined && startAnim('appear');
+  const hoverOut = () => progressRef.current === undefined && startAnim('disappear');
+  const focusIn: React.FocusEventHandler<HTMLDivElement> = (e) => {
+    if (
+      !disableFocus &&
+      !e.currentTarget.contains(e.relatedTarget) &&
+      progressRef.current === undefined
+    ) {
+      startAnim('appear');
+    }
+  };
+  const focusOut: React.FocusEventHandler<HTMLDivElement> = (e) => {
+    if (
+      !disableFocus &&
+      !e.currentTarget.contains(e.relatedTarget) &&
+      progressRef.current === undefined
+    ) {
+      startAnim('disappear');
+    }
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        width: width || '100%',
+        height: height || '100%',
+      }}
+    >
+      <div
+        className={cn(
+          'ease-[cubic-bezier(0.5,1,0.89,1)] relative isolate grid select-none place-items-center overflow-hidden rounded-lg border border-border-light shadow-md transition-colors duration-200',
+          className,
+        )}
+        style={{
+          width: '100%',
+          height: '100%',
+        }}
+        onMouseEnter={hoverIn}
+        onMouseLeave={hoverOut}
+        onFocus={disableFocus ? undefined : focusIn}
+        onBlur={disableFocus ? undefined : focusOut}
+        tabIndex={disableFocus ? -1 : 0}
+      >
+        <canvas
+          ref={canvasRef}
+          className="pointer-events-none absolute inset-0 block"
+          width={width && width !== 'auto' ? parseInt(String(width)) : undefined}
+          height={height && height !== 'auto' ? parseInt(String(height)) : undefined}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/components/ui/index.ts b/client/src/components/ui/index.ts
index 8d9eed0c85..2708379b6e 100644
--- a/client/src/components/ui/index.ts
+++ b/client/src/components/ui/index.ts
@@ -31,8 +31,9 @@ export { default as MCPIcon } from './MCPIcon';
 export { default as Combobox } from './Combobox';
 export { default as Dropdown } from './Dropdown';
 export { default as SplitText } from './SplitText';
-export { default as FileUpload } from './FileUpload';
 export { default as FormInput } from './FormInput';
+export { default as PixelCard } from './PixelCard';
+export { default as FileUpload } from './FileUpload';
 export { default as DropdownPopup } from './DropdownPopup';
 export { default as DelayedRender } from './DelayedRender';
 export { default as ThemeSelector } from './ThemeSelector';
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 1d15ed42e7..827c5a26ce 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -29,7 +29,7 @@
   "com_assistants_actions_info": "Let your Assistant retrieve information or take actions via API's",
   "com_assistants_add_actions": "Add Actions",
   "com_assistants_add_tools": "Add Tools",
-  "com_assistants_allow_sites_you_trust": "Only allow sites you trust.",
+  "com_assistants_allow_sites_you_trust": "Only allow sites you trust",
   "com_assistants_append_date": "Append Current Date & Time",
   "com_assistants_append_date_tooltip": "When enabled, the current client date and time will be appended to the assistant system instructions.",
   "com_assistants_attempt_info": "Assistant wants to send the following:",
@@ -871,6 +871,13 @@
   "com_ui_x_selected": "{{0}} selected",
   "com_ui_yes": "Yes",
   "com_ui_zoom": "Zoom",
+  "com_ui_getting_started": "Getting Started",
+  "com_ui_creating_image": "Creating image. May take a moment",
+  "com_ui_adding_details": "Adding details",
+  "com_ui_final_touch": "Final touch",
+  "com_ui_image_created": "Image created",
+  "com_ui_edit_editing_image": "Editing image",
+  "com_ui_image_edited": "Image edited",
   "com_user_message": "You",
   "com_warning_resubmit_unsupported": "Resubmitting the AI message is not supported for this endpoint."
-}
\ No newline at end of file
+}
diff --git a/client/src/style.css b/client/src/style.css
index 1c29072797..309a27f01b 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -40,6 +40,17 @@
   --red-800: #991b1b;
   --red-900: #7f1d1d;
   --red-950: #450a0a;
+  --amber-50: #fffbeb;
+  --amber-100: #fef3c7;
+  --amber-200: #fde68a;
+  --amber-300: #fcd34d;
+  --amber-400: #fbbf24;
+  --amber-500: #f59e0b;
+  --amber-600: #d97706;
+  --amber-700: #b45309;
+  --amber-800: #92400e;
+  --amber-900: #78350f;
+  --amber-950: #451a03;
   --gizmo-gray-500: #999;
   --gizmo-gray-600: #666;
   --gizmo-gray-950: #0f0f0f;
@@ -55,6 +66,7 @@ html {
   --text-secondary: var(--gray-600);
   --text-secondary-alt: var(--gray-500);
   --text-tertiary: var(--gray-500);
+  --text-warning: var(--amber-500);
   --ring-primary: var(--gray-500);
   --header-primary: var(--white);
   --header-hover: var(--gray-50);
@@ -114,6 +126,7 @@ html {
   --text-secondary: var(--gray-300);
   --text-secondary-alt: var(--gray-400);
   --text-tertiary: var(--gray-500);
+  --text-warning: var(--amber-500);
   --header-primary: var(--gray-700);
   --header-hover: var(--gray-600);
   --header-button-hover: var(--gray-700);
@@ -715,8 +728,8 @@ pre {
 
 .premium-scroll-button:hover:not(:active) {
   transform: translateY(-1.5px) scale(1.02);
-  box-shadow: 
-    0 5px 10px rgba(0, 0, 0, 0.07), 
+  box-shadow:
+    0 5px 10px rgba(0, 0, 0, 0.07),
     0 7px 14px rgba(0, 0, 0, 0.1),
     0 0 0 1px rgba(255, 255, 255, 0.1);
 }
@@ -2578,7 +2591,9 @@ html {
 .animate-popover {
   transform-origin: top;
   opacity: 0;
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition:
+    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transform: scale(0.95) translateY(-0.5rem);
 }
 
@@ -2590,7 +2605,9 @@ html {
 .animate-popover-left {
   transform-origin: left;
   opacity: 0;
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition:
+    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transform: scale(0.95) translateX(-0.5rem);
 }
 
@@ -2678,3 +2695,46 @@ html {
 .badge-icon {
   transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.shimmer {
+  display: inline-block;
+  position: relative;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.8) 25%,
+    rgba(179, 179, 179, 0.25) 50%,
+    rgba(255, 255, 255, 0.8) 75%
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shimmer 4s linear infinite;
+}
+
+:global(.dark) .shimmer {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255) 25%,
+    rgba(129, 130, 134, 0.18) 50%,
+    rgb(255, 255, 255) 75%
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shimmer 4s linear infinite;
+}
+
+.custom-style-2 {
+  padding: 12px;
+}
diff --git a/client/src/utils/index.ts b/client/src/utils/index.ts
index 7518aeeb11..5363ff689c 100644
--- a/client/src/utils/index.ts
+++ b/client/src/utils/index.ts
@@ -18,6 +18,7 @@ export * from './promptGroups';
 export { default as cn } from './cn';
 export { default as logger } from './logger';
 export { default as buildTree } from './buildTree';
+export { default as scaleImage } from './scaleImage';
 export { default as getLoginError } from './getLoginError';
 export { default as cleanupPreset } from './cleanupPreset';
 export { default as buildDefaultConvo } from './buildDefaultConvo';
diff --git a/client/src/utils/scaleImage.ts b/client/src/utils/scaleImage.ts
new file mode 100644
index 0000000000..11e051fbd9
--- /dev/null
+++ b/client/src/utils/scaleImage.ts
@@ -0,0 +1,21 @@
+export default function scaleImage({
+  originalWidth,
+  originalHeight,
+  containerRef,
+}: {
+  originalWidth?: number;
+  originalHeight?: number;
+  containerRef: React.RefObject<HTMLDivElement>;
+}) {
+  const containerWidth = containerRef.current?.offsetWidth ?? 0;
+
+  if (containerWidth === 0 || originalWidth == null || originalHeight == null) {
+    return { width: 'auto', height: 'auto' };
+  }
+
+  const aspectRatio = originalWidth / originalHeight;
+  const scaledWidth = Math.min(containerWidth, originalWidth);
+  const scaledHeight = scaledWidth / aspectRatio;
+
+  return { width: `${scaledWidth}px`, height: `${scaledHeight}px` };
+}
diff --git a/client/tailwind.config.cjs b/client/tailwind.config.cjs
index fba7df05c2..f114a87334 100644
--- a/client/tailwind.config.cjs
+++ b/client/tailwind.config.cjs
@@ -67,6 +67,7 @@ module.exports = {
         'text-secondary': 'var(--text-secondary)',
         'text-secondary-alt': 'var(--text-secondary-alt)',
         'text-tertiary': 'var(--text-tertiary)',
+        'text-warning': 'var(--text-warning)',
         'ring-primary': 'var(--ring-primary)',
         'header-primary': 'var(--header-primary)',
         'header-hover': 'var(--header-hover)',
diff --git a/librechat.example.yaml b/librechat.example.yaml
index ae14b0faae..dfa8626ecc 100644
--- a/librechat.example.yaml
+++ b/librechat.example.yaml
@@ -294,5 +294,8 @@ endpoints:
 #       fileSizeLimit: 5
 #   serverFileSizeLimit: 100  # Global server file size limit in MB
 #   avatarSizeLimit: 2  # Limit for user avatar image size in MB
+#   imageGeneration: # Image Gen settings, either percentage or px
+#     percentage: 100
+#     px: 1024
 # # See the Custom Configuration Guide for more information on Assistants Config:
 # # https://www.librechat.ai/docs/configuration/librechat_yaml/object_structure/assistants_endpoint
diff --git a/packages/data-provider/src/file-config.ts b/packages/data-provider/src/file-config.ts
index 3798b48d4d..09476cbe10 100644
--- a/packages/data-provider/src/file-config.ts
+++ b/packages/data-provider/src/file-config.ts
@@ -222,6 +222,12 @@ export const fileConfigSchema = z.object({
   endpoints: z.record(endpointFileConfigSchema).optional(),
   serverFileSizeLimit: z.number().min(0).optional(),
   avatarSizeLimit: z.number().min(0).optional(),
+  imageGeneration: z
+    .object({
+      percentage: z.number().min(0).max(100).optional(),
+      px: z.number().min(0).optional(),
+    })
+    .optional(),
 });
 
 /** Helper function to safely convert string patterns to RegExp objects */

From 7ce782fec699497e1e995b31cee6232aca23f17f Mon Sep 17 00:00:00 2001
From: "Theo N. Truong" <644650+nhtruong@users.noreply.github.com>
Date: Mon, 19 May 2025 17:33:25 -0600
Subject: [PATCH 16/26] =?UTF-8?q?=F0=9F=8E=9A=EF=B8=8F=20feat:=20Custom=20?=
 =?UTF-8?q?Parameters=20(#7342)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* #

* - refactor: simplified getCustomConfig func

* #

* - feature: persist values for parameters with optionType of custom

* #

* - refactor: moved `Parameters/settings.ts` into `data-provider` so that both frontend and backend code can use it.

* - feature: loadCustomConfig can now parse and validate customParams property for `endpoints.custom` in `librechat.yaml`

* # fixed linter

* # removed .strict() in config.ts

* change: added packages/data-provider/src to SOURCE_DIRS for i18n check

* # removed unnecessary lodash imports

* # addressed PR comments
# fixed lint for updated files

* # better import for lodash (w/o relying on tree-shaking)
---
 .github/workflows/i18n-unused-keys.yml        |   2 +-
 api/server/services/Config/getCustomConfig.js |  12 +-
 .../services/Config/loadConfigEndpoints.js    |  10 +-
 .../services/Config/loadCustomConfig.js       |  62 +++++++-
 .../services/Config/loadCustomConfig.spec.js  | 150 ++++++++++++++++++
 .../services/Endpoints/custom/initialize.js   |   1 +
 .../Endpoints/Settings/Anthropic.tsx          |   2 +-
 .../components/Endpoints/Settings/Bedrock.tsx |   2 +-
 .../components/Endpoints/Settings/OpenAI.tsx  |   4 +-
 .../SidePanel/Agents/ModelPanel.tsx           |  25 ++-
 .../SidePanel/Parameters/DynamicCheckbox.tsx  |  28 ++--
 .../SidePanel/Parameters/DynamicCombobox.tsx  |  16 +-
 .../SidePanel/Parameters/DynamicInput.tsx     |  15 +-
 .../SidePanel/Parameters/DynamicSlider.tsx    |   2 +-
 .../SidePanel/Parameters/DynamicSwitch.tsx    |  27 ++--
 .../SidePanel/Parameters/DynamicTags.tsx      |  44 +++--
 .../SidePanel/Parameters/DynamicTextarea.tsx  |   4 +-
 .../components/SidePanel/Parameters/Panel.tsx |  30 ++--
 packages/data-provider/src/config.ts          |   6 +
 packages/data-provider/src/generate.ts        |   6 +-
 packages/data-provider/src/index.ts           |   1 +
 .../data-provider/src/parameterSettings.ts    |  18 +--
 packages/data-provider/src/types.ts           |   5 +
 23 files changed, 340 insertions(+), 132 deletions(-)
 rename client/src/components/SidePanel/Parameters/settings.ts => packages/data-provider/src/parameterSettings.ts (97%)

diff --git a/.github/workflows/i18n-unused-keys.yml b/.github/workflows/i18n-unused-keys.yml
index f720a61783..6bcf824946 100644
--- a/.github/workflows/i18n-unused-keys.yml
+++ b/.github/workflows/i18n-unused-keys.yml
@@ -22,7 +22,7 @@ jobs:
 
           # Define paths
           I18N_FILE="client/src/locales/en/translation.json"
-          SOURCE_DIRS=("client/src" "api")
+          SOURCE_DIRS=("client/src" "api" "packages/data-provider/src")
 
           # Check if translation file exists
           if [[ ! -f "$I18N_FILE" ]]; then
diff --git a/api/server/services/Config/getCustomConfig.js b/api/server/services/Config/getCustomConfig.js
index fdd84878eb..74828789fc 100644
--- a/api/server/services/Config/getCustomConfig.js
+++ b/api/server/services/Config/getCustomConfig.js
@@ -10,17 +10,7 @@ const getLogStores = require('~/cache/getLogStores');
  * */
 async function getCustomConfig() {
   const cache = getLogStores(CacheKeys.CONFIG_STORE);
-  let customConfig = await cache.get(CacheKeys.CUSTOM_CONFIG);
-
-  if (!customConfig) {
-    customConfig = await loadCustomConfig();
-  }
-
-  if (!customConfig) {
-    return null;
-  }
-
-  return customConfig;
+  return (await cache.get(CacheKeys.CUSTOM_CONFIG)) || (await loadCustomConfig());
 }
 
 /**
diff --git a/api/server/services/Config/loadConfigEndpoints.js b/api/server/services/Config/loadConfigEndpoints.js
index 03d8c22367..2e80fb42be 100644
--- a/api/server/services/Config/loadConfigEndpoints.js
+++ b/api/server/services/Config/loadConfigEndpoints.js
@@ -29,7 +29,14 @@ async function loadConfigEndpoints(req) {
 
     for (let i = 0; i < customEndpoints.length; i++) {
       const endpoint = customEndpoints[i];
-      const { baseURL, apiKey, name: configName, iconURL, modelDisplayLabel } = endpoint;
+      const {
+        baseURL,
+        apiKey,
+        name: configName,
+        iconURL,
+        modelDisplayLabel,
+        customParams,
+      } = endpoint;
       const name = normalizeEndpointName(configName);
 
       const resolvedApiKey = extractEnvVariable(apiKey);
@@ -41,6 +48,7 @@ async function loadConfigEndpoints(req) {
         userProvideURL: isUserProvided(resolvedBaseURL),
         modelDisplayLabel,
         iconURL,
+        customParams,
       };
     }
   }
diff --git a/api/server/services/Config/loadCustomConfig.js b/api/server/services/Config/loadCustomConfig.js
index 2127ec239e..18f3a44748 100644
--- a/api/server/services/Config/loadCustomConfig.js
+++ b/api/server/services/Config/loadCustomConfig.js
@@ -1,10 +1,18 @@
 const path = require('path');
-const { CacheKeys, configSchema, EImageOutputType } = require('librechat-data-provider');
+const {
+  CacheKeys,
+  configSchema,
+  EImageOutputType,
+  validateSettingDefinitions,
+  agentParamSettings,
+  paramSettings,
+} = require('librechat-data-provider');
 const getLogStores = require('~/cache/getLogStores');
 const loadYaml = require('~/utils/loadYaml');
 const { logger } = require('~/config');
 const axios = require('axios');
 const yaml = require('js-yaml');
+const keyBy = require('lodash/keyBy');
 
 const projectRoot = path.resolve(__dirname, '..', '..', '..', '..');
 const defaultConfigPath = path.resolve(projectRoot, 'librechat.yaml');
@@ -105,6 +113,10 @@ https://www.librechat.ai/docs/configuration/stt_tts`);
     logger.debug('Custom config:', customConfig);
   }
 
+  (customConfig.endpoints?.custom ?? [])
+    .filter((endpoint) => endpoint.customParams)
+    .forEach((endpoint) => parseCustomParams(endpoint.name, endpoint.customParams));
+
   if (customConfig.cache) {
     const cache = getLogStores(CacheKeys.CONFIG_STORE);
     await cache.set(CacheKeys.CUSTOM_CONFIG, customConfig);
@@ -117,4 +129,52 @@ https://www.librechat.ai/docs/configuration/stt_tts`);
   return customConfig;
 }
 
+// Validate and fill out missing values for custom parameters
+function parseCustomParams(endpointName, customParams) {
+  const paramEndpoint = customParams.defaultParamsEndpoint;
+  customParams.paramDefinitions = customParams.paramDefinitions || [];
+
+  // Checks if `defaultParamsEndpoint` is a key in `paramSettings`.
+  const validEndpoints = new Set([
+    ...Object.keys(paramSettings),
+    ...Object.keys(agentParamSettings),
+  ]);
+  if (!validEndpoints.has(paramEndpoint)) {
+    throw new Error(
+      `defaultParamsEndpoint of "${endpointName}" endpoint is invalid. ` +
+        `Valid options are ${Array.from(validEndpoints).join(', ')}`,
+    );
+  }
+
+  // creates default param maps
+  const regularParams = paramSettings[paramEndpoint] ?? [];
+  const agentParams = agentParamSettings[paramEndpoint] ?? [];
+  const defaultParams = regularParams.concat(agentParams);
+  const defaultParamsMap = keyBy(defaultParams, 'key');
+
+  // TODO: Remove this check once we support new parameters not part of default parameters.
+  // Checks if every key in `paramDefinitions` is valid.
+  const validKeys = new Set(Object.keys(defaultParamsMap));
+  const paramKeys = customParams.paramDefinitions.map((param) => param.key);
+  if (paramKeys.some((key) => !validKeys.has(key))) {
+    throw new Error(
+      `paramDefinitions of "${endpointName}" endpoint contains invalid key(s). ` +
+        `Valid parameter keys are ${Array.from(validKeys).join(', ')}`,
+    );
+  }
+
+  // Fill out missing values for custom param definitions
+  customParams.paramDefinitions = customParams.paramDefinitions.map((param) => {
+    return { ...defaultParamsMap[param.key], ...param, optionType: 'custom' };
+  });
+
+  try {
+    validateSettingDefinitions(customParams.paramDefinitions);
+  } catch (e) {
+    throw new Error(
+      `Custom parameter definitions for "${endpointName}" endpoint is malformed: ${e.message}`,
+    );
+  }
+}
+
 module.exports = loadCustomConfig;
diff --git a/api/server/services/Config/loadCustomConfig.spec.js b/api/server/services/Config/loadCustomConfig.spec.js
index 24553b9f3e..ed698e57f1 100644
--- a/api/server/services/Config/loadCustomConfig.spec.js
+++ b/api/server/services/Config/loadCustomConfig.spec.js
@@ -1,6 +1,34 @@
 jest.mock('axios');
 jest.mock('~/cache/getLogStores');
 jest.mock('~/utils/loadYaml');
+jest.mock('librechat-data-provider', () => {
+  const actual = jest.requireActual('librechat-data-provider');
+  return {
+    ...actual,
+    paramSettings: { foo: {}, bar: {}, custom: {} },
+    agentParamSettings: {
+      custom: [],
+      google: [
+        {
+          key: 'pressure',
+          type: 'string',
+          component: 'input',
+        },
+        {
+          key: 'temperature',
+          type: 'number',
+          component: 'slider',
+          default: 0.5,
+          range: {
+            min: 0,
+            max: 2,
+            step: 0.01,
+          },
+        },
+      ],
+    },
+  };
+});
 
 const axios = require('axios');
 const loadCustomConfig = require('./loadCustomConfig');
@@ -150,4 +178,126 @@ describe('loadCustomConfig', () => {
     expect(logger.info).toHaveBeenCalledWith(JSON.stringify(mockConfig, null, 2));
     expect(logger.debug).toHaveBeenCalledWith('Custom config:', mockConfig);
   });
+
+  describe('parseCustomParams', () => {
+    const mockConfig = {
+      version: '1.0',
+      cache: false,
+      endpoints: {
+        custom: [
+          {
+            name: 'Google',
+            apiKey: 'user_provided',
+            customParams: {},
+          },
+        ],
+      },
+    };
+
+    async function loadCustomParams(customParams) {
+      mockConfig.endpoints.custom[0].customParams = customParams;
+      loadYaml.mockReturnValue(mockConfig);
+      return await loadCustomConfig();
+    }
+
+    beforeEach(() => {
+      jest.resetAllMocks();
+      process.env.CONFIG_PATH = 'validConfig.yaml';
+    });
+
+    it('returns no error when customParams is undefined', async () => {
+      const result = await loadCustomParams(undefined);
+      expect(result).toEqual(mockConfig);
+    });
+
+    it('returns no error when customParams is valid', async () => {
+      const result = await loadCustomParams({
+        defaultParamsEndpoint: 'google',
+        paramDefinitions: [
+          {
+            key: 'temperature',
+            default: 0.5,
+          },
+        ],
+      });
+      expect(result).toEqual(mockConfig);
+    });
+
+    it('throws an error when paramDefinitions contain unsupported keys', async () => {
+      const malformedCustomParams = {
+        defaultParamsEndpoint: 'google',
+        paramDefinitions: [
+          { key: 'temperature', default: 0.5 },
+          { key: 'unsupportedKey', range: 0.5 },
+        ],
+      };
+      await expect(loadCustomParams(malformedCustomParams)).rejects.toThrow(
+        'paramDefinitions of "Google" endpoint contains invalid key(s). Valid parameter keys are pressure, temperature',
+      );
+    });
+
+    it('throws an error when paramDefinitions is malformed', async () => {
+      const malformedCustomParams = {
+        defaultParamsEndpoint: 'google',
+        paramDefinitions: [
+          {
+            key: 'temperature',
+            type: 'noomba',
+            component: 'inpoot',
+            optionType: 'custom',
+          },
+        ],
+      };
+      await expect(loadCustomParams(malformedCustomParams)).rejects.toThrow(
+        /Custom parameter definitions for "Google" endpoint is malformed:/,
+      );
+    });
+
+    it('throws an error when defaultParamsEndpoint is not provided', async () => {
+      const malformedCustomParams = { defaultParamsEndpoint: undefined };
+      await expect(loadCustomParams(malformedCustomParams)).rejects.toThrow(
+        'defaultParamsEndpoint of "Google" endpoint is invalid. Valid options are foo, bar, custom, google',
+      );
+    });
+
+    it('fills the paramDefinitions with missing values', async () => {
+      const customParams = {
+        defaultParamsEndpoint: 'google',
+        paramDefinitions: [
+          { key: 'temperature', default: 0.7, range: { min: 0.1, max: 0.9, step: 0.1 } },
+          { key: 'pressure', component: 'textarea' },
+        ],
+      };
+
+      const parsedConfig = await loadCustomParams(customParams);
+      const paramDefinitions = parsedConfig.endpoints.custom[0].customParams.paramDefinitions;
+      expect(paramDefinitions).toEqual([
+        {
+          columnSpan: 1,
+          component: 'slider',
+          default: 0.7, // overridden
+          includeInput: true,
+          key: 'temperature',
+          label: 'temperature',
+          optionType: 'custom',
+          range: {
+            // overridden
+            max: 0.9,
+            min: 0.1,
+            step: 0.1,
+          },
+          type: 'number',
+        },
+        {
+          columnSpan: 1,
+          component: 'textarea', // overridden
+          key: 'pressure',
+          label: 'pressure',
+          optionType: 'custom',
+          placeholder: '',
+          type: 'string',
+        },
+      ]);
+    });
+  });
 });
diff --git a/api/server/services/Endpoints/custom/initialize.js b/api/server/services/Endpoints/custom/initialize.js
index 592440db54..39def8d0d5 100644
--- a/api/server/services/Endpoints/custom/initialize.js
+++ b/api/server/services/Endpoints/custom/initialize.js
@@ -105,6 +105,7 @@ const initializeClient = async ({ req, res, endpointOption, optionsOnly, overrid
     headers: resolvedHeaders,
     addParams: endpointConfig.addParams,
     dropParams: endpointConfig.dropParams,
+    customParams: endpointConfig.customParams,
     titleConvo: endpointConfig.titleConvo,
     titleModel: endpointConfig.titleModel,
     forcePrompt: endpointConfig.forcePrompt,
diff --git a/client/src/components/Endpoints/Settings/Anthropic.tsx b/client/src/components/Endpoints/Settings/Anthropic.tsx
index 5d44f1a1a0..ffed8aa53d 100644
--- a/client/src/components/Endpoints/Settings/Anthropic.tsx
+++ b/client/src/components/Endpoints/Settings/Anthropic.tsx
@@ -3,7 +3,7 @@ import { getSettingsKeys } from 'librechat-data-provider';
 import type { SettingDefinition } from 'librechat-data-provider';
 import type { TModelSelectProps } from '~/common';
 import { componentMapping } from '~/components/SidePanel/Parameters/components';
-import { presetSettings } from '~/components/SidePanel/Parameters/settings';
+import { presetSettings } from 'librechat-data-provider';
 
 export default function AnthropicSettings({
   conversation,
diff --git a/client/src/components/Endpoints/Settings/Bedrock.tsx b/client/src/components/Endpoints/Settings/Bedrock.tsx
index 1f1634ea61..95bf325b2c 100644
--- a/client/src/components/Endpoints/Settings/Bedrock.tsx
+++ b/client/src/components/Endpoints/Settings/Bedrock.tsx
@@ -3,7 +3,7 @@ import { getSettingsKeys } from 'librechat-data-provider';
 import type { SettingDefinition } from 'librechat-data-provider';
 import type { TModelSelectProps } from '~/common';
 import { componentMapping } from '~/components/SidePanel/Parameters/components';
-import { presetSettings } from '~/components/SidePanel/Parameters/settings';
+import { presetSettings } from 'librechat-data-provider';
 
 export default function BedrockSettings({
   conversation,
diff --git a/client/src/components/Endpoints/Settings/OpenAI.tsx b/client/src/components/Endpoints/Settings/OpenAI.tsx
index eaa269e703..db0afbe47d 100644
--- a/client/src/components/Endpoints/Settings/OpenAI.tsx
+++ b/client/src/components/Endpoints/Settings/OpenAI.tsx
@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import { getSettingsKeys } from 'librechat-data-provider';
-import type { SettingDefinition, DynamicSettingProps } from 'librechat-data-provider';
+import type { SettingDefinition } from 'librechat-data-provider';
 import type { TModelSelectProps } from '~/common';
 import { componentMapping } from '~/components/SidePanel/Parameters/components';
-import { presetSettings } from '~/components/SidePanel/Parameters/settings';
+import { presetSettings } from 'librechat-data-provider';
 
 export default function OpenAISettings({
   conversation,
diff --git a/client/src/components/SidePanel/Agents/ModelPanel.tsx b/client/src/components/SidePanel/Agents/ModelPanel.tsx
index d7e5dd1b44..234cccbaad 100644
--- a/client/src/components/SidePanel/Agents/ModelPanel.tsx
+++ b/client/src/components/SidePanel/Agents/ModelPanel.tsx
@@ -1,16 +1,21 @@
 import React, { useMemo, useEffect } from 'react';
 import { ChevronLeft, RotateCcw } from 'lucide-react';
 import { useFormContext, useWatch, Controller } from 'react-hook-form';
-import { getSettingsKeys, alternateName } from 'librechat-data-provider';
+import {
+  getSettingsKeys,
+  alternateName,
+  agentParamSettings,
+  SettingDefinition,
+} from 'librechat-data-provider';
 import type * as t from 'librechat-data-provider';
 import type { AgentForm, AgentModelPanelProps, StringOption } from '~/common';
 import { componentMapping } from '~/components/SidePanel/Parameters/components';
-import { agentSettings } from '~/components/SidePanel/Parameters/settings';
 import ControlCombobox from '~/components/ui/ControlCombobox';
 import { useGetEndpointsQuery } from '~/data-provider';
 import { getEndpointField, cn } from '~/utils';
 import { useLocalize } from '~/hooks';
 import { Panel } from '~/common';
+import keyBy from 'lodash/keyBy';
 
 export default function ModelPanel({
   setActivePanel,
@@ -52,7 +57,7 @@ export default function ModelPanel({
     }
   }, [provider, models, modelsData, setValue, model]);
 
-  const { data: endpointsConfig } = useGetEndpointsQuery();
+  const { data: endpointsConfig = {} } = useGetEndpointsQuery();
 
   const bedrockRegions = useMemo(() => {
     return endpointsConfig?.[provider]?.availableRegions ?? [];
@@ -63,10 +68,18 @@ export default function ModelPanel({
     [provider, endpointsConfig],
   );
 
-  const parameters = useMemo(() => {
+  const parameters = useMemo((): SettingDefinition[] => {
+    const customParams = endpointsConfig[provider]?.customParams ?? {};
     const [combinedKey, endpointKey] = getSettingsKeys(endpointType ?? provider, model ?? '');
-    return agentSettings[combinedKey] ?? agentSettings[endpointKey];
-  }, [endpointType, model, provider]);
+    const overriddenEndpointKey = customParams.defaultParamsEndpoint ?? endpointKey;
+    const defaultParams =
+      agentParamSettings[combinedKey] ?? agentParamSettings[overriddenEndpointKey] ?? [];
+    const overriddenParams = endpointsConfig[provider]?.customParams?.paramDefinitions ?? [];
+    const overriddenParamsMap = keyBy(overriddenParams, 'key');
+    return defaultParams.map(
+      (param) => (overriddenParamsMap[param.key] as SettingDefinition) ?? param,
+    );
+  }, [endpointType, endpointsConfig, model, provider]);
 
   const setOption = (optionKey: keyof t.AgentModelParameters) => (value: t.AgentParameterValue) => {
     setValue(`model_parameters.${optionKey}`, value);
diff --git a/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx b/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx
index 7162c73ea5..1c4b23aa5c 100644
--- a/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx
@@ -1,8 +1,8 @@
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { OptionTypes } from 'librechat-data-provider';
 import type { DynamicSettingProps } from 'librechat-data-provider';
 import { Label, Checkbox, HoverCard, HoverCardTrigger } from '~/components/ui';
-import { TranslationKeys, useLocalize, useParameterEffects } from '~/hooks';
+import { TranslationKeys, useLocalize, useDebouncedInput, useParameterEffects } from '~/hooks';
 import { useChatContext } from '~/Providers';
 import OptionHover from './OptionHover';
 import { ESide } from '~/common';
@@ -23,23 +23,20 @@ function DynamicCheckbox({
 }: DynamicSettingProps) {
   const localize = useLocalize();
   const { preset } = useChatContext();
-  const [inputValue, setInputValue] = useState<boolean>(!!(defaultValue as boolean | undefined));
+
+  const [setInputValue, inputValue, setLocalValue] = useDebouncedInput<boolean>({
+    optionKey: settingKey,
+    initialValue: optionType !== OptionTypes.Custom ? conversation?.[settingKey] : defaultValue,
+    setter: () => ({}),
+    setOption,
+  });
 
   const selectedValue = useMemo(() => {
-    if (optionType === OptionTypes.Custom) {
-      // TODO: custom logic, add to payload but not to conversation
-      return inputValue;
-    }
-
     return conversation?.[settingKey] ?? defaultValue;
-  }, [conversation, defaultValue, optionType, settingKey, inputValue]);
+  }, [conversation, defaultValue, settingKey]);
 
   const handleCheckedChange = (checked: boolean) => {
-    if (optionType === OptionTypes.Custom) {
-      // TODO: custom logic, add to payload but not to conversation
-      setInputValue(checked);
-      return;
-    }
+    setInputValue(checked);
     setOption(settingKey)(checked);
   };
 
@@ -49,8 +46,7 @@ function DynamicCheckbox({
     defaultValue,
     conversation,
     inputValue,
-    setInputValue,
-    preventDelayedUpdate: true,
+    setInputValue: setLocalValue,
   });
 
   return (
diff --git a/client/src/components/SidePanel/Parameters/DynamicCombobox.tsx b/client/src/components/SidePanel/Parameters/DynamicCombobox.tsx
index c0aca06149..0d7479d64f 100644
--- a/client/src/components/SidePanel/Parameters/DynamicCombobox.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicCombobox.tsx
@@ -1,5 +1,4 @@
 import { useMemo, useState, useCallback } from 'react';
-import { OptionTypes } from 'librechat-data-provider';
 import type { DynamicSettingProps } from 'librechat-data-provider';
 import { Label, HoverCard, HoverCardTrigger } from '~/components/ui';
 import ControlCombobox from '~/components/ui/ControlCombobox';
@@ -16,7 +15,6 @@ function DynamicCombobox({
   description = '',
   columnSpan,
   setOption,
-  optionType,
   options: _options,
   items: _items,
   showLabel = true,
@@ -36,11 +34,8 @@ function DynamicCombobox({
   const [inputValue, setInputValue] = useState<string | null>(null);
 
   const selectedValue = useMemo(() => {
-    if (optionType === OptionTypes.Custom) {
-      return inputValue;
-    }
     return conversation?.[settingKey] ?? defaultValue;
-  }, [conversation, defaultValue, optionType, settingKey, inputValue]);
+  }, [conversation, defaultValue, settingKey]);
 
   const items = useMemo(() => {
     if (_items != null) {
@@ -54,13 +49,10 @@ function DynamicCombobox({
 
   const handleChange = useCallback(
     (value: string) => {
-      if (optionType === OptionTypes.Custom) {
-        setInputValue(value);
-      } else {
-        setOption(settingKey)(value);
-      }
+      setInputValue(value);
+      setOption(settingKey)(value);
     },
-    [optionType, setOption, settingKey],
+    [setOption, settingKey],
   );
 
   useParameterEffects({
diff --git a/client/src/components/SidePanel/Parameters/DynamicInput.tsx b/client/src/components/SidePanel/Parameters/DynamicInput.tsx
index e2c49a5d4a..71714d050e 100644
--- a/client/src/components/SidePanel/Parameters/DynamicInput.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicInput.tsx
@@ -12,7 +12,6 @@ function DynamicInput({
   settingKey,
   defaultValue,
   description = '',
-  type = 'string',
   columnSpan,
   setOption,
   optionType,
@@ -28,7 +27,7 @@ function DynamicInput({
   const { preset } = useChatContext();
 
   const [setInputValue, inputValue, setLocalValue] = useDebouncedInput<string | number>({
-    optionKey: optionType !== OptionTypes.Custom ? settingKey : undefined,
+    optionKey: settingKey,
     initialValue: optionType !== OptionTypes.Custom ? conversation?.[settingKey] : defaultValue,
     setter: () => ({}),
     setOption,
@@ -44,17 +43,7 @@ function DynamicInput({
   });
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    if (type !== 'number') {
-      setInputValue(e);
-      return;
-    }
-
-    if (value === '') {
-      setInputValue(e);
-    } else if (!isNaN(Number(value))) {
-      setInputValue(e, true);
-    }
+    setInputValue(e, !isNaN(Number(e.target.value)));
   };
 
   return (
diff --git a/client/src/components/SidePanel/Parameters/DynamicSlider.tsx b/client/src/components/SidePanel/Parameters/DynamicSlider.tsx
index 92ab0a91f6..a9142468e9 100644
--- a/client/src/components/SidePanel/Parameters/DynamicSlider.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicSlider.tsx
@@ -33,7 +33,7 @@ function DynamicSlider({
   );
 
   const [setInputValue, inputValue, setLocalValue] = useDebouncedInput<string | number>({
-    optionKey: optionType !== OptionTypes.Custom ? settingKey : undefined,
+    optionKey: settingKey,
     initialValue: optionType !== OptionTypes.Custom ? conversation?.[settingKey] : defaultValue,
     setter: () => ({}),
     setOption,
diff --git a/client/src/components/SidePanel/Parameters/DynamicSwitch.tsx b/client/src/components/SidePanel/Parameters/DynamicSwitch.tsx
index f7a67fe71e..a603ffe89d 100644
--- a/client/src/components/SidePanel/Parameters/DynamicSwitch.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicSwitch.tsx
@@ -1,5 +1,4 @@
-import { useState, useMemo } from 'react';
-import { OptionTypes } from 'librechat-data-provider';
+import { useState } from 'react';
 import type { DynamicSettingProps } from 'librechat-data-provider';
 import { Label, Switch, HoverCard, HoverCardTrigger } from '~/components/ui';
 import { TranslationKeys, useLocalize, useParameterEffects } from '~/hooks';
@@ -14,7 +13,6 @@ function DynamicSwitch({
   description = '',
   columnSpan,
   setOption,
-  optionType,
   readonly = false,
   showDefault = false,
   labelCode = false,
@@ -34,21 +32,10 @@ function DynamicSwitch({
     preventDelayedUpdate: true,
   });
 
-  const selectedValue = useMemo(() => {
-    if (optionType === OptionTypes.Custom) {
-      // TODO: custom logic, add to payload but not to conversation
-      return inputValue;
-    }
-
-    return conversation?.[settingKey] ?? defaultValue;
-  }, [conversation, defaultValue, optionType, settingKey, inputValue]);
+  const selectedValue = conversation?.[settingKey] ?? defaultValue;
 
   const handleCheckedChange = (checked: boolean) => {
-    if (optionType === OptionTypes.Custom) {
-      // TODO: custom logic, add to payload but not to conversation
-      setInputValue(checked);
-      return;
-    }
+    setInputValue(checked);
     setOption(settingKey)(checked);
   };
 
@@ -65,7 +52,7 @@ function DynamicSwitch({
               htmlFor={`${settingKey}-dynamic-switch`}
               className="text-left text-sm font-medium"
             >
-              {labelCode ? localize(label as TranslationKeys) ?? label : label || settingKey}{' '}
+              {labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey}{' '}
               {showDefault && (
                 <small className="opacity-40">
                   ({localize('com_endpoint_default')}:{' '}
@@ -84,7 +71,11 @@ function DynamicSwitch({
         </HoverCardTrigger>
         {description && (
           <OptionHover
-            description={descriptionCode ? localize(description as TranslationKeys) ?? description : description}
+            description={
+              descriptionCode
+                ? (localize(description as TranslationKeys) ?? description)
+                : description
+            }
             side={ESide.Left}
           />
         )}
diff --git a/client/src/components/SidePanel/Parameters/DynamicTags.tsx b/client/src/components/SidePanel/Parameters/DynamicTags.tsx
index 5fb6f43a42..413a18e062 100644
--- a/client/src/components/SidePanel/Parameters/DynamicTags.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicTags.tsx
@@ -1,10 +1,9 @@
 import { useState, useMemo, useCallback, useRef } from 'react';
-import { OptionTypes } from 'librechat-data-provider';
 import type { DynamicSettingProps } from 'librechat-data-provider';
 import { Label, Input, HoverCard, HoverCardTrigger, Tag } from '~/components/ui';
 import { useChatContext, useToastContext } from '~/Providers';
 import { TranslationKeys, useLocalize, useParameterEffects } from '~/hooks';
-import { cn, defaultTextProps } from '~/utils';
+import { cn } from '~/utils';
 import OptionHover from './OptionHover';
 import { ESide } from '~/common';
 
@@ -15,7 +14,6 @@ function DynamicTags({
   description = '',
   columnSpan,
   setOption,
-  optionType,
   placeholder = '',
   readonly = false,
   showDefault = false,
@@ -38,14 +36,10 @@ function DynamicTags({
 
   const updateState = useCallback(
     (update: string[]) => {
-      if (optionType === OptionTypes.Custom) {
-        // TODO: custom logic, add to payload but not to conversation
-        setTags(update);
-        return;
-      }
+      setTags(update);
       setOption(settingKey)(update);
     },
-    [optionType, setOption, settingKey],
+    [setOption, settingKey],
   );
 
   const onTagClick = useCallback(() => {
@@ -54,18 +48,10 @@ function DynamicTags({
     }
   }, [inputRef]);
 
-  const currentTags: string[] | undefined = useMemo(() => {
-    if (optionType === OptionTypes.Custom) {
-      // TODO: custom logic, add to payload but not to conversation
-      return tags;
-    }
-
-    if (!conversation?.[settingKey]) {
-      return defaultValue ?? [];
-    }
-
-    return conversation[settingKey];
-  }, [conversation, defaultValue, optionType, settingKey, tags]);
+  const currentValue = conversation?.[settingKey];
+  const currentTags = useMemo(() => {
+    return currentValue ?? defaultValue ?? [];
+  }, [currentValue, defaultValue]);
 
   const onTagRemove = useCallback(
     (indexToRemove: number) => {
@@ -75,7 +61,7 @@ function DynamicTags({
 
       if (minTags != null && currentTags.length <= minTags) {
         showToast({
-          message: localize('com_ui_min_tags',{ 0: minTags + '' }),
+          message: localize('com_ui_min_tags', { 0: minTags + '' }),
           status: 'warning',
         });
         return;
@@ -126,7 +112,7 @@ function DynamicTags({
               htmlFor={`${settingKey}-dynamic-input`}
               className="text-left text-sm font-medium"
             >
-              {labelCode ? localize(label as TranslationKeys) ?? label : label || settingKey}{' '}
+              {labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey}{' '}
               {showDefault && (
                 <small className="opacity-40">
                   (
@@ -174,7 +160,11 @@ function DynamicTags({
                   }
                 }}
                 onChange={(e) => setTagText(e.target.value)}
-                placeholder={placeholderCode ? localize(placeholder as TranslationKeys) ?? placeholder : placeholder}
+                placeholder={
+                  placeholderCode
+                    ? (localize(placeholder as TranslationKeys) ?? placeholder)
+                    : placeholder
+                }
                 className={cn('flex h-10 max-h-10 border-none bg-surface-secondary px-3 py-2')}
               />
             </div>
@@ -182,7 +172,11 @@ function DynamicTags({
         </HoverCardTrigger>
         {description && (
           <OptionHover
-            description={descriptionCode ? localize(description as TranslationKeys) ?? description : description}
+            description={
+              descriptionCode
+                ? (localize(description as TranslationKeys) ?? description)
+                : description
+            }
             side={descriptionSide as ESide}
           />
         )}
diff --git a/client/src/components/SidePanel/Parameters/DynamicTextarea.tsx b/client/src/components/SidePanel/Parameters/DynamicTextarea.tsx
index c8c37c7d20..d4f0221394 100644
--- a/client/src/components/SidePanel/Parameters/DynamicTextarea.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicTextarea.tsx
@@ -2,7 +2,7 @@ import { OptionTypes } from 'librechat-data-provider';
 import type { DynamicSettingProps } from 'librechat-data-provider';
 import { Label, TextareaAutosize, HoverCard, HoverCardTrigger } from '~/components/ui';
 import { useLocalize, useDebouncedInput, useParameterEffects, TranslationKeys } from '~/hooks';
-import { cn, defaultTextProps } from '~/utils';
+import { cn } from '~/utils';
 import { useChatContext } from '~/Providers';
 import OptionHover from './OptionHover';
 import { ESide } from '~/common';
@@ -27,7 +27,7 @@ function DynamicTextarea({
   const { preset } = useChatContext();
 
   const [setInputValue, inputValue, setLocalValue] = useDebouncedInput<string | null>({
-    optionKey: optionType !== OptionTypes.Custom ? settingKey : undefined,
+    optionKey: settingKey,
     initialValue:
       optionType !== OptionTypes.Custom
         ? (conversation?.[settingKey] as string)
diff --git a/client/src/components/SidePanel/Parameters/Panel.tsx b/client/src/components/SidePanel/Parameters/Panel.tsx
index f7e1f579ea..6217228b51 100644
--- a/client/src/components/SidePanel/Parameters/Panel.tsx
+++ b/client/src/components/SidePanel/Parameters/Panel.tsx
@@ -1,6 +1,12 @@
 import { RotateCcw } from 'lucide-react';
 import React, { useMemo, useState, useEffect, useCallback } from 'react';
-import { excludedKeys, getSettingsKeys, tConvoUpdateSchema } from 'librechat-data-provider';
+import {
+  excludedKeys,
+  getSettingsKeys,
+  tConvoUpdateSchema,
+  paramSettings,
+  SettingDefinition,
+} from 'librechat-data-provider';
 import type { TPreset } from 'librechat-data-provider';
 import { SaveAsPresetDialog } from '~/components/Endpoints';
 import { useSetIndexOptions, useLocalize } from '~/hooks';
@@ -8,7 +14,7 @@ import { useGetEndpointsQuery } from '~/data-provider';
 import { getEndpointField, logger } from '~/utils';
 import { componentMapping } from './components';
 import { useChatContext } from '~/Providers';
-import { settings } from './settings';
+import keyBy from 'lodash/keyBy';
 
 export default function Parameters() {
   const localize = useLocalize();
@@ -18,7 +24,9 @@ export default function Parameters() {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [preset, setPreset] = useState<TPreset | null>(null);
 
-  const { data: endpointsConfig } = useGetEndpointsQuery();
+  const { data: endpointsConfig = {} } = useGetEndpointsQuery();
+  const provider = conversation?.endpoint ?? '';
+  const model = conversation?.model ?? '';
 
   const bedrockRegions = useMemo(() => {
     return endpointsConfig?.[conversation?.endpoint ?? '']?.availableRegions ?? [];
@@ -29,13 +37,17 @@ export default function Parameters() {
     [conversation?.endpoint, endpointsConfig],
   );
 
-  const parameters = useMemo(() => {
-    const [combinedKey, endpointKey] = getSettingsKeys(
-      endpointType ?? conversation?.endpoint ?? '',
-      conversation?.model ?? '',
+  const parameters = useMemo((): SettingDefinition[] => {
+    const customParams = endpointsConfig[provider]?.customParams ?? {};
+    const [combinedKey, endpointKey] = getSettingsKeys(endpointType ?? provider, model);
+    const overriddenEndpointKey = customParams.defaultParamsEndpoint ?? endpointKey;
+    const defaultParams = paramSettings[combinedKey] ?? paramSettings[overriddenEndpointKey] ?? [];
+    const overriddenParams = endpointsConfig[provider]?.customParams?.paramDefinitions ?? [];
+    const overriddenParamsMap = keyBy(overriddenParams, 'key');
+    return defaultParams.map(
+      (param) => (overriddenParamsMap[param.key] as SettingDefinition) ?? param,
     );
-    return settings[combinedKey] ?? settings[endpointKey];
-  }, [conversation, endpointType]);
+  }, [endpointType, endpointsConfig, model, provider]);
 
   useEffect(() => {
     if (!parameters) {
diff --git a/packages/data-provider/src/config.ts b/packages/data-provider/src/config.ts
index 817620494f..8aeaf5577f 100644
--- a/packages/data-provider/src/config.ts
+++ b/packages/data-provider/src/config.ts
@@ -279,6 +279,12 @@ export const endpointSchema = baseEndpointSchema.merge(
     headers: z.record(z.any()).optional(),
     addParams: z.record(z.any()).optional(),
     dropParams: z.array(z.string()).optional(),
+    customParams: z
+      .object({
+        defaultParamsEndpoint: z.string().default('custom'),
+        paramDefinitions: z.array(z.record(z.any())).optional(),
+      })
+      .strict(),
     customOrder: z.number().optional(),
     directEndpoint: z.boolean().optional(),
     titleMessageRole: z.string().optional(),
diff --git a/packages/data-provider/src/generate.ts b/packages/data-provider/src/generate.ts
index c6a2eafbb0..bf0b2c1acd 100644
--- a/packages/data-provider/src/generate.ts
+++ b/packages/data-provider/src/generate.ts
@@ -467,7 +467,7 @@ export function validateSettingDefinitions(settings: SettingsConfiguration): voi
     }
 
     /* Default value checks */
-    if (setting.type === SettingTypes.Number && isNaN(setting.default as number)) {
+    if (setting.type === SettingTypes.Number && isNaN(setting.default as number)  && setting.default != null) {
       errors.push({
         code: ZodIssueCode.custom,
         message: `Invalid default value for setting ${setting.key}. Must be a number.`,
@@ -475,7 +475,7 @@ export function validateSettingDefinitions(settings: SettingsConfiguration): voi
       });
     }
 
-    if (setting.type === SettingTypes.Boolean && typeof setting.default !== 'boolean') {
+    if (setting.type === SettingTypes.Boolean && typeof setting.default !== 'boolean' && setting.default != null) {
       errors.push({
         code: ZodIssueCode.custom,
         message: `Invalid default value for setting ${setting.key}. Must be a boolean.`,
@@ -485,7 +485,7 @@ export function validateSettingDefinitions(settings: SettingsConfiguration): voi
 
     if (
       (setting.type === SettingTypes.String || setting.type === SettingTypes.Enum) &&
-      typeof setting.default !== 'string'
+      typeof setting.default !== 'string' && setting.default != null
     ) {
       errors.push({
         code: ZodIssueCode.custom,
diff --git a/packages/data-provider/src/index.ts b/packages/data-provider/src/index.ts
index 849062a9c1..b7289454f1 100644
--- a/packages/data-provider/src/index.ts
+++ b/packages/data-provider/src/index.ts
@@ -36,3 +36,4 @@ import * as dataService from './data-service';
 export * from './utils';
 export * from './actions';
 export { default as createPayload } from './createPayload';
+export * from './parameterSettings';
diff --git a/client/src/components/SidePanel/Parameters/settings.ts b/packages/data-provider/src/parameterSettings.ts
similarity index 97%
rename from client/src/components/SidePanel/Parameters/settings.ts
rename to packages/data-provider/src/parameterSettings.ts
index 4e905ee98b..88fc61e200 100644
--- a/client/src/components/SidePanel/Parameters/settings.ts
+++ b/packages/data-provider/src/parameterSettings.ts
@@ -6,8 +6,8 @@ import {
   ReasoningEffort,
   BedrockProviders,
   anthropicSettings,
-} from 'librechat-data-provider';
-import type { SettingsConfiguration, SettingDefinition } from 'librechat-data-provider';
+} from './types';
+import { SettingDefinition, SettingsConfiguration } from './generate';
 
 // Base definitions
 const baseDefinitions: Record<string, SettingDefinition> = {
@@ -654,7 +654,7 @@ const bedrockGeneralCol2: SettingsConfiguration = [
   bedrock.region,
 ];
 
-export const settings: Record<string, SettingsConfiguration | undefined> = {
+export const paramSettings: Record<string, SettingsConfiguration | undefined> = {
   [EModelEndpoint.openAI]: openAI,
   [EModelEndpoint.azureOpenAI]: openAI,
   [EModelEndpoint.custom]: openAI,
@@ -682,9 +682,9 @@ const bedrockGeneralColumns = {
 export const presetSettings: Record<
   string,
   | {
-      col1: SettingsConfiguration;
-      col2: SettingsConfiguration;
-    }
+  col1: SettingsConfiguration;
+  col2: SettingsConfiguration;
+}
   | undefined
 > = {
   [EModelEndpoint.openAI]: openAIColumns,
@@ -716,11 +716,11 @@ export const presetSettings: Record<
   },
 };
 
-export const agentSettings: Record<string, SettingsConfiguration | undefined> = Object.entries(
+export const agentParamSettings: Record<string, SettingsConfiguration | undefined> = Object.entries(
   presetSettings,
-).reduce((acc, [key, value]) => {
+).reduce<Record<string, SettingsConfiguration | undefined>>((acc, [key, value]) => {
   if (value) {
     acc[key] = value.col2;
   }
   return acc;
-}, {});
+}, {});
\ No newline at end of file
diff --git a/packages/data-provider/src/types.ts b/packages/data-provider/src/types.ts
index b365c4e589..8e70bdd0a6 100644
--- a/packages/data-provider/src/types.ts
+++ b/packages/data-provider/src/types.ts
@@ -10,6 +10,7 @@ import type {
   TConversationTag,
   TBanner,
 } from './schemas';
+import { SettingDefinition } from './generate';
 export type TOpenAIMessage = OpenAI.Chat.ChatCompletionMessageParam;
 
 export * from './schemas';
@@ -268,6 +269,10 @@ export type TConfig = {
   disableBuilder?: boolean;
   retrievalModels?: string[];
   capabilities?: string[];
+  customParams?: {
+    defaultParamsEndpoint?: string;
+    paramDefinitions?: SettingDefinition[];
+  };
 };
 
 export type TEndpointsConfig =

From 55d52d07f21dba844c18aa1b0e696e6888234e8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Honig?=
 <5851246+renehonig@users.noreply.github.com>
Date: Tue, 20 May 2025 01:35:05 +0200
Subject: [PATCH 17/26] =?UTF-8?q?=F0=9F=93=83=20fix:=20Ensure=20MCP=20Reso?=
 =?UTF-8?q?urces=20Pass=20Name=20and=20Description=20Fields=20to=20LLM=20(?=
 =?UTF-8?q?#7442)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/mcp/src/parsers.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/mcp/src/parsers.ts b/packages/mcp/src/parsers.ts
index 3350148a59..0ebcb077a5 100644
--- a/packages/mcp/src/parsers.ts
+++ b/packages/mcp/src/parsers.ts
@@ -57,6 +57,12 @@ function parseAsString(result: t.MCPToolCallResponse): string {
         if (item.resource.uri) {
           resourceText.push(`Resource URI: ${item.resource.uri}`);
         }
+        if (item.resource.name) {
+          resourceText.push(`Resource: ${item.resource.name}`);
+        }
+        if (item.resource.description) {
+          resourceText.push(`Description: ${item.resource.description}`);
+        }
         if (item.resource.mimeType != null && item.resource.mimeType) {
           resourceText.push(`Type: ${item.resource.mimeType}`);
         }
@@ -141,6 +147,12 @@ export function formatToolContent(
       if (item.resource.uri.length) {
         resourceText.push(`Resource URI: ${item.resource.uri}`);
       }
+      if (item.resource.name) {
+        resourceText.push(`Resource: ${item.resource.name}`);
+      }
+      if (item.resource.description) {
+        resourceText.push(`Description: ${item.resource.description}`);
+      }
       if (item.resource.mimeType != null && item.resource.mimeType) {
         resourceText.push(`Type: ${item.resource.mimeType}`);
       }

From f8cb0cdcda470518454a719697be6b6ecfed516f Mon Sep 17 00:00:00 2001
From: Ben Verhees <ben.verhees@iodigital.com>
Date: Tue, 20 May 2025 01:37:21 +0200
Subject: [PATCH 18/26] =?UTF-8?q?=F0=9F=94=97=20feat:=20Support=20Environm?=
 =?UTF-8?q?ent=20Variables=20in=20MCP=20URL=20Config=20(#7424)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/data-provider/src/mcp.ts | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/data-provider/src/mcp.ts b/packages/data-provider/src/mcp.ts
index 8f406fd391..258eb15ae3 100644
--- a/packages/data-provider/src/mcp.ts
+++ b/packages/data-provider/src/mcp.ts
@@ -53,9 +53,10 @@ export const WebSocketOptionsSchema = BaseOptionsSchema.extend({
   type: z.literal('websocket').optional(),
   url: z
     .string()
-    .url()
+    .transform((val: string) => extractEnvVariable(val))
+    .pipe(z.string().url())
     .refine(
-      (val) => {
+      (val: string) => {
         const protocol = new URL(val).protocol;
         return protocol === 'ws:' || protocol === 'wss:';
       },
@@ -70,9 +71,10 @@ export const SSEOptionsSchema = BaseOptionsSchema.extend({
   headers: z.record(z.string(), z.string()).optional(),
   url: z
     .string()
-    .url()
+    .transform((val: string) => extractEnvVariable(val))
+    .pipe(z.string().url())
     .refine(
-      (val) => {
+      (val: string) => {
         const protocol = new URL(val).protocol;
         return protocol !== 'ws:' && protocol !== 'wss:';
       },
@@ -87,9 +89,10 @@ export const StreamableHTTPOptionsSchema = BaseOptionsSchema.extend({
   headers: z.record(z.string(), z.string()).optional(),
   url: z
     .string()
-    .url()
+    .transform((val: string) => extractEnvVariable(val))
+    .pipe(z.string().url())
     .refine(
-      (val) => {
+      (val: string) => {
         const protocol = new URL(val).protocol;
         return protocol !== 'ws:' && protocol !== 'wss:';
       },
@@ -141,5 +144,9 @@ export function processMCPEnv(obj: Readonly<MCPOptions>, userId?: string): MCPOp
     newObj.headers = processedHeaders;
   }
 
+  if ('url' in newObj && newObj.url) {
+    newObj.url = extractEnvVariable(newObj.url);
+  }
+
   return newObj;
 }

From 8c0be0e2f059155803b2bbc56ccde390621a7d2a Mon Sep 17 00:00:00 2001
From: Amgad Hasan <109704569+AmgadHasan@users.noreply.github.com>
Date: Tue, 20 May 2025 02:43:44 +0300
Subject: [PATCH 19/26] =?UTF-8?q?=F0=9F=A6=99=20chore:=20Add=20`llama-4`?=
 =?UTF-8?q?=20to=20Vision=20Models=20List=20(#7433)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/data-provider/src/config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/data-provider/src/config.ts b/packages/data-provider/src/config.ts
index 8aeaf5577f..e40a662fdc 100644
--- a/packages/data-provider/src/config.ts
+++ b/packages/data-provider/src/config.ts
@@ -903,6 +903,7 @@ export const visionModels = [
   'llama-3-2-11b-vision',
   'llama-3.2-90b-vision',
   'llama-3-2-90b-vision',
+  'llama-4',
 ];
 export enum VisionModes {
   generative = 'generative',

From c8f5f5131e57874af2410405c2f298b90ded991a Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Tue, 20 May 2025 08:37:39 -0400
Subject: [PATCH 20/26] =?UTF-8?q?=F0=9F=94=A7=20fix:=20File=20Deletion=20f?=
 =?UTF-8?q?or=20Azure=20Assistants=20API=20(#7466)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/server/routes/files/files.js         |  8 ++++++++
 api/server/services/Files/OpenAI/crud.js |  2 +-
 api/server/services/Files/process.js     | 12 +++++++-----
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/api/server/routes/files/files.js b/api/server/routes/files/files.js
index 5a520bdb65..d2914825b0 100644
--- a/api/server/routes/files/files.js
+++ b/api/server/routes/files/files.js
@@ -121,6 +121,14 @@ router.delete('/', async (req, res) => {
       await processDeleteRequest({ req, files: assistantFiles });
       res.status(200).json({ message: 'File associations removed successfully from assistant' });
       return;
+    } else if (
+      req.body.assistant_id &&
+      req.body.files?.[0]?.filepath === EModelEndpoint.azureAssistants
+    ) {
+      await processDeleteRequest({ req, files: req.body.files });
+      return res
+        .status(200)
+        .json({ message: 'File associations removed successfully from Azure Assistant' });
     }
 
     await processDeleteRequest({ req, files: dbFiles });
diff --git a/api/server/services/Files/OpenAI/crud.js b/api/server/services/Files/OpenAI/crud.js
index 64478ce7b3..a55485fe4b 100644
--- a/api/server/services/Files/OpenAI/crud.js
+++ b/api/server/services/Files/OpenAI/crud.js
@@ -54,7 +54,7 @@ async function deleteOpenAIFile(req, file, openai) {
       throw new Error('OpenAI returned `false` for deleted status');
     }
     logger.debug(
-      `[deleteOpenAIFile] User ${req.user.id} successfully deleted ${file.file_id} from OpenAI`,
+      `[deleteOpenAIFile] User ${req.user.id} successfully deleted file "${file.file_id}" from OpenAI`,
     );
   } catch (error) {
     logger.error('[deleteOpenAIFile] Error deleting file from OpenAI: ' + error.message);
diff --git a/api/server/services/Files/process.js b/api/server/services/Files/process.js
index e8aef7da85..94b1bc4dad 100644
--- a/api/server/services/Files/process.js
+++ b/api/server/services/Files/process.js
@@ -137,11 +137,13 @@ const processDeleteRequest = async ({ req, files }) => {
   /** @type {Record<string, OpenAI | undefined>} */
   const client = { [FileSources.openai]: undefined, [FileSources.azure]: undefined };
   const initializeClients = async () => {
-    const openAIClient = await getOpenAIClient({
-      req,
-      overrideEndpoint: EModelEndpoint.assistants,
-    });
-    client[FileSources.openai] = openAIClient.openai;
+    if (req.app.locals[EModelEndpoint.assistants]) {
+      const openAIClient = await getOpenAIClient({
+        req,
+        overrideEndpoint: EModelEndpoint.assistants,
+      });
+      client[FileSources.openai] = openAIClient.openai;
+    }
 
     if (!req.app.locals[EModelEndpoint.azureOpenAI]?.assistants) {
       return;

From 59109cd2dd4cfad47e119d8b9efab4392ad0a596 Mon Sep 17 00:00:00 2001
From: arthurolivierfortin
 <118319678+arthurolivierfortin@users.noreply.github.com>
Date: Tue, 20 May 2025 08:43:12 -0400
Subject: [PATCH 21/26] =?UTF-8?q?=F0=9F=94=AC=20fix:=20File=20Search=20Req?=
 =?UTF-8?q?uest=20Format=20(Azure=20Assistants=20API)=20(#7404)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: The request format for file analysis with Azure OpenAI assistants

  The request format for file analysis with Azure OpenAI assistants differs from that of OpenAI. This fix updates the API to use attachments instead of file_ids. danny-avila#7379

* chore: ESLint Error

---------

Co-authored-by: Danny Avila <danacordially@gmail.com>
---
 api/server/controllers/assistants/chatV1.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/api/server/controllers/assistants/chatV1.js b/api/server/controllers/assistants/chatV1.js
index 5fa10e9e37..9129a6a1c1 100644
--- a/api/server/controllers/assistants/chatV1.js
+++ b/api/server/controllers/assistants/chatV1.js
@@ -326,8 +326,15 @@ const chatV1 = async (req, res) => {
 
       file_ids = files.map(({ file_id }) => file_id);
       if (file_ids.length || thread_file_ids.length) {
-        userMessage.file_ids = file_ids;
         attachedFileIds = new Set([...file_ids, ...thread_file_ids]);
+        if (endpoint === EModelEndpoint.azureAssistants) {
+          userMessage.attachments = Array.from(attachedFileIds).map((file_id) => ({
+            file_id,
+            tools: [{ type: 'file_search' }],
+          }));
+        } else {
+          userMessage.file_ids = Array.from(attachedFileIds);
+        }
       }
     };
 

From af96666ff440922a0f515c4790c5b5f89c89b53c Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Tue, 20 May 2025 09:24:52 -0400
Subject: [PATCH 22/26] =?UTF-8?q?=F0=9F=96=BC=EF=B8=8F=20chore:=20Linting?=
 =?UTF-8?q?=20&=20Transition=20Styling=20in=20UI=20Components=20(#7467)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: linting

* 🔧 fix: Correctly parse dimensions for image width and height in OpenAIImageGen component

* style: overlay class for DialogImage component to improve visibility

* style: Update transition timing function for PixelCard component to rely on style props
---
 .../components/Chat/Input/Files/FileRow.tsx   | 26 +++++++++----------
 .../Chat/Messages/Content/DialogImage.tsx     |  2 +-
 .../Parts/OpenAIImageGen/OpenAIImageGen.tsx   |  4 +--
 client/src/components/ui/PixelCard.tsx        |  3 ++-
 4 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Chat/Input/Files/FileRow.tsx b/client/src/components/Chat/Input/Files/FileRow.tsx
index 542978f3a8..7919e2e875 100644
--- a/client/src/components/Chat/Input/Files/FileRow.tsx
+++ b/client/src/components/Chat/Input/Files/FileRow.tsx
@@ -75,20 +75,20 @@ export default function FileRow({
   const renderFiles = () => {
     const rowStyle = isRTL
       ? {
-        display: 'flex',
-        flexDirection: 'row-reverse',
-        flexWrap: 'wrap',
-        gap: '4px',
-        width: '100%',
-        maxWidth: '100%',
-      }
+          display: 'flex',
+          flexDirection: 'row-reverse',
+          flexWrap: 'wrap',
+          gap: '4px',
+          width: '100%',
+          maxWidth: '100%',
+        }
       : {
-        display: 'flex',
-        flexWrap: 'wrap',
-        gap: '4px',
-        width: '100%',
-        maxWidth: '100%',
-      };
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '4px',
+          width: '100%',
+          maxWidth: '100%',
+        };
 
     return (
       <div style={rowStyle as React.CSSProperties}>
diff --git a/client/src/components/Chat/Messages/Content/DialogImage.tsx b/client/src/components/Chat/Messages/Content/DialogImage.tsx
index 3418f5c9dc..2080e69fca 100644
--- a/client/src/components/Chat/Messages/Content/DialogImage.tsx
+++ b/client/src/components/Chat/Messages/Content/DialogImage.tsx
@@ -8,7 +8,7 @@ export default function DialogImage({ isOpen, onOpenChange, src = '', downloadIm
         showCloseButton={false}
         className="h-full w-full rounded-none bg-transparent"
         disableScroll={false}
-        overlayClassName="bg-surface-secondary"
+        overlayClassName="bg-surface-primary opacity-95 z-50"
       >
         <div className="absolute left-0 right-0 top-0 flex items-center justify-between p-4">
           <Button
diff --git a/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx b/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx
index 3237bc37f2..bf09e5a7c3 100644
--- a/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx
@@ -194,8 +194,8 @@ export default function OpenAIImageGen({
           <Image
             altText={filename}
             imagePath={filepath ?? ''}
-            width={dimensions.width}
-            height={dimensions.height}
+            width={Number(dimensions.width?.split('px')[0])}
+            height={Number(dimensions.height?.split('px')[0])}
             placeholderDimensions={{ width: dimensions.width, height: dimensions.height }}
           />
         </div>
diff --git a/client/src/components/ui/PixelCard.tsx b/client/src/components/ui/PixelCard.tsx
index aabed69fb4..141a3ee55c 100644
--- a/client/src/components/ui/PixelCard.tsx
+++ b/client/src/components/ui/PixelCard.tsx
@@ -350,12 +350,13 @@ export default function PixelCard({
     >
       <div
         className={cn(
-          'ease-[cubic-bezier(0.5,1,0.89,1)] relative isolate grid select-none place-items-center overflow-hidden rounded-lg border border-border-light shadow-md transition-colors duration-200',
+          'relative isolate grid select-none place-items-center overflow-hidden rounded-lg border border-border-light shadow-md transition-colors duration-200 ease-in-out',
           className,
         )}
         style={{
           width: '100%',
           height: '100%',
+          transitionTimingFunction: 'cubic-bezier(0.5, 1, 0.89, 1)',
         }}
         onMouseEnter={hoverIn}
         onMouseLeave={hoverOut}

From e86842fd192bd2b36f9affec4711271e20cdde87 Mon Sep 17 00:00:00 2001
From: Sebastien Bruel <93573440+sbruel@users.noreply.github.com>
Date: Tue, 20 May 2025 22:26:58 +0900
Subject: [PATCH 23/26] =?UTF-8?q?=E2=9C=85=20fix:=20Emojis=20rendering=20i?=
 =?UTF-8?q?n=20`SplitText`=20Animation=20(#7460)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/ui/SplitText.spec.tsx | 38 +++++++++++++++++++++
 client/src/components/ui/SplitText.tsx      | 23 +++++++++----
 2 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 client/src/components/ui/SplitText.spec.tsx

diff --git a/client/src/components/ui/SplitText.spec.tsx b/client/src/components/ui/SplitText.spec.tsx
new file mode 100644
index 0000000000..3f8a8e49ae
--- /dev/null
+++ b/client/src/components/ui/SplitText.spec.tsx
@@ -0,0 +1,38 @@
+import { render } from '@testing-library/react';
+import SplitText from './SplitText';
+
+// Mock IntersectionObserver
+class MockIntersectionObserver {
+  observe = jest.fn();
+  unobserve = jest.fn();
+  disconnect = jest.fn();
+}
+
+Object.defineProperty(window, 'IntersectionObserver', {
+  writable: true,
+  configurable: true,
+  value: MockIntersectionObserver,
+});
+
+describe('SplitText', () => {
+  it('renders emojis correctly', () => {
+    const emojis = ['🚧', '❤️‍🔥', '💜', '🦎', '❌', '✅', '⚠️'];
+    const originalText = emojis.join('');
+
+    const { container } = render(<SplitText text={originalText} />);
+    const textSpans = container.querySelectorAll('p > span > span.inline-block');
+
+    // Reconstruct the text by joining all span contents
+    const reconstructedText = Array.from(textSpans)
+      .map((span) => span.textContent)
+      .join('')
+      .trim();
+    // Compare the reconstructed text with the original
+    expect(reconstructedText).toBe(originalText);
+
+    // Check the first character specifically as the reconstructed text could hide issues
+    for (let i = 0; i < emojis.length; i++) {
+      expect(Array.from(textSpans)[i].textContent).toBe(emojis[i]);
+    }
+  });
+});
diff --git a/client/src/components/ui/SplitText.tsx b/client/src/components/ui/SplitText.tsx
index 8a37def906..cde04eb8a1 100644
--- a/client/src/components/ui/SplitText.tsx
+++ b/client/src/components/ui/SplitText.tsx
@@ -15,6 +15,17 @@ interface SplitTextProps {
   onLineCountChange?: (lineCount: number) => void;
 }
 
+const splitGraphemes = (text: string): string[] => {
+  if (typeof Intl !== 'undefined' && Intl.Segmenter) {
+    const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
+    const segments = segmenter.segment(text);
+    return Array.from(segments).map((s) => s.segment);
+  } else {
+    // Fallback for browsers without Intl.Segmenter
+    return [...text];
+  }
+};
+
 const SplitText: React.FC<SplitTextProps> = ({
   text = '',
   className = '',
@@ -28,7 +39,7 @@ const SplitText: React.FC<SplitTextProps> = ({
   onLetterAnimationComplete,
   onLineCountChange,
 }) => {
-  const words = text.split(' ').map((word) => word.split(''));
+  const words = text.split(' ').map(splitGraphemes);
   const letters = words.flat();
   const [inView, setInView] = useState(false);
   const ref = useRef<HTMLParagraphElement>(null);
@@ -40,12 +51,12 @@ const SplitText: React.FC<SplitTextProps> = ({
       from: animationFrom,
       to: inView
         ? async (next: (props: any) => Promise<void>) => {
-          await next(animationTo);
-          animatedCount.current += 1;
-          if (animatedCount.current === letters.length && onLetterAnimationComplete) {
-            onLetterAnimationComplete();
+            await next(animationTo);
+            animatedCount.current += 1;
+            if (animatedCount.current === letters.length && onLetterAnimationComplete) {
+              onLetterAnimationComplete();
+            }
           }
-        }
         : animationFrom,
       delay: i * delay,
       config: { easing },

From eb1668ff228471d3b5ce1dc303b36113f1c0061d Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Tue, 20 May 2025 13:51:56 -0400
Subject: [PATCH 24/26] =?UTF-8?q?=F0=9F=93=82=20refactor:=20Improve=20`Fil?=
 =?UTF-8?q?eAttachment`=20&=20File=20Form=20Deletion=20(#7471)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: optional attachment properties for `FileAttachment`

* refactor: update ActionButton to use localized text

* chore: localize text in DataTableFile, add missing translation, imports order, and linting

* chore: linting in DataTable

* fix: integrate Recoil state management for file deletion in DataTableFile

* fix: integrate Recoil state management for file deletion in DataTable

* fix: add temp_file_id to BatchFile type and update deleteFiles logic to properly remove files that are mapped to temp_file_id
---
 .../Chat/Input/Files/Table/DataTable.tsx      | 19 +++++------
 .../Messages/Content/Parts/Attachment.tsx     | 21 ++++++++----
 client/src/components/Files/ActionButton.tsx  |  6 ++--
 .../Files/FileList/DataTableFile.tsx          | 32 ++++++++++---------
 client/src/hooks/Files/useFileDeletion.ts     | 24 ++++++++++----
 client/src/locales/en/translation.json        |  2 ++
 packages/data-provider/src/types/files.ts     |  1 +
 7 files changed, 65 insertions(+), 40 deletions(-)

diff --git a/client/src/components/Chat/Input/Files/Table/DataTable.tsx b/client/src/components/Chat/Input/Files/Table/DataTable.tsx
index 31e7296af3..c8c3190bcb 100644
--- a/client/src/components/Chat/Input/Files/Table/DataTable.tsx
+++ b/client/src/components/Chat/Input/Files/Table/DataTable.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { ListFilter } from 'lucide-react';
+import { useSetRecoilState } from 'recoil';
 import {
   flexRender,
   getCoreRowModel,
@@ -36,6 +37,7 @@ import { TrashIcon, Spinner } from '~/components/svg';
 import useLocalize from '~/hooks/useLocalize';
 import { useMediaQuery } from '~/hooks';
 import { cn } from '~/utils';
+import store from '~/store';
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
@@ -60,12 +62,14 @@ type Style = {
 export default function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
   const localize = useLocalize();
   const [isDeleting, setIsDeleting] = useState(false);
+  const setFiles = useSetRecoilState(store.filesByIndex(0));
+  const { deleteFiles } = useDeleteFilesFromTable(() => setIsDeleting(false));
+
   const [rowSelection, setRowSelection] = useState({});
   const [sorting, setSorting] = useState<SortingState>([]);
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
-  const { deleteFiles } = useDeleteFilesFromTable(() => setIsDeleting(false));
 
   const table = useReactTable({
     data,
@@ -96,7 +100,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
             const filesToDelete = table
               .getFilteredSelectedRowModel()
               .rows.map((row) => row.original);
-            deleteFiles({ files: filesToDelete as TFile[] });
+            deleteFiles({ files: filesToDelete as TFile[], setFiles });
             setRowSelection({});
           }}
           disabled={!table.getFilteredSelectedRowModel().rows.length || isDeleting}
@@ -218,13 +222,10 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
       <div className="flex items-center justify-end gap-2 py-4">
         <div className="ml-2 flex-1 truncate text-xs text-muted-foreground sm:ml-4 sm:text-sm">
           <span className="hidden sm:inline">
-            {localize(
-              'com_files_number_selected',
-              {
-                0: `${table.getFilteredSelectedRowModel().rows.length}`,
-                1: `${table.getFilteredRowModel().rows.length}`,
-              },
-            )}
+            {localize('com_files_number_selected', {
+              0: `${table.getFilteredSelectedRowModel().rows.length}`,
+              1: `${table.getFilteredRowModel().rows.length}`,
+            })}
           </span>
           <span className="sm:hidden">
             {`${table.getFilteredSelectedRowModel().rows.length}/${
diff --git a/client/src/components/Chat/Messages/Content/Parts/Attachment.tsx b/client/src/components/Chat/Messages/Content/Parts/Attachment.tsx
index d6b9b00b2c..43e7eeb19e 100644
--- a/client/src/components/Chat/Messages/Content/Parts/Attachment.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/Attachment.tsx
@@ -6,12 +6,12 @@ import Image from '~/components/Chat/Messages/Content/Image';
 import { useAttachmentLink } from './LogLink';
 import { cn } from '~/utils';
 
-const FileAttachment = memo(({ attachment }: { attachment: TAttachment }) => {
+const FileAttachment = memo(({ attachment }: { attachment: Partial<TAttachment> }) => {
   const { handleDownload } = useAttachmentLink({
-    href: attachment.filepath,
-    filename: attachment.filename,
+    href: attachment.filepath ?? '',
+    filename: attachment.filename ?? '',
   });
-  const extension = attachment.filename.split('.').pop();
+  const extension = attachment.filename?.split('.').pop();
   const [isVisible, setIsVisible] = useState(false);
 
   useEffect(() => {
@@ -19,6 +19,9 @@ const FileAttachment = memo(({ attachment }: { attachment: TAttachment }) => {
     return () => clearTimeout(timer);
   }, []);
 
+  if (!attachment.filepath) {
+    return null;
+  }
   return (
     <div
       className={cn(
@@ -88,6 +91,8 @@ export default function Attachment({ attachment }: { attachment?: TAttachment })
 
   if (isImage) {
     return <ImageAttachment attachment={attachment} />;
+  } else if (!attachment.filepath) {
+    return null;
   }
   return <FileAttachment attachment={attachment} />;
 }
@@ -119,9 +124,11 @@ export function AttachmentGroup({ attachments }: { attachments?: TAttachment[] }
     <>
       {fileAttachments.length > 0 && (
         <div className="my-2 flex flex-wrap items-center gap-2.5">
-          {fileAttachments.map((attachment, index) => (
-            <FileAttachment attachment={attachment} key={`file-${index}`} />
-          ))}
+          {fileAttachments.map((attachment, index) =>
+            attachment.filepath ? (
+              <FileAttachment attachment={attachment} key={`file-${index}`} />
+            ) : null,
+          )}
         </div>
       )}
       {imageAttachments.length > 0 && (
diff --git a/client/src/components/Files/ActionButton.tsx b/client/src/components/Files/ActionButton.tsx
index 854d152ce2..03f58da6c8 100644
--- a/client/src/components/Files/ActionButton.tsx
+++ b/client/src/components/Files/ActionButton.tsx
@@ -1,19 +1,21 @@
 import React from 'react';
-import { CrossIcon } from '~/components/svg';
 import { Button } from '~/components/ui';
+import { useLocalize } from '~/hooks';
 
 type ActionButtonProps = {
   onClick: () => void;
 };
 
 export default function ActionButton({ onClick }: ActionButtonProps) {
+  const localize = useLocalize();
   return (
     <div className="w-32">
       <Button
         className="w-full rounded-md border border-black bg-white p-0 text-black hover:bg-black hover:text-white"
         onClick={onClick}
       >
-        Action Button
+        {/* Action Button */}
+        {localize('com_ui_action_button')}
       </Button>
     </div>
   );
diff --git a/client/src/components/Files/FileList/DataTableFile.tsx b/client/src/components/Files/FileList/DataTableFile.tsx
index 281e9cec1d..d64699e2ea 100644
--- a/client/src/components/Files/FileList/DataTableFile.tsx
+++ b/client/src/components/Files/FileList/DataTableFile.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ListFilter } from 'lucide-react';
+import { useSetRecoilState } from 'recoil';
 import {
   flexRender,
   getCoreRowModel,
@@ -18,24 +19,25 @@ import { FileContext } from 'librechat-data-provider';
 import type { AugmentedColumnDef } from '~/common';
 import type { TFile } from 'librechat-data-provider';
 import {
-  Button,
   Input,
   Table,
+  Button,
+  TableRow,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
-  TableRow,
   DropdownMenu,
-  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuTrigger,
+  DropdownMenuCheckboxItem,
 } from '~/components/ui';
+import ActionButton from '~/components/Files/ActionButton';
 import { useDeleteFilesFromTable } from '~/hooks/Files';
 import { TrashIcon, Spinner } from '~/components/svg';
-import useLocalize from '~/hooks/useLocalize';
-import ActionButton from '../ActionButton';
 import UploadFileButton from './UploadFileButton';
+import useLocalize from '~/hooks/useLocalize';
+import store from '~/store';
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
@@ -57,12 +59,14 @@ export default function DataTableFile<TData, TValue>({
   data,
 }: DataTableProps<TData, TValue>) {
   const localize = useLocalize();
+  const setFiles = useSetRecoilState(store.filesByIndex(0));
   const [isDeleting, setIsDeleting] = React.useState(false);
+  const { deleteFiles } = useDeleteFilesFromTable(() => setIsDeleting(false));
+
   const [rowSelection, setRowSelection] = React.useState({});
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
   const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
-  const { deleteFiles } = useDeleteFilesFromTable(() => setIsDeleting(false));
 
   const table = useReactTable({
     data,
@@ -87,7 +91,7 @@ export default function DataTableFile<TData, TValue>({
     <>
       <div className="mt-2 flex flex-col items-start">
         <h2 className="text-lg">
-          <strong>Files</strong>
+          <strong>{localize('com_ui_files')}</strong>
         </h2>
         <div className="mt-3 flex w-full flex-col-reverse justify-between md:flex-row">
           <div className="mt-3 flex w-full flex-row justify-center gap-x-3 md:m-0 md:justify-start">
@@ -103,7 +107,7 @@ export default function DataTableFile<TData, TValue>({
                 const filesToDelete = table
                   .getFilteredSelectedRowModel()
                   .rows.map((row) => row.original);
-                deleteFiles({ files: filesToDelete as TFile[] });
+                deleteFiles({ files: filesToDelete as TFile[], setFiles });
                 setRowSelection({});
               }}
               className="ml-1 gap-2 dark:hover:bg-gray-850/25 sm:ml-0"
@@ -242,13 +246,11 @@ export default function DataTableFile<TData, TValue>({
         </Table>
       </div>
       <div className="ml-4 mr-4 mt-4 flex h-auto items-center justify-end space-x-2 py-4 sm:ml-0 sm:mr-0 sm:h-0">
-        <div className="text-muted-foreground ml-2 flex-1 text-sm">
-          {localize(
-            'com_files_number_selected', {
-              0: `${table.getFilteredSelectedRowModel().rows.length}`,
-              1: `${table.getFilteredRowModel().rows.length}`,
-            },
-          )}
+        <div className="ml-2 flex-1 text-sm text-muted-foreground">
+          {localize('com_files_number_selected', {
+            0: `${table.getFilteredSelectedRowModel().rows.length}`,
+            1: `${table.getFilteredRowModel().rows.length}`,
+          })}
         </div>
         <Button
           className="dark:border-gray-500 dark:hover:bg-gray-600"
diff --git a/client/src/hooks/Files/useFileDeletion.ts b/client/src/hooks/Files/useFileDeletion.ts
index f457aba678..34d89e313b 100644
--- a/client/src/hooks/Files/useFileDeletion.ts
+++ b/client/src/hooks/Files/useFileDeletion.ts
@@ -19,7 +19,6 @@ const useFileDeletion = ({
   assistant_id?: string;
   tool_resource?: EToolResources;
 }) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_batch, setFileDeleteBatch] = useState<t.BatchFile[]>([]);
   const setFilesToDelete = useSetFilesToDelete();
 
@@ -109,22 +108,33 @@ const useFileDeletion = ({
 
   const deleteFiles = useCallback(
     ({ files, setFiles }: { files: ExtendedFile[] | t.TFile[]; setFiles?: FileMapSetter }) => {
-      const batchFiles = files.map((_file) => {
-        const { file_id, embedded, filepath = '', source = FileSources.local } = _file;
+      const batchFiles: t.BatchFile[] = [];
+      for (const _file of files) {
+        const {
+          file_id,
+          embedded,
+          temp_file_id,
+          filepath = '',
+          source = FileSources.local,
+        } = _file;
 
-        return {
+        batchFiles.push({
           source,
           file_id,
           filepath,
-          embedded,
-        };
-      });
+          temp_file_id,
+          embedded: embedded ?? false,
+        });
+      }
 
       if (setFiles) {
         setFiles((currentFiles) => {
           const updatedFiles = new Map(currentFiles);
           batchFiles.forEach((file) => {
             updatedFiles.delete(file.file_id);
+            if (file.temp_file_id) {
+              updatedFiles.delete(file.temp_file_id);
+            }
           });
           const filesToUpdate = Object.fromEntries(updatedFiles);
           setFilesToDelete(filesToUpdate);
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 827c5a26ce..5370a780e5 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -460,6 +460,7 @@
   "com_ui_2fa_setup": "Setup 2FA",
   "com_ui_2fa_verified": "Successfully verified Two-Factor Authentication",
   "com_ui_accept": "I accept",
+  "com_ui_action_button": "Action Button",
   "com_ui_add": "Add",
   "com_ui_add_model_preset": "Add a model or preset for an additional response",
   "com_ui_add_multi_conversation": "Add multi-conversation",
@@ -641,6 +642,7 @@
   "com_ui_expand_chat": "Expand Chat",
   "com_ui_export_convo_modal": "Export Conversation Modal",
   "com_ui_field_required": "This field is required",
+  "com_ui_files": "Files",
   "com_ui_filter_prompts": "Filter Prompts",
   "com_ui_filter_prompts_name": "Filter prompts by name",
   "com_ui_finance": "Finance",
diff --git a/packages/data-provider/src/types/files.ts b/packages/data-provider/src/types/files.ts
index 2313af823b..927002630f 100644
--- a/packages/data-provider/src/types/files.ts
+++ b/packages/data-provider/src/types/files.ts
@@ -131,6 +131,7 @@ export type BatchFile = {
   filepath: string;
   embedded: boolean;
   source: FileSources;
+  temp_file_id?: string;
 };
 
 export type DeleteFilesBody = {

From 28b76ce339b17bf4fd38ed311099d5b77c27ec28 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 20 May 2025 14:59:18 -0400
Subject: [PATCH 25/26] =?UTF-8?q?=F0=9F=8C=8D=20i18n:=20Update=20translati?=
 =?UTF-8?q?on.json=20with=20latest=20translations=20(#7468)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 client/src/locales/en/translation.json | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 5370a780e5..77dab2732e 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -29,7 +29,7 @@
   "com_assistants_actions_info": "Let your Assistant retrieve information or take actions via API's",
   "com_assistants_add_actions": "Add Actions",
   "com_assistants_add_tools": "Add Tools",
-  "com_assistants_allow_sites_you_trust": "Only allow sites you trust",
+  "com_assistants_allow_sites_you_trust": "Only allow sites you trust.",
   "com_assistants_append_date": "Append Current Date & Time",
   "com_assistants_append_date_tooltip": "When enabled, the current client date and time will be appended to the assistant system instructions.",
   "com_assistants_attempt_info": "Assistant wants to send the following:",
@@ -464,6 +464,7 @@
   "com_ui_add": "Add",
   "com_ui_add_model_preset": "Add a model or preset for an additional response",
   "com_ui_add_multi_conversation": "Add multi-conversation",
+  "com_ui_adding_details": "Adding details",
   "com_ui_admin": "Admin",
   "com_ui_admin_access_warning": "Disabling Admin access to this feature may cause unexpected UI issues requiring refresh. If saved, the only way to revert is via the interface setting in librechat.yaml config which affects all roles.",
   "com_ui_admin_settings": "Admin Settings",
@@ -575,6 +576,7 @@
   "com_ui_create": "Create",
   "com_ui_create_link": "Create link",
   "com_ui_create_prompt": "Create Prompt",
+  "com_ui_creating_image": "Creating image. May take a moment",
   "com_ui_currently_production": "Currently in production",
   "com_ui_custom": "Custom",
   "com_ui_custom_header_name": "Custom Header Name",
@@ -628,6 +630,7 @@
   "com_ui_duplication_processing": "Duplicating conversation...",
   "com_ui_duplication_success": "Successfully duplicated conversation",
   "com_ui_edit": "Edit",
+  "com_ui_edit_editing_image": "Editing image",
   "com_ui_empty_category": "-",
   "com_ui_endpoint": "Endpoint",
   "com_ui_endpoint_menu": "LLM Endpoint Menu",
@@ -645,6 +648,7 @@
   "com_ui_files": "Files",
   "com_ui_filter_prompts": "Filter Prompts",
   "com_ui_filter_prompts_name": "Filter prompts by name",
+  "com_ui_final_touch": "Final touch",
   "com_ui_finance": "Finance",
   "com_ui_fork": "Fork",
   "com_ui_fork_all_target": "Include all to/from here",
@@ -676,6 +680,7 @@
   "com_ui_generate_backup": "Generate Backup Codes",
   "com_ui_generate_qrcode": "Generate QR Code",
   "com_ui_generating": "Generating...",
+  "com_ui_getting_started": "Getting Started",
   "com_ui_global_group": "something needs to go here. was empty",
   "com_ui_go_back": "Go back",
   "com_ui_go_to_conversation": "Go to conversation",
@@ -686,6 +691,8 @@
   "com_ui_hide_qr": "Hide QR Code",
   "com_ui_host": "Host",
   "com_ui_idea": "Ideas",
+  "com_ui_image_created": "Image created",
+  "com_ui_image_edited": "Image edited",
   "com_ui_image_gen": "Image Gen",
   "com_ui_import": "Import",
   "com_ui_import_conversation_error": "There was an error importing your conversations",
@@ -873,13 +880,6 @@
   "com_ui_x_selected": "{{0}} selected",
   "com_ui_yes": "Yes",
   "com_ui_zoom": "Zoom",
-  "com_ui_getting_started": "Getting Started",
-  "com_ui_creating_image": "Creating image. May take a moment",
-  "com_ui_adding_details": "Adding details",
-  "com_ui_final_touch": "Final touch",
-  "com_ui_image_created": "Image created",
-  "com_ui_edit_editing_image": "Editing image",
-  "com_ui_image_edited": "Image edited",
   "com_user_message": "You",
   "com_warning_resubmit_unsupported": "Resubmitting the AI message is not supported for this endpoint."
-}
+}
\ No newline at end of file

From b64265e5bf33346d88528dfa70833256049ca6a4 Mon Sep 17 00:00:00 2001
From: matt burnett <mawburn@users.noreply.github.com>
Date: Tue, 20 May 2025 15:03:13 -0400
Subject: [PATCH 26/26] =?UTF-8?q?=E2=8C=9B=20feat:=20Agent=20Version=20His?=
 =?UTF-8?q?tory=20and=20Management=20(#7455)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ feat: Enhance agent update functionality to save current state in versions array

- Updated the `updateAgent` function to push the current agent's state into a new `versions` array when an agent is updated.
- Modified the agent schema to include a `versions` field for storing historical states of agents.

* ✨ feat: Add comprehensive CRUD operations for agents in tests

- Introduced a new test suite for CRUD operations on agents, including create, read, update, and delete functionalities.
- Implemented tests for listing agents by author and updating agent projects.
- Enhanced the agent model to support version history tracking during updates.
- Ensured proper environment variable management during tests.

* ✨ feat: Introduce version tracking for agents and enhance UI components

- Added a `version` property to the agent model to track the number of versions.
- Updated the `getAgentHandler` to include the agent's version in the response.
- Introduced a new `VersionButton` component for navigating to the version panel.
- Created a `VersionPanel` component for displaying version-related information.
- Updated the UI to conditionally render the version button and panel based on the active state.
- Added localization for the new version-related UI elements.

* ✨ i18n: Add "version" translation key across multiple languages

- Introduced the "com_ui_agent_version" translation key in various language files to support version tracking for agents.
- Updated Arabic, Czech, German, English, Spanish, Estonian, Persian, Finnish, French, Hebrew, Hungarian, Indonesian, Italian, Japanese, Korean, Dutch, Polish, Portuguese (Brazil and Portugal), Russian, Swedish, Thai, Turkish, Vietnamese, and Chinese (Simplified and Traditional) translations.

* ✨ feat: Update AgentFooter to conditionally render AdminSettings

- Modified the logic for displaying buttons in the AgentFooter component to only show them when the active panel is the builder.
- Ensured that AdminSettings is displayed only when the user has an admin role and the buttons are visible.

* ✨ feat: Enhance AgentPanelSwitch and VersionPanel for improved agent capabilities

- Updated AgentPanelSwitch to include a new VersionPanel for displaying version-related information.
- Enhanced agentsConfig logic to properly handle agent capabilities.
- Modified VersionPanel to improve structure and localization support.
- Integrated createAgent mutation for future agent creation functionality.

* ✨ feat: Enhance VersionPanel to display agent version history and loading states

- Integrated version fetching logic in VersionPanel to retrieve and display agent version history.
- Added loading and error handling states to improve user experience.
- Updated agent schema to use mixed types for versions, allowing for more flexible version data structures.
- Introduced localization support for version-related UI elements.

* ✨ feat: Update VersionPanel and AgentPanelSwitch to enhance agent selection and version display

- Modified AgentPanelSwitch to pass selectedAgentId to VersionPanel for improved agent context.
- Enhanced VersionPanel to handle multiple timestamp formats and display appropriate messages when no agent is selected.
- Improved structure and readability of the VersionPanel component by adding a helper function for timestamp retrieval.

* ✨ feat: Refactor VersionPanel to utilize localization and improve timestamp handling

- Replaced hardcoded text constants with localization support for various UI elements in VersionPanel.
- Enhanced the timestamp retrieval function to handle errors gracefully and utilize localized messages for unknown dates.
- Improved user feedback by displaying localized messages for agent selection, version errors, and empty states.

* ✨ refactor: Clean up VersionPanel by removing unused code and improving timestamp handling

* ✨ feat: Implement agent version reverting functionality

- Added `revertAgentVersion` method in the Agent model to allow reverting to a previous version of an agent.
- Introduced `revertAgentVersionHandler` in the agents controller to handle requests for reverting agent versions.
- Updated API routes to include a new endpoint for reverting agent versions.
- Enhanced the VersionPanel component to support version restoration with user confirmation and feedback.
- Added localization support for success and error messages related to version restoration.

* ✨ i18n: Add localization for agent version restoration messages

* Simplify VersionPanel by removing unused parameters and enhancing agent ID handling

* Refactor Agent model and VersionPanel component to streamline version data handling

* Update version handling in Agent model and VersionPanel

- Enhanced the Agent model to include an `updatedAt` timestamp when pushing new versions.
- Improved the VersionPanel component to sort versions by the `updatedAt` timestamp for better display order.
- Added a new localization entry for indicating the active version of an agent.

* ✨ i18n: Add localization for active agent version across multiple languages

* ✨ feat: Introduce version management components for agent history

- Added `isActiveVersion` utility to determine the active version of an agent based on various criteria.
- Implemented `VersionContent` and `VersionItem` components to display agent version history, including loading and error states.
- Enhanced `VersionPanel` to integrate new components and manage version context effectively.
- Added comprehensive tests for version management functionalities to ensure reliability and correctness.

* Add unit tests for AgentFooter component

* cleanup

* Enhance agent version update handling and add unit tests for update operators

- Updated the `updateAgent` function to properly handle various update operators ($push, $pull, $addToSet) while maintaining version history.
- Modified unit tests to validate the correct behavior of agent updates, including versioning and tool management.

* Enhance version comparison logic and update tests for artifacts handling

- Modified the `isActiveVersion` utility to include artifacts in the version comparison criteria.
- Updated the `VersionPanel` component to support artifacts in the agent state.
- Added new unit tests to validate artifacts matching scenarios and edge cases in the `isActiveVersion` function.

* Implement duplicate version detection in agent updates and enhance error handling

- Added `isDuplicateVersion` function to check for identical versions during agent updates, excluding certain fields.
- Updated `updateAgent` function to throw an error if a duplicate version is detected, with detailed error information.
- Enhanced the `updateAgentHandler` to return appropriate responses for duplicate version errors.
- Modified client-side error handling to display user-friendly messages for duplicate version scenarios.
- Added comprehensive unit tests to validate duplicate version detection and error handling across various update scenarios.

* Update version title localization to include version number across multiple languages

- Modified the `com_ui_agent_version_title` translation key to include a placeholder for the version number in various language files.
- Enhanced the `VersionItem` component to utilize the updated localization for displaying version titles dynamically.

* Enhance agent version handling and add revert functionality

- Updated the `isDuplicateVersion` function to improve version comparison logic, including special handling for `projectIds` and arrays of objects.
- Modified the `updateAgent` function to streamline version updates and removed unnecessary checks for test environments.
- Introduced a new `revertAgentVersion` function to allow reverting agents to specific versions, with detailed documentation.
- Enhanced unit tests to validate duplicate version detection and revert functionality, ensuring robust error handling and version management.

* fix CI issues

* cleanup

* Revert all non-English translations

* clean up tests
---
 api/models/Agent.js                           | 177 +++++-
 api/models/Agent.spec.js                      | 556 +++++++++++++++++-
 api/server/controllers/agents/v1.js           |  73 +++
 api/server/routes/agents/v1.js                |   9 +
 client/src/common/types.ts                    |   1 +
 .../SidePanel/Agents/AgentFooter.tsx          |   3 +-
 .../SidePanel/Agents/AgentPanel.tsx           |  37 +-
 .../SidePanel/Agents/AgentPanelSwitch.tsx     |  34 +-
 .../Agents/Version/VersionButton.tsx          |  26 +
 .../Agents/Version/VersionContent.tsx         |  68 +++
 .../SidePanel/Agents/Version/VersionItem.tsx  |  67 +++
 .../SidePanel/Agents/Version/VersionPanel.tsx | 189 ++++++
 .../Version/__tests__/VersionContent.spec.tsx | 142 +++++
 .../Version/__tests__/VersionItem.spec.tsx    | 124 ++++
 .../Version/__tests__/VersionPanel.spec.tsx   | 194 ++++++
 .../Version/__tests__/isActiveVersion.spec.ts | 238 ++++++++
 .../Agents/Version/isActiveVersion.ts         |  59 ++
 .../Agents/__tests__/AgentFooter.spec.tsx     | 271 +++++++++
 client/src/data-provider/Agents/mutations.ts  |  55 +-
 client/src/locales/en/translation.json        |  16 +-
 packages/data-provider/src/api-endpoints.ts   |   2 +
 packages/data-provider/src/data-service.ts    |   8 +
 packages/data-provider/src/keys.ts            |   1 +
 .../data-provider/src/types/assistants.ts     |   1 +
 packages/data-provider/src/types/mutations.ts |  22 +-
 packages/data-schemas/src/schema/agent.ts     |   5 +
 26 files changed, 2362 insertions(+), 16 deletions(-)
 create mode 100644 client/src/components/SidePanel/Agents/Version/VersionButton.tsx
 create mode 100644 client/src/components/SidePanel/Agents/Version/VersionContent.tsx
 create mode 100644 client/src/components/SidePanel/Agents/Version/VersionItem.tsx
 create mode 100644 client/src/components/SidePanel/Agents/Version/VersionPanel.tsx
 create mode 100644 client/src/components/SidePanel/Agents/Version/__tests__/VersionContent.spec.tsx
 create mode 100644 client/src/components/SidePanel/Agents/Version/__tests__/VersionItem.spec.tsx
 create mode 100644 client/src/components/SidePanel/Agents/Version/__tests__/VersionPanel.spec.tsx
 create mode 100644 client/src/components/SidePanel/Agents/Version/__tests__/isActiveVersion.spec.ts
 create mode 100644 client/src/components/SidePanel/Agents/Version/isActiveVersion.ts
 create mode 100644 client/src/components/SidePanel/Agents/__tests__/AgentFooter.spec.tsx

diff --git a/api/models/Agent.js b/api/models/Agent.js
index 9b34eeae65..c52c364a63 100644
--- a/api/models/Agent.js
+++ b/api/models/Agent.js
@@ -21,7 +21,19 @@ const Agent = mongoose.model('agent', agentSchema);
  * @throws {Error} If the agent creation fails.
  */
 const createAgent = async (agentData) => {
-  return (await Agent.create(agentData)).toObject();
+  const { versions, ...versionData } = agentData;
+  const timestamp = new Date();
+  const initialAgentData = {
+    ...agentData,
+    versions: [
+      {
+        ...versionData,
+        createdAt: timestamp,
+        updatedAt: timestamp,
+      },
+    ],
+  };
+  return (await Agent.create(initialAgentData)).toObject();
 };
 
 /**
@@ -103,6 +115,8 @@ const loadAgent = async ({ req, agent_id, endpoint, model_parameters }) => {
     return null;
   }
 
+  agent.version = agent.versions ? agent.versions.length : 0;
+
   if (agent.author.toString() === req.user.id) {
     return agent;
   }
@@ -127,18 +141,146 @@ const loadAgent = async ({ req, agent_id, endpoint, model_parameters }) => {
   }
 };
 
+/**
+ * Check if a version already exists in the versions array, excluding timestamp and author fields
+ * @param {Object} updateData - The update data to compare
+ * @param {Array} versions - The existing versions array
+ * @returns {Object|null} - The matching version if found, null otherwise
+ */
+const isDuplicateVersion = (updateData, currentData, versions) => {
+  if (!versions || versions.length === 0) {
+    return null;
+  }
+
+  const excludeFields = [
+    '_id',
+    'id',
+    'createdAt',
+    'updatedAt',
+    'author',
+    'created_at',
+    'updated_at',
+    '__v',
+    'agent_ids',
+    'versions',
+  ];
+
+  const { $push, $pull, $addToSet, ...directUpdates } = updateData;
+
+  if (Object.keys(directUpdates).length === 0) {
+    return null;
+  }
+
+  const wouldBeVersion = { ...currentData, ...directUpdates };
+  const lastVersion = versions[versions.length - 1];
+
+  const allFields = new Set([...Object.keys(wouldBeVersion), ...Object.keys(lastVersion)]);
+
+  const importantFields = Array.from(allFields).filter((field) => !excludeFields.includes(field));
+
+  let isMatch = true;
+  for (const field of importantFields) {
+    if (!wouldBeVersion[field] && !lastVersion[field]) {
+      continue;
+    }
+
+    if (Array.isArray(wouldBeVersion[field]) && Array.isArray(lastVersion[field])) {
+      if (wouldBeVersion[field].length !== lastVersion[field].length) {
+        isMatch = false;
+        break;
+      }
+
+      // Special handling for projectIds (MongoDB ObjectIds)
+      if (field === 'projectIds') {
+        const wouldBeIds = wouldBeVersion[field].map((id) => id.toString()).sort();
+        const versionIds = lastVersion[field].map((id) => id.toString()).sort();
+
+        if (!wouldBeIds.every((id, i) => id === versionIds[i])) {
+          isMatch = false;
+          break;
+        }
+      }
+      // Handle arrays of objects like tool_kwargs
+      else if (typeof wouldBeVersion[field][0] === 'object' && wouldBeVersion[field][0] !== null) {
+        const sortedWouldBe = [...wouldBeVersion[field]].map((item) => JSON.stringify(item)).sort();
+        const sortedVersion = [...lastVersion[field]].map((item) => JSON.stringify(item)).sort();
+
+        if (!sortedWouldBe.every((item, i) => item === sortedVersion[i])) {
+          isMatch = false;
+          break;
+        }
+      } else {
+        const sortedWouldBe = [...wouldBeVersion[field]].sort();
+        const sortedVersion = [...lastVersion[field]].sort();
+
+        if (!sortedWouldBe.every((item, i) => item === sortedVersion[i])) {
+          isMatch = false;
+          break;
+        }
+      }
+    } else if (field === 'model_parameters') {
+      const wouldBeParams = wouldBeVersion[field] || {};
+      const lastVersionParams = lastVersion[field] || {};
+      if (JSON.stringify(wouldBeParams) !== JSON.stringify(lastVersionParams)) {
+        isMatch = false;
+        break;
+      }
+    } else if (wouldBeVersion[field] !== lastVersion[field]) {
+      isMatch = false;
+      break;
+    }
+  }
+
+  return isMatch ? lastVersion : null;
+};
+
 /**
  * Update an agent with new data without overwriting existing
  *  properties, or create a new agent if it doesn't exist.
+ * When an agent is updated, a copy of the current state will be saved to the versions array.
  *
  * @param {Object} searchParameter - The search parameters to find the agent to update.
  * @param {string} searchParameter.id - The ID of the agent to update.
  * @param {string} [searchParameter.author] - The user ID of the agent's author.
  * @param {Object} updateData - An object containing the properties to update.
  * @returns {Promise<Agent>} The updated or newly created agent document as a plain object.
+ * @throws {Error} If the update would create a duplicate version
  */
 const updateAgent = async (searchParameter, updateData) => {
   const options = { new: true, upsert: false };
+
+  const currentAgent = await Agent.findOne(searchParameter);
+  if (currentAgent) {
+    const { __v, _id, id, versions, ...versionData } = currentAgent.toObject();
+    const { $push, $pull, $addToSet, ...directUpdates } = updateData;
+
+    if (Object.keys(directUpdates).length > 0 && versions && versions.length > 0) {
+      const duplicateVersion = isDuplicateVersion(updateData, versionData, versions);
+      if (duplicateVersion) {
+        const error = new Error(
+          'Duplicate version: This would create a version identical to an existing one',
+        );
+        error.statusCode = 409;
+        error.details = {
+          duplicateVersion,
+          versionIndex: versions.findIndex(
+            (v) => JSON.stringify(duplicateVersion) === JSON.stringify(v),
+          ),
+        };
+        throw error;
+      }
+    }
+
+    updateData.$push = {
+      ...($push || {}),
+      versions: {
+        ...versionData,
+        ...directUpdates,
+        updatedAt: new Date(),
+      },
+    };
+  }
+
   return Agent.findOneAndUpdate(searchParameter, updateData, options).lean();
 };
 
@@ -358,6 +500,38 @@ const updateAgentProjects = async ({ user, agentId, projectIds, removeProjectIds
   return await getAgent({ id: agentId });
 };
 
+/**
+ * Reverts an agent to a specific version in its version history.
+ * @param {Object} searchParameter - The search parameters to find the agent to revert.
+ * @param {string} searchParameter.id - The ID of the agent to revert.
+ * @param {string} [searchParameter.author] - The user ID of the agent's author.
+ * @param {number} versionIndex - The index of the version to revert to in the versions array.
+ * @returns {Promise<MongoAgent>} The updated agent document after reverting.
+ * @throws {Error} If the agent is not found or the specified version does not exist.
+ */
+const revertAgentVersion = async (searchParameter, versionIndex) => {
+  const agent = await Agent.findOne(searchParameter);
+  if (!agent) {
+    throw new Error('Agent not found');
+  }
+
+  if (!agent.versions || !agent.versions[versionIndex]) {
+    throw new Error(`Version ${versionIndex} not found`);
+  }
+
+  const revertToVersion = agent.versions[versionIndex];
+
+  const updateData = {
+    ...revertToVersion,
+  };
+
+  delete updateData._id;
+  delete updateData.id;
+  delete updateData.versions;
+
+  return Agent.findOneAndUpdate(searchParameter, updateData, { new: true }).lean();
+};
+
 module.exports = {
   Agent,
   getAgent,
@@ -369,4 +543,5 @@ module.exports = {
   updateAgentProjects,
   addAgentResourceFile,
   removeAgentResourceFiles,
+  revertAgentVersion,
 };
diff --git a/api/models/Agent.spec.js b/api/models/Agent.spec.js
index 051cb6800f..3eb866b692 100644
--- a/api/models/Agent.spec.js
+++ b/api/models/Agent.spec.js
@@ -1,7 +1,25 @@
+const originalEnv = {
+  CREDS_KEY: process.env.CREDS_KEY,
+  CREDS_IV: process.env.CREDS_IV,
+};
+
+process.env.CREDS_KEY = '0123456789abcdef0123456789abcdef';
+process.env.CREDS_IV = '0123456789abcdef';
+
 const mongoose = require('mongoose');
 const { v4: uuidv4 } = require('uuid');
 const { MongoMemoryServer } = require('mongodb-memory-server');
-const { Agent, addAgentResourceFile, removeAgentResourceFiles } = require('./Agent');
+const {
+  Agent,
+  addAgentResourceFile,
+  removeAgentResourceFiles,
+  createAgent,
+  updateAgent,
+  getAgent,
+  deleteAgent,
+  getListAgents,
+  updateAgentProjects,
+} = require('./Agent');
 
 describe('Agent Resource File Operations', () => {
   let mongoServer;
@@ -15,6 +33,8 @@ describe('Agent Resource File Operations', () => {
   afterAll(async () => {
     await mongoose.disconnect();
     await mongoServer.stop();
+    process.env.CREDS_KEY = originalEnv.CREDS_KEY;
+    process.env.CREDS_IV = originalEnv.CREDS_IV;
   });
 
   beforeEach(async () => {
@@ -332,3 +352,537 @@ describe('Agent Resource File Operations', () => {
     expect(finalFileIds).toHaveLength(0);
   });
 });
+
+describe('Agent CRUD Operations', () => {
+  let mongoServer;
+
+  beforeAll(async () => {
+    mongoServer = await MongoMemoryServer.create();
+    const mongoUri = mongoServer.getUri();
+    await mongoose.connect(mongoUri);
+  });
+
+  afterAll(async () => {
+    await mongoose.disconnect();
+    await mongoServer.stop();
+  });
+
+  beforeEach(async () => {
+    await Agent.deleteMany({});
+  });
+
+  test('should create and get an agent', async () => {
+    const agentId = `agent_${uuidv4()}`;
+    const authorId = new mongoose.Types.ObjectId();
+
+    const newAgent = await createAgent({
+      id: agentId,
+      name: 'Test Agent',
+      provider: 'test',
+      model: 'test-model',
+      author: authorId,
+      description: 'Test description',
+    });
+
+    expect(newAgent).toBeDefined();
+    expect(newAgent.id).toBe(agentId);
+    expect(newAgent.name).toBe('Test Agent');
+
+    const retrievedAgent = await getAgent({ id: agentId });
+    expect(retrievedAgent).toBeDefined();
+    expect(retrievedAgent.id).toBe(agentId);
+    expect(retrievedAgent.name).toBe('Test Agent');
+    expect(retrievedAgent.description).toBe('Test description');
+  });
+
+  test('should delete an agent', async () => {
+    const agentId = `agent_${uuidv4()}`;
+    const authorId = new mongoose.Types.ObjectId();
+
+    await createAgent({
+      id: agentId,
+      name: 'Agent To Delete',
+      provider: 'test',
+      model: 'test-model',
+      author: authorId,
+    });
+
+    const agentBeforeDelete = await getAgent({ id: agentId });
+    expect(agentBeforeDelete).toBeDefined();
+
+    await deleteAgent({ id: agentId });
+
+    const agentAfterDelete = await getAgent({ id: agentId });
+    expect(agentAfterDelete).toBeNull();
+  });
+
+  test('should list agents by author', async () => {
+    const authorId = new mongoose.Types.ObjectId();
+    const otherAuthorId = new mongoose.Types.ObjectId();
+
+    const agentIds = [];
+    for (let i = 0; i < 5; i++) {
+      const id = `agent_${uuidv4()}`;
+      agentIds.push(id);
+      await createAgent({
+        id,
+        name: `Agent ${i}`,
+        provider: 'test',
+        model: 'test-model',
+        author: authorId,
+      });
+    }
+
+    for (let i = 0; i < 3; i++) {
+      await createAgent({
+        id: `other_agent_${uuidv4()}`,
+        name: `Other Agent ${i}`,
+        provider: 'test',
+        model: 'test-model',
+        author: otherAuthorId,
+      });
+    }
+
+    const result = await getListAgents({ author: authorId.toString() });
+
+    expect(result).toBeDefined();
+    expect(result.data).toBeDefined();
+    expect(result.data).toHaveLength(5);
+    expect(result.has_more).toBe(true);
+
+    for (const agent of result.data) {
+      expect(agent.author).toBe(authorId.toString());
+    }
+  });
+
+  test('should update agent projects', async () => {
+    const agentId = `agent_${uuidv4()}`;
+    const authorId = new mongoose.Types.ObjectId();
+    const projectId1 = new mongoose.Types.ObjectId();
+    const projectId2 = new mongoose.Types.ObjectId();
+    const projectId3 = new mongoose.Types.ObjectId();
+
+    await createAgent({
+      id: agentId,
+      name: 'Project Test Agent',
+      provider: 'test',
+      model: 'test-model',
+      author: authorId,
+      projectIds: [projectId1],
+    });
+
+    await updateAgent(
+      { id: agentId },
+      { $addToSet: { projectIds: { $each: [projectId2, projectId3] } } },
+    );
+
+    await updateAgent({ id: agentId }, { $pull: { projectIds: projectId1 } });
+
+    await updateAgent({ id: agentId }, { projectIds: [projectId2, projectId3] });
+
+    const updatedAgent = await getAgent({ id: agentId });
+    expect(updatedAgent.projectIds).toHaveLength(2);
+    expect(updatedAgent.projectIds.map((id) => id.toString())).toContain(projectId2.toString());
+    expect(updatedAgent.projectIds.map((id) => id.toString())).toContain(projectId3.toString());
+    expect(updatedAgent.projectIds.map((id) => id.toString())).not.toContain(projectId1.toString());
+
+    await updateAgent({ id: agentId }, { projectIds: [] });
+
+    const emptyProjectsAgent = await getAgent({ id: agentId });
+    expect(emptyProjectsAgent.projectIds).toHaveLength(0);
+
+    const nonExistentId = `agent_${uuidv4()}`;
+    await expect(
+      updateAgentProjects({
+        id: nonExistentId,
+        projectIds: [projectId1],
+      }),
+    ).rejects.toThrow();
+  });
+
+  test('should handle ephemeral agent loading', async () => {
+    const agentId = 'ephemeral_test';
+    const endpoint = 'openai';
+
+    const originalModule = jest.requireActual('librechat-data-provider');
+
+    const mockDataProvider = {
+      ...originalModule,
+      Constants: {
+        ...originalModule.Constants,
+        EPHEMERAL_AGENT_ID: 'ephemeral_test',
+      },
+    };
+
+    jest.doMock('librechat-data-provider', () => mockDataProvider);
+
+    const mockReq = {
+      user: { id: 'user123' },
+      body: {
+        promptPrefix: 'This is a test instruction',
+        ephemeralAgent: {
+          execute_code: true,
+          mcp: ['server1', 'server2'],
+        },
+      },
+      app: {
+        locals: {
+          availableTools: {
+            tool__server1: {},
+            tool__server2: {},
+            another_tool: {},
+          },
+        },
+      },
+    };
+
+    const params = {
+      req: mockReq,
+      agent_id: agentId,
+      endpoint,
+      model_parameters: {
+        model: 'gpt-4',
+        temperature: 0.7,
+      },
+    };
+
+    expect(agentId).toBeDefined();
+    expect(endpoint).toBeDefined();
+
+    jest.dontMock('librechat-data-provider');
+  });
+
+  test('should handle loadAgent functionality and errors', async () => {
+    const agentId = `agent_${uuidv4()}`;
+    const authorId = new mongoose.Types.ObjectId();
+
+    await createAgent({
+      id: agentId,
+      name: 'Test Load Agent',
+      provider: 'test',
+      model: 'test-model',
+      author: authorId,
+      tools: ['tool1', 'tool2'],
+    });
+
+    const agent = await getAgent({ id: agentId });
+
+    expect(agent).toBeDefined();
+    expect(agent.id).toBe(agentId);
+    expect(agent.name).toBe('Test Load Agent');
+    expect(agent.tools).toEqual(expect.arrayContaining(['tool1', 'tool2']));
+
+    const mockLoadAgent = jest.fn().mockResolvedValue(agent);
+    const loadedAgent = await mockLoadAgent();
+    expect(loadedAgent).toBeDefined();
+    expect(loadedAgent.id).toBe(agentId);
+
+    const nonExistentId = `agent_${uuidv4()}`;
+    const nonExistentAgent = await getAgent({ id: nonExistentId });
+    expect(nonExistentAgent).toBeNull();
+
+    const mockLoadAgentError = jest.fn().mockRejectedValue(new Error('No agent found with ID'));
+    await expect(mockLoadAgentError()).rejects.toThrow('No agent found with ID');
+  });
+});
+
+describe('Agent Version History', () => {
+  let mongoServer;
+
+  beforeAll(async () => {
+    mongoServer = await MongoMemoryServer.create();
+    const mongoUri = mongoServer.getUri();
+    await mongoose.connect(mongoUri);
+  });
+
+  afterAll(async () => {
+    await mongoose.disconnect();
+    await mongoServer.stop();
+  });
+
+  beforeEach(async () => {
+    await Agent.deleteMany({});
+  });
+
+  test('should create an agent with a single entry in versions array', async () => {
+    const agentId = `agent_${uuidv4()}`;
+    const agent = await createAgent({
+      id: agentId,
+      name: 'Test Agent',
+      provider: 'test',
+      model: 'test-model',
+      author: new mongoose.Types.ObjectId(),
+    });
+
+    expect(agent.versions).toBeDefined();
+    expect(Array.isArray(agent.versions)).toBe(true);
+    expect(agent.versions).toHaveLength(1);
+    expect(agent.versions[0].name).toBe('Test Agent');
+    expect(agent.versions[0].provider).toBe('test');
+    expect(agent.versions[0].model).toBe('test-model');
+  });
+
+  test('should accumulate version history across multiple updates', async () => {
+    const agentId = `agent_${uuidv4()}`;
+    const author = new mongoose.Types.ObjectId();
+    await createAgent({
+      id: agentId,
+      name: 'First Name',
+      provider: 'test',
+      model: 'test-model',
+      author,
+      description: 'First description',
+    });
+
+    await updateAgent({ id: agentId }, { name: 'Second Name', description: 'Second description' });
+    await updateAgent({ id: agentId }, { name: 'Third Name', model: 'new-model' });
+    const finalAgent = await updateAgent({ id: agentId }, { description: 'Final description' });
+
+    expect(finalAgent.versions).toBeDefined();
+    expect(Array.isArray(finalAgent.versions)).toBe(true);
+    expect(finalAgent.versions).toHaveLength(4);
+
+    expect(finalAgent.versions[0].name).toBe('First Name');
+    expect(finalAgent.versions[0].description).toBe('First description');
+    expect(finalAgent.versions[0].model).toBe('test-model');
+
+    expect(finalAgent.versions[1].name).toBe('Second Name');
+    expect(finalAgent.versions[1].description).toBe('Second description');
+    expect(finalAgent.versions[1].model).toBe('test-model');
+
+    expect(finalAgent.versions[2].name).toBe('Third Name');
+    expect(finalAgent.versions[2].description).toBe('Second description');
+    expect(finalAgent.versions[2].model).toBe('new-model');
+
+    expect(finalAgent.versions[3].name).toBe('Third Name');
+    expect(finalAgent.versions[3].description).toBe('Final description');
+    expect(finalAgent.versions[3].model).toBe('new-model');
+
+    expect(finalAgent.name).toBe('Third Name');
+    expect(finalAgent.description).toBe('Final description');
+    expect(finalAgent.model).toBe('new-model');
+  });
+
+  test('should not include metadata fields in version history', async () => {
+    const agentId = `agent_${uuidv4()}`;
+    await createAgent({
+      id: agentId,
+      name: 'Test Agent',
+      provider: 'test',
+      model: 'test-model',
+      author: new mongoose.Types.ObjectId(),
+    });
+
+    const updatedAgent = await updateAgent({ id: agentId }, { description: 'New description' });
+
+    expect(updatedAgent.versions).toHaveLength(2);
+    expect(updatedAgent.versions[0]._id).toBeUndefined();
+    expect(updatedAgent.versions[0].__v).toBeUndefined();
+    expect(updatedAgent.versions[0].name).toBe('Test Agent');
+    expect(updatedAgent.versions[0].author).toBeDefined();
+
+    expect(updatedAgent.versions[1]._id).toBeUndefined();
+    expect(updatedAgent.versions[1].__v).toBeUndefined();
+  });
+
+  test('should not recursively include previous versions', async () => {
+    const agentId = `agent_${uuidv4()}`;
+    await createAgent({
+      id: agentId,
+      name: 'Test Agent',
+      provider: 'test',
+      model: 'test-model',
+      author: new mongoose.Types.ObjectId(),
+    });
+
+    await updateAgent({ id: agentId }, { name: 'Updated Name 1' });
+    await updateAgent({ id: agentId }, { name: 'Updated Name 2' });
+    const finalAgent = await updateAgent({ id: agentId }, { name: 'Updated Name 3' });
+
+    expect(finalAgent.versions).toHaveLength(4);
+
+    finalAgent.versions.forEach((version) => {
+      expect(version.versions).toBeUndefined();
+    });
+  });
+
+  test('should handle MongoDB operators and field updates correctly', async () => {
+    const agentId = `agent_${uuidv4()}`;
+    const authorId = new mongoose.Types.ObjectId();
+    const projectId = new mongoose.Types.ObjectId();
+
+    await createAgent({
+      id: agentId,
+      name: 'MongoDB Operator Test',
+      provider: 'test',
+      model: 'test-model',
+      author: authorId,
+      tools: ['tool1'],
+    });
+
+    await updateAgent(
+      { id: agentId },
+      {
+        description: 'Updated description',
+        $push: { tools: 'tool2' },
+        $addToSet: { projectIds: projectId },
+      },
+    );
+
+    const firstUpdate = await getAgent({ id: agentId });
+    expect(firstUpdate.description).toBe('Updated description');
+    expect(firstUpdate.tools).toContain('tool1');
+    expect(firstUpdate.tools).toContain('tool2');
+    expect(firstUpdate.projectIds.map((id) => id.toString())).toContain(projectId.toString());
+    expect(firstUpdate.versions).toHaveLength(2);
+
+    await updateAgent(
+      { id: agentId },
+      {
+        tools: ['tool2', 'tool3'],
+      },
+    );
+
+    const secondUpdate = await getAgent({ id: agentId });
+    expect(secondUpdate.tools).toHaveLength(2);
+    expect(secondUpdate.tools).toContain('tool2');
+    expect(secondUpdate.tools).toContain('tool3');
+    expect(secondUpdate.tools).not.toContain('tool1');
+    expect(secondUpdate.versions).toHaveLength(3);
+
+    await updateAgent(
+      { id: agentId },
+      {
+        $push: { tools: 'tool3' },
+      },
+    );
+
+    const thirdUpdate = await getAgent({ id: agentId });
+    const toolCount = thirdUpdate.tools.filter((t) => t === 'tool3').length;
+    expect(toolCount).toBe(2);
+    expect(thirdUpdate.versions).toHaveLength(4);
+  });
+
+  test('should handle parameter objects correctly', async () => {
+    const agentId = `agent_${uuidv4()}`;
+    const authorId = new mongoose.Types.ObjectId();
+
+    await createAgent({
+      id: agentId,
+      name: 'Parameters Test',
+      provider: 'test',
+      model: 'test-model',
+      author: authorId,
+      model_parameters: { temperature: 0.7 },
+    });
+
+    const updatedAgent = await updateAgent(
+      { id: agentId },
+      { model_parameters: { temperature: 0.8 } },
+    );
+
+    expect(updatedAgent.versions).toHaveLength(2);
+    expect(updatedAgent.model_parameters.temperature).toBe(0.8);
+
+    await updateAgent(
+      { id: agentId },
+      {
+        model_parameters: {
+          temperature: 0.8,
+          max_tokens: 1000,
+        },
+      },
+    );
+
+    const complexAgent = await getAgent({ id: agentId });
+    expect(complexAgent.versions).toHaveLength(3);
+    expect(complexAgent.model_parameters.temperature).toBe(0.8);
+    expect(complexAgent.model_parameters.max_tokens).toBe(1000);
+
+    await updateAgent({ id: agentId }, { model_parameters: {} });
+
+    const emptyParamsAgent = await getAgent({ id: agentId });
+    expect(emptyParamsAgent.versions).toHaveLength(4);
+    expect(emptyParamsAgent.model_parameters).toEqual({});
+  });
+
+  test('should detect duplicate versions and reject updates', async () => {
+    const originalConsoleError = console.error;
+    console.error = jest.fn();
+
+    try {
+      const agentId = `agent_${uuidv4()}`;
+      const authorId = new mongoose.Types.ObjectId();
+      const projectId1 = new mongoose.Types.ObjectId();
+      const projectId2 = new mongoose.Types.ObjectId();
+
+      const testCases = [
+        {
+          name: 'simple field update',
+          initial: {
+            name: 'Test Agent',
+            description: 'Initial description',
+          },
+          update: { name: 'Updated Name' },
+          duplicate: { name: 'Updated Name' },
+        },
+        {
+          name: 'object field update',
+          initial: {
+            model_parameters: { temperature: 0.7 },
+          },
+          update: { model_parameters: { temperature: 0.8 } },
+          duplicate: { model_parameters: { temperature: 0.8 } },
+        },
+        {
+          name: 'array field update',
+          initial: {
+            tools: ['tool1', 'tool2'],
+          },
+          update: { tools: ['tool2', 'tool3'] },
+          duplicate: { tools: ['tool2', 'tool3'] },
+        },
+        {
+          name: 'projectIds update',
+          initial: {
+            projectIds: [projectId1],
+          },
+          update: { projectIds: [projectId1, projectId2] },
+          duplicate: { projectIds: [projectId2, projectId1] },
+        },
+      ];
+
+      for (const testCase of testCases) {
+        const testAgentId = `agent_${uuidv4()}`;
+
+        await createAgent({
+          id: testAgentId,
+          provider: 'test',
+          model: 'test-model',
+          author: authorId,
+          ...testCase.initial,
+        });
+
+        await updateAgent({ id: testAgentId }, testCase.update);
+
+        let error;
+        try {
+          await updateAgent({ id: testAgentId }, testCase.duplicate);
+        } catch (e) {
+          error = e;
+        }
+
+        expect(error).toBeDefined();
+        expect(error.message).toContain('Duplicate version');
+        expect(error.statusCode).toBe(409);
+        expect(error.details).toBeDefined();
+        expect(error.details.duplicateVersion).toBeDefined();
+
+        const agent = await getAgent({ id: testAgentId });
+        expect(agent.versions).toHaveLength(2);
+      }
+    } finally {
+      console.error = originalConsoleError;
+    }
+  });
+});
diff --git a/api/server/controllers/agents/v1.js b/api/server/controllers/agents/v1.js
index e0f27a13fc..64f8db3c16 100644
--- a/api/server/controllers/agents/v1.js
+++ b/api/server/controllers/agents/v1.js
@@ -23,6 +23,7 @@ const { updateAction, getActions } = require('~/models/Action');
 const { updateAgentProjects } = require('~/models/Agent');
 const { getProjectByName } = require('~/models/Project');
 const { deleteFileByFilter } = require('~/models/File');
+const { revertAgentVersion } = require('~/models/Agent');
 const { logger } = require('~/config');
 
 const systemTools = {
@@ -104,6 +105,8 @@ const getAgentHandler = async (req, res) => {
       return res.status(404).json({ error: 'Agent not found' });
     }
 
+    agent.version = agent.versions ? agent.versions.length : 0;
+
     if (agent.avatar && agent.avatar?.source === FileSources.s3) {
       const originalUrl = agent.avatar.filepath;
       agent.avatar.filepath = await refreshS3Url(agent.avatar);
@@ -127,6 +130,7 @@ const getAgentHandler = async (req, res) => {
         author: agent.author,
         projectIds: agent.projectIds,
         isCollaborative: agent.isCollaborative,
+        version: agent.version,
       });
     }
     return res.status(200).json(agent);
@@ -187,6 +191,14 @@ const updateAgentHandler = async (req, res) => {
     return res.json(updatedAgent);
   } catch (error) {
     logger.error('[/Agents/:id] Error updating Agent', error);
+
+    if (error.statusCode === 409) {
+      return res.status(409).json({
+        error: error.message,
+        details: error.details,
+      });
+    }
+
     res.status(500).json({ error: error.message });
   }
 };
@@ -411,6 +423,66 @@ const uploadAgentAvatarHandler = async (req, res) => {
   }
 };
 
+/**
+ * Reverts an agent to a previous version from its version history.
+ * @route PATCH /agents/:id/revert
+ * @param {object} req - Express Request object
+ * @param {object} req.params - Request parameters
+ * @param {string} req.params.id - The ID of the agent to revert
+ * @param {object} req.body - Request body
+ * @param {number} req.body.version_index - The index of the version to revert to
+ * @param {object} req.user - Authenticated user information
+ * @param {string} req.user.id - User ID
+ * @param {string} req.user.role - User role
+ * @param {ServerResponse} res - Express Response object
+ * @returns {Promise<Agent>} 200 - The updated agent after reverting to the specified version
+ * @throws {Error} 400 - If version_index is missing
+ * @throws {Error} 403 - If user doesn't have permission to modify the agent
+ * @throws {Error} 404 - If agent not found
+ * @throws {Error} 500 - If there's an internal server error during the reversion process
+ */
+const revertAgentVersionHandler = async (req, res) => {
+  try {
+    const { id } = req.params;
+    const { version_index } = req.body;
+
+    if (version_index === undefined) {
+      return res.status(400).json({ error: 'version_index is required' });
+    }
+
+    const isAdmin = req.user.role === SystemRoles.ADMIN;
+    const existingAgent = await getAgent({ id });
+
+    if (!existingAgent) {
+      return res.status(404).json({ error: 'Agent not found' });
+    }
+
+    const isAuthor = existingAgent.author.toString() === req.user.id;
+    const hasEditPermission = existingAgent.isCollaborative || isAdmin || isAuthor;
+
+    if (!hasEditPermission) {
+      return res.status(403).json({
+        error: 'You do not have permission to modify this non-collaborative agent',
+      });
+    }
+
+    const updatedAgent = await revertAgentVersion({ id }, version_index);
+
+    if (updatedAgent.author) {
+      updatedAgent.author = updatedAgent.author.toString();
+    }
+
+    if (updatedAgent.author !== req.user.id) {
+      delete updatedAgent.author;
+    }
+
+    return res.json(updatedAgent);
+  } catch (error) {
+    logger.error('[/agents/:id/revert] Error reverting Agent version', error);
+    res.status(500).json({ error: error.message });
+  }
+};
+
 module.exports = {
   createAgent: createAgentHandler,
   getAgent: getAgentHandler,
@@ -419,4 +491,5 @@ module.exports = {
   deleteAgent: deleteAgentHandler,
   getListAgents: getListAgentsHandler,
   uploadAgentAvatar: uploadAgentAvatarHandler,
+  revertAgentVersion: revertAgentVersionHandler,
 };
diff --git a/api/server/routes/agents/v1.js b/api/server/routes/agents/v1.js
index f79cec2cdc..657aa79414 100644
--- a/api/server/routes/agents/v1.js
+++ b/api/server/routes/agents/v1.js
@@ -78,6 +78,15 @@ router.post('/:id/duplicate', checkAgentCreate, v1.duplicateAgent);
  */
 router.delete('/:id', checkAgentCreate, v1.deleteAgent);
 
+/**
+ * Reverts an agent to a previous version.
+ * @route POST /agents/:id/revert
+ * @param {string} req.params.id - Agent identifier.
+ * @param {number} req.body.version_index - Index of the version to revert to.
+ * @returns {Agent} 200 - success response - application/json
+ */
+router.post('/:id/revert', checkGlobalAgentShare, v1.revertAgentVersion);
+
 /**
  * Returns a list of agents.
  * @route GET /agents
diff --git a/client/src/common/types.ts b/client/src/common/types.ts
index ab52bfb007..6837869e8e 100644
--- a/client/src/common/types.ts
+++ b/client/src/common/types.ts
@@ -142,6 +142,7 @@ export enum Panel {
   builder = 'builder',
   actions = 'actions',
   model = 'model',
+  version = 'version',
 }
 
 export type FileSetter =
diff --git a/client/src/components/SidePanel/Agents/AgentFooter.tsx b/client/src/components/SidePanel/Agents/AgentFooter.tsx
index ce99e1189f..2b3aa1bcd7 100644
--- a/client/src/components/SidePanel/Agents/AgentFooter.tsx
+++ b/client/src/components/SidePanel/Agents/AgentFooter.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useWatch, useFormContext } from 'react-hook-form';
 import { SystemRoles, Permissions, PermissionTypes } from 'librechat-data-provider';
 import type { AgentForm, AgentPanelProps } from '~/common';
@@ -11,6 +10,7 @@ import DeleteButton from './DeleteButton';
 import { Spinner } from '~/components';
 import ShareAgent from './ShareAgent';
 import { Panel } from '~/common';
+import VersionButton from './Version/VersionButton';
 
 export default function AgentFooter({
   activePanel,
@@ -55,6 +55,7 @@ export default function AgentFooter({
   return (
     <div className="mb-1 flex w-full flex-col gap-2">
       {showButtons && <AdvancedButton setActivePanel={setActivePanel} />}
+      {showButtons && agent_id && <VersionButton setActivePanel={setActivePanel} />}
       {user?.role === SystemRoles.ADMIN && showButtons && <AdminSettings />}
       {/* Context Button */}
       <div className="flex items-center justify-end gap-2">
diff --git a/client/src/components/SidePanel/Agents/AgentPanel.tsx b/client/src/components/SidePanel/Agents/AgentPanel.tsx
index 1cddf15180..d891786142 100644
--- a/client/src/components/SidePanel/Agents/AgentPanel.tsx
+++ b/client/src/components/SidePanel/Agents/AgentPanel.tsx
@@ -87,7 +87,42 @@ export default function AgentPanel({
       });
     },
     onError: (err) => {
-      const error = err as Error;
+      const error = err as Error & {
+        statusCode?: number;
+        details?: { duplicateVersion?: any; versionIndex?: number };
+        response?: { status?: number; data?: any };
+      };
+
+      const isDuplicateVersionError =
+        (error.statusCode === 409 && error.details?.duplicateVersion) ||
+        (error.response?.status === 409 && error.response?.data?.details?.duplicateVersion);
+
+      if (isDuplicateVersionError) {
+        let versionIndex: number | undefined = undefined;
+
+        if (error.details?.versionIndex !== undefined) {
+          versionIndex = error.details.versionIndex;
+        } else if (error.response?.data?.details?.versionIndex !== undefined) {
+          versionIndex = error.response.data.details.versionIndex;
+        }
+
+        if (versionIndex === undefined || versionIndex < 0) {
+          showToast({
+            message: localize('com_agents_update_error'),
+            status: 'error',
+            duration: 5000,
+          });
+        } else {
+          showToast({
+            message: localize('com_ui_agent_version_duplicate', { versionIndex: versionIndex + 1 }),
+            status: 'error',
+            duration: 10000,
+          });
+        }
+
+        return;
+      }
+
       showToast({
         message: `${localize('com_agents_update_error')}${
           error.message ? ` ${localize('com_ui_error')}: ${error.message}` : ''
diff --git a/client/src/components/SidePanel/Agents/AgentPanelSwitch.tsx b/client/src/components/SidePanel/Agents/AgentPanelSwitch.tsx
index ae2566dc56..4dc54c9b60 100644
--- a/client/src/components/SidePanel/Agents/AgentPanelSwitch.tsx
+++ b/client/src/components/SidePanel/Agents/AgentPanelSwitch.tsx
@@ -1,11 +1,12 @@
 import { useState, useEffect, useMemo } from 'react';
-import { EModelEndpoint } from 'librechat-data-provider';
+import { EModelEndpoint, AgentCapabilities } from 'librechat-data-provider';
 import type { ActionsEndpoint } from '~/common';
-import type { Action, TConfig, TEndpointsConfig } from 'librechat-data-provider';
-import { useGetActionsQuery, useGetEndpointsQuery } from '~/data-provider';
+import type { Action, TConfig, TEndpointsConfig, TAgentsEndpoint } from 'librechat-data-provider';
+import { useGetActionsQuery, useGetEndpointsQuery, useCreateAgentMutation } from '~/data-provider';
 import { useChatContext } from '~/Providers';
 import ActionsPanel from './ActionsPanel';
 import AgentPanel from './AgentPanel';
+import VersionPanel from './Version/VersionPanel';
 import { Panel } from '~/common';
 
 export default function AgentPanelSwitch() {
@@ -15,11 +16,19 @@ export default function AgentPanelSwitch() {
   const [currentAgentId, setCurrentAgentId] = useState<string | undefined>(conversation?.agent_id);
   const { data: actions = [] } = useGetActionsQuery(conversation?.endpoint as ActionsEndpoint);
   const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
+  const createMutation = useCreateAgentMutation();
 
-  const agentsConfig = useMemo(
-    () => endpointsConfig?.[EModelEndpoint.agents] ?? ({} as TConfig | null),
-    [endpointsConfig],
-  );
+  const agentsConfig = useMemo<TAgentsEndpoint | null>(() => {
+    const config = endpointsConfig?.[EModelEndpoint.agents] ?? null;
+    if (!config) return null;
+
+    return {
+      ...(config as TConfig),
+      capabilities: Array.isArray(config.capabilities)
+        ? config.capabilities.map((cap) => cap as unknown as AgentCapabilities)
+        : ([] as AgentCapabilities[]),
+    } as TAgentsEndpoint;
+  }, [endpointsConfig]);
 
   useEffect(() => {
     const agent_id = conversation?.agent_id ?? '';
@@ -41,12 +50,23 @@ export default function AgentPanelSwitch() {
     setActivePanel,
     setCurrentAgentId,
     agent_id: currentAgentId,
+    createMutation,
   };
 
   if (activePanel === Panel.actions) {
     return <ActionsPanel {...commonProps} />;
   }
 
+  if (activePanel === Panel.version) {
+    return (
+      <VersionPanel
+        setActivePanel={setActivePanel}
+        agentsConfig={agentsConfig}
+        selectedAgentId={currentAgentId}
+      />
+    );
+  }
+
   return (
     <AgentPanel {...commonProps} agentsConfig={agentsConfig} endpointsConfig={endpointsConfig} />
   );
diff --git a/client/src/components/SidePanel/Agents/Version/VersionButton.tsx b/client/src/components/SidePanel/Agents/Version/VersionButton.tsx
new file mode 100644
index 0000000000..5708bd392f
--- /dev/null
+++ b/client/src/components/SidePanel/Agents/Version/VersionButton.tsx
@@ -0,0 +1,26 @@
+import { History } from 'lucide-react';
+import { Panel } from '~/common';
+import { Button } from '~/components/ui';
+import { useLocalize } from '~/hooks';
+
+interface VersionButtonProps {
+  setActivePanel: (panel: Panel) => void;
+}
+
+const VersionButton = ({ setActivePanel }: VersionButtonProps) => {
+  const localize = useLocalize();
+
+  return (
+    <Button
+      size={'sm'}
+      variant={'outline'}
+      className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
+      onClick={() => setActivePanel(Panel.version)}
+    >
+      <History className="h-4 w-4 cursor-pointer" aria-hidden="true" />
+      {localize('com_ui_agent_version')}
+    </Button>
+  );
+};
+
+export default VersionButton;
diff --git a/client/src/components/SidePanel/Agents/Version/VersionContent.tsx b/client/src/components/SidePanel/Agents/Version/VersionContent.tsx
new file mode 100644
index 0000000000..25b8f5bd5b
--- /dev/null
+++ b/client/src/components/SidePanel/Agents/Version/VersionContent.tsx
@@ -0,0 +1,68 @@
+import { Spinner } from '~/components/svg';
+import { useLocalize } from '~/hooks';
+import VersionItem from './VersionItem';
+import { VersionContext } from './VersionPanel';
+
+type VersionContentProps = {
+  selectedAgentId: string;
+  isLoading: boolean;
+  error: unknown;
+  versionContext: VersionContext;
+  onRestore: (index: number) => void;
+};
+
+export default function VersionContent({
+  selectedAgentId,
+  isLoading,
+  error,
+  versionContext,
+  onRestore,
+}: VersionContentProps) {
+  const { versions, versionIds } = versionContext;
+  const localize = useLocalize();
+
+  if (!selectedAgentId) {
+    return (
+      <div className="py-8 text-center text-text-secondary">
+        {localize('com_ui_agent_version_no_agent')}
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Spinner className="h-6 w-6" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="py-8 text-center text-red-500">{localize('com_ui_agent_version_error')}</div>
+    );
+  }
+
+  if (versionIds.length > 0) {
+    return (
+      <div className="flex flex-col gap-2">
+        {versionIds.map(({ id, version, isActive }) => (
+          <VersionItem
+            key={id}
+            version={version}
+            index={id}
+            isActive={isActive}
+            versionsLength={versions.length}
+            onRestore={onRestore}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="py-8 text-center text-text-secondary">
+      {localize('com_ui_agent_version_empty')}
+    </div>
+  );
+}
diff --git a/client/src/components/SidePanel/Agents/Version/VersionItem.tsx b/client/src/components/SidePanel/Agents/Version/VersionItem.tsx
new file mode 100644
index 0000000000..c1d27cadaf
--- /dev/null
+++ b/client/src/components/SidePanel/Agents/Version/VersionItem.tsx
@@ -0,0 +1,67 @@
+import { useLocalize } from '~/hooks';
+import { VersionRecord } from './VersionPanel';
+
+type VersionItemProps = {
+  version: VersionRecord;
+  index: number;
+  isActive: boolean;
+  versionsLength: number;
+  onRestore: (index: number) => void;
+};
+
+export default function VersionItem({
+  version,
+  index,
+  isActive,
+  versionsLength,
+  onRestore,
+}: VersionItemProps) {
+  const localize = useLocalize();
+
+  const getVersionTimestamp = (version: VersionRecord): string => {
+    const timestamp = version.updatedAt || version.createdAt;
+
+    if (timestamp) {
+      try {
+        const date = new Date(timestamp);
+        if (isNaN(date.getTime()) || date.toString() === 'Invalid Date') {
+          return localize('com_ui_agent_version_unknown_date');
+        }
+        return date.toLocaleString();
+      } catch (error) {
+        return localize('com_ui_agent_version_unknown_date');
+      }
+    }
+
+    return localize('com_ui_agent_version_no_date');
+  };
+
+  return (
+    <div className="rounded-md border border-border-light p-3">
+      <div className="flex items-center justify-between font-medium">
+        <span>
+          {localize('com_ui_agent_version_title', { versionNumber: versionsLength - index })}
+        </span>
+        {isActive && (
+          <span className="rounded-full border border-green-600 bg-green-600/20 px-2 py-0.5 text-xs font-medium text-green-700 dark:border-green-500 dark:bg-green-500/30 dark:text-green-300">
+            {localize('com_ui_agent_version_active')}
+          </span>
+        )}
+      </div>
+      <div className="text-sm text-text-secondary">{getVersionTimestamp(version)}</div>
+      {!isActive && (
+        <button
+          className="mt-2 text-sm text-blue-500 hover:text-blue-600"
+          onClick={() => {
+            if (window.confirm(localize('com_ui_agent_version_restore_confirm'))) {
+              onRestore(index);
+            }
+          }}
+          aria-label={localize('com_ui_agent_version_restore')}
+        >
+          {localize('com_ui_agent_version_restore')}
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/client/src/components/SidePanel/Agents/Version/VersionPanel.tsx b/client/src/components/SidePanel/Agents/Version/VersionPanel.tsx
new file mode 100644
index 0000000000..9d76aba75a
--- /dev/null
+++ b/client/src/components/SidePanel/Agents/Version/VersionPanel.tsx
@@ -0,0 +1,189 @@
+import type { Agent, TAgentsEndpoint } from 'librechat-data-provider';
+import { ChevronLeft } from 'lucide-react';
+import { useCallback, useMemo } from 'react';
+import type { AgentPanelProps } from '~/common';
+import { Panel } from '~/common';
+import { useGetAgentByIdQuery, useRevertAgentVersionMutation } from '~/data-provider';
+import { useLocalize, useToast } from '~/hooks';
+import VersionContent from './VersionContent';
+import { isActiveVersion } from './isActiveVersion';
+
+export type VersionRecord = Record<string, any>;
+
+export type AgentState = {
+  name: string | null;
+  description: string | null;
+  instructions: string | null;
+  artifacts?: string | null;
+  capabilities?: string[];
+  tools?: string[];
+} | null;
+
+export type VersionWithId = {
+  id: number;
+  originalIndex: number;
+  version: VersionRecord;
+  isActive: boolean;
+};
+
+export type VersionContext = {
+  versions: VersionRecord[];
+  versionIds: VersionWithId[];
+  currentAgent: AgentState;
+  selectedAgentId: string;
+  activeVersion: VersionRecord | null;
+};
+
+export interface AgentWithVersions extends Agent {
+  capabilities?: string[];
+  versions?: Array<VersionRecord>;
+}
+
+export type VersionPanelProps = {
+  agentsConfig: TAgentsEndpoint | null;
+  setActivePanel: AgentPanelProps['setActivePanel'];
+  selectedAgentId?: string;
+};
+
+export default function VersionPanel({ setActivePanel, selectedAgentId = '' }: VersionPanelProps) {
+  const localize = useLocalize();
+  const { showToast } = useToast();
+  const {
+    data: agent,
+    isLoading,
+    error,
+    refetch,
+  } = useGetAgentByIdQuery(selectedAgentId, {
+    enabled: !!selectedAgentId && selectedAgentId !== '',
+  });
+
+  const revertAgentVersion = useRevertAgentVersionMutation({
+    onSuccess: () => {
+      showToast({
+        message: localize('com_ui_agent_version_restore_success'),
+        status: 'success',
+      });
+      refetch();
+    },
+    onError: () => {
+      showToast({
+        message: localize('com_ui_agent_version_restore_error'),
+        status: 'error',
+      });
+    },
+  });
+
+  const agentWithVersions = agent as AgentWithVersions;
+
+  const currentAgent = useMemo(() => {
+    if (!agentWithVersions) return null;
+    return {
+      name: agentWithVersions.name,
+      description: agentWithVersions.description,
+      instructions: agentWithVersions.instructions,
+      artifacts: agentWithVersions.artifacts,
+      capabilities: agentWithVersions.capabilities,
+      tools: agentWithVersions.tools,
+    };
+  }, [agentWithVersions]);
+
+  const versions = useMemo(() => {
+    const versionsCopy = [...(agentWithVersions?.versions || [])];
+    return versionsCopy.sort((a, b) => {
+      const aTime = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
+      const bTime = b.updatedAt ? new Date(b.updatedAt).getTime() : 0;
+      return bTime - aTime;
+    });
+  }, [agentWithVersions?.versions]);
+
+  const activeVersion = useMemo(() => {
+    return versions.length > 0
+      ? versions.find((v) => isActiveVersion(v, currentAgent, versions)) || null
+      : null;
+  }, [versions, currentAgent]);
+
+  const versionIds = useMemo(() => {
+    if (versions.length === 0) return [];
+
+    const matchingVersions = versions.filter((v) => isActiveVersion(v, currentAgent, versions));
+
+    const activeVersionId =
+      matchingVersions.length > 0 ? versions.findIndex((v) => v === matchingVersions[0]) : -1;
+
+    return versions.map((version, displayIndex) => {
+      const originalIndex =
+        agentWithVersions?.versions?.findIndex(
+          (v) =>
+            v.updatedAt === version.updatedAt &&
+            v.createdAt === version.createdAt &&
+            v.name === version.name,
+        ) ?? displayIndex;
+
+      return {
+        id: displayIndex,
+        originalIndex,
+        version,
+        isActive: displayIndex === activeVersionId,
+      };
+    });
+  }, [versions, currentAgent, agentWithVersions?.versions]);
+
+  const versionContext: VersionContext = useMemo(
+    () => ({
+      versions,
+      versionIds,
+      currentAgent,
+      selectedAgentId,
+      activeVersion,
+    }),
+    [versions, versionIds, currentAgent, selectedAgentId, activeVersion],
+  );
+
+  const handleRestore = useCallback(
+    (displayIndex: number) => {
+      const versionWithId = versionIds.find((v) => v.id === displayIndex);
+
+      if (versionWithId) {
+        const originalIndex = versionWithId.originalIndex;
+
+        revertAgentVersion.mutate({
+          agent_id: selectedAgentId,
+          version_index: originalIndex,
+        });
+      }
+    },
+    [revertAgentVersion, selectedAgentId, versionIds],
+  );
+
+  return (
+    <div className="scrollbar-gutter-stable h-full min-h-[40vh] overflow-auto pb-12 text-sm">
+      <div className="version-panel relative flex flex-col items-center px-16 py-4 text-center">
+        <div className="absolute left-0 top-4">
+          <button
+            type="button"
+            className="btn btn-neutral relative"
+            onClick={() => {
+              setActivePanel(Panel.builder);
+            }}
+          >
+            <div className="version-panel-content flex w-full items-center justify-center gap-2">
+              <ChevronLeft />
+            </div>
+          </button>
+        </div>
+        <div className="mb-2 mt-2 text-xl font-medium">
+          {localize('com_ui_agent_version_history')}
+        </div>
+      </div>
+      <div className="flex flex-col gap-4 px-2">
+        <VersionContent
+          selectedAgentId={selectedAgentId}
+          isLoading={isLoading}
+          error={error}
+          versionContext={versionContext}
+          onRestore={handleRestore}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/components/SidePanel/Agents/Version/__tests__/VersionContent.spec.tsx b/client/src/components/SidePanel/Agents/Version/__tests__/VersionContent.spec.tsx
new file mode 100644
index 0000000000..36cbf9eff5
--- /dev/null
+++ b/client/src/components/SidePanel/Agents/Version/__tests__/VersionContent.spec.tsx
@@ -0,0 +1,142 @@
+import '@testing-library/jest-dom/extend-expect';
+import { render, fireEvent } from '@testing-library/react';
+import VersionContent from '../VersionContent';
+import { VersionContext } from '../VersionPanel';
+
+const mockRestore = 'Restore';
+
+jest.mock('../VersionItem', () => ({
+  __esModule: true,
+  default: jest.fn(({ version, isActive, onRestore, index }) => (
+    <div data-testid="version-item">
+      <div>{version.name}</div>
+      {!isActive && (
+        <button data-testid={`restore-button-${index}`} onClick={() => onRestore(index)}>
+          {mockRestore}
+        </button>
+      )}
+    </div>
+  )),
+}));
+
+jest.mock('~/hooks', () => ({
+  useLocalize: jest.fn().mockImplementation(() => (key) => {
+    const translations = {
+      com_ui_agent_version_no_agent: 'No agent selected',
+      com_ui_agent_version_error: 'Error loading versions',
+      com_ui_agent_version_empty: 'No versions available',
+      com_ui_agent_version_restore_confirm: 'Are you sure you want to restore this version?',
+      com_ui_agent_version_restore: 'Restore',
+    };
+    return translations[key] || key;
+  }),
+}));
+
+jest.mock('~/components/svg', () => ({
+  Spinner: () => <div data-testid="spinner" />,
+}));
+
+const mockVersionItem = jest.requireMock('../VersionItem').default;
+
+describe('VersionContent', () => {
+  const mockVersionIds = [
+    { id: 0, version: { name: 'First' }, isActive: true, originalIndex: 2 },
+    { id: 1, version: { name: 'Second' }, isActive: false, originalIndex: 1 },
+    { id: 2, version: { name: 'Third' }, isActive: false, originalIndex: 0 },
+  ];
+
+  const mockContext: VersionContext = {
+    versions: [{ name: 'First' }, { name: 'Second' }, { name: 'Third' }],
+    versionIds: mockVersionIds,
+    currentAgent: { name: 'Test Agent', description: null, instructions: null },
+    selectedAgentId: 'agent-123',
+    activeVersion: { name: 'First' },
+  };
+
+  const defaultProps = {
+    selectedAgentId: 'agent-123',
+    isLoading: false,
+    error: null,
+    versionContext: mockContext,
+    onRestore: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    window.confirm = jest.fn(() => true);
+  });
+
+  test('renders different UI states correctly', () => {
+    const renderTest = (props) => {
+      const result = render(<VersionContent {...defaultProps} {...props} />);
+      return result;
+    };
+
+    const { getByTestId, unmount: unmount1 } = renderTest({ isLoading: true });
+    expect(getByTestId('spinner')).toBeInTheDocument();
+    unmount1();
+
+    const { getByText: getText1, unmount: unmount2 } = renderTest({
+      error: new Error('Test error'),
+    });
+    expect(getText1('Error loading versions')).toBeInTheDocument();
+    unmount2();
+
+    const { getByText: getText2, unmount: unmount3 } = renderTest({ selectedAgentId: '' });
+    expect(getText2('No agent selected')).toBeInTheDocument();
+    unmount3();
+
+    const emptyContext = { ...mockContext, versions: [], versionIds: [] };
+    const { getByText: getText3, unmount: unmount4 } = renderTest({ versionContext: emptyContext });
+    expect(getText3('No versions available')).toBeInTheDocument();
+    unmount4();
+
+    mockVersionItem.mockClear();
+
+    const { getAllByTestId } = renderTest({});
+    expect(getAllByTestId('version-item')).toHaveLength(3);
+    expect(mockVersionItem).toHaveBeenCalledTimes(3);
+  });
+
+  test('restore functionality works correctly', () => {
+    const onRestoreMock = jest.fn();
+    const { getByTestId, queryByTestId } = render(
+      <VersionContent {...defaultProps} onRestore={onRestoreMock} />,
+    );
+
+    fireEvent.click(getByTestId('restore-button-1'));
+    expect(onRestoreMock).toHaveBeenCalledWith(1);
+
+    expect(queryByTestId('restore-button-0')).not.toBeInTheDocument();
+    expect(queryByTestId('restore-button-1')).toBeInTheDocument();
+    expect(queryByTestId('restore-button-2')).toBeInTheDocument();
+  });
+
+  test('handles edge cases in data', () => {
+    const { getAllByTestId, getByText, queryByTestId, queryByText, rerender } = render(
+      <VersionContent {...defaultProps} versionContext={{ ...mockContext, versions: [] }} />,
+    );
+    expect(getAllByTestId('version-item')).toHaveLength(mockVersionIds.length);
+
+    rerender(
+      <VersionContent {...defaultProps} versionContext={{ ...mockContext, versionIds: [] }} />,
+    );
+    expect(getByText('No versions available')).toBeInTheDocument();
+
+    rerender(
+      <VersionContent
+        {...defaultProps}
+        selectedAgentId=""
+        isLoading={true}
+        error={new Error('Test')}
+      />,
+    );
+    expect(getByText('No agent selected')).toBeInTheDocument();
+    expect(queryByTestId('spinner')).not.toBeInTheDocument();
+    expect(queryByText('Error loading versions')).not.toBeInTheDocument();
+
+    rerender(<VersionContent {...defaultProps} isLoading={true} error={new Error('Test')} />);
+    expect(queryByTestId('spinner')).toBeInTheDocument();
+    expect(queryByText('Error loading versions')).not.toBeInTheDocument();
+  });
+});
diff --git a/client/src/components/SidePanel/Agents/Version/__tests__/VersionItem.spec.tsx b/client/src/components/SidePanel/Agents/Version/__tests__/VersionItem.spec.tsx
new file mode 100644
index 0000000000..053bf0f224
--- /dev/null
+++ b/client/src/components/SidePanel/Agents/Version/__tests__/VersionItem.spec.tsx
@@ -0,0 +1,124 @@
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render, screen } from '@testing-library/react';
+import VersionItem from '../VersionItem';
+import { VersionRecord } from '../VersionPanel';
+
+jest.mock('~/hooks', () => ({
+  useLocalize: jest.fn().mockImplementation(() => (key, params) => {
+    const translations = {
+      com_ui_agent_version_title: params?.versionNumber
+        ? `Version ${params.versionNumber}`
+        : 'Version',
+      com_ui_agent_version_active: 'Active Version',
+      com_ui_agent_version_restore: 'Restore',
+      com_ui_agent_version_restore_confirm: 'Are you sure you want to restore this version?',
+      com_ui_agent_version_unknown_date: 'Unknown date',
+      com_ui_agent_version_no_date: 'No date',
+    };
+    return translations[key] || key;
+  }),
+}));
+
+describe('VersionItem', () => {
+  const mockVersion: VersionRecord = {
+    name: 'Test Agent',
+    description: 'Test Description',
+    instructions: 'Test Instructions',
+    updatedAt: '2023-01-01T00:00:00Z',
+  };
+
+  const defaultProps = {
+    version: mockVersion,
+    index: 1,
+    isActive: false,
+    versionsLength: 3,
+    onRestore: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    window.confirm = jest.fn().mockImplementation(() => true);
+  });
+
+  test('renders version number and timestamp', () => {
+    render(<VersionItem {...defaultProps} />);
+    expect(screen.getByText('Version 2')).toBeInTheDocument();
+    const date = new Date('2023-01-01T00:00:00Z').toLocaleString();
+    expect(screen.getByText(date)).toBeInTheDocument();
+  });
+
+  test('active version badge and no restore button when active', () => {
+    render(<VersionItem {...defaultProps} isActive={true} />);
+    expect(screen.getByText('Active Version')).toBeInTheDocument();
+    expect(screen.queryByText('Restore')).not.toBeInTheDocument();
+  });
+
+  test('restore button and no active badge when not active', () => {
+    render(<VersionItem {...defaultProps} isActive={false} />);
+    expect(screen.queryByText('Active Version')).not.toBeInTheDocument();
+    expect(screen.getByText('Restore')).toBeInTheDocument();
+  });
+
+  test('restore confirmation flow - confirmed', () => {
+    render(<VersionItem {...defaultProps} />);
+    fireEvent.click(screen.getByText('Restore'));
+    expect(window.confirm).toHaveBeenCalledWith('Are you sure you want to restore this version?');
+    expect(defaultProps.onRestore).toHaveBeenCalledWith(1);
+  });
+
+  test('restore confirmation flow - canceled', () => {
+    window.confirm = jest.fn().mockImplementation(() => false);
+    render(<VersionItem {...defaultProps} />);
+    fireEvent.click(screen.getByText('Restore'));
+    expect(window.confirm).toHaveBeenCalled();
+    expect(defaultProps.onRestore).not.toHaveBeenCalled();
+  });
+
+  test('handles invalid timestamp', () => {
+    render(
+      <VersionItem {...defaultProps} version={{ ...mockVersion, updatedAt: 'invalid-date' }} />,
+    );
+    expect(screen.getByText('Unknown date')).toBeInTheDocument();
+  });
+
+  test('handles missing timestamps', () => {
+    render(
+      <VersionItem
+        {...defaultProps}
+        version={{ ...mockVersion, updatedAt: undefined, createdAt: undefined }}
+      />,
+    );
+    expect(screen.getByText('No date')).toBeInTheDocument();
+  });
+
+  test('prefers updatedAt over createdAt when both exist', () => {
+    const versionWithBothDates = {
+      ...mockVersion,
+      updatedAt: '2023-01-02T00:00:00Z',
+      createdAt: '2023-01-01T00:00:00Z',
+    };
+    render(<VersionItem {...defaultProps} version={versionWithBothDates} />);
+    const updatedDate = new Date('2023-01-02T00:00:00Z').toLocaleString();
+    expect(screen.getByText(updatedDate)).toBeInTheDocument();
+  });
+
+  test('falls back to createdAt when updatedAt is missing', () => {
+    render(
+      <VersionItem
+        {...defaultProps}
+        version={{
+          ...mockVersion,
+          updatedAt: undefined,
+          createdAt: '2023-01-01T00:00:00Z',
+        }}
+      />,
+    );
+    const createdDate = new Date('2023-01-01T00:00:00Z').toLocaleString();
+    expect(screen.getByText(createdDate)).toBeInTheDocument();
+  });
+
+  test('handles empty version object', () => {
+    render(<VersionItem {...defaultProps} version={{}} />);
+    expect(screen.getByText('No date')).toBeInTheDocument();
+  });
+});
diff --git a/client/src/components/SidePanel/Agents/Version/__tests__/VersionPanel.spec.tsx b/client/src/components/SidePanel/Agents/Version/__tests__/VersionPanel.spec.tsx
new file mode 100644
index 0000000000..d9cf31eff3
--- /dev/null
+++ b/client/src/components/SidePanel/Agents/Version/__tests__/VersionPanel.spec.tsx
@@ -0,0 +1,194 @@
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Panel } from '~/common/types';
+import VersionContent from '../VersionContent';
+import VersionPanel from '../VersionPanel';
+
+const mockAgentData = {
+  name: 'Test Agent',
+  description: 'Test Description',
+  instructions: 'Test Instructions',
+  tools: ['tool1', 'tool2'],
+  capabilities: ['capability1', 'capability2'],
+  versions: [
+    {
+      name: 'Version 1',
+      description: 'Description 1',
+      instructions: 'Instructions 1',
+      tools: ['tool1'],
+      capabilities: ['capability1'],
+      createdAt: '2023-01-01T00:00:00Z',
+      updatedAt: '2023-01-01T00:00:00Z',
+    },
+    {
+      name: 'Version 2',
+      description: 'Description 2',
+      instructions: 'Instructions 2',
+      tools: ['tool1', 'tool2'],
+      capabilities: ['capability1', 'capability2'],
+      createdAt: '2023-01-02T00:00:00Z',
+      updatedAt: '2023-01-02T00:00:00Z',
+    },
+  ],
+};
+
+jest.mock('~/data-provider', () => ({
+  useGetAgentByIdQuery: jest.fn(() => ({
+    data: mockAgentData,
+    isLoading: false,
+    error: null,
+    refetch: jest.fn(),
+  })),
+  useRevertAgentVersionMutation: jest.fn(() => ({
+    mutate: jest.fn(),
+    isLoading: false,
+  })),
+}));
+
+jest.mock('../VersionContent', () => ({
+  __esModule: true,
+  default: jest.fn(() => <div data-testid="version-content" />),
+}));
+
+jest.mock('~/hooks', () => ({
+  useLocalize: jest.fn().mockImplementation(() => (key) => key),
+  useToast: jest.fn(() => ({ showToast: jest.fn() })),
+}));
+
+describe('VersionPanel', () => {
+  const mockSetActivePanel = jest.fn();
+  const defaultProps = {
+    agentsConfig: null,
+    setActivePanel: mockSetActivePanel,
+    selectedAgentId: 'agent-123',
+  };
+  const mockUseGetAgentByIdQuery = jest.requireMock('~/data-provider').useGetAgentByIdQuery;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseGetAgentByIdQuery.mockReturnValue({
+      data: mockAgentData,
+      isLoading: false,
+      error: null,
+      refetch: jest.fn(),
+    });
+  });
+
+  test('renders panel UI and handles navigation', () => {
+    render(<VersionPanel {...defaultProps} />);
+    expect(screen.getByText('com_ui_agent_version_history')).toBeInTheDocument();
+    expect(screen.getByTestId('version-content')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button'));
+    expect(mockSetActivePanel).toHaveBeenCalledWith(Panel.builder);
+  });
+
+  test('VersionContent receives correct props', () => {
+    render(<VersionPanel {...defaultProps} />);
+    expect(VersionContent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        selectedAgentId: 'agent-123',
+        isLoading: false,
+        error: null,
+        versionContext: expect.objectContaining({
+          currentAgent: expect.any(Object),
+          versions: expect.any(Array),
+          versionIds: expect.any(Array),
+        }),
+      }),
+      expect.anything(),
+    );
+  });
+
+  test('handles data state variations', () => {
+    render(<VersionPanel {...defaultProps} selectedAgentId="" />);
+    expect(VersionContent).toHaveBeenCalledWith(
+      expect.objectContaining({ selectedAgentId: '' }),
+      expect.anything(),
+    );
+
+    mockUseGetAgentByIdQuery.mockReturnValueOnce({
+      data: null,
+      isLoading: false,
+      error: null,
+      refetch: jest.fn(),
+    });
+    render(<VersionPanel {...defaultProps} />);
+    expect(VersionContent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        versionContext: expect.objectContaining({
+          versions: [],
+          versionIds: [],
+          currentAgent: null,
+        }),
+      }),
+      expect.anything(),
+    );
+
+    mockUseGetAgentByIdQuery.mockReturnValueOnce({
+      data: { ...mockAgentData, versions: undefined },
+      isLoading: false,
+      error: null,
+      refetch: jest.fn(),
+    });
+    render(<VersionPanel {...defaultProps} />);
+    expect(VersionContent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        versionContext: expect.objectContaining({ versions: [] }),
+      }),
+      expect.anything(),
+    );
+
+    mockUseGetAgentByIdQuery.mockReturnValueOnce({
+      data: null,
+      isLoading: true,
+      error: null,
+      refetch: jest.fn(),
+    });
+    render(<VersionPanel {...defaultProps} />);
+    expect(VersionContent).toHaveBeenCalledWith(
+      expect.objectContaining({ isLoading: true }),
+      expect.anything(),
+    );
+
+    const testError = new Error('Test error');
+    mockUseGetAgentByIdQuery.mockReturnValueOnce({
+      data: null,
+      isLoading: false,
+      error: testError,
+      refetch: jest.fn(),
+    });
+    render(<VersionPanel {...defaultProps} />);
+    expect(VersionContent).toHaveBeenCalledWith(
+      expect.objectContaining({ error: testError }),
+      expect.anything(),
+    );
+  });
+
+  test('memoizes agent data correctly', () => {
+    mockUseGetAgentByIdQuery.mockReturnValueOnce({
+      data: mockAgentData,
+      isLoading: false,
+      error: null,
+      refetch: jest.fn(),
+    });
+
+    render(<VersionPanel {...defaultProps} />);
+    expect(VersionContent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        versionContext: expect.objectContaining({
+          currentAgent: expect.objectContaining({
+            name: 'Test Agent',
+            description: 'Test Description',
+            instructions: 'Test Instructions',
+          }),
+          versions: expect.arrayContaining([
+            expect.objectContaining({ name: 'Version 2' }),
+            expect.objectContaining({ name: 'Version 1' }),
+          ]),
+        }),
+      }),
+      expect.anything(),
+    );
+  });
+});
diff --git a/client/src/components/SidePanel/Agents/Version/__tests__/isActiveVersion.spec.ts b/client/src/components/SidePanel/Agents/Version/__tests__/isActiveVersion.spec.ts
new file mode 100644
index 0000000000..d6ef786d9c
--- /dev/null
+++ b/client/src/components/SidePanel/Agents/Version/__tests__/isActiveVersion.spec.ts
@@ -0,0 +1,238 @@
+import { isActiveVersion } from '../isActiveVersion';
+import type { AgentState, VersionRecord } from '../VersionPanel';
+
+describe('isActiveVersion', () => {
+  const createVersion = (overrides = {}): VersionRecord => ({
+    name: 'Test Agent',
+    description: 'Test Description',
+    instructions: 'Test Instructions',
+    artifacts: 'default',
+    tools: ['tool1', 'tool2'],
+    capabilities: ['capability1', 'capability2'],
+    ...overrides,
+  });
+
+  const createAgentState = (overrides = {}): AgentState => ({
+    name: 'Test Agent',
+    description: 'Test Description',
+    instructions: 'Test Instructions',
+    artifacts: 'default',
+    tools: ['tool1', 'tool2'],
+    capabilities: ['capability1', 'capability2'],
+    ...overrides,
+  });
+
+  test('returns true for the first version in versions array when currentAgent is null', () => {
+    const versions = [
+      createVersion({ name: 'First Version' }),
+      createVersion({ name: 'Second Version' }),
+    ];
+
+    expect(isActiveVersion(versions[0], null, versions)).toBe(true);
+    expect(isActiveVersion(versions[1], null, versions)).toBe(false);
+  });
+
+  test('returns true when all fields match exactly', () => {
+    const version = createVersion();
+    const currentAgent = createAgentState();
+    const versions = [version];
+
+    expect(isActiveVersion(version, currentAgent, versions)).toBe(true);
+  });
+
+  test('returns false when names do not match', () => {
+    const version = createVersion();
+    const currentAgent = createAgentState({ name: 'Different Name' });
+    const versions = [version];
+
+    expect(isActiveVersion(version, currentAgent, versions)).toBe(false);
+  });
+
+  test('returns false when descriptions do not match', () => {
+    const version = createVersion();
+    const currentAgent = createAgentState({ description: 'Different Description' });
+    const versions = [version];
+
+    expect(isActiveVersion(version, currentAgent, versions)).toBe(false);
+  });
+
+  test('returns false when instructions do not match', () => {
+    const version = createVersion();
+    const currentAgent = createAgentState({ instructions: 'Different Instructions' });
+    const versions = [version];
+
+    expect(isActiveVersion(version, currentAgent, versions)).toBe(false);
+  });
+
+  test('returns false when artifacts do not match', () => {
+    const version = createVersion();
+    const currentAgent = createAgentState({ artifacts: 'different_artifacts' });
+    const versions = [version];
+
+    expect(isActiveVersion(version, currentAgent, versions)).toBe(false);
+  });
+
+  test('matches tools regardless of order', () => {
+    const version = createVersion({ tools: ['tool1', 'tool2'] });
+    const currentAgent = createAgentState({ tools: ['tool2', 'tool1'] });
+    const versions = [version];
+
+    expect(isActiveVersion(version, currentAgent, versions)).toBe(true);
+  });
+
+  test('returns false when tools arrays have different lengths', () => {
+    const version = createVersion({ tools: ['tool1', 'tool2'] });
+    const currentAgent = createAgentState({ tools: ['tool1', 'tool2', 'tool3'] });
+    const versions = [version];
+
+    expect(isActiveVersion(version, currentAgent, versions)).toBe(false);
+  });
+
+  test('returns false when tools do not match', () => {
+    const version = createVersion({ tools: ['tool1', 'tool2'] });
+    const currentAgent = createAgentState({ tools: ['tool1', 'different'] });
+    const versions = [version];
+
+    expect(isActiveVersion(version, currentAgent, versions)).toBe(false);
+  });
+
+  test('matches capabilities regardless of order', () => {
+    const version = createVersion({ capabilities: ['capability1', 'capability2'] });
+    const currentAgent = createAgentState({ capabilities: ['capability2', 'capability1'] });
+    const versions = [version];
+
+    expect(isActiveVersion(version, currentAgent, versions)).toBe(true);
+  });
+
+  test('returns false when capabilities arrays have different lengths', () => {
+    const version = createVersion({ capabilities: ['capability1', 'capability2'] });
+    const currentAgent = createAgentState({
+      capabilities: ['capability1', 'capability2', 'capability3'],
+    });
+    const versions = [version];
+
+    expect(isActiveVersion(version, currentAgent, versions)).toBe(false);
+  });
+
+  test('returns false when capabilities do not match', () => {
+    const version = createVersion({ capabilities: ['capability1', 'capability2'] });
+    const currentAgent = createAgentState({ capabilities: ['capability1', 'different'] });
+    const versions = [version];
+
+    expect(isActiveVersion(version, currentAgent, versions)).toBe(false);
+  });
+
+  describe('edge cases', () => {
+    test('handles missing tools arrays', () => {
+      const version = createVersion({ tools: undefined });
+      const currentAgent = createAgentState({ tools: undefined });
+      const versions = [version];
+
+      expect(isActiveVersion(version, currentAgent, versions)).toBe(true);
+    });
+
+    test('handles when version has tools but agent does not', () => {
+      const version = createVersion({ tools: ['tool1', 'tool2'] });
+      const currentAgent = createAgentState({ tools: undefined });
+      const versions = [version];
+
+      expect(isActiveVersion(version, currentAgent, versions)).toBe(false);
+    });
+
+    test('handles when agent has tools but version does not', () => {
+      const version = createVersion({ tools: undefined });
+      const currentAgent = createAgentState({ tools: ['tool1', 'tool2'] });
+      const versions = [version];
+
+      expect(isActiveVersion(version, currentAgent, versions)).toBe(false);
+    });
+
+    test('handles missing capabilities arrays', () => {
+      const version = createVersion({ capabilities: undefined });
+      const currentAgent = createAgentState({ capabilities: undefined });
+      const versions = [version];
+
+      expect(isActiveVersion(version, currentAgent, versions)).toBe(true);
+    });
+
+    test('handles when version has capabilities but agent does not', () => {
+      const version = createVersion({ capabilities: ['capability1', 'capability2'] });
+      const currentAgent = createAgentState({ capabilities: undefined });
+      const versions = [version];
+
+      expect(isActiveVersion(version, currentAgent, versions)).toBe(false);
+    });
+
+    test('handles when agent has capabilities but version does not', () => {
+      const version = createVersion({ capabilities: undefined });
+      const currentAgent = createAgentState({ capabilities: ['capability1', 'capability2'] });
+      const versions = [version];
+
+      expect(isActiveVersion(version, currentAgent, versions)).toBe(false);
+    });
+
+    test('handles null values in fields', () => {
+      const version = createVersion({ name: null });
+      const currentAgent = createAgentState({ name: null });
+      const versions = [version];
+
+      expect(isActiveVersion(version, currentAgent, versions)).toBe(true);
+    });
+
+    test('handles empty versions array', () => {
+      const version = createVersion();
+      const currentAgent = createAgentState();
+      const versions = [];
+
+      expect(isActiveVersion(version, currentAgent, versions)).toBe(false);
+    });
+
+    test('handles empty arrays for tools', () => {
+      const version = createVersion({ tools: [] });
+      const currentAgent = createAgentState({ tools: [] });
+      const versions = [version];
+
+      expect(isActiveVersion(version, currentAgent, versions)).toBe(true);
+    });
+
+    test('handles empty arrays for capabilities', () => {
+      const version = createVersion({ capabilities: [] });
+      const currentAgent = createAgentState({ capabilities: [] });
+      const versions = [version];
+
+      expect(isActiveVersion(version, currentAgent, versions)).toBe(true);
+    });
+
+    test('handles missing artifacts field', () => {
+      const version = createVersion({ artifacts: undefined });
+      const currentAgent = createAgentState({ artifacts: undefined });
+      const versions = [version];
+
+      expect(isActiveVersion(version, currentAgent, versions)).toBe(true);
+    });
+
+    test('handles when version has artifacts but agent does not', () => {
+      const version = createVersion();
+      const currentAgent = createAgentState({ artifacts: undefined });
+      const versions = [version];
+
+      expect(isActiveVersion(version, currentAgent, versions)).toBe(false);
+    });
+
+    test('handles when agent has artifacts but version does not', () => {
+      const version = createVersion({ artifacts: undefined });
+      const currentAgent = createAgentState();
+      const versions = [version];
+
+      expect(isActiveVersion(version, currentAgent, versions)).toBe(false);
+    });
+
+    test('handles empty string for artifacts', () => {
+      const version = createVersion({ artifacts: '' });
+      const currentAgent = createAgentState({ artifacts: '' });
+      const versions = [version];
+
+      expect(isActiveVersion(version, currentAgent, versions)).toBe(true);
+    });
+  });
+});
diff --git a/client/src/components/SidePanel/Agents/Version/isActiveVersion.ts b/client/src/components/SidePanel/Agents/Version/isActiveVersion.ts
new file mode 100644
index 0000000000..61919953dd
--- /dev/null
+++ b/client/src/components/SidePanel/Agents/Version/isActiveVersion.ts
@@ -0,0 +1,59 @@
+import { AgentState, VersionRecord } from './VersionPanel';
+
+export const isActiveVersion = (
+  version: VersionRecord,
+  currentAgent: AgentState,
+  versions: VersionRecord[],
+): boolean => {
+  if (!versions || versions.length === 0) {
+    return false;
+  }
+
+  if (!currentAgent) {
+    const versionIndex = versions.findIndex(
+      (v) =>
+        v.name === version.name &&
+        v.instructions === version.instructions &&
+        v.artifacts === version.artifacts,
+    );
+    return versionIndex === 0;
+  }
+
+  const matchesName = version.name === currentAgent.name;
+  const matchesDescription = version.description === currentAgent.description;
+  const matchesInstructions = version.instructions === currentAgent.instructions;
+  const matchesArtifacts = version.artifacts === currentAgent.artifacts;
+
+  const toolsMatch = () => {
+    if (!version.tools && !currentAgent.tools) return true;
+    if (!version.tools || !currentAgent.tools) return false;
+    if (version.tools.length !== currentAgent.tools.length) return false;
+
+    const sortedVersionTools = [...version.tools].sort();
+    const sortedCurrentTools = [...currentAgent.tools].sort();
+
+    return sortedVersionTools.every((tool, i) => tool === sortedCurrentTools[i]);
+  };
+
+  const capabilitiesMatch = () => {
+    if (!version.capabilities && !currentAgent.capabilities) return true;
+    if (!version.capabilities || !currentAgent.capabilities) return false;
+    if (version.capabilities.length !== currentAgent.capabilities.length) return false;
+
+    const sortedVersionCapabilities = [...version.capabilities].sort();
+    const sortedCurrentCapabilities = [...currentAgent.capabilities].sort();
+
+    return sortedVersionCapabilities.every(
+      (capability, i) => capability === sortedCurrentCapabilities[i],
+    );
+  };
+
+  return (
+    matchesName &&
+    matchesDescription &&
+    matchesInstructions &&
+    matchesArtifacts &&
+    toolsMatch() &&
+    capabilitiesMatch()
+  );
+};
diff --git a/client/src/components/SidePanel/Agents/__tests__/AgentFooter.spec.tsx b/client/src/components/SidePanel/Agents/__tests__/AgentFooter.spec.tsx
new file mode 100644
index 0000000000..9a73f94a57
--- /dev/null
+++ b/client/src/components/SidePanel/Agents/__tests__/AgentFooter.spec.tsx
@@ -0,0 +1,271 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import AgentFooter from '../AgentFooter';
+import { Panel } from '~/common';
+import type { Agent, AgentCreateParams, TUser } from 'librechat-data-provider';
+import { SystemRoles } from 'librechat-data-provider';
+import * as reactHookForm from 'react-hook-form';
+import * as hooks from '~/hooks';
+import type { UseMutationResult } from '@tanstack/react-query';
+
+jest.mock('react-hook-form', () => ({
+  useFormContext: () => ({
+    control: {},
+  }),
+  useWatch: () => {
+    return {
+      agent: {
+        name: 'Test Agent',
+        author: 'user-123',
+        projectIds: ['project-1'],
+        isCollaborative: false,
+      },
+      id: 'agent-123',
+    };
+  },
+}));
+
+const mockUser = {
+  id: 'user-123',
+  username: 'testuser',
+  email: 'test@example.com',
+  name: 'Test User',
+  avatar: '',
+  role: 'USER',
+  provider: 'local',
+  emailVerified: true,
+  createdAt: '2023-01-01T00:00:00.000Z',
+  updatedAt: '2023-01-01T00:00:00.000Z',
+} as TUser;
+
+jest.mock('~/hooks', () => ({
+  useLocalize: () => (key) => {
+    const translations = {
+      com_ui_save: 'Save',
+      com_ui_create: 'Create',
+    };
+    return translations[key] || key;
+  },
+  useAuthContext: () => ({
+    user: mockUser,
+    token: 'mock-token',
+    isAuthenticated: true,
+    error: undefined,
+    login: jest.fn(),
+    logout: jest.fn(),
+    setError: jest.fn(),
+    roles: {},
+  }),
+  useHasAccess: () => true,
+}));
+
+const createBaseMutation = <T = Agent, P = any>(
+  isLoading = false,
+): UseMutationResult<T, Error, P> => {
+  if (isLoading) {
+    return {
+      mutate: jest.fn(),
+      mutateAsync: jest.fn().mockResolvedValue({} as T),
+      isLoading: true,
+      isError: false,
+      isSuccess: false,
+      isIdle: false as const,
+      status: 'loading' as const,
+      error: null,
+      data: undefined,
+      failureCount: 0,
+      failureReason: null,
+      reset: jest.fn(),
+      context: undefined,
+      variables: undefined,
+      isPaused: false,
+    };
+  } else {
+    return {
+      mutate: jest.fn(),
+      mutateAsync: jest.fn().mockResolvedValue({} as T),
+      isLoading: false,
+      isError: false,
+      isSuccess: false,
+      isIdle: true as const,
+      status: 'idle' as const,
+      error: null,
+      data: undefined,
+      failureCount: 0,
+      failureReason: null,
+      reset: jest.fn(),
+      context: undefined,
+      variables: undefined,
+      isPaused: false,
+    };
+  }
+};
+
+jest.mock('~/data-provider', () => ({
+  useUpdateAgentMutation: () => createBaseMutation<Agent, any>(),
+}));
+
+jest.mock('../Advanced/AdvancedButton', () => ({
+  __esModule: true,
+  default: jest.fn(() => <div data-testid="advanced-button" />),
+}));
+
+jest.mock('../Version/VersionButton', () => ({
+  __esModule: true,
+  default: jest.fn(() => <div data-testid="version-button" />),
+}));
+
+jest.mock('../AdminSettings', () => ({
+  __esModule: true,
+  default: jest.fn(() => <div data-testid="admin-settings" />),
+}));
+
+jest.mock('../DeleteButton', () => ({
+  __esModule: true,
+  default: jest.fn(() => <div data-testid="delete-button" />),
+}));
+
+jest.mock('../ShareAgent', () => ({
+  __esModule: true,
+  default: jest.fn(() => <div data-testid="share-agent" />),
+}));
+
+jest.mock('../DuplicateAgent', () => ({
+  __esModule: true,
+  default: jest.fn(() => <div data-testid="duplicate-agent" />),
+}));
+
+jest.mock('~/components', () => ({
+  Spinner: () => <div data-testid="spinner" />,
+}));
+
+describe('AgentFooter', () => {
+  const mockUsers = {
+    regular: mockUser,
+    admin: {
+      ...mockUser,
+      id: 'admin-123',
+      username: 'admin',
+      email: 'admin@example.com',
+      name: 'Admin User',
+      role: SystemRoles.ADMIN,
+    } as TUser,
+    different: {
+      ...mockUser,
+      id: 'different-user',
+      username: 'different',
+      email: 'different@example.com',
+      name: 'Different User',
+    } as TUser,
+  };
+
+  const createAuthContext = (user: TUser) => ({
+    user,
+    token: 'mock-token',
+    isAuthenticated: true,
+    error: undefined,
+    login: jest.fn(),
+    logout: jest.fn(),
+    setError: jest.fn(),
+    roles: {},
+  });
+
+  const mockSetActivePanel = jest.fn();
+  const mockSetCurrentAgentId = jest.fn();
+  const mockCreateMutation = createBaseMutation<Agent, AgentCreateParams>();
+  const mockUpdateMutation = createBaseMutation<Agent, any>();
+
+  const defaultProps = {
+    activePanel: Panel.builder,
+    createMutation: mockCreateMutation,
+    updateMutation: mockUpdateMutation,
+    setActivePanel: mockSetActivePanel,
+    setCurrentAgentId: mockSetCurrentAgentId,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Main Functionality', () => {
+    test('renders with standard components based on default state', () => {
+      render(<AgentFooter {...defaultProps} />);
+      expect(screen.getByText('Save')).toBeInTheDocument();
+      expect(screen.getByTestId('advanced-button')).toBeInTheDocument();
+      expect(screen.getByTestId('version-button')).toBeInTheDocument();
+      expect(screen.getByTestId('delete-button')).toBeInTheDocument();
+      expect(screen.queryByTestId('admin-settings')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('share-agent')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('duplicate-agent')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('spinner')).not.toBeInTheDocument();
+    });
+
+    test('handles loading states for createMutation', () => {
+      const { unmount } = render(
+        <AgentFooter {...defaultProps} createMutation={createBaseMutation(true)} />,
+      );
+      expect(screen.getByTestId('spinner')).toBeInTheDocument();
+      expect(screen.queryByText('Save')).not.toBeInTheDocument();
+      expect(screen.getByRole('button')).toBeDisabled();
+      expect(screen.getByRole('button')).toHaveAttribute('aria-busy', 'true');
+      unmount();
+    });
+
+    test('handles loading states for updateMutation', () => {
+      render(<AgentFooter {...defaultProps} updateMutation={createBaseMutation(true)} />);
+      expect(screen.getByTestId('spinner')).toBeInTheDocument();
+      expect(screen.queryByText('Save')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Conditional Rendering', () => {
+    test('adjusts UI based on activePanel state', () => {
+      render(<AgentFooter {...defaultProps} activePanel={Panel.advanced} />);
+      expect(screen.queryByTestId('advanced-button')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('version-button')).not.toBeInTheDocument();
+    });
+
+    test('adjusts UI based on agent ID existence', () => {
+      jest.spyOn(reactHookForm, 'useWatch').mockImplementation(() => ({
+        agent: { name: 'Test Agent', author: 'user-123' },
+        id: undefined,
+      }));
+
+      render(<AgentFooter {...defaultProps} />);
+      expect(screen.getByText('Save')).toBeInTheDocument();
+      expect(screen.getByTestId('version-button')).toBeInTheDocument();
+    });
+
+    test('adjusts UI based on user role', () => {
+      jest.spyOn(hooks, 'useAuthContext').mockReturnValue(createAuthContext(mockUsers.admin));
+      render(<AgentFooter {...defaultProps} />);
+      expect(screen.queryByTestId('admin-settings')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('share-agent')).not.toBeInTheDocument();
+
+      jest.clearAllMocks();
+      jest.spyOn(hooks, 'useAuthContext').mockReturnValue(createAuthContext(mockUsers.different));
+      render(<AgentFooter {...defaultProps} />);
+      expect(screen.queryByTestId('share-agent')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('duplicate-agent')).not.toBeInTheDocument();
+    });
+
+    test('adjusts UI based on permissions', () => {
+      jest.spyOn(hooks, 'useHasAccess').mockReturnValue(false);
+      render(<AgentFooter {...defaultProps} />);
+      expect(screen.queryByTestId('share-agent')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    test('handles null agent data', () => {
+      jest.spyOn(reactHookForm, 'useWatch').mockImplementation(() => ({
+        agent: null,
+        id: 'agent-123',
+      }));
+
+      render(<AgentFooter {...defaultProps} />);
+      expect(screen.getByText('Save')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/client/src/data-provider/Agents/mutations.ts b/client/src/data-provider/Agents/mutations.ts
index 04f40cd3dd..24af4ee898 100644
--- a/client/src/data-provider/Agents/mutations.ts
+++ b/client/src/data-provider/Agents/mutations.ts
@@ -43,7 +43,11 @@ export const useCreateAgentMutation = (
  */
 export const useUpdateAgentMutation = (
   options?: t.UpdateAgentMutationOptions,
-): UseMutationResult<t.Agent, Error, { agent_id: string; data: t.AgentUpdateParams }> => {
+): UseMutationResult<
+  t.Agent,
+  t.DuplicateVersionError,
+  { agent_id: string; data: t.AgentUpdateParams }
+> => {
   const queryClient = useQueryClient();
   return useMutation(
     ({ agent_id, data }: { agent_id: string; data: t.AgentUpdateParams }) => {
@@ -54,7 +58,10 @@ export const useUpdateAgentMutation = (
     },
     {
       onMutate: (variables) => options?.onMutate?.(variables),
-      onError: (error, variables, context) => options?.onError?.(error, variables, context),
+      onError: (error, variables, context) => {
+        const typedError = error as t.DuplicateVersionError;
+        return options?.onError?.(typedError, variables, context);
+      },
       onSuccess: (updatedAgent, variables, context) => {
         const listRes = queryClient.getQueryData<t.AgentListResponse>([
           QueryKeys.agents,
@@ -170,7 +177,6 @@ export const useUploadAgentAvatarMutation = (
   unknown // context
 > => {
   return useMutation([MutationKeys.agentAvatarUpload], {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     mutationFn: ({ postCreation, ...variables }: t.AgentAvatarVariables) =>
       dataService.uploadAgentAvatar(variables),
     ...(options || {}),
@@ -300,3 +306,46 @@ export const useDeleteAgentAction = (
     },
   });
 };
+
+/**
+ * Hook for reverting an agent to a previous version
+ */
+export const useRevertAgentVersionMutation = (
+  options?: t.RevertAgentVersionOptions,
+): UseMutationResult<t.Agent, Error, { agent_id: string; version_index: number }> => {
+  const queryClient = useQueryClient();
+  return useMutation(
+    ({ agent_id, version_index }: { agent_id: string; version_index: number }) => {
+      return dataService.revertAgentVersion({
+        agent_id,
+        version_index,
+      });
+    },
+    {
+      onMutate: (variables) => options?.onMutate?.(variables),
+      onError: (error, variables, context) => options?.onError?.(error, variables, context),
+      onSuccess: (revertedAgent, variables, context) => {
+        queryClient.setQueryData<t.Agent>([QueryKeys.agent, variables.agent_id], revertedAgent);
+
+        const listRes = queryClient.getQueryData<t.AgentListResponse>([
+          QueryKeys.agents,
+          defaultOrderQuery,
+        ]);
+
+        if (listRes) {
+          queryClient.setQueryData<t.AgentListResponse>([QueryKeys.agents, defaultOrderQuery], {
+            ...listRes,
+            data: listRes.data.map((agent) => {
+              if (agent.id === variables.agent_id) {
+                return revertedAgent;
+              }
+              return agent;
+            }),
+          });
+        }
+
+        return options?.onSuccess?.(revertedAgent, variables, context);
+      },
+    },
+  );
+};
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 77dab2732e..d010b2d33c 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -483,6 +483,20 @@
   "com_ui_agent_recursion_limit_info": "Limits how many steps the agent can take in a run before giving a final response. Default is 25 steps. A step is either an AI API request or a tool usage round. For example, a basic tool interaction takes 3 steps: initial request, tool usage, and follow-up request.",
   "com_ui_agent_shared_to_all": "something needs to go here. was empty",
   "com_ui_agent_var": "{{0}} agent",
+  "com_ui_agent_version": "Version",
+  "com_ui_agent_version_history": "Version History",
+  "com_ui_agent_version_error": "Error fetching versions",
+  "com_ui_agent_version_empty": "No versions available",
+  "com_ui_agent_version_title": "Version {{versionNumber}}",
+  "com_ui_agent_version_restore": "Restore",
+  "com_ui_agent_version_restore_confirm": "Are you sure you want to restore this version?",
+  "com_ui_agent_version_restore_success": "Version restored successfully",
+  "com_ui_agent_version_restore_error": "Failed to restore version",
+  "com_ui_agent_version_no_agent": "No agent selected. Please select an agent to view version history.",
+  "com_ui_agent_version_unknown_date": "Unknown date",
+  "com_ui_agent_version_no_date": "Date not available",
+  "com_ui_agent_version_active": "Active Version",
+  "com_ui_agent_version_duplicate": "Duplicate version detected. This would create a version identical to Version {{versionIndex}}.",
   "com_ui_agents": "Agents",
   "com_ui_agents_allow_create": "Allow creating Agents",
   "com_ui_agents_allow_share_global": "Allow sharing Agents to all users",
@@ -882,4 +896,4 @@
   "com_ui_zoom": "Zoom",
   "com_user_message": "You",
   "com_warning_resubmit_unsupported": "Resubmitting the AI message is not supported for this endpoint."
-}
\ No newline at end of file
+}
diff --git a/packages/data-provider/src/api-endpoints.ts b/packages/data-provider/src/api-endpoints.ts
index ddca2f6ce4..a7852affe2 100644
--- a/packages/data-provider/src/api-endpoints.ts
+++ b/packages/data-provider/src/api-endpoints.ts
@@ -187,6 +187,8 @@ export const agents = ({ path = '', options }: { path?: string; options?: object
   return url;
 };
 
+export const revertAgentVersion = (agent_id: string) => `${agents({ path: `${agent_id}/revert` })}`;
+
 export const files = () => '/api/files';
 
 export const images = () => `${files()}/images`;
diff --git a/packages/data-provider/src/data-service.ts b/packages/data-provider/src/data-service.ts
index 0d5b88a8e5..737b252215 100644
--- a/packages/data-provider/src/data-service.ts
+++ b/packages/data-provider/src/data-service.ts
@@ -431,6 +431,14 @@ export const listAgents = (params: a.AgentListParams): Promise<a.AgentListRespon
   );
 };
 
+export const revertAgentVersion = ({
+  agent_id,
+  version_index,
+}: {
+  agent_id: string;
+  version_index: number;
+}): Promise<a.Agent> => request.post(endpoints.revertAgentVersion(agent_id), { version_index });
+
 /* Tools */
 
 export const getAvailableAgentTools = (): Promise<s.TPlugin[]> => {
diff --git a/packages/data-provider/src/keys.ts b/packages/data-provider/src/keys.ts
index fd5ee95087..f9e51dc094 100644
--- a/packages/data-provider/src/keys.ts
+++ b/packages/data-provider/src/keys.ts
@@ -65,6 +65,7 @@ export enum MutationKeys {
   updateAgentAction = 'updateAgentAction',
   deleteAction = 'deleteAction',
   deleteAgentAction = 'deleteAgentAction',
+  revertAgentVersion = 'revertAgentVersion',
   deleteUser = 'deleteUser',
   updateRole = 'updateRole',
   enableTwoFactor = 'enableTwoFactor',
diff --git a/packages/data-provider/src/types/assistants.ts b/packages/data-provider/src/types/assistants.ts
index 5685c46724..16f6b7d762 100644
--- a/packages/data-provider/src/types/assistants.ts
+++ b/packages/data-provider/src/types/assistants.ts
@@ -222,6 +222,7 @@ export type Agent = {
   hide_sequential_outputs?: boolean;
   artifacts?: ArtifactModes;
   recursion_limit?: number;
+  version?: number;
 };
 
 export type TAgentsMap = Record<string, Agent | undefined>;
diff --git a/packages/data-provider/src/types/mutations.ts b/packages/data-provider/src/types/mutations.ts
index 72d98b81b6..7e76ba8fd9 100644
--- a/packages/data-provider/src/types/mutations.ts
+++ b/packages/data-provider/src/types/mutations.ts
@@ -129,7 +129,20 @@ export type UpdateAgentVariables = {
   data: AgentUpdateParams;
 };
 
-export type UpdateAgentMutationOptions = MutationOptions<Agent, UpdateAgentVariables>;
+export type DuplicateVersionError = Error & { 
+  statusCode?: number; 
+  details?: { 
+    duplicateVersion?: any; 
+    versionIndex?: number 
+  } 
+};
+
+export type UpdateAgentMutationOptions = MutationOptions<
+  Agent, 
+  UpdateAgentVariables, 
+  unknown, 
+  DuplicateVersionError
+>;
 
 export type DuplicateAgentBody = {
   agent_id: string;
@@ -159,6 +172,13 @@ export type DeleteAgentActionVariables = {
 
 export type DeleteAgentActionOptions = MutationOptions<void, DeleteAgentActionVariables>;
 
+export type RevertAgentVersionVariables = {
+  agent_id: string;
+  version_index: number;
+};
+
+export type RevertAgentVersionOptions = MutationOptions<Agent, RevertAgentVersionVariables>;
+
 export type DeleteConversationOptions = MutationOptions<
   types.TDeleteConversationResponse,
   types.TDeleteConversationRequest
diff --git a/packages/data-schemas/src/schema/agent.ts b/packages/data-schemas/src/schema/agent.ts
index 642d281c68..784c4f6c35 100644
--- a/packages/data-schemas/src/schema/agent.ts
+++ b/packages/data-schemas/src/schema/agent.ts
@@ -26,6 +26,7 @@ export interface IAgent extends Omit<Document, 'model'> {
   conversation_starters?: string[];
   tool_resources?: unknown;
   projectIds?: Types.ObjectId[];
+  versions?: Omit<IAgent, 'versions'>[];
 }
 
 const agentSchema = new Schema<IAgent>(
@@ -115,6 +116,10 @@ const agentSchema = new Schema<IAgent>(
       ref: 'Project',
       index: true,
     },
+    versions: {
+      type: [Schema.Types.Mixed],
+      default: [],
+    },
   },
   {
     timestamps: true,