File size: 2,641 Bytes
f0743f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | import React, { useRef } from 'react';
import { useDrag, useDrop } from 'react-dnd';
import type { TConversationTag } from 'librechat-data-provider';
import { TableRow, TableCell, useToastContext } from '@librechat/client';
import { DeleteBookmarkButton, EditBookmarkButton } from '~/components/Bookmarks';
import { useConversationTagMutation } from '~/data-provider';
import { NotificationSeverity } from '~/common';
import { useLocalize } from '~/hooks';
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 ref = useRef<HTMLTableRowElement>(null);
const mutation = useConversationTagMutation({ context: 'BookmarkTableRow', tag: row.tag });
const localize = useLocalize();
const { showToast } = useToastContext();
const handleDrop = (item: DragItem) => {
mutation.mutate(
{ ...row, position: item.index },
{
onSuccess: () => {
showToast({
message: localize('com_ui_bookmarks_update_success'),
severity: NotificationSeverity.SUCCESS,
});
},
onError: () => {
showToast({
message: localize('com_ui_bookmarks_update_error'),
severity: NotificationSeverity.ERROR,
});
},
},
);
};
const [, drop] = useDrop({
accept: 'bookmark',
drop: handleDrop,
hover(item: DragItem) {
if (!ref.current || item.index === position) {
return;
}
moveRow(item.index, position);
item.index = position;
},
});
const [{ isDragging }, drag] = useDrag({
type: 'bookmark',
item: { index: position },
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
});
drag(drop(ref));
return (
<TableRow
ref={ref}
className="cursor-move hover:bg-surface-secondary"
style={{ opacity: isDragging ? 0.5 : 1 }}
>
<TableCell className="w-[70%] px-4 py-4">
<div className="overflow-hidden text-ellipsis whitespace-nowrap">{row.tag}</div>
</TableCell>
<TableCell className="w-[10%] px-12 py-4">{row.count}</TableCell>
<TableCell className="w-[20%] px-4 py-4">
<div className="flex gap-2">
<EditBookmarkButton bookmark={row} tabIndex={0} />
<DeleteBookmarkButton bookmark={row.tag} tabIndex={0} />
</div>
</TableCell>
</TableRow>
);
};
export default BookmarkTableRow;
|