🤝 feat: View Artifacts in Shared Conversations (#10477)

* feat: Integrate logger for MessageIcon component

* feat: Enhance artifact sharing functionality with updated path checks and read-only state management

* feat: Refactor Thinking and Reasoning components for improved structure and styling

* feat: Enhance artifact sharing with context value management and responsive layout

* feat: Enhance ShareView with theme and language management features

* feat: Improve ThinkingButton accessibility and styling for better user interaction

* feat: Introduce isArtifactRoute utility for route validation in Artifact components

* feat: Add latest message text extraction in SharedView for improved message display

* feat: Update locale handling in SharedView for dynamic date formatting

* feat: Refactor ArtifactsContext and SharedView for improved context handling and styling adjustments

* feat: Enhance artifact panel size management with local storage integration

* chore: imports

* refactor: move ShareArtifactsContainer out of ShareView

---------

Co-authored-by: Danny Avila <danny@librechat.ai>

client/src/components/Chat/Messages/Content/Parts/Thinking.tsx

@@ -35,11 +35,13 @@ export const ThinkingButton = memo(
     onClick,
     label,
     content,
+    showCopyButton = true,
   }: {
     isExpanded: boolean;
     onClick: (e: MouseEvent<HTMLButtonElement>) => void;
     label: string;
     content?: string;
+    showCopyButton?: boolean;
   }) => {
     const localize = useLocalize();
     const fontSize = useAtomValue(fontSizeAtom);
@@ -59,7 +61,7 @@ export const ThinkingButton = memo(
     );
 
     return (
-      <div className="flex w-full items-center justify-between gap-2">
+      <div className="group/thinking flex w-full items-center justify-between gap-2">
         <button
           type="button"
           onClick={onClick}
@@ -79,7 +81,7 @@ export const ThinkingButton = memo(
           </span>
           {label}
         </button>
-        {content && (
+        {content && showCopyButton && (
           <button
             type="button"
             onClick={handleCopy}
@@ -90,8 +92,11 @@ export const ThinkingButton = memo(
             }
             className={cn(
               'rounded-lg p-1.5 text-text-secondary-alt transition-colors duration-200',
+              isExpanded
+                ? 'opacity-0 group-focus-within/thinking-container:opacity-100 group-hover/thinking-container:opacity-100'
+                : 'opacity-0',
               'hover:bg-surface-hover hover:text-text-primary',
-              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white',
+              'focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white',
             )}
           >
             {isCopied ? <CheckMark className="h-[18px] w-[18px]" /> : <Clipboard size="19" />}
@@ -142,7 +147,7 @@ const Thinking: React.ElementType = memo(({ children }: { children: React.ReactN
   }
 
   return (
-    <>
+    <div className="group/thinking-container">
       <div className="sticky top-0 z-10 mb-4 bg-surface-primary pb-2 pt-2">
         <ThinkingButton
           isExpanded={isExpanded}
@@ -161,7 +166,7 @@ const Thinking: React.ElementType = memo(({ children }: { children: React.ReactN
           <ThinkingContent>{children}</ThinkingContent>
         </div>
       </div>
-    </>
+    </div>
   );
 });