IPromptSuggestion Interface

Defines prompt suggestion settings.

Namespace: DevExpress.AIIntegration.Blazor.Chat

Assembly: DevExpress.AIIntegration.Blazor.Chat.v25.1.dll

NuGet Package: DevExpress.AIIntegration.Blazor.Chat

Declaration

public interface IPromptSuggestion

Remarks

DevExpress Blazor AI Chat supports prompt suggestions – hints that guide users to possible actions. The component displays prompt suggestions (hint bubbles) when the chat area is empty.

Follow the steps below to enable and configure prompt suggestions:

1. Populate the component’s PromptSuggestions property with DxAIChatPromptSuggestion objects (hint bubbles).
2. Specify bubble content using Title and Text properties.
3. Use the PromptMessage property to specify the text to be displayed in the input field after a user clicks the corresponding suggestion.

Run Demo: AI Chat – Prompt Suggestions

Use the PromptSuggestionContentTemplate property to display any render fragment in a prompt suggestion (hint bubble). This template does not affect the default bubble rendering, such as paddings or inner content alignment.

Razor

<DxAIChat Initialized="ChatInitialized">
    <PromptSuggestionContentTemplate>
        <div class="hint-bubble">
            @context.Title
        </div>
    </PromptSuggestionContentTemplate>
    <PromptSuggestions>
        @foreach (var suggestion in PromptSuggestions) {
            <DxAIChatPromptSuggestion Title="@suggestion.Title" Text="@suggestion.Text" PromptMessage="@suggestion.PromptMessage" />
        }
    </PromptSuggestions>
</DxAIChat>

@code {
    List<PromptSuggestion> PromptSuggestions { get; set; }

    void ChatInitialized() {
        PromptSuggestions = PromptSuggestionsDataProvider.GetData();
    }
}

CSS

.hint-bubble {
    font: normal bold 16px/2 cursive;
    font-variant-caps: all-small-caps;
}

For more information about prompt suggestions in Blazor AI Chat, refer to the following section: AI Chat - Prompt Suggestions.