feat: implemented StarSearch share prompt #3324

nickytonline · 2024-05-06T23:01:00Z

Description

Now you can share StarSearch prompts. Note that some accessibility issues were also fixed while writing end to end tests for this feature.

Related Tickets & Documents

Closes #3325
Fixes #3478

Mobile & Desktop Screenshots/Recordings

StarSearch.Share.Prompt.mp4

Steps to QA

Share a Prompt

Log in to StarSearch
Choose a canned prompt or write your own.
When the response is finished, notice the share menu at the bottom right of the last response.
Click on it to show share to Twitter, LinkedIn and copy link.
Try those out.
Copy the shared prompt link

Try the shared prompt

Logged In User

Paste the shared prompt link in the browser from the steps before.
The prompt and response load even though you're logged out.
Try another prompt once the response is completed.
Nologin modal appears and the streaming response comes in.

Logged Out User

Paste the shared prompt link in the browser from the steps before.
The prompt and response load even though you're logged out.
Try another prompt once the response is completed.
A login modal appears and you are forced to log in to continue prompting.

Tier (staff will fill in)

Tier 1
Tier 2
Tier 3
Tier 4

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

netlify · 2024-05-06T23:01:17Z

✅ Deploy Preview for oss-insights ready!

Name	Link
🔨 Latest commit	`f04e435`
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/6661f73620b9fe0008d4c6e4
😎 Deploy Preview	https://deploy-preview-3324--oss-insights.netlify.app
📱 Preview on mobile	Toggle 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 · 2024-05-06T23:01:19Z

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	`f04e435`
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/6661f736d0d43500083a5453
😎 Deploy Preview	https://deploy-preview-3324--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

bdougie · 2024-05-06T23:53:07Z

I'd love to see us reuse elements from other places.

Gemini uses a share icon.

OpenSauced Highlights already have a share experience with the 3 dots.

I'd love to avoid adding more design debt with whatever solution we approach.

bdougie · 2024-05-06T23:55:45Z

Thought this was the issue 😓 , but sharing my context.

nickytonline · 2024-05-07T01:15:39Z

I've pushed changes to use the share dropdown @bdougie, but I think we could still run the risk of the prompt URL being too many characters for Twitter, but this should be an easy fix by either hashing it or using dub.co URLs.

isabensusan · 2024-05-07T16:01:49Z

Loving the exploration!! The UI is looking a bit too busy, I'll do a quick design for just icons to simplify

isabensusan · 2024-05-28T16:59:00Z

@nickytonline

Icon

import { HiOutlineShare } from "react-icons/hi";
<HiOutlineShare />

brandonroberts · 2024-05-30T15:51:39Z

This is ready for initial review @nickytonline @isabensusan

Screen.Recording.2024-05-30.at.10.49.31.AM.mov

Notes:

The Prompt URL will be shortened
If they aren't logged in, it doesn't auto-submit the prompt, but also doesn't force login
I can open a new PR if needed

nickytonline

The share menu works but it seems put of place. Beside the two thumbs up with some gap would probably look better and only show it once the prompt response is completed.

brandonroberts · 2024-05-31T19:43:17Z

Updated the placement of the share icon and the logic to only take the first item in the chat session.

Screen.Recording.2024-05-31.at.2.41.49.PM.mov

nickytonline

Works great @brandonroberts! One thing I wonder is for Twitter/X, we should truncate the prompt if it doesn't fit in a standard Tweet message length.

Also, a shorter URL would be great to increase the text count in a Tweet, but I imagine that unfurling potentially prevents an OG image from appearing?

brandonroberts · 2024-05-31T20:54:24Z

Works great @brandonroberts! One thing I wonder is for Twitter/X, we should truncate the prompt if it doesn't fit in a standard Tweet message length.

Also, a shorter URL would be great to increase the text count in a Tweet, but I imagine that unfurling potentially prevents an OG image from appearing?

Yea, we could truncate the prompt, or not include it as it will be in the OG image. The short URL shouldn't prevent the OG image from appearing

nickytonline · 2024-05-31T21:32:06Z

Works great @brandonroberts! One thing I wonder is for Twitter/X, we should truncate the prompt if it doesn't fit in a standard Tweet message length.
Also, a shorter URL would be great to increase the text count in a Tweet, but I imagine that unfurling potentially prevents an OG image from appearing?

