mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-28 05:06:13 +01:00
🪄 refactor: UI Polish and Admin Dialog Unification (#11108)
* refactor(OpenSidebar): removed useless classNames
* style(Header): update hover styles across various components for improved UI consistency
* style(Nav): update hover styles in AccountSettings and SearchBar for improved UI consistency
* style: update button classes for consistent hover effects and improved UI responsiveness
* style(Nav, OpenSidebar, Header, Convo): improve UI responsiveness and animation transitions
* style(PresetsMenu, NewChat): update icon sizes and improve component styling for better UI consistency
* style(Nav, Root): enhance sidebar mobile animations and responsiveness for better UI experience
* style(ExportAndShareMenu, BookmarkMenu): update icon sizes for improved UI consistency
* style: remove transition duration from button classes for improved UI responsiveness
* style(CustomMenu, ModelSelector): update background colors for improved UI consistency and responsiveness
* style(ExportAndShareMenu): update icon color for improved UI consistency
* style(TemporaryChat): refine button styles for improved UI consistency and responsiveness
* style(BookmarkNav): refactor to use DropdownPopup and remove BookmarkNavItems for improved UI consistency and functionality
* style(CustomMenu, EndpointItem): enhance UI elements for improved consistency and accessibility
* style(EndpointItem): adjust gap in icon container for improved layout consistency
* style(CustomMenu, EndpointItem): update focus ring color for improved UI consistency
* style(EndpointItem): update icon color for improved UI consistency in dark theme
* style: update focus styles for improved accessibility and consistency across components
* refactor(Nav): extract sidebar width to NAV_WIDTH constant
Centralize mobile (320px) and desktop (260px) sidebar widths in a single
exported constant to avoid magic numbers and ensure consistency.
* fix(BookmarkNav): memoize handlers used in useMemo
Wrap handleTagClick and handleClear in useCallback and add them to the
dropdownItems useMemo dependency array to prevent stale closures.
* feat: introduce FilterInput component and replace existing inputs with it across multiple components
* feat(DataTable): replace custom input with FilterInput component for improved filtering
* fix: Nested dialog overlay stacking issue
Fixes overlay appearing behind content when opening nested dialogs.
Introduced dynamic z-index calculation based on dialog depth using React context.
- First dialog: overlay z-50, content z-100
- Nested dialogs increment by 60: overlay z-110/content z-160, etc.
Preserves a11y escape key handling from #10975 and #10851.
Regression from #11008 (afb67fcf1) which increased content z-index
without adjusting overlay z-index for nested dialog scenarios.
* Refactor admin settings components to use a unified AdminSettingsDialog
- Removed redundant code from AdminSettings, MCPAdminSettings, and Memories AdminSettings components.
- Introduced AdminSettingsDialog component to handle permission management for different sections.
- Updated permission handling logic to use a consistent structure across components.
- Enhanced role selection and permission confirmation features in the new dialog.
- Improved UI consistency and maintainability by centralizing dialog functionality.
* refactor(Memory): memory management UI components and replace MemoryViewer with MemoryPanel
* refactor(Memory): enhance UI components for Memory dialogs and improve input styling
* refactor(Bookmarks): improve bookmark management UI with enhanced styling
* refactor(translations): remove redundant filter input and bookmark count entries
* refactor(Convo): integrate useShiftKey hook for enhanced keyboard interaction and improve UI responsiveness
This commit is contained in:
Marco Beretta
GitHub
parent
c21733930c
commit
5181356bef
71 changed files with 2115 additions and 2191 deletions
|
|
@ -1,73 +1,21 @@
|
|||
import { useMemo, useEffect, useState } from 'react';
|
||||
import * as Ariakit from '@ariakit/react';
|
||||
import { ShieldEllipsis } from 'lucide-react';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { Permissions, SystemRoles, roleDefaults, PermissionTypes } from 'librechat-data-provider';
|
||||
import {
|
||||
Button,
|
||||
Switch,
|
||||
OGDialog,
|
||||
DropdownPopup,
|
||||
OGDialogTitle,
|
||||
OGDialogContent,
|
||||
OGDialogTrigger,
|
||||
useToastContext,
|
||||
} from '@librechat/client';
|
||||
import type { Control, UseFormSetValue, UseFormGetValues } from 'react-hook-form';
|
||||
import { Permissions, PermissionTypes } from 'librechat-data-provider';
|
||||
import { useToastContext } from '@librechat/client';
|
||||
import { AdminSettingsDialog } from '~/components/ui';
|
||||
import { useUpdateAgentPermissionsMutation } from '~/data-provider';
|
||||
import { useLocalize, useAuthContext } from '~/hooks';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import type { PermissionConfig } from '~/components/ui';
|
||||
|
||||
type FormValues = Record<Permissions, boolean>;
|
||||
|
||||
type LabelControllerProps = {
|
||||
label: string;
|
||||
agentPerm: Permissions;
|
||||
control: Control<FormValues, unknown, FormValues>;
|
||||
setValue: UseFormSetValue<FormValues>;
|
||||
getValues: UseFormGetValues<FormValues>;
|
||||
};
|
||||
|
||||
const LabelController: React.FC<LabelControllerProps> = ({
|
||||
control,
|
||||
agentPerm,
|
||||
label,
|
||||
getValues,
|
||||
setValue,
|
||||
}) => (
|
||||
<div className="mb-4 flex items-center justify-between gap-2">
|
||||
<button
|
||||
className="cursor-pointer select-none"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setValue(agentPerm, !getValues(agentPerm), {
|
||||
shouldDirty: true,
|
||||
})
|
||||
}
|
||||
tabIndex={0}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
<Controller
|
||||
name={agentPerm}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Switch
|
||||
{...field}
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
value={field.value.toString()}
|
||||
aria-label={label}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
const permissions: PermissionConfig[] = [
|
||||
{ permission: Permissions.SHARED_GLOBAL, labelKey: 'com_ui_agents_allow_share' },
|
||||
{ permission: Permissions.CREATE, labelKey: 'com_ui_agents_allow_create' },
|
||||
{ permission: Permissions.USE, labelKey: 'com_ui_agents_allow_use' },
|
||||
];
|
||||
|
||||
const AdminSettings = () => {
|
||||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
const { user, roles } = useAuthContext();
|
||||
const { mutate, isLoading } = useUpdateAgentPermissionsMutation({
|
||||
|
||||
const mutation = useUpdateAgentPermissionsMutation({
|
||||
onSuccess: () => {
|
||||
showToast({ status: 'success', message: localize('com_ui_saved') });
|
||||
},
|
||||
|
|
@ -76,157 +24,14 @@ const AdminSettings = () => {
|
|||
},
|
||||
});
|
||||
|
||||
const [isRoleMenuOpen, setIsRoleMenuOpen] = useState(false);
|
||||
const [selectedRole, setSelectedRole] = useState<SystemRoles>(SystemRoles.USER);
|
||||
|
||||
const defaultValues = useMemo(() => {
|
||||
const rolePerms = roles?.[selectedRole]?.permissions;
|
||||
if (rolePerms) {
|
||||
return rolePerms[PermissionTypes.AGENTS];
|
||||
}
|
||||
return roleDefaults[selectedRole].permissions[PermissionTypes.AGENTS];
|
||||
}, [roles, selectedRole]);
|
||||
|
||||
const {
|
||||
reset,
|
||||
control,
|
||||
setValue,
|
||||
getValues,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<FormValues>({
|
||||
mode: 'onChange',
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const value = roles?.[selectedRole]?.permissions?.[PermissionTypes.AGENTS];
|
||||
if (value) {
|
||||
reset(value);
|
||||
} else {
|
||||
reset(roleDefaults[selectedRole].permissions[PermissionTypes.AGENTS]);
|
||||
}
|
||||
}, [roles, selectedRole, reset]);
|
||||
|
||||
if (user?.role !== SystemRoles.ADMIN) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const labelControllerData = [
|
||||
{
|
||||
agentPerm: Permissions.SHARED_GLOBAL,
|
||||
label: localize('com_ui_agents_allow_share'),
|
||||
},
|
||||
{
|
||||
agentPerm: Permissions.CREATE,
|
||||
label: localize('com_ui_agents_allow_create'),
|
||||
},
|
||||
{
|
||||
agentPerm: Permissions.USE,
|
||||
label: localize('com_ui_agents_allow_use'),
|
||||
},
|
||||
];
|
||||
|
||||
const onSubmit = (data: FormValues) => {
|
||||
mutate({ roleName: selectedRole, updates: data });
|
||||
};
|
||||
|
||||
const roleDropdownItems = [
|
||||
{
|
||||
label: SystemRoles.USER,
|
||||
onClick: () => {
|
||||
setSelectedRole(SystemRoles.USER);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: SystemRoles.ADMIN,
|
||||
onClick: () => {
|
||||
setSelectedRole(SystemRoles.ADMIN);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<OGDialog>
|
||||
<OGDialogTrigger asChild>
|
||||
<Button
|
||||
size={'sm'}
|
||||
variant={'outline'}
|
||||
className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-primary"
|
||||
aria-label={localize('com_ui_admin_settings')}
|
||||
>
|
||||
<ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
|
||||
{localize('com_ui_admin_settings')}
|
||||
</Button>
|
||||
</OGDialogTrigger>
|
||||
<OGDialogContent className="border-border-light bg-surface-primary text-text-primary lg:w-1/4">
|
||||
<OGDialogTitle>
|
||||
{localize('com_ui_admin_settings_section', { section: localize('com_ui_agents') })}
|
||||
</OGDialogTitle>
|
||||
<div className="p-2">
|
||||
{/* Role selection dropdown */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">{localize('com_ui_role_select')}:</span>
|
||||
<DropdownPopup
|
||||
unmountOnHide={true}
|
||||
menuId="role-dropdown"
|
||||
isOpen={isRoleMenuOpen}
|
||||
setIsOpen={setIsRoleMenuOpen}
|
||||
trigger={
|
||||
<Ariakit.MenuButton className="inline-flex w-1/4 items-center justify-center rounded-lg border border-border-light bg-transparent px-2 py-1 text-text-primary transition-all ease-in-out hover:bg-surface-tertiary">
|
||||
{selectedRole}
|
||||
</Ariakit.MenuButton>
|
||||
}
|
||||
items={roleDropdownItems}
|
||||
itemClassName="items-center justify-center"
|
||||
sameWidth={true}
|
||||
/>
|
||||
</div>
|
||||
{/* Permissions form */}
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="py-5">
|
||||
{labelControllerData.map(({ agentPerm, label }) => (
|
||||
<div key={agentPerm}>
|
||||
<LabelController
|
||||
control={control}
|
||||
agentPerm={agentPerm}
|
||||
label={label}
|
||||
getValues={getValues}
|
||||
setValue={setValue}
|
||||
/>
|
||||
{selectedRole === SystemRoles.ADMIN && agentPerm === Permissions.USE && (
|
||||
<>
|
||||
<div className="mb-2 max-w-full whitespace-normal break-words text-sm text-red-600">
|
||||
<span>{localize('com_ui_admin_access_warning')}</span>
|
||||
{'\n'}
|
||||
<a
|
||||
href="https://www.librechat.ai/docs/configuration/librechat_yaml/object_structure/interface"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-blue-500 underline"
|
||||
>
|
||||
{localize('com_ui_more_info')}
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSubmit(onSubmit)}
|
||||
disabled={isSubmitting || isLoading}
|
||||
className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring-primary"
|
||||
>
|
||||
{localize('com_ui_save')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</OGDialogContent>
|
||||
</OGDialog>
|
||||
<AdminSettingsDialog
|
||||
permissionType={PermissionTypes.AGENTS}
|
||||
sectionKey="com_ui_agents"
|
||||
permissions={permissions}
|
||||
menuId="agent-role-dropdown"
|
||||
mutation={mutation}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
111
client/src/components/SidePanel/Bookmarks/BookmarkCard.tsx
Normal file
111
client/src/components/SidePanel/Bookmarks/BookmarkCard.tsx
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
import React, { useRef } from 'react';
|
||||
import { useDrag, useDrop } from 'react-dnd';
|
||||
import { GripVertical } from 'lucide-react';
|
||||
import type { TConversationTag } from 'librechat-data-provider';
|
||||
import { TooltipAnchor, useToastContext } from '@librechat/client';
|
||||
import { useConversationTagMutation } from '~/data-provider';
|
||||
import { NotificationSeverity } from '~/common';
|
||||
import BookmarkCardActions from './BookmarkCardActions';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
interface BookmarkCardProps {
|
||||
bookmark: TConversationTag;
|
||||
position: number;
|
||||
moveRow: (dragIndex: number, hoverIndex: number) => void;
|
||||
}
|
||||
|
||||
interface DragItem {
|
||||
index: number;
|
||||
id: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
export default function BookmarkCard({ bookmark, position, moveRow }: BookmarkCardProps) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
|
||||
const mutation = useConversationTagMutation({
|
||||
context: 'BookmarkCard',
|
||||
tag: bookmark.tag,
|
||||
});
|
||||
|
||||
const handleDrop = (item: DragItem) => {
|
||||
mutation.mutate(
|
||||
{ ...bookmark, 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 (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'flex cursor-move items-center gap-2 rounded-lg px-3 py-2.5',
|
||||
'border border-border-light bg-transparent',
|
||||
'hover:bg-surface-secondary',
|
||||
isDragging && 'opacity-50',
|
||||
)}
|
||||
>
|
||||
{/* Drag handle */}
|
||||
<GripVertical className="size-4 shrink-0 text-text-tertiary" aria-hidden="true" />
|
||||
|
||||
{/* Tag name */}
|
||||
<span className="min-w-0 flex-1 truncate text-sm font-semibold text-text-primary">
|
||||
{bookmark.tag}
|
||||
</span>
|
||||
|
||||
{/* Count badge */}
|
||||
<TooltipAnchor
|
||||
description={`${bookmark.count} ${localize(bookmark.count === 1 ? 'com_ui_conversation' : 'com_ui_conversations')}`}
|
||||
side="top"
|
||||
render={
|
||||
<span className="shrink-0 rounded-full bg-surface-tertiary px-2 py-0.5 text-xs text-text-secondary">
|
||||
{bookmark.count}
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="shrink-0">
|
||||
<BookmarkCardActions bookmark={bookmark} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
import { useState, useRef, useCallback } from 'react';
|
||||
import { Pencil, Trash2 } from 'lucide-react';
|
||||
import type { TConversationTag } from 'librechat-data-provider';
|
||||
import {
|
||||
Button,
|
||||
OGDialog,
|
||||
OGDialogTrigger,
|
||||
OGDialogTemplate,
|
||||
TooltipAnchor,
|
||||
useToastContext,
|
||||
} from '@librechat/client';
|
||||
import { useDeleteConversationTagMutation } from '~/data-provider';
|
||||
import { BookmarkEditDialog } from '~/components/Bookmarks';
|
||||
import { NotificationSeverity } from '~/common';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
interface BookmarkCardActionsProps {
|
||||
bookmark: TConversationTag;
|
||||
}
|
||||
|
||||
export default function BookmarkCardActions({ bookmark }: BookmarkCardActionsProps) {
|
||||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
|
||||
const [editOpen, setEditOpen] = useState(false);
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
const editTriggerRef = useRef<HTMLButtonElement>(null);
|
||||
const deleteTriggerRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
const deleteBookmarkMutation = useDeleteConversationTagMutation({
|
||||
onSuccess: () => {
|
||||
showToast({
|
||||
message: localize('com_ui_bookmarks_delete_success'),
|
||||
});
|
||||
setDeleteOpen(false);
|
||||
},
|
||||
onError: () => {
|
||||
showToast({
|
||||
message: localize('com_ui_bookmarks_delete_error'),
|
||||
severity: NotificationSeverity.ERROR,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const confirmDelete = useCallback(async () => {
|
||||
await deleteBookmarkMutation.mutateAsync(bookmark.tag);
|
||||
}, [bookmark.tag, deleteBookmarkMutation]);
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
{/* Edit button */}
|
||||
<BookmarkEditDialog
|
||||
context="BookmarkCardActions"
|
||||
bookmark={bookmark}
|
||||
open={editOpen}
|
||||
setOpen={setEditOpen}
|
||||
triggerRef={editTriggerRef}
|
||||
>
|
||||
<OGDialogTrigger asChild>
|
||||
<TooltipAnchor
|
||||
description={localize('com_ui_edit')}
|
||||
side="top"
|
||||
render={
|
||||
<Button
|
||||
ref={editTriggerRef}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-7"
|
||||
aria-label={localize('com_ui_bookmarks_edit')}
|
||||
onClick={() => setEditOpen(true)}
|
||||
>
|
||||
<Pencil className="size-4" aria-hidden="true" />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</OGDialogTrigger>
|
||||
</BookmarkEditDialog>
|
||||
|
||||
{/* Delete button */}
|
||||
<OGDialog open={deleteOpen} onOpenChange={setDeleteOpen} triggerRef={deleteTriggerRef}>
|
||||
<OGDialogTrigger asChild>
|
||||
<TooltipAnchor
|
||||
description={localize('com_ui_delete')}
|
||||
side="top"
|
||||
render={
|
||||
<Button
|
||||
ref={deleteTriggerRef}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-7"
|
||||
aria-label={localize('com_ui_bookmarks_delete')}
|
||||
onClick={() => setDeleteOpen(true)}
|
||||
>
|
||||
<Trash2 className="size-4" aria-hidden="true" />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</OGDialogTrigger>
|
||||
<OGDialogTemplate
|
||||
showCloseButton={false}
|
||||
title={localize('com_ui_bookmarks_delete')}
|
||||
className="max-w-[450px]"
|
||||
main={
|
||||
<p className="text-left text-sm text-text-secondary">
|
||||
{localize('com_ui_bookmark_delete_confirm')} <strong>{bookmark.tag}</strong>
|
||||
</p>
|
||||
}
|
||||
selection={{
|
||||
selectHandler: confirmDelete,
|
||||
selectClasses:
|
||||
'bg-destructive text-white transition-all duration-200 hover:bg-destructive/80',
|
||||
selectText: localize('com_ui_delete'),
|
||||
}}
|
||||
/>
|
||||
</OGDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { Bookmark } from 'lucide-react';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
interface BookmarkEmptyStateProps {
|
||||
isFiltered?: boolean;
|
||||
}
|
||||
|
||||
export default function BookmarkEmptyState({ isFiltered = false }: BookmarkEmptyStateProps) {
|
||||
const localize = useLocalize();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||
<div className="mb-3 rounded-full bg-surface-secondary p-3">
|
||||
<Bookmark className="size-6 text-text-tertiary" aria-hidden="true" />
|
||||
</div>
|
||||
<p className="text-sm text-text-secondary">
|
||||
{isFiltered ? localize('com_ui_no_bookmarks_match') : localize('com_ui_no_bookmarks')}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
32
client/src/components/SidePanel/Bookmarks/BookmarkList.tsx
Normal file
32
client/src/components/SidePanel/Bookmarks/BookmarkList.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import type { TConversationTag } from 'librechat-data-provider';
|
||||
import BookmarkEmptyState from './BookmarkEmptyState';
|
||||
import BookmarkCard from './BookmarkCard';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
interface BookmarkListProps {
|
||||
bookmarks: TConversationTag[];
|
||||
moveRow: (dragIndex: number, hoverIndex: number) => void;
|
||||
isFiltered?: boolean;
|
||||
}
|
||||
|
||||
export default function BookmarkList({
|
||||
bookmarks,
|
||||
moveRow,
|
||||
isFiltered = false,
|
||||
}: BookmarkListProps) {
|
||||
const localize = useLocalize();
|
||||
|
||||
if (bookmarks.length === 0) {
|
||||
return <BookmarkEmptyState isFiltered={isFiltered} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2" role="list" aria-label={localize('com_ui_bookmarks')}>
|
||||
{bookmarks.map((bookmark) => (
|
||||
<div key={bookmark._id} role="listitem">
|
||||
<BookmarkCard bookmark={bookmark} position={bookmark.position} moveRow={moveRow} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,22 +1,14 @@
|
|||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { BookmarkPlusIcon } from 'lucide-react';
|
||||
import {
|
||||
Table,
|
||||
Input,
|
||||
Button,
|
||||
TableRow,
|
||||
TableHead,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHeader,
|
||||
OGDialogTrigger,
|
||||
} from '@librechat/client';
|
||||
import { Plus } from 'lucide-react';
|
||||
import { Button, FilterInput, OGDialogTrigger, TooltipAnchor } from '@librechat/client';
|
||||
import type { ConversationTagsResponse, TConversationTag } from 'librechat-data-provider';
|
||||
import { BookmarkContext, useBookmarkContext } from '~/Providers/BookmarkContext';
|
||||
import { BookmarkEditDialog } from '~/components/Bookmarks';
|
||||
import BookmarkTableRow from './BookmarkTableRow';
|
||||
import BookmarkList from './BookmarkList';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
const pageSize = 10;
|
||||
|
||||
const removeDuplicates = (bookmarks: TConversationTag[]) => {
|
||||
const seen = new Set();
|
||||
return bookmarks.filter((bookmark) => {
|
||||
|
|
@ -31,8 +23,7 @@ const BookmarkTable = () => {
|
|||
const [rows, setRows] = useState<ConversationTagsResponse>([]);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [open, setOpen] = useState(false);
|
||||
const pageSize = 10;
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
|
||||
const { bookmarks = [] } = useBookmarkContext();
|
||||
|
||||
|
|
@ -41,6 +32,11 @@ const BookmarkTable = () => {
|
|||
setRows(_bookmarks);
|
||||
}, [bookmarks]);
|
||||
|
||||
// Reset page when search changes
|
||||
useEffect(() => {
|
||||
setPageIndex(0);
|
||||
}, [searchQuery]);
|
||||
|
||||
const moveRow = useCallback((dragIndex: number, hoverIndex: number) => {
|
||||
setRows((prevTags: TConversationTag[]) => {
|
||||
const updatedRows = [...prevTags];
|
||||
|
|
@ -50,86 +46,60 @@ const BookmarkTable = () => {
|
|||
});
|
||||
}, []);
|
||||
|
||||
const renderRow = useCallback(
|
||||
(row: TConversationTag) => (
|
||||
<BookmarkTableRow key={row._id} moveRow={moveRow} row={row} position={row.position} />
|
||||
),
|
||||
[moveRow],
|
||||
);
|
||||
|
||||
const filteredRows = rows.filter(
|
||||
(row) => row.tag && row.tag.toLowerCase().includes(searchQuery.toLowerCase()),
|
||||
);
|
||||
|
||||
const currentRows = filteredRows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
|
||||
const totalPages = Math.ceil(filteredRows.length / pageSize);
|
||||
|
||||
return (
|
||||
<BookmarkContext.Provider value={{ bookmarks }}>
|
||||
<div role="region" aria-label={localize('com_ui_bookmarks')} className="mt-2 space-y-2">
|
||||
<div className="relative flex items-center gap-4">
|
||||
<Input
|
||||
id="bookmarks-filter"
|
||||
placeholder=" "
|
||||
<div role="region" aria-label={localize('com_ui_bookmarks')} className="mt-2 space-y-3">
|
||||
{/* Header: Filter + Create Button */}
|
||||
<div className="flex items-center gap-2">
|
||||
<FilterInput
|
||||
inputId="bookmarks-filter"
|
||||
label={localize('com_ui_bookmarks_filter')}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
aria-label={localize('com_ui_bookmarks_filter')}
|
||||
className="peer"
|
||||
containerClassName="flex-1"
|
||||
/>
|
||||
<label
|
||||
htmlFor="bookmarks-filter"
|
||||
className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-text-secondary transition-all duration-200 peer-focus:top-0 peer-focus:bg-background peer-focus:px-1 peer-focus:text-xs peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:bg-background peer-[:not(:placeholder-shown)]:px-1 peer-[:not(:placeholder-shown)]:text-xs"
|
||||
<BookmarkEditDialog context="BookmarkTable" open={createOpen} setOpen={setCreateOpen}>
|
||||
<OGDialogTrigger asChild>
|
||||
<TooltipAnchor
|
||||
description={localize('com_ui_bookmarks_new')}
|
||||
side="bottom"
|
||||
render={
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="shrink-0 bg-transparent"
|
||||
aria-label={localize('com_ui_bookmarks_new')}
|
||||
onClick={() => setCreateOpen(true)}
|
||||
>
|
||||
<Plus className="size-4" aria-hidden="true" />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</OGDialogTrigger>
|
||||
</BookmarkEditDialog>
|
||||
</div>
|
||||
|
||||
{/* Bookmark List */}
|
||||
<BookmarkList
|
||||
bookmarks={currentRows}
|
||||
moveRow={moveRow}
|
||||
isFiltered={searchQuery.length > 0}
|
||||
/>
|
||||
|
||||
{/* Pagination */}
|
||||
{filteredRows.length > pageSize && (
|
||||
<div
|
||||
className="flex items-center justify-end gap-2"
|
||||
role="navigation"
|
||||
aria-label="Pagination"
|
||||
>
|
||||
{localize('com_ui_bookmarks_filter')}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-border-light bg-transparent shadow-sm transition-colors">
|
||||
<Table className="w-full table-fixed">
|
||||
<TableHeader>
|
||||
<TableRow className="border-b border-border-light">
|
||||
<TableHead className="w-[70%] bg-surface-secondary py-3 text-left text-sm font-medium text-text-secondary">
|
||||
<div>{localize('com_ui_bookmarks_title')}</div>
|
||||
</TableHead>
|
||||
<TableHead className="w-[30%] bg-surface-secondary py-3 text-left text-sm font-medium text-text-secondary">
|
||||
<div>{localize('com_ui_bookmarks_count')}</div>
|
||||
</TableHead>
|
||||
<TableHead className="w-[40%] bg-surface-secondary py-3 text-left text-sm font-medium text-text-secondary">
|
||||
<div>{localize('com_assistants_actions')}</div>
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{currentRows.length ? (
|
||||
currentRows.map(renderRow)
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={3} className="h-24 text-center text-sm text-text-secondary">
|
||||
{localize('com_ui_no_bookmarks')}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex justify-between gap-2">
|
||||
<BookmarkEditDialog context="BookmarkPanel" open={open} setOpen={setOpen}>
|
||||
<OGDialogTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full gap-2 text-sm"
|
||||
aria-label={localize('com_ui_bookmarks_new')}
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
<BookmarkPlusIcon className="size-4" aria-hidden="true" />
|
||||
<div className="break-all">{localize('com_ui_bookmarks_new')}</div>
|
||||
</Button>
|
||||
</OGDialogTrigger>
|
||||
</BookmarkEditDialog>
|
||||
</div>
|
||||
<div className="flex items-center gap-2" role="navigation" aria-label="Pagination">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
|
|
@ -139,24 +109,20 @@ const BookmarkTable = () => {
|
|||
>
|
||||
{localize('com_ui_prev')}
|
||||
</Button>
|
||||
<div aria-live="polite" className="text-sm">
|
||||
{`${pageIndex + 1} / ${Math.ceil(filteredRows.length / pageSize)}`}
|
||||
<div className="whitespace-nowrap text-sm" aria-live="polite">
|
||||
{pageIndex + 1} / {totalPages}
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setPageIndex((prev) =>
|
||||
(prev + 1) * pageSize < filteredRows.length ? prev + 1 : prev,
|
||||
)
|
||||
}
|
||||
disabled={(pageIndex + 1) * pageSize >= filteredRows.length}
|
||||
onClick={() => setPageIndex((prev) => (prev + 1 < totalPages ? prev + 1 : prev))}
|
||||
disabled={pageIndex + 1 >= totalPages}
|
||||
aria-label={localize('com_ui_next')}
|
||||
>
|
||||
{localize('com_ui_next')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</BookmarkContext.Provider>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,90 +0,0 @@
|
|||
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;
|
||||
6
client/src/components/SidePanel/Bookmarks/index.ts
Normal file
6
client/src/components/SidePanel/Bookmarks/index.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export { default as BookmarkPanel } from './BookmarkPanel';
|
||||
export { default as BookmarkTable } from './BookmarkTable';
|
||||
export { default as BookmarkList } from './BookmarkList';
|
||||
export { default as BookmarkCard } from './BookmarkCard';
|
||||
export { default as BookmarkCardActions } from './BookmarkCardActions';
|
||||
export { default as BookmarkEmptyState } from './BookmarkEmptyState';
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
import { useState, useCallback, useMemo, useRef } from 'react';
|
||||
import { ArrowUpLeft } from 'lucide-react';
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Table,
|
||||
Button,
|
||||
TableRow,
|
||||
TableHead,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
FilterInput,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
useToastContext,
|
||||
} from '@librechat/client';
|
||||
import {
|
||||
|
|
@ -182,22 +182,12 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
|
|||
|
||||
return (
|
||||
<div role="region" aria-label={localize('com_files_table')} className="mt-2 space-y-2">
|
||||
<div className="relative flex items-center gap-4">
|
||||
<Input
|
||||
id="filename-filter"
|
||||
placeholder=" "
|
||||
value={filenameFilter ?? ''}
|
||||
onChange={(event) => table.getColumn('filename')?.setFilterValue(event.target.value)}
|
||||
aria-label={localize('com_files_filter')}
|
||||
className="peer"
|
||||
/>
|
||||
<label
|
||||
htmlFor="filename-filter"
|
||||
className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-text-secondary transition-all duration-200 peer-focus:top-0 peer-focus:bg-background peer-focus:px-1 peer-focus:text-xs peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:bg-background peer-[:not(:placeholder-shown)]:px-1 peer-[:not(:placeholder-shown)]:text-xs"
|
||||
>
|
||||
{localize('com_files_filter')}
|
||||
</label>
|
||||
</div>
|
||||
<FilterInput
|
||||
inputId="filename-filter"
|
||||
label={localize('com_files_filter')}
|
||||
value={filenameFilter ?? ''}
|
||||
onChange={(event) => table.getColumn('filename')?.setFilterValue(event.target.value)}
|
||||
/>
|
||||
|
||||
<div className="rounded-lg border border-border-light bg-transparent shadow-sm transition-colors">
|
||||
<div className="overflow-x-auto">
|
||||
|
|
|
|||
|
|
@ -1,72 +1,21 @@
|
|||
import { useMemo, useEffect, useState } from 'react';
|
||||
import * as Ariakit from '@ariakit/react';
|
||||
import { ShieldEllipsis } from 'lucide-react';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { Permissions, SystemRoles, roleDefaults, PermissionTypes } from 'librechat-data-provider';
|
||||
import {
|
||||
Button,
|
||||
Switch,
|
||||
OGDialog,
|
||||
DropdownPopup,
|
||||
OGDialogTitle,
|
||||
OGDialogContent,
|
||||
OGDialogTrigger,
|
||||
useToastContext,
|
||||
} from '@librechat/client';
|
||||
import type { Control, UseFormSetValue, UseFormGetValues } from 'react-hook-form';
|
||||
import { Permissions, PermissionTypes } from 'librechat-data-provider';
|
||||
import { useToastContext } from '@librechat/client';
|
||||
import { AdminSettingsDialog } from '~/components/ui';
|
||||
import { useUpdateMCPServersPermissionsMutation } from '~/data-provider';
|
||||
import { useLocalize, useAuthContext } from '~/hooks';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import type { PermissionConfig } from '~/components/ui';
|
||||
|
||||
type FormValues = Record<Permissions, boolean>;
|
||||
|
||||
type LabelControllerProps = {
|
||||
label: string;
|
||||
mcpServersPerm: Permissions;
|
||||
control: Control<FormValues, unknown, FormValues>;
|
||||
setValue: UseFormSetValue<FormValues>;
|
||||
getValues: UseFormGetValues<FormValues>;
|
||||
};
|
||||
|
||||
const LabelController: React.FC<LabelControllerProps> = ({
|
||||
control,
|
||||
mcpServersPerm,
|
||||
label,
|
||||
getValues,
|
||||
setValue,
|
||||
}) => (
|
||||
<div className="mb-4 flex items-center justify-between gap-2">
|
||||
<button
|
||||
className="cursor-pointer select-none"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setValue(mcpServersPerm, !getValues(mcpServersPerm), {
|
||||
shouldDirty: true,
|
||||
})
|
||||
}
|
||||
tabIndex={0}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
<Controller
|
||||
name={mcpServersPerm}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Switch
|
||||
{...field}
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
value={field.value?.toString()}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
const permissions: PermissionConfig[] = [
|
||||
{ permission: Permissions.USE, labelKey: 'com_ui_mcp_servers_allow_use' },
|
||||
{ permission: Permissions.CREATE, labelKey: 'com_ui_mcp_servers_allow_create' },
|
||||
{ permission: Permissions.SHARE, labelKey: 'com_ui_mcp_servers_allow_share' },
|
||||
];
|
||||
|
||||
const MCPAdminSettings = () => {
|
||||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
const { user, roles } = useAuthContext();
|
||||
const { mutate, isLoading } = useUpdateMCPServersPermissionsMutation({
|
||||
|
||||
const mutation = useUpdateMCPServersPermissionsMutation({
|
||||
onSuccess: () => {
|
||||
showToast({ status: 'success', message: localize('com_ui_saved') });
|
||||
},
|
||||
|
|
@ -75,157 +24,14 @@ const MCPAdminSettings = () => {
|
|||
},
|
||||
});
|
||||
|
||||
const [isRoleMenuOpen, setIsRoleMenuOpen] = useState(false);
|
||||
const [selectedRole, setSelectedRole] = useState<SystemRoles>(SystemRoles.USER);
|
||||
|
||||
const defaultValues = useMemo(() => {
|
||||
const rolePerms = roles?.[selectedRole]?.permissions;
|
||||
if (rolePerms) {
|
||||
return rolePerms[PermissionTypes.MCP_SERVERS];
|
||||
}
|
||||
return roleDefaults[selectedRole].permissions[PermissionTypes.MCP_SERVERS];
|
||||
}, [roles, selectedRole]);
|
||||
|
||||
const {
|
||||
reset,
|
||||
control,
|
||||
setValue,
|
||||
getValues,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<FormValues>({
|
||||
mode: 'onChange',
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const value = roles?.[selectedRole]?.permissions?.[PermissionTypes.MCP_SERVERS];
|
||||
if (value) {
|
||||
reset(value);
|
||||
} else {
|
||||
reset(roleDefaults[selectedRole].permissions[PermissionTypes.MCP_SERVERS]);
|
||||
}
|
||||
}, [roles, selectedRole, reset]);
|
||||
|
||||
if (user?.role !== SystemRoles.ADMIN) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const labelControllerData = [
|
||||
{
|
||||
mcpServersPerm: Permissions.USE,
|
||||
label: localize('com_ui_mcp_servers_allow_use'),
|
||||
},
|
||||
{
|
||||
mcpServersPerm: Permissions.CREATE,
|
||||
label: localize('com_ui_mcp_servers_allow_create'),
|
||||
},
|
||||
{
|
||||
mcpServersPerm: Permissions.SHARE,
|
||||
label: localize('com_ui_mcp_servers_allow_share'),
|
||||
},
|
||||
];
|
||||
|
||||
const onSubmit = (data: FormValues) => {
|
||||
mutate({ roleName: selectedRole, updates: data });
|
||||
};
|
||||
|
||||
const roleDropdownItems = [
|
||||
{
|
||||
label: SystemRoles.USER,
|
||||
onClick: () => {
|
||||
setSelectedRole(SystemRoles.USER);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: SystemRoles.ADMIN,
|
||||
onClick: () => {
|
||||
setSelectedRole(SystemRoles.ADMIN);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<OGDialog>
|
||||
<OGDialogTrigger asChild>
|
||||
<Button
|
||||
size={'sm'}
|
||||
variant={'outline'}
|
||||
className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-primary"
|
||||
aria-label={localize('com_ui_admin_settings')}
|
||||
>
|
||||
<ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
|
||||
{localize('com_ui_admin_settings')}
|
||||
</Button>
|
||||
</OGDialogTrigger>
|
||||
<OGDialogContent className="border-border-light bg-surface-primary text-text-primary lg:w-1/4">
|
||||
<OGDialogTitle>{`${localize('com_ui_admin_settings')} - ${localize(
|
||||
'com_ui_mcp_servers',
|
||||
)}`}</OGDialogTitle>
|
||||
<div className="p-2">
|
||||
{/* Role selection dropdown */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">{localize('com_ui_role_select')}:</span>
|
||||
<DropdownPopup
|
||||
unmountOnHide={true}
|
||||
menuId="role-dropdown"
|
||||
isOpen={isRoleMenuOpen}
|
||||
setIsOpen={setIsRoleMenuOpen}
|
||||
trigger={
|
||||
<Ariakit.MenuButton className="inline-flex w-1/4 items-center justify-center rounded-lg border border-border-light bg-transparent px-2 py-1 text-text-primary transition-all ease-in-out hover:bg-surface-tertiary">
|
||||
{selectedRole}
|
||||
</Ariakit.MenuButton>
|
||||
}
|
||||
items={roleDropdownItems}
|
||||
itemClassName="items-center justify-center"
|
||||
sameWidth={true}
|
||||
/>
|
||||
</div>
|
||||
{/* Permissions form */}
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="py-5">
|
||||
{labelControllerData.map(({ mcpServersPerm, label }) => (
|
||||
<div key={mcpServersPerm}>
|
||||
<LabelController
|
||||
control={control}
|
||||
mcpServersPerm={mcpServersPerm}
|
||||
label={label}
|
||||
getValues={getValues}
|
||||
setValue={setValue}
|
||||
/>
|
||||
{selectedRole === SystemRoles.ADMIN && mcpServersPerm === Permissions.USE && (
|
||||
<>
|
||||
<div className="mb-2 max-w-full whitespace-normal break-words text-sm text-red-600">
|
||||
<span>{localize('com_ui_admin_access_warning')}</span>
|
||||
{'\n'}
|
||||
<a
|
||||
href="https://www.librechat.ai/docs/configuration/librechat_yaml/object_structure/interface"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-blue-500 underline"
|
||||
>
|
||||
{localize('com_ui_more_info')}
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSubmit(onSubmit)}
|
||||
disabled={isSubmitting || isLoading}
|
||||
className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-primary"
|
||||
>
|
||||
{localize('com_ui_save')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</OGDialogContent>
|
||||
</OGDialog>
|
||||
<AdminSettingsDialog
|
||||
permissionType={PermissionTypes.MCP_SERVERS}
|
||||
sectionKey="com_ui_mcp_servers"
|
||||
permissions={permissions}
|
||||
menuId="mcp-role-dropdown"
|
||||
mutation={mutation}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { useState, useRef, useMemo } from 'react';
|
||||
import { Plus, Search } from 'lucide-react';
|
||||
import { Plus } from 'lucide-react';
|
||||
import { PermissionTypes, Permissions } from 'librechat-data-provider';
|
||||
import { Button, Spinner, OGDialogTrigger, Input } from '@librechat/client';
|
||||
import { Button, Spinner, FilterInput, OGDialogTrigger } from '@librechat/client';
|
||||
import { useLocalize, useMCPServerManager, useHasAccess } from '~/hooks';
|
||||
import MCPServerList from './MCPServerList';
|
||||
import MCPServerDialog from './MCPServerDialog';
|
||||
|
|
@ -42,16 +42,12 @@ export default function MCPBuilderPanel() {
|
|||
<MCPAdminSettings />
|
||||
|
||||
{/* Search Input */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" />
|
||||
<Input
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder={localize('com_ui_filter_mcp_servers')}
|
||||
className="pl-9"
|
||||
aria-label={localize('com_ui_filter_mcp_servers')}
|
||||
/>
|
||||
</div>
|
||||
<FilterInput
|
||||
inputId="mcp-filter"
|
||||
label={localize('com_ui_filter_mcp_servers')}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
|
||||
{hasCreateAccess && (
|
||||
<MCPServerDialog open={showDialog} onOpenChange={setShowDialog} triggerRef={addButtonRef}>
|
||||
|
|
|
|||
|
|
@ -1,56 +1,23 @@
|
|||
import * as Ariakit from '@ariakit/react';
|
||||
import { useMemo, useEffect, useState } from 'react';
|
||||
import { ShieldEllipsis } from 'lucide-react';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { Permissions, SystemRoles, roleDefaults, PermissionTypes } from 'librechat-data-provider';
|
||||
import {
|
||||
OGDialog,
|
||||
OGDialogTitle,
|
||||
OGDialogContent,
|
||||
OGDialogTrigger,
|
||||
Button,
|
||||
Switch,
|
||||
DropdownPopup,
|
||||
useToastContext,
|
||||
} from '@librechat/client';
|
||||
import type { Control, UseFormSetValue, UseFormGetValues } from 'react-hook-form';
|
||||
import { Permissions, PermissionTypes } from 'librechat-data-provider';
|
||||
import { useToastContext } from '@librechat/client';
|
||||
import { AdminSettingsDialog } from '~/components/ui';
|
||||
import { useUpdateMemoryPermissionsMutation } from '~/data-provider';
|
||||
import { useLocalize, useAuthContext } from '~/hooks';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import type { PermissionConfig } from '~/components/ui';
|
||||
|
||||
type FormValues = Record<Permissions, boolean>;
|
||||
|
||||
type LabelControllerProps = {
|
||||
label: string;
|
||||
memoryPerm: Permissions;
|
||||
control: Control<FormValues, unknown, FormValues>;
|
||||
setValue: UseFormSetValue<FormValues>;
|
||||
getValues: UseFormGetValues<FormValues>;
|
||||
};
|
||||
|
||||
const LabelController: React.FC<LabelControllerProps> = ({ control, memoryPerm, label }) => (
|
||||
<div className="mb-4 flex items-center justify-between gap-2">
|
||||
{label}
|
||||
<Controller
|
||||
name={memoryPerm}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Switch
|
||||
{...field}
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
value={field.value.toString()}
|
||||
aria-label={label}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
const permissions: PermissionConfig[] = [
|
||||
{ permission: Permissions.USE, labelKey: 'com_ui_memories_allow_use' },
|
||||
{ permission: Permissions.CREATE, labelKey: 'com_ui_memories_allow_create' },
|
||||
{ permission: Permissions.UPDATE, labelKey: 'com_ui_memories_allow_update' },
|
||||
{ permission: Permissions.READ, labelKey: 'com_ui_memories_allow_read' },
|
||||
{ permission: Permissions.OPT_OUT, labelKey: 'com_ui_memories_allow_opt_out' },
|
||||
];
|
||||
|
||||
const AdminSettings = () => {
|
||||
const localize = useLocalize();
|
||||
const { user, roles } = useAuthContext();
|
||||
const { showToast } = useToastContext();
|
||||
const { mutate, isLoading } = useUpdateMemoryPermissionsMutation({
|
||||
|
||||
const mutation = useUpdateMemoryPermissionsMutation({
|
||||
onSuccess: () => {
|
||||
showToast({ status: 'success', message: localize('com_ui_saved') });
|
||||
},
|
||||
|
|
@ -59,162 +26,14 @@ const AdminSettings = () => {
|
|||
},
|
||||
});
|
||||
|
||||
const [isRoleMenuOpen, setIsRoleMenuOpen] = useState(false);
|
||||
const [selectedRole, setSelectedRole] = useState<SystemRoles>(SystemRoles.USER);
|
||||
|
||||
const defaultValues = useMemo(() => {
|
||||
if (roles?.[selectedRole]?.permissions) {
|
||||
return roles?.[selectedRole]?.permissions?.[PermissionTypes.MEMORIES];
|
||||
}
|
||||
return roleDefaults[selectedRole].permissions[PermissionTypes.MEMORIES];
|
||||
}, [roles, selectedRole]);
|
||||
|
||||
const {
|
||||
reset,
|
||||
control,
|
||||
setValue,
|
||||
getValues,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<FormValues>({
|
||||
mode: 'onChange',
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (roles?.[selectedRole]?.permissions?.[PermissionTypes.MEMORIES]) {
|
||||
reset(roles?.[selectedRole]?.permissions?.[PermissionTypes.MEMORIES]);
|
||||
} else {
|
||||
reset(roleDefaults[selectedRole].permissions[PermissionTypes.MEMORIES]);
|
||||
}
|
||||
}, [roles, selectedRole, reset]);
|
||||
|
||||
if (user?.role !== SystemRoles.ADMIN) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const labelControllerData = [
|
||||
{
|
||||
memoryPerm: Permissions.USE,
|
||||
label: localize('com_ui_memories_allow_use'),
|
||||
},
|
||||
{
|
||||
memoryPerm: Permissions.CREATE,
|
||||
label: localize('com_ui_memories_allow_create'),
|
||||
},
|
||||
{
|
||||
memoryPerm: Permissions.UPDATE,
|
||||
label: localize('com_ui_memories_allow_update'),
|
||||
},
|
||||
{
|
||||
memoryPerm: Permissions.READ,
|
||||
label: localize('com_ui_memories_allow_read'),
|
||||
},
|
||||
{
|
||||
memoryPerm: Permissions.OPT_OUT,
|
||||
label: localize('com_ui_memories_allow_opt_out'),
|
||||
},
|
||||
];
|
||||
|
||||
const onSubmit = (data: FormValues) => {
|
||||
mutate({ roleName: selectedRole, updates: data });
|
||||
};
|
||||
|
||||
const roleDropdownItems = [
|
||||
{
|
||||
label: SystemRoles.USER,
|
||||
onClick: () => {
|
||||
setSelectedRole(SystemRoles.USER);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: SystemRoles.ADMIN,
|
||||
onClick: () => {
|
||||
setSelectedRole(SystemRoles.ADMIN);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<OGDialog>
|
||||
<OGDialogTrigger asChild>
|
||||
<Button
|
||||
size={'sm'}
|
||||
variant={'outline'}
|
||||
className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-primary"
|
||||
aria-label={localize('com_ui_admin_settings')}
|
||||
>
|
||||
<ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
|
||||
{localize('com_ui_admin_settings')}
|
||||
</Button>
|
||||
</OGDialogTrigger>
|
||||
<OGDialogContent className="border-border-light bg-surface-primary text-text-primary lg:w-1/4">
|
||||
<OGDialogTitle>
|
||||
{localize('com_ui_admin_settings_section', { section: localize('com_ui_memories') })}
|
||||
</OGDialogTitle>
|
||||
<div className="p-2">
|
||||
{/* Role selection dropdown */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">{localize('com_ui_role_select')}:</span>
|
||||
<DropdownPopup
|
||||
unmountOnHide={true}
|
||||
menuId="memory-role-dropdown"
|
||||
isOpen={isRoleMenuOpen}
|
||||
setIsOpen={setIsRoleMenuOpen}
|
||||
trigger={
|
||||
<Ariakit.MenuButton className="inline-flex w-1/4 items-center justify-center rounded-lg border border-border-light bg-transparent px-2 py-1 text-text-primary transition-all ease-in-out hover:bg-surface-tertiary">
|
||||
{selectedRole}
|
||||
</Ariakit.MenuButton>
|
||||
}
|
||||
items={roleDropdownItems}
|
||||
itemClassName="items-center justify-center"
|
||||
sameWidth={true}
|
||||
/>
|
||||
</div>
|
||||
{/* Permissions form */}
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="py-5">
|
||||
{labelControllerData.map(({ memoryPerm, label }) => (
|
||||
<div key={memoryPerm}>
|
||||
<LabelController
|
||||
control={control}
|
||||
memoryPerm={memoryPerm}
|
||||
label={label}
|
||||
getValues={getValues}
|
||||
setValue={setValue}
|
||||
/>
|
||||
{selectedRole === SystemRoles.ADMIN && memoryPerm === Permissions.USE && (
|
||||
<>
|
||||
<div className="mb-2 max-w-full whitespace-normal break-words text-sm text-red-600">
|
||||
<span>{localize('com_ui_admin_access_warning')}</span>
|
||||
{'\n'}
|
||||
<a
|
||||
href="https://www.librechat.ai/docs/configuration/librechat_yaml/object_structure/interface"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-blue-500 underline"
|
||||
>
|
||||
{localize('com_ui_more_info')}
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting || isLoading}
|
||||
className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-primary"
|
||||
>
|
||||
{localize('com_ui_save')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</OGDialogContent>
|
||||
</OGDialog>
|
||||
<AdminSettingsDialog
|
||||
permissionType={PermissionTypes.MEMORIES}
|
||||
sectionKey="com_ui_memories"
|
||||
permissions={permissions}
|
||||
menuId="memory-role-dropdown"
|
||||
mutation={mutation}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
57
client/src/components/SidePanel/Memories/MemoryCard.tsx
Normal file
57
client/src/components/SidePanel/Memories/MemoryCard.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import type { TUserMemory } from 'librechat-data-provider';
|
||||
import MemoryCardActions from './MemoryCardActions';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
interface MemoryCardProps {
|
||||
memory: TUserMemory;
|
||||
hasUpdateAccess: boolean;
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string): string => {
|
||||
return new Date(dateString).toLocaleDateString(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
export default function MemoryCard({ memory, hasUpdateAccess }: MemoryCardProps) {
|
||||
const localize = useLocalize();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'rounded-lg px-3 py-2.5',
|
||||
'border border-border-light bg-transparent',
|
||||
'hover:bg-surface-secondary',
|
||||
)}
|
||||
>
|
||||
{/* Row 1: Key + Token count + Actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="truncate text-sm font-semibold text-text-primary">{memory.key}</span>
|
||||
{memory.tokenCount !== undefined && (
|
||||
<span className="shrink-0 text-xs text-text-secondary">
|
||||
{memory.tokenCount}{' '}
|
||||
{localize(memory.tokenCount === 1 ? 'com_ui_token' : 'com_ui_tokens')}
|
||||
</span>
|
||||
)}
|
||||
{hasUpdateAccess && (
|
||||
<div className="ml-auto shrink-0">
|
||||
<MemoryCardActions memory={memory} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Row 2: Value + Date */}
|
||||
<div className="mt-1 flex items-baseline gap-2">
|
||||
<p className="min-w-0 flex-1 truncate text-sm text-text-primary" title={memory.value}>
|
||||
{memory.value}
|
||||
</p>
|
||||
<span className="shrink-0 text-xs text-text-secondary">
|
||||
{formatDate(memory.updated_at)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
124
client/src/components/SidePanel/Memories/MemoryCardActions.tsx
Normal file
124
client/src/components/SidePanel/Memories/MemoryCardActions.tsx
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
import { useState, useRef } from 'react';
|
||||
import { Pencil } from 'lucide-react';
|
||||
import { Trans } from 'react-i18next';
|
||||
import {
|
||||
Label,
|
||||
Spinner,
|
||||
OGDialog,
|
||||
TrashIcon,
|
||||
TooltipAnchor,
|
||||
OGDialogTrigger,
|
||||
OGDialogTemplate,
|
||||
useToastContext,
|
||||
} from '@librechat/client';
|
||||
import type { TUserMemory } from 'librechat-data-provider';
|
||||
import { useDeleteMemoryMutation } from '~/data-provider';
|
||||
import MemoryEditDialog from './MemoryEditDialog';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
interface MemoryCardActionsProps {
|
||||
memory: TUserMemory;
|
||||
}
|
||||
|
||||
export default function MemoryCardActions({ memory }: MemoryCardActionsProps) {
|
||||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
const [editOpen, setEditOpen] = useState(false);
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
const triggerRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
const { mutate: deleteMemory, isLoading: isDeleting } = useDeleteMemoryMutation();
|
||||
|
||||
const buttonBaseClass = cn(
|
||||
'flex size-7 items-center justify-center rounded-md',
|
||||
'transition-colors duration-150',
|
||||
'text-text-secondary hover:text-text-primary',
|
||||
'hover:bg-surface-tertiary',
|
||||
'focus:outline-none focus-visible:ring-2 focus-visible:ring-border-heavy',
|
||||
);
|
||||
|
||||
const confirmDelete = () => {
|
||||
deleteMemory(memory.key, {
|
||||
onSuccess: () => {
|
||||
showToast({ message: localize('com_ui_deleted'), status: 'success' });
|
||||
setDeleteOpen(false);
|
||||
},
|
||||
onError: () => {
|
||||
showToast({ message: localize('com_ui_error'), status: 'error' });
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-0.5">
|
||||
{/* Edit Button */}
|
||||
<MemoryEditDialog
|
||||
open={editOpen}
|
||||
memory={memory}
|
||||
onOpenChange={setEditOpen}
|
||||
triggerRef={triggerRef as React.MutableRefObject<HTMLButtonElement | null>}
|
||||
>
|
||||
<OGDialogTrigger asChild>
|
||||
<TooltipAnchor
|
||||
description={localize('com_ui_edit_memory')}
|
||||
side="top"
|
||||
render={
|
||||
<button
|
||||
ref={triggerRef}
|
||||
className={buttonBaseClass}
|
||||
aria-label={localize('com_ui_edit')}
|
||||
onClick={() => setEditOpen(true)}
|
||||
>
|
||||
<Pencil className="size-3.5" aria-hidden="true" />
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
</OGDialogTrigger>
|
||||
</MemoryEditDialog>
|
||||
|
||||
{/* Delete Button */}
|
||||
<OGDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
|
||||
<OGDialogTrigger asChild>
|
||||
<TooltipAnchor
|
||||
description={localize('com_ui_delete_memory')}
|
||||
side="top"
|
||||
render={
|
||||
<button
|
||||
className={buttonBaseClass}
|
||||
aria-label={localize('com_ui_delete')}
|
||||
onClick={() => setDeleteOpen(true)}
|
||||
>
|
||||
{isDeleting ? (
|
||||
<Spinner className="size-3.5" />
|
||||
) : (
|
||||
<TrashIcon className="size-3.5" aria-hidden="true" />
|
||||
)}
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
</OGDialogTrigger>
|
||||
<OGDialogTemplate
|
||||
showCloseButton={false}
|
||||
title={localize('com_ui_delete_memory')}
|
||||
className="w-11/12 max-w-lg"
|
||||
main={
|
||||
<Label className="text-left text-sm font-medium">
|
||||
<Trans
|
||||
i18nKey="com_ui_delete_confirm_strong"
|
||||
values={{ title: memory.key }}
|
||||
components={{ strong: <strong /> }}
|
||||
/>
|
||||
</Label>
|
||||
}
|
||||
selection={{
|
||||
selectHandler: confirmDelete,
|
||||
selectClasses:
|
||||
'bg-red-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-800 text-white',
|
||||
selectText: localize('com_ui_delete'),
|
||||
}}
|
||||
/>
|
||||
</OGDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -108,11 +108,11 @@ export default function MemoryCreateDialog({
|
|||
<OGDialogTemplate
|
||||
title={localize('com_ui_create_memory')}
|
||||
showCloseButton={false}
|
||||
className="max-h-[90vh] w-11/12 overflow-y-auto md:max-w-lg"
|
||||
className="w-11/12 md:max-w-lg"
|
||||
main={
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="memory-key" className="text-sm font-medium">
|
||||
<Label htmlFor="memory-key" className="text-sm font-medium text-text-primary">
|
||||
{localize('com_ui_key')}
|
||||
</Label>
|
||||
<Input
|
||||
|
|
@ -123,9 +123,10 @@ export default function MemoryCreateDialog({
|
|||
placeholder={localize('com_ui_enter_key')}
|
||||
className="w-full"
|
||||
/>
|
||||
<p className="text-xs text-text-secondary">{localize('com_ui_memory_key_hint')}</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="memory-value" className="text-sm font-medium">
|
||||
<Label htmlFor="memory-value" className="text-sm font-medium text-text-primary">
|
||||
{localize('com_ui_value')}
|
||||
</Label>
|
||||
<textarea
|
||||
|
|
@ -134,8 +135,8 @@ export default function MemoryCreateDialog({
|
|||
onChange={(e) => setValue(e.target.value)}
|
||||
onKeyDown={handleKeyPress}
|
||||
placeholder={localize('com_ui_enter_value')}
|
||||
className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
rows={3}
|
||||
className="min-h-[100px] w-full resize-none rounded-lg border border-border-light bg-transparent px-3 py-2 text-sm text-text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-heavy"
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { PermissionTypes, Permissions } from 'librechat-data-provider';
|
||||
import {
|
||||
OGDialog,
|
||||
|
|
@ -12,6 +12,7 @@ import {
|
|||
import type { TUserMemory } from 'librechat-data-provider';
|
||||
import { useUpdateMemoryMutation, useMemoriesQuery } from '~/data-provider';
|
||||
import { useLocalize, useHasAccess } from '~/hooks';
|
||||
import MemoryUsageBadge from './MemoryUsageBadge';
|
||||
|
||||
interface MemoryEditDialogProps {
|
||||
memory: TUserMemory | null;
|
||||
|
|
@ -21,6 +22,16 @@ interface MemoryEditDialogProps {
|
|||
triggerRef?: React.MutableRefObject<HTMLButtonElement | null>;
|
||||
}
|
||||
|
||||
const formatDateTime = (dateString: string): string => {
|
||||
return new Date(dateString).toLocaleDateString(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
};
|
||||
|
||||
export default function MemoryEditDialog({
|
||||
memory,
|
||||
open,
|
||||
|
|
@ -116,6 +127,16 @@ export default function MemoryEditDialog({
|
|||
}
|
||||
};
|
||||
|
||||
// Calculate memory-specific usage: available = tokenLimit - (totalTokens - thisMemoryTokens)
|
||||
const memoryUsage = useMemo(() => {
|
||||
if (!memory?.tokenCount || !memData?.tokenLimit) {
|
||||
return null;
|
||||
}
|
||||
const availableForMemory = memData.tokenLimit - (memData.totalTokens ?? 0) + memory.tokenCount;
|
||||
const percentage = Math.round((memory.tokenCount / availableForMemory) * 100);
|
||||
return { availableForMemory, percentage };
|
||||
}, [memory?.tokenCount, memData?.tokenLimit, memData?.totalTokens]);
|
||||
|
||||
return (
|
||||
<OGDialog open={open} onOpenChange={onOpenChange} triggerRef={triggerRef}>
|
||||
{children}
|
||||
|
|
@ -125,38 +146,41 @@ export default function MemoryEditDialog({
|
|||
className="w-11/12 md:max-w-lg"
|
||||
main={
|
||||
<div className="space-y-4">
|
||||
{/* Memory metadata */}
|
||||
{memory && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs text-text-secondary">
|
||||
<div>
|
||||
{localize('com_ui_date')}:{' '}
|
||||
{new Date(memory.updated_at).toLocaleDateString(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</div>
|
||||
{/* Token Information */}
|
||||
{memory.tokenCount !== undefined && (
|
||||
<div>
|
||||
{memory.tokenCount.toLocaleString()}
|
||||
{memData?.tokenLimit && ` / ${memData.tokenLimit.toLocaleString()}`}{' '}
|
||||
{localize(memory.tokenCount === 1 ? 'com_ui_token' : 'com_ui_tokens')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Overall Memory Usage */}
|
||||
{memData?.tokenLimit && memData?.usagePercentage !== null && (
|
||||
<div className="text-xs text-text-secondary">
|
||||
{localize('com_ui_usage')}: {memData.usagePercentage}%{' '}
|
||||
</div>
|
||||
<div className="flex items-center justify-between rounded-lg border border-border-light bg-surface-secondary px-3 py-2">
|
||||
{/* Token count - Left */}
|
||||
{memory.tokenCount !== undefined ? (
|
||||
<span className="text-xs text-text-secondary">
|
||||
{memory.tokenCount.toLocaleString()}{' '}
|
||||
{localize(memory.tokenCount === 1 ? 'com_ui_token' : 'com_ui_tokens')}
|
||||
</span>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
|
||||
{/* Date - Center */}
|
||||
<span className="text-xs text-text-secondary">
|
||||
{formatDateTime(memory.updated_at)}
|
||||
</span>
|
||||
|
||||
{/* Usage badge - Right (memory-specific) */}
|
||||
{memoryUsage ? (
|
||||
<MemoryUsageBadge
|
||||
percentage={memoryUsage.percentage}
|
||||
tokenLimit={memData?.tokenLimit ?? 0}
|
||||
tooltipCurrent={memory.tokenCount}
|
||||
tooltipMax={memoryUsage.availableForMemory}
|
||||
/>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Key input */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="memory-key" className="text-sm font-medium">
|
||||
<Label htmlFor="memory-key" className="text-sm font-medium text-text-primary">
|
||||
{localize('com_ui_key')}
|
||||
</Label>
|
||||
<Input
|
||||
|
|
@ -169,8 +193,10 @@ export default function MemoryEditDialog({
|
|||
disabled={!hasUpdateAccess}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Value textarea */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="memory-value" className="text-sm font-medium">
|
||||
<Label htmlFor="memory-value" className="text-sm font-medium text-text-primary">
|
||||
{localize('com_ui_value')}
|
||||
</Label>
|
||||
<textarea
|
||||
|
|
@ -179,8 +205,8 @@ export default function MemoryEditDialog({
|
|||
onChange={(e) => hasUpdateAccess && setValue(e.target.value)}
|
||||
onKeyDown={handleKeyPress}
|
||||
placeholder={localize('com_ui_enter_value')}
|
||||
className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
rows={3}
|
||||
className="min-h-[100px] w-full resize-none rounded-lg border border-border-light bg-transparent px-3 py-2 text-sm text-text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-heavy disabled:cursor-not-allowed disabled:opacity-50"
|
||||
rows={4}
|
||||
disabled={!hasUpdateAccess}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
import { Brain } from 'lucide-react';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
interface MemoryEmptyStateProps {
|
||||
isFiltered?: boolean;
|
||||
}
|
||||
|
||||
export default function MemoryEmptyState({ isFiltered = false }: MemoryEmptyStateProps) {
|
||||
const localize = useLocalize();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center rounded-lg border border-border-light bg-surface-primary p-6 text-center">
|
||||
<div className="mb-2 flex size-10 items-center justify-center rounded-full bg-surface-tertiary">
|
||||
<Brain className="size-5 text-text-secondary" aria-hidden="true" />
|
||||
</div>
|
||||
{isFiltered ? (
|
||||
<p className="text-sm text-text-secondary">{localize('com_ui_no_memories_match')}</p>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-sm font-medium text-text-primary">
|
||||
{localize('com_ui_no_memories_title')}
|
||||
</p>
|
||||
<p className="mt-0.5 text-xs text-text-secondary">{localize('com_ui_no_memories')}</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
32
client/src/components/SidePanel/Memories/MemoryList.tsx
Normal file
32
client/src/components/SidePanel/Memories/MemoryList.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import type { TUserMemory } from 'librechat-data-provider';
|
||||
import MemoryEmptyState from './MemoryEmptyState';
|
||||
import MemoryCard from './MemoryCard';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
interface MemoryListProps {
|
||||
memories: TUserMemory[];
|
||||
hasUpdateAccess: boolean;
|
||||
isFiltered?: boolean;
|
||||
}
|
||||
|
||||
export default function MemoryList({
|
||||
memories,
|
||||
hasUpdateAccess,
|
||||
isFiltered = false,
|
||||
}: MemoryListProps) {
|
||||
const localize = useLocalize();
|
||||
|
||||
if (memories.length === 0) {
|
||||
return <MemoryEmptyState isFiltered={isFiltered} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2" role="list" aria-label={localize('com_ui_memories')}>
|
||||
{memories.map((memory) => (
|
||||
<div key={memory.key} role="listitem">
|
||||
<MemoryCard memory={memory} hasUpdateAccess={hasUpdateAccess} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
229
client/src/components/SidePanel/Memories/MemoryPanel.tsx
Normal file
229
client/src/components/SidePanel/Memories/MemoryPanel.tsx
Normal file
|
|
@ -0,0 +1,229 @@
|
|||
import { useMemo, useState, useEffect } from 'react';
|
||||
import { Plus } from 'lucide-react';
|
||||
import { matchSorter } from 'match-sorter';
|
||||
import { SystemRoles, PermissionTypes, Permissions } from 'librechat-data-provider';
|
||||
import {
|
||||
Button,
|
||||
Switch,
|
||||
Spinner,
|
||||
FilterInput,
|
||||
TooltipAnchor,
|
||||
OGDialogTrigger,
|
||||
useToastContext,
|
||||
} from '@librechat/client';
|
||||
import type { TUserMemory } from 'librechat-data-provider';
|
||||
import {
|
||||
useUpdateMemoryPreferencesMutation,
|
||||
useMemoriesQuery,
|
||||
useGetUserQuery,
|
||||
} from '~/data-provider';
|
||||
import { useLocalize, useAuthContext, useHasAccess } from '~/hooks';
|
||||
import MemoryCreateDialog from './MemoryCreateDialog';
|
||||
import MemoryUsageBadge from './MemoryUsageBadge';
|
||||
import AdminSettings from './AdminSettings';
|
||||
import MemoryList from './MemoryList';
|
||||
|
||||
const pageSize = 10;
|
||||
|
||||
export default function MemoryPanel() {
|
||||
const localize = useLocalize();
|
||||
const { user } = useAuthContext();
|
||||
const { data: userData } = useGetUserQuery();
|
||||
const { data: memData, isLoading } = useMemoriesQuery();
|
||||
const { showToast } = useToastContext();
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [createDialogOpen, setCreateDialogOpen] = useState(false);
|
||||
const [referenceSavedMemories, setReferenceSavedMemories] = useState(true);
|
||||
|
||||
const updateMemoryPreferencesMutation = useUpdateMemoryPreferencesMutation({
|
||||
onSuccess: () => {
|
||||
showToast({
|
||||
message: localize('com_ui_preferences_updated'),
|
||||
status: 'success',
|
||||
});
|
||||
},
|
||||
onError: () => {
|
||||
showToast({
|
||||
message: localize('com_ui_error_updating_preferences'),
|
||||
status: 'error',
|
||||
});
|
||||
setReferenceSavedMemories((prev) => !prev);
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (userData?.personalization?.memories !== undefined) {
|
||||
setReferenceSavedMemories(userData.personalization.memories);
|
||||
}
|
||||
}, [userData?.personalization?.memories]);
|
||||
|
||||
const handleMemoryToggle = (checked: boolean) => {
|
||||
setReferenceSavedMemories(checked);
|
||||
updateMemoryPreferencesMutation.mutate({ memories: checked });
|
||||
};
|
||||
|
||||
const hasReadAccess = useHasAccess({
|
||||
permissionType: PermissionTypes.MEMORIES,
|
||||
permission: Permissions.READ,
|
||||
});
|
||||
|
||||
const hasUpdateAccess = useHasAccess({
|
||||
permissionType: PermissionTypes.MEMORIES,
|
||||
permission: Permissions.UPDATE,
|
||||
});
|
||||
|
||||
const hasCreateAccess = useHasAccess({
|
||||
permissionType: PermissionTypes.MEMORIES,
|
||||
permission: Permissions.CREATE,
|
||||
});
|
||||
|
||||
const hasOptOutAccess = useHasAccess({
|
||||
permissionType: PermissionTypes.MEMORIES,
|
||||
permission: Permissions.OPT_OUT,
|
||||
});
|
||||
|
||||
const memories: TUserMemory[] = useMemo(() => memData?.memories ?? [], [memData]);
|
||||
|
||||
const filteredMemories = useMemo(() => {
|
||||
return matchSorter(memories, searchQuery, {
|
||||
keys: ['key', 'value'],
|
||||
});
|
||||
}, [memories, searchQuery]);
|
||||
|
||||
const currentRows = useMemo(() => {
|
||||
return filteredMemories.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
|
||||
}, [filteredMemories, pageIndex]);
|
||||
|
||||
// Reset page when search changes
|
||||
useEffect(() => {
|
||||
setPageIndex(0);
|
||||
}, [searchQuery]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex h-full w-full items-center justify-center p-4">
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!hasReadAccess) {
|
||||
return (
|
||||
<div className="flex h-full w-full items-center justify-center p-4">
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-text-secondary">{localize('com_ui_no_read_access')}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const totalPages = Math.ceil(filteredMemories.length / pageSize);
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col">
|
||||
<div role="region" aria-label={localize('com_ui_memories')} className="mt-2 space-y-3">
|
||||
{/* Header: Filter + Create Button */}
|
||||
<div className="flex items-center gap-2">
|
||||
<FilterInput
|
||||
inputId="memory-search"
|
||||
label={localize('com_ui_memories_filter')}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
containerClassName="flex-1"
|
||||
/>
|
||||
{hasCreateAccess && (
|
||||
<MemoryCreateDialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
|
||||
<OGDialogTrigger asChild>
|
||||
<TooltipAnchor
|
||||
description={localize('com_ui_create_memory')}
|
||||
side="bottom"
|
||||
render={
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="shrink-0 bg-transparent"
|
||||
aria-label={localize('com_ui_create_memory')}
|
||||
onClick={() => setCreateDialogOpen(true)}
|
||||
>
|
||||
<Plus className="size-4" aria-hidden="true" />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</OGDialogTrigger>
|
||||
</MemoryCreateDialog>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Controls: Usage Badge + Memory Toggle */}
|
||||
{(memData?.tokenLimit != null || hasOptOutAccess) && (
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Usage Badge */}
|
||||
{memData?.tokenLimit != null && (
|
||||
<MemoryUsageBadge
|
||||
percentage={memData.usagePercentage ?? 0}
|
||||
tokenLimit={memData.tokenLimit}
|
||||
totalTokens={memData.totalTokens}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Memory Toggle */}
|
||||
{hasOptOutAccess && (
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<span className="text-text-secondary">{localize('com_ui_use_memory')}</span>
|
||||
<Switch
|
||||
checked={referenceSavedMemories}
|
||||
onCheckedChange={handleMemoryToggle}
|
||||
aria-label={localize('com_ui_use_memory')}
|
||||
disabled={updateMemoryPreferencesMutation.isLoading}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Memory List */}
|
||||
<MemoryList
|
||||
memories={currentRows}
|
||||
hasUpdateAccess={hasUpdateAccess}
|
||||
isFiltered={searchQuery.length > 0}
|
||||
/>
|
||||
|
||||
{/* Footer: Admin Settings + Pagination */}
|
||||
{(user?.role === SystemRoles.ADMIN || filteredMemories.length > pageSize) && (
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
{/* Admin Settings - Left */}
|
||||
{user?.role === SystemRoles.ADMIN ? <AdminSettings /> : <div />}
|
||||
|
||||
{/* Pagination - Right */}
|
||||
{filteredMemories.length > pageSize && (
|
||||
<div className="flex items-center gap-2" role="navigation" aria-label="Pagination">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPageIndex((prev) => Math.max(prev - 1, 0))}
|
||||
disabled={pageIndex === 0}
|
||||
aria-label={localize('com_ui_prev')}
|
||||
>
|
||||
{localize('com_ui_prev')}
|
||||
</Button>
|
||||
<div className="whitespace-nowrap text-sm" aria-live="polite">
|
||||
{pageIndex + 1} / {totalPages}
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPageIndex((prev) => (prev + 1 < totalPages ? prev + 1 : prev))}
|
||||
disabled={pageIndex + 1 >= totalPages}
|
||||
aria-label={localize('com_ui_next')}
|
||||
>
|
||||
{localize('com_ui_next')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
import { TooltipAnchor } from '@librechat/client';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
interface MemoryUsageBadgeProps {
|
||||
percentage: number;
|
||||
tokenLimit: number;
|
||||
totalTokens?: number;
|
||||
/** Custom current value for tooltip (overrides totalTokens) */
|
||||
tooltipCurrent?: number;
|
||||
/** Custom max value for tooltip (overrides tokenLimit) */
|
||||
tooltipMax?: number;
|
||||
}
|
||||
|
||||
const getStatusColor = (pct: number): string => {
|
||||
if (pct > 90) {
|
||||
return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
|
||||
}
|
||||
if (pct > 75) {
|
||||
return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400';
|
||||
}
|
||||
return 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400';
|
||||
};
|
||||
|
||||
export default function MemoryUsageBadge({
|
||||
percentage,
|
||||
tokenLimit,
|
||||
totalTokens,
|
||||
tooltipCurrent,
|
||||
tooltipMax,
|
||||
}: MemoryUsageBadgeProps) {
|
||||
const localize = useLocalize();
|
||||
|
||||
const tokenLabel = localize('com_ui_tokens');
|
||||
const current = tooltipCurrent ?? totalTokens;
|
||||
const max = tooltipMax ?? tokenLimit;
|
||||
|
||||
const tooltipText =
|
||||
current !== undefined
|
||||
? `${current.toLocaleString()} / ${max.toLocaleString()} ${tokenLabel}`
|
||||
: `${max.toLocaleString()} ${tokenLabel}`;
|
||||
|
||||
return (
|
||||
<TooltipAnchor
|
||||
description={tooltipText}
|
||||
side="top"
|
||||
render={
|
||||
<div
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1.5 rounded-full px-2.5 py-1',
|
||||
'text-xs font-medium',
|
||||
getStatusColor(percentage),
|
||||
)}
|
||||
role="status"
|
||||
aria-label={`${localize('com_ui_usage')}: ${percentage}%`}
|
||||
>
|
||||
<span>{percentage}%</span>
|
||||
<span className="opacity-70">{localize('com_ui_used').toLowerCase()}</span>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,434 +0,0 @@
|
|||
/* Memories */
|
||||
import { useMemo, useState, useRef, useEffect } from 'react';
|
||||
import { Plus } from 'lucide-react';
|
||||
import { Trans } from 'react-i18next';
|
||||
import { matchSorter } from 'match-sorter';
|
||||
import { SystemRoles, PermissionTypes, Permissions } from 'librechat-data-provider';
|
||||
import {
|
||||
Table,
|
||||
Input,
|
||||
Label,
|
||||
Button,
|
||||
Switch,
|
||||
Spinner,
|
||||
TableRow,
|
||||
OGDialog,
|
||||
EditIcon,
|
||||
TableHead,
|
||||
TableBody,
|
||||
TrashIcon,
|
||||
TableCell,
|
||||
TableHeader,
|
||||
TooltipAnchor,
|
||||
useToastContext,
|
||||
OGDialogTrigger,
|
||||
OGDialogTemplate,
|
||||
} from '@librechat/client';
|
||||
import type { TUserMemory } from 'librechat-data-provider';
|
||||
import {
|
||||
useUpdateMemoryPreferencesMutation,
|
||||
useDeleteMemoryMutation,
|
||||
useMemoriesQuery,
|
||||
useGetUserQuery,
|
||||
} from '~/data-provider';
|
||||
import { useLocalize, useAuthContext, useHasAccess } from '~/hooks';
|
||||
import MemoryCreateDialog from './MemoryCreateDialog';
|
||||
import MemoryEditDialog from './MemoryEditDialog';
|
||||
import AdminSettings from './AdminSettings';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
const EditMemoryButton = ({ memory }: { memory: TUserMemory }) => {
|
||||
const localize = useLocalize();
|
||||
const [open, setOpen] = useState(false);
|
||||
const triggerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
return (
|
||||
<MemoryEditDialog
|
||||
open={open}
|
||||
memory={memory}
|
||||
onOpenChange={setOpen}
|
||||
triggerRef={triggerRef as React.MutableRefObject<HTMLButtonElement | null>}
|
||||
>
|
||||
<OGDialogTrigger asChild>
|
||||
<TooltipAnchor
|
||||
description={localize('com_ui_edit_memory')}
|
||||
render={
|
||||
<Button
|
||||
variant="ghost"
|
||||
aria-label={localize('com_ui_bookmarks_edit')}
|
||||
onClick={() => setOpen(!open)}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<EditIcon />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</OGDialogTrigger>
|
||||
</MemoryEditDialog>
|
||||
);
|
||||
};
|
||||
|
||||
const DeleteMemoryButton = ({ memory }: { memory: TUserMemory }) => {
|
||||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
const [open, setOpen] = useState(false);
|
||||
const { mutate: deleteMemory } = useDeleteMemoryMutation();
|
||||
const [deletingKey, setDeletingKey] = useState<string | null>(null);
|
||||
|
||||
const confirmDelete = async () => {
|
||||
setDeletingKey(memory.key);
|
||||
deleteMemory(memory.key, {
|
||||
onSuccess: () => {
|
||||
showToast({
|
||||
message: localize('com_ui_deleted'),
|
||||
status: 'success',
|
||||
});
|
||||
setOpen(false);
|
||||
},
|
||||
onError: () =>
|
||||
showToast({
|
||||
message: localize('com_ui_error'),
|
||||
status: 'error',
|
||||
}),
|
||||
onSettled: () => setDeletingKey(null),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<OGDialog open={open} onOpenChange={setOpen}>
|
||||
<OGDialogTrigger asChild>
|
||||
<TooltipAnchor
|
||||
description={localize('com_ui_delete_memory')}
|
||||
render={
|
||||
<Button
|
||||
variant="ghost"
|
||||
aria-label={localize('com_ui_delete')}
|
||||
onClick={() => setOpen(!open)}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
{deletingKey === memory.key ? (
|
||||
<Spinner className="size-4 animate-spin" />
|
||||
) : (
|
||||
<TrashIcon className="size-4" />
|
||||
)}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</OGDialogTrigger>
|
||||
<OGDialogTemplate
|
||||
showCloseButton={false}
|
||||
title={localize('com_ui_delete_memory')}
|
||||
className="w-11/12 max-w-lg"
|
||||
main={
|
||||
<Label className="text-left text-sm font-medium">
|
||||
<Trans
|
||||
i18nKey="com_ui_delete_confirm_strong"
|
||||
values={{ title: memory.key }}
|
||||
components={{ strong: <strong /> }}
|
||||
/>
|
||||
</Label>
|
||||
}
|
||||
selection={{
|
||||
selectHandler: confirmDelete,
|
||||
selectClasses:
|
||||
'bg-red-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-800 text-white',
|
||||
selectText: localize('com_ui_delete'),
|
||||
}}
|
||||
/>
|
||||
</OGDialog>
|
||||
);
|
||||
};
|
||||
|
||||
const pageSize = 10;
|
||||
export default function MemoryViewer() {
|
||||
const localize = useLocalize();
|
||||
const { user } = useAuthContext();
|
||||
const { data: userData } = useGetUserQuery();
|
||||
const { data: memData, isLoading } = useMemoriesQuery();
|
||||
const { showToast } = useToastContext();
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [createDialogOpen, setCreateDialogOpen] = useState(false);
|
||||
const [referenceSavedMemories, setReferenceSavedMemories] = useState(true);
|
||||
|
||||
const updateMemoryPreferencesMutation = useUpdateMemoryPreferencesMutation({
|
||||
onSuccess: () => {
|
||||
showToast({
|
||||
message: localize('com_ui_preferences_updated'),
|
||||
status: 'success',
|
||||
});
|
||||
},
|
||||
onError: () => {
|
||||
showToast({
|
||||
message: localize('com_ui_error_updating_preferences'),
|
||||
status: 'error',
|
||||
});
|
||||
setReferenceSavedMemories((prev) => !prev);
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (userData?.personalization?.memories !== undefined) {
|
||||
setReferenceSavedMemories(userData.personalization.memories);
|
||||
}
|
||||
}, [userData?.personalization?.memories]);
|
||||
|
||||
const handleMemoryToggle = (checked: boolean) => {
|
||||
setReferenceSavedMemories(checked);
|
||||
updateMemoryPreferencesMutation.mutate({ memories: checked });
|
||||
};
|
||||
|
||||
const hasReadAccess = useHasAccess({
|
||||
permissionType: PermissionTypes.MEMORIES,
|
||||
permission: Permissions.READ,
|
||||
});
|
||||
|
||||
const hasUpdateAccess = useHasAccess({
|
||||
permissionType: PermissionTypes.MEMORIES,
|
||||
permission: Permissions.UPDATE,
|
||||
});
|
||||
|
||||
const hasCreateAccess = useHasAccess({
|
||||
permissionType: PermissionTypes.MEMORIES,
|
||||
permission: Permissions.CREATE,
|
||||
});
|
||||
|
||||
const hasOptOutAccess = useHasAccess({
|
||||
permissionType: PermissionTypes.MEMORIES,
|
||||
permission: Permissions.OPT_OUT,
|
||||
});
|
||||
|
||||
const memories: TUserMemory[] = useMemo(() => memData?.memories ?? [], [memData]);
|
||||
|
||||
const filteredMemories = useMemo(() => {
|
||||
return matchSorter(memories, searchQuery, {
|
||||
keys: ['key', 'value'],
|
||||
});
|
||||
}, [memories, searchQuery]);
|
||||
|
||||
const currentRows = useMemo(() => {
|
||||
return filteredMemories.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
|
||||
}, [filteredMemories, pageIndex]);
|
||||
|
||||
const getProgressBarColor = (percentage: number): string => {
|
||||
if (percentage > 90) {
|
||||
return 'stroke-red-500';
|
||||
}
|
||||
if (percentage > 75) {
|
||||
return 'stroke-yellow-500';
|
||||
}
|
||||
return 'stroke-green-500';
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex h-full w-full items-center justify-center p-4">
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!hasReadAccess) {
|
||||
return (
|
||||
<div className="flex h-full w-full items-center justify-center p-4">
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-text-secondary">{localize('com_ui_no_read_access')}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col">
|
||||
<div role="region" aria-label={localize('com_ui_memories')} className="mt-2 space-y-2">
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="memory-search"
|
||||
placeholder=" "
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
aria-label={localize('com_ui_memories_filter')}
|
||||
className="peer"
|
||||
/>
|
||||
<Label
|
||||
htmlFor="memory-search"
|
||||
className="pointer-events-none absolute -top-1 left-3 w-auto origin-[0] translate-y-3 scale-100 rounded bg-background px-1 text-base text-text-secondary transition-transform duration-200 peer-placeholder-shown:translate-y-3 peer-placeholder-shown:scale-100 peer-focus:-translate-y-2 peer-focus:scale-75 peer-focus:text-text-primary peer-[:not(:placeholder-shown)]:-translate-y-2 peer-[:not(:placeholder-shown)]:scale-75"
|
||||
>
|
||||
{localize('com_ui_memories_filter')}
|
||||
</Label>
|
||||
</div>
|
||||
{/* Memory Usage and Toggle Display */}
|
||||
{(memData?.tokenLimit || hasOptOutAccess) && (
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center rounded-lg',
|
||||
memData?.tokenLimit != null && hasOptOutAccess ? 'justify-between' : 'justify-end',
|
||||
)}
|
||||
>
|
||||
{/* Usage Display */}
|
||||
{memData?.tokenLimit && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative size-10">
|
||||
<svg className="size-10 -rotate-90 transform">
|
||||
<circle
|
||||
cx="20"
|
||||
cy="20"
|
||||
r="16"
|
||||
stroke="currentColor"
|
||||
strokeWidth="3"
|
||||
fill="none"
|
||||
className="text-gray-200 dark:text-gray-700"
|
||||
/>
|
||||
<circle
|
||||
cx="20"
|
||||
cy="20"
|
||||
r="16"
|
||||
strokeWidth="3"
|
||||
fill="none"
|
||||
strokeDasharray={`${2 * Math.PI * 16}`}
|
||||
strokeDashoffset={`${2 * Math.PI * 16 * (1 - (memData.usagePercentage ?? 0) / 100)}`}
|
||||
className={`transition-all ${getProgressBarColor(memData.usagePercentage ?? 0)}`}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-xs font-medium">{memData.usagePercentage}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-text-secondary">{localize('com_ui_usage')}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Memory Toggle */}
|
||||
{hasOptOutAccess && (
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<span>{localize('com_ui_use_memory')}</span>
|
||||
<Switch
|
||||
checked={referenceSavedMemories}
|
||||
onCheckedChange={handleMemoryToggle}
|
||||
aria-label={localize('com_ui_use_memory')}
|
||||
disabled={updateMemoryPreferencesMutation.isLoading}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{/* Create Memory Button */}
|
||||
{hasCreateAccess && (
|
||||
<div className="flex w-full justify-end">
|
||||
<MemoryCreateDialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
|
||||
<OGDialogTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full bg-transparent"
|
||||
aria-label={localize('com_ui_create_memory')}
|
||||
>
|
||||
<Plus className="size-4" aria-hidden="true" />
|
||||
{localize('com_ui_create_memory')}
|
||||
</Button>
|
||||
</OGDialogTrigger>
|
||||
</MemoryCreateDialog>
|
||||
</div>
|
||||
)}
|
||||
<div className="rounded-lg border border-border-light bg-transparent shadow-sm transition-colors">
|
||||
<Table className="w-full table-fixed">
|
||||
<TableHeader>
|
||||
<TableRow className="border-b border-border-light hover:bg-surface-secondary">
|
||||
<TableHead
|
||||
className={`${
|
||||
hasUpdateAccess ? 'w-[75%]' : 'w-[100%]'
|
||||
} bg-surface-secondary py-3 text-left text-sm font-medium text-text-secondary`}
|
||||
>
|
||||
<div>{localize('com_ui_memory')}</div>
|
||||
</TableHead>
|
||||
{hasUpdateAccess && (
|
||||
<TableHead className="w-[25%] bg-surface-secondary py-3 text-center text-sm font-medium text-text-secondary">
|
||||
<div>{localize('com_assistants_actions')}</div>
|
||||
</TableHead>
|
||||
)}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{currentRows.length ? (
|
||||
currentRows.map((memory: TUserMemory, idx: number) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className="border-b border-border-light hover:bg-surface-secondary"
|
||||
>
|
||||
<TableCell className={`${hasUpdateAccess ? 'w-[75%]' : 'w-[100%]'} px-4 py-4`}>
|
||||
<div
|
||||
className="overflow-hidden text-ellipsis whitespace-nowrap text-sm text-text-primary"
|
||||
title={memory.value}
|
||||
>
|
||||
{memory.value}
|
||||
</div>
|
||||
</TableCell>
|
||||
{hasUpdateAccess && (
|
||||
<TableCell className="w-[25%] px-4 py-4">
|
||||
<div className="flex justify-center gap-2">
|
||||
<EditMemoryButton memory={memory} />
|
||||
<DeleteMemoryButton memory={memory} />
|
||||
</div>
|
||||
</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell
|
||||
colSpan={hasUpdateAccess ? 2 : 1}
|
||||
className="h-24 text-center text-sm text-text-secondary"
|
||||
>
|
||||
{localize('com_ui_no_memories')}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* Pagination controls */}
|
||||
{filteredMemories.length > pageSize && (
|
||||
<div
|
||||
className="flex items-center justify-end gap-2"
|
||||
role="navigation"
|
||||
aria-label="Pagination"
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPageIndex((prev) => Math.max(prev - 1, 0))}
|
||||
disabled={pageIndex === 0}
|
||||
aria-label={localize('com_ui_prev')}
|
||||
>
|
||||
{localize('com_ui_prev')}
|
||||
</Button>
|
||||
<div className="text-sm" aria-live="polite">
|
||||
{`${pageIndex + 1} / ${Math.ceil(filteredMemories.length / pageSize)}`}
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setPageIndex((prev) =>
|
||||
(prev + 1) * pageSize < filteredMemories.length ? prev + 1 : prev,
|
||||
)
|
||||
}
|
||||
disabled={(pageIndex + 1) * pageSize >= filteredMemories.length}
|
||||
aria-label={localize('com_ui_next')}
|
||||
>
|
||||
{localize('com_ui_next')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Admin Settings */}
|
||||
{user?.role === SystemRoles.ADMIN && (
|
||||
<div className="mt-4">
|
||||
<AdminSettings />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,2 +1,10 @@
|
|||
export { default as MemoryViewer } from './MemoryViewer';
|
||||
export { default as MemoryPanel } from './MemoryPanel';
|
||||
export { default as MemoryViewer } from './MemoryPanel'; // Backward compatibility alias
|
||||
export { default as MemoryList } from './MemoryList';
|
||||
export { default as MemoryCard } from './MemoryCard';
|
||||
export { default as MemoryCardActions } from './MemoryCardActions';
|
||||
export { default as MemoryUsageBadge } from './MemoryUsageBadge';
|
||||
export { default as MemoryEmptyState } from './MemoryEmptyState';
|
||||
export { default as MemoryEditDialog } from './MemoryEditDialog';
|
||||
export { default as MemoryCreateDialog } from './MemoryCreateDialog';
|
||||
export { default as AdminSettings } from './AdminSettings';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue