Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-20 18:30:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 style: fix inconsistent HoverButtons and correct style issue in Continue button (#3100)

Browse source 
* style: fix inconsistent HoverButtons and fixed style bug in `continue` button

* quick fix; forgot to re-implment the logic

* feat: convo switch buttons
This commit is contained in:
Marco Beretta 2024-06-21 15:58:38 +02:00 • committed by GitHub
parent 0424f8fe55
commit 54b1095239
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 21 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

12
client/src/components/Chat/Messages/HoverButtons.tsx
View file

@ -77,7 +77,7 @@ export default function HoverButtons({
{isEditableEndpoint && ( {isEditableEndpoint && (
<button <button
className={cn( className={cn(
'hover-button rounded-md p-1 text-gray-400 hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible', 'hover-button rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
isCreatedByUser ? '' : 'active', isCreatedByUser ? '' : 'active',
hideEditButton ? 'opacity-0' : '', hideEditButton ? 'opacity-0' : '',
isEditing ? 'active text-gray-700 dark:text-gray-200' : '', isEditing ? 'active text-gray-700 dark:text-gray-200' : '',
@ -93,7 +93,7 @@ export default function HoverButtons({
)} )}
<button <button
className={cn( className={cn(
'ml-0 flex items-center gap-1.5 rounded-md p-1 text-xs hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible', 'ml-0 flex items-center gap-1.5 rounded-md p-1 text-xs text-gray-400 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
isSubmitting && isCreatedByUser ? 'md:opacity-0 md:group-hover:opacity-100' : '', isSubmitting && isCreatedByUser ? 'md:opacity-0 md:group-hover:opacity-100' : '',
!isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '', !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
)} )}
@ -108,7 +108,7 @@ export default function HoverButtons({
{regenerateEnabled ? ( {regenerateEnabled ? (
<button <button
className={cn( className={cn(
'hover-button active rounded-md p-1 text-gray-400 hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible md:group-[.final-completion]:visible', 'hover-button active rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible md:group-[.final-completion]:visible',
!isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '', !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
)} )}
onClick={regenerate} onClick={regenerate}
@ -116,7 +116,7 @@ export default function HoverButtons({
title={localize('com_ui_regenerate')} title={localize('com_ui_regenerate')}
> >
<RegenerateIcon <RegenerateIcon
className="hover:text-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" className="hover:text-gray-500 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400"
size="19" size="19"
/> />
</button> </button>
@ -131,14 +131,14 @@ export default function HoverButtons({
{continueSupported ? ( {continueSupported ? (
<button <button
className={cn( className={cn(
'hover-button active rounded-md p-1 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible ', 'hover-button active rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible ',
!isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '', !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
)} )}
onClick={handleContinue} onClick={handleContinue}
type="button" type="button"
title={localize('com_ui_continue')} title={localize('com_ui_continue')}
> >
<ContinueIcon className="h-4 w-4 hover:text-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" /> <ContinueIcon className="h-4 w-4 hover:text-gray-500 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" />
</button> </button>
) : null} ) : null}
</div> </div>

2
client/src/components/Chat/Messages/MessageAudio.tsx
View file

@ -49,7 +49,7 @@ export default function MessageAudio({ index, message, isLast }: THoverButtons)
return ( return (
<> <>
<button <button
className="hover-button rounded-md p-1 pl-0 text-gray-400 hover:text-gray-950 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible" className="hover-button rounded-md p-1 pl-0 text-gray-400 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible"
// onMouseDownCapture={() => { // onMouseDownCapture={() => {
// if (audioRef.current) { // if (audioRef.current) {
// audioRef.current.muted = false; // audioRef.current.muted = false;

15
client/src/components/Chat/Messages/SiblingSwitch.tsx
View file

@ -1,4 +1,5 @@
import type { TMessageProps } from '~/common'; import type { TMessageProps } from '~/common';
import { cn } from '~/utils';
type TSiblingSwitchProps = Pick<TMessageProps, 'siblingIdx' | 'siblingCount' | 'setSiblingIdx'>; type TSiblingSwitchProps = Pick<TMessageProps, 'siblingIdx' | 'siblingCount' | 'setSiblingIdx'>;
@ -24,7 +25,10 @@ export default function SiblingSwitch({
return siblingCount > 1 ? ( return siblingCount > 1 ? (
<div className="visible flex items-center justify-center gap-1 self-center pt-0 text-xs"> <div className="visible flex items-center justify-center gap-1 self-center pt-0 text-xs">
<button <button
className="disabled:text-gray-300 dark:text-white dark:disabled:text-gray-400" className={cn(
'hover-button rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
)}
type="button"
onClick={previous} onClick={previous}
disabled={siblingIdx == 0} disabled={siblingIdx == 0}
> >
@ -35,7 +39,7 @@ export default function SiblingSwitch({
viewBox="0 0 24 24" viewBox="0 0 24 24"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
className="h-3 w-3" className="h-4 w-4"
height="1em" height="1em"
width="1em" width="1em"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -47,7 +51,10 @@ export default function SiblingSwitch({
{siblingIdx + 1} / {siblingCount} {siblingIdx + 1} / {siblingCount}
</span> </span>
<button <button
className="disabled:text-gray-300 dark:text-white dark:disabled:text-gray-400" className={cn(
'hover-button rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
)}
type="button"
onClick={next} onClick={next}
disabled={siblingIdx == siblingCount - 1} disabled={siblingIdx == siblingCount - 1}
> >
@ -58,7 +65,7 @@ export default function SiblingSwitch({
viewBox="0 0 24 24" viewBox="0 0 24 24"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
className="h-3 w-3" className="h-4 w-4"
height="1em" height="1em"
width="1em" width="1em"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

6
client/src/components/Conversations/Fork.tsx
View file

@ -165,8 +165,8 @@ export default function Fork({
<Popover.Trigger asChild> <Popover.Trigger asChild>
<button <button
className={cn( className={cn(
'hover-button active rounded-md p-1 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible ', 'hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible ',
'data-[state=open]:active data-[state=open]:bg-gray-200 data-[state=open]:text-gray-700 data-[state=open]:dark:bg-gray-700 data-[state=open]:dark:text-gray-200', 'data-[state=open]:active data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 data-[state=open]:dark:bg-gray-700 data-[state=open]:dark:text-gray-200',
!isLast ? 'data-[state=open]:opacity-100 md:opacity-0 md:group-hover:opacity-100' : '', !isLast ? 'data-[state=open]:opacity-100 md:opacity-0 md:group-hover:opacity-100' : '',
)} )}
onClick={(e) => { onClick={(e) => {
@ -184,7 +184,7 @@ export default function Fork({
type="button" type="button"
title={localize('com_ui_fork')} title={localize('com_ui_fork')}
> >
<GitFork className="h-4 w-4 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" /> <GitFork className="h-4 w-4 hover:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" />
</button> </button>
</Popover.Trigger> </Popover.Trigger>
<Popover.Portal> <Popover.Portal>