fix(opentrons-ai-client) fix textarea overlapping issue

opentrons-ai-client/src/App.test.tsx

@@ -6,7 +6,7 @@ import * as auth0 from '@auth0/auth0-react'
 import { renderWithProviders } from './__testing-utils__'
 import { i18n } from './i18n'
 import { SidePanel } from './molecules/SidePanel'
-import { ChatContainer } from './organisms/ChatContainer'
+import { MainContentContainer } from './organisms/MainContentContainer'
 import { Loading } from './molecules/Loading'
 
 import { App } from './App'
@@ -16,7 +16,7 @@ vi.mock('@auth0/auth0-react')
 const mockLogout = vi.fn()
 
 vi.mock('./molecules/SidePanel')
-vi.mock('./organisms/ChatContainer')
+vi.mock('./organisms/MainContentContainer')
 vi.mock('./molecules/Loading')
 
 const render = (): ReturnType<typeof renderWithProviders> => {
@@ -28,7 +28,9 @@ const render = (): ReturnType<typeof renderWithProviders> => {
 describe('App', () => {
   beforeEach(() => {
     vi.mocked(SidePanel).mockReturnValue(<div>mock SidePanel</div>)
-    vi.mocked(ChatContainer).mockReturnValue(<div>mock ChatContainer</div>)
+    vi.mocked(MainContentContainer).mockReturnValue(
+      <div>mock MainContentContainer</div>
+    )
     vi.mocked(Loading).mockReturnValue(<div>mock Loading</div>)
   })
 
@@ -48,7 +50,7 @@ describe('App', () => {
     })
     render()
     screen.getByText('mock SidePanel')
-    screen.getByText('mock ChatContainer')
+    screen.getByText('mock MainContentContainer')
     screen.getByText('Logout')
   })
 

opentrons-ai-client/src/App.tsx

@@ -16,7 +16,7 @@ import { tokenAtom } from './resources/atoms'
 import { useGetAccessToken } from './resources/hooks'
 import { SidePanel } from './molecules/SidePanel'
 import { Loading } from './molecules/Loading'
-import { ChatContainer } from './organisms/ChatContainer'
+import { MainContentContainer } from './organisms/MainContentContainer'
 
 export interface InputType {
   userPrompt: string
@@ -75,7 +75,7 @@ export function App(): JSX.Element | null {
       </Flex>
       <FormProvider {...methods}>
         <SidePanel />
-        <ChatContainer />
+        <MainContentContainer />
       </FormProvider>
     </Flex>
   )

opentrons-ai-client/src/atoms/GlobalStyle/index.ts

@@ -17,6 +17,7 @@ export const GlobalStyle = createGlobalStyle`
     width: 100%;
     height: 100%;
     color: ${COLORS.black90};
+    overflow: hidden;
   }
 
   a {

opentrons-ai-client/src/molecules/ChatFooter/index.tsx

@@ -16,11 +16,9 @@ export function ChatFooter(): JSX.Element {
 
   return (
     <Flex
-      bottom="0"
-      width="100%"
       gridGap={SPACING.spacing24}
       flexDirection={DIRECTION_COLUMN}
-      minHeight="calc(100vh-15rem)"
+      paddingBottom={SPACING.spacing24}
     >
       <InputPrompt />
       <StyledText css={DISCLAIMER_TEXT_STYLE}>{t('disclaimer')}</StyledText>
@@ -33,4 +31,5 @@ const DISCLAIMER_TEXT_STYLE = css`
   font-size: ${TYPOGRAPHY.fontSize20};
   line-height: ${TYPOGRAPHY.lineHeight24};
   text-align: ${TYPOGRAPHY.textAlignCenter};
+  padding-bottom: ${SPACING.spacing24};
 `

opentrons-ai-client/src/organisms/ChatContainer/ChatContainer.stories.tsx → opentrons-ai-client/src/organisms/MainContentContainer/MainContainer.stories.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { I18nextProvider } from 'react-i18next'
 import { i18n } from '../../i18n'
-import { ChatContainer as ChatContainerComponent } from './index'
+import { MainContentContainer as MainContentContainerComponent } from './index'
 
 import type { Meta, StoryObj } from '@storybook/react'
 
-const meta: Meta<typeof ChatContainerComponent> = {
+const meta: Meta<typeof MainContentContainerComponent> = {
   title: 'AI/organisms/ChatContainer',
-  component: ChatContainerComponent,
+  component: MainContentContainerComponent,
   decorators: [
     Story => (
       <I18nextProvider i18n={i18n}>
@@ -17,5 +17,5 @@ const meta: Meta<typeof ChatContainerComponent> = {
   ],
 }
 export default meta
-type Story = StoryObj<typeof ChatContainerComponent>
+type Story = StoryObj<typeof MainContentContainerComponent>
 export const ChatContainer: Story = {}

opentrons-ai-client/src/organisms/ChatContainer/__tests__/ChatContainer.test.tsx → opentrons-ai-client/src/organisms/MainContentContainer/__tests__/MainContentContainer.test.tsx

@@ -5,20 +5,20 @@ import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { PromptGuide } from '../../../molecules/PromptGuide'
 import { ChatFooter } from '../../../molecules/ChatFooter'
-import { ChatContainer } from '../index'
+import { MainContentContainer } from '../index'
 
 vi.mock('../../../molecules/PromptGuide')
 vi.mock('../../../molecules/ChatFooter')
 // Note (kk:05/20/2024) to avoid TypeError: scrollRef.current.scrollIntoView is not a function
 window.HTMLElement.prototype.scrollIntoView = vi.fn()
 
 const render = (): ReturnType<typeof renderWithProviders> => {
-  return renderWithProviders(<ChatContainer />, {
+  return renderWithProviders(<MainContentContainer />, {
     i18nInstance: i18n,
   })
 }
 
-describe('ChatContainer', () => {
+describe('MainContentContainer', () => {
   beforeEach(() => {
     vi.mocked(PromptGuide).mockReturnValue(<div>mock PromptGuide</div>)
     vi.mocked(ChatFooter).mockReturnValue(<div>mock ChatFooter</div>)

opentrons-ai-client/src/organisms/ChatContainer/index.tsx → opentrons-ai-client/src/organisms/MainContentContainer/index.tsx

@@ -8,7 +8,6 @@ import {
   DIRECTION_COLUMN,
   Flex,
   OVERFLOW_AUTO,
-  POSITION_FIXED,
   SPACING,
   StyledText,
 } from '@opentrons/components'
@@ -17,7 +16,7 @@ import { ChatDisplay } from '../../molecules/ChatDisplay'
 import { ChatFooter } from '../../molecules/ChatFooter'
 import { chatDataAtom } from '../../resources/atoms'
 
-export function ChatContainer(): JSX.Element {
+export function MainContentContainer(): JSX.Element {
   const { t } = useTranslation('protocol_generator')
   const [chatData] = useAtom(chatDataAtom)
   const scrollRef = React.useRef<HTMLSpanElement | null>(null)
@@ -40,14 +39,20 @@ export function ChatContainer(): JSX.Element {
       width="auto"
       flexDirection={DIRECTION_COLUMN}
       gridGap={SPACING.spacing40}
-      minHeight={`calc(100vh-24.375rem)`}
-      overflowY={OVERFLOW_AUTO}
+      height="100vh"
     >
-      <Flex width="100%" height="100%">
-        <ChatDataContainer>
-          <StyledText>{t('opentronsai')}</StyledText>
+      <Flex
+        width="100%"
+        flexGrow="1"
+        overflowY={OVERFLOW_AUTO}
+        flexDirection={DIRECTION_COLUMN}
+      >
+        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing12}>
           {/* Prompt Guide remain as a reference for users. */}
+          <StyledText>{t('opentronsai')}</StyledText>
           <PromptGuide />
+        </Flex>
+        <ChatDataContainer>
           {chatData.length > 0
             ? chatData.map((chat, index) => (
                 <ChatDisplay
@@ -58,9 +63,9 @@ export function ChatContainer(): JSX.Element {
               ))
             : null}
         </ChatDataContainer>
+        <span ref={scrollRef} />
       </Flex>
-      <span ref={scrollRef} />
-      <Flex position={POSITION_FIXED} bottom="0" zIndex="2" width="69%">
+      <Flex bottom="0" zIndex="2" width="100%" flexDirection={DIRECTION_COLUMN}>
         <ChatFooter />
       </Flex>
     </Flex>
@@ -71,5 +76,4 @@ const ChatDataContainer = styled(Flex)`
   flex-direction: ${DIRECTION_COLUMN};
   grid-gap: ${SPACING.spacing40};
   width: 100%;
-  height: calc(100vh + 9rem);
 `