From 2f532ea8d3749cce0f64d77d18606139680f673e Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Thu, 25 Sep 2025 23:43:52 +0200
Subject: [PATCH] refactor(Artifacts): enhance button toggle functionality and
 manage expanded state with useEffect

---
 .../src/components/Chat/Input/Artifacts.tsx   | 27 ++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Chat/Input/Artifacts.tsx b/client/src/components/Chat/Input/Artifacts.tsx
index e8f4f2200..adb34ceff 100644
--- a/client/src/components/Chat/Input/Artifacts.tsx
+++ b/client/src/components/Chat/Input/Artifacts.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useState, useCallback, useMemo } from 'react';
+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';
@@ -18,6 +18,7 @@ function Artifacts() {
   const { toggleState, debouncedChange, isPinned } = artifacts;
 
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [isButtonExpanded, setIsButtonExpanded] = useState(false);
 
   const currentState = useMemo<ArtifactsToggleState>(() => {
     if (typeof toggleState === 'string' && toggleState) {
@@ -33,11 +34,26 @@ function Artifacts() {
   const handleToggle = useCallback(() => {
     if (isEnabled) {
       debouncedChange({ value: '' });
+      setIsButtonExpanded(false);
     } else {
       debouncedChange({ value: ArtifactModes.DEFAULT });
     }
   }, [isEnabled, debouncedChange]);
 
+  const handleMenuButtonClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      setIsButtonExpanded(!isButtonExpanded);
+    },
+    [isButtonExpanded],
+  );
+
+  useEffect(() => {
+    if (!isPopoverOpen) {
+      setIsButtonExpanded(false);
+    }
+  }, [isPopoverOpen]);
+
   const handleShadcnToggle = useCallback(() => {
     if (isShadcnEnabled) {
       debouncedChange({ value: ArtifactModes.DEFAULT });
@@ -77,9 +93,14 @@ function Artifacts() {
               'border-amber-600/40 bg-amber-500/10 hover:bg-amber-700/10',
               'transition-colors',
             )}
-            onClick={(e) => e.stopPropagation()}
+            onClick={handleMenuButtonClick}
           >
-            <ChevronDown className="ml-0.5 h-4 w-4 text-text-secondary" />
+            <ChevronDown
+              className={cn(
+                'ml-1 h-4 w-4 text-text-secondary transition-transform duration-300 md:ml-0.5',
+                isButtonExpanded && 'rotate-180',
+              )}
+            />
           </Ariakit.MenuButton>
 
           <Ariakit.Menu