Yea, we could truncate the prompt, or not include it as it will be in the OG image. The short URL shouldn't prevent the OG image from appearing

Good point that it's in the OG image so no need for it in the Tweet. Sounds good with that tweak and the short URL.

brandonroberts · 2024-06-03T13:58:25Z

@nickytonline The prompt text has been removed from the social media text in favor of the OG image

nickytonline

@brandonroberts, it works great on Desktop, but on iPhone at least, the menu share menu opens, but clicking any of the menu items, like share to X do nothing. It looks like Safari/iOS (and any other browsers on iPhone) block window.open in an async call.

There's some solutions in https://stackoverflow.com/questions/20696041/window-openurl-blank-not-working-on-imac-safari that should work.

pages/star-search/index.tsx

nickytonline · 2024-06-03T16:03:02Z

I tried this logged out and it fills the prompt input, but I'm not prompted to log in and can still run the prompt.

CleanShot.2024-06-03.at.11.59.13.mp4

brandonroberts · 2024-06-03T16:32:27Z

I tried this logged out and it fills the prompt input, but I'm not prompted to log in and can still run the prompt.

CleanShot.2024-06-03.at.11.59.13.mp4

That's intended behavior for a shared prompt, otherwise we have to connect and redirect them back just to see the results that someone else already shared.

Not sure if we should gate it if its shared

nickytonline · 2024-06-03T16:34:10Z

I tried this logged out and it fills the prompt input, but I'm not prompted to log in and can still run the prompt.
CleanShot.2024-06-03.at.11.59.13.mp4

That's intended behavior for a shared prompt, otherwise we have to connect and redirect them back just to see the results that someone else already shared.

Not sure if we should gate it if its shared

For that particular prompt I guess not, but what if they do another prompt?

brandonroberts · 2024-06-03T18:43:59Z

Not sure, but I'd lean towards letting them enter more prompts to start.

brandonroberts · 2024-06-03T18:57:57Z

@nickytonline will you try it again with iOS Safari and see if the window opens now?

nickytonline · 2024-06-03T21:26:05Z

@nickytonline will you try it again with iOS Safari and see if the window opens now?

Argh. Still no dice. If you have an Android phone, I can dig into this if you want.

BekahHW · 2024-06-06T12:57:16Z

@nickytonline it won't even let me type a prompt rn. I can use one of the suggested prompts though.

Screen.Recording.2024-06-06.at.8.56.16.AM.mov

BekahHW · 2024-06-06T13:04:07Z

Is this what we intend the tweet to look like? It doesn't really give the viewer information about what the prompt was unless you're looking at the url.

I couldn't get the preview to generate for LI.

BekahHW

There are some things I'm not clear on, and I've left a couple of comments. Noteably, it's not allowing me to use it when logged in and the LI share isn't working.

nickytonline · 2024-06-06T13:41:05Z

There are some things I'm not clear on, and I've left a couple of comments. Noteably, it's not allowing me to use it when logged in and the LI share isn't working.

I'm in the process of fixing the logged in experience. The check wasn't right. That fix will be up shortly.

I'll look at the LinkedIn (LI) share issue. For the LI share issue, does it not open LinkedIn for you? This was working previously.

nickytonline · 2024-06-06T14:00:33Z

Is this what we intend the tweet to look like? It doesn't really give the viewer information about what the prompt was unless you're looking at the url.

I couldn't get the preview to generate for LI.

That isn't loading the correct OG image. It should be the shared prompt one. 🤔 The copy looks fine though. Open to suggestions for better copy.

I'll look into the OG image issue as that wasn't an issue before.

BekahHW · 2024-06-06T14:15:09Z

