diff --git a/opentrons-ai-client/src/assets/localization/en/protocol_generator.json b/opentrons-ai-client/src/assets/localization/en/protocol_generator.json
index f44eff34e73..cc5c727c1e8 100644
--- a/opentrons-ai-client/src/assets/localization/en/protocol_generator.json
+++ b/opentrons-ai-client/src/assets/localization/en/protocol_generator.json
@@ -34,5 +34,7 @@
"well_allocations": "Well allocations: Describe where liquids should go in labware.",
"what_if_you": "What if you don’t provide all of those pieces of information? OpentronsAI asks you to provide it!",
"what_typeof_protocol": "What type of protocol do you need?",
- "you": "You"
+ "you": "You",
+ "prompt_preview_submit_button": "Submit prompt",
+ "prompt_preview_placeholder_message": "As you complete the sections on the left, your prompt will be built here. When all requirements are met you will be able to generate the protocol."
}
diff --git a/opentrons-ai-client/src/molecules/PromptPreview/__tests__/PromptPreview.test.tsx b/opentrons-ai-client/src/molecules/PromptPreview/__tests__/PromptPreview.test.tsx
index 8adb5bd86f8..ab7d69543ba 100644
--- a/opentrons-ai-client/src/molecules/PromptPreview/__tests__/PromptPreview.test.tsx
+++ b/opentrons-ai-client/src/molecules/PromptPreview/__tests__/PromptPreview.test.tsx
@@ -2,9 +2,13 @@ import { screen } from '@testing-library/react'
import { describe, it, vi, beforeEach, expect } from 'vitest'
import { renderWithProviders } from '../../../__testing-utils__'
import { i18n } from '../../../i18n'
-import { PROMPT_PREVIEW_PLACEHOLDER_MESSAGE, PromptPreview } from '..'
+import { PromptPreview } from '..'
+
+const PROMPT_PREVIEW_PLACEHOLDER_MESSAGE =
+ 'As you complete the sections on the left, your prompt will be built here. When all requirements are met you will be able to generate the protocol.'
const mockHandleClick = vi.fn()
+
const render = (props: React.ComponentProps) => {
return renderWithProviders(, {
i18nInstance: i18n,
diff --git a/opentrons-ai-client/src/molecules/PromptPreview/index.tsx b/opentrons-ai-client/src/molecules/PromptPreview/index.tsx
index 6cc8e37320e..b789cfbb4c7 100644
--- a/opentrons-ai-client/src/molecules/PromptPreview/index.tsx
+++ b/opentrons-ai-client/src/molecules/PromptPreview/index.tsx
@@ -13,9 +13,7 @@ import {
} from '@opentrons/components'
import { PromptPreviewSection } from '../PromptPreviewSection'
import type { PromptPreviewSectionProps } from '../PromptPreviewSection'
-
-export const PROMPT_PREVIEW_PLACEHOLDER_MESSAGE =
- 'As you complete the sections on the left, your prompt will be built here. When all requirements are met you will be able to generate the protocol.'
+import { useTranslation } from 'react-i18next'
interface PromptPreviewProps {
isSubmitButtonEnabled?: boolean
@@ -49,6 +47,8 @@ export function PromptPreview({
handleSubmit,
promptPreviewData = [],
}: PromptPreviewProps): JSX.Element {
+ const { t } = useTranslation('protocol_generator')
+
const areAllSectionsEmpty = (): boolean => {
return promptPreviewData.every(section => section.items.length === 0)
}
@@ -58,7 +58,7 @@ export function PromptPreview({
Prompt
@@ -66,7 +66,7 @@ export function PromptPreview({
{areAllSectionsEmpty() && (
- {PROMPT_PREVIEW_PLACEHOLDER_MESSAGE}
+ {t('prompt_preview_placeholder_message')}
)}