Add error field and animation in inline completion

[Wzixiao]

References

Fixes #15343

Code changes

packages/completer/src/ghost.ts

const ERROR_INDICATOR_CLASS = 'jp-GhostText-errorIndicator';

export interface IGhostText {
  /**
   * An error occurred in the request.
   */
  isError?: boolean;
}

class GhostTextWidget{
 /**
  * Delete error animation.
  */
  private _removeErrorAnimation(dom: HTMLElement): void;
  
 /**
  * Mount the error animation dom and delete stream animation ghost dom.
  */
  private _mountErrorAnimation(dom: HTMLElement) : void;
  
  private _updateDOM(dom: HTMLElement) {
    if (this.options.isError) {
      this._mountErrorAnimation(dom);

      setTimeout(() => {
        this._removeErrorAnimation(dom);
      }, 2000);
      return;
    }
    ...
  }
}

packages/completer/src/inline.ts

export class InlineCompleter extends Widget {
  private _setText(item: CompletionHandler.IInlineItem) {
   ... 
    this._ghostManager.placeGhost(view, {
      from: editor.getOffsetAt(model.cursor),
      content: text,
      providerId: item.provider.identifier,
      addedPart: item.lastStreamed,
      streaming: item.streaming,
      onPointerOver: this._onPointerOverGhost.bind(this),
      onPointerLeave: this._onPointerLeaveGhost.bind(this),
      // new added
      isError: item.isError
    });
  }
}

packages/completer/src/reconciliator.ts

export class ProviderReconciliator implements IProviderReconciliator {
  private async _stream(
    item: CompletionHandler.IInlineItem,
    provider: IInlineCompletionProvider
  ) {
    ...
    for await (const reply of provider.stream(token)) {
      const updated = reply.response;
      const addition = updated.insertText.substring(item.insertText.length);
      item.insertText = updated.insertText;
      item.lastStreamed = addition;
      // new added
      item.isError = reply.response.isError;
      streamed.emit(CompletionHandler.StraemEvent.update);
    }
    ...
  }
}

packages/completer/src/tokens.ts

export interface IInlineCompletionItem extends IInlineCompletionItemLSP {
  token?: string;
  /**
   * Whether generation of `insertText` is still ongoing. If your provider supports streaming,
   * you can set this to true, which will result in the provider's `stream()` method being called
   * with `token` which has to be set for incomplete completions.
   */
  isIncomplete?: boolean;

  /**
   * This field is marked when an error occurs during a stream or fetch request.
   */
  isError?: boolean;
}

packages/completer/style/base.css

.jp-GhostText-errorIndicator::after {
  animation: jp-GhostText-error 2s infinite;
  animation-delay: 400ms;
  content: ' ';
  background: rgba(255, 0, 0, 0.5);
}

@keyframes jp-GhostText-error {
  0% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
  }
}

User-facing changes

deom_error_animation.mp4

[jupyterlab-probot]

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link:

[welcome]

Thanks for submitting your first pull request! You are awesome! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please make sure you followed the pull request template, as this will help us review your contribution more quickly.

You can meet the other Jovyans by joining our Discourse forum. There is also a intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

[krassowski]

Thank you for starting this @Wzixiao. Please see a few suggestions/questions below.

[krassowski]

Does it also need to be set in fetchInline?

[krassowski]

@Wzixiao are you interested in finishing this PR? Our merge window for 4.1 will close soon.

[krassowski]

How to test:

1. Checkout this PR
2. Modify the history provider by adding , error: {message: 'Completion error!'} in line 102:
   

   jupyterlab/packages/completer/src/default/inlinehistoryprovider.ts

   Lines 101 to 103 in a5f9207

   	items.push({
   	insertText: followingLines
   	});

3. Rebuild, start JupyterLab in dev mode
4. Enable history provider
5. Type something in a cell which is a prefix of previously run command in your history

[krassowski]

This is good to go from my side - thank you @Wzixiao for starting this! I will wait a while before merging in case if anyone else wants to review the latest version (but preferably further enhancements would be tracked in separate issues and addressed in a follow-up PRs).

[fcollonval]

thanks @Wzixiao and @krassowski

[welcome]

Congrats on your first merged pull request in this project! 🎉

Thank you for contributing, we are very proud of you! ❤️