Inline Suggestions: Support Interaction With Suggest Widget

[hediet]

Currently, the suggest widget does not show automatically when typing the text as shown by an inline suggestion.
Also, when the suggest widget is shown, the inline suggestion is hidden.

We should explore allowing inline suggestion providers to collaborate with the suggestion widget.

[ayim]

This looks awesome! I'm super excited.

Imagine an experience where showing grey text suggestions (i.e. from Copilot) isn't blocked when the completions list is open.

This could also be super helpful for scenarios where the whole line suggestion isn't entirely correct; this seems to happen more often for ReactJS's where there's a lot of method chaining. I would use the completions list to incrementally write code, which would then update the grey text/whole line suggestion

[hediet]

This is our current idea:

• Invoke the inline suggestion provider even when the suggest widget is shown
  • But tell the inline suggestion provider the currently selected suggestion (and update if the selection changes)
• When the suggest widget shows and there was an inline suggestion visible and the suggest widget has an item that matches the first word of the inline suggestion, preselect that item.
• When the selected item of the suggest widget is a prefix of the inline suggestion, render the inline suggestion as ghost text with two parts: The prefix as usual and the remainder in italic font.
• When the suggest widget is shown, "tab" accepts the suggestion. A second "tab" accepts the remaining inline suggestion.

[ayim]

Hey! This looks great!

Based on dogfooding of the current experience from different members of the team, we really believe that this would contribute to a huge improvement Copilot, Intellicode, and other extensions that could use this API!

A couple thoughts here!

1. Based on user studies done for whole line completions in Visual Studio, we saw that users expected to be able to 'right arrow' to step into a grey-text prediction. This is particularly helpful when the inline suggest is not completely correct. Is this something we could considering adding to VSCode as a part of this API? Happy to demo this if unclear.

2. I would imagine that for potential Intellicode implementations, the selected item of the suggest widget should generally match the highlighted item in the suggest widget.

3. I know the existing design displays hints (i.e. esc, tab, etc) in a popup window. Have we considered using a bit after the prediction to hint instead? (i.e. [tab][tab] to accept). Would love to understand the design tradeoffs and rationale here!

CC'ing @DavidObando @vivlimmsft @iampiyusharora for input

[hediet]

Happy to demo this if unclear.

I would love to see a demo! I understand what you are asking, but I have problems imagining how this feature should work.

the selected item of the suggest widget should generally match the highlighted item in the suggest widget.

Can you elaborate on this?

Have we considered using a bit after the prediction to hint instead? (i.e. [tab][tab] to accept).

Yes, we discussed some ideas here https://github.com/microsoft/vscode-internalbacklog/issues/2204

[hediet]

A quick update, this is what I have so far:

It is very prototypish, so it is not available in insiders yet.

The following extension code causes the demonstrated behavior:

const provider = {
    provideInlineCompletionItems: async (document, position, context, token) => {
        if (context.selectedSuggestionInfo) {
            await new Promise(r => setTimeout(r, 500));
            return [{
                text: `${context.selectedSuggestionInfo.text}('${context.selectedSuggestionInfo.text}')`,
                range: context.selectedSuggestionInfo.replaceRange
            }];
        }
        // ...
    }
};

However, I don't like the style yet - it should be more obvious what is the suggestion (.log) and what the inline completion ((".log")). Making the inline completion italic is not enough.

[ayim]

Hey! Thanks for sharing the prototype, this is super exciting for VSCode users!

RE: #1 (right arrow behaviour), our implementation in VS is not yet finalized. @iampiyusharora can comment on the intended design.

RE: #2, please disregard; my wording was unclear and this seems to already have been addressed in the prototype.

RE #3 (hinting), I don't seem to have permissions to see the repo. Would you mind adding myself and @iampiyusharora?

RE #4 (suggestion vs inline completion display), I think @iampiyusharora has some comments on this. The current pattern in VS seems to be the opposite (suggestion window token is italicized, inline suggestion is normal). I wonder if this might be more obvious... either way we should agree on something to unify the experience between VS and VS Code!

[hediet]

RE #4 [...] The current pattern in VS seems to be the opposite (suggestion window token is italicized, inline suggestion is normal)

I think the style used for what you get when you hit "tab" should be consistent.
There are three cases:

• Inline Suggestion: function fib[(n: number): number { }]
• Autocompletion: console.[log]
• Combination: console.[log]⟦('hello world')]⟧

The text in [...] is what you get in each scenario when hitting tab. I think it should have the same style in all three cases.

RE #3 (hinting), I don't seem to have permissions to see the repo. Would you mind adding myself and @iampiyusharora?

I moved the discussion here: #130550

[hediet]

In our todays standup, we all agreed that italic is definitely not enough to highlight the difference. Something more explicit is needed, like this:

What are your thoughts on it?

[DavidObando]

My thoughts on it are: 🤩 that works for me! I'll let Aaron give us his impressions. One thing we might want to consider as well is the accessibility component of this. Do you have a plan on how this can be integrated with screen readers? I'm not familiar with VSCode's screen reader support.

[iampiyushar]

Hi team,

Wanted to share some thoughts.

For reference, the VS Win version has the following behavior:

First point, in VS Win there's italicized text to preview the selected item from intellisense list, and normal case for whole line completions.

Looking at the behavior described in the thread above, seems like VS Code has the opposite:
Normal case text preview of the selected item from intellisense list, and italicized text for whole line completions.

The second point, the VS Win version has the hint text: Tab Tab to Commit, and VS Code doesn't.

I think it would be a great idea from consistency standpoint to decide on a single direction between both products.

Thanks
Piyush Arora

[hediet]

Thanks for your thoughts!

First point, in VS Win there's italicized text to preview the selected item from intellisense list, and normal case for whole line completions.

That is intentional, as we currently don't want to make (Copilot) inline suggestions and the default suggestion preview italic.

I think the style used for what you get when you hit "tab" should be consistent in these three cases:

Inline Suggestion: function fib[(n: number): number { }]
Autocompletion: console.[log]
Combination: console.[log]⟦('hello world')]⟧
The text in [...] is what you get in each scenario when hitting tab. I think it should have the same style in all three cases.

The second point, the VS Win version has the hint text: Tab Tab to Commit, and VS Code doesn't.

We are leaning towards something like this (a single Tab):

After the uses presses a single tab, the tab will stay, indicating that the user can press tab twice.

[hediet]

During an internal discussion, we came to the conclusion that this explicit highlighting is too much.

I continued exploring ideas and prototyped this idea by @alexdima:

This idea could be extended to support multiple such markers, each indicating a "tab stop" until which pressing "tab" would accept the inline suggestion.

[hediet]

Implemented by #131183.