How to implement autocompletion?

[boxer-code]

Hello everyone! I'm pretty new with using langium and trying to implement an autocompletion function for my simple grammar. But I didn't found an example for implementing autocompletion. Currently I'm trying something in the following scheme:

import { DefaultCompletionProvider, CompletionItem, CompletionParams } from 'langium';

export class MyDSLCompletionProvider extends DefaultCompletionProvider {

    override getCompletionItems(params: CompletionParams): CompletionItem[] {
        const items: CompletionItem[] = [];
        
        // Liste der verfügbaren IDs
        const idList = ['id1', 'id2', 'id3', 'id4'];

        idList.forEach(id => {
            items.push({
                label: id,
                kind: 10 // 10 steht für Variable
            });
        });

        return items;
    }
}

But it throws the error that the imports are wrong and can't be found. What do I need to import to extens the Completion Framework? Does anyone has a current mini example which I could use as a reference?
Thanks in advance!

[cdietrich]

import type { CompletionItem, CompletionParams } from "vscode-languageserver"
or
import type { CompletionItem, CompletionParams } from "vscode-languageserver-protocol"

[boxer-code]

Thank you very much! Now I'm struggling how I have to implement the autocompletion to suggest two keywords after a key. Could you provide a minimal example how to correctly implement autocompletion?
In my case I have the following grammar and want to implement that after simulation_tool, fssim and fsds get suggested:

grammar Flex

entry FlexModel:
    'simulation_tool:' simulator=SIMULATOR
    'map:' map_name=ID
    'faults:' faults+=Faults* ;

Faults:
    'target:' target=TARGET ',' 
    'types:'  types+=FaultType*
    ;

FaultType:
    'type:' type=FAULTTYPE ',' 
    ('behavior:' behavior=Behavior ',' )?
    'trigger_start:' triggerStart=Time ',' 
    'trigger_end:' triggerEnd=Time 
    ;

Time:
    value=INT unit=TIMEUNIT
;

Behavior:
    name='torque_limit_fraction' ':' severity=DECIMAL
;

hidden terminal WS: /\s+/;
terminal TARGET: /control/;
terminal SIMULATOR: /fssim|fsds/; 
terminal FAULTTYPE: /engine_damage/;
terminal TIMEUNIT: /s|ms/;
terminal ID: /[_a-zA-Z][\w_]*/;
terminal DECIMAL: /[0-9]+\.[0-9]+/;
terminal INT returns number: /[0-9]+/;
terminal STRING: /"(\\.|[^"\\])*"|'(\\.|[^'\\])*'/;

hidden terminal ML_COMMENT: /\/\*[\s\S]*?\*\//;
hidden terminal SL_COMMENT: /\/\/[^\n\r]*/;

[cdietrich]

export class HelloWorldCompletionProvider extends DefaultCompletionProvider {

    protected override  async  completionFor(context: CompletionContext, next: NextFeature, acceptor: CompletionAcceptor): Promise<void> {
        await super.completionFor(context, next, acceptor);
        if (next.property === "simulator" && context.node?.$type === "FlexModel") {
            acceptor(context, {
                label: "fssim",
                kind: CompletionItemKind.Value,
            })
        }
    }

}

[boxer-code]

Thanks! I'm getting a few errors. The first one is at the method declaration in line 1 and it's:

Property 'completionFor' in type 'HelloWorldCompletionProvider' is not assignable to the same property in base type 'DefaultCompletionProvider'.
  Type '(context: CompletionContext, next: NextFeature<AbstractElement>, acceptor: CompletionAcceptor) => Promise<...>' is not assignable to type '(context: CompletionContext, next: NextFeature<AbstractElement>, acceptor: CompletionAcceptor) => MaybePromise<...>'.
    Types of parameters 'context' and 'context' are incompatible.
      Property 'triggerKind' is missing in type 'import("/Users/user/flec3/node_modules/langium/lib/lsp/completion/completion-provider", { with: { "resolution-mode": "import" } }).CompletionContext' but required in type 'import("/Users/user/flec3/node_modules/vscode-languageserver-protocol/lib/common/protocol").CompletionContext'.ts(2416)
protocol.d.ts(1985, 5): 'triggerKind' is declared here.
(method) HelloWorldCompletionProvider.completionFor(context: CompletionContext, next: NextFeature, acceptor: CompletionAcceptor): Promise<void>

Could there be an error in my imports?

import { CompletionItemKind, CompletionContext} from "vscode-languageserver"
import { CompletionAcceptor, NextFeature } from "langium/lsp";
import { DefaultCompletionProvider } from "langium/lsp";

[msujew]

Yes, the CompletionContext is a langium/lsp type.

[boxer-code]

Ah, thanks! Now there are no errors being thrown but the autocompletion doesn't work. Instead of "fssim, fsds" I'm getting "faults:" as a suggestion. I tried to register it with the module file and added the following method in the completion file. What am I missing?

export function registerCompletionProvider(services: FlexServices) {
    const provider = new FlexCompletionProvider(services);
    services.lsp.CompletionProvider = provider;
}

My module file looks like this:

import { type Module, inject } from 'langium';
import { createDefaultModule, createDefaultSharedModule, type DefaultSharedModuleContext, type LangiumServices, type LangiumSharedServices, type PartialLangiumServices } from 'langium/lsp';
import { FlexGeneratedModule, FlexGeneratedSharedModule } from './generated/module.js';
import { FlexValidator, registerValidationChecks } from './flex-validator.js';
import { FlexCompletionProvider, registerCompletionProvider } from './completion-flex.js';

/**
 * Declaration of custom services - add your own service classes here.
 */
export type FlexAddedServices = {
    validation: {
        FlexValidator: FlexValidator
    }
    completion: {
        FlexCompletionProvider: FlexCompletionProvider
    }
}

/**
 * Union of Langium default services and your custom services - use this as constructor parameter
 * of custom service classes.
 */
export type FlexServices = LangiumServices & FlexAddedServices

/**
 * Dependency injection module that overrides Langium default services and contributes the
 * declared custom services. The Langium defaults can be partially specified to override only
 * selected services, while the custom services must be fully specified.
 */
export const FlexModule: Module<FlexServices, PartialLangiumServices & FlexAddedServices> = {
    validation: {
        FlexValidator: () => new FlexValidator()
    },
    completion: {
        FlexCompletionProvider: (services) => new FlexCompletionProvider(services)
    }
};

/**
 * Create the full set of services required by Langium.
 *
 * First inject the shared services by merging two modules:
 *  - Langium default shared services
 *  - Services generated by langium-cli
 *
 * Then inject the language-specific services by merging three modules:
 *  - Langium default language-specific services
 *  - Services generated by langium-cli
 *  - Services specified in this file
 *
 * @param context Optional module context with the LSP connection
 * @returns An object wrapping the shared services and the language-specific services
 */
export function createFlexServices(context: DefaultSharedModuleContext): {
    shared: LangiumSharedServices,
    Flex: FlexServices
} {
    const shared = inject(
        createDefaultSharedModule(context),
        FlexGeneratedSharedModule
    );
    const Flex = inject(
        createDefaultModule({ shared }),
        FlexGeneratedModule,
        FlexModule
    );
    shared.ServiceRegistry.register(Flex);
    registerValidationChecks(Flex);
    registerCompletionProvider(Flex);
    if (!context.connection) {
        // We don't run inside a language server
        // Therefore, initialize the configuration provider instantly
        shared.workspace.ConfigurationProvider.initialized({});
    }
    return { shared, Flex };
}

[cdietrich]

hmmm an not sure why you try to do it this way. here is my registration

export const HelloWorldModule: Module<HelloWorldServices, PartialLangiumServices & HelloWorldAddedServices> = {
    validation: {
        HelloWorldValidator: () => new HelloWorldValidator()
    },
    lsp: {
        CompletionProvider: (services) => new HelloWorldCompletionProvider(services)
    }
};