Partial accept button for inline completion in vscode extension

Question

I am trying to create a simple extension that displays inline code completion to the user if they type the comment "// Code to". The inline code that is displayed is fetched from an API and shown. For this, I have the below code:

context.subscriptions.push(
        vscode.languages.registerInlineCompletionItemProvider('*', {
            provideInlineCompletionItems(document: vscode.TextDocument, position: vscode.Position, context: vscode.InlineCompletionContext, token: vscode.CancellationToken) {
                // Get the line text where the cursor is
                const line = document.lineAt(position.line);
                const lineText = line.text;

                // Check if the line contains a comment asking for code
                if (lineText.includes("// Code to")) { 
                    // Extract the code request from the comment
                    const reqText = lineText.substring(lineText.indexOf("// Code to") + "// Code to".length).trim();

                    // Send request to API and receive the code to display
                    const receivedCode = getCode(reqText);

                    // Create the completion item with the received code
                    const completionItem = new vscode.InlineCompletionItem("\n"+receivedCode);

                    // Return the completion item
                    return [completionItem];
                }
            }
        })
    );

For now, the getCode() function is just returning a static code piece:

function getCode(reqText: string): string {
    // For demonstration purposes, return a placeholder code
    return `function App() {
    return (
      <div className="App">
        <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
            Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
            >
            Learn React
            </a>
        </header>
        </div>
    );
}`;
}

This code works and displays the placeholder text when I type "//Code to do xyz". However, I want to know if the below two are possible and if they are, how do I implement them?

1. How do I get that small popup that accepts either the entire code or partially accepts it one word at a time as is shown in the demo gif for the code sample for inline completion here . I looked at the code sample to try and understand how it works but that code itself is throwing errors and not working as I have mentioned here.
2. Is it possible that the inline code appears only after a certain command gets activated. For example, if I just type "// Code to do xyz", no inline completion should appear but if I execute a certain command after typing "// Code to do xyz", the inline code appears only then?