Angular Service

The InlineAIPromptService is an Angular service that provides APIs to create InlineAIPrompt instances dynamically.

This means that the service helps create InlineAIPrompt instances based on user interactions and without the need to define the components in a template.

For a practical example of using the service approach to integrate the InlineAIPrompt capabilities within existing components, see the Angular Data Grid AI Column Assistant article.

Getting Started

Angular dependency injection injects the InlineAIPromptService automatically in the constructor of the component.

To create new InlineAIPrompt instances using the service:

1. Inject the InlineAIPromptService in the constructor of your Angular component:

   ts

   constructor(private inlineAIPromptService: InlineAIPromptService) {}

2. To open the InlineAIPrompt, use the open method of the service and pass the configuration of the newly created InlineAIPrompt instance as an InlineAIPromptSettings parameter object:

   ts

   const popupRef: PopupRef = this.inlineAIPromptService.open({
       popupSettings: { anchor: this.anchorElement },
       placeholder: 'Ask AI to assist you...',
       promptCommands: [
           { id: 1, text: 'Summarize' },
           { id: 2, text: 'Explain' }
       ]
       ...
   });

3. To handle user interactions, subscribe to the events of the InlineAIPrompt instance by obtaining it through the popup reference:

   ts

   const promptInstance = popupRef.content?.instance;
   
   if (promptInstance) {
       promptInstance.promptRequest.subscribe((event: InlineAIPromptRequestEvent) => {
           // Handle the prompt request
       });
   
       promptInstance.commandExecute.subscribe((command: InlineAIPromptCommand) => {
           // Handle the command execution
       });
   }

The following example demonstrates how to use the InlineAIPromptService to dynamically create InlineAIPrompt instances.

Change Theme

Theme

Loading ...

Configuration Options

The InlineAIPromptService supports all the configuration options available in the template-based approach through the InlineAIPromptSettings configuration object. This provides you with the same level of flexibility and customization capabilities when creating InlineAIPrompt instances dynamically.

For detailed information about all available configuration options, refer to the Angular InlineAIPrompt Configuration article.

Basic Configuration

When opening an InlineAIPrompt through the service, you can configure essential properties such as promptValue, placeholder, width, and maxHeight:

ts

const popupRef = this.inlineAIPromptService.open({
    popupSettings: { anchor: this.anchorElement },
    placeholder: 'Ask AI about this content...',
    width: 600,
    maxHeight: 400
});

Interactive Elements

The service supports configuring promptCommands for predefined actions and outputActions for managing AI responses. These properties enable users to quickly apply common AI operations without typing custom prompts:

ts

const popupRef = this.inlineAIPromptService.open({
    promptCommands: [
        { id: 'summarize', text: 'Summarize' },
        { id: 'explain', text: 'Explain' }
    ],
    outputActions: [
        { name: 'copy' },
        { name: 'retry' }
    ]
});

Advanced Features

You can enable advanced features such as streaming for real-time responses and enableSpeechToTextButton for voice input. The popupSettings property allows you to control the positioning and behavior of the popup container:

ts

const popupRef = this.inlineAIPromptService.open({
    popupSettings: {
        anchor: this.anchorElement,
        anchorAlign: { horizontal: 'left', vertical: 'bottom' },
        popupAlign: { horizontal: 'left', vertical: 'top' }
    },
    streaming: true,
    enableSpeechToTextButton: true,
});

Dynamic Response Management

After opening an InlineAIPrompt through the InlineAIPromptService, you can access the component instance through the popup reference, which exposes all the events and properties needed to create intuitive AI-powered user experiences.

You can update the promptOutput property in real-time and control the streaming state to provide users with live feedback as AI responses are generated. This creates a more engaging and responsive user experience compared to traditional request-response patterns.

For a runnable demo of the streaming functionality, refer to the Streaming AI Responses with InlineAIPrompt article.

ts

constructor(public aiService: MyAIService) {}

private processAIRequest(userPrompt: string) {
    const promptInstance = popupRef.content?.instance;
    promptInstance.streaming = true;
    
    this.aiService.streamResponse(userPrompt).subscribe({
        next: (chunk) => {
            // Progressive response updates
            if (!promptInstance.promptOutput) {
                promptInstance.promptOutput = {
                    id: Date.now().toString(),
                    prompt: userPrompt,
                    output: chunk
                };
            } else {
                promptInstance.promptOutput.output += chunk;
            }
        },
        complete: () => promptInstance.streaming = false,
    });
}

Event Handling

To handle events when using the service approach, you need to access the InlineAIPrompt component instance through the popup reference and programmatically subscribe to the events you need.

For a complete list of all available events and their descriptions, refer to the Angular InlineAIPrompt Events article.

ts

const popupRef = this.inlineAIPromptService.open({...});
const promptInstance = popupRef.content?.instance;

if (promptInstance) {
    // Subscribe to events based on your requirements
    promptInstance.promptRequest.subscribe((event: InlineAIPromptRequestEvent) => {
        this.processAIRequest(event.prompt);
    });

    promptInstance.commandExecute.subscribe((command: InlineAIPromptCommand) => {
        this.processAICommand(command);
    });

    promptInstance.outputActionClick.subscribe((event: InlineAIPromptOutputActionClickEvent) => {
        this.handleOutputAction(event);
    });
}

Programmatic Control

The open method of the InlineAIPromptService returns a PopupRef that provides direct control over the popup lifecycle. This reference allows you to programmatically manage when and how InlineAIPrompt instances are displayed and closed within your application.

The popup reference exposes a close method that enables you to programmatically close the InlineAIPrompt popup at any time:

ts

private popupRef: PopupRef | null = null;

public openInlineAIPrompt(anchorElement: HTMLElement): void {
    // Store the popup reference for later control
    this.popupRef = this.inlineAIPromptService.open({...});
}

public closePopupRef(): void {
    // Programmatically close the popup
    if (this.popupRef) {
        this.popupRef.close();
        this.popupRef = null;
    }
}

The popup reference is essential for creating dynamic AI interactions where prompts need to appear and disappear based on user actions or specific business logic.

The following example demonstrates how you can store the InlineAIPrompt popup reference and use it to programmatically control when the popup appears:

Change Theme

Theme

Loading ...

Custom Styling and Containers

The InlineAIPromptService supports advanced customization through the popupSettings property. This property accepts an object of type InlineAIPromptPopupSettings, which allows you to control various aspects of the popup's behavior, positioning, and appearance.

For example, you can utilize the appendTo setting to append the InlineAIPrompt popup to a custom container in the DOM hierarchy. Additionally, you can apply custom classes through the popupClass property and enhance the appearance of the popup with custom CSS styling.

ts

const popupRef = this.inlineAIPromptService.open({
    popupSettings: {
        anchor: this.anchorElement,
        appendTo: this.customViewContainer,
        popupClass: 'custom-popup-class'
    }
});

Change Theme

Theme

Loading ...

Suggested Links

• Angular InlineAIPrompt Configuration
• Overview of the InlineAIPrompt
• API Reference of the InlineAIPromptComponent