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

feat: implement improved highlights form with ai auto-summarise #1381

Merged
merged 26 commits into from
Jul 21, 2023

Conversation

OgDev-01
Copy link
Contributor

@OgDev-01 OgDev-01 commented Jul 17, 2023

Description

This PR:

  • Adds a new look to the highlights input form for desktop and mobile
  • implements auto summarize for highlights
  • adds a new component to the design system
  • updates the text area component to include typewriting mode
  • improves the overall user experience for creating highlights on mobile and desktop devices

Notes on summary generation

After testing the various tone available, I choose informative as it seems to generate a more in-depth context of what was done in the PR in fewer words. formal on the other hand was also nice, but it kind of generates almost same words as what was in the commit messages in the PR. I'm open to hearing thoughts on this 🍕 .

The generate summary icon is disabled by default and when a request is being made to get the summary from the API to prevent users from clicking when a request is in flight.

Available tones

"exciting" | "persuasive" | "informative" | "humorous" | "formal"

What type of PR is this? (check all applicable)

  • 🍕 Feature
  • 🐛 Bug Fix
  • 📝 Documentation Update
  • 🎨 Style
  • 🧑‍💻 Code Refactor
  • 🔥 Performance Improvements
  • ✅ Test
  • 🤖 Build
  • 🔁 CI
  • 📦 Chore (Release)
  • ⏩ Revert

Related Tickets & Documents

related #1289

Mobile & Desktop Screenshots/Recordings

image

Screen.Recording.2023-07-18.at.14.11.19.mov

image

image

Added tests?

  • 👍 yes
  • 🙅 no, because they aren't needed
  • 🙋 no, because I need help

Added to documentation?

  • 📜 README.md
  • 📓 docs.opensauced.pizza
  • 🍕 dev.to/opensauced
  • 📕 storybook
  • 🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

@netlify
Copy link

netlify bot commented Jul 17, 2023

Deploy Preview for design-insights ready!

Name Link
🔨 Latest commit 8b01158
🔍 Latest deploy log https://app.netlify.com/sites/design-insights/deploys/64ba83816e132000082f4b88
😎 Deploy Preview https://deploy-preview-1381--design-insights.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify
Copy link

netlify bot commented Jul 17, 2023

Deploy Preview for oss-insights ready!

Name Link
🔨 Latest commit
🔍 Latest deploy log https://app.netlify.com/sites/oss-insights/deploys/64ba8d4393db0a033b198abe
😎 Deploy Preview https://deploy-preview-1381--oss-insights.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@OgDev-01 OgDev-01 changed the title feature: implement improved highlights form with ai auto-summarise feat: implement improved highlights form with ai auto-summarise Jul 17, 2023
@OgDev-01 OgDev-01 marked this pull request as ready for review July 18, 2023 15:30
@brandonroberts
Copy link
Contributor

@OgDev-01 nice! Can we provide some feedback that the API request is in flight? Do we prevent them from clicking the suggestion button again while its happening?

@OgDev-01
Copy link
Contributor Author

@OgDev-01 nice! Can we provide some feedback that the API request is in flight? Do we prevent them from clicking the suggestion button again while its happening?

Opps!, totally missed that. updating shortly... Thanks!

@OgDev-01
Copy link
Contributor Author

Update: I changed the tone back to formal and reduced descriptionLength to 400 as testing with my PR, the description generated were in markdown bullet lists and the length went a above the limit.

@OgDev-01 OgDev-01 added the needs review PRs that need review from core engineering team label Jul 18, 2023
@bdougie
Copy link
Member

bdougie commented Jul 18, 2023

Some feedback:

  1. The generated response consistently comes back with summaries with more than 500 characters. Any chance we can keep it within the limit?
  2. The blocking submission UI while waiting is ok, but my suggestion is a making the sparkle icon glow.
  3. I suggest we also generate a title. We can reuse the from the PR or create a prompt to provide a concise title based on the PR generated. This might need an api update to the endpoint to allow a system prompt in addition to the content prompt (git diff and commit messages) - I pitched that here: https://github.com/open-sauced/api/issues/203

example prompt from - open-sauced/ai#220

Screen Shot 2023-07-18 at 10 36 57 AM

suggestion

1 & 2 should be addressed in this PR. 3 can just be using the PR title for now. We can do a follow up PR for title generation, unless you think it is approachable.

@bdougie bdougie mentioned this pull request Jul 18, 2023
@bdougie
Copy link
Member

bdougie commented Jul 19, 2023

@open-sauced/triage could use some extra eyes on this.

components/atoms/Textarea/text-area.tsx Outdated Show resolved Hide resolved
lib/utils/generate-pr-highlight-summary.ts Show resolved Hide resolved
lib/utils/github.ts Show resolved Hide resolved
@bdougie
Copy link
Member

bdougie commented Jul 20, 2023

Updates: I added a pulse animation to sparkle icon when a request is in flight. Tested with different PRs and none generates more than 500 words for me. bdougie can you test with the updated changes again?

Pulse looks great.

re: 500 words, I was testing this PR open-sauced/ai#220. But it seems fine now with the "formal" tone change.

system prompt

related to this issue on system prompts - https://github.com/open-sauced/api/issues/203

