Display the prompt and output for the AIPrompt as one view

1 Answer 24 Views
AIPrompt
Steven
Top achievements
Rank 1
Steven asked on 11 Feb 2024, 05:22 PM

I am wondering if it is possible to change the AIPrompt to be a bit more like a chat then a separate request/prompt, and then having it as it currently operates as separate window/tab displaying the prompt and user response and the second tab having the output to the prompt.   It would seem to me that it is smoother to have it all in one, rather than separate.   Is there any solution?

 

Steve

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 14 Feb 2024, 11:52 AM

Hello Steve,

Yes, you can use AIPrompt templates to merge all the UI in one view:

<TelerikAIPrompt @ref="@AIPromptRef" @bind-Prompt="@Prompt">
    <AIPromptViews>
        <AIPromptPromptView ButtonIcon="@SvgIcon.TellAFriend">
            <ViewTemplate>
                <div style="height:300px;overflow:auto;">
                    @foreach (var item in Outputs)
                    {
                        <div @key="@item">
                            <h5>@item.Title</h5>
                            <p>@item.Text</p>
                        </div>
                    }
                </div>
            </ViewTemplate>
            <FooterTemplate>
                <TelerikTextArea @bind-Value="@Prompt" Rows="3" />
                <TelerikButton OnClick="@HandlePromptRequest">Send</TelerikButton>
            </FooterTemplate>
        </AIPromptPromptView>
    </AIPromptViews>
</TelerikAIPrompt>

@code {
    private TelerikAIPrompt? AIPromptRef { get; set; }

    private string Prompt { get; set; } = string.Empty;

    private List<AIOutput> Outputs { get; set; } = new();

    private void HandlePromptRequest()
    {
        Outputs.Add(new AIOutput($"New Title {DateTime.Now.Millisecond}", $"Response at {DateTime.Now.ToLongTimeString()} for {Prompt}"));

        Prompt = string.Empty;
    }

    public class AIOutput
    {
        public string Text { get; set; }

        public string Title { get; set; }

        public AIOutput(string title, string text)
        {
            Title = title;
            Text = text;
        }
    }
}

 

Regards,
Dimo
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Steven
Top achievements
Rank 1
commented on 14 Feb 2024, 04:11 PM

That worked very well, thank you for the quick response to this problem.

 

Steve

Tags
AIPrompt
Asked by
Steven
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or