Is this what we intend the tweet to look like? It doesn't really give the viewer information about what the prompt was unless you're looking at the url.
I couldn't get the preview to generate for LI.
![image](https://private-user-images.githubusercontent.com/34313413/337274207-

That isn't loading the correct OG image. It should be the shared prompt one. 🤔 The copy looks fine though. Open to suggestions for better copy.

If it's loading the correct OG image with the prompt, the copy is totally fine.

BekahHW · 2024-06-06T14:17:58Z

This is what I get for LI

Seems like it's taking too long to load.

nickytonline · 2024-06-06T14:26:31Z

This is what I get for LI
Seems like it's taking too long to load.

Gotcha. So it is working in that it's doing what it's supposed to, just not loading the OG image. That could be because it's the dev environment in the deploy preview. I'll take a peek.

nickytonline · 2024-06-06T14:27:19Z

The logged in experience and logged out experience should be fine now. I fixed the one time only prompt for a guest @BekahHW.

BekahHW · 2024-06-06T14:32:05Z

This is the full screenshot from LI

nickytonline · 2024-06-06T14:39:58Z

For the OG image, I think it's Twitter caching it from the deployment preview before we had the shared prompt OG image.

This is what I get when I share it on Twitter from the deploy preview. Same result as you.

But if I go to share it on Slack OR Discord, it's all good.

I think once this in beta it'll work properly, but Twitter caches aggressively so not sure how long it will take to start appearing correctly on Twitter.

nickytonline · 2024-06-06T15:57:53Z

I'm still investigating why the URL isn't shortened via https://github.com/open-sauced/app/pull/3324/files#diff-4e4544e2a158050d1656e7d4abaa1d7652c416028e87eb88f570db12ac922b21R241 . Is it because it's a deployment preview @brandonroberts?

  useEffect(() => {
    if (!promptMessage) {
      return;
    }

    const promptUrl = getSharedPromptUrl(promptMessage);
    let twitterUrl = "https://twitter.com/intent/tweet";
    let linkedinUrl = "https://www.linkedin.com/sharing/share-offsite/";
    const twitterParams = new URLSearchParams();
    const linkedinParams = new URLSearchParams();

    setTimeout(async () => {
      const shortUrl = await shortenUrl(`${promptUrl}`);

      twitterParams.set("text", `Here's my StarSearch prompt!\n\nTry it out for yourself. #StarSearch`);
      twitterParams.set("url", shortUrl);
      twitterUrl += `?${twitterParams.toString()}`;
      setTwitterShareUrl(twitterUrl);

      linkedinParams.set("url", shortUrl);
      linkedinUrl += `?${linkedinParams.toString()}`;
      setLinkedInShareUrl(linkedinUrl);
    }, 0);
  }, [promptMessage]);

brandonroberts · 2024-06-06T17:27:09Z

@nickytonline I don't think so. It could that our Dub dev account is at its limit on the free tier. Let me delete some of those links and let's try it again

brandonroberts · 2024-06-06T17:31:46Z

@nickytonline I cleared out all the non-essential links so it shouldn't return an error at least from the API side.

nickytonline · 2024-06-06T17:35:32Z

@nickytonline I cleared out all the non-essential links so it shouldn't return an error at least from the API side.

Looks like that fixed it. Thanks!

Looks like the URL shortener fixes OG images as well @BekahHW!

…rch-share

BekahHW · 2024-06-06T18:29:48Z

It definitely gets cut off on LI. If it's working though, I don't think it's worth blocking. We can create another issue to fix it.

nickytonline · 2024-06-06T18:32:09Z

It definitely gets cut off on LI. If it's working though, I don't think it's worth blocking. We can create another issue to fix it.

This is how LinkedIn previews it sometimes. If you post it, it will be fine.

## [2.34.0-beta.1](v2.33.1-beta.1...v2.34.0-beta.1) (2024-06-06) ### 🍕 Features * implemented StarSearch share prompt ([#3324](#3324)) ([c7ce190](c7ce190))

## [2.34.0](v2.33.0...v2.34.0) (2024-06-06) ### 🐛 Bug Fixes * now long words break so they fit in the StarSearch Share Prompt OG image ([#3532](#3532)) ([d752399](d752399)) * set `/star-search` user avatar after logging in ([#3531](#3531)) ([71b54b7](71b54b7)) * update user redirects to exclude notifications, settings, and card paths ([#3525](#3525)) ([efc893e](efc893e)) ### 🍕 Features * enforce upgrades on workspaces that exceed usage ([#3511](#3511)) ([d98d4b1](d98d4b1)) * implemented StarSearch share prompt ([#3324](#3324)) ([c7ce190](c7ce190))

nickytonline mentioned this pull request May 6, 2024

feat: Shareable StarSearch prompts #3325

Closed

1 task

brandonroberts force-pushed the nickytonline/star-search-share branch from 743c707 to d4f5006 Compare May 30, 2024 15:02

brandonroberts marked this pull request as ready for review May 30, 2024 15:51

nickytonline commented May 31, 2024

View reviewed changes

nickytonline commented Jun 3, 2024

View reviewed changes

pages/star-search/index.tsx Outdated Show resolved Hide resolved

nickytonline commented Jun 3, 2024

View reviewed changes

pages/star-search/index.tsx Outdated Show resolved Hide resolved

nickytonline force-pushed the nickytonline/star-search-share branch 4 times, most recently from 5fe7a42 to 6fefa5c Compare June 4, 2024 21:02

test: fixed some tests

cc7d86e

nickytonline requested a review from BekahHW June 6, 2024 12:43

nickytonline added 2 commits June 6, 2024 08:50

chore: removed test text

a89d558

chore: added some comments

bfa2cbc

BekahHW requested changes Jun 6, 2024

View reviewed changes

chore: fixed guest login check

541305e

brandonroberts approved these changes Jun 6, 2024

View reviewed changes

Merge remote-tracking branch 'origin/beta' into nickytonline/star-sea…

f04e435

…rch-share

BekahHW approved these changes Jun 6, 2024

View reviewed changes

nickytonline merged commit c7ce190 into beta Jun 6, 2024
25 checks passed

nickytonline deleted the nickytonline/star-search-share branch June 6, 2024 18:34

nickytonline mentioned this pull request Jun 7, 2024

feat: StarSearch as a standalone component #3538

Merged

4 tasks

feat: implemented StarSearch share prompt #3324

feat: implemented StarSearch share prompt #3324

Conversation

nickytonline commented May 6, 2024 • edited

Description

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Steps to QA

Tier (staff will fill in)

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

netlify bot commented May 6, 2024 • edited

✅ Deploy Preview for oss-insights ready!

netlify bot commented May 6, 2024 • edited

✅ Deploy Preview for design-insights ready!

bdougie commented May 6, 2024

bdougie commented May 6, 2024

nickytonline commented May 7, 2024

isabensusan commented May 7, 2024

isabensusan commented May 28, 2024 • edited

brandonroberts commented May 30, 2024 • edited

nickytonline left a comment

Choose a reason for hiding this comment

brandonroberts commented May 31, 2024

nickytonline left a comment

Choose a reason for hiding this comment

brandonroberts commented May 31, 2024

nickytonline commented May 31, 2024

brandonroberts commented Jun 3, 2024

nickytonline left a comment

Choose a reason for hiding this comment

nickytonline commented Jun 3, 2024

brandonroberts commented Jun 3, 2024

nickytonline commented Jun 3, 2024

brandonroberts commented Jun 3, 2024

brandonroberts commented Jun 3, 2024

nickytonline commented Jun 3, 2024 • edited

BekahHW commented Jun 6, 2024 • edited

BekahHW commented Jun 6, 2024 • edited

BekahHW left a comment

Choose a reason for hiding this comment

nickytonline commented Jun 6, 2024

nickytonline commented Jun 6, 2024 • edited

BekahHW commented Jun 6, 2024

BekahHW commented Jun 6, 2024

nickytonline commented Jun 6, 2024 • edited

nickytonline commented Jun 6, 2024

BekahHW commented Jun 6, 2024

nickytonline commented Jun 6, 2024 • edited

nickytonline commented Jun 6, 2024 • edited

brandonroberts commented Jun 6, 2024

brandonroberts commented Jun 6, 2024

nickytonline commented Jun 6, 2024 • edited

BekahHW commented Jun 6, 2024

nickytonline commented Jun 6, 2024

nickytonline commented May 6, 2024 •

edited

netlify bot commented May 6, 2024 •

edited

netlify bot commented May 6, 2024 •

edited

isabensusan commented May 28, 2024 •

edited

brandonroberts commented May 30, 2024 •

edited

nickytonline commented Jun 3, 2024 •

edited

BekahHW commented Jun 6, 2024 •

edited

BekahHW commented Jun 6, 2024 •

edited

nickytonline commented Jun 6, 2024 •

edited

nickytonline commented Jun 6, 2024 •

edited

nickytonline commented Jun 6, 2024 •

edited

nickytonline commented Jun 6, 2024 •

edited

nickytonline commented Jun 6, 2024 •

edited