From 8824e8f918b4ba790bbec60d6775dbf74b5d3fa1 Mon Sep 17 00:00:00 2001
From: Serhii Zghama <20826225+serhiizghama@users.noreply.github.com>
Date: Sat, 20 Jun 2026 22:52:36 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=AA=20fix:=20Gate=20Artifacts=20Toggle?=
 =?UTF-8?q?=20on=20Agent=20Capability=20Flag=20(#13665)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: hide artifacts toggle when capability is disabled

The artifacts badge ignored the agent capabilities config, so a pinned
toggle stayed visible after the artifacts capability was turned off.
Gate the component on artifactsEnabled via useAgentCapabilities, matching
how Skills, FileSearch and CodeInterpreter already handle their capability.

* style: fix import order in Artifacts.tsx

* style: Sort mutation type imports

---------

Co-authored-by: Danny Avila <danny@librechat.ai>
---
 client/src/components/Chat/Input/Artifacts.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Chat/Input/Artifacts.tsx b/client/src/components/Chat/Input/Artifacts.tsx
index bd40639986..ddc36eb7ee 100644
--- a/client/src/components/Chat/Input/Artifacts.tsx
+++ b/client/src/components/Chat/Input/Artifacts.tsx
@@ -1,10 +1,10 @@
 import React, { memo, useState, useCallback, useMemo, useEffect } from 'react';
 import * as Ariakit from '@ariakit/react';
 import { CheckboxButton } from '@librechat/client';
-import { ArtifactModes } from 'librechat-data-provider';
 import { WandSparkles, ChevronDown } from 'lucide-react';
+import { ArtifactModes, defaultAgentCapabilities } from 'librechat-data-provider';
+import { useLocalize, useAgentCapabilities } from '~/hooks';
 import { useBadgeRowContext } from '~/Providers';
-import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 
 interface ArtifactsToggleState {
@@ -17,6 +17,10 @@ function Artifacts() {
   const context = useBadgeRowContext();
   const { toggleState, debouncedChange, isPinned } = context?.artifacts ?? {};
 
+  const { artifactsEnabled } = useAgentCapabilities(
+    context?.agentsConfig?.capabilities ?? defaultAgentCapabilities,
+  );
+
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [isButtonExpanded, setIsButtonExpanded] = useState(false);
 
@@ -73,6 +77,10 @@ function Artifacts() {
     }
   }, [isCustomEnabled, debouncedChange]);
 
+  if (!artifactsEnabled) {
+    return null;
+  }
+
   if (!isEnabled && !isPinned) {
     return null;
   }