A system prompt is "return any GitHub issues numbers as markdown links." That addition to the prompt would make the generated summary include links instead of plain text issues numbers.

https://deploy-preview-1381--oss-insights.netlify.app/feed/154

Screen Shot 2023-07-20 at 1 13 49 PM

Note: The link would need the markdown rendering from #1376

@OgDev-01
Copy link
Contributor Author

FYI, with the newly merged change from #1396, running npm run format had a huge impact on the files changed

@OgDev-01
Copy link
Contributor Author

image
Looking at the overlap in the above screenshot, i'm suggesting hiding the sitegpt action icon in the feeds page.

@bdougie what are your thoughts?

@OgDev-01
Copy link
Contributor Author

Here is another suggestion
image

@OgDev-01 OgDev-01 requested a review from brandonroberts July 20, 2023 20:51
@bdougie
Copy link
Member

bdougie commented Jul 20, 2023

bdougie what are your thoughts?

Let's not go with both. I think that is the best option is hide sitegpt on the highlights page for mobile. I think in the future we should pin the input form to the top of the page on mobile.

But to be clear just hide the SiteGPT bubble for now.

Group 10

@brandonroberts
Copy link
Contributor

@OgDev-01 why so many files changed?

@OgDev-01
Copy link
Contributor Author

@OgDev-01 why so many files changed?

FYI, with the newly merged change from #1396, running npm run format had a huge impact on the files changed

@brandonroberts
Copy link
Contributor

Those changed files shouldn't be in your PR if you've merged in from beta though

@OgDev-01
Copy link
Contributor Author

But to be clear just hide the SiteGPT bubble for now.

This has been updated!

Copy link
Contributor

@brandonroberts brandonroberts left a comment

Choose a reason for hiding this comment

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

Functionality works. Extra files changed are from formatting

Copy link
Member

@jpmcb jpmcb left a comment

Choose a reason for hiding this comment

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

Looking good!!!! 👏🏼

Screenshot 2023-07-21 at 3 39 51 PM

@brandonroberts brandonroberts merged commit 023f576 into beta Jul 21, 2023
@brandonroberts brandonroberts deleted the improved-highlight-form branch July 21, 2023 22:15
github-actions bot pushed a commit that referenced this pull request Jul 23, 2023
## [1.57.0-beta.3](v1.57.0-beta.2...v1.57.0-beta.3) (2023-07-23)

### 🤖 Build System

* update eslint prettier config and setup commit hooks ([#1396](#1396)) ([ac9b276](ac9b276))

### 🍕 Features

* Add links to getting started docs ([#1395](#1395)) ([c58cc80](c58cc80))
* implement improved highlights form with ai auto-summarise ([#1381](#1381)) ([023f576](023f576))

### 🐛 Bug Fixes

* Move card image api route ([#1401](#1401)) ([d650161](d650161))
* update top contributors response data ([#1397](#1397)) ([9053091](9053091))

### 🔁 Continuous Integration

* disable husky for release ([2537649](2537649))
* fix husky command during release ([3e493a2](3e493a2))
@github-actions
Copy link
Contributor

🎉 This PR is included in version 1.57.0-beta.3 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

github-actions bot pushed a commit that referenced this pull request Jul 24, 2023
## [1.57.0](v1.56.0...v1.57.0) (2023-07-24)

### 🤖 Build System

* update eslint prettier config and setup commit hooks ([#1396](#1396)) ([ac9b276](ac9b276))

### 🔁 Continuous Integration

* disable husky for release ([2537649](2537649))
* fix husky command during release ([3e493a2](3e493a2))

### 🐛 Bug Fixes

* add `pullrequestLink` check into `HighlightInput` form `isDivFocused` condition ([#1406](#1406)) ([f3fda46](f3fda46))
* Auto-Scroll Not Triggered Upon Clicking 'Next Page' in Highlight… ([#1387](#1387)) ([77b161d](77b161d))
* flash of "test content" while loading in dashboard page ([#1409](#1409)) ([ad23f14](ad23f14))
* Improved the user experience of the highlights input form ([#1362](#1362)) ([2425dc4](2425dc4))
* Issue [#1374](#1374) All suggestions are being displayed with scroll area ([#1380](#1380)) ([1de56c7](1de56c7))
* Move card image api route ([#1401](#1401)) ([d650161](d650161))
* update top contributors response data ([#1397](#1397)) ([9053091](9053091))

### 🍕 Features

* add `[#100](https://github.com/open-sauced/insights/issues/100)DayOfOSS` challenge anouncement to feeds ([#1389](#1389)) ([751dbbf](751dbbf))
* add 404 page ([#1390](#1390)) ([37bd475](37bd475))
* add discord link to user profile ([#1370](#1370)) ([f94bc3b](f94bc3b))
* Add links to getting started docs ([#1395](#1395)) ([c58cc80](c58cc80))
* add upgrade access button to user settings page ([#1398](#1398)) ([671ebf4](671ebf4))
* implement improved highlights form with ai auto-summarise ([#1381](#1381)) ([023f576](023f576))
* implemented hover and highlight contribution graph ([#1404](#1404)) ([0453370](0453370))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs review PRs that need review from core engineering team released on @beta
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants