feat: updated prompt config snippets

basemind-ai · Jan 9, 2024 · f443882 · f443882
1 parent d12d8dd
commit f443882
Show file tree

Hide file tree

Showing 17 changed files with 622 additions and 1,053 deletions.
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -63,3 +63,4 @@ repos:
       hooks:
           - id: codespell
             additional_dependencies: ['tomli']
+            exclude: 'go.*'
diff --git a/frontend/package.json b/frontend/package.json
@@ -13,7 +13,7 @@
 		"@firebase/analytics": "^0.10.0",
 		"@firebase/app": "^0.9.25",
 		"@firebase/auth": "^1.5.1",
-		"@segment/analytics-next": "^1.62.0",
+		"@segment/analytics-next": "^1.62.1",
 		"@uidotdev/usehooks": "^2.4.1",
 		"dayjs": "^1.11.10",
 		"deepmerge-ts": "^5.1.0",
@@ -26,6 +26,7 @@
 		"react-bootstrap-icons": "^1.10.3",
 		"react-dom": "18.2.0",
 		"react-loading-icons": "^1.1.0",
+		"react-string-replace": "^1.1.1",
 		"react-syntax-highlighter": "^15.5.0",
 		"react-tailwindcss-datepicker": "^1.6.6",
 		"sharp": "^0.33.1",
@@ -38,7 +39,7 @@
 		"@svgr/webpack": "^8.1.0",
 		"@tailwindcss/forms": "^0.5.7",
 		"@tailwindcss/typography": "^0.5.10",
-		"@testing-library/dom": "^9.3.3",
+		"@testing-library/dom": "^9.3.4",
 		"@testing-library/jest-dom": "^6.2.0",
 		"@testing-library/react": "^14.1.2",
 		"@types/react": "18.2.47",
@@ -48,7 +49,7 @@
 		"@vitejs/plugin-react": "^4.2.1",
 		"autoprefixer": "^10.4.16",
 		"daisyui": "^4.5.0",
-		"jsdom": "^23.1.0",
+		"jsdom": "^23.2.0",
 		"mock-socket": "^9.3.1",
 		"postcss": "8.4.33",
 		"sass": "^1.69.7",

diff --git a/frontend/public/messages/en.json b/frontend/public/messages/en.json
@@ -64,9 +64,14 @@
 		"submit": "Submit"
 	},
 	"configCodeSnippet": {
-		"createAPIKey": "Create API Key",
+		"dartInstallationText": "Add the dependency to your application's pubspec.yaml file:",
 		"documentation": "Documentation",
-		"implement": "Implement"
+		"implement": "Implement",
+		"importText": "You can now import and initialize the client in your code:",
+		"kotlinInstallationText": "Add the dependency to your application's build.gradle.kts file:",
+		"swiftInstallationText": "Add the dependency to your application's Package.swift:",
+		"usageRequestText": "Use the client to request a prompt using the config:",
+		"usageStreamText": "Or request a streaming response using the config:"
 	},
 	"createApplication": {
 		"applicationCreated": "Application Created",
@@ -322,6 +327,7 @@
 		"promptHeader": "Prompt Testing",
 		"savedPromptConfig": "Saved Templates"
 	},
+
 	"promptConfig": {
 		"apiCalls": "API Calls",
 		"cancel": "Cancel",

diff --git a/...cale]/projects/[projectId]/applications/[applicationId]/configs/[promptConfigId]/page.tsx b/...cale]/projects/[projectId]/applications/[applicationId]/configs/[promptConfigId]/page.tsx
@@ -2,7 +2,7 @@
 
 import { useTranslations } from 'next-intl';
 import { memo, useEffect, useState } from 'react';
-import { Gear, RocketTakeoff, Speedometer2 } from 'react-bootstrap-icons';
+import { Gear, Speedometer2 } from 'react-bootstrap-icons';
 import { Oval } from 'react-loading-icons';
 import useSWR from 'swr';
 
@@ -12,7 +12,6 @@ import { PromptConfigCodeSnippet } from '@/components/projects/[projectId]/appli
 import { PromptConfigDeletion } from '@/components/projects/[projectId]/applications/[applicationId]/configs/[configId]/prompt-config-deletion';
 import { PromptConfigGeneralInfo } from '@/components/projects/[projectId]/applications/[applicationId]/configs/[configId]/prompt-config-general-info';
 import { PromptConfigGeneralSettings } from '@/components/projects/[projectId]/applications/[applicationId]/configs/[configId]/prompt-config-general-settings';
-import { PromptConfigTesting } from '@/components/projects/[projectId]/applications/[applicationId]/configs/[configId]/prompt-config-testing';
 import { TabData, TabNavigation } from '@/components/tab-navigation';
 import { PromptConfigPageTab } from '@/constants';
 import { useAnalytics } from '@/hooks/use-analytics';
@@ -92,11 +91,6 @@ export default function PromptConfiguration({
 			id: PromptConfigPageTab.OVERVIEW,
 			text: t('overview'),
 		},
-		{
-			icon: <RocketTakeoff className="w-3.5 h-3.5" />,
-			id: PromptConfigPageTab.TESTING,
-			text: t('test'),
-		},
 		{
 			icon: <Gear className="w-3.5 h-3.5" />,
 			id: PromptConfigPageTab.SETTINGS,
@@ -110,20 +104,11 @@ export default function PromptConfiguration({
 				<PromptConfigGeneralInfo promptConfig={promptConfig} />
 				<div className="card-divider" />
 				<PromptConfigCodeSnippet
-					projectId={projectId}
-					applicationId={applicationId}
 					promptConfigId={promptConfigId}
 					isDefaultConfig={promptConfig.isDefault ?? false}
 				/>
 			</>
 		)),
-		[PromptConfigPageTab.TESTING]: memo(() => (
-			<PromptConfigTesting
-				projectId={projectId}
-				applicationId={applicationId}
-				promptConfig={promptConfig}
-			/>
-		)),
 		[PromptConfigPageTab.SETTINGS]: memo(() => (
 			<>
 				<PromptConfigGeneralSettings

diff --git a/...ts/projects/[projectId]/applications/[applicationId]/application-prompt-configs-table.tsx b/...ts/projects/[projectId]/applications/[applicationId]/application-prompt-configs-table.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
-import { PencilFill, Search } from 'react-bootstrap-icons';
+import { PencilFill } from 'react-bootstrap-icons';
 
 import { Navigation, PromptConfigPageTab } from '@/constants';
 import {
@@ -52,7 +52,6 @@ export function ApplicationPromptConfigsTable({
 					<th>{t('name')}</th>
 					<th>{t('vendor')}</th>
 					<th>{t('model')}</th>
-					<th>{t('test')}</th>
 					<th>{t('edit')}</th>
 				</tr>
 			</thead>
@@ -101,19 +100,6 @@ export function ApplicationPromptConfigsTable({
 									{modelTypeToLocaleMap[modelType]}
 								</span>
 							</td>
-							<td>
-								<button
-									data-testid="application-prompt-configs-table-config-test-button"
-									onClick={() => {
-										pushToTab({
-											promptConfigId,
-											tab: PromptConfigPageTab.TESTING,
-										});
-									}}
-								>
-									<Search className="w-3.5 h-3.5 text-secondary" />
-								</button>
-							</td>
 							<td>
 								<button
 									data-testid="application-prompt-configs-table-config-edit-button"

diff --git a/...ctId]/applications/[applicationId]/configs/[configId]/prompt-config-code-snippet.spec.tsx b/...ctId]/applications/[applicationId]/configs/[configId]/prompt-config-code-snippet.spec.tsx
@@ -1,5 +1,4 @@
 import { faker } from '@faker-js/faker';
-import { ApplicationFactory, ProjectFactory } from 'tests/factories';
 import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
 
 import { PromptConfigCodeSnippet } from '@/components/projects/[projectId]/applications/[applicationId]/configs/[configId]/prompt-config-code-snippet';
@@ -11,16 +10,11 @@ navigator.clipboard = { writeText: writeTextMock };
 
 describe('PromptConfigCodeSnippet', () => {
 	const supportedLanguages = ['kotlin', 'swift', 'dart'];
-
-	const project = ProjectFactory.buildSync();
-	const application = ApplicationFactory.buildSync();
 	const promptConfigId = faker.string.uuid();
 
 	it('should render the component with the default framework selected', () => {
 		render(
 			<PromptConfigCodeSnippet
-				projectId={project.id}
-				applicationId={application.id}
 				promptConfigId={promptConfigId}
 				isDefaultConfig={true}
 			/>,
@@ -36,8 +30,6 @@ describe('PromptConfigCodeSnippet', () => {
 		(language: string) => {
 			render(
 				<PromptConfigCodeSnippet
-					projectId={project.id}
-					applicationId={application.id}
 					promptConfigId={promptConfigId}
 					isDefaultConfig={true}
 				/>,
@@ -53,8 +45,6 @@ describe('PromptConfigCodeSnippet', () => {
 		(language: string) => {
 			render(
 				<PromptConfigCodeSnippet
-					projectId={project.id}
-					applicationId={application.id}
 					promptConfigId={promptConfigId}
 					isDefaultConfig={false}
 				/>,
@@ -69,8 +59,6 @@ describe('PromptConfigCodeSnippet', () => {
 	it('should copy the code snippet to the clipboard when the user clicks the copy button', async () => {
 		render(
 			<PromptConfigCodeSnippet
-				projectId={project.id}
-				applicationId={application.id}
 				promptConfigId={promptConfigId}
 				isDefaultConfig={true}
 			/>,
@@ -93,8 +81,6 @@ describe('PromptConfigCodeSnippet', () => {
 			const openMock = (window.open = vi.fn());
 			render(
 				<PromptConfigCodeSnippet
-					projectId={project.id}
-					applicationId={application.id}
 					promptConfigId={promptConfigId}
 					isDefaultConfig={true}
 				/>,
@@ -110,8 +96,6 @@ describe('PromptConfigCodeSnippet', () => {
 	it('should open create API key model when the user clicks the create API key button', async () => {
 		render(
 			<PromptConfigCodeSnippet
-				projectId={project.id}
-				applicationId={application.id}
 				promptConfigId={promptConfigId}
 				isDefaultConfig={true}
 			/>,
@@ -127,8 +111,6 @@ describe('PromptConfigCodeSnippet', () => {
 	it('should change the selected framework when a different tab is clicked', () => {
 		render(
 			<PromptConfigCodeSnippet
-				projectId={project.id}
-				applicationId={application.id}
 				promptConfigId={promptConfigId}
 				isDefaultConfig={true}
 			/>,
@@ -144,8 +126,6 @@ describe('PromptConfigCodeSnippet', () => {
 	it('should close the create API key modal when the cancel button is clicked', async () => {
 		render(
 			<PromptConfigCodeSnippet
-				projectId={project.id}
-				applicationId={application.id}
 				promptConfigId={promptConfigId}
 				isDefaultConfig={true}
 			/>,