refactor: update UI artifact toggle label to match localization key

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.

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

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.',