diff --git a/opentrons-ai-client/src/molecules/InputPrompt/index.tsx b/opentrons-ai-client/src/molecules/InputPrompt/index.tsx index d4c4cdf5f8d..70ee01560f4 100644 --- a/opentrons-ai-client/src/molecules/InputPrompt/index.tsx +++ b/opentrons-ai-client/src/molecules/InputPrompt/index.tsx @@ -15,7 +15,12 @@ import { TYPOGRAPHY, } from '@opentrons/components' import { SendButton } from '../../atoms/SendButton' -import { chatDataAtom, chatHistoryAtom, tokenAtom } from '../../resources/atoms' +import { + chatDataAtom, + chatHistoryAtom, + chatPromptAtom, + tokenAtom, +} from '../../resources/atoms' import { useApiCall } from '../../resources/hooks' import { calcTextAreaHeight } from '../../resources/utils/utils' import { @@ -29,7 +34,8 @@ import type { ChatData } from '../../resources/types' export function InputPrompt(): JSX.Element { const { t } = useTranslation('protocol_generator') - const { register, watch, reset } = useFormContext() + const { register, watch, reset, setValue } = useFormContext() + const [chatPromptAtomValue] = useAtom(chatPromptAtom) const [, setChatData] = useAtom(chatDataAtom) const [chatHistory, setChatHistory] = useAtom(chatHistoryAtom) const [token] = useAtom(tokenAtom) @@ -37,6 +43,10 @@ export function InputPrompt(): JSX.Element { const userPrompt = watch('userPrompt') ?? '' const { data, isLoading, callApi } = useApiCall() + useEffect(() => { + setValue('userPrompt', chatPromptAtomValue) + }, [chatPromptAtomValue, setValue]) + const handleClick = async (): Promise => { const userInput: ChatData = { role: 'user', diff --git a/opentrons-ai-client/src/organisms/UpdateProtocol/index.tsx b/opentrons-ai-client/src/organisms/UpdateProtocol/index.tsx index 458dda3b9e6..b1729c83c2a 100644 --- a/opentrons-ai-client/src/organisms/UpdateProtocol/index.tsx +++ b/opentrons-ai-client/src/organisms/UpdateProtocol/index.tsx @@ -1,4 +1,4 @@ -import styled, { css } from 'styled-components' +import styled from 'styled-components' import { COLORS, DIRECTION_COLUMN, @@ -19,9 +19,8 @@ import type { ChangeEvent } from 'react' import { Trans, useTranslation } from 'react-i18next' import { FileUpload } from '../../molecules/FileUpload' import { useNavigate } from 'react-router-dom' -import { chatDataAtom, headerWithMeterAtom } from '../../resources/atoms' +import { chatPromptAtom, headerWithMeterAtom } from '../../resources/atoms' import { CSSTransition } from 'react-transition-group' -import type { ChatData } from '../../resources/types' import { useAtom } from 'jotai' const updateOptions: DropdownOption[] = [ @@ -92,7 +91,7 @@ export function UpdateProtocol(): JSX.Element { const { t }: { t: (key: string) => string } = useTranslation( 'protocol_generator' ) - const [, setChatData] = useAtom(chatDataAtom) + const [, setChatPrompt] = useAtom(chatPromptAtom) const [headerState, setHeaderWithMeterAtom] = useAtom(headerWithMeterAtom) const [updateType, setUpdateType] = useState(null) const [detailsValue, setDetailsValue] = useState('') @@ -156,8 +155,7 @@ export function UpdateProtocol(): JSX.Element { } function processDataAndNavigateToChat(): void { - const userPrompt = ` - Modify the following Python code using the Opentrons Python Protocol API v2. \nEnsure that the new labware and pipettes are compatible with the Flex robot. \nEnsure that you perform the correct Type of Update use the Details of Changes. + const userPrompt = `Modify the following Python code using the Opentrons Python Protocol API v2. Ensure that the new labware and pipettes are compatible with the Flex robot. Ensure that you perform the correct Type of Update use the Details of Changes. Original Python Code: \`\`\`python @@ -172,12 +170,7 @@ export function UpdateProtocol(): JSX.Element { ` console.log(userPrompt) - const userInput: ChatData = { - role: 'user', - reply: userPrompt, - } - - setChatData(chatData => [...chatData, userInput]) + setChatPrompt(chatData => userPrompt) navigate('/chat') } diff --git a/opentrons-ai-client/src/resources/atoms.ts b/opentrons-ai-client/src/resources/atoms.ts index 3ea530c65f6..c5319ddbc36 100644 --- a/opentrons-ai-client/src/resources/atoms.ts +++ b/opentrons-ai-client/src/resources/atoms.ts @@ -11,6 +11,9 @@ import type { /** ChatDataAtom is for chat data (user prompt and response from OpenAI API) */ export const chatDataAtom = atom([]) +/** ChatPromptAtom is for the prefilled userprompt when landing on the chat page */ +export const chatPromptAtom = atom('') + export const chatHistoryAtom = atom([]) export const tokenAtom = atom(null)