feat(opentrons-ai-client): add jotai and custom hook for call api (#1…

…5029) * feat(opentrons-ai-client): add jotai and custom hook for call api
Opentrons · May 3, 2024 · b317cd4 · b317cd4
1 parent 94faec4
commit b317cd4
Show file tree

Hide file tree

Showing 26 changed files with 378 additions and 231 deletions.
diff --git a/opentrons-ai-client/Makefile b/opentrons-ai-client/Makefile
@@ -6,6 +6,9 @@ SHELL := bash
 # add node_modules/.bin to PATH
 PATH := $(shell cd .. && yarn bin):$(PATH)
 
+# dev server port
+PORT ?= 5173
+
 benchmark_output := $(shell node -e 'console.log(new Date());')
 
 # These variables can be overriden when make is invoked to customize the
@@ -42,6 +45,7 @@ build:
 
 .PHONY: dev
 dev: export NODE_ENV := development
+dev: export PORT := $(PORT)
 dev:
 	vite serve
 

diff --git a/opentrons-ai-client/index.html b/opentrons-ai-client/index.html
@@ -2,7 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" href="./src/assets/images/favicon/favicon.ico" />
+    <link rel="manifest" href="./src/assets/images/favicon/site.webmanifest" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Opentrons AI</title>
   </head>

