mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-28 06:08:50 +01:00
🎨 style: bookmarks UI update (#3479)
* style: bookmarks update; style(Files): minor update * style: update conversation bookmarks * style: fix w TableCell
This commit is contained in:
Marco Beretta
GitHub
parent
3fd25920d4
commit
2d5f704695
15 changed files with 223 additions and 235 deletions
|
|
@ -1,19 +1,14 @@
|
|||
import { BookmarkPlusIcon } from 'lucide-react';
|
||||
import type { FC } from 'react';
|
||||
import { useConversationTagsQuery, useRebuildConversationTagsMutation } from '~/data-provider';
|
||||
import { Button, Dialog, DialogContent, DialogHeader, DialogTitle } from '~/components/ui';
|
||||
import { Button } from '~/components/ui';
|
||||
import { BookmarkContext } from '~/Providers/BookmarkContext';
|
||||
import { BookmarkEditDialog } from '~/components/Bookmarks';
|
||||
import BookmarkTable from './BookmarkTable';
|
||||
import { Spinner } from '~/components/svg';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils/';
|
||||
import HoverCardSettings from '~/components/Nav/SettingsTabs/HoverCardSettings';
|
||||
|
||||
const BookmarkPanel: FC<{ open: boolean; onOpenChange: (open: boolean) => void }> = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
}) => {
|
||||
const BookmarkPanel = () => {
|
||||
const localize = useLocalize();
|
||||
const { mutate, isLoading } = useRebuildConversationTagsMutation();
|
||||
const { data } = useConversationTagsQuery();
|
||||
|
|
@ -21,52 +16,31 @@ const BookmarkPanel: FC<{ open: boolean; onOpenChange: (open: boolean) => void }
|
|||
mutate({});
|
||||
};
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent
|
||||
showCloseButton={true}
|
||||
className={cn(
|
||||
'overflow-x-auto shadow-2xl dark:bg-gray-700 dark:text-white md:max-h-[600px] md:min-h-[373px] md:w-[680px]',
|
||||
)}
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
|
||||
{localize('com_ui_bookmarks')}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<BookmarkContext.Provider value={{ bookmarks: data || [] }}>
|
||||
<div className="p-0 sm:p-6 sm:pt-4">
|
||||
<BookmarkTable />
|
||||
<div className="mt-5 sm:mt-4" />
|
||||
<div className="flex justify-between gap-2 pr-2 sm:pr-0">
|
||||
<Button variant="outline" onClick={rebuildTags} className="text-sm">
|
||||
{isLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<div className="flex gap-2">
|
||||
{localize('com_ui_bookmarks_rebuild')}
|
||||
<HoverCardSettings side="bottom" text="com_nav_info_bookmarks_rebuild" />
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<div className="h-auto max-w-full overflow-x-hidden">
|
||||
<BookmarkContext.Provider value={{ bookmarks: data || [] }}>
|
||||
<BookmarkTable />
|
||||
<div className="flex justify-between gap-2">
|
||||
<Button variant="outline" onClick={rebuildTags} className="w-50 text-sm">
|
||||
{isLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<div className="flex gap-2">
|
||||
<BookmarkEditDialog
|
||||
trigger={
|
||||
<Button variant="outline" onClick={rebuildTags} className="text-sm">
|
||||
<BookmarkPlusIcon className="mr-1 size-4" />
|
||||
<div className="break-all">{localize('com_ui_bookmarks_new')}</div>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<Button variant="subtle" onClick={() => onOpenChange(!open)} className="text-sm">
|
||||
{localize('com_ui_close')}
|
||||
</Button>
|
||||
{localize('com_ui_bookmarks_rebuild')}
|
||||
<HoverCardSettings side="top" text="com_nav_info_bookmarks_rebuild" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BookmarkContext.Provider>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
</Button>
|
||||
<BookmarkEditDialog
|
||||
trigger={
|
||||
<Button variant="outline" onClick={rebuildTags} className="w-full text-sm">
|
||||
<BookmarkPlusIcon className="mr-1 size-4" />
|
||||
<div className="break-all">{localize('com_ui_bookmarks_new')}</div>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</BookmarkContext.Provider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default BookmarkPanel;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import type { ConversationTagsResponse, TConversationTag } from 'librechat-data-provider';
|
||||
import { Table, TableHeader, TableBody, TableRow, TableCell, Input, Button } from '~/components/ui';
|
||||
import { BookmarkContext, useBookmarkContext } from '~/Providers/BookmarkContext';
|
||||
import BookmarkTableRow from './BookmarkTableRow';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
const BookmarkTable = () => {
|
||||
const localize = useLocalize();
|
||||
const [rows, setRows] = useState<ConversationTagsResponse>([]);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const pageSize = 10;
|
||||
|
||||
const { bookmarks } = useBookmarkContext();
|
||||
useEffect(() => {
|
||||
|
|
@ -27,30 +30,65 @@ const BookmarkTable = () => {
|
|||
return <BookmarkTableRow key={row.tag} moveRow={moveRow} row={row} position={position} />;
|
||||
}, []);
|
||||
|
||||
const filteredRows = rows.filter((row) =>
|
||||
row.tag.toLowerCase().includes(searchQuery.toLowerCase()),
|
||||
);
|
||||
|
||||
const currentRows = filteredRows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
|
||||
|
||||
return (
|
||||
<BookmarkContext.Provider value={{ bookmarks }}>
|
||||
<div
|
||||
className={cn(
|
||||
'container',
|
||||
'relative h-[300px] overflow-auto',
|
||||
'-mx-4 w-auto ring-1 ring-gray-300 sm:mx-0 sm:rounded-lg',
|
||||
)}
|
||||
>
|
||||
<table className="min-w-full divide-gray-300">
|
||||
<thead className="sticky top-0 z-10 border-b bg-white">
|
||||
<tr className="text-left text-sm font-semibold text-gray-900">
|
||||
<th className="w-96 px-3 py-3.5 pl-6">
|
||||
<div className="flex items-center gap-4 py-4">
|
||||
<Input
|
||||
placeholder={localize('com_ui_bookmarks_filter')}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full dark:border-gray-700"
|
||||
/>
|
||||
</div>
|
||||
<div className="overflow-y-auto rounded-md border border-black/10 dark:border-white/10">
|
||||
<Table className="table-fixed border-separate border-spacing-0">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableCell className="w-full px-3 py-3.5 pl-6 dark:bg-gray-700">
|
||||
<div>{localize('com_ui_bookmarks_title')}</div>
|
||||
</th>
|
||||
<th className="w-28 px-3 py-3.5 sm:pl-6">
|
||||
</TableCell>
|
||||
<TableCell className="w-full px-3 py-3.5 dark:bg-gray-700 sm:pl-6">
|
||||
<div>{localize('com_ui_bookmarks_count')}</div>
|
||||
</th>
|
||||
|
||||
<th className="flex-grow px-3 py-3.5 sm:pl-6"> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-sm">{rows.map((row, i) => renderRow(row, i))}</tbody>
|
||||
</table>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>{currentRows.map((row, i) => renderRow(row, i))}</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-4">
|
||||
<div className="pl-1 text-gray-400">
|
||||
{localize('com_ui_showing')} {pageIndex * pageSize + 1} -{' '}
|
||||
{Math.min((pageIndex + 1) * pageSize, filteredRows.length)} {localize('com_ui_of')}{' '}
|
||||
{filteredRows.length}
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPageIndex((prev) => Math.max(prev - 1, 0))}
|
||||
disabled={pageIndex === 0}
|
||||
>
|
||||
{localize('com_ui_prev')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setPageIndex((prev) =>
|
||||
(prev + 1) * pageSize < filteredRows.length ? prev + 1 : prev,
|
||||
)
|
||||
}
|
||||
disabled={(pageIndex + 1) * pageSize >= filteredRows.length}
|
||||
>
|
||||
{localize('com_ui_next')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</BookmarkContext.Provider>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,64 +1,22 @@
|
|||
import { useRef } from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { useDrag, useDrop } from 'react-dnd';
|
||||
import type { FC } from 'react';
|
||||
import type { Identifier, XYCoord } from 'dnd-core';
|
||||
import type { TConversationTag } from 'librechat-data-provider';
|
||||
import { DeleteBookmarkButton, EditBookmarkButton } from '~/components/Bookmarks';
|
||||
import { useConversationTagMutation } from '~/data-provider';
|
||||
import { NotificationSeverity } from '~/common';
|
||||
import { useToastContext } from '~/Providers';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
import { TableRow, TableCell } from '~/components/ui';
|
||||
|
||||
export const ItemTypes = {
|
||||
CARD: 'card',
|
||||
};
|
||||
|
||||
export interface BookmarkItemProps {
|
||||
position: number;
|
||||
moveRow: (dragIndex: number, hoverIndex: number) => void;
|
||||
interface BookmarkTableRowProps {
|
||||
row: TConversationTag;
|
||||
moveRow: (dragIndex: number, hoverIndex: number) => void;
|
||||
position: number;
|
||||
}
|
||||
|
||||
interface DragItem {
|
||||
index: number;
|
||||
id: string;
|
||||
type: string;
|
||||
}
|
||||
const BookmarkTableRow: React.FC<BookmarkTableRowProps> = ({ row, moveRow, position }) => {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const ref = React.useRef<HTMLTableRowElement>(null);
|
||||
|
||||
const BookmarkTableRow: FC<BookmarkItemProps> = ({ position, moveRow, row, ...rest }) => {
|
||||
const ref = useRef<HTMLTableRowElement>(null);
|
||||
|
||||
const mutation = useConversationTagMutation(row.tag);
|
||||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
|
||||
const handleDrop = (item: DragItem) => {
|
||||
const data = {
|
||||
...row,
|
||||
position: item.index,
|
||||
};
|
||||
mutation.mutate(data, {
|
||||
onError: () => {
|
||||
showToast({
|
||||
message: localize('com_endpoint_preset_save_error'),
|
||||
severity: NotificationSeverity.ERROR,
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const [{ handlerId }, drop] = useDrop<DragItem, void, { handlerId: Identifier | null }>({
|
||||
accept: ItemTypes.CARD,
|
||||
collect(monitor) {
|
||||
return {
|
||||
handlerId: monitor.getHandlerId(),
|
||||
};
|
||||
},
|
||||
drop(item: DragItem, monitor) {
|
||||
handleDrop(item);
|
||||
},
|
||||
hover(item: DragItem, monitor) {
|
||||
const [, drop] = useDrop({
|
||||
accept: 'bookmark',
|
||||
hover(item: { index: number }) {
|
||||
if (!ref.current) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -67,68 +25,60 @@ const BookmarkTableRow: FC<BookmarkItemProps> = ({ position, moveRow, row, ...re
|
|||
if (dragIndex === hoverIndex) {
|
||||
return;
|
||||
}
|
||||
|
||||
const hoverBoundingRect = ref.current?.getBoundingClientRect();
|
||||
|
||||
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
|
||||
|
||||
const clientOffset = monitor.getClientOffset();
|
||||
|
||||
const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
|
||||
|
||||
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
|
||||
return;
|
||||
}
|
||||
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
|
||||
return;
|
||||
}
|
||||
|
||||
moveRow(dragIndex, hoverIndex);
|
||||
|
||||
item.index = hoverIndex;
|
||||
},
|
||||
});
|
||||
|
||||
const [{ isDragging }, drag] = useDrag({
|
||||
type: ItemTypes.CARD,
|
||||
item: () => {
|
||||
return { id: row.tag, index: position };
|
||||
},
|
||||
type: 'bookmark',
|
||||
item: { index: position },
|
||||
collect: (monitor) => ({
|
||||
isDragging: monitor.isDragging(),
|
||||
}),
|
||||
});
|
||||
|
||||
if (position > 0) {
|
||||
drag(drop(ref));
|
||||
}
|
||||
drag(drop(ref));
|
||||
|
||||
return (
|
||||
<tr
|
||||
className={cn(
|
||||
'group cursor-pointer gap-2 rounded text-sm hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5',
|
||||
isDragging ? 'opacity-0' : 'opacity-100',
|
||||
)}
|
||||
key={row.tag}
|
||||
<TableRow
|
||||
ref={ref}
|
||||
data-handler-id={handlerId}
|
||||
role="menuitem"
|
||||
tabIndex={-1}
|
||||
{...rest}
|
||||
className="cursor-move hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
style={{ opacity: isDragging ? 0.5 : 1 }}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
<td className="w-96 py-2 pl-6 pr-3">{row.tag}</td>
|
||||
<td className={cn('w-28 py-2 pl-4 pr-3 sm:pl-6')}>
|
||||
<span className="py-1">{row.count}</span>
|
||||
</td>
|
||||
<td className="flex-grow py-2 pl-4 pr-4 sm:pl-6">
|
||||
{position > 0 && (
|
||||
<div className="flex w-full items-center justify-end gap-2 py-1 text-gray-400">
|
||||
<EditBookmarkButton bookmark={row} />
|
||||
<DeleteBookmarkButton bookmark={row.tag} />
|
||||
<TableCell className="w-full px-3 py-3.5 pl-6">
|
||||
<div className="truncate">{row.tag}</div>
|
||||
</TableCell>
|
||||
<TableCell className="w-full px-3 py-3.5 sm:pl-6">
|
||||
<div className="flex items-center justify-between py-1">
|
||||
<div>{row.count}</div>
|
||||
<div
|
||||
className="flex items-center gap-2"
|
||||
style={{
|
||||
opacity: isHovered ? 1 : 0,
|
||||
transition: 'opacity 0.1s ease-in-out',
|
||||
}}
|
||||
onFocus={() => setIsHovered(true)}
|
||||
onBlur={() => setIsHovered(false)}
|
||||
>
|
||||
<EditBookmarkButton
|
||||
bookmark={row}
|
||||
tabIndex={0}
|
||||
onFocus={() => setIsHovered(true)}
|
||||
onBlur={() => setIsHovered(false)}
|
||||
/>
|
||||
<DeleteBookmarkButton
|
||||
bookmark={row.tag}
|
||||
tabIndex={0}
|
||||
onFocus={() => setIsHovered(true)}
|
||||
onBlur={() => setIsHovered(false)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -88,7 +88,6 @@ export default function AssistantTool({
|
|||
<OGDialogTemplate
|
||||
showCloseButton={false}
|
||||
title={localize('com_ui_delete_tool')}
|
||||
mainClassName="px-0"
|
||||
className="max-w-[450px]"
|
||||
main={
|
||||
<Label className="text-left text-sm font-medium">
|
||||
|
|
|
|||
|
|
@ -72,12 +72,12 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center gap-4 px-2 py-4">
|
||||
<div className="flex items-center gap-4 py-4">
|
||||
<Input
|
||||
placeholder={localize('com_files_filter')}
|
||||
value={(table.getColumn('filename')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) => table.getColumn('filename')?.setFilterValue(event.target.value)}
|
||||
className="max-w-xs dark:border-gray-700"
|
||||
className="w-full dark:border-gray-700"
|
||||
/>
|
||||
</div>
|
||||
<div className="overflow-y-auto rounded-md border border-black/10 dark:border-white/10">
|
||||
|
|
@ -90,7 +90,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
|
|||
<TableHead
|
||||
key={header.id}
|
||||
style={{ width: index === 0 ? '75%' : '25%' }}
|
||||
className="sticky top-0 h-auto border-b border-black/10 bg-white py-1 text-left font-medium text-gray-700 dark:border-white/10 dark:bg-gray-800 dark:text-gray-100"
|
||||
className="sticky top-0 h-auto bg-white py-1 text-left font-medium text-gray-700 dark:bg-gray-700 dark:text-gray-100"
|
||||
>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
|
|
@ -133,17 +133,19 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
|
|||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="flex items-center justify-around space-x-2 py-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowFiles(true)}
|
||||
className="flex gap-2"
|
||||
>
|
||||
<LucideArrowUpLeft className="icon-sm" />
|
||||
{localize('com_sidepanel_manage_files')}
|
||||
</Button>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex items-center justify-between py-4">
|
||||
<div className="flex items-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowFiles(true)}
|
||||
className="flex gap-2"
|
||||
>
|
||||
<LucideArrowUpLeft className="icon-sm" />
|
||||
{localize('com_sidepanel_manage_files')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue