feat: updated openai template

.pre-commit-config.yaml

@@ -1,7 +1,7 @@
 default_stages: [commit]
 repos:
     - repo: https://github.com/alessandrojcm/commitlint-pre-commit-hook
-      rev: 'v9.10.0'
+      rev: 'v9.11.0'
       hooks:
           - id: commitlint
             stages: [commit-msg]

frontend/package.json

@@ -20,8 +20,8 @@
 		"fast-deep-equal": "^3.1.3",
 		"firebase": "^10.7.1",
 		"next": "14.0.4",
-		"next-intl": "^3.4.0",
-		"persist-and-sync": "^1.2.0",
+		"next-intl": "^3.4.1",
+		"persist-and-sync": "^1.2.1",
 		"react": "18.2.0",
 		"react-bootstrap-icons": "^1.10.3",
 		"react-dom": "18.2.0",
@@ -39,20 +39,20 @@
 		"@tailwindcss/forms": "^0.5.7",
 		"@tailwindcss/typography": "^0.5.10",
 		"@testing-library/dom": "^9.3.3",
-		"@testing-library/jest-dom": "^6.1.6",
+		"@testing-library/jest-dom": "^6.2.0",
 		"@testing-library/react": "^14.1.2",
-		"@types/react": "18.2.46",
+		"@types/react": "18.2.47",
 		"@types/react-dom": "18.2.18",
 		"@types/react-syntax-highlighter": "^15.5.11",
 		"@types/validator": "^13.11.7",
 		"@vitejs/plugin-react": "^4.2.1",
 		"autoprefixer": "^10.4.16",
-		"daisyui": "^4.4.24",
-		"jsdom": "^23.0.1",
+		"daisyui": "^4.5.0",
+		"jsdom": "^23.1.0",
 		"mock-socket": "^9.3.1",
-		"postcss": "8.4.32",
-		"sass": "^1.69.6",
-		"tailwindcss": "3.4.0",
+		"postcss": "8.4.33",
+		"sass": "^1.69.7",
+		"tailwindcss": "3.4.1",
 		"vite-plugin-magical-svg": "^1.1.1"
 	}
 }

frontend/public/messages/en.json

@@ -16,8 +16,8 @@
 		"createApiKeyDescription": "Treat the API key as a password - keep it secured and private.",
 		"createApiKeyPlaceholder": "Provide a name for your new API key",
 		"createApiKeySeeItOnce": "You can view it once, It's not stored on our end for security.",
-		"createdAt": "Created at",
-		"default": "Default",
+		"creationDate": "Creation Date",
+		"defaultConfig": "default config",
 		"defaultPromptConfig": "Default Prompt Configuration",
 		"defaultPromptConfigMessage": "The default configuration allows to you to call configuration without providing explicit ID",
 		"delete": "Delete",
@@ -32,9 +32,10 @@
 		"modelsCost": "Models Cost",
 		"name": "Name",
 		"newApiKey": "New API Key",
-		"newConfiguration": "New Configuration",
+		"newConfiguration": "Create New Configuration",
 		"overview": "Overview",
 		"promptConfiguration": "Model Configurations",
+		"revoke": "Revoke",
 		"save": "Save",
 		"settings": "Settings",
 		"status": "Status",
@@ -82,6 +83,7 @@
 		"tooltipAPIKey": "API Keys are used to authenticate your application with our servers. You can create multiple keys."
 	},
 	"createConfigWizard": {
+		"advancedOptions": "Advanced Options",
 		"backButtonText": "Back",
 		"cancelButtonText": "Cancel",
 		"cohere": "Cohere",
@@ -98,26 +100,18 @@
 
 		"cohereParametersTemperatureLabel": "Temperature",
 		"cohereParametersTemperatureTooltip": "A non-negative float that tunes the degree of randomness in generation. Lower temperatures mean less random generations.",
-		"configName": "Config Name",
 		"continueButtonText": "Continue",
 		"createConfig": "Create Configuration",
 		"createPromptConfigTitle": "New Model Configuration",
 		"credits": "Credits Left: ",
-		"deleteMessage": "Remove Message",
 		"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": "Message Content",
-		"messageName": "Message Name",
-		"messageNameInputPlaceholder": "E.g. bot-instruction",
-		"messageRole": "Message Role",
-		"modelParameters": "Parameters",
+		"messageContent": "Prompt Template",
 		"modelResponse": "Model Response",
-		"modelSelection": "Model",
 		"modelType": "Model",
 		"modelVendor": "Provider",
-		"newMessage": "+ New Message",
 		"noVariablesHeadline": "The template has no variables - add as necessary or click on run test",
 		"openai": "OpenAI",
 		"openaiParametersFrequencyPenaltyLabel": "Frequency Penalty",
@@ -132,10 +126,9 @@
 		"openaiParametersTopPTooltip": "Controls diversity via nucleus sampling: 0.5 means half of all likelihood-weighted options are considered. As the top_p approaches 1, the model will become deterministic and repetitive.",
 		"optional": "optional",
 		"promptConfigModelSelectLabel": "Model",
-		"promptConfigNameInputPlaceholder": "For example: Default Config",
+		"promptConfigNameInputPlaceholder": "For example: Default",
 		"promptConfigVendorSelectLabel": "Provider",
-		"promptMessagePlaceholder": "Example of a template: The user favourite albums are: '{favouriteAlbums'}. The user disliked albums are: '{dislikedAlbums'}. Please suggest 5 new albums for the user.",
-		"promptMessages": "Messages",
+		"promptMessagePlaceholder": "The user favourite albums are: '{favouriteAlbums'}. The user disliked albums are: '{dislikedAlbums'}. Please suggest 5 new albums for the user.",
 		"promptTemplate": "Prompt Template",
 		"requestTokens": "Request Tokens",
 		"requestTokensCost": "Request Tokens Cost",
@@ -260,6 +253,21 @@
 		"persistence": "Persistence",
 		"testing": "Testing"
 	},
