From d40330aa6a4a81c660123efdf86313bfd6a359fa Mon Sep 17 00:00:00 2001
From: znaim <zair.naim@thoughtworks.com>
Date: Thu, 24 Oct 2024 18:00:11 -0400
Subject: [PATCH] added chat page and passed in the result of the existing
 protocol flow

---
 opentrons-ai-client/src/OpentronsAIRoutes.tsx |  7 ++++
 .../src/organisms/UpdateProtocol/index.tsx    | 34 +++++++++++++++++++
 opentrons-ai-client/src/pages/Chat/index.tsx  | 30 ++++++++++++++++
 3 files changed, 71 insertions(+)
 create mode 100644 opentrons-ai-client/src/pages/Chat/index.tsx

diff --git a/opentrons-ai-client/src/OpentronsAIRoutes.tsx b/opentrons-ai-client/src/OpentronsAIRoutes.tsx
index 10cbe1d3160..eaf3418187a 100644
--- a/opentrons-ai-client/src/OpentronsAIRoutes.tsx
+++ b/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',
diff --git a/opentrons-ai-client/src/organisms/UpdateProtocol/index.tsx b/opentrons-ai-client/src/organisms/UpdateProtocol/index.tsx
index 98343e65819..f7f21afd908 100644
--- a/opentrons-ai-client/src/organisms/UpdateProtocol/index.tsx
+++ b/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>
diff --git a/opentrons-ai-client/src/pages/Chat/index.tsx b/opentrons-ai-client/src/pages/Chat/index.tsx
new file mode 100644
index 00000000000..b6afee3b510
--- /dev/null
+++ b/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>
+  )
+}