feat(opentron-ai-client): add Side Panel component (#14886)

* feat(opentron-ai-client):  add Side Panel component

.storybook/main.js

@@ -2,6 +2,7 @@ module.exports = {
   stories: [
     '../components/**/*.stories.@(js|jsx|ts|tsx)',
     '../app/**/*.stories.@(js|jsx|ts|tsx)',
+    '../opentrons-ai-client/**/*.stories.@(js|jsx|ts|tsx)',
   ],
 
   addons: [

.storybook/preview.jsx

@@ -20,7 +20,7 @@ export const parameters = {
   options: {
     storySort: {
       method: 'alphabetical',
-      order: ['Design Tokens', 'Library', 'App', 'ODD'],
+      order: ['Design Tokens', 'Library', 'App', 'ODD', 'AI'],
     },
   },
 }

components/src/styles/flexbox.ts

@@ -1,6 +1,7 @@
 export const FLEX_NONE = 'none'
 export const FLEX_AUTO = 'auto'
 export const FLEX_MIN_CONTENT = 'min-content'
+export const FLEX_MAX_CONTENT = 'max-content'
 
 export const ALIGN_NORMAL = 'normal'
 export const ALIGN_START = 'start'

opentrons-ai-client/README.md

@@ -2,8 +2,6 @@
 
 [![JavaScript Style Guide][style-guide-badge]][style-guide]
 
-[Download][] | [Support][]
-
 ## Overview
 
 The Opentrons AI application helps you to create a protocol with natural language.
@@ -31,7 +29,7 @@ The UI stack is built using:
 
 Some important directories:
 
-- `opentrons-ai-server` — Opentrons AI application's server
+- [opentrons-ai-server][] — Opentrons AI application's server
 
 ## Copy management
 
@@ -62,3 +60,4 @@ TBD
 [babel]: https://babeljs.io/
 [vite]: https://vitejs.dev/
 [bundle-analyzer]: https://github.com/webpack-contrib/webpack-bundle-analyzer
+[opentrons-ai-server]: https://github.com/Opentrons/opentrons/tree/edge/opentrons-ai-server

opentrons-ai-client/src/assets/localization/en/protocol_generator.json

@@ -2,20 +2,22 @@
   "api": "API: An API level is 2.15",
   "application": "Application: Your protocol's name, describing what it does.",
   "commands": "Commands: List the protocol's steps, specifying quantities in microliters and giving exact source and destination locations.",
+  "got_feedback": "Got feedback? We love to hear it.",
   "make_sure_your_prompt": "Make sure your prompt includes the following:",
   "metadata": "Metadata: Three pieces of information.",
   "modules": "Modules: Thermocycler or Temperature Module.",
   "opentronsai_asks_you": "OpentronsAI asks you to provide it!",
   "ot2_pipettes": "OT-2 pipettes: Include volume, number of channels, and generation.",
-  "prc_flex": "PRC (Flex)",
+  "prc_flex": "PCR (Flex)",
   "prc": "PCR",
   "reagent_transfer_flex": "Reagent Transfer (Flex)",
   "reagent_transfer": "Reagent Transfer",
   "robot": "Robot: OT-2.",
-  "sidebar_body": "Write a prompt in natural language to generate a Reagent Transfer or a PCR protocol for the OT-2 or Opentrons Flex using the Opentrons Python Protocol API.",
-  "sidebar_header": "Use natural language to generate protocols with OpentronsAI powered by OpenAI",
-  "stuck": "Stuck? Try these example prompts to get started.",
+  "share_your_thoughts": "Share your thoughts here",
+  "side_panel_body": "Write a prompt in natural language to generate a Reagent Transfer or a PCR protocol for the OT-2 or Opentrons Flex using the Opentrons Python Protocol API.",
+  "side_panel_header": "Use natural language to generate protocols with OpentronsAI powered by OpenAI",
   "tipracks_and_labware": "Tip racks and labware: Use names from the Opentrons Labware Library.",
+  "try_example_prompts": "Stuck? Try these example prompts to get started.",
   "type_your_prompt": "Type your prompt...",
   "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?",

opentrons-ai-client/src/main.tsx

@@ -1,12 +1,17 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { I18nextProvider } from 'react-i18next'
+
+import { i18n } from './i18n'
 import { App } from './App'
 
 const rootElement = document.getElementById('root')
-if (rootElement) {
+if (rootElement != null) {
   ReactDOM.createRoot(rootElement).render(
     <React.StrictMode>
-      <App />
+      <I18nextProvider i18n={i18n}>
+        <App />
+      </I18nextProvider>
     </React.StrictMode>
   )
 } else {

opentrons-ai-client/src/molecules/SidePanel/SidePanel.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { I18nextProvider } from 'react-i18next'
+import { i18n } from '../../i18n'
+import { SidePanel as SidePanelComponent } from './index'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof SidePanelComponent> = {
+  title: 'AI/molecules/SidePanel',
+  component: SidePanelComponent,
+  decorators: [
+    Story => (
+      <I18nextProvider i18n={i18n}>
+        <Story />
+      </I18nextProvider>
+    ),
+  ],
+}
+export default meta
+type Story = StoryObj<typeof SidePanelComponent>
+export const SidePanel: Story = {}

opentrons-ai-client/src/molecules/SidePanel/__tests__/SidePanel.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+
+import { renderWithProviders } from '../../../__testing-utils__'
+import { i18n } from '../../../i18n'
+
+import { SidePanel } from '../index'
+
+const LOGO_FILE_NAME =
+  '/opentrons-ai-client/src/assets/images/opentrons_logo.svg'
+
+const FEEDBACK_FORM_LINK = 'https://opentrons-ai-beta.paperform.co/'
+
+const render = (): ReturnType<typeof renderWithProviders> => {
+  return renderWithProviders(<SidePanel />, {
+    i18nInstance: i18n,
+  })
+}
+
+describe('SidePanel', () => {
+  it('should render logo and text', () => {
+    render()
+    const image = screen.getByRole('img')
+    expect(image.getAttribute('src')).toEqual(LOGO_FILE_NAME)
+    screen.getByText(
+      'Use natural language to generate protocols with OpentronsAI powered by OpenAI'
+    )
+    screen.getByText(
+      'Write a prompt in natural language to generate a Reagent Transfer or a PCR protocol for the OT-2 or Opentrons Flex using the Opentrons Python Protocol API.'
+    )
+    screen.getByText('Stuck? Try these example prompts to get started.')
+    screen.getByText('Got feedback? We love to hear it.')
+    const link = screen.getByRole('link', {
+      name: 'Share your thoughts here',
+    })
+    expect(link).toHaveAttribute('href', FEEDBACK_FORM_LINK)
+  })
+
+  it('should render buttons', () => {
+    render()
+    screen.getByRole('button', { name: 'PCR' })
+    screen.getByRole('button', { name: 'PCR (Flex)' })
+    screen.getByRole('button', { name: 'Reagent Transfer' })
+    screen.getByRole('button', { name: 'Reagent Transfer (Flex)' })
+  })
+  it.todo('should call a mock function when clicking a button')
+})