How to reduce white space between AI Prompt and User Response

[Harshad]

Hi,

The component works as expected.  I was wondering if I co do the followings.

1) There is a lot of white space between Assistant's response and User Response.  That makes fewer messages visible without scrolling.  How can I reduce the blank space?
2) Can I hide copy, like, dislike etc icons?
3) How can I disable user input section.  I want to disable it until some information is prepared and Assistant displays a message (question) first and also want to disable again at the end so that user can't keep it going
4) Also, I am starting the chat from AI by calling 

await AIAssist.ExecutePromptAsync("Start Session")

Is there any way to not display that message ("Start Session" in the above example)?
Thank you for your support.

Harshad

[Kirupa Karan Raj Kumar]

Hi Harshad,

Sorry for the delay in getting back to you.

Issue 1 and 2:   

We have validated the reported issue and confirmed that “Prevent default Response and Prompt Toolbars rendering in the AI AssistView ” as a bug from our end. The fix will be included with our upcoming weekly patch release scheduled for 23^th December 2025.

You can track the status of the bug report through this feedback link: https://www.syncfusion.com/feedback/71867

Issue 3 and 4:

After validating you query for disabling or enabling the footer, you can use the footer template for achieving the required functionality.

You can refer to the below code snippet.

 

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.InteractiveChat

 

<SfButton Content="Button" @onclick="btnclick"></SfButton>

 

<div class="aiassist-container" style="height: 350px; width: 650px;">

    <SfAIAssistView @ref="AIAssist" @bind-Prompt="textAreaValue" PromptRequested="PromptRequest">

        <AssistViews>

            <AssistView>

                <FooterTemplate>

                    <div class="custom-footer">

                        <textarea id="promptTextArea" disabled="@disableInput" @bind="textAreaValue" class="e-input" rows="2" placeholder="Enter your prompt here"></textarea>

                        <span id="sendPrompt" class="e-assist-send e-icons" @onclick="GenerateContent"></span>

                    </div>

                </FooterTemplate>

            </AssistView>

        </AssistViews>

    </SfAIAssistView>

</div>

 

@code {

    private SfAIAssistView AIAssist;

    private bool disableInput = true;

    private string textAreaValue = string.Empty;

    private async Task GenerateContent()

    {

        if (!string.IsNullOrEmpty(textAreaValue))

        {

            var value = textAreaValue;

            textAreaValue = String.Empty;

            await AIAssist.ExecutePromptAsync(value);

        }

    }

    private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)

    {

        await Task.Delay(1000);

        var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";

        args.Response = defaultResponse;

    }

    private void btnclick()

    {

        disableInput = !disableInput;

    }

}

<style>

    .custom-footer {

        display: flex;

        gap: 10px;

        padding: 10px;

        background-color: transparent;

    }

 

    #promptTextArea {

        width: 100%;

        padding: 10px;

        border-radius: 5px;

        border: 1px solid #ccc;

    }

 

    #sendPrompt {

        padding: 5px 15px;

        align-self: flex-end;

    }

</style>

            To know more about the FooterTemplate, kindly refer to this section - Templates in Blazor AI AssistView Component | Syncfusion.
 

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

Please get back to us if you need any further assistance.

Regards,

Kirupa.

[Harshad]

Thank you Kirupa and the team for your usual prompt and precise response!

[Harshad]

While I look forward to receiving the fix, this is my workaround that seems to be working.

Issue No. 2) Can I hide copy, like, dislike etc icons?

Workaround:  I added this and it hides it.  though leaves a lot of white space.

                <PromptToolbar Width="0px"></PromptToolbar>

                <ResponseToolbar Width="0px"></ResponseToolbar>

Issue No. 3) How can I disable user input section.  I want to disable it until some information is prepared and Assistant displays a message (question) first and also want to disable again at the end so that user can't keep it going

Solution: Your solution works perfectly fine.  Thanks.

Issue No. 4) Also, I am starting the chat from AI by calling  await AIAssist.ExecutePromptAsync("Start Session"). Is there any way to not display that message ("Start Session" in the above example)?
Workaround: If your code snippet above is supposed to fix it, it did not. So I implemented the following in PromptRequest method and it serves the purpose.

            if (!isSessionStarted) triageView.Prompts[0].Prompt = string.Empty;

            isSessionStarted = true;

Once again, it is an excellent component and your support is even better.

[Indrajith Srinivasan]

Harshad,

Thank you again for the kind words and for sharing your workarounds in such detail it's always great to hear that the component is working well for you overall, and your feedback helps us improve it further!

Issue No. 2: Hiding the copy, like, dislike, etc. icons

Your workaround with setting width will still occupy its space. To eliminate the extra white space, you can hide the prompt and response toolbars using the CSS which will completely hide the toolbars without affecting layout.

Sample - Link

CSS style:

<style>

   .e-output-container .e-toolbar,

   .e-prompt-toolbar {

        display: none;

   }

</style>

Also, we will consider fix for making the toolbar items empty in such cases. We will let you know once the fix in included with our patch release.

Issue No. 4: Not displaying the initial "Start Session" message

Thanks for sharing the details, Your approach of clearing the prompt in PromptRequest when the session hasn't started yet is a recommended solution.

In the meantime, if anything else comes up or if you'd like to discuss further customizations, feel free to reach out.

Regards,

Indrajith

[Harshad]

Thank you, Indrajith!
This works perfectly!

Thanks once again

[Vigneshwaran Govindharajan]

Harshad,

Thanks for the update, we're glad to hear that the issue was resolved. 

Please get back to us if you need any further assistance.

Regards,

Vigneshwaran

[Jacky April]

Hello,

Most of this can be handled with CSS and component options: reduce margins/padding to fix the white space, hide action icons via CSS or props if supported, and toggle the input field with a disabled state. For the initial ExecutePromptAsync("Start Session"), you’ll need to trigger the logic internally instead of sending a visible prompt, or filter that message out before rendering.

[Kirupa Karan Raj Kumar]

Hi Jacky,

Thank you for taking the time to share your suggestions.

Query: Handling the initial ExecutePromptAsync("Start Session") call internally or filtering the message before rendering:

We would like to understand your recommendation clearly. Could you please elaborate on how you envision this being implemented or what specific behavior you are suggesting for the component?

Your clarification will help us ensure we address your feedback accurately and consider it effectively for future improvements.

Regards,

Kirupa.