@if (currentTheme === 'tailwind') {

<section class="bg-gray-50 dark:bg-gray-950">
    <div id="target" class="w-full" [ngStyle]="{ height: isMobileView ? '580px' : '720px' }">
        <ejs-dialog #dialog id="floating-chat" class="sm:!rounded-t !rounded-none overflow-hidden !border-0" width="400px" minHeight="580px" (open)="setDialogPosition($event)" (created)="dialog.show()" aria-label="chatbot" role="dialog">
            <ng-template #header>
                <div class="flex justify-between items-center bg-indigo-600 dark:bg-cyan-400 py-4 px-4 sm:px-6">
                    <div class="flex gap-4 items-center">
                        <div class="relative">
                            <span class="e-avatar e-avatar-circle e-icons e-user text-2xl"></span>
                            <div class="w-3 h-3 rounded-full bg-green-700 dark:bg-green-500 absolute right-0 bottom-0.5 border border-white dark:border-black"></div>
                        </div>
                        <p class="text-white font-semibold dark:text-gray-900">ChatBot</p>
                    </div>
                </div>
            </ng-template>
            <ng-template #content>
                <ejs-listview class="border-0 px-1 sm:px-3 py-4" [dataSource]="data" width="100%" height="100%" aria-label="chat conversations" role="list">
                    <ng-template #template let-data>
                        <div *ngIf="data.contact != 'ChatBot'; then senderTemplate; else receiverTemplate"></div>
                        <ng-template #senderTemplate>
                            <div class="flex justify-end items-end flex-col">
                                <div class="bg-gray-300 dark:bg-gray-700 px-3 py-2 rounded-lg rounded-se-none w-11/12">
                                    <div class="dark:text-gray-50">{{data.chat}}</div>
                                </div>
                                <p class="text-gray-500 dark:text-gray-400 mt-1 text-xs">{{data.contact}}</p>
                            </div>
                        </ng-template>
                        <ng-template #receiverTemplate>
                            <div class="flex justify-start gap-3 w-full">
                                <div>
                                    <span class="e-avatar e-avatar-circle e-avatar-small e-icons e-user !text-xl bg-gray-300 dark:bg-gray-700"></span>
                                </div>
                                <div class="w-full">
                                    <div class="px-3 py-2 rounded-lg rounded-ss-none bg-gray-100 dark:bg-gray-800">
                                        <div class="dark:text-gray-50">{{data.chat}}</div>
                                    </div>
                                    <p class="text-gray-500 dark:text-gray-400 mt-1 text-xs">{{data.contact}}</p>
                                </div>
                            </div>
                        </ng-template>
                    </ng-template>
                </ejs-listview>
            </ng-template>
            <ng-template #footerTemplate>
                <div class="pt-2 pb-6 px-4 sm:px-6">
                    <div class="e-card bg-gray-50 dark:bg-gray-800 dark:border-gray-600">
                        <div class="e-card-content text-center">
                            <p class="pt-4 pb-2.5">How would you rate our support?</p>
                            <input ejs-rating value=".5" precision="Exact" aria-label="rate our support" role="slider" />
                        </div>
                    </div>
                    <div class="e-bigger mt-3">
                        <ejs-textbox #textbox type="text" placeholder="Enter a message" (created)="textbox.addIcon('append', 'sf-icon-navigation-right-up border-0')" aria-label="enter a message" role="textbox"></ejs-textbox>
                    </div>
                </div>
            </ng-template>
        </ejs-dialog>
        <button #fab ejs-fab class="e-primary e-bigger e-round !hidden sm:!block" [iconCss]="toggleState?'sf-icon-message-chat-circle !text-2xl':'e-icons e-close !text-2xl'" position="BottomRight" type="button" target="#target" (click)="toggleDialog()" aria-label="show/hide chatbot" role="button"></button>
    </div>
</section>

} @else if (currentTheme === 'bootstrap5.3') {

<section class="bg-body">
    <div id="target" class="w-100" [ngStyle]="{ height: isMobileView ? '580px' : '720px' }">
        <ejs-dialog #dialog id="floating-chat" class="rounded-1 overflow-hidden border-0" width="400px" minHeight="580px" (open)="setDialogPosition($event)" (created)="dialog.show()" aria-label="chatbot" role="dialog">
            <ng-template #header>
                <div class="d-flex justify-content-between align-items-center bg-primary py-3 px-4">
                    <div class="d-flex gap-3 align-items-center">
                        <div class="position-relative">
                            <span class="e-avatar e-avatar-circle e-icons e-user fs-4"></span>
                            <div class="position-absolute end-0 bottom-0 border rounded-circle bg-success" style="width: 12px; height: 12px;"></div>
                        </div>
                        <p class="text-white fw-semibold fs-6 lh-sm m-0">ChatBot</p>
                    </div>
                </div>
            </ng-template>
            <ng-template #content>
                <ejs-listview class="border-0 px-2 px-sm-3 py-4" [dataSource]="data" width="100%" height="100%" aria-label="chat conversations" role="list">
                    <ng-template #template let-data>
                        <div *ngIf="data.contact != 'ChatBot';then senderTemplate;else receiverTemplate"></div>
                        <ng-template #senderTemplate>
                            <div class="d-flex justify-content-end flex-column align-items-end ps-5">
                                <div class="bg-body-secondary px-3 py-2 rounded-3" style="border-top-right-radius: 0px !important;">
                                    <div class="text-body">{{data.chat}}</div>
                                </div>
                                <p class="text-body-secondary small m-0">{{data.contact}}</p>
                            </div>
                        </ng-template>
                        <ng-template #receiverTemplate>
                            <div class="d-flex justify-content-start gap-3">
                                <div>
                                    <span class="e-avatar e-avatar-circle e-avatar-small bg-body-tertiary e-icons e-user fs-5"></span>
                                </div>
                                <div>
                                    <div class="px-3 py-2 rounded-3 bg-body-tertiary" style="border-top-left-radius: 0px !important;">
                                        <div class="text-body">{{data.chat}}</div>
                                    </div>
                                    <p class="text-body-secondary small m-0">{{data.contact}}</p>
                                </div>
                            </div>
                        </ng-template>
                    </ng-template>
                </ejs-listview>
            </ng-template>
            <ng-template #footerTemplate>
                <div class="px-3 px-sm-4 pb-4">
                    <div class="e-card bg-body-tertiary">
                        <div class="e-card-content p-3 text-center">
                            <p class="mb-1 fs-6 opacity-75">How would you rate our support?</p>
                            <input ejs-rating value=".5" precision="Exact" aria-label="rate our support" role="slider" />
                        </div>
                    </div>
                    <div class="e-bigger mt-3">
                        <ejs-textbox #textbox type="text" placeholder="Enter a message" (created)="textbox.addIcon('append', 'sf-icon-navigation-right-up border-0')" aria-label="enter a message" role="textbox"></ejs-textbox>
                    </div>
                </div>
            </ng-template>
        </ejs-dialog>
        <button #fab ejs-fab class="e-primary e-bigger e-round d-none d-sm-block" [iconCss]="toggleState?'sf-icon-message-chat-circle fs-4':'e-icons e-close fs-5'" position="BottomRight" type="button" target="#target" (click)="toggleDialog()" aria-label="show/hide chatbot" role="button"></button>
    </div>
</section>

}