feat(opentrons-ai-client): introduce react-markdown to chat display c…

…omponent (#14965) * feat(opentrons-ai-client): introduce react-markdown to chat display component
Opentrons · May 20, 2024 · 29c1b93 · 29c1b93
1 parent 0ec7e25
commit 29c1b93
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git a/opentrons-ai-client/package.json b/opentrons-ai-client/package.json
@@ -26,6 +26,7 @@
     "react-dom": "18.2.0",
     "react-error-boundary": "^4.0.10",
     "react-i18next": "13.5.0",
+    "react-markdown": "9.0.1",
     "styled-components": "5.3.6"
   },
   "engines": {

diff --git a/opentrons-ai-client/src/molecules/ChatDisplay/ChatDisplay.stories.tsx b/opentrons-ai-client/src/molecules/ChatDisplay/ChatDisplay.stories.tsx
@@ -21,12 +21,14 @@ const meta: Meta<typeof ChatDisplay> = {
 }
 export default meta
 type Story = StoryObj<typeof ChatDisplay>
+
 export const OpentronsAI: Story = {
   args: {
-    text: `
-    \`\`\`python
-from opentrons import protocol_api
+    content: `
+## sample output from OpentronsAI
 
+\`\`\`py
+from opentrons import protocol_api
 # Metadata
 metadata = {
     'protocolName': 'ThermoPrime Taq DNA Polymerase PCR Amplification',
@@ -46,13 +48,15 @@ def run(protocol: protocol_api.ProtocolContext):
     TC_SAMPLE_MASTERMIX_MIX_VOLUME = SAMPLE_VOL + MASTERMIX_VOL
     MASTERMIX_BLOCK_TEMP = 10  # degree C
     TEMP_DECK_WAIT_TIME = 50  # seconds
+\`\`\`
 `,
     isUserInput: false,
   },
 }
+
 export const User: Story = {
   args: {
-    text: `
+    content: `
     - Application: Reagent transfer
     - Robot: OT-2
     - API: 2.13

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,7 +15,7 @@ describe('ChatDisplay', () => {
 
   beforeEach(() => {
     props = {
-      text: 'mock text from the backend',
+      content: 'mock text from the backend',
       isUserInput: false,
     }
   })
@@ -29,7 +29,7 @@ describe('ChatDisplay', () => {
   })
   it('should display input from use and label', () => {
     props = {
-      text: 'mock text from user input',
+      content: 'mock text from user input',
       isUserInput: true,
     }
     render(props)

diff --git a/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx b/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import Markdown from 'react-markdown'
 import {
   BORDERS,
   COLORS,
@@ -10,12 +11,12 @@ import {
 } from '@opentrons/components'
 
 interface ChatDisplayProps {
-  text: string
+  content: string
   isUserInput: boolean
 }
 
 export function ChatDisplay({
-  text,
+  content,
   isUserInput,
 }: ChatDisplayProps): JSX.Element {
   const { t } = useTranslation('protocol_generator')
@@ -25,7 +26,6 @@ export function ChatDisplay({
       gridGap={SPACING.spacing12}
       paddingLeft={isUserInput ? SPACING.spacing40 : undefined}
       paddingRight={isUserInput ? undefined : SPACING.spacing40}
-      //   max-width="58.125rem"
     >
       <StyledText>{isUserInput ? t('you') : t('opentronsai')}</StyledText>
       {/* text should be markdown so this component will have a package or function to parse markdown */}
@@ -35,8 +35,11 @@ export function ChatDisplay({
         data-testid={`ChatDisplay_from_${isUserInput ? 'user' : 'backend'}`}
         borderRadius={BORDERS.borderRadius12}
         width="100%"
+        flexDirection={DIRECTION_COLUMN}
+        gridGap={SPACING.spacing16}
       >
-        {text}
+        {/* ToDo (kk:04/19/2024) I will get feedback for additional styling  from the design team. */}
+        <Markdown>{content}</Markdown>
       </Flex>
     </Flex>
   )