From 1083f44df436039f7d5393ca5ec6aff6a6aa82b0 Mon Sep 17 00:00:00 2001
From: Na'aman Hirschfeld <nhirschfeld@gmail.com>
Date: Mon, 8 Jan 2024 09:09:06 +0100
Subject: [PATCH] feat: redesigned prompt testing page

---
 frontend/public/messages/en.json              |  7 +-
 .../config-create-wizard/page.tsx             |  2 +-
 .../prompt-config-testing-form.tsx            | 95 ++++++++++---------
 .../[configId]/prompt-config-testing.tsx      |  1 -
 .../prompt-content-display.tsx                |  2 +-
 .../prompt-test-inputs.tsx                    |  5 +-
 frontend/src/styles/globals.scss              |  4 +-
 7 files changed, 61 insertions(+), 55 deletions(-)

diff --git a/frontend/public/messages/en.json b/frontend/public/messages/en.json
index 6e7df33e..caf7c7b4 100644
--- a/frontend/public/messages/en.json
+++ b/frontend/public/messages/en.json
@@ -103,13 +103,14 @@
 		"continueButtonText": "Continue",
 		"createConfig": "Create Configuration",
 		"createPromptConfigTitle": "New Model Configuration",
-		"credits": "Credits Left: ",
+		"credits": "Free Credits Left: ",
 		"duration": "Duration",
 		"durationTooltip": "Duration: Total time for complete output. Output streams automatically, with the first response occurring almost immediately.",
 		"finishReason": "Finish Reason",
 		"message": "Message",
 		"messageContent": "Prompt Template",
 		"modelResponse": "Model Response",
+		"modelResponse": "Model Response",
 		"modelType": "Model",
 		"modelVendor": "Provider",
 		"noVariablesHeadline": "The template has no variables - add as necessary or click on run test",
@@ -139,11 +140,11 @@
 		"saveButtonText": "Save",
 		"saveMessage": "Add Message",
 		"skipAndSaveButtonText": "Skip Testing and Save",
+		"testInputs": "Test Inputs",
 		"testName": "Test Name",
 		"testResults": "Test Results",
 		"totalCost": "Total Cost",
