client/src/components/Prompts/PromptVariables.tsx

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;