How can you add icons/buttons within TextEdit?

[sturlath]

I want to try to do something like this here

The addons are super simple but would it be possible to have the addons work in this way?

Here is some pseudo code

<Addons>
    <Addon AddonType="AddonType.Start.Top.Within" Padding="1">
       Chat Icon
    </Addon>
    <Addon AddonType="AddonType.Start.Bottom.Within" Padding="1">
      Counter code
    </Addon>
    <Addon AddonType="AddonType.Body">
        <TextEdit Placeholder="Placeholder" />
    </Addon>
    <Addon AddonType="AddonType.End.Top.Within" Padding="1">
       Mic Icon
    </Addon>
    <Addon AddonType="AddonType.End.Bottom.Within" Padding="1">
       Pin Icon
    </Addon>
</Addons>

Or will I have to do this by CSS?

I managed to make it look like this (I´m only needing this simplified version with a button in the end for now).

using this setup below

<Container>
    <Card>
        <CardBody>
            <div id="chatContainer" class="chat-container">
                @foreach (var message in messages)
                {
                    <div class="@message.CssClass">@message.Content</div>
                }
            </div>
        </CardBody>
        <CardFooter>
            <Addons>
                <Addon AddonType="AddonType.Body">
                    <TextEdit @bind-Text="userInput"
                              Placeholder="Type your message..."
                              KeyDown="HandleKeyDown" />
                </Addon>
                <Addon AddonType="AddonType.End">
                    <Button Class="chat-send-button" Color="Color.Light" Clicked="SendMessage">
                        <i class="fa fa-paper-plane" aria-hidden="true"></i>
                    </Button>
                </Addon>
            </Addons>
        </CardFooter>
    </Card>
</Container>

.chat-container {
    max-height: 500px;
    overflow-y: auto;
}

/* Custom styles for the TextEdit input */
.text-edit-input {
    flex-grow: 1;
    padding: 10px;
    border-radius: 20px;
    border: none;
    outline: none;
}

/* Custom styles for the Send button */
.chat-send-button {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

    /* Optional: Custom styles for the icon within the button */
    .chat-send-button i {
        color: #007bff;
    }

[stsrki]

Did you try to reproduce it by inspecting the HTML/CSS from the example showed in your first image?