Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update AichatView styling including scrolling #57894

Merged
merged 4 commits into from Apr 9, 2024
Merged

Conversation

fisher-alice
Copy link
Contributor

@fisher-alice fisher-alice commented Apr 9, 2024

This PR updates the styling of AichatView and includes:

  • Making customization panels scrollable
  • Resizing the columns in AichatView to better match Figma mockups
  • Add ability to resize textareas in Publish tab panel
  • Update Retrieval so that newest retrieval context is placed at the top

AichatView before update:
Screenshot 2024-04-09 at 10 13 51 AM

AichatView after update (resizing of columns):
Screenshot 2024-04-09 at 10 13 20 AM

Screencast video after updates:

scroll.mp4

Links

jira

Testing story

I tested locally on different screen sizes and at full-screen.

Deployment strategy

Follow-up work

In the Retrieval customization panel, I wonder if users may click on 'Add' , but then forget to click on 'Update' to save the retrieval contexts. Perhaps we disable 'Publish' until 'Add' is clicked?
Posted concern in Slack thread.

Privacy

Security

Caching

PR Checklist:

  • Tests provide adequate coverage
  • Privacy and Security impacts have been assessed
  • Code is well-commented
  • New features are translatable or updates will not break translations
  • Relevant documentation has been added or updated
  • User impact is well-understood and desirable
  • Pull Request is labeled appropriately
  • Follow-up work items (including potential tech debt) are tracked and linked

@@ -78,52 +78,50 @@ const AichatView: React.FunctionComponent = () => {

return (
<div id="aichat-lab" className={moduleStyles.aichatLab}>
<div className={moduleStyles.columnFlexContainer}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed this <div> and added column flex to aichatLab.

@fisher-alice fisher-alice marked this pull request as ready for review April 9, 2024 15:20
@fisher-alice fisher-alice requested review from a team and bencodeorg April 9, 2024 15:20
Copy link
Contributor

@bencodeorg bencodeorg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice updates!

@fisher-alice fisher-alice merged commit 9ca8eb3 into staging Apr 9, 2024
2 checks passed
@fisher-alice fisher-alice deleted the alice/add-scroll branch April 9, 2024 16:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants