Autocompletion and Syntax Highlight.

[kareltucek]

Here is some proof of concept of grammar-based autocompletion for Agent.

@ert78gb could you please look at the TODO and either implement it, or advice me on how to do that?

Also, if you have any nitpicks about my code, they are welcome. I am completely unacquainted with typescript customs 🙃.

[ert78gb]

Thx for your time. Now worries about typescript :) I could review it only on tomorrow.

[kareltucek]

No need to hurry!

[mondalaci]

Very fancy, but the default colors could be better:

At least, I'd use a less noticeable color for comments, like light gray. Assuming that there are color scheme presets, we could pick a better one.

[kareltucek]

(You realize that this PR is much more about autocomplete than it is about syntax highlight and that the point of adjusting syntax highlight was only to make it stop assigning colours mostly at random, right? Just checking.)

Anyway, what about this?

[kareltucek]

Also, this should be the list of built-in themes (may be strongly out of date), although I have no idea on how to activate them except for the 15-minute rebuild. (That can be done on line 36 of agent/packages/uhk-web/src/app/components/macro/action-editor/tab/command/macro-command-editor.component.ts in case you want to toy with it.)

    vs: The default light theme.
    vs-dark: The default dark theme.
    hc-black: A high contrast black theme.
    hc-white: A high contrast white theme.
    kiry-dark: A dark theme with cyan, purple, and dark colors.
    kiry-light: A light theme with cyan, purple, and light colors.
    light: A lighter version of the default light theme.
    dark: A darker version of the default dark theme.

(The above one is custom-coded.)

[mondalaci]

You realize that this PR is much more about autocomplete than it is about syntax highlight ...

Now, I do. :)

@ert78gb Please send me the full list of alternative themes and instructions for activating them. (If this issue is relatively time-consuming, the module configuration UI issue takes precedence over this one.)

[ert78gb]

@mondalaci we used the vs theme for light theme and custom uhk-dark theme that matches with the Agent dark theme. When the user changes the Agent theme then automatically changing the monaco editor theme too.. This PR contains a new uhk-light theme and Agent actives it when switching between themes.

I think have to extend the uhk-dark mode to colorise values and keywords.

[mondalaci]

@ert78gb Great idea! If there are multiple light/dark Monaco editor theme options, I'd like to try them.

[ert78gb]

@kareltucek I started to review PR, but I haven't spent too much time on it, because when I start running the browser version of the Agent then it did not start because the uhk_preset.js file in the naive-autocompletion-parser contains the reference to the node process module. The browser does not support nodejs specific features.

I did a quick insight into the naive-autocompletion-parser package. It downloads file from the firmware repo. Was it not caused an issue when the user does not have internet? Currently the firmware zip contains every resource that needs for the firmware upgrade and smart macro doc. If we liked to provide full customisable firmware maybe we have to read autocomplete and other setups from the firmware zip.

[ert78gb]

You can try the built in themes on the monaco editor playground The available themes listed by Karel in https://github.com/UltimateHackingKeyboard/agent/pull/2171#issuecomment-1930670051

set the theme: 'theme-id' of editor constructor parameters

[kareltucek]

I started to review PR, but I haven't spent too much time on it, because when I start running the browser version of the Agent then it did not start because the uhk_preset.js file in the naive-autocompletion-parser contains the reference to the node process module. The browser does not support nodejs specific features.

Ah, I see.

Fixed.

It downloads file from the firmware repo.