+	"openaiPromptTemplate": {
+		"deleteMessage": "Remove Message",
+		"invalidNameMessage": "Name must include letters, numbers, dashes and underscores only",
+		"message": "Message",
+		"messageContent": "Message Content",
+		"messageContentPlaceholder": "The user favourite albums are: '{favouriteAlbums'}. The user disliked albums are: '{dislikedAlbums'}. Please suggest 5 new albums for the user.",
+		"messageName": "Name",
+		"messageNameInputPlaceholder": "E.g. bot-instruction",
+		"messageNameTooltip": "An optional value that provides the model information to differentiate between messages of the same role.",
+		"messageRole": "Role",
+		"newMessage": "+ New Message",
+		"optional": "* optional",
+		"saveMessage": "Add Message",
+		"wrapVariable": "use '{ '} to wrap a variable"
+	},
 	"projectOverview": {
 		"apiCalls": "API Calls",
 		"applications": "Applications",

frontend/src/app/[locale]/projects/[projectId]/applications/[applicationId]/config-create-wizard/page.spec.tsx

@@ -28,7 +28,7 @@ import {
 	wizardStoreSelector,
 } from '@/stores/prompt-config-wizard-store';
 import { useToasts } from '@/stores/toast-store';
-import { PromptTestRecord } from '@/types';
+import { OpenAIPromptMessageRole, PromptTestRecord } from '@/types';
 
 vi.mock('@/hooks/use-prompt-testing', () => ({
 	usePromptTesting: vi.fn(() => ({
@@ -208,7 +208,9 @@ describe('PromptConfigCreateWizard Page tests', () => {
 		const store = getStore();
 		act(() => {
 			store.setConfigName(faker.lorem.word());
-			store.setMessages([{ content: 'test', role: 'user' }]);
+			store.setMessages([
+				{ content: 'test', role: OpenAIPromptMessageRole.User },
+			]);
 		});
 
 		render(
@@ -527,6 +529,7 @@ describe('PromptConfigCreateWizard Page tests', () => {
 			store.setParameters(promptConfig[0].modelParameters);
 			store.setModelType(promptConfig[0].modelType);
 			store.setModelVendor(promptConfig[0].modelVendor);
+			store.setMessages([]);
 		});
 
 		render(
@@ -535,29 +538,18 @@ describe('PromptConfigCreateWizard Page tests', () => {
 		await waitFor(() => {
 			expect(mockReady).toHaveBeenCalled();
 		});
-		await waitFor(() => {
-			expect(mockPage).toBeCalledWith(
-				'createConfigWizard-stage0',
-				expect.any(Object),
-			);
-		});
 
-		act(() => {
-			store.setNextWizardStage();
-		});
-		await waitFor(() => {
-			expect(mockPage).toHaveBeenCalledWith(
-				`createConfigWizard-stage1`,
-				expect.any(Object),
-			);
-		});
+		expect(mockPage).toBeCalledWith(
+			'createConfigWizard',
+			expect.any(Object),
+		);
 
 		act(() => {
 			store.setNextWizardStage();
 		});
 		await waitFor(() => {
 			expect(mockPage).toHaveBeenCalledWith(
-				`createConfigWizard-stage2`,
+				`createConfigWizard`,
 				expect.any(Object),
 			);
 		});
@@ -567,7 +559,7 @@ describe('PromptConfigCreateWizard Page tests', () => {
 		});
 		await waitFor(() => {
 			expect(mockPage).toHaveBeenCalledWith(
-				`createConfigWizard-stage3`,
+				`createConfigWizard`,
 				expect.any(Object),
 			);
 		});
@@ -599,7 +591,7 @@ describe('PromptConfigCreateWizard Page tests', () => {
 
 		await waitFor(() => {
 			expect(mockTrack).toHaveBeenCalledWith(
-				'create_config',
+				'createConfig',
 				expect.any(Object),
 			);
 		});

frontend/src/app/[locale]/projects/[projectId]/applications/[applicationId]/config-create-wizard/page.tsx

@@ -22,14 +22,38 @@ import {
 	usePromptConfigs,
 } from '@/stores/api-store';
 import {
+	PromptConfigWizardStore,
 	usePromptWizardStore,
 	WizardStage,
 	wizardStoreSelector,
 } from '@/stores/prompt-config-wizard-store';
+import { CoherePromptMessage, ModelVendor, OpenAIPromptMessage } from '@/types';
 import { setRouteParams } from '@/utils/navigation';
 
 const stepColor = 'step-secondary';
 const stepper = Object.values(WizardStage).filter((v) => typeof v === 'number');
+
+function shouldAllowContinue(store: PromptConfigWizardStore) {
+	if (!store.configName.length) {
+		return false;
+	}
+
+	if (store.wizardStage === 1) {
+		if (!store.messages.length) {
+			return false;
+		}
+		if (store.modelVendor === ModelVendor.Cohere) {
+			const [message] = store.messages as CoherePromptMessage[];
+			return message.message.trim().length;
+		}
+		return store.messages.every(
+			(message) => (message as OpenAIPromptMessage).content.trim().length,
+		);
+	}
+
+	return true;
+}
+
 export default function PromptConfigCreateWizard({
 	params: { applicationId, projectId },
 }: {
@@ -153,7 +177,11 @@ export default function PromptConfigCreateWizard({
 
 	useEffect(() => {
 		if (initialized) {
-			page(`createConfigWizard-stage${store.wizardStage}`);
+			page('createConfigWizard', {
+				applicationId,
+				projectId,
+				stage: store.wizardStage,
+			});
 		}
 	}, [initialized, store.wizardStage]);
 
@@ -172,7 +200,7 @@ export default function PromptConfigCreateWizard({
 				},
 				projectId,
 			});
-			track('create_config', {
+			track('createConfig', {
 				messageLength: store.messages.length,
 				name: store.configName,
 				parameters: store.parameters,
@@ -278,10 +306,7 @@ export default function PromptConfigCreateWizard({
 											className="btn btn-primary"
 											disabled={
 												!nameIsValid ||
-												(store.wizardStage === 0 &&
-													!store.configName.length) ||
-												(store.wizardStage === 1 &&
-													!store.messages.length)
+												!shouldAllowContinue(store)
 											}
 										>
 											{t('continueButtonText')}

frontend/src/app/[locale]/projects/[projectId]/applications/[applicationId]/configs/[promptConfigId]/page.spec.tsx

@@ -199,7 +199,7 @@ describe('PromptConfiguration', () => {
 
 		await waitFor(() => {
 			expect(mockPage).toHaveBeenCalledWith(
-				'config_overview',
+				'configOverview',
 				expect.any(Object),
 			);
 		});

frontend/src/app/[locale]/projects/[projectId]/applications/[applicationId]/configs/[promptConfigId]/page.tsx

@@ -61,7 +61,11 @@ export default function PromptConfiguration({
 
 	useEffect(() => {
 		if (initialized) {
-			page('config_overview');
+			page('configOverview', {
+				applicationId,
+				projectId,
+				promptConfigId,
+			});
 		}
 	}, [initialized]);
 

frontend/src/app/[locale]/projects/[projectId]/applications/[applicationId]/page.spec.tsx

@@ -1,5 +1,4 @@
 import {
-	APIKeyFactory,
 	ApplicationFactory,
 	OpenAIPromptConfigFactory,
 	ProjectFactory,
@@ -14,7 +13,6 @@ import {
 } from 'tests/test-utils';
 import { expect } from 'vitest';
 
-import * as APIKeysAPI from '@/api/api-keys-api';
 import * as PromptConfigAPI from '@/api/prompt-config-api';
 import ApplicationPage from '@/app/[locale]/projects/[projectId]/applications/[applicationId]/page';
 import { useSetProjectApplications, useSetProjects } from '@/stores/api-store';
@@ -24,10 +22,6 @@ describe('ApplicationPage', () => {
 		PromptConfigAPI,
 		'handleRetrievePromptConfigs',
 	);
-	const handleRetrieveAPIKeysSpy = vi.spyOn(
-		APIKeysAPI,
-		'handleRetrieveAPIKeys',
-	);
 
 	it('returns null when application is not present', () => {
 		const {
@@ -87,8 +81,8 @@ describe('ApplicationPage', () => {
 		expect(promptConfig).toBeInTheDocument();
 
 		const tabs = screen.getAllByTestId('tab-navigation-btn');
-		expect(tabs.length).toBe(3);
-		const [, apiKeysTab, settingsTab] = tabs;
+		expect(tabs.length).toBe(2);
+		const [, settingsTab] = tabs;
 		handleRetrievePromptConfigsSpy.mockResolvedValueOnce(promptConfigs);
 		fireEvent.click(settingsTab);
 		const settingsContainer = screen.getByTestId(
@@ -102,17 +96,6 @@ describe('ApplicationPage', () => {
 			'application-deletion-container',
 		);
 		expect(appDeletion).toBeInTheDocument();
-
-		handleRetrieveAPIKeysSpy.mockResolvedValueOnce(
-			await APIKeyFactory.batch(2),
-		);
-		fireEvent.click(apiKeysTab);
-		const apiKeysContainer = screen.getByTestId(
-			'application-api-keys-container',
-		);
-		await waitFor(() => {
-			expect(apiKeysContainer).toBeInTheDocument();
-		});
 	});
 
 	it('call page analytics event when initialized', async () => {
@@ -144,7 +127,7 @@ describe('ApplicationPage', () => {
 		});
 		await waitFor(() => {
 			expect(mockPage).toHaveBeenCalledWith(
-				'application_overview',
+				'applicationOverview',
 				expect.any(Object),
 			);
 		});