-		"variables": "Variables",
-		"variablesTooltip": "Required test inputs. Please add the values for the template variables.",
+		"variablesTooltip": "Required test inputs. Please add the values for the template variables. Variables are values defined inside '{'} in the template",
 		"wrapVariable": "use '{ '} to wrap a variable"
 	},
 	"createProject": {
diff --git a/frontend/src/app/[locale]/projects/[projectId]/applications/[applicationId]/config-create-wizard/page.tsx b/frontend/src/app/[locale]/projects/[projectId]/applications/[applicationId]/config-create-wizard/page.tsx
index d80d827f..3a66fc50 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/applications/[applicationId]/config-create-wizard/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/applications/[applicationId]/config-create-wizard/page.tsx
@@ -160,7 +160,7 @@ export default function PromptConfigCreateWizard({
 					setTemplateVariables={handleTemplateVariablesChange}
 					applicationId={applicationId}
 					projectId={projectId}
-					projectCredits={project?.credits}
+					projectCredits={project?.credits ?? '1'}
 					modelType={store.modelType}
 					modelVendor={store.modelVendor}
 					parameters={store.parameters}
diff --git a/frontend/src/components/projects/[projectId]/applications/[applicationId]/config-create-wizard/prompt-config-testing-form.tsx b/frontend/src/components/projects/[projectId]/applications/[applicationId]/config-create-wizard/prompt-config-testing-form.tsx
index 5e394d5d..40fdc03d 100644
--- a/frontend/src/components/projects/[projectId]/applications/[applicationId]/config-create-wizard/prompt-config-testing-form.tsx
+++ b/frontend/src/components/projects/[projectId]/applications/[applicationId]/config-create-wizard/prompt-config-testing-form.tsx
@@ -1,5 +1,5 @@
 import { useTranslations } from 'next-intl';
-import { ChevronRight, PlayFill, Record, Repeat } from 'react-bootstrap-icons';
+import { PlayFill, Record, Repeat } from 'react-bootstrap-icons';
 
 import { CardHeaderWithTooltip } from '@/components/card-header-with-tooltip';
 import { PromptContentDisplay } from '@/components/prompt-display-components/prompt-content-display';
@@ -42,7 +42,6 @@ export function PromptConfigTestingForm<T extends ModelVendor>({
 	modelType,
 	parameters,
 	promptConfigId,
-	showPromptTemplateDisplay = true,
 }: {
 	applicationId: string;
 	handleError: (error: unknown) => void;
@@ -50,11 +49,10 @@ export function PromptConfigTestingForm<T extends ModelVendor>({
 	modelType: ModelType<T>;
 	modelVendor: T;
 	parameters: ModelParameters<T>;
-	projectCredits?: string;
+	projectCredits: string;
 	projectId: string;
 	promptConfigId?: string;
 	setTemplateVariables: (templateVariables: Record<string, string>) => void;
-	showPromptTemplateDisplay?: boolean;
 	templateVariables: Record<string, string>;
 }) {
 	const t = useTranslations('createConfigWizard');
@@ -121,21 +119,38 @@ export function PromptConfigTestingForm<T extends ModelVendor>({
 		}
 	};
 
+	const responseContent = modelResponses
+		.map((message) => message.content)
+		.join('');
+
 	return (
 		<div
 			className="flex flex-col justify-evenly"
 			data-testid="prompt-config-testing-form"
 		>
-			{showPromptTemplateDisplay && (
+			<span className="text-info text-xl text-center pt-2">
+				{`${t('credits') + projectCredits}$`}
+			</span>
+			<div className="flex justify-between">
 				<PromptContentDisplay
 					modelVendor={modelVendor}
 					messages={messages}
 				/>
-			)}
+				<button
+					disabled={!allExpectedVariablesHaveLength || isRunningTest}
+					data-testid="run-test-button"
+					className="btn btn-wide btn-success self-start"
+					onClick={testFinishReason ? resetState : handleRunTest}
+				>
+					{renderButtonIcon()}
+					{t('runTest')}
+				</button>
+			</div>
 			{expectedVariables.length > 0 && (
 				<>
+					<div className="card-divider" />
 					<CardHeaderWithTooltip
-						headerText={t('variables')}
+						headerText={t('testInputs')}
 						tooltipText={t('variablesTooltip')}
 						dataTestId="test-inputs-header"
 					/>
@@ -149,44 +164,36 @@ export function PromptConfigTestingForm<T extends ModelVendor>({
 					</div>
 				</>
 			)}
-			<div className="card-section-divider" />
-			<button
-				disabled={!allExpectedVariablesHaveLength || isRunningTest}
-				data-testid="run-test-button"
-				className="btn btn-wide btn-primary bg-base-content text-base-100 self-center"
-				onClick={testFinishReason ? resetState : handleRunTest}
-			>
-				{renderButtonIcon()}
-				{t('runTest')}
-			</button>
-
-			{projectCredits && (
-				<span className="text-neutral-content text-sm text-center pt-2">
-					{`${t('credits') + projectCredits}$`}
-				</span>
+			{responseContent && (
+				<>
+					<div className="card-divider" />
+					<h2 className="card-header">{t('modelResponse')}</h2>
+					<div className="rounded-dark-card">
+						<div
+							className="flex gap-2 pt-5 pb-5  content-center items-center"
+							data-testid="model-response-container"
+						>
+							<span className="text-success">
+								{responseContent}
+							</span>
+						</div>
+					</div>
+				</>
+			)}
+			{(testRecord ?? testFinishReason) && (
+				<>
+					<div className="card-divider" />
+					<h2 className="card-header">{t('testResults')}</h2>
+					<div className="rounded-dark-card">
+						<PromptTestResultTable
+							modelVendor={modelVendor}
+							modelType={modelType}
+							testFinishReason={testFinishReason}
+							testRecord={testRecord}
+						/>
+					</div>
+				</>
 			)}
-			<div className="card-section-divider" />
-			<h2 className="card-header">{t('testResults')}</h2>
-			<div className="rounded-dark-card">
-				<PromptTestResultTable
-					modelVendor={modelVendor}
-					modelType={modelType}
-					testFinishReason={testFinishReason}
-					testRecord={testRecord}
-				/>
-				<div
-					className="flex gap-2 pl-4 content-center items-center"
-					data-testid="model-response-container"
-				>
-					<ChevronRight className="h-4 w-4" />
-					<span className="text-info">
-						{modelResponses
-							.map((message) => message.content)
-							.join('')}
-					</span>
-				</div>
-				<div className="card-section-divider" />
-			</div>
 		</div>
 	);
 }
diff --git a/frontend/src/components/projects/[projectId]/applications/[applicationId]/configs/[configId]/prompt-config-testing.tsx b/frontend/src/components/projects/[projectId]/applications/[applicationId]/configs/[configId]/prompt-config-testing.tsx
index 951dd723..a89dea65 100644
--- a/frontend/src/components/projects/[projectId]/applications/[applicationId]/configs/[configId]/prompt-config-testing.tsx
+++ b/frontend/src/components/projects/[projectId]/applications/[applicationId]/configs/[configId]/prompt-config-testing.tsx
@@ -203,7 +203,6 @@ export function PromptConfigTesting<T extends ModelVendor>({
 				setTemplateVariables={setTemplateVariables}
 				handleError={handleError}
 				messages={messages}
-				showPromptTemplateDisplay={false}
 			/>
 			<div className="card-divider" />
 			<div
diff --git a/frontend/src/components/prompt-display-components/prompt-content-display.tsx b/frontend/src/components/prompt-display-components/prompt-content-display.tsx
index 981cda84..34c9e9bd 100644
--- a/frontend/src/components/prompt-display-components/prompt-content-display.tsx
+++ b/frontend/src/components/prompt-display-components/prompt-content-display.tsx
@@ -82,7 +82,7 @@ export function PromptContentDisplay<T extends ModelVendor>({
 				</h2>
 			</div>
 			<div
-				className="rounded-data-card"
+				className="rounded-dark-card"
 				data-testid="prompt-content-display-messages"
 			>
 				{messageContent.map((msg, i) => (
diff --git a/frontend/src/components/prompt-display-components/prompt-test-inputs.tsx b/frontend/src/components/prompt-display-components/prompt-test-inputs.tsx
index 88c25c50..bf72702f 100644
--- a/frontend/src/components/prompt-display-components/prompt-test-inputs.tsx
+++ b/frontend/src/components/prompt-display-components/prompt-test-inputs.tsx
@@ -11,11 +11,10 @@ export function PromptTestInputs({
 }) {
 	return (
 		<div data-testid="test-inputs-container">
-			<div className="grid grid-cols-2 gap-4 min-w-[50%]">
+			<div className="flex flex-col gap-5">
 				{expectedVariables.map((variable) => (
 					<div key={variable} className="form-control">
-						<input
-							type="text"
+						<textarea
 							className="card-textarea textarea-info bg-neutral placeholder-info"
 							data-testid={`input-variable-input-${variable}`}
 							value={templateVariables[variable] ?? ''}
diff --git a/frontend/src/styles/globals.scss b/frontend/src/styles/globals.scss
index 0fdd2446..37108be6 100644
--- a/frontend/src/styles/globals.scss
+++ b/frontend/src/styles/globals.scss
@@ -76,10 +76,10 @@ div#__next > div {
 	}
 
 	.rounded-data-card {
-		@apply mt-3.5 rounded-4xl w-full bg-base-200 py-8 px-16;
+		@apply mt-3.5 rounded-4xl w-full bg-base-200 px-16;
 	}
 	.rounded-dark-card {
-		@apply mt-3.5 rounded-4xl w-full bg-base-300 py-8 px-16 shadow-xl;
+		@apply mt-3.5 rounded-4xl w-full bg-base-300 px-16 shadow-xl;
 	}
 
 	.analytics {