From ac352c9878e5c6c9c3540a1cb3d643b1448eacf9 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Sat, 24 Aug 2024 01:13:05 -0400
Subject: [PATCH] refactor: update UI artifact toggle label to match
 localization key

---
 api/app/clients/prompts/artifacts.js                          | 3 ++-
 client/src/components/Nav/SettingsTabs/Beta/CodeArtifacts.tsx | 2 +-
 client/src/localization/languages/Eng.ts                      | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/api/app/clients/prompts/artifacts.js b/api/app/clients/prompts/artifacts.js
index 3aa86b8efa..d0245ea6e3 100644
--- a/api/app/clients/prompts/artifacts.js
+++ b/api/app/clients/prompts/artifacts.js
@@ -63,7 +63,8 @@ Artifacts are for substantial, self-contained content that users might modify or
       - Base React is available to be imported. To use hooks, first import it at the top of the artifact, e.g. \`import { useState } from "react"\`
       - The lucide-react@0.263.1 library is available to be imported. e.g. \`import { Camera } from "lucide-react"\` & \`<Camera color="red" size={48} />\`
       - The recharts charting library is available to be imported, e.g. \`import { LineChart, XAxis, ... } from "recharts"\` & \`<LineChart ...><XAxis dataKey="name"> ...\`
-      - The assistant can use prebuilt components from the \`shadcn/ui\` library after it is imported: \`import { Alert, AlertDescription, AlertTitle, AlertDialog, AlertDialogAction } from '@/components/ui/alert';\`. If using components from the shadcn/ui library, the assistant mentions this to the user and offers to help them install the components if necessary.
+      - The assistant can use prebuilt components from the \`shadcn/ui\` library after it is imported: \`import { Alert, AlertDescription, AlertTitle, AlertDialog, AlertDialogAction } from '/components/ui/alert';\`. If using components from the shadcn/ui library, the assistant mentions this to the user and offers to help them install the components if necessary.
+      - Components MUST be imported from \`/components/ui/name\` and NOT from \`/components/name\` or \`@/components/ui/name\`.
       - NO OTHER LIBRARIES (e.g. zod, hookform) ARE INSTALLED OR ABLE TO BE IMPORTED.
       - Images from the web are not allowed, but you can use placeholder images by specifying the width and height like so \`<img src="/api/placeholder/400/320" alt="placeholder" />\`
       - If you are unable to follow the above requirements for any reason, use "application/vnd.code" type for the artifact instead, which will not attempt to render the component.
diff --git a/client/src/components/Nav/SettingsTabs/Beta/CodeArtifacts.tsx b/client/src/components/Nav/SettingsTabs/Beta/CodeArtifacts.tsx
index 93938763c6..0e6ccfac33 100644
--- a/client/src/components/Nav/SettingsTabs/Beta/CodeArtifacts.tsx
+++ b/client/src/components/Nav/SettingsTabs/Beta/CodeArtifacts.tsx
@@ -22,7 +22,7 @@ export default function CodeArtifactsSwitch({
   return (
     <div className="flex items-center justify-between">
       <div className="flex items-center space-x-2">
-        <div>{localize('com_nav_code_artifacts')}</div>
+        <div>{localize('com_ui_artifacts_toggle')}</div>
         <HoverCardSettings side="bottom" text="com_nav_info_code_artifacts" />
       </div>
       <Switch
diff --git a/client/src/localization/languages/Eng.ts b/client/src/localization/languages/Eng.ts
index 52b039d141..3b1ba9488d 100644
--- a/client/src/localization/languages/Eng.ts
+++ b/client/src/localization/languages/Eng.ts
@@ -3,6 +3,7 @@
 // file deepcode ignore HardcodedNonCryptoSecret: No hardcoded secrets present in this file
 
 export default {
+  com_ui_artifacts_toggle: 'Toggle Artifacts Mode',
   com_ui_artifact_click: 'Click to open',
   com_a11y_start: 'The AI is replying.',
   com_a11y_end: 'The AI has finished their reply.',