🪄 feat: Artifacts Badge & Optimize Ephemeral Agent State (#8252)

* 🔧 fix: Update type annotations in useEventHandlers for better type safety

* 🔧 refactor: `useToolToggle` for improved localStorage synchronization and allow string/falsy values for setting to storage

* ✨ feat: Implement Artifacts badge to BadgeRow with toggle options and UI components

- Added Artifacts component to manage artifacts state and options.
- Introduced ArtifactsSubMenu for additional settings related to artifacts.
- Integrated artifacts functionality into BadgeRow and ToolsDropdown components.
- Updated localStorage handling for artifacts state persistence.
- Enhanced localization for artifacts-related strings in translation files.
- Refactored Agent model to include artifacts in the ephemeral agent response.

* fix: set ephemeral agent state for conversation on finalization

* chore: remove beta settings dialog tab

* refactor: improve Ephemeral Agent statefulness

* fix: update setValue parameter to use 'value' instead of 'isChecked' in CheckboxButton

* refactor: update color classes for Artifact toggle and order of dropdown components

* chore: remove unused i18n localization

client/src/Providers/BadgeRowContext.tsx

@@ -1,7 +1,9 @@
-import React, { createContext, useContext } from 'react';
-import { Tools, LocalStorageKeys } from 'librechat-data-provider';
+import React, { createContext, useContext, useEffect, useRef } from 'react';
+import { Tools, LocalStorageKeys, AgentCapabilities, Constants } from 'librechat-data-provider';
 import { useMCPSelect, useToolToggle, useCodeApiKeyForm, useSearchApiKeyForm } from '~/hooks';
 import { useGetStartupConfig } from '~/data-provider';
+import { useSetRecoilState } from 'recoil';
+import { ephemeralAgentByConvoId } from '~/store';
 
 interface BadgeRowContextType {
   conversationId?: string | null;
@@ -9,6 +11,7 @@ interface BadgeRowContextType {
   webSearch: ReturnType<typeof useToolToggle>;
   codeInterpreter: ReturnType<typeof useToolToggle>;
   fileSearch: ReturnType<typeof useToolToggle>;
+  artifacts: ReturnType<typeof useToolToggle>;
   codeApiKeyForm: ReturnType<typeof useCodeApiKeyForm>;
   searchApiKeyForm: ReturnType<typeof useSearchApiKeyForm>;
   startupConfig: ReturnType<typeof useGetStartupConfig>['data'];
@@ -26,10 +29,87 @@ export function useBadgeRowContext() {
 
 interface BadgeRowProviderProps {
   children: React.ReactNode;
+  isSubmitting?: boolean;
   conversationId?: string | null;
 }
 
-export default function BadgeRowProvider({ children, conversationId }: BadgeRowProviderProps) {
+export default function BadgeRowProvider({
+  children,
+  isSubmitting,
+  conversationId,
+}: BadgeRowProviderProps) {
+  const hasInitializedRef = useRef(false);
+  const lastKeyRef = useRef<string>('');
+  const key = conversationId ?? Constants.NEW_CONVO;
+  const setEphemeralAgent = useSetRecoilState(ephemeralAgentByConvoId(key));
+
+  /** Initialize ephemeralAgent from localStorage on mount and when conversation changes */
+  useEffect(() => {
+    if (isSubmitting) {
+      return;
+    }
+    // Check if this is a new conversation or the first load
+    if (!hasInitializedRef.current || lastKeyRef.current !== key) {
+      hasInitializedRef.current = true;
+      lastKeyRef.current = key;
+
+      // Load all localStorage values
+      const codeToggleKey = `${LocalStorageKeys.LAST_CODE_TOGGLE_}${key}`;
+      const webSearchToggleKey = `${LocalStorageKeys.LAST_WEB_SEARCH_TOGGLE_}${key}`;
+      const fileSearchToggleKey = `${LocalStorageKeys.LAST_FILE_SEARCH_TOGGLE_}${key}`;
+      const artifactsToggleKey = `${LocalStorageKeys.LAST_ARTIFACTS_TOGGLE_}${key}`;
+
+      const codeToggleValue = localStorage.getItem(codeToggleKey);
+      const webSearchToggleValue = localStorage.getItem(webSearchToggleKey);
+      const fileSearchToggleValue = localStorage.getItem(fileSearchToggleKey);
+      const artifactsToggleValue = localStorage.getItem(artifactsToggleKey);
+
+      const initialValues: Record<string, any> = {};
+
+      if (codeToggleValue !== null) {
+        try {
+          initialValues[Tools.execute_code] = JSON.parse(codeToggleValue);
+        } catch (e) {
+          console.error('Failed to parse code toggle value:', e);
+        }
+      }
+
+      if (webSearchToggleValue !== null) {
+        try {
+          initialValues[Tools.web_search] = JSON.parse(webSearchToggleValue);
+        } catch (e) {
+          console.error('Failed to parse web search toggle value:', e);
+        }
+      }
+
+      if (fileSearchToggleValue !== null) {
+        try {
+          initialValues[Tools.file_search] = JSON.parse(fileSearchToggleValue);
+        } catch (e) {
+          console.error('Failed to parse file search toggle value:', e);
+        }
+      }
+
+      if (artifactsToggleValue !== null) {
+        try {
+          initialValues[AgentCapabilities.artifacts] = JSON.parse(artifactsToggleValue);
+        } catch (e) {
+          console.error('Failed to parse artifacts toggle value:', e);
+        }
+      }
+
+      // Always set values for all tools (use defaults if not in localStorage)
+      // If ephemeralAgent is null, create a new object with just our tool values
+      setEphemeralAgent((prev) => ({
+        ...(prev || {}),
+        [Tools.execute_code]: initialValues[Tools.execute_code] ?? false,
+        [Tools.web_search]: initialValues[Tools.web_search] ?? false,
+        [Tools.file_search]: initialValues[Tools.file_search] ?? false,
+        [AgentCapabilities.artifacts]: initialValues[AgentCapabilities.artifacts] ?? false,
+      }));
+    }
+  }, [key, isSubmitting, setEphemeralAgent]);
+
   /** Startup config */
   const { data: startupConfig } = useGetStartupConfig();
 
@@ -74,10 +154,19 @@ export default function BadgeRowProvider({ children, conversationId }: BadgeRowP
     isAuthenticated: true,
   });
 
+  /** Artifacts hook - using a custom key since it's not a Tool but a capability */
+  const artifacts = useToolToggle({
+    conversationId,
+    toolKey: AgentCapabilities.artifacts,
+    localStorageKey: LocalStorageKeys.LAST_ARTIFACTS_TOGGLE_,
+    isAuthenticated: true,
+  });
+
   const value: BadgeRowContextType = {
     mcpSelect,
     webSearch,
     fileSearch,
+    artifacts,
     startupConfig,
     conversationId,
     codeApiKeyForm,