promptfoo 0.20.0 → 0.21.0

package/src/web/nextui/package.json

@@ -1,47 +0,0 @@
-{
-  "name": "nextui",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.3",
-    "@mui/material": "^5.14.4",
-    "@tanstack/react-table": "^8.9.3",
-    "@types/diff": "^5.0.3",
-    "@types/node": "20.4.10",
-    "@types/react": "18.2.20",
-    "@types/react-dom": "18.2.7",
-    "@types/react-syntax-highlighter": "^15.5.7",
-    "@types/uuid": "^9.0.2",
-    "chart.js": "^4.3.3",
-    "debounce": "^1.2.1",
-    "diff": "^5.1.0",
-    "eslint": "8.47.0",
-    "eslint-config-next": "13.4.13",
-    "js-yaml": "^4.1.0",
-    "next": "13.4.13",
-    "opener": "^1.5.2",
-    "react": "18.2.0",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "18.2.0",
-    "react-error-boundary": "^4.0.11",
-    "react-syntax-highlighter": "^15.5.0",
-    "socket.io": "^4.7.2",
-    "socket.io-client": "^4.7.2",
-    "tiny-invariant": "^1.3.1",
-    "typescript": "5.1.6",
-    "uuid": "^9.0.0",
-    "zustand": "^4.4.1"
-  },
-  "devDependencies": {
-    "@types/js-yaml": "^4.0.5"
-  }
-}

package/src/web/nextui/public/logo.svg

@@ -1,30 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.14, written by Peter Selinger 2001-2017
-</metadata>
-<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M597 6384 c-77 -13 -152 -51 -204 -103 -44 -43 -88 -101 -77 -101 3
-0 1 -6 -5 -14 -6 -7 -18 -35 -26 -62 -13 -43 -15 -320 -12 -2194 l2 -2145 33
--67 c53 -109 147 -187 262 -218 33 -9 301 -12 1046 -12 922 0 1004 -1 1017
--16 8 -10 37 -49 64 -88 274 -400 435 -626 470 -660 124 -118 298 -141 458
--61 43 21 135 110 187 181 18 24 49 63 69 87 19 24 127 159 238 301 l203 256
-1033 0 c906 0 1040 2 1086 16 130 37 230 136 269 264 20 63 20 95 20 2187 0
-1909 -2 2127 -16 2176 -9 30 -22 61 -30 70 -8 8 -14 19 -14 23 0 17 -55 78
--99 110 -25 19 -75 44 -111 57 l-65 22 -2868 1 c-1966 1 -2888 -2 -2930 -10z
-m3951 -954 c57 -26 379 -345 411 -408 30 -59 31 -133 3 -196 -26 -58 -220
--256 -251 -256 -25 0 -599 573 -607 607 -5 19 0 32 23 56 17 18 57 61 89 96
-74 79 106 102 163 117 58 14 111 9 169 -16z m-351 -712 c156 -156 290 -294
-297 -308 8 -15 11 -33 6 -45 -12 -33 -1398 -1412 -1425 -1419 -22 -6 -58 27
--315 285 -160 160 -295 299 -300 309 -13 24 -14 23 270 310 866 876 1142 1150
-1161 1150 14 0 116 -94 306 -282z m-1617 -1658 c322 -321 325 -326 270 -381
--16 -16 -37 -29 -47 -30 -22 -1 -12 1 -198 -44 -410 -99 -479 -115 -504 -115
--16 0 -40 11 -55 25 -25 23 -27 31 -23 73 2 26 8 61 11 77 19 82 79 327 91
-375 8 30 26 101 39 158 27 115 51 152 97 152 24 0 77 -48 319 -290z"/>
-</g>
-</svg>

package/src/web/nextui/src/app/Home.css

@@ -1,3 +0,0 @@
-.container {
-  margin: 2rem;
-}

package/src/web/nextui/src/app/api/route.ts

@@ -1,6 +0,0 @@
-import { NextResponse } from 'next/server';
-
-export async function GET() {
-  const data = { message: Math.random() < 0.5 ? 'Hello World!' : 'Hello mom' };
-  return NextResponse.json({ data });
-}

package/src/web/nextui/src/app/components/DarkMode.css

@@ -1,22 +0,0 @@
-nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-  color: var(--text-color);
-}
-
-.dark-mode-toggle {
-  display: flex;
-  background-color: transparent;
-  border: none;
-  color: var(--text-color);
-  cursor: pointer;
-  font-size: 16px;
-  padding: 8px;
-  transition: color 0.3s;
-}
-
-.dark-mode-toggle:hover {
-  color: var(--pass-color);
-}