Yes. Pulling reference-manual.md should be solved analogous to the way the Agent and firmware handle the smart macro docs. (That's what the todo is about anyways.) I didn't realize that we need to extend the builds for that too though.

[kareltucek]

The available themes listed by Karel in https://github.com/UltimateHackingKeyboard/agent/pull/2171#issuecomment-1930670051

Actually, only 'vs' and 'vs-dark' work :-(.

[kareltucek]

Hmmm, in a new (non-saved) macro action, completions are listed in many duplicities. In a saved action, everything works right.

This could be caused by duplicit registration of the completion provider, except that I make sure I register the provider only once (via a static variable).

Any ideas?

[ert78gb]

@kareltucek

Actually, only 'vs' and 'vs-dark' work :-(.

Do you mean in Agent? Because in Agent maybe yes I have to investigate, but the playground supports all.

This could be caused by duplicit registration of the completion provider, except that I make sure I register the provider only once (via a static variable).

I am investigating it

[kareltucek]

Do you mean in Agent? Because in Agent maybe yes I have to investigate, but the playground supports all.

Hm, I believe I tried them in the playground.

[kareltucek]

@ert78gb Don't want to press you, but could you give me some pointers on how to:

• add the doc-dev/reference-manual.md to the list of files that are pulled from the web or from the firmware release
• retrieve the reference-manual.md from the service that takes care of pulling the relevant docs from github or firmware release

(I already added the reference-manual.md to the firmware build.)

[ert78gb]

@kareltucek No worries and sorry I don't have enough time to work on it.

• add the doc-dev/reference-manual.md to the list of files that are pulled from the web or from the firmware release
• retrieve the reference-manual.md from the service that takes care of pulling the relevant docs from github or firmware release

The smart macro document contains the link to the user guide. https://github.com/UltimateHackingKeyboard/firmware/blob/f794a563b2053144c2305c84fa5d3bd70c026f69/doc/dist/index.html#L595C48-L595C80

What is the goal of this md files? Would the same linking enough?

[kareltucek]

Ah, The autocompletion parser uses the grammar listed in the reference-manual.md, so I just need to get the file (as a string) and hand it over to the parser. Most handling (like retrieving the grammar from the file) is hidden in the naive-autocompletion-parser package.

Now I am doing it here which leads into the parser code. I guess we consider that to be just a temporary hack and want to replace it with whatever system you are using for the smart macro pane.

(Also, current code does not respect current firmware tag. Which is probably not a big deal at the moment, but given that we have the system in place, it would be nice to be consistent just on general principles.)

[ert78gb]

The smart macro doc servered via a webserver. The web server has been started when Agents start on a random port. Agent has an internal state. The port number of the web server stored in the smart macro substate.

Angular mainly follow OOP, so you have to inject everything. The HttpClient is a built in Angular http client. You can inject the HttpClient and the ngrx Store into the CustomCompletionProvider. With the smartMacroDocState selector you can query the smart macro substate from the store. Finally you could create any http request to the local web server.

The selectSmartMacroDocUrl selector already build the smart macro doc url. It also handles the specialities of the web and electron build. I suggest to create a new selector that calculate the base path of the firmware url and the selectSmartMacroDocUrl use this new selector.

I could give more guidance if you need. Or I could finish this PR on this week. I wanted to review it on Sunday but I had a unexpected program.

[kareltucek]

I could give more guidance if you need. Or I could finish this PR on this week. I wanted to review it on Sunday but I had a unexpected program.

More guidance would be appreciated. (Maybe just a few links to where these things are defined and used?)

(I find it desirable to learn the ropes when it comes to both Agent codebase in specific, and typescript ways of doing things in general.)

(I am still utterly lost, so somewhere between "give me links to all relevant code sites" and "complete coding-monkey instructions" is the right granularity.)

[ert78gb]

I am reviewing this PR on the weekend (Saturday is my current plan). I am trying to write really detailed review that maybe helps to understand Agent. The key framework here is Angular and not really the typescript. If you would like we could also create a video session after the review. If you will have questions maybe we could talk about it quicker than written.

Agent is a bit different from a simple Angular single page application because it running in electron and browser too. And we use Angular de facto state management library https://ngrx.io. Worth to review the documentation.

[kareltucek]

If you would like we could also create a video session after the review.

I would love to. I will be available in the evenings (sat, sun), if that works for you. Otherwise, I am afraid that written review will have to do.

[kareltucek]

@mondalaci @ert78gb

Could this get a bit higher priority now?

If no, then I would vote for merging this as it is now, as I believe that even this version brings a lot of value. Respecting current firmware version is definitely nice to have as well as the clean way of doing things, but at the end of the day, it is a rather minor improvement.

[ert78gb]

I think there are 2 issue before it:

• usb scripts don't run from none agent directory. It is ts-node and node 20 conflict issue
• jump to macro from status buffer error.

I hope both will solve on the next week and I can work on it

[kareltucek]

Ok sure!

[ert78gb]

superseded by #2270