promptfoo--promptfoo/site/docs/_shared/ApplicationVulnerabilityDropdown.tsx

import React, { useState } from 'react';

import PluginTable from './PluginTable';

const ApplicationVulnerabilityDropdown = () => {
  const [openSections, setOpenSections] = useState<Set<string>>(
    new Set(['security', 'privacy', 'criminal', 'harmful', 'misinformation']),
  );

  const toggleSection = (section: string) => {
    setOpenSections((prev) => {
      const newSections = new Set(prev);
      if (newSections.has(section)) {
        newSections.delete(section);
      } else {
        newSections.add(section);
      }
      return newSections;
    });
  };

  const renderSection = (
    title: string,
    id: string,
    description: string,
    vulnerabilityType: string,
  ) => (
    <div key={id}>
      <h3
        id={`vulnerability-${id}`}
        onClick={() => toggleSection(id)}
        style={{ cursor: 'pointer' }}
      >
        <a href={`#vulnerability-${id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
          {title} {openSections.has(id) ? '▼' : '▶'}
        </a>
      </h3>
      <p>{description}</p>
      {openSections.has(id) && (
        <PluginTable
          vulnerabilityType={vulnerabilityType}
          shouldRenderCategory={false}
          showApplicationTypes={true}
        />
      )}
    </div>
  );

  const sections = [
    {
      title: 'Security Vulnerabilities',
      id: 'security',
      description: 'Technical security risks in application context.',
      vulnerabilityType: 'security',
    },
    {
      title: 'Privacy Violations',
      id: 'privacy',
      description: 'Privacy risks in application context.',
      vulnerabilityType: 'privacy',
    },
    {
      title: 'Criminal Activities',
      id: 'criminal',
      description: 'Criminal risks in application context.',
      vulnerabilityType: 'criminal',
    },
    {
      title: 'Harmful Content',
      id: 'harmful',
      description: 'Harmful content risks in application context.',
      vulnerabilityType: 'harmful',
    },
    {
      title: 'Misinformation and Misuse',
      id: 'misinformation',
      description: 'Misinformation risks in application context.',
      vulnerabilityType: 'misinformation and misuse',
    },
  ];

  return (
    <div>
      {sections.map((section) =>
        renderSection(section.title, section.id, section.description, section.vulnerabilityType),
      )}
    </div>
  );
};

export default ApplicationVulnerabilityDropdown;