added chat page and passed in the result of the existing protocol flow

opentrons-ai-client/src/OpentronsAIRoutes.tsx

@@ -3,9 +3,16 @@ import { Landing } from './pages/Landing'
 import { UpdateProtocol } from './organisms/UpdateProtocol'
 
 import type { RouteProps } from './resources/types'
+import { Chat } from './pages/Chat'
 
 const opentronsAIRoutes: RouteProps[] = [
   // replace Landing with the correct component
+  {
+    Component: Chat,
+    name: 'Chat',
+    navLinkTo: '/chat',
+    path: '/chat',
+  },
   {
     Component: Landing,
     name: 'Create A New Protocol',

opentrons-ai-client/src/organisms/UpdateProtocol/index.tsx

@@ -19,6 +19,10 @@ import { useEffect, useState } from 'react'
 import type { ChangeEvent } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { FileUpload } from '../../molecules/FileUpload'
+import { useNavigate } from 'react-router-dom'
+import { chatDataAtom } from '../../resources/atoms'
+import type { ChatData } from '../../resources/types'
+import { useAtom } from 'jotai'
 
 const updateOptions: DropdownOption[] = [
   {
@@ -65,9 +69,11 @@ const isValidProtocolFileName = (protocolFileName: string): boolean => {
 }
 
 export function UpdateProtocol(): JSX.Element {
+  const navigate = useNavigate()
   const { t }: { t: (key: string) => string } = useTranslation(
     'protocol_generator'
   )
+  const [, setChatData] = useAtom(chatDataAtom)
   const [progressPercentage, setProgressPercentage] = useState<number>(0.0)
   const [updateType, setUpdateType] = useState<DropdownOption | null>(null)
   const [detailsValue, setDetailsValue] = useState<string>('')
@@ -107,6 +113,7 @@ export function UpdateProtocol(): JSX.Element {
 
       if (typeof text === 'string' && text !== '') {
         setErrorText(null)
+        console.log('File read successfully:\n', text)
         setPythonTextValue(text)
       } else {
         setErrorText(t('file_length_error'))
@@ -119,6 +126,32 @@ export function UpdateProtocol(): JSX.Element {
     }
   }
 
+  function processDataAndNavigateToChat(): void {
+    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
+    ${pythonText}
+    \`\`\`
+
+    Type of update:
+    - ${updateType?.value}
+
+    Details of Changes:
+    - ${detailsValue}
+  `
+    console.log(userPrompt)
+
+    const userInput: ChatData = {
+      role: 'user',
+      reply: userPrompt,
+    }
+
+    setChatData(chatData => [...chatData, userInput])
+    navigate('/chat')
+  }
+
   return (
     <Container>
       <HeaderWithMeter
@@ -211,6 +244,7 @@ export function UpdateProtocol(): JSX.Element {
           <LargeButton
             disabled={progressPercentage !== 1.0}
             buttonText={t('submit_prompt')}
+            onClick={processDataAndNavigateToChat}
           />
         </Flex>
       </ContentBox>

opentrons-ai-client/src/pages/Chat/index.tsx

@@ -0,0 +1,30 @@
+import { useForm, FormProvider } from 'react-hook-form'
+import { COLORS, Flex, POSITION_RELATIVE } from '@opentrons/components'
+
+import { SidePanel } from '../../molecules/SidePanel'
+import { MainContentContainer } from '../../organisms/MainContentContainer'
+
+export interface InputType {
+  userPrompt: string
+}
+
+export function Chat(): JSX.Element | null {
+  const methods = useForm<InputType>({
+    defaultValues: {
+      userPrompt: '',
+    },
+  })
+
+  return (
+    <Flex
+      position={POSITION_RELATIVE}
+      minHeight="100vh"
+      backgroundColor={COLORS.grey10}
+    >
+      <FormProvider {...methods}>
+        {/* <SidePanel /> */}
+        <MainContentContainer />
+      </FormProvider>
+    </Flex>
+  )
+}