File size: 3,276 Bytes
f0743f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | import React, { useMemo } from 'react';
import { Variable } from 'lucide-react';
import ReactMarkdown from 'react-markdown';
import { Separator } from '@librechat/client';
import { specialVariables } from 'librechat-data-provider';
import { cn, extractUniqueVariables } from '~/utils';
import { CodeVariableGfm } from './Markdown';
import { useLocalize } from '~/hooks';
const specialVariableClasses =
'bg-amber-100 text-yellow-800 border-yellow-600 dark:border-yellow-500/50 dark:bg-transparent dark:text-yellow-500/90';
const components: {
[nodeType: string]: React.ElementType;
} = { code: CodeVariableGfm };
const PromptVariables = ({
promptText,
showInfo = true,
}: {
promptText: string;
showInfo?: boolean;
}) => {
const localize = useLocalize();
const variables = useMemo(() => {
return extractUniqueVariables(promptText || '');
}, [promptText]);
return (
<div className="rounded-xl border border-border-light bg-transparent p-4 shadow-md">
<h3 className="flex items-center gap-2 py-2 text-lg font-semibold text-text-primary">
<Variable className="icon-sm" aria-hidden="true" />
{localize('com_ui_variables')}
</h3>
<div className="flex flex-col space-y-4">
{variables.length ? (
<div className="flex flex-wrap gap-2">
{variables.map((variable, index) => (
<span
className={cn(
'rounded-full border border-border-light px-3 py-1 text-text-primary',
specialVariables[variable.toLowerCase()] != null ? specialVariableClasses : '',
)}
key={index}
>
{specialVariables[variable.toLowerCase()] != null
? variable.toLowerCase()
: variable}
</span>
))}
</div>
) : (
<div className="text-sm text-text-secondary">
<ReactMarkdown components={components} className="markdown prose dark:prose-invert">
{localize('com_ui_variables_info')}
</ReactMarkdown>
</div>
)}
<Separator className="my-3 text-text-primary" />
{showInfo && (
<div className="space-y-4">
<div>
<span className="text-sm font-medium text-text-primary">
{localize('com_ui_special_variables')}
</span>
<span className="text-sm text-text-secondary">
<ReactMarkdown components={components} className="markdown prose dark:prose-invert">
{localize('com_ui_special_variables_more_info')}
</ReactMarkdown>
</span>
</div>
<div>
<span className="text-sm font-medium text-text-primary">
{localize('com_ui_dropdown_variables')}
</span>
<span className="text-sm text-text-secondary">
<ReactMarkdown components={components} className="markdown prose dark:prose-invert">
{localize('com_ui_dropdown_variables_info')}
</ReactMarkdown>
</span>
</div>
</div>
)}
</div>
</div>
);
};
export default PromptVariables;
|