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 (