-
Notifications
You must be signed in to change notification settings - Fork 178
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(opentrons-ai-client): Chat page to interact with LLM (#16703)
<!-- Thanks for taking the time to open a Pull Request (PR)! Please make sure you've read the "Opening Pull Requests" section of our Contributing Guide: https://github.com/Opentrons/opentrons/blob/edge/CONTRIBUTING.md#opening-pull-requests GitHub provides robust markdown to format your PR. Links, diagrams, pictures, and videos along with text formatting make it possible to create a rich and informative PR. For more information on GitHub markdown, see: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax To ensure your code is reviewed quickly and thoroughly, please fill out the sections below to the best of your ability! --> # Overview Added chat page with four new buttons to regenerate, send feedback (not fully functional), copy and download the python code. Regenerate: Finds the corresponding request to that LLM response and fills in the inputfield so that it can be resubmitted. It also scrolls down to the input field to show the filled out prompt Send Feedback: Shows a send feedback modal that can in the future send feedback to the server. This API will be implemented in a subsequent PR. Copy: Copies the code to the clipboard Download: Converts the python code in the LLM response into a python file and downloads it. <img width="1895" alt="image" src="https://github.com/user-attachments/assets/5825ea5b-7796-4f74-ae68-1e9a73d027d8"> <img width="551" alt="image" src="https://github.com/user-attachments/assets/4c298768-d3a3-4731-ba6b-6007c4649736"> <!-- Describe your PR at a high level. State acceptance criteria and how this PR fits into other work. Link issues, PRs, and other relevant resources. --> ## Test Plan and Hands on Testing Manually tested that regenerate picks the right prompt by adding a few in the chat. Manually tested that clicking feedback shows the feedback modal Manually tested that copy works Manually tested that download creates the file, downloads it and checked the contents to make sure the file was created properly. <!-- Describe your testing of the PR. Emphasize testing not reflected in the code. Attach protocols, logs, screenshots and any other assets that support your testing. --> ## Changelog <!-- List changes introduced by this PR considering future developers and the end user. Give careful thought and clear documentation to breaking changes. --> ## Review requests <!-- - What do you need from reviewers to feel confident this PR is ready to merge? - Ask questions. --> ## Risk assessment <!-- - Indicate the level of attention this PR needs. - Provide context to guide reviewers. - Discuss trade-offs, coupling, and side effects. - Look for the possibility, even if you think it's small, that your change may affect some other part of the system. - For instance, changing return tip behavior may also change the behavior of labware calibration. - How do your unit tests and on hands on testing mitigate this PR's risks and the risk of future regressions? - Especially in high risk PRs, explain how you know your testing is enough. --> --------- Co-authored-by: FELIPE BELGINE <[email protected]>
- Loading branch information
1 parent
ac00351
commit 69c8cc0
Showing
14 changed files
with
335 additions
and
129 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
opentrons-ai-client/src/molecules/FeedbackModal/__tests__/FeedbackModal.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { FeedbackModal } from '..' | ||
| import { renderWithProviders } from '../../../__testing-utils__' | ||
| import { screen } from '@testing-library/react' | ||
| import { describe, it, expect } from 'vitest' | ||
| import { i18n } from '../../../i18n' | ||
| import { feedbackModalAtom } from '../../../resources/atoms' | ||
|
|
||
| const initialValues: Array<[any, any]> = [[feedbackModalAtom, true]] | ||
|
|
||
| const render = (): ReturnType<typeof renderWithProviders> => { | ||
| return renderWithProviders(<FeedbackModal />, { | ||
| i18nInstance: i18n, | ||
| initialValues, | ||
| }) | ||
| } | ||
|
|
||
| describe('FeedbackModal', () => { | ||
| it('should render Feedback modal', () => { | ||
| render() | ||
| screen.getByText('Send feedback to Opentrons') | ||
| screen.getByText('Share why the response was not helpful') | ||
| screen.getByText('Cancel') | ||
| screen.getByText('Send feedback') | ||
| }) | ||
|
|
||
| // should move this test to the chat page | ||
| it.skip('should set the showFeedbackModel atom to be false when cancel button is clicked', () => { | ||
| render() | ||
| expect(feedbackModalAtom.init).toBe(true) | ||
|
|
||
| const cancelButton = screen.getByText('Cancel') | ||
| cancelButton.click() | ||
| // check if the feedbackModalAtom is set to false | ||
| expect(feedbackModalAtom.read).toBe(false) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { | ||
| Modal, | ||
| Flex, | ||
| SPACING, | ||
| ALIGN_FLEX_END, | ||
| SecondaryButton, | ||
| StyledText, | ||
| PrimaryButton, | ||
| InputField, | ||
| } from '@opentrons/components' | ||
| import { useAtom } from 'jotai' | ||
| import { useTranslation } from 'react-i18next' | ||
| import { feedbackModalAtom } from '../../resources/atoms' | ||
| import { useState } from 'react' | ||
|
|
||
| export function FeedbackModal(): JSX.Element { | ||
| const { t } = useTranslation('protocol_generator') | ||
|
|
||
| const [feedbackValue, setFeedbackValue] = useState<string>('') | ||
| const [, setShowFeedbackModal] = useAtom(feedbackModalAtom) | ||
|
|
||
| return ( | ||
| <Modal | ||
| title={t(`send_feedback_to_opentrons`)} | ||
| onClose={() => { | ||
| setShowFeedbackModal(false) | ||
| }} | ||
| footer={ | ||
| <Flex | ||
| padding={`0 ${SPACING.spacing24} ${SPACING.spacing24}`} | ||
| gridGap={SPACING.spacing8} | ||
| justifyContent={ALIGN_FLEX_END} | ||
| > | ||
| <SecondaryButton | ||
| onClick={() => { | ||
| setShowFeedbackModal(false) | ||
| }} | ||
| > | ||
| <StyledText desktopStyle="bodyDefaultSemiBold"> | ||
| {t(`cancel`)} | ||
| </StyledText> | ||
| </SecondaryButton> | ||
| <PrimaryButton | ||
| onClick={() => { | ||
| setShowFeedbackModal(false) | ||
| }} | ||
| > | ||
| <StyledText desktopStyle="bodyDefaultSemiBold"> | ||
| {t(`send_feedback`)} | ||
| </StyledText> | ||
| </PrimaryButton> | ||
| </Flex> | ||
| } | ||
| > | ||
| <InputField | ||
| title={t(`send_feedback_input_title`)} | ||
| size="medium" | ||
| value={feedbackValue} | ||
| onChange={event => { | ||
| setFeedbackValue(event.target.value as string) | ||
| }} | ||
| ></InputField> | ||
| </Modal> | ||
| ) | ||
| } |
Oops, something went wrong.