File size: 2,833 Bytes
f0743f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | import React, { useCallback } from 'react';
import { Edit3, Check, X } from 'lucide-react';
import { Button, Badge } from '@librechat/client';
import type { LucideIcon } from 'lucide-react';
import type { BadgeItem } from '~/common';
import { useChatBadges, useLocalize } from '~/hooks';
interface EditBadgesProps {
isEditingChatBadges: boolean;
handleCancelBadges: () => void;
handleSaveBadges: () => void;
setBadges: React.Dispatch<React.SetStateAction<Pick<BadgeItem, 'id'>[]>>;
}
const EditBadgesComponent = ({
isEditingChatBadges,
handleCancelBadges,
handleSaveBadges,
setBadges,
}: EditBadgesProps) => {
const localize = useLocalize();
const allBadges = useChatBadges() || [];
const unavailableBadges = allBadges.filter((badge) => !badge.isAvailable);
const handleRestoreBadge = useCallback(
(badgeId: string) => {
setBadges((prev: Pick<BadgeItem, 'id'>[]) => [...prev, { id: badgeId }]);
},
[setBadges],
);
if (!isEditingChatBadges) {
return null;
}
return (
<div className="m-1.5 flex flex-col overflow-hidden rounded-b-lg rounded-t-2xl bg-surface-secondary-alt">
<div className="flex items-center gap-4 py-2 pl-3 pr-1.5 text-sm">
<span className="mt-0 flex size-6 flex-shrink-0 items-center justify-center">
<div className="icon-md">
<Edit3 className="icon-md" aria-hidden="true" />
</div>
</span>
<span className="text-token-text-secondary line-clamp-3 flex-1 py-0.5 font-semibold">
{localize('com_ui_save_badge_changes')}
</span>
<div className="flex h-8 gap-2">
<Button
size="sm"
variant="destructive"
aria-label="Cancel"
onClick={handleCancelBadges}
className="h-8"
>
<X className="icon-md" aria-hidden="true" />
</Button>
<Button
size="sm"
variant="submit"
aria-label="Save changes"
onClick={handleSaveBadges}
className="h-8 rounded-b-lg rounded-tr-xl"
>
<Check className="icon-md" aria-hidden="true" />
</Button>
</div>
</div>
{unavailableBadges && unavailableBadges.length > 0 && (
<div className="flex flex-wrap items-center gap-2 p-2">
{unavailableBadges.map((badge) => (
<div key={badge.id} className="badge-icon">
<Badge
icon={badge.icon as unknown as LucideIcon}
label={badge.label}
isAvailable={false}
isEditing={true}
onBadgeAction={() => handleRestoreBadge(badge.id)}
/>
</div>
))}
</div>
)}
</div>
);
};
export default React.memo(EditBadgesComponent);
|