🪄 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/components/Nav/Settings.tsx

@@ -17,7 +17,6 @@ import {
   General,
   Chat,
   Speech,
-  Beta,
   Commands,
   Data,
   Account,
@@ -233,9 +232,6 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
                     <Tabs.Content value={SettingsTabValues.CHAT}>
                       <Chat />
                     </Tabs.Content>
-                    <Tabs.Content value={SettingsTabValues.BETA}>
-                      <Beta />
-                    </Tabs.Content>
                     <Tabs.Content value={SettingsTabValues.COMMANDS}>
                       <Commands />
                     </Tabs.Content>

client/src/components/Nav/SettingsTabs/Beta/Beta.tsx

@@ -1,18 +0,0 @@
-import { memo } from 'react';
-import CodeArtifacts from './CodeArtifacts';
-import ChatBadges from './ChatBadges';
-
-function Beta() {
-  return (
-    <div className="flex flex-col gap-3 p-1 text-sm text-text-primary">
-      <div className="pb-3">
-        <CodeArtifacts />
-      </div>
-      {/* <div className="pb-3">
-        <ChatBadges />
-      </div> */}
-    </div>
-  );
-}
-
-export default memo(Beta);

client/src/components/Nav/SettingsTabs/Beta/ChatBadges.tsx

@@ -1,22 +0,0 @@
-import { useSetRecoilState } from 'recoil';
-import { Button } from '~/components/ui';
-import { useLocalize } from '~/hooks';
-import store from '~/store';
-
-export default function ChatBadges() {
-  const setIsEditing = useSetRecoilState<boolean>(store.isEditingBadges);
-  const localize = useLocalize();
-
-  const handleEditChatBadges = () => {
-    setIsEditing(true);
-  };
-
-  return (
-    <div className="flex items-center justify-between">
-      <div>{localize('com_nav_edit_chat_badges')}</div>
-      <Button variant="outline" onClick={handleEditChatBadges}>
-        {localize('com_ui_edit')}
-      </Button>
-    </div>
-  );
-}

client/src/components/Nav/SettingsTabs/Beta/CodeArtifacts.tsx

@@ -1,95 +0,0 @@
-import { useRecoilState } from 'recoil';
-import HoverCardSettings from '~/components/Nav/SettingsTabs/HoverCardSettings';
-import { Switch } from '~/components/ui';
-import { useLocalize } from '~/hooks';
-import store from '~/store';
-
-export default function CodeArtifacts() {
-  const [codeArtifacts, setCodeArtifacts] = useRecoilState<boolean>(store.codeArtifacts);
-  const [includeShadcnui, setIncludeShadcnui] = useRecoilState<boolean>(store.includeShadcnui);
-  const [customPromptMode, setCustomPromptMode] = useRecoilState<boolean>(store.customPromptMode);
-  const localize = useLocalize();
-
-  const handleCodeArtifactsChange = (value: boolean) => {
-    setCodeArtifacts(value);
-    if (!value) {
-      setIncludeShadcnui(false);
-      setCustomPromptMode(false);
-    }
-  };
-
-  const handleIncludeShadcnuiChange = (value: boolean) => {
-    setIncludeShadcnui(value);
-  };
-
-  const handleCustomPromptModeChange = (value: boolean) => {
-    setCustomPromptMode(value);
-    if (value) {
-      setIncludeShadcnui(false);
-    }
-  };
-
-  return (
-    <div className="space-y-4">
-      <h3 className="text-lg font-medium">{localize('com_ui_artifacts')}</h3>
-      <div className="space-y-2">
-        <SwitchItem
-          id="codeArtifacts"
-          label={localize('com_ui_artifacts_toggle')}
-          checked={codeArtifacts}
-          onCheckedChange={handleCodeArtifactsChange}
-          hoverCardText="com_nav_info_code_artifacts"
-        />
-        <SwitchItem
-          id="includeShadcnui"
-          label={localize('com_ui_include_shadcnui')}
-          checked={includeShadcnui}
-          onCheckedChange={handleIncludeShadcnuiChange}
-          hoverCardText="com_nav_info_include_shadcnui"
-          disabled={!codeArtifacts || customPromptMode}
-        />
-        <SwitchItem
-          id="customPromptMode"
-          label={localize('com_ui_custom_prompt_mode')}
-          checked={customPromptMode}
-          onCheckedChange={handleCustomPromptModeChange}
-          hoverCardText="com_nav_info_custom_prompt_mode"
-          disabled={!codeArtifacts}
-        />
-      </div>
-    </div>
-  );
-}
-
-function SwitchItem({
-  id,
-  label,
-  checked,
-  onCheckedChange,
-  hoverCardText,
-  disabled = false,
-}: {
-  id: string;
-  label: string;
-  checked: boolean;
-  onCheckedChange: (value: boolean) => void;
-  hoverCardText: string;
-  disabled?: boolean;
-}) {
-  return (
-    <div className="flex items-center justify-between">
-      <div className="flex items-center space-x-2">
-        <div className={disabled ? 'text-gray-400' : ''}>{label}</div>
-        <HoverCardSettings side="bottom" text={hoverCardText} />
-      </div>
-      <Switch
-        id={id}
-        checked={checked}
-        onCheckedChange={onCheckedChange}
-        className="ml-4"
-        data-testid={id}
-        disabled={disabled}
-      />
-    </div>
-  );
-}

client/src/components/Nav/SettingsTabs/index.ts

@@ -1,7 +1,6 @@
 export { default as General } from './General/General';
 export { default as Chat } from './Chat/Chat';
 export { default as Data } from './Data/Data';
-export { default as Beta } from './Beta/Beta';
 export { default as Commands } from './Commands/Commands';
 export { RevokeKeysButton } from './Data/RevokeKeysButton';
 export { default as Account } from './Account/Account';