🪄 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/store/agents.ts

@@ -23,7 +23,11 @@ export const ephemeralAgentByConvoId = atomFamily<TEphemeralAgent | null, string
 export function useApplyNewAgentTemplate() {
   const applyTemplate = useRecoilCallback(
     ({ snapshot, set }) =>
-      async (targetId: string, _sourceId: string | null = Constants.NEW_CONVO) => {
+      async (
+        targetId: string,
+        _sourceId: string | null = Constants.NEW_CONVO,
+        ephemeralAgentState?: TEphemeralAgent | null,
+      ) => {
         const sourceId = _sourceId || Constants.NEW_CONVO;
         logger.log('agents', `Attempting to apply template from "${sourceId}" to "${targetId}"`);
 
@@ -35,7 +39,8 @@ export function useApplyNewAgentTemplate() {
         try {
           // 1. Get the current agent state from the "new" conversation template using snapshot
           // getPromise reads the value without subscribing
-          const agentTemplate = await snapshot.getPromise(ephemeralAgentByConvoId(sourceId));
+          const agentTemplate =
+            ephemeralAgentState ?? (await snapshot.getPromise(ephemeralAgentByConvoId(sourceId)));
 
           // 2. Check if a template state actually exists
           if (agentTemplate) {

client/src/store/settings.ts

@@ -43,9 +43,6 @@ const localStorageAtoms = {
   // Beta features settings
   modularChat: atomWithLocalStorage('modularChat', true),
   LaTeXParsing: atomWithLocalStorage('LaTeXParsing', true),
-  codeArtifacts: atomWithLocalStorage('codeArtifacts', false),
-  includeShadcnui: atomWithLocalStorage('includeShadcnui', false),
-  customPromptMode: atomWithLocalStorage('customPromptMode', false),
   centerFormOnLanding: atomWithLocalStorage('centerFormOnLanding', true),
   showFooter: atomWithLocalStorage('showFooter', true),