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

🎨 style: overall UI improvements (#3576)

Browse source 
* stlye: new dialogs

* style: DashGroupItem

* style: bookmarks update
This commit is contained in:
Marco Beretta 2024-08-08 18:16:17 +02:00 • committed by GitHub
parent 5c99d93744
commit cf393b1308
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 172 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

16
client/src/components/Bookmarks/BookmarkItem.tsx
View file

@ -5,7 +5,7 @@ import { Spinner } from '~/components/svg';
import { cn } from '~/utils';
type MenuItemProps = {
tag: string;
tag: string | React.ReactNode;
selected: boolean;
count?: number;
handleSubmit: (tag: string) => Promise<void>;
@ -25,14 +25,20 @@ const BookmarkItem: FC<MenuItemProps> = ({
const [isLoading, setIsLoading] = useState(false);
const clickHandler = async () => {
setIsLoading(true);
await handleSubmit(tag);
await handleSubmit(tag as string);
setIsLoading(false);
};
const breakWordStyle: React.CSSProperties = {
wordBreak: 'break-word',
overflowWrap: 'anywhere',
};
return (
<div
role="menuitem"
className={cn(
'group m-1.5 flex cursor-pointer gap-2 rounded px-2 py-2.5 !pr-3 text-sm !opacity-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50',
'group m-1.5 flex w-[225px] cursor-pointer gap-2 rounded px-2 py-2.5 !pr-3 text-sm !opacity-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50',
'hover:bg-black/5 dark:hover:bg-white/5',
highlightSelected && selected && 'bg-black/5 dark:bg-white/5',
)}
@ -51,14 +57,14 @@ const BookmarkItem: FC<MenuItemProps> = ({
) : (
<BookmarkIcon className="size-4" />
)}
<div className="break-all">{tag}</div>
<div style={breakWordStyle}>{tag}</div>
</div>
{count !== undefined && (
<div className="flex items-center justify-end">
<span
className={cn(
'ml-auto w-9 min-w-max whitespace-nowrap rounded-md bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600',
'ml-auto w-7 min-w-max whitespace-nowrap rounded-md bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600',
'dark:bg-gray-800 dark:text-white',
)}
aria-hidden="true"

35
client/src/components/Bookmarks/BookmarkItems.tsx
View file

@ -1,30 +1,37 @@
import type { FC } from 'react';
import { useBookmarkContext } from '~/Providers/BookmarkContext';
import BookmarkItem from './BookmarkItem';
const BookmarkItems: FC<{
interface BookmarkItemsProps {
tags: string[];
handleSubmit: (tag: string) => Promise<void>;
header: React.ReactNode;
highlightSelected?: boolean;
}> = ({ tags, handleSubmit, header, highlightSelected }) => {
}
const BookmarkItems: FC<BookmarkItemsProps> = ({
tags,
handleSubmit,
header,
highlightSelected,
}) => {
const { bookmarks } = useBookmarkContext();
return (
<>
{header}
<div className="my-1.5 h-px bg-black/10 dark:bg-white/10" role="none" />
{bookmarks.length > 0 &&
bookmarks.map((bookmark) => (
<BookmarkItem
key={bookmark.tag}
tag={bookmark.tag}
selected={tags.includes(bookmark.tag)}
count={bookmark.count}
handleSubmit={handleSubmit}
highlightSelected={highlightSelected}
/>
))}
{bookmarks.map((bookmark) => (
<BookmarkItem
key={bookmark.tag}
tag={bookmark.tag}
selected={tags.includes(bookmark.tag)}
count={bookmark.count}
handleSubmit={handleSubmit}
highlightSelected={highlightSelected}
/>
))}
</>
);
};
export default BookmarkItems;

18
client/src/components/Conversations/DeleteButton.tsx
View file

@ -5,15 +5,15 @@ import { useParams, useNavigate } from 'react-router-dom';
import type { TMessage } from 'librechat-data-provider';
import { useDeleteConversationMutation } from '~/data-provider';
import {
Dialog,
DialogTrigger,
OGDialog,
OGDialogTrigger,
Label,
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '~/components/ui';
import DialogTemplate from '~/components/ui/DialogTemplate';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import { TrashIcon, CrossIcon } from '~/components/svg';
import { useLocalize, useNewConvo } from '~/hooks';
@ -42,7 +42,7 @@ export default function DeleteButton({
const confirmDelete = useCallback(() => {
const messages = queryClient.getQueryData<TMessage[]>([QueryKeys.messages, conversationId]);
const thread_id = messages?.[messages?.length - 1]?.thread_id;
const thread_id = messages?.[messages.length - 1]?.thread_id;
deleteConvoMutation.mutate({ conversationId, thread_id, source: 'button' });
}, [conversationId, deleteConvoMutation, queryClient]);
@ -72,11 +72,11 @@ export default function DeleteButton({
};
return (
<Dialog>
<DialogTrigger asChild>
<OGDialog>
<OGDialogTrigger asChild>
<button className={className}>{renaming ? <CrossIcon /> : renderDeleteButton()}</button>
</DialogTrigger>
<DialogTemplate
</OGDialogTrigger>
<OGDialogTemplate
showCloseButton={false}
title={localize('com_ui_delete_conversation')}
className="max-w-[450px]"
@ -98,6 +98,6 @@ export default function DeleteButton({
selectText: localize('com_ui_delete'),
}}
/>
</Dialog>
</OGDialog>
);
}

16
client/src/components/Conversations/ShareButton.tsx
View file

@ -1,15 +1,15 @@
import { useState } from 'react';
import {
Dialog,
OGDialog,
Tooltip,
DialogTrigger,
OGDialogTrigger,
TooltipContent,
TooltipTrigger,
TooltipProvider,
} from '~/components/ui';
import { Share2Icon } from 'lucide-react';
import type { TSharedLink } from 'librechat-data-provider';
import DialogTemplate from '~/components/ui/DialogTemplate';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import SharedLinkButton from './SharedLinkButton';
import ShareDialog from './ShareDialog';
import { useLocalize } from '~/hooks';
@ -78,8 +78,8 @@ export default function ShareButton({
setOpen(open);
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogTrigger asChild>
<OGDialog open={open} onOpenChange={onOpenChange}>
<OGDialogTrigger asChild>
<button
className={cn(
'group m-1.5 flex w-full cursor-pointer items-center gap-2 rounded p-2.5 text-sm hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 dark:focus-visible:bg-gray-600',
@ -88,8 +88,8 @@ export default function ShareButton({
>
{renderShareButton()}
</button>
</DialogTrigger>
<DialogTemplate
</OGDialogTrigger>
<OGDialogTemplate
buttons={buttons}
showCloseButton={true}
showCancelButton={false}
@ -108,6 +108,6 @@ export default function ShareButton({
</>
}
/>
</Dialog>
</OGDialog>
);
}

8
client/src/components/Conversations/SharedLinkButton.tsx
View file

@ -80,7 +80,7 @@ export default function SharedLinkButton({
),
};
}
if (share?.isPublic) {
if (share.isPublic) {
return {
handler: async () => {
await updateSharedLink();
@ -107,12 +107,12 @@ export default function SharedLinkButton({
const handlers = getHandler();
return (
<Button
<button
disabled={isLoading || isCopying}
onClick={() => {
handlers.handler();
}}
className="min-w-32 whitespace-nowrap bg-green-500 text-white hover:bg-green-600 dark:bg-green-600 dark:text-white dark:hover:bg-green-800"
className="btn btn-primary flex items-center"
>
{isCopying && (
<>
@ -122,6 +122,6 @@ export default function SharedLinkButton({
)}
{!isCopying && !isLoading && handlers.label}
{!isCopying && isLoading && <Spinner className="h-4 w-4" />}
</Button>
</button>
);
}

33
client/src/components/Nav/Bookmarks/BookmarkNav.tsx
View file

@ -15,6 +15,7 @@ type BookmarkNavProps = {
tags: string[];
setTags: (tags: string[]) => void;
};
const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags }: BookmarkNavProps) => {
const localize = useLocalize();
const location = useLocation();
@ -33,38 +34,26 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags }: BookmarkNavProps)
conversation = activeConvo;
}
// Hide the button if there are no tags
if (!data || !data.some((tag) => tag.count > 0)) {
return null;
}
return (
<Root open={open} onOpenChange={setIsOpen}>
<Trigger asChild>
<button
className={cn(
'group-ui-open:bg-gray-100 dark:group-ui-open:bg-gray-700 duration-350 mt-text-sm flex h-auto w-full items-center gap-2 rounded-lg p-2 text-sm transition-colors hover:bg-gray-100 dark:hover:bg-gray-800',
open ? 'bg-gray-100 dark:bg-gray-800' : '',
'relative mt-1 flex h-10 w-full cursor-pointer items-center gap-1 rounded-lg border-white bg-gray-50 px-1 py-2 text-black transition-colors duration-200 focus-within:bg-gray-200 hover:bg-gray-200 dark:bg-gray-850 dark:text-white dark:focus-within:bg-gray-800 dark:hover:bg-gray-800',
open ? 'bg-gray-200 dark:bg-gray-800' : '',
)}
id="presets-button"
data-testid="presets-button"
title={localize('com_endpoint_examples')}
>
<div className="-ml-0.9 -mt-0.8 h-8 w-8 flex-shrink-0">
<div className="relative flex">
<div className="relative flex h-8 w-8 items-center justify-center rounded-full p-1 dark:text-white">
{tags.length > 0 ? (
<BookmarkFilledIcon className="h-6 w-6" />
) : (
<BookmarkIcon className="h-6 w-6" />
)}
</div>
</div>
<div className="relative flex h-8 w-8 items-center justify-center rounded-full p-1 dark:text-white">
{tags.length > 0 ? (
<BookmarkFilledIcon className="h-5 w-5" />
) : (
<BookmarkIcon className="h-5 w-5" />
)}
</div>
<div
className="mt-2 grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-black dark:text-gray-100"
style={{ marginTop: '0', marginLeft: '0' }}
>
<div className="grow overflow-hidden whitespace-nowrap text-left text-sm text-black dark:text-gray-100">
{tags.length > 0 ? tags.join(',') : localize('com_ui_bookmarks')}
</div>
</button>
@ -76,7 +65,7 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags }: BookmarkNavProps)
align="start"
className="mt-2 max-h-96 min-w-[240px] overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-700 dark:text-white lg:max-h-96"
>
{data && conversation && data.some((tag) => tag.count > 0) && (
{data && conversation && (
// Display bookmarks and highlight the selected tag
<BookmarkContext.Provider value={{ bookmarks: data.filter((tag) => tag.count > 0) }}>
<BookmarkNavItems

24
client/src/components/Nav/Bookmarks/BookmarkNavItems.tsx
View file

@ -1,7 +1,9 @@
import { useEffect, useState, type FC } from 'react';
import { CrossCircledIcon } from '@radix-ui/react-icons';
import type { TConversation } from 'librechat-data-provider';
import { useBookmarkContext } from '~/Providers/BookmarkContext';
import { BookmarkItems, BookmarkItem } from '~/components/Bookmarks';
import { useLocalize } from '~/hooks';
const BookmarkNavItems: FC<{
conversation: TConversation;
@ -9,6 +11,8 @@ const BookmarkNavItems: FC<{
setTags: (tags: string[]) => void;
}> = ({ conversation, tags, setTags }) => {
const [currentConversation, setCurrentConversation] = useState<TConversation>();
const { bookmarks } = useBookmarkContext();
const localize = useLocalize();
useEffect(() => {
if (!currentConversation) {
@ -35,8 +39,24 @@ const BookmarkNavItems: FC<{
return Promise.resolve();
};
console.log('bookmarks', bookmarks);
if (bookmarks.length === 0) {
return (
<div className="flex flex-col">
<BookmarkItem
tag={localize('com_ui_no_bookmarks')}
data-testid="bookmark-item-clear"
handleSubmit={() => Promise.resolve()}
selected={false}
icon={'🤔'}
/>
</div>
);
}
return (
<>
<div className="flex flex-col">
<BookmarkItems
tags={tags}
handleSubmit={handleSubmit}
@ -51,7 +71,7 @@ const BookmarkNavItems: FC<{
/>
}
/>
</>
</div>
);
};

8
client/src/components/Nav/Nav.tsx
View file

@ -157,7 +157,12 @@ const Nav = ({ navVisible, setNavVisible }) => {
>
<NewChat
toggleNav={itemToggleNav}
subHeaders={isSearchEnabled && <SearchBar clearSearch={clearSearch} />}
subHeaders={
<>
{isSearchEnabled && <SearchBar clearSearch={clearSearch} />}
<BookmarkNav tags={tags} setTags={setTags} />
</>
}
/>
<Conversations
conversations={conversations}
@ -170,7 +175,6 @@ const Nav = ({ navVisible, setNavVisible }) => {
/>
)}
</div>
<BookmarkNav tags={tags} setTags={setTags} />
<NavLinks />
</nav>
</div>

14
client/src/components/Prompts/DeleteVersion.tsx
View file

@ -1,5 +1,5 @@
import { Button, Dialog, DialogTrigger, Label } from '~/components/ui';
import DialogTemplate from '~/components/ui/DialogTemplate';
import { Button, OGDialog, OGDialogTrigger, Label } from '~/components/ui';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import { TrashIcon } from '~/components/svg';
import { useLocalize } from '~/hooks';
@ -15,8 +15,8 @@ const DeleteVersion = ({
const localize = useLocalize();
return (
<Dialog>
<DialogTrigger asChild>
<OGDialog>
<OGDialogTrigger asChild>
<Button
size={'sm'}
className="h-10 w-10 border border-transparent bg-red-600 text-red-500 transition-all hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-800"
@ -27,8 +27,8 @@ const DeleteVersion = ({
>
<TrashIcon className="icon-lg cursor-pointer text-white dark:text-white" />
</Button>
</DialogTrigger>
<DialogTemplate
</OGDialogTrigger>
<OGDialogTemplate
showCloseButton={false}
title={localize('com_ui_delete_prompt')}
className="max-w-[450px]"
@ -53,7 +53,7 @@ const DeleteVersion = ({
selectText: localize('com_ui_delete'),
}}
/>
</Dialog>
</OGDialog>
);
};

120
client/src/components/Prompts/Groups/DashGroupItem.tsx
View file

@ -7,16 +7,16 @@ import {
Input,
Label,
Button,
Dialog,
OGDialog,
DropdownMenu,
DialogTrigger,
OGDialogTrigger,
DropdownMenuGroup,
DropdownMenuContent,
DropdownMenuTrigger,
DropdownMenuItem,
} from '~/components/ui';
import CategoryIcon from '~/components/Prompts/Groups/CategoryIcon';
import DialogTemplate from '~/components/ui/DialogTemplate';
import { RenameButton } from '~/components/Conversations';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import { useLocalize, useAuthContext } from '~/hooks';
import { TrashIcon } from '~/components/svg';
import { cn } from '~/utils/';
@ -36,9 +36,9 @@ export default function DashGroupItem({
const blurTimeoutRef = useRef<NodeJS.Timeout>();
const [nameEditFlag, setNameEditFlag] = useState(false);
const [nameInputField, setNameInputField] = useState(group.name);
const isOwner = useMemo(() => user?.id === group?.author, [user, group]);
const isOwner = useMemo(() => user?.id === group.author, [user, group]);
const groupIsGlobal = useMemo(
() => instanceProjectId && group?.projectIds?.includes(instanceProjectId),
() => instanceProjectId && group.projectIds?.includes(instanceProjectId),
[group, instanceProjectId],
);
@ -61,7 +61,7 @@ export default function DashGroupItem({
};
const saveRename = () => {
updateGroup.mutate({ payload: { name: nameInputField }, id: group?._id || '' });
updateGroup.mutate({ payload: { name: nameInputField }, id: group._id || '' });
};
const handleBlur = () => {
@ -70,6 +70,22 @@ export default function DashGroupItem({
}, 100);
};
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter') {
e.preventDefault();
navigate(`/d/prompts/${group._id}`, { replace: true });
}
};
const handleRename = (e: React.MouseEvent | React.KeyboardEvent) => {
e.stopPropagation();
setNameEditFlag(true);
};
const handleDelete = () => {
deletePromptGroupMutation.mutate({ id: group._id || '' });
};
return (
<div
className={cn(
@ -77,27 +93,30 @@ export default function DashGroupItem({
params.promptId === group._id && 'bg-gray-100/50 dark:bg-gray-600 ',
)}
onClick={() => {
if (nameEditFlag) {
return;
if (!nameEditFlag) {
navigate(`/d/prompts/${group._id}`, { replace: true });
}
navigate(`/d/prompts/${group._id}`, { replace: true });
}}
onKeyDown={handleKeyDown}
role="button"
tabIndex={0}
aria-label={`${group.name} prompt group`}
>
<div className="flex w-full flex-row items-center justify-start truncate">
{/* <Checkbox /> */}
<div className="relative flex w-full cursor-pointer flex-col gap-1 text-start align-top">
{nameEditFlag ? (
<>
<div className="flex w-full gap-2">
<Label htmlFor="group-name-input" className="sr-only">
{localize('com_ui_rename_group')}
</Label>
<Input
defaultValue={nameInputField}
id="group-name-input"
value={nameInputField}
tabIndex={0}
className="w-full"
onClick={(e) => {
e.stopPropagation();
}}
onChange={(e) => {
setNameInputField(e.target.value);
}}
onClick={(e) => e.stopPropagation()}
onChange={(e) => setNameInputField(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Escape') {
cancelRename();
@ -106,17 +125,18 @@ export default function DashGroupItem({
}
}}
onBlur={handleBlur}
aria-label={localize('com_ui_rename_group')}
/>
<Button
variant="subtle"
className="w-min bg-green-500 text-white hover:bg-green-600 dark:bg-green-400 dark:hover:bg-green-500"
<button
className="btn btn-primary"
onClick={(e) => {
e.stopPropagation();
saveRename();
}}
aria-label={localize('com_ui_save')}
>
{localize('com_ui_save')}
</Button>
</button>
</div>
<div className="break-word line-clamp-3 text-balance text-sm text-gray-600 dark:text-gray-400">
{localize('com_ui_renaming_var', group.name)}
@ -126,13 +146,22 @@ export default function DashGroupItem({
<>
<div className="flex w-full justify-between">
<div className="flex flex-row gap-2">
<CategoryIcon category={group.category ?? ''} className="icon-md" />
<CategoryIcon
category={group.category ?? ''}
className="icon-md"
aria-hidden="true"
/>
<h3 className="break-word text-balance text-sm font-semibold text-gray-800 dark:text-gray-200">
{group.name}
</h3>
</div>
<div className="flex flex-row items-center gap-1">
{groupIsGlobal && <EarthIcon className="icon-md text-green-400" />}
{groupIsGlobal && (
<EarthIcon
className="icon-md text-green-400"
aria-label={localize('com_ui_global_group')}
/>
)}
{(isOwner || user?.role === SystemRoles.ADMIN) && (
<>
<DropdownMenu>
@ -140,39 +169,36 @@ export default function DashGroupItem({
<Button
variant="outline"
className="h-7 w-7 p-0 hover:bg-gray-200 dark:bg-gray-800/50 dark:text-gray-400 dark:hover:border-gray-400 dark:focus:border-gray-500"
aria-label={localize('com_ui_more_options')}
>
<MenuIcon className="icon-md dark:text-gray-300" />
<MenuIcon className="icon-md dark:text-gray-300" aria-hidden="true" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="mt-2 w-36 rounded-lg" collisionPadding={2}>
<DropdownMenuGroup>
<RenameButton
renaming={false}
renameHandler={(e) => {
e.stopPropagation();
setNameEditFlag(true);
}}
appendLabel={true}
className={cn('m-0 w-full p-2')}
/>
<DropdownMenuItem onSelect={handleRename}>
{localize('com_ui_rename')}
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
<Dialog>
<DialogTrigger asChild>
<OGDialog>
<OGDialogTrigger asChild>
<Button
variant="outline"
className={cn(
'h-7 w-7 p-0 hover:bg-gray-200 dark:bg-gray-800/50 dark:text-gray-400 dark:hover:border-gray-400 dark:focus:border-gray-500',
)}
onClick={(e) => {
e.stopPropagation();
}}
onClick={(e) => e.stopPropagation()}
aria-label={localize('com_ui_delete_prompt')}
>
<TrashIcon className="icon-md text-gray-600 dark:text-gray-300" />
<TrashIcon
className="icon-md text-gray-600 dark:text-gray-300"
aria-hidden="true"
/>
</Button>
</DialogTrigger>
<DialogTemplate
</OGDialogTrigger>
<OGDialogTemplate
showCloseButton={false}
title={localize('com_ui_delete_prompt')}
className="max-w-[450px]"
@ -181,7 +207,7 @@ export default function DashGroupItem({
<div className="flex w-full flex-col items-center gap-2">
<div className="grid w-full items-center gap-2">
<Label
htmlFor="chatGptLabel"
htmlFor="confirm-delete"
className="text-left text-sm font-medium"
>
{localize('com_ui_delete_confirm')}{' '}
@ -192,21 +218,19 @@ export default function DashGroupItem({
</>
}
selection={{
selectHandler: () => {
deletePromptGroupMutation.mutate({ id: group?._id || '' });
},
selectHandler: handleDelete,
selectClasses:
'bg-red-600 dark:bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
selectText: localize('com_ui_delete'),
}}
/>
</Dialog>
</OGDialog>
</>
)}
</div>
</div>
<div className="ellipsis text-balance text-sm text-gray-600 dark:text-gray-400">
{group.oneliner ? group.oneliner : group?.productionPrompt?.prompt ?? ''}
{group.oneliner ? group.oneliner : group.productionPrompt?.prompt ?? ''}
</div>
</>
)}

1
client/src/localization/languages/Eng.ts
View file

@ -308,6 +308,7 @@ export default {
com_ui_bookmarks_delete_error: 'There was an error deleting the bookmark',
com_ui_bookmarks_add_to_conversation: 'Add to current conversation',
com_ui_bookmarks_filter: 'Filter bookmarks...',
com_ui_no_bookmarks: 'it seems like you have no bookmarks yet. Click on a chat and add a new one',
com_auth_error_login:
'Unable to login with the information provided. Please check your credentials and try again.',
com_auth_error_login_rl: