From 64e64fdfa10c51d1eb246a2cbe6029f899c001f4 Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 31 May 2024 10:10:44 -0400 Subject: [PATCH 1/4] fix(opentrons-ai-client): fix textarea overlapping fix textarea overlapping close AUTH-435 --- opentrons-ai-client/src/App.test.tsx | 8 ++-- opentrons-ai-client/src/App.tsx | 4 +- .../src/atoms/GlobalStyle/index.ts | 1 + .../src/molecules/ChatDisplay/index.tsx | 38 ++++++++++++------- .../src/molecules/ChatFooter/index.tsx | 6 +-- .../MainContainer.stories.tsx} | 8 ++-- .../__tests__/ChatContainer.test.tsx | 6 +-- .../index.tsx | 20 ++++++---- .../src/resources/constants.ts | 4 +- 9 files changed, 58 insertions(+), 37 deletions(-) rename opentrons-ai-client/src/organisms/{ChatContainer/ChatContainer.stories.tsx => MainContainer/MainContainer.stories.tsx} (65%) rename opentrons-ai-client/src/organisms/{ChatContainer => MainContainer}/__tests__/ChatContainer.test.tsx (89%) rename opentrons-ai-client/src/organisms/{ChatContainer => MainContainer}/index.tsx (82%) diff --git a/opentrons-ai-client/src/App.test.tsx b/opentrons-ai-client/src/App.test.tsx index cbc13739b45..145c19ca2ce 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 { MainContainer } from './organisms/MainContainer' 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/MainContainer') vi.mock('./molecules/Loading') const render = (): ReturnType => { @@ -28,7 +28,7 @@ const render = (): ReturnType => { describe('App', () => { beforeEach(() => { vi.mocked(SidePanel).mockReturnValue(
mock SidePanel
) - vi.mocked(ChatContainer).mockReturnValue(
mock ChatContainer
) + vi.mocked(MainContainer).mockReturnValue(
mock MainContainer
) vi.mocked(Loading).mockReturnValue(
mock Loading
) }) @@ -48,7 +48,7 @@ describe('App', () => { }) render() screen.getByText('mock SidePanel') - screen.getByText('mock ChatContainer') + screen.getByText('mock MainContainer') screen.getByText('Logout') }) diff --git a/opentrons-ai-client/src/App.tsx b/opentrons-ai-client/src/App.tsx index 4c45c6961ba..ec41d21b354 100644 --- a/opentrons-ai-client/src/App.tsx +++ b/opentrons-ai-client/src/App.tsx @@ -13,7 +13,7 @@ import { import { SidePanel } from './molecules/SidePanel' import { Loading } from './molecules/Loading' -import { ChatContainer } from './organisms/ChatContainer' +import { MainContainer } from './organisms/MainContainer' export function App(): JSX.Element | null { const { t } = useTranslation('protocol_generator') @@ -48,7 +48,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/ChatDisplay/index.tsx b/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx index 5fbd5e1d5c2..bb3b65bb409 100644 --- a/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx +++ b/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx @@ -65,19 +65,31 @@ export function ChatDisplay({ chat, chatId }: ChatDisplayProps): JSX.Element { gridGap={SPACING.spacing16} position={POSITION_RELATIVE} > - - {reply} - + {isUser ? ( + + {reply} + + ) : ( + + {reply} + + )} {!isUser ? ( {t('disclaimer')} @@ -33,4 +32,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/MainContainer/MainContainer.stories.tsx similarity index 65% rename from opentrons-ai-client/src/organisms/ChatContainer/ChatContainer.stories.tsx rename to opentrons-ai-client/src/organisms/MainContainer/MainContainer.stories.tsx index de3ba584302..0cb2ce5430b 100644 --- a/opentrons-ai-client/src/organisms/ChatContainer/ChatContainer.stories.tsx +++ b/opentrons-ai-client/src/organisms/MainContainer/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 { MainContainer as MainContainerComponent } from './index' import type { Meta, StoryObj } from '@storybook/react' -const meta: Meta = { +const meta: Meta = { title: 'AI/organisms/ChatContainer', - component: ChatContainerComponent, + component: MainContainerComponent, 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/MainContainer/__tests__/ChatContainer.test.tsx similarity index 89% rename from opentrons-ai-client/src/organisms/ChatContainer/__tests__/ChatContainer.test.tsx rename to opentrons-ai-client/src/organisms/MainContainer/__tests__/ChatContainer.test.tsx index 751e7281403..4668421da4a 100644 --- a/opentrons-ai-client/src/organisms/ChatContainer/__tests__/ChatContainer.test.tsx +++ b/opentrons-ai-client/src/organisms/MainContainer/__tests__/ChatContainer.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 { MainContainer } 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('MainContainer', () => { 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/MainContainer/index.tsx similarity index 82% rename from opentrons-ai-client/src/organisms/ChatContainer/index.tsx rename to opentrons-ai-client/src/organisms/MainContainer/index.tsx index bfef6fae02f..606bc9b1025 100644 --- a/opentrons-ai-client/src/organisms/ChatContainer/index.tsx +++ b/opentrons-ai-client/src/organisms/MainContainer/index.tsx @@ -8,7 +8,8 @@ import { DIRECTION_COLUMN, Flex, OVERFLOW_AUTO, - POSITION_FIXED, + POSITION_ABSOLUTE, + // POSITION_FIXED, SPACING, StyledText, } from '@opentrons/components' @@ -17,7 +18,7 @@ import { ChatDisplay } from '../../molecules/ChatDisplay' import { ChatFooter } from '../../molecules/ChatFooter' import { chatDataAtom } from '../../resources/atoms' -export function ChatContainer(): JSX.Element { +export function MainContainer(): JSX.Element { const { t } = useTranslation('protocol_generator') const [chatData] = useAtom(chatDataAtom) const scrollRef = React.useRef(null) @@ -40,10 +41,15 @@ export function ChatContainer(): JSX.Element { width="auto" flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing40} - minHeight={`calc(100vh-24.375rem)`} - overflowY={OVERFLOW_AUTO} + // minHeight={`calc(100vh-24.375rem)`} + height="100vh" + id="MainContainer" > - + {t('opentronsai')} {/* Prompt Guide remain as a reference for users. */} @@ -60,7 +66,7 @@ export function ChatContainer(): JSX.Element { - + @@ -71,5 +77,5 @@ const ChatDataContainer = styled(Flex)` flex-direction: ${DIRECTION_COLUMN}; grid-gap: ${SPACING.spacing40}; width: 100%; - height: calc(100vh + 9rem); + /* height: calc(100vh + 9rem); */ ` diff --git a/opentrons-ai-client/src/resources/constants.ts b/opentrons-ai-client/src/resources/constants.ts index de9463dde21..a0cd135ff80 100644 --- a/opentrons-ai-client/src/resources/constants.ts +++ b/opentrons-ai-client/src/resources/constants.ts @@ -1,5 +1,7 @@ // ToDo (kk:05/29/2024) this should be switched by env var -export const END_POINT = 'https://staging.opentrons.ai/api/chat/completion' +export const BASE_URL = 'http://localhost:8000' +export const END_POINT = `${BASE_URL}/api/chat/completion` +// export const END_POINT = 'https://staging.opentrons.ai/api/chat/completion' // for auth0 export const AUTH0_DOMAIN = 'identity.auth.opentrons.com' From 9270853d1d2dabcb2b14d8082d9d12d4a98ec4ed Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 31 May 2024 14:58:45 -0400 Subject: [PATCH 2/4] fix(opentrons-ai-client): fix textarea overlapping issue fix textarea overlapping issue close AUTH-435 --- opentrons-ai-client/src/App.test.tsx | 10 ++++++---- opentrons-ai-client/src/App.tsx | 4 ++-- .../src/molecules/ChatFooter/index.tsx | 3 +-- .../MainContainer.stories.tsx | 8 ++++---- .../__tests__/MainContentContainer.test.tsx} | 6 +++--- .../index.tsx | 20 +++++++++---------- 6 files changed, 25 insertions(+), 26 deletions(-) rename opentrons-ai-client/src/organisms/{MainContainer => MainContentContainer}/MainContainer.stories.tsx (61%) rename opentrons-ai-client/src/organisms/{MainContainer/__tests__/ChatContainer.test.tsx => MainContentContainer/__tests__/MainContentContainer.test.tsx} (87%) rename opentrons-ai-client/src/organisms/{MainContainer => MainContentContainer}/index.tsx (85%) diff --git a/opentrons-ai-client/src/App.test.tsx b/opentrons-ai-client/src/App.test.tsx index 145c19ca2ce..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 { MainContainer } from './organisms/MainContainer' +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/MainContainer') +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(MainContainer).mockReturnValue(
mock MainContainer
) + 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 MainContainer') + screen.getByText('mock MainContentContainer') screen.getByText('Logout') }) diff --git a/opentrons-ai-client/src/App.tsx b/opentrons-ai-client/src/App.tsx index d63878a5403..98107561183 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 { MainContainer } from './organisms/MainContainer' +import { MainContentContainer } from './organisms/MainContentContainer' export function App(): JSX.Element | null { const { t } = useTranslation('protocol_generator') @@ -65,7 +65,7 @@ export function App(): JSX.Element | null { - + ) } diff --git a/opentrons-ai-client/src/molecules/ChatFooter/index.tsx b/opentrons-ai-client/src/molecules/ChatFooter/index.tsx index 0bddd891423..f206f57407f 100644 --- a/opentrons-ai-client/src/molecules/ChatFooter/index.tsx +++ b/opentrons-ai-client/src/molecules/ChatFooter/index.tsx @@ -16,10 +16,9 @@ export function ChatFooter(): JSX.Element { return ( {t('disclaimer')} diff --git a/opentrons-ai-client/src/organisms/MainContainer/MainContainer.stories.tsx b/opentrons-ai-client/src/organisms/MainContentContainer/MainContainer.stories.tsx similarity index 61% rename from opentrons-ai-client/src/organisms/MainContainer/MainContainer.stories.tsx rename to opentrons-ai-client/src/organisms/MainContentContainer/MainContainer.stories.tsx index 0cb2ce5430b..de18817f0aa 100644 --- a/opentrons-ai-client/src/organisms/MainContainer/MainContainer.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 { MainContainer as MainContainerComponent } 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: MainContainerComponent, + 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/MainContainer/__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/MainContainer/__tests__/ChatContainer.test.tsx rename to opentrons-ai-client/src/organisms/MainContentContainer/__tests__/MainContentContainer.test.tsx index 4668421da4a..ec38062d502 100644 --- a/opentrons-ai-client/src/organisms/MainContainer/__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 { MainContainer } 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('MainContainer', () => { +describe('MainContentContainer', () => { beforeEach(() => { vi.mocked(PromptGuide).mockReturnValue(
mock PromptGuide
) vi.mocked(ChatFooter).mockReturnValue(
mock ChatFooter
) diff --git a/opentrons-ai-client/src/organisms/MainContainer/index.tsx b/opentrons-ai-client/src/organisms/MainContentContainer/index.tsx similarity index 85% rename from opentrons-ai-client/src/organisms/MainContainer/index.tsx rename to opentrons-ai-client/src/organisms/MainContentContainer/index.tsx index 606bc9b1025..abc7e5a2e81 100644 --- a/opentrons-ai-client/src/organisms/MainContainer/index.tsx +++ b/opentrons-ai-client/src/organisms/MainContentContainer/index.tsx @@ -8,8 +8,6 @@ import { DIRECTION_COLUMN, Flex, OVERFLOW_AUTO, - POSITION_ABSOLUTE, - // POSITION_FIXED, SPACING, StyledText, } from '@opentrons/components' @@ -18,7 +16,7 @@ import { ChatDisplay } from '../../molecules/ChatDisplay' import { ChatFooter } from '../../molecules/ChatFooter' import { chatDataAtom } from '../../resources/atoms' -export function MainContainer(): JSX.Element { +export function MainContentContainer(): JSX.Element { const { t } = useTranslation('protocol_generator') const [chatData] = useAtom(chatDataAtom) const scrollRef = React.useRef(null) @@ -41,19 +39,20 @@ export function MainContainer(): JSX.Element { width="auto" flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing40} - // minHeight={`calc(100vh-24.375rem)`} height="100vh" - id="MainContainer" > - - {t('opentronsai')} + {/* Prompt Guide remain as a reference for users. */} + {t('opentronsai')} + + {chatData.length > 0 ? chatData.map((chat, index) => ( + - - + @@ -77,5 +76,4 @@ const ChatDataContainer = styled(Flex)` flex-direction: ${DIRECTION_COLUMN}; grid-gap: ${SPACING.spacing40}; width: 100%; - /* height: calc(100vh + 9rem); */ ` From c9cb7d5217d1c91f576610db05b2b26f6201deb1 Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 31 May 2024 15:43:22 -0400 Subject: [PATCH 3/4] remove local test env settings --- opentrons-ai-client/src/resources/constants.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/opentrons-ai-client/src/resources/constants.ts b/opentrons-ai-client/src/resources/constants.ts index a0cd135ff80..de9463dde21 100644 --- a/opentrons-ai-client/src/resources/constants.ts +++ b/opentrons-ai-client/src/resources/constants.ts @@ -1,7 +1,5 @@ // ToDo (kk:05/29/2024) this should be switched by env var -export const BASE_URL = 'http://localhost:8000' -export const END_POINT = `${BASE_URL}/api/chat/completion` -// export const END_POINT = 'https://staging.opentrons.ai/api/chat/completion' +export const END_POINT = 'https://staging.opentrons.ai/api/chat/completion' // for auth0 export const AUTH0_DOMAIN = 'identity.auth.opentrons.com' From 71067ec6bd93f09f40f2b5b4f01d879031ae3c5c Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 31 May 2024 16:28:40 -0400 Subject: [PATCH 4/4] remove chat display change from this pr --- .../src/molecules/ChatDisplay/index.tsx | 38 +++++++------------ 1 file changed, 13 insertions(+), 25 deletions(-) diff --git a/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx b/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx index bb3b65bb409..5fbd5e1d5c2 100644 --- a/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx +++ b/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx @@ -65,31 +65,19 @@ export function ChatDisplay({ chat, chatId }: ChatDisplayProps): JSX.Element { gridGap={SPACING.spacing16} position={POSITION_RELATIVE} > - {isUser ? ( - - {reply} - - ) : ( - - {reply} - - )} + + {reply} + {!isUser ? (