feat: implemented StarSearch share prompt

[nickytonline]

Description

not ecopy link and analytics are not implemented in the POC.

Related Tickets & Documents

Closes #3325

Mobile & Desktop Screenshots/Recordings

Steps to QA

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]

✅ Deploy Preview for oss-insights ready!

Name	Link
🔨 Latest commit	a129c1a
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/665a283984308800089458fd
😎 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]

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	a129c1a
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/665a2839e1046f0008359b76
😎 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]

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]

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

[nickytonline]

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]

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

[isabensusan]

@nickytonline

Icon

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

[brandonroberts]

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]

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]

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]

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.