package/src/web/nextui/src/app/components/DarkMode.tsx

@@ -1,17 +0,0 @@
-import DarkModeIcon from '@mui/icons-material/DarkMode';
-import LightModeIcon from '@mui/icons-material/LightMode';
-
-import './DarkMode.css';
-
-interface NavbarProps {
-  darkMode: boolean;
-  onToggleDarkMode: () => void;
-}
-
-export default function NavBar({ darkMode, onToggleDarkMode }: NavbarProps) {
-  return (
-    <div className="dark-mode-toggle" onClick={onToggleDarkMode}>
-      {darkMode ? <DarkModeIcon /> : <LightModeIcon />}
-    </div>
-  );
-}

package/src/web/nextui/src/app/components/Logo.css

@@ -1,32 +0,0 @@
-.logo {
-  display: flex;
-  font-family: mono;
-  font-size: 0.8rem;
-  align-items: center;
-  gap: 8px;
-  background-color: #f0f0f0;
-  padding: 0 2rem 0 0;
-  border-radius: 0.5rem;
-}
-
-[data-theme='dark'] .logo {
-  background-color: #333;
-  border-color: #444;
-}
-
-.logo img {
-  width: 25px;
-  margin-top: 2px;
-}
-
-[data-theme='dark'] .logo img {
-  filter: invert(1);
-}
-
-.logo span {
-  color: var(--text-color);
-}
-
-[data-theme='dark'] .logo span {
-  color: #f0f0f0;
-}

package/src/web/nextui/src/app/components/Logo.tsx

@@ -1,11 +0,0 @@
-import Box from '@mui/material/Box';
-
-import './Logo.css';
-
-export default function Logo() {
-  return (
-    <Box className="logo">
-      <img src="/logo.svg" alt="Promptfoo logo" /> <span>promptfoo</span>
-    </Box>
-  );
-}

package/src/web/nextui/src/app/components/PageShell.css

@@ -1,33 +0,0 @@
-.nav {
-  padding: 0.25rem 0 0.25rem 1rem;
-  background-color: #eee;
-  margin-bottom: 1rem;
-}
-
-[data-theme='dark'] .nav {
-  background-color: #333;
-}
-
-.nav a {
-  padding: 0 0.5rem;
-  text-decoration: none;
-  color: #000;
-  align-self: center;
-}
-
-[data-theme='dark'] .nav a {
-  color: #f0f0f0;
-}
-
-.nav div:last-child {
-  margin-left: auto;
-  margin-right: 0.5rem;
-}
-
-.nav a:hover {
-  text-decoration: underline;
-}
-
-[data-theme='dark'] .nav a:hover {
-  color: #ddd;
-}

package/src/web/nextui/src/app/components/PageShell.tsx

@@ -1,87 +0,0 @@
-'use client';
-
-import React from 'react';
-import Link from 'next/link';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import { Stack } from '@mui/material';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-
-import Logo from './Logo';
-import DarkMode from './DarkMode';
-
-import './PageShell.css';
-
-export { PageShell };
-
-function PageShell({ children }: { children: React.ReactNode }) {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const [darkMode, setDarkMode] = React.useState(prefersDarkMode);
-
-  const theme = React.useMemo(
-    () =>
-      createTheme({
-        typography: {
-          fontFamily: 'inherit',
-        },
-        palette: {
-          mode: darkMode ? 'dark' : 'light',
-        },
-      }),
-    [darkMode],
-  );
-
-  const toggleDarkMode = () => {
-    setDarkMode(!darkMode);
-    if (!darkMode) {
-      document.documentElement.setAttribute('data-theme', 'dark');
-    } else {
-      document.documentElement.removeAttribute('data-theme');
-    }
-  };
-
-  React.useEffect(() => {
-    if (prefersDarkMode) {
-      document.documentElement.setAttribute('data-theme', 'dark');
-    }
-  }, [prefersDarkMode]);
-
-  return (
-    <React.StrictMode>
-      <ThemeProvider theme={theme}>
-        <Layout>
-          <Navigation darkMode={darkMode} onToggleDarkMode={toggleDarkMode} />
-          <div>{children}</div>
-        </Layout>
-      </ThemeProvider>
-    </React.StrictMode>
-  );
-}
-
-function Layout({ children }: { children: React.ReactNode }) {
-  return <div>{children}</div>;
-}
-
-function Navigation({
-  darkMode,
-  onToggleDarkMode,
-}: {
-  darkMode: boolean;
-  onToggleDarkMode: () => void;
-}) {
-  if (process.env.NEXT_PUBLIC_NO_BROWSING) {
-    return (
-      <Stack direction="row" spacing={2} className="nav">
-        <Logo />
-        <DarkMode darkMode={darkMode} onToggleDarkMode={onToggleDarkMode} />
-      </Stack>
-    );
-  }
-  return (
-    <Stack direction="row" spacing={2} className="nav">
-      <Logo />
-      <Link href="/setup">New Eval</Link>
-      <Link href="/eval">View Evals</Link>
-      <DarkMode darkMode={darkMode} onToggleDarkMode={onToggleDarkMode} />
-    </Stack>
-  );
-}

