Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Edit/Chat: Add ghost text alongside code #2611

Merged
merged 19 commits into from
Jan 17, 2024
Merged

Edit/Chat: Add ghost text alongside code #2611

merged 19 commits into from
Jan 17, 2024

Conversation

umpox
Copy link
Contributor

@umpox umpox commented Jan 8, 2024

Description

image

This PR:

  • Adds ghost decoration text for Edit and Chat commands
    • Only shows when a user has made a selection that spans multiple lines or covers all non-whitespace chars for a single line.
    • Debounced to avoid spamming
  • Adds the Cmd+K shortcut for Edit, Cmd+L shortcut for chat
  • Adds the onLanguage activation event to Cody.
    • Runs before onStartupFinished but not as part of VS Code startup. Helps ensure our decorator is registered first, as VS Code ranks decorators in the UI depending on the order they are registered.
    • Will only run if a file is open, so not bullet-proof but should be activated most of the time.

Still TODO (implementing in a follow up PR):

  • "Add to Chat" functionality from designs
  • Logic to fetch user overridden keyboard shortcuts and update labels accordingly
  • Do we want to show "Cmd+K to Generate" when the cursor is on an empty line?

Part of issue: #2009

Test plan

  1. Enable the ghost hints cody.internal.unstable
  2. Make a selection, check ghost text
  3. Make no selection, check no ghost text
  4. Select part of a single line, check no ghost text
  5. Check ghost text disappears when edit quick pick shows

@umpox umpox marked this pull request as draft January 8, 2024 16:58
@umpox umpox mentioned this pull request Jan 8, 2024
35 tasks
Base automatically changed from tr/edit-refactor to main January 9, 2024 08:57
@umpox umpox self-assigned this Jan 10, 2024
@umpox umpox marked this pull request as ready for review January 12, 2024 13:58
@umpox umpox requested review from toolmantim, abeatrix and a team January 12, 2024 13:58
@umpox umpox changed the title Edit/Chat: Add ghost text alongside code selections Edit/Chat: Add ghost text alongside code Jan 12, 2024
@umpox
Copy link
Contributor Author

umpox commented Jan 16, 2024

Chatted with @valerybugakov and it may be tricky to guarantee this doesn't show alongside a completion. There doesn't appear to currently be a way to tell if VS Code has shown a completion to the user. Our best solution here would be:

  • Hide the ghost text when we believe our completion is about to be shown, like here
  • Disable the "Generate" text variant completion if a non-Cody completion provider is registered. We can't, for example, check if a Copilot completion might be shown, so we would have to disable it here to guarantee no collisions

However we can, at least for now, limit this only to valid user selections. That may be enough to help encourage users to use the Edit/Chat functionality and also help ensure that this ghost text does not become annoying.

We should still consider how to make the "Generate" functionality more obvious:

  • We have "Ask Cody to Generate" as a code action still.
  • Perhaps we could show the "Generate" ghost text once per VS Code session?
  • Other ways to market this? Through the quick pick? Add it as a command option in the sidebar?

Copy link
Contributor

@abeatrix abeatrix left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great and it seems to be very powerful in helping us with the discoverability issue!

Left some non-blocking comments / questions.

private setGhostText(editor: vscode.TextEditor, position: vscode.Position): void {
this.activeDecoration = {
range: new vscode.Range(position, position),
renderOptions: { after: { contentText: `${EDIT_SHORTCUT_LABEL} to Edit, ${CHAT_SHORTCUT_LABEL} to Chat` } },
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(more of a question for design @toolmantim 😄 ) Does it allow us to add a Cody icon to indicate this comes from Cody? This is just me, but I always find it confusing because of I don't know where all the pop-ups and decorations come from 😅

image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great pointer

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alright this was a journey...

The API only allows contentIconPath OR contentText, not both. So it's very difficult to use an icon and text together.

It is technically possible though, because you could use an svg with the <text> element to achieve a similar effect.

image

I briefly looked into this here: #2781

Although it's possible, it's so hacky as I believe we would need to open an invisible webview just to extract certain variables out of VS Code (theme color hex value, line height, etc...)

There's some prior art: https://sourcegraph.com/github.com/cursorless-dev/cursorless. We could explore this more but IMO it has too many drawbacks to be viable right now. Tagging @toolmantim for interest

// If we find a new expanded selection position then we set it as the new ending position
// and if we don't then we fallback to the original selection made by the user
const newSelectionEndingPosition =
(await getSmartSelection(document, activeCursorEndPosition.line))?.end || selectionRange.end
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

imo the ghost text is less intrusive when showing up at the end of my current selection then at the end of line of my active cursor, but i understand this is very subjective so feel free to ignore this :)

cursor

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, it would be nice if the default place to show is at the "bottom" of any selection but eitherway works too.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I considered this, but implemented it as per designs from the issue.

There's a few different directions but I think the alternative here would be to use the selection start line as the ghost text line, rather than the selection end line (cursor position). The drawback of that would be that, for large selections the ghost text might go out of view. Although we could check for that.

I think the current approach works well for now, but cc @toolmantim for thoughts

Copy link
Contributor

@arafatkatze arafatkatze left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Such a sick PR.
So happy to see this 🚢

@umpox umpox merged commit 16378c9 into main Jan 17, 2024
15 checks passed
@umpox umpox deleted the tr/edit-ghost-text branch January 17, 2024 13:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants