226 lines
9.2 KiB
TypeScript
226 lines
9.2 KiB
TypeScript
import {
|
|
BookUser,
|
|
ChevronDown,
|
|
CheckSquare,
|
|
Square,
|
|
Settings,
|
|
User,
|
|
Loader2,
|
|
} from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import {
|
|
Popover,
|
|
PopoverButton,
|
|
PopoverPanel,
|
|
Transition,
|
|
} from '@headlessui/react';
|
|
import { Fragment, useEffect, useState } from 'react';
|
|
|
|
interface SystemPrompt {
|
|
id: string;
|
|
name: string;
|
|
type: 'system' | 'persona';
|
|
}
|
|
|
|
interface SystemPromptSelectorProps {
|
|
selectedPromptIds: string[];
|
|
onSelectedPromptIdsChange: (ids: string[]) => void;
|
|
}
|
|
|
|
const SystemPromptSelector = ({
|
|
selectedPromptIds,
|
|
onSelectedPromptIdsChange,
|
|
}: SystemPromptSelectorProps) => {
|
|
const [availablePrompts, setAvailablePrompts] = useState<SystemPrompt[]>([]);
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) return; // Only fetch when popover is open or about to open
|
|
const fetchPrompts = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
const response = await fetch('/api/system-prompts');
|
|
if (response.ok) {
|
|
const prompts = await response.json();
|
|
setAvailablePrompts(prompts);
|
|
|
|
// Check if any currently selected prompt IDs are not in the API response
|
|
const availablePromptIds = prompts.map(
|
|
(prompt: SystemPrompt) => prompt.id,
|
|
);
|
|
const validSelectedIds = selectedPromptIds.filter((id) =>
|
|
availablePromptIds.includes(id),
|
|
);
|
|
|
|
// If some selected IDs are no longer available, update the selection
|
|
if (validSelectedIds.length !== selectedPromptIds.length) {
|
|
onSelectedPromptIdsChange(validSelectedIds);
|
|
}
|
|
} else {
|
|
console.error('Failed to load system prompts.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading system prompts.');
|
|
console.error(error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
fetchPrompts();
|
|
}, [isOpen, selectedPromptIds, onSelectedPromptIdsChange]);
|
|
|
|
const handleTogglePrompt = (promptId: string) => {
|
|
const newSelectedIds = selectedPromptIds.includes(promptId)
|
|
? selectedPromptIds.filter((id) => id !== promptId)
|
|
: [...selectedPromptIds, promptId];
|
|
onSelectedPromptIdsChange(newSelectedIds);
|
|
};
|
|
|
|
const selectedCount = selectedPromptIds.length;
|
|
|
|
return (
|
|
<Popover className="relative">
|
|
{({ open }) => {
|
|
if (open && !isOpen) setIsOpen(true);
|
|
if (!open && isOpen) setIsOpen(false);
|
|
return (
|
|
<>
|
|
<PopoverButton
|
|
className={cn(
|
|
'flex items-center gap-1 rounded-lg text-sm transition-colors duration-150 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500',
|
|
selectedCount > 0
|
|
? 'text-[#24A0ED] hover:text-blue-200'
|
|
: 'text-black/60 hover:text-black/30 dark:text-white/60 dark:hover:*:text-white/30',
|
|
)}
|
|
title="Select Prompts"
|
|
>
|
|
<BookUser size={18} />
|
|
{selectedCount > 0 ? <span> {selectedCount} </span> : null}
|
|
<ChevronDown size={16} className="opacity-60" />
|
|
</PopoverButton>
|
|
<Transition
|
|
as={Fragment}
|
|
enter="transition ease-out duration-200"
|
|
enterFrom="opacity-0 translate-y-1"
|
|
enterTo="opacity-100 translate-y-0"
|
|
leave="transition ease-in duration-150"
|
|
leaveFrom="opacity-100 translate-y-0"
|
|
leaveTo="opacity-0 translate-y-1"
|
|
>
|
|
<PopoverPanel className="absolute z-20 w-72 transform bottom-full mb-2">
|
|
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black/5 dark:ring-white/5 bg-white dark:bg-dark-secondary">
|
|
<div className="px-4 py-3 border-b border-light-200 dark:border-dark-200">
|
|
<h3 className="text-sm font-medium text-black/90 dark:text-white/90">
|
|
Select Prompts
|
|
</h3>
|
|
<p className="text-xs text-black/60 dark:text-white/60 mt-0.5">
|
|
Choose instructions to guide the AI.
|
|
</p>
|
|
</div>
|
|
{isLoading ? (
|
|
<div className="px-4 py-3">
|
|
<Loader2 className="animate-spin text-black/70 dark:text-white/70" />
|
|
</div>
|
|
) : (
|
|
<div className="max-h-60 overflow-y-auto p-1.5 space-y-3">
|
|
{availablePrompts.length === 0 && (
|
|
<p className="text-xs text-black/50 dark:text-white/50 px-2.5 py-2 text-center">
|
|
No prompts configured. <br /> Go to{' '}
|
|
<a className="text-blue-500" href="/settings">
|
|
settings
|
|
</a>{' '}
|
|
to add some.
|
|
</p>
|
|
)}
|
|
|
|
{availablePrompts.filter((p) => p.type === 'system')
|
|
.length > 0 && (
|
|
<div>
|
|
<div className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-black/70 dark:text-white/70">
|
|
<Settings size={14} />
|
|
<span>System Prompts</span>
|
|
</div>
|
|
<div className="space-y-0.5">
|
|
{availablePrompts
|
|
.filter((p) => p.type === 'system')
|
|
.map((prompt) => (
|
|
<div
|
|
key={prompt.id}
|
|
onClick={() => handleTogglePrompt(prompt.id)}
|
|
className="flex items-center gap-2.5 p-2.5 rounded-md hover:bg-light-100 dark:hover:bg-dark-100 cursor-pointer"
|
|
>
|
|
{selectedPromptIds.includes(prompt.id) ? (
|
|
<CheckSquare
|
|
size={18}
|
|
className="text-[#24A0ED] flex-shrink-0"
|
|
/>
|
|
) : (
|
|
<Square
|
|
size={18}
|
|
className="text-black/40 dark:text-white/40 flex-shrink-0"
|
|
/>
|
|
)}
|
|
<span
|
|
className="text-sm text-black/80 dark:text-white/80 truncate"
|
|
title={prompt.name}
|
|
>
|
|
{prompt.name}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{availablePrompts.filter((p) => p.type === 'persona')
|
|
.length > 0 && (
|
|
<div>
|
|
<div className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-black/70 dark:text-white/70">
|
|
<User size={14} />
|
|
<span>Persona Prompts</span>
|
|
</div>
|
|
<div className="space-y-0.5">
|
|
{availablePrompts
|
|
.filter((p) => p.type === 'persona')
|
|
.map((prompt) => (
|
|
<div
|
|
key={prompt.id}
|
|
onClick={() => handleTogglePrompt(prompt.id)}
|
|
className="flex items-center gap-2.5 p-2.5 rounded-md hover:bg-light-100 dark:hover:bg-dark-100 cursor-pointer"
|
|
>
|
|
{selectedPromptIds.includes(prompt.id) ? (
|
|
<CheckSquare
|
|
size={18}
|
|
className="text-[#24A0ED] flex-shrink-0"
|
|
/>
|
|
) : (
|
|
<Square
|
|
size={18}
|
|
className="text-black/40 dark:text-white/40 flex-shrink-0"
|
|
/>
|
|
)}
|
|
<span
|
|
className="text-sm text-black/80 dark:text-white/80 truncate"
|
|
title={prompt.name}
|
|
>
|
|
{prompt.name}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</PopoverPanel>
|
|
</Transition>
|
|
</>
|
|
);
|
|
}}
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
export default SystemPromptSelector;
|