package/src/web/nextui/src/app/eval/ConfigModal.tsx

@@ -1,84 +0,0 @@
-import React from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Check from '@mui/icons-material/Check';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import FileCopy from '@mui/icons-material/FileCopy';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-
-import { useStore } from './store';
-
-interface ConfigModalProps {
-  open: boolean;
-  onClose: () => void;
-}
-
-export default function ConfigModal({ open, onClose }: ConfigModalProps) {
-  const { config } = useStore();
-  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
-  const [copied, setCopied] = React.useState(false);
-  const [yamlConfig, setYamlConfig] = React.useState('');
-
-  React.useEffect(() => {
-    if (open) {
-      (async () => {
-        const { default: yaml } = await import('js-yaml');
-        setYamlConfig(yaml.dump(config));
-      })();
-    }
-  }, [open, config]);
-
-  const handleCopyClick = () => {
-    if (textareaRef.current) {
-      textareaRef.current.select();
-      document.execCommand('copy');
-      setCopied(true);
-    }
-  };
-
-  const handleClose = () => {
-    setCopied(false);
-    onClose();
-  };
-
-  return (
-    <Dialog
-      open={open}
-      onClose={handleClose}
-      aria-labelledby="config-dialog-title"
-      maxWidth="md"
-      fullWidth
-    >
-      <DialogTitle id="config-dialog-title">
-        <Box display="flex" justifyContent="space-between" alignItems="center">
-          <Typography variant="h6">Config</Typography>
-          <IconButton onClick={handleCopyClick}>{copied ? <Check /> : <FileCopy />}</IconButton>
-        </Box>
-      </DialogTitle>
-      <DialogContent>
-        <Typography variant="body1" component="div">
-          <textarea
-            ref={textareaRef}
-            readOnly
-            value={yamlConfig}
-            style={{
-              width: '100%',
-              minHeight: '400px',
-              fontFamily: 'monospace',
-              border: '1px solid #ccc',
-            }}
-          />
-        </Typography>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={handleClose} color="primary">
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-}

package/src/web/nextui/src/app/eval/Eval.css

@@ -1,13 +0,0 @@
-body {
-  background-color: var(--background-color);
-  color: var(--text-color);
-}
-
-.loading {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  justify-content: center;
-  align-items: center;
-  height: 9rem;
-}

package/src/web/nextui/src/app/eval/Eval.tsx

@@ -1,79 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import CircularProgress from '@mui/material/CircularProgress';
-import { io as SocketIOClient } from 'socket.io-client';
-
-import ResultsView from './ResultsView';
-import { API_BASE_URL } from '@/util/api';
-import { useStore } from './store';
-
-import type { EvalTable, SharedResults } from './types';
-
-import './Eval.css';
-
-interface EvalOptions {
-  preloadedData?: SharedResults;
-}
-
-export default function Eval({ preloadedData }: EvalOptions) {
-  const { table, setTable, setConfig } = useStore();
-  const [loaded, setLoaded] = React.useState<boolean>(false);
-  const [recentFiles, setRecentFiles] = React.useState<string[]>([]);
-
-  const fetchRecentFiles = async () => {
-    if (!window.location.href.includes('localhost')) {
-      return;
-    }
-    const resp = await fetch(`${API_BASE_URL}/results`);
-    const body = await resp.json();
-    setRecentFiles(body.data);
-  };
-
-  const handleRecentFileSelection = async (file: string) => {
-    const resp = await fetch(`${API_BASE_URL}/results/${file}`);
-    const body = await resp.json();
-    setTable(body.data.results.table);
-    setConfig(body.data.config);
-  };
-
-  React.useEffect(() => {
-    const socket = SocketIOClient(API_BASE_URL);
-
-    if (preloadedData) {
-      setTable(preloadedData.data.results?.table as EvalTable);
-      setConfig(preloadedData.data.config);
-      setLoaded(true);
-    } else {
-      socket.on('init', (data) => {
-        console.log('Initialized socket connection', data);
-        setLoaded(true);
-        setTable(data.results.table);
-        setConfig(data.config);
-        fetchRecentFiles();
-      });
-
-      socket.on('update', (data) => {
-        console.log('Received data update', data);
-        setTable(data.results.table);
-        setConfig(data.config);
-        fetchRecentFiles();
-      });
-    }
-
-    return () => {
-      socket.disconnect();
-    };
-  }, [setTable, setConfig, preloadedData]);
-
-  return loaded && table ? (
-    <ResultsView recentFiles={recentFiles} onRecentFileSelected={handleRecentFileSelection} />
-  ) : (
-    <div className="loading">
-      <div>
-        <CircularProgress size={22} />
-      </div>
-      <div>Loading eval data</div>
-    </div>
-  );
-}

package/src/web/nextui/src/app/eval/EvalOutputPromptDialog.tsx

@@ -1,127 +0,0 @@
-import { useState, useEffect } from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import TextareaAutosize from '@mui/material/TextareaAutosize';
-import IconButton from '@mui/material/IconButton';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import CheckIcon from '@mui/icons-material/Check';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Typography from '@mui/material/Typography';
-
-import type { GradingResult } from './types';
-
-interface EvalOutputPromptDialogProps {
-  open: boolean;
-  onClose: () => void;
-  prompt: string;
-  output?: string;
-  gradingResults?: GradingResult[];
-}
-
-function AssertionResults({ gradingResults }: { gradingResults?: GradingResult[] }) {
-  if (!gradingResults) {
-    return null;
-  }
-
-  return (
-    <Box mt={2}>
-      <Typography variant="subtitle1">Assertions</Typography>
-      <TableContainer>
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableCell style={{ fontWeight: 'bold' }}>Pass</TableCell>
-              <TableCell style={{ fontWeight: 'bold' }}>Score</TableCell>
-              <TableCell style={{ fontWeight: 'bold' }}>Type</TableCell>
-              <TableCell style={{ fontWeight: 'bold' }}>Value</TableCell>
-              <TableCell style={{ fontWeight: 'bold' }}>Reason</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {gradingResults.map((result, i) => (
-              <TableRow key={i}>
-                <TableCell>{result.pass ? '✅' : '❌'}</TableCell>
-                <TableCell>{result.score}</TableCell>
-                <TableCell>{result.assertion?.type || ''}</TableCell>
-                <TableCell>
-                  {result.assertion?.value ? String(result.assertion.value) : '-'}
-                </TableCell>
-                <TableCell>{result.reason}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </Box>
-  );
-}
-
-export default function EvalOutputPromptDialog({
-  open,
-  onClose,
-  prompt,
-  output,
-  gradingResults,
-}: EvalOutputPromptDialogProps) {
-  const [copied, setCopied] = useState(false);
-
-  useEffect(() => {
-    setCopied(false);
-  }, [prompt]);
-
-  const copyToClipboard = async (text: string) => {
-    await navigator.clipboard.writeText(text);
-    setCopied(true);
-  };
-
-  return (
-    <Dialog open={open} onClose={onClose} fullWidth maxWidth="lg">
-      <DialogTitle>Details</DialogTitle>
-      <DialogContent>
-        <Box mb={2}>
-          <Typography variant="subtitle1" style={{ marginBottom: '1rem' }}>
-            Prompt
-          </Typography>
-          <TextareaAutosize
-            readOnly
-            value={prompt}
-            style={{ width: '100%', padding: '0.75rem' }}
-            maxRows={20}
-          />
-          <IconButton
-            onClick={() => copyToClipboard(prompt)}
-            style={{ position: 'absolute', right: '10px', top: '10px' }}
-          >
-            {copied ? <CheckIcon /> : <ContentCopyIcon />}
-          </IconButton>
-        </Box>
-        {output && (
-          <Box my={2}>
-            <Typography variant="subtitle1" style={{ marginBottom: '1rem', marginTop: '1rem' }}>
-              Output
-            </Typography>
-            <TextareaAutosize
-              readOnly
-              maxRows={20}
-              value={output}
-              style={{ width: '100%', padding: '0.75rem' }}
-            />
-          </Box>
-        )}
-        <AssertionResults gradingResults={gradingResults} />
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onClose}>Close</Button>
-      </DialogActions>
-    </Dialog>
-  );
-}