File size: 2,069 Bytes
aa2e6af | 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 | import { useMemo } from 'react';
import { Variable } from 'lucide-react';
import { extractUniqueVariables, cn } from '~/utils';
import { Separator } from '~/components/ui';
import { useLocalize } from '~/hooks';
const specialVariables = {
current_date: true,
current_user: true,
};
const specialVariableClasses =
'bg-yellow-500/25 text-yellow-600 dark:border-yellow-500/50 dark:bg-transparent dark:text-yellow-500/90';
const PromptVariables = ({ promptText }: { promptText: string }) => {
const localize = useLocalize();
const variables = useMemo(() => {
return extractUniqueVariables(promptText || '');
}, [promptText]);
return (
<>
<h3 className="flex items-center gap-2 rounded-t-lg border border-border-medium py-2 pl-4 text-base font-semibold text-text-secondary">
<Variable className="icon-sm" />
{localize('com_ui_variables')}
</h3>
<div className="mb-4 flex w-full flex-row flex-wrap rounded-b-lg border border-border-medium p-4 md:min-h-16">
{variables.length ? (
<div className="flex h-7 items-center">
{variables.map((variable, index) => (
<label
className={cn(
'mr-1 rounded-full border border-border-medium px-2 text-text-secondary',
specialVariables[variable.toLowerCase()] ? specialVariableClasses : '',
)}
key={index}
>
{specialVariables[variable.toLowerCase()] ? variable.toLowerCase() : variable}
</label>
))}
</div>
) : (
<div className="flex h-7 items-center">
<span className="text-xs text-text-tertiary md:text-sm">
{localize('com_ui_variables_info')}
</span>
</div>
)}
<Separator className="my-3 bg-border-medium" />
<span className="text-xs text-text-tertiary md:text-sm">
{localize('com_ui_special_variables')}
</span>
</div>
</>
);
};
export default PromptVariables;
|