From e9790ed53893c96d3e6d0cc866da6e2dffbdc7ea Mon Sep 17 00:00:00 2001 From: koji Date: Wed, 17 Apr 2024 18:02:14 -0400 Subject: [PATCH] add textarea and button --- components/src/icons/icon-data.ts | 5 + .../src/molecules/InputField/index.tsx | 29 ----- .../__tests__/InputPrompt.test.tsx} | 0 .../src/molecules/InputPrompt/index.tsx | 119 ++++++++++++++++++ .../src/organisms/ChatContainer/index.tsx | 21 ++-- 5 files changed, 138 insertions(+), 36 deletions(-) delete mode 100644 opentrons-ai-client/src/molecules/InputField/index.tsx rename opentrons-ai-client/src/molecules/{InputField/__tests__/InputField.test.tsx => InputPrompt/__tests__/InputPrompt.test.tsx} (100%) create mode 100644 opentrons-ai-client/src/molecules/InputPrompt/index.tsx diff --git a/components/src/icons/icon-data.ts b/components/src/icons/icon-data.ts index c805a8bbfba..e4f43123e13 100644 --- a/components/src/icons/icon-data.ts +++ b/components/src/icons/icon-data.ts @@ -632,6 +632,11 @@ export const ICON_DATA_BY_NAME = { 'M8.01487 8.84912C8.47511 8.84912 8.84821 8.47603 8.84821 8.01579C8.84821 7.55555 8.47511 7.18245 8.01487 7.18245C7.55464 7.18245 7.18154 7.55555 7.18154 8.01579C7.18154 8.47603 7.55464 8.84912 8.01487 8.84912Z M8.66654 0.928711V2.36089C11.27 2.66533 13.3354 4.73075 13.6398 7.33418H15.072V8.66751H13.6398C13.3354 11.2709 11.27 13.3363 8.66654 13.6408V15.073H7.3332V13.6408C4.72979 13.3363 2.66437 11.2709 2.35992 8.66751H0.927734V7.33418H2.35992C2.66436 4.73075 4.72978 2.66533 7.3332 2.36089V0.928711H8.66654ZM12.2944 7.33418H11.6184C11.2502 7.33418 10.9518 7.63266 10.9518 8.00085C10.9518 8.36904 11.2502 8.66751 11.6184 8.66751H12.2944C12.0071 10.5336 10.5326 12.008 8.66654 12.2953V11.6194C8.66654 11.2512 8.36806 10.9527 7.99987 10.9527C7.63168 10.9527 7.3332 11.2512 7.3332 11.6194V12.2953C5.46716 12.008 3.99268 10.5336 3.70536 8.66751H4.38132C4.74951 8.66751 5.04798 8.36904 5.04798 8.00085C5.04798 7.63266 4.74951 7.33418 4.38132 7.33418H3.70536C3.99267 5.46812 5.46715 3.99364 7.3332 3.70632V4.38229C7.3332 4.75048 7.63168 5.04896 7.99987 5.04896C8.36806 5.04896 8.66654 4.75048 8.66654 4.38229V3.70632C10.5326 3.99364 12.0071 5.46812 12.2944 7.33418Z', viewBox: '0 0 16 16', }, + send: { + path: + 'M6.96216 26.6667V5.33337L32.2955 16L6.96216 26.6667ZM9.62882 22.6667L25.4288 16L9.62882 9.33337V14L17.6288 16L9.62882 18V22.6667Z', + viewBox: '0 0 32 32', + }, settings: { path: 'M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z', diff --git a/opentrons-ai-client/src/molecules/InputField/index.tsx b/opentrons-ai-client/src/molecules/InputField/index.tsx deleted file mode 100644 index 0b92ac5e38a..00000000000 --- a/opentrons-ai-client/src/molecules/InputField/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react' - -import { - DIRECTION_ROW, - Flex, - SPACING, - COLORS, - BORDERS, -} from '@opentrons/components' - -// ToDo (kk:04/17/2024) app has InputField component but it doesn't support flexible height and it still stays in app. -// Needs more modification for the unification for web usage. - -interface InputFieldProps {} - -export function InputField(props: InputFieldProps): JSX.Element { - return ( - - {/* input textbox */} - {/* button: play button/stop button */} - - ) -} diff --git a/opentrons-ai-client/src/molecules/InputField/__tests__/InputField.test.tsx b/opentrons-ai-client/src/molecules/InputPrompt/__tests__/InputPrompt.test.tsx similarity index 100% rename from opentrons-ai-client/src/molecules/InputField/__tests__/InputField.test.tsx rename to opentrons-ai-client/src/molecules/InputPrompt/__tests__/InputPrompt.test.tsx diff --git a/opentrons-ai-client/src/molecules/InputPrompt/index.tsx b/opentrons-ai-client/src/molecules/InputPrompt/index.tsx new file mode 100644 index 00000000000..d84c66331c3 --- /dev/null +++ b/opentrons-ai-client/src/molecules/InputPrompt/index.tsx @@ -0,0 +1,119 @@ +import React from 'react' +import { useTranslation } from 'react-i18next' +import styled, { css } from 'styled-components' + +import { + ALIGN_CENTER, + BORDERS, + Btn, + COLORS, + DIRECTION_ROW, + DISPLAY_FLEX, + Flex, + Icon, + JUSTIFY_CENTER, + SPACING, + TYPOGRAPHY, +} from '@opentrons/components' + +// interface InputPromptProps {} + +export function InputPrompt(/* props: InputPromptProps */): JSX.Element { + const { t } = useTranslation('protocol_generator') + return ( + + {/* textarea */} + + {/* button: play button/stop button */} + + + ) +} + +const StyledTextarea = styled.textarea` + min-height: 3.75rem; + background-color: ${COLORS.white}; + border: none; + outline: none; + padding: 0; + box-shadow: none; + color: ${COLORS.black90}; + width: 100%; + font-size: ${TYPOGRAPHY.fontSize20}; + line-height: ${TYPOGRAPHY.lineHeight24}; + ::placeholder { + position: absolute; + top: 50%; + transform: translateY(-50%); + } +` + +interface PlayButtonProps { + onPlay?: () => void + disabled?: boolean + isLoading?: boolean +} + +function PlayButton({ + onPlay, + disabled = false, + isLoading = false, +}: PlayButtonProps): JSX.Element { + const playButtonStyle = css` + -webkit-tap-highlight-color: transparent; + &:focus { + background-color: ${COLORS.blue60}; + color: ${COLORS.white}; + } + + &:hover { + background-color: ${COLORS.blue50}; + color: ${COLORS.white}; + } + + &:focus-visible { + /* box-shadow: ${ODD_FOCUS_VISIBLE}; */ + background-color: ${COLORS.blue50}; + } + + &:active { + background-color: ${COLORS.blue60}; + color: ${COLORS.white}; + } + + &:disabled { + background-color: ${COLORS.grey35}; + color: ${COLORS.grey50}; + } + ` + return ( + + + + ) +} diff --git a/opentrons-ai-client/src/organisms/ChatContainer/index.tsx b/opentrons-ai-client/src/organisms/ChatContainer/index.tsx index 2a6542c8e68..c3207c18771 100644 --- a/opentrons-ai-client/src/organisms/ChatContainer/index.tsx +++ b/opentrons-ai-client/src/organisms/ChatContainer/index.tsx @@ -5,10 +5,12 @@ import { DIRECTION_COLUMN, FLEX_MAX_CONTENT, Flex, + POSITION_ABSOLUTE, SPACING, StyledText, } from '@opentrons/components' import { PromptGuide } from '../../molecules/PromptGuide' +import { InputPrompt } from '../../molecules/InputPrompt' export function ChatContainer(): JSX.Element { const { t } = useTranslation('protocol_generator') @@ -21,13 +23,18 @@ export function ChatContainer(): JSX.Element { > {/* This will be updated when input textbox and function are implemented */} {isDummyInitial ? ( - - {t('opentronsai')} - + + + {t('opentronsai')} + + + + + ) : null}