Open AI integration.

[lifeart]

Here is list of prompts we could support.

1. Prompt to fix template (if we unable to parse it):

Act as syntax fixer function. 
Count `$` as cursor position and keep it in output. 
Keep original spacing and formatting (do not add newlines). 
Your response should contain only valid json. 
Omit any text in response. 
Output should look like: `{ data: [content] }`. 
Fix this html to get valid handlebars (glimmer syntax): `<div> <div n="1><span><button>/</button><a {{foo$</div>`

[lifeart]

This prompt is not working properly:

Act as language server with knowledge of glimmer syntax, ember.js, javaScript and typescript.
You should be able to parse JavaScript, typeScript, handlebars(glimmer syntax).
You need to provide autocomplete for template part, marked as $$.
Your answer should match LSP format: https://microsoft.github.io/language-server-protocol/specifications/specification-current/ and contain array of possible completions for $$ position. Answer should be in JSON format. Response should contain only label and kind, insertText, description fields. Root of json object should be {"items": []}. Limit output to 5 items. Maximize relevance of completion items.
Completion items should make sense in scope of usage and have full valid handlebars paths, do not guess extra helpers or modifiers.
Completion items should be sorted by relevance, most relevant items should be on top of the list.
Template with applied completion should be valid, do not guess invalid paths.
Template with applied completion should make sense.
If you can't guess completion, return empty array.
this. in template refers to component instance (Script) and paths from component instance should be started from this..
@ refers to component arguments and if path is resolved from arguments, it should be started from @ and omit this.args..
As input you will get 2 files: Script and Template, and you need to guess autocomplete for marker ($$) position in template.
Template may have incorrect syntax, before guessing, you have to fix it.
Omit any text in response.

Script:

import Component from '@glimmer/component';

interface IAnswerCorrectnessWidgetComponentArgs {
  isCorrect: boolean;
}

function getRandomInt(min: number, max: number) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

export default class AnswerCorrectnessWidgetComponent extends Component<IAnswerCorrectnessWidgetComponentArgs> {
  maxImagesNumber = 8;
  get imagePath() {
    const randomNumber = this.getAllowedRandomNumber();
    return `${
      this.args.isCorrect ? 'victory/victory' : 'regret/regret'
    }${randomNumber}`;
  }
  getAllowedRandomNumber(): number {
    return getRandomInt(1, this.maxImagesNumber);
  }
  get itemStyle() {
    const img = this.imagePath;
    return `
      background-image:
        url('/pictures/${img}.jpg'),
        url('/pictures/${img}.png'),
        url('/pictures/${img}.jpeg'),
        url('/pictures/${img}.svg');
    `.trim();
  }
}

Template:

 <div
  class="{{style-namespace "answer-correctness-widget"}}
    flex flex-wrap flex-1 flex-col text-center justify-evenly pb-0 items-center rounded-large"
  ...attributes
>
  <h3 class="mt-6 mb-6 text-2xl font-semibold">
    {{if
      @isCorrect
      (t "exercise_messages.successfully")
      (t "exercise_messages.unsuccessfully")
    }}
  </h3>
  {{#if @isCorrect}}
    <div
      data-test-answer-correctness-widget
      data-test-is-correct={{@isCorrect}}
      data-test-isnt-correct={{not @isCorrect}}
      class="object-center"
    >
      <Ui::Icon::CorrectAnswer />
    </div>
  {{else}}
    {{! template-lint-configure no-inline-styles false }}
    <div
      data-test-answer-correctness-widget
      data-test-is-correct={{@isCorrect}}
      data-test-isnt-correct={{not @isCorrect}}
      aria-label={{html-safe (concat (t "exercise_messages.successfully"))}}
      class="answer-correctness-widget flex-1 mx-auto rounded"
    ></div>{{$$
  {{/if}}
</div>