From 16bbc4b97e9b9fb7d7314384738eaf03602307ae Mon Sep 17 00:00:00 2001 From: Marco Beretta <81851188+berry-13@users.noreply.github.com> Date: Sun, 14 Jun 2026 15:03:37 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20fix:=20Gate=20message=20hover-re?= =?UTF-8?q?veal=20controls=20on=20hover=20capability,=20not=20width=20(#13?= =?UTF-8?q?712)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Apply the MessageTimestamp transform to all remaining hover-reveal controls in the message UI: replace the md: breakpoint proxy with a (hover: hover) media query so action buttons stay visible on touch and other non-hover devices (e.g. tablets wider than md), while still hiding until row hover/focus where a pointer supports it. The group-hover:visible reveal trio keeps no hidden base state, so it only drops the md: prefixes; the actual hide-until-hover mechanism is the opacity variant, which stays focusable and in the accessibility tree while hidden. --- .../src/components/Chat/Messages/Feedback.tsx | 21 ++++++++++--------- client/src/components/Chat/Messages/Fork.tsx | 5 +++-- .../components/Chat/Messages/HoverButtons.tsx | 11 ++++++---- .../Chat/Messages/MinimalHoverButtons.tsx | 4 ++-- .../Chat/Messages/SiblingSwitch.tsx | 2 +- 5 files changed, 24 insertions(+), 19 deletions(-) diff --git a/client/src/components/Chat/Messages/Feedback.tsx b/client/src/components/Chat/Messages/Feedback.tsx index eea1464e66..9bc10c1927 100644 --- a/client/src/components/Chat/Messages/Feedback.tsx +++ b/client/src/components/Chat/Messages/Feedback.tsx @@ -1,14 +1,6 @@ import React, { useState, useCallback, useMemo, useEffect } from 'react'; import * as Ariakit from '@ariakit/react'; import { TFeedback, TFeedbackTag, getTagsForRating } from 'librechat-data-provider'; -import { - Button, - OGDialog, - OGDialogContent, - OGDialogTitle, - ThumbUpIcon, - ThumbDownIcon, -} from '@librechat/client'; import { AlertCircle, PenTool, @@ -19,6 +11,14 @@ import { Lightbulb, Search, } from 'lucide-react'; +import { + Button, + OGDialog, + OGDialogContent, + OGDialogTitle, + ThumbUpIcon, + ThumbDownIcon, +} from '@librechat/client'; import { useLocalize } from '~/hooks'; import { cn } from '~/utils'; @@ -218,8 +218,9 @@ function buttonClasses(isActive: boolean, isLast: boolean) { return cn( 'hover-button rounded-lg p-1.5 text-text-secondary-alt', 'hover:text-text-primary hover:bg-surface-hover', - 'md:group-hover:visible md:group-focus-within:visible md:group-[.final-completion]:visible', - !isLast && 'md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100', + 'group-hover:visible group-focus-within:visible group-[.final-completion]:visible', + !isLast && + 'group-hover:opacity-100 group-focus-within:opacity-100 [@media(hover:hover)]:opacity-0', 'focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:outline-none', isActive && 'active text-text-primary bg-surface-hover', ); diff --git a/client/src/components/Chat/Messages/Fork.tsx b/client/src/components/Chat/Messages/Fork.tsx index ca03533ea2..1c4e79d4b5 100644 --- a/client/src/components/Chat/Messages/Fork.tsx +++ b/client/src/components/Chat/Messages/Fork.tsx @@ -229,8 +229,9 @@ export default function Fork({ const buttonStyle = cn( 'hover-button rounded-lg p-1.5 text-text-secondary-alt', 'hover:text-text-primary hover:bg-surface-hover', - 'md:group-hover:visible md:group-focus-within:visible md:group-[.final-completion]:visible', - !isLast && 'md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100', + 'group-hover:visible group-focus-within:visible group-[.final-completion]:visible', + !isLast && + 'group-hover:opacity-100 group-focus-within:opacity-100 [@media(hover:hover)]:opacity-0', 'focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:outline-none', isActive && 'active text-text-primary bg-surface-hover', ); diff --git a/client/src/components/Chat/Messages/HoverButtons.tsx b/client/src/components/Chat/Messages/HoverButtons.tsx index 180e8b599e..b0e47adbca 100644 --- a/client/src/components/Chat/Messages/HoverButtons.tsx +++ b/client/src/components/Chat/Messages/HoverButtons.tsx @@ -1,7 +1,7 @@ import React, { useState, useMemo, memo } from 'react'; import { useRecoilState } from 'recoil'; -import type { TConversation, TMessage, TFeedback } from 'librechat-data-provider'; import { EditIcon, Clipboard, CheckMark, ContinueIcon, RegenerateIcon } from '@librechat/client'; +import type { TConversation, TMessage, TFeedback } from 'librechat-data-provider'; import { useGenerationsByLatest, useLocalize } from '~/hooks'; import { Fork } from '~/components/Conversations'; import MessageAudio from './MessageAudio'; @@ -84,8 +84,9 @@ const HoverButton = memo( const buttonStyle = cn( 'hover-button rounded-lg p-1.5 text-text-secondary-alt', 'hover:text-text-primary hover:bg-surface-hover', - 'md:group-hover:visible md:group-focus-within:visible md:group-[.final-completion]:visible', - !isLast && 'md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100', + 'group-hover:visible group-focus-within:visible group-[.final-completion]:visible', + !isLast && + 'group-hover:opacity-100 group-focus-within:opacity-100 [@media(hover:hover)]:opacity-0', !isVisible && 'opacity-0', 'focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:outline-none', isActive && isVisible && 'active text-text-primary bg-surface-hover', @@ -215,7 +216,9 @@ const HoverButtons = ({ isLast={isLast} className={cn( 'ml-0 flex items-center gap-1.5 text-xs', - isSubmitting && isCreatedByUser ? 'md:opacity-0 md:group-hover:opacity-100' : '', + isSubmitting && isCreatedByUser + ? 'group-hover:opacity-100 [@media(hover:hover)]:opacity-0' + : '', )} /> diff --git a/client/src/components/Chat/Messages/MinimalHoverButtons.tsx b/client/src/components/Chat/Messages/MinimalHoverButtons.tsx index b10e38d031..4de428dc47 100644 --- a/client/src/components/Chat/Messages/MinimalHoverButtons.tsx +++ b/client/src/components/Chat/Messages/MinimalHoverButtons.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import { Clipboard, CheckMark } from '@librechat/client'; -import type { TMessage, TAttachment, SearchResultData } from 'librechat-data-provider'; +import type { TMessage, SearchResultData } from 'librechat-data-provider'; import { useLocalize, useCopyToClipboard } from '~/hooks'; type THoverButtons = { @@ -20,7 +20,7 @@ export default function MinimalHoverButtons({ message, searchResults }: THoverBu return (