UI Suggestions for sticky prompt
- Dominant language
- TypeScript
- Stars
- 193k
- Forks
- 42.4k
- PR merge metrics
- PR metrics pending
Description
Overall these suggestions aim to make it clear that the sticky prompt is one single element, rather than a separate navigation element.
## Suggestion 1: Keep prompt width and update corners to 'attach'
Instead of spanning the entire width of the chat, keep the sticky prompt the same width and right-aligned. Max width should match that of the inline prompt box. Then, once the prompt is 'attached' remove the top-left and top-right corner radius' so the element looks stuck to the top.
Image 1. Shorter prompt
Image 2. Maximum width prompt
## Suggestion 2: Wait to 'stick' until full prompt has passed
Today, the sticky prompt element appears when you get to the top of the prompt. Instead, wait to 'stick' the prompt until it's to the bottom of the prompt.
Image 3. Scroll through full longer prompt before showing the sticky prompt
## Suggestion 3: Fade out content as it passes to the left of prompt
Image 4: Opacity of the content lowers to 'fade' to the background color as it passes the bottom of the sticky prompt.
## Suggestion 4: Consolidate navigation elements
IF there's a sticky prompt, show a 'jump to top' icon to the left of the prompt.
IMO I don't think we need the 'jump to bottom' button at all (both next to prompt and at bottom of chat area), especially with the dot menu available.
Image 4. Little 'up' carrot to the left of prompt
## Suggestion 5: Right-align dot menu and only show when scrollbar shows
Use the same logic for when the scrollbar shows, and place it in the gutter between the chat content and the scrollbar. All other functionality should remain the same; it's just right-aligned. Optional: 'highlight' the current prompt with a higher contrast color (brighter in dark mode, darker in light mode).
Image 5: (Ignore other stuff that's in the chat area please lol)

Contributor guide
Assessment
This issue has not been assessed yet.