diff --git a/opentrons-ai-client/src/App.test.tsx b/opentrons-ai-client/src/App.test.tsx index cbc13739b45..94d7e07de3a 100644 --- a/opentrons-ai-client/src/App.test.tsx +++ b/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 => { @@ -28,7 +28,9 @@ const render = (): ReturnType => { describe('App', () => { beforeEach(() => { vi.mocked(SidePanel).mockReturnValue(
mock SidePanel
) - vi.mocked(ChatContainer).mockReturnValue(
mock ChatContainer
) + vi.mocked(MainContentContainer).mockReturnValue( +
mock MainContentContainer
+ ) vi.mocked(Loading).mockReturnValue(
mock Loading
) }) @@ -48,7 +50,7 @@ describe('App', () => { }) render() screen.getByText('mock SidePanel') - screen.getByText('mock ChatContainer') + screen.getByText('mock MainContentContainer') screen.getByText('Logout') }) diff --git a/opentrons-ai-client/src/App.tsx b/opentrons-ai-client/src/App.tsx index fc2f0281bf5..2a7420b5bc7 100644 --- a/opentrons-ai-client/src/App.tsx +++ b/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 { - + ) diff --git a/opentrons-ai-client/src/atoms/GlobalStyle/index.ts b/opentrons-ai-client/src/atoms/GlobalStyle/index.ts index 782a2a0b91b..1c9cfaed72f 100644 --- a/opentrons-ai-client/src/atoms/GlobalStyle/index.ts +++ b/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 { diff --git a/opentrons-ai-client/src/molecules/ChatFooter/index.tsx b/opentrons-ai-client/src/molecules/ChatFooter/index.tsx index fbf9aaf2cde..f206f57407f 100644 --- a/opentrons-ai-client/src/molecules/ChatFooter/index.tsx +++ b/opentrons-ai-client/src/molecules/ChatFooter/index.tsx @@ -16,11 +16,9 @@ export function ChatFooter(): JSX.Element { return ( {t('disclaimer')} @@ -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}; ` diff --git a/opentrons-ai-client/src/organisms/ChatContainer/ChatContainer.stories.tsx b/opentrons-ai-client/src/organisms/MainContentContainer/MainContainer.stories.tsx similarity index 61% rename from opentrons-ai-client/src/organisms/ChatContainer/ChatContainer.stories.tsx rename to opentrons-ai-client/src/organisms/MainContentContainer/MainContainer.stories.tsx index de3ba584302..de18817f0aa 100644 --- a/opentrons-ai-client/src/organisms/ChatContainer/ChatContainer.stories.tsx +++ b/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 = { +const meta: Meta = { title: 'AI/organisms/ChatContainer', - component: ChatContainerComponent, + component: MainContentContainerComponent, decorators: [ Story => ( @@ -17,5 +17,5 @@ const meta: Meta = { ], } export default meta -type Story = StoryObj +type Story = StoryObj export const ChatContainer: Story = {} diff --git a/opentrons-ai-client/src/organisms/ChatContainer/__tests__/ChatContainer.test.tsx b/opentrons-ai-client/src/organisms/MainContentContainer/__tests__/MainContentContainer.test.tsx similarity index 87% rename from opentrons-ai-client/src/organisms/ChatContainer/__tests__/ChatContainer.test.tsx rename to opentrons-ai-client/src/organisms/MainContentContainer/__tests__/MainContentContainer.test.tsx index 751e7281403..ec38062d502 100644 --- a/opentrons-ai-client/src/organisms/ChatContainer/__tests__/ChatContainer.test.tsx +++ b/opentrons-ai-client/src/organisms/MainContentContainer/__tests__/MainContentContainer.test.tsx @@ -5,7 +5,7 @@ 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') @@ -13,12 +13,12 @@ vi.mock('../../../molecules/ChatFooter') window.HTMLElement.prototype.scrollIntoView = vi.fn() const render = (): ReturnType => { - return renderWithProviders(, { + return renderWithProviders(, { i18nInstance: i18n, }) } -describe('ChatContainer', () => { +describe('MainContentContainer', () => { beforeEach(() => { vi.mocked(PromptGuide).mockReturnValue(
mock PromptGuide
) vi.mocked(ChatFooter).mockReturnValue(
mock ChatFooter
) diff --git a/opentrons-ai-client/src/organisms/ChatContainer/index.tsx b/opentrons-ai-client/src/organisms/MainContentContainer/index.tsx similarity index 81% rename from opentrons-ai-client/src/organisms/ChatContainer/index.tsx rename to opentrons-ai-client/src/organisms/MainContentContainer/index.tsx index bfef6fae02f..abc7e5a2e81 100644 --- a/opentrons-ai-client/src/organisms/ChatContainer/index.tsx +++ b/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(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" > - - - {t('opentronsai')} + + {/* Prompt Guide remain as a reference for users. */} + {t('opentronsai')} + + {chatData.length > 0 ? chatData.map((chat, index) => ( + - - + @@ -71,5 +76,4 @@ const ChatDataContainer = styled(Flex)` flex-direction: ${DIRECTION_COLUMN}; grid-gap: ${SPACING.spacing40}; width: 100%; - height: calc(100vh + 9rem); `