+
- Create your first RAG test
+ {title || 'Create your first RAG test'}
{error && (
@@ -96,7 +114,7 @@ function FrequencySelection() {
);
}
+
+export function NewTestFormModal({
+ organization,
+ postCreate,
+}: {
+ organization: IOrganization;
+ postCreate?: ([any]: any) => void;
+}) {
+ return (
+
+ );
+}
diff --git a/frontend/src/pages/Tools/RAGTesting/RecentTests/index.tsx b/frontend/src/pages/Tools/RAGTesting/RecentTests/index.tsx
new file mode 100644
index 0000000..18e6e2e
--- /dev/null
+++ b/frontend/src/pages/Tools/RAGTesting/RecentTests/index.tsx
@@ -0,0 +1,190 @@
+import { Box, Trash } from 'react-feather';
+import Tools, { IRagTest } from '../../../../models/tools';
+import moment from 'moment';
+import paths from '../../../../utils/paths';
+import showToast from '../../../../utils/toast';
+import TestDetailsModal from '../TestDetails';
+
+export default function RecentTestRuns({
+ tests,
+ setTests,
+}: {
+ tests: IRagTest[];
+ setTests: (tests: IRagTest[]) => void;
+}) {
+ return (
+ <>
+
+
+
+ Recently Run RAG Tests
+
+
+
+
+
+
+
+
+ Target workspace
+
+
+ Last run
+
+
+ Run result
+
+
+
+
+
+
+ {tests.map((test) => (
+
{
+ setTests(tests.filter((t) => t.id !== test.id));
+ }}
+ />
+ ))}
+
+
+
+ );
+}
+
+function TestItem({ test, onDelete }: { test: IRagTest; onDelete: any }) {
+ const handleRemove = async () => {
+ if (
+ !window.confirm(
+ 'Are you sure you want to remove this test? It will remove all of its settings and data'
+ )
+ )
+ return false;
+ const success = await Tools.deleteRagTest(test);
+ if (success) {
+ showToast(`RAG Test for ${test.workspace.name} was deleted`, 'success');
+ onDelete?.();
+ return;
+ }
+ showToast(`RAG Test failed to delete`, 'error');
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+ {test.workspace.name}
+
+
+
+
+
+ {test.lastRun ? moment(test.lastRun).fromNow() : '--'}
+
+ {test.frequencyType !== 'demand' && (
+
+ Runs {test.frequencyType}
+
+ )}
+
+
+
+
+
+
+
+ {test.organization_rag_test_runs.length > 0 && (
+
+ View Runs
+
+ )}
+
+
+
+
+
+
+
+ );
+}
+
+function TestResultBadge({ test }: { test: IRagTest }) {
+ const { organization_rag_test_runs = [] } = test;
+ if (organization_rag_test_runs.length === 0) {
+ return (
+
+ Unknown
+
+ );
+ }
+
+ const recentRun = organization_rag_test_runs[0];
+ switch (recentRun.status) {
+ case 'running':
+ return (
+
+ Running
+
+ );
+ case 'failed':
+ return (
+
+ Exited
+
+ );
+ case 'complete':
+ return (
+
+ Passed
+
+ );
+ case 'alert':
+ return (
+
+ Drift detected
+
+ );
+ default:
+ return (
+
+ Unknown
+
+ );
+ }
+}
diff --git a/frontend/src/pages/Tools/RAGTesting/TestDetails/index.tsx b/frontend/src/pages/Tools/RAGTesting/TestDetails/index.tsx
new file mode 100644
index 0000000..579bfdb
--- /dev/null
+++ b/frontend/src/pages/Tools/RAGTesting/TestDetails/index.tsx
@@ -0,0 +1,192 @@
+import { Fragment, useState } from 'react';
+import { IRagTest } from '../../../../models/tools';
+
+export default function TestDetailsModal({ test }: { test: IRagTest }) {
+ return (
+
+ );
+}
+
+function TestDetails({ test }: { test: IRagTest }) {
+ return (
+
+
+ Test settings for Test #{test.id}
+
+
+
+
+ );
+}
+
+function FrequencySelection({ test }: { test: IRagTest }) {
+ return (
+
+
+
+
+ The frequency in which this test is running.
+
+
+
+
+ );
+}
+
+function WorkspaceSelection({ test }: { test: IRagTest }) {
+ return (
+
+
+
+
+ This is the name of the workspace you are running tests against.
+
+
+
+
+ );
+}
+
+function TopKSelection({ test }: { test: IRagTest }) {
+ return (
+
+
+
+
+ The number of embeddings to reference for each test run.
+
+
+
+
+ );
+}
+
+function PromptSelection({ test }: { test: IRagTest }) {
+ const [selection, setSelection] = useState(
+ test.promptText ? 'text' : 'vector'
+ );
+
+ return (
+
+
+
+
+
+ This is the information that is being used for comparison analysis.
+
+
+
+
+
+
+ );
+}
+
+function EmbeddingSample({ test }: { test: IRagTest }) {
+ return (
+
+
+ These are the samples being compared to for each run.
+
+
+ {test.comparisons.map((embedding, i) => {
+ return (
+
+
+
+
+
{embedding.vectorId}
+
+ Original Similarity {(embedding.score * 100.0).toFixed(2)}%
+
+
+
+ {JSON.stringify(embedding.metadata || {}, null, 2)}
+
+
+ );
+ })}
+
+
+ );
+}
diff --git a/frontend/src/pages/Tools/RAGDrift/index.tsx b/frontend/src/pages/Tools/RAGTesting/index.tsx
similarity index 81%
rename from frontend/src/pages/Tools/RAGDrift/index.tsx
rename to frontend/src/pages/Tools/RAGTesting/index.tsx
index 7181b80..fa45863 100644
--- a/frontend/src/pages/Tools/RAGDrift/index.tsx
+++ b/frontend/src/pages/Tools/RAGTesting/index.tsx
@@ -7,8 +7,9 @@ import paths from '../../../utils/paths';
import AppLayout from '../../../layout/AppLayout';
import { useParams } from 'react-router-dom';
import Organization, { IOrganization } from '../../../models/organization';
-import Tools from '../../../models/tools';
-import NewTestForm from './NewTestForm';
+import Tools, { IRagTest } from '../../../models/tools';
+import NewTestForm, { NewTestFormModal } from './NewTestForm';
+import RecentTestRuns from './RecentTests';
export default function RAGDriftTesting() {
const { user } = useUser();
@@ -16,7 +17,7 @@ export default function RAGDriftTesting() {
const [loading, setLoading] = useState
(true);
const [organizations, setOrganizations] = useState([]);
const [organization, setOrganization] = useState(null);
- const [ragTests, setRagTests] = useState([]);
+ const [ragTests, setRagTests] = useState([]);
useEffect(() => {
async function userOrgs() {
@@ -87,12 +88,21 @@ export default function RAGDriftTesting() {
) : (
<>
{ragTests.length > 0 ? (
- show tests here.
+ <>
+
+ {
+ setRagTests([test, ...ragTests]);
+ document.getElementById('new-rag-test-modal')?.close();
+ }}
+ />
+
) : (
- setRagTests([...ragTests, test])
+ postCreate={(test: IRagTest) =>
+ setRagTests([test, ...ragTests])
}
/>
)}
diff --git a/frontend/src/pages/Tools/ToolsList/index.tsx b/frontend/src/pages/Tools/ToolsList/index.tsx
index f5673e2..7818340 100644
--- a/frontend/src/pages/Tools/ToolsList/index.tsx
+++ b/frontend/src/pages/Tools/ToolsList/index.tsx
@@ -23,7 +23,7 @@ export default function ToolsList({ organization }: { organization: any }) {
title="Retrieval Drift Testing & Alerts"
description="Catch context drift in production before it reaches your customers as your vector store changes over time."
available={true}
- linkTo={paths.tools.ragDrift(organization)}
+ linkTo={paths.tools.ragTests(organization)}
/>