diff --git a/opentrons-ai-client/package.json b/opentrons-ai-client/package.json
@@ -21,7 +21,9 @@
   "dependencies": {
     "@fontsource/public-sans": "5.0.3",
     "@opentrons/components": "link:../components",
+    "axios": "^0.21.1",
     "i18next": "^19.8.3",
+    "jotai": "2.8.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "^4.0.10",

diff --git a/opentrons-ai-client/src/assets/images/favicon/android-chrome-192x192.png b/opentrons-ai-client/src/assets/images/favicon/android-chrome-192x192.png
diff --git a/opentrons-ai-client/src/assets/images/favicon/android-chrome-512x512.png b/opentrons-ai-client/src/assets/images/favicon/android-chrome-512x512.png
diff --git a/opentrons-ai-client/src/assets/images/favicon/apple-touch-icon.png b/opentrons-ai-client/src/assets/images/favicon/apple-touch-icon.png
diff --git a/opentrons-ai-client/src/assets/images/favicon/favicon-16x16.png b/opentrons-ai-client/src/assets/images/favicon/favicon-16x16.png
diff --git a/opentrons-ai-client/src/assets/images/favicon/favicon-32x32.png b/opentrons-ai-client/src/assets/images/favicon/favicon-32x32.png
diff --git a/opentrons-ai-client/src/assets/images/favicon/favicon.ico b/opentrons-ai-client/src/assets/images/favicon/favicon.ico
diff --git a/opentrons-ai-client/src/assets/images/favicon/site.webmanifest b/opentrons-ai-client/src/assets/images/favicon/site.webmanifest
@@ -0,0 +1,19 @@
+{
+  "name": "opentrons_favicon",
+  "short_name": "favicon",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/opentrons-ai-client/src/atoms/SendButton/__tests__/SendButton.test.tsx b/opentrons-ai-client/src/atoms/SendButton/__tests__/SendButton.test.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import { describe, it, vi, beforeEach, expect } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
+import { renderWithProviders } from '../../../__testing-utils__'
+
+import { SendButton } from '../index'
+
+const mockHandleClick = vi.fn()
+const render = (props: React.ComponentProps<typeof SendButton>) => {
+  return renderWithProviders(<SendButton {...props} />)
+}
+
+describe('SendButton', () => {
+  let props: React.ComponentProps<typeof SendButton>
+
+  beforeEach(() => {
+    props = {
+      handleClick: mockHandleClick,
+      disabled: true,
+      isLoading: false,
+    }
+  })
+  it('should render button with send icon and its initially disabled', () => {
+    render(props)
+    const button = screen.getByRole('button')
+    expect(button).toBeDisabled()
+    screen.getByTestId('SendButton_icon_send')
+  })
+
+  it('should render button and its not disabled when disabled false', () => {
+    props = { ...props, disabled: false }
+    render(props)
+    const button = screen.getByRole('button')
+    expect(button).not.toBeDisabled()
+    screen.getByTestId('SendButton_icon_send')
+  })
+
+  it('should render button with spinner icon when isLoading', () => {
+    props = { ...props, isLoading: true }
+    render(props)
+    const button = screen.getByRole('button')
+    expect(button).toBeDisabled()
+    screen.getByTestId('SendButton_icon_ot-spinner')
+  })
+
+  it('should call a mock function when clicking the button', () => {
+    props = { ...props, disabled: false }
+    render(props)
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+    expect(mockHandleClick).toHaveBeenCalled()
+  })
+})
diff --git a/opentrons-ai-client/src/atoms/SendButton/index.tsx b/opentrons-ai-client/src/atoms/SendButton/index.tsx
@@ -0,0 +1,74 @@
+import React from 'react'
+import { css } from 'styled-components'
+
+import {
+  ALIGN_CENTER,
+  BORDERS,
+  Btn,
+  COLORS,
+  DISPLAY_FLEX,
+  Icon,
+  JUSTIFY_CENTER,
+} from '@opentrons/components'
+
+interface SendButtonProps {
+  handleClick: () => void
+  disabled?: boolean
+  isLoading?: boolean
+}
+
+export function SendButton({
+  handleClick,
+  disabled = false,
+  isLoading = false,
+}: SendButtonProps): JSX.Element {
+  const playButtonStyle = css`
+    -webkit-tap-highlight-color: transparent;
+    &:focus {
+      background-color: ${COLORS.blue60};
+      color: ${COLORS.white};
+    }
+
+    &:hover {
+      background-color: ${COLORS.blue50};
+      color: ${COLORS.white};
+    }
+
+    &:focus-visible {
+      background-color: ${COLORS.blue50};
+    }
+
+    &:active {
+      background-color: ${COLORS.blue60};
+      color: ${COLORS.white};
+    }
+
+    &:disabled {
+      background-color: ${COLORS.grey35};
+      color: ${COLORS.grey50};
+    }
+  `
+  return (
+    <Btn
+      alignItems={ALIGN_CENTER}
+      backgroundColor={disabled ? COLORS.grey35 : COLORS.blue50}
+      borderRadius={BORDERS.borderRadiusFull}
+      display={DISPLAY_FLEX}
+      justifyContent={JUSTIFY_CENTER}
+      width="4.25rem"
+      height="3.75rem"
+      disabled={disabled || isLoading}
+      onClick={handleClick}
+      aria-label="play"
+      css={playButtonStyle}
+    >
+      <Icon
+        color={disabled ? COLORS.grey50 : COLORS.white}
+        name={isLoading ? 'ot-spinner' : 'send'}
+        spin={isLoading}
+        size="2rem"
+        data-testid={`SendButton_icon_${isLoading ? 'ot-spinner' : 'send'}`}
+      />
+    </Btn>
+  )
+}
diff --git a/opentrons-ai-client/src/main.tsx b/opentrons-ai-client/src/main.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { I18nextProvider } from 'react-i18next'
 import { GlobalStyle } from './atoms/GlobalStyle'
-import { PromptProvider } from './organisms/PromptButton/PromptProvider'
 
 import { i18n } from './i18n'
 import { App } from './App'
@@ -13,9 +12,7 @@ if (rootElement != null) {
     <React.StrictMode>
       <GlobalStyle />
       <I18nextProvider i18n={i18n}>
-        <PromptProvider>
-          <App />
-        </PromptProvider>
+        <App />
       </I18nextProvider>
     </React.StrictMode>
   )

diff --git a/opentrons-ai-client/src/molecules/ChatDisplay/ChatDisplay.stories.tsx b/opentrons-ai-client/src/molecules/ChatDisplay/ChatDisplay.stories.tsx
@@ -24,7 +24,9 @@ type Story = StoryObj<typeof ChatDisplay>
 
 export const OpentronsAI: Story = {
   args: {
-    content: `
+    chat: {
+      role: 'assistant',
+      content: `
 ## sample output from OpentronsAI
 
 \`\`\`py
@@ -50,13 +52,15 @@ def run(protocol: protocol_api.ProtocolContext):
     TEMP_DECK_WAIT_TIME = 50  # seconds
 \`\`\`
 `,
-    isUserInput: false,
+    },
   },
 }
 
 export const User: Story = {
   args: {
-    content: `
+    chat: {
+      role: 'user',
+      content: `
     - Application: Reagent transfer
     - Robot: OT-2
     - API: 2.13
@@ -76,6 +80,6 @@ export const User: Story = {
     to first well in the destination labware.
     Use  new tip for each transfer.
     `,
-    isUserInput: true,
+    },
   },
 }
diff --git a/opentrons-ai-client/src/molecules/ChatDisplay/__tests__/ChatDisplay.test.tsx b/opentrons-ai-client/src/molecules/ChatDisplay/__tests__/ChatDisplay.test.tsx
@@ -15,8 +15,10 @@ describe('ChatDisplay', () => {
 
   beforeEach(() => {
     props = {
-      content: 'mock text from the backend',
-      isUserInput: false,
+      chat: {
+        role: 'assistant',
+        content: 'mock text from the backend',
+      },
     }
   })
   it('should display response from the backend and label', () => {
@@ -29,8 +31,10 @@ describe('ChatDisplay', () => {
   })
   it('should display input from use and label', () => {
     props = {
-      content: 'mock text from user input',
-      isUserInput: true,
+      chat: {
+        role: 'user',
+        content: 'mock text from user input',
+      },
     }
     render(props)
     screen.getByText('You')

diff --git a/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx b/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+// import { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import Markdown from 'react-markdown'
 import {
@@ -10,37 +11,82 @@ import {
   StyledText,
 } from '@opentrons/components'
 
+import type { ChatData } from '../../resources/types'
+
 interface ChatDisplayProps {
-  content: string
-  isUserInput: boolean
+  chat: ChatData
 }
 
-export function ChatDisplay({
-  content,
-  isUserInput,
-}: ChatDisplayProps): JSX.Element {
+export function ChatDisplay({ chat }: ChatDisplayProps): JSX.Element {
   const { t } = useTranslation('protocol_generator')
+  const { role, content } = chat
+  const isUser = role === 'user'
   return (
     <Flex
       flexDirection={DIRECTION_COLUMN}
       gridGap={SPACING.spacing12}
-      paddingLeft={isUserInput ? SPACING.spacing40 : undefined}
-      paddingRight={isUserInput ? undefined : SPACING.spacing40}
+      paddingLeft={isUser ? SPACING.spacing40 : undefined}
+      paddingRight={isUser ? undefined : SPACING.spacing40}
     >
-      <StyledText>{isUserInput ? t('you') : t('opentronsai')}</StyledText>
+      <StyledText>{isUser ? t('you') : t('opentronsai')}</StyledText>
       {/* text should be markdown so this component will have a package or function to parse markdown */}
       <Flex
         padding={SPACING.spacing32}
-        backgroundColor={isUserInput ? COLORS.blue30 : COLORS.grey30}
-        data-testid={`ChatDisplay_from_${isUserInput ? 'user' : 'backend'}`}
+        backgroundColor={isUser ? COLORS.blue30 : COLORS.grey30}
+        data-testid={`ChatDisplay_from_${isUser ? 'user' : 'backend'}`}
         borderRadius={BORDERS.borderRadius12}
         width="100%"
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing16}
       >
-        {/* ToDo (kk:04/19/2024) I will get feedback for additional styling  from the design team. */}
+        {/* ToDo (kk:05/02/2024) This part is waiting for Mel's design */}
+        {/* <Markdown
+          components={{
+            div: undefined,
+            ul: UnnumberedListText,
+            h2: HeaderText,
+            li: ListItemText,
+            p: ParagraphText,
+            a: ExternalLink,
+            code: CodeText,
+          }}
+        >
+          {content}
+        </Markdown> */}
         <Markdown>{content}</Markdown>
       </Flex>
     </Flex>
   )
 }
+
+// ToDo (kk:05/02/2024) This part is waiting for Mel's design
+// function ExternalLink(props: JSX.IntrinsicAttributes): JSX.Element {
+//   return <a {...props} target="_blank" rel="noopener noreferrer" />
+// }
+
+// function ParagraphText(props: JSX.IntrinsicAttributes): JSX.Element {
+//   return <StyledText {...props} as="p" />
+// }
+
+// function HeaderText(props: JSX.IntrinsicAttributes): JSX.Element {
+//   return <StyledText {...props} as="h3" />
+// }
+
+// function ListItemText(props: JSX.IntrinsicAttributes): JSX.Element {
+//   return <StyledText {...props} as="li" />
+// }
+
+// function UnnumberedListText(props: JSX.IntrinsicAttributes): JSX.Element {
+//   return <StyledText {...props} as="ul" />
+// }
+
+// const CODE_TEXT_STYLE = css`
+//   padding: ${SPACING.spacing16};
+//   font-family: monospace;
+//   color: ${COLORS.white};
+//   background-color: ${COLORS.black90};
+// `
+
+// function CodeText(props: JSX.IntrinsicAttributes): JSX.Element {
+//   return <StyledText {...props} as="p" css={CODE_TEXT_STYLE} />
+// }