microsoft / microsoft/vscode

UI Suggestions for sticky prompt

Open
#327,954 3 comments 0 reactions 2 assignees Claimed by @justschen View on GitHub
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

Image 2. Maximum width prompt
Image

## 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
Image

## 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.

Image

## 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
Image

## 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)

![Image](https://github.com/user-attachments/assets/dab78076-72a8-4ee0-82ca-10c46fc16a1b)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.