From 8c162842d6ddc6c01066d973efde2622fbcea7a0 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Mon, 19 Aug 2024 10:35:14 -0400
Subject: [PATCH] feat: Add CodeArtifacts component to Beta settings tab

---
 .../components/Nav/SettingsTabs/Beta/Beta.tsx |  4 ++
 .../Nav/SettingsTabs/Beta/CodeArtifacts.tsx   | 37 +++++++++++++++++++
 client/src/store/settings.ts                  |  1 +
 3 files changed, 42 insertions(+)
 create mode 100644 client/src/components/Nav/SettingsTabs/Beta/CodeArtifacts.tsx

diff --git a/client/src/components/Nav/SettingsTabs/Beta/Beta.tsx b/client/src/components/Nav/SettingsTabs/Beta/Beta.tsx
index 7faa55d4d1..9392520d8c 100644
--- a/client/src/components/Nav/SettingsTabs/Beta/Beta.tsx
+++ b/client/src/components/Nav/SettingsTabs/Beta/Beta.tsx
@@ -1,6 +1,7 @@
 import { memo } from 'react';
 import * as Tabs from '@radix-ui/react-tabs';
 import { SettingsTabValues } from 'librechat-data-provider';
+import CodeArtifacts from './CodeArtifacts';
 import LaTeXParsing from './LaTeXParsing';
 import ModularChat from './ModularChat';
 
@@ -18,6 +19,9 @@ function Beta() {
         <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
           <LaTeXParsing />
         </div>
+        <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+          <CodeArtifacts />
+        </div>
       </div>
     </Tabs.Content>
   );
diff --git a/client/src/components/Nav/SettingsTabs/Beta/CodeArtifacts.tsx b/client/src/components/Nav/SettingsTabs/Beta/CodeArtifacts.tsx
new file mode 100644
index 0000000000..93938763c6
--- /dev/null
+++ b/client/src/components/Nav/SettingsTabs/Beta/CodeArtifacts.tsx
@@ -0,0 +1,37 @@
+import { useRecoilState } from 'recoil';
+import HoverCardSettings from '../HoverCardSettings';
+import { Switch } from '~/components/ui';
+import { useLocalize } from '~/hooks';
+import store from '~/store';
+
+export default function CodeArtifactsSwitch({
+  onCheckedChange,
+}: {
+  onCheckedChange?: (value: boolean) => void;
+}) {
+  const [codeArtifacts, setCodeArtifacts] = useRecoilState<boolean>(store.codeArtifacts);
+  const localize = useLocalize();
+
+  const handleCheckedChange = (value: boolean) => {
+    setCodeArtifacts(value);
+    if (onCheckedChange) {
+      onCheckedChange(value);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center space-x-2">
+        <div>{localize('com_nav_code_artifacts')}</div>
+        <HoverCardSettings side="bottom" text="com_nav_info_code_artifacts" />
+      </div>
+      <Switch
+        id="codeArtifacts"
+        checked={codeArtifacts}
+        onCheckedChange={handleCheckedChange}
+        className="ml-4 mt-2"
+        data-testid="codeArtifacts"
+      />
+    </div>
+  );
+}
diff --git a/client/src/store/settings.ts b/client/src/store/settings.ts
index 01d62c4ba9..4a8234e72a 100644
--- a/client/src/store/settings.ts
+++ b/client/src/store/settings.ts
@@ -37,6 +37,7 @@ const localStorageAtoms = {
   // Beta features settings
   modularChat: atomWithLocalStorage('modularChat', true),
   LaTeXParsing: atomWithLocalStorage('LaTeXParsing', true),
+  codeArtifacts: atomWithLocalStorage('codeArtifacts', false),
 
   // Commands settings
   atCommand: atomWithLocalStorage('atCommand', true),